/* ACB educator app — one stylesheet, no build step, no framework.
   Light and dark both first-class (prefers-color-scheme). Content column is a reading measure;
   the lesson view is the only two-column layout. Nothing centred that should be read. */

:root {
  --paper:      #f5f3ee;
  --paper-2:    #ece8df;
  --card:       #fffdf9;
  --ink:        #1b1a17;
  --ink-2:      #4a463e;
  --ink-3:      #7a746a;
  --rule:       #dcd6c9;
  --rule-2:     #c8c1b1;
  --accent:     #0e5953;
  --accent-ink: #0a443f;
  --accent-soft:#e0eeec;
  --draft:      #845109;
  --draft-soft: #faeed8;
  --stop:       #96281a;
  --stop-soft:  #fae7e2;
  --ok:         #2a6530;
  --ok-soft:    #e4efe2;
  --shadow:     0 1px 0 rgba(27,26,23,.05), 0 6px 18px -12px rgba(27,26,23,.3);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --measure: 68ch;
  --pad: 24px;
  --radius: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #111210;
    --paper-2:    #191b18;
    --card:       #1a1c19;
    --ink:        #ecebe4;
    --ink-2:      #b7b3a8;
    --ink-3:      #8a847a;
    --rule:       #2d302b;
    --rule-2:     #3d413b;
    --accent:     #6dbdb3;
    --accent-ink: #9ad6ce;
    --accent-soft:#152e2b;
    --draft:      #ddb264;
    --draft-soft: #2f2612;
    --stop:       #e59384;
    --stop-soft:  #371c17;
    --ok:         #84bd8a;
    --ok-soft:    #1a2a1b;
    --shadow:     0 1px 0 rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}

* { box-sizing: border-box; }

/* `hidden` must beat the display rules below it. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--card); color: var(--ink); padding: 10px 14px; z-index: 50;
}
.skip:focus { left: 8px; top: 8px; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---------- top bar ---------------------------------------------------- */

.topbar {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.topbar-in {
  max-width: 1120px; margin: 0 auto; padding: 12px var(--pad);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; }
.brand-mark {
  font: 600 13px/1 var(--mono); letter-spacing: .14em;
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  padding: 6px 7px; color: var(--accent-ink);
}
.brand-name { font: 500 15px/1 var(--serif); letter-spacing: .01em; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.who { text-align: right; line-height: 1.3; }
.who-name { display: block; font-weight: 600; font-size: 14px; }
.who-sub { display: block; font-size: 11.5px; color: var(--ink-3); letter-spacing: .02em; }

.spend { min-width: 190px; }
.spend-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.spend-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.spend-nums { font: 500 13px/1 var(--mono); }
.meter {
  margin-top: 5px; height: 5px; background: var(--rule);
  border-radius: 99px; overflow: hidden;
}
.meter-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }
.spend.warn .meter-fill { background: var(--draft); }
.spend.at-cap .meter-fill { background: var(--stop); }
.spend-note { margin: 5px 0 0; font-size: 11.5px; color: var(--draft); }
.spend.at-cap .spend-note { color: var(--stop); }

/* ---------- layout ----------------------------------------------------- */

/* Single-column screens sit in a reading column; only the screens with a sidebar go wide. */
#view { max-width: 860px; margin: 0 auto; padding: 36px var(--pad) 64px; outline: none; }
#view.wide { max-width: 1160px; }
.measure { max-width: var(--measure); }

.footer {
  border-top: 1px solid var(--rule);
  padding: 20px var(--pad) 40px;
}
.footer p { max-width: 70ch; margin: 0 auto 6px; font-size: 12.5px; color: var(--ink-3); }
.footer-meta { font-family: var(--mono); font-size: 11.5px; }

h1 { font: 400 clamp(26px, 4.2vw, 34px)/1.2 var(--serif); margin: 0 0 10px; letter-spacing: -.01em; }
h2 { font: 400 clamp(19px, 2.6vw, 23px)/1.25 var(--serif); margin: 32px 0 10px; }
h3 { font: 600 14.5px/1.4 var(--sans); margin: 22px 0 6px; letter-spacing: .005em; }
p { margin: 0 0 12px; }
.lede { font-size: 17px; color: var(--ink-2); max-width: 62ch; }
.eyebrow {
  font: 600 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .13em;
  color: var(--ink-3); margin: 0 0 8px;
}
.dim { color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.small { font-size: 13px; }

/* ---------- panels, cards --------------------------------------------- */

.panel {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 24px; margin: 0 0 20px;
  box-shadow: var(--shadow);
}
.panel > :last-child { margin-bottom: 0; }
.panel-tight { padding: 16px 18px; }

.notice {
  border: 1px solid var(--rule-2); border-left: 3px solid var(--ink-3);
  background: var(--paper-2); border-radius: var(--radius);
  padding: 14px 16px; margin: 0 0 18px;
}
.notice h3 { margin-top: 0; }
.notice > :last-child { margin-bottom: 0; }
.notice-draft { border-left-color: var(--draft); background: var(--draft-soft); }
.notice-stop  { border-left-color: var(--stop);  background: var(--stop-soft); }
.notice-ok    { border-left-color: var(--ok);    background: var(--ok-soft); }
.notice-accent{ border-left-color: var(--accent); background: var(--accent-soft); }

.banner {
  border-bottom: 1px solid var(--rule);
  background: var(--draft-soft); color: var(--ink);
  padding: 10px var(--pad); font-size: 13.5px;
}
.banner-in { max-width: 1120px; margin: 0 auto; display: flex; gap: 14px; align-items: baseline; }
.banner strong { font-weight: 600; }
.banner-stop { background: var(--stop-soft); }
.banner button { margin-left: auto; }

/* ---------- chips ------------------------------------------------------ */

.chip {
  display: inline-block; font: 600 11px/1 var(--sans); letter-spacing: .07em;
  text-transform: uppercase; padding: 5px 7px; border-radius: var(--radius);
  border: 1px solid var(--rule-2); color: var(--ink-2); background: var(--paper-2);
  vertical-align: middle;
}
.chip-draft { color: var(--draft); border-color: var(--draft); background: var(--draft-soft); }
.chip-stop  { color: var(--stop);  border-color: var(--stop);  background: var(--stop-soft); }
.chip-ok    { color: var(--ok);    border-color: var(--ok);    background: var(--ok-soft); }
.chip-live  { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }

/* ---------- buttons --------------------------------------------------- */

button, .btn {
  font: 500 14.5px/1 var(--sans); font-family: var(--sans);
  padding: 11px 16px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--rule-2); background: var(--card); color: var(--ink);
}
button:hover:not(:disabled) { border-color: var(--ink-3); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
button:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
@media (prefers-color-scheme: dark) { .btn-primary { color: #0d1513; } }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-2); text-decoration: underline; padding: 6px 2px; }
.btn-small { font-size: 13px; padding: 7px 11px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }

/* ---------- forms ----------------------------------------------------- */

label { display: block; font-weight: 600; font-size: 13.5px; margin: 0 0 5px; }
.field { margin: 0 0 20px; }
.field-hint { font-size: 12.5px; color: var(--ink-3); margin: 5px 0 0; }
input[type=text], textarea, select {
  width: 100%; font: 15px/1.5 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-2);
  border-radius: var(--radius); padding: 10px 12px;
}
input[type=text].token { font-family: var(--mono); font-size: 13.5px; letter-spacing: .02em; }
textarea { min-height: 170px; resize: vertical; font-size: 14.5px; }

.modes { display: grid; gap: 10px; }
@media (min-width: 720px) { .modes { grid-template-columns: repeat(3, 1fr); } }
.mode {
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  padding: 12px 14px; cursor: pointer; background: var(--paper); font-weight: 400;
}
.mode:has(input:checked), .mode.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.mode input { margin: 0 8px 0 0; }
.mode b { display: inline-block; font-size: 13.5px; }
.mode span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }

.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 14px; }
.check input { margin: 3px 0 0; flex: none; width: 17px; height: 17px; }

.drop {
  border: 1px dashed var(--rule-2); border-radius: var(--radius);
  padding: 18px; text-align: left; background: var(--paper);
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop p { margin: 0; font-size: 13px; color: var(--ink-2); }

/* ---------- stepper --------------------------------------------------- */

.stepper { list-style: none; display: flex; gap: 2px; margin: 0 0 26px; padding: 0; overflow-x: auto; }
.stepper li {
  flex: 1 1 0; min-width: 84px; padding: 8px 0 0;
  border-top: 3px solid var(--rule);
  font: 600 11.5px/1.3 var(--sans); letter-spacing: .04em; color: var(--ink-3);
}
.stepper li.done { border-top-color: var(--rule-2); color: var(--ink-2); }
.stepper li.now  { border-top-color: var(--accent); color: var(--accent-ink); }
.stepper li.stop { border-top-color: var(--stop); color: var(--stop); }
.stepper li small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-3); letter-spacing: 0; }

/* ---------- session list --------------------------------------------- */

.sessions { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.sessions li { border-bottom: 1px solid var(--rule); }
.sessions button {
  width: 100%; text-align: left; background: none; border: 0; padding: 14px 4px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.sessions button:hover { background: var(--paper-2); }
.sessions .s-title { font: 500 16px/1.3 var(--serif); flex: 1 1 220px; }
.sessions .s-when { font-size: 12.5px; color: var(--ink-3); font-family: var(--mono); }

/* ---------- progress / liveness -------------------------------------- */

.bar { height: 5px; background: var(--rule); border-radius: 99px; overflow: hidden; margin: 10px 0 0; }
.bar span { display: block; height: 100%; background: var(--accent); transition: width .5s ease; }

.live { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-3); font-family: var(--mono); flex-wrap: wrap; }
.pulse {
  width: 8px; height: 8px; border-radius: 99px; background: var(--accent); flex: none;
  animation: pulse 2s ease-in-out infinite;
}
.live.failing .pulse { background: var(--stop); }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

.stages { list-style: none; margin: 14px 0 0; padding: 0; }
.stages li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--rule);
}
.stages .n { font: 500 12.5px/1.6 var(--mono); color: var(--ink-3); }
.stages .nm { font-weight: 600; font-size: 14px; }
.stages .dt { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.stages li.done .nm::after { content: " — done"; font-weight: 400; color: var(--ok); }
.stages li.now  .nm::after { content: " — running"; font-weight: 400; color: var(--accent-ink); }
.stages li.bad  .nm::after { content: " — failed"; font-weight: 400; color: var(--stop); }
.stages li.wait .nm { color: var(--ink-3); font-weight: 500; }

/* ---------- interview ------------------------------------------------- */

.q-card { border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--card); padding: 26px; box-shadow: var(--shadow); }
.q-title { font: 400 clamp(20px, 3vw, 26px)/1.3 var(--serif); margin: 0 0 14px; }
.q-body { white-space: pre-wrap; font-size: 16px; color: var(--ink-2); max-width: 60ch; }
.q-hint { font-size: 13.5px; color: var(--ink-3); border-left: 2px solid var(--rule-2); padding-left: 12px; margin: 16px 0 0; }
.options { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.options button { width: 100%; text-align: left; padding: 14px 16px; font-size: 15px; }
.options .opt-skip button { border-style: dashed; color: var(--ink-2); font-size: 14px; padding: 11px 16px; }
.opt-input { margin-top: 10px; padding: 14px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.opt-input textarea { min-height: 90px; background: var(--card); }
.meta-row { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); margin: 0 0 18px; }
.meta-row b { color: var(--ink-2); font-weight: 600; }

/* ---------- markdown surface ------------------------------------------ */

.md { max-width: var(--measure); }
.md h1 { font-size: clamp(22px, 3.4vw, 28px); margin: 0 0 14px; }
.md h2 { font-size: clamp(17px, 2.4vw, 20px); margin: 30px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.md p { margin: 0 0 12px; }
.md ul { margin: 0 0 16px; padding-left: 20px; }
.md li { margin: 0 0 7px; }
.md strong { font-weight: 600; }
.md em { font-style: italic; color: var(--ink-2); }
.md code { font-family: var(--mono); font-size: .9em; background: var(--paper-2); padding: 1px 4px; border-radius: 2px; }
.md details { border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 14px; background: var(--paper-2); }
.md summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.md hr { border: 0; border-top: 1px solid var(--rule); margin: 24px 0; }

/* ---------- lesson ---------------------------------------------------- */

.lesson-wrap { display: grid; gap: 32px; align-items: start; }
@media (min-width: 940px) { .lesson-wrap { grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; } }

.switcher { margin: 0 0 22px; }
.switcher .eyebrow { margin-bottom: 6px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  font-size: 13.5px; padding: 8px 12px; background: var(--paper-2); border-color: var(--rule);
}
.seg button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { .seg button[aria-pressed=true] { color: #0d1513; } }
.seg button:disabled { text-decoration: line-through; }

.block { margin: 0 0 22px; }
.block-section-title { font: 600 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .13em; color: var(--ink-3); margin: 34px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.block-label { font: 600 11px/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin: 0 0 8px; }
.block-worked { border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 16px 18px; background: var(--paper-2); }
.block-callout { border-left: 3px solid var(--ink-3); background: var(--paper-2); padding: 14px 16px; border-radius: var(--radius); }
.block-callout.v-breakdown { border-left-color: var(--draft); background: var(--draft-soft); }
.block-callout.v-scope { border-left-color: var(--accent); background: var(--accent-soft); }
.block-retrieval { border: 1px dashed var(--rule-2); border-radius: var(--radius); padding: 14px 16px; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.steps li::before { content: counter(s) "."; font: 500 13px/1.7 var(--mono); color: var(--ink-3); }
.fade { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 3px; letter-spacing: .03em; }

.prov { position: sticky; top: 16px; }
.prov h2 { margin-top: 0; font-size: 19px; }
.prov-block { border-top: 1px solid var(--rule); padding: 14px 0 2px; }
.prov-block h3 { margin: 0 0 6px; }
.prov dl { margin: 0; font-size: 13px; }
.prov dt { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); margin-top: 9px; }
.prov dd { margin: 2px 0 0; font-family: var(--mono); font-size: 12px; word-break: break-all; }
.prov ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.prov ul li { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.prov ul li:last-child { border-bottom: 0; }
.prov .vname { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.statement { font: italic 400 14.5px/1.6 var(--serif); color: var(--ink-2); margin: 0; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; margin: 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; }

table.jobs { width: 100%; border-collapse: collapse; font-size: 14px; }
table.jobs th { text-align: left; font: 600 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); padding: 0 12px 8px 0; border-bottom: 1px solid var(--rule); }
table.jobs td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); }
table.jobs td.mono { font-family: var(--mono); font-size: 12.5px; }

@media (max-width: 420px) {
  :root { --pad: 14px; }
  .panel { padding: 16px; }
  .q-card { padding: 18px; }
  .topbar-in { gap: 10px; }
  .spend { min-width: 100%; }
  .who { text-align: left; }
}

/* ---------------------------------------------------------------------------------------------------
   The step note, the journey map and the house-voice control (2026-10-21).
   Tokens only: every colour below is a declared token, so light and dark are defined in one place and
   the contrast pass does not have to be repeated per rule.
   --------------------------------------------------------------------------------------------------- */

.step-note {
  max-width: var(--measure);
  margin: 10px 0 22px;
  padding: 10px 14px;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.6;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.step-note .you { display: block; margin-top: 4px; color: var(--ink-2); }
.step-note .nextup { color: var(--ink-3); }

.journey { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); padding: 12px 16px; margin: 0 0 22px; }
.journey > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.journey[open] > summary { margin-bottom: 10px; }
.journey-list { list-style: none; margin: 0; padding: 0; }
.journey-list li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule); }
.journey-list li:first-child { border-top: 0; padding-top: 2px; }
.journey-list .n { font: 500 12.5px/1.7 var(--mono); color: var(--ink-3); }
.journey-list b { font-size: 13.5px; }
.journey-list p { margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.journey-list p.you { color: var(--ink-3); }

.voice-detail { margin-top: 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); padding: 10px 14px; }
.voice-detail > summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink); }
.voice-detail[open] > summary { margin-bottom: 8px; }
.voice-detail p { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin: 6px 0 0; }
.voice-checks { margin: 8px 0 0; padding-left: 18px; }
.voice-checks li { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 7px; }
.voice-checks b { font: 600 12px/1.6 var(--mono); color: var(--ink); }

.chip-soft { margin-left: 6px; color: var(--ink-3); border-color: var(--rule-2); background: transparent; }

/* ---------------------------------------------------------------------------------------------------
   Side by side (§5.6). Columns of the same lesson, one per setting, aligned on the section they share.

   The grid is set from `--cmp-cols` rather than auto-fit, because a comparison with a column missing is
   worse than one that scrolls: an educator counting three settings must see three. Below the width where
   that fits, the row scrolls sideways and the section label stays put, so you never lose which part of
   the lesson you are reading across.
   --------------------------------------------------------------------------------------------------- */
.cmp { margin-top: 18px; }

.cmp-head,
.cmp-cells {
  display: grid;
  grid-template-columns: repeat(var(--cmp-cols, 2), minmax(300px, 1fr));
  gap: 20px;
}
.cmp-head { position: sticky; top: 0; z-index: 2; background: var(--paper); padding: 10px 0 8px; border-bottom: 1px solid var(--rule); }
.cmp-col-head .eyebrow { margin: 0 0 2px; }
.cmp-name { margin: 0; font-family: var(--mono); font-size: .92rem; font-weight: 600; color: var(--accent-ink); overflow-wrap: anywhere; }

.cmp-row { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.cmp-row:last-child { border-bottom: 0; }

/* The row label is the unit of comparison, so it sits above the row and stays legible while it scrolls. */
.cmp-section {
  position: sticky; left: 0;
  margin: 0 0 12px;
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent-ink);
}

.cmp-cell { min-width: 0; }
.cmp-cell > .block:first-child,
.cmp-cell > .md:first-child { margin-top: 0; }

/* A setting whose contract names this section something else: shown in the cell, never silently merged. */
.cmp-alt-title { margin: 0 0 8px; font-size: .78rem; font-style: italic; color: var(--accent-ink); }

/* Narrow screens: one row still shows every setting, by scrolling, rather than dropping to one column.
   Stacking would turn the comparison back into the one-at-a-time view it exists to replace. */
@media (max-width: 900px) {
  .cmp-head, .cmp-cells { overflow-x: auto; padding-bottom: 6px; }
  .cmp-head { position: static; }
}

/* Reference material for Curated mode (docs/curated-library-plan.md, phase A). */
.field-reference { border-left: 3px solid var(--accent); padding-left: 16px; }
.field-reference textarea { min-height: 140px; }
.sub-label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; }
.refs { list-style: none; margin: 10px 0 4px; padding: 0; }
.refs li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.refs .ref-name { font-weight: 600; }
.refs li button { margin-left: auto; }