/* 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);
  --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);
}

*{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}
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);
}
.nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);padding:13px 0}
.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}

.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 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;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)}

@media(max-width:640px){
  .wrap{padding:0 16px}
  body{font-size:15.5px}
  .nav-links a{display:none}
  .note p{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  body,.note-card,.note-card::before,.themeb,.back{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(--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}}

/* ===== 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}