/* tpm-cbom — "with receipts" redesign (Claude Design handoff, 2026-08-07)
   Light theme is the specified design; dark theme is a derived variant kept
   for the project's dark-mode requirement. No frameworks, no external requests. */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: "Spline Sans";
  src: url("fonts/spline-sans.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("fonts/spline-sans-mono.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}

:root {
  --paper: #f4f2ec; --card: #fcfbf7; --band: #f6f3ea; --code-bg: #f1eee3;
  --receipt-bg: #f9f7f0; --hairline: #e3dfd2; --row-line: #eceadf;
  --kv-line: #f0ede2; --bd-input: #d8d4c4; --bd-btn: #cdc8b8;
  --ink: #1e2124; --ink-2: #585c55; --ink-3: #8b8e85; --faint: #a9ac9f;
  --quote-ink: #3f4340;
  --dark: #14201b; --on-dark: #eff0e6; --on-dark-sub: #a7b3aa;
  --on-dark-muted: #93a29a; --on-dark-soft: #c9d2cb; --accent-dark: #6fd0b2;
  --accent: #0e6f5c; --accent-hover: #0a5748;
  --aw-bg: #e0eee6; --aw-bd: #bcd8c9; --aw-ink: #0a5748;
  --good: #187a48; --good-bd: #9ecdb2; --good-bg: #e9f4ec;
  --bad: #b3261e; --bad-bd: #e4b6b2; --bad-bg: #faeeed;
  --amber: #8a6100; --amber-bd: #cfa43c; --amber-bg: #fbf3da;
  --amber-row: #fdf8e9; --nrnd: #b98a1f;
  --cc: #0c5ea8; --cc-bd: #a9c8e8; --cc-bg: #e9f1fa;
  --cavp: #6b4fa1; --cavp-bd: #c9bce0; --cavp-bg: #f1edf8;
  --ev-certification: #187a48; --ev-vendor-attestation: #0c5ea8;
  --ev-datasheet: #585c55; --ev-marketing: #8a6100; --ev-measured: #6b4fa1;
  --t0: #dcd6c4; --t1: #c5e3d3; --t2: #8fcdb4; --t3: #37997c; --t4: #0e6f5c;
  --t-unk-bar: #e7e4d8; --meter-empty: #eceadf; --meter-empty-bd: #dbd7c8;
  --meter-unk: #f4f2ec; --meter-unk-bd: #d8d4c4; --meter-bd: rgba(30,33,36,.15);
  --row-hover: #f3efe4; --selection: #d3e9df;
  --shadow-card: 0 1px 2px rgba(30,33,36,.05);
  --shadow-pulse: 0 12px 32px rgba(20,32,27,.12);
  --shadow-tray: 0 10px 28px rgba(20,32,27,.35);
  --toolbar-bg: rgba(244,242,236,.92);
}
:root[data-theme="dark"] {
  --paper: #101915; --card: #16211c; --band: #1a2620; --code-bg: #0d1512;
  --receipt-bg: #182420; --hairline: #2a3830; --row-line: #223028;
  --kv-line: #1e2b25; --bd-input: #33443b; --bd-btn: #3b4d43;
  --ink: #e8ebe4; --ink-2: #aeb8ad; --ink-3: #7f8a80; --faint: #5f6a61;
  --quote-ink: #c4cdc2;
  --accent: #6fd0b2; --accent-hover: #8fdec4;
  --aw-bg: #1c3a30; --aw-bd: #2e5c4c; --aw-ink: #8fdec4;
  --good: #58bd84; --good-bd: #2e5c44; --good-bg: #14261c;
  --bad: #ef7b74; --bad-bd: #5c2e2a; --bad-bg: #2a1614;
  --amber: #d8ae4d; --amber-bd: #6e5514; --amber-bg: #2a2208;
  --amber-row: #221d0c; --nrnd: #d8ae4d;
  --cc: #7db3e8; --cc-bd: #2b4a6b; --cc-bg: #101f2e;
  --cavp: #b39ddb; --cavp-bd: #4a3a6b; --cavp-bg: #1d1630;
  --ev-certification: #58bd84; --ev-vendor-attestation: #7db3e8;
  --ev-datasheet: #aeb8ad; --ev-marketing: #d8ae4d; --ev-measured: #b39ddb;
  --t0: #3a382e; --t1: #2c4c3e; --t2: #37997c55; --t3: #37997c; --t4: #6fd0b2;
  --t-unk-bar: #242e28; --meter-empty: #1e2b25; --meter-empty-bd: #2a3830;
  --meter-unk: #101915; --meter-unk-bd: #33443b; --meter-bd: rgba(232,235,228,.18);
  --row-hover: #1c2a23; --selection: #1f4437;
  --toolbar-bg: rgba(16,25,21,.92);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Spline Sans", system-ui, sans-serif; line-height: 1.5;
  -webkit-font-smoothing: antialiased; font-size: 13.5px;
}
a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }
a:hover { color: var(--accent-hover); }
::selection { background: var(--selection); }
input::placeholder { color: #a09c8d; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button, select, input { font-family: "Spline Sans", system-ui, sans-serif; }
.mono, code, kbd { font-family: "Spline Sans Mono", ui-monospace, monospace; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade1 { animation: fadeUp .5s ease both; }
.fade2 { animation: fadeUp .5s .08s ease both; }
.fade3 { animation: fadeUp .45s .05s ease both; }
.pad { padding: 1rem; }
.unknown { color: var(--ink-3); font-style: italic; }

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 20; background: var(--dark); height: 52px;
  display: flex; align-items: center; padding: 0 28px; gap: 26px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .glyph {
  width: 16px; height: 16px; border: 1.5px solid var(--accent-dark); border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand .glyph i { width: 6px; height: 6px; background: var(--accent-dark); border-radius: 1px; }
.brand .word {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 17px;
  color: var(--on-dark); letter-spacing: -0.01em;
}
.brand .ver {
  font-family: "Spline Sans Mono", monospace; font-size: 10px; color: var(--on-dark-muted);
  border: 1px solid rgba(147,162,154,.4); border-radius: 999px; padding: 1px 7px;
}
.masthead nav { display: flex; gap: 20px; }
.masthead nav a {
  text-decoration: none; font-size: 13.5px; font-weight: 500; color: var(--on-dark-muted);
  padding: 15px 1px 13px; border-bottom: 2px solid transparent;
}
.masthead nav a[aria-current="true"] { color: var(--on-dark); border-bottom-color: var(--accent-dark); }
.mast-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ghost-dark {
  font-family: "Spline Sans Mono", monospace; font-size: 11.5px; color: var(--on-dark-soft);
  text-decoration: none; border: 1px solid rgba(147,162,154,.45); border-radius: 7px;
  padding: 5px 11px; background: none; cursor: pointer;
}
.ghost-dark:hover { border-color: var(--accent-dark); color: var(--accent-dark); }

/* ---------- hero + pulse ---------- */
.hero { background: var(--dark); padding: 36px 28px 0; }
.hero-inner { max-width: 1240px; margin: 0 auto; }
.hero-top {
  display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-end;
  justify-content: space-between;
}
.hero h1 {
  margin: 0; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 33px;
  line-height: 1.15; color: #f4f2ec; letter-spacing: -0.015em; max-width: 600px;
}
.hero h1 .accent { color: var(--accent-dark); }
.hero .sub { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--on-dark-sub); max-width: 600px; text-wrap: pretty; }
.hero-stats { display: flex; align-items: stretch; }
.hero-stats > div { padding: 2px 22px; }
.hero-stats > div:first-child { padding-left: 0; }
.hero-stats > div:last-child { padding-right: 0; }
.hero-stats > div + div { border-left: 1px solid rgba(147,162,154,.3); }
.hero-stats .n { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 27px; color: #f4f2ec; }
.hero-stats .l { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }

.pulse {
  position: relative; margin: 26px 0 -46px; background: var(--card);
  border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow-pulse);
  padding: 16px 20px;
}
.pulse-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.caps-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
}
.pulse-sentence { font-size: 12.5px; color: var(--ink-2); }
.pulse-sentence b { font-weight: 600; color: var(--ink); }
.tierbar { display: flex; height: 22px; border-radius: 7px; overflow: hidden; gap: 2px; margin: 10px 0 9px; }
.tierbar button, .tierbar [role="button"] {
  display: block; height: 100%; cursor: pointer; outline-offset: -2px;
  border: none; padding: 0; margin: 0; appearance: none; border-radius: 0;
}
.tier-legend { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.tier-legend a {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2);
  text-decoration: none; border: 1px solid transparent; border-radius: 999px; padding: 2px 9px 2px 6px;
}
.tier-legend a.sel { border-color: var(--accent); background: var(--aw-bg); }
.tier-legend .sw { width: 10px; height: 10px; border-radius: 3px; border: 1px solid rgba(30,33,36,.12); }
.tier-legend b { font-family: "Spline Sans Mono", monospace; font-weight: 600; color: var(--ink); }

/* ---------- toolbar ---------- */
.toolbar {
  position: sticky; top: 52px; z-index: 10; background: var(--toolbar-bg);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); padding: 12px 28px;
}
.toolbar-inner { max-width: 1240px; margin: 0 auto; }
.toolbar-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.toolbar-row + .toolbar-row { padding-top: 10px; }
.tb-field { display: flex; flex-direction: column; gap: 4px; }
.tb-field.grow { flex: 1 1 220px; max-width: 380px; }
.tb-label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tb-field input[type="search"], .tb-field select {
  height: 36px; border: 1px solid var(--bd-input); border-radius: 8px; background: var(--card);
  font-size: 13px; color: var(--ink); padding: 0 8px;
}
.tb-field input[type="search"] { width: 100%; padding: 0 34px 0 12px; font-size: 13.5px; }
.search-wrap { position: relative; display: block; }
.search-wrap kbd {
  position: absolute; right: 9px; top: 9px; font-size: 10.5px; color: var(--ink-3);
  border: 1px solid var(--bd-input); border-radius: 4px; padding: 0 5px; background: var(--paper);
}
.tb-field select.mono { font-family: "Spline Sans Mono", monospace; }
.tb-btn {
  height: 36px; border: 1px solid var(--bd-input); border-radius: 8px; background: none;
  color: var(--ink-2); font-size: 12.5px; font-weight: 500; padding: 0 12px; cursor: pointer;
}
.tb-btn:hover { border-color: var(--accent); color: var(--accent); }
.tb-btn.ann-on { background: var(--amber-bg); border-color: var(--amber-bd); color: var(--amber); }
.tb-reset { height: 36px; border: none; background: none; color: var(--accent); font-size: 12.5px; font-weight: 600; padding: 0 8px; cursor: pointer; }

/* ---------- census main ---------- */
.census-main { max-width: 1240px; margin: 0 auto; padding: 14px 28px 0; width: 100%; }
.results-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 2px 0 10px; font-size: 12.5px; }
.results-row .meta { color: var(--ink-3); }
.results-row .meta .mono { font-weight: 600; color: var(--ink); }

.table-card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 12px;
  box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 80px;
}
.table-scroll { overflow-x: auto; }
table.census { border-collapse: collapse; width: 100%; }
table.census th {
  text-align: left; padding: 9px 10px; background: var(--band);
  border-bottom: 1px solid var(--bd-input); white-space: nowrap;
}
table.census th:first-child { width: 30px; padding: 9px 4px 9px 14px; }
table.census th .sort {
  all: unset; cursor: pointer; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
table.census th .sort.active { color: var(--accent); }
table.census th .sort .dir { color: var(--accent); font-size: 9px; }
table.census th .sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
table.census td { padding: 11px 10px; border-bottom: 1px solid var(--row-line); vertical-align: middle; }
table.census td:first-child { padding-left: 14px; padding-right: 4px; }
table.census td:last-child { padding-right: 14px; text-align: center; white-space: nowrap; }
table.census tbody tr { cursor: pointer; }
table.census tbody tr:hover { background: var(--row-hover); }
table.census tbody tr.announced { background: var(--amber-row); }
table.census tbody tr.announced td:first-child { box-shadow: inset 3px 0 0 var(--amber-bd); }
table.census input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
.cell-model .name { font-size: 14px; font-weight: 600; color: var(--ink); }
.cell-model .subline { font-size: 12px; color: var(--ink-3); margin-top: 2px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.microtag {
  font-size: 10.5px; border: 1px solid var(--hairline); border-radius: 4px; padding: 0 5px;
  color: var(--ink-2); background: var(--paper);
}
.stword { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.stdot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.st-active { background: var(--good); } .st-nrnd { background: var(--nrnd); }
.st-eol { background: var(--bad); } .st-announced { background: var(--amber-bd); }
.st-unknown { background: #a7aa9e; }
.tag-announced {
  font-size: 9.5px; font-weight: 600; letter-spacing: .06em; color: var(--amber);
  border: 1px dashed var(--amber-bd); border-radius: 4px; padding: 1px 5px; background: var(--amber-bg);
}
.cell-spec .fam { font-size: 13px; }
.cell-spec .rev { font-family: "Spline Sans Mono", monospace; font-size: 11px; color: var(--ink-3); }
.meter { display: flex; gap: 2.5px; }
.meter span { width: 11px; height: 11px; border-radius: 2.5px; border: 1px solid var(--meter-bd); }
.meter span.empty { background: var(--meter-empty); border-color: var(--meter-empty-bd); }
.meter span.unk { background: var(--meter-unk); border-color: var(--meter-unk-bd); }
.meter.lg span { width: 15px; height: 15px; border-radius: 3.5px; }
.meter.sm span { width: 9px; height: 9px; border-radius: 2px; }
.tier-line { font-size: 11.5px; margin-top: 3px; }
.tier-line .claim-suffix { color: var(--amber); }
.chip-pqc {
  font-size: 10.5px; font-weight: 600; color: var(--aw-ink); background: var(--aw-bg);
  border: 1px solid var(--aw-bd); border-radius: 4px; padding: 1px 6px;
}
.upd-bucket { font-family: "Spline Sans Mono", monospace; font-size: 11.5px; color: var(--ink-2); }
.certchip {
  font-family: "Spline Sans Mono", monospace; font-size: 10.5px; font-weight: 500;
  border: 1px solid var(--bd-input); color: var(--ink-2); border-radius: 4px;
  padding: 1px 5px; white-space: nowrap;
}
.certchip.g { border-color: var(--good-bd); color: var(--good); }
.certchip.b { border-color: var(--cc-bd); color: var(--cc); }
.evsq { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 6px; }
.empty-state { padding: 44px; text-align: center; }
.empty-state .hd { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }

/* compare tray */
.tray {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 30;
  background: var(--dark); color: var(--on-dark-soft); border-radius: 999px;
  box-shadow: var(--shadow-tray); display: flex; align-items: center; gap: 12px;
  padding: 9px 12px 9px 18px; font-size: 13px;
}
.tray .cta {
  background: var(--accent-dark); color: #14201b; font-weight: 600; border: none;
  border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 13px;
}
.tray .clear { background: none; border: none; color: var(--on-dark-muted); font-size: 15px; cursor: pointer; padding: 2px 6px; }

/* ---------- generic view scaffolding ---------- */
.view-main { max-width: 1240px; margin: 0 auto; padding: 22px 28px 40px; width: 100%; }
.view-main h1 { font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 25px; letter-spacing: -0.01em; margin: 0 0 12px; }
.crumb { margin: 0 0 14px; font-size: 13px; }
.crumb a { text-decoration: none; }

/* ---------- detail ---------- */
.dhead {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 22px 26px; display: flex; gap: 24px 48px; flex-wrap: wrap; justify-content: space-between;
}
.dhead .eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dhead h1 { margin: 2px 0 10px; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 27px; letter-spacing: -0.01em; line-height: 1.15; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 12px; border: 1px solid var(--hairline); border-radius: 6px; padding: 3px 9px;
  background: var(--paper); color: var(--ink-2);
}
.chip .stdot { margin-right: 6px; vertical-align: 1px; }
.dhead-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.ghost {
  font-size: 12.5px; font-weight: 500; text-decoration: none; border: 1px solid var(--bd-btn);
  border-radius: 7px; padding: 6px 12px; color: var(--ink); background: none; cursor: pointer;
}
.ghost:hover { border-color: var(--accent); color: var(--accent); }
.posture { min-width: 240px; max-width: 290px; }
.posture .title { font-size: 15px; font-weight: 600; }
.posture .basis { font-size: 11.5px; margin-top: 1px; }
.posture .basis.claim { color: var(--amber); }
.posture .basis.evidence { color: var(--ink-3); }
.posture .meaning { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.45; text-wrap: pretty; }

.notice {
  margin-top: 14px; border: 1px solid var(--bd-input); background: var(--band);
  border-radius: 8px; padding: 9px 14px; font-size: 12.5px; color: var(--ink-2);
}

.dgrid { display: grid; grid-template-columns: 216px 1fr; gap: 28px; margin-top: 22px; align-items: start; }
@media (max-width: 900px) { .dgrid { grid-template-columns: 1fr; } .daside { position: static !important; } }
.daside { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 16px; }
.daside nav { display: flex; flex-direction: column; gap: 1px; }
.daside nav a {
  font-size: 12.5px; color: var(--ink-2); text-decoration: none; padding: 5px 10px;
  border-left: 2px solid var(--hairline);
}
.daside nav a:hover { color: var(--accent); border-left-color: var(--accent); }
.receipts-card { background: var(--dark); border-radius: 10px; padding: 14px 16px; }
.receipts-card .lbl { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.receipts-card .n { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 26px; color: var(--accent-dark); margin-top: 2px; }
.receipts-card .cap { font-size: 11px; color: var(--on-dark-soft); margin-top: -2px; }
.receipts-card .floor { border-top: 1px solid rgba(147,162,154,.3); margin: 10px 0; padding-top: 9px; font-size: 11.5px; color: var(--on-dark-soft); }
.receipts-card .floor .pill {
  display: inline-block; margin-top: 3px; font-family: "Spline Sans Mono", monospace;
  font-size: 10.5px; border: 1px solid rgba(147,162,154,.5); color: var(--on-dark-soft);
  border-radius: 4px; padding: 1px 7px;
}
.receipts-card .note { font-size: 10.5px; color: var(--on-dark-muted); line-height: 1.5; }

section.dsec { scroll-margin-top: 74px; margin-bottom: 28px; min-width: 0; }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.sec-head h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.sec-head .rule { flex: 1; border-top: 1px solid var(--hairline); }
.sec-head .cnt { font-family: "Spline Sans Mono", monospace; font-size: 11px; color: var(--ink-3); }

.kvrow { display: grid; grid-template-columns: 190px 1fr; gap: 2px 18px; padding: 7px 0; border-bottom: 1px solid var(--kv-line); }
@media (max-width: 700px) { .kvrow { grid-template-columns: 1fr; } }
.kvrow .k { font-size: 12.5px; color: var(--ink-3); padding-top: 1px; }
.kvrow .v { min-width: 0; }
.vline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vline .val { font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.vline .val.mono { font-size: 12.5px; }

.smark {
  display: inline-flex; align-items: center; gap: 4px; font-family: "Spline Sans Mono", monospace;
  font-size: 10px; color: var(--ink-2); border: 1px solid var(--bd-input); border-radius: 999px;
  padding: 1px 7px; background: var(--paper); cursor: pointer;
}
.smark:hover { border-color: var(--accent); color: var(--accent); }
.smark .dot { width: 5px; height: 5px; border-radius: 999px; }

.receipt {
  margin: 6px 0 2px; border: 1px solid var(--hairline); border-left-width: 3px;
  border-radius: 0 6px 6px 0; background: var(--receipt-bg); padding: 8px 12px;
}
.receipt .head { font-size: 11px; color: var(--ink-3); }
.receipt .head .type { font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.receipt .head a { font-size: 11.5px; }
.receipt .quote { font-style: italic; font-size: 12.5px; color: var(--quote-ink); margin-top: 4px; line-height: 1.55; text-wrap: pretty; }
.receipt .loc { font-family: "Spline Sans Mono", monospace; font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }
.receipt .reason { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }

.conflict {
  margin: 6px 0 2px; border: 1px solid var(--bad-bd); border-radius: 6px;
  background: var(--bad-bg); padding: 8px 12px;
}
.conflict .hd { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--bad); }
.conflict .val { font-size: 12.5px; color: var(--ink); margin-top: 3px; line-height: 1.5; }
.conflict .val .src { font-family: "Spline Sans Mono", monospace; font-size: 10.5px; color: var(--ink-3); }
.conflict .q { font-style: italic; font-size: 12px; color: var(--ink-2); margin-top: 3px; }

.cert-row { border: 1px solid var(--hairline); border-radius: 8px; background: var(--card); margin-bottom: 6px; padding: 9px 12px; }
.cert-row .row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge-fips { font-size: 10.5px; font-weight: 600; color: var(--good); border: 1px solid var(--good-bd); border-radius: 4px; padding: 1px 7px; background: var(--good-bg); white-space: nowrap; }
.badge-cc { font-size: 10.5px; font-weight: 600; color: var(--cc); border: 1px solid var(--cc-bd); border-radius: 4px; padding: 1px 7px; background: var(--cc-bg); }
.badge-cavp { font-size: 10.5px; font-weight: 600; color: var(--cavp); border: 1px solid var(--cavp-bd); border-radius: 4px; padding: 1px 7px; background: var(--cavp-bg); }
.cert-row .certno { font-family: "Spline Sans Mono", monospace; font-size: 13px; font-weight: 600; }
.cert-row .lvl { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.cert-row .stpill { margin-left: auto; font-size: 11px; font-weight: 500; border: 1px solid; border-radius: 999px; padding: 1px 8px; }
.stpill.active { color: var(--good); border-color: var(--good-bd); }
.stpill.historical { color: var(--ink-3); border-color: var(--bd-input); }
.stpill.revoked { color: var(--bad); border-color: var(--bad-bd); }
.cert-row .module { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.cert-row .fwline { font-family: "Spline Sans Mono", monospace; font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.cert-row .algline { font-family: "Spline Sans Mono", monospace; font-size: 10.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.6; }

.grid-table { border: 1px solid var(--hairline); border-radius: 8px; background: var(--card); overflow: hidden; }
.grid-table .ghead {
  display: grid; gap: 12px; padding: 7px 12px; background: var(--band);
  border-bottom: 1px solid var(--hairline); font-size: 10px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
.grid-table .grow-line { display: grid; gap: 12px; align-items: baseline; padding: 8px 12px; border-bottom: 1px solid var(--kv-line); }
.grid-table .grow-line:last-child { border-bottom: none; }
.algs .ghead, .algs .grow-line { grid-template-columns: 180px 1fr 150px 58px; }
.fwv .ghead, .fwv .grow-line { grid-template-columns: 200px 90px 1fr 58px; }
@media (max-width: 800px) {
  .algs .ghead, .algs .grow-line { grid-template-columns: 130px 1fr 90px 50px; }
  .fwv .ghead, .fwv .grow-line { grid-template-columns: 110px 70px 1fr 50px; }
}
.grid-table .aid { font-family: "Spline Sans Mono", monospace; font-size: 12px; font-weight: 500; }
.grid-table .aparams { font-size: 12px; color: var(--ink-2); line-height: 1.55; }
.grid-table .afn { font-size: 11.5px; color: var(--ink-2); }

.codeblock {
  font-family: "Spline Sans Mono", monospace; font-size: 12px; line-height: 1.55;
  background: var(--code-bg); border: 1px solid var(--hairline); border-radius: 7px;
  padding: 8px 12px; white-space: pre-wrap; word-break: break-word;
}

blockquote.claim {
  margin: 8px 0; padding: 6px 14px; border-left: 3px solid var(--amber-bd);
  background: var(--amber-row); border-radius: 0 6px 6px 0;
}
blockquote.claim .q { font-style: italic; font-size: 13px; color: var(--quote-ink); line-height: 1.55; text-wrap: pretty; }
blockquote.claim .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; font-size: 11px; color: var(--ink-3); }
.chip-claimtype {
  font-size: 9.5px; font-weight: 600; letter-spacing: .05em; color: var(--amber);
  border: 1px dashed var(--amber-bd); border-radius: 4px; padding: 1px 6px; background: var(--amber-bg);
}
.cve-chip {
  font-family: "Spline Sans Mono", monospace; font-size: 11px; font-weight: 600;
  color: var(--bad); border: 1px solid var(--bad-bd); border-radius: 4px; padding: 1px 7px;
  background: var(--bad-bg); white-space: nowrap;
}
a.cve-chip { text-decoration: none; }
a.cve-chip:hover { color: var(--bad); border-color: var(--bad); filter: brightness(0.96); }
.conf-pill { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 10px; border: 1px solid; }
.conf-pill.high { color: var(--good); border-color: var(--good-bd); background: var(--good-bg); }
.conf-pill.medium { color: var(--amber); border-color: var(--amber-bd); background: var(--amber-bg); }
.conf-pill.low { color: var(--bad); border-color: var(--bad-bd); background: var(--bad-bg); }
.review-notes { font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; line-height: 1.6; }

.src-row { display: grid; grid-template-columns: 34px 122px minmax(0,1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--kv-line); align-items: baseline; }
@media (max-width: 700px) { .src-row { grid-template-columns: 34px 1fr; } .src-row .tcol { display: none; } }
.src-row .sid { font-family: "Spline Sans Mono", monospace; font-size: 11px; font-weight: 600; }
.src-row .tcol { text-align: right; }
.ev-chip { display: inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border: 1px solid; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.src-row .meta { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.src-row .hash { font-family: "Spline Sans Mono", monospace; font-size: 10px; color: var(--faint); margin-top: 1px; }

/* ---------- compare ---------- */
.cmp-scroll { overflow-x: auto; }
table.cmp { border-collapse: collapse; min-width: 680px; width: 100%; background: var(--card); border: 1px solid var(--hairline); border-radius: 12px; }
table.cmp th, table.cmp td { padding: 9px 12px; border-bottom: 1px solid var(--row-line); text-align: left; vertical-align: top; font-size: 12.5px; }
table.cmp thead th { background: var(--band); }
table.cmp tbody th { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; width: 190px; }
.tick { color: var(--good); font-weight: 700; } .cross { color: var(--bad); font-weight: 700; }

/* ---------- announced ---------- */
.ann-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.ann-card {
  border: 2px dashed var(--amber-bd); background: var(--amber-row); border-radius: 12px;
  padding: 16px 18px; cursor: pointer;
}
.ann-card:hover { border-style: solid; }
.ann-card h3 { margin: 0 0 2px; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ann-card h3 a { text-decoration: none; color: var(--ink); }
.ann-card .vend { font-size: 12px; color: var(--ink-3); }
.ann-card .tline { font-size: 12px; margin-top: 7px; }
.ann-card .meta { font-family: "Spline Sans Mono", monospace; font-size: 10.5px; color: var(--ink-3); margin-top: 6px; }

/* ---------- about ---------- */
.about { max-width: 860px; }
.about .card { background: var(--card); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px 20px; margin: 14px 0; }
.tier-ladder .lrow { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--kv-line); }
.tier-ladder .lrow:last-child { border-bottom: none; }
.tier-ladder .name { font-weight: 600; font-size: 13.5px; min-width: 190px; }
.tier-ladder .desc { color: var(--ink-2); font-size: 12.5px; }
.ev-rank { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }

/* ---------- CBOM viewer (restyled) ---------- */
.json-view details { border: 1px solid var(--hairline); border-radius: 8px; margin-bottom: 6px; background: var(--card); }
.json-view summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-family: "Spline Sans Mono", monospace; font-size: 12.5px; }
.json-view summary .count { color: var(--ink-3); font-weight: 400; font-size: 11px; }
pre.json {
  margin: 0; padding: 10px 12px; overflow-x: auto; background: var(--code-bg);
  border-top: 1px solid var(--hairline); border-radius: 0 0 8px 8px;
  font-family: "Spline Sans Mono", monospace; font-size: 11.5px; line-height: 1.55; tab-size: 2;
}
.j-key { color: var(--accent); } .j-str { color: var(--good); }
.j-num { color: var(--amber); } .j-kw { color: var(--bad); font-weight: 600; }

.footer { border-top: 1px solid var(--hairline); color: var(--ink-3); font-size: 12px; padding: 14px 28px 22px; max-width: 1240px; margin: 24px auto 0; }
.skiplink { position: absolute; left: -9999px; }
.skiplink:focus { left: 8px; top: 8px; background: var(--card); padding: 6px 10px; z-index: 99; border-radius: 6px; }

/* Class-separation note under the pulse tier bar: adjacent roots of trust are
   not TPMs and are excluded from the readiness distribution (METHODOLOGY §5). */
.adjacent-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 74ch;
}