/* Guide pages of the training hub: one long page per study, eight numbered sections, figures in
   inline SVG. Colors are custom properties on :root with a dark set under prefers-color-scheme.
   SVG marks take their color from classes (g-ink, g-s1, ...), never from style attributes. */
:root{
  --g-bg:#f7f8fa;--g-card:#ffffff;--g-ink:#17202a;--g-muted:#5b6673;--g-line:#e3e7ec;
  --g-accent:#0f6e8c;--g-accent-ink:#0b4a5e;--g-code:rgba(127,127,127,.12);
  --g-s1:#2a78d6;--g-s2:#eb6834;--g-s3:#1baf7a;--g-s4:#eda100;--g-s5:#4a3aa7;
  --g-s1-soft:#cde2fb;--g-s2-soft:#fbd9c9;--g-s3-soft:#c8eedf;
  --g-mid:#f0efec;--g-off:#e3e2de;
  --g-p1:#9ec5f4;--g-p2:#3987e5;--g-p3:#184f95;
  --g-n1:#f4b8b6;--g-n2:#e34948;--g-n3:#9c2423;
  --g-radius:12px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --g-bg:#0f1418;--g-card:#161d23;--g-ink:#e6ebf0;--g-muted:#9aa7b4;--g-line:#243039;
    --g-accent:#5ec3e0;--g-accent-ink:#9fdcee;--g-code:rgba(160,170,180,.16);
    --g-s1:#3987e5;--g-s2:#d95926;--g-s3:#199e70;--g-s4:#c98500;--g-s5:#9085e9;
    --g-s1-soft:#173455;--g-s2-soft:#4a2617;--g-s3-soft:#123d2e;
    --g-mid:#383835;--g-off:#2b3238;
    --g-p1:#1c5cab;--g-p2:#3987e5;--g-p3:#9ec5f4;
    --g-n1:#7a2a2a;--g-n2:#e66767;--g-n3:#f4b8b6;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --g-bg:#0f1418;--g-card:#161d23;--g-ink:#e6ebf0;--g-muted:#9aa7b4;--g-line:#243039;
  --g-accent:#5ec3e0;--g-accent-ink:#9fdcee;--g-code:rgba(160,170,180,.16);
  --g-s1:#3987e5;--g-s2:#d95926;--g-s3:#199e70;--g-s4:#c98500;--g-s5:#9085e9;
  --g-s1-soft:#173455;--g-s2-soft:#4a2617;--g-s3-soft:#123d2e;
  --g-mid:#383835;--g-off:#2b3238;
  --g-p1:#1c5cab;--g-p2:#3987e5;--g-p3:#9ec5f4;
  --g-n1:#7a2a2a;--g-n2:#e66767;--g-n3:#f4b8b6;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--g-bg);color:var(--g-ink);
  font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--g-accent);text-decoration:none}
a:hover{color:var(--g-accent-ink);text-decoration:underline}
.guide{max-width:800px;margin:0 auto;padding:20px 16px 64px}
.guide p,.guide li,.guide dd{text-wrap:pretty}
.g-head{margin-bottom:20px}
.g-crumbs{margin:0 0 6px;font-size:13px;color:var(--g-muted)}
.g-crumbs a{color:var(--g-muted)}
.guide h1{margin:0 0 8px;font-size:30px;line-height:1.2;letter-spacing:-.01em}
.g-lede{margin:0;color:var(--g-muted);font-size:16px}
.guide h2{margin:44px 0 10px;font-size:23px;line-height:1.25;scroll-margin-top:12px}
.guide h3{margin:28px 0 6px;font-size:18px;line-height:1.3;scroll-margin-top:12px}
.g-num{color:var(--g-muted);font-variant-numeric:tabular-nums;margin-right:.45em;font-weight:600}
.guide code,.guide kbd{font:14px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--g-code);padding:1px 5px;border-radius:5px}
.g-math{font-family:"Cambria Math","STIX Two Math",Georgia,serif;font-style:italic;white-space:nowrap}

/* contents */
.g-toc{background:var(--g-card);border:1px solid var(--g-line);border-radius:var(--g-radius);padding:12px 16px;margin:18px 0 8px}
.g-toc-title{font-size:13px;font-weight:600;color:var(--g-muted);margin:0 0 4px;text-transform:uppercase;letter-spacing:.04em}
.g-toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
.g-toc li{margin:2px 0;break-inside:avoid;font-size:15px}
.g-toc .g-num{display:inline-block;min-width:1.4em;margin-right:.2em}
@media (max-width:560px){.g-toc ol{columns:1}}

/* figures */
.g-fig{margin:22px 0;padding:14px;background:var(--g-card);border:1px solid var(--g-line);border-radius:var(--g-radius)}
.g-fig svg{display:block;width:100%;height:auto;max-width:100%;color:var(--g-ink);font-family:inherit}
.g-fig figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--g-muted)}
.g-fig figcaption .g-fignum{font-weight:600;color:var(--g-ink);margin-right:.35em}
.g-fig.g-narrow svg{max-width:420px;margin:0 auto}

/* controls for interactive figures */
.g-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 10px;font-size:14px}
.g-ctl label{display:flex;align-items:center;gap:8px;color:var(--g-muted)}
.g-ctl input[type=range]{width:min(260px,60vw);accent-color:var(--g-accent)}
.g-ctl output,.g-read{font-variant-numeric:tabular-nums;color:var(--g-ink);font-weight:600}
.g-btn{font:inherit;font-size:14px;line-height:1.2;padding:7px 12px;min-height:36px;border-radius:8px;border:1px solid var(--g-line);background:var(--g-bg);color:var(--g-ink);cursor:pointer}
.g-btn:hover{border-color:var(--g-accent)}
.g-btn:focus-visible,.g-ctl input:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
.g-btn[aria-pressed="true"]{background:var(--g-accent);border-color:var(--g-accent);color:var(--g-bg)}
.g-btn:disabled{opacity:.45;cursor:default}
.g-seg{display:inline-flex;gap:0}
.g-seg .g-btn{border-radius:0;margin-left:-1px}
.g-seg .g-btn:first-child{border-radius:8px 0 0 8px;margin-left:0}
.g-seg .g-btn:last-child{border-radius:0 8px 8px 0}
.g-readout{font-size:14px;color:var(--g-muted);margin:8px 0 0;min-height:1.5em}
.g-readout b{color:var(--g-ink);font-variant-numeric:tabular-nums}

/* tables */
.g-table{overflow-x:auto;margin:16px 0;border:1px solid var(--g-line);border-radius:var(--g-radius);background:var(--g-card)}
.g-table table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.4}
.g-table th,.g-table td{padding:7px 10px;border-bottom:1px solid var(--g-line);text-align:left;vertical-align:top}
.g-table tr:last-child td{border-bottom:0}
.g-table th{font-weight:600;color:var(--g-muted);font-size:13px;white-space:nowrap}
.g-table td:first-child{white-space:nowrap}
.g-table td.n,.g-table th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.g-table caption{caption-side:bottom;text-align:left;padding:8px 10px;font-size:13px;color:var(--g-muted)}

/* quoted plan text, notes, glossary */
.g-quote{margin:16px 0;padding:10px 16px;border-left:3px solid var(--g-accent);background:var(--g-card);border-radius:0 var(--g-radius) var(--g-radius) 0;font-size:15px}
.g-quote p{margin:8px 0}
.g-quote ul{margin:6px 0;padding-left:20px}
.g-note{margin:16px 0;padding:10px 14px;border:1px dashed var(--g-line);border-radius:var(--g-radius);font-size:15px;color:var(--g-muted)}
.g-gloss dt{font-weight:600;margin-top:12px}
.g-gloss dd{margin:2px 0 0 0;color:var(--g-ink)}
.g-foot{margin-top:40px;font-size:13px;color:var(--g-muted);border-top:1px solid var(--g-line);padding-top:12px}

/* SVG classes: ink, muted, lines, fills */
.g-ink{fill:currentColor}
.g-muted-t{fill:var(--g-muted)}
.g-stroke{stroke:currentColor;fill:none}
.g-stroke-m{stroke:var(--g-muted);fill:none}
.g-grid{stroke:var(--g-line);fill:none}
.g-box{fill:var(--g-card);stroke:var(--g-muted)}
.g-box-front{fill:var(--g-bg);stroke:var(--g-muted);stroke-dasharray:5 4}
.g-f1{fill:var(--g-s1)}.g-f2{fill:var(--g-s2)}.g-f3{fill:var(--g-s3)}.g-f4{fill:var(--g-s4)}.g-f5{fill:var(--g-s5)}
.g-l1{stroke:var(--g-s1);fill:none}.g-l2{stroke:var(--g-s2);fill:none}.g-l3{stroke:var(--g-s3);fill:none}
.g-b1{fill:var(--g-s1-soft);stroke:var(--g-s1)}.g-b2{fill:var(--g-s2-soft);stroke:var(--g-s2)}.g-b3{fill:var(--g-s3-soft);stroke:var(--g-s3)}
.g-cell-off{fill:var(--g-off)}
.g-cell-mid{fill:var(--g-mid)}
.g-p1{fill:var(--g-p1)}.g-p2{fill:var(--g-p2)}.g-p3{fill:var(--g-p3)}
.g-n1{fill:var(--g-n1)}.g-n2{fill:var(--g-n2)}.g-n3{fill:var(--g-n3)}
.g-surf{fill:var(--g-card)}
.g-ring{stroke:var(--g-card);stroke-width:2}
svg text{font-size:12px}
svg .g-t-s{font-size:10.5px}
svg .g-t-b{font-weight:600}
svg .g-t-l{font-size:14px}
.g-off{display:none}
.g-dim{opacity:.3}
@media (prefers-reduced-motion:no-preference){
  .g-anim{transition:opacity .2s, transform .25s}
}

/* wide figures scroll inside their frame on a phone; the page itself never scrolls sideways */
.g-sv{overflow-x:auto;-webkit-overflow-scrolling:touch}
.g-fig.g-wide svg{min-width:560px}
.g-fig.g-mid svg{min-width:400px}
@media (max-width:480px){.g-fig{padding:10px 8px}.guide{font-size:16px}}