/* Component kit. Identical across every surface — the gallery, the report,
 * the verifier and the CI view all draw from exactly these classes. */

/* ---- Panel -------------------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}
.panel-raised {
  background: var(--panel-raised);
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.panel-head > * {
  min-width: 0;
}
.panel-head h2 {
  font-size: var(--step-1);
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  border-color: var(--ink-faint);
}
/* Selects borrow the button skin but must be allowed to shrink. */
select.btn {
  max-width: 100%;
  text-transform: none;
}
.btn[aria-pressed="true"] {
  border-color: var(--state, var(--data));
  background: var(--state-wash, var(--data-wash));
  color: var(--ink);
}
.btn-primary {
  border-color: color-mix(in srgb, var(--data) 55%, transparent);
  background: var(--data-wash);
}

/* ---- VerdictStamp ------------------------------------------------------- */

.verdict-stamp {
  display: inline-flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--state);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--state-wash);
  animation: stamp-lock var(--motion-stamp) both;
}
.verdict-stamp .verdict-word {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--state);
}
.verdict-stamp .verdict-scope {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}

@keyframes stamp-lock {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* The persistent header chip: the central object is never out of sight. */
.verdict-chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--state, var(--line));
  border-radius: 999px;
  background: var(--state-wash, transparent);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.verdict-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--state, var(--ink-faint));
  flex: none;
}
.verdict-chip .chip-label {
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- PillTaxonomy ------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 1px var(--s-2);
  border: 1px solid color-mix(in srgb, var(--state, var(--line)) 55%, transparent);
  border-radius: 3px;
  background: var(--state-wash, transparent);
  color: var(--state, var(--ink-muted));
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill-neutral {
  --state: var(--ink-muted);
  --state-wash: transparent;
}
.pill-data {
  --state: var(--data);
  --state-wash: var(--data-wash);
}

/* ---- GateReadout -------------------------------------------------------- */

.gate-readout {
  display: grid;
  gap: var(--s-1);
}
.gate-group {
  margin-top: var(--s-3);
}
.gate-group-title {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--s-2);
}
.gate-check {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line-soft);
}
.gate-check:last-child {
  border-bottom: 0;
}
.gate-check .tick {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 2px;
  background: var(--state);
}
.gate-check .check-label {
  display: block;
}
.gate-check .check-id {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.gate-check .check-delta {
  display: grid;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-align: right;
  max-width: 46ch;
  overflow-wrap: anywhere;
}
.gate-check .expected {
  color: var(--ink-faint);
}
.gate-check .actual {
  color: var(--state);
}

/* ---- Metrics ------------------------------------------------------------ */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.metric {
  background: var(--panel);
  padding: var(--s-4);
}
.metric .metric-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.metric .metric-value {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  color: var(--metric-color, var(--ink));
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.metric .metric-note {
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* ---- TrajectoryLanes ---------------------------------------------------- */

.lanes {
  display: grid;
  gap: var(--s-2);
}
.lane {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: var(--s-3);
}
.lane-name {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lane-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
}
.lane-cell {
  height: 30px;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--state) 45%, transparent);
  background: var(--state-wash);
  position: relative;
}
.lane-cell[data-missing="true"] {
  border-style: dashed;
  background: transparent;
}
.lane-axis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  text-align: center;
}
.lane-divergence {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-left: 3px solid var(--state);
  background: var(--state-wash);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step--1);
}

/* ---- EvidenceRow -------------------------------------------------------- */

.evidence-table {
  display: grid;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.evidence-row {
  display: grid;
  grid-template-columns: minmax(180px, 2.2fr) minmax(120px, 1.6fr) 84px 108px;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
/* Rows that double as tamper toggles keep the table look but act as buttons. */
button.evidence-row-btn {
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.evidence-row-btn:hover {
  background: var(--panel-raised);
}
button.evidence-row-btn[aria-pressed="true"] {
  background: var(--no-go-wash);
  box-shadow: inset 3px 0 0 var(--no-go);
}
.evidence-row.is-head {
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom-color: var(--line);
  position: sticky;
  top: var(--header-h);
  background: var(--panel);
  z-index: 1;
}
.evidence-row .path {
  overflow-wrap: anywhere;
  color: var(--ink);
}
.evidence-row .sha {
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evidence-row .size {
  color: var(--ink-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.evidence-row .status {
  text-align: right;
  color: var(--state, var(--ink-faint));
  transition: color var(--motion-tamper);
}
.evidence-scroll {
  max-height: 460px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

/* ---- Trust ladder ------------------------------------------------------- */

.ladder-rung {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.ladder-rung:last-child {
  border-bottom: 0;
}
.rung-tick {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 2px;
  background: var(--state);
}
.rung-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.rung-label {
  font-family: var(--font-display);
  font-weight: 600;
}
.rung-value {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--state);
}
.rung-question {
  color: var(--ink-muted);
  font-size: var(--step--1);
  margin-top: 2px;
}
.rung-by {
  color: var(--ink-faint);
  font-size: var(--step--1);
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* ---- Loss chart --------------------------------------------------------- */

.traj-chart {
  margin: 0 0 var(--s-4);
}
.traj-chart svg {
  display: block;
  width: 100%;
  height: auto;
}
.chart-grid {
  stroke: var(--line-soft);
  stroke-width: 1;
}
.chart-tick {
  fill: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10px;
}
.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart-line-control {
  stroke: var(--data);
}
.chart-line-resumed {
  stroke: var(--state);
  stroke-dasharray: 1 0;
}
.chart-dot {
  stroke: var(--bg);
  stroke-width: 1;
}
.chart-dot-control {
  fill: var(--data);
}
.chart-dot-resumed {
  fill: var(--state);
}
.chart-divergence {
  stroke: var(--no-go);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.chart-divergence-label {
  fill: var(--no-go);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.chart-legend {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.legend-item::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.legend-control::before {
  background: var(--data);
}
.legend-resumed::before {
  background: var(--state);
}
.legend-note {
  margin-left: auto;
  color: var(--ink-faint);
}

/* ---- Portable artifact -------------------------------------------------- */

.artifact-details {
  margin-top: var(--s-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.artifact-details summary {
  cursor: pointer;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.artifact-details summary:hover {
  color: var(--ink);
}
.artifact-raw {
  margin: 0;
  padding: var(--s-3);
  border-top: 1px solid var(--line-soft);
  max-height: 380px;
  overflow: auto;
  font-size: var(--step--1);
  color: var(--ink-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- ProvenanceHashes --------------------------------------------------- */

.hash-list {
  display: grid;
  gap: var(--s-2);
}
.hash-item {
  display: grid;
  grid-template-columns: minmax(170px, auto) 1fr;
  gap: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-soft);
}
.hash-item:last-child {
  border-bottom: 0;
}
.hash-item dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hash-item dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.hash-item dd.match {
  color: var(--go);
}
.hash-item dd.differ {
  color: var(--no-go);
}

/* ---- GptTrustPanel ------------------------------------------------------ */

.trust-panel {
  border-left: 3px solid var(--data);
  background: linear-gradient(
    90deg,
    var(--data-wash) 0%,
    transparent 55%
  );
}
.trust-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.trust-step {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-raised);
}
.trust-step.is-gate {
  border-color: var(--go);
  color: var(--go);
}
.trust-arrow {
  color: var(--ink-faint);
}

/* ---- Gallery cards ------------------------------------------------------ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-4);
}
.run-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--state);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
}
.run-card:hover {
  background: var(--panel-raised);
  border-color: color-mix(in srgb, var(--state) 45%, var(--line));
}
.run-card .card-verdict {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--state);
  line-height: 1;
}
.run-card h3 {
  font-size: var(--step-1);
}
.run-card .card-sub {
  color: var(--ink-muted);
  font-size: var(--step--1);
  flex: 1;
}
.run-card .card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Side-by-side compare */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-4);
}
.compare-col {
  border: 1px solid var(--line);
  border-top: 3px solid var(--state);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: var(--s-4);
}
.compare-metric {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--step--1);
}
.compare-metric:last-child {
  border-bottom: 0;
}
.compare-metric .v {
  font-family: var(--font-mono);
  color: var(--state);
  overflow-wrap: anywhere;
  text-align: right;
  max-width: 26ch;
}

/* ---- Banners / callouts ------------------------------------------------- */

.banner {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--state, var(--line)) 45%, transparent);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--state-wash, var(--panel));
  font-size: var(--step--1);
}
.banner strong {
  color: var(--state, var(--ink));
}

/* ---- Guided path -------------------------------------------------------- */

.guide {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-raised) 94%, transparent);
  backdrop-filter: blur(10px);
  font-size: var(--step--1);
}
.guide-step {
  font-family: var(--font-mono);
  color: var(--data);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.guide-copy {
  color: var(--ink-muted);
  flex: 1;
  min-width: 0;
}
.guide-actions {
  display: flex;
  gap: var(--s-2);
  flex: none;
}

@media (max-width: 720px) {
  .verdict-chip .chip-label {
    display: none;
  }
  .verdict-stamp .verdict-word {
    font-size: var(--step-3);
  }
  .gate-check {
    grid-template-columns: 12px 1fr;
  }
  .gate-check .check-delta {
    grid-column: 2;
    text-align: left;
  }
  .evidence-row {
    grid-template-columns: 1fr auto;
    row-gap: var(--s-1);
  }
  .evidence-row .sha {
    grid-column: 1 / -1;
  }
  .evidence-row .size {
    text-align: left;
  }
  .lane {
    grid-template-columns: 1fr;
  }
  .guide {
    flex-wrap: wrap;
  }
}