/* Shared by docs/index.html and docs/anm-loop.html: term tooltips + the guide column. */

/* ---------- terms: dotted underline, definition on hover / focus / tap ---------- */
.term { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); cursor: help; border-radius: 3px; }
.term.abbr { white-space: nowrap; }
.term:hover, .term:focus-visible, .term.on { text-decoration-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); outline: none; }
#termtip { position: fixed; z-index: 90; width: max-content; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px 11px; border-radius: 12px;
  background: var(--bg-elev); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 14px 36px rgba(0,0,0,.18);
  font-family: var(--font); font-size: .8rem; line-height: 1.5; opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; }
#termtip.on { opacity: 1; transform: none; }
#termtip b { display: block; font-size: .84rem; margin-bottom: 3px; color: var(--ink); }
#termtip span { color: var(--ink-muted); }
#termtip em { display: block; margin-top: 6px; font-style: normal; font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); }

/* ---------- guide column ---------- */
aside.guide { --g-surface: var(--bg); --g-card: var(--bg-elev); --g-track: color-mix(in srgb, var(--ink) 9%, transparent);
  --g-teddy: var(--s-teddy, var(--bar-base, #c8641f)); --g-anm: var(--s-anm, var(--bar-win, #008c7e)); font-family: var(--font); color: var(--ink); }
aside.guide [hidden] { display: none !important; }
.g-inner { padding: 16px 18px 32px; }
.g-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.g-kick { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin: 16px 0 7px; }
.g-top .g-kick { margin: 0; }
.g-now { padding: 11px 12px 12px; border-radius: 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); }
.g-now .g-now-k { display: block; font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.g-now b { display: block; font-size: .9rem; line-height: 1.35; }
.g-now #g-now-d { display: block; margin-top: 3px; color: var(--ink-muted); font-size: .8rem; line-height: 1.45; }

/* workflow map: a row of numbered stations for TEDDY's steps, then one for ANM's */
.g-map-grp + .g-map-grp { margin-top: 10px; }
.g-grp { display: block; font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; line-height: 1.25;
  padding-bottom: 4px; margin-bottom: 8px; border-bottom: 2px solid currentColor; }
.g-grp.t { color: var(--g-teddy); } .g-grp.a { color: var(--g-anm); }
.g-map-row { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.g-map-row::before { content: ""; position: absolute; top: 11px; left: calc(50% / var(--n)); width: calc((var(--k) - 1) * 100% / var(--n)); height: 2px; background: var(--line); }
.g-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 2px 2px; border-radius: 8px; text-decoration: none; color: var(--ink-muted); }
.g-node .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: .7rem; font-weight: 600;
  background: var(--g-surface); color: var(--ink-muted); border: 1.5px solid var(--line); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.g-node.t .n { border-color: color-mix(in srgb, var(--g-teddy) 60%, var(--line)); }
.g-node.a .n { border-color: color-mix(in srgb, var(--g-anm) 60%, var(--line)); }
.g-node .s { font-size: .7rem; line-height: 1.25; text-align: center; }
.g-node:hover .s, .g-node:focus-visible .s { color: var(--ink); }
.g-node.on .n { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.g-node.on .s { color: var(--ink); font-weight: 600; }

/* phase × mode plane: x = phase (building the evidence), y = mode (how ANM uses TEDDY); origin bottom-left */
.g-plane { position: relative; padding: 0 0 18px 16px; }
.gp-grid { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) minmax(0, 1fr); gap: 5px; border-left: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); padding: 0 0 5px 5px; }
.gp-rl, .gp-cl { font-size: .66rem; line-height: 1.25; color: var(--ink-muted); }
.gp-rl { display: flex; flex-direction: column; justify-content: center; }
.gp-cl { text-align: center; padding-top: 3px; }
.gp-rl .term, .gp-cl .term { font-weight: 700; color: var(--ink); font-size: .72rem; }
.gp-rl small, .gp-cl small { display: block; font-size: .6rem; color: var(--ink-faint); }
.gp-corner { min-height: 0; }
.gp-cell { position: relative; border-radius: 9px; padding: 6px 7px 7px; border: 1px solid var(--line); background: var(--g-card); min-height: 58px; transition: box-shadow .2s ease, border-color .2s ease; }
.gp-cell .gp-st { display: inline-block; font-family: var(--mono); font-size: .56rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; }
.gp-cell .gp-tx { display: block; margin-top: 4px; font-size: .64rem; line-height: 1.3; color: var(--ink-muted); overflow-wrap: anywhere; hyphens: auto; }
.gp-cell.done { background: color-mix(in srgb, var(--g-anm) 12%, var(--g-card)); border-color: color-mix(in srgb, var(--g-anm) 40%, var(--line)); }
.gp-cell.done .gp-st { background: var(--g-anm); color: var(--bg); }
.gp-cell.part { background: color-mix(in srgb, var(--g-teddy) 9%, var(--g-card)); border-color: color-mix(in srgb, var(--g-teddy) 35%, var(--line)); border-style: dashed; }
.gp-cell.part .gp-st { background: color-mix(in srgb, var(--g-teddy) 22%, transparent); color: var(--ink); }
.gp-cell.no { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ink) 4%, transparent) 6px 12px), var(--g-card); }
.gp-cell.no .gp-st { background: var(--g-track); color: var(--ink-muted); }
.gp-cell.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.gp-pin { display: none; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.gp-cell.on .gp-pin { display: block; }
.gp-axes { position: absolute; left: 0; right: 0; bottom: 0; top: 0; pointer-events: none; font-family: var(--mono); font-size: .58rem; font-weight: 600; color: var(--ink-faint); letter-spacing: .04em; }
.gp-axes span:first-child { position: absolute; left: -2px; top: 0; writing-mode: vertical-rl; transform: rotate(180deg); }
.gp-axes span:last-child { position: absolute; right: 0; bottom: 0; }
/* larger copy on the page */
.g-plane.big { max-width: 640px; padding-left: 20px; --g-card: var(--bg-elev); --g-track: color-mix(in srgb, var(--ink) 9%, transparent);
  --g-teddy: var(--s-teddy, var(--bar-base, #c8641f)); --g-anm: var(--s-anm, var(--bar-win, #008c7e)); }
.g-plane.big .gp-grid { grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.g-plane.big .gp-rl, .g-plane.big .gp-cl { font-size: .8rem; }
.g-plane.big .gp-rl .term, .g-plane.big .gp-cl .term { font-size: .88rem; }
.g-plane.big .gp-rl small, .g-plane.big .gp-cl small { font-size: .72rem; }
.g-plane.big .gp-cell { padding: 10px 12px 11px; min-height: 76px; }
.g-plane.big .gp-cell .gp-st { font-size: .64rem; }
.g-plane.big .gp-cell .gp-tx { font-size: .8rem; }
.g-plane.big .gp-axes { font-size: .66rem; }
@container main (max-width: 480px) { .g-plane.big .gp-grid { grid-template-columns: 4.6rem minmax(0, 1fr) minmax(0, 1fr); } .g-plane.big .gp-cell .gp-tx { font-size: .7rem; } }

/* how ANM decides here: a numbered workflow */
.g-how-t { font-size: .92rem; font-weight: 700; line-height: 1.35; margin-bottom: 10px; }
.g-howl { list-style: none; margin: 0; padding: 0; counter-reset: gh; }
.g-howl li { position: relative; padding: 0 0 12px 33px; counter-increment: gh; }
.g-howl li::before { content: counter(gh); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: .68rem; font-weight: 600; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.g-howl li::after { content: ""; position: absolute; left: 11px; top: 25px; bottom: 3px; width: 1px; background: var(--line); }
.g-howl li:last-child { padding-bottom: 0; }
.g-howl li:last-child::after { display: none; }
.g-howl b { display: block; font-size: .84rem; line-height: 1.35; padding-top: 2px; }
.g-howl .d { display: block; margin-top: 2px; color: var(--ink-muted); font-size: .79rem; line-height: 1.5; }
.g-how-note { margin: 12px 0 0; padding: 2px 0 2px 10px; border-left: 2px solid var(--accent); color: var(--ink-muted); font-size: .77rem; line-height: 1.5; }
.g-how.fade { animation: g-fade .28s ease; }
@keyframes g-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* scores as bars, with the question's bar marked */
.g-ex { margin-top: 12px; padding: 10px 12px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--g-card); }
.g-grp-bars + .g-grp-bars { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); }
.g-ex-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; font-size: .74rem; color: var(--ink-muted); }
.g-ex-h em { font-style: normal; font-weight: 700; color: var(--ink); }
.g-bar { display: grid; grid-template-columns: 3.7rem minmax(0, 1fr) 2.6rem; align-items: center; gap: 8px; margin: 4px 0; font-size: .75rem; }
.g-bar .l { color: var(--ink-muted); }
.g-bar .v { font-family: var(--mono); font-size: .7rem; text-align: right; color: var(--ink-muted); }
.g-bar.win .l, .g-bar.win .v { color: var(--ink); font-weight: 700; }
.g-bar .tr { position: relative; height: 10px; border-radius: 5px; background: var(--g-track); }
.g-bar .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--ink-faint); }
.g-bar.win .tr i { background: var(--g-anm); }
.g-bar .thr, .g-ex-leg .thr { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: .6; }
.g-ex-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .7rem; color: var(--ink-muted); }
.g-ex-leg span { display: inline-flex; align-items: center; gap: 6px; }
.g-ex-leg .thr { position: relative; top: auto; bottom: auto; display: inline-block; height: 12px; margin: 0; }
.g-ex-leg i { width: 10px; height: 10px; border-radius: 3px; background: var(--g-anm); }
.g-ex-cap { margin: 8px 0 0; font-size: .76rem; line-height: 1.5; color: var(--ink-muted); }

/* inside ANM's engine */
.g-engine { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--g-card); }
.g-engine > summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 11px 12px; }
.g-engine > summary::-webkit-details-marker { display: none; }
.g-engine > summary span { font-weight: 700; font-size: .88rem; }
.g-engine > summary em { grid-column: 1; font-style: normal; font-size: .74rem; color: var(--ink-muted); }
.g-engine > summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--mono); color: var(--ink-faint); }
.g-engine[open] > summary::after { content: "−"; }
.g-eng { padding: 2px 12px 12px; }
.g-eng .g-ex { padding: 0; border: 0; background: none; margin-top: 4px; }
.g-ex-t { margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .68rem; font-weight: 600; color: var(--ink-faint); }
.g-ex-t code { font-size: 1em; color: var(--ink-muted); }
.g-mini { margin: 12px 0 6px; font-size: .74rem; font-weight: 600; color: var(--ink); }
.g-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.g-in { display: grid; gap: 6px; align-content: start; }
.g-in .lin { font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: 3px; border-bottom: 1px solid var(--line); }
.g-in .mk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 4px; align-items: baseline; }
.g-in .nm { font-size: .72rem; font-weight: 600; }
.g-in .mv { font-family: var(--mono); font-size: .66rem; color: var(--ink-muted); }
.g-in .mb { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--g-track); overflow: hidden; }
.g-in .mb i { display: block; height: 100%; border-radius: 0 2px 2px 0; background: var(--ink-faint); }
.g-trace { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.g-trace .gl { stroke: var(--grid, var(--line)); stroke-width: 1; }
.g-trace .tk, .g-trace .pt { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-faint); }
.g-trace .thr { stroke: var(--ink-muted); stroke-width: 1.25; stroke-dasharray: 3 3; }
.g-trace .tl { font-family: var(--mono); font-size: 9.5px; font-weight: 600; fill: var(--ink-muted); }
.g-trace .ph { stroke: var(--line-strong, var(--ink-faint)); stroke-width: 2; stroke-linecap: round; }
.g-trace .dv { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 1 3; }
.g-trace .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-trace .ln.lm { stroke: var(--g-anm); } .g-trace .ln.lt { stroke: var(--ink-muted); } .g-trace .ln.lb { stroke: var(--ink-faint); }
.g-trace .dt { stroke: var(--g-card); stroke-width: 2; }
.g-trace .dt.lm { fill: var(--g-anm); } .g-trace .dt.lt { fill: var(--ink-muted); } .g-trace .dt.lb { fill: var(--ink-faint); }
.g-trace .el { font-family: var(--font); font-size: 10.5px; font-weight: 600; fill: var(--ink); }
.g-trace .ev { font-family: var(--mono); font-size: 10px; fill: var(--ink-muted); }
.g-trace .xh { stroke: var(--ink-faint); stroke-width: 1; }
.g-trace .hit { fill: transparent; cursor: crosshair; }
.g-trace-read { margin: 4px 0 0; min-height: 1.45em; font-size: .74rem; line-height: 1.45; color: var(--ink-muted); }
.g-trace-read + .g-ex-cap { margin: 4px 0 6px; }
.g-trace-read b { color: var(--ink); }
.g-tbl summary { cursor: pointer; font-size: .72rem; font-weight: 600; color: var(--accent); }
.g-tbl table { width: 100%; margin-top: 6px; border-collapse: collapse; font-family: var(--mono); font-size: .68rem; }
.g-tbl th, .g-tbl td { padding: 2px 4px; text-align: right; border-bottom: 1px solid var(--line); }
.g-tbl th:first-child, .g-tbl td:first-child { text-align: left; }

/* terms and colours */
.g-concepts details { border-top: 1px solid var(--line); }
.g-concepts details:last-child { border-bottom: 1px solid var(--line); }
.g-concepts summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 2px; font-size: .82rem; font-weight: 600; }
.g-concepts summary::-webkit-details-marker { display: none; }
.g-concepts summary::after { content: "+"; font-family: var(--mono); color: var(--ink-faint); }
.g-concepts details[open] summary::after { content: "−"; }
.g-concepts p { margin: 0 2px 10px; color: var(--ink-muted); font-size: .8rem; line-height: 1.5; }
.g-all { display: inline-block; margin-top: 9px; font-size: .8rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.g-all:hover { text-decoration: underline; }
.g-arms { display: grid; gap: 6px; font-size: .78rem; color: var(--ink-muted); }
.g-arms span { display: flex; align-items: center; gap: 8px; }
.g-arms i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.g-close { display: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.g-fab { display: none; }
.g-open { display: none; align-items: center; gap: 6px; margin-left: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-elev); color: var(--ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.g-open[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.g-scrim { display: none; }

/* left timeline (wide screens) and a thin progress bar (narrow screens) */
.t-rail { display: none; }
.t-bar { position: fixed; top: 56px; left: 0; right: 0; height: 3px; z-index: 40; background: transparent; pointer-events: none; }
.t-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.gh-link { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-elev); color: var(--ink); font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.gh-link:hover { border-color: var(--accent); color: var(--accent); }
.gh-link svg { flex: none; }
@media (max-width: 1100px) { .gh-link .ghl { display: none; } .gh-link { padding: 5px 8px; } }
@media (max-width: 480px) { .gh-link.opt-gh { display: none; } }
@media (min-width: 1200px) {
  .t-bar { display: none; }
  main, footer { margin-left: 52px; }
  .t-rail { display: block; position: fixed; left: 0; top: 56px; bottom: 0; width: 52px; z-index: 22; border-right: 1px solid var(--line); background: var(--bg); }
  .t-track { position: absolute; left: 25px; top: 18px; bottom: 18px; width: 2px; border-radius: 1px; background: var(--line); }
  .t-fill { width: 100%; height: 0; border-radius: 1px; background: var(--accent); }
  .t-dot { position: absolute; left: 14px; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; display: grid; place-items: center;
    background: var(--bg); border: 1.5px solid var(--line-strong, var(--ink-faint)); color: var(--ink-muted); text-decoration: none;
    font-family: var(--mono); font-size: .6rem; font-weight: 700; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; }
  .t-dot:hover, .t-dot:focus-visible { transform: scale(1.12); border-color: var(--accent); color: var(--accent); outline: none; }
  .t-dot.past { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent); }
  .t-dot.on { background: var(--accent); border-color: var(--accent); color: var(--bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
  .t-card { position: absolute; left: 46px; width: 250px; padding: 9px 12px 10px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--line);
    box-shadow: 0 10px 28px rgba(0,0,0,.14); opacity: 0; transform: translateX(-4px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
  .t-card.on { opacity: 1; transform: none; }
  .t-card b { display: block; font-size: .82rem; line-height: 1.3; }
  .t-card span { display: block; margin-top: 3px; font-size: .76rem; line-height: 1.45; color: var(--ink-muted); }
}
@media (prefers-reduced-motion: reduce) { .t-card, .t-dot { transition: none !important; } }

/* wide screens: a floating column on the right; the page makes room for it. It can be resized from its
   left edge (--gw) and hidden to a tab on the right edge (html.g-collapsed). */
:root { --gw: 320px; }
.g-btns { display: flex; align-items: center; gap: 6px; }
.g-hide { display: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink); cursor: pointer; place-items: center; padding: 0; }
.g-hide:hover { border-color: var(--accent); color: var(--accent); }
.g-resize, .g-tab { display: none; }
.g-trace { max-width: 440px; }
@media (min-width: 1200px) {
  main, footer { margin-right: var(--gw); transition: margin-right .22s ease; }
  aside.guide { position: fixed; top: 56px; right: 0; bottom: 0; width: var(--gw); overflow-y: auto; overscroll-behavior: contain;
    border-left: 1px solid var(--line); background: var(--bg); z-index: 20; box-shadow: -10px 0 28px rgba(0,0,0,.05); transition: transform .22s ease; }
  .g-hide { display: grid; }
  .g-resize { display: block; position: fixed; top: 56px; bottom: 0; right: calc(var(--gw) - 5px); width: 10px; z-index: 26; cursor: col-resize; touch-action: none; }
  .g-resize::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: transparent; transition: background .15s ease; }
  .g-resize:hover::after, .g-resize:focus-visible::after { background: color-mix(in srgb, var(--accent) 60%, transparent); }
  .g-resize:focus-visible { outline: none; }
  html.g-dragging, html.g-dragging * { cursor: col-resize !important; user-select: none !important; }
  html.g-dragging main, html.g-dragging footer, html.g-dragging aside.guide,
  html.g-notrans main, html.g-notrans footer, html.g-notrans aside.guide { transition: none !important; }
  html.g-dragging .g-resize::after { background: var(--accent); }
  html.g-collapsed main, html.g-collapsed footer { margin-right: 0; }
  html.g-collapsed aside.guide { transform: translateX(100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  html.g-collapsed .g-resize { display: none; }
  html.g-collapsed .g-tab { display: flex; }
  .g-tab { position: fixed; right: 0; top: 50%; z-index: 26; transform: translateY(-50%); flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 7px; border: 1px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px; background: var(--bg-elev); color: var(--ink);
    font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; box-shadow: -6px 0 18px rgba(0,0,0,.1); }
  .g-tab span { writing-mode: vertical-rl; letter-spacing: .04em; }
  .g-tab:hover { color: var(--accent); border-color: var(--accent); }
}
/* narrower screens: a drawer opened from the top bar (or a floating button) */
@media (max-width: 1199px) {
  aside.guide { --g-surface: var(--bg-elev); --g-card: var(--bg); position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 92vw); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg-elev); border-left: 1px solid var(--line); z-index: 75; transform: translateX(105%); visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s; box-shadow: -14px 0 40px rgba(0,0,0,.2); }
  aside.guide.open { transform: none; visibility: visible; transition: transform .22s ease; }
  .g-close { display: grid; place-items: center; }
  .g-open { display: inline-flex; }
  .g-fab { display: inline-flex; align-items: center; gap: 7px; position: fixed; right: 14px; bottom: 14px; z-index: 60; padding: 9px 14px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--ink); color: var(--bg); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
  .g-scrim { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .g-scrim.on { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { aside.guide, .g-scrim, #termtip, main, footer { transition: none !important; } .g-how.fade { animation: none; } }
@media (max-width: 400px) { .g-open .glabel { display: none; } .g-open { padding: 6px 9px; } }