/* AstroNum — astronum.in */

/* ---- the cosmic palette ---------------------------------------------
   One theme, always dark, on the web and in the installed app. Every
   colour below was checked against its background: the lightest text
   runs at 17:1, the faintest small print at 5.4:1, so everything clears
   WCAG AA and most of it clears AAA. The terracotta and gold of the
   original identity are kept, lifted until they read cleanly on a
   near-black field — the same brand, at night.
   -------------------------------------------------------------------- */
:root{
  --bg:#070a18;          /* deep indigo-black, the field behind everything */
  --surface:#0f1430;     /* a card, lifted just enough to separate */
  --surface2:#161d42;    /* a card inside a card */
  --ink:#eef1fb;         /* 17.5:1 on the field */
  --ink2:#bcc5e4;        /* 10.5:1 on a card */
  --muted:#8b93b8;       /* 5.4:1 — small print only */
  --line:#242c57; --line2:#36407a;
  --accent:#f0996a;      /* terracotta, lifted: 8.1:1 on a card */
  --accent2:#f8b78e;
  --gold:#e6c76a;
  --on-accent:#140f22;   /* dark text on the accent; white would be 2.2:1 */
  --star:#dfe6ff;
  --r:14px; --maxw:1120px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 18px 50px rgba(0,0,0,.55);
  color-scheme: dark;    /* form controls and scrollbars follow */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.65;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* ---- the sky --------------------------------------------------------
   Two fixed layers behind the page, both drawn in CSS: no image to
   download, nothing to decode, and it costs a phone almost nothing
   because neither layer ever repaints while scrolling.

   ::before is the nebula — wide, soft clouds of gold, terracotta and
   violet, sitting at low opacity so text never has to fight them.
   ::after is the starfield.
   -------------------------------------------------------------------- */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(230,199,106,.13), transparent 62%),
    radial-gradient(1000px 600px at 90% 2%,   rgba(240,153,106,.12), transparent 60%),
    radial-gradient(900px  760px at 78% 88%,  rgba(116,92,220,.14),  transparent 62%),
    radial-gradient(760px  620px at 8%  92%,  rgba(60,120,200,.10),  transparent 64%);
}

/* The starfield is one element painting many tiny radial gradients.
   Three sizes at three opacities give the field some depth rather than
   a flat sprinkle of identical dots. */
body::after{
  content:"";position:fixed;inset:-2px;pointer-events:none;z-index:0;
  background-repeat:repeat;
  background-image:
    /* near, brighter */
    radial-gradient(1.6px 1.6px at 18% 12%, rgba(223,230,255,.95), transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 24%, rgba(223,230,255,.85), transparent 100%),
    radial-gradient(1.7px 1.7px at 41% 68%, rgba(255,236,205,.90), transparent 100%),
    radial-gradient(1.4px 1.4px at 88% 76%, rgba(223,230,255,.80), transparent 100%),
    /* mid */
    radial-gradient(1.1px 1.1px at 7%  47%, rgba(223,230,255,.62), transparent 100%),
    radial-gradient(1.1px 1.1px at 55% 8%,  rgba(223,230,255,.58), transparent 100%),
    radial-gradient(1.2px 1.2px at 31% 90%, rgba(223,230,255,.60), transparent 100%),
    radial-gradient(1.1px 1.1px at 95% 38%, rgba(255,236,205,.55), transparent 100%),
    radial-gradient(1.1px 1.1px at 64% 56%, rgba(223,230,255,.50), transparent 100%),
    /* far, faint dust */
    radial-gradient(.8px .8px at 26% 31%, rgba(223,230,255,.40), transparent 100%),
    radial-gradient(.8px .8px at 83% 14%, rgba(223,230,255,.36), transparent 100%),
    radial-gradient(.8px .8px at 12% 73%, rgba(223,230,255,.34), transparent 100%),
    radial-gradient(.8px .8px at 48% 43%, rgba(223,230,255,.38), transparent 100%),
    radial-gradient(.8px .8px at 70% 95%, rgba(223,230,255,.32), transparent 100%);
  background-size:
    420px 420px, 420px 420px, 420px 420px, 420px 420px,
    300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
    200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px;
  opacity:.9;
  animation: drift 240s linear infinite;
}

/* A very slow parallax drift — one full cycle takes four minutes, so it
   reads as the sky turning rather than as movement. It animates only
   background-position, which the compositor handles without repainting. */
@keyframes drift{
  from{ background-position:0 0,0 0,0 0,0 0, 0 0,0 0,0 0,0 0,0 0, 0 0,0 0,0 0,0 0,0 0; }
  to{   background-position:420px 420px,-420px 420px,420px -420px,-420px -420px,
                            300px 300px,-300px 300px,300px -300px,-300px 300px,300px 300px,
                            200px 200px,-200px 200px,200px -200px,-200px -200px,200px 200px; }
}

/* Anyone who has asked their system for less movement gets a still sky.
   The stars stay; only the drift stops. */
@media (prefers-reduced-motion: reduce){
  body::after{ animation:none; }
  html{ scroll-behavior:auto; }
}
.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 22px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;margin:0}
h1{font-size:clamp(30px,5vw,46px);letter-spacing:-.02em}
h2{font-size:clamp(21px,3vw,27px)}
h3{font-size:17px}
p{margin:0 0 12px}

/* header */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.top-inner{display:flex;align-items:center;gap:18px;height:66px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:21px;
  font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .mark{width:34px;height:34px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,var(--gold),var(--accent) 72%);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--surface) 70%,transparent)}
.brand small{display:block;font-family:inherit;font-size:11px;font-weight:500;
  letter-spacing:.06em;color:var(--muted);margin-top:-4px}
.nav{display:flex;gap:4px}
.nav a{padding:7px 13px;border-radius:99px;color:var(--ink2);font-size:15px;font-weight:500}
.nav a:hover{background:var(--surface2);text-decoration:none}
.nav a.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.spacer{flex:1}
.langsel select{
  font:inherit;font-size:14px;padding:7px 11px;border-radius:99px;
  border:1px solid var(--line2);background:var(--surface);color:var(--ink);cursor:pointer
}

/* hero */
.hero,.page-head{padding:56px 0 18px;text-align:center;max-width:760px;margin:0 auto}
.page-head{padding-bottom:8px}
.eyebrow{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:12px}
.lede{font-size:17.5px;color:var(--ink2);margin-top:14px}

/* cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:40px 0 10px}
.card{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:30px 28px;box-shadow:var(--shadow);
  color:var(--ink);transition:transform .18s,border-color .18s}
.card:hover{transform:translateY(-3px);border-color:var(--accent);text-decoration:none}
.card .ico{font-size:30px;color:var(--gold);display:block;line-height:1}
.card h2{margin:12px 0 8px}
.card p{color:var(--ink2);font-size:15px;margin-bottom:14px}
.card .go{color:var(--accent);font-weight:600;font-size:15px}

/* sections */
.sec{text-align:center;margin:0 0 22px}
.feat{margin:56px 0}
.grid3,.grid4{display:grid;gap:20px}
.grid3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.grid3>div,.grid4>div{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px}
.grid3 h3,.grid4 h3{color:var(--accent);margin-bottom:7px}
.grid3 p,.grid4 p{color:var(--ink2);font-size:14.5px;margin:0}

.soon{margin:48px 0;text-align:center}
.soon.panel{background:var(--surface2);border:1px solid var(--line);
  border-radius:var(--r);padding:34px 26px}
.soon p{color:var(--ink2);max-width:560px;margin:0 auto 20px}

/* form */
.notify{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.notify input[type=email]{
  font:inherit;font-size:15px;padding:11px 15px;border-radius:10px;min-width:270px;
  border:1px solid var(--line2);background:var(--surface);color:var(--ink)
}
.notify input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn{font:inherit;font-size:15px;font-weight:600;cursor:pointer;padding:11px 24px;
  border:none;border-radius:10px;background:var(--accent);color:var(--on-accent);transition:.15s}
.btn:hover{background:var(--accent2);transform:translateY(-1px)}

/* footer */
footer{margin-top:64px;padding:26px 0 46px;border-top:1px solid var(--line)}
.disc{font-size:13.5px;color:var(--ink2);max-width:720px}
.fine{font-size:12.5px;color:var(--muted);margin:10px 0 0}

@media (max-width:760px){
  .cards{grid-template-columns:1fr}
  .top-inner{height:auto;padding:10px 0;flex-wrap:wrap;gap:10px}
  .nav{order:3;width:100%;justify-content:center}
  .spacer{display:none}
  .hero,.page-head{padding-top:34px}
}

/* ---- calculator ---- */
.formwrap{text-align:left}
.formerr{background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-left:3px solid var(--accent);padding:10px 14px;border-radius:0 8px 8px 0;
  color:var(--ink);font-size:14.5px;margin-bottom:16px}
.bform .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.bform label{display:flex;flex-direction:column;gap:5px}
.bform label span{font-size:12.5px;font-weight:600;color:var(--ink2)}
.bform input,.bform select{font:inherit;font-size:15px;padding:10px 12px;
  border-radius:9px;border:1px solid var(--line2);background:var(--surface);color:var(--ink)}
.bform input:focus,.bform select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.bform .hint{margin:12px 0 16px;font-size:13px;color:var(--muted)}
.result{margin:44px 0}
.note{background:var(--surface2);border-left:3px solid var(--gold);padding:11px 15px;
  border-radius:0 9px 9px 0;font-size:14px;color:var(--ink2);margin:0 0 20px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:28px}
.stats>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px}
.stats span{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.stats strong{display:block;font-family:var(--serif);font-size:21px;margin-top:3px}
.stats em{font-style:normal;font-size:12.5px;color:var(--muted)}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:10px}
.charts>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.charts svg{width:100%;height:auto;display:block}
.mid{text-align:center}.mt{margin-top:34px}
.tscroll{overflow-x:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:4px 10px}
.result table{width:100%;border-collapse:collapse;font-size:14px}
.result th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:10px 9px;border-bottom:1.5px solid var(--line2)}
.result td{padding:9px;border-bottom:1px solid var(--line);vertical-align:top}
.result tr:last-child td{border-bottom:none}
.result tr.on{background:color-mix(in srgb,var(--gold) 13%,transparent)}
.sa{color:var(--muted);font-size:12px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;white-space:nowrap}
.tag{background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:700;
  padding:2px 7px;border-radius:99px;margin-left:6px}
.calc{margin-top:26px;background:var(--surface2);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 18px}
.calc summary{cursor:pointer;font-weight:600;font-size:14.5px}
.calc ul{margin:12px 0 0;padding-left:20px;color:var(--ink2);font-size:13.5px}
.calc li{margin-bottom:5px}

/* ---- interpretation, yogas, horoscope ---- */
.prose{max-width:80ch}
.prose p{color:var(--ink2);font-size:15px;margin:0 0 10px}
.prose p:last-child{margin-bottom:0}
.calc.running{border-color:var(--accent)}
.calc summary .tag{vertical-align:middle}

.ylist{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.ycard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;border-left-width:3px}
.ycard h4{font-family:var(--serif);font-size:16px;font-weight:600;margin:0 0 8px}
.ycard p{color:var(--ink2);font-size:14.5px;margin:0}
.ycard.s-major{border-left-color:var(--gold)}
.ycard.s-moderate{border-left-color:var(--line2)}
.ycard.s-qualified{border-left-color:var(--line2)}
.ycard.s-caution{border-left-color:var(--accent)}
.ycard.s-clear{border-left-color:#5a8a5a}
.ycard.s-neutral{border-left-color:var(--line2)}
.ycard.s-remedy{border-left-color:var(--gold)}

.yearlist{display:grid;gap:10px}
.yearcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 16px;border-left-width:3px}
.yearcard summary{cursor:pointer;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:14.5px}
.yearcard .yr{font-family:var(--serif);font-size:19px;font-weight:700;min-width:3.2em}
.yearcard .prose{margin-top:12px}

.tonetag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;background:var(--surface2);color:var(--ink2)}
.tone-strong{border-left-color:#4b8b4b}
.tone-good{border-left-color:#7aa05a}
.tone-mixed{border-left-color:var(--line2)}
.tone-testing{border-left-color:var(--gold)}
.tone-difficult{border-left-color:var(--accent)}
.tone-strong .tonetag{background:color-mix(in srgb,#4b8b4b 20%,transparent)}
.tone-good .tonetag{background:color-mix(in srgb,#7aa05a 20%,transparent)}
.tone-testing .tonetag{background:color-mix(in srgb,var(--gold) 22%,transparent)}
.tone-difficult .tonetag{background:color-mix(in srgb,var(--accent) 18%,transparent)}

.tabs{display:flex;gap:6px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.tab{padding:8px 18px;border-radius:99px;border:1px solid var(--line2);
  color:var(--ink2);font-size:14.5px;font-weight:500;background:var(--surface)}
.tab:hover{text-decoration:none;border-color:var(--accent)}
.tab.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.rashibar{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.rchip{padding:5px 12px;border-radius:99px;border:1px solid var(--line);
  font-size:13px;color:var(--ink2);background:var(--surface)}
.rchip:hover{text-decoration:none;border-color:var(--accent)}
.rchip.on{background:var(--gold);border-color:var(--gold);color:var(--on-accent);font-weight:600}

.horogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;
  margin-top:18px}
.horocard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;border-left-width:3px}
.horocard header{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px}
.horocard h3{font-size:17px;margin:0}
.horocard .hl{font-weight:600;color:var(--ink);font-size:14.5px;margin:0 0 8px}
.horocard p{color:var(--ink2);font-size:14px;margin:0 0 8px}
.horocard p:last-child{margin-bottom:0}

/* ==================================================================
   Alignment pass
   The report had grown by accretion: every section invented its own
   header, spacing and card shape. These rules give the whole document
   one rhythm — a single section header form, one card, one gap.
   ================================================================== */

:root{
  --gap:18px; --gap-lg:34px;
  --sec-rule:linear-gradient(90deg,transparent,var(--line2) 18%,var(--line2) 82%,transparent);
}

/* one section header everywhere */
.result h3.sec,.result h2.sec{
  display:flex;align-items:center;justify-content:center;gap:14px;
  text-align:center;margin:var(--gap-lg) 0 6px;font-size:20px;letter-spacing:-.01em}
.result h3.sec::before,.result h3.sec::after{
  content:"";flex:1;height:1px;background:var(--sec-rule);max-width:150px}
.sec-note{text-align:center;color:var(--muted);font-size:13.5px;
  max-width:62ch;margin:0 auto var(--gap)}

/* symbols */
.sym{flex:none;vertical-align:middle}
.sym-rashi{color:var(--accent)}
.sym-graha{color:var(--gold)}
.sym-nak{color:var(--gold)}
.sym-pada{color:var(--accent)}
.symrow{display:flex;align-items:center;gap:10px;min-width:0}
.symrow .txt{min-width:0}

/* uniform disclosure card — grahas, bhavas, dashas, years all share it */
.calc,.yearcard{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:0;margin:0}
.calc>summary,.yearcard>summary{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 18px;cursor:pointer;font-size:14.5px;font-weight:600;
  list-style:none}
.calc>summary::-webkit-details-marker,
.yearcard>summary::-webkit-details-marker{display:none}
.calc>summary::after,.yearcard>summary::after{
  content:"";margin-left:auto;width:7px;height:7px;flex:none;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.calc[open]>summary::after,.yearcard[open]>summary::after{
  transform:rotate(-135deg) translateY(-2px)}
.calc>summary:hover,.yearcard>summary:hover{background:var(--surface2)}
.calc .prose,.yearcard .prose,.calc ul{padding:2px 18px 18px}
.calc ul{margin:0}
.stack{display:grid;gap:10px;margin-bottom:var(--gap)}

/* grid of cards, one definition reused */
.grid-cards{display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-bottom:var(--gap)}
.ylist{display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-bottom:var(--gap)}
.ycard,.horocard{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:18px 20px;border-left-width:3px;margin:0}
.ycard h4,.horocard h3{display:flex;align-items:center;gap:9px;
  font-family:var(--serif);font-size:16px;font-weight:600;margin:0 0 9px}

/* headline stats */
.stats{gap:var(--gap);margin-bottom:var(--gap-lg)}
.stats>div{display:flex;align-items:center;gap:12px}
.stats .txt{min-width:0}

/* tables */
.tscroll{margin-bottom:var(--gap)}
.result td .symrow{gap:8px}

/* year list */
.yearlist{display:grid;gap:10px;margin-bottom:var(--gap)}
.yearcard .yr{font-family:var(--serif);font-size:19px;font-weight:700;min-width:3.1em}

/* autocomplete */
.ac-wrap{position:relative;display:flex;flex-direction:column}
.ac-list{position:absolute;top:100%;left:0;right:0;z-index:60;margin:5px 0 0;
  padding:5px;list-style:none;max-height:290px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line2);border-radius:11px;
  box-shadow:var(--shadow)}
.ac-list li{display:flex;flex-direction:column;gap:1px;padding:8px 11px;
  border-radius:7px;cursor:pointer;font-size:14.5px;line-height:1.35}
.ac-list li.on{background:color-mix(in srgb,var(--accent) 13%,transparent)}
.ac-list li b{font-weight:700;color:var(--accent)}
.ac-meta{font-size:12px;color:var(--muted)}
.ac-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* auth + account */
.authwrap{max-width:430px;margin:34px auto}
.authwrap .bform{display:grid;gap:13px}
.authwrap label{display:flex;flex-direction:column;gap:5px}
.authwrap .btn{width:100%;margin-top:4px}
.authsep{display:flex;align-items:center;gap:12px;margin:18px 0;
  color:var(--muted);font-size:13px}
.authsep::before,.authsep::after{content:"";flex:1;height:1px;background:var(--line)}
.altlink{text-align:center;font-size:14px;color:var(--ink2);margin-top:16px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:11px 16px;border:1px solid var(--line2);border-radius:10px;
  background:var(--surface);color:var(--ink);font-size:15px;font-weight:600;
  cursor:pointer}
.gbtn:hover{border-color:var(--accent);text-decoration:none}
.flash{border-left:3px solid var(--gold);background:var(--surface2);
  padding:11px 15px;border-radius:0 9px 9px 0;font-size:14.5px;margin:0 0 16px}
.flash.bad{border-left-color:var(--accent)}
.gateway{text-align:center;background:var(--surface2);border:1px solid var(--line);
  border-radius:var(--r);padding:30px 26px;margin:30px 0}
.gateway h2{margin-bottom:8px}
.gateway p{color:var(--ink2);max-width:52ch;margin:0 auto 18px}

@media (max-width:760px){
  .result h3.sec::before,.result h3.sec::after{display:none}
  .grid-cards,.ylist{grid-template-columns:1fr}
}

/* account chip in the header */
.signin{padding:7px 15px;border-radius:99px;border:1px solid var(--line2);
  font-size:14.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
.signin:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.acct{display:flex;align-items:center;gap:8px;padding:5px 13px 5px 5px;
  border-radius:99px;border:1px solid var(--line2);white-space:nowrap;
  font-size:14px;font-weight:600;color:var(--ink2)}
.acct:hover,.acct.on{border-color:var(--accent);color:var(--accent);text-decoration:none}
.avatar{width:26px;height:26px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-size:12.5px;font-weight:700;color:var(--on-accent);
  background:radial-gradient(circle at 34% 30%,var(--gold),var(--accent) 72%)}
@media (max-width:760px){.acct-name{display:none}}

/* ============================================================
   Numbers module — scores, transparency panels, comparison cards
   ============================================================ */

/* The identifier warning. Deliberately not styled as a dismissible
   toast: it should read as part of the page, not as chrome to skip. */
.privacy-note{max-width:var(--maxw);margin:0 auto 26px;padding:14px 18px;
  background:var(--surface2);border:1px solid var(--line2);
  border-left:4px solid var(--gold);border-radius:8px;
  color:var(--ink2);font-size:.95rem;line-height:1.55}

.basis{color:var(--muted);font-size:.95rem;margin:0 0 6px}
.hint{color:var(--muted);font-size:.9rem;margin:-6px 0 14px}

/* When a comparison had to be restricted to shared tests, that fact is
   part of the result, so it is given the same weight as a heading note. */
.fairness{background:var(--surface2);border:1px dashed var(--line2);
  border-radius:8px;padding:12px 16px;margin:0 0 20px;
  color:var(--ink2);font-size:.93rem}

.scoreline{display:flex;align-items:baseline;gap:12px;margin:20px 0 4px;flex-wrap:wrap}
.scorebig{font-family:var(--serif);font-size:1.6rem;color:var(--ink)}
.band{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line2);
  background:var(--surface2);color:var(--ink2)}
/* #3f7d4e was chosen for the cream theme and never lifted when the
   palette went dark: it measured 3.3:1 on a card, under the 4.5:1 floor
   for text this small. The green below reads at 6.2:1 on the same card. */
.b-very_favourable,.b-strong{border-color:#5cb075;color:#5cb075}
.b-favourable,.b-good{border-color:var(--gold);color:var(--gold)}
.b-neutral,.b-mixed{border-color:var(--line2);color:var(--muted)}
.b-unfavourable,.b-testing{border-color:var(--accent);color:var(--accent)}
.b-very_unfavourable,.b-difficult{border-color:var(--accent2);color:var(--accent2)}
/* Predict emits a 'weak' tone that had no band rule at all, so a weak
   year's label rendered unstyled. It sits between mixed and difficult,
   so it takes the muted treatment with a visible border of its own. */
.b-weak{border-color:var(--line2);color:#9aa3c8}

.sysline{color:var(--muted);font-size:.88rem;margin:0 0 10px}

/* Refusals are shown, never hidden. A user who entered something we
   cannot read needs to see that plainly. */
.unavail{background:var(--surface2);border:1px solid var(--line2);
  border-radius:8px;padding:12px 16px;color:var(--ink2);font-size:.93rem}

.how{margin:14px 0 0;border-top:1px solid var(--line);padding-top:12px}
.how summary{cursor:pointer;color:var(--accent);font-size:.92rem;
  list-style:none;user-select:none}
.how summary::-webkit-details-marker{display:none}
.how summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.how[open] summary::before{content:"▾ "}

.howtab{width:100%;border-collapse:collapse;margin:14px 0 6px;font-size:.9rem}
.howtab th{text-align:left;color:var(--muted);font-weight:600;
  font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding:6px 8px}
.howtab td{border-bottom:1px solid var(--line);padding:9px 8px;vertical-align:top}
.howtab td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.howtab .tot td{font-weight:600;border-bottom:none;border-top:2px solid var(--line2)}
.ckey{font-weight:600;color:var(--ink)}
.cnote{color:var(--ink2);font-size:.88rem;line-height:1.5}

.mtitle{margin:14px 0 6px;font-weight:600;font-size:.9rem;color:var(--ink)}
.whynot{margin:0 0 8px;padding-left:20px;color:var(--ink2);font-size:.88rem;line-height:1.55}
.renorm{color:var(--muted);font-size:.85rem;line-height:1.55;margin:8px 0 0}

.steps{margin:10px 0;padding-left:22px;color:var(--ink2)}
.steps code{background:var(--surface2);padding:2px 7px;border-radius:5px;
  font-size:.9rem;font-variant-numeric:tabular-nums}

/* A comparison card is not a link, so the lift-on-hover of .card is wrong
   here — it implies clickability that does not exist. */
.result .card{transition:none;cursor:default}
.result .card:hover{transform:none;border-color:var(--line)}
.result .card.best{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--shadow)}
.result .card h3{margin:0 0 6px;font-family:var(--serif);font-size:1.15rem;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  background:var(--gold);color:var(--on-accent);padding:3px 9px;border-radius:999px}
.read{color:var(--muted);font-size:.85rem;letter-spacing:.08em;margin:0 0 12px}
.reading{color:var(--ink2);line-height:1.6;margin:12px 0 0;font-size:.95rem}

.mini{width:100%;border-collapse:collapse;font-size:.9rem;margin:8px 0}
.mini th{text-align:left;padding:10px 6px 4px;color:var(--gold);
  font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:1px solid var(--line)}
.mini td{padding:5px 6px;border-bottom:1px solid var(--line);color:var(--ink2)}
.mini td.num{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.mini small{color:var(--muted)}

.recs{margin:16px 0;padding-left:20px;line-height:1.7;color:var(--ink2)}
.recs .fine{display:block;color:var(--muted);font-size:.87rem;margin-top:2px}

@media (max-width:760px){
  .cards{grid-template-columns:1fr;gap:16px}
  .howtab{font-size:.85rem}
  .howtab th:nth-child(2),.howtab td:nth-child(2){display:none}
  .scorebig{font-size:1.4rem}
}

/* ============================================================
   Print — the report as a document
   ============================================================
   No PDF library. Every browser can print to PDF, and a dependency added
   only to re-implement something the browser already does well is a
   dependency that will need patching one day for no gain. */

@media print {
  /* Chrome that means nothing on paper. */
  .top, footer, .langsel, .formwrap, .notify, .signin, .acct,
  .privacy-note, form, .btn, script { display: none !important; }

  :root {
    --bg: #fff; --surface: #fff; --surface2: #fff;
    --ink: #000; --ink2: #222; --muted: #555;
    --line: #bbb; --line2: #999; --shadow: none;
  }

  body { background: #fff; color: #000; font-size: 10.5pt; }
  .wrap { max-width: none; padding: 0; }

  /* The night sky is for the screen. On paper it would be a solid black
     rectangle over every page, or an empty one, depending on whether
     background graphics are switched on. */
  body::before, body::after { display: none !important; content: none !important; }
  .install-btn, .install-note, .savedacts { display: none !important; }

  /* The transparency panels are the substance of the report, so they print
     open. A printed score with its working collapsed would be exactly the
     bare assertion the panels exist to avoid. */
  details.how, details.calc { display: block !important; }
  details.how > summary, details.calc > summary { font-weight: 600; color: #000; }
  details.how[open] summary::before, details.how summary::before { content: ""; }
  details.how > *:not(summary) { display: block !important; }

  /* Keep a card and its score on one page where possible. */
  .card, .ycard, article, .howtab, .mini, table { break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; }
  .cards { display: block; }
  .card { border: 1px solid #bbb; box-shadow: none; margin: 0 0 12px;
          padding: 14px 16px; page-break-inside: avoid; }
  .card.best { border: 2px solid #666; }
  .pill { background: none; color: #000; border: 1px solid #666; }

  .tscroll { overflow: visible; }
  table { width: 100%; font-size: 9.5pt; }
  th, td { padding: 3px 5px; }

  a { color: #000; text-decoration: none; }
  /* A printed link is useless unless its destination is on the page. */
  .reading a[href^="http"]::after,
  .sec-note a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }

  /* The disclaimer must survive onto paper — a printed report gets shown to
     other people, often without the page it came from. */
  .disc { border-top: 1px solid #999; padding-top: 8px; margin-top: 14px;
          font-size: 9pt; color: #000; break-inside: avoid; }

  @page { margin: 16mm 14mm; }
}

/* The print button itself. Hidden on paper by the rule above. */
.printbar { display: flex; gap: 12px; justify-content: flex-end;
  margin: 26px 0 0; }
.printbar .btn.ghost { background: none; color: var(--accent);
  border: 1px solid var(--line2); }
.printbar .btn.ghost:hover { border-color: var(--accent); }

/* ============================================================
   Unified report — wizard, dashboard, contents, swatches
   ============================================================ */

/* The wizard controls exist only once the script has run. Without JS every
   fieldset stays open and the form submits normally, so hiding these by
   default is what makes the no-JS path the correct one rather than a broken
   one. */
.wiz-bar, .wiz-nav [data-prev], .wiz-nav [data-next] { display: none; }
.wiz.wiz-on .wiz-bar { display: flex; }
.wiz.wiz-on .wiz-nav [data-prev],
.wiz.wiz-on .wiz-nav [data-next] { display: inline-block; }

.wiz fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.wiz legend { font-family: var(--serif); font-size: 1.15rem; color: var(--ink);
  padding: 0 0 10px; outline: none; }

.wiz-bar { gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.wiz-dot { width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line2); background: var(--surface); color: var(--muted);
  font-size: .9rem; font-variant-numeric: tabular-nums; transition: .15s; }
.wiz-dot:hover { border-color: var(--accent); }
.wiz-dot.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wiz-dot.done { border-color: var(--gold); color: var(--gold); }

.wiz-nav { display: flex; gap: 12px; align-items: center; margin-top: 8px; }

/* Dashboard */
.dash h3 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 14px; }
.dashgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px; margin: 0 0 12px; }
.dashcell { background: var(--surface2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; }
.dlabel { display: block; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.dval { font-family: var(--serif); font-size: 1.25rem; color: var(--ink);
  font-variant-numeric: tabular-nums; }

/* Contents */
.toc { background: var(--surface2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px 24px; margin: 26px 0; }
.toc ol { columns: 2; column-gap: 32px; margin: 0; padding-left: 20px;
  line-height: 1.9; }
.toc a { color: var(--ink2); }
.toc a:hover { color: var(--accent); }

/* Numbered section headings */
.rsec { display: flex; align-items: baseline; gap: 12px; scroll-margin-top: 20px; }
.rnum { display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--gold); color: var(--on-accent); font-size: .82rem;
  font-variant-numeric: tabular-nums; font-family: system-ui, sans-serif; }

/* Colour swatches. The word is authoritative; the chip is an approximation,
   because traditional sources name colours in words, not hex codes. */
.swatches { list-style: none; display: flex; flex-wrap: wrap; gap: 14px;
  margin: 10px 0 18px; padding: 0; }
.swatches li { display: flex; align-items: center; gap: 8px;
  font-size: .92rem; color: var(--ink2); }
.chip { width: 26px; height: 26px; border-radius: 6px; flex: none;
  border: 1px solid var(--line2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }

.loshu-wrap { display: flex; justify-content: center; margin: 18px 0; }
.charts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 18px 0; }
.charts2 svg { width: 100%; height: auto; }

@media (max-width: 760px) {
  .toc ol { columns: 1; }
  .charts2 { grid-template-columns: 1fr; }
  .dashgrid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}

@media print {
  .wiz-bar, .wiz-nav, .toc { display: none !important; }
  /* Every fieldset open on paper, in case the form is printed at all. */
  .wiz fieldset[hidden] { display: block !important; }
  .rnum { background: none; color: #000; border: 1px solid #666; }
  .chip { border: 1px solid #666; }
  .charts2 { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Phones and small tablets
   =====================================================================
   The desktop layout above is left alone. Everything here is either a
   fix for something that genuinely broke below ~760px, or a concession
   to the fact that a finger is not a mouse pointer.
   ===================================================================== */

/* Nothing may push the page wider than the screen. A single overflowing
   element makes the whole document scroll sideways, which on a phone
   reads as the site being broken rather than as one wide table. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Grid and flex children default to min-width:auto, so a long unbroken
   string — a business name, an email, a Sanskrit compound — refuses to
   shrink and widens its whole track. */
.cards > *, .stats > *, .charts2 > *, .dashgrid > * { min-width: 0; }
.reading, .fine, .note, td, th, li, p { overflow-wrap: break-word; }

/* A table is the one thing that legitimately needs more width than a
   phone has. Rather than crushing the columns to illegibility, let the
   table itself scroll inside the page. */
@media (max-width: 760px) {
  .card table, .result table, section table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .card table th, .card table td,
  .result table th, .result table td,
  section table th, section table td { white-space: nowrap; }
}

@media (max-width: 760px) {
  /* The seven nav links were laid out in a nowrap flex row, so on a
     390px screen they ran 128px off the edge. Wrapping costs one extra
     line and keeps every section reachable without a hamburger. */
  .nav { flex-wrap: wrap; row-gap: 6px; }
  .nav a { padding: 9px 13px; }

  /* 44px is the smallest target most people can hit reliably. */
  .langsel select, .signin, .acct, .rchip, .wiz-dot, .btn {
    min-height: 44px;
  }
  .langsel select { padding-block: 10px; }
  .signin, .acct { display: inline-flex; align-items: center; }
  .rchip { padding: 10px 14px; }
  .wiz-dot { width: 44px; height: 44px; }

  /* iOS zooms the viewport whenever a focused field is under 16px, and
     never zooms back out. Sixteen is not a style choice here. */
  .bform input, .bform select, .bform textarea,
  .notify input, input[type=text], input[type=email],
  input[type=date], input[type=time], input[type=tel],
  input[type=password], select, textarea {
    font-size: 16px;
  }

  .wrap { padding: 0 16px; }
  .notify input[type=email] { min-width: 0; flex: 1 1 100%; }
  .notify .btn { flex: 1 1 100%; }
  .stats { grid-template-columns: 1fr; }
  .loshu-wrap { overflow-x: auto; }
}

/* Notched and rounded screens: keep the sticky header clear of the
   status bar and the footer clear of the home indicator. */
@supports (padding: max(0px)) {
  .top-inner { padding-left: max(0px, env(safe-area-inset-left));
               padding-right: max(0px, env(safe-area-inset-right)); }
  footer { padding-bottom: max(46px, env(safe-area-inset-bottom)); }
}

/* ---- Install as an app ----------------------------------------------
   Hidden until the browser tells us installation is actually on offer,
   so nobody is shown a button that does nothing. */
.install-btn { display: none; }
.install-btn.ready { display: inline-flex; align-items: center; gap: 8px; }
.install-note {
  display: none; margin-top: 12px; font-size: 13.5px; color: var(--ink2);
  background: var(--surface2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; line-height: 1.5;
}
.install-note.ready { display: block; }
.install-note kbd {
  font: inherit; font-weight: 600; color: var(--ink);
  border: 1px solid var(--line2); border-radius: 5px; padding: 1px 6px;
}

/* iPad portrait is 768px wide, which falls just outside the 760px
   breakpoint the header wrapping used — so on exactly the device people
   most often read a long report on, the seven nav links still ran off
   the edge. The header and the tables get the same treatment up to
   1000px; below that width there is never enough room for the nav, the
   brand, the sign-in link and the language picker on one line. */
/* The header needs 1069px to sit on one line — brand, seven nav links,
   the sign-in link and the language picker. The breakpoint was set at
   1000px, which left 1024px (iPad landscape, iPad Pro portrait, small
   laptops) overflowing by 44px. Wrapping up to 1100px covers the real
   width with margin, rather than the round number it was guessed at. */
@media (max-width: 1100px) {
  .top-inner { height: auto; padding: 10px 0; flex-wrap: wrap; gap: 10px; }
  .nav { order: 3; width: 100%; justify-content: center;
         flex-wrap: wrap; row-gap: 6px; }
  .spacer { display: none; }

  .card table, .result table, section table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* auto-fit tracks declared as minmax(320px, 1fr) cannot shrink below
   320px, so on a 320px-wide phone — an iPhone SE, and still the floor
   most layouts are expected to survive — the card was wider than the
   column it sat in and pushed the page sideways. min() lets the track
   fall back to the container width when there is less room than the
   ideal. Above that width nothing changes. */
.grid3  { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.grid4  { grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }
.bform .fgrid { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.charts { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.ylist  { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.horogrid, .ygrid, .cardgrid {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.dashgrid { grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); }

/* A long unbroken run — a transliterated compound, a URL, a date range —
   has no break opportunity, so it overhangs its card rather than wrapping. */
.horocard, .ycard, .card, .result, .reading { overflow-wrap: anywhere; }

/* ---- saved readings on the account page ----------------------------- */
.savedlist{display:grid;gap:10px;margin:10px 0 22px}
.savedrow{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 16px;
}
.savedmeta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 220px}
.savedmeta strong{font-family:var(--serif);font-size:17px}
.savedacts{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.inlineform{display:inline}
.rchip.danger{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  color:var(--accent);background:none;font:inherit;font-size:13px;cursor:pointer}
.rchip.danger:hover{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent)}

/* ---- the sky behind the chrome -------------------------------------- */
/* The header and cards sit on the starfield, so they need a little more
   body than a flat fill: a translucent surface lets a few stars show
   through without ever getting behind the text. */
.top{background:color-mix(in srgb,var(--bg) 82%,transparent)}
.card,.result,.ycard,.horocard,.savedrow,.stats>div{
  background:color-mix(in srgb,var(--surface) 92%,transparent);
}
.btn{box-shadow:0 2px 14px color-mix(in srgb,var(--accent) 30%,transparent)}
.btn:hover{box-shadow:0 4px 20px color-mix(in srgb,var(--accent) 42%,transparent)}
.brand .mark{box-shadow:0 0 18px color-mix(in srgb,var(--gold) 45%,transparent)}

/* Form fields on a dark field read better slightly darker than the card
   they sit in, rather than lighter — the eye takes the inset as depth. */
.bform input,.bform select,.bform textarea,.notify input[type=email]{
  background:color-mix(in srgb,var(--bg) 55%,var(--surface));
}

/* ---- explanation blocks in the report ------------------------------- */
/* A section now opens by saying what it is before showing any numbers.
   The opening sits a little larger than body text and a little quieter
   than a heading, so it reads as orientation rather than as content. */
.sec-intro{
  font-size:15.5px;line-height:1.7;color:var(--ink2);
  border-left:2px solid color-mix(in srgb,var(--gold) 55%,transparent);
  padding-left:14px;margin:0 0 16px;max-width:68ch;
}

/* One computed value, read in full: the number, what the position asks,
   then what this value does in it. */
.posread{
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  border:1px solid var(--line);border-radius:var(--r);
  padding:14px 17px;margin:0 0 12px;
}
.posread h4{
  display:flex;align-items:center;gap:10px;margin:0 0 7px;
  font-family:var(--serif);font-size:17px;font-weight:600;
}
.posread h4 .fine{font-family:system-ui,sans-serif;font-weight:400}
.posread p{margin:0 0 8px;max-width:68ch}
.posread p:last-child{margin-bottom:0}
.rnum.sm{
  width:28px;height:28px;min-width:28px;font-size:14px;
  display:inline-grid;place-items:center;border-radius:50%;
}
.reading{max-width:68ch}

@media (max-width:760px){
  .sec-intro{padding-left:11px;font-size:15px}
  .posread{padding:12px 14px}
}