/* Redesign P0 (27 Oct 2026): "Night sky over paper". Tokens from redesign-proposal.md §5.
   The shared shell (fonts, tokens, base resets, top bar, tab bar, footer, type scale and the
   primary/quiet/gold/text buttons) lives in shell.css, loaded before this file. */
button:disabled { opacity:.55; cursor:wait }
.glyph { font-family:var(--glyph); font-variant-emoji:text }
.shell { min-width:0 }
main { min-width:0 }
main > section[id$="-view"], main > .notice { max-width:1200px; margin:0 auto; padding:32px var(--gutter) 0 }

/* Type: h1, h2, .eyebrow, .serif-title and .small-note are in shell.css */
.page-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; gap:16px }
.page-heading p { color:var(--muted); margin:0 }
.sky-button { background:transparent; color:var(--sky-text); border:1px solid #ffffff55; padding:10px 18px; border-radius:999px; font-size:var(--fs-5); min-height:44px }
.sky-button:hover { background:#ffffff14 }
.sky-link { background:none; border:0; color:var(--gold); text-decoration:underline; font-size:var(--fs-5); padding:10px 0; min-height:44px }
.sky-fine { color:var(--sky-muted); font-size:var(--fs-6); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px }
.card-head { display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:12px }

/* Sky band: full-bleed navy carrying the live layer; long Hindi text never sits on it */
.sky-band { background:radial-gradient(120% 140% at 85% 10%, var(--sky-2) 0%, var(--sky) 60%); color:var(--sky-text); margin:-32px calc(50% - 50vw) 0; padding:44px calc(50vw - 50%) 40px }
.sky-inner { max-width:860px }
.sky-eyebrow { margin:0 0 14px; font-size:var(--fs-7); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold) }
.sky-headline { font-family:var(--serif); font-weight:600; font-size:var(--fs-1); line-height:1.1; margin:0 0 14px; color:var(--sky-text) }
:lang(hi) .sky-headline { font-size:var(--fs-1); line-height:1.35 }
.sky-sub { color:#E4DED2; max-width:540px; margin:0 0 18px; font-size:var(--fs-4); }
.sky-chips { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px }
.sky-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; background:#ffffff14; color:var(--sky-text); font-size:var(--fs-5); min-height:40px }
:lang(hi) .sky-chip { font-weight:500; font-size:var(--fs-5); }
.sky-band .gloss-chip { color:var(--sky-text); text-decoration-color:#ffffff99 }

/* Timing ribbon: sunrise to sunset; grey windows, Abhijit in gold on its own lane */
.ribbon-card { border:1px solid #ffffff22; border-radius:var(--radius); background:#ffffff08; padding:20px 22px }
.ribbon-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap }
.ribbon-head h2 { font-size:var(--fs-4); color:var(--sky-text) }
.ribbon-now { font-size:var(--fs-6); color:var(--sky-muted) }
.ribbon-ends { display:flex; justify-content:space-between; margin:10px 0 0; font-size:var(--fs-6); color:var(--sky-muted) }
.day-ribbon { position:relative; height:74px; margin:14px 0 6px }
.ribbon-track { position:absolute; left:0; right:0; top:18px; height:4px; border-radius:2px; background:#ffffff33 }
.ribbon-seg { position:absolute; top:10px; height:20px; border-radius:6px; background:#B9C1CE55; border:1px solid #D3D8E0aa }
.ribbon-seg.gold { top:36px; height:14px; background:var(--gold); border-color:var(--gold); opacity:.9 }
.ribbon-label { position:absolute; top:54px; transform:translateX(-50%); font-size:var(--fs-6); color:var(--sky-muted); white-space:nowrap }
.ribbon-now-mark { position:absolute; top:12px; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px var(--sky) }
.ribbon-next { margin:6px 0 0; font-size:var(--fs-5); color:var(--sky-text) }
.ribbon-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px }
.ribbon-legend { font-size:var(--fs-6); color:var(--sky-muted); max-width:520px }
.swatch { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-1px; margin-right:6px; background:#B9C1CE88 }
.swatch.gold { background:var(--gold) }
@media(prefers-reduced-motion:no-preference){ .ribbon-now-mark{ animation:pulse 3s ease-in-out infinite } @keyframes pulse{50%{box-shadow:0 0 0 7px #E8A33D33}} }

/* Today below the band */
.today-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; grid-template-areas:"chart side" "ask side" "week side" "rashi rashi"; gap:var(--gutter); margin-top:32px; align-items:start }
.tg-chart { grid-area:chart }
.today-side { grid-area:side; display:flex; flex-direction:column; gap:16px }
.tg-rashi { grid-area:rashi }
/* Today's two h3s (the rashifal date line, the timing windows) take the serif heads and the scale, not Inter */
.tg-rashi h3 { font-family:var(--serif); font-size:var(--fs-4); }
#timing-windows h3 { font-family:var(--serif); font-size:var(--fs-3); }
.tg-week { grid-area:week }
.tg-ask { grid-area:ask }
.week-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin-top:12px }
.week-day { display:block; text-align:center; padding:8px 4px; border-radius:10px; background:var(--soft,#f4f1ea); border:0; color:inherit; font:inherit; cursor:pointer; min-width:0 }
.week-day > span { display:block }
.week-day:hover { background:var(--teal-soft) }
.week-day[aria-pressed="true"] { background:var(--teal-soft); box-shadow:inset 0 0 0 2px var(--teal) }
.week-selected { margin:12px 0 0; color:var(--ink); font-size:var(--fs-5); line-height:1.5 }
.week-selected:empty { display:none }
.week-day.today { outline:2px solid var(--teal) }
.week-day .wd-name { font-size:var(--fs-6); color:var(--muted) }
.wd-glyph { font-size:var(--fs-4); }
.wd-sign { font-size:var(--fs-6); }
.wd-word { font-weight:600; font-size:var(--fs-6); }
.week-tomorrow { margin:12px 0 0; color:var(--muted); font-size:var(--fs-6); line-height:1.5 }
.week-tomorrow:empty { display:none }
.week-who { margin:0 }
.wd-swar { margin-top:4px; font-family:var(--glyph); font-variant-emoji:text; font-size:var(--fs-4); line-height:1.3; color:var(--muted) }
.wd-swar.right { color:var(--ink) }
.week-legend { margin:10px 0 0 }
.side-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px }
.side-card h3 { margin:6px 0 4px; font-family:var(--serif); font-size:var(--fs-4); font-weight:600 }
.side-card p { margin:0; color:var(--muted); font-size:var(--fs-6); line-height:1.5 }
.field-label { color:var(--muted); font-size:var(--fs-7); letter-spacing:.1em; font-weight:600; text-transform:uppercase }
.swar-streak { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:var(--fs-5); }
#swar-done[disabled] { opacity:.6 }
.side-card #swar-what, .side-card #swar-do { margin-top:6px }
.field-label .gloss-chip { letter-spacing:0; text-transform:none; font-weight:500 }
.phone-only { display:none }
.today-empty p { color:var(--muted) }
.timing-detail { margin-top:var(--gutter) }
.timing-detail > summary { font-weight:600 }
.rashifal-picker { flex-direction:row!important; align-items:center; gap:10px!important; color:var(--muted); font-weight:400!important }
.rashifal-picker select { width:auto; min-height:44px; border-radius:999px; padding:0 32px 0 14px }
.rashi-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px }
.rashi-tabs button { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px; padding:8px 16px; min-height:44px; font-size:var(--fs-5); }
.rashi-tabs button[aria-selected="true"] { background:var(--teal); border-color:var(--teal); color:white }

/* Life-chapter bar (Your chart today, My chart header): neutral fills, no verdict colours */
.chapter-eyebrow { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline; margin-top:6px }
.chapter-title { font-family:var(--serif); font-size:var(--fs-4); font-weight:600; margin:6px 0 10px }
.chapter-bar { display:flex; min-height:34px; border-radius:8px; overflow:hidden; background:var(--soft); font-size:var(--fs-6); }
/* Labels wrap onto a second line instead of being clipped, on the phone and on desktop. */
.chapter-bar span { display:flex; align-items:center; padding:6px 10px; white-space:normal; overflow-wrap:anywhere; line-height:1.25; min-width:0 }
.chapter-bar .now { background:var(--teal-soft); color:var(--teal); font-weight:600; position:relative }
.chapter-bar .elapsed { position:absolute; inset:0 auto 0 0; background:#1E5A5222 }
.chapter-bar .next { background:#F6EBDD; color:var(--saffron); border-left:3px solid var(--teal) }
.chapter-note { color:var(--muted); font-size:var(--fs-6); margin:8px 0 14px }
.today-chart-rows { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:12px 0 }
.today-chart-rows > div { background:var(--soft); border-radius:14px; padding:14px 16px }
.today-chart-rows dt { font-size:var(--fs-7); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.today-chart-rows dd { margin:6px 0 0; min-width:0; overflow-wrap:anywhere }
.today-moon { margin:0 0 6px; font-family:var(--serif, Georgia, serif); font-size:var(--fs-4); font-weight:600 }
.today-moon-spans, .today-withheld { margin:4px 0 }
.today-do { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:12px 0 }
.today-do > div { background:var(--soft); border-radius:14px; padding:14px 16px }
.today-do dt { font-size:var(--fs-7); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.today-do dd { margin:6px 0 0; min-width:0; overflow-wrap:anywhere }
.today-running { margin:10px 0 2px }
.today-lucky { margin:10px 0 2px }
.lucky-dot { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; vertical-align:-1px }

/* Glossary chips: plain label first, the term as a dotted-underline chip */
.gloss-chip { display:inline; position:relative; border:0; padding:0; margin:0; background:none; color:inherit; font:inherit; text-decoration:underline dotted; text-underline-offset:3px; text-decoration-thickness:1px; cursor:help }
.gloss-chip::after { content:""; position:absolute; inset:-10px -4px }
.gloss-chip[aria-expanded="true"] { text-decoration-style:solid }
/* Inline chips inside reading sentences (AstroGlossary.glossText): the words keep the sentence's
   own type, line height and wrapping; only a light dotted underline marks them. The tap area stays
   inside the line so it never covers the line above or below. */
.gloss-chip.inline { display:inline; min-height:0; padding:0; margin:0; border:0; border-radius:0; background:none; color:inherit; font:inherit; line-height:inherit; letter-spacing:inherit; text-align:inherit; text-transform:inherit; vertical-align:baseline; white-space:normal; text-decoration:underline dotted; text-decoration-thickness:1px; text-underline-offset:2px; -webkit-box-decoration-break:clone; box-decoration-break:clone }
.gloss-chip.inline::after { inset:-2px 0 }

.gloss-pop { position:absolute; z-index:40; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:0 18px 50px #0F1B2D33; font-size:var(--fs-5); }
.gloss-pop p { margin:0 0 8px; line-height:1.55 }
.gloss-term { font-weight:600 }
.gloss-learn { font-weight:600 }
.term-tags { display:none; flex-wrap:wrap; gap:8px; margin:10px 0 0 }
.plain-pair { white-space:normal }

/* First run (four steps) */
.first-run { min-height:calc(100vh - 68px); padding-top:40px; padding-bottom:48px }
.fr-inner { max-width:520px; margin:0 auto; text-align:center }
.fr-progress { display:flex; justify-content:center; gap:6px; margin:0 0 28px }
.fr-progress span { width:6px; height:6px; border-radius:3px; background:#ffffff44 }
.first-run[data-step="welcome"] .fr-progress span:nth-child(1), .first-run[data-step="details"] .fr-progress span:nth-child(2), .first-run[data-step="calculating"] .fr-progress span:nth-child(3), .first-run[data-step="reveal"] .fr-progress span:nth-child(4) { width:22px; background:var(--gold) }
.fr-ring svg { width:120px; height:auto; display:block }
.first-run[data-step="welcome"] { min-height:auto; padding:28px 0 32px }
.first-run[data-step="welcome"] .fr-inner { max-width:600px }
.first-run[data-step="welcome"] .fr-progress { margin-bottom:20px }
.fr-card { display:flex; align-items:center; gap:20px; max-width:560px; margin:0 auto; padding:24px; background:var(--sky-2); border:1px solid #ffffff22; border-radius:16px; text-align:left }
.fr-card-body { flex:1; min-width:0 }
.fr-card .fr-ring { flex:none }
.fr-card .sky-eyebrow { margin:0 0 8px }
.fr-card .fr-title { font-size:var(--fs-2); margin:0 0 14px }
:lang(hi) .fr-card .fr-title { font-size:var(--fs-2); }
.fr-needs { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.fr-needs li { display:inline-flex; align-items:center; gap:6px; background:#ffffff14; border-radius:999px; padding:6px 12px; font-size:var(--fs-5); color:var(--sky-text) }
.fr-check { width:16px; height:16px; flex:none; fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round }
.fr-card .fr-primary { margin-top:0 }
.fr-card .small-note { color:var(--sky-muted); margin:10px 0 0; font-size:var(--fs-6); }
.ring-line { fill:none; stroke:#ffffff33 }
.ring-glyphs text { fill:var(--sky-muted); font:15px var(--glyph); text-anchor:middle; dominant-baseline:middle }
.ring-sun { fill:#E8A33D33; stroke:var(--gold) }
.ring-dot { fill:var(--gold) }
@media(prefers-reduced-motion:no-preference){ .ring-glyphs{ transform-origin:100px 100px; animation:turn 240s linear infinite } @keyframes turn{to{transform:rotate(360deg)}} }
.fr-title { font-family:var(--serif); font-weight:600; font-size:var(--fs-1); line-height:1.15; margin:0 0 12px; color:var(--sky-text) }
:lang(hi) .fr-title { font-size:var(--fs-1); line-height:1.4 }
.fr-lede { color:#E4DED2; font-size:var(--fs-4); margin:0 0 28px }
.fr-primary { width:100%; font-size:var(--fs-4); min-height:52px; margin-top:8px }
.fr-link { display:block; margin:14px auto 0; background:none; border:0; color:var(--gold); text-decoration:underline; text-underline-offset:3px; min-height:44px; font-size:var(--fs-5); }
.fr-form { text-align:left; margin-top:20px }
.fr-form label { color:var(--sky-text); margin-bottom:16px }
.fr-form input, .fr-form select { background:var(--sky-3); color:var(--sky-text); border:1px solid #ffffff2e; border-radius:12px; min-height:48px }
.fr-form select { background:var(--sky-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FAF7F0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 12px 8px; padding:0 32px 0 14px }
.fr-form input::placeholder { color:#A9B2C0 }
.fr-form input[type="date"], .fr-form input[type="time"] { color-scheme:dark }
.fr-note { color:var(--sky-muted); font-size:var(--fs-6); margin:6px 0 14px; line-height:1.5 }
/* The form's status line takes no space until a status or result is written into it. */
#birth-status:empty { display:none }
.fr-fine { color:var(--sky-muted); font-size:var(--fs-6); margin:4px 0 18px; text-align:left }
.fr-live { min-height:1.5em; color:var(--sky-text); font-size:var(--fs-5); line-height:1.5; margin:2px 0 10px }
/* After submit the form folds to one line and the result renders under it, in the same step. */
.fr-summary { display:none; text-align:center; color:var(--sky-text); font-size:var(--fs-4); margin:0 0 4px }
.fr-inline-link { background:none; border:0; padding:0 2px; min-height:44px; color:var(--gold); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer }
.first-run[data-step="calculating"] .fr-summary, .first-run[data-step="reveal"] .fr-summary { display:block }
/* The place, the separator and Edit never part: a wrap puts them together on the next line. */
.fr-tail { white-space:nowrap }
.fr-tail .fr-inline-link { vertical-align:middle }
.first-run[data-step="calculating"] #birth-editor, .first-run[data-step="reveal"] #birth-editor, .first-run[data-step="calculating"] #fr-cancel, .first-run[data-step="reveal"] #fr-cancel { display:none }
.fr-sub { border-top:1px solid #ffffff1f; margin-top:12px; padding-top:8px }
.fr-sub .fr-arc { width:96px; height:96px; margin:16px auto 12px }
.fr-sub .fr-arc-glyph { font-size:var(--fs-2); }
.fr-sub .fr-title { font-size:var(--fs-3); }
.fr-sub .fr-lede { margin-bottom:16px }
.fr-result .sky-eyebrow { margin:12px 0 14px }
.tq { border:0; padding:0; margin:0 0 6px; min-width:0 }
.tq legend { color:var(--sky-text); font-size:var(--fs-5); font-weight:500; margin-bottom:8px; padding:0 }
.tq-pills { display:flex; flex-wrap:wrap; gap:8px }
.tq-pill { flex-direction:row!important; margin:0!important; position:relative }
.tq-pill input { position:absolute; opacity:0; width:1px; height:1px }
.tq-pill span { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid #ffffff44; border-radius:999px; color:var(--sky-text); cursor:pointer }
.tq-pill input:checked + span { border-color:var(--gold); background:#E8A33D22; font-weight:600 }
/* On a phone the three time-quality chips share one row of equal cells (review item 10c), so
   "I don't know" never sits alone on a second line. */
@media(max-width:480px) {
  .tq-pills { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px }
  .tq-pill span { flex:1; justify-content:center; text-align:center; padding:4px 8px; line-height:1.2 }
}
.fr-form .place-option { background:var(--sky-3); color:var(--sky-text); border-bottom-color:#ffffff1f }
.fr-form .place-option:hover, .fr-form .place-option:focus-visible { background:var(--sky-2) }
.fr-form .optional-guidance summary { color:var(--gold) }
.fr-arc { position:relative; width:160px; height:160px; margin:40px auto 28px }
.fr-arc svg { width:100%; height:100%; transform:rotate(-90deg) }
.fr-arc-track { fill:none; stroke:#ffffff22; stroke-width:4 }
.fr-arc-sweep { fill:none; stroke:var(--gold); stroke-width:4; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:240 }
.fr-arc-glyph { position:absolute; inset:0; display:grid; place-items:center; color:var(--gold); font-size:var(--fs-1); }
@media(prefers-reduced-motion:no-preference){ .fr-arc-sweep{ animation:sweep 1.2s ease-in-out infinite alternate } @keyframes sweep{to{stroke-dashoffset:60}} .reveal-rise{ animation:rise .5s ease-out both } @keyframes rise{from{opacity:0;transform:translateY(12px)}} }
.first-run.skipped .fr-arc-sweep { animation:none }
.remember { flex-direction:row!important; align-items:center; gap:10px!important; color:var(--sky-text); font-weight:500; text-align:left; min-height:44px }
.remember input { width:18px; height:18px; flex:none; accent-color:var(--gold) }
.reveal-tiles { display:grid; gap:12px; text-align:left; margin:0 0 22px }
.reveal-tile { display:flex; gap:16px; align-items:center; background:var(--sky-3); border-radius:16px; padding:16px 18px }
.reveal-tile .glyph { color:var(--gold); font-size:var(--fs-2); width:34px; text-align:center; flex:none }
.reveal-tile strong { display:block; font-size:var(--fs-4); }
.reveal-tile small { color:var(--sky-muted); font-size:var(--fs-6); line-height:1.45; display:block }
.reveal-lead { font-family:var(--serif); font-size:var(--fs-3); line-height:1.35; text-align:left; margin:0 0 12px }
:lang(hi) .reveal-lead { font-family:var(--sans); font-size:var(--fs-4); font-weight:500; line-height:1.7 }
.reveal-note { color:var(--sky-muted); font-size:var(--fs-5); text-align:left; margin:0 0 18px }

/* My chart: header band, sign tiles and sub-tabs */
.chart-band { padding-bottom:0 }
.chart-band .sky-inner { max-width:none }
.chart-band-top { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; flex-wrap:wrap }
.chart-band .sky-headline { font-size:var(--fs-1); }
.chart-actions { display:flex; gap:10px; flex-wrap:wrap; position:relative }
.share-menu { position:absolute; top:100%; left:0; z-index:5; margin-top:6px; min-width:240px; max-width:min(320px,calc(100vw - 32px)); background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px #0003; padding:6px; display:flex; flex-direction:column; gap:2px }
.share-menu[hidden] { display:none }
.share-menu .quiet-button { width:100%; text-align:left; border:0; border-radius:8px; background:transparent }
.share-menu .quiet-button:hover, .share-menu .quiet-button:focus-visible { background:var(--line) }
#share-preview { max-width:560px }
.share-preview-figure { margin:16px 0 }
.share-preview-figure img { display:block; max-width:100%; max-height:70vh; width:auto; height:auto; margin:0 auto; border-radius:10px; border:1px solid var(--line) }
.share-preview-figure figcaption { margin-top:10px; text-align:center }
.share-preview-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
#share-preview .share-preview-actions .primary-button { width:auto; margin-top:0 }
.share-menu .small-note { margin:0; padding:0 17px 8px; font-size:var(--fs-6); line-height:1.45 }
.chart-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px }
.sky-badge { display:inline-flex; align-items:center; gap:6px; border:1px solid #ffffff44; border-radius:999px; padding:4px 12px; font-size:var(--fs-6); color:var(--sky-text) }
.sky-badge.gold { border-color:var(--gold); color:var(--gold) }
.sign-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:8px 0 10px }
.sign-tile { display:flex; gap:14px; align-items:center; border:1px solid #ffffff1f; background:#ffffff0d; border-radius:16px; padding:16px; min-width:0 }
.sign-tile .glyph { color:var(--gold); font-size:var(--fs-2); width:34px; text-align:center; flex:none }
.sign-tile .tile-label { display:block; font-size:var(--fs-7); letter-spacing:.1em; text-transform:uppercase; color:var(--sky-muted) }
.sign-tile strong { display:block; font-size:var(--fs-4); margin:2px 0 }
.sign-tile small { display:block; font-size:var(--fs-6); color:var(--sky-muted); line-height:1.45 }
.sign-tile .gloss-chip { color:var(--sky-muted) }
.chart-remember { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin:0 0 6px }
.chart-band .kundli-tabs { display:flex; gap:4px; margin:6px 0 0; padding:0; border:0; border-top:1px solid #ffffff1f; overflow-x:auto; scrollbar-width:none }
.chart-band .kundli-tabs button { border:0; background:none; color:var(--sky-muted); padding:14px 14px 12px; border-radius:0; font-weight:500; white-space:nowrap; min-height:48px; border-bottom:3px solid transparent }
/* Phone: the strip scrolls sideways, snaps tab to tab, and fades on the side that still has tabs
   (app.js toggles tabs-more-start / tabs-more-end on scroll). */
.chart-band .kundli-tabs { scroll-snap-type:x proximity; scroll-padding-inline:32px; -webkit-overflow-scrolling:touch }
.chart-band .kundli-tabs button { scroll-snap-align:start }
.chart-band .kundli-tabs.tabs-more-end { -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent) }
.chart-band .kundli-tabs.tabs-more-start { -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent) }
.chart-band .kundli-tabs.tabs-more-start.tabs-more-end { -webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent) }
.chart-band .kundli-tabs button.active { color:var(--sky-text); border-bottom-color:var(--gold); font-weight:600; background:none }
.chart-band .kundli-tabs .astro-tab { margin-left:auto }
#chart-shell > .kundli-section, #chart-shell > section, #chart-shell > details { margin-top:28px }
.note-caution { background:var(--caution-bg); border:1px solid var(--caution-line); border-radius:16px; padding:16px 20px; margin:0 0 24px; line-height:1.6 }
.note-caution strong { font-weight:600 }
.note-soft { background:var(--soft); border-radius:16px; padding:18px 22px; margin:0 0 20px }
.note-soft h3 { margin:0 0 6px; font-size:var(--fs-4); }
.note-soft p { margin:0 }

/* Overview: story cards beside a small chart */
.overview-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--gutter); align-items:start }
.overview-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.overview-head h2 { font-family:var(--serif); font-size:var(--fs-2); font-weight:600 }
.overview-sub { color:var(--muted); margin:4px 0 18px }
.story-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; margin:0 0 16px; overflow-wrap:anywhere }
.story-card .eyebrow { margin-bottom:10px }
.story-lead { font-family:var(--serif); font-size:var(--fs-3); line-height:1.35; font-weight:500; margin:0 0 12px }
:lang(hi) .story-lead { font-family:"Tiro Devanagari Hindi",var(--serif); font-size:var(--fs-3); line-height:1.6; font-weight:400 }
.story-card p { margin:0 0 10px }
.story-card details, .report-why { margin-top:8px }
.story-card details > summary, .year-why > summary, .report-why > summary { color:var(--teal); font-size:var(--fs-5); font-weight:600; min-height:44px }
.overview-chart { position:sticky; top:88px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px }
.overview-chart .card-head { margin-bottom:8px }
.overview-chart h3 { margin:0; font-size:var(--fs-4); }
.overview-chart .kundli-chart { max-width:none }
.overview-chart p { font-size:var(--fs-6); color:var(--muted); margin:10px 0 0; line-height:1.5 }
.planet-list { list-style:none; margin:8px 0 12px; padding:0 }
.planet-list li { display:flex; gap:12px; align-items:baseline; padding:6px 0 }
.planet-list .glyph { color:var(--saffron); width:20px; flex:none }
.overview-foot { color:var(--muted); font-size:var(--fs-6); margin-top:20px }

.today-layout {
  display:grid;
  grid-template-columns:1fr 1.8fr;
  gap:22px
}
.sunrise-panel {
  background:var(--navy);
  color:white;
  border-radius:var(--radius);
  padding:26px 28px;
  position:relative;
  overflow:hidden
}
.sunrise-panel .eyebrow {
  color:#e9bb7f
}
.sunrise-icon {
  position:absolute;
  right:28px;
  top:67px;
  color:var(--gold);
  font-size:68px;
  line-height:1
}
.sunrise-panel h2 {
  font-family:var(--serif);
  font-size:var(--fs-1);
  font-weight:400;
  margin-top:30px;
  letter-spacing:-1px
}
.sunrise-panel>p {
  margin:5px 0 22px;
  color:#cad3df;
  font-size:var(--fs-5);
}
.sunrise-location {
  font-size:var(--fs-5);
}
.sunrise-panel hr {
  border:0;
  border-top:1px solid #ffffff26;
  margin:23px 0 17px
}
.sunrise-footer {
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  justify-content:space-between;
  font-size:var(--fs-6);
  color:#bcc7d7
}
.section-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px
}
.panchang-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:22px;
  gap:22px 26px
}
.field-label {
  color:var(--muted);
  font-size:var(--fs-7);
  letter-spacing:1.3px;
  font-weight:550
}
.panchang-grid h3 {
  font-size:var(--fs-3);
  margin:7px 0 3px;
  letter-spacing:-.4px;
  font-weight:550
}
.panchang-grid p {
  margin:0;
  font-size:var(--fs-6);
  color:var(--muted)
}
.panel-note {
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:22px;
  font-size:var(--fs-6);
  color:var(--muted)
}
.section-heading .eyebrow {
  margin-bottom:7px
}
.swara-card {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:white;
  padding:22px
}
.swara-card.current {
  background:var(--sky);
  color:var(--sky-text);
  border-color:var(--sky)
}
.swara-card.current .day-date,.swara-card.current .swara-main p,.swara-card.current .card-bottom { color:var(--sky-muted) }
.card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}
.day-name {
  font-weight:600;
  font-size:var(--fs-5);
}
.day-date {
  color:var(--muted);
  font-size:var(--fs-6);
  margin-top:4px
}
.current-tag {
  border-radius:20px;
  background:#fff1dc;
  color:#965419;
  font-size:var(--fs-6);
  padding:4px 9px
}
.swara-main {
  display:flex;
  gap:14px;
  align-items:center;
  margin:24px 0
}
.swar-mark {
  font-size:var(--fs-2);
  background:#edf1f8;
  color:#334d75;
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex-shrink:0
}
.swar-mark.right {
  background:#fff0dc;
  color:#a45c1c
}
.swara-main h3 {
  margin:0 0 5px;
  font-family:var(--serif);
  font-size:var(--fs-4);
  font-weight:600
}
.swara-main p {
  margin:0;
  color:var(--muted);
  font-size:var(--fs-6);
}
.card-bottom {
  border-top:1px solid var(--line);
  padding-top:14px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-size:var(--fs-6);
}
.question-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.question-card {
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border:1px solid var(--line);
  background:white;
  border-radius:12px;
  padding:20px;
  color:var(--ink);
  font-size:var(--fs-5);
  line-height:1.6;
  gap:10px
}
.question-card:hover {
  border-color:#c18b56;
  background:#fffcf8
}
.question-number {
  font-size:var(--fs-7);
  letter-spacing:1px;
  color:var(--muted)
}
.question-action {
  color:var(--orange);
  font-size:var(--fs-5);
}
.range-form {
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:18px;
  padding:24px;
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:24px
}
label {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:var(--fs-5);
  font-weight:500;
  color:var(--ink)
}
input,select {
  width:100%;
  min-width:0;
  padding:11px 12px;
  border:1px solid #D8D0BF;
  border-radius:10px;
  background:white;
  color:var(--ink);
  font-size:var(--fs-4);
}
/* Controls (review 12): a select reads as a pill button with a chevron, and a checkbox is an 18 px
   teal box on a 44 px tap row, so the Chart tab's controls match the pills beside them. */
select {
  -webkit-appearance:none;
  appearance:none;
  min-height:44px;
  padding:0 32px 0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231B2433' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 12px 8px;
  color:var(--ink);
  font-size:var(--fs-5);
  line-height:1.3;
  text-overflow:ellipsis;
  cursor:pointer
}
select:hover { border-color:#D8D0BF }
/* iOS zooms into a focused control under 16 px */
@media (pointer:coarse) { select { font-size:var(--fs-4); } }
.kc-controls select, #rashifal-sign, #kundli-chart-extra, #kc-glyphs { width:auto; max-width:100% }
input[type=checkbox] {
  width:18px;
  height:18px;
  min-height:0;
  flex:none;
  margin:0;
  padding:0;
  accent-color:var(--teal);
  cursor:pointer
}
label:has(> input[type=checkbox]) { flex-direction:row; align-items:center; gap:10px; min-height:44px; cursor:pointer }
.calendar-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.chart-layout {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:24px;
  align-items:start
}
.form-panel {
  padding:28px;
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius)
}
.form-panel label {
  margin-bottom:18px
}
.form-row {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}
.form-panel>.primary-button {
  width:100%;
  margin-top:20px
}
.chart-empty {
  min-height:380px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:35px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--soft)
}
.chart-symbol {
  color:var(--orange);
  font-size:58px;
  margin-bottom:20px
}
.chart-empty p {
  color:var(--muted);
  max-width:300px
}
.empty-tags {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  font-size:var(--fs-6);
}
.empty-tags span {
  padding:7px 10px;
  background:white;
  border-radius:5px
}
.chart-result-card {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px
}
.kundli-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.kundli-tabs button { border:0; background:transparent; color:var(--muted); border-radius:7px; padding:10px 12px; font-weight:600; }
.kundli-tabs button.active { background:var(--teal-soft); color:var(--teal); }
.kundli-tabs button.astro-tab { margin-left:auto; font-weight:500; font-size:var(--fs-5); }
.kundli-section { margin-bottom:24px; }
.optional-guidance { border-top:1px solid var(--line); margin:20px 0; padding-top:16px; }
.optional-guidance summary { color:var(--orange); cursor:pointer; font-size:var(--fs-5); }
.optional-guidance label { margin-top:16px; }
.birth-finding {
  padding:22px 0;
  border-bottom:1px solid var(--line)
}
.birth-finding h3 {
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--fs-2);
  margin:8px 0
}
.birth-finding p {
  font-size:var(--fs-6);
  color:var(--muted);
  margin:0
}
.access-details {
  padding:15px;
  background:var(--bg);
  border-radius:8px;
  font-size:var(--fs-5);
}
.access-details summary {
  cursor:pointer
}
.error {
  background:#fff0ef;
  color:#9b302d
}
.error-text {
  font-size:var(--fs-5);
  color:#9b302d
}
.loading {
  color:var(--muted);
  padding:24px;
  background:white;
  border-radius:12px;
  border:1px solid var(--line);
  grid-column:1/-1
}
dialog {
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px;
  max-width:510px;
  width:calc(100% - 32px);
  color:var(--ink);
  box-shadow:0 24px 90px #12213835
}
dialog::backdrop {
  background:#12213880;
  backdrop-filter:blur(3px)
}
dialog label {
  margin:16px 0
}
.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.close-button {
  background:none;
  border:0;
  color:var(--muted);
  font-size:var(--fs-2);
  padding:0 5px;
  /* a 44 px hit target around the glyph, which keeps its size */
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
.dialog-heading h2 {
  font-size:var(--fs-3);
}
.dialog-heading+.small-note {
  margin-bottom:20px
}
dialog .primary-button {
  width:100%;
  margin-top:5px
}
.answer-text {
  font-family:var(--serif);
  font-size:var(--fs-2);
  line-height:1.6
}
.answer-source {
  font-size:var(--fs-6);
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:18px
}

.panchang-panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px }
.pill { font-size:var(--fs-6); padding:6px 12px; background:var(--soft); color:var(--muted); border-radius:999px; white-space:nowrap }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; margin:40px 0 16px }
.notice { padding:16px 20px; border-radius:14px; margin-bottom:20px }

/* Leaves room above the fixed tab bar on a phone; scrollIntoView keeps the list clear of it. */
.place-results { max-height:min(40vh, 240px); overflow-y:auto; border-radius:8px; scroll-margin-bottom:96px }
.place-option { display: block; width: 100%; text-align: left; padding: 14px; background: #f1f4f8; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size:var(--fs-5); }
.place-option:hover, .place-option:focus-visible { background: #e4ebf4; }

.daily-timings { margin-top: 24px; }
.daily-timings h3 { font-family:var(--serif); font-weight:600; font-size:var(--fs-3); }

.condition-scroll { overflow-x: auto; }
.conditions-table { width:100%; border-collapse:collapse; font-size:var(--fs-6); margin:20px 0; }
.conditions-table th, .conditions-table td { text-align:left; padding:12px; border-bottom:1px solid #e6e8ed; }
.conditions-table th { color:var(--muted); }
#match-form fieldset { min-width:0; border:1px solid #e6e8ed; margin:0 0 24px; }
#match-form legend { padding:0 8px; font-weight:600; color:#26334a; }
#match-form .chart-layout { grid-template-columns:repeat(2,minmax(0,1fr)); }
#match-form .form-row { grid-template-columns:minmax(0,1fr); }
#match-form input { min-width:0; max-width:100%; }
@media(max-width:800px) { #match-form .chart-layout { grid-template-columns:minmax(0,1fr); } }

.plain-explanation {font-size:var(--fs-6);line-height:1.65;color:var(--muted);margin-top:12px;}
.meaning-guide, .birth-finding details {margin:16px 0;font-size:var(--fs-5);line-height:1.6;}
summary {cursor:pointer;color:#374c68;font-weight:600;}
.conditions-table .small-note {min-width:150px;max-width:240px;line-height:1.5;}

.answer-text {white-space:pre-line;font-size:var(--fs-4);line-height:1.65;}
#answer-dialog {max-height:85vh;overflow-y:auto;}

.life-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
.life-card {background:white;border:1px solid var(--line);border-radius:var(--radius);padding:28px;}
.life-card h3 {font-family:var(--serif);font-weight:600;font-size:var(--fs-3);line-height:1.3;margin:14px 0;}
.life-card p, .life-card li {font-size:var(--fs-5);line-height:1.65;color:var(--muted);}
.life-card h4 {margin:22px 0 8px;font-size:var(--fs-4);}
.life-card ul {padding-left:20px;}
.life-card li {margin-bottom:10px;}
.life-card details {border-top:1px solid var(--line);padding-top:16px;margin-top:22px;}
#chart-details {margin:32px 0;}
@media(max-width:800px) {.life-grid {grid-template-columns:minmax(0,1fr);}}

.chart-layout > *, .form-row > label { min-width:0; }


/* Draft guidance stays readable at narrow widths and with keyboard navigation. */
#guidance-panel { margin-bottom: 24px; overflow-wrap: anywhere; }
.guidance-qualification { padding: 12px 14px; background: var(--caution-bg); border-radius: 12px; }
.guidance-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
#birth-editor { min-width: 0; }
#birth-editor > summary { padding: 12px 0; cursor: pointer; }
#guidance-panel textarea { width: 100%; min-height: 80px; }
#guidance-panel details { margin: 16px 0; }

@media print {
  @page { margin:14mm; }
  body { background:white; color:#000; font-family:Georgia,"Tiro Devanagari Hindi",serif; padding:0; }
  .topbar,.tabbar,.page-footer,#error,#first-run,#kundli-tabs,.chart-actions,.chart-remember,#internal-guidance,.optional-guidance,.guidance-controls,button:not(.gloss-chip),.overview-chart,.gloss-pop,.term-tags { display:none!important; }
  .gloss-chip { text-decoration:none; }
  .sky-band { background:none!important; color:#000; margin:0; padding:0 0 12px; }
  .sky-headline,.sky-eyebrow,.sign-tile,.sign-tile small,.sign-tile .tile-label,.sign-tile .gloss-chip { color:#000!important; }
  .sign-tile { border:1px solid #999; }
  main > section[id$="-view"] { max-width:none; padding:0; }
  #today-view,#calendar-view,#compatibility-view,#learn-view,#panchang-view,#vivah-view { display:none!important; }
  #chart-view,#chart-shell { display:block!important; }
  [data-kundli-section]:not([data-empty="true"]),#chart-result,#chart-details,#life-panel,#divisional-panel,#transit-panel,#guidance-panel { display:block!important; }
  .panchang-panel,.chart-result-card,.meaning-guide,details,.story-card,.year,.area-card { border:0; box-shadow:none; padding:0; margin:0 0 13px; break-inside:avoid; }
  details > * { display:block!important; }
  summary { list-style:none; font-weight:bold; margin:12px 0 6px; }
  .condition-scroll { overflow:visible; }
  table { width:100%; font-size:var(--fs-6); break-inside:avoid; }
  .small-note,.guidance-qualification { color:#333; background:none; }
}

/* Free reading: a single readable column with evidence available on demand. */
.reading-intro,.reading-chapters{max-width:760px;margin-inline:auto}
.reading-intro>p{line-height:1.75}
.reading-draft{padding:12px 16px;background:var(--soft);border-radius:12px}
.reading-chapter{padding:28px 0;border-top:1px solid #ded9cf;line-height:1.75}
.reading-chapter h3{font-family:var(--serif);font-weight:600;font-size:var(--fs-3);margin:6px 0 18px}
.reading-chapter h4{font-size:var(--fs-6);letter-spacing:.03em;margin:20px 0 6px;color:var(--muted)}
.reading-reflection{padding:1px 18px 6px;background:#f3f5ee;border-radius:12px;margin:20px 0}
.reading-chapter pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-6);background:#f6f3ed;padding:12px;border-radius:8px}
.reading-chapter details{overflow-wrap:anywhere}
.reading-chapter summary{cursor:pointer;font-size:var(--fs-5);}
@media(max-width:600px){.reading-chapter{padding-block:22px}.reading-chapter h3{font-size:var(--fs-3);}.reading-reflection{padding-inline:12px}}
@media print{#free-reading-export,#free-reading-retry{display:none}.reading-chapter{break-inside:avoid}}

/* Parity Phase A: kundli charts, Avakhada, dasha tree */
.kc-controls{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.75rem 0}
.kc-style.active{background:var(--teal);color:#fff;border-color:var(--teal)}
/* The label sits inline with its pill (Glyphs, Third chart), on the controls' centre line */
.kc-select{display:flex;flex-direction:row;align-items:center;font-size:var(--fs-6);gap:.4rem}
.kc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1rem}
.kc-grid figure{margin:0}
.kc-grid figcaption{font-weight:600;margin-bottom:.35rem}
.kundli-chart{width:100%;max-width:360px;height:auto;display:block}
.kc-frame{fill:#FFFDF8;stroke:var(--ink);stroke-width:1.5}
.kc-line{stroke:var(--ink);fill:none;stroke-width:1}
.kc-cell{fill:none;stroke:var(--ink);stroke-width:1}
.kc-asc{fill:#F6EBDD}
.kc-rule{fill:none;stroke:var(--ink);stroke-width:.6}
.kc-script-deva text.kc-planet,.kc-script-deva text.kc-transit{font-family:"Noto Sans Devanagari","Tiro Devanagari Hindi",var(--sans)}
.kc-script-sym text.kc-planet,.kc-script-sym text.kc-transit,.kc-script-sym text.kc-sign{font-family:"Noto Sans Symbols","Noto Sans Symbols 2","Segoe UI Symbol",var(--sans)}
/* Symbols read small at phone width: signs 12, planets 14 (12 when a house is crowded); kundli-chart.js sizes its rows to match */
.kc-script-sym text.kc-sign{font-size:12px}
.kc-script-sym text.kc-planet{font-size:14px}
.kc-script-sym text.kc-planet.kc-small{font-size:12px}
.kc-rising{font:600 9px var(--sans);letter-spacing:.12em;fill:var(--saffron)}
.kc-sign{font:10px var(--sans);fill:var(--muted)}
.kc-planet{font:600 12px var(--sans);fill:var(--ink)}
.kc-planet.kc-small{font:600 10px var(--sans)}
.kc-p{cursor:default}
.kc-deg{font:9px var(--sans);fill:var(--muted);opacity:0;transition:opacity .15s}
.kc-p:hover .kc-deg,.kc-p:focus-within .kc-deg,.kundli-chart.kc-degrees .kc-deg{opacity:1}
/* Hover degree sits on a small opaque backing so a neighbouring label never shows through it. */
.kc-deg-bg{fill:#FFFDF8;stroke:var(--line);stroke-width:.5;opacity:0;pointer-events:none}
.kc-p:hover .kc-deg-bg,.kc-p:focus-within .kc-deg-bg{opacity:1}
.kc-check{flex-direction:row;align-items:center;gap:.4rem;align-self:center}
.kc-check span{white-space:nowrap}
.kc-title{font:600 14px var(--sans);fill:var(--muted)}
.dasha-tree details{padding-left:.9rem;margin:.3rem 0}
.dasha-tree summary{cursor:pointer}
.dasha-tree li{font-weight:400;color:inherit}
.dasha-tree details.current>summary{font-weight:700;color:#14444a}
.dasha-tree ol{margin:.25rem 0 .25rem 1rem;padding:0}
@media print{.kc-controls{display:none}
  .kundli-chart{max-width:100%;width:170mm}
  .kc-frame{fill:#fff}
  .kundli-chart .kc-deg{opacity:1}
  .kundli-chart .kc-deg-bg{opacity:1}
  #kc-download{display:none!important}}
.conditions-table tr.current-row td{font-weight:700;color:#14444a}
/* Sade Sati (review 9): dates stay on one line; on a phone each phase is two lines, phase and sign, then the dates.
   The header row and the type word are hidden visually but stay in the accessibility tree. */
.sade-sati-table .ss-dates{white-space:nowrap}
@media(max-width:600px){
  .sade-sati-table, .sade-sati-table tbody{display:block;width:100%}
  .sade-sati-table thead, .sade-sati-table .ss-type{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .sade-sati-table tr{display:block;position:relative;padding:10px 0;border-bottom:1px solid #e6e8ed}
  .sade-sati-table th, .sade-sati-table td{display:inline;padding:0;border:0}
  .sade-sati-table .ss-phase{font-weight:600}
  .sade-sati-table .ss-phase::after{content:" · "}
  .sade-sati-table .ss-sign::before{content:attr(data-label) " "}
  .sade-sati-table .ss-dates{display:block;margin-top:2px}
}
/* Parity A8/A12/A15/A16 panels */
#vivah-panel h3, #lunar-month-panel h3, #moon-basics-panel h3 { margin:20px 0 4px; font-size:var(--fs-4); }
.vivah-excluded { columns: 2 220px; column-gap: 24px; font-size:var(--fs-5); line-height: 1.6; padding-left: 18px; }
#vivah-result .conditions-table td { line-height: 1.5; }
/* Phase B Full Report (Beta) */
.beta-badge{display:inline-block;margin-left:6px;padding:1px 8px;border:1px solid var(--saffron);border-radius:999px;color:var(--saffron);font-size:var(--fs-7);font-weight:600;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.report-chapter{padding:24px 0;border-top:1px solid var(--line);line-height:1.7}
.report-chapter h3{font-family:var(--serif);font-weight:600;font-size:var(--fs-3);margin:4px 0 12px}
.report-section{margin:18px 0;padding:14px 16px;border:1px solid var(--line);border-radius:8px;overflow-wrap:anywhere}
.report-section h4{margin:0 0 8px;font-size:var(--fs-4);}
.report-label{margin:10px 0 4px;font-size:var(--fs-7);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.report-facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0}
.report-facts dt{color:var(--muted)}
.report-facts dd{margin:0}
.report-problem{margin-top:10px;font-size:var(--fs-6);}
.report-problem pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f5f6f8;padding:8px;border-radius:4px;font-size:var(--fs-6);}
@media (max-width:520px){.report-facts{grid-template-columns:1fr}.report-facts dd{margin-bottom:6px}}
/* Phase C Panchang page */
.panchang-jump{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 6px}
.panchang-jump a{color:var(--orange);text-decoration:none;font-weight:600;font-size:var(--fs-5);}
.panchang-jump a:hover,.panchang-jump a:focus-visible{text-decoration:underline}
#panchang-view .panchang-panel{scroll-margin-top:16px}
/* Phase C Vivah couple check */
.vivah-couple{margin:12px 0}
.vivah-couple-toggle{display:flex!important;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;margin:8px 0;text-align:left}
.vivah-couple-toggle{min-height:44px}
.vivah-couple .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vivah-partner{border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-width:0;margin:0}
.vivah-partner label{display:block;min-width:0}
.vivah-partner select{width:100%;max-width:100%;box-sizing:border-box}
@media (max-width:560px){.vivah-couple .form-row{grid-template-columns:1fr}}
.couple-ok{font-weight:600}
.couple-caution{color:var(--saffron)}
.couple-summary{padding:10px 14px;background:var(--soft);border-radius:12px}
/* Phase C explainers */
.explainer-tabs{margin:8px 0 12px}
.explainer-tabs button[aria-pressed="true"],.explainer-tabs button.active{font-weight:700}
.explainer-item summary{cursor:pointer;list-style-position:outside}
.explainer-item summary h4{display:inline;margin:0}
.learn-more{font-size:var(--fs-6);font-weight:500;margin-left:6px;color:var(--orange)}
/* Story layer (docs/product/14-story-layer-spec.md) */
.story{margin:18px 0 8px}
.story>h3{margin:0 0 6px;font-family:var(--serif);font-weight:600}
.story-intro{color:var(--muted);font-size:var(--fs-5);}
.story-theme{margin:16px 0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;overflow-wrap:anywhere}
.story-theme h4{margin:0 0 8px;font-size:var(--fs-4);}
.story-now{font-weight:600}
.story-why{margin:4px 0 0;padding-left:1.2rem;font-size:var(--fs-5);color:var(--muted)}
.story-why li{margin:2px 0}
.report-details{margin:22px 0;border-top:1px solid var(--line);padding-top:10px}
.report-details>summary{cursor:pointer;font-weight:600;padding:6px 0}
.story-caveat{padding:14px 18px;background:var(--caution-bg);border:1px solid var(--caution-line);border-radius:14px;font-size:var(--fs-5);}
/* Life-area cards (docs/product/15-life-area-cards-spec.md §8) */
/* Your chart now (Today page): three reviewed lines; the guidance draft follows in its own box */
.today-chart{margin-top:18px}
#today-guidance{margin:0}
#today-guidance .guidance-panel{margin-top:10px}
/* Your year ahead (spec 16 §1): between the story and the life areas */
.year{margin:24px 0 8px;padding:22px 24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow-wrap:anywhere}
.year>h3{margin:0 0 2px}
.year-range{margin:0 0 8px}
.year-sade-sati{padding:10px 14px;border-radius:12px;background:var(--soft);font-size:var(--fs-5);}
.year-rows{list-style:none;margin:4px 0 0;padding:0;border-left:2px solid var(--line)}
.year-row{position:relative;display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:4px 12px;padding:6px 0 6px 14px}
.year-row::before{content:"";position:absolute;left:-6px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--teal)}
.year-when{font-weight:600;white-space:nowrap}
.year-what{min-width:0}
.year-lines{margin:4px 0 0;padding-left:1.2rem}
.year-lines li{margin:4px 0}
.year-note{font-size:var(--fs-5);color:var(--muted)}
.year-why>summary{cursor:pointer;font-weight:600;font-size:var(--fs-5);margin-top:8px}
@media (max-width:640px){.year{padding:12px}.year-row{grid-template-columns:1fr;gap:2px}.year-when{white-space:normal}}
.signatures{margin:22px 0 8px}
.signatures>h3{margin:0 0 6px;font-family:var(--serif);font-size:var(--fs-2);font-weight:600}
.signature-grid{display:grid;gap:12px}
.signature-card{margin:0}
@media (min-width:720px){.signature-grid{grid-template-columns:1fr 1fr}.signature-card.lead{grid-column:1/-1}}
.areas{margin:22px 0 8px}
.areas>h3{margin:0 0 6px}
.area-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.area-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;overflow-wrap:anywhere;min-width:0}
.area-card[open]{grid-column:1/-1;border-color:var(--teal)}
.area-card>summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:4px}
.area-card>summary::-webkit-details-marker{display:none}
.area-title{font-weight:600;font-size:var(--fs-4);}
.area-title::after{content:" +";color:#b57943;font-weight:600}
.area-card[open] .area-title::after{content:" −"}
.area-first{font-size:var(--fs-5);color:var(--muted)}
.area-verdict{font-weight:600;font-size:var(--fs-5);line-height:1.35}
.area-why{font-size:var(--fs-6);color:var(--muted)}
.area-next{font-size:var(--fs-6);font-weight:600;color:#8a5527;letter-spacing:.02em}
.area-body{margin-top:10px}
.area-windows{margin:4px 0 0;padding-left:1.2rem;font-size:var(--fs-5);}
.area-window{margin:6px 0}
.area-window.past{color:var(--muted)}
.area-tag{display:inline-block;padding:0 8px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-7);color:var(--muted);vertical-align:middle}
.area-prompt{margin-top:10px;padding:10px 14px;border-radius:12px;background:var(--soft)}
@media (max-width:640px){.area-grid{grid-template-columns:1fr}}
.area-card>summary .area-first{font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.area-card[open]>summary .area-first{display:none}
.area-details-link{color:#8a5527;font-weight:600}
.match-summary { background:var(--soft); border-radius:16px; padding:16px 20px; margin:0 0 24px; }
.match-summary h2 { margin:6px 0 12px; }
.match-summary .match-score { font-family:var(--serif, inherit); font-size:var(--fs-3); margin:4px 0 2px; }
.match-summary .match-score strong { font-size:var(--fs-2); }
.match-summary .match-note-limits { color:var(--muted); font-size:var(--fs-5); }
.match-astro { margin-top:16px; }
.koota-reading { margin:4px 0 6px; }
.match-partnership { margin:0 0 28px; }
.partner-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.partner-card { border:1px solid var(--line); border-radius:8px; padding:12px 16px; }
.partner-card h4 { margin:4px 0 8px; }
.partner-overlap { background:#fff1dc; border-radius:8px; padding:8px 14px; margin:0 0 16px; }


/* Responsive: phone layout under 768 px (redesign-proposal.md §9) */
@media(max-width:1100px) {
  .sign-tiles { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .overview-grid { grid-template-columns:minmax(0,1fr) 280px }
  .calendar-list { grid-template-columns:repeat(2,1fr) }
  .section-title { align-items:flex-start; flex-direction:column; gap:8px }
}
@media(max-width:767px) {
  /* the top bar, tab bar, gutter, h1, .serif-title and footer phone rules are in shell.css */
  main > section[id$="-view"] { padding-top:24px }
  .sky-band { margin-top:-24px; padding-top:28px; padding-bottom:28px }
  .sky-headline, .chart-band .sky-headline { font-size:var(--fs-1); }
  :lang(hi) .sky-headline { font-size:var(--fs-1); }
  .sky-sub { font-size:var(--fs-5); }
  .card { padding:20px }
  .ribbon-card { padding:16px }
  .today-grid { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px }
  .today-grid > * { width:100% }
  .today-side { display:contents }
  .tg-chart { order:1 }
  .tg-week { order:2 }
  .tg-ask { order:2 }
  .week-days { display:flex; overflow-x:auto; gap:6px; padding-bottom:4px; scrollbar-width:thin }
  .week-day { flex:1 0 auto; min-width:56px; padding:8px 10px }
  .wd-word { font-size:var(--fs-6); white-space:nowrap }
  .wd-sign, .week-day .wd-name { white-space:nowrap }
  .first-run[data-step="welcome"] .fr-inner { padding-left:16px; padding-right:16px }
  /* Phone order: chart, the week strip, the swar card, the rashifal, then the at-a-glance tiles. */
  .tg-swar { order:3 }
  .tg-rashi { order:4 }
  .tg-lunar, .tg-star { order:5; width:calc(50% - 6px) }
  .tg-sun { order:6 }
  .side-card { padding:16px }
  .side-card h3 { font-size:var(--fs-4); }
  .phone-only { display:block }
  .more-today { font-size:var(--fs-4); margin:0 0 10px }
  .term-tags { display:flex }
  .term-tags .gloss-chip { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); text-decoration:none; font-size:var(--fs-6); }
  .gloss-chip::after { inset:-14px -6px }
  .first-run { min-height:calc(100vh - 56px - 72px); padding-top:24px }
  .fr-title { font-size:var(--fs-1); }
  .fr-card { display:block; padding:20px }
  .fr-card .fr-ring { display:none }
  .fr-card .fr-title, :lang(hi) .fr-card .fr-title { font-size:var(--fs-2); }
  .sign-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
  .sign-tile { flex-direction:column; align-items:flex-start; gap:6px; padding:12px }
  .sign-tile.tile-chapter { grid-column:1/-1; flex-direction:row; align-items:center }
  .sign-tile .glyph { font-size:var(--fs-2); width:auto }
  .sign-tile strong { font-size:var(--fs-5); }
  .sign-tile small { font-size:var(--fs-6); }
  .chart-actions { width:100% }
  .chart-actions button { flex:1 }
  .overview-grid { grid-template-columns:minmax(0,1fr) }
  .overview-chart { position:static }
  .overview-head h2 { font-size:var(--fs-2); }
  .story-card { padding:18px }
  .story-lead { font-size:var(--fs-3); }
  .page-heading { align-items:flex-start; margin-bottom:23px }
  .section-title { flex-direction:row }
  .panchang-panel { padding:20px }
  .question-grid { grid-template-columns:1fr }
  .question-card { display:grid; grid-template-columns:25px 1fr auto; align-items:center; gap:12px }
  .question-card br { display:none }
  .calendar-list { grid-template-columns:1fr }
  .chart-layout { grid-template-columns:minmax(0,1fr) }
  .range-form { padding:20px; gap:14px }
  .range-form label { flex:1; min-width:120px }
  .range-form>.primary-button { width:100% }
  .form-panel { padding:22px }
  .form-row { gap:12px }
  .notice { font-size:var(--fs-5); }
  .kundli-tabs { overflow-x:auto; flex-wrap:nowrap }
  .kundli-tabs button { white-space:nowrap }
}


@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important }
}
@media(prefers-reduced-motion:no-preference) {
  button { transition:background .15s,border-color .15s }
  dialog[open] { animation:appear .15s ease-out }
  @keyframes appear { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
}

/* Under 18 (build brief §7): adult sections never render, on screen or in print */
body.chart-minor [data-kundli-section="periods"], body.chart-minor [data-kundli-section="areas"], body.chart-minor [data-kundli-section="yogas"], body.chart-minor [data-kundli-section="astro"], body.chart-minor #life-panel, body.chart-minor #transit-panel { display:none!important }
#full-report { background:none; border:0; padding:0 }
#chart-shell > #full-report, #chart-shell > #areas-panel { margin-top:32px }
#areas-panel { background:none; border:0; padding:0 }
.year > h3, .areas > h3 { font-family:var(--serif); font-size:var(--fs-2); font-weight:600 }
.chapter-bar b { position:relative; font-weight:600 }
.story-now { font-weight:600; color:var(--teal) }
@media(max-width:767px) { .ribbon-label { display:none } .day-ribbon { height:56px } }
.today-chart-rows { grid-template-columns:repeat(2,minmax(0,1fr)) }
.today-chart-rows > div:nth-child(3), .today-chart-rows > div:only-child { grid-column:1/-1 }
@media(max-width:767px) { .today-chart-rows { grid-template-columns:minmax(0,1fr) } }
@media(max-width:767px) { .today-sky .sky-sub { display:none } .sky-chips { margin-bottom:16px } .ribbon-foot .sky-button { min-height:40px; padding:6px 14px } }
:lang(hi) .field-label, :lang(hi) .sky-eyebrow, :lang(hi) .sign-tile .tile-label, :lang(hi) .today-chart-rows dt { letter-spacing:0; text-transform:none }
body.chart-minor #chart-combinations, body.chart-minor #today-chart { display:none!important }
.overview-grid:has(> .overview-chart[hidden]) { grid-template-columns:minmax(0,760px) }
.place-ask { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:14px 0 0; padding:10px 14px; background:var(--soft); border:1px solid var(--line); border-radius:12px; font-size:var(--fs-6); }
.place-ask p { margin:0; flex:1 1 280px }
.place-ask-actions { display:flex; flex-wrap:wrap; gap:8px }
.place-ask .quiet-button { padding:6px 14px; min-height:36px; font-size:var(--fs-6); }
.note-soft p + p { margin-top:8px } .note-soft .primary-button { margin-top:12px }

.term-tags { margin-left:0 }
@media(max-width:767px) { .ribbon-legend .term-tags .gloss-chip { color:var(--ink) } }
@media(max-width:767px) {
  .ribbon-foot .sky-button { min-height:44px }
  summary { padding-block:12px; min-height:44px }
  .area-card > summary { padding-block:4px }
  .area-details-link, .gloss-learn { display:inline-block; padding-block:12px }
  .gloss-chip::after { inset:-15px -6px }
}

/* Timeline (redesign P1, D-3): neutral fills; the current chapter in teal, never a verdict colour */
.timeline { background:none; border:0; padding:0 }
.timeline-block { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; margin:0 0 20px }
.timeline-block .serif-title { font-size:var(--fs-4); margin:0 }
.life-scroll { overflow-x:auto; padding-bottom:6px; scrollbar-width:thin }
.life-bar { position:relative; height:44px; min-width:640px; border-radius:10px; background:var(--soft); margin:14px 0 6px }
.life-seg { position:absolute; top:0; bottom:0; display:flex; align-items:center; padding:0 8px; font-size:var(--fs-6); white-space:nowrap; overflow:hidden; border-right:2px solid var(--card); color:var(--ink); background:#EAE3D4 }
.life-seg.past { background:#F1ECE1; color:var(--muted) }
.life-seg.current { background:var(--teal); color:#fff; font-weight:600 }
.life-now { position:absolute; top:-6px; bottom:-6px; width:2px; margin-left:-1px; background:var(--gold) }
.life-now b { position:absolute; top:52px; left:50%; transform:translateX(-50%); font-size:var(--fs-6); color:var(--saffron); white-space:nowrap }
.life-ends { display:flex; justify-content:space-between; min-width:640px; font-size:var(--fs-6); color:var(--muted); margin-top:18px }
.chapter-list { list-style:none; margin:16px 0 0; padding:0 }
.chapter-row { display:grid; grid-template-columns:110px minmax(0,1fr); gap:4px 16px; padding:12px 0; border-top:1px solid var(--line) }
.chapter-row.past { color:var(--muted) }
.chapter-row.current { background:var(--teal-soft); margin:0 -12px; padding:12px; border-radius:12px; border-top-color:transparent }
.chapter-when { font-weight:600; white-space:nowrap }
.sub-head { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline; margin-top:22px }
.sub-bar { position:relative; height:40px; min-width:640px; background:var(--soft); border-radius:10px; margin-top:8px }
.sub-seg { position:absolute; top:0; bottom:0; display:flex; align-items:center; padding:0 8px; font-size:var(--fs-6); white-space:nowrap; overflow:hidden; border-right:2px solid var(--card) }
.sub-seg.past { color:var(--muted) }
.sub-seg.current { background:var(--teal); color:#fff; font-weight:600 }
.rail-legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px 0 0; font-size:var(--fs-6); color:var(--muted) }
.rail-key { display:inline-flex; align-items:center; gap:6px }
.year-rail-wrap { margin:18px 0 6px }
.year-rail { position:relative; list-style:none; margin:0; padding:0; height:24px }
.year-rail::before { content:""; position:absolute; left:0; right:0; top:11px; height:2px; background:var(--line) }
.rail-dot { position:absolute; top:4px; margin-left:-8px }
.rail-pin { display:inline-block; width:16px; height:16px; border-radius:50%; border:3px solid var(--card); background:var(--muted); box-shadow:0 0 0 1px var(--line); flex:none }
.year-rail-wrap .life-ends { min-width:0; margin-top:6px }
.kind-ad .rail-pin, .kind-md .rail-pin { background:var(--teal) }
.kind-jupiter .rail-pin { background:var(--gold) }
.kind-saturn .rail-pin { background:#6B6FA8 }
.kind-node .rail-pin { background:#9AA3B0 }
.rail-list { list-style:none; margin:14px 0 8px; padding:0 }
.rail-list li { display:flex; gap:12px; align-items:baseline; padding:8px 0; border-top:1px solid var(--line) }
.rail-list .rail-pin { width:12px; height:12px; border-width:0; box-shadow:none; transform:translateY(1px) }
@media(max-width:767px) {
  .timeline-block { padding:18px }
  .timeline-block .serif-title { font-size:var(--fs-4); }
  .chapter-row { grid-template-columns:minmax(0,1fr) }
  .chapter-row.current { margin:0 -8px; padding:12px 8px }
  .life-scroll { mask-image:linear-gradient(90deg,#000 85%,transparent) }
  /* Phone sky band: one scrolling row of chips, a shorter band (P0 polish) */
  .sky-chips { flex-wrap:nowrap; overflow-x:auto; margin:0 calc(-1 * var(--gutter)) 14px; padding:0 var(--gutter) 4px; scrollbar-width:none }
  .sky-chips::-webkit-scrollbar { display:none }
  .sky-chip { flex:none; white-space:nowrap }
  .today-sky .sky-headline { font-size:var(--fs-2); margin-bottom:12px }
  :lang(hi) .today-sky .sky-headline { font-size:var(--fs-2); }
  .today-sky.sky-band { padding-top:22px; padding-bottom:22px }
  .ribbon-head h2 { font-size:var(--fs-5); }
  .day-ribbon { margin:8px 0 2px }
  .ribbon-legend { font-size:var(--fs-6); }
}

@media(max-width:767px) { .ribbon-foot { gap:8px } .ribbon-legend { flex-basis:100% } #ribbon-tags { margin:0; flex:1 } }
.sky-band #ribbon-tags .gloss-chip { color:var(--ink) }
/* Today band: reserve the loaded height, so the placeholder band does not jump when the day arrives (CLS) */
.today-sky.sky-band { min-height:713px }
.today-sky .sky-headline { min-height:2.2em; text-wrap:balance }
.today-sky .sky-sub { min-height:3.3em }
.today-sky .sky-chips { min-height:45px }
.today-sky .ribbon-ends { min-height:17px }
.today-sky .ribbon-next { min-height:24px }
@media(max-width:1100px) and (min-width:768px) {
  .today-sky.sky-band { min-height:747px }
  .today-sky .sky-headline { min-height:3.3em }
  .today-sky .sky-chips { min-height:95px }
}
@media(max-width:767px) {
  .today-sky.sky-band { min-height:629px }
  .today-sky .sky-eyebrow { min-height:3.2em }
  .today-sky .sky-headline { min-height:3.3em }
  .today-sky .sky-chips { min-height:49px }
  .today-sky .ribbon-head { min-height:47px }
  .today-sky .ribbon-next { min-height:49px }
  .today-sky .ribbon-legend { min-height:44px }
}
/* Small phones: the chip row wraps instead of running off the screen's edge (review item 15f).
   Three chips stack to three rows, so the reserved heights grow to match (no layout shift). */
@media(max-width:480px) {
  .today-sky .sky-chips { flex-wrap:wrap; overflow-x:visible; margin:0 0 14px; padding:0; gap:8px; min-height:157px }
  .sky-chip { flex:none; white-space:normal; max-width:100% }
  .today-sky.sky-band { min-height:737px }
}

/* Chart explorer (redesign P1): one chart, three layers, a plain side table and a guide */
.explorer-head { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap }
.explorer-layers { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 }
.layer-button { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px; padding:8px 16px; min-height:44px; font-size:var(--fs-5); }
.layer-button[aria-pressed="true"] { background:var(--sky); border-color:var(--sky); color:var(--sky-text) }
.explorer { display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:28px; align-items:start }
.explorer-chart .kundli-chart { max-width:420px }
.explorer-side .small-note { margin-top:0 }
/* The table scrolls sideways inside its own box; the shadows at the edges show there is more to reach. */
#explorer-table { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;
  background:linear-gradient(to right,var(--card,#fff),var(--card,#fff)) left center/24px 100% no-repeat local,
             linear-gradient(to left,var(--card,#fff),var(--card,#fff)) right center/24px 100% no-repeat local,
             linear-gradient(to right,rgba(0,0,0,.18),transparent) left center/12px 100% no-repeat scroll,
             linear-gradient(to left,rgba(0,0,0,.18),transparent) right center/12px 100% no-repeat scroll }
.explorer-table { width:100%; border-collapse:collapse; font-size:var(--fs-6); }
.planet-detail { display:none }
@media(max-width:480px) {
  /* Degree and Nakshatra move under the planet name so the House column stays in view. */
  .explorer-table.has-detail .detail-cell, .explorer-table.has-detail thead th:nth-child(3), .explorer-table.has-detail thead th:nth-child(4) { display:none }
  .explorer-table .planet-detail { display:block; font-size:var(--fs-6); font-weight:400; color:var(--muted); line-height:1.3; padding-bottom:2px }
  .explorer-table th, .explorer-table td { padding:4px 6px }
}
.explorer-table th, .explorer-table td { text-align:left; padding:4px 8px; border-bottom:1px solid var(--line) }
.explorer-table thead th { font-size:var(--fs-7); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:8px }
.planet-pick { display:flex; align-items:center; gap:8px; border:0; background:none; color:var(--ink); font-weight:600; min-height:40px; padding:0; text-align:left }
.planet-pick .glyph { color:var(--saffron); width:18px }
.planet-pick[aria-pressed="true"] { color:var(--teal); text-decoration:underline }
.explorer-pick { min-height:1.6em; font-weight:600; color:var(--teal) }
.explorer-pick .pick-place, .explorer-pick .pick-reading { display:block }
.explorer-pick .pick-reading { margin-top:4px; font-weight:400; color:var(--ink); line-height:1.55 }
.kc-transit { font:600 11px var(--sans); fill:#C0601F }
.kc-houseno { font:600 22px var(--sans); fill:var(--teal); opacity:.85 }
.chart-guide { background:var(--sky); color:var(--sky-text); border-radius:16px; padding:16px 20px; margin:0 0 16px }
.chart-guide .eyebrow { color:var(--gold); margin-bottom:6px }
.chart-guide p { margin:0 0 10px }
.chart-guide .quiet-button { background:transparent; color:var(--sky-text); border-color:#ffffff55 }
.chart-guide .text-button { color:var(--gold) }
.guide-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.kc-guide .kc-planet, .kc-guide .kc-sign, .kc-guide .kc-rising { opacity:.25 }
.kc-guide-1 .kc-asc { fill:#F2C978 } .kc-guide-1 .kc-rising { opacity:1 }
.kc-guide-2 .kc-planet { opacity:.12 }
.kc-guide-3 .kc-sign { opacity:1; fill:var(--saffron); font-weight:700; font-size:var(--fs-6); }
.kc-guide-4 .kc-planet { opacity:1; fill:var(--teal) }
.more-charts { margin-top:20px }
@media(max-width:767px) { .explorer { grid-template-columns:minmax(0,1fr) } .explorer-head h2 { font-size:var(--fs-2); } }
.chart-guide .primary-button { background:var(--gold); color:var(--sky) }

/* Good dates: purpose tabs and the wedding-date month grid (redesign P1) */
.subtabs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 20px }
.subtabs-label { color:var(--muted); font-size:var(--fs-6); margin-right:4px }
.subtab { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px; padding:8px 16px; min-height:44px; font-size:var(--fs-5); }
.subtab.active { background:var(--sky); border-color:var(--sky); color:var(--sky-text) }
.month-jumps { display:flex; gap:6px; overflow-x:auto; padding:4px 0 10px; scrollbar-width:thin }
.month-jump { display:flex; flex-direction:column; align-items:center; min-width:52px; min-height:52px; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:12px; padding:6px 8px; font-size:var(--fs-6); }
.month-jump small { color:var(--muted); font-size:var(--fs-7); }
.month-jump[aria-pressed="true"] { background:var(--sky); color:var(--sky-text); border-color:var(--sky) }
.month-jump[aria-pressed="true"] small { color:var(--sky-muted) }
.grid-title { font-family:var(--serif); font-size:var(--fs-3); margin:10px 0 }
.vivah-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px }
.grid-weekday { font-size:var(--fs-6); color:var(--muted); text-align:center; padding:4px 0 }
.grid-pad { min-height:64px; color:#C7C0B2; font-size:var(--fs-6); padding:6px }
.grid-day { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:64px; padding:6px 8px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--muted); text-align:left; min-width:0 }
.grid-day b { color:var(--ink); font-weight:600 }
.grid-day small { font-size:var(--fs-7); line-height:1.25; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; max-width:100% }
.grid-day.has-window { background:var(--teal-soft); border-color:#9FC2BA; color:var(--teal) }
.grid-day[aria-pressed="true"] { outline:2px solid var(--sky); outline-offset:1px }
.grid-legend { display:flex; gap:18px; flex-wrap:wrap; font-size:var(--fs-6); color:var(--muted); margin:10px 0 }
.grid-legend i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; border:1px solid var(--line) }
.swatch-window { background:var(--teal-soft) } .swatch-excluded { background:var(--card) }
.grid-detail { background:var(--soft); border-radius:14px; padding:14px 18px; margin:6px 0 18px }
.grid-detail h4 { margin:0 0 6px }
.grid-detail ul { margin:0; padding-left:18px }
@media(max-width:767px) { .grid-day small { display:none } .grid-day, .grid-pad { min-height:44px; padding:4px 6px } .vivah-grid { gap:4px } }
/* Compatibility: neutral factor bars; life chapters now (D-4) */
.factor-bar { height:8px; border-radius:4px; background:var(--soft); overflow:hidden; max-width:320px; margin:-2px 0 8px }
.factor-bar span { display:block; height:100%; background:var(--muted) }
.match-periods { background:var(--soft); border-radius:16px; padding:16px 20px; margin:0 0 24px }
.match-periods:empty { display:none }
.match-periods h3 { margin:0; font-size:var(--fs-4); }
.match-period-list { margin:8px 0; padding-left:18px }

/* Sky wheel beside the Today band; a medallion that opens it on phone (redesign P1) */
.today-sky-grid { display:grid; grid-template-columns:minmax(0,860px) 300px; gap:40px; align-items:start }
.sky-wheel > summary { list-style:none; display:flex; align-items:center; gap:10px; color:var(--sky-text); font-size:var(--fs-5); cursor:pointer; min-height:44px }
.sky-wheel > summary::-webkit-details-marker { display:none }
.medallion { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid #ffffff44; color:var(--gold); font-size:var(--fs-3); }
.sky-wheel-svg { width:100%; max-width:300px; display:block; margin:8px auto 0 }
.wheel-edge { fill:none; stroke:#ffffff2e }
.wheel-sign { font:15px var(--glyph); fill:var(--sky-muted) }
.wheel-stars { fill:#ffffff55; transform-origin:150px 150px }
@media(prefers-reduced-motion:no-preference){ .wheel-stars { animation:turn 240s linear infinite } }
.wheel-centre { font:600 8px var(--sans); letter-spacing:.12em; fill:var(--sky-muted) }
.wheel-planet circle { fill:var(--sky-3); stroke:#ffffff66 }
.wheel-planet.moon circle { stroke:var(--gold) }
.wheel-planet text { font:600 9px var(--sans); fill:var(--sky-text); pointer-events:none }
.wheel-planet { cursor:pointer }
.wheel-picks { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 6px; box-sizing:border-box; max-width:100%; min-width:0 }
.wheel-pick { display:inline-flex; align-items:center; gap:4px; max-width:100%; min-height:36px; padding:0 10px; border:1px solid #ffffff33; border-radius:999px; background:transparent; color:var(--sky-text); font-size:var(--fs-6); }
.wheel-pick .glyph { color:var(--gold) }
.wheel-pick[aria-pressed="true"] { background:var(--gold); color:var(--sky); border-color:var(--gold) }
.wheel-pick[aria-pressed="true"] .glyph { color:var(--sky) }
.wheel-line { color:var(--sky-text); font-size:var(--fs-5); margin:6px 0 }
@media(max-width:1100px) { .today-sky-grid { grid-template-columns:minmax(0,1fr) 260px; gap:24px } }
@media(max-width:767px) {
  .today-sky-grid { grid-template-columns:minmax(0,1fr); gap:12px }
  .sky-wheel { order:-1; min-width:0; max-width:100% }
  .sky-wheel #sky-wheel-body { min-width:0; max-width:100% }
  .wheel-pick { min-height:44px }
}
/* Patterns: found first, the rest collapsed */
.pattern-group { font-family:var(--serif); font-weight:600; font-size:var(--fs-4); margin:14px 0 4px }
/* Learn glossary */
.glossary-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-top:14px }
.term-card { border:1px solid var(--line); border-radius:16px; padding:16px 18px; background:var(--card) }
.term-card:focus { outline:3px solid var(--teal); outline-offset:2px }
.term-card h3 { margin:0; font-size:var(--fs-4); }
.term-name { margin:2px 0 8px; color:var(--saffron); font-style:italic; font-size:var(--fs-5); }
.term-card p:last-child { margin:0; font-size:var(--fs-6); color:var(--muted) }
.learn-howto { margin-top:24px }
.learn-terms { margin-top:24px }
.learn-terms[hidden] { display:none }
.learn-terms .term-card h3 { margin-bottom:6px }
.learn-version { margin:20px 0 0 }
@media(max-width:767px) {
  /* Term cards on a phone: tighter, so Learn stays a page rather than a scroll marathon */
  .glossary-grid { gap:8px }
  .term-card { padding:12px 14px; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px }
  .term-card > * { flex-basis:100% }
  .term-card > h3, .term-card > .term-name { flex-basis:auto }
  .term-name { margin:0 0 4px }
  .learn-terms .term-card h3 { margin-bottom:4px }
  #learn-view .panchang-panel { padding:16px 14px }
  #learn-view .learn-method p { line-height:1.55 }
  #explainers-result .explainer-item { margin:8px 0 }
  .term-card p:last-child { line-height:1.45 }
}
/* Learn: sub-navigation and "How we calculate" (week 4 item 14) */
.learn-subnav { display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; margin:-8px 0 16px; font-size:var(--fs-5); color:var(--muted) }
.learn-subnav a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); font-weight:600; text-underline-offset:3px }
.learn-method { margin-top:24px; scroll-margin-top:16px }
.learn-method h3 { margin:24px 0 6px; font-family:var(--serif); font-weight:600; font-size:var(--fs-4); }
.learn-method p { max-width:68ch; line-height:1.65; margin:0 0 12px }
.learn-method .small-note { margin-bottom:4px }
#glossary-panel, #explainers-panel { scroll-margin-top:16px }
.sky-moved { color:var(--gold); font-size:var(--fs-5); margin:0 0 10px } .sky-moved:empty { display:none }
@media(max-width:767px) {
  .today-sky-grid { position:relative }
  .sky-wheel { order:0 }
  .sky-wheel:not([open]) { position:absolute; top:-8px; right:0 }
  .sky-wheel:not([open]) > summary #sky-wheel-summary-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }
  .sky-wheel:not([open]) .medallion { width:44px; height:44px }
  .today-sky .sky-eyebrow { margin-right:52px }
}

/* Every destination opens on the same sky band (Compatibility, Good dates, Learn, swar calendar) */
.page-band { margin-bottom:28px; padding-bottom:30px }
.page-band .sky-inner { max-width:none }
.page-band .page-heading { margin-bottom:0 }
.page-band .eyebrow { color:var(--gold) }
.page-band h1 { color:var(--sky-text) }
.page-band .page-heading p, .page-band .small-note { color:#E4DED2 }
.page-band .small-note a { color:var(--gold) }
.page-band .subtabs { margin:20px 0 0 }
.page-band .subtabs-label { color:var(--sky-muted) }
.page-band .subtab { background:transparent; color:var(--sky-text); border-color:#ffffff44 }
.page-band .subtab.active { background:var(--gold); color:var(--sky); border-color:var(--gold) }
.page-band .quiet-button { background:transparent; color:var(--sky-text); border-color:#ffffff55 }
:lang(hi) .page-band h1 { line-height:1.35 }
@media(max-width:767px) { .page-band { margin-bottom:20px } .page-band h1 { font-size:var(--fs-1); } }

/* Moon's star ring: 27 segments, the current one filled as far as the Moon has gone */
.star-card { display:flex; justify-content:space-between; gap:12px; align-items:flex-start }
.star-ring-box { flex:none; width:72px; height:72px }
.star-ring { width:72px; height:72px }
.star-seg { fill:none; stroke:var(--line); stroke-width:5 }
.star-seg.done { stroke:#CFC6B4 }
.star-seg.now { stroke:var(--teal) }
.star-ring text { font:600 15px var(--sans); fill:var(--ink) }
@media(max-width:767px) { .star-card { flex-direction:column-reverse } .star-ring-box, .star-ring { width:56px; height:56px } }

/* Life-area icons: one stroke family, never a status colour */
.area-title { display:flex; align-items:center; gap:10px }
.area-icon { width:22px; height:22px; flex:none; fill:none; stroke:var(--saffron); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

/* Whose chart? (saved profiles on this device) */
.profile-switch { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin:2px 0 4px }
.sky-select { flex-direction:row!important; align-items:center; gap:10px!important; color:var(--sky-muted); font-weight:400!important }
.sky-select select { width:auto; max-width:min(320px,70vw); min-height:44px; border-radius:999px; background:var(--sky-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FAF7F0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 12px 8px; color:var(--sky-text); border-color:#ffffff33 }
.saved-pick { font-size:var(--fs-6); color:var(--muted); margin-bottom:12px }
.offline-note { background:#ffffff14; border:1px solid #E8A33D66; border-radius:12px; padding:8px 12px; margin:0 0 16px; font-size:var(--fs-6); color:var(--sky-text) }

/* Good dates · a day's calendar: one month at a place, each day pickable, the day on a ribbon */
.date-finder { margin-bottom:24px }
.finder-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 20px; margin-bottom:12px }
.finder-month { display:flex; align-items:center; gap:10px }
.finder-month h2 { margin:0; min-width:10ch; text-align:center }
.finder-step { min-width:44px; font-size:var(--fs-3); line-height:1; padding:8px 12px }
.finder-place { color:var(--muted); font-size:var(--fs-6); }
.grid-day.finder-cell { color:var(--ink) }
.grid-day.finder-cell small { color:var(--muted) }
.grid-day.finder-cell.today { border-color:var(--teal); box-shadow:inset 0 0 0 1px var(--teal) }
.grid-day.finder-cell.full-moon b::after, .grid-day.finder-cell.new-moon b::after { content:" ○"; color:var(--saffron); font-weight:400 }
.grid-day.finder-cell.new-moon b::after { content:" ●" }
.finder-day { margin-top:16px }
.finder-day .ribbon-card { background:var(--sky); color:var(--sky-text) }
.finder-day h3 { color:var(--sky-text); margin:0 0 4px; font-size:var(--fs-4); }
.finder-day .finder-facts { color:#E4DED2; margin:0 0 6px; font-size:var(--fs-5); }
.version-note { margin-top:10px; font-size:var(--fs-6); } .version-note > summary { color:var(--muted); font-weight:500; font-size:var(--fs-6); }
.moon-phase { flex:none; width:44px; height:44px }
.moon-phase-svg { width:44px; height:44px }
.moon-dark { fill:#2A3A55 }
.moon-lit { fill:#F3E9CF }
/* Compatibility: two charts side by side, summary still first */
.match-charts { margin:0 0 24px }
.match-charts:empty { display:none }
.match-charts h3 { margin:0; font-size:var(--fs-4); }
.match-chart-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:10px 0 }
.match-chart { margin:0 }
.match-chart figcaption { display:flex; flex-direction:column; gap:2px; margin-bottom:8px }
.match-chart .kundli-chart { max-width:320px }
@media(max-width:560px) { .match-chart-pair { gap:10px } .match-chart figcaption .small-note { font-size:var(--fs-6); } }

/* My chart header on a phone (<=480px): the tab bar and the first story card start on the first screen. */
.lbl-short { display:none }
.chart-meta-row { display:contents }
@media(max-width:480px) {
  .chart-band { padding-top:20px }
  .chart-band .sky-headline, :lang(hi) .chart-band .sky-headline { font-size:var(--fs-2); margin-bottom:12px }
  .chart-badges { margin-bottom:8px }
  .chart-band-top { gap:10px }
  .chart-actions { flex-wrap:nowrap; gap:8px }
  .chart-actions button { min-width:0; padding:8px 10px; min-height:44px; font-size:var(--fs-5); white-space:nowrap }
  .chart-actions .lbl-long { display:none }
  .chart-actions .lbl-short { display:inline }
  .sign-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:10px 0 6px }
  .sign-tile, .sign-tile.tile-chapter { grid-column:auto; flex-direction:row; align-items:center; gap:8px; padding:7px 10px; border-radius:12px }
  .sign-tile .glyph { font-size:var(--fs-4); width:20px }
  .sign-tile > div { min-width:0 }
  .sign-tile .tile-label { font-size:var(--fs-7); letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .sign-tile strong { font-size:var(--fs-5); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .sign-tile small { display:none }
  .chart-meta-row { display:flex; align-items:center; justify-content:space-between; gap:8px 12px; margin:0 0 2px }
  .chart-meta-row .profile-switch { margin:0; gap:0 }
  .chart-meta-row .chart-remember { margin:0; gap:0 10px; justify-content:flex-end; font-size:var(--fs-6); }
  .chart-meta-row .sky-link { font-size:var(--fs-6); min-height:44px; padding:0 }
  .chart-meta-row .remember { font-size:var(--fs-6); gap:6px }
  .chart-band .kundli-tabs { margin-top:0 }
  .chart-band .kundli-tabs button { min-height:44px; padding:10px 12px 8px }
}

/* Persona and life stage (plan §3): one card on My chart, asked once, phone-first, 44px chips. */
.persona-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin:16px 0 0 }
.persona-card .eyebrow { margin-bottom:8px }
.persona-card h3 { margin:0 0 10px; font-size:var(--fs-4) }
.persona-card .persona-chips { margin-bottom:18px }
.persona-chips { display:flex; flex-wrap:wrap; gap:8px }
.persona-chip { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid var(--line); border-radius:999px; background:var(--soft); color:var(--ink); font-size:var(--fs-5); cursor:pointer }
.persona-chip[aria-pressed="true"] { border-color:var(--gold); background:#E8A33D22; font-weight:600 }
.persona-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:2px }
.persona-card .small-note { margin:10px 0 0 }
.persona-change { font-size:var(--fs-6) }
.persona-line { display:inline-flex; align-items:center; white-space:nowrap; font-size:var(--fs-6); color:var(--sky-muted) }
.persona-line[hidden] { display:none }
.persona-change::before { content:"\00b7\00a0"; color:var(--sky-muted); text-decoration:none; display:inline-block }
.persona-summary { color:var(--sky-muted) }
.persona-summary:not(:empty) { margin-right:.5ch }
@media(max-width:480px) { .persona-card { padding:16px; margin-top:12px } .persona-chip { padding:0 14px } .chart-meta-row { flex-wrap:wrap } }
/* People and conversations (paid-reports spec §3, §4.5) */
.for-row { margin-bottom:14px }
@media(max-width:480px) { .for-row .tq-pills { grid-template-columns:repeat(2,minmax(0,1fr)) } }
.quiet-link { background:none; border:0; padding:0; font:inherit; color:var(--teal); text-decoration:underline; cursor:pointer; min-height:44px; display:inline-flex; align-items:center }
.people-list, .conv-list { list-style:none; margin:0 0 14px; padding:0 }
.person, .conv-thread { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; padding:12px 0; border-bottom:1px solid var(--line) }
.person-name, .conv-title { font-weight:600 }
.person-rel { color:var(--muted) }
.person-actions, .conv-actions { display:flex; flex-wrap:wrap; gap:8px }
.person-edit { flex:1 1 220px; margin:0 }
.person-edit input { width:100%; min-height:44px }
.conv-meta { display:flex; flex-direction:column; gap:2px; min-width:0 }
.conv-person { margin:18px 0 4px }
.conv-message { padding:14px 0; border-bottom:1px solid var(--line) }
.conv-answer { white-space:pre-line }
.conv-from ul { margin:4px 0 8px; padding-left:20px }
.conv-from li { margin-bottom:4px }
.conversations-panel { max-width:760px; margin:0 auto 40px }
.people-panel { color:var(--ink); text-align:left; margin-bottom:16px }
.people-panel :is(h2,.person-name,.save-consent) { color:var(--ink) }
.people-panel .save-consent { display:flex; align-items:center; gap:10px; margin:12px 0 }
.people-panel .person-edit input { background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:0 12px }

/* Saved readings panel (round b): the same tokens as the People panel, so the heading and intro read on the dark first-run band */
#saved-readings { color:var(--ink); text-align:left; margin-bottom:16px }
#saved-readings :is(h2,h3,p,label,summary,.small-note) { color:var(--ink) }
#saved-readings :is(select,.quiet-button) { color:var(--ink) }

/* Ask Panditji box (round b): one component on Today and on Kundli */
.ask-box { color:var(--ink); text-align:left }
.ask-box[hidden], .today-for[hidden], .ask-wallet[hidden] { display:none!important }
.ask-title { margin:0 0 12px; color:var(--ink) }
.ask-sample-label { display:inline-block; margin:0 0 8px; padding:6px 14px; border-radius:999px; background:var(--soft); border:1px solid var(--line); font-size:var(--fs-6); font-weight:600; color:var(--ink) }
.ask-turn { padding:14px 0; border-bottom:1px solid var(--line) }
.ask-turn:last-child { border-bottom:0 }
.ask-q { margin:0 0 6px; font-weight:600; color:var(--ink) }
.ask-a { margin:0 0 8px; white-space:pre-line; color:var(--ink) }
.ask-a.plain { padding:10px 14px; border-left:3px solid var(--line); border-radius:8px; background:var(--soft) }
.ask-thinking { color:var(--muted); font-style:italic }
.ask-from { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px }
.ask-from-label { font-size:var(--fs-7); letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.ask-chips { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none }
.ask-chip { display:inline-flex; align-items:center; max-width:100%; padding:6px 12px; border-radius:16px; border:1px solid transparent; background:var(--teal-soft); color:var(--teal); font-size:var(--fs-6); line-height:1.4; text-align:left }
button.ask-chip { min-height:44px; cursor:pointer }
button.ask-chip:hover { border-color:var(--teal); text-decoration:underline }
.ask-chip.static { background:var(--soft); color:var(--ink) }
.ask-cannot { margin:8px 0 0; padding-left:12px; border-left:2px solid var(--line); font-size:var(--fs-6); color:var(--muted) }
.ask-notice { margin:10px 0; padding:10px 14px; border-radius:12px; border:1px solid var(--caution-line); background:var(--caution-bg); color:var(--ink) }
.ask-who { flex-direction:column; align-items:flex-start; gap:6px; margin:0 0 12px; color:var(--ink) }
.ask-who > span { font-size:var(--fs-6); font-weight:500; color:var(--muted) }
.ask-person { width:auto; min-width:min(260px,100%); max-width:100% }
.ask-input { display:block; width:100%; box-sizing:border-box; min-height:96px; margin-top:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font:inherit; resize:vertical }
.ask-input[readonly] { background:var(--soft) }
.ask-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px }
.ask-count { margin-right:auto; font-size:var(--fs-6); color:var(--muted) }
.ask-signin { margin:14px 0 10px; color:var(--ink) }
.ask-wallet { margin:12px 0 0; font-size:var(--fs-6); color:var(--muted) }
.ask-conversations { margin:6px 0 0 }
.cite-flash { outline:3px solid var(--gold); outline-offset:4px; border-radius:var(--radius) }
.today-for { margin:16px 0 0 }
.today-for-label { display:inline-flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 12px; color:var(--ink) }
.today-for-label select { width:auto; max-width:min(360px,100%) }
.today-for .small-note { margin-left:12px }

/* Reports (round c part 2): the Jeevan Patri page, Ek Sawaal, the book and "Your reports". Calm: no badges that
   shout, no sticky buttons; only the chapter list is sticky, on wide screens. */
.reports-panel, #reports-body:not(:empty) { max-width:1100px; margin-inline:auto }
.reports-panel > div > * + * { margin-top:22px }
.report-person { width:auto; min-width:min(260px,100%); max-width:100% }
.book-sample, .book-panel { padding:0 0 4px }
.book-panel { border-top:1px solid var(--line); padding-top:18px }
.book-panel .primary-button + .quiet-button { margin-left:8px }
.book-intro { font-size:var(--fs-4); line-height:1.6; max-width:68ch }
.sample-periods { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px }
.period { border:1px solid var(--line); border-radius:14px; padding:14px 18px; background:var(--card) }
.period h4 { margin:0 0 4px; font-family:var(--serif); font-size:var(--fs-4); }
.period p { margin:4px 0 }
.period-current { border-color:var(--teal); background:var(--teal-soft) }
.period-badge { font-family:var(--sans); font-size:var(--fs-7); letter-spacing:.06em; text-transform:uppercase; color:var(--teal); margin-left:8px; font-weight:600 }
.period-locked { background:var(--soft); border-style:dashed }
.period-lock { color:var(--muted) }
.period-rows { margin:10px 0 0 }
.period-rows dt { font-size:var(--fs-7); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:8px }
.period-rows dd { margin:2px 0 0; max-width:68ch }
.period-subs { margin:10px 0 0; padding-left:18px; font-size:var(--fs-6); color:var(--muted) }
.period-subs li.current { color:var(--ink); font-weight:600 }
.intake-box { margin:14px 0 }
.intake-box label { display:block; font-weight:500; margin-bottom:6px }
.intake-box textarea, .es-ask textarea { display:block; width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font:inherit; resize:vertical }
.intake-count { display:block; margin:4px 0 0 }
.es-label { display:block; font-weight:500 }
.es-ask .ask-input { margin-top:8px }
.es-stacked { font-weight:500 }
.book-refused { max-width:68ch }
.book-locked p { max-width:68ch }
.book-progress .book-stage { font-size:var(--fs-4); font-family:var(--serif) }
.book { margin-top:28px }
.book-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px; margin-bottom:12px }
.book-title { font-size:var(--fs-2); margin:0 }
.book-question { flex-basis:100%; margin:6px 0; padding:2px 0 2px 14px; border-left:3px solid var(--gold); font-family:var(--serif); font-size:var(--fs-4); }
.book-pdf { text-decoration:none; display:inline-flex; align-items:center; margin-left:auto }
.book-gates { margin:0 0 18px; padding:12px 16px; border:1px solid var(--caution-line); background:var(--caution-bg); border-radius:12px }
.book-gate { margin:4px 0 }
.book-layout { display:grid; grid-template-columns:minmax(0,230px) minmax(0,1fr); gap:28px; align-items:start }
.book-nav { position:sticky; top:84px; max-height:calc(100vh - 100px); overflow:auto }
.book-nav-select { display:none }
.book-nav-list { list-style:none; margin:0; padding:0; counter-reset:none }
.book-nav-list a { display:flex; gap:8px; padding:8px 4px; min-height:44px; box-sizing:border-box; align-items:center; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); font-size:var(--fs-6); line-height:1.35 }
.book-nav-list a:hover { color:var(--teal); text-decoration:underline }
.book-num { display:inline-block; min-width:1.6em; font-weight:600; color:var(--teal) }
.book-chapter { padding:22px 0; border-bottom:1px solid var(--line); scroll-margin-top:84px }
.book-chapter-title { font-family:var(--serif); font-size:var(--fs-3); margin:0 0 10px }
.book-body { max-width:68ch; line-height:1.7 }
.book-body h4 { font-family:var(--serif); font-size:var(--fs-4); margin:18px 0 6px }
.book-body p, .book-body ol, .book-body ul { margin:0 0 12px }
.book-body li { margin-bottom:8px }
.book-cites { margin-top:12px }
.book-cannot { margin-top:14px; max-width:68ch }
.book-missing-line { color:var(--muted); max-width:68ch }
.book-closing { border:1px solid var(--line); border-left:4px solid var(--ink); margin:18px 0; background:var(--soft); padding-inline:20px; border-radius:var(--radius) }
.book-footer { margin-top:22px; max-width:68ch }
.book-table-wrap { overflow-x:auto; margin:12px 0; border:1px solid var(--line); border-radius:12px }
.book-table { border-collapse:collapse; width:100%; min-width:520px; font-size:var(--fs-6); }
.book-table th, .book-table td { text-align:left; vertical-align:top; padding:8px 12px; border-bottom:1px solid var(--line) }
.book-table th { background:var(--soft); font-weight:600 }
.reports-heading { margin:0 0 6px }
.reports-section { margin-bottom:28px }
.reports-start { margin-top:10px }
.report-question { font-family:var(--serif) }
.report-pdf { text-decoration:none; display:inline-flex; align-items:center }
.kundli-reports { margin:18px 0 0 }
.books-lead { max-width:68ch }
.books-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:16px 0 }
.book-card { border:1px solid var(--line); border-radius:12px; padding:18px; background:var(--card); display:flex; flex-direction:column; gap:6px }
.book-card h2, .book-card h3 { margin:0 }
.book-card p { margin:0; max-width:60ch }
.book-price { font-size:var(--fs-4); font-weight:600; color:var(--ink) }
.book-card-actions { margin-top:auto!important; padding-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:12px }
.books-packs { margin-top:28px }
.books-message { margin:10px 0 }
.ask-add-questions { margin-left:6px }
@media(max-width:800px) {
  .book-layout { grid-template-columns:minmax(0,1fr) }
  .book-nav { position:static; max-height:none; overflow:visible }
  .book-nav-list { display:none }
  .book-nav-select { display:block }
  .book-nav-select select { width:100%; max-width:100% }
  .book-pdf { margin-left:0 }
  .book-closing { padding-inline:14px }
}
@media print { .book-nav, .book-pdf { display:none } .book-layout { display:block } }