/* ==========================================================================
   components.css — Load order 3 of 3.
   Implements FU-V1 primitives (.disclosure, .kpi-bloom, .sparkline,
   .chip-row, .delta-arrow, .slide-over, .status-strip) + shipped
   FreshnessBadge / ChipFilter, plus this consumer's own shapes.
   ========================================================================== */

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

.pub-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-surface-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.pub-head__inner {
  display: flex;
  align-items: center;
  gap: var(--space-comfortable);
  min-height: 58px;
  padding-block: var(--space-compact);
}

.pub-mast {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.pub-mast:hover { text-decoration: none; }
.pub-mast {
  font-family: var(--type-family-display);
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.pub-mast b { font-weight: var(--type-weight-semibold); }

.pub-nav {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.pub-nav a {
  padding: 6px 10px;
  font-size: var(--type-scale-small);
  color: var(--color-text-secondary);
  border-radius: var(--radius-subtle);
  white-space: nowrap;
}
.pub-nav a:hover { background: var(--color-surface-bg-sunken); text-decoration: none; color: var(--color-text-primary); }
.pub-nav a[aria-current="page"] {
  color: var(--color-text-primary);
  font-weight: var(--type-weight-medium);
  box-shadow: inset 0 -2px 0 var(--color-accent-primary);
}

@media (min-width: 900px) { .pub-nav { display: flex; } .pub-nav-burger { display: none; } }

.pub-nav-burger {
  margin-left: auto;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-subtle);
  padding: 6px 11px;
  font-size: var(--type-scale-small);
}

.pub-nav-drawer {
  display: none;
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-compact) var(--space-comfortable);
}
.pub-nav-drawer[data-open="true"] { display: block; }
.pub-nav-drawer a {
  display: block;
  padding: 10px 2px;
  font-size: var(--type-scale-body);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 900px) { .pub-nav-drawer { display: none !important; } }

/* ==================== status strip (T0) ==================== */

.status-strip {
  background: var(--color-surface-bg-inverse);
  color: var(--color-text-inverse);
}
.status-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-comfortable) var(--space-airy);
  padding-block: 11px;
}
.strip-chunk {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: var(--type-scale-small);
}
.strip-chunk dt {
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--type-tracking-wide);
  color: color-mix(in srgb, var(--color-text-inverse) 62%, transparent);
}
.strip-chunk dd {
  margin: 0;
  font-family: var(--type-family-mono);
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}
.strip-spacer { margin-left: auto; }

/* ==================== depth control ==================== */

.depth-bar {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-bg-subtle);
}
.depth-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-comfortable);
  padding-block: 10px;
}

.segmented {
  display: inline-flex;
  padding: 2px;
  background: var(--color-surface-bg-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-subtle);
}
.segmented button {
  border: 0;
  background: none;
  padding: 5px 12px;
  font-size: var(--type-scale-caption);
  font-family: var(--type-family-mono);
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--color-text-tertiary);
  border-radius: 2px;
  transition: background var(--motion-duration-subtle) var(--motion-easing-standard),
              color var(--motion-duration-subtle) var(--motion-easing-standard);
}
.segmented button[aria-pressed="true"] {
  background: var(--color-surface-bg-raised);
  color: var(--color-text-primary);
  box-shadow: var(--elevation-raised);
  font-weight: var(--type-weight-medium);
}

.depth-hint {
  font-size: var(--type-scale-caption);
  color: var(--color-text-tertiary);
  flex: 1 1 240px;
  min-width: 0;
}

/* ==================== chip row / filter ==================== */

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  background: var(--color-surface-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-rounded);
  transition: all var(--motion-duration-subtle) var(--motion-easing-standard);
}
.chip:hover { border-color: var(--color-border-strong); text-decoration: none; }
.chip[aria-pressed="true"] {
  background: var(--color-surface-bg-inverse);
  border-color: var(--color-surface-bg-inverse);
  color: var(--color-text-inverse);
}

/* ==================== severity tokens ==================== */

.sev { --sev-fg: var(--color-text-secondary); --sev-bg: var(--color-accent-neutral-soft); }
.sev-green  { --sev-fg: var(--color-accent-success); --sev-bg: var(--color-accent-success-soft); }
.sev-amber  { --sev-fg: var(--color-accent-warning); --sev-bg: var(--color-accent-warning-soft); }
.sev-red    { --sev-fg: var(--color-accent-danger);  --sev-bg: var(--color-accent-danger-soft); }
.sev-void   { --sev-fg: var(--color-text-tertiary);  --sev-bg: var(--color-accent-neutral-soft); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-eyebrow);
  font-weight: var(--type-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sev-fg, var(--color-text-secondary));
  background: var(--sev-bg, var(--color-accent-neutral-soft));
  border-radius: var(--radius-subtle);
  white-space: nowrap;
}
.badge-dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

/* ==================== FreshnessBadge (shipped primitive) ==================== */

.freshness-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
}
.freshness-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent-success);
}
.freshness-badge[data-state="stale"] { color: var(--color-accent-warning); }
.freshness-badge[data-state="stale"]::before { background: var(--color-accent-warning); }
.freshness-badge[data-state="aged"] { color: var(--color-accent-danger); }
.freshness-badge[data-state="aged"]::before { background: var(--color-accent-danger); }

/* ==================== card / panel ==================== */

.panel {
  background: var(--color-surface-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-subtle);
  padding: var(--space-comfortable);
}
.panel-airy { padding: var(--space-airy); }
.panel-flush { padding: 0; overflow: hidden; }
.panel-quiet { background: var(--color-surface-bg-subtle); }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-compact);
  flex-wrap: wrap;
  padding: 13px var(--space-comfortable);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-bg-subtle);
}

/* ==================== kpi-bloom (DL-V2 / FU-V1) ==================== */

.kpi-bloom {
  background: var(--color-surface-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-subtle);
  overflow: hidden;
}
.kpi-bloom-rest {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: var(--space-comfortable);
}
.kpi-bloom-rest:hover { background: var(--color-surface-bg-subtle); }
.kpi-bloom-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-compact);
  margin-top: 6px;
}
.kpi-bloom-value .figure {
  font-family: var(--type-family-display);
  font-size: 2.125rem;
  line-height: 1;
  letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums;
}
.kpi-bloom-sub {
  margin-top: 7px;
  font-size: var(--type-scale-caption);
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-bloom-reveal {
  display: none;
  padding: var(--space-comfortable);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-bg-subtle);
  font-size: var(--type-scale-small);
}
.kpi-bloom[data-bloom="open"] .kpi-bloom-reveal { display: block; }

.bloom-caret {
  margin-left: auto;
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-eyebrow);
  color: var(--color-text-tertiary);
  transition: transform var(--motion-duration-subtle) var(--motion-easing-standard);
}
.kpi-bloom[data-bloom="open"] .bloom-caret { transform: rotate(180deg); }

/* ==================== disclosure (FU-V1, Rule 9) ==================== */

.disclosure { border-top: 1px solid var(--color-border); }
.disclosure:first-of-type { border-top: 0; }

.disclosure-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-compact);
  width: 100%;
  padding: 14px var(--space-comfortable);
  background: none;
  border: 0;
  text-align: left;
  transition: background var(--motion-duration-subtle) var(--motion-easing-standard);
}
.disclosure-trigger:hover { background: var(--color-surface-bg-subtle); }
.disclosure-trigger .caret {
  flex-shrink: 0;
  font-family: var(--type-family-mono);
  font-size: 0.625rem;
  color: var(--color-text-tertiary);
  transition: transform var(--motion-duration-subtle) var(--motion-easing-standard);
}
.disclosure[data-open="true"] .caret { transform: rotate(90deg); }

.disclosure-panel {
  display: none;
  padding: 0 var(--space-comfortable) var(--space-comfortable);
}
.disclosure[data-open="true"] .disclosure-panel { display: block; }

/* ==================== gauge ==================== */

.gauge-wrap { display: flex; align-items: center; gap: var(--space-airy); flex-wrap: wrap; }

.gauge-track {
  position: relative;
  height: 9px;
  border-radius: var(--radius-rounded);
  background: linear-gradient(90deg,
    var(--color-accent-danger) 0%,
    var(--color-accent-warning) 42%,
    var(--color-accent-success) 100%);
  flex: 1 1 220px;
  min-width: 160px;
}
.gauge-needle {
  position: absolute;
  top: -5px;
  width: 3px;
  height: 19px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px var(--color-surface-bg-raised);
}
.gauge-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-eyebrow);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==================== tripwire board ==================== */

.channel + .channel { margin-top: var(--space-airy); }

.channel-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-compact);
  flex-wrap: wrap;
  padding-bottom: 7px;
  margin-bottom: var(--space-compact);
  border-bottom: 1px solid var(--color-border-strong);
}

.wire {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-subtle);
  background: var(--color-surface-bg-raised);
  border-left: 3px solid var(--sev-fg, var(--color-border));
}
.wire + .wire { margin-top: 6px; }

.wire-rest {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px var(--space-comfortable);
  align-items: center;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 11px var(--space-comfortable);
}
.wire-rest:hover { background: var(--color-surface-bg-subtle); }

.wire-name { font-weight: var(--type-weight-medium); font-size: var(--type-scale-small); }
.wire-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 13px;
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-eyebrow);
  color: var(--color-text-tertiary);
}
.wire-figure {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--type-family-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wire-figure .v { font-size: var(--type-scale-body-lg); font-weight: var(--type-weight-medium); }
.wire-figure .t { font-size: var(--type-scale-eyebrow); color: var(--color-text-tertiary); }

/* Below the board breakpoint the sparkline and its placeholder are dropped:
   the figure + threshold pair and the state badge are what the row is for. */
@media (max-width: 759px) {
  .wire-rest > .cluster { justify-self: end; flex-wrap: nowrap; }
  .wire-rest .sparkline { display: none; }
  .wire-rest > .cluster > .caption { display: none; }
  .wire-figure { flex-wrap: wrap; white-space: normal; }
}

@media (min-width: 760px) {
  .wire-rest { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.6fr) auto auto; }
  .wire-meta { grid-column: auto; flex-direction: column; gap: 2px; }
}

.wire-detail {
  display: none;
  padding: var(--space-comfortable);
  border-top: 1px dashed var(--color-border);
  background: var(--color-surface-bg-subtle);
}
.wire[data-open="true"] .wire-detail { display: block; }

/* ==================== dl grid (field/value pairs) ==================== */

.fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-subtle);
  overflow: hidden;
}
@media (min-width: 620px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .fields-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 820px) { .fields-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.field { background: var(--color-surface-bg-raised); padding: 10px 13px; min-width: 0; }
.field dt {
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
}
.field dd {
  margin: 3px 0 0;
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-small);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

/* ==================== matrix ==================== */

.matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--type-scale-small);
  min-width: 640px;
}
.matrix th, .matrix td {
  padding: 9px 11px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.matrix thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface-bg-subtle);
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  font-weight: var(--type-weight-medium);
  border-bottom: 1px solid var(--color-border-strong);
}
.matrix tbody th { font-weight: var(--type-weight-medium); background: var(--color-surface-bg-raised); }
.matrix tbody tr:hover td { background: var(--color-surface-bg-subtle); }

.cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 2px 7px;
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-caption);
  font-variant-numeric: tabular-nums;
  color: var(--sev-fg);
  background: var(--sev-bg);
  border-radius: var(--radius-subtle);
}

/* ==================== sparkline ==================== */

.sparkline { display: block; overflow: visible; }
.sparkline path { vector-effect: non-scaling-stroke; }

/* ==================== judgment card ==================== */

.judgment { border: 1px solid var(--color-border); border-radius: var(--radius-subtle); background: var(--color-surface-bg-raised); }
.judgment + .judgment { margin-top: var(--space-compact); }
.judgment-head { display: flex; gap: var(--space-comfortable); align-items: flex-start; padding: var(--space-comfortable); }
.judgment-id {
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-eyebrow);
  color: var(--color-text-tertiary);
  padding-top: 3px;
  flex-shrink: 0;
}
.judgment-text { font-size: var(--type-scale-body-lg); line-height: var(--type-leading-normal); }

/* ==================== delta arrow ==================== */

.delta-arrow { font-family: var(--type-family-mono); font-size: var(--type-scale-caption); color: var(--sev-fg, var(--color-text-tertiary)); white-space: nowrap; }

/* ==================== slide-over ==================== */

.slide-over {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(480px, 100%);
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface-bg-raised);
  box-shadow: var(--elevation-floating);
  overflow-y: auto;
}
.slide-over::backdrop { background: rgba(22, 38, 59, 0.34); }
.slide-over-head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-compact);
  padding: var(--space-comfortable);
  background: var(--color-surface-bg-raised);
  border-bottom: 1px solid var(--color-border);
}
.slide-over-body { padding: var(--space-comfortable); }
.icon-btn {
  background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-subtle); padding: 4px 9px;
  font-family: var(--type-family-mono); font-size: var(--type-scale-caption);
  color: var(--color-text-secondary);
}

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

.pub-cta--ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  font-size: var(--type-scale-small);
  font-weight: var(--type-weight-medium);
  border-radius: var(--radius-subtle);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-bg-raised);
  color: var(--color-text-primary);
  transition: all var(--motion-duration-subtle) var(--motion-easing-standard);
}
.pub-cta--ghost:hover { text-decoration: none; background: var(--color-surface-bg-subtle); }
.pub-cta {
  background: var(--color-surface-bg-inverse);
  border-color: var(--color-surface-bg-inverse);
  color: var(--color-text-inverse);
}
.pub-cta:hover { background: color-mix(in srgb, var(--color-surface-bg-inverse) 88%, var(--palette-white)); }
.btn-ghost { border-color: transparent; background: none; padding-inline: 4px; }
.btn-ghost:hover { background: none; text-decoration: underline; }

/* ==================== gap / empty state ==================== */

.gap-note {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-subtle);
  background: var(--color-surface-bg-subtle);
  padding: var(--space-comfortable);
}

/* ==================== depth visibility ==================== */
/* T0 always visible. Higher tiers reveal as depth increases. */
/* Hide by matching only what should be hidden. Revealing by re-declaring
   `display` would clobber whatever display the component itself needs
   (flex, grid), so a visible tier carries no display declaration at all. */
body:not([data-depth]) [data-tier="t1"],
body:not([data-depth]) [data-tier="t2"],
body:not([data-depth]) [data-tier="t3"],
body[data-depth="t0"] [data-tier="t1"],
body[data-depth="t0"] [data-tier="t2"],
body[data-depth="t0"] [data-tier="t3"],
body[data-depth="t1"] [data-tier="t2"],
body[data-depth="t1"] [data-tier="t3"],
body[data-depth="t2"] [data-tier="t3"] { display: none; }

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

.pub-foot {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-bg-subtle);
  padding-block: var(--space-gutter);
  margin-top: var(--space-section);
}
.pub-foot__cols { display: grid; gap: var(--space-airy); grid-template-columns: 1fr; }
@media (min-width: 760px) { .pub-foot__cols { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.pub-foot a { color: var(--color-text-secondary); font-size: var(--type-scale-small); display: block; padding: 3px 0; }

.pub-trust {
  margin-top: var(--space-airy);
  padding-top: var(--space-comfortable);
  border-top: 1px solid var(--color-border);
  font-size: var(--type-scale-caption);
  color: var(--color-text-tertiary);
  line-height: var(--type-leading-normal);
  max-width: 76ch;
}

/* ==========================================================================
   ADDENDUM §10 components
   Evidence drawer, source-tier tags, thesis cards, evidence rails, episodes.
   ========================================================================== */

/* ---------- source-tier + classification tags ---------- */
.tier-tag {
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-eyebrow);
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-subtle);
  color: var(--color-text-tertiary);
  background: var(--color-surface-bg-subtle);
  white-space: nowrap;
}
.tier-tag.tier-T1, .tier-tag.tier-T2 { color: var(--color-text-secondary); border-color: var(--color-border-strong); }
.tier-tag.tier-T5, .tier-tag.tier-breach {
  color: var(--color-accent-danger);
  border-color: color-mix(in srgb, var(--color-accent-danger) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent-danger) 7%, var(--color-surface-bg-raised));
}
.tier-tag.tier-SA, .tier-tag.tier-CC, .tier-tag.tier-TS {
  color: var(--color-accent-primary);
  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border));
}

.chip-evidence { cursor: pointer; }
.chip-evidence::before {
  content: "";
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--color-accent-primary);
  display: inline-block; margin-right: 5px;
}
.chip-sm { padding: 2px 7px; font-size: var(--type-scale-eyebrow); }

/* ---------- clickable rows ---------- */
.matrix-clickable tbody tr { cursor: pointer; }
.matrix-clickable tbody tr:hover td,
.matrix-clickable tbody tr:hover th { background: var(--color-surface-bg-subtle); }
.matrix-clickable tbody tr:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: -2px; }

/* ---------- evidence drawer ---------- */
.slide-over-wide { width: min(660px, 100%); }
.ev-head-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ev-filters {
  position: sticky; top: 0; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 10px var(--space-comfortable);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-bg-subtle);
}
.ev-filters .btn-ghost { margin-left: auto; }
.ev-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-subtle);
  background: var(--color-surface-bg);
  padding: var(--space-comfortable);
}
.ev-card + .ev-card { margin-top: var(--space-compact); }
.ev-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-pub { font-size: var(--type-scale-small); font-weight: var(--type-weight-medium); }
.ev-url-state {
  margin-left: auto;
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-eyebrow);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.ev-url-state[data-state="resolved"] { color: var(--color-accent-success); }
.ev-url-state[data-state="unreachable"] { color: var(--color-accent-warning); }
.ev-title { font-size: var(--type-scale-body); margin: 8px 0 2px; }
.ev-series { font-size: var(--type-scale-caption); color: var(--color-text-tertiary); margin: 0 0 7px; }
.ev-link {
  display: block;
  font-family: var(--type-family-mono);
  font-size: var(--type-scale-caption);
  word-break: break-all;
  color: var(--color-accent-primary);
}
.ev-fields { margin-top: var(--space-compact); }
.ev-note { margin-top: var(--space-compact); }
.ev-copy { margin-top: 9px; }
.ev-foot {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px var(--space-comfortable);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-bg-raised);
}
.ev-foot .pub-cta--ghost { font-size: var(--type-scale-caption); max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- thesis cards ---------- */
.thesis {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-subtle);
  background: var(--color-surface-bg-raised);
  padding: var(--space-airy);
}
.thesis + .thesis { margin-top: var(--space-airy); }
.thesis-head { display: flex; gap: var(--space-comfortable); justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.lede-sm { font-family: var(--type-family-display); font-size: var(--type-scale-body-lg); line-height: var(--type-leading-normal); margin-top: var(--space-compact); max-width: 62ch; }
.thesis-rails { display: grid; gap: var(--space-comfortable); grid-template-columns: 1fr; margin-top: var(--space-comfortable); }
@media (min-width: 900px) { .thesis-rails { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.thesis-foot {
  display: flex; gap: var(--space-comfortable); flex-wrap: wrap; align-items: center;
  margin-top: var(--space-comfortable); padding-top: var(--space-compact);
  border-top: 1px solid var(--color-border);
}
.thesis-foot .link, .link { color: var(--color-accent-primary); }

/* ---------- evidence rail (C1: rendered by reference, never authored) ---------- */
.rail { list-style: none; margin: 8px 0 0; padding: 0; }
.rail-item {
  display: grid; gap: 1px 10px; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "name val chip" "meta val chip";
  padding: 7px 10px;
  border-left: 2px solid var(--sev-fg, var(--color-border));
  background: var(--color-surface-bg-subtle);
  min-width: 0;
}
.rail-item + .rail-item { margin-top: 4px; }
.rail-link { grid-area: name; font-size: var(--type-scale-small); font-weight: var(--type-weight-medium); min-width: 0; }
.rail-val {
  grid-area: val; align-self: center;
  font-family: var(--type-family-mono); font-size: var(--type-scale-small);
  color: var(--sev-fg, var(--color-text-primary)); text-align: right; white-space: nowrap;
}
.rail-meta { grid-area: meta; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.rail-state { font-family: var(--type-family-mono); font-size: var(--type-scale-eyebrow); color: var(--sev-fg, var(--color-text-tertiary)); }
.rail-dist, .rail-asof { font-size: var(--type-scale-eyebrow); color: var(--color-text-tertiary); }
.rail-item .chip { grid-area: chip; align-self: center; }
.rail-falsify .rail-item { border-left-style: dashed; }

/* ---------- validation episodes ---------- */
.episode {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-subtle);
  background: var(--color-surface-bg-raised);
  padding: var(--space-airy);
}
.episode + .episode { margin-top: var(--space-comfortable); }

/* ---------- generic panels / tables used by the new surfaces ---------- */
.panel-critical {
  border-left: 2px solid var(--color-accent-danger);
  background: color-mix(in srgb, var(--color-accent-danger) 5%, var(--color-surface-bg-raised));
  padding: var(--space-comfortable);
}
.badge-quiet { color: var(--color-text-tertiary); white-space: normal; text-transform: none; letter-spacing: 0.01em; }
.list-tight { margin: 6px 0 0; padding-left: 1.1em; }
.list-tight li + li { margin-top: 4px; }
.table { width: 100%; border-collapse: collapse; font-size: var(--type-scale-small); }
.table th, .table td { text-align: left; padding: 8px 11px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.table thead th { font-family: var(--type-family-mono); font-size: var(--type-scale-eyebrow); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-tertiary); }
.k { font-family: var(--type-family-mono); font-size: var(--type-scale-eyebrow); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-tertiary); margin-right: 6px; }
.h6 { font-family: var(--type-family-display); font-size: var(--type-scale-body); font-weight: var(--type-weight-medium); margin: 0 0 5px; }

/* ---------- posture-in-time chart ---------- */
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart-scroll svg { min-width: 700px; max-width: 100%; height: auto; display: block; }
.lg-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 5px; vertical-align: -1px;
}
.lg-hollow { background: none !important; border: 1px dashed currentColor; }
.lg-hatch {
  background-color: var(--color-accent-warning-soft);
  background-image: repeating-linear-gradient(45deg,
    var(--color-accent-warning) 0 2px, transparent 2px 5px);
}
.chart-legend {
  list-style: none; margin: var(--space-compact) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: var(--type-scale-caption); color: var(--color-text-secondary);
}
.chart-legend li { display: flex; align-items: center; min-width: 0; }

.badge-wrap { white-space: normal; }

.chart-hint { margin-top: 6px; color: var(--color-text-tertiary); }
@media (min-width: 760px) { .chart-hint { display: none; } }

/* ==================== threshold band gauge (ported from the 6-year monitor) ==================== */
.tgauge { position: relative; height: 26px; margin: 2px 0 6px; }
.tgauge-track {
  position: absolute; left: 0; right: 0; top: 9px; height: 8px;
  border-radius: var(--radius-full); overflow: hidden;
  background: var(--color-accent-success-soft);
}
.tgauge-warn, .tgauge-danger { position: absolute; top: 0; bottom: 0; }
.tgauge-warn { background: var(--color-accent-warning-soft); }
.tgauge-danger { background: var(--color-accent-danger-soft); }
.tgauge-tick {
  position: absolute; top: 4px; width: 1px; height: 18px;
  background: var(--color-accent-warning); transform: translateX(-0.5px);
}
.tgauge-tick.is-trigger { background: var(--color-accent-danger); }
.tgauge-marker {
  position: absolute; top: 5px; width: 3px; height: 16px; border-radius: 2px;
  background: var(--color-text-primary); transform: translateX(-1.5px);
  box-shadow: 0 0 0 2px var(--color-surface-bg);
}
.tgauge-cap {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-family: var(--type-family-mono); font-size: var(--type-scale-caption);
  color: var(--color-text-tertiary);
}
.tgauge-cap b { color: var(--color-text-secondary); font-weight: var(--type-weight-medium); }
.tgauge-cap .cap-gap { color: var(--color-text-primary); }

/* ---- PORT FIX: 8 layout classes used by the mockup with ZERO backing CSS.
   This is the SS10.7 defect shape (an off-pattern class with no CSS behind it
   shipping a broken reader surface). Found and cured at port time. ---- */
.read-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.mon-grid {display:grid;grid-template-columns:1fr;gap:10px}
.pm-grid  {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.fw-grid  {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.bs-grid  {display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.ent-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.v-grid   {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.fields-2 {display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
@media(max-width:720px){.read-grid,.pm-grid,.fw-grid,.bs-grid,.ent-grid,.v-grid,.fields-2{grid-template-columns:1fr}}

/* ---- pub-* chrome contract aliases (25-class shell vocabulary) ---- */
.pub-head{position:sticky;top:0;z-index:50}
.pub-foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}

/* ---- R35 stale banner: a rendered state, not a caption ---- */
.pub-stale{display:block;padding:10px 0;border-bottom:1px solid var(--line,#2a2a2a);
  font-size:13px;line-height:1.5}
.pub-stale[data-fresh="stale"]{background:#3a2a12;color:#f0c674}
.pub-stale[data-fresh="fresh"]{background:#16241a;color:#8fd19e}
.pub-stale[data-fresh="unknown"]{background:#2a2a2a;color:#bbb}
.pub-stale .pub-wrap{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.pub-stale b{font-weight:600}

/* ---- PORT FIX 2: two further no-backing-CSS classes, found by the §10.7 gate
   in verify_port.py rather than by eye. ---- */

/* .rail-support is the solid counterpart to .rail-falsify (which IS styled,
   `border-left-style: dashed`). The pairing was implied by the markup and
   never declared, so a supporting rail and a falsifying rail rendered
   identically -- the one visual distinction the evidence rail exists to make.
   Declared explicitly rather than left to the default. */
.rail-support .rail-item { border-left-style: solid; }

/* NO .sev-* addition here, deliberately. The §10.7 gate flagged a bare `sev-`
   and my first cure invented a `.sev-excluded` colour for it. Reading the
   renderer first (mockup assets/app.js:393 `sev: ""` for tier-excluded, and
   :405 `sevOf` returning "" for a mild negative correlation) shows the empty
   severity is the AUTHOR'S CHOICE -- those cells are meant to carry no severity
   colour at all. The defect is only that a deliberate "no severity" was
   expressed as an invalid class name. Cure is in post_pass.py: drop the
   modifier, keep the base .sev. Giving it a colour would have invented a
   distinction the design never made.
   W3 BUILDER REQUIREMENT: builders emit `class="sev"` with no modifier for an
   absent severity, never a trailing `sev-`. */

/* Declared extension: a footer entry for a surface that is not built yet.
   Rendered as text rather than a link so nothing invites a dead click, but
   still legible at the same weight as its siblings. */
.pub-foot__planned {
  display: inline-block;
  color: var(--color-text-muted, #6b7280);
  cursor: default;
}