/* SIM Framework Concept Demo stylesheet.
 *
 * Styles all three surfaces: Description, Science Reporting, Tracer. Renamed
 * from tracer.css in Phase 4 Commit 1b, when it stopped belonging to one page.
 *
 * THEME: palette taken from raminderpalsingh.com (custom properties read from
 * the live page 2026-07-26). The site is dark; this matches it. Semantic tiles
 * map onto the site's accents: accent = note, warm = warn, rose = defect,
 * green = ok. Nothing below the :root block hardcodes a color except the print
 * block, which deliberately inverts.
 *
 * FONTS: 'DM Sans' and 'DM Serif Display' are SELF-HOSTED from web/fonts and
 * declared below. This page still loads nothing from a third party -- a
 * traceability artifact whose appearance depends on an external fetch sits
 * badly beside the byte-pinned integrity the rest of the app enforces -- but
 * the families are now actually present rather than merely named. Before this,
 * neither was installed on a typical reader's machine and every heading fell
 * back to Georgia. The faces come from pinned npm packages, not a font CDN;
 * web/fonts/PROVENANCE.txt records versions and digests, and LICENSE-OFL.txt
 * carries the SIL OFL 1.1 text that redistribution requires.
 *
 * TYPE SCALE: display 42 / section 26 / subsection 17 / body 16.5 / caption
 * 13.5. Before this rewrite the page dropped from a 25px serif h2 straight to
 * a 12.5px uppercase grey h3, with nothing between, which is what made every
 * surface read flat.
 *
 * TWO h3 TREATMENTS, DELIBERATELY. On the Description and Reporting surfaces
 * an h3 is a top-level section head and gets the subsection size. Inside a
 * .claim it is a field label under an h2 claim readout -- 58 of the 78 h3
 * elements in the app are of that second kind -- and it keeps a compact label
 * treatment so it stays subordinate to the claim containing it. A single
 * treatment would be wrong for whichever kind it was not built for. Nothing
 * asserts this in the probe suite; it is a convention a future author can
 * break silently, and that cost is accepted rather than hidden.
 *
 * MEASURE: prose is capped at --measure, granted per element rather than
 * globally, so the provenance tables, the key/value rows and the workflow
 * diagram keep the full column. Running body copy to the old 1200px wrap
 * produced roughly 150-character lines, about double what is readable.
 *
 * THE UNIT IS em, NOT ch, AND THAT WAS A CORRECTION. A first pass used 68ch
 * on the assumption that ch means one character. It does not: ch is the
 * advance width of the digit zero, and DM Sans has wide figures, so 68ch
 * resolved to about 765px -- roughly 95 characters, not 68. em is predictable
 * against the declared font size. 40em at 16.5px is 660px, near 80 characters.
 *
 * The wrap is 900px rather than 1200px so that the measured column and the
 * container it sits in are close in width. At 1200px every card ran about
 * 400px wider than the prose inside it, which reads as a broken layout rather
 * than as a margin. At 900px the digest tables still hold a 64-character
 * sha256 beside its filename without wrapping, which is the constraint that
 * set the floor.
 *
 * PRINT: a gate committee reads on paper. The print block inverts to light,
 * reveals every panel regardless of which tab is active, and drops chrome. The
 * surface nav is kept in print, flattened to text, because the page heading
 * names the system and not which of the three surfaces is on the paper.
 */

/* --- self-hosted faces ------------------------------------------------------
   latin subset only. Every character these surfaces render is latin, and the
   latin-ext, cyrillic and greek subsets would roughly triple the payload for
   nothing. swap rather than block: the text is the artifact, and it must never
   be invisible while a local file loads. */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-400-normal.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-500-normal.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-600-normal.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-700-normal.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-latin-400-normal.woff2") format('woff2');
}

:root {
  --bg:            #06080f;
  --bg-card:       #0c1019;
  --bg-raise:      #121826;
  --border:        #1a1f2e;
  --border-light:  #252b3b;
  --text:          #e2e5ea;
  --text-bright:   #f1f3f5;
  --muted:         #8a919c;
  --accent:        #38bdf8;
  --accent-green:  #34d399;
  --accent-rose:   #fb7185;
  --accent-violet: #a78bfa;
  --accent-warm:   #f59e0b;

  --tint-note:   rgba(56, 189, 248, 0.09);
  --tint-warn:   rgba(245, 158, 11, 0.10);
  --tint-defect: rgba(251, 113, 133, 0.10);
  --tint-ok:     rgba(52, 211, 153, 0.09);

  --radius:    14px;
  --radius-sm: 8px;
  --max-width: 900px;
  --measure:   40em;

  --font-body:    'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'DM Serif Display', Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* Diagram-scoped palette. The workflow SVG references ONLY these, never the
     site variables directly, so the print block can invert the diagram without
     touching every other element that uses --text or --bg-card. */
  --dia-bg:     var(--bg-card);
  --dia-box:    var(--bg-raise);
  --dia-line:   var(--border-light);
  --dia-text:   var(--text-bright);
  --dia-muted:  var(--muted);
  --dia-accent: var(--accent);
  --dia-frozen: var(--accent-violet);
  --dia-human:  var(--accent-green);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Wide by intent: the provenance tables, key/value rows and the diagram need
   it. Prose is capped separately, below. */
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 34px 26px 104px; }

/* --- the Description surface's left index rail -------------------------------
   SCOPED. Only index.html emits .wrap-docs and .doclayout, so every rule here
   is inert on the Science Reporting and Tracer surfaces -- they keep plain
   .wrap and their bytes do not move.

   Colors go through variables. The stylesheet's stated invariant is that
   nothing outside :root and the print block hardcodes one, and N14e enforces
   that on the generated diagram; honoring it here keeps the rule true of the
   file rather than only of the part that is checked.

   Paragraph width is NOT affected: line 198 caps p/blockquote/li at
   var(--measure), so widening the wrapper widens the layout and not the
   prose. */
.wrap-docs { max-width: 1240px; }

/* --- the question box, Description surface only ------------------------------
   Scoped to .askbox / .askans, which only index.html emits. Colors go through
   variables: the stylesheet's invariant is that nothing outside :root and the
   print block hardcodes one. */
.askbox { display: flex; gap: 10px; margin: 18px 0 12px; }
.askbox input { flex: 1 1 auto; min-width: 0; padding: 11px 14px;
                font-family: var(--font-body); font-size: 15px;
                color: var(--text-bright); background: var(--bg-raise);
                border: 1px solid var(--border-light);
                border-radius: var(--radius-sm); }
.askbox input:focus { outline: none; border-color: var(--accent); }
.askbox input:disabled { opacity: 0.6; }
.askbox button { flex: 0 0 auto; padding: 11px 22px; font-family: var(--font-body);
                 font-size: 15px; font-weight: 600; cursor: pointer;
                 color: var(--bg); background: var(--accent);
                 border: 1px solid var(--accent);
                 border-radius: var(--radius-sm); }
.askbox button:disabled { cursor: default; opacity: 0.55; }
.askans { white-space: pre-wrap; font-size: 15.5px; line-height: 1.7;
          color: var(--text); max-width: var(--measure); }
.askans:not(:empty) { margin: 14px 0 4px; }

@media (max-width: 620px) {
  .askbox { flex-direction: column; }
}


.doclayout { display: grid; grid-template-columns: 232px minmax(0, 1fr);
             gap: 44px; align-items: start; }
.doclayout > main { min-width: 0; }

.docnav { position: sticky; top: 26px; align-self: start;
          border-left: 2px solid var(--border);
          max-height: calc(100vh - 60px); overflow-y: auto; }
.docnav-head { font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em;
               text-transform: uppercase; color: var(--muted);
               padding: 0 0 12px 17px; }
.docnav a { display: block; padding: 7px 4px 7px 17px; font-size: 14px;
            line-height: 1.45; color: var(--muted); text-decoration: none;
            border-left: 2px solid transparent; margin-left: -2px; }
.docnav a:hover, .docnav a:focus { color: var(--text-bright);
            border-left-color: var(--accent); }

/* Below this width the rail costs more than it gives: the grid collapses and
   the contents card, which carries the same ten entries WITH their
   descriptions, is the only navigation. Nothing is lost by hiding it. */
@media (max-width: 1040px) {
  .wrap-docs { max-width: var(--max-width); }
  .doclayout { display: block; }
  .docnav { display: none; }
}


/* --- type scale ------------------------------------------------------------
   Four steps with real distance between them. The old scale ran 34 / 25 / 12.5
   and put the largest gap in the wrong place. */

h1 { font-family: var(--font-display); font-size: 42px; font-weight: 400;
     line-height: 1.08; margin: 0 0 10px; color: var(--text-bright);
     letter-spacing: -0.02em; }

h2 { font-family: var(--font-display); font-size: 26px; font-weight: 400;
     line-height: 1.2; margin: 0 0 18px; color: var(--text-bright);
     letter-spacing: -0.01em; }

/* Section head. Sentence case: the source text is already sentence case and
   only text-transform was shouting it. */
h3 { font-size: 17px; font-weight: 600; line-height: 1.35;
     margin: 0 0 14px; color: var(--text-bright);
     letter-spacing: 0; text-transform: none; }

h4 { font-size: 14.5px; font-weight: 600; line-height: 1.4;
     margin: 0 0 9px; color: var(--text-bright); letter-spacing: 0.005em; }

/* Inside a claim an h3 is a field label beneath an h2 readout, not a section
   head. Compact and lettered, but brighter and better spaced than the old
   global treatment it replaces. */
.claim h3 { font-size: 12px; font-weight: 600; text-transform: uppercase;
            letter-spacing: 0.12em; color: var(--muted);
            margin: 0 0 11px; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--text-bright); }
a:focus-visible, .tab:focus-visible, summary:focus-visible,
button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* --- prose measure ---------------------------------------------------------
   Applied per element rather than to the wrap, so tables, the key/value grid
   and the diagram keep the full width they were given it for. */
p, .sub, .fine, blockquote, ol.honesty li, ul li { max-width: var(--measure); }

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

.sub { margin: 0 0 26px; color: var(--muted); font-size: 17px;
       line-height: 1.55; }
.fine { font-size: 13.5px; line-height: 1.6; color: var(--muted);
        margin: 12px 0 0; }

code, .mono { font-family: var(--font-mono); font-size: 0.87em; }
code { background: var(--bg-raise); color: var(--text-bright);
       padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); }
.wrap-any { overflow-wrap: anywhere; }

/* The six verdict-count elements on the Reporting surface, one per claim.
   These had NO rule at all before this rewrite and were rendering as browser
   defaults; nothing in the probe suite asserts presentation, so nothing caught
   it. Confirmed to be a div, so vertical margins are safe to set. */
.counts { font-family: var(--font-mono); font-size: 13.5px;
          color: var(--muted); letter-spacing: 0.01em;
          margin: 4px 0 16px; }

/* --- containers ------------------------------------------------------------
   More air, less border. The old card sat at 22/24 padding with an 18px gap,
   which produced an undifferentiated stack. */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 30px;
  margin: 0 0 26px;
}
.card > h3:first-child, .card > h2:first-child { margin-top: 0; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
         margin-bottom: 26px; align-items: start; }
/* Masthead tiles laid two-up. Their own vertical margins would fight the grid
   gap and leave the row taller than the tiles inside it. */
.grid2 > .tile { margin: 0; }
/* Equal height for the masthead pair. .grid2 aligns to start everywhere else,
   which is correct for cards carrying different amounts of content, but a
   ragged bottom edge on two tiles sitting side by side reads as a mistake
   rather than as a choice. Scoped to the header so the Tracer's other grids
   keep their existing behavior. */
.site-head .grid2 { align-items: stretch; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; gap: 20px; } }

.kv { display: flex; gap: 16px; padding: 8px 0;
      border-bottom: 1px solid var(--border); }
.kv:last-child { border-bottom: 0; }
.kv .k { flex: 0 0 200px; color: var(--muted); font-size: 13px;
         line-height: 1.5; padding-top: 3px; letter-spacing: 0.01em; }
.kv .v { flex: 1 1 auto; overflow-wrap: anywhere; color: var(--text-bright);
         font-size: 15.5px; }
@media (max-width: 680px) { .kv { flex-direction: column; gap: 3px; }
                            .kv .k { flex: none; } }

blockquote {
  margin: 16px 0; padding: 15px 20px;
  background: var(--bg-raise); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-bright); font-size: 16px;
}
blockquote.defective { border-left-color: var(--accent-rose);
                       font-family: var(--font-mono); font-size: 13px;
                       color: var(--text); }

.tile { border-radius: var(--radius-sm); padding: 15px 18px; margin: 18px 0;
        border-left: 3px solid var(--muted); background: var(--bg-raise); }
.tile-head { font-weight: 600; margin-bottom: 6px; color: var(--text-bright);
             font-size: 15.5px; line-height: 1.4; }
.tile-body { font-size: 15.5px; }
.tile-body p:first-child { margin-top: 0; }
.tile-body p:last-child { margin-bottom: 0; }
.tile-note   { border-left-color: var(--accent);       background: var(--tint-note); }
.tile-warn   { border-left-color: var(--accent-warm);  background: var(--tint-warn); }
.tile-defect { border-left-color: var(--accent-rose);  background: var(--tint-defect); }
.tile-ok     { border-left-color: var(--accent-green); background: var(--tint-ok); }
.tile ul, .tile ol { margin: 10px 0 0; padding-left: 22px; }
.tile li { margin-bottom: 5px; }

/* --- surface nav -----------------------------------------------------------
   Top-level switcher between Description, Science Reporting, and Tracer.
   Distinct from .tabs, which switches panels WITHIN the Tracer. Two levels of
   navigation, and they must not look like one: the nav sits above the rule and
   carries the heavier weight. */
.site-head { margin-bottom: 10px; }
.head-top { margin-bottom: 26px; }

.appnav { display: flex; flex-wrap: wrap; gap: 2px; margin: 30px 0 34px;
          border-bottom: 2px solid var(--border-light); }
/* The nav is the FIRST element in the header as of commit 3a, so it must not
   carry the top margin it needed while it sat below the masthead. */
.site-head > .appnav:first-child { margin: 0 0 30px; }
.appnav-item { display: inline-block; font-size: 15.5px; font-weight: 600;
               padding: 12px 22px; text-decoration: none; color: var(--muted);
               border-bottom: 3px solid transparent; margin-bottom: -2px;
               letter-spacing: 0.005em; }
a.appnav-item:hover { color: var(--text-bright); }
.appnav-item.active { color: var(--text-bright);
                      border-bottom-color: var(--accent); }
/* Unbuilt surfaces are a span, never a dead anchor. Muted and cursor-default so
   it does not read as a link that failed. */
.appnav-unbuilt { color: var(--muted); opacity: 0.5; cursor: default;
                  font-weight: 500; font-style: italic; }

/* --- placeholder sections --------------------------------------------------
   A section that is not written yet. Visibly distinct from written content, so
   a reader can never mistake an empty section for a complete one. */
.placeholder { border-style: dashed; border-color: var(--border-light);
               background: transparent; }
.placeholder h3 { color: var(--muted); }

.tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 34px 0 26px;
        border-bottom: 1px solid var(--border); }
.tab { appearance: none; border: 0; background: transparent; cursor: pointer;
       font: inherit; font-size: 15px; color: var(--muted);
       padding: 11px 20px; border-bottom: 2px solid transparent;
       margin-bottom: -1px; }
.tab:hover { color: var(--text-bright); }
.tab.active { color: var(--accent); font-weight: 600;
              border-bottom-color: var(--accent); }

/* No-JS fallback: every panel is visible if the script does not run, so content
   is never hidden behind a broken tab. Unchanged by the redesign -- the probe
   suite asserts this behavior. */
.panel { display: block; }
body.js .panel { display: none; }
body.js .panel.active { display: block; }

.claim { background: var(--bg-card); border: 1px solid var(--border);
         border-radius: var(--radius); padding: 30px 32px; margin: 0 0 30px; }
.claim > h2 { margin-bottom: 20px; }
.claim .card { background: var(--bg-raise); border-color: var(--border-light);
               padding: 20px 22px; margin-bottom: 18px; }
.claim .card:last-child { margin-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { background: var(--bg-raise); border: 1px solid var(--border-light);
        border-radius: 999px; padding: 5px 14px; font-size: 12.5px;
        color: var(--text-bright); line-height: 1.5; }
.chip-low { background: var(--tint-warn); border-color: var(--accent-warm); }

.quantity { border: 1px solid var(--border-light); border-radius: var(--radius-sm);
            padding: 18px 20px; margin: 16px 0; background: var(--bg-card); }
.quantity h4 { font-family: var(--font-mono); font-size: 13.5px;
               letter-spacing: 0; color: var(--accent); }

/* --- the workflow diagram --------------------------------------------------
   Generated at build time and inlined rather than linked, so it themes with the
   page. Scales down on narrow viewports via the viewBox; the geometry itself is
   computed from the text, so nothing depends on the rendered width. Full width
   by design -- the measure cap above deliberately does not reach it. */
svg.workflow { display: block; width: 100%; height: auto; margin: 10px 0 4px;
               background: var(--dia-bg); border-radius: var(--radius-sm); }
svg.workflow text { font-family: var(--font-body); }

table.digest { width: 100%; border-collapse: collapse; font-size: 13px;
               margin: 4px 0 2px; }
table.digest th { text-align: left; color: var(--muted); font-weight: 600;
                  border-bottom: 1px solid var(--border-light);
                  padding: 9px 11px; text-transform: uppercase;
                  letter-spacing: 0.07em; font-size: 11px; }
table.digest td { border-bottom: 1px solid var(--border); padding: 9px 11px;
                  font-family: var(--font-mono); overflow-wrap: anywhere;
                  color: var(--text); line-height: 1.5; }
table.digest tr:last-child td { border-bottom: 0; }
table.digest td:first-child { font-family: var(--font-body);
                              color: var(--text-bright); }
td.num, th.num { text-align: right; }

ol.honesty { margin: 0; padding-left: 26px; }
ol.honesty li { margin-bottom: 18px; color: var(--text); }
ol.honesty li:last-child { margin-bottom: 0; }
ol.honesty li b { color: var(--text-bright); }
ol.honesty li::marker { color: var(--accent); font-variant-numeric: tabular-nums; }

details { margin-top: 10px; }
details summary { cursor: pointer; color: var(--accent); font-size: 13.5px;
                  margin-top: 4px; }
details[open] summary { margin-bottom: 10px; }

.cite .title { font-weight: 600; margin: 0 0 4px; color: var(--text-bright);
               max-width: var(--measure); }

/* --- the page gate ---------------------------------------------------------
   Visible by DEFAULT. Only JavaScript removes it, so a truncated or blocked
   script leaves the page covered rather than open. This is the reverse of the
   tab rules above, which fail open so that a broken tab never hides content --
   a gate has the opposite requirement and the two must not be confused. */
.gate { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
        z-index: 9999; background: var(--bg); display: flex;
        align-items: center; justify-content: center; padding: 24px; }
body:not(.unlocked) { overflow: hidden; }
.gate-box { max-width: 470px; width: 100%; background: var(--bg-card);
            border: 1px solid var(--border); border-radius: var(--radius);
            padding: 34px 36px; }
.gate-box h2 { margin-bottom: 6px; }
.gate-box .sub { margin-bottom: 12px; font-size: 15.5px; }
.gate-label { display: block; font-size: 12px; text-transform: uppercase;
              letter-spacing: 0.12em; color: var(--muted); font-weight: 600;
              margin: 26px 0 9px; }
#gate-input { width: 100%; font: inherit; font-size: 16px;
              color: var(--text-bright); background: var(--bg-raise);
              border: 1px solid var(--border-light);
              border-radius: var(--radius-sm); padding: 12px 15px; }
#gate-input:focus { outline: none; border-color: var(--accent); }
#gate-submit { margin-top: 16px; font: inherit; font-size: 15px;
               font-weight: 600; cursor: pointer; color: var(--bg);
               background: var(--accent); border: 0;
               border-radius: var(--radius-sm); padding: 12px 28px; }
#gate-submit:hover { background: var(--text-bright); }
.gate-error { color: var(--accent-rose); min-height: 21px; margin: 13px 0 0;
              font-size: 14px; }

@media (max-width: 620px) {
  .wrap { padding: 24px 18px 72px; }
  h1 { font-size: 32px; }
  h2 { font-size: 23px; }
  .appnav-item { padding: 10px 14px; font-size: 14.5px; }
  .card { padding: 20px 18px; }
  .claim { padding: 22px 18px; }
}

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

/* A gate committee reads on paper. Invert, reveal every panel regardless of the
   active tab, and drop interactive chrome. */
@media print {
  /* The diagram inverts by redeclaring its own variables, which is why it has
     them. Without this block an inlined SVG carrying the dark palette prints
     near-invisible text on a black box. */
  :root {
    --dia-bg:     #ffffff;
    --dia-box:    #f4f6f8;
    --dia-line:   #c9d2d9;
    --dia-text:   #14212e;
    --dia-muted:  #4a5b6b;
    --dia-accent: #1f5f8b;
    --dia-frozen: #5b3fa0;
    --dia-human:  #1d6b45;
  }
  svg.workflow { break-inside: avoid; border: 1px solid #c9d2d9; }
  body { background: #ffffff; color: #14212e; font-size: 10.5pt;
         line-height: 1.5; }
  .wrap { max-width: none; padding: 0; }
  /* On paper the column is already narrow, so the screen measure would
     double-constrain it. */
  p, .sub, .fine, blockquote, ol.honesty li, ul li, .cite .title {
    max-width: none; }
  h1 { font-size: 24pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 11.5pt; }
  .claim h3 { font-size: 8.5pt; }
  h4 { font-size: 10.5pt; }
  h1, h2, h3, h4, .tile-head { color: #0b1a26; }
  .kv .v, ol.honesty li b, table.digest td:first-child { color: #14212e; }
  .fine, .kv .k, .sub, .counts { color: #4a5b6b; }
  a { color: #14212e; text-decoration: underline; }
  .card, .claim, .quantity { background: #ffffff; border: 1px solid #c9d2d9;
                             break-inside: avoid; }
  .claim .card { background: #ffffff; border-color: #c9d2d9; }
  .placeholder { border-style: dashed; background: transparent; }
  .tile { background: #f4f6f8; break-inside: avoid; }
  .tile-note   { border-left-color: #1f5f8b; }
  .tile-warn   { border-left-color: #9a6400; }
  .tile-defect { border-left-color: #96271f; }
  .tile-ok     { border-left-color: #1d6b45; }
  .quantity h4 { color: #1f5f8b; }
  blockquote { background: #f4f6f8; color: #14212e; }
  code { background: #f0f3f5; color: #14212e; border-color: #d7dee3; }
  .chip { background: #f4f6f8; color: #14212e; border-color: #c9d2d9; }
  .gate { display: none; }
  .tabs { display: none; }
  .docnav { display: none; }
  .doclayout { display: block; }
  .askbox { display: none; }
  /* The surface nav SURVIVES print, flattened. The page heading names the
     system, not which of the three surfaces is on the paper. */
  .appnav { border-bottom: 1px solid #c9d2d9; break-after: avoid;
            margin: 12px 0 18px; }
  .appnav-item { color: #4a5b6b; text-decoration: none;
                 padding: 6px 14px 6px 0; border-bottom: 0; }
  .appnav-item.active { color: #0b1a26; font-weight: 700; }
  .appnav-unbuilt { color: #8a94a0; }
  body.js .panel, body.js .panel.active { display: block; }
  .panel { break-before: page; }
  table.digest td, table.digest th { color: #14212e; border-color: #d7dee3; }
  ol.honesty li::marker { color: #14212e; }
  details summary { color: #14212e; }
}