/* ── 2026-09-05 additions: light theme, KP basis + chips, question bank picker,
   notification inbox, preferences card, chart watermark. Loaded after style.css. */

/* ── Light theme tokens ─────────────────────────────────────────────────────
   The whole site is styled through the :root variables in style.css; a light
   page only needs the tokens re-mapped. Text tokens flip to deep navy, grounds
   to paper, accents darken for contrast (AA on white). */
html[data-theme="light"] {
  --space-black:    #F5F7FB;
  --space-navy:     #FFFFFF;
  --nebula-dark:    #ECF0F8;
  --nebula-mid:     #DFE6F2;
  --star-blue:      #0369A1;
  --star-cyan:      #0E7490;
  --nebula-purple:  #6D4AB8;
  --solar-gold:     #A16207;
  --earth-green:    #15803D;
  --lucky-green:    #15803D;
  --lucky-green-glow: rgba(21, 128, 61, 0.18);
  --mars-red:       #B91C1C;
  --moon-white:     #14213D;
  --glass-bg:       rgba(255, 255, 255, 0.88);
  --glass-border:   rgba(3, 105, 161, 0.18);
  --text-dim:       rgba(20, 33, 61, 0.72);
  color-scheme: light;
}
html[data-theme="light"] body { background: var(--space-black); color: var(--moon-white); }
html[data-theme="light"] #starfield { display: none; }
html[data-theme="light"] .glass-card { box-shadow: 0 6px 24px rgba(20, 33, 61, 0.06); }
html[data-theme="light"] .navbar { background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--glass-border); }
html[data-theme="light"] .footer { background: #FFFFFF; border-top: 1px solid var(--glass-border); }
html[data-theme="light"] .hero-title, html[data-theme="light"] .section-title, html[data-theme="light"] .page-title, html[data-theme="light"] .brand-text { text-shadow: none; }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea {
  background: #FFFFFF !important; color: var(--moon-white) !important; border-color: rgba(20, 33, 61, 0.18) !important;
}
html[data-theme="light"] ::placeholder { color: rgba(20, 33, 61, 0.45) !important; }
/* Inline colours used across older templates (#eee/#fff/#ccc/#aaa/#ddd) would
   vanish on paper — remap the common ones. */
html[data-theme="light"] [style*="color:#eee"], html[data-theme="light"] [style*="color: #eee"],
html[data-theme="light"] [style*="color:#fff"], html[data-theme="light"] [style*="color: #fff"],
html[data-theme="light"] [style*="color:#ddd"], html[data-theme="light"] [style*="color:#ccc"],
html[data-theme="light"] [style*="color:white"] { color: var(--moon-white) !important; }
html[data-theme="light"] [style*="color:#aaa"], html[data-theme="light"] [style*="color: #aaa"],
html[data-theme="light"] [style*="color:#9aa"], html[data-theme="light"] [style*="color:#888"],
html[data-theme="light"] [style*="color:#8890a0"] { color: var(--text-dim) !important; }
html[data-theme="light"] [style*="color:#4ecdc4"] { color: var(--star-cyan) !important; }
html[data-theme="light"] [style*="color:#daa520"], html[data-theme="light"] [style*="color:#ffd54f"] { color: var(--solar-gold) !important; }
html[data-theme="light"] [style*="background:rgba(255,255,255,0.05)"], html[data-theme="light"] [style*="background: rgba(255,255,255,0.05)"] { background: rgba(20, 33, 61, 0.04) !important; }
html[data-theme="light"] .btn-primary { color: #FFFFFF; }
html[data-theme="light"] .badge, html[data-theme="light"] .prx-chip, html[data-theme="light"] .dasha-chip { background: rgba(3, 105, 161, 0.08); }

/* ── Theme toggle button (navbar) ── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; margin-left: auto; margin-right: 8px;
  border: 1px solid var(--glass-border); background: var(--glass-bg); cursor: pointer; flex: 0 0 auto;
}
.theme-toggle:hover { border-color: var(--solar-gold); }
.theme-toggle:focus-visible { outline: 2px solid var(--solar-gold); outline-offset: 2px; }
.theme-toggle-icon { width: 16px; height: 16px; border-radius: 50%; background: var(--solar-gold); box-shadow: inset -5px -3px 0 0 var(--space-black); }
html[data-theme="light"] .theme-toggle-icon { box-shadow: none; background: radial-gradient(circle, var(--solar-gold) 45%, transparent 48%), conic-gradient(var(--solar-gold) 0 12%, transparent 12% 25%, var(--solar-gold) 25% 37%, transparent 37% 50%, var(--solar-gold) 50% 62%, transparent 62% 75%, var(--solar-gold) 75% 87%, transparent 87%); }
@media (max-width: 768px) { .theme-toggle { margin-left: 0; } }

/* ── Outcome chips + KP basis (prediction page) ── */
.kp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.6rem 0 1rem; }
.kp-chip {
  display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px;
  background: var(--glass-bg); border: 1px solid var(--glass-border); min-width: 120px; max-width: 100%;
}
.kp-chip-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim); }
.kp-chip-value { font-size: 0.92rem; font-weight: 600; color: var(--moon-white); overflow-wrap: anywhere; }
.kp-chip-verdict { border-color: rgba(105, 240, 174, 0.45); }
.kp-chip-verdict .kp-chip-value { color: var(--earth-green); }
.kp-chip-timing .kp-chip-value { color: var(--solar-gold); }
.kp-basis { padding: 0; margin-bottom: 1rem; }
.kp-basis summary { list-style: none; cursor: pointer; padding: 1rem 1.3rem; display: flex; flex-direction: column; gap: 4px; }
.kp-basis summary::-webkit-details-marker { display: none; }
.kp-basis summary::after { content: '▸'; position: absolute; right: 1.2rem; top: 1rem; color: var(--text-dim); transition: transform 0.2s; }
.kp-basis { position: relative; }
.kp-basis[open] summary::after { transform: rotate(90deg); }
.kp-basis-title { font-weight: 700; color: var(--solar-gold); letter-spacing: 0.4px; }
.kp-basis-sub { font-size: 0.85rem; color: var(--text-dim); }
.kp-basis-grid { display: grid; gap: 8px; padding: 0 1.3rem 1.2rem; }
.kp-basis-row { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(79, 195, 247, 0.06); }
html[data-theme="light"] .kp-basis-row { background: rgba(3, 105, 161, 0.06); }
.kp-basis-house { font-weight: 600; color: var(--moon-white); }
.kp-basis-house small { display: block; font-weight: 400; color: var(--text-dim); font-size: 0.75rem; }
.kp-basis-lords { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.9rem; }
.kp-basis-lords em { font-style: normal; color: var(--text-dim); font-size: 0.75rem; margin-right: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.kp-basis-sub-lord { font-weight: 700; color: var(--star-cyan); }
@media (max-width: 600px) { .kp-basis-row { grid-template-columns: 1fr; } }

/* ── Question bank picker (question form) ── */
.qb { margin-bottom: 0.8rem; }
.qb-label { font-size: 0.82rem; color: var(--text-dim); margin: 0 0 0.5rem; }
.qb-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.qb-cat, .qb-q {
  border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--moon-white);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 0.82rem; cursor: pointer; text-align: left;
}
.qb-cat:hover, .qb-q:hover { border-color: var(--solar-gold); }
.qb-cat.is-active { background: var(--solar-gold); color: var(--space-black); border-color: var(--solar-gold); }
.qb-questions { display: flex; flex-direction: column; gap: 6px; margin-top: 0.6rem; }
.qb-q { border-radius: 10px; }
.qb-q.is-active { border-color: var(--star-cyan); color: var(--star-cyan); }

/* ── Dashboard: notification inbox + preferences ── */
.inbox-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow: auto; }
.inbox-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; background: rgba(79, 195, 247, 0.06); border: 1px solid transparent; }
html[data-theme="light"] .inbox-item { background: rgba(3, 105, 161, 0.05); }
.inbox-item.is-unread { border-color: var(--glass-border); }
.inbox-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: transparent; }
.inbox-item.is-unread .inbox-dot { background: var(--star-cyan); }
.inbox-title { font-weight: 600; color: var(--moon-white); font-size: 0.92rem; }
.inbox-body { color: var(--text-dim); font-size: 0.84rem; margin-top: 2px; }
.inbox-meta { color: var(--text-dim); font-size: 0.72rem; margin-top: 4px; }
.inbox-cat { display: inline-block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 6px; background: rgba(255, 213, 79, 0.15); color: var(--solar-gold); margin-right: 6px; }
.inbox-hide { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; line-height: 1; }
.inbox-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 0.6rem; }
.inbox-filter { border: 1px solid var(--glass-border); background: transparent; color: var(--text-dim); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 0.78rem; cursor: pointer; }
.inbox-filter.is-active { color: var(--moon-white); border-color: var(--solar-gold); }
.inbox-badge { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--mars-red); color: #fff; font-size: 0.72rem; text-align: center; margin-left: 6px; vertical-align: middle; }
.pref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pref-field label { display: block; font-size: 0.78rem; color: var(--text-dim); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.pref-field select { width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--space-navy); color: var(--moon-white); font: inherit; }
.pref-note { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.5rem; }

/* ── Chart watermark (chart page) ── */
.chart-block[data-watermark]:not([data-watermark="none"])::before {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0.07; font-size: min(60vw, 420px); line-height: 1; color: var(--solar-gold); z-index: 0;
}
.chart-block[data-watermark="om"]::before { content: 'ॐ'; font-family: 'Noto Sans Devanagari', 'Mangal', serif; }
.chart-block[data-watermark="crescent"]::before { content: '☾'; }
.chart-block[data-watermark="lotus"]::before { content: '❁'; }
.chart-block[data-watermark] > * { position: relative; z-index: 1; }