/* The free checker, on the Casient design system.
 *
 * The tokens, the type scale and the three faces below are the same ones the
 * Casient site uses (casient-web/src/styles/global.css). Not a resemblance —
 * the same values. This is the first surface a KNX integrator meets, and the
 * work of making them feel they are already inside something considered is
 * mostly the work of not looking like a different product.
 *
 * Two plates, both from that system:
 *
 *   BRASS on warm near-black, everywhere a person is being spoken to.
 *   INSTRUMENT (teal on cold near-black) for readings — the site reserves it
 *     for evidence pages, and a report about someone's project IS an evidence
 *     page. Keeping the two apart is what stops every number on the page
 *     shouting at the same volume as the headline.
 *
 * The faces are self-hosted. The Casient site's own note says a
 * privacy-positioned brand should not phone Google on every page load, and of
 * every page we serve, this is the one that promises to delete your file.
 *
 * Dark is the art direction, not a preference: it is the brand's own commitment
 * and the reason there is no prefers-color-scheme block here. The one light
 * surface in the whole tool is the handover document, which is a sheet of paper
 * that happens to be on screen, and which carries its own light tokens.
 */

/* SHARED TYPE, SPLIT GROUND.
 *
 * The site and this tool now set the same two faces. The GROUND stays
 * different on purpose: the site is a document and sits on a drawing print;
 * this is an instrument and sits on near-black. Sharing the type makes the
 * handoff at the upload read as a transition -- you have left the document and
 * entered the machine -- rather than as two unrelated products.
 *
 * osifont is the open implementation of ISO 3098, "Technical product
 * documentation -- Lettering": the standard an engineering drawing is required
 * to use. It is 12.5 KB subset, and it replaces Cormorant Garamond, which was
 * a light display serif selling aspiration to an audience that is lost
 * instantly by marketing language.
 *
 * It is a LETTERING STANDARD, not a text face: monolinear, one weight. So
 * hierarchy comes from size, spacing and rules, never from weight, which would
 * be synthesised and would look it. Literata carries running prose.
 */
@font-face {
  font-family: "osifont";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/osifont.woff2") format("woff2");
}
@font-face {
  font-family: "Literata Variable";
  font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("/fonts/literata.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* Ground. Warm near-black, never pure black. */
  --ink:        #0A0907;
  --raised:     #12100D;
  --card:       #17140F;
  --line:       #241F18;
  --line-2:     #322A20;

  /* Type on ground. */
  --bone:       #F3EDE2;
  --bone-2:     #CFC6B6;
  --bone-3:     #9A9082;
  --bone-4:     #8A8173;

  /* Brass. The one accent. */
  --brass:      #E4553F;
  --brass-lit:  #F07A66;
  --brass-deep: #A82A1E;

  /* Instrument. Readings only. */
  --signal:     #4FD1C0;
  --hold:       #C9A227;
  --alarm:      #CF6A5F;
  --instr-bg:   #080B0D;
  --instr-bg-2: #0A0F12;
  --instr-line: #16242B;
  --instr-text: #A8BDC4;
  --instr-dim:  #6B8792;

  --display: "osifont", "Isonorm", ui-monospace, monospace;
  --sans: "Literata Variable", "Iowan Old Style", Georgia, serif;
  --mono: "osifont", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* DRAWING TOKENS. The diagrams are built in JS and can only name tokens, so
   * every token they name has to exist in both plates or the SVG silently
   * renders black-on-black — `stroke: var(--undefined)` computes to `none` and
   * `fill:` to inherited black, which is exactly what used to happen here.
   * These four are the diagrams' whole vocabulary; `.doc` redefines all of
   * them for paper. */
  --accent:  var(--brass);
  --rule:    var(--line-2);
  --surface: var(--raised);
  --track:   var(--line);

  /* Severity, likewise named by markup that cannot see this file. */
  --chip: var(--line-2);
  --warn: var(--hold);
  --bad:  var(--alarm);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding-block: 40px 64px;
  padding-inline: 20px;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--brass); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 1px; }

/* `hidden` is only a default display:none, so any rule that sets display beats
   it. Every page here toggles visibility with the attribute, so it has to win. */
[hidden] { display: none !important; }

.wrap { max-width: 860px; margin: 0 auto; }
.wrap.wide { max-width: 1000px; }

/* ── navigation ────────────────────────────────────────────────────────────
   A wordmark and four places. The tool is small enough that hiding any of them
   behind a menu would be affectation. */

.nav {
  display: flex; align-items: baseline; gap: 8px 18px; flex-wrap: wrap;
  margin-bottom: 40px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.nav .mark {
  font-family: var(--sans); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.22em; color: var(--brass); text-decoration: none;
  margin-right: 4px;
}
.nav a {
  font-size: 13px; color: var(--bone-4); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--bone-2); }
.nav a.here { color: var(--bone); border-bottom-color: var(--brass); }
.nav a.right { margin-left: auto; }

/* Who is signed in, and the way out.
 *
 * In the navigation on every page rather than only on the account card,
 * because "how do I sign out" is a question people ask from wherever they
 * happen to be - and until this existed the only answer was to delete the
 * whole account. */
.nav .session { margin-left: auto; display: flex; align-items: baseline; gap: 12px; font-size: 12px; }
.nav .session:empty { display: none; }
.nav .session .who { color: var(--bone-4); }
.nav .session .who b { color: var(--bone-2); font-weight: 600; }
.nav .session a, .nav .session button { color: var(--bone-4); }
.nav .session button {
  font: inherit; font-family: var(--sans); font-size: 12.5px;
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.nav .session button:hover { color: var(--brass); }
.nav a.right + .session { margin-left: 0; }

/* ── page heads ────────────────────────────────────────────────────────────
   The display face carries the question; the sans carries the answer. */

h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 5vw, 42px); line-height: 1.12;
  letter-spacing: -0.005em; text-wrap: balance;
  margin: 0 0 12px;
}
.lede { color: var(--bone-2); font-size: 17px; max-width: 60ch; margin: 0 0 8px; }
.lede em { color: var(--brass); font-style: normal; }
.fine { color: var(--bone-4); font-size: 13px; max-width: 66ch; margin: 10px 0 0; }

h2 {
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass-deep);
  margin: 40px 0 14px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
h3 { font-size: 14.5px; font-weight: 600; margin: 24px 0 6px; }
.sub { color: var(--bone-4); font-size: 13px; margin: -6px 0 14px; max-width: 68ch; }

a { color: var(--brass); }
a:hover { color: var(--brass-lit); }

/* ── surfaces ──────────────────────────────────────────────────────────────
   Border, fill and rule are spent by role rather than stamped on every block:
   .panel is a thing you act on, .plate is a thing you read. */

.panel {
  background: var(--raised); border: 1px solid var(--line);
  border-radius: 3px; padding: 24px;
}
.plate {
  background: var(--instr-bg); border: 1px solid var(--instr-line);
  border-radius: 3px; padding: 20px 22px;
  font-variant-numeric: tabular-nums;
}

/* ── controls ──────────────────────────────────────────────────────────── */

label.field {
  display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px;
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-4);
}
input[type=text], input[type=email], input[type=password], input[type=date], textarea, select {
  font: inherit; font-size: 14.5px; font-weight: 400;
  color: var(--bone); background: var(--ink);
  border: 1px solid var(--line-2); border-radius: 2px; padding: 10px 11px;
  text-transform: none; letter-spacing: 0;
}
input:hover, textarea:hover { border-color: var(--brass-deep); }
textarea { min-height: 70px; resize: vertical; }

.go {
  font: inherit; font-family: var(--sans); font-weight: 600; font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--ink); background: var(--brass);
  border: 1px solid var(--brass); border-radius: 2px;
  padding: 11px 20px; cursor: pointer;
}
.go:hover { background: var(--brass-lit); border-color: var(--brass-lit); }
.go:disabled { opacity: 0.45; cursor: default; }
.go.quiet { color: var(--brass); background: transparent; }
.go.quiet:hover { color: var(--ink); background: var(--brass); }
.go.block { width: 100%; }

.link {
  font: inherit; font-size: 13px; color: var(--brass);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.del {
  font: inherit; font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--alarm); background: none;
  border: 1px solid color-mix(in srgb, var(--alarm) 55%, transparent);
  border-radius: 2px; padding: 7px 13px; cursor: pointer;
}
.del:hover { color: var(--ink); background: var(--alarm); border-color: var(--alarm); }

/* ── messages ──────────────────────────────────────────────────────────── */

.err { color: var(--alarm); font-size: 13.5px; margin-top: 12px; }
.ok  { color: var(--signal); font-size: 13.5px; margin-top: 12px; }
.state { font-size: 13.5px; color: var(--bone-3); margin: 14px 0; min-height: 20px; }
.state.err { color: var(--alarm); }

/* ── readings ──────────────────────────────────────────────────────────────
   Instrument plate. Mono digits, teal, on the colder ground — so a number is
   visibly a measurement and not a headline. */

.cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 1px; background: var(--instr-line); border: 1px solid var(--instr-line); border-radius: 3px; overflow: hidden; }
.cell { background: var(--instr-bg); padding: 14px 15px; }
.cell b {
  display: block; font-family: var(--mono); font-weight: 400;
  font-size: 23px; line-height: 1.1; color: var(--instr-text);
  font-variant-numeric: tabular-nums;
}
.cell span {
  display: block; margin-top: 5px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--instr-dim);
}
.cell.lit b { color: var(--signal); }
.cell.warn b { color: var(--hold); }

/* ── tables ────────────────────────────────────────────────────────────── */

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-4);
  padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.mono, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.mono { color: var(--brass); white-space: nowrap; }
td.num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

/* ── findings ──────────────────────────────────────────────────────────────
 *
 * Severity is a left rule, not a coloured panel: a page of red blocks reads as
 * alarm, and most of these are ordinary work an integrator can quote for.
 *
 * UNSCOPED, AND IT HAS TO BE. These started inside report.html under `.doc`,
 * which was fine for as long as the handover document was the only thing that
 * showed a finding. The free check now shows the same list, and that page is on
 * the dark plate — so the rules live here and both plates get them, exactly as
 * tables and figures already do. `.doc` redefines the tokens; nothing below
 * needs a second implementation.
 */
.rec { border-left: 2.5px solid var(--chip); padding: 7px 0 7px 12px; margin: 9px 0; }
.rec-high { border-left-color: var(--bad); }
.rec-medium { border-left-color: var(--warn); }
.rec-low { border-left-color: var(--chip); }
.rec-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.rec-head b { font-size: 1.04em; }
.rec-ev { margin-top: 3px; color: var(--bone-2); }
.rec-cost { margin-top: 3px; color: var(--bone-3); }
/* The remedy, where the finding arrived carrying one. Marked with the accent
   rather than another grey line, because it is the only part of a finding that
   tells you what to actually do. */
.rec-fix { margin-top: 3px; color: var(--bone-2); }
.rec-fix em { font-style: normal; color: var(--brass); }
/* The addresses a finding is about. Spaced apart, because run together at this
   size they read as one long address rather than as eight. */
.rec-sub { margin-top: 4px; font-size: 0.82em; color: var(--bone-4); }
.rec-sub code { font-family: var(--mono); margin-right: 10px; white-space: nowrap; }
.tag {
  font-family: var(--sans); font-size: 0.66em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  border: 1px solid var(--chip); border-radius: 999px;
  padding: 1.5px 7px; color: var(--bone-3); white-space: nowrap;
}
.tag-high { border-color: var(--bad); color: var(--bad); }
.tag-medium { border-color: var(--warn); color: var(--warn); }
.tag-do { border-color: var(--signal); color: var(--signal); }
.warn-line { border-left: 2.5px solid var(--warn); padding-left: 11px; }

/* ── the sales pitch ───────────────────────────────────────────────────────
   Deliberately the only place on the page that uses the display face at body
   size. It has to read as us talking, not as another finding. */

.pitch {
  margin-top: 44px; padding: 28px 30px;
  background: linear-gradient(160deg, var(--card), var(--raised));
  border: 1px solid var(--line-2); border-left: 2px solid var(--brass);
  border-radius: 3px;
}
.pitch h2 { margin-top: 0; border: none; padding: 0; color: var(--brass); }
.pitch .say {
  font-family: var(--display); font-weight: 300;
  font-size: 22px; line-height: 1.34; color: var(--bone);
  margin: 0 0 16px; max-width: 42ch; text-wrap: balance;
}
.pitch p { color: var(--bone-3); font-size: 14px; max-width: 64ch; margin: 0 0 12px; }
.pitch ul { margin: 0 0 18px; padding: 0; list-style: none; }
.pitch li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  color: var(--bone-2); font-size: 14px; max-width: 62ch;
}
.pitch li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; border: 1px solid var(--brass); border-radius: 50%;
}
.pitch li b { color: var(--bone); font-weight: 600; }
.pitch .cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 4px; }

/* A link that acts as a button. Lives here rather than on the page that first
   used it: the pitch module emits one, and a class the shared module depends on
   belongs in the shared sheet or it renders unstyled wherever it is reused. */
.doclink {
  display: inline-block; text-decoration: none;
  font-family: var(--sans); font-weight: 600; font-size: 13.5px;
  color: var(--ink); background: var(--brass);
  border: 1px solid var(--brass); border-radius: 2px; padding: 11px 18px;
}
.doclink:hover { background: var(--brass-lit); color: var(--ink); }
.pitch .aside { color: var(--bone-4); font-size: 12.5px; }

/* ── footer ────────────────────────────────────────────────────────────── */

footer.site {
  margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--bone-4); font-size: 12.5px;
}

@media (max-width: 560px) {
  body { padding-block: 28px 48px; }
  .panel { padding: 18px; }
  h2 { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── the paper plate ───────────────────────────────────────────────────────
 *
 * The one light surface in the tool. Two pages produce a document that gets
 * printed and handed to somebody — a handover pack and a change report — and a
 * document is a sheet of paper whether or not it is currently on a screen.
 *
 * It redefines the tokens INSIDE its own scope rather than using a separate set
 * of names, so every component above (tables, figures, rules) renders correctly
 * on paper without a second implementation.
 *
 * WHICH FACE CARRIES THE PROSE. Literata, not osifont — which is what the note
 * at the top of this file already says ("Literata carries running prose").
 * osifont is a LETTERING standard: monolinear, one weight, drawn to be
 * unambiguous on a drawing at 2.5 mm, and it is exhausting for four hundred
 * words of explanation set at document size. It keeps the work it is good at —
 * the title, the addresses, the figures, the diagram labels — where its
 * evenness reads as an instrument and its single weight is no loss.
 *
 * WHY THE BODY IS 12px. That is 9 pt, the size a customer-facing O&M manual or
 * a commissioning pack is set at. It went 15px → 13px → 12px over two passes:
 * 15px is 11.25 pt, which is large-print, and 13px still read as a web page
 * printed out rather than as a document.
 *
 * ONE MEASURE FOR EVERYTHING. The page margins set the measure, and prose runs
 * to the same edge the tables and diagrams do. A paragraph capped well short of
 * the tables beside it is the single thing that made this look assembled rather
 * than set: the eye reads the mismatch as two documents interleaved. 84ch is a
 * ceiling for unusually wide paper, not the working width — on A4 the text
 * reaches the margin.
 */

.doc {
  --ink:      #16191B;
  --raised:   #F7F8F8;
  --card:     #FFFFFF;
  --line:     #E2E5E4;
  --line-2:   #CDD2D1;
  --bone:     #16191B;
  --bone-2:   #3A4145;
  --bone-3:   #5D6669;
  --bone-4:   #767E81;
  /* Light ground, so the site's own redline rather than the lifted one used
     on the instrument. Same accent, correct contrast for white. */
  --brass:      #A82A1E;
  --brass-lit:  #8E2318;
  --brass-deep: #A82A1E;
  --signal:   #1F6F5C;
  --alarm:    #A8392E;

  /* The drawing vocabulary, on paper.
   *
   * --rule is a mid grey rather than the hairline used for table rules: a
   * connector in a diagram has to survive an office laser printer, and #E2E5E4
   * does not. --track is the unfilled part of a bar, and it is what lets a
   * short bar still read as a proportion rather than as a stub. */
  --accent:  #A82A1E;
  --rule:    #97A0A2;
  --surface: #FFFFFF;
  --track:   #EDEFEF;

  /* Severity, in the document's own palette rather than the stock web red and
   * orange that used to arrive through var() fallbacks. Both are dark enough
   * to set type in, which the stock pair was not. */
  --chip: #CDD2D1;
  --warn: #92600F;
  --bad:  #A8392E;

  background: #fff; color: var(--ink);
  border-radius: 3px; padding: 44px 50px; margin-top: 28px;
  font-family: var(--sans); font-weight: 400;
  font-size: 12px; line-height: 1.45;
  counter-reset: sec;
}
.doc:empty { display: none; }

.doc h1 {
  font-family: var(--display); font-weight: 400;
  font-size: 21px; line-height: 1.18; margin: 0 0 4px; color: var(--ink);
}

/* Numbered sections. A handover pack gets referred to on the phone — "the
   table in section 4" only works if the sections are numbered, and a counter
   is the only way to number them that survives a section being absent. */
.doc h2 {
  font-family: var(--sans); font-weight: 600;
  font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brass); margin: 21px 0 8px;
  padding-bottom: 4px; border-bottom: 1px solid var(--line-2);
}
.doc h2::before {
  counter-increment: sec; content: counter(sec) "\00a0\00a0";
  font-family: var(--mono); color: var(--bone-4);
}
.doc h2.unnumbered::before { counter-increment: none; content: none; }
/* Subheadings carry more space above than below, so they attach to what they
   introduce rather than floating between two blocks of equal weight — which is
   most of what makes a long document feel assembled rather than set. */
.doc h3 {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; margin: 17px 0 4px;
}
.doc p { margin: 0 0 7px; max-width: 84ch; }
.doc .lead { font-size: 13px; color: var(--bone-2); }
.doc .sub { font-family: var(--sans); font-size: 10.5px; color: var(--bone-3); }
.doc table { font-family: var(--sans); font-size: 10.5px; }
.doc th { font-size: 8px; letter-spacing: 0.1em; padding: 5px 8px 4px; color: var(--bone-4); border-bottom: 1px solid var(--line-2); }
.doc td { padding: 3.5px 8px; }
.doc td.mono, .doc .mono { font-family: var(--mono); }
.doc td.mono { color: var(--brass); }
.doc code { font-family: var(--mono); font-size: 0.95em; color: var(--brass); }
.doc .muted { color: var(--bone-4); }
.doc .empty { color: var(--bone-3); font-style: italic; }
.doc footer {
  margin-top: 24px; padding-top: 10px; border-top: 1px solid var(--line-2);
  font-family: var(--sans); font-size: 8.5px; color: var(--bone-3);
}

/* Contents. Not a table of contents with page numbers — a browser cannot know
   them — but the list a reader needs to decide whether this document contains
   the thing they are looking for, which is most of what a contents page is
   for. Two columns because it is a list of short lines. */
.doc .toc { columns: 2; column-gap: 26px; margin: 4px 0 2px; }
.doc .toc div {
  break-inside: avoid; display: flex; align-items: baseline; gap: 9px;
  font-size: 10.5px; line-height: 1.7; color: var(--bone-2);
}
.doc .toc div i { font-family: var(--mono); font-style: normal; color: var(--bone-4); min-width: 11px; }

/* Figures on paper: outlined rather than filled, because a solid tint costs
   ink and prints as grey mud on most office printers. The track is narrow
   enough that six fit one row of A4, which is the count this document
   actually emits — at the old 118px they wrapped 5 + 1. */
.doc .figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 7px; margin: 11px 0; }
.doc .fig { border: 1px solid var(--line-2); border-radius: 2px; padding: 7px 9px; }
.doc .fig b { display: block; font-family: var(--mono); font-size: 16px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.doc .fig span { font-family: var(--sans); font-size: 7.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bone-3); }
.doc .fig.add b { color: var(--signal); }
.doc .fig.del b { color: var(--alarm); }
.doc .fig.warn { border-color: var(--brass); }
.doc .fig.warn b { color: var(--brass); }

.doc .note { background: var(--raised); border-left: 2px solid var(--brass); padding: 9px 12px; margin: 10px 0; font-size: 11.5px; }
.doc .breaking { background: #FDF3F1; border-left: 2px solid var(--alarm); padding: 10px 13px; margin: 11px 0; }
.doc .breaking b { color: var(--alarm); }
.doc .breaking ul { margin: 6px 0 0; padding-left: 16px; }
.doc .breaking.clear { background: #F1F7F3; border-left-color: var(--signal); }
.doc .breaking.clear b { color: var(--signal); }

/* Diagrams. Labels are set in the prose face so a diagram reads as part of the
   document; addresses and figures inside them keep the lettering face, which
   is set per-class by the diagram itself. */
.doc svg { display: block; max-width: 100%; }
.doc svg text { font-family: var(--sans); fill: var(--ink); }

/* Diagram labels.
 *
 * SCOPED UNDER `.doc svg` ON PURPOSE. A bare `.t-dim { fill: … }` loses to
 * `.doc svg text { fill: var(--ink) }` on specificity, which is why every label
 * in every diagram used to print at the same full-ink weight however it was
 * classed — the hierarchy was written and then silently discarded. */
.doc svg .t-line { font-size: 11px; font-weight: 700; }
.doc svg .t-dev  { font-size: 10px; fill: var(--bone-2); }
.doc svg .t-addr { font-family: var(--mono); font-size: 9.5px; fill: var(--brass); }
.doc svg .t-dim  { font-size: 9.5px; fill: var(--bone-3); }
.doc svg .t-edge { font-size: 8.5px; font-weight: 600; letter-spacing: 0.09em;
                   text-transform: uppercase; fill: var(--bone-4); }
.doc svg .t-box  { font-size: 12.5px; font-weight: 600; }
.doc svg .t-num  { font-family: var(--mono); font-size: 11.5px; fill: var(--ink); }
.doc svg .t-plan-label { font-family: var(--mono); font-size: 10.5px; fill: var(--bone-2); }
.doc figure { margin: 10px 0 14px; }
.doc figure figcaption {
  font-family: var(--sans); font-size: 9.5px; color: var(--bone-3);
  margin-top: 6px; max-width: 92ch;
}

/* ── print ─────────────────────────────────────────────────────────────────
 * A heading stranded at the foot of a page, a table row split across two, and
 * a column of figures whose header only appears on the first page are the
 * three things that make a generated document look generated. */

/* NO RUNNING HEAD, AND WHY NOT.
 *
 * A handover pack gets split and filed a page at a time, so a band carrying the
 * client and the reference onto every sheet is worth having. There is no way to
 * produce one that can be relied on. Chrome implements no @page margin boxes,
 * which rules out both a running head and page numbers; the usual substitute is
 * a `position: fixed` element, which Chrome does repeat per page — but in
 * testing here it landed at the top of every page under one offset, at the
 * bottom under another, and on the cover page under neither. A band that may
 * appear anywhere is worse than no band, so the identifying detail stays on the
 * cover and in the closing footer, and the sections are numbered instead.
 *
 * Revisit if Chrome ships @page margin boxes.
 */

@page { size: A4; margin: 16mm 18mm 16mm; }
@media print {
  /* THE PAPER IS WHITE. ALL OF IT.
   *
   * `color-scheme: dark` on :root makes the UA paint the canvas #121212, and
   * that colour is chosen before any background of ours propagates up from
   * body. Printing with backgrounds on — which is the default for Chrome's
   * own Save as PDF — therefore filled every sheet near-black and then laid the
   * document's white panel on top of it, leaving a black border in the margins
   * on all four sides of every page.
   *
   * The dark plate is for the screen. On paper the scheme is light, and both
   * html and body are told so explicitly rather than relying on propagation. */
  :root { color-scheme: light; }
  html, body { background: #fff !important; }

  body { color: #16191B; padding: 0; }
  .noprint, .nav, .panel, footer.site, .pitch { display: none !important; }
  .wrap { max-width: none; }
  .doc { padding: 0; margin: 0; border-radius: 0; }

  /* A long table that breaks across pages repeats its own header, so the
     second page of a device inventory is still readable as one. */
  thead { display: table-header-group; }
  h2, h3 { break-after: avoid; }
  .doc h1, .doc .lead { break-after: avoid; }
  tr, .fig, .note, .breaking, .rec, .room, .doc figure, .doc .sign { break-inside: avoid; }
  .doc svg { break-inside: avoid; }
  p, li { orphans: 3; widows: 3; }
  .page-break { break-before: page; }
}