/* ListingLint, direction B "Plan & Redline", craft pass (docs/brand/LISTINGLINT-CRAFT.md). Spec: site/listinglint/DESIGN.md.
 * The listing's floor plan on the architect's table: your facts are the plan (graphite + blueprint cyan), what the
 * draft got wrong is redlined onto it. Two working inks with separate jobs: cyan = your facts, red = what to change.
 *
 * Three faces, three jobs
 *   Hanken Grotesk  the interface and everything you read (headings, body, buttons)
 *   B612            the draft's own words: the draft sheet, quoted phrases, the fact lock's claims
 *   B612 Mono       measurement only: revision numbers, counts, the dimension line
 *
 * How this file is organised
 *   1. Fonts + tokens (light, then "blueprint night" dark)    6. Marks (the severity line shapes) + revision numbers
 *   2. Base, type, focus, selection                           7. The checker (app.html) + Pro panels
 *   3. Chrome: header, footer                                 8. Pages: home, compare, bookmark, legal, thanks
 *   4. Buttons, links, fields, segmented controls             9. Print (Pro record), reduced motion
 *   5. Structure: sheets, title block, dimension line, tables, notes
 *
 * Constraints
 *   - CSP is style-src 'self' (no inline style anywhere) and font-src 'self': fonts are self-hosted in fonts/.
 *   - products/listinglint/build/build_pro.js inlines this file into the offline Pro build and swaps the font
 *     urls for data: URIs, so keep every url(fonts/...) in the @font-face block below.
 *   - Phrase pages (phrases/*.html + phrases.css, build/listinglint/build_pages.js) and dpe/articles.py guides use
 *     .page-head, .wrap.narrow, .crumbs/.eyebrow, .lead, .band.paper.tight, .phrase-body, .cta, .related, .srcs, .fine, .btn.
 *   - Uppercase is not used for labels (plan-drawing room names inside SVG are the only caps). Labels are >= 14px.
 *   - Graph ruling only behind the plan drawing: the grid means "this is the drawing".
 */

/* ============================================================ 1. fonts + tokens */
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-var.woff") format("woff"); font-weight: 400 750; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "B612"; src: url("fonts/b612-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "B612"; src: url("fonts/b612-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "B612"; src: url("fonts/b612-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "B612 Mono"; src: url("fonts/b612-mono-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "B612 Mono"; src: url("fonts/b612-mono-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  /* surfaces */
  --vellum: #eef1ec;              /* the drafting table: page ground, plain */
  --sheet: #f8faf6;               /* a sheet under the lamp: the draft, the record, inputs */
  --sheet-2: #ffffff;             /* controls on a sheet */
  /* inks */
  --graphite: #23262a;            /* text, walls, outlines. 13.3:1 on vellum, 14.5:1 on sheet */
  --lead: #565c62;                /* secondary text. 5.9:1 on vellum, 6.4:1 on sheet */
  --hair: #c3cbc7;                /* hairline row rules (non-text) */
  --cyan: #0b6e99;                /* blueprint cyan: your facts, corrections, links. 5.4:1 on sheet; white on it 5.7:1 */
  --cyan-line: #3b9cc4;           /* dimension lines and ticks: decoration only (3.0:1), never the only carrier */
  --cyan-wash: rgba(11, 110, 153, .08);
  --red: #d8352a;                 /* redline: marks and strokes only, never text (4.5:1 as a graphic) */
  --red-ink: #b0261c;             /* red text 6.4:1 on sheet; white on it 6.7:1 */
  --red-wash: rgba(216, 53, 42, .07);
  --grid: rgba(11, 110, 153, .09);
  --grid-fine: rgba(11, 110, 153, .045);
  --btn-bg: var(--graphite); --btn-fg: var(--sheet);
  --selection: rgba(11, 110, 153, .22);
  --fixed-bg: rgba(11, 110, 153, .2);        /* the brief flash on words a fix just wrote: cyan, it's now true */
  /* type */
  --sans: "Hanken Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --draft: "B612", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "B612 Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --fs-hero: clamp(44px, 5.8vw, 80px);
  --fs-h1: clamp(34px, 3.6vw, 52px);
  --fs-h2: clamp(24px, 2.2vw, 30px);
  --fs-h3: 20px;
  --fs-body: 17px;
  --fs-draft: 18px;
  --fs-sm: 15px;
  --fs-label: 14px;
  --w-head: 660; --w-strong: 640; --w-ui: 600;
  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gut: 16px;
  --line: 1.5px;                  /* the drawing's outline weight */
  --dock-h: 0px;                  /* set by app.js on phones: the fixed title block's height */
  --t: .18s; --ease: cubic-bezier(.2, .7, .2, 1);

  /* legacy names still read by generated pages (phrases/, dpe/articles.py guides) */
  --paper: var(--vellum); --surface: var(--vellum); --on-paper: var(--graphite); --on-paper-2: var(--lead); --on-paper-3: var(--lead);
  --rule-p: var(--hair); --rule-p2: var(--graphite); --display: var(--sans); --text: var(--sans); --blue-ink: var(--cyan); --ink-0: var(--graphite);
  --accent: var(--red); --high: var(--red-ink); --medium: var(--red-ink); --context: var(--red-ink); --low: var(--red-ink); --fact: var(--red-ink); --ok: var(--cyan);
}
/* blueprint night: the same drawing on a dark table */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --vellum: #141b20; --sheet: #1b252c; --sheet-2: #222e36;
    --graphite: #e3e9e4; --lead: #a8b3b8; --hair: #36444d;
    --cyan: #6cc3e8; --cyan-line: #4aa3c9; --cyan-wash: rgba(108, 195, 232, .12);
    --red: #ff6f62; --red-ink: #ff8f84; --red-wash: rgba(255, 111, 98, .1);
    --grid: rgba(108, 195, 232, .08); --grid-fine: rgba(108, 195, 232, .04);
    --btn-bg: #e3e9e4; --btn-fg: #141b20; --selection: rgba(108, 195, 232, .3); --fixed-bg: rgba(108, 195, 232, .25);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --vellum: #141b20; --sheet: #1b252c; --sheet-2: #222e36;
  --graphite: #e3e9e4; --lead: #a8b3b8; --hair: #36444d;
  --cyan: #6cc3e8; --cyan-line: #4aa3c9; --cyan-wash: rgba(108, 195, 232, .12);
  --red: #ff6f62; --red-ink: #ff8f84; --red-wash: rgba(255, 111, 98, .1);
  --grid: rgba(108, 195, 232, .08); --grid-fine: rgba(108, 195, 232, .04);
  --btn-bg: #e3e9e4; --btn-fg: #141b20; --selection: rgba(108, 195, 232, .3); --fixed-bg: rgba(108, 195, 232, .25);
}

/* ============================================================ 2. base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--vellum); scroll-padding-top: 16px; }
body {
  margin: 0; min-height: 100vh; color: var(--graphite); background: var(--vellum); overflow-x: hidden;
  font: 400 var(--fs-body)/1.6 var(--sans); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased;
  caret-color: var(--cyan);
}
h1, h2, h3, h4 { margin: 0 0 .45em; font-family: var(--sans); font-weight: var(--w-head); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); letter-spacing: -.03em; line-height: 1.04; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }
ul, ol { padding-left: 1.25em; margin: 0 0 1em; }
li { margin: 0 0 .35em; }
img, svg, video { max-width: 100%; }
img { height: auto; }
strong, b { font-weight: var(--w-strong); }
em { font-style: italic; }
small { font-size: var(--fs-sm); }
code, kbd { font: 400 .9em/1 var(--mono); }
kbd { border: 1px solid var(--hair); border-bottom-width: 2px; padding: 2px 5px; background: var(--sheet); }
hr { border: 0; border-top: 1px solid var(--hair); margin: var(--s6) 0; }
a { color: var(--cyan); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--selection); color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: var(--s2); z-index: 300; background: var(--graphite); color: var(--sheet); padding: 12px 16px; font: var(--w-ui) var(--fs-sm)/1 var(--sans); text-decoration: none; }
.skip:focus { left: var(--s2); }
[hidden] { display: none !important; }
.fine, .fineprint { font-size: var(--fs-sm); line-height: 1.55; color: var(--lead); }
.lede, .lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--lead); max-width: 48ch; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-18 { margin-top: 18px; } .mt-22 { margin-top: 22px; }
.r { color: var(--red-ink); font-weight: var(--w-strong); }

.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); }
.wrap.narrow { max-width: 820px; }
@media (min-width: 720px) { :root { --gut: 32px; } }
@media (min-width: 1100px) { :root { --gut: 48px; } }

/* ============================================================ 3. chrome */
.site-header { position: relative; z-index: 50; background: var(--vellum); border-bottom: 1px solid var(--graphite); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 68px; padding-top: 10px; padding-bottom: 10px; }
.brand { display: inline-flex; align-items: center; flex: none; color: var(--graphite); text-decoration: none; min-height: 44px; }
.brand img { display: block; height: 38px; width: auto; }
.brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .logo-light { display: none; } :root:not([data-theme="light"]) .brand .logo-dark { display: block; } }
:root[data-theme="dark"] .brand .logo-light { display: none; } :root[data-theme="dark"] .brand .logo-dark { display: block; }
.brand small { font: 400 var(--fs-label)/1 var(--sans); color: var(--lead); margin-left: var(--s2); }
.by-fl { display: none; font-size: var(--fs-label); color: var(--lead); text-decoration: none; }
.by-fl:hover { color: var(--graphite); text-decoration: underline; }
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s5); }
.nav a { color: var(--graphite); text-decoration: none; font-weight: var(--w-ui); font-size: var(--fs-sm); min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav .btn { padding: 0 14px; min-height: 40px; }
.menu-btn { display: none; margin-left: auto; min-height: 44px; padding: 0 14px; background: none; color: var(--graphite); border: 1px solid var(--graphite);
  font: var(--w-ui) var(--fs-sm)/1 var(--sans); cursor: pointer; }
@media (min-width: 1000px) { .by-fl { display: inline-flex; align-items: center; min-height: 44px; } .brand img { height: 42px; } }
@media (max-width: 899px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--sheet); border-bottom: 1px solid var(--graphite); padding: var(--s2) var(--gut) var(--s4); }
  .site-header.open .nav { display: flex; }
  .nav a { border-bottom: 1px solid var(--hair); padding: 0 2px; min-height: 52px; font-size: var(--fs-body); }
  .nav .btn { margin-top: var(--s3); justify-content: center; }
  .js .site-header .nav { display: none; }
  .js .site-header.open .nav { display: flex; }
  html:not(.js) .nav { display: flex; position: static; border: 0; padding: 0 0 var(--s2); }
  html:not(.js) .site-header .wrap { flex-wrap: wrap; }
}
.zones { display: none; }        /* retired: the drawing-border zone strip carried no information */

.site-footer { margin-top: var(--s8); border-top: 1px solid var(--graphite); font-size: var(--fs-sm); color: var(--lead); }
.site-footer .cols { display: grid; gap: var(--s5); padding-top: var(--s6); padding-bottom: var(--s6); }
.site-footer .brand img { height: 34px; }
.site-footer p { max-width: 52ch; margin-bottom: .6em; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--s5); align-content: start; }
.site-footer nav a, .site-footer .small a { color: var(--graphite); }
.site-footer nav a { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer .small { display: grid; gap: var(--s1); align-content: start; }
@media (min-width: 900px) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ============================================================ 4. buttons, links, fields */
/* One control language: 44px tall, square, Hanken 600. Primary = graphite fill (one per view). Ghost = hairline
   outline. Line = a row action whose ink says what it does (cyan: use your fact, red: cut it). Quiet = text. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--graphite); border-radius: 0; background: transparent; color: var(--graphite);
  font: var(--w-ui) 16px/1.2 var(--sans); letter-spacing: -.005em; text-decoration: none; text-align: center; cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t); }
.btn:hover { text-decoration: none; background: var(--cyan-wash); }
.btn.primary, .btn.fix { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn.primary:hover, .btn.fix:hover { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.btn.ghost { background: transparent; color: var(--graphite); }
.btn.ghost:hover { background: var(--cyan-wash); }
.btn.line { min-height: 40px; padding: 8px 14px; font-size: var(--fs-sm); background: var(--sheet-2); }
.btn.line.use { color: var(--cyan); border-color: var(--cyan); }
.btn.line.use:hover { background: var(--cyan-wash); }
.btn.line.cut, .btn.cut { color: var(--red-ink); border-color: var(--red-ink); background: var(--sheet-2); }
.btn.line.cut:hover, .btn.cut:hover { background: var(--red-wash); }
.btn.big { min-height: 52px; padding: 12px 22px; font-size: 17px; }
.btn.small { min-height: 44px; padding: 8px 14px; font-size: var(--fs-sm); }
.btn.quiet, .link-btn { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--cyan); font: var(--w-ui) var(--fs-sm)/1.25 var(--sans);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; display: inline-flex; align-items: center; text-align: left; }
.btn.quiet:hover, .link-btn:hover { background: none; color: var(--cyan); text-decoration-thickness: 2px; }
.btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn.quiet[disabled] { opacity: .4; }
.btn.is-done { background: var(--cyan); border-color: var(--cyan); color: #fff; }
:root[data-theme="dark"] .btn.is-done, :root[data-theme="dark"] .btn.primary:hover { color: #141b20; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.is-done, :root:not([data-theme="light"]) .btn.primary:hover, :root:not([data-theme="light"]) .btn.fix:hover { color: #141b20; } }
.link { color: var(--cyan); font-weight: var(--w-ui); min-height: 44px; display: inline-flex; align-items: center; }
.actions, .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.cta-row { margin-top: var(--s5); }

.input, input[type="text"], input[type="email"], input[type="number"], input[type="search"], select, textarea {
  font: 400 var(--fs-body)/1.4 var(--sans); color: var(--graphite); background: var(--sheet-2); border: 1px solid var(--graphite); border-radius: 0;
  padding: 10px 12px; min-height: 44px; width: 100%; max-width: 100%; }
select { width: auto; padding-right: 30px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%), linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 0; }
::placeholder { color: var(--lead); opacity: .9; }
.field { display: grid; gap: var(--s1); }
.field label { font-size: var(--fs-label); color: var(--lead); }
input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cyan); flex: none; }
details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--s2); font-weight: var(--w-ui); list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); flex: none; transition: transform var(--t); margin: 0 6px 0 2px; }
details[open] > summary::before { transform: rotate(45deg); }

/* segmented control + stepper: neutral frames; ink only for meaning (cyan = your fact / true, red = not true) */
.stepper, .seg { display: inline-flex; align-items: stretch; border: 1px solid var(--graphite); background: var(--sheet-2); min-height: 40px; }
.stepper.pending { border-style: dashed; }
.stepper output { min-width: 84px; padding: 0 4px; display: grid; place-items: center; font: 700 15px/1 var(--mono); color: var(--cyan); }
.stepper .st { width: 40px; min-height: 40px; border: 0; background: none; color: var(--graphite); font: 400 20px/1 var(--sans); cursor: pointer; }
.stepper .st:hover { background: var(--cyan-wash); }
.stepper .st[disabled] { opacity: .3; cursor: default; }
.seg .sg { min-height: 40px; min-width: 70px; padding: 0 14px; border: 0; background: none; color: var(--graphite); font: 500 var(--fs-sm)/1 var(--sans); cursor: pointer; position: relative; }
.seg .sg + .sg { border-left: 1px solid var(--hair); }
.seg .sg:hover { background: var(--cyan-wash); }
.seg .sg[aria-pressed="true"] { color: var(--cyan); background: var(--cyan-wash); font-weight: 700; box-shadow: inset 0 -2px 0 var(--cyan); }
.seg .sg.no[aria-pressed="true"] { color: var(--red-ink); background: var(--red-wash); box-shadow: inset 0 -2px 0 var(--red); }
.seg .sg:focus-visible, .stepper .st:focus-visible { outline-offset: -2px; }
.numin { width: 120px; min-height: 40px; font: 700 15px/1 var(--mono); color: var(--cyan); }

/* ============================================================ 5. structure */
.sec-head { margin-bottom: var(--s4); }
.sec-head h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.sec-sum { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--lead); max-width: 62ch; }
.sec-sum .r { font-weight: var(--w-strong); }

.sheet { background: var(--sheet); border: 1px solid var(--graphite); }
.band { padding: var(--s8) 0; }
.band.tight { padding: var(--s6) 0; }
.band.paper { background: transparent; }
.page-head { padding: var(--s7) 0 var(--s5); }
.page-head h1 { font-size: var(--fs-h1); max-width: 22ch; }
.page-head .lede, .page-head .lead { margin-top: var(--s3); }
.crumbs, .eyebrow { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 var(--s4); font-size: var(--fs-label); color: var(--lead); }
.eyebrow b, .crumbs b { font-weight: var(--w-ui); color: var(--graphite); }
.eyebrow a, .crumbs a { color: var(--cyan); }

/* title block: ruled cells with a label over a value (the dock) */
.tb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, auto); align-items: stretch; }
.tb .cell { display: block; padding: 8px 14px 9px; border-right: 1px solid var(--hair); color: var(--graphite); text-decoration: none; min-height: 44px; }
.tb .cell small { display: block; font: 400 var(--fs-label)/1.2 var(--sans); color: var(--lead); }
.tb .cell b { display: block; font: var(--w-head) 17px/1.3 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb a.cell:hover b { text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 4px; }

/* tables: honest ruled tables, square, no zebra */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: var(--line) solid var(--graphite); border-bottom: 1px solid var(--graphite); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hair); }
thead th { font: 500 var(--fs-label)/1.3 var(--sans); color: var(--lead); border-bottom: 1px solid var(--graphite); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: var(--w-strong); }

/* general notes: the numbered note list from a drawing sheet */
.notes-list { list-style: none; counter-reset: n; padding: 0; margin: 0; display: grid; gap: var(--s5); }
.notes-list > li { counter-increment: n; position: relative; padding-left: 36px; margin: 0; color: var(--lead); max-width: 46ch; }
.notes-list > li::before { content: counter(n); position: absolute; left: 0; top: 3px; font: 700 14px/1.55 var(--mono); color: var(--graphite); }
.notes-list b, .notes-list strong { color: var(--graphite); }
.notes-h { font: var(--w-head) var(--fs-body)/1.2 var(--sans); border-bottom: 1px solid var(--graphite); padding-bottom: 10px; margin: 0 0 var(--s5); letter-spacing: 0; }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose li { margin-bottom: .5em; }
.notice { border: 1px solid var(--graphite); background: var(--sheet); padding: var(--s3) var(--s4); }

/* ============================================================ 6. marks: severity is a line shape, in redline */
/* High = double line, Medium = single line, Context = dashed, Low = dotted, a fact that doesn't match = struck
   through, with your value lettered above it in cyan. Shape carries the meaning, so the marks read in grayscale and
   for colour-blind eyes. No fills, no hatching: the words stay clean. */
mark.m { background: none; color: inherit; text-decoration-line: underline; text-decoration-color: var(--red); text-decoration-thickness: 1.5px;
  text-underline-offset: 6px; text-decoration-skip-ink: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0; border-radius: 0; }
mark.m.sev-high { text-decoration-style: double; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
mark.m.sev-medium { text-decoration-style: solid; }
mark.m.sev-context { text-decoration-style: dashed; }
mark.m.sev-low { text-decoration-style: dotted; text-decoration-thickness: 2px; }
mark.m.sev-fact, mark.m.wrong { text-decoration-line: line-through; text-decoration-style: solid; text-decoration-thickness: 1.5px; color: var(--lead); }
mark.m.unconf { text-decoration-color: var(--cyan-line); text-decoration-style: dotted; text-decoration-thickness: 2px; }
mark.m.is-active { background: var(--red-wash); text-decoration-thickness: 2px; }
mark.m.unconf.is-active { background: var(--cyan-wash); }
mark.m.fixed { background: var(--fixed-bg); text-decoration: none; animation: fixed-fade 1.6s var(--ease) forwards; }
@keyframes fixed-fade { 0%, 40% { background-color: var(--fixed-bg); } 100% { background-color: transparent; } }
.over { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 1px; color: var(--lead); }

/* the revision number: a small superscript figure set at the end of the phrase, the drafter's revision note.
   A button (44px target via ::after, no layout cost). */
.rn { position: relative; display: inline; margin: 0 1px 0 2px; padding: 0 1px; border: 0; background: none; color: var(--red-ink); cursor: pointer;
  font: 700 12px/1 var(--mono); vertical-align: .62em; min-height: 0; }
.rn::after { content: ""; position: absolute; inset: -14px -11px; }
.rn:hover { text-decoration: underline; text-underline-offset: 2px; }
.rn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
mark.m.is-active + .rn, .rn.is-on { background: var(--red-ink); color: var(--sheet); padding: 1px 3px; }
/* a wrong fact: struck, your value lettered above in cyan */
ruby.corr { ruby-position: over; ruby-align: center; }
ruby.corr rt { font: 700 12px/1 var(--mono); color: var(--cyan); letter-spacing: 0; padding-bottom: 3px; text-transform: none; }
.nw { white-space: nowrap; }

/* the severity key: the line shape drawn small, next to the word */
.sevmark { display: inline-block; position: relative; width: 22px; height: 10px; margin-right: 8px; vertical-align: 1px; flex: none; }
.sevmark i { position: absolute; left: 0; right: 0; bottom: 2px; border-bottom: 1.5px solid var(--red); }
.sevmark.sev-high i { border-bottom: 4.5px double var(--red); bottom: 0; }
.sevmark.sev-context i { border-bottom-style: dashed; }
.sevmark.sev-low i { border-bottom: 2px dotted var(--red); }
.sevmark.sev-fact i { border-bottom: 0; bottom: auto; top: 4px; border-top: 1.5px solid var(--red); }
.sevmark.sev-ok i { border-bottom: 1.5px solid var(--cyan); }
.sev-key { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-label); color: var(--lead); }
.sev-key li { display: inline-flex; align-items: center; margin: 0; }
.sev-key b { color: var(--graphite); margin-right: 4px; }

/* ============================================================ 7. the checker */
body.app { padding-bottom: var(--dock-h); }
.check { padding: var(--s5) 0 var(--s6); }
.check-head { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.check-head h1 { margin: 0; font-size: clamp(34px, 3.4vw, 48px); }
.check-head .dek { margin: 0; color: var(--lead); max-width: 64ch; font-size: var(--fs-body); }
.check-head .dek b { color: var(--graphite); }
.privacy-note { margin: 0; display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-label); color: var(--lead); }
.privacy-note svg { width: 16px; height: 16px; flex: none; color: var(--cyan); }
@media (max-width: 999px) { .has-draft .check-head .dek, .has-draft:not(.is-sample) .check-head .privacy-note { display: none; } .has-draft .check-head { margin-bottom: var(--s4); } }

.tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.tools .btn.big { flex: 0 1 auto; }
.tools .btn.ghost { flex: 0 1 auto; border-color: transparent; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 5px; padding-left: 4px; padding-right: 4px; }
.tools .btn.ghost:hover { background: none; text-decoration-color: var(--graphite); }
/* once there's a draft, Copy for MLS is the one primary: Paste steps back to an outline */
.has-draft:not(.is-sample) .tools .btn.primary.big { background: transparent; color: var(--graphite); border-color: var(--graphite); min-height: 44px; padding: 8px 16px; font-size: var(--fs-sm); }
.has-draft:not(.is-sample) .tools .btn.primary.big:hover { background: var(--cyan-wash); color: var(--graphite); }
@media (max-width: 420px) { .tools .btn.big { flex: 1 1 auto; } }
.empty-hint { margin: 0 0 var(--s3); font-size: var(--fs-sm); color: var(--lead); max-width: 60ch; }
.has-draft .empty-hint { display: none; }
.is-sample .copy-cell .btn.primary { background: transparent; color: var(--graphite); border-color: var(--graphite); }

.tidy-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); margin: 0 0 var(--s3); padding: 4px 0; border-top: 1px solid var(--cyan); border-bottom: 1px solid var(--hair); font-size: var(--fs-sm); }
.tidy-bar p { margin: 6px 0; flex: 1 1 260px; }
.tidy-bar code { font-size: .95em; background: var(--cyan-wash); padding: 1px 4px; }
.tidy-wry { color: var(--lead); }

/* "Ready to post": the payoff. It leads the column, right above the clean sheet and its title block. */
.col-main { display: flex; flex-direction: column; }
.col-main > .ready { order: -1; }
.ready { margin: 0 0 var(--s4); padding: var(--s4) 0 var(--s2); border-top: 3px double var(--cyan); }
.ready h2 { margin: 0 0 6px; font-size: clamp(26px, 2.4vw, 32px); color: var(--graphite); }
.ready-sum { margin: 0 0 var(--s3); max-width: 60ch; color: var(--graphite); }
.ready-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
.ready.almost { border-top: 1px solid var(--graphite); }
.ready.almost h2 { font-size: 22px; }

/* the draft sheet. The view (read mode, numbered marks) and the textarea + backdrop (edit mode, live marks) share metrics. */
.draft-sheet { position: relative; }
.draft-sheet.is-ready { border-top: 3px solid var(--cyan); }
.ed { position: relative; }
.ed-backdrop, .ed textarea, .view {
  margin: 0; padding: 22px 18px 20px; border: 0; width: 100%;
  font: 400 var(--fs-draft)/2.05 var(--draft); letter-spacing: normal; word-spacing: normal; tab-size: 4; font-kerning: normal;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; color: var(--graphite);
}
.ed-backdrop { position: absolute; inset: 0; color: transparent; pointer-events: none; overflow: hidden; }
.ed-backdrop mark.m { color: transparent; }
.ed textarea { position: relative; display: block; min-height: 260px; resize: none; overflow: hidden; background: transparent; caret-color: var(--red); outline: none; }
.ed textarea::placeholder { color: var(--lead); }
.view { position: relative; cursor: text; min-height: 120px; }
.view:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }
.reading .ed-backdrop, .reading .ed textarea { display: none; }
.view mark.m { cursor: pointer; }
@media (max-width: 999px) { .ed-backdrop, .ed textarea, .view { line-height: 2.25; } }
@media (min-width: 1000px) {
  .ed-backdrop, .ed textarea, .view { font-size: 19px; padding: 30px 34px 26px; }
}

/* the dimension line: the MLS limit as a measured run, the draft's length along it, overflow in red */
.sheet-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--s4); padding: 14px 18px 6px; border-top: 1px solid var(--hair); }
.sheet-foot .dim { grid-column: 1 / -1; }
.dim { display: grid; gap: 6px; min-width: 0; }
.dim-rule { position: relative; height: 14px; margin: 0 6px; }
.dim-rule::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 1px solid var(--cyan-line); }
.dim-rule::after { content: ""; position: absolute; left: -6px; top: 1px; width: 12px; height: 12px; border-left: 1.5px solid var(--cyan); transform: skewX(-45deg); }
.dim-rule i { position: absolute; top: 6px; height: 3px; }
.dim-fill { left: 0; width: 0; background: var(--cyan); transition: width var(--t) var(--ease); }
.dim-over { left: 100%; width: 0; background: var(--red); }
.dim-tick { top: 0 !important; height: 14px !important; width: 0; margin-left: -1px; border-left: 1.5px solid var(--graphite); transform: skewX(-45deg); }
.dim-read { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; font-size: var(--fs-sm); }
.dim-val { font-weight: var(--w-strong); font-variant-numeric: tabular-nums; color: var(--graphite); }
.dim-left { color: var(--lead); font-variant-numeric: tabular-nums; }
.dim.is-over .dim-val, .dim.is-over .dim-left { color: var(--red-ink); }
.limit-ctl { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-label); color: var(--lead); }
.limit-ctl select, .limit-ctl input { font: var(--w-ui) var(--fs-label)/1 var(--sans); font-variant-numeric: tabular-nums; min-height: 40px; padding: 6px 28px 6px 10px; background-color: var(--sheet-2); }
.limit-ctl input { width: 96px; padding-right: 10px; }
.sheet-acts { display: flex; gap: 0 var(--s4); justify-content: flex-end; }
.sheet-acts .btn.quiet { color: var(--graphite); text-decoration-color: var(--hair); font-weight: 500; }
.sheet-acts .btn.quiet:hover { text-decoration-color: var(--graphite); }
@media (max-width: 599px) { .sheet-foot { grid-template-columns: minmax(0, 1fr); } .sheet-acts { justify-content: flex-start; margin-left: -2px; } }
@media (min-width: 1000px) { .sheet-foot { padding: 16px 34px 6px; } }

/* the dock = the sheet's one title block: counts, length, Copy for MLS. Phone: fixed to the bottom. Desktop: the
   sheet's foot, sticky at the bottom of the column. */
.dock { z-index: 40; background: var(--sheet); border: 1px solid var(--graphite); border-top-width: var(--line); }
.dock .tb { grid-template-columns: auto auto 1fr; grid-auto-flow: row; }
.dock .tb .cell b.r { color: var(--red-ink); }
.dock .tb .cell b.ok { color: var(--cyan); }
.dock .copy-cell { display: flex; align-items: center; justify-content: flex-end; padding: 6px 8px; }
.dock .copy-cell .btn { white-space: nowrap; }
.dock-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3); padding: 2px 8px 2px 14px; border-bottom: 1px solid var(--hair); font-size: var(--fs-sm); background: var(--cyan-wash); }
.dock-msg p { margin: 8px 0; flex: 1 1 200px; }
@media (max-width: 999px) {
  .dock { position: fixed; left: 0; right: 0; bottom: 0; border-width: var(--line) 0 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgba(20, 27, 32, .08); }
  .dock .tb .cell { padding: 6px 10px 7px; }
  .dock .copy-cell { padding: 6px 8px 6px 4px; }
  .dock .copy-cell .btn { padding: 10px 14px; }
  .dock:not(.on) { display: none; }
}
@media (max-width: 359px) { .dock .tb .cell b { font-size: 15px; } .dock .tb .cell { padding: 6px 7px; } }
@media (min-width: 1000px) {
  .dock { position: sticky; bottom: 0; margin-top: -1px; }
}

/* fact lock: the draft's own claims as rows of a schedule, set straight in the row */
.lock-wrap { margin-top: var(--s7); scroll-margin-top: 12px; }
.lock-cols { display: none; }
.lock { border-top: var(--line) solid var(--graphite); border-bottom: 1px solid var(--graphite); }
.lrow { display: flex; flex-wrap: wrap; gap: 10px var(--s3); align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); scroll-margin-top: 80px; }
.lrow > [role="cell"]:first-child { flex: 1 1 100%; min-width: 0; }
.lrow:last-child { border-bottom: 0; }
.lrow.flash { animation: row-flash 1.4s var(--ease); }
@keyframes row-flash { 0% { background: var(--red-wash); } 100% { background: transparent; } }
.lrow .c-claim { display: flex; align-items: baseline; gap: 2px; min-width: 0; }
.lrow .c-claim > span { order: 1; }
.lrow .c-claim .rn { order: 2; vertical-align: 0; align-self: flex-start; margin-top: 2px; }
.claim { display: inline; font: 400 17px/1.35 var(--draft); overflow-wrap: break-word; }
.lrow.wrong .claim s { text-decoration: line-through var(--red); text-decoration-thickness: 1.5px; color: var(--lead); }
.verdict { display: block; margin-top: 3px; font-size: var(--fs-label); font-weight: var(--w-ui); color: var(--lead); }
.lrow.wrong .verdict { color: var(--red-ink); }
.lrow.match .verdict { color: var(--cyan); }
.lrow .c-fact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.lrow .c-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.lrow .c-act:empty { display: none; }
.after { font-size: var(--fs-sm); color: var(--lead); }
.lock-foot { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--lead); }
.lock-foot .link-btn { display: inline; min-height: 0; padding: 0; font-size: inherit; }
.lock-empty { padding: var(--s4) 0; margin: 0; color: var(--lead); font-size: var(--fs-sm); }
.stale { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3); margin: 0 0 var(--s3); padding: 2px 0; border-top: 1px solid var(--graphite); border-bottom: 1px solid var(--hair); font-size: var(--fs-sm); }
.stale p { margin: 8px 0; flex: 1 1 220px; }
.also { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--lead); }
.mls-panel { margin-top: var(--s3); padding: var(--s4); border: 1px solid var(--graphite); background: var(--sheet); display: grid; gap: var(--s3); }
.mls-panel label { font-weight: var(--w-ui); }
.mls-panel textarea { min-height: 150px; font: 400 15px/1.5 var(--mono); }
.mls-panel .row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; }
.mls-out { margin: 0; font-size: var(--fs-sm); }
.mls-out ul { margin: 6px 0 0; }
.facts-more { margin-top: var(--s3); }
.facts-more > summary { font-size: var(--fs-sm); color: var(--graphite); }
.facts-more .inner { padding: var(--s3) 0 0; display: grid; gap: var(--s3); }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--s3); }
.facts-help { font-size: var(--fs-sm); color: var(--lead); margin: 0; }
@media (min-width: 1000px) {
  .lock-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.25fr); gap: 0 var(--s3); padding: 0 0 8px; font-size: var(--fs-label); color: var(--lead); }
  .lrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.25fr); }
  .lrow > [role="cell"]:first-child { flex: none; }
  .lrow .c-act:empty { display: block; }
}

/* revision schedule: a ruled table (No. · Severity · Phrase and change), worst first; the open row unfolds in place */
.sched { margin-top: var(--s7); scroll-margin-top: 12px; }
.review-all { margin: -6px 0 var(--s3); }
.review-panel { margin: var(--s2) 0 var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--graphite); border-bottom: 1px solid var(--hair); }
.review-panel ol { margin: 0 0 var(--s3); padding-left: 1.6em; font-size: var(--fs-sm); }
.review-panel li { margin-bottom: 6px; }
.review-panel s { text-decoration-color: var(--red); text-decoration-thickness: 1.5px; }
.review-panel strong { color: var(--cyan); }
.review-panel .row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; }
.sched-cols, .flag-head { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 var(--s3); }
.sched-cols { padding: 0 0 8px; font-size: var(--fs-label); color: var(--lead); border-bottom: var(--line) solid var(--graphite); }
.sched-cols span:nth-child(2) { display: none; }
.flags { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--graphite); }
.flag { margin: 0; border-bottom: 1px solid var(--hair); scroll-margin-top: 80px; }
.flag:last-child { border-bottom: 0; }
.flag.flash { animation: row-flash 1.4s var(--ease); }
.flag-head { width: 100%; padding: 14px 0 13px; border: 0; background: none; color: var(--graphite); text-align: left; cursor: pointer; font: inherit; align-items: baseline; }
.flag-head:hover .draftq { text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 5px; }
.flag-head:focus-visible { outline-offset: -2px; }
.fn { font: 700 14px/1.4 var(--mono); color: var(--red-ink); }
.flag.is-active .fn { color: var(--sheet); background: var(--red-ink); justify-self: start; padding: 0 4px; }
.fn { grid-row: 1 / span 2; }
.fsev { display: inline-flex; grid-column: 2; margin-bottom: 2px; align-items: center; font-size: var(--fs-label); font-weight: var(--w-ui); color: var(--graphite); white-space: nowrap; }
.fph { display: grid; gap: 2px; min-width: 0; grid-column: 2; }
.draftq { font: 400 17px/1.4 var(--draft); color: var(--graphite); overflow-wrap: break-word; }
.flag.is-open .draftq { font-weight: 700; }
.fchg { font-size: var(--fs-sm); color: var(--cyan); }
.flag.is-open .fchg:not(.hand) { display: none; }      /* the open row says it once, on the button */
.fchg .arr { color: var(--cyan-line); }
.fchg.hand { color: var(--lead); font-style: italic; }
.flag-body { padding: 0 0 18px calc(34px + var(--s3)); }
.flag-why { margin: 2px 0 12px; font-size: var(--fs-sm); line-height: 1.55; color: var(--lead); max-width: 58ch; }
.flag-cls { color: var(--graphite); font-weight: var(--w-ui); }
.flag-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); }
.flag-acts .btn.primary { margin: 2px 0 4px; }
.flag-acts .btn.fix, .flag-acts .btn.primary { max-width: 100%; white-space: normal; text-align: left; }
.flag-more { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin-top: -4px; }
.flag-more .link-btn[data-act="ignore"] { color: var(--lead); text-decoration-color: var(--hair); }
.nofix { flex-basis: 100%; margin: 0; font-size: var(--fs-sm); color: var(--lead); }
.flag details.why-more { margin-top: 0; }
.flag details.why-more > summary { font-size: var(--fs-sm); color: var(--cyan); }
.flag details.why-more p { font-size: var(--fs-sm); color: var(--lead); margin: 2px 0 8px; max-width: 58ch; }
.flag details.why-more ul { margin: 0 0 6px; font-size: var(--fs-sm); }
.flags .empty { padding: var(--s4) 0; }
.flags .empty p { margin: 0 0 var(--s2); }
.ex-lines { list-style: none; padding: 0; margin: var(--s2) 0 var(--s3); display: grid; gap: 6px; font-family: var(--draft); }
.ex-lines li { margin: 0; }
.ignored-row { margin: 10px 0 0; }
@media (min-width: 600px) {
  .sched-cols, .flag-head { grid-template-columns: 34px 112px minmax(0, 1fr); }
  .sched-cols span:nth-child(2) { display: inline; }
  .fn { grid-row: auto; }
  .fsev { grid-column: 2; margin: 0; }
  .fph { grid-column: 3; }
  .flag-body { padding-left: calc(34px + 112px + 2 * var(--s3)); }
}
.allowed { margin-top: var(--s5); }
.allowed > summary { font-size: var(--fs-sm); color: var(--graphite); }
.allowed .notes { list-style: none; padding: 0; margin: var(--s2) 0 0; font-size: var(--fs-sm); color: var(--lead); }
.allowed .notes li { padding: 10px 0; border-bottom: 1px solid var(--hair); }
.allowed .notes strong { color: var(--graphite); font-family: var(--draft); font-weight: 400; }
.allowed .style { display: block; margin-top: 4px; }

/* the review record: a small sheet, the one tangible artifact of the check */
.record { margin-top: var(--s7); scroll-margin-top: 12px; }
.record-sheet { background: var(--sheet); border: 1px solid var(--graphite); }
.record-sheet:empty { display: none; }
.record-sheet dl { margin: 0; }
.record-sheet dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--s3); padding: 9px 16px; border-bottom: 1px solid var(--hair); font-size: var(--fs-sm); }
.record-sheet dt { color: var(--lead); }
.record-sheet dd { margin: 0; font-weight: 500; }
.record-sheet .num { font-family: var(--sans); font-variant-numeric: tabular-nums; color: var(--lead); font-weight: 400; }
.record-log { list-style: none; margin: 0; padding: 10px 16px 12px; counter-reset: c; font-size: var(--fs-sm); display: grid; gap: 4px; }
.record-log li { counter-increment: c; margin: 0; padding-left: 28px; position: relative; }
.record-log li::before { content: counter(c); position: absolute; left: 0; top: 2px; font: 700 12px/1.4 var(--mono); color: var(--lead); }
.record-log s { font-family: var(--draft); text-decoration-color: var(--red); color: var(--lead); }
.record-log .to { font-family: var(--draft); color: var(--cyan); }
.record-log .arr { color: var(--cyan-line); }
.record-log .cut { color: var(--red-ink); font-weight: var(--w-ui); }
.record-sheet > .fine { margin: 0; padding: 0 16px 12px; }
.record-none { margin: 0; padding: 12px 16px; }
.record-pro { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--lead); max-width: 60ch; }

/* side notes: clean-check note, share card, Pro panels. Separated by a rule and space, never boxed. */
.note-sec { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--graphite); }
.note-sec h2 { font-size: 20px; margin-bottom: 6px; }
.note-sec > p { font-size: var(--fs-sm); color: var(--lead); max-width: 60ch; }
.note-sec .row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.panel { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--graphite); }
.panel h2 { font-size: 20px; margin-bottom: 6px; }
.panel p { font-size: var(--fs-sm); color: var(--lead); }
.card { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--graphite); }
.card h2, .card h3 { font-size: 20px; }
.cc-opt { display: flex; align-items: flex-start; gap: var(--s2); min-height: 44px; padding-top: 10px; font-size: var(--fs-sm); color: var(--graphite); cursor: pointer; }
.cc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin-top: var(--s2); }
.cc-preview { white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--s3) 0; padding: var(--s3) var(--s4); background: var(--sheet); border: 1px solid var(--hair); font: 400 14px/1.55 var(--sans); }
.caught-preview { display: block; width: 100%; max-width: 320px; height: auto; margin: var(--s3) 0 0; border: 1px solid var(--graphite); }

.hedge { margin: var(--s7) 0 0; font-size: var(--fs-sm); color: var(--lead); max-width: 70ch; }
.hedge p { margin: 0; }
.hedge strong { color: var(--graphite); }
.hedge details > summary { min-height: 40px; font-size: var(--fs-sm); color: var(--cyan); }
.hedge details p { margin: 0 0 var(--s2) 17px; }

/* sheet notes at the foot of the checker: Pro leads, updates and the bookmark follow. One composition, no boxes. */
.sheet-notes { margin-top: var(--s8); padding-top: var(--s5); border-top: var(--line) solid var(--graphite); }
.notes-title { font-size: var(--fs-label); font-weight: var(--w-ui); color: var(--lead); letter-spacing: 0; margin: 0 0 var(--s5); }
.sn-grid { display: grid; gap: var(--s7) var(--s8); }
.sn-pro h3 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.025em; margin-bottom: var(--s3); }
.sn-pro > p { max-width: 54ch; color: var(--lead); }
.sn-list { list-style: none; counter-reset: n; padding: 0; margin: var(--s4) 0 var(--s5); border-top: 1px solid var(--hair); max-width: 60ch; }
.sn-list li { counter-increment: n; position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--hair); margin: 0; color: var(--lead); }
.sn-list li::before { content: counter(n); position: absolute; left: 0; top: 14px; font: 700 14px/1.4 var(--mono); color: var(--graphite); }
.sn-list b { color: var(--graphite); }
.sn-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin: 0; }
.sn-act .fine { margin: 0; }
.sn-side { display: grid; gap: var(--s6); align-content: start; }
.sn-side h3 { font-size: 18px; margin-bottom: 6px; }
.sn-bm { padding-top: var(--s5); border-top: 1px solid var(--hair); }
.sn-bm p { margin: 0; }
.zs-row { display: grid; gap: var(--s2); }
.zs-msg { min-height: 1.4em; margin: 6px 0 0; font-size: var(--fs-sm); color: var(--red-ink); }
.zs-done p { font-size: var(--fs-sm); }
@media (min-width: 600px) { .zs-row { grid-template-columns: 1fr 1.3fr auto; } }
@media (min-width: 1000px) { .sn-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

@media (min-width: 1000px) {
  .check { padding-top: var(--s7); }
  .check-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 var(--s8); align-items: start; }
  .check-head { grid-column: 1 / -1; margin-bottom: var(--s6); }
  .col-side .sched { margin-top: 0; }
  .hedge { grid-column: 1 / -1; }
}

/* Pro panels (pro-panels.html, offline build only) */
.custom-form { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.custom-form .full { grid-column: 1 / -1; }
.custom-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; font-size: var(--fs-sm); border-top: 1px solid var(--hair); }
.custom-list li { display: flex; align-items: center; gap: var(--s2); border-bottom: 1px solid var(--hair); padding: 6px 0; margin: 0; }
.custom-list li span.ph { flex: 1; font-family: var(--draft); overflow-wrap: anywhere; }
.badge { display: inline-flex; align-items: center; font: var(--w-ui) var(--fs-label)/1 var(--sans); color: var(--graphite); }
.pro-print { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--hair); }
.pro-print .facts-grid { grid-template-columns: 1fr 1fr; margin: var(--s3) 0; }
.pro-print .full-sm { grid-column: 1 / -1; }
.row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.hide-sm { display: none; }
@media (min-width: 700px) { .hide-sm { display: inline; } }
#report { display: none; }

/* ============================================================ 8. pages */
/* home */
.hero { padding: var(--s7) 0 var(--s7); }
.hero .wrap { display: grid; gap: var(--s6); align-items: center; }
.hero h1 { font-size: var(--fs-hero); line-height: .98; letter-spacing: -.04em; margin: 0 0 var(--s5); max-width: 11ch; font-weight: 680; }
.hero h1 em { font-style: normal; text-decoration: underline double var(--red); text-decoration-thickness: 2px; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.hero .lede { font-size: clamp(18px, 1.6vw, 21px); max-width: 40ch; color: var(--lead); }
.hero .actions { margin: var(--s5) 0 var(--s3); }
.hero .actions .btn { font-size: 17px; min-height: 52px; padding: 12px 22px; }
.hero .fine { margin: 0; }
/* the plan: the one place the page is graph-ruled, because it is the drawing */
.plan { margin: 0; background-color: var(--sheet); border: 1px solid var(--graphite); padding: 14px;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; background-position: -1px -1px; }
.plan svg { display: block; width: 100%; height: auto; }
.plan figcaption { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin: 10px -14px -14px; padding: 9px 14px 10px; border-top: 1px solid var(--graphite); background: var(--sheet);
  font: 400 var(--fs-label)/1.3 var(--sans); color: var(--lead); }
@media (min-width: 1000px) {
  .hero { padding: var(--s8) 0 var(--s8); }
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--s8); }
  .plan { padding: 22px; }
  .plan figcaption { margin: 14px -22px -22px; padding: 10px 22px 11px; }
}
/* the plan's ink follows the theme (the SVG uses these classes, not fixed colours) */
.plan .w { stroke: var(--graphite); } .plan .wf { fill: var(--graphite); } .plan .op { fill: var(--sheet); }
.plan .c { stroke: var(--cyan); } .plan .cf { fill: var(--cyan); } .plan .cl { stroke: var(--cyan-line); }
.plan .r { stroke: var(--red); } .plan .rf { fill: var(--red-ink); } .plan .rd { fill: var(--sheet); stroke: var(--red); }

.notes-band { padding: 0 0 var(--s7); }
@media (min-width: 900px) { .notes-band .notes-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7); } }

.split { display: grid; gap: var(--s5) var(--s8); }
.split.even { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .split.even { grid-template-columns: 1fr 1fr; } .split.flip > :first-child { order: 2; } }
.sec-title { font-size: var(--fs-h1); max-width: 18ch; margin-bottom: var(--s4); }
.sec-title s { text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.sec-title em { font-style: normal; color: var(--cyan); }

/* the phrases AI writers lean on: a mini revision schedule, ruled, no box */
.flag-sample { list-style: none; padding: 0; margin: var(--s6) 0 var(--s5); border-top: var(--line) solid var(--graphite); border-bottom: 1px solid var(--graphite); display: grid; }
.flag-sample li { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--hair); display: grid; gap: 4px; }
.flag-sample li:last-child { border-bottom: 0; }
.flag-sample q { font: 400 19px/1.35 var(--draft); quotes: "\201C" "\201D"; }
.flag-sample .cls { display: inline-flex; align-items: center; gap: 2px 10px; flex-wrap: wrap; font-size: var(--fs-label); color: var(--lead); }
.flag-sample .cls b { color: var(--graphite); }
.flag-sample p { margin: 0; font-size: var(--fs-sm); color: var(--lead); max-width: 56ch; }
@media (min-width: 900px) {
  .flag-sample li { grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1.4fr); gap: var(--s5); align-items: baseline; }
}

.steps { list-style: none; counter-reset: s; padding: 0; margin: var(--s4) 0 0; border-top: var(--line) solid var(--graphite); }
.steps li { counter-increment: s; position: relative; padding: var(--s4) 0 var(--s4) 40px; border-bottom: 1px solid var(--hair); margin: 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: calc(var(--s4) + 3px); font: 700 14px/1.4 var(--mono); color: var(--red-ink); }
.steps h3 { margin: 0 0 4px; }
.steps p { margin: 0; color: var(--lead); max-width: 56ch; }

.figure { margin: 0; }
.figure .frame { border: 1px solid var(--graphite); background: var(--sheet); padding: 0; }
.figure img, .figure video { display: block; width: 100%; height: auto; }
.figure figcaption { margin-top: 10px; font: 400 var(--fs-label)/1.4 var(--sans); color: var(--lead); }
.phone-frame { max-width: 340px; margin: 0 auto; }

.facts-table td.strike { text-decoration: line-through var(--red); text-decoration-thickness: 1.5px; font-family: var(--draft); color: var(--lead); }
.facts-table td.gave { font-family: var(--mono); color: var(--cyan); font-weight: 700; }
.facts-table td.fix { font-weight: var(--w-ui); }
.okay { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--graphite); display: grid; gap: var(--s2) var(--s5); }
.okay .lbl { font-weight: var(--w-head); }
.okay p { margin: 0 0 .6em; color: var(--lead); }
@media (min-width: 900px) { .okay { grid-template-columns: 180px 1fr; } }
.classes { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); border-top: 1px solid var(--hair); gap: 0 var(--s5); }
.classes li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.sources { list-style: none; padding: 0; margin: var(--s4) 0; border-top: var(--line) solid var(--graphite); border-bottom: 1px solid var(--graphite); }
.sources li { display: grid; grid-template-columns: 72px 1fr; gap: var(--s3); margin: 0; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: var(--fs-sm); }
.sources li:last-child { border-bottom: 0; }
.sources span { font: 700 13px/1.6 var(--mono); color: var(--cyan); }
.withdrawn { border-top: 1px solid var(--hair); padding-top: var(--s3); }

.plans-wrap { margin-top: var(--s5); }
.plans th small { display: block; font: 400 var(--fs-label)/1.3 var(--sans); color: var(--lead); margin-top: 4px; }
.plans thead th { font: var(--w-head) 19px/1.2 var(--sans); color: var(--graphite); }
.plans td { width: 50%; }
.plans .buy-row td { border-top: 1px solid var(--graphite); }
.buy-soon .when-live, html:not(.buy-soon) .when-soon { display: none; }
.honest { margin-top: var(--s4); max-width: 68ch; }
.limits { padding-left: 1.4em; color: var(--lead); max-width: 60ch; }
.limits li { margin-bottom: .5em; }
.pull { font: var(--w-head) clamp(22px, 2.4vw, 30px)/1.25 var(--sans); letter-spacing: -.02em; max-width: 22ch; margin: 0 0 var(--s4); }
.pull .ink { text-decoration: underline double var(--red); text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-skip-ink: none; }
.signoff { font-size: var(--fs-sm); color: var(--lead); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq details:first-of-type { border-top: var(--line) solid var(--graphite); }
.faq details > summary { padding: 8px 0; font-size: var(--fs-body); }
.faq details p { color: var(--lead); padding: 0 0 var(--s3) 21px; margin: 0; max-width: 64ch; }
.signup { align-self: start; }

.sticky-cta { display: none; }
@media (max-width: 899px) {
  .sticky-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 8px var(--gut) calc(8px + env(safe-area-inset-bottom)); background: var(--sheet); border-top: var(--line) solid var(--graphite); transition: transform var(--t) var(--ease); }
  .sticky-cta .btn { flex: 1; }
  .sticky-cta.is-hidden { transform: translateY(110%); visibility: hidden; transition: transform var(--t) var(--ease), visibility 0s var(--t); }
  body.has-sticky { padding-bottom: 76px; }
}

/* compare */
.compare { min-width: 760px; }
.compare th[scope="row"] { width: 22%; }
.compare .us, .compare .us-h { background: var(--cyan-wash); }
.compare .us-h { color: var(--cyan); }
.compare th, .compare td { padding-left: 12px; }
.scroll-note { display: none; }
@media (max-width: 899px) { .scroll-note { display: block; } }
.checklist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hair); }
.checklist li { position: relative; margin: 0; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--hair); color: var(--lead); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 23px; width: 16px; border-top: 1.5px solid var(--cyan); }
.checklist.no li::before { border-top-color: var(--red); border-top-style: dashed; }

/* thanks */
.download { padding: var(--s4) var(--s5); border: 1px solid var(--graphite); background: var(--sheet); margin-bottom: var(--s5); }
.download h2 { margin-top: 0; }
.pro-shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s5); align-items: start; }
.pro-shots figure { margin: 0; }
.pro-shots img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; object-position: top; border: 1px solid var(--graphite); }
.pro-shots figcaption, .pay-steps li { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--lead); }
.pro-shots b, .pay-steps b { color: var(--graphite); }
@media (max-width: 760px) { .pro-shots { grid-template-columns: 1fr; } }
.pay-steps { list-style: none; counter-reset: p; margin: 0; padding: 0; border-top: 1px solid var(--graphite); }
.pay-steps li { counter-increment: p; position: relative; margin: 0; padding: var(--s3) 0 var(--s3) 36px; border-bottom: 1px solid var(--hair); }
.pay-steps li::before { content: counter(p); position: absolute; left: 0; font: 700 14px/1.4 var(--mono); color: var(--graphite); }
.pay-steps b { display: block; }
.pay-row .fine { margin: 0; }
.download .dl-status { margin: 0 0 var(--s3); font-weight: 600; }
.download .keep { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--hair); }
.download .keep p { margin: 0 0 var(--s2); }
.keep-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
#keep-note:empty { display: none; }
#keep-note { word-break: break-all; }
@media (min-width: 768px) and (pointer: fine) { .phone-note { display: none; } }
.first-steps > li strong { color: var(--graphite); }

/* bookmark page */
.bm-steps { list-style: none; counter-reset: s; padding: 0; margin: var(--s4) 0 0; border-top: var(--line) solid var(--graphite); }
.bm-steps > li { counter-increment: s; position: relative; padding: var(--s4) 0 var(--s4) 40px; border-bottom: 1px solid var(--hair); margin: 0; }
.bm-steps > li::before { content: counter(s); position: absolute; left: 0; top: calc(var(--s4) + 3px); font: 700 14px/1.4 var(--mono); color: var(--graphite); }
.bm-drag-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin: var(--s4) 0; }
.bm-drag { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; cursor: grab; background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px dashed var(--btn-bg); text-decoration: none; font: var(--w-ui) 16px/1 var(--sans); }
.bm-drag:hover { border-color: var(--red); color: var(--btn-fg); text-decoration: none; }
.bm-drag:active { cursor: grabbing; }
.bm-drag img { width: 22px; height: 22px; flex: none; }
.bm-code { min-height: 110px; resize: vertical; font: 400 13px/1.5 var(--mono); }
.bm-note { min-height: 1.4em; }
.bm-facts li { margin-bottom: .6em; }
.bm-mobile { display: none; }
@media (hover: none) and (pointer: coarse) { .bm-mobile { display: block; } }

/* ============================================================ 9. print + motion */
@media print {
  body { background: #fff; }
  .site-header, .zones, .site-footer, .dock, .sticky-cta, .tools, .sheet-notes { display: none !important; }
  body.printing > *:not(#report) { display: none !important; }
  body.printing #report { display: block !important; }
  body.printing { background: #fff; color: #000; font: 11pt/1.4 var(--sans); }
  #report h1 { font-size: 20pt; }
  #report table { width: 100%; border-collapse: collapse; margin: 6pt 0 12pt; }
  #report th, #report td { border: 1px solid #999; padding: 4pt 6pt; text-align: left; vertical-align: top; font-size: 9.5pt; }
  #report .final { white-space: pre-wrap; border: 1px solid #999; padding: 8pt; font: 10pt/1.5 var(--draft); }
  #report .sig { margin-top: 24pt; display: flex; gap: 30pt; }
  #report .sig div { flex: 1; border-top: 1px solid #000; padding-top: 4pt; font-size: 9pt; }
  #report section { break-inside: avoid-page; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.js .reveal { opacity: 1; }
.pro-offline { margin-left: auto; }
/* fact lock: one row per fact, however often the draft says it */
.verdict .mentions { color: var(--lead); font-weight: 400; }
.btn .fixes { font-weight: 400; }
.cut-list { list-style: none; margin: 0; padding: 0; flex-basis: 100%; display: grid; gap: 4px; }
.cut-list li { margin: 0; }
.lrow .c-act .btn.line { display: inline-block; text-align: left; line-height: 1.3; }