/* Field tools: lift envelope, yard capture, course genome. Drawn with design
   system 0.3.1 (design-tokens.css, design-system.css) and the shared parts in
   site-shell.css. Every control is at least --cq-touch (44px); no text is
   under 12px; hover styles only where a pointer can hover; nothing moves
   unless the reader allows motion.

   The drawing boards keep their dark ground: the side view, the chart curve,
   the 3D view and the genome are drawn in light lines for it (lift.js,
   lift-3d.js), so their colours are named here once, as --board-*. */
.field-page{--board:#122a36;--board-2:#18333f;--board-line:#3a565d;--board-raised:#244450;--board-ink:#f2f6ef;--board-muted:#a9c0c1;--board-soft:#cfe1da;--gold:#f3bb55;--gold-2:#ffd58a;--owed:#d9a84d;--board-scrim:#0b1a22cc}
.field-page main{width:min(100%,var(--cq-content-max));margin-inline:auto;padding:0 1.5rem}
/* Resets with no weight of their own (:where), so each part's own margins win. */
:where(.field-page) :where(h1,h2,h3){margin:0;line-height:var(--cq-line-heading)}
:where(.field-page) :where(p){margin:0}
.field-page code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.eyebrow{margin:0 0 .5rem;color:var(--cq-text-muted);font-size:.8125rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}

/* ---------- intro ---------- */
.field-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,28rem);align-items:end;gap:1rem 2.5rem;padding:2rem 0 1.25rem}
.field-intro h1{font-size:clamp(2rem,4.2vw,3.25rem);letter-spacing:-.03em}
.field-intro h1 span{color:var(--cq-accent)}
.field-intro__copy{color:var(--cq-text-muted);line-height:1.6}
.field-intro__copy strong{color:var(--cq-text)}
.staff-note{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-bottom:1rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
.staff-note .cq-badge{font-size:.8125rem}
.machine-switch{margin-bottom:1rem}

/* ---------- lift: the drawing board ---------- */
.lift-stage{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(19rem,.8fr);gap:1rem;align-items:start}
.lift-board{min-width:0;padding:.875rem;border-radius:var(--cq-radius-lg);background:var(--board);color:var(--board-ink)}
.board-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem .75rem;margin-bottom:.625rem}
.board-tag{color:var(--board-muted);font-size:.75rem;font-weight:700;letter-spacing:.12em}
.view-toggle{display:inline-flex;border:1px solid var(--board-line);border-radius:var(--cq-radius-md);overflow:hidden}
.view-toggle button{min-height:var(--cq-touch);padding:.5rem 1rem;border:0;background:transparent;color:var(--board-muted);font:inherit;font-size:var(--cq-type-sm);font-weight:700;cursor:pointer}
.view-toggle button+button{border-left:1px solid var(--board-line)}
.view-toggle button[aria-pressed=true]{background:var(--board-raised);color:var(--board-ink);box-shadow:inset 0 -3px var(--gold)}
.view-toggle button:focus-visible{outline-color:var(--gold);outline-offset:-3px}
.board-canvas{position:relative;overflow:hidden;aspect-ratio:1000/700;border:1px solid var(--board-line);border-radius:var(--cq-radius-md);background-color:var(--board-2);background-image:linear-gradient(#92b5ae0d 1px,transparent 1px),linear-gradient(90deg,#92b5ae0d 1px,transparent 1px);background-size:26px 26px}
.board-canvas>svg,.board-canvas>canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
/* A vertical swipe over a drawing scrolls the page; only the 3D view orbits on both axes. */
.board-canvas>svg{touch-action:pan-y}
.board-canvas>canvas{touch-action:none}
.side-view{cursor:crosshair}
.side-view.dragging{cursor:grabbing}
.side-view text,.curve-view text{font-family:var(--cq-font)}
.board-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.125rem;padding:.625rem .25rem .125rem;color:var(--board-muted);font-size:.8125rem}
.board-legend .ramp{display:inline-block;width:7.5rem;height:.5rem;margin:0 .375rem;border-radius:4px;vertical-align:middle}
.board-legend i{display:inline-block;margin-right:.375rem;vertical-align:middle}
.key-dot{width:8px;height:8px;border-radius:50%;background:var(--board-ink)}
.key-dia{width:8px;height:8px;background:var(--board-ink);transform:rotate(45deg)}
/* One row, inside the 62px the 3D view keeps clear at its foot (lift-3d.js). */
.three-overlay{position:absolute;left:.75rem;right:.75rem;bottom:.625rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem;color:var(--board-soft);font-size:var(--cq-type-sm);font-weight:650;pointer-events:none}
.three-overlay label{display:flex;flex:0 1 18rem;align-items:center;gap:.5rem;min-width:0;min-height:var(--cq-touch);padding:0 .5rem;border-radius:var(--cq-radius-md);background:color-mix(in srgb,var(--board) 80%,transparent);pointer-events:auto}
.three-overlay input{flex:1 1 auto;width:auto;min-width:3rem;min-height:var(--cq-touch);accent-color:var(--gold)}
.three-overlay button{flex:none;min-height:var(--cq-touch);padding:.5rem .75rem;border:1px solid var(--board-line);border-radius:var(--cq-radius-md);background:var(--board-raised);color:var(--board-ink);font:inherit;white-space:nowrap;pointer-events:auto;cursor:pointer}
.deferral-board{position:absolute;inset:0;display:grid;place-items:center;padding:1.5rem}
/* With no chart the card is in flow and nothing is clipped: the frame keeps its
   shape where the card fits and grows to the card where it does not (a phone). */
.board-canvas.is-deferred{display:grid;overflow:visible}
.board-canvas.is-deferred>.deferral-board{position:relative;inset:auto}
.deferral-card{max-width:35rem;padding:1.375rem 1.5rem;overflow-wrap:anywhere;border:1px dashed var(--owed);border-radius:var(--cq-radius-md);background:var(--board)}
.deferral-card .label{color:var(--owed);font-size:.75rem;font-weight:800;letter-spacing:.14em}
.deferral-card h2{margin:.5rem 0 .625rem;color:var(--board-ink);font-size:1.5rem}
.deferral-card p{margin:0 0 .625rem;color:var(--board-soft);font-size:var(--cq-type-sm);line-height:1.6}
.deferral-card a{display:inline-block;min-height:var(--cq-touch);padding:.625rem 0;color:var(--gold-2);font-weight:700;line-height:1.5}

/* ---------- lift: the controls and the reading ---------- */
.lift-panel{display:flex;flex-direction:column;gap:1rem;padding:1.125rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface);box-shadow:var(--cq-shadow-sm)}
.control-group{min-width:0;margin:0;padding:0;border:0}
.control-group>label,.control-group legend{display:block;margin-bottom:.5rem;padding:0;color:var(--cq-text-muted);font-size:.8125rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.segmented{display:inline-flex;max-width:100%;border:1px solid var(--cq-border-control);border-radius:var(--cq-radius-md);overflow:hidden}
.segmented button{flex:1 1 auto;min-height:var(--cq-touch);padding:.5rem 1rem;border:0;background:var(--cq-surface);color:var(--cq-text);font:inherit;font-weight:700;cursor:pointer}
.segmented button+button{border-left:1px solid var(--cq-border-control)}
.segmented button[aria-pressed=true]{background:var(--cq-accent);color:var(--cq-accent-text)}
.segmented button:focus-visible{outline-offset:-3px}
.segmented button:disabled{opacity:.55;cursor:not-allowed}
/* The value goes under the slider rather than squeeze it: at 200% zoom a
   slider beside its value would be a thumb's width long. */
.boom-row,.radius-row{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem}
.boom-row input,.radius-row input{flex:1 1 8rem;min-width:0;min-height:var(--cq-touch);accent-color:var(--cq-accent)}
.boom-row output,.radius-row output{min-width:5rem;margin-left:auto;font-size:1.25rem;font-weight:750;text-align:right;font-variant-numeric:tabular-nums}
.field-page select,.field-page input[type=number],.field-page input[type=text],.field-page input[type=date],.field-page textarea{width:100%;min-height:3rem;padding:.625rem .75rem;border:1px solid var(--cq-border-control);border-radius:var(--cq-radius-md);background:var(--cq-surface);color:var(--cq-text);font:inherit;font-size:1rem}
.hint{margin-top:.375rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.5}
.readout{padding-top:.875rem;border-top:1px solid var(--cq-border)}
.readout .rl{color:var(--cq-text-muted);font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.readout .big{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .625rem;margin:.25rem 0 .375rem}
.readout .big strong{font-size:clamp(2.25rem,3.4vw,2.875rem);line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.readout .big>span:not(.limit-badge){color:var(--cq-text-muted);font-size:var(--cq-type-sm);font-weight:650}
.limit-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:var(--cq-radius-pill);background:color-mix(in srgb,var(--cq-success) 12%,var(--cq-surface));color:var(--cq-success);font-size:.8125rem;font-weight:750}
.limit-badge.structural{background:color-mix(in srgb,var(--cq-warning) 12%,var(--cq-surface));color:var(--cq-warning)}
.row-line{margin:.375rem 0}
.row-line a,.yard-link{display:inline-block;min-height:var(--cq-touch);padding:.625rem 0;color:var(--cq-accent);font-weight:700;line-height:1.5}
/* A link that wraps keeps its arrow after its last word. */
:is(.row-line,.deferral-card,.genome-detail li,.ledger-controls) a .cq-icon{margin-left:.375rem;vertical-align:-.3em}
.rule-box{margin:.625rem 0;padding:.625rem .75rem;border-left:4px solid var(--cq-accent);border-radius:0 var(--cq-radius-md) var(--cq-radius-md) 0;background:color-mix(in srgb,var(--cq-accent) 7%,var(--cq-surface));font-size:.9375rem;line-height:1.55}
.no-rating{padding:.75rem .875rem;border:1px solid color-mix(in srgb,var(--cq-danger) 35%,var(--cq-surface));border-left:4px solid var(--cq-danger);border-radius:var(--cq-radius-md);background:color-mix(in srgb,var(--cq-danger) 7%,var(--cq-surface));font-size:.9375rem;line-height:1.55}
.no-rating strong{display:block;margin-bottom:.25rem;color:var(--cq-danger);font-size:1.0625rem}
.chart-id{margin-top:.625rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.5}
.cite-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.625rem}
.cite{display:inline-flex;align-items:center;gap:.375rem;max-width:100%;min-height:var(--cq-touch);padding:.375rem .75rem;border:1px solid var(--cq-border-control);border-radius:calc(var(--cq-touch) / 2);background:var(--cq-surface);color:var(--cq-accent);font:inherit;font-size:var(--cq-type-sm);font-weight:700;text-decoration:none;cursor:pointer}
.cite .cq-icon{width:1.125rem;height:1.125rem}
span.cite{border-style:dashed;color:var(--cq-text-muted);cursor:default}

/* ---------- lift: the ledger ---------- */
.ledger-section,.notes-section{margin-top:2.5rem}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:1rem 2rem;margin-bottom:1rem}
.section-head h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.section-head>p{max-width:34rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.6}
.ledger-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(18rem,.8fr);gap:1rem;align-items:start}
.ledger{overflow:hidden;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.ledger-line{display:grid;grid-template-columns:1.75rem minmax(0,1fr) auto;gap:.25rem .75rem;align-items:start;padding:.875rem 1.125rem;border-bottom:1px solid var(--cq-border)}
.ledger-line .op{color:var(--cq-text-muted);font-size:1.125rem;font-weight:800;line-height:1.3}
.ledger-line h3{margin-bottom:.25rem;font-size:1rem}
.ledger-line p{color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.5}
.ledger-line details summary{display:block;min-height:var(--cq-touch);color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.5;list-style:none;cursor:pointer}
.ledger-line details summary::-webkit-details-marker{display:none}
.ledger-line details summary b{color:var(--cq-accent);text-decoration:underline;white-space:nowrap}
.ledger-line details[open] summary{display:none}
.ledger-line .amt{font-size:1rem;font-weight:750;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ledger-line .meta{grid-column:2/4;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.375rem}
.ledger-line.owed{background:color-mix(in srgb,var(--cq-warning) 7%,var(--cq-surface));box-shadow:inset 4px 0 0 var(--owed)}
.ledger-line.owed .amt{color:var(--cq-warning)}
.ledger-line.captured{background:color-mix(in srgb,var(--cq-info) 6%,var(--cq-surface));box-shadow:inset 4px 0 0 var(--cq-info)}
.ledger-line.captured .amt{color:var(--cq-info)}
.ledger-line.off{background:var(--cq-canvas)}
.ledger-line.off h3,.ledger-line.off .amt{color:var(--cq-text-muted);font-weight:650}
.ledger-line.gross .amt{font-size:1.25rem}
.tag{display:inline-flex;align-items:center;min-height:1.75rem;padding:.125rem .5rem;border-radius:var(--cq-radius-sm);background:var(--cq-canvas);color:var(--cq-text-muted);font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.tag.owed{background:color-mix(in srgb,var(--cq-warning) 14%,var(--cq-surface));color:var(--cq-warning)}
.tag.captured{background:color-mix(in srgb,var(--cq-info) 12%,var(--cq-surface));color:var(--cq-info)}
.tag.entered{background:#ece6f7;color:#4b3582}
.ledger-total{padding:1.125rem;background:var(--board);color:var(--board-ink)}
.ledger-total .rl{color:var(--board-muted);font-size:.75rem;font-weight:800;letter-spacing:.14em}
.ledger-total strong{display:block;margin:.375rem 0;font-size:1.5rem;letter-spacing:-.01em}
.ledger-total p{color:var(--board-soft);font-size:var(--cq-type-sm);line-height:1.55}
.ledger-total.incomplete strong{color:var(--gold-2)}
.ledger-total .partial{margin-top:.625rem;padding:.625rem .75rem;border:1px dashed var(--board-muted);border-radius:var(--cq-radius-md);color:var(--board-ink)}
.ledger-total .partial b{font-variant-numeric:tabular-nums}
.ledger-controls{display:flex;flex-direction:column;gap:.75rem;padding:1.125rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.ledger-controls h3{font-size:1.0625rem}
.ledger-controls>label:not(.switch){font-size:var(--cq-type-sm);font-weight:750}
.switch{display:flex;align-items:flex-start;gap:.75rem;min-height:var(--cq-touch);padding:.25rem 0;line-height:1.4;cursor:pointer}
.switch input,.attest input{flex:none;width:1.375rem;height:1.375rem;margin:.0625rem 0 0;accent-color:var(--cq-accent)}
.switch small{display:block;color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
.ledger-controls select:disabled{opacity:.55}

/* ---------- lift: the chart's own notes ---------- */
.notes-section summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:1rem;min-height:var(--cq-touch);list-style:none;cursor:pointer}
.notes-section summary::-webkit-details-marker{display:none}
.notes-section summary .eyebrow{display:block;grid-column:1;margin-bottom:.375rem}
.notes-section summary h2{grid-column:1;font-size:clamp(1.5rem,2.6vw,2rem)}
.notes-section summary>.cq-icon{grid-column:2;grid-row:1/3;width:1.75rem;height:1.75rem;color:var(--cq-accent)}
.notes-section details[open] summary>.cq-icon,.yard-task [aria-expanded=true] .yard-chev .cq-icon{transform:rotate(180deg)}
.notes-section ol{margin:.875rem 0 0;padding:1.125rem 1.125rem 1.125rem 2.5rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface);font-size:var(--cq-type-sm);line-height:1.6}
.notes-section li{margin-bottom:.5rem}

/* ---------- the source page ---------- */
#pageDialog{width:min(61.25rem,96vw);max-width:none;max-height:92vh;max-height:92dvh;padding:0;border:0;border-radius:var(--cq-radius-lg);background:var(--cq-surface);color:var(--cq-text);box-shadow:var(--cq-shadow-lg)}
#pageDialog::backdrop{background:var(--board-scrim)}
#pageDialog .dialog-bar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem .5rem .5rem 1rem;border-bottom:1px solid var(--cq-border);background:var(--cq-surface)}
#pageDialog .dialog-bar button{display:inline-grid;place-items:center;min-width:var(--cq-touch);min-height:var(--cq-touch);border:1px solid var(--cq-border-control);border-radius:var(--cq-radius-md);background:var(--cq-surface);color:var(--cq-text);cursor:pointer}
#pageDialog .dialog-body{max-height:calc(92vh - 4rem);max-height:calc(92dvh - 4rem);padding:.875rem 1rem;overflow:auto}
#pageDialog .dialog-body p{margin-bottom:.75rem;font-size:var(--cq-type-sm)}
#pageDialog img{display:block;width:100%;height:auto;border:1px solid var(--cq-border)}

/* ---------- the boundary line ---------- */
.boundary{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--cq-border);color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.6}

/* ---------- genome (a staff page) ---------- */
.genome-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-bottom:1rem}
.genome-stat{padding:.875rem 1rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.genome-stat strong{display:block;font-size:1.875rem;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.genome-stat span{color:var(--cq-text-muted);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.genome-stat.buildable strong{color:var(--cq-success)}
.genome-stat.deferred strong{color:var(--cq-warning)}
.genome-stat.pruned strong{color:var(--cq-text-muted)}
.genome-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(19rem,.8fr);gap:1rem;align-items:start}
.genome-board{padding:1rem;border-radius:var(--cq-radius-lg);background:var(--board);color:var(--board-ink)}
.genome-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.75rem}
.genome-bar .ticker{flex:1;min-width:min(100%,13.75rem);min-height:1.125rem;color:var(--board-soft);font:.8125rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.genome-areas{display:grid;gap:.625rem}
.genome-area{display:grid;grid-template-columns:12.5rem minmax(0,1fr);gap:.875rem;align-items:start;padding:.5rem 0;border-top:1px solid var(--board-line)}
.genome-area:first-child{border-top:0}
.genome-area h3{color:var(--board-ink);font-size:.8125rem;font-weight:650;line-height:1.35}
.genome-area h3 span{display:block;margin-bottom:.125rem;color:var(--board-muted);font-size:.75rem;letter-spacing:.12em}
.genome-cells{display:flex;flex-wrap:wrap;gap:4px}
/* The dense map is for course builders: 18px cells, one Tab stop for all 432 (arrow keys move). */
.cell{position:relative;width:18px;height:18px;padding:0;border:0;border-radius:3px;background:#23404b;cursor:pointer}
.cell.R{border-radius:50%}
.cell.S{border-radius:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.cell[data-s=buildable]{background:#3f9e78}
.cell[data-s=deferred]{background:var(--owed);box-shadow:0 0 0 1px #ffd58a55,0 0 10px #d9a84d66}
.cell[data-s=pruned]{background:#4a5d63}
.cell[data-s=blocked]{background:#d04f2c}
.cell[data-s=pending]{background:#23404b}
.cell.crit::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#0d1e26aa}
.cell.hl{z-index:2;box-shadow:0 0 0 2px var(--board-ink);transform:scale(1.35)}
.cell.dim{opacity:.25}
.cell:focus-visible{outline:2px solid var(--board-ink);outline-offset:2px}
.genome-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.125rem;margin-top:.75rem;color:var(--board-muted);font-size:.8125rem}
.genome-legend i{display:inline-block;width:12px;height:12px;margin-right:.375rem;border-radius:2px;vertical-align:middle}
.genome-legend .key-buildable,.compare-strip .key-buildable{background:#3f9e78}
.genome-legend .key-deferred,.compare-strip .key-deferred{background:var(--owed)}
.genome-legend .key-pruned{background:#4a5d63}
.compare-strip .key-pruned{background:#8a9a97}
.genome-side{display:flex;flex-direction:column;gap:1rem}
.genome-detail{min-height:7.5rem;padding:1.125rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.genome-detail h3{margin:.375rem 0 .5rem;font-size:1.125rem}
.genome-detail p{margin:0 0 .625rem;font-size:var(--cq-type-sm);line-height:1.6}
.genome-detail ul{padding-left:1.125rem;font-size:var(--cq-type-sm);line-height:1.55}
.genome-detail code{padding:.125rem .375rem;border-radius:var(--cq-radius-sm);background:var(--cq-canvas);font-size:.8125rem;overflow-wrap:anywhere}
.genome-detail .field-note{color:var(--cq-text-muted);font-size:.8125rem}
.genome-detail .needs{margin-top:.875rem}
.leverage{overflow:hidden;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.leverage h3{padding:1rem 1.125rem .375rem;font-size:1rem}
.leverage>p{padding:0 1.125rem .625rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
.leverage ol{max-height:32.5rem;margin:0;padding:0;overflow:auto;list-style:none}
.leverage li button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.125rem .625rem;width:100%;min-height:3rem;padding:.6875rem 1.125rem;border:0;border-top:1px solid var(--cq-border);background:var(--cq-surface);color:var(--cq-text);font:inherit;text-align:left;cursor:pointer}
.leverage li button[aria-pressed=true]{background:color-mix(in srgb,var(--cq-warning) 10%,var(--cq-surface))}
.leverage li code{font-size:.8125rem;overflow-wrap:anywhere}
.leverage li b{color:var(--cq-warning);font-variant-numeric:tabular-nums}
.leverage li small{grid-column:1/3;color:var(--cq-text-muted);font-size:.8125rem}
.compare-section .section-head{margin-top:2.25rem}
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.75rem,1fr));gap:.625rem}
.compare-card{padding:.875rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.compare-card h3{margin-bottom:.5rem;font-size:1rem}
.compare-strip{display:flex;height:.875rem;border-radius:7px;overflow:hidden;background:var(--cq-canvas)}
.compare-strip i{display:block;height:100%}
.compare-card p{margin-top:.5rem;color:var(--cq-text-muted);font-size:.8125rem}

/* ---------- yard ---------- */
.yard-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,.55fr);gap:1rem;align-items:start}
.yard-list{display:flex;flex-direction:column;gap:.75rem}
.yard-task{overflow:hidden;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.yard-task>button.yard-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.875rem;width:100%;min-height:4rem;padding:1rem 1.125rem;border:0;background:transparent;color:var(--cq-text);font:inherit;text-align:left;cursor:pointer}
.yard-head .num{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:color-mix(in srgb,var(--cq-warning) 14%,var(--cq-surface));color:var(--cq-warning);font-size:var(--cq-type-sm);font-weight:800}
.yard-task[data-status=captured] .yard-head .num{background:color-mix(in srgb,var(--cq-info) 12%,var(--cq-surface));color:var(--cq-info)}
.yard-task[data-status=resolved] .yard-head .num{background:color-mix(in srgb,var(--cq-success) 12%,var(--cq-surface));color:var(--cq-success)}
.yard-head h3{font-size:1.0625rem}
.yard-head p{margin-top:.125rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.45}
.yard-chev{display:inline-flex;color:var(--cq-accent)}
.yard-body{padding:0 1.125rem 1.125rem;border-top:1px solid var(--cq-border)}
.yard-body .instruction{margin:.875rem 0;padding:.75rem .875rem;border-left:3px solid var(--owed);border-radius:0 var(--cq-radius-md) var(--cq-radius-md) 0;background:color-mix(in srgb,var(--cq-warning) 7%,var(--cq-surface));font-size:.9375rem;line-height:1.6}
.yard-body .instruction b{display:block;margin-bottom:.25rem;color:var(--cq-warning);font-size:.75rem;letter-spacing:.12em}
.yard-form{display:grid;gap:.875rem}
.yard-form label{display:block;margin-bottom:.375rem;font-size:var(--cq-type-sm);font-weight:750}
.yard-form textarea{min-height:5.25rem}
.pair{display:grid;grid-template-columns:minmax(0,1fr) 7rem;gap:.5rem}
.pair.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.yard-form label.photo-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;min-height:7.5rem;margin:0;padding:.875rem;border:2px dashed var(--cq-border-control);border-radius:var(--cq-radius-lg);background:var(--cq-canvas);color:var(--cq-accent);font-size:1rem;font-weight:700;text-align:center;cursor:pointer}
.photo-drop .cq-icon{width:1.75rem;height:1.75rem}
.photo-drop small{color:var(--cq-text-muted);font-size:var(--cq-type-sm);font-weight:500}
.photo-drop input{position:absolute;width:1px;height:1px;opacity:0}
.photo-drop:focus-within{outline:3px solid var(--cq-focus);outline-offset:3px}
.photo-strip{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.photo-strip figure{width:6rem;margin:0}
.photo-strip img{display:block;width:6rem;height:6rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-md);object-fit:cover}
.photo-strip figcaption{margin-top:.25rem;color:var(--cq-text-muted);font:.75rem/1.3 ui-monospace,monospace;overflow-wrap:anywhere}
.yard-form label.attest{display:flex;align-items:flex-start;gap:.75rem;min-height:var(--cq-touch);margin:0;padding:.75rem;border-radius:var(--cq-radius-md);background:var(--cq-canvas);font-size:.9375rem;font-weight:500;line-height:1.45;cursor:pointer}
.yard-actions{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:.75rem}
.yard-actions .cq-button{flex:1;min-width:9.5rem}
.yard-status{font-size:var(--cq-type-sm)}
.yard-status.error{color:var(--cq-danger);font-weight:700}
.yard-captured{margin-top:.875rem;padding:.75rem .875rem;border:1px solid color-mix(in srgb,var(--cq-info) 30%,var(--cq-surface));border-radius:var(--cq-radius-md);background:color-mix(in srgb,var(--cq-info) 6%,var(--cq-surface));font-size:.9375rem;line-height:1.55}
.yard-captured b{font-variant-numeric:tabular-nums}
.yard-side{position:sticky;top:5rem;display:flex;flex-direction:column;gap:.875rem}
.yard-card{padding:1.125rem;border:1px solid var(--cq-border);border-top:4px solid var(--cq-accent);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.yard-card h2{margin:.25rem 0 .5rem;font-size:1.25rem}
.yard-card p:not(.eyebrow){margin-bottom:.625rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.6}
.yard-card .cq-button{width:100%}
.yard-card .cq-button+.cq-button{margin-top:.5rem}
.yard-progress{display:flex;gap:4px;margin:.75rem 0}
.yard-progress i{flex:1;height:.5rem;border-radius:4px;background:var(--cq-border)}
.yard-progress i.captured{background:var(--cq-info)}
.yard-progress i.resolved{background:var(--cq-success)}
.review-steps{padding:1rem 1.125rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface);font-size:var(--cq-type-sm);line-height:1.6}
.review-steps ol{margin:.5rem 0 0;padding-left:1.25rem}

@media(hover:hover){
  .view-toggle button:not([aria-pressed=true]):hover{color:var(--board-ink)}
  .segmented button:not([aria-pressed=true]):not(:disabled):hover{background:color-mix(in srgb,var(--cq-accent) 8%,var(--cq-surface))}
  button.cite:hover,a.cite:hover,.leverage li button:hover,.yard-task>button.yard-head:hover{background:color-mix(in srgb,var(--cq-accent) 7%,var(--cq-surface))}
  .row-line a:hover,.yard-link:hover,.deferral-card a:hover{text-decoration-thickness:2px}
  .three-overlay button:hover{border-color:var(--gold)}
}
@media(prefers-reduced-motion:no-preference){
  .cell{transition:background .35s,transform .25s,box-shadow .25s}
}

@media(max-width:61.25rem){
  .field-page main{padding:0 1rem}
  .field-intro{grid-template-columns:minmax(0,1fr);gap:.75rem;padding:1.5rem 0 1rem}
  .lift-stage,.ledger-grid,.genome-layout,.yard-layout{grid-template-columns:minmax(0,1fr)}
  .section-head{flex-direction:column;align-items:flex-start;gap:.5rem}
  .genome-area{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .yard-side{position:static}
  .compare{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:38.75rem){
  .board-canvas{aspect-ratio:1/1}
  .lift-board{padding:.625rem}
  .view-toggle{display:flex;width:100%}
  .view-toggle button{flex:1;padding:.5rem}
  .genome-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 18px cells 6px apart: a 24px pitch, so a tap lands on the cell it means. */
  .genome-cells{gap:6px}
  .pair{grid-template-columns:minmax(0,1fr) 6rem}
  .deferral-board{padding:.75rem}
  .deferral-card{padding:1rem}
}
/* Narrower than a phone held upright (a page zoomed to 200%): each ledger
   amount goes under its line, so the number is never cut off and the line's
   words keep a column to wrap in. */
@media(max-width:22.4375rem){
  .ledger-line{grid-template-columns:1.5rem minmax(0,1fr);padding:.75rem}
  .ledger-line .amt{grid-column:2;text-align:left;white-space:normal}
  .ledger-line .meta{grid-column:2}
  .ledger-line details summary b{white-space:normal}
}
/* Narrower still (200% zoom): side-by-side choices would leave each a sliver
   under 44px, so they stack; the 3D view's two controls take a row each
   rather than lie over each other; the deferral keeps its words whole; the
   genome's counts take a row each. */
@media(max-width:17.5rem){
  .view-toggle,.segmented{display:flex;flex-direction:column;width:100%}
  .view-toggle button+button{border-left:0;border-top:1px solid var(--board-line)}
  .segmented button+button{border-left:0;border-top:1px solid var(--cq-border-control)}
  .three-overlay{flex-wrap:wrap;gap:.25rem}
  .three-overlay label,.three-overlay button{flex:1 1 100%}
  .deferral-board{padding:.5rem}
  .deferral-card{padding:.75rem}
  .deferral-card h2{font-size:1.25rem}
  .genome-stats{grid-template-columns:minmax(0,1fr)}
}
@media(forced-colors:active){
  .view-toggle button[aria-pressed=true],.segmented button[aria-pressed=true]{outline:3px solid Highlight;outline-offset:-3px}
}