/* ══════════════════════════════════════════════════════════════════════
   Theode Redline — mockup stylesheet.

   Stands alone. The tokens, type, fields, buttons, panels, drop zone,
   file rows, annotation sheet and issue cards are copied from
   app/app.css at main-app-final (the Figma Review Area palette, spec 2026-09-30 D6 and the
   annotation specs), so a Redline screen reads as the same product. Where
   a rule is Redline's own it says so.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  /* The Figma Review Area palette, verbatim from app.css. */
  --suede-100: #fbfaf9;
  --suede-95:  #f5f2ef;
  --suede-90:  #ebe5e0;
  --suede-80:  #ded5ce;
  --suede-70:  #cbbcb2;
  --suede-65:  #bba799;
  --suede-30:  #4e433a;
  --suede-10:  #29231e;
  --suede-5:   #15120f;
  --carbon-100: #f8f8f7;
  --carbon-95:  #f1f1f0;
  --carbon-90:  #e6e6e4;
  --carbon-60:  #969284;
  --carbon-55:  #898575;
  --carbon-40:  #5b584e;
  --carbon-30:  #47453d;
  --carbon-10:  #25241f;
  --carbon-5:   #131210;
  --sage-100: #f8f8f7;
  --sage-95:  #f2f2ef;
  --sage-90:  #e5e7e0;
  --sage-80:  #d6d7cd;
  --sage-70:  #bec1b1;
  --sage-55:  #83876c;
  --sage-50:  #73785f;
  --sage-45:  #646752;
  --sage-40:  #575a48;
  --sage-30:  #444638;
  --sage-20:  #303227;
  --sage-10:  #23241d;
  --wood-100: #fcf9f8;
  --wood-95:  #f7f1ee;
  --sandstone-100: #f9e3dc;
  --sandstone-75:  #ebc8bc;
  --sky-100:       #bddcde;
  --conflict:      #e2a74a;
  --conflict-ink:  #4a3208;
  --missing:       #4f6d8f;
  --missing-ink:   #ffffff;
  /* A figure a person set (measure layers mockup; phase 2 draws it). */
  --mine:          #1f5fa8;
  --mine-soft:     #e3ecf7;

  /* The old names, as app.css aliases them. */
  --ink:        var(--carbon-10);
  --field:      var(--suede-100);
  --track:      var(--suede-90);
  --helper:     var(--carbon-40);
  --label:      var(--carbon-40);
  --fill:       var(--carbon-10);
  --danger:     #bd0a0a;
  --ok:         #34571d;
  --edge:       var(--carbon-90);
  --edge-firm:  var(--carbon-55);
  --page:       var(--suede-95);
  --secondary:  var(--suede-90);

  /* The three mark colours, one set (spec 2026-10-14-marks-everywhere). */
  --sev-3:  var(--danger);
  --sev-2:  #dc5050;
  --sev-1:  var(--carbon-40);

  /* Sketch view (spec 2026-11-07, 4.1): the dark canvas, what floats on it,
     hairlines and the radius scale, read from the Figma. Defining a token
     changes nothing until a rule uses it. */
  --canvas:       #15120f;
  --float:        #29231e;
  --float-hover:  #372f29;
  --float-edge:   rgba(255, 255, 255, 0.12);
  --float-rule:   #47453d;
  --float-ink:    #e6e6e4;
  --float-muted:  #adab9f;
  --float-on:     #f8f8f7;
  --shadow-float: 0 8px 28px -4px rgba(37, 36, 31, 0.12), 0 1px 3px rgba(37, 36, 31, 0.10);
  --shadow-pop:   0 12px 32px rgba(23, 18, 13, 0.10), 0 2px 4px rgba(23, 18, 13, 0.05);
  --line:         #d7d5d2;
  --tint-high:    #f9e3dc;
  /* The severity tag in the card, read from the Figma (walk wave B): Medium's
     fill and dot, and High's dot. Pins, boxes and the PDF keep --sev-*. */
  --tag-med:      #e4d3b4;
  --tag-med-dot:  #b7852e;
  --tag-high-dot: #bb654a;
  --tint-ok:      #e0f3d3;
  --moss:         #68aa3c;
  --brand-red:    #b42318;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --annot-paper: #ffffff;
  /* Selected words over a page (doctext.js): the paper is white in every theme. */
  --doc-words-selection: rgba(0, 95, 204, 0.25);
  --annot-edge:  var(--carbon-10);
  --annot-sev-3: var(--sev-3);
  --annot-sev-2: var(--sev-2);
  --annot-sev-1: var(--sev-1);
  --annot-sev-0: var(--carbon-40);

  --col:     576px;
  --field-h:  81px;
  --btn-w:   207px;
  --btn-h:    39px;

  --font-title: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-ui:    "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body:  var(--font-ui);
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; }

/* ── Type ────────────────────────────────────────────────────────────── */
.title {
  font-family: var(--font-title);
  color: var(--carbon-10);
  font-size: clamp(24px, 3.2vw, 30px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.helper { font-size: 15px; line-height: 1.5; color: var(--helper); margin-top: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Fields ──────────────────────────────────────────────────────────── */
.fields { margin-top: 40px; display: grid; gap: 16px; }
.field { display: block; }
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 8px;
}
.field-input {
  width: 100%;
  height: var(--field-h);
  background: var(--field);
  border: 1px solid var(--edge-firm);
  border-radius: 14px;
  padding: 0 22px;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--ink);
}
.field-input::placeholder, .nb-search::placeholder { color: #737373; }
.field-input:focus, .nb-search:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(37, 36, 31, 0.08); }
.field-note { font-size: 13px; line-height: 1.5; color: var(--helper); margin-top: 10px; }
.field-error { display: block; font-size: 13px; line-height: 1.5; color: var(--danger); margin-top: 8px; }
.field-error:empty { display: none; }
.keep-label { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); cursor: pointer; }
.keep-label input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.field-keep .field-note { margin-top: 4px; padding-left: 28px; }

.field-reveal { position: relative; display: block; }
.field-reveal .field-input { padding-right: 104px; }
.reveal {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  height: var(--btn-h); min-width: 72px; padding: 0 14px;
  border: 1px solid var(--edge-firm); border-radius: 10px;
  background: var(--page); color: var(--label);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
}
.reveal:hover { color: var(--ink); border-color: var(--ink); }

/* ── Password rules ──────────────────────────────────────────────────── */
.rules { list-style: none; margin-top: 18px; display: grid; gap: 7px; }
.rule { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--helper); }
.rule::before {
  content: ''; flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--edge-firm); background: transparent;
}
.rule-met { color: var(--ok); }
.rule-met::before { border-color: var(--ok); background: var(--ok); box-shadow: inset 0 0 0 2px var(--page); }

/* ── Code boxes ──────────────────────────────────────────────────────── */
.code { display: grid; grid-template-columns: repeat(6, minmax(0, 70px)); gap: 12px; margin-top: 36px; }
.code-digit {
  width: 100%; min-width: 0; height: var(--field-h);
  background: var(--field); border: 1px solid var(--edge-firm); border-radius: 14px;
  text-align: center; font-family: var(--font-mono); font-size: 26px; color: var(--ink);
}
.code-digit:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(37, 36, 31, 0.08); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.actions { display: flex; justify-content: flex-end; gap: 24px; margin-top: 44px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: var(--btn-w); height: var(--btn-h); padding: 0 22px;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--font-ui); font-size: 15px; cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--carbon-10); color: var(--carbon-100); }
.btn-primary:hover:not(:disabled) { background: var(--suede-5); }
.btn-secondary { background: var(--suede-90); color: var(--carbon-10); }
.btn-secondary:hover:not(:disabled) { background: var(--suede-80); }
.btn-danger { background: var(--suede-100); color: var(--danger); border-color: var(--danger); }
.btn-wide { min-width: 100%; }
.btn-sm { min-width: 0; height: 32px; padding: 0 14px; font-size: 13px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.linkish {
  background: none; border: none; padding: 0;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  text-decoration: underline; cursor: pointer;
}
.aside { font-size: 15px; color: var(--carbon-40); margin-top: 28px; }

/* ── Federated buttons ───────────────────────────────────────────────── */
.federated { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.federated-btn {
  flex: 1 1 220px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 40px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--edge); background: var(--suede-100); color: var(--ink);
  font-family: var(--font-body); font-size: 14px; cursor: pointer;
}
.federated-btn:hover { background: var(--suede-95); border-color: var(--edge-firm); }
.federated-mark { width: 20px; height: 20px; flex: none; display: block; }

/* ── Sign-in, Figma round 3 (the .auth split) ────────────────────────── */
.auth {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1120fr) minmax(0, 800fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--suede-100);
}
.auth-main {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 120px 48px;
}
.auth-body { width: 100%; max-width: 480px; }
.auth-body-narrow { max-width: 420px; }
.auth-head-centred { text-align: center; }
.auth .title { font-size: clamp(26px, 5vw, 32px); line-height: 1.25; color: var(--carbon-5); }
.auth .helper { font-size: 16px; line-height: 20px; margin-top: 12px; color: var(--carbon-40); }
.auth-eyebrow { font-size: 16px; line-height: 20px; color: var(--carbon-40); margin-bottom: 8px; }
.auth .fields { margin-top: 32px; gap: 12px; }
.auth .field-label {
  font-family: var(--font-ui); font-size: 14px; line-height: 18px; margin-bottom: 12px;
  letter-spacing: 0; text-transform: none; color: var(--carbon-40);
}
.auth .field-input { height: 52px; border-radius: 12px; padding: 0 16px; font-size: 16px; }
.auth .field-reveal .field-input { height: 56px; padding-right: 88px; }
.auth .reveal { height: 32px; min-width: 60px; right: 10px; padding: 0 10px; border-radius: 6px; }
.auth .btn { height: 48px; min-width: 167px; border-radius: 12px; font-size: 16px; font-weight: 700; }
.auth .btn-primary { background: var(--sage-20); }
.auth .btn-slim { height: 44px; font-size: 14px; }
.auth .btn-wide { min-width: 100%; }
.auth .btn-join { min-width: 305px; }
.auth .btn-primary:disabled { opacity: 1; background: var(--carbon-95); border-color: var(--carbon-90); color: var(--carbon-40); }
.auth .actions { justify-content: flex-start; gap: 16px; margin-top: 32px; }
.auth .actions-centred { justify-content: center; }
.auth .aside { margin-top: 24px; }
.auth .federated { margin-top: 32px; gap: 12px; }
.auth .federated-btn { flex: 1 1 0; min-width: max-content; height: 44px; gap: 6px; padding: 0 6px; border-radius: 12px; font-weight: 700; white-space: nowrap; }
.auth-federated-stack { flex-direction: column; width: 305px; max-width: 100%; margin-inline: auto; }
.auth-federated-stack .federated-btn { flex: 0 0 auto; width: 100%; }
.auth-federated-centred { justify-content: center; margin-top: 22px; }
.auth-federated-centred .federated-btn { flex: 0 1 305px; }
.auth-or {
  display: flex; align-items: center; gap: 13px; margin-top: 22px;
  font-size: 11px; line-height: 15px; font-weight: 700; color: var(--carbon-40);
}
.auth-or::before, .auth-or::after { content: ''; flex: 1 1 0; height: 1px; background: var(--carbon-90); }
.auth-notice { margin-top: 16px; font-size: 14px; line-height: 1.4; color: var(--carbon-40); text-align: center; }
.auth-notice a { color: var(--carbon-10); }
.auth-notice-light { margin-top: 8px; font-size: 13px; }
/* The Terms box (spec 7.1, 7.4): an unticked checkbox above the button that
   it gates. A click on a link in the label follows the link and leaves the
   box as it was. */
.auth-agree { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 14px; line-height: 1.4;
  color: var(--ink); cursor: pointer; }
.auth-agree input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.auth-agree a { color: var(--carbon-10); }
/* Under the box while it is the one thing left (legal v0.2 spec 2.1). */
.auth-agree-needed { margin-top: 6px; padding-left: 28px; }
/* The "Help improve Theode" switch (legal v0.2 spec 6): a checkbox with
   role="switch", drawn as a track and a knob. It is never disabled; while
   Your account's PUT is in flight it carries aria-busy and dims. */
.train-switch { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 15px; color: var(--ink);
  cursor: pointer; }
.train-switch input {
  flex: none; position: relative; width: 36px; height: 20px; margin: 0; border-radius: 10px;
  appearance: none; -webkit-appearance: none; background: var(--carbon-55); cursor: pointer;
  transition: background-color 0.15s ease;
}
.train-switch input::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--carbon-100); box-shadow: 0 1px 2px rgba(37, 36, 31, 0.25); transition: transform 0.15s ease;
}
.train-switch input:checked { background: var(--ink); }
.train-switch input:checked::after { transform: translateX(16px); }
.train-switch input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.train-switch input[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.train-switch + .train-switch-hint { margin-top: 4px; padding-left: 46px; }
.auth .rules { margin-top: 14px; }
.auth .code { grid-template-columns: repeat(6, minmax(0, 48px)); gap: 24px; margin-top: 32px; }
.auth .code-digit { height: 64px; border-radius: 12px; font-family: var(--font-ui); font-size: 16px; }
.auth-resend { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 408px; margin-top: 29px; }
.auth-resend + .actions { margin-top: 56px; }
.auth-resend .field-note { margin-top: 0; font-size: 12px; line-height: 16px; }
.auth-resend-btn {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; margin-right: -8px; padding: 0 8px;
  border: 0; border-radius: 8px; background: none;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--carbon-10); cursor: pointer;
}
.auth-resend-btn:disabled { color: var(--carbon-55); cursor: not-allowed; }
.auth-resend-icon { display: block; width: 16px; height: 16px; flex: none; }
.auth-address { color: var(--carbon-40); text-decoration: underline; text-underline-offset: 3px; }

.auth-photo {
  position: sticky; top: 0; height: 100vh; align-self: start; min-width: 0; overflow: hidden;
  background: var(--auth-photo, var(--suede-90));
}
.auth-photo-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* The redline illustrations (Redline's own). Where the current app shows a
   photograph, these screens show the product's idea as an architect's
   redline: a concept sketch of a house on sign-up and sign-in, a crisp eaves
   detail on the confirm step. Both are SVGs in assets/ with every letter
   drawn as a path, so they need no font; the red markup draws itself on
   once inside the file and honours prefers-reduced-motion there. The
   column is the warm paper the sketch is drawn on; the CAD detail sits on
   it as a white print. */
.auth-art {
  --auth-photo: var(--wood-100);
  display: flex; align-items: center; justify-content: center;
  padding: 96px 48px 48px; border-left: 1px solid var(--suede-90);
}
.auth-art-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.auth-art-sheet { background: #fff; box-shadow: 0 1px 2px rgba(37, 36, 31, 0.12), 0 8px 28px rgba(37, 36, 31, 0.10); }

/* The wordmark at the top left of every auth screen (Redline's own: the
   current app has none here, but a stranger on redline.theode.ai must see
   whose page this is). */
.wordmark {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-title); font-size: 20px; font-weight: 600; color: var(--suede-5);
  text-decoration: none;
}
.wordmark-redline { font-weight: 400; color: var(--carbon-40); }
.auth-top {
  position: absolute; top: 32px; left: 48px; right: 48px; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.auth-top .linkish { font-size: 14px; }

/* ── The landing (01). Redline's own layout: the sign-up form is the hero
   on the left, the redlined concept sketch on the right where the
   photograph would be, then the sample flagged sheet and three plain
   sections under the fold. ───────────────────────────────────────────── */
.landing-hero .auth-main { padding: 96px 48px 64px; }
.landing-hero .fields { margin-top: 24px; }
.landing-hero .federated { margin-top: 24px; }
.landing-hero .auth-or { margin-top: 18px; }
.landing-hero .rules { margin-top: 12px; gap: 5px; }
.landing-hero .actions { margin-top: 22px; }
.landing-hero .aside { margin-top: 18px; }
.landing-stage {
  position: sticky; top: 0; height: 100vh; min-height: 640px; align-self: start;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 96px 48px 48px; min-width: 0;
  background: var(--wood-100); border-left: 1px solid var(--suede-90);
}
.landing-sketch { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0 auto; }
.landing-sketch-phone { display: none; }

/* The sample under the fold: the sheet on the left, the three flags on the
   right, as the file view draws them. */
.landing-sample { background: var(--suede-100); border-top: 1px solid var(--suede-90); }
.landing-sample-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start;
  max-width: 1200px; margin: 0 auto; padding: 64px 48px 72px;
}
.landing-sample-text h2 { font-family: var(--font-title); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--carbon-5); margin-bottom: 12px; }
.landing-sheet { position: relative; width: 100%; background: var(--annot-paper); box-shadow: 0 1px 4px rgba(37, 36, 31, 0.15); }
.landing-sheet img { display: block; width: 100%; height: auto; }
.landing-caption { font-size: 14px; line-height: 1.5; color: var(--carbon-40); max-width: 52ch; }
.landing-caption b { color: var(--carbon-10); font-weight: 700; }
.landing-sample-flags { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.landing-sample-flags .annot-card { cursor: default; }
/* The sample's three marks, where mockup 01 placed them inline (the CSP
   allows no style attribute). */
.landing-box-1 { left: 5.45%; top: 13.6%; width: 8.7%; height: 3.9%; }
.landing-pin-1 { left: 14.2%; top: 13.9%; }
.landing-box-2 { left: 48.7%; top: 46.5%; width: 10.2%; height: 1.8%; }
.landing-pin-2 { left: 59.1%; top: 46.8%; }
.landing-box-3 { left: 12.2%; top: 37.3%; width: 5.1%; height: 16.5%; }
.landing-pin-3 { left: 17.5%; top: 37.5%; }
.landing-below { background: var(--suede-95); border-top: 1px solid var(--carbon-90); }
.landing-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px;
  max-width: 1200px; margin: 0 auto; padding: 72px 48px;
}
.landing-col h2 { font-family: var(--font-title); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--carbon-5); }
.landing-col p, .landing-col li { font-size: 15px; line-height: 1.55; color: var(--carbon-40); margin-top: 12px; }
.landing-col ol { margin-top: 4px; padding-left: 1.3em; }
.landing-col li { margin-top: 8px; }
.landing-col li::marker { color: var(--carbon-10); font-weight: 700; }
.landing-col b { color: var(--carbon-10); font-weight: 700; }
.landing-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  max-width: 1200px; margin: 0 auto; padding: 24px 48px 40px;
  border-top: 1px solid var(--carbon-90); font-size: 13px; color: var(--carbon-40);
}
.landing-foot a { color: var(--carbon-40); }

/* ── The app top bar and panel. Redline's own: the current app's shell has
   a 240 px sidebar for twelve areas; Redline has one, so the bar carries
   the wordmark, the way to the projects, and who is signed in, at the
   shell's 84 px. The panel under it is .shell-main .screen-shell as
   app.css draws it. ──────────────────────────────────────────────────── */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 84px; padding: 24px 32px 16px;
}
.top-left { display: flex; align-items: center; gap: 20px; min-width: 0; }
.top-nav { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--carbon-40); min-width: 0; }
.top-nav a { color: var(--carbon-40); text-decoration: none; }
.top-nav a:hover { color: var(--carbon-10); text-decoration: underline; }
.top-nav .crumb-sep { color: var(--carbon-60); }
.top-nav .crumb-here { color: var(--carbon-10); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-right { display: flex; align-items: center; gap: 12px; flex: none; }
.top-who { font-size: 13px; color: var(--carbon-40); }
.top-pill {
  padding: 12px 20px; border: 1px solid var(--sage-80); border-radius: 1000px;
  background: var(--suede-100); font-family: var(--font-ui); font-size: 14px; color: var(--carbon-10);
  cursor: pointer; text-decoration: none;
}
.top-pill:hover { background: var(--suede-90); }
.page { display: flex; flex-direction: column; min-height: calc(100vh - 84px); }
.panel-shell {
  flex: 1 0 auto; margin: 0 32px 32px; padding: 40px 48px;
  background: var(--suede-100); border-radius: 24px; font-family: var(--font-ui); color: var(--carbon-10);
}
.panel-shell > .title + .helper { margin-top: 10px; }
/* The top bar's email is a link to /account (7.0); the panels and the
   account page's button sit at the left of the panel (phase 2 Task 13). */
a.top-who { text-decoration: none; }
a.top-who:hover { color: var(--carbon-10); text-decoration: underline; }
button.top-pill:disabled { cursor: default; opacity: 0.6; }
/* The view-only page (share links spec 3.3, mockup board 3): "Try Redline"
   is a 40 px pill, and the note bar says the page is view only, who shared
   it and when it last changed. */
.top-pill.view-try { display: inline-flex; align-items: center; box-sizing: border-box; height: 40px; padding: 0 18px; }
.view-note {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 16px;
  border-radius: 12px; background: var(--suede-90); font-family: var(--font-ui); font-size: 15px;
  line-height: 20px; color: var(--carbon-10);
}
.view-note-icon { flex: none; width: 18px; height: 18px; }
.view-project .files { margin-top: 24px; }
.panel-shell .actions { justify-content: flex-start; gap: 16px; margin-top: 32px; }
.panel-shell .actions-centred { justify-content: center; }
.panel-shell .auth-head-centred { margin-top: 32px; }
.panel-shell .auth-head-centred .title { font-size: clamp(20px, 2.4vw, 24px); }
.panel-shell .btn-slim { height: 44px; font-size: 14px; }
.account-facts { margin: 32px 0 0; }
/* The name on the flags (reviewer flags 4.14): the name, then Change; its field under the label. */
.account-change { margin-left: 12px; font-size: 14px; }
/* A row GET /me has not filled yet (new-user walk 3 W3-1): quiet. */
.account-facts .account-loading { color: var(--carbon-40); }
.account-facts .field-input { max-width: 420px; }
.account-facts .actions { margin-top: 12px; gap: 12px; }
/* Help improve Theode (legal v0.2 spec 2.2): the row's <dt> says the words,
   so the switch's own label is for a screen reader only (as .sr-only), and
   the hint sits under the switch at the row's edge. The label shrinks to the
   track, so a click on the empty strip beside it cannot flip a saved setting. */
.account-train .train-switch { margin-top: 0; width: fit-content; }
.account-train .train-switch > span {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.account-train .train-switch + .train-switch-hint { max-width: 68ch; margin-top: 8px; padding-left: 0; }
/* Terms · Privacy · Data processing, under the details. */
.account-legal { margin-top: 24px; font-size: 14px; line-height: 1.4; color: var(--carbon-40); }
.account-legal a { color: var(--carbon-10); }
/* /privacy: plain sentences under small headings, at a reading width. */
.prose { max-width: none; }
.prose > * { max-width: 68ch; }
.prose h2 { margin-top: 32px; font-family: var(--font-title); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--carbon-5); }
.prose p:not(.helper) { margin-top: 10px; font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--carbon-30); }
/* The v0.2 legal text (legal v0.2 spec 7): its lists, a second document
   under the first, and tables that scroll sideways inside their wrapper at
   390 px while the page never does. */
.prose > .title + .helper { margin-top: 10px; }
.prose + .prose { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--edge); }
.prose ul, .prose ol { margin-top: 10px; padding-left: 24px; font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--carbon-30); }
.prose li + li { margin-top: 4px; }
.prose strong { font-weight: 700; color: var(--carbon-10); }
.legal-table { margin-top: 16px; overflow-x: auto; }
.legal-table table { min-width: 520px; border-collapse: collapse; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--carbon-30); }
.legal-table th { padding: 8px 10px; border-bottom: 1px solid var(--edge); text-align: left; font-weight: 700; color: var(--carbon-10); vertical-align: bottom; }
.legal-table td { padding: 8px 10px; border-bottom: 1px solid var(--edge); vertical-align: top; }

/* ── Projects (04) ───────────────────────────────────────────────────── */
.projects-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.new-project { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.new-project .field-input { flex: 1 1 320px; height: 48px; border-radius: 12px; padding: 0 16px; font-size: 16px; max-width: 480px; }
.new-project .btn { height: 48px; min-width: 0; padding: 0 24px; border-radius: 12px; }
.new-project-note { flex: 1 0 100%; font-size: 13px; color: var(--carbon-40); margin-top: 2px; }
.new-project .field-error { flex: 1 0 100%; margin-top: 2px; }
.projects { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }
/* While the list is out (new-user walk 3 W3-1): quiet, where the rows will be. */
.projects-loading { margin-top: 32px; font-size: 14px; color: var(--carbon-40); }
.project-row {
  display: flex; align-items: stretch; justify-content: space-between; width: 100%; min-height: 64px;
  border: 1px solid var(--edge); border-radius: 14px; text-decoration: none; color: inherit;
}
.project-row:hover { border-color: var(--edge-firm); }
.project-open {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: 1 1 auto; min-width: 0;
  padding: 16px 14px 16px 20px; font-family: var(--font-body); text-align: left;
}
.project-name { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.project-meta { display: block; font-size: 13px; color: var(--helper); margin-top: 3px; }
.project-files { font-size: 13px; color: var(--helper); white-space: nowrap; text-align: right; }
.project-flags { display: block; font-size: 13px; color: var(--carbon-10); font-weight: 700; }
.project-flags-none { color: var(--ok); }
.project-flags-busy { color: var(--carbon-40); font-weight: 400; font-style: italic; }
.projects-empty {
  margin-top: 32px; padding: 32px; border: 1px dashed var(--edge-firm); border-radius: 14px;
  color: var(--carbon-40); font-size: 15px; line-height: 1.55; max-width: 60ch;
}
.projects-empty b { color: var(--carbon-10); font-weight: 700; }
.state-switch { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--carbon-40); }
.state-switch button {
  padding: 4px 10px; border: 1px solid var(--edge-firm); border-radius: 999px; background: var(--suede-100);
  font-family: var(--font-ui); font-size: 13px; color: var(--carbon-10); cursor: pointer;
}
.state-switch button[aria-pressed="true"] { background: var(--carbon-10); color: var(--carbon-100); }

/* ── The project screen (05–08): two columns on the panel. ───────────── */
.project-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.project-head .helper { margin-top: 6px; }
/* The name with its ⋯ (Rename only in phase 3), and the rename field. */
.project-title { position: relative; display: flex; align-items: center; gap: 8px; }
.project-menu {
  position: absolute; top: 100%; left: 0; z-index: 10; display: flex; flex-direction: column; min-width: 160px;
  margin-top: 4px; padding: 6px; border: 1px solid var(--carbon-95); border-radius: 10px; background: var(--suede-100);
  box-shadow: 0 6px 24px rgba(37, 36, 31, 0.12);
}
.project-menu .file-act { text-align: left; font-size: 14px; padding: 8px 10px; }
.project-rename .field-input { height: 48px; border-radius: 12px; padding: 0 16px; font-size: 22px; max-width: 560px; }
.project-sum { font-size: 14px; color: var(--carbon-40); }
.project-sum b { color: var(--carbon-10); font-weight: 700; }
/* The Share pill (share links spec 3.1) closes the head's line, after the sum. */
.project-head .project-sum { margin-left: auto; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; align-items: start; }
.col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* Side by side, each column's head, band and rows share the other's grid
   rows, so the two drop bands are always one height (Nolan 2026-10-30). */
@supports (grid-template-rows: subgrid) {
  .cols { grid-template-rows: auto auto auto; }
  .col { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 16px; align-content: start; }
  .col > .drop-band { display: flex; }
}
.col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.col-title { font-family: var(--font-title); font-weight: 400; font-size: 20px; line-height: 24px; color: var(--sage-20); }
.col-count { font-size: 13px; color: var(--carbon-40); white-space: nowrap; }
/* The rules column's "Open the notebook" (Ask 2b spec 5.1, 7.6) sits after
   the count, and the two sit together at the right. */
.col-link { font-size: 13px; text-decoration: underline; white-space: nowrap; margin-left: 12px; }
.col-head:has(.col-link) .col-count { margin-left: auto; }
.col-note { font-size: 14px; line-height: 1.5; color: var(--carbon-40); margin-top: -8px; }

/* The drop zone: the upload screen's .drop-band and .drop, as drawn
   (spec 2026-10-03-figma-review-area-2, screen 2). A drop lands here;
   there is no upload button. The band is sage/80, the zone sage/100
   inside a sage/45 dash. (Redline's own look is in the E9 block below.) */
.drop-band { padding: 12px; border-radius: 24px; background: var(--sage-80); }
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 200px; padding: 28px 24px;
  border: 2px dashed var(--sage-45); border-radius: 18px; background: var(--sage-100);
  font-family: var(--font-ui); cursor: pointer; text-align: center;
}
.drop:hover { border-color: var(--sage-30); }
.drop-over { border-color: var(--carbon-10); border-style: solid; background: var(--sage-95); }
.drop-lead {
  max-width: 16em; font-family: var(--font-title); font-size: 22px; line-height: 26px; color: var(--carbon-30);
  text-wrap: balance;
}
.drop-link { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--carbon-40); text-decoration: underline; }
.drop-types { font-size: 13px; line-height: 18px; color: var(--sage-45); max-width: 30em; }
.drop-compact { min-height: 120px; padding: 18px 20px; gap: 6px; }
.drop-compact .drop-lead { font-size: 17px; line-height: 22px; }
.drop-compact .drop-types { font-size: 12px; }
/* A column the drag is not over fades a little, so the target reads. */
.col-away .drop-band { opacity: 0.6; }
/* The dragged file, drawn as the browser draws a drag image: a chip near
   the pointer. Mockup only. */
.drag-ghost {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border-radius: 10px;
  background: var(--suede-100); border: 1px solid var(--carbon-95);
  box-shadow: 0 6px 24px rgba(37, 36, 31, 0.18); font-size: 14px; color: var(--carbon-10);
  pointer-events: none; transform: rotate(-2deg);
}
.drag-ghost img { width: 20px; height: 20px; }
.drop-over .drop-lead { color: var(--carbon-10); }

/* ── File rows: the library's card (.lib-grid-3 .lib-card), one per
   file: the kind icon, the name over its status line, the actions at the
   right. The status line's words are the ones the library writes. ────── */
.files { display: flex; flex-direction: column; gap: 8px; }
.file {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 14px 16px; border: 1px solid var(--carbon-95); border-radius: 14px; background: var(--suede-100);
}
.file-open {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 2px;
  grid-column: 1; grid-row: 1 / span 2; min-width: 0; text-decoration: none; color: inherit;
  border: 0; background: none; padding: 0; text-align: left; font-family: var(--font-ui); cursor: pointer;
}
.file-open > .kind-icon { grid-row: 1 / span 3; grid-column: 1; width: 24px; height: 24px; }
.file-name { grid-column: 2; min-width: 0; font-size: 15px; line-height: 20px; color: var(--carbon-10); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-open:hover .file-name { text-decoration: underline; }
/* A row that opens reads as a link (new-user walk 3 W3-3): the name has a
   faint underline that darkens on hover, and "open the drawing" in its
   second line is underlined; a row that does not open yet keeps the plain
   cursor. */
a.file-open .file-name { text-decoration-line: underline; text-decoration-color: var(--carbon-60); text-underline-offset: 3px; }
a.file-open:hover .file-name { text-decoration-color: var(--carbon-10); }
a.file-open .file-note-link { text-decoration-line: underline; text-underline-offset: 2px; color: var(--carbon-10); }
span.file-open { cursor: default; }
.file-state { grid-column: 2; min-width: 0; font-size: 12px; line-height: 16px; color: var(--carbon-40); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-state-flags { font-style: normal; color: var(--carbon-10); font-weight: 700; }
.file-state-none { font-style: normal; color: var(--ok); }
.file-state-bad { color: var(--danger); font-style: normal; white-space: normal; overflow-wrap: anywhere; }
.file-state-ready { font-style: normal; }
.file-bar {
  grid-column: 2; display: block; width: 100%; max-width: 240px; height: 4px; margin-top: 4px;
  border: 0; border-radius: 24px; background: var(--suede-90); overflow: hidden;
  -webkit-appearance: none; appearance: none;
}
.file-bar::-webkit-progress-bar { background: var(--suede-90); border-radius: 24px; }
.file-bar::-webkit-progress-value { background: var(--carbon-10); border-radius: 24px; }
.file-bar::-moz-progress-bar { background: var(--carbon-10); border-radius: 24px; }
.file-bar-soft::-webkit-progress-value { background: var(--sage-55); }
.file-actions { grid-column: 2; grid-row: 1 / span 2; justify-self: end; display: flex; align-items: center; gap: 2px; }
.file-act {
  padding: 4px 8px; border: 0; border-radius: 6px; background: none;
  font-family: var(--font-ui); font-size: 12px; color: var(--carbon-40); cursor: pointer;
}
.file-act:hover { background: var(--suede-90); color: var(--carbon-10); }
.file-act-danger { color: var(--danger); }
.file-more { font-size: 16px; line-height: 20px; padding: 2px 8px; }
/* The ⋯ menu on a file row (phase 4b, F35): Open and Download, under the
   ⋯, as the project name's menu draws it. Redline's own. */
.file, .file-actions { position: relative; }
.file-menu {
  position: absolute; top: 100%; right: 0; z-index: 10; display: flex; flex-direction: column; min-width: 160px;
  margin-top: 4px; padding: 6px; list-style: none; border: 1px solid var(--carbon-95); border-radius: 10px;
  background: var(--suede-100); box-shadow: 0 6px 24px rgba(37, 36, 31, 0.12);
}
.file-menu[hidden] { display: none; }
.file-menu-item {
  display: block; width: 100%; min-height: 36px; padding: 8px 10px; border: 0; border-radius: 6px; background: none;
  font-family: var(--font-ui); font-size: 14px; line-height: 20px; text-align: left; text-decoration: none;
  color: var(--carbon-10); cursor: pointer;
}
.file-menu-item:hover { background: var(--suede-90); }
.file-menu-item:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: -2px; }
.file-spin {
  flex: 0 0 24px; width: 24px; height: 24px; border: 2px solid var(--sage-80); border-top-color: var(--sage-30);
  border-radius: 50%; animation: file-spin 0.9s linear infinite;
}
@keyframes file-spin { to { transform: rotate(360deg); } }
.file-menu-danger { color: var(--danger); }
/* B2: the file view's Download menu (lib/file-drawing.js) is the same
   .file-menu, hung under the toolbar's Download. Its holder takes no room
   (the negative margin gives back the toolbar's gap), so the menu's right
   edge meets the button's. */
.annot-download-menu { position: relative; align-self: stretch; width: 0; margin-left: -6px; }
/* Where the toolbar wraps, Download can start a row, and a menu hung from
   its right edge runs off the window's left edge (the walk of 2026-10-31).
   Where the browser can anchor, the menu hangs from the button's left edge
   instead, and flips to its right edge when the room on the right runs
   out. Elsewhere the rule above stands. */
@supports (anchor-name: --a) {
  [data-file-download] { anchor-name: --file-download; }
  .annot-download-menu { position: static; }
  .annot-download-menu .file-menu {
    position-anchor: --file-download; top: anchor(bottom); right: auto; left: anchor(left);
    position-try-fallbacks: flip-inline;
  }
}
/* The page's own line over the columns (R14: Theode isn't answering). */
.page-notice { margin-top: 16px; }

/* ── The confirm dialog (lib/confirm.js; phase 6, spec 7.5, 7.8): Remove,
   Delete project and Delete my account ask here first. A dimmed page, and
   the panel's card in the middle. ─────────────────────────────────────── */
.confirm-back {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(37, 36, 31, 0.36);
}
.confirm {
  width: 100%; max-width: 460px; padding: 24px; border-radius: 14px; background: var(--suede-100);
  border: 1px solid var(--carbon-95); box-shadow: 0 12px 40px rgba(37, 36, 31, 0.24); font-family: var(--font-ui);
}
.confirm-text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--carbon-10); overflow-wrap: anywhere; }
.confirm-field { margin-top: 20px; }
.confirm-field .field-input { height: 44px; border-radius: 10px; padding: 0 12px; font-size: 16px; }
.confirm-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.confirm-actions .btn { min-width: 96px; height: 40px; border-radius: 10px; }

/* ── Share (share links spec 3.1, 3.2; mockup boards 1 and 2). The dark
   pill on the head row (lib/share-pill.js), 40 px, level with the way
   back; and the share box it opens (lib/share.js), under it at the right
   over a dimmed page. The icons are strokes on a 24-unit box. ─────────── */
.share-pill { flex: none; min-width: 0; gap: 8px; height: 40px; padding: 0 20px 0 16px; font-weight: 700; }
/* The Ask pill after it (Ask spec 3; the Ask block below). */
.ask-pill { flex: none; min-width: 0; gap: 8px; height: 40px; padding: 0 20px 0 16px; font-weight: 700; }
/* "Put it in the order" after Ask, on a drawing opened on a variation (Variations phase 2, mockup 11d). */
.fv-order-pill { flex: none; min-width: 0; height: 40px; padding: 0 20px; font-weight: 700; }
.fv-order-pill:disabled { cursor: default; opacity: 0.6; }
/* On the project page the two pills keep together at the head's end (the Ask mockup's .head-pills). */
.head-pills { flex: none; display: flex; align-items: center; gap: 8px; }
.share-icon {
  flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.share-back {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 100px 120px 16px 16px; overflow-y: auto; background: rgba(37, 36, 31, 0.4);
}
.share-box {
  display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 480px; padding: 26px 28px 24px;
  border-radius: 18px; background: var(--suede-100); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
  font-family: var(--font-ui); color: var(--carbon-10); text-align: left;
}
.share-head { display: flex; align-items: center; gap: 10px; }
.share-head .share-icon { width: 20px; height: 20px; }
.share-title { margin: 0; font-family: var(--font-title); font-size: 22px; font-weight: 400; line-height: 1.3; }
.share-close {
  flex: none; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 50%; background: none;
  font-size: 22px; color: var(--carbon-30); cursor: pointer;
}
.share-close:hover { background: var(--suede-90); }
.share-body { margin: 0; font-size: 15px; line-height: 1.5; color: var(--carbon-30); }
.share-link { display: flex; flex-direction: column; gap: 6px; }
.share-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--carbon-40); }
.share-row { display: flex; gap: 8px; }
.share-field {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--suede-70);
  border-radius: 10px; background: #ffffff; font-family: var(--font-mono); font-size: 12px; color: var(--carbon-10);
}
.share-copy { flex: none; min-width: 0; height: 44px; gap: 8px; padding: 0 18px 0 14px; font-weight: 700; }
.share-copy .share-icon { width: 16px; height: 16px; }
.share-status { min-height: 18px; margin: 0; font-size: 13px; color: var(--sage-40); }
.share-facts {
  display: flex; flex-direction: column; gap: 10px; margin: 0; padding-top: 14px; border-top: 1px solid var(--carbon-90);
  font-size: 14px; color: var(--carbon-30);
}
.share-fact { display: flex; justify-content: space-between; gap: 16px; }
.share-fact dd { margin: 0; color: var(--carbon-10); text-align: right; }
.share-stop {
  align-self: flex-start; height: 44px; padding: 0; border: 0; background: none; font-family: var(--font-ui);
  font-size: 14px; color: var(--danger); text-decoration: underline; cursor: pointer;
}
.share-close:focus-visible, .share-stop:focus-visible, .share-field:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.share-box .helper { margin: 0; }
/* A call that failed: the Unavailable panel's words and Try again. */
.share-failed { margin: 0; font-size: 15px; line-height: 1.5; color: var(--carbon-10); }
.share-box .auth-head-centred { margin: 0; }
.share-box .actions { justify-content: center; margin-top: 16px; }
.share-box .btn-slim { height: 44px; font-size: 14px; }
/* The landing's line after an account delete (pages/index.js). */
.landing-notice {
  margin: 0 0 20px; padding: 12px 16px; border-radius: 10px; background: var(--sage-95);
  font-size: 15px; line-height: 1.45; color: var(--carbon-10); text-align: center;
}
@media (prefers-reduced-motion: reduce) { .file-spin { animation: none; } }
/* The severity dots after "7 flags": the three mark colours, in order. */
.sev-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.sev-dot { width: 8px; height: 8px; border-radius: 50%; }
.sev-dot-3 { background: var(--sev-3); }
.sev-dot-2 { background: var(--sev-2); }
.sev-dot-1 { background: var(--sev-1); }

/* A file moved to the other column (requirement 4): a dashed line under
   its row, .issue-moved's shape, that says where it was dropped and
   offers the way back. Quiet, in the column it landed in. */
.file-moved {
  grid-column: 1 / -1; display: block;
  margin-top: 6px; padding: 10px 12px; border: 1px dashed var(--carbon-40); border-radius: 10px;
  font-size: 13px; line-height: 1.45; color: var(--carbon-40);
}
.file-moved .linkish { font-size: 13px; margin-left: 6px; }

/* The upload notice at the window's bottom right, as app.css draws it. */
.upnote {
  position: fixed; bottom: 16px; right: 16px; z-index: 20; width: 320px; max-width: calc(100vw - 32px);
  padding: 24px; border-radius: 12px; background: var(--sage-40); font-family: var(--font-ui);
}
.upnote-count { margin: 0; font-size: 16px; line-height: 20px; color: var(--sage-100); }
.upnote-line { margin: 4px 0 0; font-size: 14px; line-height: 18px; font-style: italic; color: var(--sage-90); }
.upnote-bar { display: block; width: 100%; height: 4px; margin-top: 16px; border: 0; border-radius: 24px; background: var(--sage-55); overflow: hidden; -webkit-appearance: none; appearance: none; }
.upnote-bar::-webkit-progress-bar { background: var(--sage-55); border-radius: 24px; }
.upnote-bar::-webkit-progress-value { background: var(--sage-100); border-radius: 24px; }

/* ── Results (08) ────────────────────────────────────────────────────── */
.results { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--carbon-90); }
.results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.results-title { font-family: var(--font-title); font-weight: 400; font-size: 22px; line-height: 28px; color: var(--carbon-5); }
.results-when { font-size: 13px; color: var(--carbon-40); }
.results-sum { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--carbon-40); max-width: 70ch; }
.results-sum b { color: var(--carbon-10); font-weight: 700; }
/* auto-fit (new-user walk 3 W3-14): the empty tracks collapse, so one
   drawing's card takes the full width and two take half each. */
.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; margin-top: 24px; }
.result-card {
  display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 16px;
  border-radius: 16px; background: var(--suede-100); box-shadow: 4px 4px 50px rgba(0, 0, 0, 0.05); border: 1px solid var(--carbon-95);
}
.result-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.result-card-head .result-open-top { margin-left: auto; font-size: 14px; color: var(--carbon-10); text-decoration: underline; }
.result-card-head img { width: 24px; height: 24px; flex: none; }
.result-name { font-size: 16px; font-weight: 700; color: var(--carbon-10); min-width: 0; overflow-wrap: anywhere; }
.result-count { font-size: 13px; color: var(--carbon-40); }
/* A wide card's flag rows flow in up to three columns of at least 300 px
   (W3-14); a narrow card keeps one. */
.result-flags {
  list-style: none; display: grid; gap: 6px 10px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(300px, calc((100% - 20px) / 3))), 1fr));
}
.result-flag { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--carbon-95); font-size: 14px; line-height: 1.4; }
.result-flag-rule { grid-column: 2; font-size: 12px; color: var(--carbon-40); }
.result-open { align-self: flex-start; font-size: 14px; color: var(--carbon-10); text-decoration: underline; }
.result-none { font-size: 14px; color: var(--ok); }
.sources-used { margin-top: 24px; font-size: 13px; line-height: 1.6; color: var(--carbon-40); }
.sources-used b { color: var(--carbon-10); font-weight: 700; }
/* The light "can miss things" line under the results (Redline's own):
   the weight of a footer line, in the same voice as the sources line. */
.results-note { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--carbon-40); }

/* ── The file view (09): a slim row over the drawn sheet, from app.css's
   F06 and annotation sections. The details column is cut (Nolan,
   2026-10-23): the way back sits at the row's left with the file's name
   beside it, small, muted and on one line, so the sheet and its flags
   share the full width. ─────────────────────────────────────────────── */
.fv-screen { margin-bottom: 0; padding: 0; overflow: clip; border-radius: 24px 24px 0 0; background: var(--wood-100); }
.fv { position: relative; }
/* The account page's facts keep the details' label and value look. */
.details-label { font-size: 14px; line-height: 18px; font-weight: 700; color: var(--carbon-40); }
.details-value { margin: 8px 0 0; font-size: 16px; line-height: 20px; color: var(--carbon-30); overflow-wrap: anywhere; }
.details-value + .details-label { margin-top: 28px; }
.fv-main { min-width: 0; padding: 16px 32px 32px; }
.fv-back { flex: none; gap: 8px; min-width: 0; height: 40px; padding: 0 16px; }
.fv-back::before { content: "\2190"; font-size: 16px; line-height: 1; }
.fv-name {
  flex: 1 1 auto; min-width: 0; font-family: var(--font-ui); font-weight: 400; font-size: 13px; line-height: 18px;
  color: var(--carbon-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fv-heading { font-family: var(--font-title); font-weight: 400; font-size: 20px; line-height: 24px; color: var(--carbon-5); }
/* A rule document's panel keeps the 12 px the sheet keeps below the row of
   pills (walk 2026-11-03 A4), on itself, so the gap stays when docview
   hides the heading (review D5). Full screen has its own padding. */
.annot-host[data-document-panel]:not(:fullscreen) { padding-top: 12px; }
/* The file's name shows once (walk 2 W2-11): where the top bar's breadcrumb
   names it, the row's copy stays only as the page's heading for a screen
   reader. A phone's breadcrumb shows Projects alone, and paper has no top
   bar, so there the row's name shows. */
@media screen and (min-width: 641px) {
  .fv-top .fv-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
.fv-nav { display: flex; justify-content: flex-end; gap: 8px; }
.fv-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.fv-icon:hover:not(:disabled) { background: var(--suede-90); }
.fv-icon:disabled { opacity: 0.35; cursor: default; }
.fv-icon-img { display: block; width: 24px; height: 24px; }
.fv-top { display: flex; align-items: center; gap: 16px; }
.fv-top .fv-nav { flex: none; margin-left: auto; }
.annot-status { font-size: 14px; color: var(--carbon-40); margin: 6px 0 0; }

.annot-host { container: annot-host / inline-size; }
/* The sheet keeps its own height beside a long panel (below 1100 px the
   page scrolls; from 1100 px the layout stretches both to the window). */
.annot-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; margin-top: 12px; }
/* Beside the sheet from 960 px (app.css says 1080: its sheets are
   portrait A1s; Redline's sample is a landscape A3, and a 1440 window's
   column is about 1030 px). */
@container annot-host (min-width: 960px) {
  .annot-layout { grid-template-columns: minmax(0, 1fr) 360px; }
  /* Hide panel (feedback round 4.1.9): the sheet takes the width. */
  .annot-host[data-panel-hidden] .annot-layout { grid-template-columns: minmax(0, 1fr); }
  .annot-host[data-panel-hidden] :is(.mk-side, .annot-panel) { display: none; }
  /* One place says a check runs (4.1.9, ruling RF-2): the status line's
     check words step back while the panel beside the sheet shows its block.
     The Ask dock hides the panel (its rule reads the same body marks), so
     with the dock open the line keeps them; a full-screen sheet keeps its
     panel, so there they step back. */
  .annot-host:not([data-panel-hidden]):is(:fullscreen, body:not([data-ask-open]) *, body[data-ask-flags] *):has(.mk-checking, .mk-checking-viewer) .mk-check { display: none; }
  /* The drawing's hint pill (sketch view spec 4.4.5, E3, I1): when the
     check words are its only words, it draws nothing, by the same
     condition, read from the host's width as above. */
  .annot-host:not([data-panel-hidden]):is(:fullscreen, body:not([data-ask-open]) *, body[data-ask-flags] *):has(.mk-checking, .mk-checking-viewer) .mk-status:not(:has(.mk-hint:not(:empty), .mk-pointer:not(:empty))) { display: none; }
}
/* Stacked under the panel's breakpoint, there is nothing to hide. */
@container annot-host (max-width: 959.98px) {
  [data-file-panel] { display: none; }
}
.annot { position: relative; min-width: 0; border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; background: var(--field); }
.annot-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-bottom: 1px solid var(--edge); background: var(--suede-100); }
.annot-tool { padding: 4px 10px; border: 1px solid var(--edge-firm); border-radius: 999px; background: var(--suede-100); font-family: var(--font-ui); font-size: 13px; color: var(--carbon-10); cursor: pointer; }
.annot-scope { display: inline-flex; gap: 6px; }
.annot-tool[aria-pressed="true"], .annot-tool[aria-checked="true"] { background: var(--carbon-10); color: var(--carbon-100); }
.annot-select { padding: 4px 8px; border: 1px solid var(--edge-firm); border-radius: 999px; background: var(--suede-100); font-family: var(--font-ui); font-size: 13px; color: var(--carbon-10); }
.annot-scroller { position: relative; height: calc(100vh - 280px); min-height: 560px; overflow: auto; background: var(--wood-95); }
.annot-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 100%; padding: 16px 24px; }
.annot-sheet { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 1100px; }
.annot-page { position: relative; background: var(--annot-paper); box-shadow: 0 1px 4px rgba(37, 36, 31, 0.15); }
.annot-img { display: block; width: 100%; height: auto; }
.annot-marks { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
/* The reviewer's layer (lib/markup-overlay.js, spec 2026-10-27 reviewer
   flags §7.2): one svg per page, under .annot-marks. It takes no events
   but on the reviewer's own shapes; with a drawing tool it takes every
   one; while panning none. */
.mk-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mk-layer.mk-drawing { pointer-events: all; cursor: crosshair; }
.mk-layer.mk-drawing .mk { pointer-events: none; }
.mk-layer.mk-panning, .mk-layer.mk-panning * { pointer-events: none; }
.mk-theode, .mk-theode * { pointer-events: none; }
/* While a tool draws, a pin under the pointer takes no press (annot.js's
   .annot-marks sits over the layer). */
.annot-page.mk-page-drawing .annot-marks * { pointer-events: none; }
.mk-own:not(.mk-draft) { cursor: pointer; }
.mk-own:not(.mk-draft) .mk-hit { pointer-events: visibleStroke; }
.mk-draft, .mk-draft * { pointer-events: none; }
.mk-hit { stroke: transparent; fill: none; pointer-events: none; }
.mk-hit-box { fill: transparent; stroke: none; }
.mk-empty-text { stroke: var(--carbon-40); stroke-width: 0.8; stroke-dasharray: 3 2; }
/* The font markup-text.js measures in; every word the overlay draws has it. */
.mk-words { font-family: 'Liberation Sans', Arial, sans-serif; }
/* A text mark read on the card looks as the sheet draws it: its words in the
   mark's colour, a 1 pt border, a white ground at 85 %. The colour is a
   data attribute, not a style attribute, which the CSP refuses. */
.contra-text.mk-text-note { color: #1f5fa8; border: 1px solid currentColor; background: rgb(255 255 255 / 0.85); padding: 3px; white-space: pre-wrap; }
.mk-text-note[data-colour="#1f5fa8"] { color: #1f5fa8; } .mk-text-note[data-colour="#2f7d4f"] { color: #2f7d4f; }
.mk-text-note[data-colour="#c2410c"] { color: #c2410c; } .mk-text-note[data-colour="#7c3aed"] { color: #7c3aed; }
.mk-text-note[data-colour="#a16207"] { color: #a16207; } .mk-text-note[data-colour="#111111"] { color: #111111; }
.mk text { pointer-events: none; }
.mk-dismissed { opacity: 0.35; }
.mk-draft { opacity: 0.85; }
.mk-highlight { mix-blend-mode: multiply; }
.mk-selection { fill: none; stroke: var(--carbon-10); stroke-width: 1.2; stroke-dasharray: 4 3; pointer-events: none; }
/* The markup toolbar and the status line (lib/markup-dock.js since the
   Redline sketch view, spec 2026-11-07, 4.4.3: the dock's own rules are in
   its section at the end). */
.mk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--edge); background: var(--suede-100); }
.mk-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mk-link:disabled { opacity: 0.45; cursor: not-allowed; }
.mk-icon { display: block; width: 18px; height: 18px; }
.mk-scale-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 2px 8px; border-radius: 999px; font-family: var(--font-ui); font-size: 12px; color: var(--ink); }
.mk-link { padding: 0; border: 0; background: none; font-family: var(--font-ui); font-size: 12px; color: var(--ink); text-decoration: underline; cursor: pointer; }
/* A dimension or measure drawn with no scale: the chip pulses once (§4.5). */
.mk-scale-chip.mk-pulse { animation: mk-pulse 0.9s ease-out 1; }
@keyframes mk-pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 80, 80, 0.55); background: var(--sandstone-100); } 100% { box-shadow: 0 0 0 10px rgba(220, 80, 80, 0); background: transparent; } }
/* Reduced motion: no spreading ring, only the tint, once, fading out. */
@keyframes mk-tint { 0% { background: var(--sandstone-100); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .mk-scale-chip.mk-pulse { animation: mk-tint 1.2s ease-out 1; }
}
.mk-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 10px; border-top: 1px solid var(--edge); font-family: var(--font-ui); font-size: 12px; color: var(--helper); }
.mk-hint { flex: 1 1 220px; color: var(--ink); }
.mk-pointer { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
/* The Calibrate dialog (lib/calibrate.js, spec 2026-10-27 reviewer flags
   §4.7, the mockup's dialog): a modal over the page, as .confirm is. */
.mk-calib-back { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(37, 36, 31, 0.36); }
.mk-calib { width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto; padding: 20px; border-radius: 16px; background: var(--suede-100); border: 1px solid var(--carbon-95); box-shadow: 0 12px 40px rgba(37, 36, 31, 0.24); font-family: var(--font-ui); color: var(--ink); }
.mk-calib-form { display: flex; flex-direction: column; gap: 12px; }
.mk-calib-title { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: 19px; color: var(--carbon-10); }
.mk-calib-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--carbon-40); }
.mk-calib-off { font-style: italic; }
.mk-calib-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mk-calib-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--carbon-95); border-radius: 10px; }
.mk-calib-name { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--carbon-10); }
.mk-calib-src { flex-basis: 100%; }
.mk-calib-dim { opacity: 0.55; }
.mk-calib-field { display: inline-flex; align-items: center; gap: 6px; }
.mk-calib-field input { width: 88px; height: 32px; padding: 0 8px; border: 1px solid var(--edge-firm); border-radius: 8px; background: var(--suede-100); font-family: var(--font-ui); font-size: 13px; color: var(--carbon-10); }
.mk-calib-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-calib-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mk-calib :focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
.mk-calib-error { margin: 0; }
.mk-calib-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* The Selected card (lib/markup-card.js, spec 2026-10-27 reviewer flags
   §4.4, mockup 10): the .contra-card classes, with the fields, the rule
   picker, Style, the swatches and the toast. */
.mk-card-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mk-card { align-items: stretch; gap: 12px; }
.mk-card .contra-title { margin: 0; }
.mk-raised { font-size: 12px; color: var(--carbon-40); text-align: right; }
.mk-kind { background: var(--carbon-10); color: var(--carbon-100); }
/* The card is .contra-card's flex-start column; the fields take its full
   width (Nolan 2026-10-30: Title and Why were too skinny). */
.mk-props { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; align-self: stretch; }
.mk-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-f-full { grid-column: 1 / -1; }
.mk-lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--carbon-40); }
.mk-f input[type="text"], .mk-f input[type="number"], .mk-f select, .mk-f textarea, .mk-picker input[type="search"] {
  width: 100%; min-width: 0; padding: 6px 9px; border: 1px solid var(--edge-firm); border-radius: 8px;
  background: var(--suede-100); font-family: var(--font-ui); font-size: 13px; color: var(--carbon-10); }
.mk-f textarea { resize: vertical; min-height: 64px; line-height: 1.4; }
.mk-f input[type="range"] { width: 100%; accent-color: var(--carbon-10); }
.mk-f input:disabled, .mk-f select:disabled, .mk-f textarea:disabled { opacity: 0.55; }
.mk-f :focus-visible, .mk-picker :focus-visible, .mk-seg button:focus-visible, .mk-sw:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
.mk-seg { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 999px; background: var(--suede-90); }
.mk-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font-family: var(--font-ui); font-size: 13px; color: var(--carbon-40); cursor: pointer; }
.mk-seg button[aria-pressed="true"] { background: var(--suede-100); color: var(--carbon-10); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.mk-seg button:disabled { cursor: not-allowed; opacity: 0.55; }
.mk-block { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--carbon-95); }
.mk-note { font-size: 12px; color: var(--carbon-40); }
/* A variation's shape names no severity's colour (markup-card.js styleBlock's empty note). */
.mk-style .mk-note:empty { display: none; }
.mk-edited { margin: 0; font-size: 12px; font-style: italic; color: var(--carbon-40); }
.mk-readout { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--carbon-10); }
.mk-typed { overflow-wrap: anywhere; }
.mk-style > summary { width: max-content; font-family: var(--font-ui); font-size: 14px; color: var(--carbon-40); cursor: pointer; }
.mk-style[open] > summary { margin-bottom: 8px; }
.mk-delete { color: var(--danger); }
.mk-card-out { opacity: 0.85; }
.mk-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-sw { width: 24px; height: 24px; padding: 0; border: 2px solid var(--suede-100); border-radius: 50%; box-shadow: 0 0 0 1px var(--edge-firm); cursor: pointer; }
.mk-sw[aria-checked="true"] { box-shadow: 0 0 0 2px var(--carbon-10); }
.mk-sw:disabled { cursor: not-allowed; opacity: 0.55; }
/* redline_marks.COLORS, in order. */
.mk-sw-1 { background: #1f5fa8; } .mk-sw-2 { background: #2f7d4f; } .mk-sw-3 { background: #c2410c; }
.mk-sw-4 { background: #7c3aed; } .mk-sw-5 { background: #a16207; } .mk-sw-6 { background: #111111; }
.mk-picker { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-opts { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; border: 1px solid var(--edge-firm); border-radius: 8px; }
.mk-opt { display: block; width: 100%; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--carbon-95); background: none; font-family: var(--font-ui); font-size: 13px; text-align: left; color: var(--carbon-10); cursor: pointer; }
.mk-opt:last-child { border-bottom: 0; }
.mk-opt:hover, .mk-opt[aria-selected="true"] { background: var(--suede-90); }
.mk-opt-small { margin-top: 2px; font-size: 11px; color: var(--carbon-40); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mk-failed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--danger); }
.mk-toast { position: fixed; left: 50%; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: var(--carbon-10); color: var(--carbon-100); font-family: var(--font-ui); font-size: 13px; transform: translateX(-50%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.mk-toast .mk-link { color: var(--carbon-100); font-size: 13px; }
/* The list and the layers (reviewer flags 4.8, 4.12; mockup 10). */
.mk-layers { display: flex; flex-direction: column; gap: 4px; }
.mk-layers-head { margin: 0 0 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--helper); }
.mk-layer-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--edge); border-radius: 10px; background: var(--suede-100); }
.mk-layer-name { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); }
.mk-layer-name small { color: var(--helper); }
.mk-lbtn { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--ink); cursor: pointer; }
.mk-lbtn:hover { background: var(--suede-90); }
.mk-lbtn:focus-visible, .mk-pfilter :focus-visible, .mk-prow-open:focus-visible, .mk-dl-switch:focus-visible, .mk-page-link:focus-visible, .mk-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mk-lbtn .mk-icon { width: 16px; height: 16px; }
/* The file view with the markup layer (lib/file-drawing.js mounting
   lib/markup-side.js; Task 22): the side column beside the sheet holds
   Layers, the stepper, the Selected card and its toast line; the hosts
   over and under the sheet take the toolbar, the status line and the list.
   An empty host takes no room. */
.mk-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mk-card-host:empty, .mk-toolbar-host:empty, .mk-status-host:empty { display: none; }
.mk-side-toast { margin: 0; font-size: 13px; color: var(--carbon-40); }
.mk-side-toast:empty { display: none; }
.mk-toolbar-host, .mk-status-host { min-width: 0; }
/* ── The Areas and Setbacks layers (measure layers spec 4.8-4.10; mockup
   M1-M3; lib/measure-draw.js, measure-side.js, measure-card.js). ─────── */
/* The sheet: one svg per page under the reviewer's layer and the pins.
   It takes no events but on its shapes and chips; none while the sheet
   pans (the Pan tool, Space, or a press that moved) or a tool draws. Its
   viewBox is the page in CSS px, so these widths are screen px. */
.ms-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ms-layer .ms-shape, .ms-layer .ms-chip { cursor: pointer; pointer-events: visiblePainted; }
.ms-layer .ms-halo, .ms-layer .ms-edge, .ms-layer .ms-dim, .ms-layer .ms-tick, .ms-layer .ms-chip text { pointer-events: none; }
.ms-layer.mk-panning, .ms-layer.mk-panning * { pointer-events: none; }
.annot-page.mk-page-drawing .ms-layer * { pointer-events: none; }
/* A selected room's own setback lines, shown while Setbacks is off: they
   explain the room and take no press. */
.ms-layer .ms-passive, .ms-layer .ms-passive * { pointer-events: none; }
/* Rooms: sage-45 at 10 % with a 1 px outline, dashed when estimated. */
.ms-area { fill: var(--sage-45); fill-opacity: 0.1; stroke: var(--carbon-40); stroke-width: 1px; stroke-linejoin: round; }
.ms-area.ms-estimated { stroke-dasharray: 4 3; }
/* A footprint or site: an outline in long dashes, so the rooms inside stay
   readable; a press inside it, on no room, reaches the sheet. */
.ms-area.ms-outline { fill-opacity: 0; stroke: var(--carbon-30); stroke-width: 1.6px; stroke-dasharray: 12 5; }
.ms-layer .ms-area.ms-outline { pointer-events: visibleStroke; }
/* Selected: 26 % (a footprint 12 %), a 2 px ink outline on a white halo. */
.ms-area.ms-selected { fill-opacity: 0.26; stroke: var(--carbon-10); stroke-width: 2px; stroke-dasharray: none; }
.ms-area.ms-outline.ms-selected { fill-opacity: 0.12; }
.ms-layer .ms-area.ms-outline.ms-selected { pointer-events: visiblePainted; }
.ms-halo { fill: none; stroke: #ffffff; stroke-width: 6px; stroke-linejoin: round; }
/* Setbacks: a dimension line with a tick at each end; building lines in
   ink, room lines lighter and thinner; the selected line's edge heavier. */
.ms-setback .ms-hit { stroke: transparent; stroke-width: 12px; }
.ms-setback .ms-dim { stroke: var(--carbon-10); stroke-width: 1.3px; }
.ms-setback .ms-tick { stroke: var(--carbon-10); stroke-width: 1.3px; }
.ms-setback.ms-estimated .ms-dim { stroke-dasharray: 5 3; }
.ms-setback.ms-room-line .ms-dim { stroke: var(--carbon-40); stroke-width: 0.9px; }
.ms-setback.ms-room-line .ms-tick { stroke: var(--carbon-40); stroke-width: 0.9px; }
.ms-setback.ms-selected .ms-dim { stroke: var(--carbon-10); stroke-width: 2px; stroke-dasharray: none; }
.ms-edge { stroke: var(--sage-40); stroke-width: 5px; stroke-opacity: 0.55; stroke-linecap: round; }
/* Chips: name and figure on white, dashed when estimated; ink when selected. */
.ms-chip rect { fill: #ffffff; fill-opacity: 0.92; stroke: var(--carbon-55); stroke-width: 0.6px; }
.ms-chip.ms-estimated rect { stroke-dasharray: 3 2; }
.ms-chip.ms-selected rect { fill: var(--carbon-10); fill-opacity: 1; stroke-dasharray: none; }
.ms-chip-t { font-family: var(--font-ui); font-size: 10px; fill: var(--carbon-10); }
.ms-chip-p { font-family: var(--font-mono); font-size: 8.5px; fill: var(--carbon-40); }
.ms-chip.ms-selected .ms-chip-t { fill: #ffffff; }
.ms-chip.ms-selected .ms-chip-p { fill: var(--carbon-90); }
/* A measure layer's state slot under its row and its list (spec 4.9). */
.ms-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ms-side-head { margin: 0; }
.ms-side .ms-line, .ms-side .ms-said { margin: 0; line-height: 1.45; }
/* What a press of Measure or Check again said. The live region stays in
   the layout while it is empty, so a screen reader hears its first line;
   empty, it takes back the column's gap. */
.ms-side .ms-said:empty { margin-top: -12px; }
.ms-side .mk-ways .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.ms-list { display: flex; flex-direction: column; gap: 2px; }
.ms-group { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--carbon-40); }
.ms-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: baseline; width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: none; text-align: left; font-family: var(--font-ui); font-size: 13px; color: var(--ink); cursor: pointer; }
.ms-row:hover { background: var(--suede-90); }
.ms-row[aria-current="true"] { border-color: var(--carbon-10); background: var(--suede-100); }
.ms-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ms-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-row-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-row-tier { grid-column: 1 / -1; font-size: 11px; color: var(--helper); }
.ms-hidden-row { padding: 4px 8px; font-size: 13px; color: var(--helper); }
.ms-notes { margin: 0; padding-left: 14px; font-size: 12px; line-height: 1.45; color: var(--carbon-30); }
.ms-light { margin: 0; font-size: 12px; color: var(--helper); }
/* The card's figure and tier (mockup M3). */
.ms-figure { align-self: stretch; display: flex; flex-direction: column; gap: 2px; }
.ms-value { font-family: var(--font-title); font-size: 26px; line-height: 1.15; color: var(--carbon-5); font-variant-numeric: tabular-nums; }
.ms-words { font-size: 14px; color: var(--carbon-10); }
.ms-words b { font-weight: 700; }
.ms-tier { display: inline-block; padding: 0 8px; border: 1px solid var(--carbon-40); border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--carbon-40); }
.ms-tier-measured { border-style: solid; }
.ms-tier-estimated { border-style: dashed; }
.ms-card .mk-block .mk-note { margin: 0; line-height: 1.45; }
/* The download panel (lib/download-panel.js, spec §4.10, mockup 10's .dl),
   hung under the toolbar's Download as the menu is. */
/* The panel is fixed (walk 2026-11-03, A8: absolute, it hung from .fv's
   bottom, under the window, and .annot and .fv-body clip): download-panel.js
   places it from Download's box, under it or over it (--dl-top or
   --dl-bottom, --dl-left), and caps it to the room on that side
   (--dl-room); the choices scroll in .dl-body and .dl-foot keeps Download
   and Cancel in view. */
.dl-panel { position: fixed; top: var(--dl-top, auto); bottom: var(--dl-bottom, auto); left: var(--dl-left, auto); z-index: 30; width: min(420px, calc(100vw - 32px)); max-height: var(--dl-room, calc(100dvh - 32px)); overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--edge); border-radius: 16px; background: var(--suede-100); box-shadow: 0 12px 40px rgba(37, 36, 31, 0.24); font-family: var(--font-ui); color: var(--carbon-10); text-align: left; }
.dl-body { display: flex; flex-direction: column; gap: 12px; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: -4px; padding: 4px; }
.dl-foot { display: flex; flex-direction: column; gap: 12px; flex: none; }
.dl-title { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: 19px; color: var(--carbon-10); }
.dl-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.dl-check input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--carbon-10); }
.dl-check input:disabled + span { opacity: 0.5; }
.dl-check small { display: block; font-size: 12px; color: var(--carbon-40); }
.dl-sum { max-height: 160px; overflow: auto; border: 1px solid var(--edge); border-radius: 8px; }
.dl-sum table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dl-sum th, .dl-sum td { padding: 4px 8px; text-align: left; }
.dl-sum th { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--carbon-40); }
.dl-sum-none { margin: 0; padding: 8px; font-size: 13px; color: var(--carbon-40); }
.dl-file { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--suede-90); font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.dl-note { margin: 0; font-size: 13px; color: var(--carbon-40); }
.dl-name { margin: 0; font-size: 13px; }
.dl-ways { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-go[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.dl-send { margin: 0; padding-top: 10px; border-top: 1px solid var(--edge); font-size: 13px; }
.mk-view-only { display: none; margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--edge); font-size: 13px; color: var(--helper); }
.mk-view-only.mk-on { display: block; }
/* The panel's lists (feedback round 4.1.4-4.1.8; mockup): a row is the open
   button, a small where line and, at the right, the In download switch. */
.mk-flag-list, .mk-mark-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mk-prows { list-style: none; margin: 0; padding: 0; }
.mk-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2px 8px; padding: 8px 4px; border-bottom: 1px solid var(--edge); }
.mk-prow:hover { background: var(--suede-90); }
.mk-prow:has(> .mk-prow-open[aria-current="true"]) { background: var(--suede-90); box-shadow: inset 0 1px 0 var(--ink), inset 0 -1px 0 var(--ink); }
.mk-prow-open { grid-column: 1; display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; text-align: left; color: var(--ink); cursor: pointer; }
.mk-prow-open[aria-current="true"] { font-weight: 700; }
.mk-prow-open .mk-icon { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.mk-prow-title { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
/* The where line's parts are sibling spans with no text between them: a dot goes before each later part. */
.mk-prow-where { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding-left: 0; font-size: 12px; color: var(--helper); }
/* The line starts under the title: past the flag's chip or the mark's icon, flush for an orphan. */
.mk-prow:has(> .mk-prow-open .mk-num) > .mk-prow-where { padding-left: 30px; }
.mk-prow:has(> .mk-prow-open > .mk-icon:first-child) > .mk-prow-where { padding-left: 22px; }
.mk-prow-where > * + *::before { content: "\00b7"; margin-right: 6px; }
.mk-prow-where:empty { display: none; }
.mk-page-link { padding: 0 1px; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.mk-page-link:hover { color: var(--ink); }
.mk-where { margin: 2px 0 8px; font-size: 12px; color: var(--helper); }
.mk-prow > .mk-dl-switch, .mk-prow > .mk-dl-state { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.mk-dl-switch { min-height: 28px; padding: 2px 10px; border: 1px solid var(--edge-firm); border-radius: 999px; background: var(--suede-100); font: inherit; font-size: 12px; color: var(--ink); white-space: nowrap; cursor: pointer; }
.mk-dl-switch[aria-checked="true"] { border-color: var(--ok); color: var(--ok); }
.mk-dl-switch[aria-checked="false"] { border-style: dashed; color: var(--helper); }
.mk-dl-switch[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.mk-dl-state { padding: 0; border: 0; background: none; font-size: 12px; color: var(--helper); white-space: nowrap; cursor: default; }
.mk-out .mk-prow-title { color: var(--helper); text-decoration: line-through; text-decoration-color: var(--edge-firm); }
.mk-orphan .mk-prow-title { grid-column: 1; text-decoration: none; }
.mk-orphan-delete { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
.mk-list-empty { margin: 0; padding: 8px 4px; font-size: 13px; color: var(--helper); }
.mk-unplaced { cursor: help; }
.mk-prow-measure { font-family: var(--font-mono); font-size: 12px; }
/* The filter: one Show select and one search field above the Flags rows. */
.mk-pfilter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-pfilter-label { font-size: 12px; color: var(--helper); }
.mk-pfilter select, .mk-pfilter input { height: 28px; padding: 0 8px; border: 1px solid var(--edge-firm); border-radius: 999px; background: var(--suede-100); font-family: var(--font-ui); font-size: 13px; color: var(--ink); }
.mk-pfilter input { flex: 1 1 120px; min-width: 0; max-width: 100%; }
/* Back to the list (card state), above the card. */
.mk-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 8px; margin-left: -8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.mk-back:hover { background: var(--suede-90); }
.mk-num { display: inline-grid; place-items: center; flex: none; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--carbon-100); }
.mk-num-3 { background: var(--sev-3); } .mk-num-2 { background: var(--sev-2); } .mk-num-1 { background: var(--sev-1); }
.mk-pill { display: inline-block; padding: 1px 8px; border: 1px solid var(--edge-firm); border-radius: 999px; font-size: 12px; white-space: nowrap; }
/* The printed list of flags is on paper only (4.1.8). */
.mk-print-host { display: none; }
/* doctext.js's selectable words over a document page (B2, spec 3.6): one
   transparent line each, above the canvas and under the marks. */
.doc-words { position: absolute; inset: 0; -webkit-user-select: none; user-select: none; }
.doc-words span { position: absolute; color: transparent; white-space: pre; transform-origin: 0 0; line-height: 1; cursor: text; -webkit-user-select: text; user-select: text; }
.doc-words span::selection { color: transparent; background: var(--doc-words-selection); }
/* A box tints the words it marks with its level's colour at low alpha,
   so the drawing shows through (on white paper it reads as multiply did),
   and underlines them in its level's line: 3 a double line, 2 solid, 1
   dotted. Never mix-blend-mode: it gave every box a GPU layer of its own
   and left the screen unpainted while scrolling (PR D, 2026-10-23). */
.annot-box { position: absolute; box-sizing: border-box; border: none; }
.annot-box.annot-sev-3 { background: rgba(189, 10, 10, 0.14); }
.annot-box.annot-sev-2 { background: rgba(220, 80, 80, 0.14); }
.annot-box.annot-sev-1 { background: rgba(91, 88, 78, 0.14); }
.annot-box::after { content: ""; position: absolute; top: 100%; right: 0; left: 0; }
.annot-box.annot-sev-3::after { border-bottom: 3px double var(--annot-sev-3); }
.annot-box.annot-sev-2::after { border-bottom: 2px solid var(--annot-sev-2); }
.annot-box.annot-sev-1::after { border-bottom: 2px dotted var(--annot-sev-1); }
.annot-box.is-selected { outline: 2px solid var(--annot-edge); outline-offset: 4px; }
/* On a rule document the lines sit close: an outline 4 px out ran through
   the next line and read as a strike-through (full walk N-02). The ring is
   drawn inside the selected clause's own box there. */
[data-doc-annot] .annot-box.is-selected { outline: none; box-shadow: inset 0 0 0 2px var(--annot-edge); }
/* An unrated cite box keeps its grey outline when selected (review round 1,
   item 7): the rule above outranks .annot-box.annot-sev-0's. */
[data-doc-annot] .annot-box.annot-sev-0.is-selected { outline: 2px solid var(--annot-sev-0); outline-offset: 2px; }
.annot-pin {
  position: absolute; width: 24px; height: 24px; padding: 0; transform: translate(-50%, -50%);
  border: 2px solid transparent; border-radius: 999px; box-shadow: 0 0 0 1px var(--annot-paper);
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
  cursor: pointer; pointer-events: auto;
}
.annot-pin.annot-sev-3 { background: var(--annot-sev-3); border-color: var(--annot-sev-3); color: var(--carbon-100); }
.annot-pin.annot-sev-2 { background: var(--annot-sev-2); border-color: var(--annot-sev-2); color: var(--carbon-5); }
.annot-pin.annot-sev-1 { background: var(--annot-sev-1); border-color: var(--annot-sev-1); color: var(--carbon-100); }
.annot-pin.is-selected { box-shadow: 0 0 0 2px var(--annot-paper), 0 0 0 5px var(--carbon-10); }
.annot-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.annot-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.annot-heading { margin: 8px 0 0; font-size: 14px; color: var(--carbon-5); }
.annot-count { margin: 0 0 6px; font-size: 14px; color: var(--carbon-40); }
.annot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.annot-chip { padding: 2px 10px; border: 1px solid var(--edge-firm); border-radius: 999px; background: var(--suede-100); font-family: var(--font-ui); font-size: 13px; color: var(--carbon-10); cursor: pointer; }
.annot-chip-3 { text-decoration: underline double var(--annot-sev-3) 2px; text-underline-offset: 3px; }
.annot-chip-2 { text-decoration: underline solid var(--annot-sev-2) 2px; text-underline-offset: 3px; }
.annot-chip-1 { text-decoration: underline dotted var(--annot-sev-1) 2px; text-underline-offset: 3px; }
/* An off chip is faded, as in the main app (app.css); an on chip keeps its colour. */
.annot-chip[aria-pressed="false"] { color: var(--carbon-40); opacity: 0.45; }
.annot-chip:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
.annot-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.annot-card {
  display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--carbon-95); border-radius: 10px;
  background: var(--suede-100); font-family: var(--font-ui); text-align: left; color: var(--carbon-10); cursor: pointer;
}
.annot-card[aria-pressed="true"] { border-color: var(--carbon-10); box-shadow: 0 0 0 1px var(--carbon-10); }
.annot-card-n { display: inline-block; min-width: 22px; margin-right: 6px; font-weight: 700; }
.annot-card-line { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.annot-card-rule { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--carbon-40); overflow-wrap: anywhere; }
.annot-card-flat { cursor: default; }
/* ‹ 3 of 17 › over the pressed card (ruling 6). */
.annot-step { display: flex; align-self: stretch; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: -8px; padding-top: 12px; font-size: 13px; color: var(--carbon-40); }
.annot-step-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--edge-firm); border-radius: 50%; background: var(--suede-100);
  font-family: var(--font-ui); font-size: 18px; line-height: 1; color: var(--carbon-10); cursor: pointer;
}
.annot-step-btn:hover:not(:disabled) { background: var(--suede-90); }
.annot-step-btn:disabled { opacity: 0.35; cursor: default; }
.annot-step-btn:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
.annot-step-at { min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }

/* The drawing view's sheet, as annot-view.js and annot.js build it
   (phase 4b, from app.css's annotation section). */
.annot-scroller { touch-action: pan-y; }
.annot-scroller.is-zoomed { touch-action: none; }
.annot-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--sandstone-100); color: var(--carbon-10); font-size: 14px; contain: inline-size; }
.annot-banner-text { flex: 1 1 auto; }
.annot-banner-open { padding: 4px 12px; }
.annot-canvas { display: block; width: 100%; height: 100%; }
.annot-tile { position: absolute; }
.annot-box.annot-sev-0 { outline: 2px solid var(--annot-sev-0); outline-offset: 2px; }
.annot-pin.annot-sev-0 { background: var(--annot-paper); border-color: var(--annot-sev-0); color: var(--carbon-10); }
.annot-pin.annot-group { width: auto; padding: 0 2px; transform: translate(-50%, -50%); }
.annot-group-list { position: absolute; z-index: 5; display: flex; flex-direction: column; width: 15rem; max-width: 80vw; max-height: 14rem; overflow-y: auto; margin-bottom: 26px; padding: 4px; border: 1px solid var(--carbon-95); border-radius: 10px; background: var(--suede-100); box-shadow: 0 4px 16px rgba(37, 36, 31, 0.18); pointer-events: auto; }
.annot-group-list[hidden] { display: none; }
.annot-group-item { min-height: 44px; padding: 6px 10px; border: none; border-radius: 6px; background: transparent; font-family: var(--font-ui); font-size: 13px; line-height: 1.3; text-align: left; color: var(--carbon-10); cursor: pointer; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.annot-group-item[hidden] { display: none; }
.annot-group-item:hover { background: var(--suede-95); }
.annot-group-item:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: -2px; }
.annot-card-row { display: flex; flex-direction: column; }

/* The pressed flag's card: issue-card.js's .contra-card, as the document
   viewer draws it beside the pages. */
.chat-sev { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; font-size: 12px; }
.chat-sev-1 { background: var(--annot-sev-1); color: var(--carbon-100); }
.chat-sev-2 { background: var(--annot-sev-2); color: var(--carbon-5); }
.chat-sev-3 { background: var(--annot-sev-3); color: var(--carbon-100); }
.contra-level-missing { background: var(--missing); color: var(--missing-ink); }
.contra-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0;
  padding: 12px 24px 24px; border-radius: 16px; background: var(--suede-100); box-shadow: 4px 4px 50px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--carbon-95);
}
.contra-head { display: flex; align-self: stretch; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
.contra-level { font-size: 12px; }
.contra-section { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--carbon-40); }
.contra-title { align-self: stretch; margin: -8px 0 0; font-family: var(--font-title); font-weight: 400; font-size: 20px; line-height: 26px; color: var(--carbon-5); overflow-wrap: anywhere; }
.contra-subjects { align-self: stretch; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.contra-subject { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--carbon-95); }
.contra-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--carbon-10); color: var(--carbon-10); background: var(--suede-100); }
.contra-badge-drawing { background: var(--suede-90); }
.contra-badge-brief { }
.contra-quote { margin: 0; font-size: 16px; line-height: 1.3; color: var(--carbon-10); overflow-wrap: anywhere; }
.contra-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--carbon-40); }
.contra-from { margin: 0; font-size: 14px; font-style: italic; color: var(--carbon-40); overflow-wrap: anywhere; }
.contra-view, .contra-open-clause { padding: 0; border: 0; background: none; font-family: var(--font-ui); font-size: 16px; color: var(--carbon-10); text-decoration: underline; cursor: pointer; }
.contra-dismiss { margin-top: 4px; }
.contra-ways { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
/* A drawing flag's card (lib/flag-card.js, demo feedback 2026-10-23):
   the problem as the title, then the rule cited once with its quote as
   the link to the clause, then what the drawing says under a rule line
   as a subject sits, then Why, closed, and Dismiss. */
.rl-flag-rule, .rl-flag-drawing { align-self: stretch; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rl-flag-drawing { padding-top: 12px; border-top: 1px solid var(--carbon-95); }
.rl-flag-other { overflow-wrap: anywhere; }
.rl-flag-clause { color: var(--carbon-10); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.rl-flag-clause:hover { color: var(--carbon-5); }
.rl-flag-clause:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
.rl-flag-why { align-self: stretch; }
.rl-flag-why > summary { width: max-content; font-family: var(--font-ui); font-size: 14px; color: var(--carbon-40); cursor: pointer; }
.rl-flag-why > summary:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
.rl-flag-why[open] > summary { margin-bottom: 6px; }
/* The rest of issue-card.js's card, from app.css's contradictions
   section: a conflict's statements, its badges and its notes. */
.contra-conflict { border-left: 4px solid var(--conflict); }
.contra-level-conflict { background: var(--conflict); color: var(--conflict-ink); }
.contra-badge.contra-badge-latest { background: var(--conflict); border-color: var(--conflict-ink); color: var(--conflict-ink); }
.contra-badge.contra-badge-earlier { background: var(--suede-100); border-color: var(--carbon-40); color: var(--carbon-40); }
.contra-badge-request { border-style: dashed; }
.contra-badge-variation { background: var(--carbon-90); }
.contra-statement:not(.contra-statement-latest) .contra-quote { color: var(--carbon-40); }
.contra-open-message { font-family: var(--font-ui); font-size: 16px; color: var(--carbon-10); text-decoration: underline; overflow-wrap: anywhere; }
.contra-open-message:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
.contra-resolution { margin: -8px 0 0; font-size: 14px; color: var(--carbon-40); overflow-wrap: anywhere; }
.contra-again { margin: -8px 0 0; font-size: 14px; color: var(--carbon-40); }
.contra-conflict .contra-subjects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.contra-use { margin-top: auto; }

/* The document viewer's card and list beside the pages (docview.js),
   from app.css's document viewer section. */
.doc-card { list-style: none; margin: 0; padding: 0; }
.doc-card:empty { display: none; }
.doc-unfound { margin: 8px 0 0; }
.doc-list-row { min-height: 44px; }
.doc-list-row[aria-current="true"] { border-color: var(--carbon-10); box-shadow: 0 0 0 1px var(--carbon-10); }
.doc-list-clause { margin: 0 8px 0 6px; font-weight: 600; font-size: 14px; }
.doc-list-page { margin-right: 8px; font-size: 13px; color: var(--carbon-40); }
.doc-list-tag { font-size: 12px; color: var(--carbon-40); font-style: italic; }
.doc-list-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }

/* ── Index page ──────────────────────────────────────────────────────── */
.index { max-width: 860px; margin: 0 auto; padding: 56px 24px 96px; }
.index-list { list-style: none; margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.index-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 16px 20px; border: 1px solid var(--edge); border-radius: 14px; background: var(--suede-100); }
.index-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--carbon-40); padding-top: 3px; }
.index-row a { font-size: 16px; color: var(--carbon-10); }
.index-row p { grid-column: 2; font-size: 14px; line-height: 1.5; color: var(--carbon-40); }

/* ── A phone ─────────────────────────────────────────────────────────── */
@media (width < 1100px) {
  .fv-main { padding: 16px 24px 32px; }
  .annot-scroller { height: auto; min-height: 0; max-height: 70vh; }
  .landing-cols { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 24px; }
  .landing-sample-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 24px 56px; }
}
@media (max-width: 900px) {
  .mk-view-only { display: block; }
  /* View only below 900 px (§4.13): no tools over the sheet. */
  .mk-toolbar-host { display: none; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .panel-shell { margin: 0 12px 24px; padding: 24px 20px; }
  .top { padding: 16px 16px 12px; min-height: 0; }
  .top-who { display: none; }
  .landing-hero { grid-template-columns: minmax(0, 1fr); }
  .landing-stage { position: static; height: auto; min-height: 0; padding: 32px 24px 48px; border-left: 0; border-top: 1px solid var(--suede-90); }
  .landing-sketch { max-width: 480px; max-height: none; }
}
@media (max-width: 719.98px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-photo { display: none; }
  .auth-main, .landing-hero .auth-main { justify-content: flex-start; padding: 88px 16px 48px; }
  .auth-top { top: 20px; left: 16px; right: 16px; }
  .auth .code { gap: 10px; }
  .auth .field-input { height: 56px; }
  .auth .reveal { height: auto; min-height: 44px; }
  .auth .btn-join { min-width: 100%; }
  .auth-federated-stack { width: 100%; }
  .landing-foot { padding: 20px 16px 32px; }
  .landing-cols { padding: 40px 16px; }
  .landing-sample-grid { padding: 40px 16px 48px; }
  /* The sketch column is gone on a phone; a small sketch sits under the
     heading instead, and the big one below the form is dropped. */
  .landing-stage { display: none; }
  .landing-sketch-phone { display: block; width: 256px; max-width: 100%; height: auto; margin: 20px auto 0; }
}
@media (max-width: 640px) {
  :root { --btn-h: 44px; }
  .btn-sm { height: 44px; }
  .top-nav > :not(:first-child) { display: none; }
  .top-pill { min-height: 44px; }
  .file { padding: 12px; }
  .file-actions { grid-row: 1; align-self: start; }
  .file-act { min-height: 36px; }
  .new-project .btn { width: 100%; }
  .project-open { flex-wrap: wrap; }
  .project-files { text-align: left; white-space: normal; }
  .annot-toolbar { gap: 4px; }
  .fv-main { padding: 12px 12px 24px; }
  .fv-top { flex-wrap: wrap; gap: 8px; }
  /* The name takes a line of its own under the way back and the arrows:
     beside them at 390 px it squeezed to about 1.5 px. */
  .fv-name { order: 1; flex: 1 1 100%; }
  .share-back { justify-content: center; padding: 16px; }
  .share-box { padding: 20px 16px; }
  .share-row { flex-wrap: wrap; }
  .share-copy { flex: 1 1 100%; }
  .annot-step-btn { width: 44px; height: 44px; }
  .contra-card { padding: 8px 16px 16px; }
  .annot-layout { grid-template-columns: minmax(0, 1fr); }
  .drop { min-height: 150px; }
  .drag-ghost { display: none; }
  .upnote { display: none; }
  /* Ask: the pill shows its icon alone; its aria-label keeps the name. */
  .ask-pill { position: relative; width: 44px; height: 44px; padding: 0; }
  .ask-pill span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* The markup list's and the layers' controls take a finger: 44 px on a
   phone and on a coarse pointer (dev walk 2026-10-28, L5). */
@media (max-width: 640px), (pointer: coarse) {
  .mk-lbtn { width: 44px; height: 44px; }
  .mk-pfilter select, .mk-pfilter input { height: 44px; }
  .mk-dl-switch { min-height: 44px; }
  .mk-prow-open { min-height: 44px; align-items: center; }
  .mk-page-link { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
  .mk-back { min-height: 44px; }
  [data-file-panel] { min-height: 44px; }
}

/* ── Ask (Ask spec 3, 7; mockup 2026-10-31; plan Task 7, ruling R-h). The
   pill after Share (lib/ask-pill.js), and the dock (lib/ask-dock.js) in the
   slot each page draws last: in main.page on the project page, in .fv-main
   on the file view. lib/ask-layer.js marks the body data-ask-open while the
   dock is open, and data-ask-flags while Flags hands the flags column back.
   From 900 px the dock is a column beside the panel or the sheet, 400 px
   wide from 1100 px and 360 px below; on the file view it takes the flags
   column's place, so the sheet keeps its width. Below 900 px it is a
   full-screen sheet with the box pinned to the bottom. ─────────────────── */
.ask-slot:empty { display: none; }
.ask-dock {
  display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; border: 1px solid var(--edge);
  border-radius: 16px; background: var(--suede-100); font-family: var(--font-ui); color: var(--carbon-10);
}
.ask-head { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 14px 16px 12px; border-bottom: 1px solid var(--edge); }
.ask-head .share-icon { width: 18px; height: 18px; stroke-width: 1.8; }
.ask-title { flex: none; margin: 0; font-family: var(--font-title); font-size: 18px; font-weight: 400; line-height: 1.3; color: var(--carbon-5); }
.ask-name { min-width: 0; font-size: 13px; color: var(--carbon-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-name::before { content: "\00b7"; margin-right: 8px; }
.ask-head-ways { flex: none; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ask-more { position: relative; }
.ask-iconbtn {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none;
  font-family: var(--font-ui); font-size: 18px; line-height: 1; color: var(--carbon-40); cursor: pointer;
}
.ask-iconbtn:hover { background: var(--suede-90); color: var(--carbon-10); }
.ask-iconbtn:focus-visible, .ask-chip-x:focus-visible, .ask-sugg-btn:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 1px; }
.ask-iconbtn-text { width: auto; padding: 0 10px; border: 1px solid var(--edge-firm); border-radius: 999px; font-size: 13px; color: var(--carbon-10); }
.ask-chips {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px;
  border-bottom: 1px solid var(--carbon-95); font-size: 12px; color: var(--carbon-40);
}
.ask-chip {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 3px 10px;
  border: 1px solid var(--edge-firm); border-radius: 999px; background: var(--suede-100); font-size: 12px; color: var(--carbon-10);
  overflow-wrap: anywhere;
}
.ask-chip-x {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: -2px -6px -2px 0; padding: 0; border: 0;
  border-radius: 50%; background: none; font-size: 14px; line-height: 1; color: var(--carbon-40); cursor: pointer;
}
.ask-chip-x:hover { background: var(--suede-90); color: var(--carbon-10); }
.ask-note { flex: none; margin: 0; padding: 10px 16px; background: var(--sandstone-100); font-size: 13px; line-height: 1.45; color: var(--carbon-10); }
.ask-thread {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 16px;
  overflow-y: auto; overscroll-behavior: contain;
}
.ask-q {
  align-self: flex-end; max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--suede-90);
  font-size: 15px; line-height: 1.45; color: var(--carbon-10); white-space: pre-wrap; overflow-wrap: anywhere;
}
/* What a notebook question asked about, 4px under its bubble: the -12px takes back most of .ask-turn's gap (Ask 2b spec 7.6). */
.ask-about { align-self: flex-end; max-width: 88%; margin: -12px 0 0; font-size: 12px; line-height: 1.4; color: var(--helper); overflow-wrap: anywhere; }
/* Same place and look as .ask-about (Ask 2c spec 7.2). */
.ask-via { align-self: flex-end; max-width: 88%; margin: -12px 0 0; font-size: 12px; line-height: 1.4; color: var(--helper); overflow-wrap: anywhere; }
.ask-empty-lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--carbon-30); }
.ask-sugg { display: flex; flex-direction: column; gap: 8px; }
.ask-sugg-h { margin: 0; font-size: 13px; color: var(--carbon-40); }
.ask-sugg-btn {
  padding: 10px 12px; border: 1px solid var(--carbon-95); border-radius: 12px; background: var(--suede-100);
  font-family: var(--font-ui); font-size: 14px; line-height: 1.4; text-align: left; color: var(--carbon-10); cursor: pointer;
}
.ask-sugg-btn:hover { border-color: var(--carbon-10); }
.ask-box { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px 8px; border-top: 1px solid var(--edge); background: var(--suede-100); }
.ask-input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 160px; padding: 11px 14px; border: 1px solid var(--edge-firm);
  border-radius: 14px; background: #fff; font-family: var(--font-ui); font-size: 15px; line-height: 1.4; color: var(--carbon-10);
  resize: none; field-sizing: content;
}
.ask-input::placeholder { color: #737373; }
.ask-input:disabled { opacity: 0.5; background: var(--suede-95); }
.ask-send { flex: none; min-width: 0; height: 44px; padding: 0 18px; border-radius: 14px; font-size: 14px; }
.ask-hint { flex: none; margin: 0; padding: 0 16px 12px; font-size: 11px; color: var(--carbon-55); }
.ask-counter { flex: none; margin: 0; padding: 0 16px 4px; font-size: 12px; color: var(--carbon-10); }
.ask-stop { background: var(--suede-100); border-color: var(--edge-firm); color: var(--carbon-10); }
/* An answer (Ask spec 6.1, 6.2; plan Task 8): its words with numbered chips,
   then the Cited list, the coverage line and the light line. A chip's
   popover sits under it, leftwards when the chip is in the answer's right
   half (.ask-pop-end), so it stays in the dock. */
.ask-turn { display: flex; flex-direction: column; gap: 16px; }
.ask-a { font-size: 15px; line-height: 1.6; color: var(--carbon-10); overflow-wrap: anywhere; }
.ask-a p { margin: 0; }
.ask-a > p + p { margin-top: 10px; }
.ask-cite {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin: 0 1px; padding: 0 5px; vertical-align: 2px;
  border: 1px solid var(--carbon-10); border-radius: 999px; background: var(--suede-100);
  font-family: var(--font-mono); font-size: 11px; line-height: 1; color: var(--carbon-10); cursor: pointer;
}
.ask-cite:hover { background: var(--carbon-10); color: var(--carbon-100); }
.ask-cite:focus-visible, .ask-row:focus-visible, .ask-retry:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 1px; }
.ask-pop-wrap { position: relative; display: inline-block; }
.ask-pop {
  position: absolute; left: -8px; top: 26px; z-index: 3; width: min(300px, 70vw); padding: 10px 12px;
  border: 1px solid var(--carbon-95); border-radius: 12px; background: #fff; box-shadow: 0 4px 16px rgba(37, 36, 31, 0.18);
  font-size: 13px; line-height: 1.45; color: var(--carbon-10); white-space: normal; pointer-events: none;
}
.ask-pop-end { left: auto; right: -8px; }
.ask-pop::after {
  content: ""; position: absolute; left: 14px; top: -6px; width: 10px; height: 10px; background: #fff;
  border-left: 1px solid var(--carbon-95); border-top: 1px solid var(--carbon-95); transform: rotate(45deg);
}
.ask-pop-end::after { left: auto; right: 14px; }
.ask-cursor { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--carbon-10); animation: ask-blink 1s steps(2) infinite; }
@keyframes ask-blink { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ask-cursor { animation: none; } }
.ask-a .ask-meta { margin-top: 6px; font-size: 12px; font-style: italic; color: var(--carbon-40); }
.ask-retry { margin-top: 8px; }
.ask-cited { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--carbon-95); }
.ask-a .ask-cited-h {
  margin-bottom: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--carbon-40);
}
.ask-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px; margin-bottom: 6px; padding: 8px 10px;
  border: 1px solid var(--carbon-95); border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--carbon-10);
  text-decoration: none;
}
a.ask-row:hover { border-color: var(--carbon-10); }
.ask-row-gone { color: var(--carbon-40); }
.ask-row-n {
  display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px;
}
.ask-row-where { font-weight: 700; }
.ask-row-quote { grid-column: 2; font-style: italic; color: var(--carbon-40); }
.ask-a .ask-cover { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--carbon-40); }
.ask-a .ask-light { margin-top: 2px; font-size: 12px; color: var(--carbon-40); }
/* A turn's draft rows (Ask 2a spec 5.3 to 5.5; mockup frames 9, 10 and 12):
   one block per proposal under the answer's words, dashed while it is a
   draft (darker while drawn on the sheet), plain once kept or discarded. */
.ask-drafts { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ask-draft {
  padding: 10px 12px; border: 1px dashed var(--carbon-55); border-radius: 12px; background: var(--wood-100);
  font-size: 13px; line-height: 1.45; color: var(--carbon-10);
}
.ask-draft[data-on] { border: 1.5px dashed var(--carbon-10); }
.ask-draft[data-settled] {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; border-style: solid; border-color: var(--carbon-95);
  background: var(--suede-100);
}
.ask-draft .ask-draft-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 700; }
.ask-draft-tag {
  padding: 1px 8px; border-radius: 999px; background: var(--carbon-40); color: var(--carbon-100);
  font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
}
.ask-draft .ask-draft-title { margin-top: 4px; font-size: 14px; }
.ask-draft .ask-draft-where { margin-top: 2px; color: var(--carbon-40); }
.ask-draft .ask-draft-hint, .ask-draft .ask-draft-state { margin-top: 6px; font-size: 12px; color: var(--carbon-40); }
.ask-draft .ask-draft-state[data-said] { color: var(--danger); }
.ask-draft[data-settled] .ask-draft-state { margin-top: 0; font-size: 13px; color: var(--carbon-30); }
.ask-draft-ways { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ask-draft-ways .btn { height: 34px; padding: 0 14px; font-size: 13px; }
.ask-draft-card {
  padding: 0; border: 0; background: none; font: inherit; color: var(--carbon-10); text-decoration: underline;
  cursor: pointer;
}
.ask-draft-card:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 1px; }

/* The flag strip (spec 3, 6.4; plan Task 9): the flag a chip pressed on the
   sheet, with Open the card, or the line saying the flag has gone. */
.ask-strip {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--edge);
  background: var(--wood-95); font-size: 13px; line-height: 1.45; color: var(--carbon-10);
}
.ask-strip span { min-width: 0; }
.ask-strip button {
  flex: none; margin-left: auto; padding: 0; border: 0; background: none; font: inherit; color: var(--carbon-10);
  text-decoration: underline; white-space: nowrap; cursor: pointer;
}
.ask-strip button:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 1px; }
/* The grey cite mark an Ask citation lands on (spec 6.4): its box shows,
   its numbered pin does not, on a drawing and on a rule document alike.
   On a document its number was one past the highest pin ("13") while the
   chip read "1" (walk 2026-11-03, A2). Severity 0 is the cite mark only. */
.annot-host .annot-pin.annot-sev-0 { display: none; }

/* The split (ruling R-h). Screen only: paper gets the page as it was. */
@media screen and (width >= 900px) {
  :root { --ask-w: 360px; }
  /* The project page: the panel, then the dock, which stays in the window
     as the page scrolls (the top bar is 84 px). */
  body[data-ask-open] main.page:has(> .ask-slot) {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--ask-w); column-gap: 16px; align-items: stretch;
  }
  body[data-ask-open] main.page:has(> .ask-slot) > .panel-shell { margin-right: 0; }
  body[data-ask-open] main.page > .ask-slot {
    position: sticky; top: 16px; align-self: start; height: calc(100vh - 116px); min-height: 420px; margin: 0 32px 32px 0;
  }
  /* The file view: the row over the sheet and any alert span both columns;
     the view and the dock share the third row. The slot is size-contained,
     so a long thread scrolls in the dock and never props the row up. */
  body[data-ask-open]:not([data-ask-flags]) .fv-main {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--ask-w); grid-template-rows: auto auto minmax(0, 1fr); column-gap: 16px;
  }
  body[data-ask-open]:not([data-ask-flags]) .fv-main > :is(.fv-top, .annot-status) { grid-column: 1 / -1; }
  body[data-ask-open]:not([data-ask-flags]) .fv-main > :not(.fv-top, .annot-status, .ask-slot) { grid-column: 1; grid-row: 3; }
  body[data-ask-open]:not([data-ask-flags]) .fv-main > .ask-slot {
    grid-column: 2; grid-row: 3; min-height: 480px; margin-top: 12px; overflow: auto; contain: size;
  }
  /* The dock has the flags column's place (a full-screen sheet keeps its column). */
  body[data-ask-open]:not([data-ask-flags]) .fv-main :is(.annot-panel, .mk-side):not(:fullscreen *) { display: none; }
  body[data-ask-open]:not([data-ask-flags]) .fv-main .annot-layout:not(:fullscreen *) { grid-template-columns: minmax(0, 1fr); }
  /* With the dock in its place there is no panel to hide (RF-2). */
  body[data-ask-open]:not([data-ask-flags]) .fv-main [data-file-panel]:not(:fullscreen *) { display: none; }
  /* Flags: the flags column is back, and the pill brings the dock back. */
  body[data-ask-flags] .ask-slot { display: none; }
  /* The upload notice moves off the dock's box. */
  body[data-ask-open] .upnote { right: calc(48px + var(--ask-w)); }
}
/* Below 1100 px the file view scrolls as one page and the flags list stacks
   under the sheet, so grid row 3 runs thousands of pixels (walk 2026-11-03
   A27: the box sat 7,000 px down). There the dock keeps to the window as on
   the project page: 16 px from the top once the page scrolls, as high as
   the window leaves it under the row of pills (132 px down under the 64 px
   bar, 16 px kept below), so the thread scrolls inside it and the box stays
   on screen. From 1100 px the window-high layout holds it already. Review
   D3: 100dvh after the 100vh fallback, a floor that fits a short window,
   and an alert row over the sheet (one or two lines, up to 44 px) taken off
   too. A drawing has no row of pills (sketch view spec 4.3.5, M16): its
   dock starts under the bar and its 12 px margin (64 + 12 + 16 kept below);
   one more :has() puts its rules over the document's. */
@media screen and (900px <= width < 1100px) {
  body[data-ask-open]:not([data-ask-flags]) .fv-main > .ask-slot {
    position: sticky; top: 16px; align-self: start; height: calc(100vh - 148px); height: calc(100dvh - 148px);
    min-height: min(420px, calc(100dvh - 32px));
  }
  body[data-ask-open]:not([data-ask-flags]) .fv-main:has(> .annot-status) > .ask-slot {
    height: calc(100vh - 192px); height: calc(100dvh - 192px);
  }
  body:has(.sv)[data-ask-open]:not([data-ask-flags]) .fv-main > .ask-slot {
    height: calc(100vh - 92px); height: calc(100dvh - 92px);
  }
  body:has(.sv)[data-ask-open]:not([data-ask-flags]) .fv-main:has(> .annot-status) > .ask-slot {
    height: calc(100vh - 136px); height: calc(100dvh - 136px);
  }
}
/* A phone: the dock is a sheet over the page, with its own header. */
@media (width < 900px) {
  .ask-slot:not(:empty) { position: fixed; inset: 0; z-index: 45; background: var(--suede-100); }
  .ask-sheet { border: 0; border-radius: 0; }
  .ask-sheet .ask-head { padding: 16px 16px 12px; }
  .ask-sheet .ask-box { padding: 10px 12px 8px; }
  .ask-sheet .ask-hint { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* The notebook (Ask 2b spec 5.2, 7.6; mockup frames 1 to 3). The panel
   holds the head, then Documents and Clauses side by side; the dock splits
   the page by the project page's rules above. From 1280 px Documents is a
   260 px column; below it the documents are a wrapping row of chips over
   Clauses, and a chip shows its state words only when it cannot be ticked.
   From 900 px the panel is padded 32/24 (D22), to give Clauses room. */
.nb-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.nb-head > :first-child { flex: 1 1 0; min-width: min(100%, 320px); }
.nb-head .helper { max-width: 62ch; margin-top: 6px; }
.nb-cols { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; margin-top: 28px; align-items: start; }
.nb-docs, .nb-clauses { min-width: 0; }
.nb-docs-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.nb-doc {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--carbon-95); border-radius: 14px; background: var(--suede-100); cursor: pointer;
}
.nb-doc input { width: 16px; height: 16px; accent-color: var(--carbon-10); cursor: inherit; }
.nb-doc:has(input:disabled) { opacity: 0.55; cursor: default; }
.nb-doc-name { min-width: 0; font-size: 14px; color: var(--carbon-10); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-doc-state { grid-column: 2; font-size: 12px; font-style: italic; color: var(--helper); }
.nb-clauses-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nb-count, .nb-more { font-size: 13px; color: var(--helper); }
.nb-more { margin-top: 8px; }
.nb-search {
  width: 100%; height: 40px; margin-top: 12px; padding: 0 14px; border: 1px solid var(--edge-firm); border-radius: 12px;
  background: var(--field); font-family: var(--font-ui); font-size: 14px; color: var(--carbon-10);
}
.nb-empty { margin-top: 16px; font-size: 14px; color: var(--helper); }
.nb-retry { margin-top: 12px; }
.nb-clause:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 1px; }
.nb-group { margin-top: 20px; }
.nb-group-name { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--carbon-10); }
.nb-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.nb-clause {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--carbon-95); border-radius: 10px;
  background: var(--suede-100); font-size: 13px; line-height: 1.45; color: var(--carbon-10); text-decoration: none;
}
.nb-clause:hover { border-color: var(--carbon-10); }
.nb-ref { font-size: 14px; font-weight: 700; }
.nb-quote {
  font-size: 13px; font-style: italic; color: var(--helper);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.nb-page-no { font-size: 12px; color: var(--helper); }
@media (width < 1280px) {
  .nb-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nb-docs-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .nb-docs-list > li { min-width: 0; max-width: 100%; }
  .nb-doc { display: inline-flex; max-width: 100%; gap: 8px; padding: 6px 12px; border-radius: 999px; }
  .nb-doc-state { display: none; }
  .nb-doc:has(input:disabled) .nb-doc-state { display: inline; }
}
@media screen and (width >= 900px) {
  .nb-shell { padding: 32px 24px; }
}

/* ── The file view from 1100 px (the file-view UI round, ruling 4: "the
   issues should scroll on their own; the drawing should not scroll down
   with the issues"). The page is one window high and never scrolls: the
   top bar and the row over the sheet stay, the sheet pans and zooms in its
   own scroller, and in the flags panel the count and the chips stay while
   only .annot-list scrolls. Flex columns with min-height: 0 hand the
   height down. Every layer paints its own background, so nothing shows
   the window through it. Screen only: paper gets the stacked page. Below
   1100 px (the (width < 1100px) block) the page scrolls as one, stacked;
   range syntax leaves no gap at fractional widths. ───────────────────────────── */
@media screen and (width >= 1100px) {
  .fv-body { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  .fv-body > [data-redline-top] { flex: none; }
  .fv-body .page { flex: 1 1 auto; min-height: 0; background: var(--page); }
  .fv-screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .fv { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--wood-100); }
  .fv-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--wood-100); }
  .fv-main > * { flex: none; }
  .fv-main > .annot-host, .fv-main > .fv-fill { flex: 1 1 auto; }
  .fv-fill { min-height: 0; display: flex; flex-direction: column; }
  .fv-fill > .annot-host { flex: 1 1 auto; }
  .annot-host { min-height: 0; display: flex; flex-direction: column; background: var(--wood-100); }
  .annot-host > :not(.annot-layout) { flex: none; }
  .annot-layout { flex: 1 1 auto; min-height: 0; align-items: stretch; grid-auto-rows: minmax(0, 1fr); }
  .annot { min-height: 0; display: flex; flex-direction: column; }
  .annot-toolbar { flex: none; }
  .annot-scroller { flex: 1 1 auto; height: auto; min-height: 0; }
  .annot-panel { min-height: 0; overflow: hidden; background: var(--wood-100); }
  /* The rule document's panel has no .annot-list: the panel scrolls. */
  .annot-host[data-document-panel] .annot-panel { overflow-y: auto; }
  .annot-panel > :not(.annot-list) { flex: none; }
  .annot-list { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--wood-100); }
  /* The markup's side column scrolls on its own, as B2's list does. */
  .mk-side { min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--wood-100); }
  .mk-side { contain: size; }
  /* Ask: the dock is 400 px wide, and on the file view as tall as the window leaves it. */
  :root { --ask-w: 400px; }
  body[data-ask-open]:not([data-ask-flags]) .fv-main > .ask-slot { min-height: 0; }
}

/* Full screen: the host fills the screen with the same scrollers, at any
   width. */
.annot-host:fullscreen { display: flex; flex-direction: column; padding: 16px; overflow: hidden; background: var(--wood-100); }
.annot-host:fullscreen .annot-layout { flex: 1 1 auto; min-height: 0; margin-top: 0; align-items: stretch; grid-auto-rows: minmax(0, 1fr); }
.annot-host:fullscreen .annot { min-height: 0; display: flex; flex-direction: column; }
.annot-host:fullscreen .annot-scroller { flex: 1 1 auto; height: auto; min-height: 0; max-height: none; }
.annot-host:fullscreen .annot-panel { min-height: 0; overflow: hidden; background: var(--wood-100); }
.annot-host[data-document-panel]:fullscreen .annot-panel { overflow-y: auto; }
.annot-host:fullscreen .annot-list { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ── Print (spec 7.6, F19): window.print() prints the sheet and its flag
   cards; the page's chrome stays off the paper. ─────────────────────── */
@media print {
  .top, .fv-back, .fv-nav, .share-pill, .share-back, .annot-toolbar, .annot-chips, .annot-step, .mk-toolbar, .mk-status, .mk-toast, .mk-failed, .mk-style, .mk-picker, .mk-card-ways, .mk-layers, .mk-view-only, .mk-orphan, .mk-calib-back, .mk-toolbar-host, .mk-status-host, .mk-side, .dl-panel, .ask-pill, .ask-slot, .mk-landed-host, .sv-top, .sv-corner, .sv-dock { display: none !important; }
  .fv, .annot-layout { display: block; }
  .fv-name { white-space: normal; font-size: 16px; color: var(--carbon-10); }
  .annot-scroller { height: auto; min-height: 0; max-height: none; overflow: visible; }
  .annot-pages { width: 100%; min-width: 0; padding: 0; }
  .annot-cards { width: 100%; }
  /* The printed list of flags (4.1.8): full width, fixed columns, no control. */
  .mk-print-host { display: block; }
  .mk-print { width: 100%; margin-top: 16px; }
  .mk-print-head { margin: 0 0 8px; font-size: 16px; color: var(--carbon-10); }
  .mk-print-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; }
  .mk-print-table th, .mk-print-table td { padding: 4px 6px; border-bottom: 1px solid var(--edge); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
  .mk-print-table tr { break-inside: avoid; }
  .mk-print-table .mk-out td { color: var(--helper); }
  /* The cite mark is never printed (Ask spec 6.4): neither its box nor its pin. */
  .annot-host:not([data-document-panel]) :is(.annot-box, .annot-pin).annot-sev-0 { display: none !important; }
}

/* ══ Redline multiplayer (spec 2026-10-31, 13.5) ════════════════════════════
   One fenced block per lane, created empty by the seed. Each lane appends
   its rules only inside its own block, before the block's end line. */

/* ── multiplayer: A ── */

/* ── end multiplayer: A ── */

/* ── multiplayer: B ── */
/* The /join page (spec 6.4): the level line sits under the invitation's
   title, and the name form keeps the auth frame's spacing. */
.join-level { margin-top: 8px; }
.join-name { margin-top: 24px; }
.join-name .actions { margin-top: 20px; }
/* ── end multiplayer: B ── */

/* ── multiplayer: C ── */

/* ── end multiplayer: C ── */

/* ── multiplayer: D ── */

/* ── end multiplayer: D ── */

/* ── multiplayer: E ── */

/* ── end multiplayer: E ── */

/* ── multiplayer: F ── */
/* Presence: who else is on the project (spec 10.5, mockup M4). */
.lv-here { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; }
.lv-chip { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 2px; border-radius: 13px;
  background: var(--carbon-10); color: var(--carbon-100); font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  flex: none; cursor: default; }
.lv-chip + .lv-chip { margin-left: -4px; box-shadow: 0 0 0 2px var(--suede-100); }
.lv-chip-2 { background: var(--sage-40); }
/* No palette tokens for these two: the mark colours' blue and violet (redline_marks.COLORS). */
.lv-chip-3 { background: #1f5fa8; }
.lv-chip-4 { background: #7c3aed; }
.lv-chip-away { opacity: 0.35; }
.lv-more { padding: 0 8px; background: var(--suede-80); color: var(--carbon-10); }
.lv-word { margin-left: 6px; font-size: 12px; color: var(--helper); }

/* "Priya has this open." under a card's title (spec 10.5, mockup M4). */
.mk-open-line { display: flex; align-items: center; gap: 6px; margin-top: -8px; font-size: 12px; color: var(--carbon-40); }
/* A clash on the card (spec 10.6, mockup M5): the words, then the ways out. */
.mk-clash { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px;
  background: var(--sage-95); border: 1px solid var(--sage-80); }
.mk-clash p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--carbon-10); }
.mk-clash .mk-ways { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-clash .mk-ways .btn { height: 30px; padding: 0 12px; font-size: 13px; }
/* A deleted flag's fields keep your words, greyed and read-only. */
.mk-card .mk-gone { color: var(--carbon-40); background: var(--carbon-95); }
/* ── end multiplayer: F ── */

/* ── multiplayer: G ── */
/* Pending on the sheet (7.5): half strength, dashed. */
.mk-pending { opacity: 0.5; }
.mk-pending .mk-body :is(path, rect, line, polyline, polygon, ellipse, circle):not(.mk-hit) { stroke-dasharray: 6 4; }
/* Ask's draft (Ask 2a, 5.2): dashed 8 4, 85 %, an italic Draft tag; the hit paths stay solid. */
.mk-asked .mk-body :is(path, rect, line, polyline, polygon, ellipse, circle):not(.mk-hit) { stroke-dasharray: 8 4; }
.mk-asked .mk-body { opacity: .85; }
.mk-asked .mk-untitled { font-style: italic; }
.mk-pill-pending { border-style: dashed; color: var(--ink); }
/* A flag that just came in from someone else rings once (10.4), on the sheet and in the list. */
@keyframes mk-arrive { 0% { outline: 3px solid rgba(220, 80, 80, 0.6); outline-offset: 0; } 100% { outline: 3px solid rgba(220, 80, 80, 0); outline-offset: 6px; } }
@keyframes mk-arrive-tint { 0% { background: var(--sandstone-100); } 100% { background: transparent; } }
g.mk-arrived { animation: mk-arrive 2s ease-out 1; }
li.mk-arrived { animation: mk-arrive-tint 2s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  g.mk-arrived { animation: none; }
  li.mk-arrived { animation: mk-arrive-tint 2s linear 1; }
}
/* The list: the dropped glyph (9.6), Raised by, the comment count, the Pending group and bulk. */
.mk-dropped { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.mk-c-comments { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 12px; color: var(--helper); }
.mk-pend-head { font-weight: 600; }
.mk-pend-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.mk-bulk { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 400; }
.mk-bulk-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; }
.mk-bulk-ask p { margin: 0; flex-basis: 100%; overflow-wrap: anywhere; }
.mk-bulk-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; font-family: var(--font-ui); font-size: 12px; }
.mk-bulk-status p { margin: 0; }
/* The card's verdict block. */
.mk-pend .mk-pill { margin: 4px 0; }
.mk-pend-line { font-weight: 600; }
/* Comments (8). */
.cm-thread { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--edge); font-family: var(--font-ui); font-size: 13px; }
.cm-head { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.cm-list { margin: 0; padding: 0; list-style: none; }
.cm-one { padding: 6px 0; border-bottom: 1px solid var(--edge); }
.cm-meta { margin: 0; font-size: 12px; color: var(--helper); }
.cm-name { color: var(--ink); font-weight: 600; }
.cm-body { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-acts { display: flex; gap: 6px; margin-top: 4px; }
.cm-field { box-sizing: border-box; width: 100%; min-height: 56px; padding: 6px 8px; border: 1px solid var(--edge-firm); border-radius: 6px; font: inherit; resize: vertical; }
.cm-add { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; }
.cm-say { margin: 0; color: var(--ink); }
.cm-status { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
/* ── end multiplayer: G ── */

/* ── multiplayer: H ── */
/* The share box's tabs and People tab (mockup board 1, the .mp-* rules):
   lib/share.js and lib/share-people.js. */
.pp-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--suede-90); align-self: flex-start; }
.pp-tabs button {
  height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font-family: var(--font-ui);
  font-size: 13px; color: var(--carbon-40); cursor: pointer;
}
.pp-tabs button[aria-selected="true"] {
  background: var(--suede-100); color: var(--carbon-10); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.pp-panel, .pp-tab { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pp-panel[hidden] { display: none; }
.pp-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pp-person {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--edge); border-radius: 10px;
  background: var(--suede-100);
}
.pp-chip, .ph-chip {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--carbon-10); color: var(--carbon-100); font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.pp-chip-1, .ph-chip-1 { background: var(--sage-40); }
.pp-chip-2, .ph-chip-2 { background: #1f5fa8; }
.pp-chip-3, .ph-chip-3 { background: #7c3aed; }
.pp-chip-ask { background: var(--suede-100); color: var(--carbon-40); border: 1px dashed var(--edge-firm); }
.pp-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* An address is never cut (new-user walk 3): the name line, which holds an
   invited address, and the address line wrap anywhere instead. */
.pp-name { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.pp-name small { color: var(--helper); font-size: 12px; }
.pp-mail { font-size: 12px; color: var(--helper); overflow-wrap: anywhere; }
.pp-level {
  flex: none; height: 30px; padding: 0 26px 0 10px; border: 1px solid var(--edge-firm); border-radius: 8px;
  background-color: var(--suede-100); font-family: var(--font-ui); font-size: 13px; color: var(--carbon-10);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2325241f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.pp-level:disabled { opacity: 0.55; }
.pp-level-text { flex: none; font-size: 13px; color: var(--carbon-40); }
/* Remove is a text button, as Withdraw is (new-user walk 2 W2-38). */
.pp-x {
  flex: none; min-height: 28px; padding: 0 4px; border: 0; border-radius: 6px; background: none;
  font-family: var(--font-ui); font-size: 13px; color: var(--carbon-40); text-decoration: underline; cursor: pointer;
}
.pp-x:hover { color: var(--danger); }
.pp-withdraw, .pp-leave {
  flex: none; padding: 0; border: 0; background: none; font-family: var(--font-ui); font-size: 13px;
  color: var(--carbon-40); text-decoration: underline; cursor: pointer;
}
.pp-leave { align-self: flex-start; min-height: 44px; font-size: 14px; color: var(--danger); }
.pp-invite { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--carbon-90); }
.pp-invite .share-label { text-transform: uppercase; }
.pp-invite-row { display: flex; gap: 8px; }
.pp-invite-row input {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--edge-firm); border-radius: 10px;
  background: #ffffff; font-family: var(--font-ui); font-size: 14px; color: var(--ink);
}
.pp-invite-row .pp-level { height: 40px; border-radius: 10px; }
.pp-invite-row .btn { flex: none; min-width: 0; height: 40px; padding: 0 18px; font-weight: 700; }
.pp-invite .field-error { margin: 0; }
/* The four levels, one per line; the one chosen in the select stands out (W2-22). */
.pp-hint {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px;
  line-height: 1.45; color: var(--helper);
}
.pp-hint .pp-hint-on { color: var(--carbon-10); font-weight: 700; }
.pp-example { margin: 0; padding-top: 14px; border-top: 1px solid var(--carbon-90); font-size: 14px; line-height: 1.5; color: var(--carbon-30); }
.pp-failed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pp-failed .field-error { margin: 0; }
/* Remove and Leave ask inside the box, in the confirm dialog's look (mockup board 5b). */
.pp-ask .confirm-actions { margin-top: 18px; }
.pp-ask .field-error { margin: 12px 0 0; }
.pp-tabs button:focus-visible, .pp-level:focus-visible, .pp-x:focus-visible, .pp-withdraw:focus-visible,
.pp-leave:focus-visible, .pp-invite-row input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The project head's live parts (mockup board 6b, spec 10.5, 11): the
   chips after the name, the pending total, the latest line under the head. */
.ph-name-row { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.ph-here { display: flex; align-items: center; gap: 4px; }
.ph-chip { position: relative; cursor: default; }
.ph-here .ph-chip + .ph-chip { margin-left: -4px; box-shadow: 0 0 0 2px var(--suede-100); }
.ph-chip-more { background: var(--suede-80); color: var(--carbon-10); }
.ph-tip {
  display: none; position: absolute; top: 34px; left: 0; z-index: 20; padding: 6px 10px; border-radius: 8px;
  background: var(--carbon-10); color: var(--carbon-100); font-size: 12px; font-weight: 400; letter-spacing: 0;
  white-space: nowrap;
}
.ph-chip:hover .ph-tip, .ph-chip:focus-visible .ph-tip { display: block; }
.ph-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ph-here-word { margin-left: 6px; font-size: 12px; color: var(--helper); }
.ph-count {
  display: none; place-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--suede-80);
  color: var(--carbon-10); font-size: 12px; font-weight: 700;
}
.ph-latest { margin: 8px 0 0; padding: 0; font-size: 13px; line-height: 1.5; color: var(--carbon-40); }
.ph-latest .linkish { font-size: 13px; color: var(--carbon-10); }
.project-head .ph-checks, .project-head .ph-shared { margin-top: 2px; font-size: 13px; }
.file > .ph-pending {
  grid-column: 1; padding-left: 36px; font-size: 12px; font-weight: 700; color: var(--carbon-10); text-decoration: underline;
}
.project-pending { flex: none; font-size: 13px; font-weight: 700; color: var(--carbon-10); white-space: nowrap; }

/* The Activity sheet (spec 11): a side sheet over the dimmed page. */
.act-slot:empty { display: none; }
.act-back {
  position: fixed; inset: 0; z-index: 40; display: flex; justify-content: flex-end; background: rgba(37, 36, 31, 0.4);
}
.act-sheet {
  display: flex; flex-direction: column; width: 100%; max-width: 420px; height: 100%; overflow-y: auto;
  padding: 20px 24px 32px; background: var(--suede-100); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
  font-family: var(--font-ui); color: var(--carbon-10); animation: act-in 0.18s ease-out;
}
@keyframes act-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.act-head { display: flex; align-items: center; gap: 10px; }
.act-title { margin: 0; font-family: var(--font-title); font-size: 22px; font-weight: 400; line-height: 1.3; }
.act-day {
  margin: 18px 0 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--carbon-40);
}
.act-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.act-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--carbon-95); font-size: 14px; line-height: 1.45;
}
.act-text { min-width: 0; overflow-wrap: anywhere; color: var(--carbon-10); }
a.act-text:hover { text-decoration: underline; }
.act-when { flex: none; font-size: 12px; color: var(--carbon-40); }
.act-failed { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 18px; }
.act-failed p { margin: 0; font-size: 15px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .act-sheet { animation: none; } }

@media (max-width: 640px) {
  /* People rows stack: the name and address, then the level and Remove (spec 13.6). */
  .pp-person { flex-wrap: wrap; }
  .pp-who { flex: 1 1 calc(100% - 36px); }
  .pp-person .pp-level { margin-left: 36px; }
  .pp-invite-row { flex-wrap: wrap; }
  .pp-invite-row input { flex: 1 1 100%; }
  .pp-x { min-height: 44px; }
  /* Presence collapses to one chip, "3 here" (spec 10.5). */
  .ph-here .ph-chip, .ph-here-word { display: none; }
  .ph-count { display: inline-grid; }
  .act-sheet { max-width: none; padding: 16px; }
}
/* ── end multiplayer: H ── */

/* ── new-user walk 2: B (file page, card, tools) ── */
/* The card's parts take its full width (W2-15): .contra-card's flex-start,
   written later with the same weight, beat .mk-card's stretch, so the
   comments and the dividers were each as wide as their words. */
.contra-card.mk-card { align-items: stretch; }
/* A pill is as wide as its word, in a stretching column too (W2-30). */
.mk-pill { align-self: flex-start; }
/* Why grows to its words, with no scrollbar of its own (W2-16);
   markup-card-parts.js growToWords sizes it where field-sizing is not. */
.mk-f textarea { field-sizing: content; overflow-y: hidden; resize: none; }
/* With no flag open, the side column says how to open one (W2-12): quiet. */
.mk-side-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--carbon-40); }
/* While the check runs, the status line leads with it (W2-13), in ink and bold. */
.mk-check { flex: none; font-weight: 700; color: var(--ink); }
/* A rule document's panel is its card's offset parent (W2-17): docview.js
   scrolls it to the card's offsetTop, which counted from the page, so a
   clause link opened with the clause's heading above the fold. */
[data-document-panel] .annot-panel { position: relative; }
/* ── end new-user walk 2: B ── */

/* ── new-user walk 2: A (projects list, project page, share box) ── */
/* The head (W2-3): the name and its lines take what is left of the row and
   wrap inside it, so the sum and the Share and Ask pills keep the first row
   whether or not a file exists; they wrap below only when the row runs out. */
.project-head > .ph-main { flex: 1 1 0; min-width: min(100%, 320px); }
/* A drawing row's second line while the set still runs (W2-7). */
.file-note { grid-column: 2; min-width: 0; font-size: 12px; line-height: 16px; color: var(--carbon-40); }
/* A gone project (W2-39): a compact centred message, the button under it. */
.panel-shell.panel-shell-gone {
  flex: 0 0 auto; box-sizing: border-box; width: calc(100% - 32px); max-width: 520px; margin: 64px auto;
  padding: 40px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.panel-shell-gone .title { margin: 0; font-size: clamp(20px, 2.4vw, 24px); text-wrap: balance; }
/* The top bar's breadcrumb stays on one line (W2-29). "Projects" keeps
   its word. The project's name (a link on the file page and the viewer's)
   starts from nothing and grows into what the page's own name leaves, up to
   its whole width: it gives way first, with an ellipsis, down to 3em. Only
   then does the page's own name take an ellipsis. */
.top-nav > * { white-space: nowrap; }
.top-nav > .crumb-sep, .top-nav > a[href="/projects"] { flex: none; }
.top-nav > a { flex: 1 1 0; min-width: 3em; max-width: max-content; overflow: hidden; text-overflow: ellipsis; }
.top-nav .crumb-here { flex: 0 1 auto; min-width: 0; }
/* Below 1000 px the email goes and a short "Account" link takes its place;
   Sign out stays (W2-29). The 900 px rule's hidden email is covered too. */
.top-account { display: none; font-size: 13px; color: var(--carbon-40); text-decoration: none; }
.top-account:hover { color: var(--carbon-10); text-decoration: underline; }
@media (max-width: 999.98px) {
  .top-who { display: none; }
  .top-account { display: inline; }
}
/* ── end new-user walk 2: A ── */

/* ── new-user walk 3: C (phone width) ── */
/* Under 480 px the top bar is two rows (N16 P2): at 406 px "Projects" and
   "Account" printed over each other, and the projects list's crumb read
   "P…". Row 1 is the wordmark and Sign out; row 2 the crumb at the left
   and Account at the right, at least 12 px apart. The bar's two halves
   give their children to the grid. */
@media (width < 480px) {
  .top {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mark out" "crumb account";
    align-items: center; column-gap: 12px; row-gap: 0;
  }
  .top-left, .top-right { display: contents; }
  .top .wordmark { grid-area: mark; justify-self: start; }
  /* The second row's space is its items' own: a bar with neither (the
     legal pages, a viewer before the name loads) stays one row high. */
  .top-nav { grid-area: crumb; margin-top: 8px; }
  .top-account { grid-area: account; justify-self: end; margin-top: 8px; }
  .top-pill { grid-area: out; justify-self: end; }
}
/* ── end new-user walk 3: C ── */

/* ── retire-main P5c: the switcher (spec 8.3.3) ── */
/* "Open in Variations" or "Open in Redline", directly before the account
   link: a quiet text link as Account is, on one line. While its hand-off
   runs the link is aria-busy. */
.top-switch { font-size: 13px; color: var(--carbon-40); text-decoration: none; white-space: nowrap; }
.top-switch:hover { color: var(--carbon-10); text-decoration: underline; }
.top-switch[aria-busy="true"] { cursor: progress; }
/* A one-row bar with the switcher needs about 544 px on Redline and 562 px
   on Variations (the plan review's estimate), so below 600 px it is two
   rows: the wordmark and Sign out, then the crumb, the switcher and
   Account. A bar without the switcher keeps the 480 px rule above, so
   Redline prod's bar, which has none, is unchanged. The drawing's bar
   (.top-sheet) keeps its own grid from 900 px down, and hides the switcher
   there (the sketch section). */
@media (width < 600px) {
  .top:has(.top-switch):not(.top-sheet) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "mark mark out" "crumb switch account";
    align-items: center; column-gap: 12px; row-gap: 0;
  }
  .top:has(.top-switch):not(.top-sheet) .top-left,
  .top:has(.top-switch):not(.top-sheet) .top-right { display: contents; }
  .top:has(.top-switch):not(.top-sheet) .wordmark { grid-area: mark; justify-self: start; }
  .top:has(.top-switch):not(.top-sheet) .top-nav { grid-area: crumb; margin-top: 8px; }
  .top:has(.top-switch):not(.top-sheet) .top-switch { grid-area: switch; justify-self: end; margin-top: 8px; }
  .top:has(.top-switch):not(.top-sheet) .top-account { grid-area: account; justify-self: end; margin-top: 8px; }
  .top:has(.top-switch):not(.top-sheet) .top-pill { grid-area: out; justify-self: end; }
}
/* The switcher takes about 120 px of the right side, so a plain bar with
   two crumbs (the notebook, a variation, a rule document) runs out of room
   at about 641-680 px, before the 640 px rule that keeps every bar's first
   crumb alone. A bar with the switcher keeps only its first crumb up to
   680 px; the drawing's bar keeps its own crumb rules. */
@media (max-width: 680px) {
  .top:has(.top-switch):not(.top-sheet) .top-nav > :not(:first-child) { display: none; }
}
/* ── end retire-main P5c: the switcher ── */
.mk-layer-block { display: flex; flex-direction: column; gap: 4px; }
button.mk-layer-name { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
button.mk-layer-name .mk-icon { transition: transform 0.12s; }
button.mk-layer-name[aria-expanded="true"] .mk-icon { transform: rotate(90deg); }
.mk-layer-list[hidden] { display: none; }

/* ── feedback round: the check's steps on a drawing's row (4.8.3, 4.8.4;
   mockup 1, 1b, 2). The steps, their bar and the note sit under the row's
   link, across the row, lined up with the file's name; a step's side words
   keep to the right and wrap below on a narrow row. ── */
.file > .file-steps {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px;
  margin: 6px 0 0; padding: 0 0 0 36px; list-style: none;
}
.file-step, .file-step-line {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px;
  font-size: 13px; line-height: 20px; color: var(--carbon-40);
}
.file-step-mark { flex: 0 0 16px; text-align: center; }
.file-step-words { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.file-step-side { margin-left: auto; font-size: 12px; white-space: nowrap; }
.file-step-done, .file-step-now { color: var(--carbon-10); }
.file-step-done > .file-step-mark { color: var(--ok); }
.file-step-now > .file-step-mark { color: var(--sage-45); }
.file-step-bold > .file-step-words { font-weight: 700; }
.file-step-lines { flex: 0 0 100%; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.file-step-line.file-step-bad { color: var(--danger); }
.file-step-line > .file-act { padding: 0 6px; color: var(--carbon-10); text-decoration: underline; text-underline-offset: 2px; }
.file > .file-steps + .file-bar { grid-column: 1 / -1; max-width: 520px; margin: 4px 0 0 62px; width: calc(100% - 62px); }
.file-steps-note { grid-column: 1 / -1; margin: 4px 0 0 62px; font-size: 12px; line-height: 16px; color: var(--carbon-40); }
/* A checked drawing: its levels, when and against what, then "Open the
   drawing", which reads as a link inside the row's one link. */
.file-detail { grid-column: 2; min-width: 0; font-size: 12px; line-height: 16px; color: var(--carbon-40); }
a.file-open .file-open-link {
  grid-column: 2; justify-self: start; font-size: 13px; line-height: 18px; color: var(--carbon-10);
  text-decoration-line: underline; text-underline-offset: 2px;
}
/* ── end feedback round: the check's steps ── */

/* ── feedback round: the drawing view's top slot and the landed notice
   (4.8.5; mockup 3, 4). While a check runs, a dashed block heads the
   panel: its heading, the compact steps, the meanwhile line. A share
   viewer gets one plain line. Once settled, the summary: Theode's count in
   the serif, then its levels, when and against what. The notice sits over
   the sheet's top centre; its host stays in the page, empty when idle. ── */
.mk-checking { padding: 12px 14px; border: 1px dashed var(--edge-firm); border-radius: 12px; }
.mk-checking-head { margin: 0 0 4px; font-family: var(--font-title); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--carbon-10); }
.mk-checking > .file-steps { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; padding: 0; list-style: none; }
.mk-checking-note, .mk-checking-viewer { margin: 0; font-size: 13px; line-height: 1.45; color: var(--carbon-40); }
.mk-checking-viewer { padding: 10px 12px; border: 1px dashed var(--edge-firm); border-radius: 12px; }
.mk-summary { padding: 12px 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--field); }
.mk-summary-count { margin: 0; font-family: var(--font-title); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--carbon-10); }
.mk-summary-detail, .mk-summary-note { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--carbon-40); }
.mk-summary-detail > .sev-dots { margin: 0 6px 0 0; }
.mk-landed-host { position: absolute; top: 56px; left: 50%; z-index: 6; transform: translateX(-50%); pointer-events: none; }
.mk-landed {
  pointer-events: auto; padding: 8px 16px; border: 0; border-radius: 22px; background: var(--carbon-10);
  color: var(--carbon-100); font-family: var(--font-ui); font-size: 14px; white-space: nowrap; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
/* ── end feedback round: the top slot ── */

/* ── settled rows (Variations 1a) ────────────────────────────────────────
   The account page's Organisation, Money and Variation terms sections
   (Variations spec 8, 9.1; lib/organisation-panel.js), drawn by the main
   app's settled-rows panel (shared/flow/views/settings-panel.js). The rules are
   app/flow/settings/settings.css's at main-app-final, class names unchanged, on Redline's own
   tokens, which carry the same names. The main app's page frame, project
   tabs and project address are left out: the account page draws none of
   them. The panel sits inside the account's .panel-shell, so it is no card
   of its own, and it draws no title: the account's h1 heads the page. A closed
   row is its label and value; an open row sits on a --page card. Every
   target is 44 px tall with 8 px to its neighbour. */
.account-organisation { margin-top: 40px; }
.settings { box-sizing: border-box; max-width: 864px; }
.settings-sub { margin: 8px 0 0; color: var(--label); font-size: 14px; line-height: 18px; }
.settings-ink { color: var(--ink); }
.settings-status { margin: 16px 0 0; font-size: 14px; line-height: 18px; }
.settings-status.banner-note { color: var(--label); }
.settings-status.banner-error { color: var(--danger); }

.settings-rows { margin-top: 26px; }
.settings-group + .settings-group { padding-top: 22px; }
.settings-group-label { margin: 0; padding: 0 0 6px; font-family: var(--font-mono); font-size: 12px; line-height: 16px;
  font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); }

/* A row */
.settings-row { padding: 4px 0; border-top: 1px solid var(--edge); border-radius: 10px; }
.settings-row.is-open { background: var(--page); border-top-color: transparent; }
.settings-row.is-open + .settings-row { border-top-color: transparent; }
.settings-head { display: grid; grid-template-columns: 168px 1fr auto; align-items: center; gap: 16px;
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 12px; margin: 0; background: none;
  border: 0; border-radius: 10px; text-align: left; font: inherit; color: inherit; }
button.settings-head { cursor: pointer; }
button.settings-head:hover { background: var(--page); }
.settings-row.is-open button.settings-head:hover { background: transparent; }
.settings-head:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.settings-label { font-size: 14px; line-height: 18px; color: var(--label); }
.settings-label small { display: block; margin-top: 2px; font-size: 12px; line-height: 14px; color: var(--label); }
.settings-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; min-width: 0;
  font-size: 16px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.settings-value small { font-size: 13px; color: var(--label); }
.settings-value.is-muted { color: var(--label); }
.settings-aside { display: flex; align-items: center; gap: 12px; }
.settings-chev { width: 16px; height: 16px; color: var(--carbon-60); opacity: 0; }
button.settings-head:hover .settings-chev, button.settings-head:focus-visible .settings-chev,
.settings-row.is-open .settings-chev { opacity: 1; }
.settings-row.is-open .settings-chev { transform: rotate(180deg); }
.settings-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ok); }
.settings-busy { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--edge);
  border-top-color: var(--label); box-sizing: border-box; }

/* An open row's editor, under the value column */
.settings-edit { display: grid; gap: 14px; padding: 8px 12px 14px 196px; }
.settings-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.settings-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.settings-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 1000px; border: 1px solid var(--sage-80); background: var(--field); font: inherit;
  font-size: 14px; color: var(--ink); cursor: pointer; }
.settings-chip:hover { border-color: var(--carbon-60); }
.settings-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.settings-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--carbon-100); }
.settings-chip small { font-size: 12px; color: inherit; opacity: .7; }
.settings-box { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
  box-sizing: border-box; border: 1px solid var(--sage-80); border-radius: 10px; background: var(--field);
  font-size: 15px; }
.settings-box:focus-within { border-color: var(--carbon-60); }
.settings-box input { align-self: stretch; min-width: 0; padding: 0; border: 0; outline: 0;
  background: transparent; font: inherit; color: var(--ink); }
.settings-box input[aria-invalid="true"] { color: var(--danger); }
.settings-box-wide input { width: 260px; }
.settings-box-name input { width: 180px; }
.settings-box-rate input { width: 44px; text-align: right; }
.settings-box-amount input { width: 90px; text-align: right; }
.settings-box.is-off { opacity: .4; }
.settings-unit { font-size: 14px; color: var(--label); white-space: nowrap; }
.settings-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0;
  background: none; font: inherit; font-size: 14px; color: var(--label); cursor: pointer; }
.settings-switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 10px; }
.settings-row-switch .settings-value { font-size: 14px; line-height: 18px; }
.settings-row-switch.is-muted .settings-head { cursor: default; opacity: .5; }
.settings-row-switch.is-muted button.settings-head:hover { background: none; }
.settings-group-note { margin: 8px 12px 0; font-size: 12px; line-height: 16px; color: var(--label); }
.settings-knob { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--ink); }
.settings-knob::after { content: ''; position: absolute; top: 2px; left: 18px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--field); }
.settings-knob.is-off { background: var(--suede-70); }
.settings-knob.is-off::after { left: 2px; }
.settings-error { margin: 0; font-size: 13px; line-height: 16px; color: var(--danger); }

/* The toast: a dark 44 px pill at the panel's foot. In the flow, under the
   last row, when the panel ends on screen; stuck 16 px above the viewport's
   foot while the panel runs past it, never fixed over a control. While it
   shows, whatever the browser scrolls to stops above its 76 px band. */
html:has(.settings-toast) { scroll-padding-bottom: 76px; }
.settings-toast { position: sticky; bottom: 16px; z-index: 1; display: flex; align-items: center; gap: 8px;
  width: fit-content; max-width: 100%; box-sizing: border-box; min-height: 44px; margin: 24px auto 0;
  padding: 0 0 0 18px; border-radius: 1000px;
  background: var(--ink); color: var(--carbon-100); font-size: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.settings-undo { min-height: 44px; padding: 0 16px; border: 0; border-radius: 1000px;
  background: rgba(255, 255, 255, .12); font: inherit; font-size: 13px; color: inherit; cursor: pointer; }
.settings-toast-close { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit;
  font-size: 1.125rem; color: inherit; cursor: pointer; }
.settings-undo:focus-visible, .settings-toast-close:focus-visible { outline: 2px solid var(--carbon-100);
  outline-offset: -4px; }

@media (max-width: 600px) {
  .settings-head { grid-template-columns: 1fr; gap: 4px; }
  .settings-head .settings-label { grid-row: 1; }
  .settings-head .settings-aside { grid-row: 1; justify-self: end; }
  .settings-edit { padding-left: 12px; }
  .settings-box-wide input, .settings-box-name input { width: 100%; }
  .settings-box-wide, .settings-box-name { flex: 1 1 160px; }
}

@keyframes settings-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .settings-row, button.settings-head { transition: background .15s; }
  .settings-chev { transition: opacity .15s, transform .15s; }
  .settings-knob { transition: background .15s; }
  .settings-knob::after { transition: left .15s; }
  .settings-busy { animation: settings-spin .8s linear infinite; }
}
/* ── end settled rows (Variations 1a) ── */

/* ── Variations 1a: welcome and the Redline link ── */
/* The welcome page's two steps (Variations spec 4): a narrow column, 24 px
   between the title, the lede and the controls. */
.welcome-step { max-width: 520px; }
.welcome-step > .title + .helper { margin-top: 24px; }
.welcome-step > .helper + .field { display: block; margin-top: 24px; }
.welcome-step > .actions { justify-content: flex-start; margin-top: 24px; }
/* The six expertise chips wrap, 8 px apart. */
.welcome-step > .actions.welcome-chips { gap: 8px; margin-top: 16px; }
/* ── end Variations 1a: welcome and the Redline link ── */

/* Variations 1b: project page */
/* Hi-fi page A (Variations 1b Task 5): the totals strip, the composer, and
   the three groups of variation rows, in Redline's tokens. */
.vo-totals { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 10px; font-size: 14px; color: var(--carbon-40); }
.vo-totals b { color: var(--carbon-10); font-variant-numeric: tabular-nums; }

/* The composer: the words and their quotes on the left, the drop on the right. */
.vo-compose { margin-top: 28px; padding: 12px; border-radius: 24px; background: var(--sage-80); }
.vo-compose-in { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
.vo-compose-box { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 16px;
  background: var(--sage-95); }
.vo-compose-lead { font-family: var(--font-title); font-size: 19px; line-height: 1.3; color: var(--carbon-30); }
.vo-compose-text { display: block; width: 100%; min-height: 72px; padding: 12px 14px; resize: vertical;
  border: 1px solid var(--edge-firm); border-radius: 14px; background: var(--annot-paper);
  font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--carbon-10); }
.vo-compose-text:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
.vo-compose-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vo-compose-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vo-compose-row .vo-hint { flex: 1 1 240px; font-size: 12px; color: var(--sage-45); }
.vo-compose-row .vo-draft { margin-left: auto; min-width: 0; }
.vo-compose-box .field-error { margin-top: 0; }
.vo-compose-drop { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 18px 20px; border: 1.5px dashed var(--sage-45); border-radius: 16px; background: var(--sage-95);
  text-align: center; cursor: pointer; }
.vo-compose-drop:focus-within { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
.vo-compose-drop.vo-drop-over { border-style: solid; background: var(--sage-90); }
.vo-compose-drop .drop-lead { font-size: 16px; color: var(--carbon-10); }
.vo-compose-drop .drop-link { font-size: 14px; color: var(--carbon-10); text-decoration: underline; }
.vo-compose-drop .drop-types { font-size: 12px; color: var(--carbon-40); }
/* The file input is the drop's own, hidden but in the tab order. */
.vo-drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
/* The drawing (Variations phase 2, mockup 11a): the drop's column holds the
   picker's link under it; the drawing's chip has a dashed square and opens
   the sheet; the line above the words names the mark's sheet. */
.vo-compose-side { display: flex; flex-direction: column; gap: 8px; }
.vo-compose-side .vo-compose-drop { flex: 1 1 auto; }
.vo-pick-drawing { align-self: center; padding: 2px 4px; border: 0; background: none; font-family: var(--font-ui);
  font-size: 13px; color: var(--carbon-10); text-decoration: underline; cursor: pointer; }
.vo-pick-drawing:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
.vo-chip-drawing .kind { border: 1.5px dashed var(--carbon-40); background: none; }
.vo-chip-drawing a { color: inherit; }
.vo-chip-drawing[data-missing="true"] { color: var(--carbon-40); }
.vo-compose-from { margin: 0; font-size: 13px; color: var(--carbon-40); }
.vo-drawing-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* The picker (mockup 11b): one row per sheet, one chosen; Upload on top. */
.vo-sheet { padding: 0; }
.vo-sheet-pick, .vo-sheet-upload { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 12px;
  align-items: start; padding: 10px 12px; cursor: pointer; }
.vo-sheet-pick > span, .vo-sheet-upload > span { display: flex; flex-direction: column; gap: 2px; }
.vo-sheet-upload { position: relative; display: flex; flex-direction: column; margin-top: 12px;
  border: 1px dashed var(--edge-firm); border-radius: 12px; }
.vo-sheet-upload:focus-within { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
.vo-sheets .vo-person-name { font-size: 14px; }
.vo-sheets .vo-person-how, .vo-sheet-upload .vo-person-how { font-size: 12.5px; color: var(--carbon-40); }

/* A quote's chip: its name, then what Theode made of it. The square's
   colour says the same: amber while it uploads or reads, green once read,
   red when it could not be read or did not upload. */
.vo-chip-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 8px 6px 8px;
  border: 1px solid var(--edge-firm); border-radius: 999px; background: var(--annot-paper); font-size: 13px;
  color: var(--carbon-10); }
.vo-chip-file .kind { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--carbon-55); }
.vo-chip-file i { font-style: normal; color: var(--carbon-40); white-space: nowrap; }
.quote-chip[data-status="uploading"] .kind, .quote-chip[data-status="reading"] .kind { background: var(--conflict); }
.quote-chip[data-status="read"] .kind { background: var(--ok); }
.quote-chip[data-status="unread"] .kind, .quote-chip[data-status="refused"] .kind,
.quote-chip[data-status="failed"] .kind { background: var(--sev-2); }
.quote-chip-x, .quote-chip-act { border: 0; background: none; padding: 0 4px; font-family: var(--font-ui);
  font-size: 13px; color: var(--carbon-40); cursor: pointer; }
.quote-chip-x { font-size: 16px; line-height: 1; }
.quote-chip-act { text-decoration: underline; }
.quote-chip-x:hover, .quote-chip-act:hover { color: var(--carbon-10); }

/* The groups and their rows: reference, title and when, amount, days. */
.vo-groups { display: flex; flex-direction: column; gap: 28px; margin-top: 36px; }
.vo-group-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.vo-group-title { font-family: var(--font-title); font-weight: 400; font-size: 20px; color: var(--sage-20); }
.vo-group-sum { font-size: 13px; color: var(--carbon-40); }
.vo-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vo-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 140px 90px; column-gap: 16px;
  align-items: center; min-height: 64px; padding: 12px 18px; border: 1px solid var(--carbon-90); border-radius: 14px;
  background: var(--suede-100); text-decoration: none; color: var(--carbon-10); }
.vo-row:hover { border-color: var(--carbon-55); }
.vo-row:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
.vo-ref { font-family: var(--font-mono); font-size: 12px; color: var(--carbon-40); }
.vo-row-main { min-width: 0; }
.vo-row-title { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vo-row-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--carbon-40); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.vo-amt { font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
.vo-amt small { display: block; font-size: 12px; color: var(--carbon-40); }
.vo-days { font-size: 13px; color: var(--carbon-40); text-align: right; }

@media (max-width: 760px) {
  .vo-compose-in { grid-template-columns: minmax(0, 1fr); }
  .vo-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .vo-row .vo-ref { grid-column: 1 / -1; }
  .vo-row .vo-days { grid-column: 2; }
}
/* ── end Variations 1b: project page ── */

/* Variations 1b: variation page */
/* Hi-fi page B (Variations 1b Task 6): the head and its pills, the strip,
   the order as paper with its fields in place, and the dock beside it
   (Redline's .ask-dock, laid in the page's second column). */
.vo-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.vo-head-main { min-width: 0; }
.vo-head .helper { margin-top: 6px; }
.vo-head-ref { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--carbon-40); }
.vo-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--edge-firm);
  border-radius: 999px; background: var(--suede-100); font-family: var(--font-ui); font-size: 12px; letter-spacing: 0;
  text-transform: none; color: var(--carbon-10); white-space: nowrap; }
.vo-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--carbon-55); }
.vo-pill-draft { border-style: dashed; }
.vo-pill-draft::before { background: transparent; border: 1.5px solid var(--carbon-55); }
.vo-head-ways { display: flex; align-items: center; gap: 8px; }
.vo-ask-pill { display: inline-flex; align-items: center; gap: 6px; }
.vo-ask-pill .share-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.vo-ask-pill[aria-pressed="true"] { border-color: var(--carbon-10); }
.vo-more { position: relative; }
.vo-menu-end { left: auto; right: 0; }

/* The strip: who approves, the margin, the tax, the days. */
.vo-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.vo-fact { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--carbon-90);
  border-radius: 12px; background: var(--suede-100); font-size: 13px; color: var(--carbon-40); }
.vo-fact b { font-weight: 400; color: var(--carbon-10); }
.vo-notice { margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--sandstone-100);
  font-size: 14px; color: var(--carbon-10); }

/* The paper, and the dock beside it from 900 px. */
.vo-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
.vo-layout-dock { grid-template-columns: minmax(0, 1fr) 400px; }
.vo-layout .vo-dock { position: sticky; top: 16px; height: calc(100vh - 32px); max-height: 820px; }
.vo-paper { min-width: 0; padding: 44px 52px 48px; border: 1px solid var(--carbon-95); background: var(--annot-paper);
  box-shadow: 0 1px 4px rgba(37, 36, 31, 0.12); font-family: var(--font-body); font-size: 14.5px; line-height: 1.55;
  color: var(--carbon-10); }
.vo-paper p { margin: 0; }
.vo-letterhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 18px;
  border-bottom: 1px solid var(--carbon-10); }
.vo-org { font-family: var(--font-title); font-size: 22px; line-height: 1.2; }
.vo-org small { display: block; margin-top: 4px; font-family: var(--font-ui); font-size: 12px; line-height: 1.5;
  color: var(--carbon-40); }
.vo-logo { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 10px;
  background: var(--sage-20); font-family: var(--font-title); font-size: 22px; color: var(--carbon-100); }
.vo-doc-title { margin: 24px 0 0; font-family: var(--font-title); font-size: 24px; font-weight: 400; line-height: 1.25; }
.vo-doc-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 18px; margin: 12px 0 0;
  font-size: 13px; }
.vo-doc-meta dt { color: var(--carbon-40); }
.vo-doc-meta dd { margin: 0; color: var(--carbon-10); }
.vo-sec { margin-top: 26px; }
.vo-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--carbon-40); }
.vo-sec-note { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0; text-transform: none; }
.vo-sec p + p, .vo-para + .vo-para { margin-top: 8px; }
.vo-quiet { color: var(--carbon-40); }
/* The figure under The change (Variations phase 2, mockup 11d): the marked-up
   extract at the paper's width, its caption small under it. */
.vo-figure { margin: 14px 0 0; }
.vo-figure img { display: block; box-sizing: border-box; width: 100%; height: auto; padding: 8px;
  border: 1px solid var(--carbon-90); background: #fff; }
.vo-figure figcaption { margin-top: 6px; font-size: 12px; color: var(--carbon-40); }

/* A part of the order the builder changes in place: dashed on hover, a
   field once pressed. */
.vo-edit { display: inline; padding: 0; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit;
  text-align: left; cursor: text; outline: 1px dashed transparent; outline-offset: 4px; }
.vo-edit-block { display: block; width: 100%; white-space: pre-wrap; }
.vo-edit:hover { outline-color: var(--edge-firm); }
.vo-edit:focus-visible { outline: 2px solid var(--carbon-10); }
.vo-field-wrap { display: inline-flex; flex-direction: column; gap: 4px; max-width: 100%; vertical-align: top; }
.vo-field-block { display: flex; width: 100%; }
.vo-field { min-width: 0; padding: 4px 8px; border: 1px solid var(--edge-firm); border-radius: 8px;
  background: var(--annot-paper); font: inherit; color: var(--carbon-10); }
.vo-field:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 1px; }
.vo-field-area { width: 100%; resize: vertical; field-sizing: content; min-height: 3lh; }
.vo-field-wrap .field-error { margin-top: 0; font-family: var(--font-ui); font-size: 12px; }
.vo-money { width: 140px; text-align: right; font-variant-numeric: tabular-nums; }
.vo-add { padding: 0; border: 0; background: none; font-family: var(--font-ui); font-size: 13px; color: var(--carbon-10);
  text-decoration: underline; cursor: pointer; }
.vo-sec .vo-add { margin-top: 8px; }

/* The cost table. */
.vo-lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vo-lines th { padding: 0 8px 6px 0; border-bottom: 1px solid var(--carbon-90); font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 400; letter-spacing: .06em; text-align: left; text-transform: uppercase;
  color: var(--carbon-40); }
.vo-lines td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--carbon-95); vertical-align: top; }
.vo-lines .num { text-align: right; white-space: nowrap; }
.vo-lines th.num, .vo-lines td.num { padding-right: 0; }
.vo-lines .sub { display: block; font-size: 12px; color: var(--carbon-40); }
.vo-lines tr.quiet td { color: var(--carbon-40); }
.vo-lines tr.total td { padding-top: 10px; border-top: 1px solid var(--carbon-10); border-bottom: 0; font-weight: 700; }
/* The tax switch: on, the knob is right and dark. */
.vo-switch { position: relative; width: 30px; height: 18px; margin-right: 8px; padding: 0; vertical-align: -4px;
  border: 1px solid var(--edge-firm); border-radius: 999px; background: var(--suede-95); cursor: pointer; }
.vo-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--carbon-55); transition: left .15s; }
.vo-switch[aria-checked="true"] { background: var(--carbon-10); border-color: var(--carbon-10); }
.vo-switch[aria-checked="true"]::after { left: 14px; background: var(--annot-paper); }
.vo-switch:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }

/* The dock's own parts: a turn's note, and Undo. */
.ask-a .vo-ask-note { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--sandstone-100);
  font-size: 14px; line-height: 1.45; }
.vo-undo { padding: 0; border: 0; background: none; font: inherit; color: var(--carbon-10); text-decoration: underline;
  cursor: pointer; }

@media (max-width: 900px) {
  .vo-layout-dock { grid-template-columns: minmax(0, 1fr); }
  .vo-layout .vo-dock { position: static; height: 70vh; }
  .vo-paper { padding: 24px 20px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .vo-switch::after { transition: none; }
}
/* ── end Variations 1b: variation page ── */

/* Variations 1c */
/* Hi-fi page C and mockups 4a to 4c (Variations 1c Task 6): the state
   pills, the read-only paper's approval block, board 4b's banner, the Send
   card over a dimmed page, Record an answer and the link box. */
.vo-pill-sent::before { background: var(--conflict); }
.vo-pill-approved::before { background: var(--ok); }
.vo-pill-declined::before { background: var(--danger); }
.vo-pill-closed { color: var(--carbon-40); }
.vo-ro-block { display: block; white-space: pre-wrap; }
.vo-rev { margin-left: 6px; color: var(--carbon-40); }
.vo-rev-bar { margin: 16px 0 0; font-size: 14px; color: var(--carbon-40); }
.vo-rev-bar a { color: var(--carbon-10); }

/* The approval block that closes the paper, a line per person. */
.vo-approval { margin-top: 26px; padding: 18px 20px; border: 1px solid var(--carbon-10); border-radius: 10px; }
.vo-approval p { font-size: 14px; }
.vo-sign { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; margin-top: 16px; }
.vo-sign-line { padding-top: 28px; border-bottom: 1px solid var(--carbon-10); font-family: var(--font-ui); font-size: 12px;
  color: var(--carbon-40); }
.vo-sign-line b { display: block; min-height: 1.4em; font-size: 14px; font-weight: 400; color: var(--carbon-10); }
.vo-sign-line.signed { border-bottom-color: var(--ok); }
.vo-sign-line.signed b { font-family: var(--font-title); font-style: italic; font-size: 18px; }

/* Board 4b: changes were asked for. */
.vo-changes-wrap { margin-bottom: 20px; }
.vo-banner { margin: 0 0 16px; padding: 10px 16px; border-radius: 12px; background: var(--sandstone-100);
  font-size: 13px; color: var(--carbon-10); }
.vo-card { max-width: 520px; padding: 16px 18px; border: 1px solid var(--edge); border-radius: 16px;
  background: var(--suede-100); }
.vo-card h3 { margin: 0 0 8px; font-family: var(--font-title); font-size: 17px; font-weight: 400; }
.vo-card p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--carbon-10); }
.vo-card p + p { margin-top: 6px; }
.vo-card .helper { font-size: 13px; color: var(--carbon-40); }
.vo-answer-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.vo-answer-row .btn { min-width: 0; }

/* The Send card. */
.vo-backdrop { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: center;
  padding: 72px 16px 16px; overflow-y: auto; background: rgba(21, 18, 15, 0.42); }
.vo-dialog { width: 560px; max-width: 100%; padding: 24px; border: 1px solid var(--carbon-95); border-radius: 16px;
  background: var(--suede-100); box-shadow: 0 12px 40px rgba(37, 36, 31, 0.24); font-family: var(--font-ui);
  color: var(--carbon-10); }
.vo-dialog h2, .vo-dialog-title { margin: 0 0 8px; font-family: var(--font-title); font-size: 22px; font-weight: 400; }
.vo-dialog .field-label { display: block; margin: 18px 0 6px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--carbon-40); }
.vo-dialog .helper { margin-top: 8px; }
.vo-first { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.vo-first .field-input, .vo-person-fields .field-input { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; }
.vo-first-help { grid-column: 1 / -1; margin-top: 6px; font-size: 13px; color: var(--carbon-40); }
.vo-first .field-error { grid-column: 1 / -1; }
.vo-people { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.vo-person { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px 12px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--carbon-90); border-radius: 12px; }
.vo-person-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vo-person-opts { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; }
.vo-person-opts label { display: inline-flex; align-items: center; gap: 6px; }
.vo-person-opts .off { color: var(--carbon-55); }
.vo-prices { display: inline-flex; align-items: center; }
.vo-check { width: 16px; height: 16px; margin: 0; accent-color: var(--carbon-10); }
.vo-include { margin-top: 12px; }
.vo-docs { grid-column: 2; display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding: 8px 0 0;
  border-top: 1px solid var(--carbon-95); list-style: none; font-size: 13px; }
.vo-docs label { display: inline-flex; align-items: center; gap: 8px; }
.vo-docs i { font-style: normal; color: var(--carbon-40); }
.vo-docs li.off { color: var(--carbon-40); }
.vo-docs-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--carbon-40); }
.vo-person-add { display: block; padding: 0; border-style: dashed; }
.vo-add-person { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 14px 12px 48px; border: 0;
  border-radius: 12px; background: none; font: inherit; text-align: left; cursor: pointer; }
.vo-add-person .vo-person-name { font-size: 15px; color: var(--carbon-40); }
.vo-add-person .vo-person-how { font-size: 12.5px; color: var(--carbon-40); }
.vo-add-person:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
.vo-note { display: block; }
.vo-msg { display: block; width: 100%; padding: 10px 14px; border: 1px solid var(--edge-firm); border-radius: 12px;
  background: var(--carbon-100); font: inherit; font-size: 14px; line-height: 1.45; color: var(--carbon-10);
  resize: vertical; }
.vo-msg:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 1px; }
.vo-reminders { font-size: 13px; }
.vo-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.vo-dialog-actions .btn { min-width: 0; }

/* Record an answer, and a person's link shown once. */
.vo-record .field { display: block; margin-top: 4px; }
.vo-record .field-input { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; }
.vo-record textarea.field-input { height: auto; padding: 10px 12px; }
.vo-record .field-label { display: block; margin: 14px 0 6px; }
.vo-record-answers { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.vo-record-answers legend { padding: 0; }
.vo-record-answers label, .vo-record-one { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.vo-record-one { margin-top: 10px; }
.vo-copy-row { display: flex; gap: 8px; margin-top: 14px; }
.vo-copy-url { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; font-family: var(--font-mono);
  font-size: 13px; }
.vo-copy-said { margin-top: 8px; }
.vo-more-slot { display: contents; }

@media (max-width: 600px) {
  .vo-first, .vo-person-fields { grid-template-columns: minmax(0, 1fr); }
  .vo-backdrop { padding-top: 16px; }
}
/* ── end Variations 1c ── */

/* Variations 1c link page */
/* Hi-fi page D (Variations 1c Task 7): the approver's page at /a/, a phone
   column with no nav: the wordmark and who it is for, the sender's note,
   the order as paper, the answer box, a question, and once answered the
   banner, the sign lines and what happens next. */
.vo-link { max-width: 680px; margin: 0 auto; padding: 0 16px 40px; }
.vo-link-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 0;
  padding-right: 0; }
.vo-link-for { font-size: 13px; color: var(--carbon-40); }
.vo-link-main { margin-top: 8px; }
.vo-link-note { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--suede-95);
  font-size: 14px; line-height: 1.45; color: var(--carbon-10); white-space: pre-wrap; }
.vo-link-by { color: var(--carbon-40); }
.vo-answer { margin-top: 20px; padding: 20px 22px; border: 1px solid var(--edge); border-radius: 16px;
  background: var(--suede-100); }
.vo-answer h2 { margin: 0; font-family: var(--font-title); font-size: 20px; font-weight: 400; }
.vo-answer .helper { margin-top: 4px; }
.vo-name-input { display: block; width: 100%; height: 48px; margin-top: 14px; padding: 0 16px; border-radius: 12px;
  font-size: 16px; }
.vo-one { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; }
.vo-answer .vo-answer-row .btn { flex: 1 1 40%; height: 44px; }
.vo-answer .vo-answer-row .vo-approve { flex-basis: 100%; height: 48px; }
.vo-answer-comment .field-label { display: block; margin: 16px 0 6px; }
.vo-answer-comment .vo-msg, .vo-question-box .vo-msg { min-height: 96px; }
.vo-answer-more { margin-top: 12px; font-size: 13px; color: var(--carbon-40); }
.vo-light { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--carbon-40); }
.vo-link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--carbon-10);
  text-decoration: underline; cursor: pointer; }
.vo-link-btn:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
.vo-question { margin-top: 16px; }
.vo-question-box .field-label { display: block; margin: 0 0 6px; }
.vo-question-thanks { margin: 0 0 8px; font-size: 14px; color: var(--carbon-10); }
.vo-banner.ok { background: #e4ecd9; }
.vo-link-title { margin-top: 4px; font-size: 22px; }
.vo-link-done .vo-approval { margin-top: 18px; }
.vo-sign-one { grid-template-columns: minmax(0, 1fr); }
/* The paper's own approval block: the answer box (live) and the sign block
   (answered) carry the sentence and the sign lines here, once (hi-fi D). */
.vo-link .vo-paper .vo-approval { display: none; }
.vo-link-next { max-width: none; margin-top: 16px; }
.vo-link-said { margin-top: 32px; }
.vo-link-retry { margin-top: 20px; }
@media (max-width: 600px) {
  .vo-link { padding: 0 12px 32px; }
  .vo-link .vo-paper { padding: 22px 20px; font-size: 13.5px; }
  .vo-link .vo-doc-title { font-size: 19px; }
}
/* ── end Variations 1c link page ── */

/* Variations 1c after approval */
/* Mockup frame 6 (Variations 1c Task 8): once an order is sent, the right
   rail's timeline, ending on the work instruction once approved; the
   instruction card (the Send card's dialog); a free quote's trash on its
   chip; and the account's bank details box of several lines. */
.vo-layout-rail { grid-template-columns: minmax(0, 1fr) 320px; }
.vo-rail { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
.vo-rail .vo-card { max-width: none; }
.vo-time { display: flex; flex-direction: column; margin: 8px 0 0; padding: 0; list-style: none; }
.vo-time li { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px;
  padding: 8px 0 8px 22px; font-size: 13.5px; line-height: 1.4; }
.vo-time li::before { content: ""; position: absolute; left: 4px; top: 14px; box-sizing: border-box; width: 9px;
  height: 9px; border-radius: 50%; background: var(--carbon-55); }
.vo-time li::after { content: ""; position: absolute; left: 8px; top: 24px; bottom: -10px; width: 1px;
  background: var(--carbon-90); }
.vo-time li:last-child::after { display: none; }
.vo-time li.done::before { background: var(--ok); }
.vo-time li.next::before { border: 1.5px dashed var(--carbon-55); background: transparent; }
.vo-time time { padding-top: 2px; font-family: var(--font-mono); font-size: 11.5px; color: var(--carbon-40); }
.vo-time .t { min-width: 0; color: var(--carbon-10); overflow-wrap: anywhere; }
.vo-time .t small { display: block; font-size: 12.5px; color: var(--carbon-40); }
.vo-time .btn { display: flex; min-width: 0; margin-top: 6px; }
.vo-time-open { display: block; font-size: 12.5px; color: var(--carbon-10); }
.vo-time-again { min-width: 0; margin-top: 10px; }
.vo-instruction .vo-msg { min-height: 180px; }
.quote-chip-trash { display: inline-flex; align-items: center; padding: 0 2px; border: 0; background: none;
  color: var(--carbon-40); cursor: pointer; }
.quote-chip-trash svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.quote-chip-trash:hover { color: var(--danger); }
.quote-chip-trash:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 1px; }
.account-area .settings-group { padding-top: 0; }
/* The Connectors group (Variations 1d Task 8). */
.account-connectors { margin-top: 22px; }
.account-connectors .helper { margin: 0; }
.account-wa-message { margin: 0; }
.account-wa-message code { font-family: var(--font-mono); font-size: 15px; color: var(--ink); }
.account-mcp-url { font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; }
.account-connectors .settings-group-note { margin: 0 12px 6px 196px; }
@media (max-width: 600px) {
  .account-connectors .settings-group-note { margin-left: 12px; }
}
.settings-lines { white-space: pre-line; }
.settings-area { display: block; box-sizing: border-box; width: 100%; max-width: 520px; padding: 10px 12px;
  border: 1px solid var(--sage-80); border-radius: 10px; background: var(--field); font: inherit; font-size: 15px;
  line-height: 1.45; color: var(--ink); resize: vertical; }
.settings-area:focus { border-color: var(--carbon-60); outline: none; }
.settings-area[aria-invalid="true"] { color: var(--danger); }
@media (max-width: 900px) {
  .vo-layout-rail { grid-template-columns: minmax(0, 1fr); }
  .vo-rail { position: static; }
}
@media (max-width: 600px) {
  .vo-time li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* ── end Variations 1c after approval ── */

/* ── Redline sketch view (spec 2026-11-07) ── */
/* Rules for the drawing view sit under .sv or body:has(.sv); screen-only
   rules sit in a screen, container or spec-printed block. New rules go
   above the touch block, which stays last (ruling K-e). */

/* Redline pages only (spec 4.1, E9): Variations links this stylesheet and
   every Variations page carries [data-variations-root], so these leave its
   pills and its wordmark as they are. The :where() adds no specificity. */
@media screen {
  :where(body:not(:has([data-variations-root]))) .btn { border-radius: var(--r-md); }
  :where(body:not(:has([data-variations-root]))) .btn-sm { border-radius: var(--r-md); }
  :where(body:not(:has([data-variations-root]))) .top-pill { border-radius: var(--r-md); }
  :where(body:not(:has([data-variations-root]))) .file-menu { border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
  :where(body:not(:has([data-variations-root]))) .dl-panel { box-shadow: var(--shadow-pop); }
  :where(body:not(:has([data-variations-root]))) .wordmark-redline { color: var(--brand-red); }
}

/* Redline's look from the Figma (walk wave B), Redline pages only (E9): the
   base rules above keep Variations as it was. Each override matches its
   base rule's weight and comes after it; the touch lines are inside. */
@media screen {
  :where(body:not(:has([data-variations-root]))) .top-nav .crumb-here { font-weight: 600; }
  :where(body:not(:has([data-variations-root]))) .drop-band { padding: 0; background: none; }
  :where(body:not(:has([data-variations-root]))) .drop { border: 1.5px dashed var(--line); border-radius: 16px; background: #f5f2ef; }
  :where(body:not(:has([data-variations-root]))) .drop:hover { border-color: var(--carbon-55); }
  :where(body:not(:has([data-variations-root]))) .drop-over { border-color: var(--carbon-10); border-style: solid; background: var(--suede-90); }
  :where(body:not(:has([data-variations-root]))) .drop .drop-lead { font-size: 24px; line-height: 28px; color: var(--carbon-10); }
  :where(body:not(:has([data-variations-root]))) .drop .drop-link {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 40px; padding: 0 20px;
    border-radius: 10px; background: var(--carbon-10); color: var(--suede-100); font-size: 14px; line-height: 18px;
    font-weight: 600; text-decoration: none;
  }
  :where(body:not(:has([data-variations-root]))) .drop:hover .drop-link { background: var(--suede-5); }
  :where(body:not(:has([data-variations-root]))) .drop .drop-types { font-size: 12px; line-height: 16px; color: var(--carbon-30); }
  :where(body:not(:has([data-variations-root]))) .drop-compact .drop-lead { font-size: 17px; line-height: 22px; }
  :where(body:not(:has([data-variations-root]))) .ask-title { font-size: 24px; line-height: 28px; color: var(--carbon-10); }
  :where(body:not(:has([data-variations-root]))) .ask-chip {
    padding: 6px 12px; border-color: var(--carbon-10); background: var(--carbon-10); line-height: 16px; color: var(--suede-100);
  }
  :where(body:not(:has([data-variations-root]))) .ask-chip .ask-chip-x { color: inherit; }
  :where(body:not(:has([data-variations-root]))) .ask-chip .ask-chip-x:hover { background: rgba(251, 250, 249, 0.18); color: inherit; }
  /* The base ring is carbon-10, the dark chip's own fill: the x's ring is light here (review I3). */
  :where(body:not(:has([data-variations-root]))) .ask-chip .ask-chip-x:focus-visible { outline-color: var(--suede-100); }
  :where(body:not(:has([data-variations-root]))) .ask-q { border-radius: 12px; background: var(--suede-95); font-size: 14px; line-height: 18px; }
  :where(body:not(:has([data-variations-root]))) .ask-a { font-size: 14px; line-height: 20px; }
  :where(body:not(:has([data-variations-root]))) .ask-box {
    margin: 12px 16px 8px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  }
  :where(body:not(:has([data-variations-root]))) .ask-sheet .ask-box { margin: 10px 12px 8px; padding: 6px; }
  :where(body:not(:has([data-variations-root]))) .ask-box:focus-within { border-color: var(--carbon-10); box-shadow: 0 0 0 1px var(--carbon-10); }
  :where(body:not(:has([data-variations-root]))) .ask-input { min-height: 30px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; }
  :where(body:not(:has([data-variations-root]))) .ask-input:focus { outline: none; }
  :where(body:not(:has([data-variations-root]))) .ask-send { height: 30px; padding: 0 14px; border-radius: 8px; }
}
/* A finger needs more than 30 px: Send and the field are 44 high on a phone or a coarse pointer. */
@media screen and (max-width: 640px), screen and (pointer: coarse) {
  :where(body:not(:has([data-variations-root]))) .ask-send { height: 44px; }
  :where(body:not(:has([data-variations-root]))) .ask-input { min-height: 44px; }
}

/* The drawing's top bar (spec 4.3.2, 4.3.5, N7, I10). Never on a bare
   .top, which every Redline and Variations page draws: the 64 px height on
   .fv-body .top (on the body before the bar renders, so no 84 px first
   paint; a rule document on the file page gets it too), everything else on
   .top-sheet, which only a drawing's bar carries. */
@media screen and (min-width: 901px) {
  .fv-body .top { min-height: 64px; padding: 0 24px; }
}
@media screen {
  /* A 1 x 16 px --line divider between the wordmark and the crumbs (the
     nav's gap spaces it from the first crumb); crumbs Lato 14/18, the name
     600 with an ellipsis (its full name in title). */
  .top-sheet .top-nav { font-family: var(--font-ui); font-size: 14px; line-height: 18px; }
  .top-sheet .top-nav::before { content: ""; flex: none; width: 1px; height: 16px; background: var(--line); }
  .top-sheet .top-nav a { color: var(--carbon-40); font-weight: 400; }
  .top-sheet .top-nav a:hover { color: var(--carbon-10); }
  .top-sheet .top-nav .crumb-sep { color: var(--line); }
  .top-sheet .top-nav .crumb-here {
    color: var(--carbon-10); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* ‹ › after the name: 28 x 28, a 16 px glyph. */
  .top-sheet .fv-nav { gap: 4px; }
  .top-sheet .fv-icon { width: 28px; height: 28px; padding: 6px; border-radius: var(--r-md); }
  .top-sheet .fv-icon-img { width: 16px; height: 16px; }
  /* Share and Ask read as outline buttons in this bar. */
  .top-sheet .share-pill, .top-sheet .ask-pill {
    height: 32px; padding: 0 12px; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-md);
    background: transparent; font: 600 14px/18px var(--font-ui); color: var(--carbon-10);
  }
  .top-sheet .share-pill:hover, .top-sheet .ask-pill:hover { background: var(--suede-95); }
  /* "Put it in the order" (Variations phase 2) follows Ask in the same look. */
  .top-sheet .fv-order-pill {
    height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md);
    background: transparent; font: 600 14px/18px var(--font-ui); color: var(--carbon-10);
  }
  /* The account is a quiet text button; the viewer's "Try Redline" keeps
     its pill (spec 4.3.2: as today). */
  .top-sheet :is(.top-who, .top-account, .top-pill:not(.view-try), .top-switch) {
    border: 0; background: none; font: 600 13px var(--font-ui);
  }
  .top-sheet .top-pill:not(.view-try):hover { text-decoration: underline; }
  /* The share viewer's note is a slim line under the bar. */
  body:has(.sv) .view-note { margin: 0 0 12px; padding: 0; border: 0; background: none; font-size: 13px; color: var(--carbon-40); }
  body:has(.sv) .view-note-icon { width: 16px; height: 16px; }
  /* The drawing's name is the page's heading for a screen reader and
     paper's title (E1, spec 4.3.7); on screen the bar's crumb shows it.
     Absolutely placed, it takes no cell in the Ask grid. */
  body:has(.sv) .fv-main > .fv-name {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}
/* 900 px and below: two rows, the wordmark and the right zone, then the
   crumbs with ‹ ›. The divider has no wordmark beside it there. */
@media screen and (max-width: 900px) {
  .top.top-sheet {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mark right" "crumb crumb";
    row-gap: 8px;
  }
  .top-sheet .top-left { display: contents; }
  /* The wordmark keeps its own width: stretched over row 1, a tap on the
     bar's blank middle would leave the page. */
  .top-sheet .wordmark { grid-area: mark; justify-self: start; }
  .top-sheet .top-nav { grid-area: crumb; }
  .top-sheet .top-nav::before { display: none; }
  .top-sheet .top-right { grid-area: right; }
}
/* 640 px and below: Share and Ask are 44 x 44 icons (their words stay
   their names), and every item has its own area, so between 481 and 640 px
   Account and Sign out never swap (N8). Row 1: wordmark, Share, Ask, Sign
   out; row 2: the project, the name, ‹ › and Account. "Projects" and its
   separator go by their link; the viewer has no "Projects" crumb. No
   .annot-layout here: the page's 640 px block stays the one that stacks
   the sheet. */
@media screen and (max-width: 640px) {
  .top.top-sheet {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "mark share ask out" "crumb crumb crumb account"; column-gap: 8px;
  }
  /* A bar with no account (the share viewer's) gives the crumbs the last
     column too, so the drawing's name keeps its room. */
  .top.top-sheet:not(:has(.top-account)) { grid-template-areas: "mark share ask out" "crumb crumb crumb crumb"; }
  .top-sheet .top-right { display: contents; }
  /* Under about 360 px "Redline" wraps under "Theode" rather than running
     under Share. */
  .top-sheet .wordmark { grid-area: mark; justify-self: start; flex-wrap: wrap; row-gap: 0; }
  .top-sheet .top-nav { grid-area: crumb; margin-top: 0; }
  .top-sheet .share-pill { grid-area: share; }
  .top-sheet .ask-pill { grid-area: ask; }
  .top-sheet .top-pill { grid-area: out; justify-self: end; }
  .top-sheet .top-pill:not(.view-try) { padding: 0 8px; }
  .top-sheet .top-account { grid-area: account; justify-self: end; margin-top: 0; }
  .top-sheet .share-pill, .top-sheet .ask-pill { width: 44px; height: 44px; padding: 0; gap: 0; }
  /* The order pill has no icon: its own row under the crumbs keeps its words. */
  .top-sheet .fv-order-pill { grid-column: 1 / -1; grid-row: 3; justify-self: start; height: 44px; }
  .top-sheet .share-pill { font-size: 0; }
  .top-sheet .fv-icon { width: 44px; height: 44px; padding: 14px; }
  .top-sheet .top-nav > :is(a, .crumb-sep, .crumb-here) { display: inline; }
  .top-sheet .top-nav > .fv-nav { display: flex; }
  .top-sheet .top-nav > a[href="/projects"], .top-sheet .top-nav > a[href="/projects"] + .crumb-sep { display: none; }
}
/* The switcher to the other app (retire-main P5c, ruling C4): the drawing's
   bar has no room for it beside Share, Ask and the account at 1100 px and
   below, nor at 1280 px and below when "Put it in the order" shows too. The
   project page one crumb up, and the variation page, always draw it. */
@media screen and (max-width: 1100px) {
  .top-sheet .top-switch { display: none; }
}
@media screen and (max-width: 1280px) {
  .top-sheet:has(.fv-order-pill) .top-switch { display: none; }
}

/* The drawing page and its dark canvas (spec 4.2, 4.4.2; mockup frames A,
   C, E). The page is one light surface with no shell; the canvas holds
   the scroller and every float, each absolute inside it (D5) at z-index 6,
   painting in DOM order: the top edge, the corner, the landed notice, the
   hint pill, then the dock, so a dock menu opening upward covers them. */
@media screen {
  body:has(.sv), body:has(.sv) .page, body:has(.sv) .fv-screen, body:has(.sv) .fv, body:has(.sv) .fv-main,
  .annot-host.sv { background: var(--suede-100); }
  body:has(.sv) .fv-screen { margin: 0; padding: 0; border-radius: 0; }
  /* No top padding: the canvas starts under the bar, and the Ask dock's
     heights between 900 and 1100 px count on it (spec 4.3.5, M16). */
  body:has(.sv) .fv-main { padding: 0 24px 24px; }
  .sv .annot-layout { margin-top: 0; gap: 24px; }
  .sv .annot {
    position: relative; overflow: hidden; border: 0; border-radius: var(--r-lg); background: var(--canvas);
    container: sv-canvas / inline-size;
  }
  .sv .annot-scroller { background: transparent; scrollbar-color: var(--float-rule) transparent; }
  /* The side 24 px is G.sidePad's room for the pins (M3); the top clears
     one row of chrome (two rows and a touch screen below), the foot the dock. */
  .sv .annot-pages { padding: 56px 24px 96px; gap: 24px; }
  .sv .annot-page { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
  .sv :is(.mk-side, .annot-panel) { padding: 4px 0 24px; gap: 16px; background: var(--suede-100); }
  .annot-host.sv:fullscreen .annot-panel { background: var(--suede-100); }
  .sv .annot-list { background: var(--suede-100); }
  .annot-host.sv:fullscreen { background: var(--suede-100); }
  /* Section labels in the drawing view are Lato, not mono capitals (4.1). */
  .sv :is(.mk-lab, .mk-layers-head, .contra-section) {
    font-family: var(--font-ui); text-transform: none; letter-spacing: 0; font-size: 12px; line-height: 16px;
    font-weight: 600; color: var(--carbon-40);
  }
  /* Focus rings on the dark canvas (4.1, I12); .annot clips a ring drawn
     outside the scroller, so its own is inset. */
  .sv .annot-scroller:focus-visible { outline: 2px solid var(--float-on); outline-offset: -4px; }
  .sv :is(.sv-main, .sv-caret, .sv-more, .sv-item, .sv-icon, .sv-pill, .annot-select, .annot-scope .annot-tool,
    .mk-scale-chip .mk-link, .mk-landed):focus-visible { outline: 2px solid var(--float-on); outline-offset: 2px; }

  /* The top edge: Top / All centred between two equal sides, the ⋯ and
     Hide panel at the right. Its empty cells let presses reach the sheet. */
  .sv .sv-top {
    position: absolute; z-index: 6; top: 16px; left: 16px; right: 16px; display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: ". scope end";
    align-items: center; row-gap: 8px; pointer-events: none;
  }
  .sv .sv-top > * { pointer-events: auto; }
  /* The ⋯ menu hangs from the top edge, which comes before the landed
     notice: raised while the menu is open (N5). */
  .sv .sv-top:has(> .sv-end > [data-file-download][aria-expanded="true"]) { z-index: 7; }
  .sv .sv-end { grid-area: end; justify-self: end; display: flex; align-items: center; gap: 8px; }
  /* The menu's holder sits on the ⋯'s right edge and takes no gap. */
  .sv .sv-end > .annot-download-menu { margin-left: -8px; }
  /* The corner: the page chip and the scale chip, top left (bottom left on
     a 1,220 px canvas, below). */
  .sv .sv-corner { position: absolute; z-index: 6; top: 16px; left: 16px; display: flex; align-items: center; gap: 8px; }
  .sv .mk-scale-host:empty { display: none; }
  .sv .mk-landed-host { top: 56px; }
  /* The dock, centred by its margins, never a transform (F3, N3): the
     toast anchors to its box. */
  .sv .sv-dock {
    position: absolute; z-index: 6; bottom: 16px; left: 16px; right: 16px; width: max-content; margin-inline: auto;
    display: flex; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--float-edge);
    border-radius: var(--r-xl); background: var(--float); box-shadow: var(--shadow-float);
  }
  .sv .sv-rule { flex: none; width: 1px; height: 20px; margin: 0 4px; background: var(--float-rule); }
  .sv .sv-dock:has(> [data-mk-toolbar]:empty) > .sv-rule { display: none; }
  .sv .sv-zoom { display: flex; align-items: center; gap: 2px; }

  /* The icon buttons (zoom, ⋯): 32 x 32, an 18 px CSS-mask glyph in the
     text colour (4.1, M-2); the fit AJ marks pressed carries a ring, not
     the tint alone (M11). */
  .sv .sv-icon {
    display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0;
    border-radius: var(--r-md); background: none; color: var(--float-muted); cursor: pointer;
  }
  .sv .sv-icon:hover { background: var(--float-hover); }
  .sv .sv-icon[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.12); color: var(--float-ink); box-shadow: inset 0 0 0 1.5px var(--float-ink);
  }
  .sv .sv-icon::before, .sv .sv-pill::before {
    content: ""; flex: none; background: currentColor; mask-position: center; mask-repeat: no-repeat; mask-size: contain;
  }
  .sv .sv-icon::before { width: 18px; height: 18px; }
  .sv [data-annot-zoom-out]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='M5.5 8h5M12 12l3.5 3.5'/%3E%3C/svg%3E");
  }
  .sv [data-annot-zoom-in]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='M5.5 8h5M8 5.5v5M12 12l3.5 3.5'/%3E%3C/svg%3E");
  }
  .sv [data-annot-fit-width]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M2 9h14M2 6v6M16 6v6M5 7l-2 2 2 2M13 7l2 2-2 2'/%3E%3C/svg%3E");
  }
  .sv [data-annot-fit-page]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='4' y='2.5' width='10' height='13' rx='1'/%3E%3C/svg%3E");
  }
  /* ⋯: the float look, three dots in --float-ink. */
  .sv .sv-more {
    border: 1px solid var(--float-edge); border-radius: var(--r-lg); background: var(--float); box-shadow: var(--shadow-float);
    color: var(--float-ink);
  }
  .sv .sv-more:hover, .sv .sv-more[aria-expanded="true"] { background: var(--float-hover); }
  .sv .sv-more::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='%23000'%3E%3Ccircle cx='4' cy='9' r='1.4'/%3E%3Ccircle cx='9' cy='9' r='1.4'/%3E%3Ccircle cx='14' cy='9' r='1.4'/%3E%3C/svg%3E");
  }
  /* Hide panel: a dark pill with a 16 px panel glyph; panel-hide.js writes
     its words, and the glyph is a pseudo-element that survives them. Its
     flex display is set only from a 960 px host, below, so the host's
     narrow rule still hides it. */
  .sv .sv-pill {
    height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--float-edge); border-radius: var(--r-lg);
    background: var(--float); box-shadow: var(--shadow-float); color: var(--float-ink); font: 600 13px var(--font-ui);
    white-space: nowrap; cursor: pointer;
  }
  .sv .sv-pill:hover { background: var(--float-hover); }
  .sv .sv-pill::before {
    width: 16px; height: 16px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='2' y='3' width='12' height='10' rx='1.5'/%3E%3Cpath d='M10 3v10'/%3E%3C/svg%3E");
  }

  /* Top flags / All flags: a segmented chip in the float look; the chosen
     pill (aria-checked, painted by AJ) is --float-on. */
  .sv .annot-scope {
    grid-area: scope; justify-self: center; display: inline-flex; gap: 2px; padding: 2px;
    border: 1px solid var(--float-edge); border-radius: 10px; background: var(--float); box-shadow: var(--shadow-float);
  }
  .sv .annot-scope .annot-tool {
    height: 26px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: transparent;
    font: 600 13px/18px var(--font-ui); color: var(--float-muted); cursor: pointer;
  }
  .sv .annot-scope .annot-tool:hover { color: var(--float-ink); }
  .sv .annot-scope .annot-tool[aria-checked="true"] { background: var(--float-on); color: var(--carbon-10); }
  /* The page chip: AJ's select, a chevron in --float-muted. */
  .sv .annot-select {
    height: 34px; padding: 0 28px 0 12px; appearance: none; border: 1px solid var(--float-rule); border-radius: 10px;
    background: var(--float) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23adab9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") no-repeat right 10px center / 12px 12px;
    box-shadow: var(--shadow-float); color: var(--float-ink); font: 400 12px/16px var(--font-ui); cursor: pointer;
  }
  .sv .annot-select:hover { background-color: var(--float-hover); }
  /* The scale chip (lazy), styled as the page chip, and its Calibrate link. */
  .sv .mk-scale-chip {
    height: 34px; margin-left: 0; padding: 0 12px; gap: 6px; border: 1px solid var(--float-rule); border-radius: 10px;
    background: var(--float); box-shadow: var(--shadow-float); color: var(--float-ink); font: 400 12px/16px var(--font-ui);
    white-space: nowrap;
  }
  .sv .mk-scale-chip .mk-link { font-size: 13px; font-weight: 600; color: var(--float-on); text-decoration: underline; }
  /* The landed notice, in the float look, under the top edge. */
  .sv .mk-landed {
    border: 1px solid var(--float-edge); border-radius: var(--r-lg); background: var(--float); box-shadow: var(--shadow-float);
    color: var(--float-ink);
  }

  /* The hint pill (4.4.5): centred above the dock (its 54 px, 16 and 8),
     wrapping inside the canvas, never blurred. Its host lets presses
     through to the sheet. */
  .sv .mk-status-host { position: absolute; z-index: 6; left: 0; right: 0; bottom: 78px; text-align: center; pointer-events: none; }
  .sv .mk-status {
    display: inline-flex; gap: 10px; max-width: calc(100% - 32px); padding: 6px 12px; border: 1px solid var(--float-edge);
    border-radius: 999px; background: var(--float); box-shadow: var(--shadow-float); font: 400 13px/18px var(--font-ui);
    color: var(--float-ink);
  }
  .sv .mk-hint { flex: 0 1 auto; color: inherit; }
  .sv .mk-check { color: inherit; font-weight: 600; }
  .sv .mk-pointer { font: inherit; color: var(--float-muted); font-variant-numeric: tabular-nums; }
  /* A dock menu opens over the pill: the pill steps away while one is open. */
  .sv .annot:has(.sv-pop:not([hidden])) .mk-status-host { display: none; }
}
/* Hide panel lays out its glyph and words only where it shows (from a
   960 px host; the host's narrow block hides it). */
@container annot-host (min-width: 960px) {
  .sv .sv-pill { display: inline-flex; align-items: center; gap: 6px; }
}
/* From a 1,500 px host the panel is 400 px, unless Hide panel gave the
   sheet the width (K-g): without the :not() this rule would out-rank the
   hidden panel's one column and leave an empty 400 px one. */
@container annot-host (min-width: 1500px) {
  .annot-host.sv:not([data-panel-hidden]) .annot-layout { grid-template-columns: minmax(0, 1fr) 400px; }
}
/* The chips by the canvas's own width (E5). Band 1, 1,220 px and up: the
   corner sits bottom left, clear of the dock. Band 2, 935 to 1,220 px: the
   corner is top left beside the centred Top / All. Band 3, under 935 px:
   Top / All drop to a second row, so the pages and the notice start lower. */
@container sv-canvas (min-width: 1220px) {
  .sv .sv-corner { top: auto; bottom: 16px; }
}
@container sv-canvas (max-width: 934.98px) {
  .sv .sv-top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: ". end" "scope scope"; }
  .sv .annot-pages { padding-top: 96px; }
  .sv .mk-landed-host { top: 96px; }
}
/* Toasts sit above the dock, centred on it, inside the canvas; with the
   dock scrolled away, at the window's foot, still drawn (spec 4.4.8, D4). */
@supports (anchor-name: --a) {
  .sv .sv-dock { anchor-name: --sv-dock; }
  .sv .mk-toast { position-anchor: --sv-dock; left: anchor(center);
    bottom: calc(anchor(top) + 48px); position-visibility: always;
    position-try-fallbacks: --mk-toast-foot; }
}
@position-try --mk-toast-foot { left: 50%; bottom: 20px; }
/* Forced colours drop a mask's currentColor paint: put it back (M11). */
@media (forced-colors: active) {
  .sv :is(.sv-icon, .sv-more, .sv-caret, .sv-pill, .annot-select)::before { background: ButtonText; forced-color-adjust: none; }
  .sv :is(.mk-edit, .mk-card-close)::before { background: ButtonText; forced-color-adjust: none; }
}
/* Below 1,100 px the page scrolls as one and the canvas is the scroller's
   height (today's 70vh), never under 420 px. */
@media screen and (width < 1100px) {
  .sv .annot-scroller { min-height: 420px; }
}
/* A phone's page keeps 12 px at the sides and none at the top. */
@media screen and (width <= 640px) {
  body:has(.sv) .fv-main { padding: 0 12px 24px; }
}

/* The tool dock's groups and menus (spec 4.4.3). Each group is a split
   button: the main button arms the group's last used tool, the chevron
   opens its menu. The menu opens upward inside the group, no taller than
   the room ToolDock measured above it (--sv-room, D6), and its list
   scrolls; a closed menu is not drawn, since an author display beats the
   browser's [hidden] (I-9). Sizes stay at two classes, so the touch
   block's 44 px wins (N9). */
@media screen {
  .sv .mk-toolbar { flex-wrap: nowrap; gap: 4px; padding: 0; border: 0; background: none; }
  .sv .sv-group { position: relative; display: flex; align-items: center; border-radius: 10px; }
  .sv .sv-group:has(> :is(.sv-main, .sv-caret):not(:disabled):hover) {
    background: var(--float-hover); box-shadow: inset 0 0 0 1px var(--float-edge);
  }
  .sv .sv-main {
    display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px;
    background: transparent; color: var(--float-ink); cursor: pointer;
  }
  /* A group is 51 x 36 (main 36 + caret 15); the navigate group's button, Select, stays 40 x 40.
     :where() keeps the touch block's 44 px (same weight, later) winning. */
  .sv .sv-main:where([data-group="navigate"]) { width: 40px; height: 40px; }
  .sv .sv-main .mk-icon { width: 20px; height: 20px; }
  .sv .sv-main[aria-pressed="true"] { background: var(--float-on); color: var(--carbon-10); }
  .sv .sv-caret {
    display: inline-grid; place-items: center; width: 15px; height: 36px; padding: 0; border: 0;
    border-radius: var(--r-md); background: transparent; color: var(--float-muted); cursor: pointer;
  }
  .sv .sv-caret[aria-expanded="true"] { color: var(--float-ink); }
  .sv .sv-caret::before {
    content: ""; width: 11px; height: 11px; background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5l3-3 3 3'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .sv :is(.sv-main, .sv-caret):disabled { opacity: 0.4; cursor: default; }
  .sv .sv-pop {
    position: absolute; z-index: 1; left: 0; bottom: calc(100% + 8px); display: flex; flex-direction: column;
    box-sizing: border-box; width: 240px; max-height: var(--sv-room); padding: 6px 4px; border: 1px solid var(--float-edge);
    border-radius: var(--r-lg); background: var(--float); box-shadow: var(--shadow-float);
  }
  .sv .sv-pop[hidden] { display: none; }
  .sv .sv-menu {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none;
    scrollbar-color: var(--float-rule) transparent;
  }
  .sv .sv-head { padding: 8px 10px 6px; font: 600 11px/15px var(--font-ui); color: var(--float-muted); }
  .sv .sv-menu > [role="separator"] { height: 1px; margin: 4px 6px; background: var(--float-rule); }
  .sv .sv-item {
    display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; padding: 7px 10px; border: 0;
    border-radius: var(--r-md); background: transparent; color: var(--float-ink); font: 400 14px/18px var(--font-ui);
    text-align: left; cursor: pointer;
  }
  .sv .sv-item:is(:hover, :focus) { background: var(--float-hover); }
  .sv .sv-item .mk-icon { flex: none; width: 18px; height: 18px; }
  .sv .sv-name { flex: 1 1 auto; min-width: 0; }
  .sv .sv-item[aria-checked="true"] { font-weight: 600; }
  .sv .sv-item[aria-checked="true"]::after {
    content: ""; order: 1; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--moss);
  }
  .sv .sv-item kbd, .sv :is(.sv-tip, .sv-tip-main) kbd {
    display: inline-grid; place-items: center; box-sizing: border-box; min-width: 24px; height: 19px; padding: 0 4px;
    border: 1px solid var(--float-rule); border-radius: 4px; font: 600 11px/15px var(--font-ui); color: var(--float-muted);
  }
  .sv .sv-item kbd { order: 2; flex: none; }
  /* The tip: the pop's foot (the hovered or focused item), or above the
     main button. The last group's hangs from its right edge (N6). */
  .sv .sv-tip {
    flex: none; margin: 6px -4px -6px; padding: 8px 10px; border-top: 1px solid var(--float-rule);
    font: 400 12px/16px var(--font-ui); color: var(--float-muted);
  }
  .sv .sv-tip:empty { display: none; }
  .sv .sv-tip-main {
    position: absolute; z-index: 1; left: 0; bottom: calc(100% + 8px); box-sizing: border-box; width: max-content;
    max-width: 260px; padding: 8px 10px; border: 1px solid var(--float-edge); border-radius: var(--r-lg);
    background: var(--float); box-shadow: var(--shadow-float); font: 400 12px/16px var(--font-ui);
    color: var(--float-muted); text-align: left; pointer-events: none;
  }
  .sv .mk-toolbar > .sv-group:last-child .sv-tip-main { left: auto; right: 0; }
  .sv :is(.sv-tip, .sv-tip-main) b { font: 600 14px/18px var(--font-ui); color: var(--float-ink); }
  .sv :is(.sv-tip, .sv-tip-main) kbd { margin-left: 6px; }
  .sv .sv-tip-hint { display: block; margin-top: 2px; }
}

/* The selected card and the panel list (spec 4.5.2, 4.5.3, 4.7; mockup frame
   B). Sizes of touch controls stay at two classes, so the touch block's 44 px
   below wins (N9); everything is under .sv but the two selectors the spec
   names bare (the disabled pencil, the badge). */
@media screen {
  /* Head row: the tag, a gap, the small stepper, the pencil, the close. */
  .sv .mk-card-head { display: flex; align-items: center; gap: 8px; align-self: stretch; padding-top: 12px; }
  .sv .mk-card-gap { flex: 1 1 auto; min-width: 0; }
  .sv .mk-tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px;
    font: 400 12px/16px var(--font-ui); color: var(--carbon-10); white-space: nowrap;
  }
  .sv .mk-tag-3 { background: var(--tint-high); }
  .sv .mk-tag-2 { background: var(--tag-med); }
  .sv .mk-tag-1, .sv .mk-tag-kind { background: var(--suede-90); }
  .sv .mk-tag-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; }
  .sv .mk-tag-3 .mk-tag-dot { background: var(--tag-high-dot); }
  .sv .mk-tag-2 .mk-tag-dot { background: var(--tag-med-dot); }
  .sv .mk-tag-1 .mk-tag-dot { background: var(--sev-1); }
  /* The stepper, small: 28 x 28 buttons. */
  .sv .annot-step { align-self: auto; justify-content: flex-start; gap: 4px; margin: 0; padding: 0; font-size: 13px; }
  .sv .annot-step-btn { width: 28px; height: 28px; border-radius: var(--r-md); font-size: 16px; }
  .sv .annot-step-at { min-width: 0; }
  /* The pencil and the close: the glyph text is hidden (the aria-label
     names them) and a CSS mask draws the icon. */
  .sv .mk-edit, .sv .mk-card-close {
    display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; font-size: 0;
    border: 1px solid var(--line); border-radius: var(--r-md); background: none; color: var(--carbon-10); cursor: pointer;
  }
  .sv .mk-card-close { border-color: transparent; }
  /* The pencil is 30 x 30 with no border (the tint on hover and a ring
     when pressed keep it findable); the touch block's 44 px still wins. */
  .sv .mk-edit { width: 30px; height: 30px; border: 0; }
  .sv .mk-edit:hover, .sv .mk-card-close:hover { background: var(--suede-95); }
  .sv .mk-edit:focus-visible, .sv .mk-card-close:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
  .sv .mk-edit::before, .sv .mk-card-close::before {
    content: ""; width: 16px; height: 16px; background: currentColor; mask-position: center; mask-repeat: no-repeat; mask-size: contain;
  }
  .sv .mk-edit::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 13.5l.7-3L10.8 3a1.4 1.4 0 012 2l-7.6 7.6-2.7.9z'/%3E%3Cpath d='M9.5 4.5l2 2'/%3E%3C/svg%3E");
  }
  .sv .mk-card-close::before {
    width: 20px; height: 20px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='8'/%3E%3Cpath d='M7 7l6 6M13 7l-6 6'/%3E%3C/svg%3E");
  }
  .sv .mk-edit[aria-pressed="true"] { background: var(--suede-95); border-color: var(--carbon-10); box-shadow: inset 0 0 0 1px var(--carbon-10); }
  .mk-edit[aria-disabled="true"] { cursor: default; opacity: 0.5; }
  /* The meta line, the headline and the why. */
  .sv .mk-meta { margin: 0; font: 400 12px/16px var(--font-ui); color: var(--carbon-40); }
  .sv .mk-meta:empty { display: none; }
  .sv .mk-raised { text-align: left; }
  .sv .contra-title { margin: 4px 0 0; font: 400 24px/28px var(--font-title); color: var(--carbon-10); }
  .sv .contra-text { font: 400 14px/20px var(--font-ui); color: var(--carbon-30); }
  .sv .mk-edit-block { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); }
  /* Facts: one bordered box (1 px, radius 12, padding 16, rows 12 apart, no
     row rules); each row spans both columns and borrows their widths. The
     value is 500 14/20 (16 crowds a wrapped quote). */
  .sv .mk-facts {
    display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px 16px; align-self: stretch; margin: 0; padding: 16px;
    border: 1px solid var(--line); border-radius: var(--r-lg);
  }
  .sv .mk-fact { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; padding: 0; }
  .sv .mk-facts dt { margin: 0; font: 400 14px/18px var(--font-ui); color: var(--carbon-40); }
  .sv .mk-facts dd { margin: 0; min-width: 0; font: 500 14px/20px var(--font-ui); color: var(--carbon-10); overflow-wrap: anywhere; }
  .sv a.rl-flag-clause::after { content: " \2197"; }
  /* Details and Comments. */
  .sv .mk-tabs-wrap { display: flex; flex-direction: column; gap: 12px; align-self: stretch; min-width: 0; }
  .sv .mk-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); }
  .sv .mk-tabs [role="tab"] {
    margin: 0 0 -1px; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: none;
    font: 400 14px/20px var(--font-ui); color: var(--carbon-40); cursor: pointer;
  }
  .sv .mk-tabs [role="tab"]:hover { color: var(--carbon-10); }
  .sv .mk-tabs [role="tab"][aria-selected="true"] { color: var(--carbon-10); border-bottom: 2px solid var(--carbon-10); font-weight: 600; }
  .sv .mk-tabs [role="tab"]:focus-visible { outline: 2px solid var(--carbon-10); outline-offset: 2px; }
  /* A hidden panel stays mounted (D8); an author display never shows it. */
  .sv [role="tabpanel"][hidden] { display: none; }
  /* The rule card is quiet: no fill, a hairline under it. */
  .sv .mk-rulecard { padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--line); background: none; }
  /* The foot's buttons: 12/16 labels at radius 8; .btn-sm keeps the height (32, 44 on a phone). */
  .sv .mk-card-foot .btn { min-width: 0; border-radius: var(--r-md); font: 600 12px/16px var(--font-ui); }
  .sv .mk-card-foot { padding: 12px 0; border-top: 1px solid var(--line); background: var(--suede-100); }

  /* The panel: flat layer rows, hairline flag rows, badges like the pins. */
  .sv .mk-layer-row { padding: 6px 8px; border: 0; border-radius: var(--r-md); background: transparent; }
  .sv .mk-layer-row:hover { background: var(--suede-95); }
  .sv .mk-layer-block + .mk-layer-block { border-top: 1px solid var(--line); }
  .sv .mk-lbtn { color: var(--carbon-40); }
  .sv .mk-lbtn:hover { color: var(--carbon-10); }
  .sv .mk-prow { padding: 10px 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .sv .mk-prow:hover { background: var(--suede-95); }
  .sv .mk-prow:has(> .mk-prow-open[aria-current="true"]) { background: var(--suede-95); box-shadow: none; border-radius: var(--r-md); }
  .sv .mk-prow-title { font: 600 14px/18px var(--font-ui); }
  .sv .mk-prow-where { font: 400 12px/16px var(--font-ui); color: var(--carbon-40); }
  .mk-side .mk-num { width: 24px; height: 24px; min-width: 0; padding: 0; border-radius: 50%; font-size: 11px; line-height: 1; }
  .mk-side .mk-num-3 { background: var(--sev-3); color: var(--annot-paper); }
  .mk-side .mk-num-2 { background: var(--annot-paper); box-shadow: inset 0 0 0 2px var(--sev-2); color: var(--danger); }
  .mk-side .mk-num-1 { background: var(--annot-paper); box-shadow: inset 0 0 0 2px var(--sev-1); color: var(--carbon-40); }
  .sv .mk-dl-switch {
    display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px; border-radius: var(--r-sm);
    font: 600 12px/16px var(--font-ui);
  }
  .sv .mk-dl-switch[aria-checked="true"] { background: var(--tint-ok); border-color: transparent; color: var(--ok); }
  .sv .mk-dl-switch[aria-checked="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--moss); }
  .sv .mk-dl-switch[aria-checked="false"] { background: transparent; border: 1px dashed var(--line); color: var(--carbon-40); }
  .sv :is(.mk-checking, .mk-summary) { border-radius: var(--r-lg); border-color: var(--line); }
  .sv .mk-toast {
    border: 1px solid var(--float-edge); border-radius: var(--r-lg); background: var(--float); box-shadow: var(--shadow-float);
    color: var(--float-ink); font-weight: 500;
  }
  .sv .mk-toast .mk-link { color: var(--float-on); font-weight: 600; }
}
/* The facts' label sits above its value in a window under 384 px: the panel
   is then under 360 px (K-h; the only two named containers are the host's
   and the canvas's, F1). */
@media screen and (max-width: 383.98px) {
  .sv .mk-facts { grid-template-columns: 1fr; }
}
/* The card's footer is sticky only where the panel scrolls in its own box;
   below 1100 px the page scrolls and a sticky foot would cover the window's
   bottom (I-10). */
@media screen and (min-width: 1100px) {
  .sv .mk-card-foot { position: sticky; bottom: 0; }
}

/* Flag marks on the sheet and the veil (spec 4.6.2). Screen only: paper keeps
   today's tint and underline. These come after the plain .annot-box rules
   (N10); none uses will-change, filter, translate3d or an opacity transition.
   One veil per page sits in .annot-marks under every selected box (E6). */
@media screen {
  .sv .annot-box { border-radius: 2px; }
  .sv .annot-box::after { display: none; }
  .sv .annot-box.annot-sev-3 {
    background: repeating-linear-gradient(135deg, rgba(189, 10, 10, 0.55) 0 1px, transparent 1px 7px)
                rgba(189, 10, 10, 0.08);
    outline: 1.5px solid var(--sev-3); outline-offset: 0;
  }
  .sv .annot-box.annot-sev-2 {
    background: repeating-linear-gradient(135deg, rgba(220, 80, 80, 0.45) 0 1px, transparent 1px 9px)
                rgba(220, 80, 80, 0.06);
    outline: 1.5px dashed var(--sev-2); outline-offset: 0;
  }
  .sv .annot-box.annot-sev-1 {
    background: rgba(91, 88, 78, 0.06);
    outline: 1.5px dashed var(--sev-1); outline-offset: 0;
  }
  .sv .annot-pin { box-shadow: 0 1px 3px rgba(20, 13, 8, 0.22); font-weight: 600; }
  .sv .annot-pin.annot-sev-3 { background: var(--sev-3); border-color: var(--sev-3); color: #ffffff; }
  .sv .annot-pin.annot-sev-2 { background: var(--annot-paper); border-color: var(--sev-2); color: var(--danger); }
  .sv .annot-pin.annot-sev-1 { background: var(--annot-paper); border-color: var(--sev-1); color: var(--carbon-40); }
  .sv .annot-pin:hover { box-shadow: 0 0 0 1px var(--annot-paper), 0 0 0 3px rgba(37, 36, 31, 0.25); }
  .sv:has(.annot-box.is-selected):not(:has(.mk-layer.mk-drawing)) .annot-marks::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: rgba(21, 18, 15, 0.38); pointer-events: none;
  }
  .sv .annot-box.is-selected {
    z-index: 2; outline-width: 2px; outline-offset: 0;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.92);
  }
  .sv .annot-pin.is-selected { z-index: 3; box-shadow: 0 0 0 3px var(--annot-paper), 0 0 0 5px var(--carbon-10); }
  /* A text mark's words in the card keep their line breaks and the sheet's
     box on white (final review I1); the colour is the data-colour rules'. */
  .sv .mk-facts .mk-text-note {
    display: inline-block; white-space: pre-wrap; border: 1px solid currentColor;
    background: rgb(255 255 255 / 0.85); padding: 3px;
  }
  /* The hint pill's live region stays mounted with no words (H8): an empty
     pill is drawn as nothing, taken out of the layout but not the tree. */
  .sv .mk-status:not(:has(.mk-check, .mk-hint:not(:empty), .mk-pointer:not(:empty))) {
    position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; box-shadow: none; background: none;
  }
}

/* ── Sketch view: touch sizes (keep last; spec 4.7, N9) ── */
@media screen and (max-width: 640px), screen and (pointer: coarse) {
  .sv :is(.mk-dl-switch, .mk-back, [data-file-panel], .annot-select, .sv-item, [role="tab"]) { min-height: 44px; }
  .sv :is(.sv-icon, .annot-step-btn, .mk-edit, .mk-card-close) { width: 44px; height: 44px; }
  .sv .annot-scope .annot-tool { height: 44px; }
  .sv :is(.sv-main, .sv-caret) { height: 44px; min-width: 44px; }
  /* The touch placement (4.4.2, N9): the corner stays top left whatever
     the band; row one is the page chip and the ⋯ (and Hide panel on a
     wide host), row two Top / All at full width, each pill half. The pages
     and the notice start under both rows (16 + 44 + 8 + 50 + 8); the hint
     pill clears the 58 px touch dock (K-f). */
  .sv .sv-corner { top: 16px; bottom: auto; }
  .sv .sv-top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: ". end" "scope scope"; }
  .sv .annot-scope { justify-self: stretch; }
  .sv .annot-scope .annot-tool { flex: 1 1 50%; }
  .sv .annot-pages { padding-top: 126px; }
  .sv .mk-landed-host { top: 126px; }
  .sv .mk-status-host { bottom: 82px; }
  /* The drawing's bar on a coarse pointer wider than 640 px (ruling H2):
     ‹ ›, Share and Ask take a finger too (the phone block sizes them
     below 641 px). */
  .top-sheet .fv-icon { width: 44px; height: 44px; padding: 14px; }
  .top-sheet .share-pill, .top-sheet .ask-pill { height: 44px; }
}