/* One shell (28 Oct 2026): the tokens, header, phone tab bar, footer, type scale and buttons
   shared by the landing page (/) and the app (/today, /my-chart, ...). Load it first, then
   styles.css or landing.css. Fonts are self-hosted subsets (SIL OFL; licences in /web/fonts/).
   No third-party requests. */
@font-face{font-family:Fraunces;src:url(/web/fonts/fraunces-latin.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap;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:Inter;src:url(/web/fonts/inter-latin.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;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:"Noto Sans Devanagari";src:url(/web/fonts/noto-sans-devanagari.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"Tiro Devanagari Hindi";src:url(/web/fonts/tiro-devanagari-hindi.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"Noto Sans Symbols";src:url(/web/fonts/noto-sans-symbols.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+2190-21FF,U+2600-26FF,U+2700-27BF}
:root {
  --sky:#0F1B2D;
  --sky-2:#1D3150;
  --sky-3:#22324B;
  --sky-text:#FAF7F0;
  --sky-muted:#C9C3B5;
  --paper:#FAF7F0;
  --card:#FFFFFF;
  --ink:#1B2433;
  --muted:#5B6474;
  --teal:#1E5A52;
  --teal-soft:#E7EFEC;
  --saffron:#9C4518;
  --gold:#E8A33D;
  --caution-bg:#FFF6E8;
  --caution-line:#EBD3AE;
  --line:#E6DFD0;
  --soft:#F3EEE3;
  --radius:20px;
  /* Type scale (review 12): seven sizes. Every text size in shell.css, styles.css, landing.css and
     seo.css is one of these; the phone block below steps 1 to 3 down. The landing hero's display
     sizes and two decorative glyphs are the only raw sizes left. */
  --fs-1:42px;  /* h1 */
  --fs-2:28px;  /* serif section titles */
  --fs-3:22px;  /* card and sub-section heads */
  --fs-4:17px;  /* lede */
  --fs-5:15px;  /* body */
  --fs-6:13px;  /* small-note */
  --fs-7:11px;  /* eyebrow, field-label */
  --gutter:24px;
  /* The Devanagari faces join the stacks only under :lang(hi) below: Chrome fetches every
     self-hosted family in a stack while it looks for a fallback glyph (an arrow, a ✧), so an
     English page with them listed here downloaded ~185 KB of Devanagari it never drew (review 19). */
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:Fraunces,Georgia,serif;
  --glyph:"Noto Sans Symbols","Segoe UI Symbol",sans-serif;
  /* older names kept so the views not redesigned in P0 pick up the new look */
  --orange:var(--saffron);
  --navy:var(--sky);
  --bg:var(--paper);
  --accent:var(--teal);
  font-family:var(--sans);
  color:var(--ink);
  font-size:16px
}
:lang(hi) { --sans:"Noto Sans Devanagari",Inter,sans-serif; --serif:"Tiro Devanagari Hindi","Noto Sans Devanagari",Fraunces,serif; }

/* Base */
* { box-sizing:border-box }
html { overflow-x:hidden }
body { margin:0; background:var(--paper); font-family:var(--sans); font-size:var(--fs-5); overflow-x:hidden }
:lang(hi) body, :lang(hi) p, :lang(hi) li { line-height:1.7 }
button,input,select { font:inherit }
button,a,input,select,summary { touch-action:manipulation }
button { cursor:pointer }
a { color:var(--saffron) }
/* Focus ring, the only one (review 19): teal on paper, gold on the dark sky surfaces, which
   set --focus-ring (3:1 or better on each ground). No other stylesheet sets a focus colour. */
.sky-band, .first-run, .hero-sky, .approach, .chart-guide, .seo-main section.cta, .swara-card.current { --focus-ring:var(--gold) }
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible, .tq-pill input:focus-visible + span { outline:3px solid var(--focus-ring,var(--teal)); outline-offset:3px; border-radius:6px }
[hidden] { display:none!important }
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip { position:fixed; left:20px; top:-80px; z-index:50; background:white; padding:12px }
.skip:focus { top:10px }

/* Top bar (desktop) and tab bar (phone): the same five destinations.
   .nav-item is a <button data-view> in the app and an <a href> on the landing page. */
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:24px; height:68px; padding:0 max(24px,calc(50vw - 600px)); background:var(--paper); border-bottom:1px solid var(--line) }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:600; font-size:var(--fs-3); color:var(--ink); text-decoration:none; white-space:nowrap }
.brand img { border-radius:8px }
.topnav { display:flex; gap:4px; flex:1; min-width:0 }
.topnav .nav-item { display:inline-flex; align-items:center; border:0; background:none; color:var(--ink); padding:10px 14px; border-radius:999px; font-size:var(--fs-5); white-space:nowrap; min-height:44px; text-decoration:none }
.topnav .nav-item:hover { background:var(--soft) }
.topnav .nav-item.active, .topnav .nav-item[aria-current="page"] { background:var(--sky); color:var(--sky-text) }
.topbar-actions { display:flex; align-items:center; gap:10px }
.location-button { display:flex; align-items:center; gap:6px; min-height:40px; padding:6px 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); font-size:var(--fs-5); max-width:180px }
.location-button svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8 }
#location-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lang-toggle { display:flex; padding:0; border:1px solid var(--line); border-radius:999px; background:var(--card); overflow:hidden; min-height:40px }
.lang-toggle span { display:grid; place-items:center; min-width:42px; padding:0 10px; font-size:var(--fs-5); color:var(--ink) }
.lang-toggle span.on { background:var(--teal); color:white }
/* The "हिं" half of the pill uses the system face, so an English page never downloads the
   self-hosted Devanagari fonts just to draw two letters (review 19). */
.lang-toggle .lang-glyph { font-family:system-ui,-apple-system,"Segoe UI",sans-serif }
/* Sign in: account.js appends #account-open in the app; the landing page links to it. Both sit last in the DOM, so no CSS order is needed and Tab order matches what is seen. */
#account-open, .account-link { display:inline-flex; align-items:center; border:0; background:none; color:var(--ink); padding:8px 6px; font-size:var(--fs-5); min-height:44px; text-decoration:none }
.tabbar { display:none }
.tabbar .nav-item svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }

/* Footer */
.page-footer { max-width:1200px; margin:48px auto 0; padding:22px var(--gutter); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 20px; border-top:1px solid var(--line); color:var(--muted); font-size:var(--fs-6); }
.footer-links { display:flex; flex-wrap:wrap; gap:0 20px; flex-basis:100% }
.footer-links a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); text-decoration:none }
.footer-links a:hover { color:var(--saffron); text-decoration:underline; text-underline-offset:3px }

/* Type */
.eyebrow { font-size:var(--fs-7); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--saffron); margin-bottom:12px }
:lang(hi) .eyebrow { letter-spacing:0; text-transform:none }
h1 { font-family:var(--serif); font-weight:600; font-size:var(--fs-1); letter-spacing:-.01em; line-height:1.15; margin:0 0 12px }
/* One heading family (review 12): every section head is Fraunces 600; .eyebrow and .field-label
   stay Inter uppercase. */
h2 { font-family:var(--serif); font-size:var(--fs-3); margin:0; font-weight:600; letter-spacing:-.01em }
/* No one-word last lines in headings and the story lead (review 19) */
h1, h2, .story-lead { text-wrap:balance }
p { line-height:1.62 }
.serif-title { font-family:var(--serif); font-weight:600; font-size:var(--fs-2); letter-spacing:-.01em }
/* Tiro Devanagari Hindi ships one weight (400). Hindi serif display text asks for 400 instead of a
   600 the browser would embolden by smearing (the app) or quietly drop (font-synthesis:none, the
   landing), so every Hindi heading has the same true weight. A step up in size carries the presence
   the bold gave; letter-spacing stays 0 so the shirorekha joins. */
html:lang(hi) { font-synthesis-weight:none }
html:lang(hi) :is(h1, .serif-title, .sky-headline, .fr-title, .overview-head h2, .signatures > h3, .year > h3, .areas > h3, .birth-finding h3, h2, .report-chapter h3, .side-card h3, .chapter-title, .swara-main h3, .learn-method h3, .pattern-group, .story > h3, .daily-timings h3, .life-card h3, .reading-chapter h3) { font-weight:400; letter-spacing:0 }
:where(:lang(hi)) h1 { font-size:calc(var(--fs-1) + 2px) }
:where(:lang(hi)) .serif-title { font-size:calc(var(--fs-2) + 2px) }
.small-note { font-size:var(--fs-6); color:var(--muted); line-height:1.6 }

/* Disclosures (review 12): one marker for every <details> in the app, the landing and the search
   pages instead of the browser's triangle: a small chevron that turns down when open, on a row at
   least 44 px tall. .area-card (its " +"/" −") and .sky-wheel (its medallion) draw their own. */
details > summary { list-style:none; min-height:44px; padding-block:11px; cursor:pointer }
details > summary::-webkit-details-marker { display:none }
details:not(.area-card, .sky-wheel) > summary::before { content:""; display:inline-block; flex:none; width:7px; height:7px; margin:0 10px 2px 2px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s; vertical-align:middle }
details:not(.area-card, .sky-wheel)[open] > summary::before { transform:rotate(45deg); margin-bottom:5px }

/* Buttons */
.quiet-button { border:1px solid var(--line); background:var(--card); padding:10px 17px; border-radius:999px; color:var(--ink); font-size:var(--fs-5); min-height:44px }
.primary-button { background:var(--sky); color:var(--sky-text); padding:12px 22px; border-radius:999px; border:0; font-size:var(--fs-5); font-weight:600; min-height:44px }
.primary-button:hover { background:var(--sky-2) }
.gold-button { background:var(--gold); color:var(--sky); padding:12px 22px; border-radius:999px; border:0; font-size:var(--fs-5); font-weight:600; min-height:44px }
.gold-button:hover { background:#F0B355 }
/* One call to action per surface (review 19): .gold-button on dark, .primary-button on light */
a.gold-button, a.primary-button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none }
.text-button { color:var(--saffron); border:0; background:none; padding:8px 0; font-size:var(--fs-5); min-height:44px; text-decoration:underline; text-underline-offset:3px }

/* Phone: under 768 px the top nav hides and the tab bar takes over (redesign-proposal.md §9) */
@media(max-width:1100px) {
  .topnav .nav-item { padding:10px 10px }
}
@media(max-width:767px) {
  :root { --gutter:16px; --fs-1:32px; --fs-2:24px; --fs-3:20px }
  body { padding-bottom:72px }
  .topbar { height:56px; gap:8px; padding:0 12px }
  .topnav { display:none }
  .brand { font-size:var(--fs-4); gap:8px; flex:1; min-height:44px }
  .brand img { width:28px; height:28px }
  .topbar-actions { gap:6px }
  .location-button { width:44px; height:44px; max-width:120px; padding:0; justify-content:center; border-radius:50% }
  .location-button svg { width:18px; height:18px }
  #location-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }
  .lang-toggle { min-height:44px }
  .lang-toggle span { min-width:36px; padding:0 8px }
  #account-open, .account-link { padding:8px 2px; font-size:var(--fs-5); white-space:nowrap }
  .tabbar { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; position:fixed; inset:auto 0 0 0; z-index:30; background:var(--card); border-top:1px solid var(--line); padding:4px 2px calc(4px + env(safe-area-inset-bottom)) }
  .tabbar .nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:54px; border:0; background:none; color:var(--muted); font-size:var(--fs-6); padding:4px 0; min-width:0; text-decoration:none }
  .tabbar .nav-item span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
  .tabbar .nav-item.active, .tabbar .nav-item[aria-current="page"] { color:var(--ink); font-weight:600 }
  .page-footer { flex-direction:column; gap:8px }
}