/* Self-hosted. These were loaded from Google Fonts, which made 97% of this
   page's weight a third-party request and leaked every reader of the specimen
   report to Google. Same faces, same look, served from our own origin. */
@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: Newsreader;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/newsreader-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: Newsreader;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/newsreader-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

/* CobaltLoom — specimen report document styles.
   Deliberately a DOCUMENT, not a web page: running heads, page rules,
   finding IDs, severity chips, spec tables. Fonts are variables so the
   pairing can be swapped without touching structure. */

:root {
  --doc-serif: "Newsreader", "Source Serif 4", charter, "Bitstream Charter", georgia, serif;
  --doc-mono: "JetBrains Mono", "Fira Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  --paper: #fcfcfa;
  --paper-edge: #eceae4;
  --ink: #15161a;
  --ink-2: #4a4c55;
  --ink-3: #797c87;
  --rule: #d8d6ce;
  --rule-2: #b9b6ab;
  --crit: #8b1a1a;
  --high: #b4531a;
  --med: #8a6d1b;
  --low: #4a6b8a;
  --info: #6b6b6b;
  --closed: #2f6b47;
  --page: 190mm;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #6e6e73;
  font-family: var(--doc-serif);
  color: var(--ink);
  font-size: 10.5pt;
  line-height: 1.52;
  -webkit-font-smoothing: antialiased;
  padding: 28px 16px 60px;
}

/* ---------- PAGE ---------- */
.page {
  width: var(--page);
  min-height: 268mm;
  margin: 0 auto 22px;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 18%),
    0 14px 40px rgb(0 0 0 / 22%);
  padding: 18mm 18mm 14mm;
  position: relative;
  display: flex;
  flex-direction: column;
}

.runhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--doc-mono);
  font-size: 7pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 0.5pt solid var(--rule);
  padding-bottom: 5pt;
  margin-bottom: 14pt;
}

.runfoot {
  margin-top: auto;
  padding-top: 8pt;
  border-top: 0.5pt solid var(--rule);
  display: flex;
  justify-content: space-between;
  font-family: var(--doc-mono);
  font-size: 7pt;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}

.classification {
  font-family: var(--doc-mono);
  font-size: 7pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crit);
}

/* ---------- COVER ---------- */
.cover {
  justify-content: space-between;
}

.cover-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.wordmark {
  font-family: var(--doc-mono);
  font-size: 10pt;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
}

.cover-mid {
  padding: 26mm 0 0;
}

.cover-kind {
  font-family: var(--doc-mono);
  font-size: 8pt;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10pt;
}

.cover-title {
  font-size: 30pt;
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.015em;
  max-width: 16ch;
}

.cover-sub {
  margin-top: 12pt;
  font-size: 12pt;
  color: var(--ink-2);
  font-style: italic;
}

.cover-rule {
  height: 1.5pt;
  background: var(--ink);
  margin: 20pt 0 0;
  width: 42mm;
}

/* ---------- DOCUMENT CONTROL / SPEC TABLE ---------- */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.5pt;
}

.spec th,
.spec td {
  text-align: left;
  padding: 5.5pt 10pt 5.5pt 0;
  border-bottom: 0.5pt solid var(--rule);
  vertical-align: top;
}

.spec th {
  font-family: var(--doc-mono);
  font-size: 7pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  width: 34mm;
  white-space: nowrap;
}

.spec td {
  font-family: var(--doc-mono);
  font-size: 8pt;
}

.spec tr:last-child th,
.spec tr:last-child td {
  border-bottom: 0;
}

/* ---------- HEADINGS ---------- */
.h-sec {
  font-family: var(--doc-mono);
  font-size: 7.5pt;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7pt;
}

h2 {
  font-size: 17pt;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 10pt;
  line-height: 1.18;
}

h3 {
  font-size: 11pt;
  font-weight: 600;
  margin: 14pt 0 5pt;
}

p {
  margin-bottom: 8pt;
  max-width: 68ch;
}

p.tight {
  margin-bottom: 4pt;
}

.lede {
  font-size: 11.5pt;
  color: var(--ink-2);
  font-style: italic;
  margin-bottom: 12pt;
}

.block {
  margin-bottom: 16pt;
}

/* ---------- SEVERITY ---------- */
.sev {
  display: inline-block;
  font-family: var(--doc-mono);
  font-size: 6.8pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2pt 6pt;
  border: 0.75pt solid currentcolor;
  white-space: nowrap;
}

.sev--crit {
  color: var(--crit);
}

.sev--high {
  color: var(--high);
}

.sev--med {
  color: var(--med);
}

.sev--low {
  color: var(--low);
}

.sev--info {
  color: var(--info);
}

.sev--closed {
  color: var(--closed);
}

/* ---------- FINDINGS REGISTER ---------- */
.register {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.5pt;
  margin-top: 4pt;
}

.register thead th {
  font-family: var(--doc-mono);
  font-size: 6.8pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  text-align: left;
  padding: 0 8pt 5pt 0;
  border-bottom: 1pt solid var(--ink);
}

.register tbody td {
  padding: 6pt 8pt 6pt 0;
  border-bottom: 0.5pt solid var(--rule);
  vertical-align: top;
}

.register .id {
  font-family: var(--doc-mono);
  font-size: 8pt;
  white-space: nowrap;
}

.register .cvss {
  font-family: var(--doc-mono);
  font-size: 8pt;
  text-align: right;
}

.register .st {
  font-family: var(--doc-mono);
  font-size: 7pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--closed);
}

.register .st--open {
  color: var(--crit);
}

.register .st--acc {
  color: var(--ink-3);
}

/* ---------- FINDING BODY ---------- */
.finding-head {
  border-top: 1.5pt solid var(--ink);
  padding-top: 9pt;
  margin-bottom: 12pt;
}

.finding-meta {
  display: flex;
  gap: 12pt;
  align-items: center;
  font-family: var(--doc-mono);
  font-size: 7.5pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7pt;
}

.finding-title {
  font-size: 16pt;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 30ch;
}

.part {
  display: grid;
  grid-template-columns: 30mm 1fr;
  gap: 10pt;
  border-top: 0.5pt solid var(--rule);
  padding: 9pt 0;
}

.part-k {
  font-family: var(--doc-mono);
  font-size: 7pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 1.5pt;
}

.part-v p:last-child {
  margin-bottom: 0;
}

/* ---------- CODE / EVIDENCE ---------- */
pre {
  font-family: var(--doc-mono);
  font-size: 7.6pt;
  line-height: 1.5;
  background: #f3f2ed;
  border: 0.5pt solid var(--rule);
  border-left: 1.5pt solid var(--rule-2);
  padding: 7pt 9pt;
  margin: 6pt 0 8pt;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

pre .cmt {
  color: var(--ink-3);
}

pre .hot {
  background: rgb(139 26 26 / 11%);
  padding: 0 2px;
}

code {
  /* file paths and endpoints are unbreakable tokens wider than a phone */
  overflow-wrap: anywhere;
  font-family: var(--doc-mono);
  font-size: 0.9em;
  background: #f3f2ed;
  padding: 0.5pt 3pt;
  border: 0.5pt solid var(--rule);
}

.redact {
  background: var(--ink);
  color: var(--ink);
  user-select: none;
  padding: 0 3pt;
}

.caption {
  font-family: var(--doc-mono);
  font-size: 6.8pt;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-top: 7pt;
  margin-bottom: 10pt;
  line-height: 1.5;
}

/* ---------- CALLOUT / NOTE ---------- */
.note {
  border-left: 1.5pt solid var(--ink);
  padding: 2pt 0 2pt 10pt;
  margin: 10pt 0;
  font-size: 9.5pt;
  color: var(--ink-2);
}

.note strong {
  color: var(--ink);
}

.specimen {
  border: 0.75pt dashed var(--rule-2);
  background: #f7f6f1;
  padding: 8pt 10pt;
  font-family: var(--doc-mono);
  font-size: 7.4pt;
  line-height: 1.55;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  margin-bottom: 14pt;
}

.specimen b {
  color: var(--crit);
  letter-spacing: 0.12em;
}

/* ---------- TWO COLUMN ---------- */
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14pt;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1pt solid var(--ink);
  border-bottom: 0.5pt solid var(--rule);
  margin: 10pt 0 14pt;
}

.stat {
  padding: 8pt 8pt 9pt 0;
}

.stat .n {
  font-family: var(--doc-mono);
  font-size: 19pt;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat .l {
  font-family: var(--doc-mono);
  font-size: 6.6pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4pt;
}

/* ---------- PRINT / PDF ----------
   The published PDF and the page renders used as site imagery both come
   out of this block, so the artwork and the deliverable never drift. */
@page {
  size: a4;
  margin: 0;
}

@media print {
  body {
    background: #fff;
    padding: 0;
  }

  .page {
    width: 210mm;
    min-height: 297mm;
    margin: 0;
    border: 0;
    box-shadow: none;
    padding: 20mm 20mm 15mm;
    break-after: page;
  }

  .page:last-child {
    break-after: auto;
  }

  .part,
  .finding-head,
  .block,
  pre,
  .specimen,
  .note {
    break-inside: avoid;
  }

  h2,
  h3 {
    break-after: avoid;
  }
}

/* The findings register is wider than a phone; let it scroll inside its own
   box rather than dragging the whole document sideways. */
@media (max-width: 820px) {
  .register-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .register {
    min-width: 440px;
  }
}

@media (max-width: 820px) {
  :root {
    --page: 100%;
  }

  .page {
    padding: 22px 18px 18px;
    min-height: 0;
  }

  .cols,
  .part {
    grid-template-columns: 1fr;
  }

  .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
}