/* learn.css — acult.in/learn
   Bilingual astrology notes, on the same tokens as cult.html so the teaching
   material reads as part of the instrument rather than a blog bolted to it.

   Two things this has to do that the rest of the site does not.

   First, hold two languages at once. The notes are not an English page with a
   Hindi translation available; both are the text. So there are three reading
   modes — English, Hindi, and both stacked — and the third is the one a
   student actually uses, with the Devanagari set slightly larger and looser
   because it needs the room.

   Second, carry data. Degree ranges and sign tables are the substance of a
   note like this, and they are set in mono throughout, the same way the
   charts are, so a figure looks like a figure wherever it appears. */

:root{
  /* Same navy the engine runs in, token for token, so moving between the
     chart and the note reading about it is not a change of room. */
  --void:#0c1626;
  --deep:#0f1c30;
  --panel:#132139;
  --panel-2:#1a2b47;

  --parch:#e8dcc0;
  --ink:#eef3fb;
  --body:#c6d2e6;
  --muted:#94a3be;

  --brand:#f0546c;
  --brand-deep:#e8455f;
  --brand-soft:rgba(240,84,108,.15);
  --gold:#e0ad4e;
  --gold-soft:rgba(224,173,78,.14);
  --brass:#a5834a;
  --brass-lit:#c9a86a;
  --ok:#3fb984;
  /* A selected control inverts the ink rather than filling with gold.
     Gold as a slab goes muddy in the light theme and shouts in the dark one;
     as a glyph on an inverted fill it stays precious, which is the point. */
  --sel-fill:#e8dcc0;
  --on-sel:#0c1626;
  --sel-glyph:#7a5410;

  --line:rgba(198,210,230,.13);
  --line-2:rgba(198,210,230,.07);
  /* Controls need a boundary you can see without hovering. --line is a hairline
     for dividing content and sits at 1.36:1 against the panel; a button drawn
     with it was a rumour until the pointer arrived, and on a touchscreen the
     pointer never arrives. WCAG asks 3:1 for the edge of a control, so buttons
     get their own token at the alpha that clears it. */
  --ctl-line:rgba(198,210,230,.46);
  --ctl-ink:#c6d2e6;
  --maxw:1180px;
  --r:14px;
  --r-lg:22px;

  --font-display:"Fraunces","Tiro Devanagari Hindi",Georgia,serif;
  --font-body:"Inter","Tiro Devanagari Hindi",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --font-hi:"Tiro Devanagari Hindi","Noto Sans Devanagari",serif;
}
html[data-theme="light"]{
  --void:#eef1f8; --deep:#e5eaf5; --panel:#fffdf9; --panel-2:#faf6ee;
  --parch:#230a4d; --ink:#230a4d; --body:#3a3157; --muted:#6f6789;
  --brand:#d72e47; --brand-deep:#b0203a; --brand-soft:rgba(215,46,71,.10);
  --gold:#7d5409; --gold-soft:rgba(180,131,42,.16);
  --brass:#8a6420; --brass-lit:#6f4f16; --ok:#177249;
  --sel-fill:#2e1063; --on-sel:#fffdf9; --sel-glyph:#e0ad4e;
  --line:rgba(35,10,77,.12); --line-2:rgba(35,10,77,.07);
  --ctl-line:rgba(35,10,77,.46); --ctl-ink:#3a3157;
}

*{box-sizing:border-box;margin:0;padding:0}
/* The browser hides [hidden] elements with its own [hidden]{display:none},
   but any author rule beats a user-agent rule regardless of specificity — so
   .lock{display:flex} kept the subscriber panel on screen even when the
   attribute was set, and .search-clear{display:grid} did the same to the
   clear button. Anything toggled by the hidden attribute needs this. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Nothing may push the document wider than the screen. clip rather than
   hidden because hidden would make this a scroll container and kill the
   sticky header. This is a backstop, not the fix — anything that trips it
   is still a bug worth finding. */
body{overflow-x:clip}
img,svg,video,iframe,pre{max-width:100%}

body{
  background:var(--void);color:var(--body);
  font-family:var(--font-body);font-size:16px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 82% -14%, var(--brand-soft), transparent 62%),
    radial-gradient(720px 460px at 6% 2%, var(--gold-soft), transparent 64%);
}
html[data-theme="light"] body::before{
  background:
    radial-gradient(1000px 560px at 80% -12%, rgba(255,214,140,.42), transparent 62%),
    radial-gradient(820px 500px at 6% 2%, rgba(190,214,255,.55), transparent 64%);
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.narrow{max-width:760px;margin:0 auto}

/* ===== HEADER ============================================================ */
header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* padding-block, not the `padding` shorthand.

   The header element is <div class="wrap nav">, and .wrap supplies the page
   gutter. `padding:14px 0` is shorthand: it sets left and right to zero, and
   .nav is declared after .wrap at the same specificity, so it silently threw
   the gutter away on every header on the site. The mark sat flush against the
   left edge of the screen and the last control against the right, which reads
   as both of them being cut off. Every attempt to fix that by measuring
   widths was treating a symptom that did not exist. */
.nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);padding-block:13px}
.logo{display:block;line-height:0;flex:0 0 auto}
.logo img{display:block;height:28px;width:auto;transition:opacity .25s}
.logo:hover img{opacity:.8}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,1.5vw,22px)}
.nav-links a{color:var(--body);text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap;transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.ctl{display:flex;align-items:center;gap:9px;flex:0 0 auto}

/* The way back into the engine. On the index this replaces the marketing nav
   outright: a reader here is mid-study, and the only navigation that serves
   them is the one that returns them to the chart. Drawn as a solid inverted
   control — the same treatment a selected control gets everywhere else on
   these tokens — so it reads as the primary action in both themes without
   inventing a new colour for it. Height matches .themeb so the header stays
   one row of matched controls. */
.appbtn{
  margin-left:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 15px;border-radius:999px;
  border:1px solid transparent;
  background:var(--sel-fill);color:var(--on-sel);
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  text-decoration:none;
  transition:background .18s,color .18s;
}
.appbtn svg{width:13px;height:13px;flex:0 0 auto;transition:transform .18s}
.appbtn:hover{background:var(--gold);color:var(--on-sel)}
.appbtn:hover svg{transform:translateX(2px)}
.appbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Footer copy of the same action. The footer centres its children, so the
   auto margin is dropped rather than fought with. */
.appbtn-f{margin:0 0 18px}

.themeb{
  width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:999px;background:var(--panel);
  color:var(--body);cursor:pointer;transition:.16s;padding:0;
}
.themeb:hover{border-color:var(--gold);color:var(--gold)}
.themeb svg{width:16px;height:16px}
.themeb .ic-sun{display:none}
html[data-theme="light"] .themeb .ic-sun{display:block}
html[data-theme="light"] .themeb .ic-moon{display:none}

/* three reading modes, not two — "both" is the one a student lives in */
.lang{display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px}
.lang button{
  border:0;background:none;color:var(--muted);font-family:var(--font-mono);
  font-size:10px;font-weight:500;letter-spacing:.1em;padding:6px 11px;
  border-radius:999px;cursor:pointer;transition:.16s;
}
.lang button:hover{color:var(--ink)}
.lang button.on{background:var(--sel-fill);color:var(--on-sel);font-weight:700}
html[data-theme="light"] .lang button.on{color:#fff}

/* ===== THE MASTHEAD ======================================================
   The address is the title. Set as a path rather than a phrase, in the mono
   face the charts use, it says what the section is and where it lives in one
   line — and a URL typeset properly is a stronger mark here than a word like
   "Learn" in a display serif, which every site has. */
.mast{padding:clamp(44px,7vw,86px) 0 0}
.mast-eye{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--brass-lit);
  display:block;margin-bottom:18px;
}
.mast-url{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(30px,7.4vw,72px);line-height:1;letter-spacing:-.03em;
  display:flex;align-items:baseline;flex-wrap:wrap;
}
.mast-dom{color:var(--muted)}
.mast-sl{color:var(--brass);padding:0 .06em}
.mast-sec{
  color:var(--gold);position:relative;
}
/* the cursor a path invites */
.mast-sec::after{
  content:"";display:inline-block;width:.07em;height:.78em;
  background:var(--brand);margin-left:.1em;vertical-align:-.04em;
  animation:blink 1.15s steps(1) infinite;
}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){ .mast-sec::after{animation:none;opacity:.65} }

.mast-rule{height:1px;background:var(--line);margin:clamp(26px,4vw,40px) 0 22px}
/* The hero chart is absolutely positioned at the right of the masthead and the
   rule sits at exactly its height, so a full-width rule drew a line straight
   across the kundli. Stop it short of the chart; below 820px the chart is
   hidden and the rule can run the whole way. */
@media(min-width:821px){
  .mast-rule{width:calc(100% - min(268px,34vw) - 36px)}
}
.mast-lede{font-size:clamp(16px,1.5vw,18.5px);color:var(--muted);max-width:60ch;line-height:1.68}

/* ===== NOTE INDEX ======================================================== */
.notes{padding:8px 0 clamp(56px,8vw,96px)}
.note-card{
  display:block;text-decoration:none;color:inherit;position:relative;
  padding:26px 26px 26px 30px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);margin-bottom:12px;transition:border-color .18s,background .18s;
}
.note-card::before{
  content:"";position:absolute;left:0;top:22px;bottom:22px;width:2px;
  border-radius:2px;background:var(--line);transition:background .18s,top .18s,bottom .18s;
}
.note-card:hover{border-color:var(--line);background:var(--panel-2)}
.note-card:hover::before{background:var(--gold);top:16px;bottom:16px}
.note-kicker{
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-lit);display:flex;gap:14px;align-items:center;margin-bottom:11px;
}
.note-kicker span:nth-child(2){color:var(--muted)}
.note-title{
  font-family:var(--font-display);font-size:clamp(21px,2.4vw,27px);font-weight:600;
  color:var(--parch);letter-spacing:-.018em;line-height:1.18;margin-bottom:4px;
}
.note-title-hi{font-family:var(--font-hi);font-size:19px;color:var(--brass-lit);line-height:1.5;margin-bottom:9px}
.note-sub{font-size:15px;color:var(--muted);max-width:64ch}
.note-soon{opacity:.55;pointer-events:none}
.note-soon .note-kicker span:first-child{color:var(--muted)}

/* ===== A NOTE ============================================================ */
.note{padding:0 0 clamp(60px,9vw,110px)}
.note h2{
  font-family:var(--font-display);font-size:clamp(23px,2.7vw,31px);font-weight:600;
  color:var(--parch);letter-spacing:-.018em;line-height:1.2;margin:52px 0 6px;
}
.note h2:first-of-type{margin-top:34px}
.note h2 .hi{font-family:var(--font-hi);font-size:.72em;color:var(--brass-lit);display:block;margin-top:6px;font-weight:400}
.note h3{
  font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink);
  margin:32px 0 4px;letter-spacing:-.01em;
}
.note h3 .hi{font-family:var(--font-hi);font-size:.82em;color:var(--brass-lit);display:block;margin-top:4px;font-weight:400;line-height:1.5}

/* ===== A MERGED NOTE =====================================================
   Seven or nine chapters in one document. Two things have to be true for that
   to read as a book rather than as pages glued end to end: a reader must be
   able to see the whole shape before starting, and must always know which
   chapter they are standing in. The index below does the first, the chapter
   eyebrow does the second, and the medals turn the index into the scoreboard
   so progress is legible without a second HUD. */
.chp-index{
  margin:30px 0 8px;padding:18px 18px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
}
.ci-head{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px;
}
.ci-head .hi{font-family:var(--font-hi);letter-spacing:.04em;text-transform:none}
.ci{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;gap:12px;
  padding:9px 0;border-top:1px solid var(--line-2);text-decoration:none;
}
.ci:first-of-type{border-top:0}
.ci-n{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);font-style:normal}
.ci-t{color:var(--body);font-size:15px;line-height:1.45;transition:color .18s}
.ci-t .hi{display:block;font-size:.92em;color:var(--brass-lit);margin-top:2px}
.ci-m{font-family:var(--font-mono);font-size:11px;color:var(--muted);white-space:nowrap}
.ci-m .hi{font-family:var(--font-hi)}
/* Unearned reads as an outline, earned as a filled mark. A medal that is
   merely dimmer than its neighbour is not legible as "not yet". */
.ci-seal{font-style:normal;font-size:13px;color:var(--line);transition:color .25s}
.ci-seal.on{color:var(--gold)}
.ci:hover .ci-t{color:var(--gold)}
.ci.done .ci-n{color:var(--gold)}
.ci:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

.chp{scroll-margin-top:78px}
.chp-eye{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:56px 0 0;
}
.chp-eye .hi{font-family:var(--font-hi);letter-spacing:.04em;text-transform:none;margin-left:8px}
.chp-eye+h2{margin-top:6px}
.chp+.chp .chp-eye{padding-top:34px;border-top:1px solid var(--line)}
.chp-syn .chp-eye{padding-top:34px;border-top:1px solid var(--line)}
.note p{margin:0 0 15px;max-width:66ch}
.note .en{color:var(--body)}
.note .hi{font-family:var(--font-hi);font-size:1.02em;line-height:1.95;color:var(--brass-lit)}
/* Those two paint prose, and they were also painting the labels inside every
   control in a note — a chip, a quiz option, a button. A rule applied straight
   to an element beats a colour inherited from its parent no matter how
   specific the parent's rule is, so a selected chip set its own colour and the
   words on it kept the body colour regardless. Controls opt back into
   inheriting, which is what a label should always have done. */
.note button .en,.note button .hi,
.note select .en,.note select .hi,
.note .lock-go .en,.note .lock-go .hi,
.note .lock-alt .en,.note .lock-alt .hi,
.note .note-card .en,.note .note-card .hi{color:inherit}

/* the pairing: in "both" mode the Hindi hangs off a hairline so the eye can
   tell at a glance which language it is in without reading a word */
body[data-lang="both"] .note .hi{
  border-left:1px solid var(--line);padding-left:16px;margin-top:-6px;margin-bottom:20px;
}
body[data-lang="en"] .hi{display:none}
body[data-lang="hi"] .en{display:none}

.note strong{color:var(--ink);font-weight:600}
.note code,.deg{
  font-family:var(--font-mono);font-size:.88em;color:var(--gold);
  background:var(--gold-soft);padding:1px 6px;border-radius:4px;
}
.note ul,.note ol{margin:0 0 16px;padding-left:22px;max-width:66ch}
.note li{margin-bottom:8px}
.note li::marker{color:var(--brass)}

/* a pulled-out correction — the thing a reader is most likely to have wrong */
.callout{
  border:1px solid var(--line);border-left:2px solid var(--brand);
  border-radius:0 var(--r) var(--r) 0;background:var(--panel);
  padding:18px 22px;margin:26px 0;
}
.callout .k{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand);display:block;margin-bottom:9px;
}
.callout p:last-child{margin-bottom:0}
.callout.gold{border-left-color:var(--gold)}
.callout.gold .k{color:var(--gold)}

/* ===== DATA TABLE ======================================================== */
.tw{overflow-x:auto;margin:22px 0 8px;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:14px}
/* The 520px floor belongs to the scroller, not to every table on the page.

   It used to sit on `table` itself, so any table that had not been wrapped in
   a .tw pushed the document out to 520px on a 360px phone. The page then
   scrolled sideways — and because the header is position:sticky it stays at
   viewport width while the content moves under it, so scrolling right cut the
   logo off the left edge and the controls off the right. That is what was
   being reported as "the header is cut": the header was fine, the page was
   wider than the screen. learn.js now wraps any bare table so this floor
   still applies where it was meant to. */
.tw table{min-width:520px}
thead th{
  text-align:left;padding:12px 14px;background:var(--panel-2);
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--brass-lit);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel)}
.g{font-family:var(--font-display);font-weight:600;color:var(--parch);font-size:15px;white-space:nowrap}
.m{font-family:var(--font-mono);font-size:13px;color:var(--gold);white-space:nowrap}
.mm{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
.cap{font-size:12.5px;color:var(--muted);margin:10px 2px 0;line-height:1.6}

/* ===== FOOTER ============================================================ */
footer{border-top:1px solid var(--line);padding:34px 0 44px;text-align:center}
.flinks{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-bottom:14px}
.flinks a{font-size:13.5px;color:var(--muted);text-decoration:none;transition:color .2s}
.flinks a:hover{color:var(--gold)}
.fcopy{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}

.back{
  display:inline-block;margin:26px 0 0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color .2s;
}
.back:hover{color:var(--gold)}

/* ---- the header menu on a phone -------------------------------------

   The links used to be deleted under 640px rather than collapsed — the rule
   below simply said `.nav-links{display:none}` with nothing to replace them,
   so from a phone there was no route to the engine, Judgement or Pricing at
   all. They are now behind a button. Only the two things a reader touches
   while reading — light/dark and the reading language — stay out in the row. */
.navburger{display:none}
.navmenu{display:none}

@media(max-width:640px){
  .wrap{padding:0 16px}
  body{font-size:15.5px}
  .note p{max-width:none}

  /* The header carries four things on a phone — mark, progress, theme and
     reading mode — and at desktop metrics they came to about 377px against
     the 358px an iPhone actually offers. The row had no choice but to crush
     itself against both edges, which is what made it feel cheap.

     Nothing is dropped. Everything steps down together and keeps one height,
     one radius and one gap, so the row reads as a set of matched controls
     with air around them rather than as whatever happened to fit. */
  /* 11px of vertical padding put the 30px controls within about 6px of the top
     and bottom of a ~43px bar, so the pills read as touching both edges. 22px
     gives them real margins and brings the row to a normal mobile app-bar
     height. This is vertical only — no width, gap or horizontal padding
     changes, so the row's horizontal budget is untouched. */
  .nav{gap:10px;padding-block:22px;min-height:74px}
  .logo img{height:24px}

  .nav{position:relative}
  .navburger{
    display:grid;place-items:center;flex:0 0 auto;
    width:30px;height:30px;border-radius:50%;
    border:1px solid var(--line);background:none;color:inherit;cursor:pointer;
  }
  .navburger svg{width:15px;height:15px}
  .navburger[aria-expanded="true"]{border-color:var(--gold);color:var(--gold)}
  .navmenu{
    display:block;position:absolute;top:calc(100% - 14px);right:0;
    min-width:206px;padding:6px;border-radius:14px;z-index:70;
    background:var(--card,var(--bg));border:1px solid var(--line);
    box-shadow:0 18px 44px rgba(0,0,0,.3);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .16s,transform .16s,visibility .16s;
  }
  .navmenu.open{opacity:1;visibility:visible;transform:none}
  .navmenu-item{
    display:flex;align-items:center;gap:10px;
    padding:0 12px;height:42px;border-radius:9px;
    font-size:14px;color:inherit;text-decoration:none;white-space:nowrap;
    width:auto;justify-content:flex-start;background:none;border:0;
  }
  .navmenu-item:hover{background:var(--line-2)}
  .navmenu-item svg{width:16px;height:16px;flex:0 0 auto}
  .navmenu-item .lbl{display:inline}
  .nav-links{display:none}
  .ctl{margin-left:auto;gap:6px}
  /* The button already claims the free space; a second auto margin on .ctl
     would split it and leave the row floating in the middle. */
  .nav .appbtn+.ctl{margin-left:0}

  /* The LABEL was what broke this row. "OPEN ACULT" at these metrics measures
     about 116px, and the header had already been stepped down to fit a 358px
     phone with the mark, progress, theme and reading mode in it — there was no
     116px going spare, so the row overflowed by 38px on a 390px screen and 68px
     on a 360px one.

     On a phone the control keeps its job and drops its words: a 30px round
     control, the same size and gap as .themeb, so the row still reads as one
     set of matched controls. Width is now fixed rather than a function of how
     long the label happens to be, which is what made it fragile. The mark to
     its left also links to /, so the way back is stated twice either way. */
  .appbtn{width:30px;height:30px;padding:0;gap:0;border-radius:50%;
    justify-content:center;font-size:0;letter-spacing:0}
  .appbtn .lbl{display:none}
  .appbtn svg{width:15px;height:15px}
  /* the footer copy has a whole row to itself and keeps its label */
  .appbtn-f{width:auto;height:34px;padding:0 15px;gap:7px;border-radius:999px;
    font-size:11px;letter-spacing:.1em}
  .appbtn-f .lbl{display:inline}
  .appbtn-f svg{width:13px;height:13px}

  .themeb{width:30px;height:30px}
  .themeb svg{width:15px;height:15px}

  .xp-pill{height:30px;padding:0 9px 0 8px;gap:5px}
  /* the number is the information; the ring was decoration, and it is the
     first thing worth spending to buy the row its margins back */
  .xp-ring{display:none}

  .lang{padding:2px;gap:1px}
  .lang button{padding:5px 9px;font-size:9.5px;letter-spacing:.06em}
}

/* Small phones. The same set, one step tighter, still nothing hidden. */
@media(max-width:380px){
  .wrap{padding:0 14px}
  .logo img{height:22px}
  .lang button{padding:5px 7px;letter-spacing:.04em}
  /* one step tighter: the controls are already smaller here */
  .nav{padding-block:18px;min-height:66px}
  /* At 320px even the round control does not fit — the row needs 311px against
     292px of usable width. The mark keeps the way back, so the duplicate goes
     rather than the row crushing itself again. */
  /* Dropped from the row at this width, but no longer lost — it is in the
     menu, with its label, where there is room for the words. */
  .nav .appbtn{display:none}
  .xp-n{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  body,.note-card,.note-card::before,.themeb,.back,.appbtn,.appbtn svg{transition:none}
}

/* ==========================================================================
   PART TWO — THE INTERACTIVE LAYER
   --------------------------------------------------------------------------
   Everything below serves one idea: in a note about astrology the chart is
   not an illustration of the argument, it *is* the argument, so it has to be
   operable. That pushes the visual language further than the rest of the
   site — colour used semantically rather than decoratively, motion used to
   show a graha travelling rather than to make a page feel alive.

   The discipline that keeps it from becoming noisy: colour here always means
   dignity, and nothing else. Seven states, seven hues, used identically in
   the chart, the ribbon, the verdict and the legend. If a colour appears, it
   is making a claim about strength.
   ========================================================================== */

:root{
  --dg-exalt:#e0ad4e;
  --dg-moola:#3fb984;
  --dg-own:#5f9fe8;
  --dg-friend:#9b86e6;
  --dg-neutral:#94a3be;
  --dg-enemy:#c8794f;
  --dg-debil:#f0546c;
  --k-line:rgba(232,220,192,.30);
  --k-fill:rgba(232,220,192,.03);
}
html[data-theme="light"]{
  --dg-exalt:#8f6209;
  --dg-moola:#0f7d55;
  --dg-own:#2a5fb8;
  --dg-friend:#5b45b8;
  --dg-neutral:#6f6889;
  --dg-enemy:#9c4c22;
  --dg-debil:#d0243f;
  --k-line:rgba(26,22,51,.34);
  --k-fill:rgba(26,22,51,.02);
}

.dg-exalt{--dg:var(--dg-exalt)}   .dg-moola{--dg:var(--dg-moola)}
.dg-own{--dg:var(--dg-own)}       .dg-friend{--dg:var(--dg-friend)}
.dg-neutral{--dg:var(--dg-neutral)} .dg-enemy{--dg:var(--dg-enemy)}
.dg-debil{--dg:var(--dg-debil)}

/* bilingual chrome: in "both" mode the two labels share a line with a brass
   interpunct, except where the text is a full sentence and wants its own */
body[data-lang="both"] .ac-lab .hi::before,
body[data-lang="both"] .ac-chal .hi::before,
body[data-lang="both"] .note-kicker .hi::before,
body[data-lang="both"] .nc-earned .hi::before,
body[data-lang="both"] .note-count .hi::before,
body[data-lang="both"] .q-tag .hi::before,
body[data-lang="both"] .rv-btn .hi::before,
body[data-lang="both"] .xp-toast .hi::before,
body[data-lang="both"] .search-wrap .hi::before,
body[data-lang="both"] .chip .hi::before{
  content:"·";margin:0 .42em;color:var(--brass);opacity:.8;
}
.ac-lab .hi,.ac-chal .hi,.ac-quiz .hi,.ac-reveal .hi,.no-hit .hi{font-family:var(--font-hi)}
body[data-lang="both"] .lv-rule .hi,
body[data-lang="both"] .lab-hint .hi,
body[data-lang="both"] .ch-why .hi,
body[data-lang="both"] .q-why .hi,
body[data-lang="both"] .fig-cap .hi{
  display:block;margin-top:7px;padding-left:13px;border-left:1px solid var(--line);
}

/* ===== SEARCH ============================================================
   The field is set in mono and shaped like the address in the masthead,
   because on this section a query is a path into the material. */
.finder{margin:clamp(26px,4vw,40px) 0 clamp(20px,3vw,30px)}
.search-wrap{position:relative;display:flex;align-items:center}
.search-wrap>svg{
  position:absolute;left:19px;width:17px;height:17px;color:var(--brass);
  pointer-events:none;
}
#noteSearch{
  width:100%;appearance:none;
  font-family:var(--font-mono);font-size:clamp(14px,1.5vw,16px);letter-spacing:-.01em;
  color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;
  padding:16px 52px 16px 48px;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
#noteSearch::placeholder{color:var(--muted);letter-spacing:0}
#noteSearch:focus{
  outline:none;border-color:var(--gold);background:var(--panel-2);
  box-shadow:0 0 0 4px var(--gold-soft);
}
.search-clear{
  position:absolute;right:14px;width:26px;height:26px;border-radius:999px;
  border:0;background:var(--panel-2);color:var(--muted);cursor:pointer;
  font-size:16px;line-height:1;display:grid;place-items:center;transition:.15s;
}
.search-clear:hover{color:var(--brand);background:var(--brand-soft)}
.search-key{
  position:absolute;right:52px;font-family:var(--font-mono);font-size:10px;
  color:var(--muted);border:1px solid var(--line);border-radius:5px;
  padding:2px 6px;pointer-events:none;
}
#noteSearch:focus~.search-key{opacity:0}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:500;color:var(--body);
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;cursor:pointer;transition:.15s;
}
.chip:hover{border-color:var(--brass);color:var(--ink)}
.chip b{
  font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--muted);
}
.chip.on{background:var(--sel-fill);border-color:var(--sel-fill);color:var(--on-sel)}
.chip.on b{color:var(--on-sel);opacity:.62}
html[data-theme="light"] .chip.on,html[data-theme="light"] .chip.on b{color:#fff}

.note-count{
  display:block;margin:20px 2px 12px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass-lit);
}
.no-hit{
  border:1px dashed var(--line);border-radius:var(--r-lg);
  padding:34px 28px;text-align:center;color:var(--muted);
}
.no-hit p{max-width:52ch;margin:0 auto 6px}
.no-hit b{color:var(--gold)}
.no-hit-b{
  margin-top:16px;font-size:13px;color:var(--ink);background:var(--panel-2);
  border:1px solid var(--ctl-line);border-radius:999px;padding:9px 20px;cursor:pointer;
}
.no-hit-b:hover{border-color:var(--gold);color:var(--gold)}
mark{background:var(--gold-soft);color:var(--gold);border-radius:3px;padding:0 2px}

/* ===== CARDS, REWORKED ===================================================
   Each topic carries a mark drawn from its own subject — the diamond of the
   chart for dignity, the ruled square for the bhavas, a ray for drishti. */
.note-card{display:flex;gap:20px;align-items:flex-start;padding:24px 26px}
.note-card::before{display:none}
.nc-sigil{
  flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:12px;background:var(--panel-2);
  color:var(--brass);transition:color .2s,border-color .2s,transform .35s;
}
.nc-sigil svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4}
.nc-sigil svg .f{fill:currentColor;opacity:.22;stroke:none}
.nc-sigil svg .r{stroke-dasharray:3 3}
.note-card:hover .nc-sigil{color:var(--gold);border-color:var(--gold);transform:rotate(45deg)}
.note-card:hover .nc-sigil svg{transform:rotate(-45deg)}
.nc-body{min-width:0}
.note-kicker{flex-wrap:wrap;gap:6px 12px}
.nk-topic{color:var(--gold)}
.nk-lv,.nk-min{color:var(--muted)}
.nk-lab{color:var(--dg-moola)}
.nk-soon{color:var(--brand)}
.nc-earned{
  margin-top:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dg-exalt);
}
.note-card.is-soon{opacity:.62;cursor:default}
.note-card.is-soon:hover{background:var(--panel);border-color:var(--line)}
.note-card.is-soon:hover .nc-sigil{color:var(--brass);border-color:var(--line);transform:none}
.note-card.is-read .nc-sigil{border-color:var(--dg-moola);color:var(--dg-moola)}
.note-card.is-read .nc-body::after{
  content:"✓";float:right;margin-top:-46px;color:var(--dg-moola);font-size:13px;
}

/* ===== THE CHART =========================================================
   Rules stay hairline and unfilled; the only weight in the diagram is the
   graha tokens and whatever house is currently under discussion. */
.ac-kundli{width:100%;max-width:420px;margin:0 auto}
.k-svg{width:100%;height:auto;display:block;overflow:visible}
.k-rule{fill:none;stroke:var(--k-line);stroke-width:1.15;vector-effect:non-scaling-stroke}
.k-cell{fill:var(--k-fill);stroke:none;transition:fill .3s}
.k-cell.on{fill:color-mix(in srgb,var(--dg,var(--gold)) 17%,transparent)}
.k-cell.on.exalt{fill:color-mix(in srgb,var(--dg-exalt) 17%,transparent)}
.k-cell.on.moola{fill:color-mix(in srgb,var(--dg-moola) 17%,transparent)}
.k-cell.on.own{fill:color-mix(in srgb,var(--dg-own) 17%,transparent)}
.k-cell.on.friend{fill:color-mix(in srgb,var(--dg-friend) 16%,transparent)}
.k-cell.on.neutral{fill:color-mix(in srgb,var(--dg-neutral) 18%,transparent)}
.k-cell.on.enemy{fill:color-mix(in srgb,var(--dg-enemy) 17%,transparent)}
.k-cell.on.debil{fill:color-mix(in srgb,var(--dg-debil) 15%,transparent)}
.k-sign{
  font-family:var(--font-mono);font-size:14px;fill:var(--muted);
  text-anchor:middle;dominant-baseline:middle;
}
.k-sign.asc{fill:var(--brand);font-weight:700}
.k-signn{
  font-family:var(--font-mono);font-size:8.5px;fill:var(--brass);
  text-anchor:middle;dominant-baseline:middle;letter-spacing:.06em;
}
.k-graha{
  transition:transform .68s cubic-bezier(.65,.02,.18,1);
  will-change:transform;
}
.k-gl{
  font-family:var(--font-mono);font-size:15px;font-weight:700;
  fill:var(--dg,var(--parch));text-anchor:middle;dominant-baseline:middle;
}
.k-graha.dg-exalt .k-gl{fill:var(--dg-exalt)} .k-graha.dg-moola .k-gl{fill:var(--dg-moola)}
.k-graha.dg-own .k-gl{fill:var(--dg-own)}     .k-graha.dg-friend .k-gl{fill:var(--dg-friend)}
.k-graha.dg-neutral .k-gl{fill:var(--dg-neutral)} .k-graha.dg-enemy .k-gl{fill:var(--dg-enemy)}
.k-graha.dg-debil .k-gl{fill:var(--dg-debil)}
.k-gd{
  font-family:var(--font-mono);font-size:9px;fill:var(--muted);
  text-anchor:middle;dominant-baseline:middle;
}
.k-graha.moved .k-gl{animation:tokPop .7s ease}
@keyframes tokPop{0%{opacity:.35}40%{opacity:1}100%{opacity:1}}
.k-ray{
  fill:none;stroke:var(--gold);stroke-width:1.3;opacity:.5;
  stroke-dasharray:4 4;vector-effect:non-scaling-stroke;
}
.k-ray.full{opacity:.85;stroke-dasharray:none;stroke-width:1.6}

/* ===== THE LAB ===========================================================
   Signature element of the section. Selector on top, chart and verdict side
   by side, and under both the whole classical table for that graha drawn to
   scale across 360°. */
.ac-lab{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  padding:20px;margin:32px 0;position:relative;overflow:hidden;
}
.ac-lab::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 260px at 78% -20%,var(--gold-soft),transparent 68%);
}
.ac-lab>*{position:relative}
.lab-pick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.lab-g{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:999px;background:var(--panel);
  color:var(--body);font-size:12.5px;padding:6px 13px 6px 9px;cursor:pointer;transition:.15s;
}
.lab-g:hover{border-color:var(--brass);color:var(--ink)}
.lab-g .lg-gl{font-size:15px;color:var(--brass-lit);line-height:1}
.lab-g.on{background:var(--sel-fill);border-color:var(--sel-fill);color:var(--on-sel);font-weight:600}
.lab-g.on .lg-gl{color:var(--sel-glyph)}

.lab-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:start}
.lab-chart{min-width:0}
.lab-cap{
  margin-top:10px;text-align:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass-lit);
}
.lab-lagna{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:none;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:7px;padding:5px 8px;margin-left:6px;cursor:pointer;
}
.lab-lagna:focus{outline:2px solid var(--gold);outline-offset:1px}

.lab-verdict{min-width:0}
.lv-where{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.lw-g{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--parch)}
.lw-p{font-family:var(--font-mono);font-size:12.5px;color:var(--muted)}
.lw-p b{color:var(--gold);font-weight:500}
.lv-badge{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--font-display);font-size:clamp(22px,3vw,30px);font-weight:700;
  letter-spacing:-.02em;line-height:1.1;color:var(--dg,var(--parch));
}
.lv-badge em{
  font-family:var(--font-mono);font-style:normal;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.lv-meter{
  height:5px;border-radius:3px;background:var(--line-2);margin:12px 0 14px;overflow:hidden;
}
.lv-meter i{
  display:block;height:100%;border-radius:3px;background:var(--dg,var(--gold));
  transition:width .5s cubic-bezier(.5,0,.2,1),background .3s;
}
.lv-rule{font-size:14px;color:var(--body);line-height:1.62;margin-bottom:14px}
.lv-traps{display:flex;flex-direction:column;gap:6px}
.trap{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-left:2px solid var(--brand);border-radius:0 9px 9px 0;
  background:var(--panel);padding:9px 13px;
}
.trap.ok{border-left-color:var(--dg-moola)}
.tk-k{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.tk-v{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--dg,var(--ink));white-space:nowrap}

/* the ribbon: the classical table for one graha, drawn to scale */
.lab-track{position:relative;margin:22px 0 0;padding-bottom:26px}
.lab-ribbon{
  position:relative;height:26px;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);
}
.lab-ribbon .rb{position:absolute;top:0;bottom:0;background:var(--dg);opacity:.82}
.lab-ribbon .rb.dg-neutral,.lab-ribbon .rb+.rb{opacity:.82}
.lab-ticks{position:relative;height:0}
.lab-ticks .tk{position:absolute;top:4px;transform:translateX(-50%)}
.lab-ticks .tk b{
  font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:.08em;
  color:var(--muted);
}
.lab-ticks .tk.par b{color:var(--gold)}
.lab-ticks .tk.par::before{
  content:"";position:absolute;left:50%;top:-27px;width:1px;height:24px;
  background:var(--gold);
}
.lab-range{
  position:absolute;left:0;top:-6px;width:100%;height:38px;
  appearance:none;-webkit-appearance:none;background:none;margin:0;cursor:ew-resize;
}
.lab-range:focus{outline:none}
.lab-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:6px;height:38px;border-radius:3px;
  background:var(--parch);border:1px solid var(--void);
  box-shadow:0 0 0 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.4);cursor:ew-resize;
}
.lab-range::-moz-range-thumb{
  width:6px;height:38px;border-radius:3px;background:var(--parch);
  border:1px solid var(--void);cursor:ew-resize;
}
.lab-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--gold)}

.lab-legend{display:flex;flex-wrap:wrap;gap:5px 15px;margin-top:20px}
.lab-legend .ll{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.lab-legend .ll i{width:9px;height:9px;border-radius:2px;background:var(--dg)}
.lab-hint{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.62}

@media(max-width:720px){
  .lab-stage{grid-template-columns:1fr}
  .ac-lab{padding:16px 14px}
}

/* ===== THE CHALLENGE ===================================================== */
.ac-chal{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
  padding:20px 22px;margin:32px 0;
}
.ch-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ch-eye{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brand);
}
.ch-score{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);letter-spacing:.1em}
.ch-score b{color:var(--gold)}
.ch-idle{font-size:14px;color:var(--muted);margin:0}
.ch-place{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);
  padding:16px 18px;
}
.cp-gl{font-size:24px;color:var(--brass-lit);line-height:1}
.cp-n{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--parch)}
.cp-d{font-family:var(--font-mono);font-size:19px;color:var(--gold)}
.cp-s{font-family:var(--font-display);font-size:17px;color:var(--body)}
.ch-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.ch-opt,.q-opt{
  text-align:left;font-size:14px;color:var(--ink);background:var(--panel-2);
  border:1px solid var(--line);border-radius:11px;padding:12px 15px;cursor:pointer;
  transition:.15s;font-family:inherit;
}
.ch-opt:hover:not(:disabled),.q-opt:hover{border-color:var(--gold);color:var(--gold)}
.ch-opt.right,.q-opt.right{border-color:var(--dg-moola);color:var(--dg-moola);background:color-mix(in srgb,var(--dg-moola) 10%,transparent)}
.ch-opt.wrong,.q-opt.wrong{border-color:var(--dg-debil);color:var(--dg-debil);background:color-mix(in srgb,var(--dg-debil) 10%,transparent)}
.ch-opt.dim,.q-opt.dim{opacity:.4}
.ch-opt:disabled{cursor:default}
.ch-why,.q-why{
  display:none;margin-top:12px;font-size:13.5px;color:var(--body);line-height:1.62;
  border-left:2px solid var(--line);padding-left:14px;
}
.ch-why.show,.q-why.show{display:block}
.ch-why.good{border-left-color:var(--dg-moola)}
.ch-why.bad{border-left-color:var(--dg-debil)}
.cw-k{
  display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}
.ch-why.good .cw-k{color:var(--dg-moola)}
.ch-why.bad .cw-k{color:var(--dg-debil)}
.ch-foot{margin-top:14px}
.ch-go{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-sel);background:var(--sel-fill);border:0;border-radius:999px;
  padding:11px 26px;cursor:pointer;transition:.15s;
}
.ch-go:hover{box-shadow:0 0 0 3px var(--gold-soft)}
.ch-done{display:flex;align-items:baseline;gap:14px}
.ch-done b{font-family:var(--font-display);font-size:38px;color:var(--gold);line-height:1}
.ch-done span{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media(max-width:560px){.ch-opts{grid-template-columns:1fr}}

/* ===== QUIZ ============================================================== */
.ac-quiz{
  border:1px solid var(--line);border-left:2px solid var(--gold);
  border-radius:0 var(--r-lg) var(--r-lg) 0;background:var(--panel);
  padding:20px 22px;margin:30px 0;
}
.q-tag{
  display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px;
}
.q-ask{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--parch);line-height:1.35;margin-bottom:14px}
.q-ask .hi{display:block;font-size:.82em;color:var(--brass-lit);margin-top:5px;font-weight:400}
.q-opts{display:flex;flex-direction:column;gap:8px}
.ac-quiz.answered .q-opt{cursor:default;pointer-events:none}
.ac-quiz.was-right{border-left-color:var(--dg-moola)}
.ac-quiz.was-right .q-tag{color:var(--dg-moola)}

/* ===== REVEAL ============================================================ */
.ac-reveal{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin:24px 0;overflow:hidden}
.rv-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:none;border:0;color:var(--ink);font-family:inherit;font-size:14.5px;
  font-weight:600;text-align:left;padding:15px 18px;cursor:pointer;
}
.rv-btn::after{content:"+";font-family:var(--font-mono);font-size:18px;color:var(--gold);transition:transform .2s}
.ac-reveal.open .rv-btn::after{transform:rotate(45deg)}
.rv-body{display:none;padding:0 18px 18px;font-size:14px;color:var(--body);line-height:1.68}
.ac-reveal.open .rv-body{display:block}

/* ===== FIGURES ===========================================================
   The degree arc: one sign opened out flat, so a range that is 12° of 30 can
   be seen to be 12° of 30 rather than read as a number. */
.fig{margin:30px 0}
.fig-bar{
  position:relative;height:44px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);overflow:hidden;
}
.fig-bar .seg{
  position:absolute;top:0;bottom:0;background:var(--dg);opacity:.8;
  display:grid;place-items:center;
}
.fig-bar .seg span{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--void);font-weight:700;white-space:nowrap;padding:0 6px;
}
html[data-theme="light"] .fig-bar .seg span{color:#fff}
.fig-scale{position:relative;height:20px;margin-top:5px}
.fig-scale i{
  position:absolute;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:9.5px;font-style:normal;color:var(--muted);
}
.fig-cap{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.6}

/* the precedence ladder — rungs, tested top down */
.ladder{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:8px;margin:28px 0}
.rung{
  display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-radius:12px;
  border-left:2px solid transparent;
}
.rung+.rung{border-top:1px solid var(--line-2)}
.rung b{
  flex:0 0 auto;width:24px;height:24px;border-radius:999px;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:11px;color:var(--void);background:var(--dg,var(--brass));
}
html[data-theme="light"] .rung b{color:#fff}
.rung-t{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--dg,var(--parch))}
.rung-s{font-size:13.5px;color:var(--muted);margin-top:2px;display:block}

/* two charts side by side, for a comparison the prose cannot make */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:28px 0}
.duo figure{margin:0}
.duo figcaption{
  margin-top:10px;text-align:center;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass-lit);
}
@media(max-width:640px){.duo{grid-template-columns:1fr;gap:30px}}

/* On a phone the reading time is the first thing worth spending: the index has
   to carry a number, a title in two scripts and a medal, and the title is the
   only one of those a reader is scanning for. */
@media(max-width:560px){
  .chp-index{padding:15px 14px 12px}
  .ci{grid-template-columns:auto 1fr auto;gap:10px;padding:10px 0}
  .ci-m{display:none}
  .ci-t{font-size:14.5px}
  .chp-eye{margin-top:44px;font-size:10px;letter-spacing:.16em}
  .chp-eye .hi{display:block;margin:3px 0 0}
}

/* ===== PROGRESS: rail, bar, level pill =================================== */
.read-bar{position:fixed;left:0;top:0;height:2px;width:100%;z-index:70;pointer-events:none}
.read-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .12s linear}

.note-rail{
  position:fixed;left:max(14px,calc(50vw - var(--maxw)/2 - 6px));top:50%;
  transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:2px;
}
.note-rail .rl{
  display:flex;align-items:center;gap:9px;text-decoration:none;padding:5px 0;
  color:var(--muted);font-size:11.5px;max-width:22px;overflow:hidden;
  transition:max-width .28s ease,color .2s;white-space:nowrap;
}
.note-rail .rl i{
  flex:0 0 auto;width:14px;height:1px;background:var(--line);transition:.2s;
}
.note-rail .rl span{opacity:0;transition:opacity .2s}
.note-rail:hover .rl{max-width:250px}
.note-rail:hover .rl span{opacity:1}
.note-rail .rl.past i{background:var(--brass)}
.note-rail .rl.on i{width:22px;height:2px;background:var(--gold)}
.note-rail .rl.on{color:var(--gold)}
@media(max-width:1180px){.note-rail{display:none}}

.xp-pill{
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 11px 0 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--body);
  cursor:pointer;transition:.16s;
}
.xp-pill:hover{border-color:var(--gold);color:var(--gold)}
.xp-star{color:var(--gold);font-size:12px;line-height:1}
.xp-n{font-family:var(--font-mono);font-size:11px;font-weight:500}
.xp-ring{
  width:4px;height:16px;border-radius:2px;background:var(--line-2);
  display:flex;align-items:flex-end;overflow:hidden;
}
.xp-ring i{display:block;width:100%;background:var(--gold);transition:height .4s}
.xp-pill.bump{animation:xpBump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes xpBump{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
.xp-toast{
  position:fixed;right:18px;bottom:18px;z-index:90;
  display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);
  padding:13px 18px;box-shadow:0 12px 34px rgba(0,0,0,.4);
  opacity:0;transform:translateY(10px);transition:.28s;
}
.xp-toast.in{opacity:1;transform:none}
.xp-toast b{font-family:var(--font-mono);font-size:15px;color:var(--gold)}
.xp-toast em{font-family:var(--font-mono);font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ===== NOTE HEADER + FOOT ================================================ */
.note-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-top:16px;
}
.note-meta .nm-topic{color:var(--gold)}
.note-meta .nm-xp{color:var(--dg-exalt)}
.next-head{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass-lit);margin:56px 0 16px;
}
#nextNotes .note-card{margin-bottom:10px}

/* the seal at the foot of a note — earned by answering, not by arriving */
.seal{
  display:flex;align-items:center;gap:18px;margin:40px 0 8px;padding:22px 24px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
}
.seal-mark{
  flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;border-radius:999px;
  border:1px solid var(--gold);color:var(--gold);font-size:22px;
}
.seal-t{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--parch)}
.seal-s{font-size:13.5px;color:var(--muted);margin-top:3px}

/* ===== HERO CHART on the index =========================================== */
.mast-live{
  position:absolute;right:0;top:clamp(20px,5vw,52px);width:min(268px,34vw);opacity:.5;
  pointer-events:none;
}
.mast{position:relative}
@media(max-width:820px){.mast-live{display:none}}

@media(prefers-reduced-motion:reduce){
  .k-graha,.lv-meter i,.xp-pill,.nc-sigil,.note-rail .rl{transition:none;animation:none}
}

/* An interactive block wants more width than a column of prose does. This
   breaks it out of the reading measure without breaking the column itself. */
.note.narrow .bleed{width:min(1010px,94vw);margin-left:50%;transform:translateX(-50%)}
.tw tbody tr[data-graha]{cursor:pointer}
.tw tbody tr[data-graha]:hover{background:var(--panel-2)}
.tw tbody tr[data-graha] .g::after{
  content:"↗";margin-left:7px;font-size:11px;color:var(--gold);opacity:0;transition:opacity .15s;
}
.tw tbody tr[data-graha]:hover .g::after{opacity:1}

/* ===== QUESTION SETS =====================================================
   A set is a frame around several .ac-quiz cards, so the cards keep the
   styling they already had and the frame only adds the things a set needs:
   a running score, an honest line about where these questions came from,
   and the button that fetches more. */
.ac-quizset{
  margin:34px 0;padding:20px 20px 18px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
}
.qs-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--line-2);
}
.qs-kicker{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}
.qs-score{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.qs-list{display:flex;flex-direction:column;gap:0}
.qs-q{background:transparent;border-left-color:var(--line);margin:18px 0 0}
.qs-q:first-child{margin-top:14px}
.qs-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2);
}
.qs-new{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-sel);background:var(--sel-fill);border:0;border-radius:999px;
  padding:10px 22px;cursor:pointer;transition:.15s;
}
.qs-new:hover{box-shadow:0 0 0 3px var(--gold-soft)}
.qs-new:active{transform:scale(.97)}
.qs-new:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.qs-note{font-size:12.5px;color:var(--muted);line-height:1.5}
@media(max-width:560px){
  .ac-quizset{padding:16px 14px 14px}
  .qs-foot{justify-content:center;text-align:center}
}

/* ===== NARROW SCREENS ====================================================
   The reading column had 18px of gutter on each side of a 390px phone —
   nearly a tenth of the screen spent on nothing. These steps hand it back
   to the text, and pull the masthead's top padding in with it so the title
   does not start halfway down the screen. */
@media(max-width:520px){
  .wrap{padding:0 13px}
  .mast{padding:clamp(30px,6vw,44px) 0 0}
  .note h2{margin:40px 0 6px}
}
@media(max-width:400px){
  .wrap{padding:0 11px}
  .note-meta{gap:6px 12px;font-size:9.5px;letter-spacing:.14em}
}

/* ===== THE LOCK ==========================================================
   A locked note is not an error, so it should not look like one. The
   masthead stays — title, standfirst, reading time — and this sits where the
   body would have been, saying which of the several possible reasons applies
   and offering the one action that fixes it. */
.lock-wait{
  margin:38px 0;font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.lock{
  display:flex;gap:20px;align-items:flex-start;margin:34px 0 12px;
  padding:26px 26px 24px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
}
.lock-mark{
  flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--gold);border-radius:999px;color:var(--gold);
}
.lock-mark svg{width:23px;height:23px}
.lock-body{min-width:0}
.lock-t{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--parch);line-height:1.25;margin:0 0 8px}
.lock-t .hi{display:block;font-size:.84em;color:var(--brass-lit);font-weight:400;margin-top:4px}
.lock-s{font-size:14.5px;color:var(--body);line-height:1.65;margin:0 0 4px}
.lock-why{font-size:13.5px;color:var(--gold);line-height:1.6;margin:10px 0 0}
.lock-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.lock-go,.lock-alt{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border-radius:999px;padding:11px 22px;transition:.15s;
}
.lock-go{color:var(--on-sel);background:var(--sel-fill);border:1px solid var(--sel-fill)}
.lock-go:hover{box-shadow:0 0 0 3px var(--gold-soft)}
.lock-alt{color:var(--body);border:1px solid var(--line)}
.lock-alt:hover{border-color:var(--brass);color:var(--ink)}
@media(max-width:560px){
  .lock{flex-direction:column;gap:14px;padding:20px 16px}
  .lock-acts{flex-direction:column}
  .lock-go,.lock-alt{text-align:center}
}

/* the same message, one line high, at the top of the index */
.lock-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 22px;padding:12px 16px;
  border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:var(--r);
  background:var(--panel);font-size:13.5px;color:var(--body);
}
.lock-bar b{color:var(--parch);font-weight:600}
.lock-bar a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-soft)}
.lock-bar a:hover{border-bottom-color:var(--gold)}
.note-card.is-locked .nc-sigil{opacity:.5}

/* ==========================================================================
   THE HORA WHEEL — foundations note
   --------------------------------------------------------------------------
   A dial rather than a table, because the subject is a remainder and a
   remainder is only convincing when you watch it accumulate. Seven segments
   in orbital order, a needle that steps, and a week strip that fills in as
   the days are generated. Colours are the dignity tokens reused: the active
   ruler takes gold, everything else stays panel.
   ========================================================================== */
.hora{margin:26px 0}
.hora-stage{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:30px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.hora-dial{min-width:0}
.hora-svg{width:100%;height:auto;display:block;max-width:300px;margin:0 auto}
.hora-seg{fill:var(--panel-2);stroke:var(--line);stroke-width:1;transition:fill .25s}
.hora-seg.on{fill:var(--gold-soft);stroke:var(--gold)}
.hora-lb{fill:var(--body);font:500 11px/1 var(--font-body);text-anchor:middle}
.hora-orb{fill:var(--muted);font:400 8.5px/1 var(--font-mono);text-anchor:middle}
.hora-needle{stroke:var(--gold);stroke-width:2;stroke-linecap:round}
.hora-hub{fill:var(--gold)}
.hora-ctr{fill:var(--muted);font:500 12px/1 var(--font-mono);text-anchor:middle;letter-spacing:.04em}

.hora-panel{min-width:0}
.hora-day{font:400 clamp(24px,3.4vw,34px)/1.08 var(--font-display);color:var(--parch)}
.hora-day .hi{font-family:var(--font-hi);color:var(--brass-lit);font-size:.62em;display:block;margin-top:4px}
.hora-read{font:400 12px/1.5 var(--font-mono);color:var(--muted);letter-spacing:.03em;
  text-transform:uppercase;margin:12px 0 0}
.hora-eq{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--deep);font-size:14px;line-height:1.55;color:var(--body)}
.hora-eq b{color:var(--gold);font-weight:600}
.hora-mod{display:block;margin-top:7px;font:400 11.5px/1.4 var(--font-mono);color:var(--muted);letter-spacing:.02em}

.hora-ctl{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.hora-ctl button{font:600 13px/1 var(--font-body);padding:10px 15px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--parch);border:1px solid var(--line);transition:.16s}
.hora-ctl button:hover{border-color:var(--gold);color:var(--gold)}
.hora-ctl button.pri{background:var(--sel-fill);color:var(--on-sel);border-color:var(--sel-fill)}
.hora-ctl button.pri:hover{filter:brightness(1.06);color:var(--on-sel)}
.hora-ctl button.gho{color:var(--muted)}

.hora-week{display:flex;gap:6px;margin-top:16px}
.hora-week i{flex:1;text-align:center;font:500 10.5px/1 var(--font-mono);letter-spacing:.06em;
  text-transform:uppercase;padding:7px 0;border-radius:7px;border:1px solid var(--line-2);
  color:var(--muted);font-style:normal;transition:.2s}
.hora-week i.lit{color:var(--parch);border-color:var(--line)}
.hora-week i.now{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}

@media (max-width:760px){
  .hora-stage{grid-template-columns:1fr;gap:20px;padding:18px}
}
@media (prefers-reduced-motion:reduce){
  .hora-seg,.hora-ctl button,.hora-week i{transition:none}
}


/* ==========================================================================
   THE VEDACHAKSHU CODEX — Class 1
   --------------------------------------------------------------------------
   A gamified surface rather than a note: XP, badges, drills and a closing
   exam. It keeps its own layout, but every colour and face is remapped onto
   the site tokens, so it follows the light/dark toggle and reads as part of
   the room rather than a page pasted into it. Everything is scoped under
   .codex, because the original stylesheet claimed generic names — .wrap,
   .btn, .badge, .strip — that the rest of the site also uses.
   ========================================================================== */
.codex /* ---------- language toggle ---------- */
.hi{font-family:var(--font-hi);color:var(--brass-lit);line-height:1.9}
.codex /* ---------- HUD ---------- */

.brandmark{display:flex;align-items:baseline;gap:8px;margin-right:auto}
.codex .brandmark b{font-family:var(--font-display);font-size:19px;letter-spacing:.4px;color:var(--parch);font-weight:400}
.codex .brandmark span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.codex .xpbox{display:flex;align-items:center;gap:10px}
.codex .rank{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lit);white-space:nowrap}
.codex .bar{width:132px;height:7px;border-radius:99px;background:#22305E;overflow:hidden;border:1px solid var(--line)}
.codex .bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--brass-lit));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.codex .xpnum{font-family:var(--font-mono);font-size:12px;color:var(--parch);min-width:62px}
.codex /* ---------- hero ---------- */
.hero{padding:64px 0 34px;text-align:center;position:relative}
.codex .eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.codex .hero h1{font-family:var(--font-hi);font-size:clamp(46px,10vw,86px);line-height:1.15;margin:0;font-weight:400;
  background:linear-gradient(180deg,#FFF6E2,#C89B3C);-webkit-background-clip:text;background-clip:text;color:transparent}
.codex .hero .rom{font-family:var(--font-display);font-size:clamp(20px,3.6vw,30px);letter-spacing:.16em;text-transform:uppercase;margin:6px 0 0;color:var(--parch);font-weight:400}
.codex .hero .gloss{max-width:600px;margin:20px auto 0;color:var(--muted);font-size:17px}
.codex .hero .gloss em{color:var(--brass-lit);font-style:italic}
.codex .rule{width:90px;height:1px;background:var(--gold);margin:26px auto;opacity:.7}
.codex .startrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.codex /* ---------- buttons ---------- */
.btn{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 20px;border-radius:99px;border:1px solid var(--gold);background:transparent;color:var(--brass-lit);
  cursor:pointer;transition:.2s;
}
.codex .btn:hover{background:var(--gold);color:#12193A}
.codex .btn.solid{background:var(--gold);color:#12193A;font-weight:600}
.codex .btn.solid:hover{background:var(--brass-lit)}
.codex .btn.ghost{border-color:var(--line);color:var(--muted)}
.codex .btn.ghost:hover{background:var(--line);color:var(--parch)}
.codex .btn:disabled{opacity:.4;cursor:not-allowed}
.codex /* ---------- stats strip ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:40px 0}
.codex .strip div{background:var(--deep);padding:16px 12px;text-align:center}
.codex .strip b{display:block;font-family:var(--font-display);font-size:26px;color:var(--brass-lit);font-weight:400}
.codex .strip span{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.codex /* ---------- badges shelf ---------- */
.shelf{margin:34px 0 10px}
.codex .shelf h3, .codex .sec-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.codex .badges{display:flex;gap:10px;flex-wrap:wrap}
.codex .badge{
  display:flex;align-items:center;gap:9px;padding:8px 14px 8px 10px;border:1px dashed var(--line);
  border-radius:99px;font-size:13px;color:#5F6B90;background:#0C1430;transition:.35s;
}
.codex .badge .g{font-size:17px;filter:grayscale(1) opacity(.45)}
.codex .badge.on{border-style:solid;border-color:var(--gold);color:var(--parch);background:#1A2450;box-shadow:0 0 0 3px #C89B3C1A}
.codex .badge.on .g{filter:none}
.codex /* ---------- chapter path ---------- */
.path{position:relative;padding-left:0}
.codex .ch{
  position:relative;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,#101A40,#0C1330);
  margin:0 0 18px;overflow:hidden;
}
.codex .ch.done{border-color:#3B5C46}
.codex .ch-head{display:flex;align-items:flex-start;gap:16px;width:100%;text-align:left;background:transparent;border:0;color:inherit;padding:20px 22px;cursor:pointer;font:inherit}
.codex .ch-num{font-family:var(--font-mono);font-size:12px;color:var(--gold);border:1px solid var(--line);border-radius:8px;padding:5px 8px;letter-spacing:.06em;flex:none;margin-top:3px}
.codex .ch.done .ch-num{background:var(--ok);border-color:var(--ok);color:#07231C;font-weight:600}
.codex .ch-t{flex:1;min-width:0}
.codex .ch-t h2{margin:0;font-family:var(--font-display);font-size:22px;font-weight:400;line-height:1.28}
.codex .ch-t .hi{display:block;font-size:17px;margin-top:2px}
.codex .ch-t p{margin:7px 0 0;font-size:14px;color:var(--muted)}
.codex .chev{font-family:var(--font-mono);color:var(--gold);flex:none;transition:transform .3s;margin-top:6px}
.codex .ch[open] .chev, .codex .ch.open .chev{transform:rotate(90deg)}
.codex .ch-
.ch.open .ch-
@keyframes fade{from{opacity:0;transform:translateY(-6px)}
to{opacity:1;transform:none}
.codex }

/* ---------- content blocks ---------- */
.p{margin:16px 0}
.codex .p .en{display:block}
.codex .p .hi{display:block;margin-top:3px;font-size:16px}
.codex .tip{border-left:3px solid var(--brand);background:#2A123010;background:linear-gradient(90deg,#D8412F14,transparent);padding:12px 16px;border-radius:0 10px 10px 0;margin:20px 0}
.codex .tip .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);display:block;margin-bottom:4px}
.codex .tip .en{font-size:15.5px}
.codex .tip .hi{display:block;font-size:15px}
.codex .card{border:1px solid var(--line);border-radius:12px;margin:18px 0;overflow:hidden;background:#0B1330}
.codex .card-h{padding:13px 17px;background:linear-gradient(90deg,var(--panel-2),#101A40);border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.codex .card-h b{font-family:var(--font-display);font-size:17px;font-weight:400;letter-spacing:.04em}
.codex .card-h .sk{font-family:var(--font-hi);color:var(--brass-lit);font-size:16px}
.codex .card-h .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:auto}
.codex .row{display:grid;grid-template-columns:132px 1fr;gap:0;border-top:1px solid #1D2A55}
.codex .row:first-child{border-top:0}
.codex .row dt{padding:12px 14px;background:#0E1738;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.codex .row dt .hi{display:block;font-family:var(--font-hi);text-transform:none;letter-spacing:0;font-size:13px;color:var(--muted);margin-top:2px}
.codex .row dd{margin:0;padding:12px 16px;font-size:15.5px}
.codex .row dd .hi{display:block;font-size:15px;margin-top:3px}
.codex .tbl{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px;overflow:hidden;border-radius:10px}
.codex .tbl th{background:var(--panel-2);text-align:left;padding:11px 13px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lit);border-bottom:1px solid var(--line)}
.codex .tbl td{padding:10px 13px;border-bottom:1px solid #1B2650;vertical-align:top}
.codex .tbl tr:nth-child(even) td{background:#0C1431}
.codex .tbl .hi{display:block;font-size:13.5px}
.codex .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.codex /* ---------- quiz ---------- */
.quiz{border:1px solid var(--gold);border-radius:12px;padding:20px;margin:26px 0 6px;background:linear-gradient(180deg,#17204A,#0C1330)}
.codex .quiz-top{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.codex .quiz-top .sec-h{margin:0}
.codex .quiz-top .count{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-left:auto}
.codex .q{margin:18px 0 0}
.codex .q .qt{font-size:16.5px;margin-bottom:12px}
.codex .q .qt .hi{display:block;font-size:15.5px;margin-top:2px}
.codex .opts{display:grid;gap:8px}
.codex .opt{
  text-align:left;font:inherit;font-size:15px;padding:11px 15px;border-radius:9px;border:1px solid var(--line);
  background:#0D1638;color:var(--parch);cursor:pointer;transition:.18s;display:flex;gap:10px;align-items:flex-start;
}
.codex .opt:hover:not(:disabled){border-color:var(--gold);background:#152049}
.codex .opt .k{font-family:var(--font-mono);font-size:11px;color:var(--gold);padding-top:3px;flex:none}
.codex .opt:disabled{cursor:default}
.codex .opt.right{border-color:var(--ok);background:#12352C;color:#DFF6EE}
.codex .opt.right .k{color:var(--ok)}
.codex .opt.wrong{border-color:var(--brand);background:#3A1512;color:#FBDDD8}
.codex .opt.wrong .k{color:var(--brand)}
.codex .why{margin-top:10px;font-size:14.5px;color:var(--muted);border-left:2px solid var(--gold);padding-left:12px;display:none}
.codex .why.show{display:block;animation:fade .3s ease}
.codex .why .hi{display:block;font-size:14px;margin-top:2px}
.codex /* ---------- game shells ---------- */
.game{border:1px solid var(--line);border-radius:14px;padding:22px;margin:26px 0;background:radial-gradient(600px 300px at 50% 0%,#1A2A63,#0A1129)}
.codex .game h4{margin:0 0 4px;font-family:var(--font-display);font-size:20px;font-weight:400}
.codex .game .sub{color:var(--muted);font-size:14px;margin:0 0 18px}
.codex .game .sub .hi{display:block}
.codex /* hora wheel */
.wheel-wrap{display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:center}
.codex .wheel{position:relative;width:270px;height:270px;flex:none}
.codex .wheel .ring{position:absolute;inset:0;border:1px solid var(--line);border-radius:50%}
.codex .wheel .ring.i{inset:38px;border-style:dashed;border-color:#22305E}
.codex .hand{position:absolute;left:50%;top:50%;width:2px;height:96px;background:linear-gradient(180deg,var(--brand),transparent);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(0deg);transition:transform .45s cubic-bezier(.3,1.4,.4,1)}
.codex .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;background:#0A1129;border:1px solid var(--gold);display:grid;place-content:center;text-align:center}
.codex .hub .hn{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.codex .hub .hv{font-family:var(--font-display);font-size:27px;color:var(--brass-lit)}
.codex .node{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:1px solid var(--line);background:#0E1738;display:grid;place-content:center;text-align:center;transition:.3s}
.codex .node b{font-family:var(--font-hi);font-size:15px;display:block;line-height:1.1;color:var(--parch)}
.codex .node span{font-family:var(--font-mono);font-size:8px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.codex .node.lit{background:var(--gold);border-color:var(--brass-lit);box-shadow:0 0 22px #C89B3C77;transform:scale(1.1)}
.codex .node.lit b, .codex .node.lit span{color:#0A1129}
.codex .wheel-side{flex:1;min-width:250px}
.codex .readout{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:#0A1129;margin-bottom:14px}
.codex .readout .day{font-family:var(--font-display);font-size:26px;color:var(--parch)}
.codex .readout .day .hi{font-size:20px;display:inline;margin-left:8px}
.codex .readout .note{font-size:14px;color:var(--muted);margin-top:6px;min-height:42px}
.codex .readout .note .hi{display:block;font-size:13.5px}
.codex .daydots{display:flex;gap:6px;margin:12px 0 16px;flex-wrap:wrap}
.codex .daydots i{width:26px;height:5px;border-radius:99px;background:#22305E;display:block}
.codex .daydots i.on{background:var(--gold)}
.codex /* sequencer */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.codex .chip{font:inherit;font-size:14px;padding:9px 15px;border-radius:99px;border:1px solid var(--line);background:#0E1738;color:var(--parch);cursor:pointer;transition:.2s}
.codex .chip:hover:not(:disabled){border-color:var(--gold)}
.codex .chip:disabled{opacity:.25;cursor:default}
.codex .slots{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:44px;padding:10px;border:1px dashed var(--line);border-radius:10px;background:#0A112999}
.codex .slot{font-family:var(--font-mono);font-size:12.5px;padding:8px 13px;border-radius:99px;background:var(--ok);color:#06231B;font-weight:600}
.codex .arrowsep{color:var(--gold);font-family:var(--font-mono)}
.codex .empty-hint{color:#5F6B90;font-size:13.5px;font-family:var(--font-mono)}
.codex /* match game */
.match-q{text-align:center;margin-bottom:16px}
.codex .match-q .planet{font-family:var(--font-hi);font-size:34px;color:var(--brass-lit);line-height:1.3}
.codex .match-q .ask{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.codex .match-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;max-width:520px;margin:0 auto}
.codex .gscore{font-family:var(--font-mono);font-size:12px;color:var(--muted);text-align:center;margin-top:14px}
.codex .gscore b{color:var(--brass-lit)}
.codex /* ---------- final exam ---------- */
.finale{border:1px solid var(--gold);border-radius:16px;padding:30px;margin:44px 0 60px;background:radial-gradient(700px 380px at 50% 0%,#1D2E6E,#090F26);text-align:center}
.codex .finale h2{font-family:var(--font-hi);font-size:38px;margin:0;font-weight:400;color:var(--brass-lit)}
.codex .finale .rom{font-family:var(--font-display);font-size:18px;letter-spacing:.2em;text-transform:uppercase;margin:4px 0 10px}
.codex .finale p{color:var(--muted);max-width:520px;margin:0 auto 20px;font-size:15px}
.codex #examArea{text-align:left;max-width:640px;margin:0 auto}
.codex .result{text-align:center;padding:14px 0}
.codex .result .big{font-family:var(--font-display);font-size:56px;color:var(--brass-lit);line-height:1}
.codex .result .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.codex .result .verdict{margin:14px auto 20px;max-width:460px;font-size:16px}
.codex .toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,26px);z-index:80;
  background:#12204F;border:1px solid var(--gold);border-radius:99px;padding:11px 22px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;color:var(--brass-lit);
  opacity:0;transition:.4s cubic-bezier(.2,.9,.2,1);pointer-events:none;box-shadow:0 12px 40px #0009;
}
.codex .toast.show{opacity:1;transform:translate(-50%,0)}
.codex footer b{color:var(--gold);font-weight:400;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:720px){
  
  .row{grid-template-columns:1fr}
.codex .row dt{padding:9px 14px 3px;background:transparent}
.codex .strip{grid-template-columns:repeat(2,1fr)}
.codex .bar{width:84px}
.codex .brandmark span{display:none}
.codex .match-grid{grid-template-columns:1fr}
.codex }
@media (prefers-reduced-motion:reduce){
  
  
}

/* ==========================================================================
   LEARN DRILLS — the play engine
   --------------------------------------------------------------------------
   Five drill types share one chrome: a tag, a title, a state marker on the
   right, the instruction, the drill, and a feedback strip that only appears
   once an answer exists. The per-note progress bar sits above the first
   drill rather than floating, because a note is a finite thing and a bar
   that follows you down an article implies it is not.
   ========================================================================== */
.pl-hud{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0 18px;
  padding:13px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.pl-seal{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);font-size:15px;transition:.3s}
.pl-seal.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
.pl-badge-n{font-family:var(--font-display);font-size:15px;color:var(--parch);min-width:0}
.pl-track{flex:1;min-width:90px;height:5px;border-radius:99px;background:var(--line-2);overflow:hidden}
.pl-fill{display:block;height:100%;width:0;background:var(--gold);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.pl-cnt{font:400 11.5px/1 var(--font-mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.pl-xp{font:700 13px/1 var(--font-mono);color:var(--gold)}
.pl-reset{appearance:none;border:1px solid var(--ctl-line);background:transparent;color:var(--ctl-ink);
  width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1}
.pl-reset:hover{color:var(--gold);border-color:var(--gold)}

.pl-box{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--deep);
  padding:20px;margin:26px 0}
.pl-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:5px}
.pl-tag{font:700 9.6px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
  background:var(--gold);color:var(--on-sel);padding:4px 8px;border-radius:4px}
.pl-t{font-family:var(--font-display);font-size:17px;color:var(--parch)}
.pl-state{margin-left:auto;font:700 12px/1 var(--font-mono);color:var(--ok)}
.pl-how{font-size:13.5px;color:var(--muted);margin:0 0 15px;line-height:1.55}
.pl-fb{display:none;margin-top:13px;padding:11px 14px;border-radius:var(--r-sm);font-size:13.6px;line-height:1.55}
.pl-fb.show{display:block}
.pl-fb.ok{background:rgba(63,185,132,.1);border:1px solid rgba(63,185,132,.4)}
.pl-fb.no{background:var(--brand-soft);border:1px solid var(--brand)}
.pl-q{font-size:16px;color:var(--ink);margin-bottom:12px;line-height:1.5}
.pl-kind{display:block;font:700 9.6px/1 var(--font-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.pl-btn{appearance:none;margin-top:12px;border:1px solid var(--ctl-line);background:transparent;
  color:var(--ctl-ink);border-radius:99px;padding:7px 15px;font:600 12.5px/1 var(--font-body);cursor:pointer}
.pl-btn:hover{border-color:var(--gold);color:var(--gold)}

/* flip */
.pl-flips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pl-flip{appearance:none;border:0;background:none;padding:0;height:134px;perspective:900px;cursor:pointer;font:inherit}
.pl-fin{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,.2,.2,1)}
.pl-flip[aria-pressed="true"] .pl-fin{transform:rotateY(180deg)}
.pl-ff,.pl-fb2{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r);
  border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:11px;gap:4px}
.pl-ff{background:var(--panel)}
.pl-ff b{font-family:var(--font-display);font-size:15px;color:var(--parch);font-weight:400}
.pl-ff i{font-family:var(--font-hi);font-style:normal;font-size:13px;color:var(--brass-lit)}
.pl-ff u{text-decoration:none;font:400 10px/1.3 var(--font-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:4px}
.pl-fb2{background:var(--gold);color:var(--on-sel);transform:rotateY(180deg);border-color:var(--gold);
  font-size:12.6px;line-height:1.45}

/* sort + seq chips */
.pl-opts,.pl-pool{display:flex;flex-wrap:wrap;gap:8px}
.pl-chip{appearance:none;border:1px solid var(--ctl-line);background:var(--panel);color:var(--ctl-ink);
  border-radius:99px;padding:9px 15px;font:500 13.5px/1.3 var(--font-body);cursor:pointer;transition:.15s}
.pl-chip:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.pl-chip.ok{border-color:var(--ok);background:rgba(63,185,132,.15);color:var(--ok)}
.pl-chip.no{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.pl-chip:disabled{cursor:default;opacity:.55}
.pl-line{display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-height:44px;padding:10px;
  border:1px dashed var(--line);border-radius:var(--r);margin-bottom:12px}
.pl-hint{font-size:12.6px;color:var(--muted)}
.pl-slot{background:var(--gold);color:var(--on-sel);border-radius:var(--r-sm);padding:6px 11px;
  font:600 12.6px/1 var(--font-body)}
.pl-arrow{color:var(--gold);font-size:13px}

/* match */
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.pl-tile{appearance:none;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);
  padding:11px 6px;cursor:pointer;text-align:center;transition:.15s}
.pl-tile b{display:block;font-family:var(--font-display);font-weight:400;font-size:13.5px;color:var(--parch)}
.pl-tile i{display:block;font-family:var(--font-hi);font-style:normal;font-size:11.6px;color:var(--muted);margin-top:2px}
.pl-tile:hover:not(:disabled){border-color:var(--gold)}
.pl-tile.ok{border-color:var(--ok);background:rgba(63,185,132,.15)}
.pl-tile.no{border-color:var(--brand);background:var(--brand-soft)}
.pl-tile:disabled{cursor:default}

/* wheel */
.pl-wheel{display:grid;grid-template-columns:minmax(0,290px) 1fr;gap:26px;align-items:center}
.pl-svg{width:100%;max-width:290px;height:auto;display:block;margin:0 auto}
.pl-seg{fill:var(--panel);stroke:var(--line);stroke-width:1;transition:fill .25s}
.pl-seg.on{fill:var(--gold-soft);stroke:var(--gold)}
.pl-lb{fill:var(--body);font:500 11px/1 var(--font-body);text-anchor:middle}
.pl-orb{fill:var(--muted);font:400 8.5px/1 var(--font-mono);text-anchor:middle}
.pl-needle{stroke:var(--gold);stroke-width:2;stroke-linecap:round}
.pl-hub{fill:var(--gold)}
.pl-ctr{fill:var(--muted);font:500 12px/1 var(--font-mono);text-anchor:middle}
.pl-day{font:400 clamp(22px,3.2vw,31px)/1.1 var(--font-display);color:var(--parch)}
.pl-day .hi{display:block;font-family:var(--font-hi);font-size:.62em;color:var(--brass-lit);margin-top:3px}
.pl-read{font:400 11.6px/1.5 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:11px}
.pl-eq{margin-top:12px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--void);font-size:13.6px;line-height:1.55;color:var(--body)}
.pl-eq b{color:var(--gold)}
.pl-mod{display:block;margin-top:6px;font:400 11px/1.4 var(--font-mono);color:var(--muted)}
.pl-ctl{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pl-ctl button{appearance:none;border:1px solid var(--line);background:transparent;color:var(--parch);
  border-radius:99px;padding:9px 14px;font:600 12.6px/1 var(--font-body);cursor:pointer;transition:.15s}
.pl-ctl button:hover{border-color:var(--gold);color:var(--gold)}
.pl-ctl button.pri{background:var(--sel-fill);color:var(--on-sel);border-color:var(--sel-fill)}
.pl-ctl button.gho{color:var(--muted)}
.pl-week{display:flex;gap:5px;margin-top:14px}
.pl-week i{flex:1;text-align:center;font:500 10px/1 var(--font-mono);letter-spacing:.05em;
  text-transform:uppercase;padding:6px 0;border-radius:6px;border:1px solid var(--line-2);
  color:var(--muted);font-style:normal;transition:.2s}
.pl-week i.lit{color:var(--parch);border-color:var(--line)}
.pl-week i.now{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}

.pl-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(140%);z-index:99;
  background:var(--gold);color:var(--on-sel);padding:10px 19px;border-radius:99px;
  font:700 13px/1 var(--font-body);box-shadow:0 10px 34px rgba(0,0,0,.45);pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.9,.3,1)}
.pl-toast.show{transform:translateX(-50%) translateY(0)}

@media (max-width:760px){
  .pl-wheel{grid-template-columns:1fr;gap:18px}
  .pl-box{padding:15px}
}
@media (prefers-reduced-motion:reduce){
  .pl-fin,.pl-fill,.pl-seg,.pl-toast,.pl-chip,.pl-week i{transition:none}
}

/* definition cards inside a note — label/value pairs from the source lecture */
.pcard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:16px 18px;margin:16px 0}
.pcard-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.pcard-h b{font-family:var(--font-display);font-weight:400;font-size:17px;color:var(--parch)}
.pcard-h i{font-family:var(--font-hi);font-style:normal;font-size:14px;color:var(--brass-lit)}
.pcard-h u{text-decoration:none;margin-left:auto;font:400 10px/1.3 var(--font-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pcard .row{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:start;margin-bottom:9px}
.pcard .row:last-child{margin-bottom:0}
.pcard .row .k{font:400 10px/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);padding-top:2px}
.pcard .row .k .hi{display:block;font-family:var(--font-hi);letter-spacing:0;text-transform:none;
  font-size:11.6px;color:var(--muted)}
.pcard .row .v{font-size:14.6px;line-height:1.6;color:var(--body)}
.pcard .row .v .hi{display:block;color:var(--muted);font-size:13.6px;margin-top:2px}
@media (max-width:640px){
  .pcard .row{grid-template-columns:1fr;gap:2px}
  .pcard .row .k{padding-top:0}
  .pcard .row .k .hi{display:inline;margin-left:6px}
}

/* ===== MASTERY GATES ======================================================
   Each chapter row in the index carries three dots: read, practice, recall.
   A chapter is only finished when all three are lit, so the row shows what
   is still outstanding instead of a single all-or-nothing seal. */
.ci-gates{display:inline-flex;gap:4px;align-items:center;margin-left:auto;padding:0 10px;flex:0 0 auto}
.ci-gates i{width:7px;height:7px;border-radius:50%;display:block;
  border:1px solid var(--line-2);background:transparent;transition:background .2s,border-color .2s}
.ci-gates i.on{background:var(--gold);border-color:var(--gold)}
.ci.ci-done .ci-seal{color:var(--gold);opacity:1}
.ci.ci-stale .ci-seal{color:var(--muted);opacity:.55}
.ci.ci-stale::after{content:"review due";position:absolute;right:34px;
  font:500 8.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media(max-width:640px){.ci-gates{padding:0 6px}.ci.ci-stale::after{display:none}}

/* ===== PROFILE BUTTON + PANEL ===========================================
   The score has to be visible or it is not a score. The button sits in the
   header on the catalogue and on every note; the panel is the student's own
   page — level, XP, what is unfinished, and where to go next. */
.profb{display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line-2);background:transparent;cursor:pointer;
  transition:border-color .15s,background .15s}
.profb:hover{border-color:var(--gold);background:var(--panel-2,var(--panel))}
.profb-l{font:600 9.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-style:normal}
.profb-x{font:700 12px var(--font-mono);color:var(--gold)}
.profp{position:fixed;top:64px;right:16px;z-index:80;width:min(330px,calc(100vw - 32px));
  background:var(--panel);border:1px solid var(--line-2);border-radius:14px;
  padding:16px 16px 12px;box-shadow:0 18px 44px rgba(0,0,0,.22)}
.profp-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.profp-lv b{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--body)}
.profp-lv b.hi{font-family:var(--font-hi)}
.profp-xp{font:700 21px var(--font-mono);color:var(--gold)}
.profp-xp span{font-size:10px;letter-spacing:.1em}
.profp-bar{height:5px;border-radius:3px;margin:11px 0 6px;
  background:color-mix(in srgb,var(--line) 45%,transparent)}
.profp-bar i{display:block;height:100%;border-radius:3px;background:var(--gold)}
.profp-next{margin:0 0 12px;font:500 10.5px var(--font-mono);color:var(--muted);letter-spacing:.04em}
.profp-here{padding:8px 10px;border-radius:8px;margin-bottom:12px;font-size:12px;color:var(--body);
  background:color-mix(in srgb,var(--gold) 12%,transparent)}
.profp-h{font:600 9px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
.profp-n{display:flex;align-items:baseline;gap:10px;padding:7px 0;
  border-top:1px solid var(--line);text-decoration:none}
.profp-n .pn-t{font-size:12.5px;color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profp-n .pn-b{margin-left:auto;font:600 11px var(--font-mono);color:var(--gold);flex:0 0 auto}
.profp-n:hover .pn-t{color:var(--gold)}
.profp-empty{margin:4px 0 0;font-size:12px;color:var(--muted);line-height:1.6}
.profp-key{margin-top:11px;padding-top:9px;border-top:1px solid var(--line);
  font-size:11px;color:var(--muted);line-height:1.55}
@media(max-width:640px){.profp{top:56px;right:8px;left:8px;width:auto}.profb-l{display:none}}

/* a reading dot that fills as the chapter is read, rather than staying blank */
.ci-gates i.part{background:linear-gradient(to right,var(--gold) var(--p,0%),transparent var(--p,0%));
  border-color:color-mix(in srgb,var(--gold) 55%,var(--line-2))}

/* ==========================================================================
   .ac-upa — the upagraha instrument
   The five Prakasha upagrahas are a chain, so the layout is a chain: a strip
   of the zodiac showing where everything landed, then one row per link with
   its arithmetic on show. Same tokens as the rest of the kit.
   ========================================================================== */
.ac-upa{border:1px solid var(--line);border-radius:14px;background:var(--panel);
  margin:26px 0;overflow:hidden}
.upa-head{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-bottom:1px solid var(--line-2);background:var(--panel-2)}
.upa-eye{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lit)}
.upa-modes{margin-left:auto;display:flex;gap:6px}
.upa-mode{appearance:none;border:1px solid var(--line);background:transparent;color:var(--body);
  font:inherit;font-size:12px;padding:5px 12px;border-radius:999px;cursor:pointer}
.upa-mode.on{background:var(--sel-fill);color:var(--on-sel);border-color:var(--sel-fill);font-weight:600}
.upa-body{padding:14px}

.upa-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.upa-lb{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.upa-sign{background:var(--deep);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;font:inherit;font-size:13px}
.upa-deg{flex:1 1 180px;min-width:140px;accent-color:var(--gold)}
.upa-degv{font-family:var(--font-mono,monospace);font-size:13px;color:var(--parch);min-width:64px}

/* the zodiac strip — twelve cells, marks dropped into the ones that hold something */
.upa-zod{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-bottom:16px}
.uz{border:1px solid var(--line-2);border-radius:7px;padding:5px 2px;text-align:center;min-height:54px}
.uz.has{border-color:var(--gold);background:var(--gold-soft)}
.uz b{display:block;font-size:9.5px;color:var(--muted);letter-spacing:.04em;font-weight:500}
.uz-m{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;margin-top:3px}
.um{font-style:normal;font-size:10px;font-weight:700;color:var(--gold);
  background:rgba(224,173,78,.16);border-radius:4px;padding:1px 4px}
.um-su{color:var(--brand);background:var(--brand-soft)}

.upa-chain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.upa-link{border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;background:var(--deep)}
.ul-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ul-gl{font-weight:700;font-size:12px;color:var(--gold);background:var(--gold-soft);
  border-radius:5px;padding:1px 6px}
.ul-n{font-weight:600;color:var(--ink);font-size:14px}
.ul-op{margin-left:auto;font-size:11.5px;color:var(--muted)}
.ul-work{font-family:var(--font-mono,monospace);font-size:12px;color:var(--body);margin-top:4px}
.ul-pos{font-size:13.5px;color:var(--parch);margin-top:2px;font-weight:600}

.upa-score{font-size:12px;color:var(--muted);margin-bottom:10px;letter-spacing:.06em}
.upa-score b{color:var(--gold)}
.upa-ask{border:1px solid var(--line-2);border-radius:10px;padding:12px;background:var(--deep);margin-bottom:12px}
.ua-sun{font-size:13px;color:var(--body)}
.ua-sun b{color:var(--brand)}
.ua-q{font-size:16px;color:var(--ink);margin-top:6px}
.ua-f{font-size:11.5px;color:var(--muted);margin-top:4px}
.upa-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.upa-opt{appearance:none;border:1px solid var(--line);background:var(--deep);color:var(--ink);
  font:inherit;font-size:13.5px;padding:10px;border-radius:9px;cursor:pointer;transition:.14s}
.upa-opt:hover:not(:disabled){border-color:var(--gold)}
.upa-opt.right{border-color:var(--ok);background:rgba(63,185,132,.14);color:var(--ok)}
.upa-opt.wrong{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.upa-opt.dim{opacity:.42}
.upa-why{margin-top:12px}
.upa-why:empty{display:none}
.uw-v{font-weight:700;font-size:13px;letter-spacing:.04em}
.upa-why.ok .uw-v{color:var(--ok)}
.upa-why.no .uw-v{color:var(--brand)}
.uw-chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 10px;
  font-size:12px;color:var(--body)}
.uw-step b{color:var(--gold);margin-right:3px}
.uw-arr{color:var(--muted)}
.upa-next,.upa-again{appearance:none;border:1px solid var(--gold);background:transparent;
  color:var(--gold);font:inherit;font-size:13px;padding:7px 16px;border-radius:999px;cursor:pointer}
.upa-done{text-align:center;padding:22px 0;font-size:15px;color:var(--body)}
.upa-done b{color:var(--gold);font-size:22px;display:block;margin:6px 0 14px}

@media (max-width:640px){
  .upa-zod{grid-template-columns:repeat(6,1fr)}
  .ul-op{margin-left:0;width:100%}
}