/* ===== KB SHELL - extracted from kb_viewer_template.html at build time.
   Do NOT edit here and do NOT redefine these in a page generator.
   Change the VIEWER; every KB surface follows. ===== */
:root{
  /* FLIPPED: the bar/footer carry the (deepened) ministry red; buttons are light. */
  --red:#7a0011; --red-deep:#5c000c;            /* deepened from the clone's #aa0019 */
  --bar:var(--red); --bar-ink:#fdf0f2; --bar-line:rgba(255,255,255,.22);
  --btn:#d9dee4; --btn-ink:#1a2430; --btn-on:#ffffff;
  --ink:#1a2430; --mut:#5b6b7c; --line:#dfe6ee; --bg:#eef2f6; --panel:#fff;
  --panel2:#f7fafc;   /* the layer BETWEEN --panel (#fff) and --bg (#eef2f6): a sticky
     sub-header/section band needs to read as part of the panel it sits in, not as the
     page canvas behind it, so it can't borrow either end of that pair. Named, not
     invented -- kb_viewer_template.html's .panelHd and .relhd were already painting
     this exact value before this token existed (verify_html_10c 2026-09-04). Any future
     surface with the same sticky-band-inside-a-panel need should reuse THIS, not
     re-sample its own. */
  --accent:#2f6fb0; --accent2:#e8f1fa;
  --foot-bg:var(--red); --foot-ink:#f6e7ea; --foot-link:#ffffff;
  --verse:#0f7b6c; --topic:#7a4bbd; --faq:#b3541e;
  --faq2:#fff5ee;      /* the light companion to --faq, on the accent/accent2 pattern --
     paired hover tint for .faqitem, e.g. background:var(--faq2) with
     border-color:var(--faq). --verse and --topic have the SAME need today
     (kb_viewer_template.html's .chip.v/.chip.t already paint #bfe3dd/#ddd0f0 for this
     exact role) but neither is named yet -- those two literals are reported, not fixed,
     here: naming them is a separate, wider change than the four this token file was
     opened for on 2026-09-04, two days before public launch. */
  --tap:44px; --safe-b: env(safe-area-inset-bottom, 0px);

  /* Two tokens that must NEVER be "cleaned up" as off-palette: neither is a brand or
     content color, and that is the point of both. Added 2026-09-04 when
     verify_html_10c.py's Coherent gate correctly refused to accept either as a
     hard-coded literal in kb_viewer_template.html, and correctly refused a wrong-token
     substitution too -- the honest fix was that these had no token at all, not that an
     existing one was being ignored. */
  --focus:#ffd34d;    /* the keyboard focus ring on EVERY interactive control, sitewide,
     via :focus-visible. This is WCAG 2.4.7-required and PERMANENT -- unlike
     kb_shell.py's separate, unrelated prototype-badge yellow (#ffd400, a different
     value in a different file, stripped from the public build by
     ws-kb-public-chrome-off). A focus ring is deliberately NOT drawn from the content
     palette (red/verse/topic/faq) so it never reads as a themed element instead of an
     accessibility signal -- do not retheme it to match a rebrand. */
  --mark:#ffe680;     /* the <mark> background for search-term and in-book-search
     highlighting. Same reasoning as --focus: intentionally outside the brand/content
     palette (this is the same pale yellow every browser's native find-in-page uses) so a
     highlighted match never looks like themed content. */

  /* MOBILE HEADER WORDMARK -- logo3 end-state, ruled 2026-08-09 (see
     UIWorkshop/decisions/2026-08-09-kb-mobile-header/DECISION.md). Sampled from the
     modal ink INSIDE the strokes of BTBM_Banner.jpg's three text bands. Paul caught the
     first pass by eye 2026-08-09: a MEDIAN-across-the-whole-band sample averages ink
     together with the white paper behind it into a washed-out pastel (#283242/#87272b/
     #767e63) -- these are the corrected, re-sampled values; the earlier three are wrong.
     --wm-l2 lands close to --red (#7a0011) on purpose, not by accident: the ministry's
     brand red was evidently derived from this same artwork, so the two are kept related
     deliberately rather than left to drift apart as separate literals. */
  --wm-l1:#131e2d; --wm-l2:#770c14; --wm-l3:#596145;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);background:var(--bg);overscroll-behavior-y:none}
#chrome{flex:0 0 auto;background:#fff;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:8px;padding:6px 10px;min-height:52px}
#logoA{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);min-width:0}
#markImg{height:34px;width:34px;object-fit:contain;display:block;flex:0 0 auto}
#wordmark{font-size:12.5px;line-height:1.18;color:var(--red);font-weight:600;white-space:nowrap}
#logoImg{height:40px;width:auto;display:none}
#chrome .spacer{flex:1}
#navBtn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);
  min-height:var(--tap);border:1px solid var(--line);background:#fff;border-radius:9px;font-size:19px;cursor:pointer}
#siteNav{display:none}
#kbSearch{display:flex;margin:0 6px 0 0}
#kbSearch input{width:150px;max-width:32vw;min-height:34px;padding:6px 10px;
  border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-size:14px}
#kbSearch input::placeholder{color:var(--mut)}
@media (max-width:520px){
  #kbSearch input{width:96px}
}
#navDrawer{position:fixed;inset:0;background:rgba(12,20,28,.5);z-index:70;display:none}
#navDrawer.show{display:block}
#navDrawer .sheet{position:absolute;top:0;left:0;bottom:0;width:min(86vw,340px);background:#fff;
  overflow:auto;padding:14px 12px calc(18px + var(--safe-b));box-shadow:2px 0 20px rgba(0,0,0,.25)}
#navDrawer a{display:block;padding:11px 10px;color:var(--ink);text-decoration:none;border-radius:8px;font-size:15px}
#navDrawer a:hover{background:var(--accent2)}
#navDrawer .mgrp{display:flex;width:100%;align-items:center;justify-content:space-between;
  gap:8px;padding:13px 10px;margin:2px 0;background:#f4f7fa;border:1px solid var(--line);
  border-radius:8px;font-size:14.5px;font-weight:800;color:var(--ink);cursor:pointer;
  text-transform:uppercase;letter-spacing:.03em;min-height:var(--tap)}
#navDrawer .mgrp:hover{background:#fdf2f4;border-color:var(--red);color:var(--red)}
#navDrawer .mgrp .caret{font-size:16px;font-weight:900}
#navDrawer .msub{display:none;margin:0 0 6px 8px;border-left:2px solid var(--line);padding-left:8px}
#navDrawer .msub.open{display:block}
#navDrawer a.mtop{font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:14.5px;
  background:#f4f7fa;border:1px solid var(--line);border-radius:8px;margin:2px 0;min-height:var(--tap);
  display:flex;align-items:center}
#navDrawer a.mtop:hover{background:#fdf2f4;border-color:var(--red);color:var(--red)}
#navDrawer .sub{font-size:14px;color:#33465b}
#foot{flex:0 0 auto;background:var(--foot-bg);color:var(--foot-ink);
  padding:12px 14px calc(12px + var(--safe-b));font-size:12.5px;display:block;border-top:1px solid var(--bar-line)}
#foot a{color:var(--foot-link);text-decoration:none;margin-right:15px;display:inline-block;padding:4px 0;font-weight:600}
#foot a:hover{text-decoration:underline}
#foot a.donate{background:var(--btn);color:var(--btn-ink);padding:6px 16px;border-radius:25px;margin-right:12px}
#foot a.donate:hover{background:var(--btn-on);text-decoration:none}
#foot .cp{margin-top:8px;color:var(--foot-ink);opacity:.8;font-size:11.5px}
#foot .vbadge{display:inline-block;margin-left:6px;padding:1px 7px;border:1px solid var(--bar-line);
  border-radius:10px;color:var(--foot-ink);opacity:.85;font-size:10.5px;font-weight:700;
  letter-spacing:.02em;vertical-align:middle;white-space:nowrap}
#crumbBand{flex:0 0 auto;background:var(--panel);border-bottom:1px solid var(--line);
  padding:6px 10px;font-size:12.5px;color:var(--mut);display:flex;align-items:center;
  gap:6px;min-height:26px;white-space:nowrap}
#crumbBand .sep{opacity:.5}
#crumbBand a{color:var(--mut);text-decoration:none;border-bottom:1px solid transparent}
#crumbBand a:hover,#crumbBand a:focus{color:var(--ink);border-bottom-color:var(--line)}
#crumbBand b{color:var(--ink);font-weight:700;min-width:0;overflow:hidden;
  text-overflow:ellipsis}
#crumbBand .crumbtag{display:none}
@media (min-width:700px){
  #crumbBand .crumbtag{display:inline}
}
#crumbBand .share{margin-left:auto}
#relBtnTop{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;
  border-color:var(--red-deep);white-space:nowrap;
  font-family:"Bahnschrift","DIN Alternate","Avenir Next Condensed","Futura",
              "Segoe UI Variable Display","Helvetica Neue",system-ui,sans-serif;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:12.5px}
#relBtnTop .kbFull{background:linear-gradient(92deg,#ffffff 0%,#cfefff 46%,#9fd8ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 10px rgba(140,215,255,.35)}
#relBtnTop.on .kbFull{background:none;-webkit-background-clip:border-box;
  background-clip:border-box;color:var(--red-deep);text-shadow:none}
#relBtnTop:hover{background:var(--red-deep)}
#relBtnTop.on{background:#fff;color:var(--red-deep);box-shadow:inset 0 0 0 2px var(--red-deep)}
#kbGlow{position:relative;width:32px;height:32px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center}
#kbGlow::before{content:'';position:absolute;inset:-3px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #eafcff 0%, #7fe7ff 34%, #4aa8ff 56%,
             rgba(122,75,189,.55) 74%, rgba(122,75,189,0) 100%);
  filter:blur(.5px);animation:kbpulse 3.6s ease-in-out infinite}
#kbGlow::after{content:'';position:absolute;inset:1px;border-radius:50%;
  background:rgba(255,255,255,.93);box-shadow:inset 0 0 6px rgba(74,168,255,.35)}
#relBtnTop.on #kbGlow::before{animation-duration:2.2s}
@media (prefers-reduced-motion:reduce){
  #kbGlow::before{animation:none}
}
#relBtnTop #kbLogo{position:relative;z-index:1;height:24px;width:24px;object-fit:contain;
  display:block;background:transparent;border-radius:0;padding:0}
#relBtnTop .kbShort{display:none}
#relBtnTop .kbFull{display:inline}
.chiprow{display:flex;flex-wrap:wrap;gap:0}
.chip{display:inline-block;padding:7px 11px;margin:0 6px 7px 0;border:1px solid var(--line);
  border-radius:999px;font-size:13.5px;cursor:pointer;background:#fbfdff;text-decoration:none;color:var(--ink)}
.chip:hover{border-color:var(--btn);background:#fdf2f4}
.chip.v{border-color:#bfe3dd}
.chip.t{border-color:#ddd0f0}
.chip.p{border-color:var(--accent2)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:#fff;color:var(--ink);
  padding:10px 14px;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.3)}
@media (max-width:899px){
  #chrome{flex-wrap:wrap;row-gap:8px}
  #kbSearch{order:9;flex:1 0 100%;margin:0}
  #kbSearch input{width:100%;max-width:none;min-height:var(--tap);font-size:16px}
  #logoImg{display:none}
  #markImg{display:block;height:38px;width:38px;object-fit:contain;flex:0 0 auto}
  #wordmark{display:block;line-height:1.05;white-space:nowrap}
  #wordmark .l1{display:block;font:800 13px/1.1 'Segoe UI',system-ui,sans-serif;
                letter-spacing:.005em;color:var(--wm-l1);text-transform:uppercase}
  #wordmark .l2{display:block;font:800 italic 14px/1.15 'Segoe UI',system-ui,sans-serif;
                color:var(--wm-l2)}
  #wordmark .l3{display:block;font:600 italic 9.5px/1.2 'Segoe UI',system-ui,sans-serif;
                color:var(--wm-l3)}
  #relBtnTop .kbFull{display:none}
  #relBtnTop .kbShort{display:inline}
}
@media (min-width:900px){
  #markImg,#wordmark{display:none!important}
  #logoImg{display:block}
}
@media (min-width:900px){
  #chrome{padding:8px 16px;min-height:64px}
  #chrome img{height:46px}
  #navBtn{display:none}
  #siteNav{display:flex;gap:2px;align-items:center}
  #siteNav .mi{position:relative}
  #siteNav .mi > a{display:block;padding:10px 11px;color:var(--ink);text-decoration:none;font-size:13px;font-weight:700;border-radius:7px}
  #siteNav .mi > a:hover{background:#fdf2f4;color:var(--btn)}
  #siteNav .sub{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);
    border-radius:9px;box-shadow:0 10px 26px rgba(15,30,50,.16);min-width:250px;padding:6px;z-index:75}
  #siteNav .mi:hover .sub{display:block}
  #siteNav .sub a{display:block;padding:9px 11px;font-size:13.5px;color:var(--ink);text-decoration:none;border-radius:6px}
  #siteNav .sub a:hover{background:#fdf2f4}
  .chip{padding:3px 9px;margin:0 4px 5px 0;font-size:12.5px}
}
@keyframes kbpulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}

/* ===== content-page layer: uses shell tokens only ===== */
body{background:var(--bg);color:var(--ink);
  font:16px/1.62 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:0 14px}
.crumb{font-size:13px;color:var(--mut);padding:12px 0 0;display:flex;
  flex-wrap:wrap;align-items:center;gap:6px}
.crumb a{color:var(--mut)} .crumb span{margin:0 6px;opacity:.5}
article{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px 18px;margin-top:12px;box-shadow:0 1px 3px rgba(20,40,60,.06)}
h1{font-size:26px;line-height:1.28;margin:.1em 0 .5em}
.byline{font-size:13.5px;color:var(--mut);border-left:3px solid var(--faq);
  padding-left:12px;margin:0 0 16px;border-radius:0}
.byline b{color:var(--ink)}
.answer{font-size:17px;line-height:1.7}
.answer p{margin:0 0 1em} .answer p:first-child{font-size:18px}
.also{margin:14px 0 0;padding:10px 12px;background:var(--accent2);border-radius:10px;
  font-size:13.5px;color:var(--mut);line-height:1.55}
.also b{color:var(--ink)}
.srcline{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--mut)}
.srcline a{font-weight:600}
.rel{margin-top:24px}
.rel h2{font-size:14px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);
  margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.rel.v h2{border-color:var(--verse)} .rel.t h2{border-color:var(--topic)}
.rel.f h2{border-color:var(--faq)}
.rel.noitems{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* Paul's first-order topic groupings, 2026-09-04. ⚠ SHELL TOKENS ONLY - no new
   colours and no hex fallbacks. A token-with-hex-fallback (the shell has no `muted`
   token; it is `mut`) written into an admin sheet
   earlier the same day cost a broken gate, a halted batch and a self-sustaining
   reporting loop, because the token did not exist and the hex tripped the colour
   check. Every value below is a token this shell already defines. */
.chip.grp{border-color:var(--accent);font-weight:600}
/* Strength bands, 2026-09-04. kb_ranking has always computed anchor/strong/moderate/weak
   RELATIVE to the top score in each list; the pages expressed two of the five and every
   chip carried the identical class. Paul: "is there a finer scale to present visually,
   namely stronger<-->weaker?" - it existed, it just never reached the reader.
   ⚠ THE SCALE IS WEIGHT AND OPACITY, NOT NEW COLOUR. Adding a hue would invent a meaning
   ("red = bad") the band does not carry, and would need a token the shell does not define -
   the exact mistake that broke the admin gate earlier the same day. Every value here is an
   existing token or a plain opacity. */
.chip.b-anchor{border-color:var(--accent);font-weight:700}
.chip.b-strong{border-color:var(--ink);font-weight:600}
.chip.b-moderate{opacity:.85}
.chip.b-weak{opacity:.68;font-size:12.5px}
/* THE PASSAGE AS THE BOOK QUOTES IT, with Gene's focus fragments highlighted inside it.
   Paul, 2026-09-04: "Option 3 stance has made passages almost visually worthless ... quote
   the whole passage used literally and highlight/link the fragments visually to the focus
   what he pulled out, with a jump to the page when clicked."
   ⚠ SHELL TOKENS ONLY - the highlight is --accent2 fill on an --accent underline, both
   already defined here. No new colour, no hex fallback. The fragment is the only thing on
   a KB page that is BOTH Scripture and a link, so it has to read as emphasis first and
   affordance second: fill and weight carry the emphasis, the underline carries the link. */
.bq{margin:0 0 14px;border-left:3px solid var(--verse);background:var(--panel);
  padding:.85em 1.05em;border-radius:0 8px 8px 0}
.bq blockquote{margin:0;font-size:16.5px;line-height:1.66;color:var(--ink)}
.bq figcaption{margin-top:.6em;font-size:13px;color:var(--mut)}
.bq figcaption a{color:var(--mut)}
.bq .frag{background:var(--accent2);border-bottom:2px solid var(--accent);color:var(--ink);
  font-weight:600;text-decoration:none;padding:0 .14em;border-radius:3px}
.bq .frag:hover{background:var(--accent);color:#fff}
.bq .frag:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The topic page's own doctrine statement - its first real prose. */
.tlede{border-left:3px solid var(--ink);background:var(--panel);padding:.75em 1em;
  margin:.9em 0;border-radius:0 6px 6px 0}
.tlede p{margin:0;font-size:15.5px;line-height:1.62}
.tlede .src{margin-top:.5em;font-size:13px}
.tlede .src a{color:var(--mut)}
.grpdecl{border-left:3px solid var(--accent);background:var(--panel);
  padding:.7em .95em;margin:.9em 0;border-radius:0 6px 6px 0;font-size:14.5px}
.grpdecl q{color:var(--ink)}
.grpdecl .src{display:block;margin-top:.4em;font-size:13px;color:var(--mut)}
.vrow{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fff}
.vrow .top{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.vrow .ref{font-weight:700;color:var(--verse);font-size:16px}
.vrow .meta{font-size:13px;color:var(--mut)}
.vrow .pgs{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.qlist{list-style:none;margin:0;padding:0}
.qlist li{margin-bottom:8px}
.qlist a{display:block;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--faq);border-radius:0 10px 10px 0;padding:11px 14px;
  text-decoration:none;color:var(--ink);font-weight:600;min-height:var(--tap)}
.qlist a:hover{background:#fff7f2}
.qlist a.why-t{border-left-color:var(--topic)} .qlist a.why-t:hover{background:#faf7ff}
.qlist a.why-v{border-left-color:var(--verse)} .qlist a.why-v:hover{background:#f4fbf9}
.qlist small{display:block;font-weight:400;color:var(--mut);margin-top:2px}
.pager{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.pager a{flex:1 1 220px;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;text-decoration:none;color:var(--ink);min-height:var(--tap)}
.pager small{display:block;color:var(--mut);font-size:12px}
.lic{font-size:12.5px;color:var(--mut);margin-top:20px;line-height:1.55}
.lead{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:18px;margin-top:12px}
.ix h2{margin:24px 0 8px;font-size:19px}
.ix h3{margin:14px 0 6px;font-size:15px;color:var(--mut);font-weight:600}
.ix ol{margin:0 0 4px;padding-left:22px} .ix li{margin:3px 0}
.meta{font-size:13px;color:var(--mut)}
/* page-level accordion (native details/summary, no JS): testament -> book -> chapter on the
   passage index (Paul, 2026-08-03: "accordion style testament->book->chapter" — friendlier,
   and each open panel leaves room for relationship panels later). Tokens only. */
details.acc{border:1px solid var(--line);border-radius:10px;background:#fff;margin:8px 0}
details.acc summary{cursor:pointer;padding:11px 14px;font-weight:700;min-height:var(--tap);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary:after{content:"\25BE";color:var(--mut)} /* down: will expand */
details.acc[open] summary:after{content:"\25B4"}              /* up: will collapse */
details.acc .inner{padding:0 14px 12px}
/* real headings INSIDE summaries: the accordion keeps Paul's convention while heading
   navigation (screen readers, the UI walk's h2 check) keeps its structure — summary
   legally contains h1-h6 (fixed 2026-08-03 after the accordion removed every h2). */
details.acc summary h2,details.acc summary h3{margin:0;font-size:inherit;display:inline}
/* quiet progressive-disclosure for a ranked list's cut TAIL (Paul, 2026-08-05/06: "a
   dead note is worse than a control" — kb_ranking.py keeps the dropped items real, so
   this reveals them in place rather than only counting them). Native <details>/
   <summary>, no JS, same DOWN-closed/UP-open chevron convention as details.acc above —
   but deliberately smaller/quieter (13px, --mut ink, no bold summary) so the cut tail
   stays visually SUBORDINATE to the ranked list above it and never reads as a second,
   equally-important section. One mechanism, all six ranked lists (related questions,
   answer topics, also-asked, related topics, co-occurring topics, viewer page-topics)
   — see kb_ranking.py's module docstring for why these six share one cut rule. No
   heading elements live inside the summary (verify.py / the UI walk's one-<h1> and
   heading-structure checks apply to the whole page, and this region never needs one). */
details.more{margin-top:6px}
details.more>summary{cursor:pointer;font-size:13px;color:var(--mut);list-style:none;
  display:inline-flex;align-items:center;gap:4px;min-height:var(--tap);padding:4px 0}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary:after{content:"\25BE"} /* down: will expand */
details.more[open]>summary:after{content:"\25B4"}  /* up: will collapse */
details.more .inner{margin:4px 0 0;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel)}
/* topic-index filter (2026-08-03, the UI walk's 142-flat-list HIGH — Mira). Shell tokens
   only. The page's JS must auto-open panels containing matches (standing rule). */
input.tfilter{width:100%;max-width:340px;min-height:var(--tap);padding:8px 12px;
  border:1px solid var(--line);border-radius:10px;font:inherit;color:inherit;background:#fff}
@media (min-width:900px){
  h1{font-size:31px}
  article{padding:28px 32px}
  .wrap{padding:0 18px}
}
/* ===== share control (ws-kb-share-control, Option B): a bottom sheet under ~700px,
   an anchored dropdown at 700px and up. Opens on CLICK ONLY -- no hover anywhere (the
   packet's measured defect: hover pre-opened the menu so the click that followed read
   as a toggle and shut it again). Shell tokens only; SHARE_JS wires every behavior. */
.share{position:relative;display:inline-flex;margin-left:auto}
/* ws-kb-share-glyph -- REPLACES the boxed .share-btn rules. Paul, 2026-09-03: replace the
   rounded "share" box with a right-sized, transparent-background icon.

   THE 44x44 IS A TAP TARGET, NOT A VISIBLE BOX. Nothing paints; the house floor of 44px
   is kept because dropping the border must not drop the hit area with it. Measured after:
   trigger 44x44 at every width against the boxed control's 111x44, and the crumb row
   height is UNCHANGED at 83 phone / 56 PC -- the change costs no vertical space and gives
   back 67px of horizontal room on the crumb row.

   THE VISIBLE WORD GOES, THE ACCESSIBLE NAME DOES NOT. `.lbl` is visually hidden rather
   than deleted, and the button carries aria-label="Share this page". A control with no
   accessible name is a defect, not a minimal design. */
.share-btn{background:transparent;border:0;box-shadow:none;border-radius:0;padding:0;
  min-width:var(--tap);min-height:var(--tap);width:var(--tap);height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;gap:0;cursor:pointer}
.share-btn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.share-btn .ic{display:none}          /* the old &#8593; glyph -- the SVG replaces it */
.shareglyph{display:block}
.share-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.share-scrim{position:fixed;inset:0;background:var(--ink);opacity:.5;z-index:70}
.share-menu{margin:0;list-style:none}
.share-item{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap);
  padding:0 16px;border:0;border-top:1px solid var(--line);background:var(--panel);
  color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.share-item:first-child{border-top:0}
.share-item .ic{width:20px;text-align:center;flex:0 0 auto;color:var(--mut)}
.share-status{margin-left:auto;font-size:12px;color:var(--accent);opacity:0}
.share-item[data-copied] .share-status{opacity:1}
@media (max-width:699px){
  /* the phone sheet's own scrim must NEVER sit over its trigger (the packet's second
     measured defect): the trigger keeps a HIGHER z-index than the scrim, in the same
     stacking context, so it stays clickable no matter how the sheet is dimmed behind it. */
  .share-menu{position:fixed;left:0;right:0;bottom:0;z-index:71;background:var(--panel);
    border-top:2px solid var(--line);border-radius:14px 14px 0 0;
    padding:6px 0 calc(8px + var(--safe-b));max-height:70vh;overflow:auto}
  .share-item{min-height:calc(var(--tap) + 4px);padding:0 18px;font-size:16px}
  .share-btn{position:relative;z-index:72}
}
@media (min-width:700px){
  /* the anchored dropdown needs no backdrop of its own -- SHARE_JS's click-outside
     listener closes it, so the scrim stays hidden here rather than dimming the page. */
  .share-scrim{display:none}
  .share-menu{position:absolute;top:calc(100% + 6px);right:0;left:auto;z-index:71;
    min-width:220px;background:var(--panel);border:1px solid var(--line);
    border-radius:10px;padding:4px 0;overflow:hidden}
  .share-item{border-top:0;border-bottom:1px solid var(--line)}
  .share-item:last-child{border-bottom:0}
}
/* print: drop the site nav, the breadcrumb, the build bar and the share control itself
   (ws-kb-share-control's ruling) -- print only, no PDF generation anywhere. */
@media print{
  #chrome,.crumb,#crumbBand,.buildbar,[data-build-bar],.share{display:none!important}
}