/* =========================================================================
   Jyotisha — design system
   CREAM PARCHMENT · ANTIQUE GOLD · DEEP MAROON. Warm, sacred, premium.
   No other hues. Every good→bad scale maps onto GOLD → BRONZE → MAROON —
   never green→red — so the whole app reads as one document.
   ========================================================================= */

:root {
  /* ---- type ---- */
  --f-display: 'Cinzel', ui-serif, Georgia, 'Times New Roman', serif;   /* regal */
  --f-body: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-dev: 'Noto Sans Devanagari', var(--f-body);                        /* Sanskrit */
  --f-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-xs: 0.7rem;  --t-sm: 0.8125rem; --t-base: 0.9375rem; --t-md: 1.0625rem;
  --t-lg: 1.2rem;  --t-xl: 1.55rem;   --t-2xl: 2rem;       --t-3xl: 2.7rem;

  /* ---- spacing ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px;
  --s6: 30px; --s7: 40px; --s8: 56px; --s9: 76px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;

  --sidebar-w: 224px;
  --topbar-h: 62px;
  --maxw: 1180px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}
/* ---------------- PARCHMENT (default, and the product's look) ---------------- */
:root, [data-theme="light"] {
  --cream:       #FBF8F2;
  --ink:         #4A2530;    /* body text — warm deep maroon-brown, never black */
  --ink-2:       #6B4750;
  --ink-3:       #85656C;    /* secondary / muted */
  --maroon:      #8B1E3F;
  --maroon-deep: #7A1F2B;
  --gold:        #C9A227;
  --gold-soft:   #B8901E;
  --saffron:     #D98A2B;

  --bg: var(--cream);
  --bg-2: #F8F1E4;
  --panel: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FDF7EC;
  --surface-solid: #FFFFFF;
  --panel-border: rgba(139,30,63,0.16);
  --line: var(--panel-border);
  --line-strong: rgba(139,30,63,0.30);

  --gold-tint: rgba(201,162,39,0.12);

  /* THE THREE-TIER SCALE — gold (strong) → bronze (middling) → maroon (weak) */
  --tier-hi:   #C9A227;  --tier-hi-2:   #E0B94A;  --tier-hi-ink:   #856311;
  --tier-mid:  #A5651E;  --tier-mid-2:  #C9843A;  --tier-mid-ink:  #9E5A1A;
  --tier-lo:   #8B1E3F;  --tier-lo-2:   #B5384F;  --tier-lo-ink:   #B02F4A;
  --tier-hi-soft:  #F7EDCC;
  --tier-mid-soft: #FBEBD9;
  --tier-lo-soft:  #FBE2E2;
  /* SOLID fills, for scores drawn as filled chips rather than tinted ones.
     Gold and maroon are used at full strength; the bronze is taken two steps
     down from --tier-mid so cream type on it clears WCAG AA (5.3:1 against
     #FFF6E5, where #A5651E only reaches 4.4:1). Same colour, legible. */
  /* THE SIGNATURE. This gradient is used in eight places in this stylesheet
     and web-next adopted none of it, which is why the React client reads as
     beige: it dropped rose and never once used saffron. Named here so both
     clients can reach for the same thing instead of re-typing the stops. */
  --rose:      #C0324B;
  --saffron:   #E08A3C;
  --signature: linear-gradient(90deg, #8B1E3F, #C0324B, #E08A3C);

  --tier-hi-solid:  #C9A227;
  --tier-mid-solid: #93590F;
  --tier-lo-solid:  #8B1E3F;

  --card-glow: 0 14px 34px rgba(122,31,43,0.10);
  --shadow-1: 0 2px 6px rgba(122,31,43,.06);
  --shadow-2: var(--card-glow);
  --shadow-3: 0 22px 52px rgba(122,31,43,.16);
  --aurora-o: 1;
  --aur-1: rgba(201,162,39,0.14); --aur-2: rgba(139,30,63,0.10); --aur-3: rgba(217,138,43,0.10);
}
/* ---------------- NIGHT PARCHMENT (opt-in) ----------------
   Same three colours, inverted onto deep aubergine-maroon. Deliberately NOT a
   different palette — dark mode must not become a second design language. */
[data-theme="dark"] {
  --cream:       #171014;
  --ink:         #F3E7D6;
  --ink-2:       rgba(243,231,214,0.74);
  --ink-3:       rgba(243,231,214,0.50);
  --maroon:      #E5A0B0;
  --maroon-deep: #C8697F;
  --gold:        #E8C56A;
  --gold-soft:   #C9A227;
  --saffron:     #E9A051;

  --bg: #140E12;
  --bg-2: #1D141A;
  --panel: #201620;
  --surface: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.07);
  --surface-solid: #201620;
  --panel-border: rgba(232,197,106,0.20);
  --line: var(--panel-border);
  --line-strong: rgba(232,197,106,0.36);

  --gold-tint: rgba(232,197,106,0.14);

  --tier-hi:   #E0B94A;  --tier-hi-2:   #F2D57E;  --tier-hi-ink:   #EFCE78;
  --tier-mid:  #C9843A;  --tier-mid-2:  #E0A25C;  --tier-mid-ink:  #E0A25C;
  --tier-lo:   #B5384F;  --tier-lo-2:   #D9647C;  --tier-lo-ink:   #E5899B;
  --tier-hi-soft:  rgba(224,185,74,0.16);
  --tier-mid-soft: rgba(201,132,58,0.16);
  --tier-lo-soft:  rgba(181,56,79,0.18);

  --card-glow: 0 14px 40px rgba(0,0,0,.45);
  --shadow-1: 0 2px 6px rgba(0,0,0,.4);
  --shadow-2: var(--card-glow);
  --shadow-3: 0 22px 60px rgba(0,0,0,.55);
  --aurora-o: .8;
  --aur-1: rgba(201,162,39,0.20); --aur-2: rgba(139,30,63,0.24); --aur-3: rgba(217,138,43,0.14);
}
/* Legacy semantic aliases — the views say pos/warn/neg, the THEME decides that
   those mean gold/bronze/maroon. Keeps rule 1 enforceable in one place. */
:root, [data-theme="light"], [data-theme="dark"] {
  --pos: var(--tier-hi-ink);  --pos-soft: var(--tier-hi-soft);
  --warn: var(--tier-mid-ink); --warn-soft: var(--tier-mid-soft);
  --neg: var(--tier-lo-ink);  --neg-soft: var(--tier-lo-soft);
  --accent: var(--gold-soft);        /* overridden per-module by the router */
  --gold-2: var(--gold-soft);
  --gold-soft-bg: var(--gold-tint);
}
/* ========================= BASE ========================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink);
  background:
    radial-gradient(1000px 720px at 82% -12%, rgba(248,232,206,0.9), transparent 60%),
    radial-gradient(900px 620px at 4% 2%,     rgba(247,236,214,0.85), transparent 58%),
    radial-gradient(950px 720px at 52% 112%,  rgba(245,231,206,0.8), transparent 60%),
    linear-gradient(180deg, #FDFBF5, #F8F1E4);
  background-attachment: fixed;
  font-family: var(--f-body); font-size: var(--t-base); line-height: 1.65;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1,h2,h3,h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.22;
              letter-spacing: .005em; margin: 0; color: var(--maroon); }
p { margin: 0 0 var(--s3); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
kbd { font-family: var(--f-mono); font-size: 0.72em; padding: 2px 5px; border-radius: 5px;
      background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); }
::selection { background: var(--gold); color: #FFF6E5; }
/* [hidden] must beat the component display rules below it */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
/* ambient background */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
          opacity: var(--aurora-o); }
.aur { position: absolute; border-radius: 50%; filter: blur(90px); }
.aur-1 { width: 620px; height: 620px; top: -220px; right: -140px;
         background: radial-gradient(circle, var(--aur-1), transparent 68%);
         animation: drift1 26s ease-in-out infinite alternate; }
.aur-2 { width: 560px; height: 560px; bottom: -220px; left: -160px;
         background: radial-gradient(circle, var(--aur-2), transparent 68%);
         animation: drift2 32s ease-in-out infinite alternate; }
.aur-3 { width: 480px; height: 480px; top: 38%; left: 46%;
         background: radial-gradient(circle, var(--aur-3), transparent 70%);
         animation: drift1 38s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate3d(-60px, 70px, 0) scale(1.15); }
}
@keyframes drift2 { to { transform: translate3d(70px, -50px, 0) scale(1.1); }
}
[data-theme="dark"] body {
  background: radial-gradient(1000px 720px at 82% -12%, rgba(90,30,50,.55), transparent 60%),
              radial-gradient(900px 620px at 4% 2%, rgba(70,45,20,.45), transparent 58%),
              linear-gradient(180deg, #140E12, #1B1218);
}
/* ========================= LAYOUT ========================= */
.app { position: relative; z-index: 1; display: grid;
       grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
/* ---- sidebar ---- */
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(20px); z-index: 30;
}
.side-head { display: flex; align-items: center; justify-content: space-between;
             padding: var(--s4) var(--s3) var(--s3); }
.brand { display: flex; align-items: center; gap: 10px; }
/* The Cosmic 6 mark. It is a circular illustration in violet and gold, so it
   is cropped to its circle with the corners knocked out — a black square would
   read as a sticker dropped onto the cream panel. Kept at 32px so it reads as
   a jewel beside the wordmark rather than as a second field competing with it.
   The palette rule (cream / gold / maroon) governs the UI and every score
   scale; it was never a rule about imagery, and the mark's gold ring is what
   ties it to the rest. */
.brand-mark { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
              object-fit: cover; display: block;
              box-shadow: 0 4px 14px rgba(122,31,43,.28); }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt b { font-family: var(--f-display); font-size: var(--t-md); letter-spacing: .02em;
               text-transform: uppercase; }
.brand-txt em { font-style: normal; font-size: var(--t-xs); color: var(--ink-3);
                letter-spacing: .08em; text-transform: uppercase; }
.sidebar .side-close { display: none; }
.side-person { display: flex; align-items: center; gap: 9px; margin: 0 var(--s3) var(--s3);
               padding: 8px 10px; border-radius: var(--r-md);
               background: var(--surface); border: 1px solid var(--line); }
.sp-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid;
             place-items: center; font-family: var(--f-display); font-weight: 700;
             background: linear-gradient(140deg, var(--maroon), var(--maroon-deep)); color: #FFF6E5;
             font-size: var(--t-sm); }
.sp-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sp-meta b { font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-meta span { font-size: var(--t-xs); color: var(--ink-3); overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.cmdk-trigger { display: flex; align-items: center; gap: 7px; width: calc(100% - var(--s3)*2);
  margin: 0 var(--s3) var(--s3); padding: 7px 10px; border-radius: var(--r-md); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-3);
  font-size: var(--t-sm); transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.cmdk-trigger:hover { border-color: var(--gold); color: var(--ink-2); }
.cmdk-trigger .cmdk-ic { font-size: 15px; }
.cmdk-trigger kbd { margin-left: auto; }
.side-nav { flex: 1; overflow-y: auto; padding: 0 var(--s2) var(--s4);
            scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.side-nav::-webkit-scrollbar { width: 7px; }
.side-nav::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.nav-group { margin-top: var(--s4); }
.nav-group:first-child { margin-top: 0; }
.nav-label { padding: 0 10px var(--s2); font-size: var(--t-xs); font-weight: 700;
             letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.nav-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px;
            font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); cursor: pointer;
            transition: background .16s var(--ease), color .16s var(--ease); position: relative; }
.nav-item .ni-ic { width: 20px; text-align: center; font-size: 15px; flex: 0 0 20px;
                   filter: saturate(.9); }
.nav-item .ni-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }
.nav-item .ni-score { font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700;
                      color: var(--ink-3); }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.on { background: var(--gold-tint); color: var(--maroon); font-weight: 700; }
.nav-item.on::before { content:""; position: absolute; left: -4px; top: 50%;
                       transform: translateY(-50%); width: 3px; height: 18px; border-radius: 3px;
                       background: var(--maroon); }
.nav-item.on .ni-score { color: var(--maroon); }
.side-foot { padding: var(--s3) var(--s3) var(--s3); border-top: 1px solid var(--line); }
.ghost-btn { width: 100%; padding: 9px 12px; border-radius: var(--r-md); cursor: pointer;
             background: transparent; border: 1px dashed var(--line-strong); color: var(--ink-2);
             font-size: var(--t-sm); font-weight: 600; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.ghost-btn:hover { border-color: var(--gold); color: var(--gold); border-style: solid; }
.side-cred { margin-top: 10px; font-size: var(--t-xs); color: var(--ink-3); text-align: center; }
/* ---- topbar ---- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); display: flex;
          align-items: center; gap: var(--s3); padding: 0 var(--s5);
          border-bottom: 1px solid var(--line);
          background: color-mix(in srgb, var(--bg) 82%, transparent);
          backdrop-filter: blur(18px); }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
            border-radius: 10px; background: transparent; border: 1px solid transparent;
            color: var(--ink-2); font-size: 16px; transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.menu-btn { display: none; }
.crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
          font-size: var(--t-sm); color: var(--ink-3); overflow: hidden;
          white-space: nowrap; text-overflow: ellipsis; }
.crumbs > * { flex: 0 0 auto; }
.crumbs b { color: var(--ink); font-weight: 600; }
.crumbs .crumb .sep { font-style: normal; opacity: .45; margin: 0 8px; }
.top-actions { display: flex; align-items: center; gap: var(--s2); }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
            border-radius: var(--r-full); font-size: var(--t-sm); font-weight: 600; cursor: pointer;
            background: linear-gradient(90deg, var(--maroon), #C0324B, #E08A3C); color: #FFF6E5;
            border: none; box-shadow: 0 6px 18px rgba(139,30,63,.28);
            transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.pill-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(139,30,63,.36); }
.pill-btn.secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
                      box-shadow: none; }
.pill-btn.secondary:hover { border-color: var(--gold); box-shadow: none; }
/* ---- view ---- */
.view { flex: 1; padding: var(--s6) var(--s6) var(--s9); }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.view-enter { animation: viewIn .42s var(--ease-out) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); }
}
/* ========================= PRIMITIVES ========================= */
.page-head { margin-bottom: var(--s6); }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-xs);
           font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
           color: var(--maroon); margin-bottom: var(--s2);
           padding: 4px 12px; border-radius: var(--r-full);
           background: var(--gold-tint);
           border: 1px solid rgba(201,162,39,.36); }
.page-title { font-size: var(--t-3xl); display: flex; align-items: baseline; gap: 14px;
              flex-wrap: wrap; }
.title-dev { font-family: var(--f-dev); font-size: .40em; font-weight: 600;
             color: var(--gold-soft); letter-spacing: 0; }
.page-sub { margin-top: var(--s2); color: var(--ink-2); font-size: var(--t-md); max-width: 68ch; }
/* Cards are near-white on the cream page with a maroon-tinted soft shadow and
   a thin gold/maroon accent. --accent is set per module by the router, but it
   is always drawn from the sanctioned gold/maroon family. */
.card {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  padding: var(--s5);
  background: linear-gradient(160deg, var(--panel), var(--surface-2));
  border: 1px solid var(--panel-border);
  box-shadow: var(--card-glow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}
.card::before {                       /* thin gold accent rule */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--accent), #EBD08A,
                              var(--accent), transparent);
  background-size: 200% 100%; animation: barflow 8s linear infinite;
}
@keyframes barflow { to { background-position: 200% 0; }
}
.card::after {                        /* soft gold corner bloom */
  content: ""; position: absolute; top: -45%; right: -12%; width: 340px; height: 340px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent), transparent 66%);
  animation: bloom 9s ease-in-out infinite alternate;
}
@keyframes bloom { from { opacity: .6; transform: scale(1); }
to { opacity: .95; transform: scale(1.12); }
}
.card > * { position: relative; z-index: 1; }
.card:hover { transform: translateY(-3px);
              border-color: color-mix(in srgb, var(--accent) 52%, var(--panel-border));
              box-shadow: var(--shadow-3); }
.card + .card { margin-top: var(--s4); }
.card-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
           margin-bottom: var(--s4); }
.card-hd h3 { font-size: var(--t-lg); display: flex; align-items: baseline; gap: 10px;
              flex-wrap: wrap; }
.card-hd h3 .dev { font-family: var(--f-dev); font-size: .66em; font-weight: 600;
                   color: var(--gold-soft); }
.card-hd .sub { font-size: var(--t-sm); color: var(--ink-3); margin-top: 2px; }
.card-note { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.6; margin-bottom: var(--s4); }
/* The floors are deliberately LOW and wrapped in min(..., 100%).
   Two reasons, both found by measuring the real rendered widths:
   (1) a 375px phone leaves ~297px inside the view+card padding, so a 150px
       floor needs 316px for two columns and silently drops to ONE — every stat
       row became a vertical stack and the overview ran to 8000px of scroll;
   (2) these grids also nest inside a g2 column (~314px on an iPad), where the
       same collapse happened on a screen with plenty of room.
   min(floor, 100%) additionally stops a single wide child from forcing
   horizontal overflow in a container narrower than the floor. */
.grid { display: grid; gap: var(--s4); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr)); }
.sect-t { font-size: var(--t-xs); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
          color: var(--maroon); margin: var(--s5) 0 var(--s3);
          display: flex; align-items: center; gap: 9px; }
.sect-t::after { content: ""; flex: 1; height: 1px;
                 background: linear-gradient(90deg, rgba(201,162,39,.55), transparent); }
.sect-t:first-child { margin-top: 0; }
.lede { font-size: var(--t-md); line-height: 1.8; color: var(--ink); }
.muted { color: var(--ink-3); }
.tiny { font-size: var(--t-xs); }
ul.bullets { margin: 0 0 var(--s3); padding-left: 18px; }
ul.bullets li { margin: 7px 0; color: var(--ink-2); line-height: 1.7; }
ul.bullets li::marker { color: var(--gold-soft); }
/* ---- stat tiles ---- */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
        padding: var(--s4); display: flex; flex-direction: column; gap: 4px; }
.stat .sl { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
            text-transform: uppercase; color: var(--maroon); opacity: .82; }
.stat .sv { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700;
            line-height: 1.15; color: var(--maroon); }
.stat .sn { font-size: var(--t-sm); color: var(--ink-3); }
/* ---- key/value ---- */
.kv { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
      border-radius: var(--r-md); overflow: hidden;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kv > div { background: var(--surface-solid); padding: 11px 14px; }
[data-theme="dark"] .kv > div { background: var(--bg-2); }
[data-theme="dark"] .badge.pos, [data-theme="dark"] .badge.gold {
  background: var(--tier-hi-soft); border-color: var(--tier-hi); color: var(--tier-hi-ink); }
[data-theme="dark"] .badge.warn {
  background: var(--tier-mid-soft); border-color: var(--tier-mid); color: var(--tier-mid-ink); }
[data-theme="dark"] .badge.neg {
  background: var(--tier-lo-soft); border-color: var(--tier-lo); color: var(--tier-lo-ink); }
.kv dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
         color: var(--maroon); margin-bottom: 3px; }
.kv dd { margin: 0; font-size: var(--t-sm); color: var(--ink); line-height: 1.6; }
/* ---- meters ---- */
.meter { display: grid; grid-template-columns: minmax(110px, 1.3fr) 3fr 46px; gap: var(--s3);
         align-items: center; padding: 6px 0; }
.meter .ml { font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
.meter .ml em { display: block; font-style: normal; font-size: var(--t-xs); color: var(--ink-3);
                margin-top: 1px; }
.meter .mt { display: block; height: 8px; border-radius: 6px;
             background: rgba(0,0,0,.06); overflow: hidden; border: none; }
[data-theme="dark"] .meter .mt { background: rgba(255,255,255,.10); }
/* display:block matters — these are <span>s, and width/height are ignored on
   inline boxes, so the fill would render at 0×0 no matter what width we set. */
.meter .mf { display: block; height: 100%; border-radius: var(--r-full); width: 0;
             background: linear-gradient(90deg, var(--tier-hi-2), var(--tier-hi));
             transition: width 1s var(--ease-out); }
.meter.pos .mf { background: linear-gradient(90deg, var(--tier-hi-2), var(--tier-hi)); }
.meter.warn .mf { background: linear-gradient(90deg, var(--tier-mid-2), var(--tier-mid)); }
.meter.neg .mf { background: linear-gradient(90deg, var(--tier-lo-2), var(--tier-lo)); }
.meter .mv { font-family: var(--f-display); font-size: var(--t-sm); font-weight: 700;
             text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.meter.pos .mv { color: var(--tier-hi-ink); }
.meter.warn .mv { color: var(--tier-mid-ink); }
.meter.neg .mv { color: var(--tier-lo-ink); }
/* ---- score ring ---- */
.ring { position: relative; display: grid; place-items: center; }
.ring svg { transform: rotate(-90deg); overflow: visible; }
.ring .rtrack { fill: none; stroke: var(--surface-2); }
.ring .rfill { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease-out); }
.ring .rtxt { position: absolute; text-align: center; line-height: 1.05; }
.ring .rtxt b { font-family: var(--f-display); font-size: 1.4rem; font-weight: 700; display: block; }
.ring .rtxt span { font-size: var(--t-xs); color: var(--ink-3); }
/* ---- badges ---- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
         border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 600;
         background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.badge.pos, .badge.gold { background: #F7EDCC; border-color: #E6D08A; color: #8A6410; }
.badge.warn { background: #FBEBD9; border-color: #EFD3B2; color: #9E5A1A; }
.badge.neg { background: #FBE2E2; border-color: #F1C0C0; color: #B02F4A; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.score-chip { display: inline-flex; align-items: baseline; gap: 3px; padding: 3px 10px;
              border-radius: var(--r-full); background: var(--surface-2);
              border: 1px solid var(--line); font-family: var(--f-display); }
.score-chip b { font-size: var(--t-sm); font-weight: 700; }
.score-chip span { font-size: var(--t-xs); color: var(--ink-3); }
.score-chip.pos  { border-color: #E6D08A; background: #F7EDCC; }
.score-chip.pos b  { color: var(--tier-hi-ink); }
.score-chip.warn { border-color: #EFD3B2; background: #FBEBD9; }
.score-chip.warn b { color: var(--tier-mid-ink); }
.score-chip.neg  { border-color: #F1C0C0; background: #FBE2E2; }
.score-chip.neg b  { color: var(--tier-lo-ink); }
[data-theme="dark"] .score-chip.pos  { background: var(--tier-hi-soft); border-color: var(--tier-hi); }
[data-theme="dark"] .score-chip.warn { background: var(--tier-mid-soft); border-color: var(--tier-mid); }
[data-theme="dark"] .score-chip.neg  { background: var(--tier-lo-soft); border-color: var(--tier-lo); }
/* ---- disclosure ---- */
.disc { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
        background: var(--surface); margin-bottom: var(--s2); }
.disc > summary { display: flex; align-items: center; gap: var(--s3); padding: 12px 15px;
                  cursor: pointer; list-style: none; font-weight: 600; font-size: var(--t-base); }
.disc > summary::-webkit-details-marker { display: none; }
.disc > summary::after { content: "⌄"; margin-left: auto; color: var(--ink-3); font-size: 15px;
                         transition: transform .25s var(--ease); flex: 0 0 auto; }
.disc[open] > summary::after { transform: rotate(180deg); }
.disc > summary:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.disc[open] > summary { border-bottom: 1px solid var(--line); }
.disc .dt-main { flex: 1; min-width: 0; }
.disc .dt-main em { font-style: normal; font-weight: 400; color: var(--ink-3);
                    font-size: var(--t-sm); }
.disc-body { padding: var(--s4) var(--s4) var(--s5); }
.disc.dim { opacity: .58; }
.disc.dim:hover { opacity: 1; }
/* ---- tables ---- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.tbl th { text-align: left; padding: 10px 14px; font-size: var(--t-xs); font-weight: 700;
               letter-spacing: .1em; text-transform: uppercase; color: #FFF3E9;
               background: linear-gradient(180deg, var(--maroon), var(--maroon-deep));
               white-space: nowrap; position: sticky; top: 0; }
table.tbl td { padding: 10px 14px; border-top: 1px solid var(--line); color: var(--ink-2); }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl td b { color: var(--ink); }
/* ---- callouts ---- */
.callout { border-left: 3px solid var(--gold-soft); background: var(--gold-tint);
           border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s3) var(--s4);
           font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2); }
.callout.pos { border-left-color: var(--tier-hi); background: var(--tier-hi-soft); }
.callout.neg { border-left-color: var(--tier-lo); background: var(--tier-lo-soft); }
.callout b { color: var(--ink); }
/* ---- empty / loading ---- */
.empty { text-align: center; padding: var(--s9) var(--s5); }
.empty .em-ic { font-size: 46px; margin-bottom: var(--s3); opacity: .5; }
.empty h3 { font-size: var(--t-xl); margin-bottom: var(--s2); }
.empty p { color: var(--ink-3); max-width: 46ch; margin: 0 auto var(--s5); }
.skel { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
        background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -200% 0; }
}
.spinner { width: 34px; height: 34px; border-radius: 50%; margin: 0 auto var(--s4);
           border: 3px solid var(--line); border-top-color: var(--gold);
           animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); }
}
/* ========================= HERO ========================= */
.hero { position: relative; border-radius: var(--r-xl); overflow: hidden;
        padding: var(--s7) var(--s6); margin-bottom: var(--s6);
        border: 1px solid rgba(201,162,39,.45);
        background:
          radial-gradient(760px 280px at 86% -35%, rgba(217,138,43,.34), transparent 68%),
          radial-gradient(600px 300px at 6% 120%, rgba(201,162,39,.20), transparent 66%),
          linear-gradient(132deg, #7A1F2B, #8B1E3F 46%, #5E1626);
        box-shadow: 0 18px 44px rgba(122,31,43,.30); }
.hero .hero-line, .hero .hero-meta { color: rgba(255,246,229,.80); }
.hero .hero-line b, .hero .hero-meta b { color: #FFF6E5; }
.hero .hb { background: rgba(255,246,229,.10); border-color: rgba(235,208,138,.34); }
.hero .hb .hbl { color: #EBD08A; }
.hero .hb .hbv { color: #FFF6E5; }
.hero .hb .hbs { color: rgba(255,246,229,.62); }
.hero .eyebrow { color: #EBD08A; background: rgba(255,246,229,.10);
                 border-color: rgba(235,208,138,.40); }
.hero .callout { color: rgba(255,246,229,.9); background: rgba(255,246,229,.10);
                 border-left-color: #EBD08A; }
.hero .callout b { color: #FFF6E5; }
.hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
               background: linear-gradient(90deg, transparent, #EBD08A, #FFF3CC, #EBD08A, transparent);
               box-shadow: 0 0 14px rgba(235,208,138,.55); pointer-events: none; z-index: 2; }
.hero > * { position: relative; z-index: 1; }
.hero-name {
  font-size: var(--t-3xl); letter-spacing: .045em; text-transform: uppercase;
  background: linear-gradient(92deg, #C9A24B, #FFF3CC 48%, #C9A24B);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmerTitle 7s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
@keyframes shimmerTitle { 0%,100% { background-position: 0 0; }
50% { background-position: 100% 0; }
}
.hero-line { margin-top: var(--s3); font-size: var(--t-md); color: var(--ink-2); max-width: 62ch;
             line-height: 1.75; }
.hero-line b { color: var(--ink); }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s4);
             font-size: var(--t-sm); color: var(--ink-3); }
.hero-meta b { color: var(--ink-2); font-weight: 600; }
/* 132px, not 150px: the four badges get a 2x2 on a 375px phone instead of a
   four-high stack that pushed the whole reading below the fold. */
.hero-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
               gap: var(--s3); margin-top: var(--s5); }
.hb { padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--surface);
      border: 1px solid var(--line); }
.hb .hbl { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
           color: var(--maroon); }
.hb .hbv { font-family: var(--f-display); font-size: var(--t-md); margin-top: 3px; }
.hb .hbs { font-size: var(--t-xs); color: var(--ink-3); }
/* ========================= MODULE CARD GRID (home) ========================= */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: var(--s3); }
.mod-card { display: flex; flex-direction: column; gap: 6px; padding: var(--s4);
            border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
            cursor: pointer; transition: transform .22s var(--ease), border-color .22s var(--ease),
                                        box-shadow .22s var(--ease); }
.mod-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-2); }
.mod-card .mc-top { display: flex; align-items: center; justify-content: space-between; }
.mod-card .mc-ic { font-size: 21px; }
.mod-card .mc-t { font-family: var(--f-display); font-size: var(--t-md); }
.mod-card .mc-d { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.55; }
/* ========================= TIMELINE ========================= */
.tl { position: relative; padding-left: 30px; }
.tl::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px;
              background: linear-gradient(180deg, var(--gold), var(--maroon)); }
.tl-node { position: relative; margin-bottom: var(--s5); }
.tl-node::before { content: ""; position: absolute; left: -26px; top: 8px; width: 12px; height: 12px;
                   border-radius: 50%; background: var(--gold); border: 3px solid var(--cream);
                   box-shadow: 0 0 0 2px var(--gold); }
.tl-node.now::before { background: var(--maroon);
                       box-shadow: 0 0 0 2px var(--maroon), 0 0 14px rgba(139,30,63,.5); }
.tl-age { display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tl-age b { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700;
            color: var(--maroon); }
.tl-age span { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
               text-transform: uppercase; color: var(--ink-3); }
/* ========================= DASHA GANTT ========================= */
.gantt { display: grid; gap: 5px; }
.gt-row { display: grid; grid-template-columns: 86px 1fr; gap: var(--s3); align-items: center; }
.gt-lbl { font-family: var(--f-display); font-size: var(--t-sm); font-weight: 700;
           color: var(--maroon); }
.gt-lbl em { display: block; font-style: normal; font-size: var(--t-xs); color: var(--ink-3); }
.gt-bar { position: relative; height: 30px; border-radius: var(--r-sm); background: var(--surface-2);
          border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center;
          padding: 0 10px; font-size: var(--t-xs); color: var(--ink-2); }
.gt-bar .gt-fill { position: absolute; inset: 0 auto 0 0; opacity: .32; }
/* the running period is the "dasha progress bar" — the one glowing gold element */
.gt-bar.past .gt-fill { background: rgba(122,31,43,.22); }
.gt-bar.now { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,230,160,.6); }
.gt-bar.now .gt-fill { background: linear-gradient(90deg, #F2CD6E, #FFF3D0); opacity: .85; }
.gt-bar.next .gt-fill { background: linear-gradient(90deg, var(--tier-hi-2), var(--tier-hi)); }
.gt-bar span { position: relative; }
/* ========================= CHART SVG ========================= */
.chart-holder { display: grid; place-items: center; padding: var(--s3); }
.chart-holder svg { width: 100%; height: auto; max-width: 560px; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-full); background: var(--surface-2);
       border: 1px solid var(--line); }
.seg button { padding: 6px 15px; border-radius: var(--r-full); border: none; background: transparent;
              cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--ink-3);
              transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.seg button.on { background: linear-gradient(180deg, var(--maroon), var(--maroon-deep)); color: #FFF6E5; }
/* ========================= FORM ========================= */
.form-card { max-width: 620px; margin: 0 auto; }
.field { margin-bottom: var(--s4); position: relative; }
.field label { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
               text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 14px; border-radius: var(--r-md); font: inherit;
  background: var(--surface-solid); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
[data-theme="dark"] .field input, [data-theme="dark"] .field select,
[data-theme="dark"] .field textarea { background: var(--bg-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tint); }
.field .hint { margin-top: 5px; font-size: var(--t-xs); color: var(--ink-3); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.check { display: flex; align-items: center; gap: 9px; font-size: var(--t-sm); color: var(--ink-2);
         cursor: pointer; }
.check input { width: auto; }
.submit { width: 100%; padding: 13px; font-size: var(--t-base); justify-content: center; }
.ac-list { position: absolute; z-index: 25; top: 100%; left: 0; right: 0; margin-top: 4px;
           border-radius: var(--r-md); background: var(--surface-solid); border: 1px solid var(--line);
           box-shadow: var(--shadow-3); overflow: hidden; max-height: 260px; overflow-y: auto; }
[data-theme="dark"] .ac-list { background: #191627; }
.ac-item { padding: 10px 14px; font-size: var(--t-sm); cursor: pointer; color: var(--ink-2); }
.ac-item:hover, .ac-item.on { background: var(--gold-tint); color: var(--maroon); }
/* ========================= CHAT ========================= */
.chat-shell { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - var(--s6)*2);
              max-height: 820px; }
.chat-log { flex: 1; overflow-y: auto; padding: var(--s3) 0; display: flex; flex-direction: column;
            gap: var(--s4); }
.msg { display: flex; gap: var(--s3); max-width: 90%; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg-av { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid;
          place-items: center; font-size: 14px;
          background: linear-gradient(90deg, var(--maroon), #E08A3C); color: #FFF6E5; }
.msg.me .msg-av { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.msg-body { padding: 12px 16px; border-radius: var(--r-lg); background: var(--surface);
            border: 1px solid var(--line); font-size: var(--t-base); line-height: 1.75; }
.msg.me .msg-body { background: var(--gold-tint); border-color: rgba(201,162,39,.36); }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin: 10px 0; }
.msg-body th, .msg-body td { padding: 6px 10px; border: 1px solid var(--line); text-align: left; }
.msg-body code { font-family: var(--f-mono); font-size: .88em; padding: 1px 5px; border-radius: 5px;
                 background: var(--surface-2); }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
            animation: blink 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,60%,100% { opacity:.25; transform: translateY(0);}
30% { opacity:1; transform: translateY(-3px);}
}
.chat-input { display: flex; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
.chat-input textarea { flex: 1; resize: none; min-height: 46px; max-height: 160px; padding: 12px 15px;
                       border-radius: var(--r-lg); background: var(--surface-solid);
                       border: 1px solid var(--line); color: var(--ink); font: inherit; }
[data-theme="dark"] .chat-input textarea { background: var(--bg-2); }
.chat-input textarea:focus { outline: none; border-color: var(--gold); }
.chat-send { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; border: none;
             cursor: pointer; background: linear-gradient(90deg, var(--maroon), #C0324B, #E08A3C);
             color: #FFF6E5; font-size: 18px; }
.chat-send:disabled { opacity: .45; cursor: not-allowed; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--s3); }
.chip { padding: 7px 13px; border-radius: var(--r-full); background: var(--surface);
        border: 1px solid var(--line); font-size: var(--t-sm); cursor: pointer; color: var(--ink-2);
        transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.chip:hover { border-color: var(--gold); color: var(--ink); }
/* ========================= COMMAND PALETTE ========================= */
.cmdk { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center;
        padding-top: 12vh; }
.cmdk[hidden] { display: none; }
.cmdk-scrim { position: absolute; inset: 0; background: rgba(6,5,12,.62); backdrop-filter: blur(5px); }
.cmdk-panel { position: relative; width: min(620px, 92vw); border-radius: var(--r-lg);
              background: var(--surface-solid); border: 1px solid var(--line-strong);
              box-shadow: var(--shadow-3); overflow: hidden;
              animation: cmdkIn .22s var(--ease-out) both; }
[data-theme="dark"] .cmdk-panel { background: #171423; }
@keyframes cmdkIn { from { opacity: 0; transform: translateY(-12px) scale(.98); }
}
.cmdk-input { width: 100%; padding: 17px 20px; border: none; background: transparent; color: var(--ink);
              font: inherit; font-size: var(--t-md); border-bottom: 1px solid var(--line); }
.cmdk-input:focus { outline: none; }
.cmdk-results { max-height: 46vh; overflow-y: auto; padding: 6px; }
.cmdk-item { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 9px;
             cursor: pointer; font-size: var(--t-sm); }
.cmdk-item .ci-ic { width: 20px; text-align: center; }
.cmdk-item .ci-t { flex: 1; min-width: 0; }
.cmdk-item .ci-t em { display: block; font-style: normal; font-size: var(--t-xs); color: var(--ink-3);
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item .ci-k { font-size: var(--t-xs); color: var(--ink-3); }
.cmdk-item.on, .cmdk-item:hover { background: var(--gold-tint); }
.cmdk-foot { display: flex; gap: 10px; align-items: center; padding: 9px 16px;
             border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-3); }
/* ========================= TOASTS ========================= */
.toast-wrap { position: fixed; bottom: 22px; right: 22px; z-index: 120; display: flex;
              flex-direction: column; gap: 9px; }
.toast { padding: 12px 17px; border-radius: var(--r-md); background: var(--surface-solid);
         border: 1px solid var(--line-strong); box-shadow: var(--shadow-3); font-size: var(--t-sm);
         max-width: 340px; animation: toastIn .3s var(--ease-out) both; }
[data-theme="dark"] .toast { background: #1B1729; }
.toast.err { border-color: var(--neg); color: var(--neg); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); }
}
/* ========================= RESPONSIVE ========================= */
.side-scrim { display: none; }
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
.sidebar { position: fixed; left: 0; top: 0; width: 282px; transform: translateX(-100%);
             transition: transform .3s var(--ease); z-index: 60; background: var(--bg); }
.sidebar.open { transform: none; box-shadow: var(--shadow-3); }
.sidebar .side-close { display: grid; }
.menu-btn { display: grid; }
.side-scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(6,5,12,.6);
                opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.side-scrim.on { opacity: 1; pointer-events: auto; }
.view { padding: var(--s5) var(--s4) var(--s8); }
.hero { padding: var(--s6) var(--s5); }
}
@media (max-width: 620px) {
  :root { --t-3xl: 2rem; --t-2xl: 1.6rem; --t-xl: 1.35rem; }
/* Only the current page fits — the ancestors are already in the sidebar. */
  .crumbs > *:not(:last-child) { display: none; }
.topbar { padding: 0 var(--s4); gap: var(--s2); }
.meter { grid-template-columns: 1fr 1.6fr 40px; }
.row2 { grid-template-columns: 1fr; }
.msg { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
html { scroll-behavior: auto; }
}
@media print {
  .sidebar, .topbar, .aurora, .toast-wrap, .cmdk { display: none !important; }
.app { grid-template-columns: 1fr; }
.card { break-inside: avoid; }
}
/* =========================================================================
   SOUTH INDIAN CHART SVG
   render_chart_svg() emits class names rather than inline fills, so the chart
   is themeable from here. It stays a warm "printed chart" in both themes —
   a kundali reads as a document, and inverting it to dark makes the classical
   sign/planet colour conventions unreadable.
   ========================================================================= */
.kundali-svg { display: block; width: 100%; height: auto; border-radius: 14px;
               background: #FDFAF2; box-shadow: var(--shadow-2); }
.kundali-svg .sign-en { font-family: var(--f-body); font-size: 16px; font-weight: 700;
                        fill: #7A1030; letter-spacing: .02em; text-transform: uppercase; }
.kundali-svg .sign-dev { font-family: 'Noto Sans Devanagari', var(--f-body); font-size: 15px;
                         font-weight: 600; fill: #9C7A1E; }
.kundali-svg .house-badge-bg { fill: #8B1E3F; opacity: .88; }
.kundali-svg .house-badge-txt { font-family: var(--f-body); font-size: 13px; font-weight: 700;
                                fill: #FFF6E5; }
.kundali-svg .lagna-tag { font-family: var(--f-display); font-size: 11px; font-weight: 700;
                          fill: #FFF6E5; letter-spacing: .06em; }
.kundali-svg .planet-name { font-family: var(--f-body); font-weight: 700; fill: #4A2530; }
.kundali-svg .planet-txt { font-family: var(--f-body); fill: #4A2530; }
.kundali-svg .planet-retro { font-family: var(--f-body); font-weight: 700; fill: #B5384F;
                             font-size: .82em; }
.kundali-svg .center-title { font-family: var(--f-display); font-size: 40px; font-weight: 700;
                             fill: #7A1030; letter-spacing: .03em; }
.kundali-svg .center-title-dev { font-family: 'Noto Sans Devanagari', var(--f-body);
                                 font-size: 27px; font-weight: 600; fill: #9C7A1E; }
.kundali-svg .center-name { font-family: var(--f-body); font-size: 27px; font-weight: 700;
                            fill: #3A1720; }
.kundali-svg .center-info { font-family: var(--f-body); font-size: 17px; fill: #4A4A4A; }
.kundali-svg .center-info-sub { font-family: var(--f-body); font-size: 13px; fill: #8A8A8A; }
/* =========================================================================
   THARA — the AI astrologer.
   Deliberately the loudest element in the app. A chart-aware AI is the thing
   that makes this more than a printout, so it gets a glowing topbar button, a
   persistent launcher on every page, and a CTA block on the overview.
   ========================================================================= */

/* ---- topbar button ---- */
.thara-btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 20px 8px 10px; border-radius: var(--r-full); cursor: pointer;
  background: linear-gradient(90deg, #8B1E3F, #C0324B, #E08A3C);
  color: #FFF6E5; border: none; overflow: hidden;
  box-shadow: 0 6px 20px rgba(139,30,63,.38), 0 0 0 0 rgba(201,162,39,.5);
  animation: tharaPulse 3.4s var(--ease-out) infinite;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.thara-btn:hover { transform: translateY(-2px) scale(1.02);
                   box-shadow: 0 12px 30px rgba(139,30,63,.48); animation-play-state: paused; }
.thara-btn::after {            /* travelling sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%); animation: sheen 4.5s ease-in-out infinite;
}
@keyframes sheen { 0%, 62% { transform: translateX(-120%); }
82%, 100% { transform: translateX(120%); }
}
@keyframes tharaPulse {
  0%   { box-shadow: 0 6px 20px rgba(139,30,63,.38), 0 0 0 0 rgba(201,162,39,.55); }
55%  { box-shadow: 0 6px 20px rgba(139,30,63,.38), 0 0 0 12px rgba(201,162,39,0); }
100% { box-shadow: 0 6px 20px rgba(139,30,63,.38), 0 0 0 0 rgba(201,162,39,0); }
}
.tb-orb { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px;
          border-radius: 50%; background: #FFF6E5; color: var(--maroon);
          font-size: 15px; box-shadow: inset 0 0 0 1px rgba(139,30,63,.14); }
.tb-txt { display: flex; flex-direction: column; line-height: 1.12; position: relative; }
.tb-txt b { font-size: var(--t-sm); font-weight: 700; letter-spacing: .01em; }
.tb-txt em { font-style: normal; font-size: 0.62rem; font-weight: 600; opacity: .68;
             letter-spacing: .09em; text-transform: uppercase; }
/* ---- persistent floating launcher ---- */
@keyframes fabIn { from { opacity: 0; transform: translateY(24px) scale(.85); }
}
@keyframes fabRing {
  0%   { box-shadow: 0 0 0 0 rgba(201,162,39,.5); }
70%  { box-shadow: 0 0 0 18px rgba(201,162,39,0); }
100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); }
}
@keyframes orbSpin { to { transform: rotate(360deg); }
}
/* ---- overview CTA block ---- */
.thara-cta {
  position: relative; overflow: hidden; border-radius: var(--r-xl); padding: var(--s6);
  border: 1px solid rgba(201,162,39,.42);
  background:
    radial-gradient(520px 200px at 88% -30%, rgba(217,138,43,.20), transparent 70%),
    linear-gradient(135deg, rgba(139,30,63,.09), rgba(201,162,39,.14) 58%, var(--panel));
  box-shadow: var(--card-glow);
}
.thara-cta::before { content: ""; position: absolute; width: 220px; height: 220px;
  right: -60px; bottom: -90px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201,162,39,.30), transparent 68%);
  animation: bloomSlow 7s ease-in-out infinite alternate; }
@keyframes bloomSlow { to { transform: scale(1.25); opacity: .65; }
}
.thara-cta > * { position: relative; }
.tc-top { display: flex; align-items: center; gap: 14px; margin-bottom: var(--s3); }
.tc-orb { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px;
          border-radius: 14px; font-size: 24px; color: #FFF6E5;
          background: linear-gradient(90deg, #8B1E3F, #C0324B, #E08A3C);
          box-shadow: 0 8px 24px rgba(139,30,63,.36); }
.tc-h { font-family: var(--f-display); font-size: var(--t-2xl); line-height: 1.1; }
.tc-h em { display: block; font-style: normal; font-size: var(--t-xs); font-weight: 700;
           letter-spacing: .14em; text-transform: uppercase; color: var(--saffron); margin-bottom: 3px; }
.tc-sub { color: var(--ink-2); max-width: 62ch; margin-bottom: var(--s4); }
.tc-qs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s5); }
.tc-q { padding: 9px 15px; border-radius: var(--r-full); cursor: pointer; font-size: var(--t-sm);
        background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
        transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.tc-q:hover { border-color: var(--gold); color: var(--ink); transform: translateY(-2px);
              box-shadow: var(--shadow-2); }
.tc-go { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px;
         border-radius: var(--r-full); font-weight: 700; font-size: var(--t-base); cursor: pointer;
         background: linear-gradient(90deg, #8B1E3F, #C0324B, #E08A3C); color: #FFF6E5;
         box-shadow: 0 8px 24px rgba(139,30,63,.34);
         transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.tc-go:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(139,30,63,.44); }
/* ---- sidebar entry ---- */
.nav-item.thara {
  background: linear-gradient(135deg, rgba(139,30,63,.10), rgba(217,138,43,.12));
  border: 1px solid rgba(201,162,39,.45);
  font-weight: 700; color: var(--maroon);
}
.nav-item.thara .ni-ic { color: var(--saffron); }
.nav-item.thara:hover { border-color: var(--gold); box-shadow: 0 6px 18px rgba(139,30,63,.20); }
.nav-item.thara .ni-tag { font-size: 0.58rem; font-weight: 800; letter-spacing: .1em;
  padding: 2px 6px; border-radius: 5px; color: #FFF6E5;
  background: linear-gradient(90deg, #8B1E3F, #C0324B, #E08A3C); }
@media (max-width: 760px) {
  .thara-btn { padding: 8px 12px; }
.thara-btn .tb-txt { display: none; }
}
/* ---- Evidence & Reliability surface ---- */
.rel-head { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.rel-score { font-family: var(--f-display); font-weight: 700; font-size: 2.6rem; line-height: 1;
             color: var(--tier-hi-ink); }
.rel-score.warn { color: var(--tier-mid-ink); }
.rel-score.neg { color: var(--tier-lo-ink); }
.rel-score span { font-size: 1rem; color: var(--ink-3); font-weight: 500; margin-left: 2px; }
.rel-band { display: flex; flex-direction: column; line-height: 1.3; }
.rel-band b { font-family: var(--f-display); font-size: var(--t-lg); text-transform: capitalize; color: var(--maroon); }
.rel-band span { font-size: var(--t-sm); color: var(--ink-3); }
.ev-num { font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-num.pos { color: var(--tier-hi-ink); }
.ev-num.warn { color: var(--tier-mid-ink); }
.ev-num.neg { color: var(--tier-lo-ink); }
.ev-label { font-size: var(--t-sm); color: var(--ink-2); }
/* =========================================================================
   THARA CHAT — a real full-height chat surface, not a card on a page.
   The view owns the viewport: header pinned, log scrolls, composer fixed.
   ========================================================================= */
.chat-page {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--topbar-h));
  max-width: 900px; margin: 0 auto;
  padding: 0 var(--s4);
}
.chat-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) 0 var(--s3); border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.chat-id { display: flex; align-items: center; gap: 12px; }
.chat-id b { font-family: var(--f-display); font-size: var(--t-md); color: var(--maroon);
             display: block; line-height: 1.2; }
.chat-id em { font-style: normal; font-size: var(--t-xs); color: var(--ink-3);
              letter-spacing: .03em; }
.chat-orb {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 50%; font-size: 19px; color: #FFF6E5;
  background: linear-gradient(90deg, var(--maroon), #C0324B, #E08A3C);
  box-shadow: 0 6px 18px rgba(139,30,63,.30);
}
.chat-reset {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: var(--r-full); padding: 7px 14px; font-size: var(--t-sm);
  cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.chat-reset:hover { border-color: var(--gold); color: var(--maroon); }
.chat-page .chat-log {
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
  padding: var(--s5) 0; display: flex; flex-direction: column; gap: var(--s4);
  scroll-behavior: smooth;
}
.chat-page .chat-log::-webkit-scrollbar { width: 8px; }
.chat-page .chat-log::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--maroon) 22%, transparent); border-radius: 8px; }
.chat-foot { flex: 0 0 auto; padding-bottom: var(--s4);
             background: linear-gradient(180deg, transparent, var(--bg) 22%); }
.chat-foot .chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: var(--s3);
                    scrollbar-width: none; }
.chat-foot .chips::-webkit-scrollbar { display: none; }
.chat-foot .chip { white-space: nowrap; flex: 0 0 auto; }
.chat-page .chat-input {
  display: flex; gap: var(--s2); align-items: flex-end;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--r-xl); padding: 8px 8px 8px 6px;
  box-shadow: var(--card-glow); border-top: 1px solid var(--panel-border);
}
.chat-page .chat-input textarea {
  flex: 1; resize: none; border: none; background: transparent; outline: none;
  min-height: 42px; max-height: 170px; padding: 11px 12px;
  font: inherit; color: var(--ink); line-height: 1.5;
}
.chat-page .chat-input textarea:focus { border: none; box-shadow: none; }
.chat-note { text-align: center; font-size: var(--t-xs); color: var(--ink-3);
             margin: var(--s3) 0 0; }
/* richer bubbles */
.chat-page .msg { max-width: 82%; }
.chat-page .msg-body { box-shadow: var(--shadow-1); line-height: 1.68; }
.chat-page .msg.me .msg-body { border-color: rgba(201,162,39,.42); }
@media (max-width: 760px) {
  .chat-page { padding: 0 var(--s3); height: calc(100vh - var(--topbar-h)); }
.chat-page .msg { max-width: 94%; }
}
/* chat owns the full viewport — strip the normal view padding */
#view:has(.chat-page) { padding: 0; }
/* prediction lists — concrete "what may happen" items */
.pred-list { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: 10px; }
.pred-list li { padding: 12px 14px 12px 16px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--tier-mid); font-size: var(--t-sm); line-height: 1.6; }
.pred-list li.sup { border-left-color: var(--tier-hi); }
.pred-list li.unsup { border-left-color: var(--tier-lo); opacity: .85; }
/* =========================================================================
   DEVICE LAYER — iPhone, iPad, and everything with a notch or a moving
   browser chrome. Everything above this point is device-agnostic; this
   section only adapts it. Kept last so it wins without !important.
   ========================================================================= */

/* ---- 1. Safe areas -------------------------------------------------------
   index.html already ships viewport-fit=cover, which extends the page under
   the notch/Dynamic Island and the home indicator — but nothing consumed
   env(safe-area-inset-*), so on every notched iPhone the top bar sat under the
   island and the floating launcher sat under the home bar. These pad the
   shell's outer edges only; inner components inherit the corrected box. */
:root {
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}
.topbar {
  height: calc(var(--topbar-h) + var(--sa-t));
  padding-top: var(--sa-t);
  padding-left: max(var(--s5), var(--sa-l));
  padding-right: max(var(--s5), var(--sa-r));
}
.view {
  padding-left: max(var(--s6), var(--sa-l));
  padding-right: max(var(--s6), var(--sa-r));
  padding-bottom: calc(var(--s9) + var(--sa-b));
}
.sidebar { padding-top: var(--sa-t); padding-bottom: var(--sa-b); padding-left: var(--sa-l); }
/* ---- 2. Dynamic viewport height ------------------------------------------
   100vh on iOS Safari measures the viewport with the URL bar RETRACTED, so a
   100vh chat column is ~90px taller than what you can actually see and the
   composer sits below the fold until you scroll. dvh tracks the live chrome;
   the 100vh line stays first as the fallback for browsers without dvh. */
.chat-page {
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h) - var(--sa-t));
  padding-bottom: var(--sa-b);
}
/* ---- 3. Touch targets ----------------------------------------------------
   Apple's HIG floor is 44x44pt. The icon buttons were 30-36px, which is a
   real miss rate on a phone, not a nicety. */
@media (pointer: coarse) {
  .icon-btn, .menu-btn, .side-close, .chat-reset, .tab, .chip {
    min-height: 44px; min-width: 44px;
  }
.ac-item { padding: 13px 14px; }
/* city picker rows */
  .check { min-height: 44px; }
}
/* ---- 4. Stop iOS zooming on focus ----------------------------------------
   Mobile Safari auto-zooms into any input whose font-size is under 16px, and
   never zooms back out. The 16px floor is the only reliable fix that does not
   involve disabling user scaling (which breaks accessibility). */
@media (max-width: 860px) {
  .field input, .field select, .field textarea,
  .chat-page .chat-input textarea { font-size: 16px; }
}
/* ---- 5. Native-feel touch polish ---------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (pointer: coarse) {
  * { -webkit-tap-highlight-color: transparent; }
.chat-page .chat-log, .chat-foot .chips, .table-wrap { -webkit-overflow-scrolling: touch; }
/* Keep a bounce inside the scroller from scrolling the page behind it. */
  .chat-page .chat-log { overscroll-behavior: contain; }
}
/* ---- 6. Never scroll the page sideways ----------------------------------
   Wide content (varga tables, the dasha timeline) must scroll inside its own
   box; the body must not. */
html, body { overflow-x: hidden; }
.table-wrap { overflow-x: auto; }
img, svg, table { max-width: 100%; }
/* ---- 7. iPad ------------------------------------------------------------
   Portrait (768) and landscape (1024) sit either side of the 980px point
   where the sidebar hides, so the same device gets two layouts. Both need the
   reading column to stay readable rather than stretch edge to edge. */
@media (min-width: 700px) and (max-width: 1180px) {
  .view { padding-left: max(var(--s6), var(--sa-l)); padding-right: max(var(--s6), var(--sa-r)); }
.wrap { max-width: 940px; }
.hero { padding: var(--s7) var(--s6); }
}
/* iPad portrait: the sidebar is off-canvas, so the content owns the width. */
@media (min-width: 700px) and (max-width: 980px) {
  .hero-badges { grid-template-columns: repeat(4, 1fr); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
}
/* ---- 8. Phone density ---------------------------------------------------
   The display face is set for a desktop hero; at 375px the same sizes eat the
   screen before any content appears. Tightened, not shrunk to illegibility. */
@media (max-width: 620px) {
  /* A 16px gutter inside an already-narrow card is what tips these grids from
     two columns to one; 10px buys the second column back. */
  .grid, .hero-badges { gap: 10px; }
.hero { padding: var(--s5) var(--s4); border-radius: var(--r-lg); }
.hero-line { font-size: var(--t-base); }
.view { padding-top: var(--s4); }
.card { padding: var(--s4); }
.page-sub { font-size: var(--t-base); }
.hb { padding: var(--s3); }
.hb .hbv { font-size: var(--t-base); }
/* The launcher shrinks to its orb so it stops covering the reading. */
}
/* ---- 9. Landscape phone -------------------------------------------------
   A 375x812 phone turned sideways is 375px TALL — a sticky top bar plus a
   full-height hero leaves almost nothing for content. */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar { position: static; }
.hero { padding: var(--s4) var(--s5); }
}
/* =========================================================================
   REFINEMENT LAYER — the "illuminated document" pass.
   Same palette, same fonts, same components: cream parchment, antique gold,
   deep maroon. What changes is CRAFT — paper that looks like paper, gold used
   as a hairline rather than a fill, engraved numerals, and a masthead that
   stops eating the first screen of a phone.
   Appended last so it refines without fighting the base sheet.
   ========================================================================= */

/* ---- 1. The paper itself -------------------------------------------------
   The palette claims "parchment" but the surface was a flat wash. A very low
   opacity fibre grain (inline SVG turbulence — no network request, no image
   file) gives the cream an actual tooth. Fixed attachment so it reads as the
   page's material rather than something that scrolls with content. */
/* z-index -1 and NO blend mode. The first attempt used
   `mix-blend-mode: multiply` at opacity .5 across the whole viewport, which
   desaturated every card and turned the maroon hero muddy — the texture has to
   sit UNDER the content and tint only the cream, never blend over the page. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.045'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before { opacity: .28; }
/* ---- 2. Gold as a HAIRLINE, not a slab ----------------------------------
   The card top-accent was a 3px bar. Real gold leaf on a page is a thin rule
   that catches light at the centre. This reads as finer and more expensive at
   exactly the same colour cost. */
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(201,162,39,.25) 12%, var(--gold) 50%,
    rgba(201,162,39,.25) 88%, transparent);
  opacity: .9; pointer-events: none;
}
/* A whisper of light along the top inside edge — paper catching a raking
   light. This is what separates a "box" from a "plate". */
.card { box-shadow: var(--card-glow), inset 0 1px 0 rgba(255,255,255,.55); }
[data-theme="dark"] .card { box-shadow: var(--card-glow), inset 0 1px 0 rgba(255,255,255,.06); }
.card:hover { border-color: rgba(201,162,39,.42); }
/* ---- 3. Section ornament -------------------------------------------------
   A centred lozenge on a hairline rule — the manuscript device for "new
   section". Replaces a bare bold label with something that belongs to the
   document's own visual language. */
.sect-t {
  display: flex; align-items: center; gap: var(--s4);
  font-family: var(--f-display); color: var(--maroon);
  letter-spacing: .06em;
}
.sect-t::before, .sect-t::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.55), transparent);
}
.sect-t::before { flex: 0 0 18px; }
/* ---- 4. Masthead ---------------------------------------------------------
   Was: pill + two-line Cinzel title + Devanagari on its own line + a 4-line
   paragraph = ~550px before ANY content on a phone. Now the eyebrow rides a
   rule, the Sanskrit sits with the title, and the sub is measured. */
.page-head { margin-bottom: var(--s5); }
/* Scoped to the page masthead only. The HERO keeps its filled pill — running
   the rule through that one drew a stray dash inside the badge. */
.page-head > .eyebrow {
  background: transparent; border: 0; padding: 0;
  color: var(--gold-soft); letter-spacing: .22em;
  display: flex; align-items: center; gap: var(--s3);
}
.page-head > .eyebrow::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, rgba(201,162,39,.5), transparent);
}
.page-title { letter-spacing: .01em; line-height: 1.08; }
.title-dev { font-size: .34em; opacity: .85; }
.page-sub { max-width: 62ch; line-height: 1.6; }
/* ---- 5. Engraved numerals ------------------------------------------------
   Scores are the app's headline data. Cinzel gives them a struck-in-metal
   look, and tabular figures stop columns of numbers from shimmying. */
.stat-v, .hbv, .score-v, .meter-v, .ring-v {
  font-family: var(--f-display);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .01em;
}
table { font-variant-numeric: tabular-nums; }
/* ---- 6. Stat tiles as medallions ---------------------------------------- */
.hb {
  background: linear-gradient(165deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.hero .hb { box-shadow: inset 0 1px 0 rgba(255,246,229,.16); }
@media (hover: hover) { .hb:hover { transform: translateY(-2px); border-color: rgba(201,162,39,.5); }
}
/* ---- 7. Hero: a struck plate, not a poster ------------------------------
   The gradient stays; the frame gains an inner gold keyline, the way a
   printed plate is bordered inside its trim. */
.hero { box-shadow: 0 18px 44px rgba(122,31,43,.30),
                    inset 0 0 0 1px rgba(235,208,138,.14); }
.hero::after { height: 1px; box-shadow: 0 0 10px rgba(235,208,138,.45); }
.hero-name { letter-spacing: .03em; }
/* ---- 8. Reveal ----------------------------------------------------------
   Cards rise in sequence rather than all at once — reads as the document
   assembling itself. Purely decorative, so it yields to reduced-motion (the
   base sheet's media query already neutralises the duration). */
.view-enter .card { animation: plateIn .5s var(--ease-out) both; }
.view-enter .card:nth-child(1) { animation-delay: .02s; }
.view-enter .card:nth-child(2) { animation-delay: .07s; }
.view-enter .card:nth-child(3) { animation-delay: .12s; }
.view-enter .card:nth-child(n+4) { animation-delay: .16s; }
@keyframes plateIn { from { opacity: 0; transform: translateY(8px); }
}
/* ---- 9. Phone: buy back the first screen -------------------------------- */
@media (max-width: 620px) {
  :root { --t-3xl: 1.85rem; --t-2xl: 1.45rem; }
.page-head { margin-bottom: var(--s4); }
.page-title { font-size: var(--t-2xl); }
/* Keep the Sanskrit on the title's line instead of wrapping to its own. */
  .page-title { gap: 8px; }
.title-dev { font-size: .48em; }
.page-sub { font-size: var(--t-sm); line-height: 1.55; }
.hero-name { font-size: 1.9rem; }
.hero-meta { gap: 2px 12px; font-size: var(--t-sm); }
.sect-t { font-size: var(--t-base); }
}
/* =========================================================================
   SHOWPIECE LAYER — the details that make it feel made rather than generated.
   Still cream / antique gold / deep maroon; nothing new enters the palette.
   ========================================================================= */

/* ---- 1. Illuminated corners on the hero ---------------------------------
   Four short gold rules inset from each corner: the manuscript device for "this
   page is the important one". Drawn with gradients on two pseudo-elements, so
   no images and nothing to load. */
.hero::before {
  content: ""; position: absolute; inset: 14px; pointer-events: none; z-index: 2;
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, rgba(235,208,138,.55), transparent 38px) top left,
    linear-gradient(270deg, rgba(235,208,138,.55), transparent 38px) top right,
    linear-gradient(90deg, rgba(235,208,138,.55), transparent 38px) bottom left,
    linear-gradient(270deg, rgba(235,208,138,.55), transparent 38px) bottom right,
    linear-gradient(180deg, rgba(235,208,138,.55), transparent 38px) top left,
    linear-gradient(180deg, rgba(235,208,138,.55), transparent 38px) top right,
    linear-gradient(0deg, rgba(235,208,138,.55), transparent 38px) bottom left,
    linear-gradient(0deg, rgba(235,208,138,.55), transparent 38px) bottom right;
  background-repeat: no-repeat;
  background-size: 38px 1px, 38px 1px, 38px 1px, 38px 1px,
                   1px 38px, 1px 38px, 1px 38px, 1px 38px;
  opacity: .8;
}
@media (max-width: 620px) { .hero::before { inset: 9px; }
}
/* ---- 2. A benchmark tick on every meter ---------------------------------
   THE most useful thing on this page. A bare 5.2/10 reads as "half marks —
   bad", when measured across real charts the life areas centre on 6.5 and the
   whole usable range is roughly 4.5–8. The tick puts that context on the bar,
   so a score is read as a POSITION IN A RANGE rather than a school grade. */
.meter .mt { position: relative; box-shadow: inset 0 1px 2px rgba(122,31,43,.10); }
/* z-index 3, ABOVE the fill (which is 2).
   This tick was at z-index 1 and the fill painted straight over it, so the
   benchmark vanished on exactly the bars that cleared the benchmark — every
   score of 6.5 or better lost its own reference line while weak scores kept
   theirs. The mark that says "this is where a typical chart sits" was visible
   only when you were below it, which is the one case it is least needed.
   The white halo is what lets one colour read against both the cream track and
   the gold fill, so the line never has to change colour to stay visible. */
.meter .mt::after {
  content: ""; position: absolute; top: -3px; bottom: -3px; left: 65%;
  width: 1px; background: rgba(74,37,48,.42); z-index: 3;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.55);
}
[data-theme="dark"] .meter .mt::after {
  background: rgba(255,246,229,.55); box-shadow: 0 0 0 .5px rgba(0,0,0,.45);
}
/* A light along the top of the fill — the bar reads as a solid object. */
.meter .mf { box-shadow: inset 0 1px 0 rgba(255,255,255,.45); position: relative; z-index: 2; }
/* ---- 3. Module cards as collectible plates ------------------------------
   Each module already carries an accent colour from the sanctioned family; it
   was only used on the icon. Now it washes the card on hover, so the grid
   rewards exploring rather than sitting flat. */
.mod-card { position: relative; overflow: hidden;
            background: linear-gradient(165deg, var(--surface), var(--surface-2)); }
.mod-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity .25s var(--ease);
}
.mod-card:hover::before { opacity: 1; }
.mod-card .mc-ic {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--gold-tint);
  border: 1px solid rgba(201,162,39,.30);
  transition: transform .25s var(--ease-out);
}
.mod-card:hover .mc-ic { transform: scale(1.08) rotate(-4deg); }
/* ---- 4. Tables that read like a printed register ------------------------ */
tbody tr { transition: background .16s var(--ease); }
tbody tr:hover { background: var(--gold-tint); }
thead th {
  font-family: var(--f-display); letter-spacing: .06em;
  border-bottom: 1px solid rgba(201,162,39,.42);
}
/* ---- 5. Score chips — struck, not printed ------------------------------- */
.score-chip {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(122,31,43,.07);
}
[data-theme="dark"] .score-chip { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
/* ---- 6. A branded wait --------------------------------------------------
   The chart takes a moment to compute. A generic spinner spends that moment
   saying "this is a web page"; a slow gold orbit says "something is being
   worked out", which is the correct expectation to set. */
.spinner {
  border: 2px solid rgba(201,162,39,.20) !important;
  border-top-color: var(--gold) !important;
  position: relative;
}
.spinner::after {
  content: "✦"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; color: var(--gold); animation: pulseMark 1.8s ease-in-out infinite;
}
@keyframes pulseMark { 0%, 100% { opacity: .25; }
50% { opacity: 1; }
}
/* ---- 7. Sidebar: the current page should be unmistakable ---------------- */
.side-nav a.on, .side-nav a[aria-current="page"] {
  position: relative;
  background: linear-gradient(90deg, var(--gold-tint), transparent);
}
.side-nav a.on::before, .side-nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--gold), var(--maroon));
}
/* ---- 8. Focus that matches the rest of the document --------------------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Classical remedies: one labelled block per graha. */
.rem-block { padding-bottom: var(--s4); }
.rem-block + .rem-block { border-top: 1px solid var(--line); padding-top: var(--s2); }
.rem-block .sect-t { margin-top: 0; }
/* ============================================================
   CAREER — the shortlist, the work-mode read, and the
   "what are you doing right now?" verdict.
   ============================================================ */

.cr-list { display: grid; gap: var(--s4); }
.cr-card {
  border: 1px solid var(--line); border-radius: var(--r2, 14px);
  background: var(--surface); padding: var(--s4);
  /* The accent is set per-module by the router, so the rail tints itself. */
  border-left: 3px solid var(--accent);
}
.cr-top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.cr-rank {
  flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; font-family: var(--f-display, inherit);
  font-size: var(--t-sm); font-weight: 700;
  color: var(--maroon); background: var(--gold-tint);
  border: 1px solid var(--line);
}
.cr-id { flex: 1 1 12ch; min-width: 0; }
.cr-id b { display: block; font-size: var(--t-md, 1.02rem); line-height: 1.3; }
.cr-mode {
  display: inline-block; margin-top: 2px;
  font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .02em;
}
.cr-what { margin: var(--s3) 0 0; color: var(--ink-2); }
.cr-spec {
  margin-top: var(--s3); padding: var(--s3);
  border-radius: var(--r1, 10px);
  background: var(--gold-soft-bg); border: 1px solid var(--line);
}
.cr-spec-t {
  display: block; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-3); margin-bottom: 2px;
}
.cr-spec p { margin: 0; color: var(--ink); }
.cr-modenote { margin: var(--s3) 0 0; font-size: var(--t-sm); color: var(--ink-3); }
.cr-card .disc { margin-top: var(--s3); }
/* ---- the question ---- */
.cr-ask-lede { margin: 0 0 var(--s4); color: var(--ink-2); }
.cr-ask { display: flex; gap: var(--s2); flex-wrap: wrap; }
.cr-input {
  flex: 1 1 22ch; min-width: 0;
  padding: 12px var(--s3); font: inherit; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r1, 10px);
}
.cr-input::placeholder { color: var(--ink-3); }
.cr-input:focus-visible { border-color: var(--gold); }
/* 44px min target: this is the one control on the page a phone user must hit. */
.cr-ask .pill-btn { min-height: 44px; }
.cr-out:empty { display: none; }
.cr-wait {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s4); color: var(--ink-3); font-size: var(--t-sm);
}
.cr-verdict { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.cr-v-head {
  display: flex; align-items: baseline; gap: var(--s3);
  flex-wrap: wrap; margin-bottom: var(--s3);
}
.cr-v-head h4 { margin: 0; flex: 1 1 16ch; font-size: var(--t-lg, 1.1rem); color: var(--maroon); }
.cr-verdict p { color: var(--ink-2); }
.cr-adj { display: grid; gap: var(--s3); }
.cr-adj-i {
  padding: var(--s3); border: 1px solid var(--line);
  border-radius: var(--r1, 10px); background: var(--surface-2);
}
.cr-adj-h { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.cr-adj-h b { flex: 1 1 12ch; }
.cr-adj-i p { margin: var(--s2) 0 0; font-size: var(--t-sm); }
.cr-steps { margin: var(--s2) 0 0; padding-left: 1.4em; }
.cr-steps li { margin-bottom: var(--s2); color: var(--ink-2); }
/* ============================================================
   The written forecast paragraph. This is the thing people came
   to read, so it gets a comfortable measure and a real reading
   size rather than the density of a data table.
   ============================================================ */
.narr {
  margin: 0 0 var(--s4);
  max-width: 68ch;                /* ~11 words a line: the readable measure */
  font-size: var(--t-md, 1.02rem);
  line-height: 1.75;
  color: var(--ink);
}
.narr::first-line { letter-spacing: .005em; }
/* ============================================================
   BOTTOM TAB BAR — the phone and APK shell.
   The decided architecture: tabs on a phone, sidebar on a
   desktop. 700px is the switch, matching the point where the
   iPad's own layout rules begin.
   ============================================================ */

.tabbar { display: none; }
/* Phone, landscape included — see PHONE_Q in phone.js for why height +
   a coarse pointer is the second clause. Width alone hid the tab bar the
   moment the handset was turned sideways. */
@media (max-width: 699px), (max-height: 520px) and (pointer: coarse) {
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    /* The bar sits ON the home-indicator strip; the inset becomes padding so
       the row of labels never lands under it. */
    padding-bottom: var(--sa-b);
    padding-left: var(--sa-l); padding-right: var(--sa-r);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid var(--line);
  }
.tb-item {
    display: grid; place-items: center; gap: 2px;
    /* 52px + the safe inset keeps every tab past the 44pt HIG floor. */
    min-height: 52px; padding: 7px 2px 6px;
    font: inherit; font-size: 10.5px; letter-spacing: .02em;
    color: var(--ink-3); text-decoration: none;
    background: none; border: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
.tb-ic { font-size: 19px; line-height: 1; }
.tb-item.on { color: var(--maroon); }
.tb-item.on .tb-ic { transform: translateY(-1px); }
/* The astrologer is the one tab that should read as an invitation. */
  .tb-ask .tb-ic {
    color: var(--gold);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 55%, transparent));
  }
.tb-item.on::before {
    content: ""; position: absolute; top: 0; width: 26px; height: 2px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--gold), var(--maroon));
  }
.tb-item { position: relative; }
/* The reading must be able to scroll clear of the bar. */
  .view { padding-bottom: calc(64px + var(--sa-b) + var(--s5)); }
.chat-page { height: calc(100dvh - var(--topbar-h) - var(--sa-t) - 64px - var(--sa-b)); }
/* Ask is a tab now, so the floating pill is pure duplication. */
}
/* ---- iPad: the launcher was covering card content ----------------------
   At 700–1180px the reading column is centred at 940px while the launcher
   floats bottom-right as a full pill — so it sat on top of the last card in
   the column. Collapsed to its orb, and the column reserves the gutter. */
@media (min-width: 700px) and (max-width: 1180px) {
.view { padding-bottom: calc(var(--s9) + var(--sa-b) + 72px); }
}
/* ---- Desktop: one Ask control, not two --------------------------------
   The topbar already carries a labelled "Ask Thara" button. Showing the
   floating pill as well put two identical controls on screen at once. */
@media (min-width: 1181px) {
}
/* On a phone the tab bar carries Ask, so the topbar copy is a third instance of
   the same control. Dropping it also gives the breadcrumb room to breathe. */
@media (max-width: 699px), (max-height: 520px) and (pointer: coarse) {
  .top-actions #btn-ask { display: none; }
}
/* ============================================================
   START HERE — the guided entry on the overview.
   Sits directly under the hero, before any dashboard, because
   the first question is "what do I do now", not "show me data".
   ============================================================ */

.start-here {
  margin: var(--s5) 0;
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 18px);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--gold-tint), transparent 62%),
    var(--surface);
}
.sh-head h2 {
  margin: 0; font-family: var(--f-display);
  font-size: var(--t-xl); color: var(--maroon);
}
.sh-head p { margin: var(--s2) 0 var(--s4); color: var(--ink-2); max-width: 58ch; }
.sh-steps { display: grid; gap: var(--s3); }
.sh-step {
  display: grid;
  grid-template-columns: 30px 1fr 18px;
  align-items: start; gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line); border-radius: var(--r1, 12px);
  background: var(--surface-2);
  text-decoration: none; color: inherit;
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
@media (hover: hover) {
  .sh-step:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.sh-step:hover .sh-go { transform: translateX(3px); }
}
.sh-n {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; font-family: var(--f-display); font-weight: 700;
  color: var(--cream); background: linear-gradient(140deg, var(--gold), var(--maroon));
}
.sh-body { min-width: 0; display: grid; gap: 3px; }
.sh-lab {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3);
}
.sh-t {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-family: var(--f-display); font-size: var(--t-lg); color: var(--maroon);
}
.sh-why { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; }
.sh-go { color: var(--ink-3); transition: transform .18s var(--ease); align-self: center; }
.sh-turn {
  display: block; margin-top: var(--s4); padding: var(--s3) var(--s4);
  border-left: 3px solid var(--maroon); border-radius: 0 var(--r1, 10px) var(--r1, 10px) 0;
  background: color-mix(in srgb, var(--maroon) 8%, transparent);
  color: var(--ink); text-decoration: none; font-size: var(--t-sm); line-height: 1.6;
}
.sh-turn b { color: var(--maroon); }
@media (max-width: 620px) {
  .start-here { padding: var(--s4); margin: var(--s4) 0; }
.sh-step { padding: var(--s3); grid-template-columns: 26px 1fr; }
.sh-go { display: none; }
/* the whole row is the target on touch */
  .sh-n { width: 26px; height: 26px; font-size: var(--t-sm); }
.sh-t { font-size: var(--t-base); }
}
/* ── Genuine fixes kept from the reverted redesign ────────────────────────
   The visual layer is gone, but these were defects rather than looks:
   focus rings that had been removed with no replacement, headings that
   orphaned a word, and the 300ms double-tap delay. */
/* ── 11. GUIDELINE FIXES ─────────────────────────────────────────────────
   From a pass against the Web Interface Guidelines. Each of these was a real
   defect, not a preference. */

/* `outline: none` with no replacement removes the only keyboard affordance on
   two of the most-used controls in the app. Both now carry a visible ring. */
.cmdk-input:focus { outline: none; }
.cmdk-input:focus-visible {
  outline: 2px solid var(--gold); outline-offset: -2px;
}
.chat-input textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: -2px;
}

/* The scaleX rewrite of the meters is deliberately NOT here. Animating width
   does force layout, and the guidelines are right to flag it — but the swap
   rendered every bar as a sliver, and a bar that reports 6.7 as 3% is a
   correctness bug where the width transition was only an efficiency one.
   Reverted until it can be done properly (the fill needs to be a child of a
   full-width track it can scale inside, not an absolutely-positioned box). */

/* Headings wrap on their own measure rather than leaving one orphan word. */
.page-title, .hero-name, .sh-head h2, .card-hd h3, .sh-t, .cr-v-head h4 {
  text-wrap: balance;
}
.page-sub, .narr, .sh-why { text-wrap: pretty; }

/* Kill the 300ms double-tap delay on everything tappable. */
a, button, .tb-item, .sh-step, .mod-card, .cr-card, summary {
  touch-action: manipulation;
}

/* `.kv` paints its gaps by letting the container's background show through a
   1px grid gap. That trick has a failure mode: an ODD number of rows leaves a
   trailing empty cell with nothing painted over it, so the line colour renders
   as a solid tinted block — which is exactly the stray pink rectangle beside
   "Professions rated". The last item spans the full row when it would
   otherwise be orphaned. */
.kv > div:last-child:nth-child(odd) { grid-column: 1 / -1; }


/* ═══════════════════════════════════════════════════════════════════════
   13 · THE LIFE AUDIT
   ═══════════════════════════════════════════════════════════════════════ */

/* --- the promotion on the home page --------------------------------------
   Deliberately the loudest object on the overview. It is the only feature
   that reads the reader's own situation rather than the chart alone, and a
   feature nobody is pointed at is a feature nobody uses. */
.sh-audit {
  display: grid; gap: var(--s2); border-radius: var(--r-lg);
  padding: var(--s5); margin-bottom: var(--s4);
  text-decoration: none; color: var(--cream);
  background:
    radial-gradient(130% 130% at 100% 0%, var(--maroon), transparent 60%),
    var(--maroon-deep);
  border: 1px solid var(--line);
  transition: border-color calc(120ms*2) var(--ease);
}
@media (hover: hover) { .sh-audit:hover { border-color: var(--gold-soft); } }
.sh-a-tag {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .2em;
  color: var(--gold-soft);
}
.sh-a-t {
  font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.15;
  color: var(--cream); text-wrap: balance;
}
.sh-a-b { color: rgba(243,231,214,.68); font-size: var(--t-sm); max-width: 62ch; }
.sh-a-go {
  margin-top: var(--s2); display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
}
.sh-sub {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-3); margin-bottom: var(--s3);
}

/* --- the questionnaire --------------------------------------------------- */
.au-f { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.au-f:last-child { border-bottom: 0; padding-bottom: 0; }
.au-f legend, .au-lab {
  font-weight: 600; font-size: var(--t-base); color: var(--ink); padding: 0;
}
.au-f legend em, .au-lab em {
  font-style: normal; font-size: var(--t-xs); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .12em; margin-left: 6px;
}
.au-f fieldset, fieldset.au-f { border: 0; margin: 0; }
.au-help { margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--ink-3); max-width: 60ch; }
.au-opts { display: grid; gap: 1px; margin-top: var(--s3); background: var(--line);
           border: 1px solid var(--line); }
.au-opt {
  display: flex; align-items: center; gap: var(--s3);
  padding: 12px var(--s4); background: var(--surface); cursor: pointer;
  min-height: 44px;                       /* the HIG floor — these get tapped */
  transition: background calc(120ms*2) var(--ease);
}
.au-opt:hover { background: var(--gold-tint); }
.au-opt input { accent-color: var(--maroon); width: 17px; height: 17px; flex: 0 0 auto; }
.au-opt:has(input:checked) { background: var(--gold-tint); font-weight: 600; }
.au-opt input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.au-f .cr-input { margin-top: var(--s3); width: 100%; }
.au-err { margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--neg); }

/* --- the result ---------------------------------------------------------- */
.au-gauge { position: relative; width: 200px; height: 200px; }
.au-gauge .rtxt {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center;
}
.au-gauge .rtxt b {
  font-family: var(--f-display); font-size: 2.8rem; line-height: 1;
  color: var(--maroon); font-variant-numeric: tabular-nums; display: block;
}
.au-gauge .rtxt span {
  display: block; margin-top: 6px; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .16em; color: var(--ink-3);
}
/* The projected arc sits UNDER the current one, so the gap between them is
   the visible thing — the point of the whole screen. */
.au-goal {
  fill: none; stroke: var(--gold); opacity: .34; stroke-linecap: butt;
  transition: stroke-dashoffset calc(120ms * 18) var(--ease);
}
.au-shift {
  display: flex; align-items: center; justify-content: center; gap: var(--s4);
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line);
}
.au-shift span { display: grid; text-align: center; }
.au-shift em {
  font-style: normal; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-3);
}
.au-shift b {
  font-family: var(--f-display); font-size: var(--t-2xl); color: var(--maroon);
  font-variant-numeric: tabular-nums;
}
.au-shift .au-up { color: var(--gold-soft); }
.au-arrow { color: var(--ink-3); font-size: var(--t-lg); }

.au-comp { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.au-comp:last-child { border-bottom: 0; padding-bottom: 0; }
.au-comp-h { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.au-comp-h b { flex: 1 1 14ch; }
.au-w { font-size: var(--t-xs); color: var(--ink-3); }
.au-pct {
  font-family: var(--f-mono); font-size: var(--t-base); color: var(--maroon);
  font-variant-numeric: tabular-nums;
}
.au-bar { height: 3px; background: var(--line); margin: var(--s2) 0; }
.au-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--tier-lo), var(--tier-hi));
}
.au-comp p { margin: 0; font-size: var(--t-sm); color: var(--ink-3); max-width: 66ch; }

.au-act { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.au-act:last-child { border-bottom: 0; padding-bottom: 0; }
.au-act-h { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.au-n {
  width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto;
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm);
  color: var(--cream); background: linear-gradient(140deg, var(--gold), var(--maroon));
}
.au-act-h b { flex: 1 1 18ch; font-size: var(--t-md); }
.au-when {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); border: 1px solid var(--line); padding: 3px 9px;
}
.au-gain {
  font-family: var(--f-mono); font-size: var(--t-sm); color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
}
.au-act p { margin: var(--s3) 0 0; color: var(--ink-2); max-width: 70ch; }

@media (max-width: 620px) {
  .sh-audit { padding: var(--s4); }
  .sh-a-t { font-size: var(--t-lg); }
  .au-gauge { width: 168px; height: 168px; }
  .au-gauge .rtxt b { font-size: 2.2rem; }
}

/* ── Sidebar: stop it cutting off and bleeding while you scroll ────────────
   Two separate causes for one ugly symptom.

   1. `height: 100vh` measures the viewport with the browser chrome RETRACTED.
      With a URL bar or toolbar showing, the sidebar is taller than what you
      can actually see, so `.side-foot` — the "New chart" button and the
      credit line — sits below the fold and looks chopped off. `dvh` tracks
      the live viewport; the vh line stays first as the fallback.

   2. The background was `color-mix(… 86%, transparent)` over a blur, so the
      reading scrolled visibly UNDERNEATH the sidebar. Behind a nav list that
      is mostly text, a moving translucent layer reads as a rendering fault
      rather than as depth. It is opaque now — a fixed rail is a solid edge of
      the app, not a pane of glass over the document. */
.sidebar {
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* The nav is the part that scrolls; the head and foot stay put, so a long
   module list can never push the "New chart" button out of reach. */
.side-nav { min-height: 0; overscroll-behavior: contain; }
.side-foot { flex: 0 0 auto; }

/* ── The actual cause of the sidebar scrolling away ────────────────────────
   `html, body { overflow-x: hidden }` was added to stop wide tables pushing
   the page sideways. It has a side effect that is easy to miss: a non-visible
   overflow on an ancestor turns that ancestor into a scroll container, and a
   `position: sticky` child resolves against THAT instead of the viewport — so
   the sidebar silently stopped sticking and scrolled off the top with the
   page. That is the "cuts off when I scroll" symptom.

   `clip` gives the same protection against sideways scroll without creating a
   scroll container, so sticky works again. Declared after the original rule so
   it wins, and the original stays as the fallback for very old engines. */
html, body { overflow-x: clip; }

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE DEPTH
   The dark theme carried 14 gradients and 21 dedicated rules; light had
   zero. That is why one looks considered and the other looks like a
   wireframe of it.

   Light cannot copy the dark treatment. A glow needs darkness to glow
   against, and the gradients that read beautifully on near-black are
   invisible on cream. Depth on a light ground comes from somewhere else:
   warm tinted surfaces instead of white-on-white, and soft shadows, which
   read well on light and turn to mud on dark.

   Same three colours. Nothing here fires in dark mode.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .card,
:root:not([data-theme="dark"]) .card {
  /* White on cream is the flattest possible pairing. A barely-there warm
     gradient gives the card a top edge without becoming a visible band. */
  background: linear-gradient(178deg, #FFFFFF 0%, #FFFCF6 62%, #FDF8EE 100%);
  box-shadow: 0 1px 2px rgba(74,37,48,.04), 0 8px 24px -14px rgba(74,37,48,.16);
}

[data-theme="light"] .card-hd,
:root:not([data-theme="dark"]) .card-hd {
  /* The gold hairline under a title, which dark got via its own rule. */
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--gold-tint), transparent) 1;
}

[data-theme="light"] .hero,
:root:not([data-theme="dark"]) .hero {
  box-shadow: 0 2px 6px rgba(139,30,63,.10), 0 24px 60px -30px rgba(139,30,63,.34);
}

[data-theme="light"] .hb,
:root:not([data-theme="dark"]) .hb {
  background: linear-gradient(165deg, rgba(255,253,247,.13), rgba(255,253,247,.05));
}

[data-theme="light"] .mod-card,
:root:not([data-theme="dark"]) .mod-card {
  background: linear-gradient(174deg, #FFFFFF, #FDF8EE);
  box-shadow: 0 1px 2px rgba(74,37,48,.04);
}
@media (hover: hover) {
  [data-theme="light"] .mod-card:hover,
  :root:not([data-theme="dark"]) .mod-card:hover {
    box-shadow: 0 2px 4px rgba(74,37,48,.06), 0 14px 30px -18px rgba(139,30,63,.30);
  }
}

[data-theme="light"] .stat,
:root:not([data-theme="dark"]) .stat {
  background: linear-gradient(172deg, #FFFFFF, #FDF7EC);
}

[data-theme="light"] .sh-step,
:root:not([data-theme="dark"]) .sh-step {
  background: linear-gradient(172deg, #FFFFFF, #FCF6EA);
  box-shadow: 0 1px 2px rgba(74,37,48,.05);
}

/* The score chips and badges got tinted fills in dark and flat outlines in
   light. Give light the same warmth, keeping the gold→bronze→maroon scale. */
[data-theme="light"] .score-chip.pos, [data-theme="light"] .badge.pos,
[data-theme="light"] .badge.gold,
:root:not([data-theme="dark"]) .score-chip.pos,
:root:not([data-theme="dark"]) .badge.pos,
:root:not([data-theme="dark"]) .badge.gold {
  background: linear-gradient(160deg, #FBF3D9, #F7EDCC);
}
[data-theme="light"] .score-chip.warn, [data-theme="light"] .badge.warn,
:root:not([data-theme="dark"]) .score-chip.warn,
:root:not([data-theme="dark"]) .badge.warn {
  background: linear-gradient(160deg, #FDF0E2, #FBEBD9);
}
[data-theme="light"] .score-chip.neg, [data-theme="light"] .badge.neg,
:root:not([data-theme="dark"]) .score-chip.neg,
:root:not([data-theme="dark"]) .badge.neg {
  background: linear-gradient(160deg, #FCE9E9, #FBE2E2);
}

/* The meter track was a flat line on light. A soft inset makes the bar sit
   IN the track rather than on top of it. */
[data-theme="light"] .meter .mt,
:root:not([data-theme="dark"]) .meter .mt {
  background: linear-gradient(180deg, #F2E9DA, #F8F1E4);
  box-shadow: inset 0 1px 2px rgba(74,37,48,.08);
}

/* The ring's track, likewise. */
[data-theme="light"] .ring .rtrack,
:root:not([data-theme="dark"]) .ring .rtrack { stroke: #EFE4D2; }

[data-theme="light"] .thara-cta,
:root:not([data-theme="dark"]) .thara-cta {
  box-shadow: 0 2px 6px rgba(139,30,63,.10), 0 20px 48px -26px rgba(139,30,63,.32);
}

[data-theme="light"] .sidebar,
:root:not([data-theme="dark"]) .sidebar {
  background: linear-gradient(180deg, #FCF8F0, #F8F1E4);
}

/* ── Sidebar scores as words ───────────────────────────────────────────────
   Per the blueprint: a bare "4.5" next to Travel & Overseas reads as a life
   sentence. The word carries the same information without inviting that
   reading, and the number lives inside the page beside its methodology. */
.ni-band {
  margin-left: auto; flex: 0 0 auto;
  font-size: 10px; letter-spacing: .04em;
  color: var(--ink-3); white-space: nowrap;
}
.side-nav a.on .ni-band { color: var(--maroon); }
[data-theme="dark"] .side-nav a.on .ni-band { color: var(--gold); }
@media (max-width: 980px) { .ni-band { font-size: 10.5px; } }

/* ── The five indicators ───────────────────────────────────────────────────
   Natal and current sit as a facing PAIR, the other three as rows beneath.
   That layout is the argument: the review's whole complaint was that one
   number reads as a life sentence, and putting the promise beside the phase
   is what stops it. */
.inds { display: grid; gap: var(--s4); }
.ind-pair {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3);
  align-items: center;
}
.ind-pair-i {
  display: grid; gap: 3px; padding: var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
.ind-pair-i .ind-l {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3);
}
.ind-pair-i .ind-w {
  font-family: var(--f-display); font-size: var(--t-lg); color: var(--maroon);
  line-height: 1.1;
}
.ind-pair-i .ind-n { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ind-pair-i .ind-n em { font-style: normal; opacity: .7; }
.ind-vs {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-3);
}
.ind-head { margin: 0; color: var(--ink-2); max-width: 68ch; }

.ind-rest { display: grid; gap: var(--s3); }
.ind-row {
  display: grid; grid-template-columns: 1fr 2fr auto auto; gap: var(--s3);
  align-items: center; font-size: var(--t-sm);
}
.ind-row .ind-l { color: var(--ink-2); }
.ind-row .ind-t {
  height: 6px; border-radius: 3px; background: var(--line); overflow: hidden;
}
.ind-row .ind-f {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--tier-lo), var(--tier-hi));
  transition: width .9s var(--ease);
}
/* Effort runs the other way: a high number is the harder reading, so the
   gradient is reversed rather than the value being flipped. */
.ind-row.inv .ind-f { background: linear-gradient(90deg, var(--tier-hi), var(--tier-lo)); }
.ind-row .ind-w { color: var(--ink); white-space: nowrap; }
.ind-row .ind-n {
  font-family: var(--f-mono); color: var(--maroon);
  font-variant-numeric: tabular-nums; min-width: 2.4em; text-align: right;
}
.ind-notes { display: grid; gap: var(--s3); margin: 0; }
.ind-notes dt { font-weight: 600; font-size: var(--t-sm); }
.ind-notes dd { margin: 2px 0 0; font-size: var(--t-sm); color: var(--ink-3); }

@media (max-width: 620px) {
  .ind-pair { grid-template-columns: 1fr; }
  .ind-vs { justify-self: center; }
  .ind-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .ind-row .ind-t { grid-column: 1 / -1; order: 3; }
}

/* =========================================================================
   UNIVERSAL PAGE ANATOMY
   The blocks every page carries below its own content: evidence, natal vs
   current, contradictions, timeline, action plan, question chips, method,
   feedback and export. One stylesheet section for all twenty-six pages —
   the whole point of the anatomy is that it looks and reads the same
   everywhere, so a reader learns it once.
   ========================================================================= */
.anatomy { display: grid; gap: var(--s5); margin-top: var(--s7); }
/* A rule, not a heading: the anatomy is a different KIND of content from the
   reading above it — it is the working, not the answer. */
.anatomy::before {
  content: ""; height: 1px; margin-bottom: var(--s2);
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* ---------------- evidence cards ---------------- */
.ev-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.ev-card {
  display: grid; gap: var(--s2); align-content: start;
  padding: var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2);
  border-left: 3px solid var(--warn);
}
.ev-card.pos { border-left-color: var(--pos); }
.ev-card.neg { border-left-color: var(--neg); }
.ev-top { display: grid; gap: 4px; }
.ev-pol {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3);
}
.ev-card.pos .ev-pol { color: var(--pos); }
.ev-card.neg .ev-pol { color: var(--neg); }
.ev-f { font-size: var(--t-base); line-height: 1.35; }
.ev-d { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.ev-link {
  font-size: var(--t-sm); color: var(--maroon); text-decoration: none;
  border-bottom: 1px solid transparent; justify-self: start;
}
.ev-link:hover { border-bottom-color: currentColor; }

/* ---------------- natal vs current ---------------- */
.nc {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3);
  align-items: center;
}
.nc-half {
  display: grid; gap: 3px; padding: var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
.nc-l {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3);
}
.nc-w { font-family: var(--f-display); font-size: var(--t-lg); line-height: 1.1; }
.nc-w.pos { color: var(--pos); } .nc-w.warn { color: var(--warn); }
.nc-w.neg { color: var(--neg); }
.nc-n { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nc-n em { font-style: normal; opacity: .7; }
.nc-vs {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-3);
}
.nc-note { margin: var(--s3) 0 0; color: var(--ink-2); max-width: 68ch; }

/* ---------------- timeline ---------------- */
.tl { display: grid; gap: 0; }
.tl-row {
  display: grid; grid-template-columns: 74px 1fr auto; gap: var(--s4);
  align-items: start; padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
}
.tl-row:last-child { border-bottom: 0; }
/* The present is the row that matters and the only one that gets a fill. */
.tl-row.present { background: var(--gold-tint); }
.tl-row.past { opacity: .72; }
.tl-phase {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); padding-top: 3px;
}
.tl-row.present .tl-phase { color: var(--maroon); font-weight: 700; }
.tl-hd { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }
.tl-range { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tl-note { margin: 4px 0 0; font-size: var(--t-sm); color: var(--ink-2); max-width: 62ch; }
.tl-meas { display: grid; gap: 4px; justify-items: end; text-align: right; }
.tl-int { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--warn); }
.tl-int.pos { color: var(--pos); } .tl-int.neg { color: var(--neg); }
.tl-int em { font-style: normal; opacity: .6; font-size: .82em; }
.tl-int span, .tl-conf span {
  display: block; font-family: var(--f-body); font-size: var(--t-xs);
  color: var(--ink-3); letter-spacing: .02em;
}
/* Confidence is dots rather than a second number — five bars of numerals in a
   row and the reader stops distinguishing them. */
.tl-conf { font-size: var(--t-sm); color: var(--gold-soft); letter-spacing: .1em; }

/* ---------------- contradictions ---------------- */
.cxs { display: grid; gap: var(--s5); }
.cx {
  display: grid; gap: var(--s3); padding: var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface-2);
}
.cx-h { margin: 0; font-family: var(--f-display); font-size: var(--t-md); color: var(--maroon); }
.cx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.cx-side { padding: var(--s3); border-radius: var(--r-sm); background: var(--surface); }
.cx-side span {
  display: block; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3); margin-bottom: 4px;
}
.cx-side p { margin: 0; font-size: var(--t-sm); }
.cx-w {
  padding: var(--s3); border-radius: var(--r-sm);
  background: var(--gold-tint); border: 1px solid var(--line);
}
.cx-wl {
  display: block; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .12em; color: var(--maroon); font-weight: 700; margin-bottom: 4px;
}
.cx-w p { margin: 0; font-size: var(--t-sm); }
.cx-why { margin: 0; font-size: var(--t-sm); color: var(--ink-2); max-width: 72ch; }

/* ---------------- action plan ---------------- */
/* 200px, not 230: at 230 the four buckets break 3 + 1 on a desktop column and
   "Avoid" is orphaned onto its own row, which reads as an afterthought rather
   than as the fourth quarter of the plan. */
.ap {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.ap-col {
  display: grid; gap: var(--s3); align-content: start; padding: var(--s4);
  border-radius: var(--r-md); background: var(--surface-2);
  border-top: 3px solid var(--gold-soft);
}
.ap-col.avoid { border-top-color: var(--neg); }
.ap-h b { display: block; font-family: var(--f-display); font-size: var(--t-md); }
.ap-h em {
  display: block; font-style: normal; font-size: var(--t-xs); color: var(--ink-3);
  margin-top: 2px;
}
.ap-i { padding-top: var(--s3); border-top: 1px solid var(--line); }
.ap-t { margin: 0; font-size: var(--t-sm); font-weight: 600; }
.ap-b { margin: 4px 0 0; font-size: var(--t-sm); color: var(--ink-3); }

/* ---------------- question chips ---------------- */
.qchips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.qchip {
  padding: 9px 14px; border-radius: var(--r-full); font-size: var(--t-sm);
  border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--ink); text-decoration: none; line-height: 1.3;
}
.qchip:hover { background: var(--gold-tint); border-color: var(--gold-soft); }

/* ---------------- feedback ---------------- */
.fb { display: grid; gap: var(--s3); }
.fb-btns { display: flex; flex-wrap: wrap; gap: var(--s2); }
.fb-b {
  padding: 9px 14px; border-radius: var(--r-full); font: inherit;
  font-size: var(--t-sm); cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
}
.fb-b:hover, .fb-b.on { background: var(--gold-tint); border-color: var(--gold-soft); }
.fb-note { display: grid; gap: var(--s2); justify-items: start; }
.fb-note textarea {
  width: 100%; padding: var(--s3); border-radius: var(--r-sm); font: inherit;
  font-size: var(--t-sm); border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); resize: vertical;
}
.fb-priv, .xp-priv { font-size: var(--t-xs); color: var(--ink-3); margin: 0; max-width: 72ch; }
.fb-done { margin: 0; color: var(--maroon); }

/* ---------------- export ---------------- */
.xp { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.xp-priv { display: flex; gap: var(--s2); align-items: flex-start; cursor: pointer; }
.xp-priv input { margin-top: 2px; }

@media (max-width: 620px) {
  .nc { grid-template-columns: 1fr; }
  .nc-vs { justify-self: center; }
  .cx-pair { grid-template-columns: 1fr; }
  /* The phase label moves ABOVE the row rather than beside it. Holding back
     60px of a 375px screen for the word "PAST" left roughly 24 characters for
     the title, and "Rahu–Jupiter sub-period" broke across three lines. */
  .tl-row { grid-template-columns: 1fr; row-gap: var(--s2); }
  .tl-phase { padding-top: 0; }
  .tl-meas {
    justify-items: start; text-align: left;
    display: flex; gap: var(--s5); align-items: baseline;
  }
}

/* =========================================================================
   PRINT — "Save as PDF" is the browser's own print dialogue, so the print
   stylesheet IS the export format. Two modes: the current page alone, and
   #print-all holding every module rendered into one document.
   ========================================================================= */
@media print {
  /* Interactive furniture cannot be acted on from paper, so none of it is
     printed — including the anatomy's own feedback and export controls. */
  .tabbar, .side-scrim, .fb, .xp, .xp-priv, .qchips, .ev-link,
  .thara-btn, .cmdk-trigger, .pill-btn, .ghost-btn { display: none !important; }
  body { background: #fff; }
  .view { padding: 0; }
  /* Disclosures print open: a collapsed <details> on paper is a hole in the
     document, and the method block is exactly the part an expert wants. */
  details { display: block; }
  details > summary { list-style: none; font-weight: 700; }
  .disc-body { display: block !important; }
  .card, .ev-card, .cx, .ap-col, .tl-row { break-inside: avoid; }
  .anatomy { gap: var(--s4); }
  #print-all { display: none; }
}
/* The full report. Everything except #print-all is hidden, and the container
   is only populated for the duration of the print dialogue. */
body.print-full #print-all { display: block; }
@media print {
  body.print-full > *:not(#print-all) { display: none !important; }
  body.print-full #print-all { display: block !important; }
  body.print-full .pr-mod { break-after: page; }
  body.print-full .pr-mod:last-child { break-after: auto; }
}
body:not(.print-full) #print-all { display: none; }
/* --ink-2, not --ink-3: this line is the one that explains why a card headed
   "Supportive" can open with "enemy's sign", so it has to be readable rather
   than merely present. At --ink-3 it is 50% opacity on the dark theme. */
.ev-basis { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.ev-card .disc { margin: 0; }
.ev-card .disc summary { font-size: var(--t-xs); }

/* =========================================================================
   PHONE SCREENS — item 3.
   The hub screens (/life, /timing, /all) and the folds that keep a reading
   under a thumb. Everything here is a row: one tap target, full width, the
   answer on the row so the choice is made before the tap.
   ========================================================================= */

/* ---------------- the shared row ---------------- */
.ph-rows { display: grid; gap: var(--s2); }
.ph-row {
  display: grid; grid-template-columns: 34px 1fr 14px; gap: var(--s3);
  align-items: center; padding: var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); text-decoration: none;
  /* 44pt is the HIG floor for a target you hit while walking. */
  min-height: 64px;
  -webkit-tap-highlight-color: transparent;
}
.ph-row:active { background: var(--surface-2); }
.ph-row[hidden] { display: none; }
.ph-ic { display: grid; place-items: center; color: var(--accent); }
.ph-ic svg { width: 24px; height: 24px; }
.ph-body { display: grid; gap: 3px; min-width: 0; }
.ph-t {
  font-family: var(--f-display); font-size: var(--t-md); line-height: 1.2;
  display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
}
.ph-band {
  font-family: var(--f-body); font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}
.ph-band.pos { color: var(--pos); } .ph-band.warn { color: var(--warn); }
.ph-band.neg { color: var(--neg); } .ph-band.gold { color: var(--gold-soft); }
.ph-why {
  font-size: var(--t-sm); color: var(--ink-3); line-height: 1.4;
  /* Two lines of "why", never three — past that the row stops being a row. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ph-go { color: var(--ink-3); font-size: 20px; line-height: 1; }

/* The chart/now pair on a life row. This is item 1's whole argument in the
   width of a phone: the promise and the period, never one word alone. */
.ph-split { display: flex; gap: var(--s4); margin: 2px 0 1px; }
.ph-sp { display: grid; gap: 0; }
.ph-sp em {
  font-style: normal; font-size: var(--t-xs); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .1em;
}
.ph-sp b { font-size: var(--t-sm); line-height: 1.2; }
.ph-sp b.pos { color: var(--pos); } .ph-sp b.warn { color: var(--warn); }
.ph-sp b.neg { color: var(--neg); }

/* ---------------- the Life hub's audit card ---------------- */
.ph-hero {
  display: grid; gap: var(--s2); padding: var(--s5); margin-bottom: var(--s4);
  border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
  border: 1px solid var(--line-strong);
  background: radial-gradient(120% 140% at 0% 0%, var(--gold-tint), transparent 62%),
              var(--surface);
}
.ph-hero-tag {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em;
  color: var(--maroon); font-weight: 700;
}
.ph-hero-t { font-family: var(--f-display); font-size: var(--t-lg); line-height: 1.25; }
.ph-hero-b { font-size: var(--t-sm); color: var(--ink-2); }
.ph-hero-go { font-size: var(--t-sm); font-weight: 600; color: var(--maroon); }

/* ---------------- the Timing hub's "running now" ---------------- */
.ph-now {
  display: grid; gap: var(--s2); padding: var(--s5); margin-bottom: var(--s4);
  border-radius: var(--r-lg); border: 1px solid var(--line-strong);
  background: radial-gradient(120% 140% at 100% 0%, var(--gold-tint), transparent 62%),
              var(--surface);
}
.ph-now-l {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-3);
}
.ph-now-t { font-family: var(--f-display); font-size: var(--t-2xl); line-height: 1.05; }
.ph-now-s { font-size: var(--t-sm); color: var(--ink-2); }
.ph-now-m {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--line);
}
.ph-now-m span { display: grid; gap: 2px; }
.ph-now-m em {
  font-style: normal; font-size: var(--t-xs); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .1em;
}
.ph-now-m b { font-size: var(--t-base); font-variant-numeric: tabular-nums; }
.ph-now-m b i { font-style: normal; font-size: .7em; opacity: .7; }
.ph-now-m b.pos { color: var(--pos); } .ph-now-m b.warn { color: var(--warn); }
.ph-now-m b.neg { color: var(--neg); }
.ph-now-go {
  font-size: var(--t-sm); font-weight: 600; color: var(--maroon);
  text-decoration: none; justify-self: start;
}

/* ---------------- the All browse screen ---------------- */
.ph-find { margin-bottom: var(--s4); position: sticky; top: 0; z-index: 5;
           padding: var(--s2) 0; background: var(--bg); }
.ph-find input {
  width: 100%; padding: 13px var(--s4); font: inherit; font-size: var(--t-base);
  border-radius: var(--r-full); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
}
.ph-find input:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.ph-groups { display: grid; gap: var(--s5); }
.ph-group { display: grid; gap: var(--s2); }
.ph-group[hidden] { display: none; }
.ph-glabel {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-3); font-weight: 700;
}
.ph-none { text-align: center; color: var(--ink-3); padding: var(--s6) 0; }
.ph-allbtn { display: inline-block; margin-top: var(--s5); }

/* ---------------- folds ----------------
   A folded block must not look like a disabled one, so it keeps the card's
   own border and surface and reads as a closed drawer. */
.folds { display: grid; gap: var(--s3); }
.folds > .disc, .anatomy.phone .folds > .disc {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); margin: 0;
}
.folds > .disc > summary {
  padding: var(--s4); font-size: var(--t-base); min-height: 56px;
  display: flex; align-items: center; gap: var(--s2);
}
.folds > .disc > .disc-body { padding: 0 var(--s3) var(--s3); }
/* The card inside a fold has already been framed by the fold itself. */
.folds > .disc > .disc-body > .card {
  border: 0; background: none; box-shadow: none; padding: 0; margin: 0;
}
.folds > .disc > .disc-body > .card::before { display: none; }
.fold-n {
  font-style: normal; font-size: var(--t-xs); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .08em;
}
.anatomy.phone { gap: var(--s4); }

@media (max-width: 699px) {
  /* The reading column is the whole screen; a bento grid at 390px is a stack
     with extra rules, so it becomes one. */
  .bento > [class*="sp"] { grid-column: 1 / -1; }
  .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: 1fr; }
  /* Except the ones that are genuinely a row of small numbers. */
  .grid.g4.nums { grid-template-columns: repeat(2, 1fr); }
  /* "Ends / Rates / Left" are three short figures and fit across 390px. The
     blanket collapse above put "Left" on its own row, which made the running
     period read as two facts and an afterthought. */
  .ph-now-m { grid-template-columns: repeat(3, 1fr); }

  /* Touch targets, gated on WIDTH rather than on `pointer: coarse`.
     The existing coarse block covers the icon buttons and is right for a real
     device, but it cannot be verified in a resized desktop viewport (which
     reports `pointer: fine`), and the size of a tap target at 390px is a
     layout decision regardless of what is pointing at it. These all measured
     21–39px: `ev-link` at 22px was the worst, and it sits inside a card the
     reader is specifically invited to tap through and check. */
  .pill-btn, .ghost-btn, .qchip, .fb-b, .tc-q, .chip,
  .ev-link, .ph-now-go, .ph-hero-go {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .disc > summary { min-height: 44px; display: flex; align-items: center; }
}
/* A deep hit says which reading it came from — "Venus in Taurus" is only
   useful if you can see it lives on the Birth Chart page. */
.ph-row .ph-kind {
  font-size: var(--t-xs); color: var(--ink-3); text-align: right;
  text-transform: uppercase; letter-spacing: .06em; max-width: 5.5em;
}
.ph-group #ph-deep-rows { display: grid; gap: var(--s2); }

/* =========================================================================
   ITEM 4 PAGES — Strengths & Challenges, Life Purpose, Life Overview,
   Important Dates.
   ========================================================================= */

/* ---- a named factor (strength, struggle, compensator) ---- */
.fx-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fx-card {
  display: grid; gap: var(--s2); align-content: start;
  padding: var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  background: var(--surface);
}
.fx-card.pos { border-left-color: var(--tier-hi); background: var(--tier-hi-soft); }
.fx-card.neg { border-left-color: var(--tier-lo); background: var(--tier-lo-soft); }
.fx-top { display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.fx-t { font-family: var(--f-display); font-size: var(--t-md); line-height: 1.25; }
.fx-tag {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 7px; border-radius: var(--r-full);
  border: 1px solid var(--line-strong); color: var(--ink-3); white-space: nowrap;
}
/* "A phase" has to look different from "Long-term" at a glance — that
   distinction is the most useful thing on the page. */
.fx-tag.warn { color: var(--warn); border-color: var(--tier-mid); background: var(--tier-mid-soft); }
.fx-d { margin: 0; font-size: var(--t-sm); }
.fx-w { margin: 0; font-size: var(--t-sm); color: var(--ink-3); font-style: italic; }
.fx-src {
  font-size: var(--t-xs); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .08em;
}
.fx-link { font-size: var(--t-sm); font-weight: 600; color: var(--maroon); text-decoration: none; }

/* ---- develop this first ---- */
.dev-first { display: grid; gap: var(--s3); }
.dev-l { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); }
.dev-t { font-family: var(--f-display); font-size: var(--t-2xl); color: var(--maroon); text-decoration: none; line-height: 1.1; }
.dev-m { display: flex; gap: var(--s6); }
.dev-m span { display: grid; gap: 2px; }
.dev-m em { font-style: normal; font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; }
.dev-m b { font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.dev-m b i { font-style: normal; font-size: .6em; opacity: .65; }
.dev-w { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }

/* ---- life purpose ---- */
.pu-thread { padding: var(--s4) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--s2); }
.pu-thread:last-child { border-bottom: 0; }
.pu-l { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--gold-soft); font-weight: 700; }
.pu-thread p { margin: 0; }
.pu-work { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.pu-work:last-child { border-bottom: 0; }
.pu-w-h { display: flex; gap: var(--s3); align-items: baseline; margin-bottom: var(--s2); }
.pu-w-h b { font-family: var(--f-display); font-size: var(--t-md); }

/* ---- life overview ---- */
.lo-phase { display: grid; gap: var(--s3); }
.lo-p-t { font-family: var(--f-display); font-size: var(--t-2xl); line-height: 1.05; }
.lo-p-m { display: flex; gap: var(--s6); flex-wrap: wrap; padding-top: var(--s3); border-top: 1px solid var(--line); }
.lo-p-m span { display: grid; gap: 2px; }
.lo-p-m em { font-style: normal; font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; }
.lo-p-m b { font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.lo-p-m b i { font-style: normal; font-size: .65em; opacity: .65; }
.lo-p-m b.pos { color: var(--pos); } .lo-p-m b.warn { color: var(--warn); } .lo-p-m b.neg { color: var(--neg); }

/* ---- important dates ---- */
.dt-list { display: grid; gap: var(--s3); }
.dt-row {
  display: grid; gap: var(--s2) var(--s4);
  grid-template-columns: 180px 1fr 160px;
  padding: var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
}
/* A period change is a different order of event from a supportive Tuesday and
   must not look like one. */
.dt-row.changeover, .dt-row.turning { border-left: 3px solid var(--maroon); }
.dt-row.supportive { border-left: 3px solid var(--tier-hi); }
.dt-row.caution { border-left: 3px solid var(--tier-mid); }
.dt-when { display: grid; gap: var(--s2); align-content: start; }
.dt-when b { font-family: var(--f-display); font-size: var(--t-md); line-height: 1.2; }
.dt-kind {
  justify-self: start; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .08em; padding: 2px 7px; border-radius: var(--r-full);
  border: 1px solid var(--line-strong); color: var(--ink-3);
}
.dt-kind.pos { color: var(--pos); border-color: var(--tier-hi); background: var(--tier-hi-soft); }
.dt-kind.warn { color: var(--warn); border-color: var(--tier-mid); background: var(--tier-mid-soft); }
.dt-kind.neg { color: var(--neg); border-color: var(--tier-lo); background: var(--tier-lo-soft); }
.dt-what { margin: 0 0 var(--s2); font-size: var(--t-sm); }
.dt-meta { display: grid; gap: var(--s2); align-content: start; justify-items: end; text-align: right; }
.dt-spec { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.dt-conf { color: var(--gold-soft); letter-spacing: 2px; font-size: var(--t-sm); }

@media (max-width: 860px) {
  .dt-row { grid-template-columns: 1fr; }
  .dt-meta { justify-items: start; text-align: left; }
  .dev-m, .lo-p-m { gap: var(--s5); }
}
.dt-date { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---- Auspicious Timing ---- */
.mu-form { display: grid; gap: var(--s4); grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
.mu-f { display: grid; gap: var(--s2); }
.mu-f span { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.mu-f select, .mu-f input {
  padding: 11px var(--s3); font: inherit; font-size: var(--t-base);
  border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); width: 100%;
}
.mu-note { margin: var(--s3) 0 0; font-size: var(--t-sm); color: var(--ink-3); font-style: italic; }
.mu-day { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.mu-day:last-child { border-bottom: 0; }
/* The winner has to look like the winner without a second colour. */
.mu-day.best { background: var(--gold-tint); border-radius: var(--r-md); padding: var(--s4); margin-bottom: var(--s3); }
.mu-d-h { display: grid; grid-template-columns: 30px 1fr auto; gap: var(--s3); align-items: center; }
.mu-rank {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--maroon); color: #fff;
  font-size: var(--t-xs); font-weight: 700;
}
.mu-d-h b { font-family: var(--f-display); font-size: var(--t-md); display: block; }
.mu-sub { font-size: var(--t-sm); color: var(--ink-3); }
.mu-hours { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin: var(--s3) 0 0 42px; }
.mu-h-l { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.mu-hour {
  font-size: var(--t-sm); padding: 3px 9px; border-radius: var(--r-full);
  border: 1px solid var(--line-strong); background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.mu-hour em { font-style: normal; color: var(--gold-soft); font-weight: 600; }
.mu-crit { display: grid; gap: var(--s3); }
.mu-c-h { display: flex; gap: var(--s2); align-items: baseline; }
.mu-c-h b { font-size: var(--t-sm); }
.mu-c-h span { font-size: var(--t-xs); color: var(--ink-3); }
.mu-c p { margin: 2px 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.mu-day .disc { margin-top: var(--s3); margin-left: 42px; }

@media (max-width: 860px) {
  .mu-form { grid-template-columns: 1fr; }
  .mu-hours, .mu-day .disc { margin-left: 0; }
}

/* ---- Compare / Saved / Reports ---- */
.cmp-pair { display: grid; gap: var(--s2); }
.cmp-p-h { display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; }
.cmp-p-h b { font-family: var(--f-display); font-size: var(--t-md); }

.sv-save { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); }
.sv-save input {
  padding: 11px var(--s3); font: inherit; font-size: var(--t-base);
  border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
}
.sv-list { display: grid; gap: var(--s3); }
.sv-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s3);
  padding: var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
}
.sv-body { display: grid; gap: 2px; }
.sv-body b { font-family: var(--f-display); font-size: var(--t-md); }
.sv-meta { font-size: var(--t-sm); color: var(--ink-3); }
.sv-eng { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--f-mono); }
.sv-acts { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: start; }
.sv-diff { grid-column: 1 / -1; }
/* Destructive actions read as maroon, which in this palette is already the
   "weak / difficult" end of the scale — no new hue needed. */
.pill-btn.danger { border-color: var(--tier-lo); color: var(--tier-lo-ink); }

.rp-sets { display: grid; gap: var(--s2); }
.rp-set, .rp-opt {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--s3);
  align-items: start; padding: var(--s3);
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); cursor: pointer;
}
.rp-set span, .rp-opt span { display: grid; gap: 2px; }
.rp-set em, .rp-opt span b + * { font-style: normal; font-size: var(--t-sm); color: var(--ink-3); }
.rp-opt { margin-bottom: var(--s3); }
.rp-opt span { font-size: var(--t-sm); }

@media (max-width: 860px) {
  .sv-row, .sv-save { grid-template-columns: 1fr; }
}

/* =========================================================================
   ITEM 5 — the Advanced Astrology group.
   ========================================================================= */

/* The blueprint's `▾`. A folded group must not look disabled — it is closed,
   not unavailable — so it keeps the same label styling as an open group and
   only the caret changes. */
.nav-fold { margin-bottom: var(--s4); }
.nav-fold > summary {
  display: flex; align-items: center; gap: var(--s2);
  cursor: pointer; list-style: none; user-select: none;
}
.nav-fold > summary::-webkit-details-marker { display: none; }
.nav-fold > summary:hover { color: var(--ink-2); }
.nf-caret {
  font-style: normal; font-size: 10px; color: var(--ink-3);
  transition: transform .18s var(--ease);
}
.nav-fold[open] > summary .nf-caret { transform: rotate(180deg); }

/* ---- Ishta / Kashta ---- */
.ik-list { display: grid; gap: var(--s4); }
.ik-row {
  display: grid; gap: var(--s2);
  padding: var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
}
.ik-h { display: flex; gap: var(--s3); align-items: baseline; }
.ik-h b { font-family: var(--f-display); font-size: var(--t-md); }
.ik-read { font-size: var(--t-sm); color: var(--ink-3); }
.ik-bars { display: grid; gap: var(--s2); }
.ik-bar { display: grid; grid-template-columns: 58px 1fr 42px; gap: var(--s3); align-items: center; }
.ik-l { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.ik-t { height: 8px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.ik-f { display: block; height: 100%; border-radius: var(--r-full); }
/* Gold for what a graha gives, maroon for what it costs — the same scale the
   whole app uses, not a second vocabulary. */
.ik-f.pos { background: linear-gradient(90deg, var(--tier-hi), var(--tier-hi-2)); }
.ik-f.neg { background: linear-gradient(90deg, var(--tier-lo), var(--tier-lo-2)); }
.ik-n { font-variant-numeric: tabular-nums; font-size: var(--t-sm); text-align: right; }
.ik-src { font-size: var(--t-sm); color: var(--ink-3); }

/* ---- evidence independence (corrected standard §41/§42) ---- */
.ind-verdict { display: grid; gap: var(--s3); }
.iv-row { display: grid; grid-template-columns: 190px 1fr auto; gap: var(--s3); align-items: baseline; }
.iv-l { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.iv-v { font-family: var(--f-display); font-size: var(--t-md); }
.iv-v.pos { color: var(--pos); } .iv-v.warn { color: var(--warn); } .iv-v.neg { color: var(--neg); }
.iv-n { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.iv-layers { display: flex; gap: var(--s2); flex-wrap: wrap; padding-top: var(--s2); border-top: 1px solid var(--line); }
.iv-tag { font-size: var(--t-xs); padding: 3px 9px; border-radius: var(--r-full);
          border: 1px solid var(--line-strong); color: var(--ink-2); }
.iv-note { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
@media (max-width: 699px) { .iv-row { grid-template-columns: 1fr; gap: 2px; } }

/* "Search your reading" — the saved-readings name box (item 6). */
.sv-find { margin-bottom: var(--s4); }
.sv-find input {
  width: 100%; padding: 12px var(--s4); font: inherit; font-size: var(--t-base);
  border-radius: var(--r-full); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
}
.sv-find input:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.sv-row[hidden] { display: none; }
.sv-none { text-align: center; color: var(--ink-3); padding: var(--s5) 0; }

/* =========================================================================
   THE REDESIGN — 41 pages → 18 destinations
   -------------------------------------------------------------------------
   Everything below serves one measured problem: the average page was 1,700
   words and 6,300px tall, and the app's home screen ended in a grid of 41
   tiles. The palette does not change — cream, gold, maroon, and the gold →
   bronze → maroon scale — because the look was never what was wrong.
   ========================================================================= */

/* ---- planet symbols in a fixed cell -------------------------------------
   ☉ ☽ ♂ ☿ ♃ ♀ ♄ come from different Unicode blocks with different advance
   widths, and the OS resolves several of them against different fallback
   fonts. Printed as bare text they each started at a different x. A fixed
   em-square makes the CELL set the width, so every row lines up. */
.pglyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; flex: none; margin-right: .3em;
  font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', 'Apple Symbols',
               var(--f-body);
  font-variant-emoji: text;      /* never let a symbol resolve to colour emoji */
  line-height: 1; font-size: .95em; color: var(--accent);
  vertical-align: -.28em;
}
.pcell { display: inline-flex; align-items: center; }

/* ---- tab strip ----------------------------------------------------------
   The merge needed somewhere for the absorbed routes to go. A tab strip and
   not an accordion: the sub-views are peers ("this month" / "this year"), and
   an accordion would imply a reading order between them that does not exist.
   Scrolls horizontally on a phone rather than wrapping to two rows, because a
   wrapping tab strip changes height when you change tab. */
/* The strip is a 3-layer stack sharing one grid:
     1. .tab-row     — the labels, muted
     2. .tab-thumb   — the sliding block, a moving WINDOW onto a second copy of
                       the labels in the reading colour
     3. .tab-hit     — transparent buttons that take the clicks
   `--i` (the active index) drives both the thumb and its inner track. Two
   transforms, no reflow, no per-button class toggling. */
:root { --spring: cubic-bezier(.32, .72, 0, 1); --spring-t: .38s; }

.tabs {
  position: relative; display: block; isolation: isolate;
  margin: var(--s5) 0 var(--s4); padding: 3px;
  border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: inset 0 1px 2px rgba(122,31,43,.07);
  position: sticky; top: calc(var(--topbar-h) + var(--s2)); z-index: 20;
  backdrop-filter: blur(10px);
}
[data-theme="dark"] .tabs { box-shadow: inset 0 1px 2px rgba(0,0,0,.45); }

.tab-row, .tab-hit {
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
}
.tab-lb {
  padding: 11px var(--s3); text-align: center; white-space: nowrap;
  font: 600 var(--t-sm)/1.25 var(--f-body); letter-spacing: .01em;
  color: var(--ink-3); transition: color .2s var(--ease);
  overflow: hidden; text-overflow: ellipsis;
}
.tabs:hover .tab-row .tab-lb { color: var(--ink-2); }

/* The thumb: one cell wide, translated by whole cells. */
.tab-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--n));
  border-radius: var(--r-full); overflow: hidden;
  background: var(--maroon); box-shadow: 0 1px 3px rgba(122,31,43,.30);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform var(--spring-t) var(--spring);
  z-index: 1; pointer-events: none;
}
[data-theme="dark"] .tab-thumb {
  background: var(--gold); box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* …and inside it, the full-width label track slid the OTHER way by the same
   amount, so it stays registered with the labels underneath. */
/* The track is `--n` cells WIDE, so one cell is 100%/--n of it. Translating by
   a bare -100% per step would slide it a whole strip-width per tab and the
   label would never be under the thumb — which is exactly what it did. */
.tab-thumb-track {
  display: grid; width: calc(var(--n) * 100%); height: 100%;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  transform: translateX(calc(var(--i) * -100% / var(--n)));
  transition: transform var(--spring-t) var(--spring);
}
.tab-thumb-track .tab-lb { color: var(--cream); }
[data-theme="dark"] .tab-thumb-track .tab-lb { color: #1A1014; }

.tab-hit { position: absolute; inset: 3px; z-index: 2; }
.tab {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  min-height: 44px;                                /* 44px touch target */
  border-radius: var(--r-full); outline: none;
}
.tab:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gold-soft);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tab-thumb, .tab-thumb-track { transition: none; }
}

.tab-panel { display: none; }
.tab-panel.on { display: block; animation: panel-in .34s var(--ease-out) both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* A merged panel keeps its own view's column, minus the H1 the shell now owns. */
.panel-wrap { display: block; }
.panel-sub {
  color: var(--ink-3); font-size: var(--t-base); line-height: 1.6;
  margin: 0 0 var(--s4); max-width: 62ch;
}

/* ---- the answer block ---------------------------------------------------
   The one thing above the fold. Conclusion first, evidence below and folded. */
.answer {
  display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap;
  margin: 0 0 var(--s5); padding: var(--s5);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.ans-dial { flex: none; }
.ans-body { flex: 1 1 22ch; min-width: 0; }
.ans-v {
  margin: 0; font-size: var(--t-md); line-height: 1.55; color: var(--ink);
  font-weight: 500;
}
.ans-next {
  margin: var(--s3) 0 0; font-size: var(--t-sm); color: var(--ink-2);
  line-height: 1.5;
}
.ans-next span {
  display: inline-block; margin-right: .5em; padding: 2px 8px;
  border-radius: var(--r-full); background: var(--gold-tint);
  color: var(--tier-hi-ink); font-weight: 700; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .06em;
}

/* ---- forecast: one section per life area --------------------------------
   Replaces the semicolon chain. A reader who came for the money answer finds
   the word "Money" and reads one sentence. */
.fc-areas {
  display: grid; gap: var(--s3); margin: var(--s4) 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.fc-area {
  padding: var(--s4); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--tier-mid);
}
.fc-area.pos { border-left-color: var(--tier-hi); }
.fc-area.warn { border-left-color: var(--tier-mid); }
.fc-area.neg { border-left-color: var(--tier-lo); }
.fc-a-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-bottom: var(--s2);
}
.fc-a-l {
  font: 700 var(--t-sm)/1.2 var(--f-body); color: var(--ink);
  text-transform: uppercase; letter-spacing: .05em;
}
.fc-a-t {
  margin: 0; font-size: var(--t-base); line-height: 1.6; color: var(--ink-2);
}

/* ---- home: "right now" --------------------------------------------------
   The running period, this month and today were three stacked cards, roughly
   700px before the reader met anything actionable. They answer one question,
   so they are one card with three cells. */
.rn-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.rn-cell {
  display: flex; flex-direction: column; gap: 2px; min-height: 44px;
  padding: var(--s4); border-radius: var(--r-md); text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease),
              border-color .2s var(--ease);
}
.rn-cell:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
}
.rn-cell:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.rn-l {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); font-weight: 700;
}
.rn-v {
  font-family: var(--f-display); font-size: var(--t-lg); color: var(--maroon);
  line-height: 1.2;
}
[data-theme="dark"] .rn-v { color: var(--gold); }
.rn-s { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.45; }
.rn-cell .score-chip { margin-top: var(--s2); align-self: flex-start; }

/* ---- home: six doors ----------------------------------------------------
   The old grid printed one tile per module — 41 of them. An index belongs
   behind the ⌘K search box, which already exists. These six are the top level
   of the whole product: every page is inside exactly one of them. */
.doors { margin: var(--s7) 0 var(--s6); }
.door-grid {
  display: grid; gap: var(--s3); margin-top: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.door {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: var(--s5); border-radius: var(--r-lg); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-1); overflow: hidden;
  transition: transform .24s var(--ease-out), box-shadow .24s var(--ease),
              border-color .24s var(--ease);
}
.door::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--maroon));
  opacity: 0; transition: opacity .24s var(--ease);
}
.door:hover { transform: translateY(-3px); box-shadow: var(--shadow-3);
              border-color: var(--line-strong); }
.door:hover::before { opacity: 1; }
.door:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.door-t {
  font-family: var(--f-display); font-size: var(--t-lg); color: var(--ink);
  line-height: 1.25;
}
.door-d { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
.door-go {
  position: absolute; right: var(--s4); top: var(--s5); color: var(--ink-3);
  transition: transform .24s var(--ease-out), color .24s var(--ease);
}
.door:hover .door-go { transform: translateX(4px); color: var(--maroon); }

.hero-tight { padding-bottom: var(--s5); }
.sh-intro { color: var(--ink-3); font-size: var(--t-sm); margin: 0 0 var(--s3); }

/* ---- motion -------------------------------------------------------------
   Stagger doctrine from the motion skill, expressed natively: 0.06s apart,
   ~400ms, with the slight overshoot of back.out(1.4) as a cubic-bezier. No
   library, and nothing animating width or height. */
@media (prefers-reduced-motion: no-preference) {
  .door-grid > .door, .rn-grid > .rn-cell, .fc-areas > .fc-area {
    animation: rise-in .4s cubic-bezier(.34, 1.56, .64, 1) both;
  }
  .door-grid > .door:nth-child(1), .rn-grid > .rn-cell:nth-child(1),
  .fc-areas > .fc-area:nth-child(1) { animation-delay: .00s; }
  .door-grid > .door:nth-child(2), .rn-grid > .rn-cell:nth-child(2),
  .fc-areas > .fc-area:nth-child(2) { animation-delay: .06s; }
  .door-grid > .door:nth-child(3), .rn-grid > .rn-cell:nth-child(3),
  .fc-areas > .fc-area:nth-child(3) { animation-delay: .12s; }
  .door-grid > .door:nth-child(4), .fc-areas > .fc-area:nth-child(4)
    { animation-delay: .18s; }
  .door-grid > .door:nth-child(5), .fc-areas > .fc-area:nth-child(5)
    { animation-delay: .24s; }
  .door-grid > .door:nth-child(6) { animation-delay: .30s; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tab-panel.on { animation: none; }
}

/* ---- phone --------------------------------------------------------------- */
@media (max-width: 699px) {
  .tabs { top: var(--s2); margin: var(--s4) 0 var(--s3); }
  .answer { padding: var(--s4); gap: var(--s4); }
  .ans-dial { margin: 0 auto; }
  .fc-areas { grid-template-columns: 1fr; }
  .door-grid { grid-template-columns: 1fr; }
  .door { padding: var(--s4); }
}