/* DEBENDA — the typeset document.
   Paper, ink and one rubric red. A serif for reading and display, a plain sans for labels and controls,
   mono for codes only. Structure comes from one 12-column grid with three tracks (margin, text, reference),
   space and hairline rules. No boxes.
   Sizes: 15 (notes, citations), 16 (labels, controls), 18 and 20 (serif reading), 28 (section heads),
   the tool-heading size and the display size. Two weights, 400 and 600 (the wordmark alone sits at 500). */

:root {
  --paper: #FBFAF7;
  --surface: #FFFFFF;
  --ink: #1B1A17;
  --ink-2: #57544B;
  --line: #DBD7CD;          /* hairline between rows */
  --line-2: #8F8B80;        /* field borders */
  --rubric: #A4281B;        /* red, for "will reject" only */
  --serif: "Newsreader", "Newsreader Fallback", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, "SFMono-Regular", "Liberation Mono", monospace;
  --s15: .9375rem;
  --s16: 1rem;
  --s18: 1.125rem;
  --s20: 1.25rem;
  --s28: 1.75rem;
  --s40: clamp(2.25rem, 3.1vw, 2.625rem);
  --s60: min(4rem, 5.3vw);
  --gap: 24px;
  --mast: 72px;
  --entry: 16.5rem;         /* the width of every worksheet entry */
}

/* The web fonts load without holding up the page. Until the serif arrives the page is set in a local face scaled to
   the same measure, so the lines break in the same places and nothing moves when it lands. A browser that lacks
   size-adjust, or the face, falls through to the next family as before. */
@font-face { font-family: "Newsreader Fallback"; src: local("Palatino Linotype"), local("Palatino"); size-adjust: 91%; }
@font-face { font-family: "Newsreader Fallback"; font-weight: 600; src: local("Palatino Linotype Bold"), local("Palatino Bold"); size-adjust: 91%; }
@font-face { font-family: "Newsreader Fallback"; font-style: italic; src: local("Palatino Linotype Italic"), local("Palatino Italic"); size-adjust: 91%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--s16)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::selection { background: var(--ink); color: var(--paper); }
[hidden] { display: none !important; }

.wrap { max-width: 1224px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nb { white-space: nowrap; }      /* a clause number, a citation or a date stays on one line */
/* ...unless the browser's text size is raised so far that one might not fit its column: a narrow phone, or the reference column of the wide layout */
@media (max-width: 19.5em), (min-width: 1100px) and (max-width: 52em) { .nb { white-space: normal; } }
.entry-ref { container-type: inline-size; }      /* the same, measured on the citation's own column, where the browser can */
@container (max-width: 13em) { .nb { white-space: normal; } }
.skip { position: absolute; left: 24px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 5; }
.skip:focus { top: 8px; }

/* ---------- masthead: wordmark in the margin, the tools over the text, the library over the reference column ---------- */
.mast { border-bottom: 1px solid var(--ink); }
.mast-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: stretch; min-height: var(--mast); }
.wordmark {
  font: 500 var(--s28)/1 var(--serif); letter-spacing: -.01em; color: var(--ink); text-decoration: none;
  display: inline-block; padding-bottom: 4px; border-bottom: 3px double var(--ink);
}
.mast .wordmark { grid-column: 1 / span 2; align-self: center; justify-self: start; }
.mast-tools { grid-column: 3 / span 7; display: flex; }
.tools { display: flex; flex-wrap: wrap; gap: 0 36px; align-items: stretch; }      /* wraps only when the browser's text size is raised */
.tools button, .tools a, .lib {
  font: 400 var(--s16)/1 var(--sans); color: var(--ink-2); background: none; border: 0; padding: 0;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent; margin-bottom: -1px;
  cursor: pointer; text-decoration: none; min-height: 44px; white-space: nowrap;
}
.tools a, .lib { display: inline-flex; align-items: center; }
.lib { grid-column: 10 / span 3; justify-self: end; }
.tools button:hover, .tools a:hover, .lib:hover { color: var(--ink); }
.tools button[aria-selected="true"], .tools a[aria-current], .lib[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
@media (forced-colors: active) {
  .tools button, .tools a, .lib { border-color: Canvas; margin-bottom: 0; }     /* and the masthead rule stays whole */
  .tools button[aria-selected="true"], .tools a[aria-current], .lib[aria-current] { border-bottom-color: Highlight; }
}

/* ---------- panels ---------- */
.panel { display: none; scroll-margin-top: 100vh; }   /* a link to #interest (etc.) lands at the top of the page, masthead in view */
.panel.active { display: block; }

/* ---------- the top of the document: title and standfirst in the text tracks, provenance in the reference column ---------- */
.front { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-top: 80px; }
.front > .lede { grid-column: 1 / span 9; }
.front > .refblock { grid-column: 10 / span 3; padding-top: 1px; }
.front > .specimen { grid-column: 1 / -1; }
.lede h1 {
  font: 400 var(--s60)/1.04 var(--serif); letter-spacing: -.018em; text-wrap: balance;
}
.title, .lede h1.title { font: 400 var(--s40)/1.1 var(--serif); letter-spacing: -.012em; text-wrap: balance; max-width: 19em; }
.standfirst { font: 400 var(--s20)/1.45 var(--serif); max-width: 37em; margin-top: 26px; text-wrap: pretty; font-variant-numeric: lining-nums; }
.title + .standfirst { margin-top: 18px; max-width: 35em; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; }
.btn {
  font: 600 var(--s16)/1 var(--sans); color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: 2px; height: 52px; padding: 0 28px; cursor: pointer;
}
.btn:hover { background: #3B3933; border-color: #3B3933; }
.alt { font-size: var(--s16); display: inline-flex; align-items: center; min-height: 44px; }
.free { color: var(--ink-2); }
.front-tool { padding-top: 64px; }

/* the reference block: a short ruled list */
.reflist > div { padding: 11px 0 13px; border-top: 1px solid var(--line); }
.reflist > div:first-child { border-top-color: var(--ink); }
.reflist > div:last-child { border-bottom: 1px solid var(--line); }
.reflist dt { font: 400 var(--s15)/1.4 var(--sans); color: var(--ink-2); }
.reflist dd { font: 400 var(--s16)/1.4 var(--sans); font-variant-numeric: lining-nums tabular-nums; margin-top: 1px; }

/* a text button */
.link {
  font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.link:hover { text-decoration-thickness: 2px; }

/* ---------- the grid: two working columns ---------- */
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; margin-top: 104px; }
.col-ws { grid-column: 1 / span 6; padding-right: var(--gap); }
.col-fd { grid-column: 7 / span 6; }
.cols-tool { margin-top: 52px; }
#scan { scroll-margin-top: 28px; }
#fd-head, #worksheet-head { scroll-margin-top: 20px; }
.worksheet input, .worksheet select { scroll-margin: 20px 0; }      /* keyboard focus brings a line up clear of the edge of the screen */
.part > summary, .fnote > summary, .why > summary, .later > summary, .entry-jump .link, .about-ref a { scroll-margin: 20px 0; }      /* and the same for the other things the keyboard lands on, so the focus ring is never cut at the edge */
.head { font: 400 var(--s28)/1.2 var(--serif); letter-spacing: -.008em; border-top: 1px solid var(--ink); padding-top: 14px; font-variant-numeric: lining-nums; text-wrap: balance; }
.head:focus { outline: none; }
.note { color: var(--ink-2); margin-top: 8px; max-width: 34em; }
.col-ws .note { margin-bottom: 24px; }
.note-ink { color: var(--ink); }
.ws-state { margin: -12px 0 24px; }

/* ---------- worksheet: numbered lines, label left, entry right ---------- */
.worksheet { border-bottom: 1px solid var(--ink); }
div.worksheet { border-top: 1px solid var(--ink); }
/* Every entry is the same width and starts on the same edge. Only the contract number, and the long choice at the head
   of a calculator, run the full width of the line. */
.line {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) var(--entry); column-gap: 16px; align-items: center;
  min-height: 68px; padding: 11px 0;
}
.line + .line, .part-note + .line { border-top: 1px solid var(--line); }
.ln { font: 400 var(--s15)/1 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lb { font: 400 var(--s16)/1.35 var(--sans); cursor: default; }
label.lb { cursor: pointer; }
.hint { display: block; font-size: var(--s15); line-height: 1.4; color: var(--ink-2); margin-top: 2px; text-wrap: pretty; }
.en { display: flex; align-items: center; justify-content: flex-end; position: relative; }
/* a unit is set inside its field: the dollar sign at the left, as on a ledger; days and percent after the figure */
.unit { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 1; color: var(--ink-2); line-height: 1; pointer-events: none; }
.unit-days, .unit-pct { left: auto; right: 12px; }
.en > .unit-days + input { padding-right: 3.5rem; }
.en > .unit-pct + input { padding-right: 2.1rem; }
.line.check { grid-template-columns: 2rem minmax(0, 1fr) auto; }
.line.stack { grid-template-columns: 2rem minmax(0, 1fr); row-gap: 10px; }
.line.stack .en { grid-column: 2; }
/* a pair of dates: one label, and each date with its own short one */
.sub { font: 400 var(--s15)/1.4 var(--sans); color: var(--ink-2); cursor: pointer; }
.line.pair { grid-template-columns: 2rem minmax(0, 1fr) auto var(--entry); row-gap: 8px; }
.line.pair > .ln, .line.pair > .lb { grid-row: 1 / span 2; }
.line.pair > .sub { grid-column: 3; justify-self: end; }
.line.pair > .en { grid-column: 4; }

input[type=text], input[type=date], input[type=number], select {
  font: 400 var(--s16)/1.2 var(--sans); font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink); background: var(--surface);
  height: 44px; padding: 0 12px; margin: 0; width: 100%; min-width: 0;
  border: 1px solid var(--line-2); border-radius: 2px;
}
input:hover, select:hover { border-color: var(--ink); }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
select {
  -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231B1A17' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
input.code { font-family: var(--mono); }
input.num { text-align: right; }
input[type=checkbox] { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); cursor: pointer; flex: none; }
.line.check .en { min-width: 44px; min-height: 44px; cursor: pointer; }
.line.check .lb { align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-height: 44px; }

/* money fields keep the typed value; at rest they show it set as money */
.money { position: relative; display: block; flex: 1; min-width: 0; }
.money > input { display: block; }
.money > .echo {
  display: none; position: absolute; inset: 0; padding: 0 13px; align-items: center; justify-content: flex-end;
  font: 400 var(--s16)/1.2 var(--sans); font-variant-numeric: lining-nums tabular-nums; color: var(--ink);
  pointer-events: none; white-space: nowrap; overflow: hidden;
}
.money.show > input:not(:focus) { color: transparent; }
.money.show > input:not(:focus) + .echo { display: flex; }

/* parts of the scan worksheet */
.part { border-top: 1px solid var(--ink); }
.part > summary {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline;
  padding: 16px 0 17px; cursor: pointer; list-style: none;
}
.part > summary::-webkit-details-marker { display: none; }
.pn { font: 600 var(--s15)/1 var(--sans); }
.pn-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pt { font: 400 var(--s20)/1.3 var(--serif); }
.pc { display: block; font: 400 var(--s15)/1.4 var(--sans); margin-top: 6px; font-variant-numeric: lining-nums tabular-nums; }
.pc:empty { display: none; }
.pc .t-RC { color: var(--rubric); font-weight: 600; }
.ps { display: grid; grid-template-columns: minmax(7em, max-content) minmax(0, 1fr); gap: 3px 20px; font: 400 var(--s15)/1.5 var(--sans); color: var(--ink-2); margin-top: 8px; }
.part[open] .ps { display: none; }
.pd { grid-column: 1 / -1; }
.pv { color: var(--ink); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.pv.code { font-family: var(--mono); }
.pv.blank { color: var(--ink-2); font-style: italic; }
.pa::after { content: "Open"; font: 400 var(--s15)/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.part.has-values .pa::after { content: "Edit"; }
.part[open] .pa::after, .part.has-values[open] .pa::after { content: "Close"; }
.lines { padding-bottom: 8px; }
.lines > * { border-top: 1px solid var(--line); }      /* each row draws its own top rule, so a line hidden for this document type leaves no doubled one */
.part-note { color: var(--ink-2); font-size: var(--s15); padding: 14px 0 14px 3rem; }
.next { padding: 18px 0 12px 3rem; border-top: 1px solid var(--line); }

/* ---------- findings: annotated entries ---------- */
.tally { margin-top: 8px; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; max-width: 36em; }
.tally .t-RC { color: var(--rubric); font-weight: 600; }
.tally .t-RL, .tally .t-DR, .tally .t-ML { color: var(--ink); }
.empty { color: var(--ink-2); margin-top: 8px; max-width: 32em; }
.clean { font: 400 var(--s20)/1.45 var(--serif); margin-top: 20px; max-width: 30em; }
.eg-cap { margin-top: 28px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); color: var(--ink); }
#findings .tally + .entry, #findings .tally + .group, #findings .clean + .group, #findings .clean + .entry { margin-top: 24px; border-top: 1px solid var(--ink); }
#scan-count { font-size: var(--s15); margin-top: 16px; font-variant-numeric: lining-nums tabular-nums; }

.entry, .group {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: var(--gap);
  padding: 22px 0 24px; border-bottom: 1px solid var(--line);
}
.entry > * { grid-column: 2; }
.entry-margin { grid-column: 1; grid-row: 1 / span 6; padding-top: .36em; }
.entry-sev { font: 600 var(--s15)/1.3 var(--sans); }
.sev-RC .entry-sev { color: var(--rubric); }
.entry-title { font: 600 var(--s20)/1.3 var(--serif); font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
.entry-detail { font: 400 var(--s20)/1.42 var(--serif); margin-top: 6px; font-variant-numeric: lining-nums; text-wrap: pretty; overflow-wrap: anywhere; }
.entry-copy { font: 400 var(--s18)/1.5 var(--serif); margin-top: 8px; max-width: 36em; font-variant-numeric: lining-nums; text-wrap: pretty; }
/* The foot of a finding is two lines: its rule and source, then the two things to do with it. "What the rule says" keeps
   the first cell of the second line and the "go to" link the cell beside it, open or closed: the rule's own words open
   underneath both, one size down and behind a hairline, so they read as a note to the finding and not as a second finding. */
.entry-ref { font: 400 var(--s15)/1.5 var(--sans); color: var(--ink-2); margin-top: 12px; font-variant-numeric: lining-nums; text-wrap: pretty; }
.rid { font-family: var(--mono); color: var(--ink); margin-right: .6em; white-space: nowrap; }
.entry-foot { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: start; margin-top: 2px; }
.why { grid-column: 1; grid-row: 1; }
.why[open] { grid-column: 1 / -1; }
.why > summary { font: 400 var(--s15)/1.3 var(--sans); color: var(--ink); cursor: pointer; display: inline-block; list-style: none; padding: 5px 0; }
.why > summary::-webkit-details-marker { display: none; }
.why > summary:hover > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.why .entry-copy { margin: 6px 0 4px; padding-left: 16px; border-left: 1px solid var(--line-2); }
.entry-jump { font: 400 var(--s15)/1.3 var(--sans); margin-top: 6px; font-variant-numeric: lining-nums tabular-nums; }
.entry-jump .link { padding: 5px 0; }
.entry-foot .entry-jump { margin-top: 0; grid-column: 2; grid-row: 1; }
.entry-foot .entry-jump:first-child { grid-column: 1 / -1; }
/* one mark for everything that opens in the findings: a small chevron before the label, turned down when open */
.why > summary::before, .fnote > summary::before {
  content: ""; display: inline-block; width: .44em; height: .44em; margin: 0 .7em .12em .1em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg);
}
.why[open] > summary::before, .fnote[open] > summary::before { transform: rotate(45deg); margin: 0 .62em .2em .18em; }

/* good-to-know notes: one line each, each with its own disclosure */
.group { padding: 0; border-bottom: 0; }
.group-l { grid-column: 1; font: 400 var(--s15)/1.3 var(--sans); color: var(--ink-2); padding-top: 19px; }
.group-b { grid-column: 2; }
.fnote { border-bottom: 1px solid var(--line); }
.fnote > summary {
  display: block; position: relative; padding: 14px 0 15px; cursor: pointer; list-style: none;
  font: 400 var(--s20)/1.3 var(--serif); font-variant-numeric: lining-nums; overflow-wrap: anywhere;
}
.fnote > summary::-webkit-details-marker { display: none; }
.fnote > summary::before, .fnote[open] > summary::before { position: absolute; left: -1.05rem; top: calc(14px + .5em); margin: 0; font-size: var(--s15); color: var(--ink-2); }
.fnote > summary:hover::before { color: var(--ink); }
.fnote-sev { font: 400 var(--s15)/1.3 var(--sans); color: var(--ink-2); display: block; margin-bottom: 2px; }
.fnote-b { padding: 0 0 20px; }
.fnote-b > :first-child { margin-top: 0; }
.fnote-b .entry-detail { font-size: var(--s18); line-height: 1.5; }
/* in an opened note the rule's own words sit behind the same hairline as in a finding, so they read as a note to what is true of this document */
.fnote-b .entry-detail + .entry-copy { padding-left: 16px; border-left: 1px solid var(--line-2); }

/* findings about parts not reached yet: counted and folded */
.later { margin-top: 0; }
.later > summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap);
  padding: 16px 0 17px; cursor: pointer; list-style: none; border-bottom: 1px solid var(--ink);
}
.later > summary::-webkit-details-marker { display: none; }
.later-t { font: 400 var(--s20)/1.3 var(--serif); font-variant-numeric: lining-nums; }
.later-a::after { content: "Show"; font: 400 var(--s15)/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.later[open] .later-a::after { content: "Hide"; }
#findings .tally + .later { margin-top: 24px; border-top: 1px solid var(--ink); }

/* the specimen on the first screen: one entry from the sample, on the full grid, closed with its tally */
.specimen { margin-top: 64px; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.has-sample .specimen { display: none; }
.specimen-cap, .specimen-rest {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  font: 400 var(--s15)/1.4 var(--sans); color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums;
}
.specimen-cap { padding: 11px 0 12px; border-bottom: 1px solid var(--line); }
.sc-l { grid-column: 1 / span 2; }
.sc-d { grid-column: 3 / span 7; color: var(--ink); display: flex; flex-wrap: wrap; gap: 0 2.4em; }
.sc-d .code { font-family: var(--mono); }
.sc-n { grid-column: 10 / span 3; }
.specimen-rest { padding: 12px 0 13px; }
/* the caption, the finding and the tally are written by app.js from the engine; until then their space is kept clear, so nothing below moves much */
.specimen-cap:empty { min-height: calc(1.4em + 24px); }
#specimen:empty { min-height: 9.5rem; }
.specimen-rest:empty { min-height: calc(1.4em + 25px); }
@media (max-width: 449px) { .specimen-cap:empty, .specimen-rest:empty { min-height: calc(2.8em + 25px); } #specimen:empty { min-height: 15rem; } }
.specimen-rest > span { grid-column: 3 / span 7; }
.specimen .entry { border-bottom-color: var(--line); padding: 20px 0 22px; }

/* ---------- statements: the calculators' results ---------- */
.stmt { margin-top: 12px; }
.stmt .row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap); padding: 13px 0; border-bottom: 1px solid var(--line); }
.stmt dt { font: 400 var(--s16)/1.4 var(--sans); max-width: 26em; }
.stmt dd { font: 400 var(--s20)/1.2 var(--serif); font-variant-numeric: lining-nums tabular-nums; text-align: right; white-space: nowrap; }
.stmt .aside { font: 400 var(--s15)/1 var(--sans); color: var(--ink-2); margin-left: .35em; }
.stmt .key { display: inline-block; width: 1.4em; font-weight: 600; }
.stmt .nw { white-space: nowrap; }
.stmt .row.keyed dt { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); }
.stmt-total { margin-top: -1px; }
.stmt .row.total {
  padding: 24px 0 18px; align-items: baseline;
  border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink);
}
.stmt .total dt { font-weight: 600; max-width: 11em; text-wrap: balance; }
.stmt .total dd { font: 400 3.75rem/1 var(--serif); letter-spacing: -.012em; }
.stmt .total.long dd { font-size: 2.75rem; }
.stmt .total.xlong dd { font-size: 1.75rem; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.stmt .total .cents { color: var(--ink-2); }
.stmt .due { font-weight: 600; }
.stmt-flag { margin-top: 8px; color: var(--ink); max-width: 36em; font-variant-numeric: lining-nums tabular-nums; }      /* on the same line as the worksheet's note */
.stmt-flag + .stmt { margin-top: 14px; border-top: 1px solid var(--line); }
.stmt-note { color: var(--ink-2); margin-top: 12px; max-width: 34em; font-variant-numeric: lining-nums tabular-nums; }
.stmt-how { display: none; }
.stmt-more { margin-top: 26px; border-top: 1px solid var(--line); }
.notes { margin-top: 26px; padding-left: 1.4em; font-size: var(--s16); line-height: 1.5; color: var(--ink-2); max-width: 40em; font-variant-numeric: lining-nums; }
.notes li { padding-left: .3em; }
.notes li + li { margin-top: 8px; }
.stmt-ref { font-size: var(--s15); color: var(--ink-2); margin-top: 16px; font-variant-numeric: lining-nums; }

/* ---------- the pre-cliff checklist ---------- */
.below { margin-top: 88px; }
.checklist { list-style: none; padding: 0; margin-top: 24px; counter-reset: ck; border-top: 1px solid var(--ink); }
.checklist li {
  counter-increment: ck; display: grid; column-gap: var(--gap);
  grid-template-columns: 2rem minmax(0, 1fr) calc((100% - 11 * var(--gap)) / 4 + 2 * var(--gap));
  padding: 18px 0 20px; border-bottom: 1px solid var(--line);
}
.checklist li::before { content: counter(ck); font: 400 var(--s15)/1 var(--sans); color: var(--ink-2); padding-top: .55em; font-variant-numeric: tabular-nums; }
.ck-t { font: 400 var(--s20)/1.42 var(--serif); font-variant-numeric: lining-nums; text-wrap: pretty; max-width: 34em; }
.ck-c { font: 400 var(--s15)/1.5 var(--sans); color: var(--ink-2); padding-top: .32em; font-variant-numeric: lining-nums; text-wrap: pretty; }

/* ---------- what to know: one ruled list on the three tracks ---------- */
.about { margin-top: 120px; border-top: 1px solid var(--ink); }
.about-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 26px 0 28px; border-bottom: 1px solid var(--line); }
.about-row > h2 { grid-column: 1 / span 2; font: 600 var(--s16)/1.4 var(--sans); padding-top: .28em; }
.about-row > :not(h2) { grid-column: 3 / span 7; }
.about-row > .about-ref { grid-column: 10 / span 3; grid-row: 1 / span 9; font: 400 var(--s15)/1.5 var(--sans); color: var(--ink-2); padding-top: .42em; font-variant-numeric: lining-nums; }
.about-ref a { display: block; width: fit-content; }
.about-ref a + a, .about-ref a + span { margin-top: 6px; }
.about-ref span { display: block; }
.about-row p { font: 400 var(--s20)/1.45 var(--serif); font-variant-numeric: lining-nums; text-wrap: pretty; }
.about-row p.about-ref { font: 400 var(--s15)/1.5 var(--sans); }
.about-row p + p, .about-row p + ul, .about-row ul + p { margin-top: 14px; }
.about-row p + p.about-ref { margin-top: 0; }
.about-row ul { padding-left: 1.1em; font: 400 var(--s20)/1.45 var(--serif); }
.about-row li + li { margin-top: 6px; }
.about-row .small { font: 400 var(--s15)/1.5 var(--sans); color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.about-row strong { font-weight: 600; }
main:not([data-tool="scanner"]) .about-row.scan-only { display: none; }

/* ---------- foot: the imprint, on the same three tracks ---------- */
.foot { margin-top: 56px; padding-bottom: 72px; }
.imprint { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.imp-mark { grid-column: 1 / span 2; }
.imp-mark .wordmark { font-size: var(--s20); padding-bottom: 3px; }
.fine { grid-column: 3 / span 7; font-size: var(--s15); line-height: 1.6; color: var(--ink-2); max-width: 44em; font-variant-numeric: lining-nums; }
.imp-ref { grid-column: 10 / span 3; font-size: var(--s15); line-height: 1.5; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.imp-ref p + p { margin-top: 10px; }
.imp-links a { display: block; width: fit-content; }
.imp-links a + a { margin-top: 4px; }

/* ---------- the rule library (rules.html): severity and rule / rule / source ---------- */
.reg-index {
  margin-top: 44px; padding: 13px 0 14px; border-top: 1px solid var(--ink);
  font: 400 var(--s16)/1.5 var(--sans); font-variant-numeric: lining-nums tabular-nums;
}
.reg-index a { white-space: nowrap; }
.reg-index .t-RC { color: var(--rubric); font-weight: 600; }
.reg-heads {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: 9px 0 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--ink);
  font: 400 var(--s15)/1.4 var(--sans); color: var(--ink-2);
}
.reg-heads > :nth-child(1) { grid-column: 1 / span 2; }
.reg-heads > :nth-child(2) { grid-column: 3 / span 7; }
.reg-heads > :nth-child(3) { grid-column: 10 / span 3; }
.reg-group { font: 400 var(--s28)/1.2 var(--serif); padding: 56px 0 14px; border-bottom: 1px solid var(--ink); scroll-margin-top: 0; font-variant-numeric: lining-nums; }
.reg-heads + .reg-group { padding-top: 30px; }
.reg-group span { font: 400 var(--s15)/1 var(--sans); color: var(--ink-2); margin-left: .3em; }
.reg-group.sev-RC { color: var(--rubric); }
.rule-id { display: block; font: 400 var(--s15)/1.3 var(--mono); color: var(--ink); }
.rule-sev { display: block; margin-bottom: 5px; }
.reftag { font: italic 400 var(--s16)/1.45 var(--serif); color: var(--ink-2); margin-top: 10px; }
.rulerow:target, .rulerow.is-target { box-shadow: 0 -3px 0 var(--ink); border-bottom-color: var(--ink); }
.rulerow { scroll-margin-top: 24px; }
.rulerow .entry-copy { margin-top: 6px; }
.about.tight { margin-top: 80px; }

/* ---------- wide screens: entries on the full 12-column grid ---------- */
@media (min-width: 1100px) {
  .stacked-only { display: none; }
  .entry-wide { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .entry-wide > * { grid-column: 3 / span 7; }
  .entry-wide .entry-margin { grid-column: 1 / span 2; }
  .entry-wide .entry-ref { grid-column: 10 / span 3; grid-row: 1 / span 6; margin-top: 0; padding-top: .42em; }
  .entry-wide .rid { display: block; margin: 0 0 4px; }
}
/* short laptop screens: the first screen still ends on a whole row */
@media (min-width: 1100px) and (max-height: 820px) {
  :root { --mast: 64px; }
  .front { padding-top: 52px; }
  .front-tool { padding-top: 40px; }
  .standfirst { margin-top: 20px; }
  .title + .standfirst { margin-top: 14px; }
  .actions { margin-top: 28px; }
  .specimen { margin-top: 44px; }
  .cols-tool { margin-top: 36px; }
}
@media (min-width: 1100px) and (max-height: 680px) {
  :root { --mast: 56px; --s60: min(3.5rem, 5vw); }
  .front { padding-top: 30px; }
  .standfirst { margin-top: 14px; }
  .actions { margin-top: 20px; }
  .btn { height: 48px; }
  .specimen { margin-top: 28px; }
  /* the calculators: the closing total and its double rule stay on the first screen */
  .front-tool { padding-top: 20px; }
  .cols-tool { margin-top: 20px; }
  .stmt .row { padding: 8px 0; }
  .stmt .row.total { padding: 14px 0 12px; }
}

/* ---------- stacked: tablets and phones ---------- */
@media (max-width: 1099px) {
  :root { --s60: 3rem; --s40: 2.25rem; }
  .wrap { max-width: 728px; }
  .mast-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 28px; }
  .mast-tools { margin-left: auto; }
  .tools { gap: 0 28px; }
  .wide-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .front { display: flex; flex-direction: column; padding-top: 64px; }
  .front > .specimen { order: 2; margin-top: 56px; }
  .front > .refblock { order: 3; margin-top: 28px; padding-top: 0; }
  .reflist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
  .reflist > div.wide-row { display: none; }
  .reflist > div, .reflist > div:first-child, .reflist > div:last-child { border: 0; padding: 0; }
  .front-tool > .refblock { display: none; }
  .specimen-cap, .specimen-rest { display: block; }
  .sc-l::after { content: ": "; }
  .sc-d { display: inline; }
  .sc-d > span + span::before { content: ", "; }
  .sc-n::before { content: ". "; }
  .sc-n::after { content: "."; }
  .cols { display: flex; flex-direction: column; align-items: stretch; margin-top: 72px; }
  .cols > .col-fd { margin-top: 72px; }
  .col-ws { padding-right: 0; }
  .eg { display: none; }
  /* the calculators: the total first, then the lines to change, then how it was worked out */
  .cols-tool { margin-top: 44px; }
  .cols-tool > .col-fd, .cols-tool .result { display: contents; }
  .cols-tool > .col-fd > .head { order: 1; }
  .cols-tool .result > * { order: 4; }
  .cols-tool .result > .stmt-flag, .cols-tool .result > .stmt-total, .cols-tool .result > .stmt-note, .cols-tool .result > .empty { order: 2; }
  .cols-tool .result > .stmt-method { order: 4; }
  .cols-tool > .col-ws { order: 3; margin-top: 48px; }
  .cols-tool .result > .stmt-how { display: block; margin-top: 48px; }
  .cols-tool .result > .stmt-total { margin-top: 12px; }
  .cols-tool .result > .stmt-total .row.total { border-top: 0; padding-top: 10px; }
  .stmt-flag + .stmt { border-top: 0; }
  .checklist li { grid-template-columns: 2rem minmax(0, 1fr); }
  .ck-c { grid-column: 2; padding-top: 6px; }
  .about-row { display: block; }
  .about-row > h2 { padding: 0 0 8px; }
  .about-row > .about-ref { margin-top: 12px; padding-top: 0; }
  .imprint { display: block; }
  .fine { margin-top: 20px; }
  .imp-ref { margin-top: 20px; }
  .reg-heads { display: none; }
  .reg-index { border-bottom: 1px solid var(--ink); }
}

@media (max-width: 699px) {
  :root { --s18: 1.0625rem; --s20: 1.125rem; --s28: 1.5rem; --s40: 1.75rem; --s60: 2.375rem; --gap: 16px; }
  .stmt .total dd { font-size: 2.75rem; }
  .wrap { padding: 0 20px; }
  .mast-in { flex-wrap: wrap; gap: 0 16px; align-items: center; min-height: 0; }
  .mast .wordmark { font-size: 1.5rem; margin: 7px 0 4px; padding-top: 9px; }
  .reflist a { display: inline-block; padding: 11px 0; margin-top: -11px; margin-bottom: -11px; }
  .imp-mark .wordmark { padding-top: 16px; margin-top: -16px; }
  .lib { margin: 12px 0 0 auto; border: 0; text-decoration: underline; text-underline-offset: 3px; }
  .mast-tools { width: 100%; margin: 0; order: 3; }
  .tools { gap: 0 8px; width: 100%; justify-content: space-between; }
  .front, .front-tool { padding-top: 40px; }
  .lede h1 { line-height: 1.08; }
  .title { line-height: 1.14; }
  .standfirst { margin-top: 16px; }
  .title + .standfirst { margin-top: 14px; }
  .actions { margin-top: 24px; gap: 4px 28px; }
  .btn { width: 100%; }
  .front > .specimen { margin-top: 36px; }
  .front > .refblock { margin-top: 12px; }
  .reflist { display: block; }
  .reflist > div, .reflist > div:first-child, .reflist > div:last-child { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0 11px; border-bottom: 1px solid var(--line); }
  .reflist > div.wide-row { display: none; }      /* said beside the button instead */
  .reflist dd { text-align: right; margin: 0; }
  .reg-index { margin-top: 28px; line-height: 1.75; }      /* one wrapping line; the leading keeps the links apart for a thumb */
  .reg-index a { white-space: normal; }
  .cols, .cols > .col-fd, .below { margin-top: 64px; }
  .cols-tool { margin-top: 32px; }
  .cols-tool > .col-ws, .cols-tool .result > .stmt-how { margin-top: 40px; }
  .about { margin-top: 88px; }

  .line, .line.stack, .line.pair { grid-template-columns: 1.75rem minmax(0, 1fr); row-gap: 8px; padding: 14px 0 16px; column-gap: 8px; }
  .line .en { grid-column: 2; }
  .line.check { grid-template-columns: 1.75rem minmax(0, 1fr) auto; }
  .line.check .en { grid-column: 3; }
  .line.pair > .ln, .line.pair > .lb { grid-row: auto; }
  .line.pair > .sub, .line.pair > .en { grid-column: 2; justify-self: stretch; }
  .line.pair > .en + .sub { margin-top: 4px; }
  .worksheet input, .worksheet select { scroll-margin: 5.5rem 0 1.5rem; }      /* on a phone the label sits above its entry: focus brings up both */
  .part > summary { grid-template-columns: 1.75rem minmax(0, 1fr) auto; column-gap: 8px; }
  .part-note, .next { padding-left: 2.25rem; }

  .entry, .group { display: block; }
  .entry { padding: 20px 0 22px; }
  .entry-margin { padding: 0 0 6px; }
  .group-l { padding: 18px 0 2px; }
  .entry-foot { grid-template-columns: 10rem minmax(0, 1fr); }
  .fnote > summary { padding-left: 1.25rem; }
  .fnote > summary::before, .fnote[open] > summary::before { left: .1rem; }
  .fnote-b { padding-left: 1.25rem; }
  .link, .why > summary, .alt { min-height: 40px; display: inline-flex; align-items: center; }
  /* a link inside a sentence keeps the sentence's leading: its target reaches above and below the line instead */
  .ws-state .link { display: inline-block; min-height: 0; padding: 10px 0; margin: -10px 0; position: relative; }
  .about-ref a, .imp-links a { padding: 9px 0; }
  .about-ref a + a, .about-ref a + span, .imp-links a + a { margin-top: 0; }
  .stmt .row { gap: 16px; }
  .stmt dd, .stmt dd .nb { white-space: normal; }
  .stmt .aside { display: block; margin: 5px 0 0; white-space: nowrap; }
  .stmt .total.long dd { font-size: 2rem; }
  .stmt .total.xlong dd { font-size: 1.5rem; }
  .stmt dt { flex: 1 1 8rem; }
  .stmt .total { display: block; }
  .stmt .total dt { max-width: none; }
  .stmt .total dd { text-align: left; margin-top: 10px; }
  .checklist li { grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: 8px; }
  .rule-id, .rule-sev { display: inline; margin: 0 .8em 0 0; }
  .reg-group { padding-top: 40px; }
}

@media (max-width: 379px) {
  .line .en, .line.stack .en, .line.pair > .en { grid-column: 1 / -1; }      /* on the narrowest phones every entry takes the whole row, so the longest choices are not cut */
}
@media (max-width: 359px) {
  .tools { gap: 0 4px; }
  .tools button, .tools a { font-size: var(--s15); }
  .stmt .total.full dd { font-size: 2.375rem; }      /* a 14-character total, $10,000,000.00 and up, fits the narrowest column */
}

@media print {
  .tools, .lib, .actions, .skip, .next, .pa, .later-a, .entry-jump, .ws-state { display: none !important; }
  body { background: #fff; }
  .cols { display: block; }
  .col-fd { margin-top: 32px; }
  ::details-content { content-visibility: visible !important; display: block !important; height: auto !important; }
  @supports selector(::details-content) { .part .ps { display: none !important; } }
}