/* GENERATED FILE — do not edit by hand.
 * Produced by frontend/scripts/build-site-css.mjs by concatenating
 * frontend/src/ds/{tokens,base}/*.css + frontend/src/ds/specimens.css.
 * Re-run "npm run build" (or "node scripts/build-site-css.mjs" directly)
 * after changing any of those source files.
 */

/* ---- tokens/fonts.css ---- */
/* Webfonts. All four are Google Fonts, loaded from the Google CDN.
   SUBSTITUTION NOTE: no brand font files were supplied, so these are chosen
   matches, not the brand's licensed originals. Swap in real files if they exist. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Tiro+Devanagari+Sanskrit:ital@0;1&display=swap");

/* ---- tokens/colors.css ---- */
/* ===== Color =====
   Light-first. Warm neutral ground ("paper"), warm near-black ("ink"),
   two accents at matched lightness/chroma with only hue varying:
   Kesar (saffron, hue 62) and Rahu (twilight violet, hue 300).
   Every value is authored in oklch so accents stay perceptually equal. */
:root {
  /* --- Ground: warm papers --- */
  --paper-0:  oklch(0.992 0.006 78);   /* page white, faintly warm */
  --paper-1:  oklch(0.975 0.010 76);   /* raised paper */
  --paper-2:  oklch(0.953 0.014 74);   /* sunken / inset */
  --paper-3:  oklch(0.921 0.018 72);   /* hairline fills, disabled beds */

  /* --- Ink: warm near-blacks --- */
  --ink-0:    oklch(0.215 0.021 65);   /* primary text */
  --ink-1:    oklch(0.360 0.020 65);   /* secondary text */
  --ink-2:    oklch(0.520 0.018 68);   /* tertiary / captions */
  --ink-3:    oklch(0.680 0.014 70);   /* placeholders, disabled text */
  --ink-4:    oklch(0.820 0.012 72);   /* dividers on paper */

  /* --- Accent: Kesar (saffron) --- */
  --kesar:      oklch(0.700 0.145 62);
  --kesar-hi:   oklch(0.780 0.120 66);
  --kesar-deep: oklch(0.480 0.130 55);  /* accessible accent text on paper */
  --kesar-wash: oklch(0.700 0.145 62 / 0.12);

  /* --- Accent: Rahu (twilight violet) --- */
  --rahu:       oklch(0.700 0.145 300);
  --rahu-hi:    oklch(0.780 0.120 300);
  --rahu-deep:  oklch(0.450 0.150 300);
  --rahu-wash:  oklch(0.700 0.145 300 / 0.12);

  /* --- Semantic status (same L/C family, hue only) --- */
  --ok:       oklch(0.700 0.145 150);
  --ok-deep:  oklch(0.460 0.120 150);
  --warn:     oklch(0.760 0.145 88);
  --warn-deep:oklch(0.500 0.120 80);
  --alert:    oklch(0.620 0.170 25);
  --alert-deep:oklch(0.450 0.150 25);

  /* --- Semantic aliases: text --- */
  --text-strong:      var(--ink-0);
  --text-body:        var(--ink-1);
  --text-muted:       var(--ink-2);
  --text-placeholder: var(--ink-3);
  --text-accent:      var(--kesar-deep);
  --text-accent-alt:  var(--rahu-deep);
  --text-on-accent:   oklch(0.995 0.004 78);
  --text-link:        var(--rahu-deep);
  --text-link-hover:  var(--kesar-deep);

  /* --- Semantic aliases: surface --- */
  --surface-page:     var(--paper-0);
  --surface-raised:   var(--paper-1);
  --surface-sunken:   var(--paper-2);
  --surface-inverse:  var(--ink-0);
  --surface-accent:   var(--kesar);
  --surface-accent-alt: var(--rahu);

  /* --- Semantic aliases: line --- */
  --line-hairline:  oklch(0.215 0.021 65 / 0.10);
  --line-strong:    oklch(0.215 0.021 65 / 0.18);
  --line-accent:    oklch(0.700 0.145 62 / 0.45);
  --focus-ring:     oklch(0.700 0.145 300 / 0.55);

  /* --- The sky: what sits BEHIND the glass ---
     Glass needs something to refract. Every full-screen surface uses this. */
  --sky-dawn:
    radial-gradient(120% 90% at 12% 4%,  oklch(0.86 0.10 66 / 0.55) 0%, transparent 62%),
    radial-gradient(110% 80% at 92% 8%,  oklch(0.84 0.09 300 / 0.48) 0%, transparent 58%),
    radial-gradient(120% 100% at 50% 108%, oklch(0.88 0.07 200 / 0.40) 0%, transparent 60%),
    linear-gradient(180deg, var(--paper-0) 0%, var(--paper-1) 55%, var(--paper-2) 100%);
  --sky-dusk:
    radial-gradient(120% 90% at 80% 0%,  oklch(0.72 0.13 300 / 0.55) 0%, transparent 60%),
    radial-gradient(100% 80% at 8% 12%,  oklch(0.80 0.12 40 / 0.45) 0%, transparent 58%),
    linear-gradient(180deg, var(--paper-1) 0%, var(--paper-2) 100%);
  /* Grain overlay: keeps large washes from banding. Apply as a ::after layer. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ===== Dark theme ("Ratri") =====
   Light-first product, but the app offers a night mode for evening/transit use.
   Scope: [data-theme="dark"] on <html> or any container. */
[data-theme="dark"] {
  --paper-0:  oklch(0.185 0.022 288);
  --paper-1:  oklch(0.232 0.026 288);
  --paper-2:  oklch(0.282 0.028 288);
  --paper-3:  oklch(0.340 0.030 288);

  --ink-0:    oklch(0.975 0.008 80);
  --ink-1:    oklch(0.880 0.012 80);
  --ink-2:    oklch(0.740 0.016 82);
  --ink-3:    oklch(0.600 0.020 84);
  --ink-4:    oklch(0.430 0.024 286);

  --kesar-deep: oklch(0.850 0.120 70);
  --rahu-deep:  oklch(0.860 0.100 302);
  --ok-deep:    oklch(0.840 0.110 152);
  --warn-deep:  oklch(0.880 0.110 90);
  --alert-deep: oklch(0.780 0.140 28);

  --text-on-accent: oklch(0.180 0.020 60);
  --line-hairline: oklch(0.99 0.01 300 / 0.12);
  --line-strong:   oklch(0.99 0.01 300 / 0.22);

  --sky-dawn:
    radial-gradient(120% 90% at 14% 2%,  oklch(0.52 0.14 300 / 0.75) 0%, transparent 60%),
    radial-gradient(110% 80% at 90% 10%, oklch(0.48 0.13 40 / 0.55) 0%, transparent 58%),
    radial-gradient(130% 100% at 50% 110%, oklch(0.40 0.10 220 / 0.60) 0%, transparent 62%),
    linear-gradient(180deg, oklch(0.20 0.03 290) 0%, oklch(0.15 0.025 292) 100%);
  --sky-dusk: var(--sky-dawn);
}

/* ---- tokens/typography.css ---- */
/* ===== Type =====
   Newsreader (serif) speaks: headlines, reading-length interpretation copy.
   Manrope (sans) works: UI, labels, buttons, data rows.
   IBM Plex Mono: degrees, times, coordinates, chart data.
   Tiro Devanagari Sanskrit: Sanskrit terms set in Devanagari (nakshatra, dasha). */
:root {
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans:  "Manrope", "SF Pro Text", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-deva:  "Tiro Devanagari Sanskrit", "Noto Serif Devanagari", serif;

  /* Sizes — mobile-first ramp; the web kit steps display sizes up one notch. */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  15px;   /* body default */
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;
  --text-6xl: 64px;
  --text-7xl: 84px;

  --leading-tight:  1.06;
  --leading-snug:   1.22;
  --leading-normal: 1.45;
  --leading-relaxed:1.62;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-caps:    0.14em;   /* eyebrow / overline labels */

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Semantic roles */
  --type-display:   var(--weight-light) var(--text-5xl)/var(--leading-tight) var(--font-serif);
  --type-title-1:   var(--weight-regular) var(--text-3xl)/var(--leading-snug) var(--font-serif);
  --type-title-2:   var(--weight-semi) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --type-title-3:   var(--weight-semi) var(--text-lg)/var(--leading-snug) var(--font-sans);
  --type-body:      var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-sans);
  --type-body-read: var(--weight-regular) var(--text-lg)/var(--leading-relaxed) var(--font-serif);
  --type-label:     var(--weight-medium) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-caption:   var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans);
  --type-data:      var(--weight-medium) var(--text-sm)/var(--leading-normal) var(--font-mono);
  --type-eyebrow:   var(--weight-semi) var(--text-2xs)/1 var(--font-sans);
}

/* ---- tokens/spacing.css ---- */
/* ===== Spacing =====
   4px base. --space-1..--space-16 are the only spacing values in the system;
   optical exceptions are allowed only inside a component, never in layout. */
:root {
  --space-0:  0px;
  --space-px: 1px;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  --space-13: 80px;
  --space-14: 96px;
  --space-15: 128px;
  --space-16: 160px;

  /* Layout */
  --gutter-mobile: var(--space-7);   /* 20px screen edge */
  --gutter-web:    var(--space-9);   /* 32px */
  --content-max:   1180px;
  --prose-max:     62ch;
  --tap-min:       44px;             /* never smaller, ever */
  --tabbar-h:      82px;
  --navbar-h:      56px;
  --navbar-web-h:  68px;
}

/* ---- tokens/radius.css ---- */
/* ===== Radius =====
   Generous and continuous. Glass reads as a solid object, so corners are
   large relative to the element, and nested corners step down by ~6px. */
:root {
  --radius-xs:  8px;
  --radius-sm:  12px;
  --radius-md:  16px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-3xl: 44px;
  --radius-pill: 999px;
  --radius-card:   var(--radius-xl);
  --radius-sheet:  var(--radius-3xl);
  --radius-control:var(--radius-pill);
  --radius-field:  var(--radius-md);
  --radius-phone:  46px;
}

/* ---- tokens/glass.css ---- */
/* ===== Glass =====
   The single most important system in ManasAstro. Glass is not "a translucent
   card": it is blur + saturation + a tint + a specular top edge + a hairline
   border + a soft cast shadow. Remove any one layer and it reads as cheap.
   Intensity ladder: thin (chips, tabs) -> regular (cards) -> thick (sheets,
   navbars) -> ultra (modals, paywall). */
:root {
  --blur-thin:    14px;
  --blur-regular: 30px;
  --blur-thick:   48px;
  --blur-ultra:   72px;
  --glass-sat:    180%;
  --glass-bright: 106%;

  --glass-filter-thin:    blur(var(--blur-thin))    saturate(var(--glass-sat)) brightness(var(--glass-bright));
  --glass-filter:         blur(var(--blur-regular)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  --glass-filter-thick:   blur(var(--blur-thick))   saturate(var(--glass-sat)) brightness(var(--glass-bright));
  --glass-filter-ultra:   blur(var(--blur-ultra))   saturate(200%) brightness(108%);

  /* Tints: white veils over the sky. Light theme only; dark overrides below. */
  --glass-tint-thin:    oklch(1 0 0 / 0.34);
  --glass-tint:         oklch(1 0 0 / 0.54);
  --glass-tint-thick:   oklch(1 0 0 / 0.66);
  --glass-tint-ultra:   oklch(1 0 0 / 0.78);
  --glass-tint-kesar:   oklch(0.86 0.11 64 / 0.42);
  --glass-tint-rahu:    oklch(0.84 0.10 300 / 0.42);

  /* Borders: an outer light hairline + inner dark hairline = a real edge. */
  --glass-border:     oklch(1 0 0 / 0.72);
  --glass-border-low: oklch(1 0 0 / 0.42);

  /* Specular: the highlight that sells thickness. Layer as a background. */
  --glass-specular: linear-gradient(180deg,
      oklch(1 0 0 / 0.55) 0%,
      oklch(1 0 0 / 0.12) 18%,
      oklch(1 0 0 / 0) 42%,
      oklch(1 0 0 / 0.10) 100%);
  /* Edge light: a 1px rim that catches light top-left and shadow bottom-right. */
  --glass-rim:
      inset 0 1px 0 0 oklch(1 0 0 / 0.90),
      inset 1px 0 0 0 oklch(1 0 0 / 0.45),
      inset -1px 0 0 0 oklch(1 0 0 / 0.30),
      inset 0 -1px 0 0 oklch(1 0 0 / 0.28),
      inset 0 0 0 1px oklch(0.215 0.021 65 / 0.05);
  --glass-rim-strong:
      inset 0 1.5px 0 0 oklch(1 0 0 / 1),
      inset 0 -1px 0 0 oklch(1 0 0 / 0.4),
      inset 0 0 24px 0 oklch(1 0 0 / 0.30),
      inset 0 0 0 1px oklch(0.215 0.021 65 / 0.06);
}

[data-theme="dark"] {
  --glass-tint-thin:  oklch(0.62 0.05 292 / 0.20);
  --glass-tint:       oklch(0.60 0.05 292 / 0.30);
  --glass-tint-thick: oklch(0.58 0.05 292 / 0.42);
  --glass-tint-ultra: oklch(0.56 0.05 292 / 0.56);
  --glass-tint-kesar: oklch(0.55 0.12 62 / 0.34);
  --glass-tint-rahu:  oklch(0.52 0.12 300 / 0.38);
  --glass-border:     oklch(1 0 0 / 0.20);
  --glass-border-low: oklch(1 0 0 / 0.10);
  --glass-specular: linear-gradient(180deg,
      oklch(1 0 0 / 0.20) 0%, oklch(1 0 0 / 0.05) 20%,
      oklch(1 0 0 / 0) 45%, oklch(1 0 0 / 0.04) 100%);
  --glass-rim:
      inset 0 1px 0 0 oklch(1 0 0 / 0.28),
      inset 0 -1px 0 0 oklch(1 0 0 / 0.08),
      inset 0 0 0 1px oklch(1 0 0 / 0.06);
  --glass-rim-strong:
      inset 0 1.5px 0 0 oklch(1 0 0 / 0.40),
      inset 0 0 28px 0 oklch(1 0 0 / 0.10),
      inset 0 0 0 1px oklch(1 0 0 / 0.08);
}

/* ---- tokens/shadow.css ---- */
/* ===== Shadow =====
   Glass casts warm, wide, low-opacity shadows — never grey, never tight.
   Shadow colour is ink hue-shifted warm so it sits on paper without muddying. */
:root {
  --shadow-color:  oklch(0.30 0.04 62 / 1);
  --shadow-xs: 0 1px 2px oklch(0.30 0.04 62 / 0.06);
  --shadow-sm: 0 1px 2px oklch(0.30 0.04 62 / 0.05),
               0 4px 10px -3px oklch(0.30 0.04 62 / 0.09);
  --shadow-md: 0 1px 2px oklch(0.30 0.04 62 / 0.05),
               0 8px 22px -8px oklch(0.30 0.04 62 / 0.14);
  --shadow-lg: 0 2px 4px oklch(0.30 0.04 62 / 0.05),
               0 14px 34px -10px oklch(0.30 0.04 62 / 0.16),
               0 34px 70px -30px oklch(0.30 0.04 62 / 0.22);
  --shadow-xl: 0 3px 6px oklch(0.30 0.04 62 / 0.06),
               0 24px 56px -14px oklch(0.30 0.04 62 / 0.20),
               0 60px 120px -50px oklch(0.30 0.04 62 / 0.28);
  --shadow-accent: 0 8px 24px -8px oklch(0.700 0.145 62 / 0.45);
  --shadow-accent-alt: 0 8px 24px -8px oklch(0.700 0.145 300 / 0.45);
  --shadow-inset-field: inset 0 1px 2px oklch(0.30 0.04 62 / 0.07);
  --glow-kesar: 0 0 0 1px oklch(0.700 0.145 62 / 0.30), 0 0 32px oklch(0.700 0.145 62 / 0.28);
  --glow-rahu:  0 0 0 1px oklch(0.700 0.145 300 / 0.30), 0 0 32px oklch(0.700 0.145 300 / 0.28);
}

[data-theme="dark"] {
  --shadow-color: oklch(0.10 0.03 292 / 1);
  --shadow-xs: 0 1px 2px oklch(0.10 0.03 292 / 0.30);
  --shadow-sm: 0 2px 8px -2px oklch(0.10 0.03 292 / 0.40);
  --shadow-md: 0 8px 22px -8px oklch(0.10 0.03 292 / 0.50);
  --shadow-lg: 0 14px 34px -10px oklch(0.10 0.03 292 / 0.55),
               0 34px 70px -30px oklch(0.10 0.03 292 / 0.60);
  --shadow-xl: 0 24px 56px -14px oklch(0.10 0.03 292 / 0.60),
               0 60px 120px -50px oklch(0.10 0.03 292 / 0.70);
}

/* ---- tokens/motion.css ---- */
/* ===== Motion =====
   Glass moves like a physical pane: it slides and settles, it does not bounce.
   One easing does most of the work (--ease-glass, the Apple-ish settle curve).
   Anything a finger is holding tracks 1:1 with no easing at all. */
:root {
  --ease-glass:  cubic-bezier(0.32, 0.72, 0, 1);   /* default: enter/settle */
  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);   /* reveals, sheet present */
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);   /* dismissals */
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);   /* loops, orbits */

  --dur-instant: 90ms;   /* press feedback */
  --dur-fast:    160ms;  /* hover, tint change */
  --dur-base:    240ms;  /* most transitions */
  --dur-slow:    380ms;  /* sheets, screen pushes */
  --dur-slower:  620ms;  /* chart draw-in, hero reveal */
  --dur-ambient: 24s;    /* sky drift, orbit rotation */

  --press-scale: 0.965;
  --lift-y: -2px;
}

@keyframes ma-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes ma-sheet-in {
  from { transform: translate3d(0, 100%, 0); }
  to   { transform: none; }
}
@keyframes ma-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ma-sky-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1.06); }
  50%  { transform: translate3d(-2.5%, 1.5%, 0) scale(1.12); }
  100% { transform: translate3d(0, 0, 0) scale(1.06); }
}
@keyframes ma-orbit { to { transform: rotate(360deg); } }
/* Counter-rotation partner for ma-orbit: applied to a carrier's descendant
   so content (e.g. a glyph) can stay upright while its ancestor spins.
   Same duration/easing as the ma-orbit instance it cancels -> exact
   cancellation at every instant, since both reduce to the same eased
   fraction of 360deg, just negated. */
@keyframes ma-orbit-ccw { to { transform: rotate(-360deg); } }
@keyframes ma-shimmer {
  0%   { background-position: -140% 0; }
  100% { background-position: 240% 0; }
}
@keyframes ma-pulse-soft {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ---- base/reset.css ---- */
/* Minimal reset — only what the system depends on. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { color: var(--text-strong); text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--text-link); text-decoration-color: oklch(0.45 0.15 300 / 0.35); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-glass); }
a:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
img, svg { display: block; max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---- base/utilities.css ---- */
/* Utility classes for prototypes, cards and UI kits.
   Production React components read the custom properties directly instead. */

/* --- The sky: put this on the outermost frame of any screen --- */
.ma-sky { position: relative; background: var(--sky-dawn); overflow: hidden; isolation: isolate; }
.ma-sky::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: 120px 120px;
  opacity: 0.16; mix-blend-mode: soft-light; z-index: 0;
}
.ma-sky > * { position: relative; z-index: 1; }
.ma-sky--dusk { background: var(--sky-dusk); }

/* --- Glass --- */
.ma-glass {
  position: relative;
  background-color: var(--glass-tint);
  background-image: var(--glass-specular);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-rim), var(--shadow-md);
}
.ma-glass--thin   { background-color: var(--glass-tint-thin);  -webkit-backdrop-filter: var(--glass-filter-thin);  backdrop-filter: var(--glass-filter-thin);  box-shadow: var(--glass-rim), var(--shadow-sm); }
.ma-glass--thick  { background-color: var(--glass-tint-thick); -webkit-backdrop-filter: var(--glass-filter-thick); backdrop-filter: var(--glass-filter-thick); box-shadow: var(--glass-rim), var(--shadow-lg); }
.ma-glass--ultra  { background-color: var(--glass-tint-ultra); -webkit-backdrop-filter: var(--glass-filter-ultra); backdrop-filter: var(--glass-filter-ultra); box-shadow: var(--glass-rim-strong), var(--shadow-xl); }
.ma-glass--kesar  { background-color: var(--glass-tint-kesar); }
.ma-glass--rahu   { background-color: var(--glass-tint-rahu); }

/* --- Type roles --- */
.ma-display   { font: var(--type-display); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.ma-title-1   { font: var(--type-title-1); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.ma-title-2   { font: var(--type-title-2); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.ma-title-3   { font: var(--type-title-3); color: var(--text-strong); }
.ma-body      { font: var(--type-body); color: var(--text-body); }
.ma-read      { font: var(--type-body-read); color: var(--text-body); max-width: var(--prose-max); }
.ma-label     { font: var(--type-label); color: var(--text-body); }
.ma-caption   { font: var(--type-caption); color: var(--text-muted); }
.ma-data      { font: var(--type-data); color: var(--text-body); font-variant-numeric: tabular-nums; }
.ma-eyebrow   { font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.ma-deva      { font-family: var(--font-deva); }
/* Astrological symbols are text, not emoji: force text presentation. */
.ma-glyph     { font-family: var(--font-serif); font-variant-emoji: text; }

/* --- Wordmark --- */
.ma-wordmark {
  font-family: var(--font-serif); font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight); color: var(--text-strong);
  display: inline-block; line-height: 1;
}
.ma-wordmark em { font-style: normal; color: var(--text-accent); }

/* --- Screen-reader-only content: visually hidden, still announced --- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Icons: Lucide via CDN, masked so they inherit currentColor --- */
.ma-icon {
  display: inline-block; width: 20px; height: 20px; flex: none;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}

/* ---- specimens.css ---- */
/* Static specimen styles, shared by Design System cards and the UI kits.
 *
 * These classes are a hand-kept mirror of the React components in components/**.
 * They exist because card and kit HTML must render with no bundle, no React and
 * no local module loading. Consuming products should use the React components
 * (or the tokens directly) — not these classes.
 * If you change a component, update its specimen here in the same commit.
 */

.stage { min-height: 100vh; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.ic { -webkit-mask-image: var(--u); mask-image: var(--u); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: var(--radius-pill); font: var(--weight-semi) var(--text-md)/1 var(--font-sans);
  letter-spacing: var(--tracking-tight); white-space: nowrap; }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: var(--text-sm); gap: 6px; }
.btn.lg { min-height: 54px; padding: 0 24px; font-size: var(--text-lg); }
.btn.full { width: 100%; }
.btn.primary { color: var(--text-on-accent); background-color: var(--surface-accent);
  background-image: linear-gradient(180deg, oklch(1 0 0 / .28), oklch(1 0 0 / 0) 55%);
  border: 1px solid oklch(0.48 0.13 55 / .35); box-shadow: var(--glass-rim), var(--shadow-accent); }
.btn.secondary { color: var(--text-strong); background-color: var(--glass-tint); background-image: var(--glass-specular);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-rim), var(--shadow-sm); }
.btn.ghost { color: var(--text-strong); border: 1px solid transparent; }
.btn.outline { color: var(--text-accent); border: 1px solid var(--line-accent); }
.btn.inverse { color: var(--paper-0); background-color: var(--surface-inverse);
  background-image: linear-gradient(180deg, oklch(1 0 0 / .16), oklch(1 0 0 / 0) 60%);
  border: 1px solid oklch(1 0 0 / .12); box-shadow: var(--shadow-md); }

/* Icon buttons */
.ib { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--radius-pill); color: var(--text-strong); background-color: var(--glass-tint);
  background-image: var(--glass-specular); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-rim), var(--shadow-sm); }
.ib.sm { width: 34px; height: 34px; }
.ib.accent { color: var(--text-on-accent); background-color: var(--surface-accent);
  border-color: oklch(0.48 0.13 55 / .35); box-shadow: var(--shadow-accent); }
.ib.plain { background: none; border-color: transparent; box-shadow: none; color: var(--text-muted); }
.dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: var(--radius-pill);
  background-color: var(--alert); box-shadow: 0 0 0 2px var(--glass-tint-thick); }

/* Badges and chips */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 4px; border-radius: var(--radius-pill);
  font: var(--weight-semi) var(--text-xs)/1.2 var(--font-sans); white-space: nowrap;
  color: var(--text-body); background: oklch(0.215 0.021 65 / .07); border: 1px solid var(--line-hairline); }
.badge.kesar { color: var(--kesar-deep); background: var(--kesar-wash); border-color: oklch(0.700 0.145 62 / .30); }
.badge.rahu { color: var(--rahu-deep); background: var(--rahu-wash); border-color: oklch(0.700 0.145 300 / .30); }
.badge.ok { color: var(--ok-deep); background: oklch(0.700 0.145 150 / .14); border-color: oklch(0.700 0.145 150 / .30); }
.badge.warn { color: var(--warn-deep); background: oklch(0.760 0.145 88 / .18); border-color: oklch(0.760 0.145 88 / .34); }
.badge.alert { color: var(--alert-deep); background: oklch(0.620 0.170 25 / .14); border-color: oklch(0.620 0.170 25 / .28); }
.badge.caps { font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: var(--radius-pill);
  font: var(--weight-medium) var(--text-sm)/1 var(--font-sans); color: var(--text-body);
  background-color: var(--glass-tint-thin); background-image: var(--glass-specular);
  -webkit-backdrop-filter: var(--glass-filter-thin); backdrop-filter: var(--glass-filter-thin);
  border: 1px solid var(--glass-border-low); box-shadow: var(--glass-rim); }
.chip.on { color: var(--text-on-accent); background-color: var(--surface-accent);
  border-color: oklch(0.48 0.13 55 / .35); box-shadow: var(--shadow-accent); }
.chip .x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: var(--radius-pill); background-color: oklch(0.215 0.021 65 / .08); }

/* Fields */
.field { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.field > .lab { font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted); padding-left: 2px; }
.field > .hint { font: var(--type-caption); color: var(--text-muted); padding-left: 2px; }
.control { display: flex; align-items: center; gap: var(--space-5); min-height: 52px; padding: 0 16px;
  border-radius: var(--radius-field); background-color: var(--glass-tint-thin);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border-low); box-shadow: var(--glass-rim), var(--shadow-inset-field);
  font: var(--weight-medium) var(--text-lg)/1.4 var(--font-sans); color: var(--text-strong); }
.control.focus { background-color: oklch(1 0 0 / .72); border-color: var(--line-accent);
  box-shadow: var(--glass-rim), 0 0 0 4px oklch(0.700 0.145 62 / .16); }
.control.area { align-items: flex-start; padding: 14px 16px; min-height: 96px; font: var(--type-body-read); }
.control .ph { color: var(--text-placeholder); }
.control .suffix { font: var(--type-data); color: var(--text-muted); margin-left: auto; }
.box { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none;
  border-radius: var(--radius-xs); background-color: var(--glass-tint-thin); border: 1px solid var(--glass-border-low);
  box-shadow: var(--glass-rim), var(--shadow-inset-field); color: var(--text-on-accent); }
.box.on { background-color: var(--surface-accent); border-color: oklch(0.48 0.13 55 / .35); box-shadow: var(--shadow-accent); }
.radio { width: 22px; height: 22px; border-radius: var(--radius-pill); }
.radio .pip { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--text-on-accent); }
.sw { position: relative; flex: none; width: 52px; height: 32px; border-radius: var(--radius-pill);
  background-color: oklch(0.215 0.021 65 / .10); background-image: var(--glass-specular);
  border: 1px solid var(--glass-border-low); box-shadow: inset 0 1px 3px oklch(0.30 0.04 62 / .14); }
.sw.on { background-color: var(--surface-accent); border-color: oklch(0.48 0.13 55 / .30); box-shadow: var(--shadow-accent); }
.sw .knob { position: absolute; top: 2px; left: 3px; width: 26px; height: 26px; border-radius: var(--radius-pill);
  background: oklch(1 0 0 / .98); box-shadow: 0 1px 2px oklch(0.30 0.04 62 / .18), 0 4px 10px -2px oklch(0.30 0.04 62 / .22); }
.sw.on .knob { left: 23px; }
.track { position: relative; height: 8px; border-radius: var(--radius-pill); background: oklch(0.215 0.021 65 / .10);
  box-shadow: inset 0 1px 2px oklch(0.30 0.04 62 / .12); }
.track .fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill);
  background-image: linear-gradient(90deg, var(--kesar-hi), var(--kesar)); box-shadow: var(--shadow-accent); }
.track .knob { position: absolute; top: -10px; width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: oklch(1 0 0 / .96); border: 1px solid var(--glass-border);
  box-shadow: 0 1px 2px oklch(0.30 0.04 62 / .16), 0 6px 16px -4px oklch(0.30 0.04 62 / .24); }

/* Navigation */
.navbar { display: flex; align-items: center; gap: var(--space-5); min-height: var(--navbar-h);
  padding: var(--space-4) var(--gutter-mobile); background-color: var(--glass-tint-thick);
  -webkit-backdrop-filter: var(--glass-filter-thick); backdrop-filter: var(--glass-filter-thick);
  border-bottom: 1px solid var(--line-hairline); box-shadow: inset 0 1px 0 oklch(1 0 0 / .6), var(--shadow-sm); }
.tabbar { display: flex; gap: 2px; padding: 6px; border-radius: var(--radius-2xl);
  background-color: var(--glass-tint-thick); background-image: var(--glass-specular);
  -webkit-backdrop-filter: var(--glass-filter-thick); backdrop-filter: var(--glass-filter-thick);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-rim-strong), var(--shadow-lg); }
.tabbar .tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 56px; border-radius: var(--radius-xl); color: var(--text-muted);
  font: var(--weight-semi) var(--text-2xs)/1 var(--font-sans); }
.tabbar .tab.on { color: var(--text-accent); background-color: oklch(1 0 0 / .66); box-shadow: var(--glass-rim), var(--shadow-sm); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill);
  background-color: oklch(0.215 0.021 65 / .06); -webkit-backdrop-filter: var(--glass-filter-thin);
  backdrop-filter: var(--glass-filter-thin); border: 1px solid var(--glass-border-low);
  box-shadow: inset 0 1px 2px oklch(0.30 0.04 62 / .08); }
.seg > span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: var(--radius-pill);
  font: var(--weight-semi) var(--text-md)/1 var(--font-sans); color: var(--text-muted); }
.seg.sm > span { min-height: 34px; padding: 0 14px; font-size: var(--text-sm); }
.seg > span.on { color: var(--text-strong); background-color: oklch(1 0 0 / .92); box-shadow: var(--shadow-sm); }
.lrow { display: flex; align-items: center; gap: var(--space-5); min-height: 56px; padding: 12px var(--space-7);
  border-top: 1px solid var(--line-hairline); }
.lrow:first-child { border-top: 0; }
.lrow .tile { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
  border-radius: var(--radius-sm); color: var(--text-accent); background-color: var(--kesar-wash); }
.lrow .t { font: var(--weight-medium) var(--text-md)/1.35 var(--font-sans); color: var(--text-strong); }
.lrow .d { font: var(--type-caption); color: var(--text-muted); }

/* Feedback */
.toast { display: inline-flex; align-items: center; gap: var(--space-5); padding: 12px 14px 12px 16px;
  border-radius: var(--radius-pill); background-color: var(--glass-tint-thick); background-image: var(--glass-specular);
  -webkit-backdrop-filter: var(--glass-filter-thick); backdrop-filter: var(--glass-filter-thick);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-rim), var(--shadow-lg);
  font: var(--weight-medium) var(--text-sm)/1.35 var(--font-sans); color: var(--text-strong); }
.tip { padding: 8px 12px; border-radius: var(--radius-sm); background-color: var(--glass-tint-ultra);
  -webkit-backdrop-filter: var(--glass-filter-thick); backdrop-filter: var(--glass-filter-thick);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-rim), var(--shadow-md);
  font: var(--weight-medium) var(--text-xs)/1.45 var(--font-sans); color: var(--text-strong); max-width: 240px; text-align: center; }
.skel { display: block; height: 13px; border-radius: var(--radius-xs); background-color: oklch(0.215 0.021 65 / .07);
  background-image: linear-gradient(90deg, transparent, oklch(1 0 0 / .65) 50%, transparent);
  background-size: 220% 100%; background-repeat: no-repeat; animation: ma-shimmer 1.6s var(--ease-inout) infinite; }
.sheet { position: absolute; inset: auto 0 0 0; padding: var(--space-5) var(--gutter-mobile) var(--space-8);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background-color: var(--glass-tint-ultra);
  background-image: var(--glass-specular); -webkit-backdrop-filter: var(--glass-filter-ultra);
  backdrop-filter: var(--glass-filter-ultra); border-top: 1px solid var(--glass-border);
  box-shadow: var(--glass-rim-strong), var(--shadow-xl); }
.grab { width: 42px; height: 5px; border-radius: var(--radius-pill); background: oklch(0.215 0.021 65 / .16);
  margin: 0 auto var(--space-6); }

/* Astrology */
.chart { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); aspect-ratio: 1;
  gap: 1px; padding: 1px; border-radius: var(--radius-md); background-color: var(--line-hairline);
  border: 1px solid var(--glass-border-low); overflow: hidden; box-shadow: var(--glass-rim), var(--shadow-inset-field); }
.chart .cell { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 7px;
  min-width: 0; background-color: oklch(1 0 0 / .52); font: var(--weight-medium) 11px/1 var(--font-mono); color: var(--text-strong); }
.chart .cell.asc { background-color: var(--kesar-wash); }
.chart .cell .sign { position: absolute; right: 5px; bottom: 3px; font: 12px/1 var(--font-serif); color: var(--ink-3); font-variant-emoji: text; }
.chart .mid { grid-column: 2 / 4; grid-row: 2 / 4; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; background-color: oklch(1 0 0 / .40); }
.dasha { display: flex; gap: 2px; height: 46px; padding: 3px; border-radius: var(--radius-sm);
  background-color: oklch(0.215 0.021 65 / .06); border: 1px solid var(--glass-border-low);
  box-shadow: inset 0 1px 2px oklch(0.30 0.04 62 / .08); }
.dasha > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: var(--radius-xs); background-color: oklch(1 0 0 / .55); color: var(--text-muted); overflow: hidden; }
.dasha > span.on { background-color: var(--surface-accent); color: var(--text-on-accent); box-shadow: var(--shadow-accent); }
.dasha .g { font: 15px/1 var(--font-serif); font-variant-emoji: text; }
.dasha .y { font: var(--weight-medium) 9px/1 var(--font-mono); }
.bubble { max-width: 86%; padding: 13px 17px; border-radius: 22px 22px 22px 7px; align-self: flex-start;
  background-color: var(--glass-tint-thick); background-image: var(--glass-specular);
  -webkit-backdrop-filter: var(--glass-filter-thick); backdrop-filter: var(--glass-filter-thick);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-rim), var(--shadow-sm);
  font: var(--type-body-read); color: var(--text-body); }
.bubble.mine { align-self: flex-end; border-radius: 22px 22px 7px 22px; color: var(--text-on-accent);
  background-color: var(--surface-accent); border-color: oklch(0.48 0.13 55 / .32); box-shadow: var(--shadow-accent);
  font: var(--weight-medium) var(--text-md)/1.5 var(--font-sans); }
.hd { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.hd > span { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 8px 6px;
  text-align: center; border-radius: var(--radius-sm); font: var(--weight-semi) var(--text-xs)/1.2 var(--font-sans);
  color: var(--text-muted); background-color: oklch(1 0 0 / .45); border: 1px solid var(--glass-border-low);
  box-shadow: var(--glass-rim); }
.hd > span.on { color: var(--text-on-accent); background-color: var(--surface-accent-alt);
  border-color: oklch(0.45 0.15 300 / .35); box-shadow: var(--shadow-accent-alt); }