/* Generated by scripts/learn-build.ts. The tokens are copied from src/index.css. */
:root {
  --brand-green: #173b31;       /* 12.31:1; white on it 12.31:1 */
  --brand-green-mono: #24342d;
  --brand-bronze: #b1844a;      /* graphics only */
  --green-900: #0e261f;         /* hover/pressed primary, 15.96:1 */
  --green-100: #e3ece6;         /* pressed tint; green text on it 10.2:1 */
  --green-50: #eef3ef;          /* hover/selected tint; green text on it 10.96:1 */
  --on-brand: #ffffff;
  --on-brand-muted: #cfdcd4;    /* secondary text on brand green, 8.7:1 */

  --c-ink: #14201b;             /* body text, 16.77:1 */
  --c-ink-muted: #3b4a44;       /* secondary text, 9.34:1; 8.51:1 on --c-bg */
  --c-bg: #f7f4ee;              /* warm paper page background */
  --c-surface: #ffffff;         /* cards, panels, inputs */
  --c-surface-sunken: #f2efe8;  /* table headers, zebra; muted text on it 8.13:1 */
  --c-border: #ddd7cb;          /* decorative dividers only */
  --c-border-strong: #6b7a73;   /* control edges, 4.51:1 (non-text >= 3:1) */
  --c-disabled-bg: #e9e7e1;
  --c-disabled-ink: #3f4441;    /* 8.03:1 on --c-disabled-bg */

  /* Status palette (design-tropeion §2.2): text >= 7:1 on white, on --c-bg and on its own tint. Always with an icon or word. */
  --success: #08501b; --success-bg: #e8f3ea;
  --warning: #6b3800; --warning-bg: #fdf3e1;
  --danger: #8e1616;  --danger-bg: #fcefef;
  --info: #0a3a8a;    --info-bg: #e8eef9;

  --focus: #1a4fd6;             /* the high-visibility outline (unchanged): 6.7:1 on white, 6.1:1 on --c-bg */
  --focus-on-brand: #ffffff;    /* on the green top bar, 12.31:1 */

  --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(20 32 27 / 0.08);
  --shadow: 0 1px 3px rgb(20 32 27 / 0.08), 0 4px 12px rgb(23 59 49 / 0.06);
  --shadow-lg: 0 10px 30px rgb(23 59 49 / 0.16), 0 1px 3px rgb(0 0 0 / 0.08);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem;
  --target: 48px; --target-tablet: 56px;

  font-family: 'Noto Sans', system-ui, sans-serif;
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-bg);
  accent-color: var(--brand-green);
}

:root { font-family: 'Noto Sans', system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--c-ink); background: var(--c-bg); line-height: 1.6; font-size: 1.0625rem; }
a { color: var(--brand-green); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--space-4); top: var(--space-2); background: var(--c-surface); padding: var(--space-2); z-index: 1; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); background: var(--brand-green); border-bottom: 4px solid var(--brand-bronze); }
.top a { color: var(--on-brand); }
.top a:focus-visible { outline-color: var(--focus-on-brand); }
.brand { text-decoration: none; }
.brand .name { font-weight: 700; letter-spacing: 0.08em; font-size: var(--text-lg); }
.brand .tagline { color: var(--on-brand-muted); font-size: var(--text-sm); }
.langs a { display: inline-block; min-height: var(--target); padding: var(--space-3) var(--space-4); border: 1px solid var(--on-brand-muted); border-radius: var(--radius); }
.layout { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: var(--space-6); max-width: 82rem; margin: 0 auto; padding: var(--space-5); }
.toc { font-size: var(--text-sm); align-self: start; position: sticky; top: var(--space-4); max-height: calc(100vh - 2rem); overflow: auto; }
.toc h2 { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); }
.toc ol, .toc ul { list-style: none; margin: 0; padding: 0; }
.toc .sub { padding-left: var(--space-5); }
.toc li { margin: var(--space-1) 0; }
.toc .num { display: inline-block; min-width: 2em; color: var(--c-ink-muted); }
.toc a[aria-current="page"] { font-weight: 700; color: var(--c-ink); }
main { min-width: 0; max-width: 46rem; }
h1, h2, h3 { color: var(--brand-green); line-height: 1.25; }
h1 { font-size: var(--text-2xl); margin-top: 0; }
h2 { font-size: var(--text-xl); margin-top: var(--space-6); }
h3 { font-size: var(--text-lg); }
code { font-family: ui-monospace, 'DejaVu Sans Mono', monospace; font-size: 0.9em; background: var(--c-surface-sunken); padding: 0 0.2em; border-radius: var(--radius-sm); }
hr { border: 0; border-top: 2px solid var(--c-border); margin: var(--space-6) 0; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; background: var(--c-surface); font-size: var(--text-sm); }
th, td { border: 1px solid var(--c-border-strong); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
thead th { background: var(--c-surface-sunken); }
.callout { border-left: 4px solid; border-radius: var(--radius-sm); padding: var(--space-1) var(--space-4); margin: var(--space-4) 0; }
.callout.note { border-color: var(--info); background: var(--info-bg); }
.callout.caution { border-color: var(--warning); background: var(--warning-bg); }
.shot { margin: var(--space-4) 0; }
.shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--c-border-strong); border-radius: var(--radius); }
.shot-frame { display: flex; align-items: center; justify-content: center; min-height: 8rem; border: 2px dashed var(--c-border-strong); border-radius: var(--radius); color: var(--c-ink-muted); background: var(--c-surface); }
.shot figcaption { color: var(--c-ink-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
.broken { color: var(--danger); }
.crumb { font-size: var(--text-sm); }
details { border: 1px solid var(--c-border-strong); border-radius: var(--radius); padding: var(--space-2) var(--space-4); background: var(--c-surface); }
summary { cursor: pointer; min-height: var(--target); display: flex; align-items: center; font-weight: 600; }
@media (max-width: 600px) {
  .layout { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-4); }
  .toc { position: static; max-height: none; border-bottom: 1px solid var(--c-border); padding-bottom: var(--space-4); }
  .toc .sub { display: none; }
  .top { padding: var(--space-3) var(--space-4); }
}
@media print {
  .top, .toc, .skip { display: none; }
  .layout { display: block; padding: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { max-width: none; }
  a { color: inherit; }
  h1, h2, h3 { color: var(--brand-green-mono); break-after: avoid; }
  table, figure, .callout { break-inside: avoid; }
  details > *:not(summary) { display: block; }
}