/* Praxis: learning map, lessons and labs, runbooks, lexicon, field-note reader. Reads tokens.css. Loads after terminal.css.
   Layout rule: every Praxis page puts its content in .container (width min(1200px, 100% - 2 gutters), centred). Never override its margin. */
.ac-hero { padding-bottom: var(--sp-3); }
.ac-hero .lede { max-width: 52ch; }
[hidden] { display: none !important; }
.ac-top { padding-bottom: var(--sp-4); }
.ac-top-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 860px) { .ac-top-grid { grid-template-columns: minmax(0, 1fr); } }

/* Search */
.ac-search { position: relative; display: flex; align-items: center; gap: var(--sp-1); min-height: 56px; padding: 0 var(--sp-2); background: var(--surface); border: var(--bd-strong); border-radius: var(--r-2); box-shadow: var(--e-1); }
.ac-search:focus-within { box-shadow: var(--focus); }
.ac-search > .ic { flex: none; color: var(--ink-3); }
.ac-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: var(--fs-0) var(--font-body); color: var(--ink); min-height: 52px; }
.ac-kbd { flex: none; border: 0; background: none; cursor: pointer; padding: 4px; }
.ac-kbd kbd { font: var(--w-strong) 0.75rem var(--font-mono); padding: 3px 8px; border: var(--bd-strong); border-radius: 6px; background: var(--surface-2); color: var(--ink-2); }
.ac-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--surface); border: var(--bd); border-radius: var(--r-2); box-shadow: var(--e-3); max-height: 340px; overflow-y: auto; }
.ac-results a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; border-radius: var(--r-1); text-decoration: none; color: var(--ink); }
.ac-results a:hover, .ac-results a:focus-visible { background: var(--accent-soft); }
.ac-results .t { font-weight: var(--w-strong); }
.ac-results .ty { color: var(--accent-ink); font-size: var(--fs--1); }
.ac-results .d { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-results .none { padding: 12px; color: var(--ink-2); }

/* Today + continue */
.ac-today-card, .ac-next, .ac-continue-a { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--navy); color: #fff; border-radius: var(--r-2); text-decoration: none; transition: box-shadow var(--d-base) var(--ease), transform var(--d-base) var(--ease); }
.ac-today-card:hover, .ac-next:hover, .ac-continue-a:hover { box-shadow: var(--e-3); transform: translateY(-2px); }
.ac-today-card > span:nth-child(2), .ac-continue-a { min-width: 0; }
.ac-today-card strong, .ac-continue-a strong { display: block; font: var(--w-head) var(--fs-1) var(--font-head); letter-spacing: -0.02em; }
.ac-today-card span span, .ac-continue-a span:not(.eyebrow) { display: block; color: #c9d4e0; font-size: 0.92rem; }
.ac-today .eyebrow { margin-bottom: var(--sp-1); }
.ac-today-card .ic:last-child, .ac-next .ic, .ac-continue-a .ic { flex: none; margin-left: auto; color: var(--accent); }
.ac-today-card .ac-card-art { background: #26344a; }
.ac-continue { padding: 0 0 var(--sp-4); }
.ac-continue-a { flex-wrap: wrap; }
.ac-continue-a .eyebrow, .ac-next .eyebrow { color: var(--accent); width: 100%; }
.ac-next { justify-content: flex-start; }
.ac-next strong { font: var(--w-head) var(--fs-1) var(--font-head); }
.ac-next .eyebrow { width: auto; margin-right: var(--sp-2); }

/* Progress ring */
.ring { flex: none; }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 4; }
.ring-fg { fill: none; stroke: var(--accent-ink); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset var(--d-slow) var(--ease); }
.ring-t { font: var(--w-head) 12px var(--font-head); fill: var(--ink); }
.ring.is-done .ring-fg { stroke: var(--success); }

/* Learning map */
.ac-map { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); counter-reset: t; position: relative; }
@media (max-width: 1000px) { .ac-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ac-map { grid-template-columns: minmax(0, 1fr); padding-left: 20px; } .ac-map::before { content: ""; position: absolute; left: 6px; top: 24px; bottom: 24px; width: 2px; background: repeating-linear-gradient(var(--line-strong) 0 6px, transparent 6px 12px); } }
.ac-track { position: relative; padding: var(--sp-3); background: var(--surface); border: var(--bd); border-radius: var(--r-2); box-shadow: var(--e-1); }
.ac-track::after { content: ""; position: absolute; top: 44px; right: calc(-1 * var(--sp-3)); width: var(--sp-3); height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 10px); }
.ac-track:nth-child(3n)::after, .ac-track:last-child::after { display: none; }
@media (max-width: 1000px) { .ac-track:nth-child(3n)::after { display: block; } .ac-track:nth-child(2n)::after { display: none; } }
@media (max-width: 640px) { .ac-track::after { display: none !important; } .ac-track::before { content: ""; position: absolute; left: -19px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); } }
.ac-track-h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.ac-track-h h3 { font-size: var(--fs-1); margin: 0; }
.ac-track-h p { margin: 2px 0 0; color: var(--ink-2); font-size: 0.9rem; }
.ac-n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--navy); color: #fff; font: var(--w-head) 0.75rem var(--font-head); }
.ac-les-list { display: grid; gap: 2px; }
.ac-les { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border-radius: var(--r-1); text-decoration: none; color: var(--ink); }
.ac-les:hover { background: var(--accent-soft); }
.ac-les-t { flex: 1; min-width: 0; font-weight: var(--w-strong); font-size: 0.95rem; }
.ac-les-m { color: var(--ink-3); font-size: var(--fs--1); }
.ac-chk { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; }
.is-done > .ac-chk, .ac-card.is-done .ac-chk { background: var(--success); border-color: var(--success); }
.is-done > .ac-chk::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }

/* Lesson cards */
.ac-card { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-3); background: var(--surface); border: var(--bd); border-radius: var(--r-2); color: var(--ink); text-decoration: none; min-width: 0; transition: border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease); }
.ac-card:hover { border-color: var(--accent-ink); box-shadow: var(--e-2); }
.ac-card-art { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-2); background: var(--navy); color: var(--accent); }
.ac-card-b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ac-card-top { display: flex; align-items: center; gap: var(--sp-1); }
.ac-card-min { color: var(--ink-3); font-size: var(--fs--1); }
.ac-card-t { font: var(--w-head) var(--fs-1) var(--font-head); letter-spacing: -0.02em; line-height: 1.2; }
.ac-card-d { color: var(--ink-2); font-size: 0.95rem; }
.ac-card-s { color: var(--success); font-size: var(--fs--1); font-weight: var(--w-strong); min-height: 1em; }
.ac-card.is-done { border-color: var(--success); }
.idx-group > h2 .ring { vertical-align: middle; }

/* Lesson page: two columns (steps | lab), full-width quiz and links. Container is centred; no left offset. */
.ls-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-5); align-items: start; }
.ls-main .eyebrow, .ls-lab .eyebrow { margin-bottom: var(--sp-1); }
.ls-lab { position: sticky; top: calc(var(--am-header, 64px) + 16px); }
@media (max-width: 960px) { .ls-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } .ls-lab { position: static; } }
.ls-status { margin: var(--sp-2) 0 0; min-height: 1.5em; color: var(--success); font-weight: var(--w-strong); }
.ls-main .c-step { padding: var(--sp-3); }
.ls-main .c-step-b { color: var(--ink); font-size: var(--fs-1); line-height: 1.5; }
.ls-after { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 960px) { .ls-after { grid-template-columns: minmax(0, 1fr); } }
.ls-after h2 { font-size: var(--fs-2); margin: 0 0 var(--sp-2); }
.ls-links { display: grid; gap: var(--sp-1); }
.ls-links .eyebrow { margin-top: var(--sp-1); }
.ls-terms { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lq { display: grid; gap: var(--sp-2); }
.lq-q { padding: var(--sp-3); background: var(--surface); border: var(--bd); border-radius: var(--r-2); }
.lq-q.is-active { border-color: var(--accent-ink); }
.lq-qt { margin: 0 0 var(--sp-2); font: var(--w-head) var(--fs-1) var(--font-head); letter-spacing: -0.01em; }
.lq-n { display: block; color: var(--ink-3); font: var(--w-strong) var(--fs--1) var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.lq-result { margin: 0; font-weight: var(--w-strong); min-height: 1.5em; color: var(--success); }
.c-quiz-opt:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Labs */
.lab { padding: var(--sp-3); background: var(--surface); border: var(--bd-strong); border-radius: var(--r-3); box-shadow: var(--e-2); min-width: 0; }
.lab h2 { font-size: var(--fs-2); margin: 0 0 4px; }
.lab-prompt { margin: 0 0 var(--sp-2); color: var(--ink-2); }
.lab-nojs { color: var(--ink-2); font-weight: var(--w-strong); }
html.am-js .lab-nojs { display: none; }
.lab-body > * + * { margin-top: var(--sp-2); }
.lab-fb { min-height: 1.5em; margin: 0; font-weight: var(--w-strong); }
.lab-fb.ok { color: var(--success); } .lab-fb.bad { color: var(--danger); }
.lab-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.lab input[type="text"], .lab textarea, .lab select { width: 100%; min-height: 44px; padding: 8px 12px; border: var(--bd-strong); border-radius: var(--r-1); background: var(--surface); color: var(--ink); font: 0.9rem var(--font-mono); }
.lab textarea { min-height: 96px; resize: vertical; overflow-wrap: anywhere; }
.lab label.lb { display: grid; gap: 4px; font-weight: var(--w-strong); font-size: 0.9rem; }
.lab pre { margin: 0; padding: var(--sp-2); background: var(--t-bg); color: var(--t-green); border-radius: var(--r-1); font: 0.82rem/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16em; overflow: auto; }
.lab pre .k { color: var(--t-cyan); } .lab pre .n { color: var(--t-amber); }
.lab .term { box-shadow: none; }
.lab .tbl { overflow-x: auto; }
.lab table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.lab th, .lab td { border: var(--bd); padding: 6px 8px; text-align: left; }
.lab-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-1); }
.lab-stat > div { padding: var(--sp-1) var(--sp-2); background: var(--surface-2); border-radius: var(--r-1); border-left: 3px solid var(--accent); }
.lab-stat b { display: block; font: var(--w-head) 1.05rem var(--font-head); }
.lab-stat span { color: var(--ink-2); font-size: var(--fs--1); }

/* order */
.ord-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: o; }
.ord-item { display: flex; align-items: center; gap: var(--sp-1); padding: 6px 8px 6px 12px; min-height: 48px; background: var(--surface-2); border: var(--bd-strong); border-radius: var(--r-1); cursor: grab; }
.ord-item.is-drag { opacity: 0.5; } .ord-item.is-over { border-color: var(--accent-ink); box-shadow: var(--focus); }
.ord-item.is-right { background: var(--success-soft); border-color: var(--success); } .ord-item.is-wrong { background: var(--danger-soft); border-color: var(--danger); }
.ord-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font: var(--w-head) 0.75rem var(--font-head); }
.ord-t { flex: 1; min-width: 0; }
.ord-b { flex: none; display: flex; gap: 2px; }
.ord-b button { width: 36px; height: 36px; border: var(--bd-strong); border-radius: 6px; background: var(--surface); cursor: pointer; color: var(--ink); font-size: 1rem; }
.ord-b button:disabled { opacity: 0.35; cursor: default; }
@media (pointer: coarse) { .ord-b button { width: 44px; height: 44px; } }

/* sort */
.srt-item { display: grid; gap: 6px; padding: var(--sp-1) var(--sp-2); border: var(--bd); border-radius: var(--r-1); background: var(--surface-2); }
.srt-item.is-right { border-color: var(--success); background: var(--success-soft); } .srt-item.is-wrong { border-color: var(--danger); background: var(--danger-soft); }
.srt-item p { margin: 0; font-weight: var(--w-strong); }
.srt-why { color: var(--ink-2); font-size: 0.88rem; min-height: 1.2em; }

/* phish */
.ph-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-2); }
.ph-card { display: grid; gap: 8px; align-content: start; }
.ph-win { border: var(--bd-strong); border-radius: var(--r-1); overflow: hidden; background: #fff; }
.ph-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--surface-2); border-bottom: var(--bd); font: 0.74rem var(--font-mono); color: var(--ink-2); overflow: hidden; }
.ph-bar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.ph-url { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff; border: var(--bd); border-radius: 99px; padding: 2px 8px; flex: 1; color: var(--ink); }
.ph-pg { padding: var(--sp-2); display: grid; gap: 8px; justify-items: center; text-align: center; }
.ph-logo { width: 28px; height: 28px; border-radius: 8px; background: var(--navy); color: var(--accent); display: grid; place-items: center; font: var(--w-head) 0.8rem var(--font-head); }
.ph-pg b { font: var(--w-head) 0.9rem var(--font-head); }
.ph-pg span.f { width: 100%; height: 26px; border: var(--bd-strong); border-radius: 6px; background: var(--surface-2); }
.ph-pg span.bt { width: 100%; padding: 5px; border-radius: 6px; background: var(--accent); color: var(--navy); font: var(--w-head) 0.78rem var(--font-head); }
.ph-card.is-picked .ph-win { box-shadow: var(--focus); }
.ph-card.is-real .ph-win { border-color: var(--success); } .ph-card.is-fake .ph-win { border-color: var(--danger); }
.ph-dev { min-height: 3.2em; font-size: 0.84rem; padding: 6px 8px; border-radius: var(--r-1); background: var(--surface-2); color: var(--ink-2); }
.ph-dev.ok { background: var(--success-soft); color: var(--success); } .ph-dev.bad { background: var(--danger-soft); color: var(--danger); }
.ph-tell { font-size: 0.84rem; color: var(--ink-2); }

/* mfa + slider + record */
.mfa-f { display: flex; flex-wrap: wrap; gap: 6px; }
.chk { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: var(--bd-strong); border-radius: 99px; cursor: pointer; background: var(--surface); font-weight: var(--w-strong); font-size: 0.9rem; }
.chk input { accent-color: var(--accent-ink); width: 16px; height: 16px; }
.chk:has(input:checked) { background: var(--navy); color: #fff; border-color: var(--navy); }
.chk:has(input:focus-visible) { box-shadow: var(--focus); }
.mfa-r { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 4px var(--sp-2); align-items: center; font-size: 0.9rem; }
.meter { display: flex; gap: 3px; }
.meter i { flex: 1; height: 10px; border-radius: 3px; background: var(--line); }
.meter.l0 i:nth-child(-n+1) { background: var(--danger); }
.meter.l1 i:nth-child(-n+2) { background: var(--warning); }
.meter.l2 i:nth-child(-n+3) { background: #5a9a1e; }
.meter.l3 i { background: var(--success); }
.mfa-total { font: var(--w-head) var(--fs-1) var(--font-head); }
.sl-range { width: 100%; accent-color: var(--accent-ink); height: 36px; }
.sl-ticks { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--ink-3); }
.sl-ticks span:first-child { text-align: left; } .sl-ticks span:last-child { text-align: right; }
.rec-list { display: grid; gap: 6px; }

/* runner / terminals */
.run-cmds { display: flex; flex-wrap: wrap; gap: 6px; }
.run-cmds button { min-height: 36px; padding: 0 12px; border-radius: 6px; border: var(--bd-strong); background: var(--surface-2); cursor: pointer; font: var(--w-strong) 0.82rem var(--font-body); color: var(--ink); }
.run-cmds button:hover { border-color: var(--accent-ink); }
.run-cmds button.is-run { background: var(--accent-soft); }
.run-in { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--t-bar); border-top: 1px solid #222d3a; }
.run-in label { color: var(--t-green); font: 0.84rem var(--font-mono); }
.run-in input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--t-text); font: 0.84rem var(--font-mono); min-height: 32px; }
.run-in input:focus-visible { outline: 2px solid var(--t-cyan); }
.term-out.run-out { height: 15em; }

/* lifecycle, logread, chain, hmac, jwt, pkce */
.lc-ev { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-ev button { min-height: 40px; padding: 0 12px; border-radius: 99px; border: var(--bd-strong); background: var(--surface); cursor: pointer; font: var(--w-strong) 0.86rem var(--font-body); }
.lc-ev button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.lc-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.lc-app { padding: 8px 10px; border-radius: var(--r-1); border: var(--bd); background: var(--surface-2); font-size: 0.88rem; }
.lc-app b { display: block; }
.lc-app.has { background: var(--accent-soft); border-color: var(--accent-ink); }
.lc-app.extra { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.lc-app.miss { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.lg-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 2px 10px; width: 100%; text-align: left; padding: 8px 10px; border: var(--bd); border-radius: var(--r-1); background: var(--t-bg); color: var(--t-green); cursor: pointer; font: 0.78rem/1.5 var(--font-mono); }
.lg-row:hover { border-color: var(--t-dim); }
.lg-row.is-pick { outline: 2px solid var(--t-cyan); }
.lg-row.is-right { outline: 2px solid var(--success); } .lg-row.is-wrong { outline: 2px solid var(--danger); }
.lg-row .st-failed, .lg-row .st-denied { color: var(--t-amber); }
.lg-list { display: grid; gap: 4px; }
.ch-blk { display: grid; gap: 4px; padding: var(--sp-1) var(--sp-2); border: var(--bd-strong); border-left: 4px solid var(--success); border-radius: var(--r-1); background: var(--surface-2); }
.ch-blk.is-bad { border-left-color: var(--danger); background: var(--danger-soft); }
.ch-h { font: 0.76rem var(--font-mono); color: var(--ink-2); overflow-wrap: anywhere; }
.ch-h b { color: var(--ink); }
.out-ok { color: var(--success); font-weight: var(--w-strong); } .out-bad { color: var(--danger); font-weight: var(--w-strong); }
.jw-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.jw-chk { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.jw-chk li { padding: 6px 10px; border-radius: var(--r-1); background: var(--surface-2); }
.jw-chk li.ok { background: var(--success-soft); color: var(--success); } .jw-chk li.bad { background: var(--danger-soft); color: var(--danger); } .jw-chk li.na { color: var(--ink-2); }
.jw-parts { overflow-wrap: anywhere; font: 0.76rem/1.5 var(--font-mono); }
.jw-parts .p1 { color: #b00057; } .jw-parts .p2 { color: #6a2fb5; } .jw-parts .p3 { color: #0a6d8a; }

/* Runbooks */
.rb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); align-items: start; }
@media (max-width: 960px) { .rb-layout { grid-template-columns: minmax(0, 1fr); } .rb-side { order: -1; } }
.rb-body { max-width: 780px; }
.rb-intro { font-size: var(--fs-1); color: var(--ink-2); max-width: 62ch; }
.rb-sec { margin-top: var(--sp-4); }
.rb-sec h2 { font-size: var(--fs-2); margin: 0 0 var(--sp-1); }
.rb-sec p { color: var(--ink-2); max-width: var(--measure); }
.rb-list { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: grid; gap: 6px; }
.rb-list label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border: var(--bd); border-radius: var(--r-1); background: var(--surface); cursor: pointer; min-height: 44px; }
.rb-list label:hover { border-color: var(--accent-ink); }
.rb-list input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent-ink); }
.rb-list label:has(input:checked) { background: var(--success-soft); border-color: transparent; }
.rb-list label:has(input:checked) span { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.rb-list label:has(input:focus-visible) { box-shadow: var(--focus); }
.rb-side { position: sticky; top: calc(var(--am-header, 64px) + 16px); display: grid; gap: var(--sp-2); }
.rb-card { padding: var(--sp-3); border: var(--bd); border-radius: var(--r-2); background: var(--surface); display: grid; gap: var(--sp-1); }
.rb-count { margin: 0; font-size: var(--fs-1); }
.rb-btns { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.rb-note { margin: 0; min-height: 1.4em; color: var(--success); font-size: 0.88rem; }
.rb-end { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: var(--bd); }
.print-foot { display: none; }
@media print {
  .rb-side, .page-hero .c-crumbs, .ct-cta, .am-header, .am-footer { display: none !important; }
  .rb-layout { display: block; } .rb-list label { border: 0; padding: 4px 0; break-inside: avoid; }
  .rb-list input { appearance: none; border: 1.5px solid #000; width: 14px; height: 14px; border-radius: 3px; }
  .rb-list input:checked { background: #000; }
  .rb-list label:has(input:checked) { background: none; } .rb-list label:has(input:checked) span { text-decoration: none; color: #000; }
  .print-foot { display: block; font-size: 0.8rem; } body { font-size: 11pt; }
  .page-hero { background: none; padding: 0; } .sec { padding: 8pt 0; }
}

/* Lexicon */
.lx-tools { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); position: sticky; top: calc(var(--am-header, 64px)); z-index: 5; background: var(--surface); padding: var(--sp-2) 0; border-bottom: var(--bd); }
.lx-tools .gl-search { display: grid; gap: 4px; }
.lx-tools .gl-search input { max-width: 480px; }
.lx-az { display: flex; flex-wrap: wrap; gap: 4px; }
.lx-l { min-width: 34px; min-height: 34px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 6px; border: var(--bd-strong); background: var(--surface); cursor: pointer; font: var(--w-strong) 0.82rem var(--font-body); color: var(--ink); }
.lx-l:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.lx-l.is-on, .lx-l[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.lx-l.is-off { border-color: var(--line); color: var(--ink-3); background: var(--surface-2); cursor: default; }
@media (max-width: 640px) { .lx-tools { position: static; } }
.lx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--sp-2); }
.lx-card { display: flex; flex-direction: column; gap: 8px; padding: var(--sp-3); background: var(--surface); border: var(--bd); border-radius: var(--r-2); scroll-margin-top: calc(var(--am-header, 64px) + 130px); min-width: 0; }
.lx-card:target { border-color: var(--accent-ink); box-shadow: var(--focus); }
.lx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-1); }
.lx-top h3 { margin: 0; font-size: var(--fs-1); min-width: 0; overflow-wrap: anywhere; }
.lx-aka { display: block; margin-top: 2px; font: var(--w-regular) 0.8rem var(--font-body); color: var(--ink-3); letter-spacing: 0; }
.lx-copy { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 8px; border: var(--bd); border-radius: 6px; background: var(--surface-2); color: var(--ink-2); cursor: pointer; font: var(--w-strong) 0.75rem var(--font-body); }
.lx-copy:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.lx-def { margin: 0; color: var(--ink); }
.lx-def code, .lx-card code { font-size: 0.86em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.lx-why { margin: 0; padding: 8px 10px; background: var(--accent-soft); border-radius: var(--r-1); font-size: 0.9rem; color: var(--ink); }
.lx-why strong { color: var(--accent-ink); margin-right: 4px; }
.lx-rel { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 0.85rem; align-items: center; }
.lx-rel span { color: var(--ink-3); } .lx-rel a { color: var(--accent-ink); font-weight: var(--w-strong); }
.lx-fig { margin: auto 0 0; padding-top: 4px; }
.lx-card[hidden] { display: none; }

/* Diagrams */
.dg { width: 100%; height: auto; display: block; color: var(--ink-2); }
.dg-big { max-width: 520px; margin-inline: auto; }
.dg-n { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.dg-idp { fill: var(--accent-soft); stroke: var(--accent-ink); }
.dg-dark { fill: var(--navy); stroke: var(--navy); }
.dg-ghost { fill: var(--surface-2); stroke-dasharray: 3 3; }
.dg-bad { fill: var(--danger-soft); stroke: var(--danger); }
.dg-ok { fill: var(--success-soft); stroke: var(--success); }
.dg-chip { fill: var(--surface-2); }
.dg-t { font: 600 11px var(--font-body); fill: var(--ink); }
.dg-t-dark { fill: #fff; } .dg-t-bad { fill: var(--danger); } .dg-t-ok { fill: var(--success); } .dg-t-idp { fill: var(--accent-ink); }
.dg-ar { fill: none; stroke: currentColor; stroke-width: 1.5; }
.dg-ar.dg-dash { stroke-dasharray: 4 3; } .dg-ar.dg-ok { stroke: var(--success); color: var(--success); } .dg-ar.dg-bad { stroke: var(--danger); color: var(--danger); stroke-dasharray: 4 3; }
.dg-lb { font: 500 9.5px var(--font-body); fill: var(--ink-3); }

/* Field notes: index */
.nt-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 860px) { .nt-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } }
.nt-side { position: sticky; top: calc(var(--am-header, 64px) + 16px); }
@media (max-width: 860px) { .nt-side { position: static; } }
.nt-fs { border: 0; padding: 0; margin: var(--sp-2) 0 0; } .nt-fs h2, .nt-side h2 { font-size: 0.95rem; margin: 0 0 8px; }
.nt-list { display: grid; gap: 0; border-top: var(--bd); }
.nt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-1); border-bottom: var(--bd); text-decoration: none; color: var(--ink); transition: background var(--d-base) var(--ease); }
.nt-row:hover { background: var(--accent-soft); }
.nt-t { display: block; font: var(--w-head) var(--fs-1) var(--font-head); letter-spacing: -0.02em; line-height: 1.25; }
.nt-d { display: block; margin-top: 4px; color: var(--ink-2); font-size: 0.92rem; max-width: 62ch; }
.nt-meta { display: grid; gap: 6px; justify-items: end; }
.nt-facts { display: flex; gap: 10px; color: var(--ink-3); font-size: var(--fs--1); }
.nt-facts span + span::before { content: "·"; margin-right: 10px; }
.nt-row[hidden] { display: none; }
@media (max-width: 640px) { .nt-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } .nt-meta { justify-items: start; } }

/* Field notes: article */
.nr-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 90; pointer-events: none; }
.nr-progress i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.nr-head h1 { max-width: 26ch; font-size: clamp(var(--fs-3), 3.6vw, var(--fs-5)); }
.nr-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.nr-head .ar-meta { margin-top: var(--sp-2); }
.nr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-5); align-items: start; padding-block: var(--sp-3) var(--sp-6); }
@media (max-width: 960px) { .nr-layout { grid-template-columns: minmax(0, 1fr); } .nr-side { display: none; } }
.nr-main { min-width: 0; max-width: 780px; display: grid; gap: var(--sp-3); }
.nr-tldr { padding: var(--sp-3); border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--r-2) var(--r-2) 0; }
.nr-tldr p:last-child { margin: 4px 0 0; font-size: var(--fs-1); line-height: 1.45; color: var(--ink); }
.nr-depth { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.nr-depth-h { color: var(--ink-3); font-size: 0.88rem; }
.nr-ex { margin: 0; padding: var(--sp-3); border: var(--bd); border-radius: var(--r-2); background: var(--surface-2); }
.nr-ex + .term { margin-top: calc(-1 * var(--sp-1)); }
.nr-take { padding: var(--sp-3); border: var(--bd-strong); border-radius: var(--r-2); }
.nr-take ul { margin: 6px 0 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.nr-body { max-width: none; }
.nr-body .ks { font-weight: var(--w-regular); }
html[data-depth="short"] .nr-body .ks { font-size: 1.12rem; }
.nr-body .c-callout { margin: 1.2rem 0; }
.nr-body .c-callout p { margin: 0; }
.nr-side { position: sticky; top: calc(var(--am-header, 64px) + 16px); }
.nr-toc { max-height: calc(100vh - var(--am-header, 64px) - 40px); overflow-y: auto; }
.nr-toc .eyebrow { margin-bottom: 8px; }
.nr-toc .c-progress { margin-bottom: 10px; }
.nr-toc .c-progress i { width: 100%; transform-origin: 0 50%; transform: scaleX(0); transition: none; }
.nr-toc a.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: var(--w-strong); }
.nr-try h2 { font-size: var(--fs-2); margin: 0 0 var(--sp-2); }
.nr-try .ls-terms, .nr-try .ls-links { margin-top: var(--sp-2); }
.nr-body .tbl { margin-block: 1rem; }
@media print { .nr-side, .nr-depth, .nr-progress, .ar-cta { display: none !important; } [data-depth-only="full"] { display: revert !important; } }