/* ══════════════════════════════════════════════════════════════════════
   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 (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;

  /* 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);
  --annot-paper: #ffffff;
  --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 { color: #737373; }
.field-input: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; }
.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; }
.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; }
/* /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); }

/* ── 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; }
.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; }
.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; }
.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; }
.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. */
.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); }
.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; }
.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); } }
@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; }
.result-grid { display: grid; grid-template-columns: repeat(auto-fill, 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; align-items: center; gap: 12px; }
.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); }
.result-flags { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.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: 36px; 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); }
.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-type: 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 (min-width: 960px) {
  .annot-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}
.annot { 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; }
/* 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; }
.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) {
  .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%; }
  .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; }
}

/* ── 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); }
}

/* 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, .annot-toolbar, .annot-chips, .annot-step { 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%; }
}