/* SnowOps report theme — PA08 Discovery Audit report / PA09 sample audit.
 *
 * Themes GENERATED content of variable length (apps/discovery-auditor renders
 * Markdown -> this theme), so everything here is driven by element type and a
 * small decorator script — never by hand-placed markup.
 *
 * Tokens: docs/presentation/01-brand-system.md §3/§9. Do not introduce colors.
 * Fonts: IBM Plex (SIL OFL 1.1) — see fonts/README.md.
 */

/* ── fonts (pandoc --embed-resources inlines these as data URIs) ─────────── */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/ibm-plex-sans-latin.woff2') format('woff2');
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --bg: #FBFAF6; --panel: #FFFFFF; --ink: #1B1C1A; --muted: #6C6E67;
  --border: #E7E4DC; --accent: #2B4C7E; --accent-soft: #EEF2F8;
  --action: #EE6C4D; --action-strong: #D9552F;
  --pass: #1F7A5A; --warn: #B07D2B; --crit: #9B2D24;
  --crit-soft: #FBECEA; --warn-soft: #FBF4E6; --pass-soft: #EAF5F0;
  --radius-card: 12px; --radius-surface: 10px; --radius-control: 8px;
  --font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ── page ────────────────────────────────────────────────────────────────── */
/* Margins are set by the renderer (render.js) so the running footer can live in
 * the page margin; @page here only fixes the sheet size for direct printing. */
@page { size: Letter; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 10.5pt;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── cover ───────────────────────────────────────────────────────────────── */
.cover { break-after: page; padding-top: 2mm; }

.cover-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 26mm; }
.cover-brand img { width: 26px; height: 26px; }
.cover-brand .wordmark { font-size: 15pt; font-weight: 700; letter-spacing: -0.01em; }
.cover-brand .wordmark span { color: var(--accent); }

.eyebrow {
  font-family: var(--font-mono); font-size: 8pt; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 10px;
}

/* Ink, not accent — matches the document master's Title, so the report reads as
 * the same family as every other SnowOps document. */
.cover h1.report-title {
  font-size: 30pt; font-weight: 700; letter-spacing: -0.025em; color: var(--ink);
  line-height: 1.1; margin: 0 0 6px; border: 0; padding: 0;
}
.cover .client {
  font-size: 15pt; color: var(--accent); font-weight: 600; margin: 0 0 22px;
}

.meta {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0; border-top: 1px solid var(--border); margin-bottom: 20px;
}
.meta div {
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.meta dt {
  font-family: var(--font-mono); font-size: 7.5pt; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 2px;
}
.meta dd { margin: 0; font-size: 10pt; font-weight: 500; }

/* Read-only assurance — the single most important trust signal on the cover. */
.assurance {
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius-surface); background: var(--bg);
  padding: 12px 14px; margin: 0 0 14px;
}
.assurance p { margin: 0; font-size: 9.5pt; }
.assurance strong { color: var(--accent); }

.confidential-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 7.5pt;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border);
  border-radius: var(--radius-control); padding: 4px 8px;
}

/* Sample banner — must be impossible to mistake a sample for a real posture. */
.sample-banner {
  border: 1px solid var(--warn); border-radius: var(--radius-surface);
  background: var(--warn-soft); padding: 12px 14px; margin: 0 0 20px;
}
.sample-banner p { margin: 0; font-size: 9.5pt; color: #6E4E19; }
/* Only the banner's own leading label is the block heading — a <strong> inside the
 * body copy must stay inline, or the sentence breaks apart. */
.sample-banner > strong:first-child {
  display: block; font-family: var(--font-mono); font-size: 8pt;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--warn);
  margin-bottom: 3px;
}
.sample-banner p strong { font-weight: 600; color: #5A3F13; }

/* ── structure ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.015em; break-after: avoid; }

h1 {
  font-size: 17pt; color: var(--accent); margin: 26px 0 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
h2 {
  font-size: 13pt; color: var(--accent); margin: 20px 0 8px;
  padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
h3 { font-size: 11pt; margin: 16px 0 6px; }
h4 {
  font-family: var(--font-mono); font-size: 8pt; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin: 14px 0 5px;
}
p { margin: 0 0 9px; }
strong { font-weight: 600; }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--border); }

ul, ol { margin: 0 0 10px; padding-left: 18px; }
li { margin-bottom: 4px; }
li::marker { color: var(--muted); }

/* ── tables ──────────────────────────────────────────────────────────────── */
table {
  width: 100%; border-collapse: collapse; margin: 10px 0 14px;
  font-size: 9.5pt; break-inside: auto; table-layout: auto;
}

/* Pandoc emits an equal `width: N%` on every <col> regardless of content, which
 * squeezes long columns (a finding title) to share space evenly with short ones
 * (severity, effort). Neutralise it and let the browser size columns by content
 * — this matters most for GENERATED reports, whose column content we can't know. */
colgroup, col { width: auto !important; }
thead { display: table-header-group; }   /* repeat header across page breaks */
tr { break-inside: avoid; break-after: auto; }
th {
  background: var(--accent); color: #fff; font-weight: 600; text-align: left;
  padding: 7px 9px; font-size: 8.5pt; letter-spacing: 0.02em;
  border: 1px solid var(--accent);
}
td { padding: 6px 9px; border: 1px solid var(--border); vertical-align: top; }
tbody tr:nth-child(even) td { background: var(--bg); }
/* Rule/asset IDs are identifiers — breaking "COST-001" across lines makes them
 * unreadable in a findings table. */
td code, th code { font-size: 8.5pt; white-space: nowrap; }

/* Numeric columns read better right-aligned; pandoc emits these alignments. */
td[style*="text-align: right"], th[style*="text-align: right"] { text-align: right !important; }

/* ── code ────────────────────────────────────────────────────────────────── */
code {
  font-family: var(--font-mono); font-size: 9pt;
  background: #F1EFE8; border-radius: 4px; padding: 0.1em 0.32em;
}
pre {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-surface); padding: 10px 12px; overflow-x: auto;
  break-inside: avoid; margin: 0 0 12px;
}
pre code { background: none; padding: 0; font-size: 8.5pt; line-height: 1.5; }

/* ── blockquote → callout ────────────────────────────────────────────────── */
blockquote {
  margin: 12px 0; padding: 10px 14px;
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius-surface); background: var(--bg);
  font-size: 9.5pt;
}
blockquote p:last-child { margin-bottom: 0; }

/* ── severity chips ──────────────────────────────────────────────────────────
 * Applied by the decorator in the template to any cell/marker whose text is a
 * severity word. Grayscale-legible by rule: each chip carries a distinct GLYPH
 * plus its LABEL, so color is reinforcement, never the only signal. */
.chip {
  display: inline-block; white-space: nowrap;
  font-size: 7.5pt; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 7px 2px 6px;
  border-radius: 999px; border: 1px solid currentColor;
}
.chip::before { content: attr(data-glyph) ' '; font-weight: 700; }

.chip-critical { color: #fff; background: var(--crit); border-color: var(--crit); }
.chip-high { color: var(--crit); background: var(--crit-soft); }
.chip-medium { color: var(--warn); background: var(--warn-soft); }
.chip-low { color: var(--muted); background: var(--bg); }
.chip-pass { color: var(--pass); background: var(--pass-soft); }
.chip-info { color: var(--accent); background: var(--accent-soft); }

/* ── severity summary (the count table on the exec summary) ──────────────── */
.count-critical { color: var(--crit); font-weight: 700; }
.count-high { color: var(--crit); font-weight: 600; }
.count-medium { color: var(--warn); font-weight: 600; }

/* ── footer note ─────────────────────────────────────────────────────────── */
hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0 12px; }

/* The closing italic provenance line the auditor emits. */
body > p > em:only-child { color: var(--muted); font-size: 9pt; }

/* ── print hardening ─────────────────────────────────────────────────────── */
@media print {
  body { font-size: 10pt; }
  h1, h2, h3 { break-after: avoid; }
  table, pre, blockquote, .assurance, .sample-banner { break-inside: avoid; }
  a { border-bottom: 0; }
}