/* ============================================================================
   THE BOARD'S LAYOUT AND COMPONENTS. Uses only the names in ui/theme.css.
   Each section has its own STRUCTURE, so the eye knows where it is:
     masthead   type and one heavy rule, no box
     tabs       underline tabs, the shape key beside them
     attention  the only section with its own ground; a gutter of shapes
     columns    cards on the page, a state shape on each
     path       a route: nodes on a line, not boxes
     history    a timeline: a rail with a shape per entry
     mine       a reading page: numbered next steps
     folds      disclosure rows
     agents     the machine room: mono, sunk, dashed
   ============================================================================ */

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
/* The floor under every control. A button (or select, or input) that no rule below styles used to keep
   the BROWSER's default light-grey face while taking the page's text colour. In dark mode that is light
   text on light grey: the words vanish (Alex, 2026-09-19: "there's no text on the button itself";
   measured 1.06:1 on "Done", "Pause this card", "Set"). Element selectors only, so every styled
   control still wins. The native controls follow the theme too (color-scheme). */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
button {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .3rem .75rem; cursor: pointer;
}
button:hover { border-color: var(--ink); }
button:disabled { opacity: .55; cursor: default; }
input, select, textarea { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); }
.wrap { max-width: var(--page-width); margin: 0 auto; padding: var(--s4) var(--s4) 5rem; }
.hide { display: none !important; }
.spacer { flex: 1 1 auto; }
code { font-family: var(--font-mono); font-size: .92em; }
a { color: var(--ink); text-underline-offset: 2px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible, .task:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
}
.hint { font-size: var(--text-sm); color: var(--graphite); }

/* a label: small uppercase, tracked — the one way this board names a section */
.label, .fold > summary, .col > h2, .pathhead h2, .mbox > h2, .histbar h2, .att-head h2,
.flagbox h3, .flagbox h4, .decided h4, .decided > h3, .panel label, .mind .lb, .locks .lbl, .signal .kind {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--label-track); text-transform: uppercase;
}

/* ---------- the state shapes ---------- */
.shape { display: inline-flex; width: var(--shape-size); height: var(--shape-size); flex: 0 0 auto; color: var(--graphite); }
.shape svg { display: block; width: 100%; height: 100%; overflow: visible; }
.shape[data-shape="open"]    { color: var(--graphite); }
.shape[data-shape="working"] { color: var(--ink); }
.shape[data-shape="ready"]   { color: var(--ink); }
.shape[data-shape="done"]    { color: var(--done); }
.shape[data-shape="decide"]  { color: var(--decide); }
.shape[data-shape="broken"]  { color: var(--broken); }
.shape[data-shape="info"]    { color: var(--info); }
.shape[data-shape="dropped"] { color: var(--faint); }
.shape .cut { stroke: var(--surface); }

/* ---------- buttons ---------- */
button.primary {
  background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink); border-radius: var(--radius);
  padding: .42rem .85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
button.primary:hover { filter: brightness(1.25); }
button.primary:disabled { opacity: .6; cursor: default; }
.linkish { background: none; border: 0; padding: 0; font-size: var(--text-sm); color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.linkish:hover { text-decoration-color: var(--ink); }
.quiet-btn, .panel .close {
  background: transparent; border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: .22rem .6rem; font-size: var(--text-sm); cursor: pointer; color: var(--ink);
}
.quiet-btn:hover, .panel .close:hover { border-color: var(--ink); }

/* ============================ MASTHEAD ============================ */
.masthead { border-bottom: var(--rule-heavy) solid var(--ink); padding-bottom: var(--s3); display: grid; gap: var(--s2); }
.mast-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.mast-top h1 { margin: 0; font-size: var(--text-xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.live { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--text-xs); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--faint); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--faint); }
.dot.on { background: var(--done); }
.me { display: flex; align-items: center; gap: .4rem; font-size: var(--text-sm); color: var(--graphite); }
.me input { width: 8rem; padding: .22rem .45rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); }

/* Now a sibling of the tabs, not part of the masthead's own grid (index.html, ui/mission.js:
   it folds to one line after the first read, so it no longer earns a place above the tabs). */
.mission { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); align-items: flex-start; margin: var(--s3) 0; }
.mission .what { flex: 1 1 30rem; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; }
.mission .project { display: none; }            /* the h1 already names the board */
.mission .pitch { font-size: var(--text-lg); line-height: 1.35; max-width: 62ch; overflow-wrap: anywhere; }
.mission .facts, .intentline { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; font-size: var(--text-sm); color: var(--graphite); max-width: 112ch; }
.mission .facts > span, .intentline > span { display: block; padding-left: 7.6rem; text-indent: -7.6rem; overflow-wrap: anywhere; }
.mission .facts > span > b, .intentline > span > b { display: inline-block; width: 7.6rem; text-indent: 0; font-weight: 600; color: var(--ink); }
.intentline .twchip { text-indent: 0; justify-self: start; }
.mission .tag { font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--decide); border: 1px solid currentColor; padding: 0 .25rem; margin-left: .3rem; }
.twchip { font-family: var(--font-mono); font-size: var(--text-xs); border: 1px dashed var(--rule); color: var(--graphite); padding: 0 .35rem; overflow-wrap: anywhere; }
.mission .side { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; margin-left: auto; }
.mission .rule { flex-basis: 100%; font-size: var(--text-xs); color: var(--faint); }
.mission .rule b { font-weight: 600; color: var(--graphite); }
.mission.empty .pitch { color: var(--decide); }
.countdown { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; line-height: 1.15; overflow-wrap: anywhere; }
.countdown b { display: block; font-size: 1.3rem; font-weight: 600; }
.countdown span { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); font-family: var(--font-ui); }
.countdown span + span { font-weight: 500; letter-spacing: .02em; text-transform: none; font-family: var(--font-mono); }
.countdown.soon b, .countdown.past b { color: var(--broken); }
.mission-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.mission-links a { font-size: var(--text-sm); border: 1px solid var(--hairline); padding: .1rem .45rem; border-radius: var(--radius); text-decoration: none; }
.mission-links a:hover { border-color: var(--ink); }

/* the fold (ui/mission.js): a quiet toggle, and the one-line collapsed state */
.mission-fold-row { flex-basis: 100%; display: flex; justify-content: flex-end; }
.mission-fold-toggle { font-size: var(--text-xs); color: var(--graphite); white-space: nowrap; }
.mission-fold-toggle:hover { color: var(--ink); }
.mission-line { flex: 1 1 100%; display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }
.mission-line-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-base); color: var(--ink); }

/* the counts: one line of numbers, not tiles */
.stats { display: flex; flex-wrap: wrap; gap: var(--s1) 0; align-items: baseline; font-size: var(--text-sm); color: var(--graphite); }
.stat { display: inline-flex; align-items: baseline; gap: .3rem; padding-right: var(--s4); margin-right: var(--s4); border-right: 1px solid var(--hairline); }
.stat:last-child { border-right: 0; }
.stat b { font-size: var(--text-lg); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .shape { align-self: center; width: .75rem; height: .75rem; }
.stat.you b { color: var(--decide); }

/* ============================ TABS ============================ */
.tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s5); border-bottom: 1px solid var(--hairline); margin-top: var(--s3); }
.viewswitch { display: flex; gap: var(--s1); }
.viewswitch button {
  background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  padding: .45rem .7rem .4rem; font-size: var(--text-base); font-weight: 600; color: var(--graphite); cursor: pointer;
}
.viewswitch button:hover { color: var(--ink); }
.viewswitch button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
/* the shape key: a small disclosure now, not a permanent row (index.html wraps it; ui/mission.js
   remembers the open/closed choice) */
.legend-fold { margin-left: auto; }
.legend-fold > summary { cursor: pointer; list-style: none; padding: .35rem .1rem; font-size: var(--text-xs); color: var(--graphite); display: flex; align-items: center; gap: .35rem; }
.legend-fold > summary::-webkit-details-marker { display: none; }
.legend-fold > summary::before { content: "›"; font-size: .95rem; line-height: 1; transition: transform .12s ease; }
.legend-fold[open] > summary::before { transform: rotate(90deg); }
.legend-fold > summary:hover { color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: .2rem var(--s3); padding: 0 0 .5rem; font-size: var(--text-xs); color: var(--graphite); }
.legend span.key { display: inline-flex; align-items: center; gap: .3rem; }
.legend .shape { width: .75rem; height: .75rem; }
@media (prefers-reduced-motion: reduce) { .legend-fold > summary::before { transition: none; } }

/* ============================ NEEDS A PERSON ============================ */
.attention { margin-top: var(--s4); background: var(--band); border: 1px solid var(--hairline); border-top: var(--rule-heavy) solid var(--ink); }
.att-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--hairline); }
.att-head h2 { margin: 0; color: var(--ink); }
.att-head .tally { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--text-sm); color: var(--graphite); }
.att-head .tally .shape { width: .75rem; height: .75rem; }
.att-row {
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; gap: .15rem var(--s3);
  align-items: start; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--hairline);
}
.att-row:last-of-type { border-bottom: 0; }
.att-row > .shape { justify-self: center; margin-top: .2rem; }
.att-main { min-width: 0; display: grid; gap: .12rem; }
.att-title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.att-sub { font-size: var(--text-sm); color: var(--graphite); overflow-wrap: anywhere; }
.att-sub b { font-weight: 600; color: var(--ink); }
.att-on { font-size: var(--text-xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-act { align-self: center; }
.att-act button {
  min-width: 5.5rem; background: var(--surface); color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius);
  padding: .26rem .7rem; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.att-act button:hover { background: var(--ink); color: var(--on-ink); }
.att-row[data-tier="broken"] { box-shadow: inset 3px 0 0 var(--broken); }
.att-row[data-tier="broken"] .att-act button { background: var(--broken); border-color: var(--broken); color: var(--on-ink); }
.att-row[data-tier="info"] { box-shadow: inset 3px 0 0 var(--info); }
.att-row[data-tier="info"] .att-act button { background: var(--info); border-color: var(--info); color: var(--on-ink); }
.att-row .clock { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.att-row .clock.soon { color: var(--broken); font-weight: 600; }
.att-more { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--hairline); padding: var(--s2) var(--s3) var(--s2) 2.1rem; font-size: var(--text-sm); color: var(--graphite); cursor: pointer; }
.att-more:hover { color: var(--ink); }
/* "For you" / "For anyone" grouping inside the Needs a person band (design review, 14 Sep). */
.att-sub-head { padding: var(--s2) var(--s3) 0; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
/* Project mode's neutral rows (attention.mjs's unconfirmed): folded, quiet, never a colour that
   reads as broken — silence is not evidence of anything here. */
.unconfirmed { border-bottom: 1px solid var(--hairline); }
.unconfirmed-list { display: flex; flex-direction: column; gap: .25rem; padding-bottom: var(--s3); }
.unconfirmed-row { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: .3rem .5rem; font-size: var(--text-sm); color: var(--graphite); cursor: pointer; }
.unconfirmed-row:hover { color: var(--ink); border-color: var(--ink); }
.att-row .decide { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.att-row .decide input { flex: 1 1 16rem; min-width: 0; padding: .3rem .5rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.att-row .decide button { background: var(--ink); color: var(--on-ink); border: 0; border-radius: var(--radius); padding: .25rem .7rem; font-weight: 600; cursor: pointer; }
.att-row .decide button.second { background: var(--surface); color: var(--ink); border: 1px solid var(--ink); }
@media (max-width: 640px) {
  .att-row { grid-template-columns: 2.1rem minmax(0, 1fr); }
  .att-act { grid-column: 2; justify-self: start; }
}

/* information: the plan changed, a handover waits — blue square, no alarm */
.changed { margin-top: var(--s3); display: grid; grid-template-columns: 2.1rem 1fr; gap: .1rem var(--s2); align-items: start; padding: var(--s2) var(--s3) var(--s2) 0; background: var(--info-soft); border-left: 3px solid var(--info); }
.changed > .shape { justify-self: center; margin-top: .2rem; }
.changed .t { font-weight: 600; }
.changed .d { font-size: var(--text-sm); color: var(--graphite); }
.changed a { grid-column: 2; font-size: var(--text-sm); }
.handovers { margin-top: var(--s3); border-left: 3px solid var(--info); background: var(--info-soft); }
.handovers > h2 { margin: 0; padding: var(--s2) var(--s3); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--info); }
.ho { padding: var(--s2) var(--s3); border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; }
.ho .from { font-weight: 600; }
.ho .line { grid-column: 1; font-size: var(--text-sm); color: var(--graphite); }
.ho .line b { color: var(--ink); font-weight: 600; }
.ho .waited { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); }
.ho button.take { align-self: start; background: var(--ink); color: var(--on-ink); border: 0; border-radius: var(--radius); padding: .25rem .7rem; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }

.locks { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.locks .lbl { color: var(--graphite); }
.lock { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--text-sm); border: 1px solid var(--hairline); background: var(--surface); padding: .15rem .5rem; border-radius: var(--radius); }
.lock.held { border-color: var(--info); color: var(--info); font-weight: 600; }
.lock.mine { border-color: var(--done); color: var(--done); }
.lock button { background: none; border: 0; font-size: var(--text-xs); cursor: pointer; color: inherit; text-decoration: underline; padding: 0; }
.lock .who { font-weight: 400; }

.signals { display: flex; flex-direction: column; gap: .4rem; margin-top: var(--s3); }
.signals:empty { display: none; }
.signal { border-left: 3px solid var(--info); background: var(--surface); padding: var(--s2) var(--s3); }
.signal.warn { border-left-color: var(--decide); }
.signal.ok { border-left-color: var(--done); }
.signal.alert { border-left-color: var(--broken); background: var(--broken-soft); }
.signal .kind { color: var(--graphite); }
.signal .text { font-weight: 600; }
.signal ul { margin: .2rem 0 0; padding-left: 1.1rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); }
.signal time { font-size: var(--text-xs); color: var(--graphite); }

/* ============================ COLUMNS ============================ */
.colwrap { margin-top: var(--s4); }
.colbar { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; justify-content: space-between; }
.filters { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.filters:empty { display: none; }
.filters .group { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.filters .sep { width: 1px; height: 1.1rem; background: var(--hairline); margin: 0 .35rem; }
.filters .label { color: var(--graphite); }
.filters button { background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px; padding: .14rem .6rem; font-size: var(--text-sm); cursor: pointer; color: var(--graphite); }
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.add-open { margin-left: auto; }
form.add { flex: 1 1 100%; display: grid; gap: .35rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { form.add { grid-template-columns: 2fr 1.6fr auto auto auto; align-items: center; } }
form.add input[type="text"], form.add select { width: 100%; padding: .34rem .5rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); font-size: var(--text-sm); }

.columns { display: grid; gap: var(--s4); margin-top: var(--s4); }
@media (min-width: 980px) { .columns { grid-template-columns: var(--cols, repeat(4, minmax(0, 1fr))); align-items: start; } }
.col { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.col > h2 { display: flex; align-items: center; gap: .45rem; margin: 0; padding-bottom: .35rem; border-bottom: var(--rule-heavy) solid var(--ink); color: var(--ink); }
.col > h2 .count { margin-left: auto; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; color: var(--graphite); }
.empty { font-size: var(--text-sm); color: var(--faint); border: 1px dashed var(--hairline); border-radius: var(--radius); padding: var(--s3); text-align: center; }

/* the card: [shape] [title · done · facts · actions] — the same pattern in every column */
.task {
  display: grid; grid-template-columns: 1.35rem minmax(0, 1fr); gap: 0 .35rem;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: .55rem .6rem .5rem .4rem; cursor: pointer;
}
.task:hover { border-color: var(--rule); }
.task > .shape { justify-self: center; margin-top: .15rem; }
.task .tbody { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.task .title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.task .done { font-size: var(--text-sm); color: var(--graphite); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task .done .chip { margin-left: .3rem; }
.task.broken { box-shadow: inset 3px 0 0 var(--broken); }
.task .meta { display: flex; flex-wrap: wrap; gap: .15rem .6rem; align-items: center; font-size: var(--text-xs); color: var(--graphite); }
.chip { font-size: var(--text-xs); color: var(--graphite); }
.chip.unclaimed { color: var(--faint); }
.chip.mono { font-family: var(--font-mono); }
.kindchip { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--text-xs); color: var(--graphite); }
.kindchip .glyph { width: .8rem; height: .8rem; }

/* kinds of work: a glyph and a word, in graphite. Colour is kept for state. */
.kind { --k: var(--graphite); }
.glyph { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--k, var(--graphite)); }
.glyph svg { display: block; width: 100%; height: 100%; }
.task .idrow { display: flex; align-items: flex-start; gap: .4rem; }
.task .idrow .glyph { display: none; }          /* the kind shows once, in the facts line */

.ticks { display: flex; flex-wrap: wrap; gap: .3rem; }
.tick { font-family: var(--font-mono); font-size: .66rem; padding: .02rem .3rem; border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--graphite); background: none; cursor: pointer; }
.tick.on { border-color: var(--done); color: var(--done); font-weight: 600; }
.tick:disabled { cursor: default; }
.tick.waits { border-color: var(--rule); color: var(--ink); }

/* actions are always there (a usability walk, 2026-09-18, found no cue they existed at all)
   but quiet until you point at or focus the card, when they go to full contrast — never a
   layout jump either way, since nothing here changes height. */
.row-actions { display: flex; flex-wrap: wrap; gap: .25rem; padding-top: .2rem; opacity: .6; transition: opacity .12s ease; }
.task:hover .row-actions, .task:focus-within .row-actions { opacity: 1; }
@media (hover: none) { .row-actions { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .row-actions { transition: none; } }
.row-actions button { background: transparent; border: 1px solid var(--hairline); border-radius: var(--radius); padding: .1rem .4rem; font-size: var(--text-xs); cursor: pointer; color: var(--graphite); }
.task:hover .row-actions button, .task:focus-within .row-actions button, .row-actions button:hover, .row-actions button:focus-visible { color: var(--ink); }
.row-actions button:hover { border-color: var(--ink); }
.row-actions .grow { flex: 1 1 auto; }
.row-actions button.danger { color: var(--faint); }
.task:hover .row-actions button.danger, .task:focus-within .row-actions button.danger { color: var(--graphite); }
/* Answer, when a card asks a question, is the row's main action — ink-filled like
   button.primary elsewhere, not the quiet outline every other row button gets. Listed
   again against the row's own hover/focus rule above (line 292): that rule sets text
   colour off the TASK's hover, not the button's own, so it fires whenever the row is
   hovered at all and would otherwise leave "Answer" ink-on-ink and unreadable. */
.row-actions button.primary,
.task:hover .row-actions button.primary, .task:focus-within .row-actions button.primary,
.row-actions button.primary:hover, .row-actions button.primary:focus-visible {
  background: var(--ink); color: var(--on-ink); border-color: var(--ink);
}
.row-actions button.primary:hover { filter: brightness(1.25); }

/* a coarse pointer (a finger, not a mouse) needs a real target: 40px tall, spaced so two
   neighbouring buttons are never hit together. These rows repeat 30+ times on a page, so the
   visual weight stays as it was — only the hit area grows. */
@media (pointer: coarse) {
  .row-actions { gap: .5rem; }
  .row-actions button { min-height: 40px; padding: .3rem .75rem; }
  .ticks { gap: .5rem; }
  .tick:not(:disabled) { min-height: 40px; padding: .3rem .65rem; }
  .att-act button { min-height: 40px; }
  .att-row .decide { gap: .5rem; }
  .att-row .decide button { min-height: 40px; }
}

/* ============================ FOLDS ============================ */
.folds { margin-top: var(--s6); display: grid; }
.fold { border-top: 1px solid var(--hairline); }
.fold:last-child { border-bottom: 1px solid var(--hairline); }
.fold > summary { cursor: pointer; padding: var(--s3) 0; color: var(--graphite); list-style: none; display: flex; align-items: center; gap: .5rem; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "›"; font-size: 1rem; line-height: 1; transition: transform .12s ease; }
.fold[open] > summary::before { transform: rotate(90deg); }
.fold > summary:hover { color: var(--ink); }
.dropped-list { display: flex; flex-direction: column; gap: .25rem; padding-bottom: var(--s3); }
.dropped { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; padding: .3rem .5rem; background: var(--surface); border: 1px dashed var(--hairline); font-size: var(--text-sm); color: var(--graphite); }
.dropped .title { text-decoration: line-through; }
.dropped .grow { flex: 1 1 auto; }
.dropped button { background: transparent; border: 1px solid var(--hairline); border-radius: var(--radius); padding: .12rem .4rem; font-size: var(--text-xs); cursor: pointer; color: var(--ink); }
.brief-body { padding: 0 0 var(--s4); display: grid; gap: var(--s3); }
@media (min-width: 900px) { .brief-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ref { border: 1px solid var(--hairline); background: var(--surface); padding: .6rem .7rem; min-width: 0; border-radius: var(--radius); }
.ref h3 { margin: 0 0 .35rem; font-size: var(--text-sm); font-weight: 700; overflow-wrap: anywhere; }
.ref pre { margin: 0; font-family: var(--font-mono); font-size: .78rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 18rem; overflow-y: auto; }
.ref .src { margin: .35rem 0 0; font-size: var(--text-xs); color: var(--graphite); overflow-wrap: anywhere; }
.brief-foot { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--graphite); display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.feed-list { padding-bottom: var(--s3); display: flex; flex-direction: column; max-height: 22rem; overflow-y: auto; }
.ev { display: grid; grid-template-columns: 4.5rem 9rem 1fr; gap: .5rem; font-size: var(--text-sm); padding: .22rem 0; border-bottom: 1px solid var(--hairline); }
.ev time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); font-variant-numeric: tabular-nums; }
.ev .who { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .ev { grid-template-columns: 4rem 1fr; } .ev .who { grid-column: 2; } }

/* the machine room */
.agents .handoff { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); background: var(--sunk); border: 1px dashed var(--rule); border-radius: var(--radius); display: grid; gap: var(--s2); }
.handoff p { margin: 0; font-size: var(--text-sm); color: var(--graphite); }
.handoff pre { margin: 0; padding: .6rem .7rem; background: var(--surface); border: 1px solid var(--hairline); font-family: var(--font-mono); font-size: .76rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 12rem; overflow-y: auto; }
.handoff-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.handoff-actions a { font-size: var(--text-sm); }
.handoff .help { font-size: var(--text-xs); color: var(--graphite); display: grid; gap: .25rem; overflow-wrap: anywhere; }

/* ============================ PATH: a route ============================ */
.pathwrap { margin-top: var(--s4); display: grid; gap: var(--s5); }
.pathhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: var(--s3); }
.pathhead h2 { margin: 0; }
.pathhead .sub { font-size: var(--text-sm); color: var(--graphite); }
.pathhead .add { margin-left: auto; background: none; border: 0; color: var(--ink); font-size: var(--text-sm); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.steps { display: grid; gap: var(--s3); grid-template-columns: 1fr; position: relative; }
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s2); }
  .steps::before { content: ""; position: absolute; left: .5rem; right: .5rem; top: .6rem; height: 2px; background: var(--rule); }
}
.stepc { position: relative; display: flex; flex-direction: column; gap: .2rem; min-width: 0; cursor: pointer; padding: 0 .4rem .5rem 0; }
.stepc .node { display: flex; align-items: center; gap: 0; }
.stepc .node .shape { width: 1.2rem; height: 1.2rem; background: var(--paper); border-radius: 50%; box-shadow: 0 0 0 3px var(--paper); }
.stepc .idx { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); background: var(--paper); padding: 0 .35rem 0 .45rem; position: relative; }
.stepc .head { display: block; }
.stepc .head .glyph { display: none; }
.stepc .ti { font-weight: 700; font-size: var(--text-base); line-height: 1.25; }
.stepc:hover .ti { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.stepc .stt { font-size: var(--text-xs); color: var(--graphite); }
.stepc[data-st="runs"] .stt { color: var(--done); font-weight: 600; }
.stepc[data-st="seam"] .stt { color: var(--broken); font-weight: 700; }
.stepc .ow { font-size: var(--text-xs); color: var(--graphite); }
.stepc .ow.none { color: var(--faint); }
.pips { display: flex; gap: 2px; height: 3px; max-width: 8rem; margin-top: .15rem; }
.pips i { flex: 1; background: var(--hairline); }
.pips i.on { background: var(--ink); }
.stepc[data-st="runs"] .pips i.on { background: var(--done); }
.stepc[data-st="seam"] .pips i.on { background: var(--broken); }
.seambar { display: none; }                       /* the "needs a person" band already says it */
.pathempty { font-size: var(--text-sm); color: var(--graphite); font-style: italic; padding: .5rem 0; }

/* ============================ HISTORY: a timeline ============================ */
.histwrap { margin-top: var(--s4); display: grid; gap: var(--s3); }
.histbar { display: grid; gap: var(--s2); border: 1px solid var(--hairline); background: var(--surface); padding: var(--s3); border-radius: var(--radius); }
.histbar h2 { margin: 0; color: var(--graphite); }
.histform { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: stretch; }
.histform select, .histform input { padding: .32rem .5rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--paper); }
.histform input { flex: 1 1 18rem; min-width: 0; }
.histbar .hint { margin: 0; }
.histlinks { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: var(--text-sm); }
.histfilters { display: flex; flex-wrap: wrap; gap: .3rem; }
.histfilters button { font-size: var(--text-sm); padding: .14rem .6rem; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--graphite); cursor: pointer; }
.histfilters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.histhour { position: relative; padding-left: 0; }
.histhour > h3 { margin: var(--s2) 0 var(--s1); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; color: var(--graphite); padding-left: 5.4rem; }
.hrow { position: relative; display: grid; grid-template-columns: 3.6rem 1.8rem 1fr; gap: 0 .2rem; padding: .32rem 0; align-items: start; }
.hrow::before { content: ""; position: absolute; left: 4.5rem; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.hrow time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); font-variant-numeric: tabular-nums; padding-top: .12rem; }
.hrow > .shape { justify-self: center; position: relative; margin-top: .1rem; width: .85rem; height: .85rem; background: var(--paper); box-shadow: 0 0 0 3px var(--paper); border-radius: 50%; }
.hkind { font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--graphite); margin-right: .4rem; }
.htext { min-width: 0; overflow-wrap: anywhere; }
.htext .who { font-weight: 600; }
.htext .body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.htext.open .body { -webkit-line-clamp: unset; display: block; }
.htext .why { display: block; margin-top: .1rem; font-size: var(--text-sm); color: var(--graphite); }
.htext .noreason { margin-left: .4rem; font-size: .62rem; letter-spacing: .04em; color: var(--faint); border: 1px dashed var(--hairline); padding: 0 .3rem; white-space: nowrap; }
.htext .path { font-family: var(--font-mono); font-size: .66rem; color: var(--graphite); margin-left: .3rem; }
@media (max-width: 560px) {
  .hrow { grid-template-columns: 3rem 1.6rem 1fr; }
  .hrow::before { left: 3.8rem; }
  .histhour > h3 { padding-left: 4.6rem; }
}

/* ============================ MINE: a reading page ============================ */
.minewrap { margin-top: var(--s4); display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .minewrap { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.mcol { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.mbox { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--s3) var(--s4); }
.mbox > h2 { margin: 0 0 var(--s2); color: var(--graphite); }
.mnext { border-top: var(--rule-heavy) solid var(--ink); }
.mnext .do { font-size: var(--text-base); font-weight: 700; line-height: 1.3; }
.opt { display: grid; grid-template-columns: 1.8rem 1fr; gap: .1rem .55rem; padding: var(--s2) 0; border-top: 1px solid var(--hairline); align-items: start; }
.opt:first-of-type { border-top: 0; padding-top: 0; }
.opt.lead .do { font-size: var(--text-lg); }
.onum { display: flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 1px solid var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; }
.opt.lead .onum { background: var(--ink); color: var(--on-ink); }
.opt .tone { display: inline-flex; align-items: center; gap: .3rem; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); margin-bottom: .1rem; }
.opt .tone .glyph { display: none; }
.opt .tone .shape { width: .7rem; height: .7rem; }
.opt[data-tone="broken"] .tone { color: var(--broken); }
.opt[data-tone="ask"] .tone { color: var(--decide); }
.opt[data-tone="go"] .tone { color: var(--done); }
.opt .why, .mnext .why { font-size: var(--text-sm); color: var(--graphite); margin-top: .15rem; }
.opt .go { margin-top: .3rem; }
.mstep { border-top: 1px solid var(--hairline); padding-top: var(--s2); margin-top: var(--s2); }
.mstep:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.mstep .t { font-weight: 700; cursor: pointer; }
.mstep .t:hover { text-decoration: underline; }
.mstep .meta { font-size: var(--text-xs); color: var(--graphite); }
.mstep ul { margin: .3rem 0 0; padding-left: 1.05rem; font-size: var(--text-sm); color: var(--graphite); }
.mstep li.seam { color: var(--broken); font-weight: 600; }
.mind { font-size: var(--text-sm); }
.mind .row { padding: .4rem 0; border-bottom: 1px solid var(--hairline); }
.mind .row:last-child { border-bottom: 0; }
.mind .lb { color: var(--graphite); }
.mind .row.urgent .lb { color: var(--broken); }
.mind .row.urgent .tx { font-weight: 600; }
.mind pre { margin: .2rem 0 0; font-family: var(--font-mono); font-size: .76rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9rem; overflow-y: auto; color: var(--graphite); }
.mempty { font-size: var(--text-sm); color: var(--graphite); font-style: italic; }
.mtask { display: grid; grid-template-columns: 1.3rem 1fr; gap: .1rem .4rem; align-items: start; padding: .35rem 0; border-bottom: 1px solid var(--hairline); font-size: var(--text-sm); cursor: pointer; }
.mtask:last-child { border-bottom: 0; }
.mtask > .shape { margin-top: .15rem; width: .85rem; height: .85rem; }
.mtask:hover span:last-child { text-decoration: underline; text-decoration-color: var(--rule); }
.mtask .st { display: none; }

/* ============================ SIDE PANEL ============================ */
.panel-bg { position: fixed; inset: 0; background: var(--scrim); display: flex; justify-content: flex-end; z-index: 20; }
.panel {
  background: var(--paper); width: min(var(--panel-width), 100%); height: 100%; overflow-y: auto;
  padding: var(--s4) var(--s5) 4rem; box-shadow: var(--shadow-panel); display: flex; flex-direction: column; gap: var(--s3);
}
.panel .head { display: flex; gap: .6rem; align-items: flex-start; padding-bottom: var(--s2); border-bottom: var(--rule-heavy) solid var(--ink); position: sticky; top: calc(-1 * var(--s4)); background: var(--paper); z-index: 1; padding-top: var(--s4); margin-top: calc(-1 * var(--s4)); }
.panel h2 { font-size: var(--text-lg); margin: 0; line-height: 1.3; }
.panel h3 { font-size: var(--text-base); }
.panel label { display: block; color: var(--graphite); margin-bottom: .25rem; }
.panel input[type="text"], .panel input[type="url"], .panel input[type="number"], .panel input[type="datetime-local"], .panel input:not([type]), .panel textarea, .panel select {
  width: 100%; padding: .4rem .5rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); font-size: var(--text-base);
}
.panel textarea { min-height: 4.5rem; resize: vertical; font-family: inherit; }
.panel .field { display: flex; flex-direction: column; }
.panel .two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.comments { display: flex; flex-direction: column; gap: .4rem; }
.comment { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: .4rem .55rem; font-size: var(--text-sm); }
.comment .by { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); }
.cardact { display: grid; grid-template-columns: 1fr auto; gap: .3rem .5rem; align-items: center; border-top: 1px solid var(--hairline); padding-top: .45rem; font-size: var(--text-sm); }
.cardact .note { grid-column: 1 / -1; }
.twrow { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: baseline; font-size: var(--text-sm); border-top: 1px solid var(--hairline); padding-top: .4rem; }
.twrow .st { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--graphite); }

/* the task editor folds away when the card is asking a question: the decision comes first */
.editor { border-top: 1px solid var(--hairline); }
.editor > summary { cursor: pointer; padding: var(--s3) 0; list-style: none; display: flex; align-items: center; gap: .5rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--graphite); }
.editor > summary::-webkit-details-marker { display: none; }
.editor > summary::before { content: "›"; font-size: 1rem; transition: transform .12s ease; }
.editor[open] > summary::before { transform: rotate(90deg); }
.editor-body { display: flex; flex-direction: column; gap: var(--s3); padding-bottom: var(--s3); }

/* the question on a card: amber diamond, the brief in reading order */
.delivery { display: flex; flex-direction: column; gap: var(--s1); border-top: 1px solid var(--hairline); padding-top: var(--s2); }
.delivery-row { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); }
.flagbox { background: var(--surface); border: 1px solid var(--hairline); border-top: 3px solid var(--decide); border-radius: var(--radius); padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.flagbox h3 { margin: 0; color: var(--decide); display: flex; align-items: center; gap: .45rem; }
.flagbox h3 .shape { width: .85rem; height: .85rem; }
.flagbox.ask h3 { color: var(--graphite); }
.flagbox.ask { border-top-color: var(--rule); }
.flagbox .askline { font-size: var(--text-lg); font-weight: 700; line-height: 1.3; }
/* The project's one-line concept, above the question (ui/attention.js's missionConceptLine): the
   big picture, plain and quiet, never louder than the ask below it. */
.dconcept { font-size: var(--text-sm); color: var(--graphite); margin: 0; }
.dbrief { display: grid; gap: var(--s3); }
.flagbox h4, .decided h4 { margin: .2rem 0 0; color: var(--graphite); }
.dbrief p { margin: .15rem 0 0; line-height: 1.55; max-width: 68ch; }
.devidence { display: grid; gap: .45rem; margin-top: .25rem; }
.devidence blockquote { margin: 0; padding: .45rem .7rem; border-left: 3px solid var(--rule); background: var(--paper); font-style: italic; white-space: pre-wrap; overflow-wrap: anywhere; }
.devidence cite { display: block; font-style: normal; font-size: var(--text-xs); color: var(--graphite); margin-top: .3rem; }
/* All principal choices visible together (GUI guidance, dashboard evaluator handoff 2026-09-22):
   side by side on room enough for two, stacked on a phone — auto-fit collapses to one column on
   its own once the row is narrower than one card, so no separate phone media query is needed. */
.dopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .45rem; align-items: stretch; }
.dopt {
  text-align: left; display: grid; gap: .15rem; padding: .6rem .8rem; min-height: 44px; align-content: center;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-weight: 600; border-radius: var(--radius);
}
/* One press decides (ui/attention.js decideControl), so an option is a BUTTON, not a radio: no
   ring to fill, nothing that reads as "select, then confirm". */
.dopt:hover, .dopt:focus-visible { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.dopt .l { font-weight: 600; }
.dopt .ch { font-size: var(--text-sm); font-weight: 400; color: var(--graphite); }
.dopt .rec, .decided .rec { margin-left: .45rem; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); padding: 0 .3rem; vertical-align: .12em; white-space: nowrap; }
/* The recommended option: one filled button among outline ones (GUI guidance: "one strong next
   action"), the same filled look button.primary already carries elsewhere on the page. */
.dopt.recommended { background: var(--ink); color: var(--on-ink); border-color: var(--ink); box-shadow: none; }
.dopt.recommended .ch { color: var(--on-ink); opacity: .82; }
.dopt.recommended .rec { color: var(--on-ink); border-color: var(--on-ink); }
.dopt.recommended:hover, .dopt.recommended:focus-visible { filter: brightness(1.2); box-shadow: none; }
.drec { font-size: var(--text-sm); border-left: 3px solid var(--ink); padding: .15rem 0 .15rem .6rem; margin: 0; }
.dbrief ul { margin: .15rem 0 0; padding-left: 1.1rem; font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.nobrief { font-size: var(--text-sm); color: var(--graphite); border: 1px dashed var(--decide); padding: .45rem .6rem; margin: 0; }
.flagbox .answer-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.decided { border: 1px solid var(--hairline); border-top: 3px solid var(--done); background: var(--surface); border-radius: var(--radius); padding: var(--s3) var(--s4); display: grid; gap: .45rem; }
.decided > h3 { margin: 0; color: var(--done); }
.decided .one { display: grid; gap: .2rem; border-top: 1px solid var(--hairline); padding-top: .45rem; }
.decided .one:first-of-type { border-top: 0; padding-top: 0; }
.decided .q { font-size: var(--text-sm); color: var(--graphite); }
.decided .pick { font-weight: 600; }
.decided details { font-size: var(--text-sm); }
.decided summary { cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); }

/* ============================ TOAST ============================ */
#toast {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translate(-50%, 1.5rem);
  background: var(--ink); color: var(--on-ink); padding: .55rem .9rem; border-radius: var(--radius);
  font-size: var(--text-sm); font-weight: 600; max-width: min(34rem, 92vw); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 30;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast button { margin-left: .7rem; background: transparent; border: 1px solid var(--on-ink); color: var(--on-ink); border-radius: 2px; padding: .1rem .45rem; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } .fold > summary::before, .editor > summary::before { transition: none; } }

/* the task's "give this to an agent" box inside the panel: the machine room again */
.panel .handoff { margin: 0; padding: var(--s3); background: var(--sunk); border: 1px dashed var(--rule); border-radius: var(--radius); display: grid; gap: var(--s2); }
.panel .handoff h2 { margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--graphite); }

/* a long column shows its first cards; the rest are one click away */
.col-more { background: none; border: 1px dashed var(--rule); border-radius: var(--radius); padding: .45rem; font-size: var(--text-sm); color: var(--graphite); cursor: pointer; }
.col-more:hover { color: var(--ink); border-color: var(--ink); }

/* ============================ LANES ============================ */
.lanebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); }
.lanebar .hint { margin: 0; }
.pathblock.lane { border-top: var(--rule-heavy) solid var(--ink); padding-top: var(--s3); }
.pathblock.lane .pathhead { margin-bottom: var(--s1); }
.pathblock.lane .pathhead h2 { font-size: var(--text-sm); }
.lanetools { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.lanetools .add { margin-left: 0; }
.lanefacts { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem var(--s4); font-size: var(--text-sm); color: var(--graphite); margin-bottom: var(--s3); }
.lanefacts .holder { font-weight: 600; color: var(--ink); }
.lanefacts .holder.none { color: var(--decide); }
.lanefacts .laneq { display: inline-flex; align-items: center; gap: .3rem; color: var(--decide); }
.lanefacts .laneq .shape { width: .7rem; height: .7rem; }
.lanecards { margin-top: var(--s3); max-width: 52rem; display: grid; }
.lanecards .linkish { justify-self: start; margin-top: .3rem; }
.laneloose { margin-top: var(--s4); }
.chip.lanechip { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0 .3rem; }

/* "add a step", inline (ui/views.js's addStepRow) instead of a raw prompt() */
.addstep-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: var(--s3); }
.addstep-row input { flex: 1 1 16rem; min-width: 0; padding: .3rem .5rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); font-size: var(--text-sm); }

/* ============================ WELCOME ============================
   The first-ninety-seconds screen (Alex, 2026-09-14): a centred dialog over the page, shown once
   to anyone who opens the link unverified. Skippable, never a gate — see ui/welcome.js. */
.welcome-bg {
  position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center;
  justify-content: center; padding: var(--s4); z-index: 25; overflow-y: auto;
}
.welcome {
  background: var(--paper); color: var(--ink); width: min(30rem, 100%); max-height: calc(100vh - 2 * var(--s4));
  overflow-y: auto; border-radius: var(--radius); box-shadow: var(--shadow-panel);
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3);
}
.welcome-label { color: var(--graphite); }
.welcome h2 { margin: 0; font-size: var(--text-xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.welcome-pitch { margin: 0; color: var(--graphite); font-size: var(--text-base); }
.welcome-how { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; font-size: var(--text-sm); }
.welcome-how li { padding-left: 1rem; position: relative; line-height: 1.45; }
.welcome-how li::before { content: "—"; position: absolute; left: 0; color: var(--rule); }
.welcome-form { display: grid; gap: var(--s3); border-top: 1px solid var(--hairline); padding-top: var(--s3); }
.welcome-form .field { display: flex; flex-direction: column; gap: .25rem; font-size: var(--text-sm); }
.welcome-form .field span { color: var(--graphite); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--label-track); text-transform: uppercase; }
.welcome-form input {
  padding: .45rem .6rem; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); font-size: var(--text-base); font: inherit; color: inherit;
}
.welcome-contact { border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--s3); margin: 0; display: grid; gap: var(--s2); }
.welcome-contact legend { padding: 0 .3rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--graphite); }
.welcome-contact-note { margin: 0; }
.welcome-error { margin: 0; color: var(--broken); font-size: var(--text-sm); }
.welcome-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.welcome-go { align-self: flex-start; }
@media (max-width: 30rem) {
  .welcome { padding: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-bg, .welcome { transition: none; }
}

/* ============================ NARROW SCREEN: what needs you comes first ============================
   A usability walk (2026-09-18) measured a phone at 375x812: the first "Needs a person" decision
   sat at about y=705 of 812. `.wrap`'s children become one flex column here and get reordered —
   .mission already sits after the tabs in the markup for every width (see index.html), so this
   query only has to pull the attention bands ahead of the tabs; everything else keeps the order
   it already had. Desktop is untouched: no `order` here applies above this width. */
@media (max-width: 640px) {
  .wrap { display: flex; flex-direction: column; }
  .masthead { order: 1; }
  #needs-person, #team-attention, #unconfirmed, #changed, #handovers, #locks, #signals { order: 2; }
  .tabs { order: 3; }
  #mission { order: 4; }
  #minewrap, #pathwrap, #histwrap, #matwrap, #colwrap, .folds { order: 5; }

  /* Header links wrap as one compact group under the title, instead of each fighting the
     spacer for its own line: the spacer forces a break right after the title/live dot, then
     everything after it wraps together. */
  .mast-top .spacer { flex: 1 0 100%; height: 0; }

  /* The fact/intent lines' 7.6rem hanging indent (a label column wide enough for "Judged on")
     eats too much of a narrow line before the value even starts. */
  .mission .facts > span, .intentline > span { padding-left: 4.4rem; text-indent: -4.4rem; }
  .mission .facts > span > b, .intentline > span > b { width: 4.4rem; }
}

/* ---------- the Materials view and a card's materials (ui/materials.js) ---------- */
.mat-group { display: grid; gap: var(--s2); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.mat-group h3 { margin: 0; display: flex; gap: var(--s2); align-items: center; font-size: var(--text-base); }
.mat-item { display: grid; gap: var(--s1); padding: var(--s2) 0; border-bottom: 1px solid var(--hairline); }
.mat-top { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; }
.mat-top > a { font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
.mat-meta { font-size: var(--text-xs); color: var(--graphite); }
.mat-remove { margin-left: auto; }
.mat-files > summary { font-size: var(--text-xs); color: var(--graphite); cursor: pointer; }
.mat-files ul { margin: var(--s1) 0 0; padding-left: var(--s4); font-family: var(--font-mono); font-size: var(--text-xs); }
.mat-card { display: grid; }