/* glossary.gf.cx — page-specific block-kit styles. ADDITIONS ONLY.
   Reconciled 2026-09-07 onto the canonical assets.gf.cx/new-page/template.html
   (patterns.gf.cx/reconcile-onto-the-new-page-template). The shared chrome now
   comes from the shelf, NOT from here:
     · page tokens + body/em/a/.page/p/h2/h3/code prose spec  → inline BASE_STYLE
       (the template's verbatim spec, spliced by glossary_build.py)
     · nav / kicker / h1 / lede / stamp                        → page-header.css
     · collapsible sections (svc-block +/- marker, Expand-all) → accordion.css/js
     · jargon tooltips                                          → tooltip.css
   This file styles ONLY the glossary block-kit: the folding-section heading,
   TL;DR grid, gauge, analogy, callouts, community distinction, Q&A, sources,
   related chips, disclaimer, index list. Promote to the shelf at scale.

   TOKENS: the bare --accent/--bg-warm/--line/--serif/--good/--watch/--bad/etc.
   custom properties used below are carried by each page's inline :root block
   (BASE_STYLE in glossary_build.py), per the canonical pattern — page-header.css
   and accordion.css only READ them via their own --ph-*/fallback chains.

   COMMUNITY: design §5/§6 rule 3 — "Community research" must be labelled +
   visually distinct from sourced copy. render_accordion() adds .acc--community
   to the section's <details class="svc-block …">; the rule below marks it with a
   dashed gold left rule + a faint tint (restrained, on-brand — reuses --gold)
   so a reader can tell "crowd notes" from "cited source" before opening it. */

/* ── Folding sections — heading typography is page-owned; the +/- marker and
      master Expand-all come from accordion.css. Serif bordered heading matches
      the home.gf.cx/contractors reference pages' .log-heading. ── */
.log-heading{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.25;color:var(--ink);margin:30px 0 0;padding-bottom:8px;border-bottom:1px solid var(--line);}
.svc-block>.body{padding:14px 0 8px;}
.svc-block>.body>*:first-child{margin-top:0;}
details.acc--community{border-left:3px dashed var(--gold);border-radius:0 10px 10px 0;background:rgba(184,134,42,.05);padding-left:14px;}
details.acc--community>summary.log-heading{border-bottom-color:rgba(184,134,42,.4);}
details.acc--community>summary.log-heading::before{content:"Community · not vetted";display:block;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}

/* ── TL;DR grid — what / why / target ── */
.tldr{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0;}
.tldr div{background:var(--bg-warm);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.4;}
.tldr b{display:block;font-family:var(--serif);font-size:16px;color:var(--accent);margin-bottom:2px;}

/* ── Callouts — key / trap / rule ── */
.call{border-left:3px solid var(--gold);background:rgba(184,134,42,.09);border-radius:0 8px 8px 0;padding:12px 16px;margin:14px 0;font-size:15px;}
.call.key{border-color:var(--accent);background:rgba(44,74,58,.08);}
.call.trap{border-color:var(--crimson);background:rgba(159,28,46,.07);}
.call .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--ink-soft);display:block;margin-bottom:3px;}
.call.key .lbl{color:var(--accent);} .call.trap .lbl{color:var(--crimson);}

/* ── Gauge — min / optimal / ref / max zones ── */
.gauge{margin:20px 0 6px;}
.gauge-track{position:relative;height:14px;border-radius:999px;overflow:hidden;}
.gauge-mark{position:absolute;top:-6px;width:3px;height:26px;background:var(--ink);border-radius:2px;}
.gauge-mark::after{content:attr(data-v);position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;white-space:nowrap;}
.gauge-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-soft);margin-top:8px;font-variant-numeric:tabular-nums;}

/* ── Analogy block ── */
.analogy{background:var(--accent);color:#f4efe6;border-radius:14px;padding:22px 24px;margin:22px 0 6px;}
.analogy .big{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.3;}
.analogy .big b{font-style:normal;color:#e7c46b;font-weight:600;}

/* ── Question-first Q&A lead ── */
.askbar{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);font-weight:700;margin:22px 0 4px;}
details.q{border:1px solid var(--line);border-radius:10px;margin:10px 0;background:var(--bg-warm);overflow:hidden;}
details.q>summary{cursor:pointer;list-style:none;padding:15px 18px;font-family:var(--serif);font-size:20px;color:var(--accent);}
details.q>summary::-webkit-details-marker{display:none;}
details.q .body{padding:0 18px 16px;font-size:15.5px;}

/* ── Sources + related ── */
.sources{font-size:13.5px;color:var(--ink-soft);margin-left:20px;} .sources li{margin:4px 0;}
.related{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.related a{font-size:13px;background:var(--bg-warm);border:1px solid var(--line);border-radius:999px;padding:4px 12px;text-decoration:none;}

/* ── Disclaimer ── */
.disc{font-size:12.5px;color:var(--ink-soft);font-style:italic;font-family:var(--serif);border-top:1px solid var(--line);margin-top:30px;padding-top:12px;}

/* ── Index list ── */
.idx{list-style:none;padding:0;margin:6px 0 18px;}
.idx li{padding:12px 0;border-bottom:1px solid var(--line);}
.idx li:last-child{border-bottom:none;}
.idx a{font-family:var(--serif);font-size:20px;color:var(--accent);text-decoration:none;display:block;line-height:1.2;}
.idx a:hover{text-decoration:underline;}
.idx-tip{display:block;color:var(--ink-soft);font-size:14px;margin-top:3px;}

@media(max-width:560px){.tldr{grid-template-columns:1fr;}}

/* ── Dated gauge markers: reading line that BREAKS the strip + baseline tick + hover ──
   Markers are siblings of .gauge-track (see render_gauge), positioned against
   the relative .gauge box, so the reading line can cut across the colour strip
   and the pill can sit above it without the track's overflow:hidden clipping. */
.gauge{margin-top:52px;position:relative;}     /* anchor for the absolute markers; room for the pill above */
.gauge-labels{margin-top:22px;}                /* room for the baseline tick label below the track */
/* Current reading: a hard vertical line that severs the colour strip — a
   page-bg halo notches the gradient either side — with a dated pill above. */
.gauge-pin{position:absolute;top:-3px;left:0;width:3px;height:20px;transform:translateX(-50%);background:var(--ink);border-radius:1px;box-shadow:0 0 0 2px var(--bg);z-index:3;}
.gauge-pin__lbl{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;font-variant-numeric:tabular-nums;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.gauge-pin__lbl::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border:5px solid transparent;border-top-color:var(--ink);}
/* Baseline: a faint tick HANGING BELOW the track — does not cut the strip. */
.gauge-tick--base{position:absolute;top:11px;left:0;width:2px;height:11px;transform:translateX(-50%);background:var(--ink-soft);opacity:.6;z-index:2;}
.gauge-tick__lbl{position:absolute;top:24px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.gauge-detail{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--bg-warm);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:4px 9px;font-size:11.5px;box-shadow:0 2px 8px rgba(0,0,0,.14);opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none;z-index:5;}
.gauge-pin:hover .gauge-detail,.gauge-tick--base:hover .gauge-detail{opacity:1;visibility:visible;}

/* ── Personal panel (owner-only page) ── */
.personal{margin:22px 0 8px;padding:16px 18px;background:var(--bg-warm);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;}
.personal .pers-h{font-family:var(--serif);font-size:20px;margin:0 0 8px;border:none;padding:0;}
.personal p{font-size:14.5px;margin:8px 0;line-height:1.5;}
.pers-num a{font-weight:700;}
.pers-note{color:var(--ink-soft);font-size:13.5px;font-style:italic;}
.pers-lead{margin-top:12px;}
.pers-levers{margin:6px 0 6px 20px;font-size:14px;} .pers-levers li{margin:5px 0;}
.pers-levers a{font-size:12.5px;color:var(--ink-soft);}
.pers-plan{font-size:14px;}
.pers-disc{font-size:12px;color:var(--ink-soft);font-style:italic;border-top:1px solid var(--line);margin-top:12px;padding-top:10px;}