/* patching.css — the CONTENT styles the Patching door's screens share (PATCH25-WEB-UI).
   The frame — brand, family menu, sign-in, ring, subject line, foot — is the shell's
   (SHELL360 §1); nothing here draws it. Every value is a var(--sv-*) token; the shared
   raw-style lint reads this file with the pages. The surfaces (.vtiles, .vcard,
   .vnotice) and the state grammar come from vivid-js's own bundles, linked from the
   tree by each page; this file only places them.

   Written once on 2026-09-15 because five new screens were about to copy repo.html's
   ninety lines of masthead, block and table-colour CSS each. */

/* vivid-table and cve-table ask the CONSUMER for their colours; mapped to tokens,
   never transcribed (repo.html, 2026-09-06: supplying none paints white on white). */
:root {
  --vt-accent: var(--sv-accent);
  --vt-header: var(--sv-surface-alt);
  --vt-header-hover: var(--sv-grid);
  --vt-row: var(--sv-surface);
  --vt-row-alt: var(--sv-background);
  --vt-link: var(--sv-accent-glow);
  --vt-dim: var(--sv-text-secondary);
  --vt-sev-critical: var(--sv-severity-critical);
  --vt-sev-high: var(--sv-severity-high);
  --vt-sev-medium: var(--sv-severity-medium);
  --vt-sev-low: var(--sv-severity-low);
  /* vivid-series and vivid-trend, the same way. */
  --vs-line: var(--sv-accent-glow); --vs-band: var(--sv-good); --vs-bars: var(--sv-accent);
  --vs-bars-alt: var(--sv-severity-critical); --vs-grid: var(--sv-grid); --vs-dim: var(--sv-text-secondary); --vs-ink: var(--sv-text-primary);
  --vt-bars: var(--sv-accent); --vt-bars-alt: var(--sv-severity-critical); --vt-line: var(--sv-severity-medium);
  --vt-line-alt: var(--sv-severity-critical); --vt-grid: var(--sv-grid); --vt-ink: var(--sv-text-primary);
}

[hidden] { display: none !important; }

.screen { line-height: 1.55; font-size: var(--sv-font-small); }

/* ---- one band colour, and the EVIDENCE chooses it (report.html's rule) ---- */
[data-level="critical"] { --band: var(--sv-severity-critical); }
[data-level="high"] { --band: var(--sv-severity-high); }
[data-level="medium"] { --band: var(--sv-severity-medium); }
[data-level="low"] { --band: var(--sv-severity-low); }
[data-level="healthy"] { --band: var(--sv-good); }

/* ---- the source chip (PATCH25-WEB-UI §5) ---- */
p.source {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 0; padding: 6px 12px;
  border: 1px solid var(--sv-grid); border-radius: 999px;
  background: var(--sv-surface); color: var(--sv-text-secondary); font-size: var(--sv-font-caption);
  transition: border-color var(--mood-duration, 150ms);
}
p.source[data-kind="local"] { border-color: var(--sv-accent); }
p.source[data-freshness="late"] .source-text { color: var(--sv-severity-medium); }
p.source[data-freshness="stale"] .source-text { color: var(--sv-severity-high); }
/* A demo is not stale: the accent and the word, never a severity (source-model.js chip). */
p.source[data-freshness="demo"] { border-color: var(--sv-accent-glow); background: var(--sv-surface-alt); }
p.source[data-freshness="demo"] .source-text { color: var(--sv-text-primary); }
.source-fell { color: var(--sv-severity-medium); flex-basis: 100%; }
p.source[data-freshness="failed"] { border-color: var(--sv-severity-high); }
p.source[data-freshness="failed"] .source-text { color: var(--sv-severity-high); font-weight: 600; }
.source-action {
  font: inherit; cursor: pointer; padding: 3px 10px;
  border: 1px solid var(--sv-accent); border-radius: 999px;
  background: transparent; color: var(--sv-text-primary);
}
.source-action:hover { background: var(--sv-accent); color: var(--sv-background); }
.source-action:disabled { opacity: 0.5; cursor: default; }

/* ---- masthead ---- */
section.masthead { border-bottom: 1px solid var(--sv-grid); padding-bottom: 18px; }
section.masthead h1 { font-size: var(--sv-font-title); margin: 0; }
section.masthead .row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.subject { font-size: var(--sv-font-body); margin: 6px 0 0; }
.asof { color: var(--sv-text-secondary); font-size: var(--sv-font-caption); }
.posture {
  display: inline-block; margin-top: 14px; padding: 8px 14px;
  border-radius: var(--sv-corner-radius);
  border-left: 4px solid var(--band, var(--sv-text-secondary));
  background: var(--sv-surface); font-size: var(--sv-font-body);
}
.vtiles { margin-top: 20px; }
.vtile[data-level] { border-left: 3px solid var(--band); }

/* ---- sections ---- */
section.block { margin-top: 34px; }
section.block > h2 {
  font-size: var(--sv-font-body); margin: 0 0 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--sv-grid);
}
p.lede { color: var(--sv-text-secondary); font-size: var(--sv-font-caption); margin: 0 0 12px; }
.empty { color: var(--sv-text-secondary); }
.grid { margin: 0 0 12px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }

/* ---- the table's state cell: banded and labelled, never colour alone ---- */
.state-cell { display: inline-flex; align-items: center; gap: 8px; }
.state-cell::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--band, var(--sv-text-secondary)); }

/* ---- what to do next ---- */
ol.next, ul.next { margin: 0; padding-left: 1.4em; }
.next li { margin-bottom: 8px; }
.next li a { font-weight: 700; }

/* ---- the live stream (investigate.html's list) ---- */
ul.stream { list-style: none; margin: 0 0 12px; padding: 0; font-size: var(--sv-font-caption); color: var(--sv-text-secondary); }
ul.stream li { padding: 3px 0; border-bottom: 1px dotted var(--sv-grid); }

/* ---- buttons the page owns: a primary, and a quiet one ---- */
button.go, a.go {
  display: inline-block; font: inherit; cursor: pointer; padding: 8px 16px;
  border: 1px solid var(--sv-accent); border-radius: var(--sv-corner-radius);
  background: transparent; color: var(--sv-text-primary); text-decoration: none;
}
button.go:hover, a.go:hover { background: var(--sv-accent); color: var(--sv-background); }
button.go:disabled { opacity: 0.5; cursor: default; }
button.quiet { font: inherit; cursor: pointer; padding: 4px 10px; border: 1px solid var(--sv-grid); border-radius: 999px; background: transparent; color: var(--sv-text-secondary); }
button.quiet:hover { border-color: var(--sv-accent); color: var(--sv-text-primary); }

/* ---- consent rows (remediate.html): one approval per yes ---- */
.consent { display: inline-flex; gap: 6px; align-items: center; }
.consent button[disabled][title] { cursor: help; }

code { font-family: var(--sv-font-stack-mono, monospace); font-size: var(--sv-font-caption); }
a { color: var(--sv-accent-glow); text-decoration: none; }
a:hover { color: var(--sv-text-primary); text-decoration: underline; }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
dl.facts dt { color: var(--sv-text-secondary); font-size: var(--sv-font-caption); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }

p.colophon {
  margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--sv-grid);
  color: var(--sv-text-secondary); font-size: var(--sv-font-caption); line-height: 1.6;
}

@media print {
  p.source, .source-action, button.go, button.quiet { display: none; }
}