/* ===========================================================================
   VulnSub — technical datasheet.

   Structure is carried by rules, not by containers: 1.5px solid ink for
   document-level divisions, 1px hairline for row separation. There are no
   cards, no radii and no shadows anywhere in this file, and adding one breaks
   the world rather than extending it.

   Archivo's width axis does the display work. Compressed settings (wdth 72–88)
   are for display and label type only; body text stays at 100 where the face
   is actually comfortable to read.
   =========================================================================== */

:root {
  --paper:     #ffffff;
  --paper-2:   #f4f4f1;
  --band:      #e6e6e1;
  --ink:       #121212;
  --ink-2:     #3d3d3a;
  --ink-3:     #6a6a64;
  --rule:      #121212;
  --hair:      #c9c9c2;
  --red:       #c8102e;
  --red-ink:   #a50d25;
  /* The masthead field stays deep in both themes: an accent that works as ink
     on a dark ground is not the same colour that works as a solid field. */
  --mast:      #a90d26;
  --red-wash:  #fbe9ec;
  --green:     #1d7a46;
  --green-wash:#e8f4ed;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 1180px;
  --gut: clamp(20px, 3.2vw, 40px);

  --rule-w: 1.5px;
}

/* Dark is a negative print of the same document: the grammar does not change,
   only which side of the rule is ink. The accent lifts to the reference's own
   dark-register red, because #c8102e goes muddy on a dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #131312;
    --paper-2:   #1b1b19;
    --band:      #242421;
    --ink:       #edede7;
    --ink-2:     #c3c3bb;
    --ink-3:     #9a9a91;
    --rule:      #edede7;
    --hair:      #3a3a35;
    --red:       #ff4d63;
    --red-ink:   #ff7183;
    --mast:      #8e0a1f;
    --red-wash:  #2f1419;
    --green:     #4ec07d;
    --green-wash:#15271d;
  }
}

:root[data-theme="dark"] {
  --paper: #131312; --paper-2: #1b1b19; --band: #242421;
  --ink: #edede7; --ink-2: #c3c3bb; --ink-3: #9a9a91;
  --rule: #edede7; --hair: #3a3a35;
  --red: #ff4d63; --red-ink: #ff7183; --red-wash: #2f1419; --mast: #8e0a1f;
  --green: #4ec07d; --green-wash: #15271d;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- browser surfaces: these ship with defaults that belong to no design ---- */
::selection { background: var(--red); color: #fff; }
:root { caret-color: var(--red); accent-color: var(--red); }
* { scrollbar-color: var(--ink-3) var(--paper-2); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border: 3px solid var(--paper-2); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-2); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red); }

code, kbd, samp, pre { font-family: var(--mono); font-feature-settings: "zero" 1; }
table { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ============================ masthead ==================================== */

.mast { background: var(--mast); color: #fff; }
.mast .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 56px; padding-top: 10px; padding-bottom: 10px;
}
.mast nav a:not(.btn), .mast .logo { color: #fff; }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo:hover { color: #fff; }
.logo svg { flex: none; display: block; }
/* The wordmark is one element driven by one token: a rename touches nothing else. */
.logo b {
  font-weight: 800; font-size: 19px; letter-spacing: .06em;
  font-variation-settings: "wdth" 118; text-transform: uppercase;
}

.mast nav { display: flex; align-items: center; gap: 22px; }
.mast nav a { font-size: 14.5px; text-decoration: none; }
.mast nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ============================ document head =============================== */

.dochead { border-bottom: var(--rule-w) solid var(--rule); }
.dochead .wrap {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px;
  padding-top: 20px; padding-bottom: 12px;
}
.docmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.docmeta .m { font-size: 13px; color: var(--ink-3); font-family: var(--mono); }

.stamp {
  font: 700 11px/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); border: var(--rule-w) solid var(--red);
  padding: 5px 7px 4px;
}

/* The part-number slot carries the publish threshold: the product's actual
   designation, and the one fact a visitor needs before anything else. */
.partno {
  text-align: right;
  font-weight: 800; font-size: clamp(26px, 3.6vw, 44px); line-height: .9;
  letter-spacing: -.01em; font-variation-settings: "wdth" 72;
  white-space: nowrap;
}
.partno .op { color: var(--red); }
.partno small {
  display: block; margin-top: 7px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-variation-settings: "wdth" 100;
}

/* ============================ section strip =============================== */

.strip { border-bottom: var(--rule-w) solid var(--rule); }
.strip ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
}
.strip a { white-space: nowrap; }
.strip li { border-right: 1px solid var(--hair); }
.strip li:first-child { border-left: 1px solid var(--hair); }
.strip a {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px; text-decoration: none; font-size: 14px; color: var(--ink-2);
}
.strip a:hover { background: var(--paper-2); color: var(--red); }
.strip svg { flex: none; }
.strip .n {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}

/* ============================ sections ==================================== */

section.sheet { padding-top: clamp(44px, 5.5vw, 76px); padding-bottom: clamp(32px, 4vw, 52px); }
/* The head is deliberately shorter than a standard section: the decision table
   in §1 is the page's argument and belongs in the first viewport, not below it. */
section.sheet.hero { padding-top: clamp(28px, 3.2vw, 44px); padding-bottom: clamp(20px, 2.4vw, 30px); }
.sheetfoot { border-top: var(--rule-w) solid var(--rule); }
.sheetfoot .wrap {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 9px; padding-bottom: 9px;
  font-size: 11.5px; color: var(--ink-3); font-family: var(--mono);
}

/* The document head's second register. Without it the first viewport is a
   left-aligned text column with the right half empty, which is not what a
   datasheet head looks like. */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.kv.keyblock { margin: 6px 0 0; }
.kv.keyblock dl { grid-template-columns: 1fr; }
.kv.keyblock dt { padding: 8px 0 0; border-bottom: 0; font-size: 10.5px; letter-spacing: .09em; }
.kv.keyblock dd { padding: 1px 0 8px; border-bottom: 1px solid var(--hair); font-size: 13.5px; }

h1 {
  font-weight: 800; font-size: clamp(34px, 4.6vw, 62px); line-height: .95;
  letter-spacing: -.025em; margin: 0 0 24px;
  font-variation-settings: "wdth" 80; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--red); }

.lede {
  font-size: 18px; line-height: 1.5; color: var(--ink-2);
  max-width: 64ch; margin: 0 0 36px;
}
.lede b { color: var(--ink); font-weight: 650; }
.hero-lede { margin-bottom: 0; }

.sec-h {
  display: flex; gap: .5em; align-items: baseline;
  font-weight: 700; font-size: 19px; line-height: 1.2; margin: 0 0 14px;
}
.sec-h .n { color: var(--red); font-variation-settings: "wdth" 90; }

h3 { font-weight: 700; font-size: 15.5px; margin: 28px 0 8px; }

.prose p, .prose li { color: var(--ink-2); max-width: 70ch; }
.prose h2 { font-weight: 700; font-size: 17px; margin: 30px 0 8px; color: var(--ink); }
.prose a { color: var(--red-ink); }
.prose code {
  font-size: .88em; background: var(--paper-2);
  border: 1px solid var(--hair); padding: 1px 5px;
}

/* ============================ lists ======================================= */

.features { margin: 0 0 28px; padding: 0; list-style: none; max-width: 72ch; }
.features li {
  position: relative; padding: 6px 0 6px 22px;
  font-size: 15.5px; line-height: 1.45; color: var(--ink-2);
}
.features li::before {
  content: ""; position: absolute; left: 3px; top: 13px;
  width: 7px; height: 7px; background: var(--ink);
}
.features li b { color: var(--ink); font-weight: 650; }

.dashlist { margin: 0; padding: 0; list-style: none; }
.dashlist li {
  position: relative; padding: 4px 0 4px 15px;
  font-size: 15px; color: var(--ink-2);
}
.dashlist li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 7px; height: 1.5px; background: var(--ink);
}

/* ============================ spec tables ================================= */

.tbl { overflow-x: auto; border-top: var(--rule-w) solid var(--rule); border-bottom: var(--rule-w) solid var(--rule); }
table.spec { width: 100%; border-collapse: collapse; font-size: 14px; }
/* A spec table scrolls rather than crushes: three words per line in a narrow
   cell is harder to read than a sideways swipe, and the clipped column edge is
   its own affordance. */
table.spec { min-width: 560px; }
table.spec caption {
  caption-side: top; text-align: left; font-weight: 700; font-size: 13.5px;
  padding: 0 0 8px; color: var(--ink-2);
}
table.spec th {
  background: var(--band); font-weight: 700; text-align: left;
  padding: 8px 12px; border-bottom: 1px solid var(--rule);
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  font-variation-settings: "wdth" 88; white-space: nowrap; color: var(--ink);
}
table.spec td {
  padding: 9px 12px; border-bottom: 1px solid var(--hair);
  vertical-align: top; color: var(--ink-2);
}
table.spec tbody tr:last-child td { border-bottom: 0; }
table.spec td.num { text-align: right; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; }
table.spec td.c { text-align: center; }
table.spec td code, table.spec td .mono { font-size: 12.5px; color: var(--ink); }
table.spec tbody tr { transition: background .12s; }
table.spec tbody tr:hover { background: var(--paper-2); }
table.spec tbody tr:hover td { color: var(--ink); }

/* The two rows that invert a severity reading. They carry a wash AND a marked
   verdict, so the point survives without colour. */
table.spec tbody tr.hl { background: var(--red-wash); }
table.spec tbody tr.hl:hover { background: var(--red-wash); }
table.spec tbody tr.hl td { color: var(--ink); }

/* bordered-word stamp ------------------------------------------------------ */
/* The device: a word in a hairline box, colour from currentColor so a stamp is
   legible with colour stripped. `.verdict-*` are the landing page's publish
   decisions; `.mark-*` are the same device for states that are not publish
   decisions, so "red" never silently means "sends" in two different places. */
.verdict, .mark {
  display: inline-block; min-width: 54px; text-align: center;
  font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 8px 4px; border: 1.5px solid currentColor;
}
.verdict-sent { color: var(--red); }
.verdict-held { color: var(--ink-3); }
.mark-alert { color: var(--red); }
.mark-quiet { color: var(--ink-3); }

/* The one authored moment: on first view the verdict stamps wipe in, left to
   right, like a plotter laying down the column. Already-visible default, so
   nothing depends on script or on the animation running. */
@media (prefers-reduced-motion: no-preference) {
  .wipe .verdict { clip-path: inset(0 0 0 0); }
  .wipe.is-armed .verdict { clip-path: inset(0 100% 0 0); }
  .wipe.is-in .verdict {
    clip-path: inset(0 0 0 0);
    transition: clip-path .5s cubic-bezier(.16, 1, .3, 1);
  }
  .wipe.is-in tbody tr:nth-child(2) .verdict { transition-delay: .06s; }
  .wipe.is-in tbody tr:nth-child(3) .verdict { transition-delay: .12s; }
  .wipe.is-in tbody tr:nth-child(4) .verdict { transition-delay: .18s; }
  .wipe.is-in tbody tr:nth-child(5) .verdict { transition-delay: .24s; }
  .wipe.is-in tbody tr:nth-child(6) .verdict { transition-delay: .30s; }
}

/* ============================ key / value ================================= */

.kv { border-top: var(--rule-w) solid var(--rule); margin: 0 0 28px; }
.kv dl { margin: 0; display: grid; grid-template-columns: minmax(130px, 220px) 1fr; }
.kv dt, .kv dd {
  margin: 0; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px;
}
.kv dt {
  font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  font-variation-settings: "wdth" 88; color: var(--ink);
}
.kv dd { color: var(--ink-2); padding-left: 16px; }

/* ============================ buttons ===================================== */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 15px/1 var(--sans);
  padding: 13px 18px;
  border: var(--rule-w) solid var(--ink); background: var(--ink); color: var(--paper);
  text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn:disabled { opacity: .45; cursor: default; }
.btn:disabled:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn svg { flex: none; }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn-red { background: #fff; color: var(--mast); border-color: #fff; padding: 9px 14px; font-size: 14px; }
.btn-red:hover { background: #121212; color: #fff; border-color: #121212; }

.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: var(--ink); border-color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.actions form { margin: 0; }

/* ============================ forms ======================================= */

.field { margin: 0 0 26px; }
/* `:not(.chk)` matters: a checkbox's own <label> is a direct child of .field and
   must stay sentence-case body text, not a uppercase micro-label. */
.lbl, .field > label:not(.chk) {
  display: block; margin: 0 0 7px;
  font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  font-variation-settings: "wdth" 88; color: var(--ink);
}
.lbl .opt { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ink-3); }

input[type="email"], input[type="text"], textarea, select {
  width: 100%; padding: 11px 13px;
  font: inherit; font-size: 15px;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 0;
  appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:hover, textarea:hover, select:hover { border-color: var(--red); }
textarea { font-family: var(--mono); font-size: 13px; resize: vertical; line-height: 1.6; }
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.hint { margin: 7px 0 0; font-size: 13.5px; color: var(--ink-3); max-width: 70ch; }
.hint code {
  font-size: 12.5px; background: var(--paper-2);
  border: 1px solid var(--hair); padding: 1px 5px; color: var(--ink-2);
}
.hint b { color: var(--ink-2); }

fieldset.group {
  border: 1px solid var(--hair); border-radius: 0;
  padding: 12px 14px 14px; margin: 0 0 10px;
}
fieldset.group legend {
  padding: 0 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  font-variation-settings: "wdth" 88; color: var(--ink-3);
}
.chkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 1px 14px; }

.chk {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 6px 0; font-size: 14.5px; line-height: 1.5;
  color: var(--ink-2); cursor: pointer;
}
.chk:hover { color: var(--ink); }
.chk input { margin: 3px 0 0; flex: none; width: 15px; height: 15px; }
.chk span b { color: var(--ink); font-weight: 650; }

.drop {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 16px; margin: 0 0 10px;
  border: 1.5px dashed var(--hair); background: var(--paper-2);
}
.drop.is-over { border-color: var(--red); border-style: solid; background: var(--red-wash); }
.drop .or { font-size: 13.5px; color: var(--ink-3); }

.depsum {
  margin: 10px 0 0; padding: 10px 12px; font-size: 13.5px;
  border-left: 1.5px solid var(--ink);
  background: var(--paper-2); color: var(--ink-2);
}
/* The rule stays ink in every state: a coloured left border is the pattern the
   craft floor names. State is carried by the wash and by a word. */
.depsum.is-ok { background: var(--green-wash); color: var(--ink); }
.depsum.is-error { background: var(--red-wash); color: var(--ink); }
.depsum::before {
  display: block; margin-bottom: 3px;
  font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.depsum.is-ok::before { content: "Parsed"; color: var(--green); }
.depsum.is-error::before { content: "Not parsed"; color: var(--red); }

/* ============================ notices ===================================== */

.note {
  margin: 16px 0; padding: 11px 14px; font-size: 14px;
  border: 1.5px solid var(--ink); background: var(--paper-2); color: var(--ink);
  display: flex; gap: 10px; align-items: flex-start;
}
.note svg { flex: none; margin-top: 2px; }
.note-ok { border-color: var(--green); background: var(--green-wash); }
.note-error { border-color: var(--red); background: var(--red-wash); }
.note-info { border-color: var(--ink-3); }

/* ============================ result pages ================================ */

.narrow { max-width: 620px; }
.result h1 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 16px; }
.result p { color: var(--ink-2); max-width: 62ch; }

/* ============================ package list ================================ */

.pkglist summary {
  cursor: pointer; font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  font-variation-settings: "wdth" 88; padding: 8px 0;
  border-top: var(--rule-w) solid var(--rule); border-bottom: 1px solid var(--hair);
}
.pkglist summary::marker { color: var(--red); }
.pkglist ul {
  list-style: none; margin: 0; padding: 0;
  max-height: 300px; overflow: auto; font-size: 13px;
}
.pkglist li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--hair);
}
.pkglist code { font-size: 12.5px; color: var(--ink); }
.pkglist .v { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.pkglist .eco { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pkglist .approx { color: var(--red); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }

/* ============================ admin ======================================= */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); border-top: var(--rule-w) solid var(--rule); border-left: 1px solid var(--hair); }
.stat { padding: 12px 14px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.stat .n { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variation-settings: "wdth" 80; line-height: 1.05; }
.stat .l { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-variation-settings: "wdth" 88; }

.held-item { border-top: 1px solid var(--hair); padding: 16px 0; }
.held-item:first-of-type { border-top: var(--rule-w) solid var(--rule); }
.held-item h3 { margin: 0 0 6px; font-size: 16px; }
.held-item p { margin: 6px 0; font-size: 14px; color: var(--ink-2); max-width: 78ch; }
.held-item .meta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
/* Advisory URLs are long and arbitrary; let them break rather than widen the page. */
.held-item a { overflow-wrap: anywhere; }

.danger-zone { border: 1.5px solid var(--red); padding: 18px 20px; margin-top: 36px; }
.danger-zone h2 { margin: 0 0 8px; font-size: 16px; color: var(--red); }

/* ============================ footer ====================================== */

.foot { border-top: var(--rule-w) solid var(--rule); margin-top: 24px; }
.foot .wrap { padding-top: 22px; padding-bottom: 36px; }
.footgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px 28px; }
.footgrid b {
  display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-variation-settings: "wdth" 88; margin-bottom: 7px; color: var(--ink);
}
.footgrid a { display: block; text-decoration: none; color: var(--ink-2); padding: 2px 0; font-size: 14px; }
.footgrid a:hover { color: var(--red); text-decoration: underline; }
.footnote { margin-top: 22px; font-size: 12px; color: var(--ink-3); font-family: var(--mono); }

/* ============================ responsive ================================== */

@media (max-width: 760px) {
  .dochead .wrap { grid-template-columns: 1fr; align-items: start; }
  .partno { text-align: left; }
  /* One scrolling row rather than three stacked ones: wrapping the strip costs
     ~180px of a phone screen before the headline. */
  .strip .wrap { padding-right: 0; }
  .strip ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .strip ul::-webkit-scrollbar { display: none; }
  .strip a { padding: 11px 14px; font-size: 13.5px; }
  .hero-lede { margin-bottom: 4px; }
  .kv dl { grid-template-columns: 1fr; }
  .kv dt { padding-bottom: 0; border-bottom: 0; }
  .kv dd { padding-left: 0; padding-top: 2px; }
  .chkgrid { grid-template-columns: 1fr 1fr; }
  .mast nav { gap: 14px; }
  .hero-grid { grid-template-columns: 1fr; }

  /*
   * A spec table becomes a list of labelled blocks rather than a sideways
   * scroll. Scrolling put the decisive column — RESULT in §1, VERDICT in §2 —
   * off-screen, so a phone reader saw conditions with no results. Each cell now
   * carries its column name from data-label.
   */
  .tbl { overflow-x: visible; }
  table.spec { min-width: 0; }
  table.spec thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  table.spec tr { display: block; padding: 11px 0; border-bottom: 1px solid var(--hair); }
  table.spec tbody tr:last-child { border-bottom: 0; }
  table.spec td {
    display: grid; grid-template-columns: 10.5ch minmax(0, 1fr);
    gap: 12px; align-items: baseline;
    padding: 4px 0; border: 0; text-align: left !important;
  }
  table.spec td::before {
    content: attr(data-label);
    font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    font-variation-settings: "wdth" 88; color: var(--ink-3);
  }
  /* Grid items stretch by default, which blew the verdict stamp out to the
     full column width; it is a stamp, so it keeps its own size. */
  table.spec td .verdict { justify-self: start; }
  /* Tables whose cells carry sentences rather than values put the label on its
     own line, so the prose gets the full column instead of a ~20ch ribbon. */
  table.spec.spec-prose td { grid-template-columns: 1fr; gap: 2px; }
  table.spec.spec-prose td::before { margin-top: 4px; }
  table.spec td:empty { display: none; }
  table.spec caption { padding-bottom: 10px; }
}

@media (max-width: 460px) {
  .chkgrid { grid-template-columns: 1fr; }
  .mast .wrap { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .mast, .strip, .foot { border-color: #000; }
  .btn { display: none; }
}