/* First Read: the page's stylesheet. The visual language follows Kai's Lotwise (r1-1-massing): a compact
   tool in IBM Plex Sans and Plex Mono on a cool grey page, white panels with a 1px line and a whisper of shadow,
   slate ink, 4 to 6px corners, dark-ink buttons that lift on hover and sink on press, a status strip with a dot,
   numbered-badge step panels, status marks as small circles with a glyph, pills on tinted washes, a mono
   double-rule stamp, blue for links and focus, amber for what is pending, drawings on white paper. */

/* ------------------------------------------------------------------ tokens: the brand's (brand.css), named for this page.
   Light first; dark under the OS setting. The chrome (top bar, step bar) is the brand's ink in both themes, so the tool
   continues the site's top bar; the page itself is the paper the memo is read on. */
:root {
  --ink: var(--b-slate); --muted: #5f6672; --page: var(--b-page); --panel: var(--b-paper); --line: #e1e5ea; --field: #ffffff; --group: #e9eef4;
  --amber: var(--b-amber); --amber-ink: #14181d; --blue: var(--b-signal-deep); --signal: var(--b-signal); --red: #c81e1e; --teal: #2a9d8f; --ok: #2f7d4a; --warn: #d9a520;
  --on-signal: #ffffff; --on-warn: #1f2933;
  /* the chrome: the ink band the site and the tool share */
  --chrome: var(--b-ink); --chrome-2: #1f262f; --chrome-line: rgba(255, 255, 255, .12); --on-chrome: #e8ecf1; --on-chrome-muted: #aab3bf;
  /* the six statuses, from the brand: a mark colour, a text colour that clears 4.5:1 on its wash, and the wash */
  --s-pass: var(--st-pass);               --s-pass-text: var(--st-pass-text);               --s-pass-wash: var(--st-pass-wash);
  --s-conditional: var(--st-conditional); --s-conditional-text: var(--st-conditional-text); --s-conditional-wash: var(--st-conditional-wash);
  --s-fail: var(--st-fail);               --s-fail-text: var(--st-fail-text);               --s-fail-wash: var(--st-fail-wash);
  --s-uncertain: var(--st-uncertain);     --s-uncertain-text: var(--st-uncertain-text);     --s-uncertain-wash: var(--st-uncertain-wash);
  --s-na: var(--st-na);                   --s-na-text: var(--st-na-text);                   --s-na-wash: var(--st-na-wash);
  --s-info: var(--st-info);               --s-info-text: var(--st-info-text);               --s-info-wash: var(--st-info-wash);
  --status-info: var(--st-info-wash); --status-busy: var(--st-uncertain-wash); --status-ok: var(--st-pass-wash); --status-error: var(--st-fail-wash);
  /* the drawing colours come from brand.css (--c-*): the same in both themes, the drawings sit on white paper */
  --shadow: 0 1px 2px rgba(20, 30, 40, .06);
  --focus: 2px solid var(--blue);
  --topbar-h: 52px;
  --strip-h: 36px;
  --bars-h: 134px;   /* the three sticky bars together, for scroll margins */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #e6ebf1; --muted: #9aa4b1; --page: #14181d; --panel: #1c2128; --line: #2c343d; --field: #12161b; --group: #232c37;
    --amber: var(--b-amber-night); --amber-ink: #14181d; --blue: #5aa2ea; --signal: var(--b-signal-night); --red: #e0554f; --teal: #3fb3a4; --ok: #4cae6d; --warn: #e0b43a;
    --on-signal: #14181d; --on-warn: #14181d;
    --chrome: #0e1116; --chrome-2: #161b22;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  }
}
/* the browser's own surfaces in the palette */
::selection { background: color-mix(in srgb, var(--blue) 28%, transparent); }
html { accent-color: var(--ink); }
input, textarea { caret-color: var(--blue); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible, [role="radio"]:focus-visible { outline: var(--focus); outline-offset: 1px; }
[tabindex="-1"]:focus { outline: none; }
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 40; padding: 6px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }
.skip:focus { top: 8px; }

html, body { margin: 0; }
body { background: var(--page); color: var(--ink); font: 13px/1.45 var(--sans); font-variant-numeric: tabular-nums; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
code, .mono { font-family: var(--mono); font-size: .92em; }
button, input, select, textarea { font: inherit; color: inherit; }

/* the uppercase key: a group label, a table caption, a figure label, a section label */
.eyebrow { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }

/* ------------------------------------------------------------------ the bars: top bar, steps and status strip stick as one block */
.bars { position: sticky; top: 0; z-index: 10; }

/* top bar: the brand's ink band, as on the site: the lockup, the as-of date, the one loud button, the revision.
   It grows a row rather than overflow. */
.topbar {
  min-height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 6px 16px;
  background: var(--chrome); color: var(--on-chrome); color-scheme: dark;
}
.wordmark { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; display: flex; align-items: center; }
.wordmark a { color: var(--on-chrome); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.wordmark a:hover { color: #fff; }
.wordmark .fr-mark { width: 22px; height: 22px; }
.wordmark em { font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--on-chrome-muted); margin-left: 10px; letter-spacing: 0; }
.topbar-controls { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.topbar .eyebrow { color: var(--on-chrome-muted); }
.asof { display: flex; align-items: center; gap: 8px; }
.asof .eyebrow { margin: 0; }
.asof input[type="date"] { border: 1px solid var(--chrome-line); background: var(--chrome-2); color: var(--on-chrome); border-radius: 6px; padding: 5px 8px; font-size: 12.5px; font-family: var(--mono); }
/* the one loud button: Run the rules, in the signal blue */
.topbar .btn-primary { background: var(--b-signal-deep); color: #fff; border-radius: 999px; padding: 6px 16px; }
.topbar .btn-primary:hover:not([disabled]) { background: var(--b-signal); color: #fff; box-shadow: 0 2px 10px rgba(60, 140, 220, .35); }
/* who is reading: a key and a three-way pill in the top bar; the pressed segment is paper */
.mode { display: flex; align-items: center; gap: 8px; }
.mode .eyebrow { margin: 0; }
.seg-mode { position: relative; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--chrome-line); }
/* the pressed segment is one paper thumb that slides to the chosen reader (app.js places it); the buttons sit over it */
.seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px; background: var(--b-paper); transition: transform .22s cubic-bezier(.16, 1, .3, 1), width .22s cubic-bezier(.16, 1, .3, 1); }
.seg-mode button { position: relative; z-index: 1; border: 0; border-radius: 999px; background: transparent; color: var(--on-chrome-muted); font: 500 12.5px/1 var(--sans); padding: 6px 12px; min-height: 26px; cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast); }
.seg-mode button:hover { color: var(--on-chrome); background: rgba(255, 255, 255, .08); }
.seg-mode button[aria-pressed="true"] { color: var(--b-ink); background: transparent; }
/* before the thumb is placed, and wherever script is off, the pressed button keeps its own paper */
.seg-mode:not(.placed) button[aria-pressed="true"] { background: var(--b-paper); }
@media (prefers-reduced-motion: reduce) { .seg-thumb { transition: none; } }
.seg-mode button:focus-visible { outline: 2px solid var(--b-signal-night); outline-offset: 1px; }
/* the memo's rules revision: a key, then R1, R2… in a small ruled box, the way a title block numbers revisions */
.stamp { display: flex; align-items: center; gap: 6px; }
.stamp .eyebrow { margin: 0; }
.stamp b { display: inline-block; min-width: 30px; padding: 2px 8px; border: 1px solid var(--on-chrome); border-radius: 4px; font: 600 12.5px/1.25 var(--sans); color: var(--on-chrome); text-align: center; }
.engine-chip { font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--on-chrome-muted); padding: 5px 10px; border: 1px solid var(--chrome-line); border-radius: 999px; background: transparent; white-space: nowrap; }
.engine-chip.ready { color: #6fcb8d; border-color: #4cae6d; }
.engine-chip.error { color: #ef8a85; border-color: #e0554f; white-space: normal; }
.engine-chip.loading { color: #ebb45c; border-color: var(--b-amber-night); }
.engine-chip.loading::before { content: ""; display: inline-block; width: 9px; height: 9px; border: 2px solid var(--amber); border-top-color: transparent; border-radius: 50%; margin-right: 6px; vertical-align: -1px; animation: ui-spin .9s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ steps: a tab strip; the status strip under it */
/* the steps: a progress line, the flows' four stops joined by hairlines; the current stop sits on a tab */
.steps {
  display: flex; align-items: center; gap: 0; padding: 6px 12px;
  background: var(--panel); border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 500;
}
.steps a { color: var(--muted); text-decoration: none; padding: 5px 12px 5px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: background-color .12s ease-out, color .12s ease-out, box-shadow .12s ease-out; }
.steps a[data-step] + a[data-step]::before { content: ""; width: 22px; height: 1px; background: var(--line); margin: 0 10px 0 -2px; flex: 0 0 22px; }
.steps a:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.steps a.active { background: var(--group); color: var(--ink); }
.steps a.active::before, .steps a:hover::before { background: var(--line); }
.step-n, .badge {
  display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; background: var(--group); color: var(--ink); flex: 0 0 20px; letter-spacing: 0; border: 1px solid transparent;
}
.steps .step-n { background: transparent; border-color: var(--line); color: var(--muted); }
.steps a.done .step-n { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.steps a.active .step-n { background: var(--b-signal-deep); border-color: var(--b-signal-deep); color: #fff; }
.steps .tour-link { margin-left: auto; color: var(--blue); font-weight: 500; }
.steps .tour-link:hover { color: var(--ink); }

.strip { display: flex; align-items: center; gap: 10px; padding: 6px 16px; font-size: 12.5px; border-bottom: 1px solid var(--line); background: var(--status-info); min-width: 0; min-height: var(--strip-h); transition: background-color .25s ease-out; }
.strip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); flex: 0 0 9px; transition: background-color .25s ease-out; }
.strip span:not(.dot) { min-width: 0; overflow-wrap: anywhere; }
.strip.ok { background: var(--status-ok); } .strip.ok .dot { background: var(--ok); }
.strip.error { background: var(--status-error); } .strip.error .dot { background: var(--red); }
.strip.busy { background: var(--status-busy); }
.strip.busy .dot { border: 2px solid var(--amber); border-top-color: transparent; background: transparent; width: 10px; height: 10px; animation: ui-spin .9s linear infinite; }

.tour-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 16px 0; padding: 8px 12px; background: var(--status-info); border-radius: 4px; font-size: 12.5px; }

/* ------------------------------------------------------------------ layout: the step rail and the stage */
.panes { display: grid; grid-template-columns: min(420px, 36vw) minmax(0, 1fr); gap: 0; min-height: calc(100vh - var(--bars-h)); transition: grid-template-columns .3s cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) { .panes { transition: none; } }
.inputs { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px 16px 24px; border-right: 1px solid var(--line); background: var(--page); align-self: stretch; }
.inputs-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.memo-pane { min-width: 0; padding: 12px 20px 40px; background: var(--page); }

/* the rail's own collapse control: a row keyed Inputs with a chevron; collapsed, the rail is a 44px strip that
   reads Inputs upward, sticks under the bars and opens again on a click. The memo takes the width it frees. */
.rail-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 30px; padding: 4px 4px 4px 2px;
  border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer;
  font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; transition: background-color .12s ease-out, color .12s ease-out;
}
.rail-toggle:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.rail-toggle:focus-visible { outline: var(--focus); outline-offset: 1px; }
.rail-toggle .chev { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease-out; }
.panes.no-inputs { grid-template-columns: 44px minmax(0, 1fr); }
.panes.no-inputs .inputs { padding: 8px 6px; }
.panes.no-inputs .inputs-body { display: none; }
.panes.no-inputs .rail-toggle { position: sticky; top: calc(var(--bars-h) + 8px); flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 8px 0 10px; }
.panes.no-inputs .rail-label { writing-mode: vertical-rl; transform: rotate(180deg); }
.panes.no-inputs .rail-toggle .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .rail-toggle, .rail-toggle .chev { transition: none; } }
/* a wide touch screen: the folded strip is wide enough for a 44px target */
@media (pointer: coarse) and (min-width: 1101px) { .panes.no-inputs { grid-template-columns: 56px minmax(0, 1fr); } }
/* a link or a step lands its target below the sticky bars, not under them */
.input-card, .memo-pane, .memo .card, .export { scroll-margin-top: calc(var(--bars-h) + 8px); }
@media (max-width: 1100px) {
  /* stacked, the panes take their content's height; stretching them to the window opened gaps between the cards */
  .panes { grid-template-columns: 1fr; min-height: 0; align-content: start; }
  .inputs { align-self: start; border-right: 0; border-bottom: 1px solid var(--line); }
  .inputs-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  /* stacked over the memo, the rail folds up to its one row; the chevron points up to fold, down to open */
  .rail-toggle .chev { transform: rotate(90deg); }
  .panes.no-inputs { grid-template-columns: 1fr; }
  .panes.no-inputs .inputs { padding: 6px 16px; }
  .panes.no-inputs .rail-toggle { position: static; flex-direction: row; justify-content: space-between; padding: 4px 4px 4px 2px; }
  .panes.no-inputs .rail-label { writing-mode: horizontal-tb; transform: none; }
  .panes.no-inputs .rail-toggle .chev { transform: rotate(-90deg); }
}
@media (max-width: 760px) {
  /* a phone: one column, and the bars scroll away with the page */
  .bars { position: static; }
  .inputs-body { grid-template-columns: 1fr; }
  .topbar { padding: 8px 12px; }
  .wordmark em, .mode .eyebrow { display: none; }
  /* the step tabs wrap to a second line rather than hide Export and Walkthrough past the edge */
  .steps { flex-wrap: wrap; row-gap: 2px; }
  .input-card, .memo-pane, .memo .card, .export { scroll-margin-top: 8px; }
  /* the title block wraps two cells to a row, without a rule running into the empty space */
  .memo-meta > div { border-right: 0; margin-right: 0; padding-right: 12px; flex-basis: 45%; }
}

/* ------------------------------------------------------------------ panels and forms */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 12px 14px; box-shadow: var(--shadow); }
.card h2 { margin: 0 0 10px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.input-card > .eyebrow { display: none; }
/* an input card's head: the numbered heading and the Edit / Done toggle */
.card-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.card-head h2 { margin: 0; }
.card-head .btn { margin-left: auto; }
/* collapsed, a card shows its file and a one-line summary; the form opens on Edit. The fold is a grid row that goes
   from 0fr to 1fr, so the form unfolds and folds (320ms) instead of appearing; folded, it leaves the tab order. */
.form-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s cubic-bezier(.16, 1, .3, 1); }
.form-fold-in { min-height: 0; overflow: hidden; padding: 2px; margin: -2px; visibility: visible; transition: visibility 0s; }
.input-card.collapsed .form-fold { grid-template-rows: 0fr; }
.input-card.collapsed .form-fold-in { visibility: hidden; transition: visibility 0s .32s; }
@media (prefers-reduced-motion: reduce) { .form-fold { transition: none; } .input-card.collapsed .form-fold-in { transition: none; } }
.input-summary { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.input-summary b { color: var(--ink); font-weight: 600; }
.input-card:not(.collapsed) .input-summary { display: none; }
.form { display: flex; flex-direction: column; gap: 8px; }
.form .group { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.form .group + .group { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.form .group .eyebrow { margin: 0; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field label, .field .label { font-size: 12px; color: var(--muted); font-weight: 500; }
.field .help { font-size: 11px; color: var(--muted); }
.field .help.warn { color: var(--s-uncertain-text); font-weight: 500; }
.field input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); font-style: italic; }
.field input[type="text"], .field input[type="number"], .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); background: var(--field); border-radius: 4px; padding: 5px 8px; font-size: 12.5px; line-height: 1.35;
}
.field textarea { min-height: 56px; resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.field-row .field { min-width: 0; }
.live { font-size: 12px; color: var(--muted); }
.live b { color: var(--ink); font-weight: 600; }

/* a three-state answer as a segmented control; "not sure" is the pending amber */
.tri { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--panel); }
.tri button { flex: 1 1 auto; min-width: 0; background: var(--panel); color: var(--muted); border: 0; border-radius: 0; padding: 5px 8px; font-weight: 500; cursor: pointer; min-height: 28px; transition: background-color .12s ease-out, color .12s ease-out, box-shadow .12s ease-out; }
.tri button + button { border-left: 1px solid var(--line); }
.tri button:hover:not([aria-checked="true"]) { background: color-mix(in srgb, var(--ink) 14%, var(--panel)); color: var(--ink); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--ink) 55%, transparent); }
.tri button[aria-checked="true"] { background: var(--ink); color: var(--panel); }
.tri button[aria-checked="true"].unsure { background: var(--amber); color: var(--amber-ink); }

.checks { display: flex; flex-direction: column; gap: 4px; }
.checks label { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; }
.checks input { margin-top: 3px; }
.trees { display: flex; flex-direction: column; gap: 4px; }
.tree-row { display: grid; grid-template-columns: 40px 1fr 64px 84px 24px; gap: 4px; align-items: center; }
.tree-row input, .tree-row select { width: 100%; border: 1px solid var(--line); background: var(--field); border-radius: 4px; padding: 4px 6px; font-size: 12px; }
.tree-row .x { border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; min-height: 24px; padding: 0; }
.tree-row .x:hover { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); box-shadow: none; }
.tree-head { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.form-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.dirty { font-size: 12px; color: var(--s-uncertain-text); font-weight: 500; }

/* ------------------------------------------------------------------ buttons: dark ink, secondary group; hover lifts, press sinks */
/* one class, so the variants and the touch rule below can override it */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px;
  font-weight: 500; padding: 6px 14px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  background: var(--group); color: var(--ink); text-decoration: none; line-height: 1.25; white-space: nowrap; font-size: 13px;
  transition: background-color .12s ease-out, border-color .12s ease-out, color .12s ease-out, box-shadow .12s ease-out, transform .06s ease-out;
}
.btn:hover:not([disabled]):not([aria-disabled="true"]) { background: color-mix(in srgb, var(--ink) 18%, var(--group)); border-color: color-mix(in srgb, var(--ink) 60%, var(--line)); }
.btn-primary { background: var(--ink); color: var(--panel); }
.btn-primary:hover:not([disabled]):not([aria-disabled="true"]) { background: color-mix(in srgb, var(--ink) 76%, var(--panel)); color: var(--panel); border-color: transparent; box-shadow: 0 2px 6px rgba(20, 30, 40, .25); }
.btn-quiet { background: transparent; border-color: var(--line); }
.btn-small { min-height: 26px; padding: 3px 9px; font-size: 12px; }
.btn:active:not([disabled]) { transform: translateY(1px); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.btn.busy { opacity: .7; cursor: progress; }
@media (hover: none) { .btn:hover { background: var(--group); box-shadow: none; } .btn-primary:hover { background: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .btn, .steps a, .tri button { transition: none; } .btn:active { transform: none; } }

/* ------------------------------------------------------------------ the memo */
.memo-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin: 0 0 12px; }
/* the two run pickers: above the memo, or heading the Side by side card's A and B columns when two runs are compared */
.tool { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; }
.tool .eyebrow { margin: 0; }
.tool select { border: 1px solid var(--line); background: var(--field); border-radius: 4px; padding: 5px 8px; font-size: 12.5px; max-width: min(100%, 460px); }
/* in the card the pickers sit in a row laid on the answer table's columns: a 150px key column, then A, then B */
.side .pick-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); margin: 0 0 8px; }
.side .pick { min-width: 0; padding-right: 8px; }
.side .pick .tool .eyebrow { color: var(--ink); }
.side .pick select { width: 100%; max-width: none; }
/* the option's name is the picker's own text on screen; it shows whole only in print, where the picker hides */
.side .pick-name { display: none; font-size: 12px; color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  /* a phone: the two pickers stack across the card's width, so each shows its run's date and folder */
  .side .pick-row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .side .pick-key { display: none; }
  .side .pick { padding-right: 0; }
  .side .side-head th[scope="row"], .side .side-head thead th:first-child { width: 92px; }
  /* a long verdict wraps inside its pill rather than push past the card */
  .side .side-head .pill { white-space: normal; max-width: 100%; overflow-wrap: normal; }
}
.tool-note { font-size: 12px; color: var(--muted); align-self: center; }
.tool-note code { color: var(--ink); }

.memo { display: flex; flex-direction: column; gap: 12px; }
/* a memo lands: the page fades in at once, and the three answers follow one another, 60ms apart, as the list they are */
.memo.landed { animation: land 150ms ease-out; }
.memo.landed .answers > .answer { animation: land-answer .32s cubic-bezier(.16, 1, .3, 1) both; }
.memo.landed .answers > .answer:nth-child(2) { animation-delay: .06s; }
.memo.landed .answers > .answer:nth-child(3) { animation-delay: .12s; }
.memo.landed .answers > .answer:nth-child(4) { animation-delay: .18s; }
@keyframes land { from { opacity: 0; } to { opacity: 1; } }
@keyframes land-answer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .memo.landed { animation: none; } .memo.landed .answers > .answer { animation: land .2s ease-out both; animation-delay: 0s; } }

.memo-head { padding: 12px 14px 12px; }
.memo-head > .eyebrow { display: none; }
.memo-head h1 { font-size: 30px; font-weight: 300; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; margin: 0 0 12px; }
/* the memo's own title block: keys over values, a stamp at the end */
.memo-meta { display: flex; align-items: stretch; flex-wrap: wrap; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); background: var(--panel); margin: 0 0 10px; }
.memo-meta > div { display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; padding: 6px 12px 6px 0; border-right: 1px solid var(--line); margin-right: 12px; min-width: 0; flex: 1 1 140px; font-size: 12.5px; }
.memo-meta > div:last-child { border-right: 0; margin-right: 0; }
.memo-meta b { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.memo-meta .cont { color: var(--muted); }
.memo-meta code { font: 600 11.5px/1.3 var(--mono); }
.memo-head .quiet { color: var(--muted); margin: 0; max-width: 58ch; font-size: 12.5px; }

/* a revision, the drafting way: a delta with its letter beside what changed, and a revision row in the title block */
.rev { display: inline-block; width: 16px; height: 14px; vertical-align: -2px; color: var(--ink); flex: 0 0 auto; }
.rev path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.rev text { fill: currentColor; font: 600 7.5px var(--sans); }
.memo-meta .rev-cell span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.answers { display: flex; flex-direction: column; gap: 12px; }
.answer { --tone: var(--muted); --wash: var(--panel); --wash-text: var(--muted); background: var(--wash); padding: 12px 14px; }
.answer[data-verdict="pass"] { --tone: var(--s-pass-text); --wash: var(--s-pass-wash); }
.answer[data-verdict="conditional"] { --tone: var(--s-conditional-text); --wash: var(--s-conditional-wash); }
.answer[data-verdict="fail"] { --tone: var(--s-fail-text); --wash: var(--s-fail-wash); }
.answer[data-verdict="uncertain"] { --tone: var(--s-uncertain-text); --wash: var(--s-uncertain-wash); }
.answer > .eyebrow { display: none; }
/* an answer's heading is the site's key: a mono "01", then the question in small tracked caps; the verdict is the
   loud line, set light and large the way the site sets its headlines */
.answer h2 { font: 600 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.answer h2 .badge { width: auto; height: auto; border-radius: 0; background: transparent; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .08em; flex: 0 0 auto; border: 0; }
.answer h2 .badge::before { content: "0"; }
.verdict { font-size: 24px; line-height: 1.22; font-weight: 400; margin: 0 0 12px; letter-spacing: -.02em; max-width: 30ch; text-wrap: balance; }
.verdict em { font-style: normal; color: var(--tone); }
.verdict.quiet { font-size: 13px; color: var(--muted); font-weight: 400; }
.finding { margin: 0 0 8px; font-size: 13px; }
.finding .lead { color: var(--ink); }
.finding .cont { color: var(--muted); }
.finding-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.finding-list li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
.finding-list .title { font-weight: 600; }
.path { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.answer[data-verdict] table.plain th, .answer[data-verdict] table.plain td { border-color: color-mix(in srgb, var(--tone) 18%, var(--wash)); }
/* the fourth answer: four figures as a key-value list, then every line and its source, folded */
.pf-four { margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; }
.pf-four > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-four dt { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.pf-four dd { margin: 0; font-size: 13px; display: flex; flex-direction: column; gap: 1px; }
.pf-four dd b { font-size: 18px; font-weight: 400; letter-spacing: -.01em; line-height: 1.2; }
.pf-four dd .cont { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.pf-lines { font-size: 12px; }
.pf-lines summary { cursor: pointer; color: var(--muted); font-size: 12px; padding: 4px 0; }
.pf-lines table.plain { margin-top: 6px; }
.pf-lines td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-lines code { font: 10.5px var(--mono); overflow-wrap: anywhere; }
.pf-lines .ph-tag, .prop-row .conf { font: 600 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--s-uncertain-text); white-space: nowrap; }
.pf-lines p.cont { color: var(--muted); font-size: 11.5px; margin: 8px 0 0; max-width: 70ch; }

/* a status: a coloured mark with a glyph before the word, on a pill */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: middle; background: var(--s-na-wash); color: var(--s-na-text); }
.pill::before { content: "–"; display: inline-flex; width: 14px; height: 14px; border-radius: 50%; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; line-height: 1; color: var(--on-signal); background: var(--s-na); }
.pill-pass { background: var(--s-pass-wash); color: var(--s-pass-text); } .pill-pass::before { content: "✓"; background: var(--s-pass); }
.pill-conditional { background: var(--s-conditional-wash); color: var(--s-conditional-text); } .pill-conditional::before { content: "!"; background: var(--s-conditional); color: var(--on-warn); }
.pill-fail { background: var(--s-fail-wash); color: var(--s-fail-text); } .pill-fail::before { content: "✗"; background: var(--s-fail); }
.pill-uncertain { background: var(--s-uncertain-wash); color: var(--s-uncertain-text); border: 1px dashed var(--amber); padding-top: 1px; padding-bottom: 1px; } .pill-uncertain::before { content: "?"; background: var(--s-uncertain); color: var(--amber-ink); }
.pill-not_applicable { background: var(--s-na-wash); color: var(--s-na-text); }
.pill-info { background: var(--s-info-wash); color: var(--s-info-text); } .pill-info::before { content: "i"; background: var(--s-info); font-family: var(--mono); }

table.plain { border-collapse: collapse; width: 100%; font-size: 12px; }
table.plain th { text-align: left; font-weight: 600; color: var(--muted); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
table.plain td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.plain tr:last-child td { border-bottom: 0; }
table.plain td.status { white-space: nowrap; }
.who { color: var(--muted); }

.section { padding: 12px 14px; }
.section h2 { font-size: 14px; margin: 0 0 8px; }
.section > .intro { color: var(--muted); margin-bottom: 6px; }
.ledger .tools { display: flex; justify-content: flex-end; margin: -2px 0 4px; }
.section p { margin: 0 0 8px; }
.section ul { margin: 0; padding-left: 18px; }
.section li { margin: 3px 0; }

.ledger details { border-top: 1px solid var(--line); }
.ledger details:first-of-type { border-top: 0; }
.ledger summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 4px; margin: 0 -4px; border-radius: 4px; font-weight: 600; user-select: none; transition: background-color .12s ease-out; }
.ledger summary:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ledger summary::-webkit-details-marker { display: none; }
.ledger summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); flex: 0 0 auto; transition: transform .15s; }
.ledger details[open] summary::after { transform: rotate(45deg); }
.ledger summary .layer { font-size: 13px; }
.ledger summary .layer-title { color: var(--muted); font-weight: 400; font-size: 12px; }
.ledger summary .counts { display: flex; gap: 4px; flex-wrap: wrap; margin-right: 14px; }
.ledger table.plain { font-size: 11.5px; margin: 4px 0 10px; table-layout: fixed; }
.ledger col.c-rule { width: 22%; } .ledger col.c-status { width: 112px; } .ledger col.c-finding { width: 38%; } .ledger col.c-nums { width: 20%; } .ledger col.c-src { width: 20%; }
.ledger td { overflow-wrap: anywhere; }
.ledger .rule-title { font-weight: 600; }
.ledger .rule-title .rev { margin-left: 4px; }
.ledger .rule-id { color: var(--muted); font: 11px var(--mono); display: block; margin-top: 2px; }
.ledger .nums { color: var(--muted); font: 11px/1.5 var(--mono); }
.ledger td.src a { font-size: 11.5px; }
@media (max-width: 1365px) { .ledger col.c-finding { width: 34%; } .ledger col.c-nums { width: 16%; } .ledger col.c-src { width: 20%; } }
@media (prefers-reduced-motion: reduce) { .ledger summary::after, .ledger summary { transition: none; } }

.sources li { font-size: 12.5px; }
.sources .verify { color: var(--muted); font-style: italic; }
.stampbox .hash { font: 11px var(--mono); color: var(--muted); word-break: break-all; }
.stampbox li { font-size: 12px; }

/* ------------------------------------------------------------------ figures: drawings on white paper, beside the answers when wide */
.memo-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "answers" "figures" "rest"; gap: 12px; }
.memo-body > .answers { grid-area: answers; }
.memo-body > .figures { grid-area: figures; }
.memo-body > .memo-rest { grid-area: rest; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* wide: the figures beside the answers, then the ledger and the rest across the full width */
@media (min-width: 1600px) { .memo-body { grid-template-columns: minmax(0, 1fr) 460px; grid-template-areas: "answers figures" "rest rest"; align-items: start; } }
.figures { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.figure { padding: 10px 12px 10px; background: var(--c-paper); margin: 0; }
.figure .eyebrow { color: var(--c-drawmuted); margin-bottom: 6px; }
.figure svg { display: block; width: 100%; height: auto; }
/* a drawing is as tall as it needs to be on a screen and no taller; its labels are set at a fixed size (app.js) */
.figure .fig-body svg, .figure .fig-section svg { max-height: 440px; }
.figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.figure figcaption { font-size: 12px; color: var(--c-drawmuted); margin-top: 8px; line-height: 1.45; max-width: 60ch; }
.figure figcaption b { color: var(--c-drawink); font-weight: 600; }
.figure .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 11.5px; color: var(--c-drawmuted); }
.figure .legend i { display: inline-block; width: 14px; height: 8px; margin-right: 6px; vertical-align: middle; border: 1px solid transparent; }
.fig-proposed { background: var(--c-envelope); opacity: .55; }
.fig-outright { background: color-mix(in srgb, var(--c-lane) 45%, var(--c-paper)); border: 1.5px dashed var(--c-street) !important; }
.fig-bench { background: none; border: 0 !important; border-top: 2px dashed var(--c-bench) !important; height: 0 !important; }
.fig-env { background: none; border: 1px dashed var(--c-env) !important; }
.fig-tree { background: var(--c-tree); opacity: .55; border-radius: 50%; width: 10px !important; height: 10px !important; }
.fig-context { background: var(--c-half-road); border-color: var(--c-half-line) !important; }
.fig-building { background: var(--c-half-building); border-color: var(--c-half-line) !important; }
.figure .note { font-size: 12px; color: var(--c-drawnote); margin: 8px 0 0; }
/* a figure's head: the label and, for the plan, the Plan | 3D segmented control */
.fig-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-bottom: 6px; }
.fig-head .eyebrow { margin: 0; }
/* the architect's sheets: the engine's SVGs at the card's width, a Plan | Axon tab on the plans, the rules under them */
.figure.sheet .sheet-body svg { display: block; width: 100%; height: auto; }
.figure.sheet .sheet-body[hidden] { display: none; }
.sheet-rules { margin-top: 8px; font-size: 12px; }
.sheet-rules .cont { color: var(--c-drawmuted); }
.fig-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-left: auto; }
/* the block editor is the architect's tool: the manager and the reader see the sheets without it */
[data-mode="manager"] #edit-blocks, [data-mode="manager"] #sheet-editor { display: none !important; }
/* the block editor: a toolbar, the plate as a canvas, what the engine says under it */
.sheet-editor { display: flex; flex-direction: column; gap: 8px; }
.sheet-editor[hidden] { display: none; }
.ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; }
.ed-bar .field.inline { display: inline-flex; align-items: center; gap: 6px; }
.ed-bar .field.inline .label { font-size: 11px; }
.ed-bar select { border: 1px solid var(--line); background: var(--field); border-radius: 4px; padding: 3px 6px; font-size: 12px; }
.ed-sel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--field); }
.ed-acc { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.ed-canvas { display: block; width: 100%; height: auto; touch-action: none; border: 1px solid var(--line); background: var(--c-paper); user-select: none; }
.ed-canvas .ed-zone { cursor: grab; }
.ed-canvas .ed-zone:focus { outline: none; }
.ed-canvas .ed-zone:focus-visible rect:first-child { stroke: var(--amber); stroke-width: 2; }
.ed-canvas .ed-handle-w { cursor: ew-resize; }
.ed-canvas .ed-handle-d { cursor: ns-resize; }
.ed-status { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ed-status .finding-list { gap: 3px; }
.seg { display: inline-flex; border: 1px solid var(--c-rule); border-radius: 4px; overflow: hidden; background: var(--c-paper); }
.segbtn { border: 0; border-radius: 0; background: var(--c-paper); color: var(--c-drawmuted); font-size: 11.5px; font-weight: 500; padding: 3px 10px; min-height: 24px; cursor: pointer; transition: background-color .12s ease-out, color .12s ease-out; }
.segbtn + .segbtn { border-left: 1px solid var(--c-rule); }
.segbtn:hover:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--c-drawink) 10%, var(--c-paper)); color: var(--c-drawink); }
.segbtn[aria-pressed="true"] { background: var(--c-drawink); color: var(--c-paper); }
/* the axonometric turns under a drag; vertical swipes still scroll the page on a touch screen */
.fig3d svg { cursor: grab; touch-action: pan-y; user-select: none; }
.fig3d svg:active { cursor: grabbing; }
.fig3d svg:focus-visible { outline: var(--focus); outline-offset: 2px; }
.fig-hint { font-size: 11px; color: var(--c-drawmuted); margin-top: 6px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .figure { border-color: var(--line); } }

/* what changed: a revision sheet under the title block, the comparison's answer before anything else */
.changes h2 .rev { width: 18px; height: 16px; }
.changes .stamps { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.changes .stamps code { color: var(--ink); font-weight: 600; }
.changes .same { margin: 0 0 8px; font-weight: 500; }
.changes .rule-title { font-weight: 600; }
.changes .rule-id { display: block; margin-top: 1px; font: 11px var(--mono); color: var(--muted); }
.changes table.plain td.ver { font-family: var(--mono); font-size: 11px; white-space: nowrap; color: var(--ink); }
.changes table.plain td.ver .was { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.changes table.plain td.trans { white-space: nowrap; }
/* a phone: each change reads as a short stacked entry, each value under its column's name */
@media (max-width: 760px) {
  .changes table.plain, .changes table.plain tbody, .changes table.plain tr, .changes table.plain td { display: block; width: auto; }
  .changes table.plain thead { display: none; }
  .changes table.plain tr { padding: 6px 0; border-bottom: 1px solid var(--line); }
  .changes table.plain tr:last-child { border-bottom: 0; }
  .changes table.plain td { border: 0; padding: 2px 0; white-space: normal; }
  .changes table.plain td::before { content: attr(data-label); display: block; font: 600 11px/1.4 var(--sans); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
}

/* ------------------------------------------------------------------ export */
.export { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-panel); background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--ink); box-shadow: var(--shadow); }
/* the PDF leads the export bar: it is the one the board gets */
.export .action-bar #pdf-btn { background: var(--ink); color: var(--panel); }
.export .action-bar #pdf-btn:hover:not([disabled]) { background: color-mix(in srgb, var(--ink) 76%, var(--panel)); color: var(--panel); }
/* the inputs the memo read: notes can run long, so the list keeps a reading measure */
.inputs-used li { max-width: 80ch; }
.export h2 { margin: 0 0 10px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.export .export-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); max-width: 80ch; }
.action-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* the three file formats fold behind one word; the bar shows the four actions a reader decides between */
.more-formats { flex: 0 0 auto; }
.more-formats[open] { flex-basis: 100%; }
.more-formats > summary { list-style: none; cursor: pointer; display: inline-flex; }
.more-formats > summary::-webkit-details-marker { display: none; }
.more-formats[open] > summary { background: var(--field); }
.more-formats > .action-bar { padding-top: 6px; }
/* in manager mode the guide is the progress; the four steps give way to its stop count */
[data-mode="manager"] .steps a[data-step] { display: none; }
.guide-progress { font: 500 12px/1.4 var(--sans); color: var(--muted); padding: 5px 0; }
.guide-progress:empty { display: none; }
[data-mode="manager"] .guide-progress { margin-right: auto; }
.export-panel { margin-top: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.export-panel h3 { font-size: 14px; }
.export-panel .block { display: flex; flex-direction: column; gap: 4px; }
.export-panel .block .eyebrow { margin: 0; }
.export-panel .block p { margin: 0; font-size: 12.5px; color: var(--muted); max-width: 80ch; }
.codeline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.codeline pre, .codeline code.path { margin: 0; font: 11px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--field); border: 1px solid var(--line); border-radius: 4px; padding: 8px; display: block; color: var(--ink); }
.revit-result { display: flex; flex-direction: column; gap: 8px; }
.revit-result ul { margin: 0; padding-left: 18px; font-size: 12.5px; }
.revit-result .stages { display: flex; flex-wrap: wrap; gap: 4px; }
.revit-result img { max-width: 100%; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.revit-result .err { color: var(--red); font-size: 12px; }

/* ------------------------------------------------------------------ walkthrough: a spotlight and a card over the dimmed page */
.tour-spot { position: absolute; z-index: 30; border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(20, 30, 40, .45), 0 0 0 2px var(--blue); transition: opacity .15s ease-out; }
.tour-card { position: absolute; z-index: 31; width: min(360px, calc(100vw - 32px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); padding: 14px 16px 12px; }
.tour-card .eyebrow { margin-bottom: 2px; }
.tour-card h3 { font-size: 14px; margin: 0 0 6px; padding-right: 28px; text-wrap: balance; }
.tour-card p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; max-width: 60ch; }
.tour-card .tour-nav { display: flex; align-items: center; gap: 6px; }
.tour-card .tour-nav .spacer { flex: 1; }
.tour-card .counter { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.tour-card .tour-close { position: absolute; top: 4px; right: 4px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 17px; cursor: pointer; line-height: 1; min-width: 28px; min-height: 28px; padding: 0; }
.tour-card .tour-close:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }

/* ------------------------------------------------------------------ touch: 44px targets on a coarse pointer */
@media (pointer: coarse) {
  .btn, .steps a, .tri button, .segbtn, .rail-toggle, .seg-mode button { min-height: 44px; }
  .field input[type="text"], .field input[type="number"], .field select, .tool select, .asof input[type="date"] { min-height: 44px; }
  .tree-row { grid-template-columns: 40px 1fr 64px 84px 44px; }
  .tree-row input, .tree-row select, .tree-row .x { min-height: 44px; }
  .checks label { min-height: 44px; align-items: center; }
  .checks input { width: 20px; height: 20px; margin: 0; }
  .ledger summary { padding-block: 13px; }
  .tour-card .tour-close { min-width: 44px; min-height: 44px; }
  .wordmark a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ------------------------------------------------------------------ inputs: who reads a field, and the (i) that explains it */
.need-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 4px; padding: 6px 8px; font-size: 11.5px; color: var(--muted); background: var(--group); border-radius: 4px; }
.need-legend b { color: var(--ink); font-weight: 600; }
.need { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; border: 1.5px solid var(--ink); background: var(--ink); }
.need-rule { background: transparent; }
.need-figure { background: transparent; border-color: var(--muted); border-style: dashed; }
.label-line { display: flex; align-items: center; gap: 6px; }
.label-line label, .label-line .label { flex: 1 1 auto; }
.info-btn { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--muted); background: transparent; color: var(--muted); font: 600 10px/1 var(--mono); padding: 0; cursor: pointer; min-height: 0; }
.info-btn:hover, .info-btn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.pop { position: fixed; z-index: 40; margin: 0; padding: 8px 10px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--ink) 40%, var(--line)); border-radius: 6px; box-shadow: 0 6px 20px rgba(20, 30, 40, .18); font-size: 12px; line-height: 1.5; color: var(--ink); pointer-events: none; }
.pop p { margin: 0; }
.field-row .field .label-line { gap: 4px; }
@media (pointer: coarse) { .info-btn { width: 28px; height: 28px; font-size: 13px; } }

/* ------------------------------------------------------------------ the clauses applied, and two runs side by side */
.clauses .intro, .side .intro { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; max-width: 62ch; }
.clauses .intro b { color: var(--ink); font-weight: 600; }
.clauses .counts { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.clauses table.plain { font-size: 11.5px; table-layout: fixed; }
.clauses col.c-rule { width: 24%; } .clauses col.c-status { width: 104px; } .clauses col.c-prop { width: 22%; } .clauses col.c-perm { width: 24%; } .clauses col.c-ask { width: 22%; }
.clauses td { overflow-wrap: anywhere; vertical-align: top; }
.clauses .rule-title { font-weight: 600; }
.clauses .rule-id { color: var(--muted); font: 11px var(--mono); display: block; margin-top: 2px; }
/* the clause's section is a citation in words, so it is set in the sans, not the machine's mono */
.clauses .rule-sec { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
/* a rule id wraps between its words (at the dots and underscores), never mid-word */
.clauses .rule-id, .side .rule-id, .changes .rule-id { overflow-wrap: break-word; word-break: normal; }
.clauses td.nums { font-size: 11.5px; color: var(--ink); }
.clauses td.ask { color: var(--s-conditional-text); }
.clauses tr.st-pass td.ask, .clauses tr.st-info td.ask { color: var(--muted); }
.clauses tr.st-fail td.ask { color: var(--s-fail-text); }
.clauses .na { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
.side table.plain { table-layout: fixed; }
/* what the comparison comes to, in one sentence under the pickers */
.side .side-lead { margin: 0 0 10px; font-size: 13px; line-height: 1.5; max-width: 72ch; }
.side .side-lead code { font-size: 11px; color: var(--muted); }
.side .side-head { margin-bottom: 10px; }
/* the answer table's header row carries the run names for a screen reader only; the pickers above head it on screen */
.side .side-head thead th { height: 0; padding: 0; border: 0; line-height: 0; }
.side .side-head th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink); width: 150px; }
.side .side-head thead th:first-child { width: 150px; }
/* each run's open items, behind a disclosure, with the person who resolves them */
.side .side-open { margin: 0 0 8px; font-size: 12px; }
.side .side-open summary, .side .side-same summary { cursor: pointer; color: var(--ink); font-weight: 500; padding: 3px 0; }
.side .side-open ul { margin: 4px 0 6px; padding: 0; list-style: none; display: grid; gap: 6px; }
.side .side-open li { line-height: 1.45; max-width: 90ch; }
.side .side-sub { font-size: 12.5px; font-weight: 600; margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.side .side-same { margin: 6px 0 0; font-size: 12px; }
.side .side-same table { margin-top: 4px; }
.side .side-note { margin: 8px 0 0; font-size: 11.5px; }
.side col.c-rule { width: 38%; } .side col.c-ab { width: 31%; }
.side td { vertical-align: top; overflow-wrap: anywhere; font-size: 11.5px; }
.side .rule-title { font-weight: 600; }
.side .rule-id { color: var(--muted); font: 11px var(--mono); display: block; margin-top: 2px; }
.side td.status .cont { white-space: normal; font-size: 11px; margin-top: 3px; }
@media (max-width: 760px) {
  .clauses table.plain, .clauses thead, .clauses tbody, .clauses tr, .clauses td { display: block; }
  .clauses colgroup, .clauses thead { display: none; }
  .clauses tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .clauses td { border: 0; padding: 2px 0; }
}

/* ------------------------------------------------------------------ the guided start: seven stops down the rail (manager mode) */
.guide { padding: 10px 14px 8px; }
.guide .card-head { margin-bottom: 4px; }
.guide .card-head .help { margin-left: auto; font-size: 11px; color: var(--muted); }
.guide .stop { border-top: 1px solid var(--line); scroll-margin-top: calc(var(--bars-h) + 12px); }
.guide { scroll-margin-top: calc(var(--bars-h) + 8px); }
.guide .stop-head { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; width: 100%; padding: 8px 2px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; border-radius: 4px; transition: background-color var(--t-fast); }
.guide .stop-head:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.guide .stop-head .badge { grid-row: 1 / 3; align-self: start; margin-top: 1px; }
.guide .stop.done .stop-head .badge { background: var(--ink); color: var(--panel); }
.guide .stop.open .stop-head .badge { background: var(--b-signal-deep); color: #fff; }
.guide .stop-title { font-weight: 600; font-size: 13px; }
.guide .stop-what { font-size: 12px; color: var(--muted); }
.guide .stop.open .stop-what { display: none; }
.guide .stop-body { padding: 2px 0 12px 30px; display: flex; flex-direction: column; gap: 8px; }
.guide .stop-body .form-actions { margin-top: 2px; flex-wrap: wrap; }
.guide .stop-body .help { font-size: 11.5px; color: var(--muted); max-width: 44ch; }
.guide .stop-or { margin: 0; }
.guide .field input[type="text"] { width: 100%; border: 1px solid var(--line); background: var(--field); border-radius: 4px; padding: 5px 8px; font-size: 12.5px; }
.found-site { margin: 4px 0 0; display: grid; gap: 4px; font-size: 12.5px; }
.found-site > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
.found-site dt { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding-top: 2px; }
.found-site dd { margin: 0; }
.found-site .cont, .guide .cont { color: var(--muted); }
.reading-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.reading-list li { display: flex; align-items: center; gap: 8px; }
.cands { align-self: flex-start; }
/* stop 6: the pro-forma's five lines and the manager's three figures */
.pf-mini > div { grid-template-columns: 72px minmax(0, 1fr); }
.fin-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.fin-rows .field .label { font-size: 11px; }
.fin-rows input { width: 100%; border: 1px solid var(--line); background: var(--field); border-radius: 4px; padding: 4px 6px; font-size: 12.5px; }
/* the model behind a fold: a person's own key, kept in the browser; the schedule reader's small form */
.claude-fold { border-top: 1px solid var(--line); padding-top: 6px; font-size: 12px; }
.claude-fold > summary { cursor: pointer; font-weight: 500; color: var(--ink); padding: 4px 0; }
.claude-fold > summary .cont { font-weight: 400; }
.claude-fold[open] > summary { margin-bottom: 6px; }
.keybox { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber) 7%, var(--panel)); border-radius: 4px; margin: 2px 0 8px; }
.keybox .key-input, .fin-rows input, .sched-form input[type="text"], .sched-form input[type="url"], .proposal .field.inline input { min-height: 32px; }
@media (pointer: coarse) {
  .guide .stop-head { min-height: 44px; }
  .keybox .key-input, .fin-rows input, .sched-form input[type="text"], .sched-form input[type="url"], .proposal .field.inline input, .guide .sg-input { min-height: 40px; }
  .pf-lines summary, .claude-fold > summary { min-height: 40px; display: flex; align-items: center; }
}
.keybox .field .label { font-size: 11px; }
.keybox .key-input { width: 100%; border: 1px solid var(--line); background: var(--field); border-radius: 4px; padding: 4px 6px; font: 12.5px var(--mono); }
.keybox code { font: 11px var(--mono); }
.keybox-note { margin: 2px 0 6px; }
.sched-form { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 8px; }
.sched-form .field .label { font-size: 11px; }
.sched-form input[type="text"], .sched-form input[type="url"] { width: 100%; border: 1px solid var(--line); background: var(--field); border-radius: 4px; padding: 4px 6px; font-size: 12.5px; }
.sched-form input[type="file"] { font-size: 12px; max-width: 100%; }
/* stop 1: what the model proposes, each line confirmed on its own */
.proposal { border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber) 5%, var(--panel)); border-radius: 4px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.prop-top { display: flex; flex-direction: column; gap: 2px; }
.prop-top .cont { font-size: 11px; }
.prop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.prop-row { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; border-top: 1px solid var(--line); }
.prop-row.confirmed { opacity: .72; }
.prop-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.prop-head b { text-transform: capitalize; }
.prop-val { font-weight: 500; }
.prop-ev { font-size: 11.5px; line-height: 1.4; }
.prop-row .btn { align-self: flex-start; }
.proposal .field.inline { display: inline-flex; align-items: center; gap: 6px; }
.proposal .field.inline input { border: 1px solid var(--line); background: var(--field); border-radius: 4px; padding: 3px 6px; font-size: 12px; min-width: 140px; }
.sg-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.sg-row { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(72px, .9fr); grid-template-areas: "label pick value" "note note note"; gap: 2px 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sg-label { grid-area: label; font-size: 12.5px; font-weight: 500; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sg-label code { font: 10.5px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.sg-label code.ph { color: var(--s-uncertain-text); }
.sg-pick { grid-area: pick; }
.sg-pick .segbtn { padding: 2px 8px; min-height: 22px; font-size: 11px; }
.sg-pick .segbtn[aria-pressed="true"]:last-child { background: var(--amber); color: var(--amber-ink); }
.sg-value { grid-area: value; font-size: 12.5px; text-align: right; min-width: 0; }
.sg-value .sg-input { width: 100%; border: 1px solid var(--amber); background: var(--field); border-radius: 4px; padding: 3px 6px; font-size: 12.5px; text-align: right; }
.sg-note { grid-area: note; font-size: 11px; color: var(--muted); line-height: 1.4; }
.sg-unsure { padding: 8px 10px; border-radius: 4px; background: var(--s-uncertain-wash); font-size: 12px; }
.sg-unsure .eyebrow { color: var(--s-uncertain-text); margin-bottom: 4px; }
.sg-unsure ul { margin: 0; padding-left: 16px; display: grid; gap: 3px; }
.sg-unsure b { text-transform: capitalize; }
.sg-unsure li { display: flex; flex-direction: column; gap: 4px; }
.answer-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 4px; }
.answer-ctl .label { font-size: 11.5px; color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.answer-ctl .tri { font-size: 11.5px; }
.answer-ctl .tri button { padding: 3px 8px; min-height: 24px; }
.answer-ctl select, .answer-ctl input[type="text"] { border: 1px solid var(--line); background: var(--field); border-radius: 4px; padding: 3px 6px; font-size: 12px; min-width: 160px; }
/* the site's reading in the memo pane */
.reading-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.reading-findings .finding-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.reading-findings .pill { margin-top: 2px; }
.reading-findings .rule-id { font: 11px var(--mono); color: var(--muted); margin-left: 6px; }
.reading-findings .finding { margin: 2px 0 0; }
.reading-findings .who { margin: 2px 0 0; font-size: 12px; }

/* ------------------------------------------------------------------ the view: summary, detailed, 3D preview */
.view-switch { margin-left: auto; align-self: center; }
.memo-pane[data-view="summary"] .memo-rest, .memo-pane[data-view="summary"] #changes { display: none; }
.memo-pane[data-view="3d"] .memo-body > .answers, .memo-pane[data-view="3d"] .memo-rest, .memo-pane[data-view="3d"] .memo-body > .figures, .memo-pane[data-view="3d"] #side-by-side, .memo-pane[data-view="3d"] #changes { display: none; }
.preview3d { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0 0 12px; }
.preview3d .figure { padding: 10px 12px; background: var(--c-paper); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow); margin: 0; }
.preview3d .p3-axon { grid-column: 1 / -1; }
.preview3d .fig-body svg, .preview3d .fig-section svg { max-height: 560px; }
.preview3d .p3-axon svg { max-height: 640px; cursor: grab; touch-action: pan-y; user-select: none; }
.preview3d figcaption { font-size: 12px; color: var(--c-drawmuted); margin-top: 8px; line-height: 1.45; }
@media (max-width: 1100px) { .preview3d { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ issuing, and the chip that says a run was issued to you */
.issue-panel { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--field); display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.issue-panel label { font-size: 12px; color: var(--muted); font-weight: 500; }
.issue-panel textarea { width: 100%; border: 1px solid var(--line); background: var(--panel); border-radius: 4px; padding: 5px 8px; font-size: 12.5px; resize: vertical; }
.issue-panel .form-actions { margin-top: 2px; }
.issue-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border-radius: 999px; border: 1px solid var(--b-amber-night); background: color-mix(in srgb, var(--b-amber-night) 18%, transparent); color: #ffe3a6; font: 500 12px/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background-color var(--t-fast); }
.issue-chip:hover { background: color-mix(in srgb, var(--b-amber-night) 32%, transparent); color: #fff; }
.issue-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--b-amber-night); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-amber-night) 30%, transparent); }
@media (max-width: 760px) { .issue-chip { white-space: normal; text-align: left; } }
[data-mode="reader"] #issue-btn, [data-mode="reader"] #issue-panel, [data-mode="reader"] #guide { display: none !important; }
[data-mode="architect"] #guide { display: none !important; }

/* ------------------------------------------------------------------ who is reading: the three flows as three layouts
   manager (the default) is the page as above. architect opens the drawings beside the answers sooner and leads the export
   bar with Revit. reader takes the inputs, the run controls and the steps away and sets the memo in a reading column. */
[data-mode="architect"] .export .action-bar #pdf-btn { background: var(--group); color: var(--ink); }
[data-mode="architect"] .export .action-bar #revit-btn { order: -2; background: var(--ink); color: var(--panel); border-color: transparent; }
[data-mode="architect"] .export .action-bar #dl-massing { order: -1; }
@media (min-width: 1280px) {
  [data-mode="architect"] .memo-body { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "answers figures" "rest rest"; align-items: start; }
}
[data-mode="reader"] { --bars-h: 92px; }
[data-mode="reader"] .steps, [data-mode="reader"] #tour-offer, [data-mode="reader"] .asof, [data-mode="reader"] #run-btn, [data-mode="reader"] #engine-chip,
[data-mode="reader"] .inputs, [data-mode="reader"] .memo-tools, [data-mode="reader"] #tool-open, [data-mode="reader"] #tool-compare, [data-mode="reader"] #compare-note,
[data-mode="reader"] #dl-massing, [data-mode="reader"] #revit-btn, [data-mode="reader"] #export-panel, [data-mode="reader"] .ledger .tools,
[data-mode="reader"] #edit-blocks, [data-mode="reader"] #sheet-editor { display: none !important; }
[data-mode="reader"] .side .pick-name { display: block; }
[data-mode="reader"] .panes, [data-mode="reader"] .panes.no-inputs { grid-template-columns: minmax(0, 1fr); }
[data-mode="reader"] .memo-pane { width: min(100%, 980px); margin-inline: auto; padding: 24px 24px 64px; }
[data-mode="reader"] .memo { gap: 16px; }
[data-mode="reader"] .memo-head h1 { font-size: 34px; }
[data-mode="reader"] .finding, [data-mode="reader"] .answer table.plain, [data-mode="reader"] .section p, [data-mode="reader"] .section li { font-size: 14px; }
[data-mode="reader"] .memo-head .quiet { font-size: 13px; }
[data-mode="reader"] .export h2 { display: none; }
[data-mode="reader"] .export { border-top: 1px solid var(--line); }
[data-mode="reader"] .export .export-note { font-size: 12.5px; }

/* ------------------------------------------------------------------ print: the memo only, every ledger layer open */
@media print {
  /* the selector matches the dark block's specificity, so a dark-mode browser prints light too */
  :root, :root:not([data-theme="light"]) { color-scheme: light; --page: #fff; --panel: #fff; --field: #fff; --group: #f0f2f5; --ink: #000; --muted: #444; --line: #ccc; --shadow: none; --amber: #c77d14; --amber-ink: #14181d; --blue: #2a6fb8;
          --s-pass: #2f7d4a; --s-conditional: #d9a520; --s-fail: #c81e1e; --s-uncertain: #c77d14; --s-na: #8a93a0; --s-info: #2a6fb8; --on-signal: #fff; --on-warn: #1f2933;
          --s-pass-text: #246a3d; --s-conditional-text: #7a5a00; --s-fail-text: #a81a1a; --s-uncertain-text: #8f5a0e; --s-na-text: #444; --s-info-text: #245f9c;
          --s-pass-wash: #fff; --s-conditional-wash: #fff; --s-fail-wash: #fff; --s-uncertain-wash: #fff; --s-na-wash: #fff; --s-info-wash: #fff; }
  body { background: #fff; font-size: 10.5pt; }
  .side .pick-name { display: block; }
  .bars, .skip, .inputs, .export, .memo-tools, .side .pick .tool, .tour-offer, .tour-spot, .tour-card, .seg, .fig-hint, .ledger .tools { display: none !important; }
  .panes { display: block; min-height: 0; }
  .memo-pane { padding: 0; }
  .card { border: 0; padding: 0 0 10pt; break-inside: avoid; box-shadow: none; }
  .ledger, .sources { break-inside: auto; }
  .memo-meta > div { border-right: 0; margin-right: 0; padding-right: 12px; flex-basis: 30%; }
  .memo-body { display: block; }
  .figure { break-inside: avoid; }
  .figure .fig-body svg, .figure .fig-section svg { max-height: 120mm; }
  /* closed layers print open: the arithmetic and the clauses are the point of the memo (app.js also opens them on beforeprint) */
  .ledger details::details-content { content-visibility: visible; display: contents; }
  .ledger details:not([open]) > *:not(summary) { display: table; }
  .ledger summary::after { content: none; }
  a { color: #000; text-decoration: none; }
  .pill, .pill::before, .rev { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}