:root {
  color-scheme: dark;
  --graphite-0: #0b0c0c;
  --graphite-1: #101212;
  --graphite-2: #151817;
  --graphite-3: #1a1e1c;
  --paper-strong: #f0eee7;
  --paper-body: #c8c8c0;
  --paper-meta: #92958f;
  --paper-muted: #636762;
  --rule-soft: rgba(233, 237, 229, 0.07);
  --rule: rgba(233, 237, 229, 0.13);
  --rule-strong: rgba(233, 237, 229, 0.23);
  --verify: #82c89a;
  --verify-wash: rgba(130, 200, 154, 0.09);
  --anomaly: #d8ae68;
  --anomaly-wash: rgba(216, 174, 104, 0.09);
  --tamper: #dc8179;
  --tamper-wash: rgba(220, 129, 121, 0.09);
  --focus: #d9dfd6;
  --radius-small: 3px;
  --radius-medium: 6px;
  --space: 4px;
  --sans: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { background: var(--graphite-0); }

body {
  margin: 0;
  min-width: 320px;
  color: var(--paper-body);
  background: var(--graphite-0);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}

button, a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

.shell {
  width: min(1500px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  border-inline: 1px solid var(--rule-soft);
}

.topbar {
  height: 60px;
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: calc(var(--space) * 6);
  padding: 0 calc(var(--space) * 6);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--paper-strong);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.brand-mark {
  width: 27px;
  height: 14px;
  display: flex;
  align-items: center;
}

.brand-mark i {
  width: 10px;
  height: 10px;
  display: block;
  margin-right: -2px;
  border: 1px solid var(--verify);
  border-radius: 50%;
  background: var(--graphite-0);
}

.context { color: var(--paper-meta); }

.runtime {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--paper-meta);
  font-family: var(--mono);
  font-size: 11px;
}

.runtime-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verify);
  box-shadow: 0 0 0 3px var(--verify-wash);
}

main { padding: 0 calc(var(--space) * 6) calc(var(--space) * 8); }

.casebar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--space) * 8);
  padding: calc(var(--space) * 12) 0 calc(var(--space) * 8);
}

.eyebrow {
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
}

h1, h2, p { margin: 0; }

h1 {
  margin-top: 8px;
  color: var(--paper-strong);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 560;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.casebar p {
  max-width: 690px;
  margin-top: 16px;
  color: var(--paper-meta);
  font-size: 15px;
}

.case-actions {
  min-width: 205px;
  display: grid;
  gap: 12px;
}

.case-state {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  color: var(--paper-meta);
  font-family: var(--mono);
  font-size: 11px;
}

.state-pip {
  width: 7px;
  height: 7px;
  border: 1px solid var(--paper-muted);
  border-radius: 50%;
}

.case-state[data-tone="running"] { color: var(--anomaly); }
.case-state[data-tone="running"] .state-pip { border-color: var(--anomaly); background: var(--anomaly); }
.case-state[data-tone="verified"] { color: var(--verify); }
.case-state[data-tone="verified"] .state-pip { border-color: var(--verify); background: var(--verify); }
.case-state[data-tone="failed"] { color: var(--tamper); }
.case-state[data-tone="failed"] .state-pip { border-color: var(--tamper); background: var(--tamper); }

.run-button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 16px;
  color: var(--graphite-0);
  border: 1px solid var(--paper-strong);
  border-radius: var(--radius-small);
  background: var(--paper-strong);
  cursor: pointer;
  font-weight: 650;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}

.run-button:hover { background: #fffef9; }
.run-button:focus-visible, .proof-node:focus-visible, .text-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.run-button:disabled { color: var(--paper-muted); border-color: var(--rule); background: var(--graphite-3); cursor: wait; }

kbd {
  padding: 2px 6px;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  opacity: 0.6;
}

.claim-strip {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 190px 150px 190px;
  min-height: 88px;
  border-block: 1px solid var(--rule);
}

.claim-strip > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 20px;
  border-right: 1px solid var(--rule-soft);
}

.claim-strip > div:first-child { padding-left: 0; }
.claim-strip > div:last-child { border-right: 0; }
.strip-label { color: var(--paper-muted); font-size: 11px; }
.claim-strip strong { margin-top: 3px; color: var(--paper-strong); font-weight: 560; }
.claim-number strong { font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums; }
.fixture-tag span { color: var(--anomaly); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; }
.fixture-tag small { margin-top: 4px; color: var(--paper-muted); }

.fortified-controls {
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--rule);
}

.fortified-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.fortified-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.control-suite-state {
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.control-suite-state[data-tone="running"] { color: var(--anomaly); }
.control-suite-state[data-tone="passed"] { color: var(--verify); }
.control-suite-state[data-tone="failed"] { color: var(--tamper); }
.control-run-button { min-width: 74px; }

.fortified-intro {
  max-width: 690px;
  margin-top: 8px;
  color: var(--paper-muted);
  font-size: 12px;
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-medium);
  background: var(--graphite-1);
  overflow: hidden;
}

.control-card {
  min-width: 0;
  min-height: 262px;
  padding: 15px 16px 13px;
  border-top: 2px solid transparent;
  background: var(--graphite-1);
}

.control-card + .control-card { border-left: 1px solid var(--rule); }
.control-card[data-state="loading"] { border-top-color: var(--anomaly); }
.control-card[data-state="passed"] { border-top-color: var(--verify); background: var(--verify-wash); }
.control-card[data-state="failed"],
.control-card[data-state="unavailable"] { border-top-color: var(--tamper); background: var(--tamper-wash); }
.control-card[data-state="recorded"] { border-top-color: var(--anomaly); }

.control-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.control-index { color: var(--paper-muted); }
.control-status { color: var(--paper-muted); text-align: right; }
.control-card[data-state="loading"] .control-status,
.control-card[data-state="recorded"] .control-status { color: var(--anomaly); }
.control-card[data-state="passed"] .control-status { color: var(--verify); }
.control-card[data-state="failed"] .control-status,
.control-card[data-state="unavailable"] .control-status { color: var(--tamper); }

.control-card h3 {
  margin: 19px 0 0;
  color: var(--paper-body);
  font-size: 12px;
  font-weight: 560;
}

.control-metric {
  display: block;
  margin-top: 7px;
  color: var(--paper-strong);
  font-family: var(--mono);
  font-size: 29px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.control-metric-label {
  display: block;
  margin-top: 1px;
  color: var(--paper-muted);
  font-size: 10px;
}

.control-evidence {
  margin: 17px 0 0;
  border-top: 1px solid var(--rule);
}

.control-evidence > div {
  display: grid;
  grid-template-columns: minmax(82px, 0.72fr) minmax(0, 1.28fr);
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.control-evidence dt,
.control-evidence dd { margin: 0; font-size: 9px; }
.control-evidence dt { color: var(--paper-muted); }
.control-evidence dd { overflow-wrap: anywhere; color: var(--paper-body); text-align: right; }
.control-evidence dd.mono { font-family: var(--mono); font-size: 8px; }

.control-details { margin-top: 9px; }
.control-details summary {
  width: max-content;
  max-width: 100%;
  color: var(--paper-meta);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  list-style-position: inside;
  text-transform: uppercase;
}
.control-details summary:hover { color: var(--paper-strong); }
.control-details summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.control-details ul { margin: 8px 0 0; padding: 0; list-style: none; }
.control-details li { padding: 7px 0; border-top: 1px solid var(--rule-soft); }
.control-details li span { display: block; color: var(--paper-muted); font-size: 8px; }
.control-details code {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
  color: var(--paper-body);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.45;
}

.proof-bench { padding: 32px 0 36px; border-bottom: 1px solid var(--rule); }

.section-heading, .panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

h2 {
  margin-top: 4px;
  color: var(--paper-strong);
  font-size: 18px;
  font-weight: 570;
  letter-spacing: -0.02em;
}

.elapsed { color: var(--paper-muted); font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }

.proof-line {
  display: grid;
  grid-template-columns: minmax(142px, 1fr) 34px minmax(142px, 1fr) 34px minmax(142px, 1fr) 34px minmax(142px, 1fr) 34px minmax(142px, 1fr);
  align-items: center;
  margin-top: 24px;
}

.proof-node {
  min-height: 172px;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  align-items: start;
  padding: 16px;
  text-align: left;
  color: var(--paper-body);
  border: 1px solid var(--rule);
  border-radius: var(--radius-medium);
  background: var(--graphite-1);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.proof-node:hover { border-color: var(--rule-strong); transform: translateY(-1px); }
.proof-node[data-state="active"] { border-color: var(--anomaly); background: var(--anomaly-wash); }
.proof-node[data-state="mismatch"], .proof-node[data-state="diagnosed"] { border-color: rgba(216, 174, 104, 0.5); }
.proof-node[data-state="verified"], .proof-node[data-state="passed"] { border-color: rgba(130, 200, 154, 0.55); background: var(--verify-wash); }
.proof-node[data-state="failed"] { border-color: rgba(220, 129, 121, 0.55); background: var(--tamper-wash); }

.node-index { color: var(--paper-muted); font-family: var(--mono); font-size: 10px; }
.node-role { margin-top: 5px; color: var(--paper-body); font-size: 12px; }
.node-value { align-self: end; margin-top: 20px; color: var(--paper-strong); font-family: var(--mono); font-size: clamp(24px, 2.6vw, 36px); font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.node-caption { color: var(--paper-muted); font-size: 10px; }
.node-status { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule-soft); color: var(--paper-muted); font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }
.proof-node[data-state="mismatch"] .node-status, .proof-node[data-state="diagnosed"] .node-status { color: var(--anomaly); }
.proof-node[data-state="verified"] .node-status, .proof-node[data-state="passed"] .node-status { color: var(--verify); }

.link { height: 1px; overflow: hidden; background: var(--rule); }
.link span { display: block; width: 0; height: 1px; background: var(--verify); transition: width 320ms ease; }
.link[data-complete="true"] span { width: 100%; }

.evidence-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.75fr);
  gap: 0;
}

.evidence-panel, .audit-panel { min-height: 350px; padding-top: 28px; }
.evidence-panel { padding-right: 28px; border-right: 1px solid var(--rule); }
.audit-panel { padding-left: 28px; }
.panel-heading.compact { align-items: center; }

.evidence-seal {
  padding: 4px 7px;
  color: var(--paper-muted);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}
.evidence-seal[data-tone="verify"] { color: var(--verify); border-color: rgba(130, 200, 154, 0.42); }
.evidence-seal[data-tone="anomaly"] { color: var(--anomaly); border-color: rgba(216, 174, 104, 0.42); }

.evidence-body { margin-top: 24px; }
.empty-copy { max-width: 580px; color: var(--paper-muted); }

.evidence-table { display: grid; grid-template-columns: 170px minmax(0, 1fr); border-top: 1px solid var(--rule); }
.evidence-table dt, .evidence-table dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.evidence-table dt { color: var(--paper-muted); font-size: 11px; }
.evidence-table dd { overflow-wrap: anywhere; color: var(--paper-body); font-family: var(--mono); font-size: 12px; }

.text-button {
  padding: 6px 0;
  color: var(--paper-body);
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
}
.text-button:hover { color: var(--paper-strong); border-color: var(--paper-body); }
.text-button:disabled { color: var(--paper-muted); border-color: var(--rule-soft); cursor: not-allowed; }

.audit-summary { display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; border-block: 1px solid var(--rule); }
.audit-summary > div { padding: 12px 0; }
.audit-summary > div + div { padding-left: 16px; border-left: 1px solid var(--rule-soft); }
.audit-summary span { display: block; color: var(--paper-muted); font-size: 10px; }
.audit-summary strong { color: var(--paper-body); font-family: var(--mono); font-size: 12px; font-weight: 500; }

.ledger { max-height: 175px; overflow: auto; scrollbar-color: var(--rule-strong) transparent; }
.ledger-empty { padding: 18px 0; color: var(--paper-muted); font-family: var(--mono); font-size: 11px; }
.ledger-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 80px; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); font-family: var(--mono); font-size: 9px; }
.ledger-row span:first-child, .ledger-row code { color: var(--paper-muted); }
.ledger-row strong { overflow: hidden; color: var(--paper-body); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ledger-row code { text-align: right; }

.tamper-result { margin-top: 12px; padding: 10px; color: var(--tamper); border: 1px solid rgba(220, 129, 121, 0.35); border-radius: var(--radius-small); background: var(--tamper-wash); font-family: var(--mono); font-size: 10px; }

footer {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  color: var(--paper-muted);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 9px;
}

@media (max-width: 1050px) {
  .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-card:nth-child(3) { border-left: 0; border-top-width: 1px; border-top-color: var(--rule); }
  .control-card:nth-child(4) { border-top-width: 1px; border-top-color: var(--rule); }
  .control-card:nth-child(3)[data-state="passed"], .control-card:nth-child(4)[data-state="passed"] { box-shadow: inset 0 2px var(--verify); }
  .control-card:nth-child(3)[data-state="failed"], .control-card:nth-child(4)[data-state="failed"],
  .control-card:nth-child(3)[data-state="unavailable"], .control-card:nth-child(4)[data-state="unavailable"] { box-shadow: inset 0 2px var(--tamper); }
  .proof-line { grid-template-columns: 1fr; gap: 8px; }
  .link { width: 1px; height: 18px; margin-left: 22px; }
  .link span { width: 1px; height: 0; transition-property: height; }
  .link[data-complete="true"] span { width: 1px; height: 100%; }
  .proof-node { min-height: 110px; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto auto; column-gap: 8px; }
  .node-index { grid-row: 1 / 4; }
  .node-role { margin: 0; }
  .node-value { grid-column: 3; grid-row: 1 / 3; align-self: center; margin: 0; }
  .node-caption { grid-column: 2; }
  .node-status { grid-column: 2 / 4; margin-top: 10px; }
}

@media (max-width: 760px) {
  .shell { border-inline: 0; }
  .topbar { grid-template-columns: 1fr auto; padding-inline: 16px; }
  .context { display: none; }
  #runtime-label { display: none; }
  main { padding-inline: 16px; }
  .casebar { align-items: stretch; flex-direction: column; padding-top: 32px; }
  .case-actions { min-width: 0; }
  .case-state { justify-content: flex-start; }
  .claim-strip { grid-template-columns: 1fr 1fr; }
  .claim-strip > div { border-bottom: 1px solid var(--rule-soft); }
  .claim-strip > div:first-child { padding-left: 20px; grid-column: 1 / 3; }
  .fortified-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .fortified-actions { width: 100%; justify-content: space-between; }
  .control-grid { grid-template-columns: 1fr; }
  .control-card { min-height: 0; }
  .control-card + .control-card { border-left: 0; border-top-width: 1px; border-top-color: var(--rule); }
  .control-card + .control-card[data-state="passed"] { box-shadow: inset 0 2px var(--verify); }
  .control-card + .control-card[data-state="failed"],
  .control-card + .control-card[data-state="unavailable"] { box-shadow: inset 0 2px var(--tamper); }
  .evidence-grid { grid-template-columns: 1fr; }
  .evidence-panel { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .audit-panel { padding-left: 0; }
  footer { align-items: flex-start; flex-direction: column; padding-block: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}