/* ==========================================================================
   Library of Alexandria — one stylesheet, no framework, no build step.
   Layers: tokens · themes · primitives · shell · views · overlays · print
   ========================================================================== */

/* ---------------- 1. tokens ---------------- */
:root{
  color-scheme: light;

  /* neutral ramp (light) */
  --ink:#141210; --ink-2:#453e34; --ink-3:#676053; --ink-4:#676053;
  --ink-faint:#837a6a;   /* decorative glyphs only — 3:1, never body text */
  --paper:#f8f5ee; --paper-2:#fffdf8; --paper-3:#efe9db; --paper-4:#e5ddcb;
  --line:#ded4bf; --line-2:#cfc3a9; --line-strong:#8f794a;

  /* brand */
  --gold:#7e5a1d; --gold-2:#c8a35a; --gold-ink:#fffdf8;
  --accent:#1f5d54;            /* overridden per hall */
  --accent-soft:#1f5d5418;
  --danger:#a8342b; --danger-soft:#a8342b14;
  --good:#1f6b45;

  /* type */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --legible:"Atkinson Hyperlegible","Verdana",Tahoma,sans-serif;
  --body-face:var(--sans);
  --head-face:var(--serif);

  --fs:17px;          /* set by data-size */
  --lh:1.65;
  --measure:70ch;     /* set by data-measure */

  /* space + shape */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem;
  --r1:8px; --r2:12px; --r3:16px; --r4:22px;
  --shadow-1:0 1px 2px rgba(20,18,16,.05);
  --shadow-2:0 2px 6px rgba(20,18,16,.06),0 10px 28px rgba(20,18,16,.07);
  --shadow-3:0 8px 24px rgba(20,18,16,.12),0 24px 64px rgba(20,18,16,.14);

  --maxw:1200px;
  --sidebar-w:268px;
  --topbar-h:58px;
  --tap:44px;
}

/* Hall identity colour.
   Both variants are emitted inline as --hall-lo / --hall-hi; the theme decides
   which one wins. Resolving this in CSS rather than JS is what keeps the accent
   readable after a theme switch without re-rendering the view. */
.hall-scope{ --hall:var(--hall-lo); --accent:var(--hall-lo); }
:root[data-theme="dark"] .hall-scope,
:root[data-theme="contrast"] .hall-scope{ --hall:var(--hall-hi); --accent:var(--hall-hi); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .hall-scope{ --hall:var(--hall-hi); --accent:var(--hall-hi); }
}

/* ---------------- 2. themes ---------------- */
:root[data-theme="dark"]{
  color-scheme: dark;
  --ink:#ece5d6; --ink-2:#c5bba8; --ink-3:#999084; --ink-4:#999084;
  --ink-faint:#7d7365;
  --paper:#0e1011; --paper-2:#16191b; --paper-3:#1d2124; --paper-4:#252a2e;
  --line:#2a2f34; --line-2:#394046; --line-strong:#697683;
  --gold:#e0b062; --gold-2:#8d6d38; --gold-ink:#0e1011;
  --accent:#6fd0bd; --accent-soft:#6fd0bd1a;
  --danger:#f0857a; --danger-soft:#f0857a14;
  --good:#6fd0a0;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 6px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.3);
  --shadow-3:0 8px 24px rgba(0,0,0,.5),0 24px 64px rgba(0,0,0,.45);
}
:root[data-theme="sepia"]{
  color-scheme: light;
  --ink:#3b2f21; --ink-2:#5b4a35; --ink-3:#645542; --ink-4:#645542;
  --ink-faint:#806f5a;
  --paper:#f3e8d3; --paper-2:#faf1e0; --paper-3:#e9dcc3; --paper-4:#ddceb0;
  --line:#d5c3a2; --line-2:#c2ad87; --line-strong:#886e3d;
  --gold:#794f10; --gold-2:#b98c3f; --gold-ink:#faf1e0;
  --accent:#1d5b52; --accent-soft:#1d5b5216;
  --danger:#93381f; --good:#2c6134;
}
:root[data-theme="contrast"]{
  color-scheme: dark;
  --ink:#ffffff; --ink-2:#f0f0f0; --ink-3:#d8d8d8; --ink-4:#bcbcbc;
  --ink-faint:#bcbcbc;
  --paper:#000000; --paper-2:#0b0b0b; --paper-3:#151515; --paper-4:#1f1f1f;
  --line:#6a6a6a; --line-2:#8e8e8e; --line-strong:#6c6c6c;
  --gold:#ffd479; --gold-2:#ffd479; --gold-ink:#000000;
  --accent:#7ff0da; --accent-soft:#7ff0da22;
  --danger:#ff9b90; --good:#7ff0a8;
}
/* honour the system when no explicit choice has been stored */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    color-scheme: dark;
    --ink:#ece5d6; --ink-2:#c5bba8; --ink-3:#999084; --ink-4:#999084;
    --ink-faint:#7d7365;
    --paper:#0e1011; --paper-2:#16191b; --paper-3:#1d2124; --paper-4:#252a2e;
    --line:#2a2f34; --line-2:#394046; --line-strong:#697683;
    --gold:#e0b062; --gold-2:#8d6d38; --gold-ink:#0e1011;
    --accent:#6fd0bd; --danger:#f0857a; --good:#6fd0a0;
  }
}

/* reading preferences */
:root[data-size="1"]{--fs:15px; --lh:1.6}
:root[data-size="2"]{--fs:17px; --lh:1.65}
:root[data-size="3"]{--fs:19px; --lh:1.7}
:root[data-size="4"]{--fs:21px; --lh:1.75}
:root[data-measure="narrow"]{--measure:56ch}
:root[data-measure="normal"]{--measure:70ch}
:root[data-measure="wide"]{--measure:88ch}
:root[data-face="sans"]{--body-face:var(--sans)}
:root[data-face="serif"]{--body-face:var(--serif)}
:root[data-face="mono"]{--body-face:var(--mono)}
:root[data-face="open"]{--body-face:var(--legible); --head-face:var(--legible); --lh:1.8}

/* ---------------- 3. primitives ---------------- */
*{box-sizing:border-box}
/* [hidden] must beat any display rule a component sets on itself */
[hidden]{display:none!important}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h) + 1rem)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body-face);font-size:var(--fs);line-height:var(--lh);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
img,svg,video{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5{font-family:var(--head-face);line-height:1.18;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,4.4vw,2.9rem);margin:.1rem 0 var(--s3)}
h2{font-size:clamp(1.3rem,2.8vw,1.8rem);margin:var(--s6) 0 var(--s3)}
h3{font-size:1.15rem;margin:var(--s5) 0 var(--s2)}
p{margin:0 0 var(--s4)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0}
kbd{
  font-family:var(--mono);font-size:.72em;padding:.12em .4em;border-radius:5px;
  border:1px solid var(--line-2);background:var(--paper-3);color:var(--ink-3);
  box-shadow:0 1px 0 var(--line-2);white-space:nowrap;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--gold-ink);padding:.6rem 1rem;z-index:999;border-radius:0 0 var(--r1) 0}
.skip:focus{left:0;top:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.muted{color:var(--ink-3)}
.eyebrow{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--s2);font-family:var(--sans);font-weight:600}
.lede{font-size:1.1em;color:var(--ink-2);max-width:64ch}

.btn{
  display:inline-flex;align-items:center;gap:.45rem;padding:.58rem 1.05rem;border-radius:999px;
  border:1px solid var(--line-2);background:var(--paper-2);color:var(--ink);
  font-family:var(--sans);font-size:.9rem;font-weight:500;cursor:pointer;
  min-height:38px;transition:border-color .15s,background .15s,transform .1s;
}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.btn-primary:hover{filter:brightness(1.07);color:var(--gold-ink)}
.btn-ghost{background:transparent}
.btn-sm{padding:.34rem .7rem;font-size:.8rem;min-height:32px}
.btn[aria-pressed="true"]{border-color:var(--good);color:var(--good)}
.btnrow{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}

.chip{
  display:inline-flex;align-items:center;gap:.3rem;font-family:var(--sans);
  font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;padding:.3rem .6rem;
  border-radius:999px;border:1px solid var(--line);color:var(--ink-3);white-space:nowrap;
}
.chip-Foundation{border-color:var(--gold-2);color:var(--gold)}
.chip-Practical{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent)}
.chip-Deep{border-color:var(--line-2);color:var(--ink-2)}
a.chip:hover{border-color:var(--gold);color:var(--gold)}

/* ---------------- 4. top bar ---------------- */
.topbar{
  position:sticky;top:0;z-index:60;display:flex;gap:var(--s3);align-items:center;
  height:var(--topbar-h);padding:0 clamp(.75rem,2.5vw,1.5rem);
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-toggle{display:none}
.brand{display:flex;gap:.6rem;align-items:center;min-width:0;flex:0 1 auto}
.brand-mark{color:var(--gold);display:grid;place-items:center;flex:0 0 auto}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-text b{font-family:var(--serif);font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-text small{font-family:var(--sans);color:var(--ink-4);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{display:flex;gap:var(--s2);align-items:center;margin-left:auto}

.searchtrigger{
  display:flex;align-items:center;gap:.5rem;height:38px;padding:0 .55rem 0 .8rem;
  border-radius:999px;border:1px solid var(--line);background:var(--paper-2);
  color:var(--ink-3);cursor:pointer;font-family:var(--sans);font-size:.86rem;
  min-width:min(280px,34vw);
}
.searchtrigger:hover{border-color:var(--gold-2);color:var(--ink-2)}
.searchtrigger-label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.searchtrigger-kbd{margin-left:auto}

.icon-btn{
  display:grid;place-items:center;width:38px;height:38px;border-radius:999px;flex:0 0 auto;
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink-2);
  cursor:pointer;font-family:var(--sans);
}
.icon-btn:hover{color:var(--gold);border-color:var(--gold-2)}
.icon-btn.urgent{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.icon-btn.urgent:hover{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}

.scroll-progress{position:sticky;top:var(--topbar-h);z-index:55;height:2px;background:transparent}
.scroll-progress>i{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear}

/* ---------------- 5. shell + sidebar ---------------- */
.shell{display:flex;max-width:var(--maxw);margin:0 auto;align-items:flex-start}
.sidebar{
  position:sticky;top:calc(var(--topbar-h) + 2px);flex:0 0 var(--sidebar-w);width:var(--sidebar-w);
  height:calc(100vh - var(--topbar-h) - 2px);overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s5) var(--s2) var(--s6) clamp(.75rem,2.5vw,1.5rem);
  border-right:1px solid var(--line);font-family:var(--sans);font-size:.86rem;
  scrollbar-width:thin;
}
.side-group{margin-bottom:var(--s5)}
.side-title{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);
  margin:0 0 var(--s2);padding-left:.55rem;font-weight:600;
}
.side-link{
  display:flex;align-items:center;gap:.55rem;padding:.4rem .55rem;border-radius:var(--r1);
  color:var(--ink-2);line-height:1.3;
}
.side-link:hover{background:var(--paper-3);color:var(--ink)}
.side-link[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.side-link .ico{width:16px;text-align:center;flex:0 0 auto;color:var(--ink-faint);font-family:var(--mono);font-size:.72rem}
.side-link[aria-current="page"] .ico{color:var(--accent)}
.side-link .count{margin-left:auto;font-size:.74rem;color:var(--ink-4);font-family:var(--mono)}
.side-link.danger{color:var(--danger)}
.side-link.danger:hover{background:var(--danger-soft)}

.side-hall > summary{
  display:flex;align-items:center;gap:.55rem;padding:.4rem .55rem;border-radius:var(--r1);
  cursor:pointer;color:var(--ink-2);list-style:none;
}
.side-hall > summary::-webkit-details-marker{display:none}
.side-hall > summary:hover{background:var(--paper-3);color:var(--ink)}
.side-hall .dot{width:8px;height:8px;border-radius:99px;background:var(--hall);flex:0 0 auto}
.side-hall .caret{margin-left:auto;color:var(--ink-faint);transition:transform .15s}
.side-hall[open] .caret{transform:rotate(90deg)}
.side-hall ul{list-style:none;margin:.15rem 0 .5rem;padding:0 0 0 1.35rem}
.side-hall li a{
  display:flex;gap:.5rem;align-items:baseline;padding:.28rem .5rem;border-radius:var(--r1);
  color:var(--ink-3);font-size:.82rem;border-left:2px solid var(--line);
}
.side-hall li a:hover{color:var(--ink);background:var(--paper-3)}
.side-hall li a[aria-current="page"]{color:var(--hall);border-left-color:var(--hall);font-weight:600}
.side-hall li a .tick{color:var(--good);font-size:.75rem}
.side-prog{height:3px;border-radius:99px;background:var(--paper-3);margin:.15rem .55rem var(--s2)}
.side-prog>i{display:block;height:100%;border-radius:99px;background:var(--hall)}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:49;border:0}

main{flex:1 1 auto;min-width:0;padding:clamp(1.25rem,3.5vw,2.5rem) clamp(1rem,3vw,2.5rem) var(--s8)}

/* ---------------- 6. cards + grids ---------------- */
.grid{display:grid;gap:var(--s4)}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.grid-wide{grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr))}

.card{
  position:relative;display:block;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s4) var(--s4) var(--s3);
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
a.card:hover{transform:translateY(-2px);border-color:var(--hall,var(--gold-2));box-shadow:var(--shadow-2)}
.card h3{margin:.15rem 0 .3rem;font-size:1.1rem}
.card p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.card .num{
  display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hall,var(--gold));font-weight:600;
}
.card-foot{display:flex;flex-wrap:wrap;gap:var(--s1) .4rem;align-items:center;margin-top:var(--s3)}
.card.done{border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.card .doneflag{position:absolute;top:var(--s3);right:var(--s4);color:var(--good);font-size:.9rem}
.card-hall{border-left:3px solid var(--hall)}

/* ---------------- 7. hero + home ---------------- */
.hero{padding:var(--s2) 0 var(--s5);border-bottom:1px solid var(--line);margin-bottom:var(--s6)}
.hero h1{max-width:24ch}
.hero .lede{margin-bottom:var(--s5);font-size:1.15em}
.hero-stats{display:flex;flex-wrap:wrap;gap:var(--s6) var(--s7);margin:var(--s5) 0 0}
.stat b{display:block;font-family:var(--serif);font-size:1.9rem;color:var(--gold);line-height:1}
.stat span{font-family:var(--sans);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin:var(--s7) 0 var(--s2)}
.section-head h2{margin:0}
.section-head a{
  font-family:var(--sans);font-size:.82rem;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:24px;    /* WCAG 2.5.8 */
}

.onboard{
  border:1px solid var(--gold-2);background:linear-gradient(180deg,var(--accent-soft),transparent);
  border-radius:var(--r3);padding:var(--s5);margin-bottom:var(--s6);
}
.onboard h2{margin:0 0 var(--s2);font-size:1.3rem}
.onboard p{color:var(--ink-2);font-size:.95rem;max-width:60ch}
.onboard-opts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.onboard-close{position:absolute;top:var(--s3);right:var(--s3)}

/* ---------------- 8. prose ---------------- */
.reader{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:var(--s7);align-items:start}
.prose{max-width:var(--measure)}
.prose>h2{
  font-size:1.42em;margin:2.2em 0 .6em;padding-bottom:.3em;border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--topbar-h) + 1.5rem);position:relative;
}
.prose>h3{font-size:1.1em;margin:1.7em 0 .4em;scroll-margin-top:calc(var(--topbar-h) + 1.5rem)}
.anchor{
  opacity:0;margin-left:.4rem;font-size:.7em;color:var(--ink-4);text-decoration:none;
  font-family:var(--mono);transition:opacity .12s;
}
.prose h2:hover .anchor,.prose h3:hover .anchor,.anchor:focus{opacity:1;color:var(--accent)}
.prose ul,.prose ol{margin:0 0 var(--s4);padding-left:1.35rem}
.prose li{margin-bottom:.42rem}
.prose li>strong:first-child{color:var(--ink)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--gold)}
.prose blockquote{
  margin:var(--s5) 0;padding:var(--s3) var(--s4);border-left:3px solid var(--hall,var(--gold));
  background:var(--paper-2);border-radius:0 var(--r1) var(--r1) 0;color:var(--ink-2);
  font-family:var(--serif);font-size:1.08em;
}
.prose blockquote p:last-child{margin:0}
.prose code{font-family:var(--mono);font-size:.87em;background:var(--paper-3);padding:.1em .38em;border-radius:5px}
.prose pre{background:var(--paper-3);padding:var(--s4);border-radius:var(--r1);overflow-x:auto;border:1px solid var(--line);font-size:.88em}
.prose pre code{background:none;padding:0}
.table-wrap{overflow-x:auto;margin:0 0 var(--s4);border-radius:var(--r1)}
.prose table{border-collapse:collapse;width:100%;font-size:.92em}
.prose th,.prose td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-family:var(--sans);font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-3)}
.prose tbody tr:last-child td{border-bottom:0}

/* callouts */
.callout{
  margin:var(--s5) 0;padding:var(--s4);border-radius:var(--r2);border:1px solid var(--line);
  background:var(--paper-2);font-size:.95em;
}
.callout>b{
  display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--s2);font-weight:600;
}
.callout p:last-child,.callout ul:last-child,.callout ol:last-child{margin-bottom:0}
.callout.safety{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:var(--danger-soft)}
.callout.safety>b{color:var(--danger)}
.callout.example{border-left:3px solid var(--accent)}
.callout.example>b{color:var(--accent)}
.callout.numbers{background:var(--paper-3)}
.callout.numbers>b{color:var(--ink-3)}
.callout.script{border-style:dashed}
.callout.script>b{color:var(--accent)}
.callout.jurisdiction>b{color:var(--ink-3)}
details.callout{padding:0}
details.callout>summary{
  cursor:pointer;padding:var(--s3) var(--s4);font-family:var(--sans);font-weight:600;font-size:.9rem;
  list-style:none;display:flex;gap:.5rem;align-items:center;
}
details.callout>summary::-webkit-details-marker{display:none}
details.callout>summary::before{content:"▸";color:var(--accent);transition:transform .15s;display:inline-block}
details.callout[open]>summary::before{transform:rotate(90deg)}
details.callout .details-body{padding:0 var(--s4) var(--s3)}

/* task lists inside prose */
.tasklist{list-style:none;padding-left:0}
.tasklist li{margin-bottom:.15rem}
/* The label is the hit target, which is what gets these to the WCAG 2.5.8
   minimum of 24x24 without drawing an enormous checkbox. */
.tasklist label{
  display:flex;gap:.65rem;align-items:flex-start;
  min-height:32px;padding:.3rem .4rem .3rem .1rem;
  border-radius:var(--r1);cursor:pointer;
}
.tasklist label:hover{background:var(--paper-3)}
.tasklist label:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.tasklist input{
  margin:.15em 0 0;accent-color:var(--good);
  width:24px;height:24px;flex:0 0 auto;cursor:pointer;
}
.tasklist li.checked>label>span{color:var(--ink-4);text-decoration:line-through}

/* glossary term underline (toggleable) */
.gterm{
  border-bottom:1px dashed var(--ink-faint);cursor:help;
}
:root[data-terms="off"] .gterm{border-bottom:0;cursor:auto}

/* on-this-page */
.toc{position:sticky;top:calc(var(--topbar-h) + 1.5rem);font-family:var(--sans);font-size:.82rem;max-height:calc(100vh - var(--topbar-h) - 3rem);overflow-y:auto}
.toc b{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-bottom:var(--s2)}
.toc a{display:block;padding:.24rem 0 .24rem .7rem;border-left:2px solid var(--line);color:var(--ink-3);line-height:1.35}
.toc a:hover{color:var(--ink-2)}
.toc a.active{color:var(--accent);border-left-color:var(--accent);font-weight:600}
.toc .lvl3{padding-left:1.5rem;font-size:.78rem}
:root[data-toc="off"] .toc{display:none}
:root[data-toc="off"] .reader{grid-template-columns:minmax(0,1fr)}

/* ---------------- 9. module chrome ---------------- */
.mod-head{border-bottom:1px solid var(--line);padding-bottom:var(--s4);margin-bottom:var(--s5)}
.mod-meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:var(--s3)}
.mod-tools{display:flex;flex-wrap:wrap;gap:var(--s2);margin-left:auto}
.onething{
  display:flex;gap:var(--s3);align-items:flex-start;margin:var(--s5) 0;padding:var(--s4);
  border-radius:var(--r2);border:1px solid var(--hall,var(--gold-2));background:var(--accent-soft);
}
.onething .lab{
  font-family:var(--sans);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--hall,var(--gold));font-weight:700;white-space:nowrap;padding-top:.2em;
}
.onething p{margin:0;font-family:var(--serif);font-size:1.1em;color:var(--ink)}
.prereq{font-family:var(--sans);font-size:.86rem;color:var(--ink-3);margin:var(--s3) 0 0}
.prereq a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

.mod-nav{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line);font-family:var(--sans);font-size:.9rem;flex-wrap:wrap}
.mod-nav a{display:block;max-width:47%}
.mod-nav a:hover b{color:var(--gold)}
.mod-nav small{display:block;color:var(--ink-4);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase}
.mod-nav b{font-family:var(--serif);font-weight:600}

/* self-check */
.selfcheck{margin:var(--s6) 0 0;border:1px solid var(--line);border-radius:var(--r3);background:var(--paper-2);overflow:hidden}
.selfcheck-head{padding:var(--s4);border-bottom:1px solid var(--line)}
.selfcheck-head h2{margin:0 0 var(--s1);font-size:1.2rem}
.selfcheck-head p{margin:0;font-size:.88rem;color:var(--ink-3)}
.sc-item{border-bottom:1px solid var(--line)}
.sc-item:last-child{border-bottom:0}
.sc-q{
  width:100%;text-align:left;background:none;border:0;padding:var(--s4);cursor:pointer;
  display:flex;gap:var(--s3);align-items:flex-start;font-family:var(--body-face);
}
.sc-q:hover{background:var(--paper-3)}
.sc-q .n{font-family:var(--mono);font-size:.75rem;color:var(--ink-4);padding-top:.25em}
.sc-q .qt{flex:1;font-size:.98em}
.sc-q .rev{font-family:var(--sans);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);white-space:nowrap;padding-top:.35em}
.sc-a{padding:0 var(--s4) var(--s4) calc(var(--s4) + 1.6rem);color:var(--ink-2);font-size:.94em}
.sc-a p{margin:0 0 var(--s2)}
.sc-foot{padding:var(--s3) var(--s4);background:var(--paper-3);display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;font-size:.85rem;color:var(--ink-3);font-family:var(--sans)}

/* notes */
.notes{margin:var(--s6) 0 0}
.notes textarea{
  width:100%;min-height:110px;resize:vertical;padding:var(--s3);border-radius:var(--r2);
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink);
  font-family:var(--body-face);font-size:.95em;line-height:1.55;
}
.notes-status{font-family:var(--sans);font-size:.75rem;color:var(--ink-4);margin-top:var(--s1)}

/* ---------------- 10. pathways, progress, lists ---------------- */
.steps{list-style:none;margin:var(--s5) 0 0;padding:0;counter-reset:step}
.steps li{position:relative;padding:0 0 var(--s5) 3rem;border-left:2px solid var(--line);margin-left:1rem}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{
  counter-increment:step;content:counter(step);position:absolute;left:-1rem;top:-.15rem;
  width:2rem;height:2rem;border-radius:999px;display:grid;place-items:center;
  background:var(--paper-2);border:1px solid var(--line);font-family:var(--mono);font-size:.78rem;color:var(--ink-3);
}
.steps li.done::before{content:"✓";color:var(--good);border-color:var(--good)}
.steps b{font-family:var(--serif);font-size:1.06rem}
.steps p{margin:.1rem 0 0;font-size:.88rem;color:var(--ink-3)}
.steps a:hover b{color:var(--gold)}

.bar{height:7px;border-radius:99px;background:var(--paper-3);overflow:hidden;margin:var(--s2) 0 .2rem}
.bar>i{display:block;height:100%;background:var(--hall,var(--gold));border-radius:99px;transition:width .5s ease}
.prog-row{display:flex;justify-content:space-between;font-family:var(--sans);font-size:.78rem;color:var(--ink-4)}
.hall-prog{margin-bottom:var(--s4)}
.hall-prog b{font-family:var(--serif);font-size:1rem}

.ring-wrap{display:flex;gap:var(--s6);align-items:center;flex-wrap:wrap;margin:var(--s5) 0}
.ring{position:relative;width:132px;height:132px;flex:0 0 auto}
.ring svg{transform:rotate(-90deg)}
.ring-mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.1}
.ring-mid b{display:block;font-family:var(--serif);font-size:1.7rem;color:var(--gold)}
.ring-mid span{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}

.azbar{display:flex;flex-wrap:wrap;gap:.2rem;margin:var(--s4) 0}
.azbar a{
  display:grid;place-items:center;min-width:1.7rem;height:1.7rem;border-radius:var(--r1);
  border:1px solid var(--line);font-family:var(--mono);font-size:.76rem;color:var(--ink-3);
}
.azbar a:hover{border-color:var(--gold);color:var(--gold)}
.azbar a.off{opacity:.32;pointer-events:none}

.filters{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:var(--s4) 0 var(--s5)}
.filters input[type="search"],.filters select{
  padding:.45rem .7rem;border-radius:999px;border:1px solid var(--line);
  background:var(--paper-2);color:var(--ink);font-family:var(--sans);font-size:.86rem;min-height:36px;
}
.filters input[type="search"]{min-width:min(260px,60vw)}

.gterm-card{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3) var(--s4);background:var(--paper-2)}
.gterm-card dt{font-family:var(--serif);font-size:1.05rem;font-weight:600;margin-bottom:.2rem}
.gterm-card dd{margin:0;font-size:.92rem;color:var(--ink-2)}
.gterm-card .src{display:block;margin-top:var(--s2);font-family:var(--sans);font-size:.74rem;color:var(--ink-4)}
.gterm-card .src a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.az-head{
  margin:var(--s6) 0 var(--s3);font-family:var(--mono);font-size:1.5rem;color:var(--gold);
  border-bottom:1px solid var(--line);padding-bottom:.2rem;scroll-margin-top:calc(var(--topbar-h) + 1rem);
}

.tmpl-body{
  white-space:pre-wrap;font-family:var(--mono);font-size:.86rem;line-height:1.65;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s4);overflow-x:auto;
}
.tmpl-body mark{background:color-mix(in srgb,var(--gold) 26%,transparent);color:inherit;border-radius:3px;padding:0 .15em}
.fillgrid{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));margin:var(--s4) 0}
.fillgrid label{font-family:var(--sans);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4);display:block}
.fillgrid input{
  width:100%;padding:.4rem .6rem;border-radius:var(--r1);border:1px solid var(--line);
  background:var(--paper-2);color:var(--ink);font-family:var(--sans);font-size:.88rem;margin-top:.2rem;
}

.checkitems{list-style:none;padding:0;margin:var(--s5) 0 0}
.checkitems li{display:flex;gap:var(--s3);align-items:flex-start;padding:.55rem 0;border-bottom:1px solid var(--line)}
.checkitems li:last-child{border-bottom:0}
.checkitems input{margin-top:.3em;width:1.15em;height:1.15em;accent-color:var(--good);flex:0 0 auto}
.checkitems li.checked label{color:var(--ink-4);text-decoration:line-through}
.checkitems label{cursor:pointer;line-height:1.5}

.emerg-note{
  border:1px solid var(--danger);background:var(--danger-soft);border-radius:var(--r3);
  padding:var(--s4) var(--s5);margin-bottom:var(--s5);
}
.emerg-note b{color:var(--danger)}
.emerg-card{border:1px solid var(--line);border-radius:var(--r2);background:var(--paper-2);margin-bottom:var(--s3);overflow:hidden}
.emerg-card>summary{
  cursor:pointer;padding:var(--s4);font-family:var(--serif);font-size:1.1rem;font-weight:600;
  list-style:none;display:flex;gap:var(--s3);align-items:center;
}
.emerg-card>summary::-webkit-details-marker{display:none}
.emerg-card>summary::after{content:"+";margin-left:auto;color:var(--ink-faint);font-family:var(--mono)}
.emerg-card[open]>summary::after{content:"–"}
.emerg-card.urgent>summary{border-left:3px solid var(--danger)}
.emerg-body{padding:0 var(--s4) var(--s4)}
.emerg-body ol{padding-left:1.3rem;margin:0 0 var(--s4)}
.emerg-body li{margin-bottom:.4rem}
.contacts{list-style:none;padding:0;margin:0}
.contacts li{padding:.5rem 0;border-top:1px solid var(--line);font-size:.92rem}
.contacts b{display:block;font-family:var(--sans);font-size:.82rem}
.contacts span{color:var(--ink-2)}

.notice{padding:var(--s4);border:1px dashed var(--line-2);border-radius:var(--r2);color:var(--ink-3);font-size:.92rem}
.spinner{color:var(--ink-4);font-size:.9rem;padding:var(--s6) 0}
.tagrow{display:flex;flex-wrap:wrap;gap:.35rem;margin:var(--s3) 0 var(--s5)}
.crumbs{
  font-family:var(--sans);font-size:.8rem;color:var(--ink-3);
  margin-bottom:var(--s4);display:flex;flex-wrap:wrap;align-items:center;
}
.crumbs a,.crumbs>span[aria-current]{display:inline-flex;align-items:center;min-height:24px;padding:.1rem 0}
.crumbs a:hover{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.crumbs .sep{opacity:.5;margin:0 .35rem}

/* ---------------- 11. overlays ---------------- */
.palette{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);
  display:flex;align-items:flex-start;justify-content:center;padding:clamp(1rem,8vh,6rem) 1rem 1rem;
  backdrop-filter:blur(3px);
}
.palette-box{
  width:min(680px,100%);background:var(--paper-2);border:1px solid var(--line-2);
  border-radius:var(--r3);box-shadow:var(--shadow-3);overflow:hidden;display:flex;flex-direction:column;
  max-height:min(72vh,620px);
}
.palette-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-bottom:1px solid var(--line);color:var(--ink-4)}
.palette-head input{
  flex:1;border:0;background:none;color:var(--ink);font-family:var(--sans);font-size:1.02rem;outline:none;min-width:0;
}
.palette-results{overflow-y:auto;padding:var(--s2);flex:1}
.pal-group{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);padding:var(--s3) var(--s3) var(--s1);font-weight:600}
.pal-item{
  display:flex;gap:var(--s3);align-items:baseline;padding:.5rem .7rem;border-radius:var(--r1);
  cursor:pointer;color:var(--ink-2);
}
.pal-item .kind{font-family:var(--mono);font-size:.72rem;color:var(--ink-4);min-width:4.6rem;flex:0 0 auto;text-transform:uppercase;letter-spacing:.06em}
.pal-item .title{font-family:var(--body-face);font-size:.96rem;color:var(--ink)}
.pal-item .sub{display:block;font-size:.78rem;color:var(--ink-4);margin-top:.1rem}
.pal-item .body{flex:1;min-width:0}
.pal-item[aria-selected="true"]{background:var(--accent-soft)}
.pal-item[aria-selected="true"] .title{color:var(--accent)}
.pal-item mark{background:color-mix(in srgb,var(--gold) 30%,transparent);color:inherit;border-radius:3px}
.palette-foot{
  display:flex;gap:var(--s4);align-items:center;padding:var(--s2) var(--s4);border-top:1px solid var(--line);
  font-family:var(--sans);font-size:.72rem;color:var(--ink-4);flex-wrap:wrap;
}
.palette-foot-hint{margin-left:auto;opacity:.85}
.pal-empty{padding:var(--s5);color:var(--ink-3);font-size:.92rem;text-align:center}

.prefs{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.5);display:grid;place-items:center;padding:1rem;backdrop-filter:blur(3px)}
.prefs-box{
  width:min(460px,100%);max-height:88vh;overflow-y:auto;background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:var(--r3);box-shadow:var(--shadow-3);padding:var(--s5);
}
.prefs-box h2{margin:0 0 var(--s1);font-size:1.25rem}
.prefs-note{font-family:var(--sans);font-size:.78rem;color:var(--ink-4);margin:0 0 var(--s4)}
.prefs fieldset{border:0;padding:0;margin:0 0 var(--s4)}
.prefs legend{font-family:var(--sans);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);font-weight:600;margin-bottom:var(--s2)}
.seg{display:flex;gap:.3rem;flex-wrap:wrap}
.seg button{
  flex:1 1 auto;padding:.45rem .6rem;border-radius:var(--r1);border:1px solid var(--line);
  background:var(--paper-3);cursor:pointer;font-family:var(--sans);font-size:.84rem;min-height:38px;
}
.seg button:hover{border-color:var(--gold-2)}
.seg button[aria-checked="true"],.seg button[aria-pressed="true"]{
  background:var(--gold);border-color:var(--gold);color:var(--gold-ink);font-weight:600;
}
.seg [data-pref="size"][data-value="1"]{font-size:.74rem}
.seg [data-pref="size"][data-value="2"]{font-size:.9rem}
.seg [data-pref="size"][data-value="3"]{font-size:1.08rem}
.seg [data-pref="size"][data-value="4"]{font-size:1.28rem}
.check{display:flex;gap:.55rem;align-items:center;font-family:var(--sans);font-size:.88rem;padding:.3rem 0;cursor:pointer}
.check input{width:24px;height:24px;accent-color:var(--gold);flex:0 0 auto}
.prefs-actions{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s5)}
.keys{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.86rem}
.keys td{padding:.4rem .3rem;border-bottom:1px solid var(--line);color:var(--ink-2)}
.keys td:first-child{white-space:nowrap;width:9.5rem}

.toast{
  position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:300;
  background:var(--ink);color:var(--paper);padding:.6rem 1.1rem;border-radius:999px;
  font-family:var(--sans);font-size:.86rem;box-shadow:var(--shadow-3);max-width:90vw;text-align:center;
}

/* ---------------- 12. responsive ---------------- */
@media (max-width:1080px){
  .reader{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:900px){
  .nav-toggle{display:grid}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:50;width:min(86vw,300px);flex-basis:auto;
    background:var(--paper-2);transform:translateX(-102%);transition:transform .22s ease;
    padding-top:var(--s5);border-right:1px solid var(--line-2);box-shadow:var(--shadow-3);
  }
  .sidebar.open{transform:none}
  .shell{display:block}
  main{padding-left:clamp(1rem,4vw,1.5rem);padding-right:clamp(1rem,4vw,1.5rem)}
  .searchtrigger{min-width:0;padding:0;width:38px;justify-content:center;border-radius:999px}
  .searchtrigger-label,.searchtrigger-kbd{display:none}
}
@media (max-width:640px){
  .brand-text small{display:none}
  .hero-stats{gap:var(--s5)}
  .mod-nav a{max-width:100%}
  .mod-tools{margin-left:0;width:100%}
}
@media (max-width:420px){
  .brand-text{display:none}
}

/* ---------------- 13. print ---------------- */
@media print{
  .topbar,.sitefoot,.sidebar,.toc,.mod-nav,.palette,.prefs,.toast,.scroll-progress,
  .mod-tools,.notes,.onboard,.scrim,.skip,.selfcheck .sc-q .rev{display:none!important}
  :root{--paper:#fff;--paper-2:#fff;--paper-3:#f4f4f4;--ink:#000;--ink-2:#222;--ink-3:#444;--line:#bbb}
  body{background:#fff;color:#000;font-size:11pt}
  .shell{display:block}
  main{padding:0;max-width:none}
  .reader{grid-template-columns:1fr}
  .prose{max-width:none}
  .card,.callout,.selfcheck{break-inside:avoid;box-shadow:none}
  .prose a::after{content:" (" attr(href) ")";font-size:.8em;color:#555;word-break:break-all}
  .prose a[href^="#"]::after{content:""}
  .sc-a{display:block!important}
  h1,h2,h3{break-after:avoid}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}


/* ---------------- accessibility layer ---------------- */

/* WCAG 1.4.11 asks for 3:1 on the boundary of anything you can operate.
   Decorative hairlines are exempt, so only real controls get --line-strong. */
.btn,.icon-btn,.searchtrigger,.seg button,.chip-btn,
input[type="text"],input[type="search"],input[type="number"],
select,textarea,.palette-head input{
  border-color:var(--line-strong);
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}

/* A visible focus ring that clears 3:1 against both the control and the page. */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r1);
}
.btn:focus-visible,.icon-btn:focus-visible,.seg button:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;
}

/* "Opens in a new tab" is off by default and revealed by the preference,
   so screen-reader users can have it without cluttering the visual page. */
.newtab-hint{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
:root[data-newtab="on"] .newtab-hint{
  position:static;width:auto;height:auto;margin:0;clip:auto;
  white-space:normal;font-size:.82em;color:var(--ink-3);
}

/* Reading ruler: highlights the block under the pointer for people who lose
   their place in long text. Deliberately subtle. */
:root[data-ruler="on"] .prose p:hover,
:root[data-ruler="on"] .prose li:hover,
:root[data-ruler="on"] .prose td:hover{
  background:var(--accent-soft);
  box-shadow:-.5rem 0 0 var(--accent-soft),.5rem 0 0 var(--accent-soft);
}

/* The reduce-animation preference, and the OS setting, get the same treatment. */
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}

/* Users who ask the OS for more contrast get firmer borders and no dim text. */
@media (prefers-contrast: more){
  :root{--ink-3:var(--ink-2); --ink-4:var(--ink-2); --ink-faint:var(--ink-3); --line:var(--line-strong);}
  .card,.callout,.btn,.icon-btn,.seg button{border-width:2px}
  .prose a{text-decoration-thickness:2px}
}

/* Windows High Contrast / forced-colors: let the OS palette win, but keep the
   structure legible by restoring borders that were carrying meaning. */
@media (forced-colors: active){
  .card,.callout,.chip,.btn,.icon-btn,.seg button,.tasklist label{
    border:1px solid CanvasText;
  }
  .bar>i,.ring circle{forced-color-adjust:none}
  :focus-visible{outline:3px solid Highlight;outline-offset:2px}
  .side-link[aria-current="page"]{border:2px solid Highlight}
}

/* Support 200% zoom and 320px viewports without a horizontal scrollbar
   (WCAG 1.4.10 reflow). Long strings are the usual culprit. */
.prose,.card,.callout,.side-link,.pal-item{overflow-wrap:break-word}
.prose pre,.table-wrap{max-width:100%}

/* WCAG 1.4.12 text spacing: nothing may clip when users override spacing. */
.chip,.btn,.side-link,.card h3,.pal-item .title{overflow:visible;text-overflow:clip}


/* Glossary cards: the related-module links are a list of controls, not inline
   prose, so they need the 24px minimum target rather than the inline exception. */
.gterm-card .term-mods{
  display:flex;flex-wrap:wrap;gap:.15rem .5rem;margin-top:var(--s2);
  font-family:var(--sans);font-size:.78rem;
}
.gterm-card .term-mods a{
  display:inline-flex;align-items:center;min-height:24px;
  color:var(--accent);text-decoration:underline;text-underline-offset:3px;
}
.gterm-card .term-mods a:hover{color:var(--gold)}

/* Hall name on the progress page. */
.hall-prog b a{display:inline-flex;align-items:center;min-height:24px}


/* ---------------- reading affordances ---------------- */

/* Loading skeleton. Holds the layout steady so the page does not jump when the
   markdown arrives, which is the actual complaint behind "it feels slow". */
.skeleton{display:flex;flex-direction:column;gap:.7rem;padding:var(--s4) 0}
.skeleton span{
  display:block;height:1em;border-radius:6px;
  background:linear-gradient(90deg,var(--paper-3) 25%,var(--paper-4) 37%,var(--paper-3) 63%);
  background-size:400% 100%;
  animation:skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton span.gap{background:none;animation:none;height:.6rem}
@keyframes skeleton-shimmer{
  0%{background-position:100% 0}
  100%{background-position:0 0}
}
@media (prefers-reduced-motion: reduce){
  .skeleton span{animation:none;background:var(--paper-3)}
}
:root[data-motion="reduce"] .skeleton span{animation:none;background:var(--paper-3)}

/* Time remaining, pinned under the progress bar. Uses the module's own
   estimate so it agrees with every other figure in the library. */
.time-left{
  position:fixed;top:calc(var(--topbar-h) + .5rem);right:clamp(1rem,4vw,2rem);
  z-index:30;margin:0;padding:.25rem .6rem;border-radius:999px;
  background:var(--paper-2);border:1px solid var(--line);
  font-family:var(--sans);font-size:.74rem;color:var(--ink-3);
  box-shadow:var(--shadow-1);pointer-events:none;
}
@media print{.time-left{display:none}}

/* Back to top. Appears only once scrolling has gone far enough to need it. */
.back-to-top{
  position:fixed;bottom:1.25rem;right:1.25rem;z-index:35;
  width:44px;height:44px;border-radius:999px;display:grid;place-items:center;
  background:var(--paper-2);border:1px solid var(--line-strong);color:var(--ink-2);
  box-shadow:var(--shadow-2);cursor:pointer;
}
.back-to-top:hover{color:var(--accent);border-color:var(--accent)}
@media print{.back-to-top{display:none}}

/* Resume prompt. An offer rather than an automatic jump, because an
   unrequested scroll is disorienting and would fight a deep link. */
.resume{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:var(--s4) 0 0}
.resume-note{font-family:var(--sans);font-size:.78rem;color:var(--ink-3)}
.btn-quiet{background:var(--paper-3)}
@media print{.resume{display:none}}

/* Recent searches sit at the top of an empty palette. */
.pal-item .kind{white-space:nowrap}


/* Five theme options need to wrap rather than squeeze. */
.prefs .seg{flex-wrap:wrap}
.prefs .seg button{flex:1 1 auto;min-width:5.5rem}