/* ===========================================================
   Swarn Siddhi — Life OS PWA
   Dark theme + lime-green accent (per design refs)
   =========================================================== */

/* Montserrat — the brand face, already self-hosted for the marketing site.
   Same origin and same files, so this costs no new asset; the app simply stops
   being the one surface rendered in a different typeface. Variable weight
   axis 200-800 covers the whole ramp from one file per subset. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/site/fonts/montserrat-200-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/site/fonts/montserrat-200-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

:root {
  /* Palette adopted from the marketing site's "dawn" heaven
     (website/src/heaven.css). The app used a neutral-grey + lime scheme that
     shared nothing with the brand; these are the site's own values so a visitor
     moving from swarnsiddhi.com into /app/ stays in the same world. */
  --bg-0: #060a1e;   /* --sky-top   */
  --bg-1: #101433;   /* --sky-mid   */
  --bg-2: #171b3d;
  --bg-3: #241c3f;   /* --sky-warm  */
  --bg-4: #3a2440;   /* --sky-low   */
  --line:  rgba(200,210,255,0.14);   /* --panel-line */
  --line-2: rgba(200,210,255,0.24);
  --text:  #f1eeff;  /* --ink       */
  --text-1: var(--text);
  --text-2: #bdb6d8; /* --ink-soft  */
  --text-3: #8d86a8; /* --ink-faint */

  /* Three accent roles, not one. The site splits these deliberately because a
     gold that is readable AS TEXT on a light sky is too dark to use as a FILL,
     and vice versa. Collapsing them is what would make light mode unreadable. */
  --accent:      #e8c26a;  /* fill: buttons, chips, progress   (--gold-surface) */
  --accent-text: #e8c26a;  /* accent-coloured text/icons       (--gold)         */
  --accent-ink:  #1d1608;  /* text drawn ON a fill — dark in BOTH themes        */
  --accent-2:    #f5d68c;  /* hover / focus                    (--gold-bright)  */
  --accent-soft: rgba(232, 194, 106, 0.14);
  --gold:    #e8c26a;
  /* "This is done / this is yours" green. It was never defined: every use site
     wrote `var(--ok, #3ecf8e)`, so the fallback WAS the colour — the same mint
     in both themes, and 1.7:1 against the light card background. The dark
     value below is that exact mint, so nothing changes here; light gets a
     green that can actually be read (5.6:1 on --bg-2). */
  --ok:      #3ecf8e;
  --red:     #e59aa6;      /* --rose */
  --red-soft: rgba(229, 154, 166, 0.18);
  --amber:   #d9a14c;
  --teal:    #5eead4;
  --violet:  #a78bfa;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --pad: 16px;

  /* Shared layout rhythm. Feature views may keep their compact utilities, but
     new and revised screens can now use one named scale instead of inventing
     another 6/10/14px combination for every card. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --type-caption: 0.75rem;
  --type-body-sm: 0.875rem;
  --type-body: 1rem;
  --type-section: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --type-page: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --leading-tight: 1.2;
  --leading-body: 1.55;
  --surface-page: var(--bg-0);
  --surface-card: var(--bg-1);
  --surface-raised: var(--bg-2);
  --surface-control: var(--bg-3);
  --content-reading: 720px;
  --content-wide: 1080px;
  --desktop-rail: 216px;
  --touch-target: 44px;

  /* Montserrat is already self-hosted for the marketing site at /site/fonts/ —
     same origin, so the app can use the brand face without a new request path. */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: 'Montserrat', var(--font);

  --safe-top: env(safe-area-inset-top);
  --safe-bot: env(safe-area-inset-bottom);

  --chrome-bg: rgba(6, 10, 30, 0.85);
  --chrome-bg-nav: rgba(16, 20, 51, 0.96);
  --chrome-mark: radial-gradient(circle at 30% 30%, #241c3f, #060a1e);
}

/* Light theme — toggled by data-theme="light" on <html>. Only surface and
   text tokens flip; accent hues stay the same so brand colour is consistent. */
:root[data-theme="light"] {
  /* The marketing site's "morning" heaven. Note this is NOT an inversion of
     dawn — different sky ramp, a darker gold for text, and warm-brown shadows
     rather than black. Inverting dawn produced grey mud; these are the site's
     measured values (its --ink-faint carries a comment that #7d7266 failed
     4.5:1 on this background, so the ramp is deliberate). */
  --bg-0: #faf6ef;
  --bg-1: #fffdfa;   /* --panel, flattened to opaque for app surfaces */
  --bg-2: #f4ece0;
  --bg-3: #e9dfd0;
  --bg-4: #dbcdb8;
  --line:  rgba(90,70,45,0.14);   /* --panel-line */
  --line-2: rgba(90,70,45,0.24);
  --text:  #241f1a;  /* --ink       */
  --text-2: #554c42; /* --ink-soft  */
  --text-3: #6a6055; /* --ink-faint */

  --accent:      #d8a03c;  /* --gold-surface: mid gold, carries dark ink */
  --accent-text: #7a5310;  /* --gold: 4.5:1 as TEXT on the morning sky   */
  --accent-ink:  #1d1608;  /* unchanged — dark ink stays dark on gold    */
  --accent-2:    #b07d24;  /* --gold-bright */
  --accent-soft: rgba(122, 83, 16, 0.12);
  --gold:    #7a5310;
  --ok:      #1a6b42;      /* readable green on the morning sky */
  --red:     #8f3f47;      /* --rose */
  --red-soft: rgba(143, 63, 71, 0.16);
  --chrome-bg: rgba(255, 253, 250, 0.85);
  --chrome-bg-nav: rgba(255, 253, 250, 0.96);
  --chrome-mark: radial-gradient(circle at 30% 30%, #fffdfa, #e9dfd0);
  color-scheme: light;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg-0);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: contain;
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

button { background: none; cursor: pointer; }
button, input, select, textarea { font: inherit; color: inherit; border: 0; }
button, [role="button"], [role="link"] { touch-action: manipulation; }
input, select, textarea { background: var(--bg-2); color: var(--text); }
a { color: var(--accent-text); text-decoration: none; }
.hidden { display: none !important; }

.skip-link {
  position: fixed;
  top: calc(8px + var(--safe-top));
  left: 8px;
  z-index: 10000;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--text);
  color: var(--bg-0);
  font-weight: 700;
  transform: translateY(calc(-100% - 24px - var(--safe-top)));
  transition: transform 120ms ease-out;
}
.skip-link:focus { transform: translateY(0); }

/* Accessibility: a visible keyboard-focus ring on every interactive element.
   :focus-visible only shows for keyboard/AT users, so mouse clicks stay clean.
   (Replaces the old blanket `outline:0` which made keyboard nav invisible.) */
:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Don't show the ring on plain mouse focus. */
:focus:not(:focus-visible) { outline: none; }

/* Respect the OS "reduce motion" preference (vestibular safety). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Boot ─────────────────────────────────────────────────── */
.boot {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-2) 0%, var(--bg-0) 60%);
  z-index: 9999; transition: opacity .4s ease;
}
.boot.fade { opacity: 0; pointer-events: none; }
.boot-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(245,182,66,.28));
}
.boot-name { font-family: var(--font-display); font-size: 24px; letter-spacing: .04em; margin-top: 8px; font-weight: 700; }
.boot-sub { color: var(--text-3); margin-top: 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.boot-bar { margin-top: 24px; width: 140px; height: 3px; background: var(--bg-2); border-radius: 99px; overflow: hidden; }
.boot-bar > span { display:block; height:100%; width: 35%; background: var(--accent); border-radius: 99px; animation: bootbar 1.2s infinite ease-in-out; }
@keyframes bootbar { 0% { transform: translateX(-100%);} 100% { transform: translateX(380%);} }

/* ── Shell ────────────────────────────────────────────────── */
.shell { display: flex; flex-direction: column; min-height: 100vh; padding-top: var(--safe-top); }

.topbar {
  position: sticky; top: 0; z-index: 50;
  /* Symmetric side columns keep the brand mark optically centred regardless of
     how wide the right-hand actions get (lang + coins). Audit 2026-05-31 fix. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--chrome-bg);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.topbar > .icon-btn { justify-self: start; }
.brand { display: flex; justify-content: center; align-items: center; }
/* The brand mark always stays. The date overlapped it because `1fr auto 1fr`
   sizes both side columns to the WIDER one, so the left column was capped at
   the right column's width and the nowrap date spilled into the centre. The
   date is now compact enough to fit that column (see .bd-date), and the left
   column clips as a backstop rather than overprinting the logo. */
.topbar-left { overflow: hidden; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 50%;
  display: block;
  object-fit: contain;
  background: transparent;
  border: 1px solid var(--line-2);
}
/* Today's date + location shown in the topbar's left (replaces the logo on the
   Today page) — compact, left-aligned.
   The date must never wrap: the left grid column is only ~140px, and without
   nowrap "26 JUL 2026" broke onto three lines and pushed the bar to 80px tall,
   which is what made the whole top bar look broken. */
.brand-date {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; line-height: 1.2; min-width: 0;
}
.brand-date > * { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.brand-date .bd-day {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; color: var(--text-2);
}
.brand-date .bd-date {
  font-size: 14.5px; font-weight: 800; color: var(--text-1);
}
.brand-date .bd-loc { font-size: 11px; color: var(--text-2); }
/* Every top-bar control shares one height so they sit on a common line. */
.top-actions { display: flex; gap: 8px; align-items: center; justify-self: end; }
.icon-btn {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 38px; height: 38px;
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  color: var(--text-2);
  box-sizing: border-box;
}
.icon-btn.ghost { background: transparent; border-color: transparent; }
.icon-btn:active { transform: scale(.95); }
/* In-app back chevron — same footprint as other top-bar controls so toggling
   its visibility never shifts the layout. */
.back-btn {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 38px; height: 38px;
  min-width: 44px; min-height: 44px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  color: var(--text);
  font-size: 24px; line-height: 1; font-weight: 700;
  box-sizing: border-box; cursor: pointer;
}
.back-btn:active { transform: scale(.95); }
/* Birth-city autocomplete dropdown */
.geo-suggest { display: flex; flex-direction: column; margin-top: 4px; }
.geo-suggest:empty { display: none; }
.geo-opt {
  text-align: left; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; margin-top: 4px; color: var(--text);
  cursor: pointer; font-size: 13px;
  min-height: 44px;
}
.geo-opt:hover { border-color: var(--line-2); background: var(--bg-2); }
.coin-pill {
  background: var(--bg-3); color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  height: 38px; padding: 0 14px 0 10px;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px;
  box-sizing: border-box;
}
.coin-pill .coin { color: var(--gold); font-size: 14px; }
.lang-select {
  background: var(--bg-3); color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  height: 38px; padding: 0 10px;
  font-weight: 700; font-size: 13px;
  cursor: pointer;
  box-sizing: border-box;
}

/* ── View ─────────────────────────────────────────────────── */
.view {
  flex: 1;
  /* Bottom nav (~64px) + the chat FAB, which sits 72px up and is 56px tall, so
     it reaches ~128px above the bottom. Pad past the FAB top so the last card
     never tucks under the nav OR the floating chat button (U1). */
  padding: 14px 16px calc(148px + var(--safe-bot));
  max-width: var(--content-reading); margin: 0 auto; width: 100%;
}

/* ── Generic ──────────────────────────────────────────────── */
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.center { text-align: center; }
.flex { display: flex; gap: 10px; align-items: center; }
.flex.wrap { flex-wrap: wrap; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* Top bar: date+location on the LEFT, logo CENTRED, coins on the RIGHT.
   Symmetric 1fr side columns keep the logo optically centred regardless of how
   wide the left date or right coins get. */
.topbar { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.topbar-left { display: flex; align-items: center; gap: 8px; justify-self: start; min-width: 0; overflow: hidden; }
.topbar .brand { justify-self: center; }
.topbar .top-actions { justify-self: end; }

/* On narrow phones a route title and the centred orb competed for the same
   pixels. Once a route title is present it is the brand for this screen; give
   it the available row and keep only the actionable controls on the right. */
@media (max-width: 430px) {
  .topbar:has(#topbar-route-title) {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px;
  }
  .topbar:has(#topbar-route-title) .brand { display: none; }
  .topbar:has(#topbar-route-title) .topbar-left { max-width: none; }
  .topbar:has(#topbar-route-title) #topbar-route-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 18px; } .mt-4 { margin-top: 24px; }
.mb-1 { margin-bottom: 6px; } .mb-2 { margin-bottom: 12px; }
.gap-1 { gap: 6px; } .gap-2 { gap: 12px; }

.h-page {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-page);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 4px 0 16px;
}
/* Route renderers can opt into this pair without another shell rewrite. The
   title occupies a stable block while the optional eyebrow supplies hub or
   breadcrumb context; both wrap safely at 200% text zoom. */
.route-heading { margin: var(--space-2) 0 var(--space-5); min-width: 0; }
.route-heading .h-page { margin: 0; overflow-wrap: anywhere; }
.route-eyebrow {
  margin: 0 0 var(--space-2); color: var(--text-2);
  font-size: var(--type-caption); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.h-section {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-section);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 18px 0 10px;
}
.h-section.big {
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 22px 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.h-section.big::before {
  content: '';
  width: 4px;
  height: 22px;
  background: var(--accent);
  border-radius: 2px;
}
.label {
  text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--text-3); font-weight: 600;
}

/* ── Card ─────────────────────────────────────────────────── */
.card {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-4);
}
.card.tight { padding: 12px 14px; }
.card.elev { background: var(--bg-2); }

/* ── Report "At a glance" basics ──────────────────────────── */
.card .h-section { font-size: 16px; }
.glance-rows { display: flex; flex-direction: column; gap: 8px; }
.glance-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--bg-3, var(--accent-soft));
}
.glance-row .glance-k { color: var(--text-2); font-size: 12px; font-weight: 600; flex-shrink: 0; }
.glance-row .glance-v { font-size: 13px; font-weight: 600; text-align: right; }

/* ── Comprehensive (Karam + Natal) gated card ─────────────── */
.comp-card.is-locked { opacity: 0.62; }
.comp-card.is-locked .btn:not(.primary) { color: var(--text-2); }

/* ── Themed visual icons ───────────────────────────────────── */
.visual-card {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--bg-1);
}
.visual-card.compact {
  grid-template-columns: 58px minmax(0, 1fr);
  padding: 10px;
}
.visual-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--accent-soft);
  color: var(--accent-text);
  display: grid;
  place-items: center;
}
.visual-card.compact .visual-icon {
  width: 52px;
  height: 52px;
}
.ui-icon {
  width: 25px;
  height: 25px;
  display: block;
  flex: 0 0 auto;
}
.visual-copy { min-width: 0; }
.visual-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
}
.visual-sub {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}
.icon-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.icon-badge-mark {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--accent-text);
}
.icon-badge-mark .ui-icon {
  width: 17px;
  height: 17px;
}
.icon-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 0 6px;
  margin-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.icon-row.at-end {
  -webkit-mask-image: none;
  mask-image: none;
}
.icon-row::-webkit-scrollbar { height: 4px; }
.icon-row::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
/* Guarantee paragraphs that follow icon-row never overlap, even if a view
   forgets to set a positive top margin. Audit 2026-05-24 fix. */
.icon-row + p { margin-top: 4px; }

@media (max-width: 430px) {
  .visual-card {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
  .visual-card.compact { grid-template-columns: 52px minmax(0, 1fr); }
  .visual-title { font-size: 15px; }
  .visual-sub { font-size: 11px; }
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px;
  min-height: 44px;
  font-weight: 600; font-size: 14px;
  background: var(--bg-3); color: var(--text);
  border: 1px solid var(--line-2);
}
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.full { width: 100%; }
.btn.small { padding: 8px 12px; min-height: 44px; font-size: 13px; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: 0.5; pointer-events: none; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--bg-3); color: var(--text-2);
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--line);
}
.pill.accent { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.pill.gold   { background: rgba(231,192,97,0.14); color: var(--gold); border-color: transparent; }
.pill.red    { background: var(--red-soft); color: var(--red); border-color: transparent; }
.pill.violet { background: rgba(167,139,250,0.14); color: var(--violet); border-color: transparent; }

/* ── Inputs ───────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--text-3); }
.input, .select, textarea.input {
  width: 100%;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  min-height: 44px;
  font-size: 16px;
}
.input:focus, .select:focus { border-color: var(--accent-text); }
textarea.input { resize: vertical; min-height: 88px; }

/* ── Spinner / loading ────────────────────────────────────── */
.spin {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--bg-4);
  border-top-color: var(--accent-text);
  border-radius: 50%;
  animation: rot .9s linear infinite;
}
@keyframes rot { to { transform: rotate(360deg); } }
.loading-card {
  display: flex; flex-direction: column; gap: var(--space-3); align-items: center;
  justify-content: center; min-height: 132px; padding: var(--space-5);
  text-align: center; color: var(--text-2);
}
.loading-card[aria-busy="true"] { cursor: progress; }
.empty-state, .state-empty {
  display: grid; justify-items: center; gap: var(--space-3);
  min-height: 180px; padding: var(--space-6) var(--space-5);
  text-align: center; color: var(--text-2);
}
.empty-state > :first-child, .state-empty > :first-child { color: var(--text); }
.card[role="alert"] {
  border-color: color-mix(in srgb, var(--red) 52%, var(--line));
  background: color-mix(in srgb, var(--red-soft) 42%, var(--surface-card));
}
.card[role="alert"] .btn { min-width: 112px; }
.skel {
  background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2));
  background-size: 200% 100%;
  animation: skel 1.4s infinite;
  border-radius: var(--r-md);
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Toast ────────────────────────────────────────────────── */
#toast-root {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-bot)); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; z-index: 200;
  pointer-events: none;
}
@media (max-width: 560px) {
  #toast-root {
    left: 12px; right: 88px; transform: none;
    align-items: stretch; text-align: center;
  }
}
.toast {
  background: #1d1d24; color: var(--text);
  border: 1px solid var(--line-2);
  padding: 10px 14px; border-radius: 999px;
  font-size: 13px; box-shadow: 0 8px 30px rgba(0,0,0,.4);
  transition: opacity .3s ease;
}
.toast.ok    { border-color: var(--accent-text); color: var(--accent-text); }
.toast.error { border-color: var(--red); color: var(--red); }

/* ── Bottom nav ───────────────────────────────────────────── */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--chrome-bg-nav);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--line);
  padding: 8px 0 calc(8px + var(--safe-bot));
}
.nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--text-3); padding: 6px 4px; background: transparent; border: 0;
  min-height: 48px;
  border-radius: var(--r-md);
}
.nav-btn svg { width: 24px; height: 24px; }
.nav-btn .nav-emoji { font-size: 20px; line-height: 1; }
.nav-btn span:not(.nav-emoji) { font-size: 11px; font-weight: 600; }
.nav-btn.active { color: var(--accent-text); }

/* ── Hub colour identity (2026-05-24 redesign) ─────────────── */
:root {
  --hub-today:   #f0a937;   /* amber */
  --hub-time:    #2cc4a1;   /* teal */
  --hub-you:     #5a9fe6;   /* blue  */
  --hub-growth:  #b07aff;   /* violet */
  --hub-relate:  #f17a9c;   /* rose */
  --hub-library: #c5c0b4;   /* warm grey */
}
.nav-btn[data-hub="today"].active   { color: var(--hub-today); }
.nav-btn[data-hub="time"].active    { color: var(--hub-time); }
.nav-btn[data-hub="you"].active     { color: var(--hub-you); }
.nav-btn[data-hub="growth"].active  { color: var(--hub-growth); }
.nav-btn[data-hub="library"].active { color: var(--hub-library); }

/* Subnav active button picks up the current hub colour via attribute. */
body[data-hub="today"]   .subnav-btn.active { color: var(--hub-today);   border-color: rgba(240,169,55,0.45);  background: rgba(240,169,55,0.15);  }
body[data-hub="time"]    .subnav-btn.active { color: var(--hub-time);    border-color: rgba(44,196,161,0.45);  background: rgba(44,196,161,0.15);  }
body[data-hub="you"]     .subnav-btn.active { color: var(--hub-you);     border-color: rgba(90,159,230,0.45);  background: rgba(90,159,230,0.15);  }
body[data-hub="growth"]  .subnav-btn.active { color: var(--hub-growth);  border-color: rgba(176,122,255,0.45); background: rgba(176,122,255,0.15); }
body[data-hub="library"] .subnav-btn.active { color: var(--hub-library); border-color: rgba(197,192,180,0.45); background: rgba(197,192,180,0.15); }

/* ── Sub-nav strip (per-hub) ───────────────────────────────── */
.subnav {
  position: sticky;
  top: calc(56px + var(--safe-top));
  z-index: 20;
  display: flex; gap: 6px; overflow-x: auto;
  padding: 10px 16px; margin: -8px -16px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-0);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.subnav::-webkit-scrollbar { height: 3px; }
.subnav::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.subnav-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  border: 1px solid transparent;
  font-size: 13px; font-weight: 600;
  min-height: 44px;
  white-space: nowrap;
}
.subnav-btn:hover { color: var(--text-1); }
.subnav-btn.active {
  background: rgba(205,164,52,0.15);
  color: var(--accent-text);
  border-color: rgba(205,164,52,0.3);
}

/* ── Drawer section headings ───────────────────────────────── */
.drawer-section {
  padding: 14px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

/* ── Modal ────────────────────────────────────────────────── */
.modal-back {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(5,5,8,0.7);
  display: flex; align-items: flex-end; justify-content: center;
  padding-top: var(--safe-top);
  overscroll-behavior: contain;
}
.modal {
  width: 100%; max-width: 560px;
  background: var(--bg-1);
  border-top-left-radius: var(--r-xl);
  border-top-right-radius: var(--r-xl);
  padding: 20px 18px calc(24px + var(--safe-bot));
  max-height: 92vh; overflow-y: auto;
  border-top: 1px solid var(--line);
  animation: slideUp .25s ease;
  box-shadow: 0 -18px 64px rgba(0,0,0,.38);
  scrollbar-gutter: stable;
}
@keyframes slideUp { from { transform: translateY(40%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Drawer (left menu) ───────────────────────────────────── */
.drawer-back { position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,.55); }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 84%; max-width: 320px;
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  padding: calc(20px + var(--safe-top)) 18px 20px;
  animation: slideRight .25s ease;
  overflow-y: auto;
}
@keyframes slideRight { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.drawer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.drawer-head .av {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 18px;
  font-family: var(--font-display);
}
.drawer-head .who .name { font-weight: 700; font-size: 16px; }
.drawer-head .who .sub  { color: var(--text-3); font-size: 12px; }
.drawer-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 8px;
  border-radius: var(--r-md);
  color: var(--text-2);
}
.drawer-row:hover, .drawer-row:active { background: var(--bg-2); color: var(--text); }
.drawer-row .ico { width: 22px; text-align: center; font-size: 18px; }
.drawer-row .lab { flex: 1; font-weight: 500; font-size: 15px; }
.drawer-row .tag { font-size: 10px; color: var(--gold); }

/* ── Home: profile head card ──────────────────────────────── */
.profile-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
}
.profile-head .av {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--chrome-mark);
  color: var(--text); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 22px;
  border: 1px solid var(--line-2);
}
.profile-head .who { flex: 1; }
.profile-head .who .name {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
}
.profile-head .who .name .ok { color: var(--accent-text); font-size: 14px; }
.profile-head .who .meta { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.profile-head .chev {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-2); display: grid; place-items: center;
  color: var(--text-2);
}

/* ── Mood card ────────────────────────────────────────────── */
.mood-card { padding: 18px 14px; position: relative; }
.mood-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 17px; text-align: center;
  margin: 0 0 14px;
}
.mood-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.mood-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 4px;
  border-radius: var(--r-md);
}
.mood-btn .emoji { font-size: 30px; line-height: 1; }
.mood-btn .lab { font-size: 10px; color: var(--text-3); height: 12px; }
.mood-btn.on  { background: var(--accent-soft); }
.mood-btn.on .lab { color: var(--accent-text); }
.mood-row .mood-btn .lab.show { display: block; }
.mood-card .close-x {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  min-width: 44px; min-height: 44px;
  background: transparent; color: var(--text-2);
  display: grid; place-items: center;
}
/* The rule stated before the tap, not after: log as often as you like, coins
   once a day. A second entry that silently earned nothing read as a failure. */
.mood-sub { margin: 4px 0 12px; font-size: 12px; color: var(--text-2); line-height: 1.5; }
.mood-count { margin-top: 10px; font-size: 11px; color: var(--text-3); }

/* ── Mood picker sheet ────────────────────────────────────── */
/* Five faces, an optional tag, an optional one line. Mirrors the Flutter
   picker (mood_picker_sheet.dart) so the two surfaces ask the same question
   in the same order. */
.mood-sheet { display: flex; flex-direction: column; }
.mood-faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mood-face {
  display: grid; place-items: center;
  padding: 10px 4px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent;
  min-height: 52px;
}
.mood-face .emoji { font-size: 28px; line-height: 1; }
.mood-face.on { border-color: var(--accent-text); border-width: 2px; background: var(--accent-soft); }
/* Only the ends are labelled — five words under five faces is noise. */
.mood-scale {
  display: flex; justify-content: space-between;
  margin-top: 8px; font-size: 11px; color: var(--text-3);
}
.mood-sheet-label { margin-top: 18px; font-size: 12px; color: var(--text-2); }
.mood-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mood-tag {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2);
  font-size: 12px; font-weight: 500; color: var(--text-2);
}
.mood-tag.on {
  border-color: var(--accent-text); background: var(--accent-soft);
  color: var(--accent-text); font-weight: 700;
}
.mood-note { margin-top: 14px; width: 100%; }
.mood-coinline { margin: 10px 0 12px; font-size: 11px; color: var(--text-3); }

/* ── Mood history ─────────────────────────────────────────── */
.mood-hist { display: flex; flex-direction: column; gap: 2px; }
.mood-hist-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid var(--line);
}
.mood-hist-row:last-child { border-bottom: 0; }
.mood-hist-row .mh-face { font-size: 20px; line-height: 1.2; flex: 0 0 auto; }
.mood-hist-row .mh-body { flex: 1 1 auto; min-width: 0; }
.mood-hist-row .mh-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mood-hist-row .mh-mood { font-size: 13px; font-weight: 600; }
.mood-hist-row .mh-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text);
}
.mood-hist-row .mh-note { margin-top: 2px; font-size: 12px; color: var(--text-2); line-height: 1.45; }
.mood-hist-row .mh-when { flex: 0 0 auto; font-size: 11px; color: var(--text-3); white-space: nowrap; }

/* ── Mood patterns / cohort ───────────────────────────────── */
/* Mirrors mood_patterns_screen.dart. Every colour is a token, so both the
   dawn and morning heavens are covered by the same rules — the mood spark
   line had been a hardcoded lime in both themes until it was tokenised, and
   this is the same surface. */
.mood-patterns-link { display: block; width: 100%; margin-top: 12px; }
.mood-patterns { display: flex; flex-direction: column; }
.mood-patterns .card { margin-bottom: 12px; }
.mood-patterns .card:last-child { margin-bottom: 0; }
.mp-h { font-size: 14px; font-weight: 700; color: var(--text); }
.mp-p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.mp-faint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-3); }
.mp-evidence { margin: 6px 0 0; font-size: 11px; line-height: 1.45; color: var(--text-3); }
.mp-consent .btn, .mp-consent .btn.primary { margin-top: 14px; }
.mp-spread { margin: 14px 0 8px; font-size: 11px; color: var(--text-3); }
.mp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* One bucket: a name, a bar, and the count with its mean. `avg` is abbreviated
   because "16 entries · average 4.0" ellipsised on a 375px screen and lost the
   digit — the only part that carries information. */
.mp-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.mp-label {
  flex: 0 0 80px; min-width: 0;
  font-size: 12px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-row.on .mp-label { font-weight: 700; color: var(--accent-text); }
.mp-count { flex: 0 0 auto; font-size: 11px; color: var(--text-3); text-align: right; white-space: nowrap; }
.mp-bar {
  flex: 1 1 auto; min-width: 40px;
  height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden;
}
.mp-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--text-3); }
.mp-bar.on > span { background: var(--accent); }

/* ── Mood support (helplines) ─────────────────────────────── */
/* Set apart from the numbers around it: everything else on these screens is a
   count about the past; this is the one thing addressed to the person reading
   it. The digits are rendered exactly as the server sent them. */
.mood-support { margin-top: 12px; background: var(--bg-2); border-color: var(--line-2); }
.mood-support .ms-title { font-size: 15px; font-weight: 700; color: var(--text); }
.mood-support .ms-body { margin: 6px 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.mood-support .ms-line { margin-bottom: 10px; }
.mood-support .ms-name { font-size: 13px; font-weight: 700; color: var(--text); }
.mood-support .ms-detail { font-size: 12px; color: var(--text-3); }
.mood-support .ms-numbers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mood-support .ms-numbers .btn { font-weight: 600; }
.mood-support .ms-elsewhere {
  display: inline-block; margin: 6px 0; font-size: 12px;
  color: var(--accent-text); text-decoration: underline;
}
.mood-support .ms-emergency { margin-top: 6px; font-size: 12px; color: var(--text-3); }

/* ── Quick tiles (Dream / Compatibility) ──────────────────── */
.quick-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 14px;
}
.qt {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.qt .glyph { font-size: 32px; line-height: 1; }
.qt .glyph.tool-thumb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--bg-2);
  display: grid;
  place-items: center;
}
.qt .lab { font-weight: 700; font-family: var(--font-display); font-size: 15px; }

/* ── Muhurta calendar ─────────────────────────────────────── */
.cal-card { padding: 16px 14px; margin-top: 16px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
/* Title-less head (the section header above names the card) — centre the
   month nav across the full width instead of leaving it hanging right. */
.cal-head-nav { justify-content: center; }
.cal-head-nav .cal-nav { flex: 1; justify-content: space-between; max-width: 260px; }
.cal-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.cal-nav { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.cal-nav .month-name { font-weight: 600; font-size: 14px; color: var(--text); min-width: 88px; text-align: center; }
.cal-nav button { color: var(--text-2); padding: 4px 6px; min-width: 44px; min-height: 44px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow {
  text-align: center; color: var(--text-3); font-size: 11px; font-weight: 600;
  padding: 4px 0;
}
.cal-cell {
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: 12px;
  font-size: 14px; font-weight: 600;
  color: var(--text-2);
  background: var(--bg-2);
  position: relative;
  cursor: pointer;
}
.cal-cell.empty { background: transparent; cursor: default; }
/* One band palette, shared by the day cells and the legend dots, so the two
   can never drift apart.
   Derived from the app's own tokens rather than generic traffic-light greens:
   the auspicious end is the brand lime (--accent), the inauspicious end the
   brand red (--red), and neutral is a plain surface. That keeps the grid
   reading as part of this app instead of a stock calendar widget. */
.q-best  { --band: var(--accent);              --band-ink: #16210a; }
.q-good  { --band: color-mix(in srgb, var(--accent) 30%, transparent);   --band-ink: var(--text); }
.q-neut  { --band: var(--bg-4);                --band-ink: var(--text-2); }
.q-bad   { --band: rgba(217, 83, 79, 0.28);    --band-ink: var(--text); }
.q-worst { --band: var(--red);                 --band-ink: #fff; }
/* Light theme: the translucent mid-bands need more body against a pale
   surface, and the lime needs darker ink to stay legible. */
[data-theme="light"] .q-good  { --band: rgba(151, 217, 79, 0.42); --band-ink: #24301a; }
[data-theme="light"] .q-neut  { --band: var(--bg-3);              --band-ink: var(--text-2); }
[data-theme="light"] .q-bad   { --band: rgba(217, 83, 79, 0.24);  --band-ink: #4a1f1e; }
.cal-cell.q-best, .cal-cell.q-good, .cal-cell.q-neut,
.cal-cell.q-bad, .cal-cell.q-worst {
  background: var(--band); color: var(--band-ink);
}
/* Awaiting the month fetch — a quiet placeholder, not a scored colour. */
.cal-cell.q-pending {
  background: var(--bg-3); color: var(--text-3);
  animation: calPending 1.4s ease-in-out infinite;
}
@keyframes calPending { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .cal-cell.q-pending { animation: none; }
}
.cal-cell.today {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.cal-legend {
  margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  font-size: 11px; color: var(--text-2);
}
.cal-legend .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px;
  background: var(--band, var(--text-3));
}

/* ── Numerology page ──────────────────────────────────────── */
.num-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 8px;
}
.num-cell {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 4px 0;
}
.num-cell .ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--bg-3);
  display: grid; place-items: center; font-size: 18px;
  flex-shrink: 0;
}
.num-cell .meta .lab { font-weight: 700; font-size: 14px; }
.num-cell .meta .val { color: var(--text-2); font-size: 13px; margin-top: 2px; }

.personality-list { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.personality-list .row {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 12px;
}
.personality-list .check {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 800; flex-shrink: 0;
}
.personality-list .check.bad { background: #ff8050; color: #180b06; }
.personality-list .check.neut { background: var(--bg-3); color: var(--text-2); }
.personality-list .row .body { font-size: 14px; }
.personality-list .row .body b { display: block; margin-bottom: 2px; }
.personality-list .row .body span { color: var(--text-2); font-size: 13px; }

.card.tight .personality-list .row {
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
}

/* ── Numerology TOC chips + new layouts ───────────────────── */
.num-toc {
  position: sticky;
  top: calc(56px + var(--safe-top));
  z-index: 20;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0;
  margin: 4px -4px 12px;
  background: linear-gradient(180deg, var(--bg-0) 70%, rgba(14,14,18,0));
  scrollbar-width: none;
}
.num-toc::-webkit-scrollbar { display: none; }
.num-toc .chip {
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  min-height: 44px;
}
.num-toc .chip:hover { color: var(--text); }
.num-toc .chip.active { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }

.grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 520px) { .grid-2 { grid-template-columns: 1fr; } }

.bullet-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.bullet-list .bullet {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.5; color: var(--text-2);
}
.bullet-list .bullet::before {
  content: ''; flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-top: 8px;
}
.bullet-list.bad .bullet::before { background: #ff8050; }
.bullet-list.neut .bullet::before { background: var(--text-3); }

.year-rail {
  display: flex; gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  margin: 0 -4px;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
}
.year-rail::-webkit-scrollbar { height: 6px; }
.year-rail::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 99px; }
.year-card {
  flex: 0 0 86%;
  max-width: 360px;
  scroll-snap-align: start;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
}
.year-card .yhead {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.year-card .yhead .yr {
  font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--accent-text);
}
.year-card .row-min { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.45; }
.year-card .row-min b { color: var(--text); font-weight: 600; }
.year-card .months {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  margin-top: 10px;
}
.year-card .months .m {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 6px 4px;
  text-align: center;
  font-size: 11px;
  color: var(--text-2);
}
.year-card .months .m b { display: block; color: var(--accent-text); font-size: 12px; }

.kdebt-banner {
  background: linear-gradient(135deg, rgba(255,128,80,0.16), rgba(255,128,80,0.06));
  border: 1px solid rgba(255,128,80,0.35);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-top: 10px;
}
.kdebt-banner b { color: #ff8050; }

.pinnacle-row {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.pinnacle-row:last-child { border-bottom: 0; }
.pinnacle-row .num {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-text);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  flex-shrink: 0;
}
.pinnacle-row .meta { flex: 1; }
.pinnacle-row .meta .ttl { font-weight: 700; font-size: 14px; }
.pinnacle-row .meta .span { color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
.pinnacle-row .meta .body { color: var(--text-2); font-size: 12.5px; margin-top: 4px; line-height: 1.45; }

/* ── Remedies feed ────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 14px; }
.feed-card {
  display: flex; gap: 12px; align-items: center;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px;
}
.feed-card .thumb {
  width: 96px; height: 96px; border-radius: 14px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #2a2a33, #131316);
  display: grid; place-items: center;
  font-size: 30px;
  overflow: hidden;
}
.feed-card .body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.feed-card .title {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-card .meta {
  display: flex; gap: 12px; align-items: center;
  color: var(--text-3); font-size: 12px;
}
.feed-card .meta .grow { flex: 1; }
.feed-card .meta .ico { color: var(--text-2); font-size: 13px; }

/* ── Experts list ─────────────────────────────────────────── */
.expert-card {
  display: flex; gap: 12px; align-items: center;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 12px;
  margin-bottom: 10px;
}
.expert-card .av {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--chrome-mark);
  display: grid; place-items: center; font-size: 24px;
}
.expert-card .who { flex: 1; }
.expert-card .who .name { font-weight: 700; font-family: var(--font-display); }
.expert-card .who .skills { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.expert-card .who .rate { color: var(--accent-text); font-weight: 700; font-size: 13px; margin-top: 4px; }
.expert-card .actions { display: flex; flex-direction: column; gap: 6px; }
.expert-card .actions .btn { padding: 8px 14px; font-size: 12px; }

/* ── Premium gate / lock ──────────────────────────────────── */
.lock-card {
  border-radius: var(--r-lg);
  padding: 24px 18px;
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), rgba(231,192,97,0.04));
  border: 1px dashed var(--accent);
}
.lock-card .lk-ico { font-size: 32px; }
.lock-card h3 { font-family: var(--font-display); font-size: 18px; margin: 8px 0 6px; }
.lock-card p { color: var(--text-2); font-size: 13px; margin: 0 0 14px; }

.premium-banner {
  background: linear-gradient(135deg, #ffd87a 0%, #c79030 100%);
  color: #1b1407;
  padding: 18px;
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 8px;
}
.premium-banner h3 { font-family: var(--font-display); margin: 0; font-size: 18px; }
.premium-banner p  { margin: 0; font-size: 13px; opacity: 0.85; }
.premium-banner .btn { background: #1b1407; color: #fff; border: 0; align-self: flex-start; }

/* ── PWA install banner ───────────────────────────────────── */
.pwa-install-banner {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(76px + var(--safe-bot)); z-index: 9100;
  background: var(--bg-2, #1a1a1f); color: var(--text, #f1f1f4);
  border: 1px solid var(--line-2, rgba(255,255,255,.12));
  border-radius: var(--r-lg); padding: 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  animation: pwa-rise .26s ease-out;
}
@keyframes pwa-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.pwa-install-text { flex: 1; min-width: 0; }
.pwa-install-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.pwa-install-body { font-size: 12px; opacity: .8; }
.pwa-install-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 420px) {
  .pwa-install-banner { flex-direction: column; align-items: stretch; }
  .pwa-install-actions { justify-content: flex-end; }
}

/* ── Misc ─────────────────────────────────────────────────── */
.spacer-1 { height: 12px; } .spacer-2 { height: 24px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.profile-list { gap: 0; }
.profile-list .quick-row {
  background: transparent;
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 13px 4px;
}
.profile-list .quick-row:last-child { border-bottom-width: 0; }
.kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--text-3); font-size: 13px; }
.kv .v { font-weight: 600; }

/* Tab strip */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; }
.tabs::-webkit-scrollbar { display: none; }
/* Astro Vastu tab strips stay scrollable but never paint a scrollbar — even on
   desktop, where the global rail affordance (see media query below) would
   otherwise show a thin bar that looks cheap directly under the tabs. The
   two-class selector outranks both `.tabs` and the desktop override. */
.tabs.vastu-tabs { scrollbar-width: none; }
.tabs.vastu-tabs::-webkit-scrollbar { display: none; height: 0; }
.tabs .tab {
  flex-shrink: 0;
  padding: 8px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--bg-2); color: var(--text-2);
  border: 1px solid var(--line);
}
.tabs .tab.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* Hero callout for Home greeting */
.greet-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), rgba(94,234,212,0.05));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 14px;
}
.greet-card h2 { margin: 0; font-family: var(--font-display); font-size: 22px; }
.greet-card p  { margin: 4px 0 0; color: var(--text-2); font-size: 13px; }

/* ── Dashboard + API cards ───────────────────────────────── */
.onb-cta { display: flex; align-items: center; gap: 14px; }
.quick-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
button.quick-row {
  appearance: none; width: 100%; min-height: var(--touch-target);
  text-align: left; color: inherit;
}
.quick-row .glyph {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--bg-3);
  flex-shrink: 0;
}
.quick-row .glyph.tool-thumb {
  color: var(--accent-text);
}
.quick-row .glyph.tool-thumb .ui-icon {
  width: 20px;
  height: 20px;
}
.quick-row .qr-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }

.today-snap .today-grid,
.today-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.dom-grid,
.wardrobe-grid,
.insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.ms-cell,
.dom-cell,
.api-cell {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  min-width: 0;
}
.ms-cell .lab,
.dom-cell .lab,
.api-cell .lab {
  color: var(--text-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}
.ms-cell .val,
.dom-cell .val,
.api-cell .val {
  margin-top: 4px;
  font-weight: 700;
  line-height: 1.28;
  overflow-wrap: anywhere;
}
.dom-cell.good { border-color: rgba(76, 175, 80, .35); }
.dom-cell.neut { border-color: rgba(217, 161, 76, .32); }
.dom-cell.bad  { border-color: rgba(217, 83, 79, .35); }

.dual-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.card.mini { min-height: 188px; }
.mini-head { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12px; font-weight: 700; }
.mini-head .icon { font-size: 18px; }

.goal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.goal-cell {
  min-height: 94px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.goal-cell .em { font-size: 24px; }
.goal-cell .lab { font-weight: 800; margin-top: 5px; }
.goal-cell .sub { color: var(--text-3); font-size: 11px; margin-top: 2px; }

.win-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
}
.win-row .l { min-width: 0; }
.win-row .r { color: var(--text-2); font-weight: 700; white-space: nowrap; font-size: 12px; }
.win-row.good { border-color: rgba(76, 175, 80, .34); background: rgba(76, 175, 80, .08); }
.win-row.bad  { border-color: rgba(217, 83, 79, .36); background: rgba(217, 83, 79, .08); }
.win-row.neut { border-color: rgba(217, 161, 76, .28); }
.pill.good {
  background: color-mix(in srgb, var(--ok) 13%, transparent);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 36%, var(--line));
}
.pill.neut { background: rgba(217, 161, 76, .14); color: var(--amber); }
.pill.bad  {
  background: color-mix(in srgb, var(--red) 13%, transparent);
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 36%, var(--line));
}
.pill.big { padding: 7px 12px; font-size: 12px; }

.mantra {
  padding: 9px 12px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  font-size: 13px;
  line-height: 1.45;
}

.pbar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-3);
  overflow: hidden;
}
.pbar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.pbar.tiny { height: 5px; margin-top: 4px; }
.planet-bars { display: grid; gap: 8px; }
.planet-bars .pb { font-size: 12px; }
.progress-card .streak { color: var(--text-2); font-size: 13px; }
.remedy-task.done { opacity: .72; border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.remedy-row { display: flex; align-items: flex-start; gap: 12px; }
.remedy-check {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px;
  border-radius: 8px; border: 2px solid var(--line);
  background: transparent; color: var(--accent-ink); font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.remedy-check.on { background: var(--accent); border-color: var(--accent-text); }
.remedy-title { font-weight: 700; }
.remedy-task.done .remedy-title { text-decoration: line-through; }
.remedy-detail {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.rd-lab { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.rd-mantra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; padding: 8px 10px; }
.rd-mantra-text { flex: 1; min-width: 140px; font-size: 13px; }
.rd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12.5px; }
.rd-grid > div > div { margin-top: 2px; }
.btn.tiny { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
@media (max-width: 420px) { .rd-grid { grid-template-columns: 1fr; } }

/* ── Tarot ──────────────────────────────────────────────────────────── */
/* ── Tarot: an unlisted surface, so it gets a found-it arrival ───────────── */
.tarot-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  padding: 26px 18px 22px;
  text-align: center;
  background: linear-gradient(160deg, rgba(167,139,250,.16), color-mix(in srgb, var(--accent) 8%, transparent));
  border: 1px solid var(--line-2);
}
.tarot-hero .th-glow {
  position: absolute; inset: -40% 20% auto 20%; height: 160px;
  background: radial-gradient(circle, rgba(167,139,250,.35), transparent 70%);
  filter: blur(24px); pointer-events: none;
}
.tarot-hero .th-mark { font-size: 40px; line-height: 1; }
.tarot-hero .th-title {
  font-family: var(--font-display); font-weight: 800; font-size: 24px;
  margin-top: 6px; color: var(--text);
}
.tarot-hero .th-sub {
  font-size: 12.5px; color: var(--text-2); margin-top: 6px;
  max-width: 30ch; margin-inline: auto; line-height: 1.5;
}

/* Intent chips replace the old tab strip — one row, scrollable, no chrome. */
.tarot-intents {
  display: flex; gap: 8px; overflow-x: auto; margin-top: 16px;
  padding-bottom: 6px; -webkit-overflow-scrolling: touch;
}
.tarot-intent {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  background: var(--bg-2); color: var(--text-2);
  border: 1px solid var(--line);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tarot-intent .ti-ic { font-size: 14px; }
.tarot-intent.on {
  background: var(--accent-soft); color: var(--text); border-color: var(--accent-text);
}

.tarot-intent-desc {
  font-size: 12.5px; color: var(--text-2); line-height: 1.5;
  margin: 2px 2px 0; min-height: 1.5em;
}

.tarot-prompt {
  text-align: center; font-size: 12px; letter-spacing: .6px;
  text-transform: uppercase; font-weight: 700; color: var(--text-3);
  margin: 22px 0 4px;
}

/* ── Result: card + meaning, and nothing competing with them ─────────────── */
.tarot-result { animation: tarotReveal .42s cubic-bezier(.2,.7,.3,1); }
@keyframes tarotReveal {
  from { opacity: 0; transform: rotateY(-70deg) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.tarot-result .tarot-card { position: relative; }
/* Retry sits on the card, so redrawing is never a hunt for a button. */
.tc-retry {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(0,0,0,.42); color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .18s ease, background .18s ease;
}
.tc-retry:hover { background: rgba(0,0,0,.6); transform: rotate(-90deg); }
.tc-retry:active { transform: rotate(-180deg) scale(.92); }
.tarot-meaning {
  margin: 14px 2px 0; font-size: 15px; line-height: 1.6; color: var(--text);
  text-align: center;
}
/* Yes/No: one line above the card, not a block of copy. */
.tarot-verdict {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2);
}
.tarot-verdict.good { border-color: rgba(76,175,80,.5); background: rgba(76,175,80,.10); }
.tarot-verdict.bad  { border-color: rgba(217,83,79,.5); background: var(--red-soft); }
.tarot-verdict .tv-answer {
  font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text);
}
.tarot-verdict .tv-q { font-size: 12px; color: var(--text-3); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .tarot-result { animation: none; }
  .tc-retry:hover, .tc-retry:active { transform: none; }
}

/* The fan: three backs, angled, that lift on hover and turn on choice. */
.tarot-fan {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 4px; padding: 26px 0 10px; perspective: 900px;
}
.tarot-back-card {
  width: 92px; height: 138px; flex: 0 0 auto; cursor: pointer;
  border: 0; background: none; padding: 0;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .28s ease;
  transform-style: preserve-3d;
}
.tarot-back-card.pos-0 { transform: rotate(-9deg) translateY(6px); }
.tarot-back-card.pos-1 { transform: rotate(0deg) translateY(-4px); z-index: 2; }
.tarot-back-card.pos-2 { transform: rotate(9deg) translateY(6px); }
.tarot-back-card:hover:not(:disabled) { transform: translateY(-12px) rotate(0deg); z-index: 3; }
.tarot-back-card .tbc-face {
  width: 100%; height: 100%; border-radius: 12px;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #2b2350, #150f2b);
  border: 1px solid rgba(167,139,250,.45);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.tarot-back-card .tbc-mark { font-size: 22px; color: color-mix(in srgb, var(--accent) 85%, transparent); }
/* The picked card turns; the others fade back into the deck. */
.tarot-fan.resolving .tarot-back-card:not(.chosen) { opacity: 0; transform: scale(.9); }
.tarot-fan.resolving .tarot-back-card.chosen {
  transform: rotateY(90deg) translateY(-10px); opacity: 0;
}

/* Yes/No leads with the verdict — the card below explains it. */
.tarot-verdict {
  text-align: center; padding: 22px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--line-2); background: var(--bg-2);
}
.tarot-verdict.good { border-color: rgba(76,175,80,.45); background: rgba(76,175,80,.08); }
.tarot-verdict.bad  { border-color: rgba(217,83,79,.45); background: var(--red-soft); }
.tarot-verdict .tv-mark { font-size: 38px; line-height: 1; }
.tarot-verdict .tv-answer {
  font-family: var(--font-display); font-weight: 800; font-size: 28px; margin-top: 4px;
}
.tarot-verdict .tv-q { font-size: 12px; color: var(--text-3); margin-top: 4px; font-style: italic; }
.tarot-verdict .tv-why { font-size: 13px; color: var(--text-2); margin: 10px 0 0; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .tarot-back-card { transition: opacity .2s ease; }
  .tarot-back-card:hover:not(:disabled) { transform: none; }
  .tarot-fan.resolving .tarot-back-card.chosen { transform: none; }
}

.tarot-pers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.tarot-pers .tp-tag { color: var(--accent-text); font-weight: 700; }
.tarot-pers .tp-bits { color: var(--text-2); }
.tarot-back {
  width: 100%; border: none; background: transparent; cursor: pointer;
  display: flex; justify-content: center; padding: 8px 0;
}
.tarot-back .tb-frame {
  width: 180px; height: 280px; border-radius: 16px;
  background: radial-gradient(circle at 50% 30%, #2a2350, #15122b 70%);
  border: 2px solid rgba(205,164,52,.5);
  box-shadow: 0 8px 28px rgba(0,0,0,.45), inset 0 0 0 6px rgba(205,164,52,.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  transition: transform .25s ease;
}
.tarot-back:active .tb-frame { transform: scale(.97); }
.tarot-back.flipping .tb-frame { transform: rotateY(90deg); opacity: .4; }
.tb-mark { font-size: 56px; filter: drop-shadow(0 0 10px rgba(205,164,52,.6)); }
.tb-label { color: rgba(255,255,255,.75); font-size: 13px; letter-spacing: .04em; }
.tarot-card {
  position: relative; width: 100%; max-width: 320px; margin: 0 auto;
  aspect-ratio: 3 / 4; border-radius: 18px;
  background: linear-gradient(160deg, #211b40 0%, #15122b 60%, #0f0d22 100%);
  border: 2px solid rgba(205,164,52,.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 6px rgba(205,164,52,.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center;
  animation: tarotIn .35s ease;
}
@keyframes tarotIn { from { transform: rotateY(-90deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
.tarot-card.reversed .tc-glyph { transform: rotate(180deg); }
.tc-glyph { font-size: 64px; color: #e7c64f; filter: drop-shadow(0 0 12px rgba(205,164,52,.55)); }
.tc-name { font-family: var(--font-display, inherit); font-weight: 800; font-size: 22px; color: #fff; }
.tc-orient { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.tc-orient.up { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-text); }
.tc-orient.rev { background: rgba(255,120,120,.18); color: #ff9a9a; }
.tc-corner { position: absolute; color: rgba(205,164,52,.55); font-size: 16px; }
.tc-corner.tl { top: 12px; left: 14px; }
.tc-corner.br { bottom: 12px; right: 14px; }
/* Illustrated card face (procedural SVG or generated AI image). */
.tarot-card.has-art { gap: 10px; padding: 16px; }
.tc-art {
  width: 100%; max-width: 220px; aspect-ratio: 3 / 4; border-radius: 12px;
  overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.tc-art-svg { display: block; width: 100%; height: 100%; }
.tc-art-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tarot-card.reversed .tc-art-img { transform: rotate(180deg); }
.tarot-plan li::marker { color: var(--accent-text); font-weight: 700; }
.tarot-kw { display: flex; flex-wrap: wrap; gap: 6px; }
.tarot-kw .pill { text-transform: capitalize; }

/* ── Forecast standalone page ─────────────────────────────────────── */
.forecast-tabs { margin: 4px 0 10px; }

.heatmap {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  font-size: 11px;
}
.hm-corner { font-size: 10px; color: var(--muted); display: flex; align-items: flex-end; }
.hm-dh {
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  padding: 2px 0;
}
.hm-dh.today { color: var(--accent-text); }
.hm-row-label {
  display: flex;
  align-items: center;
  font-weight: 600;
  padding-right: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-cell {
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-ink);
}
.hm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
}
.hm-legend .sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: -1px;
}

.panchang-head { display: flex; align-items: center; gap: 12px; }
.tithi-moon-wrap {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  display: grid;
  place-items: center;
}
.tithi-moon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.panchang-moon {
  border-radius: 16px;
}
.cg-table { display: grid; gap: 8px; }
.cg-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.cg-row .name { font-weight: 700; }
.cg-row .nat, .cg-row .tm { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.cg-row.good { border-color: rgba(76,175,80,.34); }
.cg-row.bad { border-color: rgba(217,83,79,.34); }
.cg-row.neut { border-color: rgba(217,161,76,.28); }
.hora-now { border-color: color-mix(in srgb, var(--accent) 26%, transparent); }
.hora-now.good { border-left: 4px solid #4caf50; }
.hora-now.neut { border-left: 4px solid var(--amber); }
.hora-now.bad { border-left: 4px solid var(--red); }
.hora-now .big { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.hora-row {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: 10px;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
button.hora-row {
  appearance: none; width: 100%; min-height: var(--touch-target);
  text-align: left; color: inherit;
}
.hora-row.on { outline: 2px solid var(--accent); outline-offset: -2px; }
.hora-row.good { border-color: rgba(76,175,80,.34); }
.hora-row.neut { border-color: rgba(217,161,76,.28); }
.hora-row.bad { border-color: rgba(217,83,79,.34); }
.hora-row .tm, .hora-row .nat { color: var(--text-2); font-size: 12px; }
.hora-row .pl { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.hora-row .gl { width: 20px; text-align: center; color: var(--accent-text); }
/* Personalised-by-chart hora badges */
.hora-row .hora-mine {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; justify-self: end;
}
.hora-mine.high, .hora-personal.high .hp-badge { color: var(--accent-ink); background: var(--accent); }
.hora-mine.mid,  .hora-personal.mid  .hp-badge { color: var(--gold); background: rgba(231,192,97,0.16); }
.hora-mine.low,  .hora-personal.low  .hp-badge { color: var(--text-3); background: var(--bg-3); }
/* "How is this hour for ME" — the band the server derives from the lagna.
   Coloured with the same good/neut/bad triple the rows and chips use, so one
   colour means one thing across the whole hora surface. */
.hora-band {
  display: inline-block; margin: 6px 0 2px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
.hora-band.good { color: var(--ok);    background: rgba(76,175,80,.14); }
.hora-band.neut { color: var(--amber); background: rgba(217,161,76,.14); }
.hora-band.bad  { color: var(--red);   background: rgba(229,154,166,.16); }
.hora-personal { font-size: 13px; line-height: 1.5; }
.hora-personal .hp-badge { display: inline-block; font-weight: 700; font-size: 11px; padding: 3px 9px; border-radius: 999px; }
.hora-personal .hp-tasks { color: var(--text-2); }

/* ── Hora explainer: what this planetary hour is actually good for ───────── */
.hora-explain { margin-top: 10px; font-size: 13px; line-height: 1.55; }
.hora-explain .hx-theme {
  font-weight: 700; color: var(--text);
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}
.hora-explain .hx-head {
  font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  margin: 14px 0 5px;
}
.hora-explain > .hx-head:first-child { margin-top: 0; }
.hora-explain .hx-head.good { color: #4caf50; }
.hora-explain .hx-head.bad  { color: var(--red); }
.hora-explain .hx-list { margin: 0; padding-left: 18px; color: var(--text-2); }
.hora-explain .hx-list li { margin: 3px 0; }
.hora-explain .hx-list.good li::marker { color: #4caf50; }
.hora-explain .hx-list.bad  li::marker { color: var(--red); }
.hora-explain .hx-yours {
  margin-top: 10px; padding: 8px 10px; border-radius: 10px;
  background: var(--bg-3); color: var(--text-2); font-size: 12.5px;
}
.hora-explain .hx-tier {
  margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  font-size: 12.5px; border-left: 3px solid var(--line-2); background: var(--bg-3);
}
.hora-explain .hx-tier.high { border-left-color: var(--accent-text); }
.hora-explain .hx-tier.mid  { border-left-color: var(--gold); }
.hora-explain .hx-tier.low  { border-left-color: var(--text-3); }
.hora-explain .hx-why {
  margin-top: 8px; color: var(--text-3); font-size: 12px; font-style: italic;
}
/* Compact form on Today — theme + three actions, no avoid/why block. */
.hora-explain.compact { margin-top: 8px; font-size: 12.5px; }
.hora-explain.compact .hx-theme { padding-bottom: 6px; margin-bottom: 6px; }
.hora-explain.compact .hx-list li { margin: 2px 0; }
/* ── Today's hora day-plan: every planetary hour + what it's for ─────────── */
.hora-plan {
  display: flex; gap: 8px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 2px 2px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.hora-chip {
  flex: 0 0 auto; width: 148px; scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 11px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-2); color: inherit; font: inherit;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.hora-chip:active { transform: scale(.97); }
/* Nature reads at a glance: auspicious green, neutral in the app's own accent,
   inauspicious red. `--hc` carries the nature colour through the whole chip so
   the rail, glyph and active state all agree without repeating the palette. */
.hora-chip.good { --hc: #4caf50; }
.hora-chip.neut { --hc: var(--accent); }
.hora-chip.bad  { --hc: var(--red); }
.hora-chip { --hc: var(--accent); border-left: 3px solid var(--hc); }
.hora-chip .hc-time { font-size: 11px; color: var(--text-3); letter-spacing: .2px; }
.hora-chip .hc-planet {
  display: flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 13.5px; color: var(--text);
}
.hora-chip .hc-glyph { color: var(--hc); }
.hora-chip .hc-work {
  font-size: 11.5px; line-height: 1.35; color: var(--text-2);
}
/* The hour running right now — same nature colour, turned up. */
.hora-chip.on {
  border-color: var(--hc);
  background: color-mix(in srgb, var(--hc) 14%, var(--bg-2));
  box-shadow: 0 0 0 1px var(--hc) inset;
}
.hora-chip.on .hc-time { color: var(--text-2); font-weight: 700; }
.hora-chip.on .hc-planet { color: var(--hc); }
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .hora-chip.on { background: var(--bg-3); }
}

/* Button element — beat the UA's centred text and .card's own alignment. */
.card.hora-today, .card.hora-today * {
  text-align: left;
}
.card.hora-today {
  display: block; width: 100%; margin-top: 10px;
  border: 1px solid var(--line); background: var(--bg-2); cursor: pointer;
  font: inherit; color: inherit;
}
.cg-legend { display: grid; gap: 8px; color: var(--text-2); font-size: 13px; }

.btn-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.btn-row .btn { flex: 1; }
.pill-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 12px;
}
.article-body { color: var(--text-2); font-size: 14px; line-height: 1.62; }
.article-body h1, .article-body h2, .article-body h3 { color: var(--text); }

/* ── Onboarding ───────────────────────────────────────────── */
.onb-progress { display: flex; gap: 6px; margin-bottom: 8px; }
.onb-progress .dot {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--bg-3);
}
.onb-progress .dot.on { background: var(--accent); }
.onb-h { margin: 16px 0 6px; font-family: var(--font-display); }
.goal-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.gp-cell {
  position: relative;
  min-height: 92px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px;
  text-align: left;
}
.gp-cell.on { border-color: var(--accent-text); background: var(--accent-soft); }
.gp-cell .em { font-size: 24px; }
.gp-cell .lab { margin-top: 6px; font-weight: 800; }
.gp-cell .tick {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 900;
}
.onb-list { margin: 12px 0 0; padding-left: 18px; color: var(--text-2); line-height: 1.7; }

/* ── Advanced connected surfaces ──────────────────────────── */
.api-card { display: flex; flex-direction: column; gap: 10px; }
.api-card h3 { margin: 0; font-family: var(--font-display); font-size: 16px; }
.api-card p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.api-list { display: grid; gap: 8px; }
.api-list .item {
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.42;
}
.api-list .item b { display: block; margin-bottom: 3px; color: var(--text); }
.status-strip {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 8px 0 12px;
}
.status-strip .pill { font-size: 10px; }

@media (max-width: 560px) {
  .today-snap .today-grid,
  .today-grid,
  .dom-grid,
  .wardrobe-grid,
  .insight-grid,
  .dual-row,
  .goal-grid {
    grid-template-columns: 1fr 1fr;
  }
  .goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-row { grid-template-columns: 1fr; gap: 4px; }
  .cg-row .nat, .cg-row .tm { white-space: normal; }
  .hora-row { grid-template-columns: 92px 1fr; }
  .hora-row .nat { grid-column: 2; }
  .hora-row .hora-mine { grid-column: 2; }
  .win-row { align-items: flex-start; }
  .win-row .r { white-space: normal; text-align: right; }
  .onb-cta { align-items: flex-start; }
}

/* Auto-hide labels on mood when not selected on small screens */
.mood-btn .lab { transition: opacity .2s ease; }
@media (max-width: 360px) {
  .mood-btn:not(.on) .lab { opacity: 0; height: 0; }
}

/* ===========================================================
   2026-05-24 redesign — new shared components
   =========================================================== */
:root {
  --band-excellent: #6BD78A;
  --band-strong:    #A7E37A;
  --band-good:      #E7C061;
  --band-fair:      #E5A059;
  --band-weak:      #E45858;
}

/* ── Date + location header ───────────────────────────────── */
.date-loc-head {
  display: flex; justify-content: flex-end; align-items: flex-start;
  padding: 4px 0 14px;
}
.date-loc-head .stack { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.date-loc-head .row {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text); font-size: 14px; font-weight: 800;
  letter-spacing: 0.5px;
}
.date-loc-head .row .sep { width: 1px; height: 14px; background: rgba(255,255,255,0.25); }
.date-loc-head .row .day { letter-spacing: 1.4px; }
.date-loc-head .loc {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 4px;
  color: var(--text-2); font-size: 12px;
}

/* ── Karam Kundli — section-paged wizard ──────────────────── */
.kk-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-lg, 18px); padding: 20px 18px; margin-top: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.kk-progress {
  height: 6px; width: 100%; background: rgba(127,127,127,.18);
  border-radius: 999px; overflow: hidden;
}
.kk-progress > span {
  display: block; height: 100%; background: var(--accent);
  border-radius: 999px; transition: width .3s ease;
}

/* Question screen */
.kk-q { min-height: 320px; display: flex; flex-direction: column; }
.kk-q-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-2);
}
.kk-q-section { font-weight: 700; color: var(--accent); }
.kk-q-text {
  font-size: 21px; font-weight: 700; line-height: 1.4;
  margin: 18px 2px 22px; color: var(--text);
}
.kk-opts { display: flex; flex-direction: column; gap: 10px; }
.kk-opt {
  width: 100%; padding: 16px 18px; border-radius: 14px; text-align: left;
  font-size: 16px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--bg-2, rgba(127,127,127,.06));
  color: var(--text); transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
.kk-opt:hover { border-color: var(--accent); transform: translateY(-1px); }
.kk-opt.active {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
  font-weight: 800;
}
.kk-nav { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 18px; gap: 10px; }
.kk-nav .btn { min-width: 96px; }

/* Section-paged step: progress meta, section stepper, grouped question list */
.kk-step { min-height: 340px; display: flex; flex-direction: column; }
.kk-progress-meta { font-size: 11px; margin-top: 5px; letter-spacing: .02em; }
.kk-stepper { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.kk-dot {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; cursor: pointer;
  font-size: 12px; font-weight: 700; line-height: 1;
  border: 1.5px solid var(--line); background: var(--bg-2, rgba(127,127,127,.06)); color: var(--text-2);
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
.kk-dot:hover { transform: translateY(-1px); border-color: var(--accent); }
.kk-dot.cur { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.kk-dot.done { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.kk-step-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 10px 0 2px; font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-2);
}
.kk-qlist { display: flex; flex-direction: column; gap: 22px; margin: 14px 0 4px; }
.kk-qitem { display: flex; flex-direction: column; gap: 10px; }
.kk-qitem-label { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--text); }
.kk-pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* Compact horizontal scale inside a grouped step (vs the tall stacked wizard) */
.kk-qitem .kk-opts { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.kk-qitem .kk-opt { width: auto; flex: 1 1 0; min-width: 84px; text-align: center; padding: 12px 14px; font-size: 15px; }

/* Review step */
.kk-review-sec { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.kk-review-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.kk-review-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.kk-review-q { color: var(--text-2); flex: 1 1 auto; }
.kk-review-a { color: var(--text); font-weight: 600; text-align: right; flex: 0 0 auto; max-width: 55%; }
.kk-review-a.none { color: var(--text-3, #8a8a95); font-weight: 400; font-style: italic; }

/* Intro / confirm screen */
.kk-intro { text-align: center; }
.kk-intro-icon { font-size: 40px; color: var(--accent); }
.kk-intro-title { font-size: 24px; font-weight: 800; margin-top: 6px; }
.kk-intro-sub { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin: 8px auto 16px; max-width: 440px; }
.kk-confirm {
  text-align: left; max-width: 340px; margin: 0 auto 14px;
  background: rgba(127,127,127,.08); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
}
.kk-confirm-row { display: flex; gap: 10px; align-items: center; font-size: 14px; padding: 4px 0; }
.kk-confirm-row > span:first-child { width: 20px; text-align: center; }
.kk-intro-meta { font-size: 12px; color: var(--text-2); margin: 0 0 14px; }
@media (max-width: 420px) {
  .grid-2-mob { grid-template-columns: 1fr !important; }
  .kk-q-text { font-size: 19px; }
}

/* ── Quick info strip (panchang summary row) ──────────────── */
.quick-strip {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.quick-strip .glyph {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  display: grid; place-items: center;
  font-size: 26px; color: var(--accent-text);
  overflow: hidden;
  flex: 0 0 48px;
}
.quick-strip .glyph.moon-glyph {
  background: transparent;
}
.quick-strip .quick-moon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}
.quick-strip .glyph .tithi-moon-svg {
  display: grid; place-items: center;
  width: 100%; height: 100%;
}
.tithi-moon-svg svg { display: block; }
.quick-strip .stat { flex: 1; min-width: 0; }
.quick-strip .stat .lab {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: var(--text-3); text-transform: uppercase;
}
.quick-strip .stat .val {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 3px;
}
.quick-strip .stat .sub {
  font-size: 11px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Status pill (current window + Rahu Kaal) ──────────────── */
.status-pill {
  margin-top: 8px;
  display: flex; align-items: center;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid;
}
.status-pill .half { flex: 1; min-width: 0; }
.status-pill .half .lab {
  font-size: 10px; font-weight: 700; letter-spacing: 0.9px; opacity: 0.75;
  text-transform: uppercase;
}
.status-pill .half .val {
  font-size: 14px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.status-pill .div { width: 1px; height: 28px; margin: 0 12px; opacity: 0.35; }
.status-pill.good { border-color: rgba(107,215,138,0.5); background: linear-gradient(90deg, rgba(107,215,138,0.22), rgba(107,215,138,0.10)); color: var(--band-excellent); }
.status-pill.good .div { background: var(--band-excellent); }
.status-pill.warn { border-color: rgba(231,192,97,0.5); background: linear-gradient(90deg, rgba(231,192,97,0.22), rgba(231,192,97,0.10)); color: var(--band-good); }
.status-pill.warn .div { background: var(--band-good); }
.status-pill.bad  { border-color: rgba(228,88,88,0.5); background: linear-gradient(90deg, rgba(228,88,88,0.22), rgba(228,88,88,0.10)); color: var(--band-weak); }
.status-pill.bad .div { background: var(--band-weak); }
.status-pill.neutral { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); color: var(--accent-text); }
.status-pill.neutral .div { background: var(--accent); }

/* ── Feature grid (2 × 4 circular tiles) ──────────────────── */
.feature-grid {
  margin-top: 18px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.feature-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 4px;
  background: transparent; border: 0;
  cursor: pointer;
}
/* The plate behind each 3D icon. `--tint` is the tool's hue (set inline);
   `--tint-a`/`--tint-b`/`--tint-line` are the per-theme strengths, so the same
   eight hues stay rich on dark and legible on light. */
.feature-tile .disc {
  --tint-a: 42%;
  --tint-b: 16%;
  --tint-line: 50%;
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.2px solid color-mix(in srgb, var(--tint) var(--tint-line), transparent);
  background: radial-gradient(circle at 34% 30%,
    color-mix(in srgb, var(--tint) var(--tint-a), transparent),
    color-mix(in srgb, var(--tint) var(--tint-b), transparent));
  transition: transform 0.12s ease;
}
/* Light theme: a pale wash under a saturated 3D body reads as washed out, so
   deepen the plate and firm up its edge. */
[data-theme="light"] .feature-tile .disc {
  --tint-a: 26%;
  --tint-b: 12%;
  --tint-line: 34%;
  box-shadow: 0 1px 3px rgba(16, 16, 22, .08);
}
@supports not (color: color-mix(in srgb, red 10%, blue)) {
  .feature-tile .disc { background: var(--bg-3); border-color: var(--line-2); }
}
/* Four across still fits a 320px screen; shrink the plate rather than clip. */
@media (max-width: 359px) {
  .feature-tile .disc { width: 58px; height: 58px; }
  .feature-tile .ic { width: 34px; height: 34px; }
}
.feature-tile:active .disc { transform: scale(0.94); }
/* Modelled icons carry internal detail (dial wells, orbital rings, clock
   hands) that vanished at the old 23px flat-glyph size. */
.feature-tile .ic {
  width: 40px;
  height: 40px;
}
.feature-tile .lab {
  font-size: 12px; font-weight: 600; color: var(--text);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ── 3D feature icons ───────────────────────────────────────────────────────
   The icons are volumetric SVG (extruded body + gloss + contact shadow); this
   block supplies the motion. Everything animated is a transform or an opacity
   so eight looping tiles stay on the compositor. Bodies live inside a
   perspective context, so rotateY/rotateX read as real rotation rather than a
   squash. One 6s cycle across the grid keeps the tiles in sympathy. */
.ui-icon-3d {
  overflow: visible;
  perspective: 90px;
  transform-style: preserve-3d;
}
/* Every animated group spins about the icon's centre, not its bounding box. */
.ui-icon-3d .i3-swing,
.ui-icon-3d .i3-tilt,
.ui-icon-3d .i3-rock,
.ui-icon-3d .i3-beat,
.ui-icon-3d .i3-orbit-scene {
  transform-origin: 12px 12px;
  transform-box: fill-box;
}

/* Slow turn about the vertical axis — the default "solid object" motion. */
.ui-icon-3d .i3-swing { animation: i3Swing 6s ease-in-out infinite; }
@keyframes i3Swing {
  0%, 100% { transform: rotateY(-26deg) rotateX(4deg); }
  50%      { transform: rotateY(26deg) rotateX(-3deg); }
}

/* Compass puck: tips toward the viewer as it turns. */
.ui-icon-3d .i3-tilt { animation: i3Tilt 6s ease-in-out infinite; }
@keyframes i3Tilt {
  0%, 100% { transform: rotateX(16deg) rotateY(-14deg); }
  50%      { transform: rotateX(6deg) rotateY(14deg); }
}
/* The needle turns in the plane of the dial, easing through the cardinals. */
.ui-icon-3d .i3-needle {
  transform-origin: 12px 11.6px;
  transform-box: view-box;
  animation: i3Needle 6s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes i3Needle {
  0%, 12%  { transform: rotate(0deg); }
  38%, 50% { transform: rotate(140deg); }
  76%, 88% { transform: rotate(255deg); }
  100%     { transform: rotate(360deg); }
}

/* Plates rock about their horizontal axis so the extrusion shows. */
.ui-icon-3d .i3-rock { animation: i3Rock 6s ease-in-out infinite; }
@keyframes i3Rock {
  0%, 100% { transform: rotateX(20deg) rotateY(-12deg); }
  50%      { transform: rotateX(6deg) rotateY(12deg); }
}

/* Orbit scene: the sphere holds still, the rings sweep around it. */
.ui-icon-3d .i3-orbit-scene { animation: i3OrbitScene 6s ease-in-out infinite; }
@keyframes i3OrbitScene {
  0%, 100% { transform: rotateX(12deg) rotateY(-10deg); }
  50%      { transform: rotateX(-2deg) rotateY(10deg); }
}
.ui-icon-3d .i3-ring-a,
.ui-icon-3d .i3-ring-b {
  transform-origin: 12px 12px;
  transform-box: view-box;
}
.ui-icon-3d .i3-ring-a { animation: i3Spin 7s linear infinite; }
.ui-icon-3d .i3-ring-b { animation: i3Spin 11s linear infinite reverse; }
@keyframes i3Spin { to { transform: rotate(360deg); } }

/* Dasha hands: mahadasha slow, antardasha fast. */
.ui-icon-3d .i3-hand-slow,
.ui-icon-3d .i3-hand-fast {
  transform-origin: 12px 11.9px;
  transform-box: view-box;
}
.ui-icon-3d .i3-hand-fast { animation: i3Spin 6s linear infinite; }
.ui-icon-3d .i3-hand-slow { animation: i3Spin 26s linear infinite; }

/* Heart: a double beat with depth, then rest. */
.ui-icon-3d .i3-beat { animation: i3Beat 3s ease-in-out infinite; }
@keyframes i3Beat {
  0%, 62%, 100% { transform: scale(1) rotateY(-8deg); }
  10%           { transform: scale(1.13) rotateY(0deg); }
  22%           { transform: scale(1) rotateY(-4deg); }
  32%           { transform: scale(1.08) rotateY(2deg); }
  46%           { transform: scale(1) rotateY(-8deg); }
}

/* The omen on the Predict block. */
.ui-icon-3d .i3-twinkle {
  transform-origin: 12px 14.8px;
  transform-box: view-box;
  animation: i3Twinkle 6s ease-in-out infinite;
}
@keyframes i3Twinkle {
  0%, 58%, 100% { opacity: .4; transform: scale(.68) rotate(0deg); }
  74%           { opacity: 1;  transform: scale(1.18) rotate(38deg); }
  88%           { opacity: .65; transform: scale(.92) rotate(52deg); }
}

/* The gloss drifts across the body, which is what sells a hard surface. */
.ui-icon-3d .i3-gloss { animation: i3Gloss 6s ease-in-out infinite; }
@keyframes i3Gloss {
  0%, 100% { opacity: .85; }
  50%      { opacity: .35; }
}

/* Contact shadow tightens as the body turns away. */
.ui-icon-3d .i3-shadow {
  transform-origin: 12px 21.4px;
  transform-box: view-box;
  animation: i3Shadow 6s ease-in-out infinite;
}
@keyframes i3Shadow {
  0%, 100% { transform: scaleX(.86); opacity: .85; }
  50%      { transform: scaleX(1); opacity: 1; }
}

/* Motion is decoration — the modelled glyph alone still identifies the tool,
   so reduced-motion keeps the 3D look and drops every animation. */
@media (prefers-reduced-motion: reduce) {
  .ui-icon-3d * { animation: none !important; }
  .ui-icon-3d .i3-swing  { transform: rotateY(-16deg) rotateX(3deg); }
  .ui-icon-3d .i3-tilt   { transform: rotateX(12deg) rotateY(-8deg); }
  .ui-icon-3d .i3-rock   { transform: rotateX(14deg) rotateY(-8deg); }
  .ui-icon-3d .i3-orbit-scene { transform: rotateX(8deg) rotateY(-6deg); }
  .ui-icon-3d .i3-gloss  { opacity: .6; }
}

/* ── Section title ────────────────────────────────────────── */
.sec-title {
  display: flex; align-items: center; justify-content: space-between;
  margin: 22px 0 10px;
}
.sec-title h3 {
  margin: 0;
  font-size: 17px; font-weight: 700; color: var(--text);
  letter-spacing: -0.2px;
}
.sec-title .act {
  color: var(--accent-text); font-size: 12px; font-weight: 600;
  background: transparent; padding: 8px;
  min-width: 44px; min-height: 44px;
}

/* ── Metric bar (replaces raw 0.7 / +1 displays) ──────────── */
.metric-bar {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-weight: 700; font-size: 13px; line-height: 1;
  border: 1px solid;
}
.metric-bar .pct { font-weight: 800; letter-spacing: -0.3px; }
.metric-bar .band { font-weight: 600; font-size: 11px; opacity: 0.85; }
.metric-bar.excellent { color: var(--band-excellent); border-color: rgba(107,215,138,0.5); background: rgba(107,215,138,0.15); }
.metric-bar.strong    { color: var(--band-strong);    border-color: rgba(167,227,122,0.5); background: rgba(167,227,122,0.15); }
.metric-bar.good      { color: var(--band-good);      border-color: rgba(231,192,97,0.5);  background: rgba(231,192,97,0.15); }
.metric-bar.fair      { color: var(--band-fair);      border-color: rgba(229,160,89,0.5);  background: rgba(229,160,89,0.15); }
.metric-bar.weak      { color: var(--band-weak);      border-color: rgba(228,88,88,0.5);   background: rgba(228,88,88,0.15); }
.metric-bar.compact { padding: 3px 8px; font-size: 11px; }

/* ── Forecast rail (horizontal swipe cards) ───────────────── */
.forecast-rail {
  display: flex; gap: 10px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
  margin: 0 -16px;
  padding-left: 16px; padding-right: 16px;
}
.forecast-rail::-webkit-scrollbar { display: none; }
.forecast-card {
  flex: 0 0 78%;
  scroll-snap-align: start;
  padding: 14px;
  background: var(--bg-1);
  border: 1px solid;
  border-radius: var(--r-lg);
}
.forecast-card .head {
  display: flex; align-items: center; gap: 8px;
}
.forecast-card .head .bar { width: 5px; height: 18px; border-radius: 2px; }
.forecast-card .head .title { font-size: 16px; font-weight: 700; flex: 1; }
.forecast-card .head .pct { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.forecast-card .head .band { font-size: 11px; font-weight: 600; opacity: 0.85; margin-left: 4px; }
.forecast-card .progress {
  margin: 10px 0 12px;
  height: 4px; border-radius: 4px;
  background: rgba(255,255,255,0.05); overflow: hidden;
}
.forecast-card .progress > i { display: block; height: 100%; border-radius: 4px; }
.forecast-card .body {
  font-size: 13.5px; color: var(--text-2); line-height: 1.45;
}
/* Snap-carousel dots — a scroll affordance so the peeking next card reads as
   "swipe for more" rather than a card clipped mid-word (B11). */
.rail-dots { display: flex; gap: 6px; justify-content: center; margin: 8px 0 2px; }
.rail-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line); transition: background .2s, transform .2s;
}
.rail-dot.on { background: var(--accent); transform: scale(1.3); }

/* ── Coach strip (collapsed daily coach) ─────────────────── */
.coach-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid;
  border-radius: var(--r-lg);
  cursor: pointer;
}
.coach-strip .ring {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
  flex-shrink: 0;
}
.coach-strip .body { flex: 1; min-width: 0; }
.coach-strip .body .meta {
  font-size: 10px; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase;
}
.coach-strip .body .head {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-top: 2px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.coach-strip .chev { color: var(--text-3); font-size: 20px; }

/* ── Personalized "today" card ─────────────────────────────── */
.today-personal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(16px, 2.5vw, 24px);
}
.today-personal .tp-title {
  margin: 0;
  color: var(--text);
  font-size: var(--type-section);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.today-personal .tp-head { display: flex; align-items: center; gap: 14px; }
.today-personal .tp-ring {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 19px; font-weight: 800;
  border: 2px solid; flex-shrink: 0;
}
.today-personal .tp-meta { min-width: 0; }
.today-personal .tp-mood {
  font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}
.today-personal .tp-headline {
  font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.3; margin-top: 2px;
}
.today-personal .tp-why {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent-text);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--accent-soft);
  color: var(--text);
  font-size: var(--type-body-sm);
  font-weight: 650;
  line-height: 1.55;
}
.today-personal .tp-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px;
}
.today-personal .tp-col {
  min-width: 0;
  padding: 13px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
}
.today-personal .tp-col.good { border-top: 3px solid var(--ok); }
.today-personal .tp-col.bad { border-top: 3px solid var(--red); }
.today-personal .tp-col-h {
  display: flex;
  align-items: center;
  gap: 7px;
}
.today-personal .tp-col-h {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.today-personal .tp-col-h.good { color: var(--ok); }
.today-personal .tp-col-h.bad  { color: var(--red); }
.today-personal .tp-col-h::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: '';
  flex: 0 0 auto;
}
.today-personal .tp-item {
  padding: 3px 0;
  color: var(--text);
  font-size: var(--type-body-sm);
  font-weight: 650;
  line-height: 1.5;
}
.today-personal .tp-remedy {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--accent-text) 35%, transparent);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--text);
  font-size: var(--type-body-sm);
  font-weight: 650;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .today-personal .tp-cols { grid-template-columns: 1fr; }
}

/* ── Lucky row ─────────────────────────────────────────────── */
.lucky-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 4px;
}
.lucky-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px;
  background: var(--bg-1);
  border: 1px solid;
  border-radius: var(--r-md);
}
.lucky-tile .ic { font-size: 18px; }
.lucky-tile .lab {
  font-size: 9px; font-weight: 700; letter-spacing: 0.7px;
  color: var(--text-3); text-transform: uppercase;
}
.lucky-tile .val {
  font-size: 12px; font-weight: 700; color: var(--text);
  text-align: center;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Mini info card (compact summary) ─────────────────────── */
.mini-card {
  padding: 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.mini-card .row1 {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mini-card .title {
  font-size: 14px; font-weight: 600; color: var(--text);
}
.mini-card .body {
  margin-top: 8px; font-size: 13.5px; color: var(--text-2); line-height: 1.45;
}
.mini-card .acc-line {
  margin-top: 6px;
  font-size: 12px; color: var(--accent-text); font-weight: 600;
}

/* Hide old/legacy patterns that we replace */
.legacy-hidden { display: none !important; }

/* ===========================================================
   2026-05-24 audit fixes
   =========================================================== */

/* Clickable home strips — reset native <button> style so the cards look
   identical to the previous <div> version. */
button.quick-strip, button.status-pill {
  text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%;
}
button.quick-strip:active, button.status-pill:active { transform: scale(0.99); }

/* Scroll affordance for horizontally-scrolling rails. We keep the hidden
   scrollbar (which was deliberate on mobile) but add a fade on the right
   so users see there's more content. Audit Issue #2 / #5 / #6. */
.subnav, .num-toc, .tabs, .forecast-rail {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
/* Once the user reaches the right edge, drop the fade. */
.subnav.at-end, .num-toc.at-end, .tabs.at-end, .forecast-rail.at-end {
  -webkit-mask-image: none; mask-image: none;
}
/* Show a thin scrollbar on desktop where it doesn't intrude. */
@media (hover: hover) and (pointer: fine) {
  .subnav, .num-toc, .tabs, .forecast-rail { scrollbar-width: thin; }
  .subnav::-webkit-scrollbar, .num-toc::-webkit-scrollbar,
  .tabs::-webkit-scrollbar, .forecast-rail::-webkit-scrollbar {
    display: block; height: 4px;
  }
  .subnav::-webkit-scrollbar-thumb, .num-toc::-webkit-scrollbar-thumb,
  .tabs::-webkit-scrollbar-thumb, .forecast-rail::-webkit-scrollbar-thumb {
    background: var(--line-2); border-radius: 4px;
  }
}

/* ── Karam Kundli touch targets ───────────────────────────── */
/* Audit Issue #4 — sliders were ~16px, pills ~25px. Push to >=40px. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 40px;
  background: transparent; padding: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; background: var(--bg-3); border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg-0);
  cursor: pointer; margin-top: -8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
input[type="range"]::-moz-range-track {
  height: 6px; background: var(--bg-3); border-radius: 999px;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg-0); cursor: pointer;
}
/* Karma struggle/aspiration pills */
.karma-pill, .pill.tap {
  min-height: 44px; padding: 9px 14px; font-size: 13px;
}

/* ── Date wrapping fix for alerts ─────────────────────────── */
.win-row .r { white-space: nowrap; }
@media (max-width: 560px) {
  .win-row .r { white-space: normal; overflow-wrap: anywhere; }
}

/* ── Visible scroll on PREDICT category tabs (issue #5) ───── */
.cat-tabs { gap: 8px; padding-bottom: 6px; }
.cat-tabs .tab { padding: 10px 14px; font-size: 13px; min-height: 40px; }

/* ── Floating AI-expert chat widget ─────────────────────────── */
#aichat-root {
  position: fixed; right: 16px;
  bottom: calc(72px + env(safe-area-inset-bottom));
  /* Closed: above the bottom nav (60), below drawers/modals (250+). */
  z-index: 70;
}
#aichat-root.open { z-index: 9000; }
/* The widget root must never eat clicks on the page behind it — only its actual
   interactive surfaces (fab, panel, scrim) accept pointer events (B1). */
#aichat-root { pointer-events: none; }
.aic-fab, .aic-panel, .aic-scrim { pointer-events: auto; }
/* Dimmed backdrop while the panel is open: makes the overlap with the page
   explicit and gives one-tap (click-outside) dismiss. Sits just below the
   panel (9001) and above all page content. */
.aic-scrim { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.45); }
.aic-fab {
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  /* Lit from the top-left like the 3D icons, with a rim highlight and a
     grounded drop shadow so the button reads as a raised object. */
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.45), rgba(255,255,255,0) 58%),
    /* Was gold -> lime. The lime was the old brand accent and survived the
       palette swap because it is a distinct hex from the one used everywhere
       else, so it read as a green blob against the gold UI. Now a gold ramp. */
    linear-gradient(150deg, var(--accent-2), var(--accent) 42%, var(--gold) 100%);
  color: #14140d;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 10px 22px rgba(0,0,0,.38),
    0 2px 4px rgba(0,0,0,.28),
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -2px 4px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease;
  perspective: 110px;
}
/* Light theme sits on a pale page — the shadow has to shrink or it reads as
   a smudge rather than lift. */
[data-theme="light"] .aic-fab {
  box-shadow:
    0 8px 18px rgba(28,24,10,.24),
    0 2px 4px rgba(28,24,10,.16),
    inset 0 1.5px 0 rgba(255,255,255,.65),
    inset 0 -2px 4px rgba(0,0,0,.16);
}
.aic-fab .aic-fab-icon { overflow: visible; }
.aic-fab-body {
  transform-origin: 12px 12px; transform-box: fill-box;
  animation: aicFabSwing 6s ease-in-out infinite;
}
@keyframes aicFabSwing {
  0%, 100% { transform: rotateY(-16deg) rotateX(4deg); }
  50%      { transform: rotateY(16deg) rotateX(-3deg); }
}
.aic-fab-gloss { animation: aicFabGloss 6s ease-in-out infinite; }
@keyframes aicFabGloss {
  0%, 100% { opacity: .9; }
  50%      { opacity: .4; }
}
/* The three dots type, which is what makes the launcher read as "chat". */
.aic-fab .aic-dot { animation: aicFabDot 1.6s ease-in-out infinite; }
.aic-fab .aic-dot.d2 { animation-delay: .18s; }
.aic-fab .aic-dot.d3 { animation-delay: .36s; }
@keyframes aicFabDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .9; }
  30%           { transform: translateY(-1.1px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aic-fab-body, .aic-fab-gloss, .aic-fab .aic-dot { animation: none !important; }
  .aic-fab-body { transform: rotateY(-10deg) rotateX(3deg); }
}
.aic-fab-mark {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}
.aic-fab:hover { transform: scale(1.06); }
/* The assistant has a dedicated route in mobile navigation. A fixed launcher
   over ordinary page controls made the app feel cluttered and blocked form
   fields at common scroll positions, so it is desktop-only when closed. */
@media (max-width: 767px) {
  #aichat-root:not(.open) .aic-fab { display: none; }
}
/* The install prompt occupies the same bottom-right action zone. Suppress only
   the closed launcher while that prompt is visible; an open chat remains fully
   usable until the user closes it. */
body.pwa-install-visible #aichat-root:not(.open) .aic-fab { display: none; }
body.pwa-install-visible #aichat-root.open { z-index: 9200; }
/* The AI chat panel is a dark "glass" component in BOTH themes. Pin light
   text/muted tokens to its subtree so `var(--text)` inside it never flips to
   the light-theme dark ink (which rendered AI replies as dark-on-dark). */
.aic-panel, .aic-overlay, .aic-persona-list { --text: #f4f4f6; --muted: #b8b8c0; }

.aic-panel {
  /* Sit above the fixed bottom-nav (P-4): the panel's z-index (9001) is far
     above the nav's (60), so a 16px bottom offset let the panel cover the right
     nav tabs. Clear the nav by matching the FAB's 72px offset and trim the
     height so the top still stays below the sticky topbar. */
  position: fixed; right: 14px; bottom: calc(72px + env(safe-area-inset-bottom));
  width: min(380px, calc(100vw - 28px));
  height: min(560px, calc(100vh - 150px));
  height: min(560px, calc(100dvh - 150px));
  background: #14141b; border: 1px solid rgba(255,255,255,0.10); border-radius: 18px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55); z-index: 9001;
  animation: aicIn .18s ease;
}
@keyframes aicIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.aic-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.aic-persona-btn {
  background: rgba(205,164,52,0.14); border: 1px solid rgba(205,164,52,0.30);
  color: var(--text, #f4f4f6); border-radius: 999px; padding: 6px 12px;
  font-size: 13px; font-weight: 600; cursor: pointer; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aic-head-actions { display: flex; gap: 4px; }
.aic-icon {
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  min-width: 44px; min-height: 44px;
  background: rgba(255,255,255,0.06); color: var(--text, #f4f4f6); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.aic-icon:hover { background: rgba(255,255,255,0.12); }
.aic-body { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.aic-note {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px; font-size: 13px; line-height: 1.5; color: var(--muted, #b8b8c0);
}
.aic-msg { display: flex; }
.aic-msg.me { justify-content: flex-end; }
/* Column so a "Saved to memory" chip row can sit under the bubble, left-aligned. */
.aic-msg.ai { flex-direction: column; align-items: flex-start; }
.aic-bubble {
  max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word;
}
.aic-msg.me .aic-bubble { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent-ink); border-bottom-right-radius: 5px; }
.aic-msg.ai .aic-bubble { background: rgba(255,255,255,0.07); color: var(--text, #f4f4f6); border-bottom-left-radius: 5px; }
.aic-typing { opacity: .6; letter-spacing: 2px; }
/* Rendered Markdown inside an assistant bubble. */
.aic-bubble.aic-md { white-space: normal; }

/* An outage row inside the chat thread. Amber and bordered so it reads as a
   status, never as a reading — the user's question stays above it, and the
   retry lives on the row itself. Replaces the old cost-bar banner, which
   vanished and left the turn with no trace the user could see. */
.aic-msg .aic-bubble.aic-outage {
  background: color-mix(in srgb, var(--warn, #e5a059) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn, #e5a059) 38%, transparent);
  color: var(--text, #f4f4f6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  white-space: normal;
}
.aic-outage-text { font-size: 0.9rem; line-height: 1.45; color: var(--warn, #e5a059); }
.aic-outage-retry {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--warn, #e5a059);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--warn, #e5a059) 50%, transparent);
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
}
.aic-outage-retry:hover { background: color-mix(in srgb, var(--warn, #e5a059) 18%, transparent); }
.aic-outage-retry:focus-visible { outline: 2px solid var(--warn, #e5a059); outline-offset: 2px; }

/* 👍 / 👎 under an assistant reply. Quiet until hovered or chosen — the reply
   is the content, this is an afterthought the user may ignore. */
.aic-feedback { display: flex; gap: 2px; margin: 2px 0 0 2px; }
.aic-thumb {
  background: none;
  border: 0;
  padding: 2px 5px;
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.38;
  border-radius: 5px;
  transition: opacity .15s ease, background-color .15s ease;
}
.aic-thumb:hover { opacity: 0.85; background: rgba(255,255,255,0.07); }
.aic-thumb.on { opacity: 1; background: rgba(255,255,255,0.12); }
.aic-thumb:focus-visible { outline: 2px solid var(--accent, #c9a227); outline-offset: 1px; opacity: 1; }
.aic-md p { margin: 0 0 8px; }
.aic-md p:last-child { margin-bottom: 0; }
.aic-md ul, .aic-md ol { margin: 4px 0 8px; padding-left: 18px; }
.aic-md li { margin: 2px 0; }
.aic-md h4 { font-size: 13.5px; font-weight: 700; margin: 9px 0 4px; }
.aic-md h4:first-child { margin-top: 0; }
.aic-md strong { font-weight: 700; }
.aic-md em { font-style: italic; }
.aic-md code { background: rgba(255,255,255,0.12); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }
.aic-md a { color: var(--accent-text); text-decoration: underline; }
.aic-starters-label { font-size: 11px; color: var(--muted, #b8b8c0); margin: 12px 0 2px; text-transform: uppercase; letter-spacing: .5px; }
.aic-starters { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 2px; }
.aic-starter {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--text, #f4f4f6); border-radius: 999px; padding: 6px 12px;
  font-size: 12.5px; cursor: pointer; transition: background .15s ease;
}
.aic-starter:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* "🧠 Saved to memory" chips under an assistant reply, with one-tap undo. */
.aic-saved { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 2px 0; }
.aic-saved-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted, #b8b8c0);
  background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 999px; padding: 2px 6px 2px 8px;
}
.aic-saved-undo {
  border: none; background: transparent; color: var(--muted, #b8b8c0);
  cursor: pointer; font-size: 11px; line-height: 1; padding: 1px 2px; border-radius: 50%;
}
.aic-saved-undo:hover { color: var(--text, #f4f4f6); background: rgba(255,255,255,0.12); }

/* Live reasoning flow above a streaming reply: one row per step, newest with a
   pulsing dot, done rows ticked; folds into a <details> summary on completion. */
.aic-steps { display: flex; flex-direction: column; gap: 3px; margin: 2px 2px 6px; max-width: 82%; }
.aic-step {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted, #b8b8c0); line-height: 1.5;
}
.aic-step-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); animation: aicPulse 1.1s ease-in-out infinite;
}
.aic-step.done .aic-step-dot { animation: none; background: transparent; width: auto; height: auto; }
.aic-step.done .aic-step-dot::before { content: '✓'; color: color-mix(in srgb, var(--accent) 80%, transparent); font-size: 11px; }
.aic-step.done { opacity: 0.72; }
@keyframes aicPulse { 0%,100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }
.aic-steps-fold summary {
  cursor: pointer; list-style: none; font-size: 11px; color: var(--muted, #b8b8c0);
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px; padding: 2px 9px; user-select: none;
}
.aic-steps-fold summary::-webkit-details-marker { display: none; }
.aic-steps-fold[open] summary { margin-bottom: 4px; }
.aic-followups { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 2px; }
.aic-composer {
  display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02);
}
.aic-input {
  flex: 1; resize: none; max-height: 120px; min-height: 40px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.25);
  color: var(--text, #f4f4f6); padding: 10px 12px; font-size: 14px; font-family: inherit;
}
.aic-input:focus { outline: none; border-color: rgba(205,164,52,0.55); }
.aic-send {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent-ink); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.aic-send:disabled { opacity: .5; cursor: default; }
.aic-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center; padding: 14px; z-index: 5;
}
.aic-persona-list {
  width: 100%; background: #1b1b24; border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px; padding: 12px; max-height: 100%; overflow-y: auto;
}
.aic-persona-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.aic-persona-row {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: rgba(255,255,255,0.03); border: 1px solid transparent; color: var(--text, #f4f4f6);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer;
}
.aic-persona-row:hover { background: rgba(255,255,255,0.07); }
.aic-persona-row.on { border-color: rgba(205,164,52,0.5); background: rgba(205,164,52,0.12); }
.aic-persona-ico { font-size: 22px; }
.aic-persona-name { font-weight: 600; font-size: 14px; }
.aic-persona-blurb { font-size: 12px; color: var(--muted, #b8b8c0); }

/* Expert persona rows on the AI Experts page */
.expert-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.06); }
button.expert-row {
  appearance: none; width: 100%; min-height: var(--touch-target);
  text-align: left; color: inherit;
}
.expert-row:last-child { border-bottom: none; }
.expert-row:hover { background: rgba(255,255,255,0.03); }
.expert-row-ico {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(205,164,52,0.12); border: 1px solid rgba(205,164,52,0.25);
}

/* AI setup guide */
.ai-guide .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 5px; }
.ai-guide summary { list-style: none; }
.ai-guide summary::-webkit-details-marker { display: none; }

/* ── Growth / Sadhana dashboard ─────────────────────────────────────────────
   Growth used to be three unrelated tools side by side. These styles carry the
   dashboard: progress ring, today's checklist, practice cards and badges. */
.sadhana-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 16px; border-radius: var(--r-lg);
  background: var(--bg-2); border: 1px solid var(--line);
}
/* Level ring — conic-gradient fill driven by --pct. */
.sh-ring {
  --pct: 0%;
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--accent) var(--pct), var(--bg-4) 0);
}
.sh-ring-in {
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--bg-2); display: grid; place-items: center; text-align: center;
}
.sh-lvl-ic { font-size: 20px; line-height: 1; }
.sh-lvl-name { font-size: 11px; font-weight: 800; color: var(--text); margin-top: 2px; }
.sh-meta { flex: 1; min-width: 0; }
.sh-xp { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text); }
.sh-next { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.sh-stats { display: flex; gap: 14px; margin-top: 8px; font-size: 12.5px; color: var(--text-2); }
.sh-stat b { color: var(--text); }

/* Today's checklist. */
.sadhana-todo {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--line); cursor: pointer;
}
.sadhana-todo.done { opacity: .62; cursor: default; }
.sadhana-todo .st-check {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line-2); display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #16210a;
}
.sadhana-todo.done .st-check { background: var(--accent); border-color: var(--accent-text); }
.sadhana-todo .st-ic { font-size: 16px; }
.sadhana-todo .st-label { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); }
.sadhana-todo .st-done { font-size: 11px; font-weight: 700; color: var(--accent-text); }
.sadhana-todo .st-chev { color: var(--text-3); }

/* Practice cards. */
.sadhana-practices { display: grid; gap: 8px; }
/* Grid items default to min-width:auto, so a long subtitle widened the card
   past the viewport instead of ellipsising. */
.sadhana-practices > * { min-width: 0; }
.sadhana-practice {
  --tint: var(--accent);
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px; border-radius: var(--r-md); cursor: pointer;
  text-align: left; font: inherit; color: inherit;
  background: var(--bg-2);
  border: 1px solid var(--line); border-left: 3px solid var(--tint);
}
.sadhana-practice .sp-ic { font-size: 22px; }
.sadhana-practice .sp-body { flex: 1; min-width: 0; display: block; }
.sadhana-practice .sp-title { display: block; font-weight: 700; font-size: 14px; color: var(--text); }
.sadhana-practice .sp-sub {
  display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sadhana-practice .sp-chev { color: var(--text-3); font-size: 18px; }

.sadhana-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.sadhana-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--accent-soft); color: var(--text); border: 1px solid var(--line-2);
}

/* ── Mantra ─────────────────────────────────────────────────────────────── */
.mantra-card {
  padding: 14px; border-radius: var(--r-md); margin-top: 8px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.mantra-card.suggested { border-color: var(--accent-text); background: var(--accent-soft); }
.mc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mc-sanskrit { font-size: 16px; line-height: 1.55; color: var(--text); font-weight: 600; }
.mc-roman { font-size: 12px; color: var(--text-2); margin-top: 3px; font-style: italic; }
.mc-planet {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; background: var(--bg-3); color: var(--text-2);
}
.mc-meaning { font-size: 13px; line-height: 1.55; color: var(--text-2); margin-top: 8px; }
.mc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.mc-tag { font-size: 11px; color: var(--text-3); }
.mc-audio { width: 100%; margin-top: 10px; height: 34px; }

/* Japa counter — one big bead you tap 108 times. */
.japa-wrap { display: grid; place-items: center; gap: 8px; margin-top: 18px; }
.japa-bead {
  --pct: 0%;
  width: 190px; height: 190px; border-radius: 50%; cursor: pointer; border: 0;
  display: grid; place-items: center; align-content: center;
  color: var(--text); font: inherit;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.16), transparent 60%),
    conic-gradient(var(--accent) var(--pct), var(--bg-3) 0);
  box-shadow: 0 10px 26px rgba(0,0,0,.34), inset 0 2px 0 rgba(255,255,255,.14);
  transition: transform .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.japa-bead:active { transform: scale(.96); }
.japa-bead .jb-count { font-family: var(--font-display); font-weight: 800; font-size: 46px; }
.japa-bead .jb-of { font-size: 13px; color: var(--text-2); }
.japa-malas { font-size: 13px; font-weight: 700; color: var(--accent-text); min-height: 1.2em; }
.japa-status { font-size: 12px; color: var(--text-2); }

/* Meditation timer. */
.med-mins { display: flex; justify-content: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.med-min {
  min-width: 46px; padding: 8px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700;
  background: var(--bg-3); color: var(--text-2); border: 1px solid var(--line);
}
.med-min.on { background: var(--accent-soft); color: var(--text); border-color: var(--accent-text); }
/* Ambience picker. Reuses .med-min so the two rows of pills read as one
   control family; empty until the HEAD probe confirms a track exists, and an
   empty flex row collapses to nothing rather than leaving a gap. */
.med-ambience { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.med-dial {
  margin: 18px auto 6px; width: 172px; height: 172px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--line-2); background: var(--bg-2);
}
.med-dial.running { border-color: var(--accent-text); animation: medBreathe 14s ease-in-out infinite; }
@keyframes medBreathe {
  0%, 100% { transform: scale(1); }
  28%      { transform: scale(1.06); }
  57%      { transform: scale(1.06); }
}
.med-time { font-family: var(--font-display); font-weight: 800; font-size: 36px; color: var(--text); }
.med-phase { text-align: center; font-size: 13px; color: var(--accent-text); min-height: 1.4em; font-weight: 600; }
.med-sound {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; font-size: 12.5px; color: var(--text-2);
}
@media (prefers-reduced-motion: reduce) {
  .med-dial.running { animation: none; }
}

/* ── Sadhana: today's focus ─────────────────────────────────────────────────
   The one thing to do today, why, and the action — this leads the screen so
   the work sits above the numbers. */
.focus-card {
  padding: 18px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--accent-soft), rgba(167,139,250,.10));
  border: 1px solid var(--line-2);
}
.focus-card .fc-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--accent-text);
}
.focus-card .fc-planet {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--text);
}
.focus-card .fc-glyph { color: var(--accent-text); font-size: 24px; }
.focus-card .fc-why { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.focus-card .fc-buys { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

/* Today's tasks — checkable, and the check is the whole point. */
.sadhana-barlabel { font-size: 12px; color: var(--text-2); margin: 0 0 6px; }
.sadhana-bar {
  height: 6px; border-radius: 999px; background: var(--bg-3);
  overflow: hidden; margin-bottom: 10px;
}
.sadhana-bar > span {
  display: block; height: 100%; width: 0;
  background: var(--accent); transition: width .3s ease;
}
.sadhana-task {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 12px 14px; border-radius: var(--r-md); cursor: pointer;
  text-align: left; font: inherit; color: inherit;
  background: var(--bg-2); border: 1px solid var(--line);
}
.sadhana-task:disabled { opacity: .6; cursor: default; }
.sadhana-task.done { opacity: .62; cursor: default; }
.sadhana-task .st-check {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  border: 1.5px solid var(--line-2); display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #16210a;
}
.sadhana-task.done .st-check { background: var(--accent); border-color: var(--accent-text); }
.sadhana-task .st-body { flex: 1; min-width: 0; display: block; }
.sadhana-task .st-title { display: block; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.sadhana-task .st-meta { display: block; font-size: 11px; color: var(--text-3); margin-top: 3px; }

/* Is it working — three numbers, a 14-day strip, then per-graha bars. */
.sadhana-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ss-stat {
  padding: 14px 10px; border-radius: var(--r-md); text-align: center;
  background: var(--bg-2); border: 1px solid var(--line);
}
.ss-val { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--text); }
.ss-lab { font-size: 11px; color: var(--text-2); margin-top: 2px; }

.sadhana-strip { display: flex; gap: 4px; margin-top: 12px; }
.ss-day { flex: 1; height: 26px; border-radius: 5px; background: var(--bg-3); }
.ss-day.full { background: var(--accent); }
.ss-day.part { background: color-mix(in srgb, var(--accent) 42%, transparent); }
.ss-day.miss { background: var(--red-soft); }
.ss-day.none { background: var(--bg-3); opacity: .5; }

.planet-progress {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--line);
}
.planet-progress.focus { border-color: var(--accent-text); }
.planet-progress .pp-glyph { color: var(--accent-text); width: 18px; text-align: center; }
.planet-progress .pp-name { flex: 0 0 82px; font-size: 13px; font-weight: 600; color: var(--text); }
.planet-progress .pp-bar {
  flex: 1; height: 6px; border-radius: 999px; background: var(--bg-3); overflow: hidden;
}
.planet-progress .pp-bar > span { display: block; height: 100%; background: var(--accent); }
.planet-progress .pp-pct { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-2); }

/* Focus reasons — one chip per signal that fired (natal weakness, dasha,
   transit), so a graha under several at once reads as several. */
.focus-card .fc-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.focus-card .fc-reason {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.07); color: var(--text-2);
  border: 1px solid var(--line-2);
}
.focus-card .fc-reason.antardasha,
.focus-card .fc-reason.mahadasha { color: var(--text); border-color: var(--accent-text); }
.focus-card .fc-reason.sadesati,
.focus-card .fc-reason.dhaiya { color: #f3c0be; border-color: rgba(217,83,79,.5); }
.focus-card .fc-act {
  margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--text);
  padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.18);
}

/* Secondary grahas also under pressure. */
.focus-alt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 13px; border-radius: var(--r-md); cursor: pointer;
  text-align: left; font: inherit; color: inherit;
  background: var(--bg-2); border: 1px solid var(--line);
}
.focus-alt .fa-glyph { color: var(--accent-text); width: 18px; text-align: center; }
.focus-alt .fa-body { flex: 1; min-width: 0; display: block; }
.focus-alt .fa-name { display: block; font-weight: 700; font-size: 13.5px; color: var(--text); }
.focus-alt .fa-why {
  display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.focus-alt .fa-cta { font-size: 16px; }

/* ── Growth is one page: the depth lives in collapsed sections ───────────── */
.sadhana-deep { display: grid; gap: 8px; }
.sadhana-deep > * { min-width: 0; }
.sadhana-section {
  --tint: var(--accent);
  border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line); border-left: 3px solid var(--tint);
}
.sadhana-section > .sd-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; cursor: pointer; list-style: none;
}
.sadhana-section > .sd-head::-webkit-details-marker { display: none; }
.sadhana-section .sd-ic { font-size: 22px; }
.sadhana-section .sd-copy { flex: 1; min-width: 0; display: block; }
.sadhana-section .sd-title { display: block; font-weight: 700; font-size: 14px; color: var(--text); }
.sadhana-section .sd-sub {
  display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sadhana-section .sd-chev {
  color: var(--text-3); font-size: 18px; transition: transform .18s ease;
}
.sadhana-section[open] .sd-chev { transform: rotate(180deg); }
.sadhana-section .sd-body { padding: 0 14px 14px; }
.japa-mantra { text-align: center; margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) {
  .sadhana-section .sd-chev { transition: none; }
}

/* ── Practice: everything you actually do, in one list ──────────────────────
   Scheduled remedies check off; mantra, meditation, remedies and gems open in
   place as practice rows. Nothing here is a navigation trip. */
.practice-list { display: grid; gap: 8px; }
.practice-list > * { min-width: 0; }
.practice-row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 12px 14px; border-radius: var(--r-md); cursor: pointer;
  text-align: left; font: inherit; color: inherit;
  background: var(--bg-2); border: 1px solid var(--line);
}
.practice-row:disabled { opacity: .6; cursor: default; }
.practice-row.done { opacity: .62; cursor: default; }
.practice-row .pr-check {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  border: 1.5px solid var(--line-2); display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #16210a;
}
.practice-row.done .pr-check { background: var(--accent); border-color: var(--accent-text); }
.pr-body { flex: 1; min-width: 0; display: block; }
.pr-title { display: block; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.pr-meta {
  display: block; font-size: 11px; color: var(--text-3); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.practice-empty {
  padding: 14px; border-radius: var(--r-md);
  background: var(--bg-2); border: 1px dashed var(--line-2); color: var(--text-2);
}

/* A practice tool — a row that opens its instrument in place. */
.practice-tool {
  --tint: var(--accent);
  border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line); border-left: 3px solid var(--tint);
}
.practice-tool > .pr-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer; list-style: none;
}
.practice-tool > .pr-head::-webkit-details-marker { display: none; }
.practice-tool .pt-ic { font-size: 20px; }
.practice-tool .pt-chev {
  color: var(--text-3); font-size: 18px; transition: transform .18s ease;
}
.practice-tool[open] .pt-chev { transform: rotate(180deg); }
.practice-tool[open] { border-color: var(--tint); }
.practice-tool .pt-body { padding: 0 14px 14px; }
@media (prefers-reduced-motion: reduce) {
  .practice-tool .pt-chev { transition: none; }
}

/* A remedy is an instruction, not a label — the procedure renders with it. */
.practice-row .pr-headline {
  display: block; margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: rgba(0,0,0,.22); color: var(--text);
  font-size: 13.5px; line-height: 1.5; font-weight: 600;
}
.practice-row .pr-steps {
  display: block; margin: 8px 0 0; padding-left: 18px;
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
}
.practice-row .pr-steps li { margin: 3px 0; }
.practice-row .pr-steps li::marker { color: var(--accent-text); font-weight: 700; }
/* Rows carry a procedure now, so they are tall — align the check to the top. */
.practice-row { align-items: flex-start; }

/* ── Panchang: date strip + fact grid ────────────────────────────────────── */
/* The old page opened with a redundant "Panchang" heading (the topbar already
   names the route) and a date input + Load button, which made checking
   tomorrow a three-tap job. A strip of days reads as a calendar and switches
   on a single tap. */
.pg-days {
  display: flex; gap: 6px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 2px 2px 8px; margin-bottom: 2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pg-days::-webkit-scrollbar { display: none; }
.pg-day {
  flex: 0 0 auto; width: 60px; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 4px 7px; cursor: pointer;
  border: 1px solid transparent; border-radius: 14px;
  background: transparent; color: inherit; font: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.pg-day .dow { font-size: 11px; color: var(--text-2); }
.pg-day .dnum { font-size: 19px; font-weight: 800; line-height: 1.1; }
.pg-day .dmon { font-size: 11px; color: var(--text-2); }
.pg-day:hover { background: var(--bg-2); }
.pg-day.on { background: var(--bg-2); border-color: var(--accent-text); }
.pg-day.on .dnum,
.pg-day.on .dow,
.pg-day.on .dmon { color: var(--accent-text); }
/* Two-up facts, each with its own glyph, instead of a run of label/value rows. */
.pg-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 360px) { .pg-facts { grid-template-columns: 1fr; } }
.pg-fact {
  display: flex; align-items: center; gap: 9px;
  padding: 10px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--bg-2);
  min-width: 0;
}
.pg-fact .pf-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 17px;
  background: var(--bg-1);
}
.pg-fact .pf-txt { min-width: 0; }
.pg-fact .pf-lab { font-size: 12px; font-weight: 700; }
.pg-fact .pf-val {
  font-size: 12px; color: var(--text-2);
  overflow-wrap: anywhere;
}

/* ── Choghadiya as a timeline ────────────────────────────────────────────── */
/* Was a three-column table (name / nature / range) plus a legend at the
   bottom, so reading "is Rog bad, and when?" meant looking in two places.
   Start times now run down a rail with the window's own reading beside them. */
.cg-timeline { display: flex; flex-direction: column; }
.cg-slot {
  display: grid; grid-template-columns: 58px 1fr; gap: 10px;
  align-items: start;
}
.cg-time {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-2); padding-top: 10px; text-align: right;
}
.cg-slot.end .cg-time { padding-top: 0; }
.cg-card {
  border-radius: 14px; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); background: var(--bg-2);
  border-left-width: 3px;
}
.cg-card.good { border-left-color: var(--ok, #3ecf8e); }
.cg-card.bad  { border-left-color: var(--bad, #e5484d); }
.cg-card.neut { border-left-color: var(--line); }
.cg-name { font-weight: 800; font-size: 14px; }
.cg-nat { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.cg-card.good .cg-nat { color: var(--ok, #3ecf8e); }
.cg-card.bad  .cg-nat { color: var(--bad, #e5484d); }
.cg-desc {
  margin: 5px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-2);
}

/* ── Onboarding header ───────────────────────────────────────────────────── */
/* The step counter used to trail under the bar as a small right-aligned line,
   which read as a stray fragment. Name the step instead, and let the bar fill
   with motion so progress is felt rather than inferred. */
.onb-head { margin-bottom: 14px; }
.onb-head-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 7px;
}
.onb-step-name { font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.onb-step-count { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.onb-progress .dot { transition: background .28s ease; }

/* ── Dream reading ───────────────────────────────────────────────────────── */
/* The verdict is carried by a left edge rather than a filled block, so a
   cautionary reading informs without alarming someone who has just woken up. */
.dream-reading {
  margin-top: 10px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg-2); border-left-width: 3px;
}
.dream-reading.good    { border-left-color: var(--ok, #3ecf8e); }
.dream-reading.caution { border-left-color: var(--warn, #e5a059); }
.dream-reading.neutral { border-left-color: var(--line); }
.dr-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 7px;
}
.dr-tone { font-size: 12px; font-weight: 800; }
.dream-reading.good .dr-tone    { color: var(--ok, #3ecf8e); }
.dream-reading.caution .dr-tone { color: var(--warn, #e5a059); }
.dr-src { font-size: 10px; color: var(--text-2); white-space: nowrap; }
.dr-syms { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.dr-sym {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-1); border: 1px solid var(--line);
}
.dr-sym.good    { border-color: color-mix(in srgb, var(--ok, #3ecf8e) 45%, var(--line)); }
.dr-sym.caution { border-color: color-mix(in srgb, var(--warn, #e5a059) 45%, var(--line)); }
.dr-sum  { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.dr-par  { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.dr-list { margin: 0 0 6px; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.dr-list li { margin: 3px 0; }
.dr-dasha {
  margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.45; color: var(--text-2);
}

/* ── Report shelf ────────────────────────────────────────────────────────── */
/* Three reports, one card shape. Previously each was laid out ad-hoc: an empty
   "At a glance" card rendered with nothing in it, Open / Download / Regenerate
   each took their own line, and the lock pill squeezed "Comprehensive report"
   into a two-word column. */
.report-card {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-2); padding: 14px; margin-bottom: 10px;
}
.report-card.is-link { cursor: pointer; }
.report-card.is-link:hover { border-color: var(--accent-text); }
.report-card[role="link"]:focus-visible {
  outline: 3px solid var(--accent-2); outline-offset: 3px;
}
.report-card.is-locked { opacity: .82; }

/* The title and its badge share a wrapping row, so a long badge pushes the
   badge down rather than narrowing the title. */
.rc-head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 8px; min-width: 0;
}
.rc-icon { font-size: 17px; line-height: 1; flex: 0 0 auto; }
.rc-title {
  font-weight: 800; font-size: 15px; line-height: 1.25;
  flex: 1 1 auto; min-width: 0;
}
.rc-chev { color: var(--text-2); font-size: 20px; line-height: 1; flex: 0 0 auto; }
.rc-badge {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-2); white-space: nowrap;
}
.rc-badge.free   { color: var(--ok, #3ecf8e); border-color: color-mix(in srgb, var(--ok, #3ecf8e) 45%, var(--line)); }
.rc-badge.paid   { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.rc-badge.locked { text-transform: none; letter-spacing: 0; }

.rc-desc { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.rc-sum  { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.report-card .glance-rows { margin-top: 10px; }

/* The report catalogue is a comparison surface, not a muted data dump. Its
   previous light-theme combination put pale mint text on a pale green badge
   and medium brown copy on a darker beige row. Keep the hierarchy compact,
   but give every label and state enough contrast to scan without squinting. */
.report-catalogue > #report-catalogue-title {
  color: var(--text);
  font-size: var(--type-section) !important;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}
.report-catalogue > .mt-2 { margin-top: 0; }
.report-catalogue .card.tight {
  background: var(--surface-page);
  border-color: var(--line-2);
  padding: var(--space-4);
}
.report-catalogue .glance-rows { gap: var(--space-2); }
.report-catalogue .glance-row {
  align-items: center;
  min-height: 52px;
  padding: 11px 12px;
  background: var(--surface-card);
  border: 1px solid var(--line);
}
.report-catalogue .glance-row .glance-k {
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}
.report-catalogue .glance-row .glance-v {
  color: var(--text);
  line-height: 1.35;
}
.report-catalogue .glance-row .muted { color: var(--text-2); }

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .pill.good { background: var(--accent-soft); }
  .pill.bad { background: var(--red-soft); }
}

/* The one line the shelf owed the reader: where to start. */
.rc-lead { margin: 0 2px; font-size: 13px; line-height: 1.5; color: var(--text-2); }

/* The question a reader opens this report to answer. Every card used to name
   a product and none of them said what it would tell you. */
.rc-q {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.45;
  color: var(--accent-text); font-style: italic;
}
.rc-q-ico {
  flex: 0 0 auto; font-style: normal; font-weight: 800; font-size: 11px;
  width: 15px; height: 15px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid currentColor;
}
/* Stated only where one report needs another, so the ladder between them is
   readable from the shelf instead of discovered behind a lock. */
.rc-dep {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-2);
}
.rc-dep-ico { flex: 0 0 auto; font-size: 10px; margin-top: 2px; }

/* Length, price, state — the facts a reader needs before choosing. Two short
   ones share a line; a long one takes the row and wraps inside it. */
.rc-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.rc-fact {
  display: inline-flex; align-items: flex-start; gap: 5px;
  font-size: 11px; line-height: 1.35; color: var(--text-3);
  max-width: 100%;
}
.rc-fact-ico { flex: 0 0 auto; font-size: 10px; line-height: 1.5; }
.rc-fact.ok     { color: var(--ok); font-weight: 700; }
.rc-fact.accent { color: var(--accent-text); font-weight: 700; }
.rc-fact.muted  { color: var(--text-2); font-weight: 700; }

/* What the last gated call actually cost, in the server's own words. */
.billing-note {
  margin-top: 8px; font-size: 11px; line-height: 1.4; color: var(--text-3);
}

/* "This reading predates a correction." Informational, not an error: the
   document is intact and the reader owns it, so this reads as a note rather
   than a failure. Gold splits three ways in this theme — the tint is
   --gold-surface (--accent) and the text is --gold (--accent-text); collapsing
   them puts gold text on gold fill and disappears in light mode. */
.stale-notice {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 9px 11px; border-radius: 8px;
  font-size: 12px; line-height: 1.5; color: var(--text-2);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
}
.stale-notice-ico {
  flex: 0 0 auto; margin-top: 1px; font-size: 12px; color: var(--accent-text);
}

/* Actions sit on one row; the trailing ghost button pins right so Regenerate
   stops orphaning onto a line of its own. */
.rc-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; margin-top: 12px;
}
.rc-actions > .btn.full { flex: 1 1 100%; }
.rc-actions > .btn.ghost.small:last-child:not(:only-child) { margin-left: auto; }

/* The single-question report sheet: what it answers, what is in it, what it
   does NOT cover, then the button. The last two are the reason this has any
   styling at all — `not_covered` is four full sentences and, set at the same
   weight as the contents list above it, it reads as more of the same rather
   than as the edges of what was bought. */
.focused-detail ul { padding-left: 18px; margin: 0; }
.focused-detail ul li {
  margin: 0 0 7px; font-size: 13px; line-height: 1.55; color: var(--text-2);
}
.focused-detail ul.not-covered li { color: var(--text-3); }
.focused-detail ul.not-covered li::marker { color: var(--accent-text); }

/* ── Karam Kundli: one question per screen ───────────────────────────────── */
/* Forty-seven questions used to arrive as five walls of text. The screen now
   holds one decision, so the type can be large and the targets full width. */
.kk-single { display: flex; flex-direction: column; }
.kk-single-q {
  font-size: 19px; font-weight: 700; line-height: 1.35;
  margin: 14px 0 18px; letter-spacing: -.01em;
}
.kk-opts-stack { display: flex; flex-direction: column; gap: 9px; }
.kk-opts-stack .kk-opt {
  width: 100%; padding: 15px 16px; text-align: left;
  font-size: 15px; border-radius: 14px;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.kk-opts-stack .kk-opt:active { transform: scale(.985); }
.kk-answered {
  margin-top: 14px; text-align: center;
  font-size: 11px; color: var(--text-2);
}
@media (max-width: 380px) { .kk-single-q { font-size: 17px; } }

.lang-draft-badge {
  margin-inline-start: var(--space-1);
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  opacity: .78;
}

.lang-draft-note {
  margin: var(--space-2) 0 0;
  font-size: var(--type-caption);
  line-height: 1.5;
}

/* Native controls and card contents carry intrinsic minimum widths. Explicitly
   release them so 320px layouts do not leak into the document canvas. */
.today-grid > *,
.today-snap .today-grid > *,
.num-grid > *,
.flex > .field {
  min-width: 0;
}

@media (max-width: 360px) {
  .num-grid { grid-template-columns: 1fr; }
  .compat-birth-row { display: grid; grid-template-columns: 1fr; }
}

/* Keep the next/back decision reachable on short phones while the onboarding
   form scrolls behind it. */
.onb > .btn-row {
  position: sticky;
  bottom: calc(-24px - var(--safe-bot));
  z-index: 4;
  margin-right: -18px;
  margin-left: -18px;
  padding: 12px 18px calc(14px + var(--safe-bot));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-1) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ── Responsive desktop shell ─────────────────────────────────────────────
   Keep this after feature CSS: it is the final layout layer and must outrank
   the mobile-first subnav and bottom-sheet declarations above. */
@media (min-width: 1024px) {
  .shell { padding-left: var(--desktop-rail); }
  .topbar { padding: var(--space-3) var(--space-5); }
  .view {
    max-width: var(--content-wide);
    padding: var(--space-5) var(--space-6) 112px;
  }
  .bottom-nav {
    top: 0; right: auto; width: var(--desktop-rail); height: 100dvh;
    grid-template-columns: 1fr; grid-auto-rows: min-content;
    align-content: center; gap: var(--space-2);
    padding: calc(var(--space-6) + var(--safe-top)) var(--space-3)
      calc(var(--space-6) + var(--safe-bot));
    border-top: 0; border-right: 1px solid var(--line);
  }
  .nav-btn {
    flex-direction: row; justify-content: flex-start; gap: var(--space-3);
    width: 100%; min-height: 52px; padding: var(--space-3) var(--space-4);
    text-align: left;
  }
  .nav-btn span:not(.nav-emoji) { font-size: var(--type-body-sm); }
  .nav-btn.active { background: var(--accent-soft); }
  .subnav {
    margin-left: calc(-1 * var(--space-6));
    margin-right: calc(-1 * var(--space-6));
    padding-left: var(--space-6); padding-right: var(--space-6);
  }
  #toast-root { left: calc(50% + var(--desktop-rail) / 2); bottom: var(--space-6); }
  .modal-back { align-items: center; padding: var(--space-6); }
  .modal {
    border: 1px solid var(--line-2); border-radius: var(--r-xl);
    padding: var(--space-5); box-shadow: 0 24px 80px rgba(0,0,0,.45);
  }
}