/* Evergreen web — prototype styles.
   Tokens follow the page exports and the 2026-09-17 decisions: Newsreader for
   display, Space Mono for data, Inter for interface, the warm surface, pine as
   the only brand accent, hairlines that share a hue with the text. */
:root {
  color-scheme: light;
  --surface: #fcf9f8;
  --paper: #ffffff;
  --ink: #0f0f0f;
  --ink-2: rgba(15, 15, 15, 0.72);
  --ink-3: rgba(15, 15, 15, 0.56);
  --rule: rgba(15, 15, 15, 0.1);
  --rule-strong: rgba(15, 15, 15, 0.44);
  --pine: #1a3a2e;
  --pine-soft: rgba(26, 58, 46, 0.07);
  --sage: #7fa893;
  --off-black: #262626;

  --ok: #00a7b5;
  --ok-ink: #00737d;
  --warn: #c07c26;
  --warn-ink: #965d17;
  --crit: #c0392b;
  --crit-ink: #a93226;
  --und: #7c6bb0;
  --und-ink: #5d4e8c;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --step-0: clamp(1rem, 1rem + 0vw, 1rem);
  --step-1: clamp(1.25rem, 1.2156rem + 0.1467vw, 1.333rem);
  --step-2: clamp(1.5625rem, 1.4737rem + 0.379vw, 1.7769rem);
  --step-3: clamp(1.9531rem, 1.781rem + 0.7345vw, 2.3686rem);
  --step-4: clamp(2.4414rem, 2.1448rem + 1.2657vw, 3.1573rem);
  --step-5: clamp(3.0518rem, 2.5724rem + 2.0455vw, 4.2087rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--pine);
  text-underline-offset: 3px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 2px;
  border-radius: 3px;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
.mono {
  font-family: var(--mono);
}
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* Header ------------------------------------------------------------------ */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-block: 14px;
}
.brand {
  font: 400 1.35rem/1 var(--serif);
  letter-spacing: -0.01em;
  color: var(--pine);
  text-decoration: none;
}
.views {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 13px/1 var(--sans);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 100vw;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  transition:
    background-color 150ms ease-in-out,
    border-color 150ms ease-in-out;
}
.pill:hover {
  background: var(--pine-soft);
}
.pill[aria-current='page'] {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--surface);
}
.quiet-link {
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: none;
}
.quiet-link:hover {
  color: var(--pine);
}

/* Layout ------------------------------------------------------------------ */
main {
  padding-block: 32px 96px;
  display: grid;
  gap: 28px;
}
section {
  display: grid;
  gap: 14px;
}
.eyebrow {
  margin: 0;
  font: 400 12.5px/1.3 var(--mono);
  color: var(--ink-3);
}
h1.page {
  margin: 0;
  font: 400 var(--step-3)/1.12 var(--serif);
  letter-spacing: -0.02em;
}
h2.section {
  margin: 0;
  font: 400 var(--step-2)/1.2 var(--serif);
  letter-spacing: -0.015em;
}
p {
  margin: 0;
  max-width: 72ch;
}
p + p {
  margin-top: 10px;
}
.muted {
  color: var(--ink-2);
}
.small {
  font-size: 13.5px;
}

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.card-pad {
  padding: 20px 22px;
}
.stack {
  display: grid;
  gap: 16px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Scan field -------------------------------------------------------------- */
.field-label {
  font: 600 11.5px/1.3 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
input[type='text'],
textarea,
input[type='number'] {
  width: 100%;
  font: 400 14px/1.5 var(--mono);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  padding: 12px 14px;
}
textarea {
  min-height: 128px;
  resize: vertical;
}
button {
  font: 500 14px/1 var(--sans);
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 100vw;
  border: 1px solid var(--pine);
  background: var(--pine);
  color: var(--surface);
  transition:
    background-color 150ms ease-in-out,
    border-color 150ms ease-in-out;
}
button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
button:disabled {
  opacity: 0.55;
  cursor: progress;
}
details summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink-2);
}
details[open] summary {
  margin-bottom: 10px;
}

/* Status ------------------------------------------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font: 400 12px/1 var(--mono);
  padding: 5px 10px;
  border-radius: 100vw;
}
.shape {
  width: 9px;
  height: 9px;
  flex: none;
}
.chip.healthy {
  color: var(--ok-ink);
  background: rgba(0, 167, 181, 0.1);
}
.chip.healthy .shape {
  border-radius: 50%;
  background: var(--ok);
}
.chip.warning {
  color: var(--warn-ink);
  background: rgba(192, 124, 38, 0.1);
}
.chip.warning .shape {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid var(--warn);
}
.chip.critical {
  color: var(--crit-ink);
  background: rgba(192, 57, 43, 0.09);
}
.chip.critical .shape {
  background: var(--crit);
  transform: rotate(45deg);
  width: 8px;
  height: 8px;
}
.chip.expired {
  color: var(--surface);
  background: var(--ink);
}
.chip.expired .shape {
  background: var(--surface);
}
.chip.undetermined {
  color: var(--und-ink);
  background: rgba(124, 107, 176, 0.1);
}
.chip.undetermined .shape {
  border-radius: 50%;
  border: 2px solid var(--und);
}

/* Verdict ----------------------------------------------------------------- */
.verdict {
  display: grid;
  gap: 14px;
  padding: 22px 24px;
  border-radius: 8px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
}
.verdict.warning {
  border-color: rgba(192, 124, 38, 0.5);
  background: rgba(192, 124, 38, 0.05);
}
.verdict.critical {
  border-color: rgba(192, 57, 43, 0.5);
  background: rgba(192, 57, 43, 0.045);
}
.verdict.undetermined,
.verdict.unknown {
  border-color: rgba(124, 107, 176, 0.5);
  background: rgba(124, 107, 176, 0.05);
}
.verdict .headline {
  margin: 0;
  font: 400 var(--step-1)/1.35 var(--serif);
  letter-spacing: -0.01em;
  max-width: 62ch;
}
.verdict .coverage {
  margin: 0;
  font: 400 var(--step-1)/1.35 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink-2);
  max-width: 62ch;
}
.verdict .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font: 400 12.5px/1.4 var(--mono);
  color: var(--ink-3);
}

/* Tables ------------------------------------------------------------------ */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th {
  text-align: left;
  font: 600 11px/1.3 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 13px 16px 9px;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
tbody tr:last-child td {
  border-bottom: 0;
}
td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.binding-tag {
  font: 400 10.5px/1 var(--mono);
  color: var(--warn-ink);
  background: rgba(192, 124, 38, 0.12);
  padding: 4px 7px;
  border-radius: 4px;
  margin-left: 8px;
}
.copy {
  background: none;
  border: 0;
  padding: 2px 6px;
  color: var(--ink-3);
  font: 400 11px/1 var(--mono);
  cursor: pointer;
  border-radius: 4px;
}
.copy:hover {
  color: var(--pine);
  background: var(--pine-soft);
}

/* Cards for our contracts -------------------------------------------------- */
.contract-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
  .contract-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.contract-card {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  align-content: start;
}
.contract-card .name {
  font: 600 14px/1.3 var(--sans);
}
.contract-card .id {
  font: 400 11.5px/1.4 var(--mono);
  color: var(--ink-3);
  word-break: break-all;
}
.contract-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 13px;
}
.contract-card dt {
  color: var(--ink-3);
}
.contract-card dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Panels ------------------------------------------------------------------- */
.panel {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 8px;
}
.panel.undetermined {
  background: rgba(124, 107, 176, 0.08);
  border: 1px solid rgba(124, 107, 176, 0.35);
}
.panel.note {
  background: var(--paper);
  border: 1px solid var(--rule);
}
.panel h3 {
  margin: 0;
  font: 600 14px/1.35 var(--sans);
}
.panel p {
  font-size: 14px;
}
.terminal {
  background: var(--off-black);
  color: #ececec;
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
  font: 400 12.5px/1.6 var(--mono);
  white-space: pre;
}
.error-box {
  border: 1px solid rgba(192, 57, 43, 0.5);
  background: rgba(192, 57, 43, 0.05);
  border-radius: 8px;
  padding: 16px 18px;
}

/* Graph -------------------------------------------------------------------- */
.graph-wrap {
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px;
}
svg.graph {
  display: block;
  min-width: 640px;
}
svg.graph .edge {
  stroke: var(--sage);
  stroke-width: 1.5;
  fill: none;
}
svg.graph .node {
  fill: var(--paper);
  stroke: var(--rule-strong);
}
svg.graph .node.shared {
  fill: var(--pine);
  stroke: var(--pine);
}
svg.graph text {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--ink);
}
svg.graph text.on-pine {
  fill: var(--surface);
}
svg.graph text.dim {
  fill: var(--ink-3);
}
svg.graph text.dim.on-pine {
  fill: rgba(252, 249, 248, 0.8);
}

footer.site {
  border-top: 1px solid var(--rule);
  margin-top: 48px;
}
footer.site .wrap {
  padding-block: 20px 40px;
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  background: var(--paper);
  padding: 10px 14px;
  border-radius: 6px;
  z-index: 5;
}

/* Landing ------------------------------------------------------------------ */
.landing .hero {
  background: #0f1512;
  color: var(--surface);
  padding-block: clamp(56px, 12vw, 132px);
}
.landing .hero .wrap {
  display: grid;
  gap: 22px;
}
.hero-eyebrow {
  margin: 0;
  font: 400 12.5px/1.3 var(--mono);
  color: rgba(252, 249, 248, 0.62);
}
.landing h1 {
  margin: 0;
  display: grid;
  gap: 2px;
  letter-spacing: -0.03em;
}
.landing h1 .serif {
  font: 400 var(--step-5)/1.02 var(--serif);
}
.landing h1 .sans {
  font: 600 var(--step-5)/1.02 var(--sans);
  letter-spacing: -0.045em;
}
.hero-lead {
  max-width: 58ch;
  color: rgba(252, 249, 248, 0.82);
  font-size: var(--step-1);
  line-height: 1.5;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 0;
}
.pill.solid {
  background: var(--surface);
  color: #0f1512;
  border-color: var(--surface);
  text-decoration: none;
  font-weight: 600;
}
.pill.ghost {
  background: transparent;
  color: var(--surface);
  border-color: rgba(252, 249, 248, 0.32);
  text-decoration: none;
}
.pill.ghost:hover {
  background: rgba(252, 249, 248, 0.08);
}
.band {
  padding-block: clamp(44px, 7vw, 80px);
}
.band .stack {
  gap: 16px;
}
.band.dark {
  background: var(--pine);
  color: var(--surface);
}
.band.dark p,
.band.dark .on-dark {
  color: rgba(252, 249, 248, 0.84);
}
.eyebrow.on-dark {
  color: rgba(252, 249, 248, 0.62);
}
h2.display {
  margin: 0;
  font: 400 var(--step-3)/1.12 var(--serif);
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.closing h2.display {
  max-width: 24ch;
}

.kinds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
}
@media (min-width: 640px) {
  .kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .kinds {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.kind {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 20px;
  border-top: 1px solid var(--rule);
}
@media (min-width: 640px) {
  .kind {
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
  .kind:first-child {
    border-left: 0;
  }
}
.kind-name {
  margin: 0;
  font: 400 15px/1.2 var(--mono);
}
.kind-holds {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
}
.kind-fate {
  margin: 0;
}
.kind.inverted {
  background: var(--ink);
  color: var(--surface);
}
.kind.inverted .kind-holds {
  color: rgba(252, 249, 248, 0.78);
}

.thesis {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .thesis {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
  }
}
.stat-cell {
  border: 1px solid rgba(252, 249, 248, 0.24);
  border-radius: 8px;
  padding: 22px;
  display: grid;
  gap: 8px;
}
.stat-label {
  margin: 0;
  font: 600 11.5px/1.3 var(--sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(252, 249, 248, 0.66);
}
.stat-figure {
  margin: 0;
  font: 400 var(--step-5)/1 var(--serif);
  letter-spacing: -0.03em;
  color: var(--surface);
}
.stat-caption {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(252, 249, 248, 0.78) !important;
}
.cards-3 {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
  .cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.cards-3 h3 {
  margin: 0;
  font: 600 15px/1.3 var(--sans);
}

/* App shell — sidebar, status bar, stat strip, decay chart ------------------- */
body.app {
  background: var(--surface);
}
.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}
@media (min-width: 960px) {
  .shell {
    grid-template-columns: 264px minmax(0, 1fr);
  }
}
.sidebar {
  background: var(--pine);
  color: var(--surface);
  padding: 20px 16px;
  display: grid;
  gap: 22px;
  align-content: start;
}
@media (max-width: 959px) {
  .sidebar {
    padding-bottom: 8px;
  }
}
.sidebar .brand {
  color: var(--surface);
  display: flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
}
.brand-mark {
  width: 22px;
  height: 22px;
  flex: none;
  background: var(--sage);
  border-radius: 5px;
}
.brand-name {
  display: block;
  font: 400 1.2rem/1.1 var(--serif);
}
.brand-sub {
  display: block;
  font: 400 11px/1.3 var(--mono);
  color: rgba(252, 249, 248, 0.66);
}
.nav-group {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}
.nav-section {
  margin: 0 0 2px;
  font: 600 10.5px/1.4 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(252, 249, 248, 0.55);
}
.nav-item {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: rgba(252, 249, 248, 0.88);
  text-decoration: none;
  transition: background-color 150ms ease-in-out;
}
.nav-item:hover {
  background: rgba(252, 249, 248, 0.1);
}
.nav-item.active {
  background: var(--surface);
  color: var(--pine);
  font-weight: 600;
}
.sidebar-foot {
  font-size: 12.5px;
  color: rgba(252, 249, 248, 0.7);
  display: grid;
  gap: 6px;
}
.sidebar-foot .mono {
  color: var(--sage);
}
.content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
}
.statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  padding: 10px clamp(16px, 4vw, 40px);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font: 400 12.5px/1.4 var(--mono);
  color: var(--ink-2);
}
.statusbar .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  margin-right: 7px;
}
.statusbar .right {
  margin-left: auto;
}
.status-item.dim,
.dim {
  color: var(--ink-3);
}
main.main {
  padding: 32px clamp(16px, 4vw, 40px) 64px;
  display: grid;
  gap: 28px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.page-head {
  display: grid;
  gap: 12px;
}
.page-head h1 {
  margin: 0;
  font: 400 var(--step-3)/1.12 var(--serif);
  letter-spacing: -0.02em;
}
p.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 68ch;
}
.content footer.site {
  margin-top: 0;
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  justify-content: space-between;
}

/* Stat strip */
.stat-strip {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
  .stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.stat {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 20px 22px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.stat-label {
  margin: 0;
  font: 600 11.5px/1.3 var(--sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stat-figure {
  margin: 0;
  font: 400 var(--step-4)/1 var(--serif);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-figure.warning {
  color: var(--warn-ink);
}
.stat-figure.critical {
  color: var(--crit-ink);
}
.stat-figure.healthy {
  color: var(--ok-ink);
}
.stat-figure.undetermined,
.stat-figure.unknown {
  color: var(--und-ink);
}
.stat-caption {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}

/* Contract role cards */
.name {
  font: 600 15px/1.3 var(--sans);
}
.id {
  font-size: 11.5px;
  color: var(--ink-3);
  word-break: break-all;
}
dl.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 13.5px;
}
dl.facts dt {
  color: var(--ink-3);
}
dl.facts dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Decay chart */
svg.decay {
  display: block;
  width: 100%;
  height: auto;
}
.decay-line {
  stroke: var(--pine);
  stroke-width: 2;
  fill: none;
}
.decay-dash {
  stroke: var(--ink-3);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}
.decay-dot {
  fill: var(--pine);
}
.decay-step {
  fill: var(--sage);
  stroke: var(--pine);
  stroke-width: 1.5;
}
.decay-step-label {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--ink-2);
}
.decay-step-label a {
  fill: var(--pine);
}
.decay-band {
  stroke: var(--warn);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.7;
}
.decay-band-label {
  font-family: var(--mono);
  font-size: 10.5px;
  fill: var(--warn-ink);
}
.decay-expiry {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--crit-ink);
}
.decay-axis {
  font-family: var(--mono);
  font-size: 10.5px;
  fill: var(--ink-3);
}

/* ---------------------------------------------------------------------------
   Expired.

   Not a failure state the page is coping with — for guinea-pig B it is the
   finished proof, and it should read as the most settled cell on the page.
   The inverted cell is the spec's `--status-expired`, and inversion is
   Stellar's own mechanism for emphasis rather than for error.
   --------------------------------------------------------------------------- */
.expired-card {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}
.expired-card .id,
.expired-card dt,
.expired-card .small {
  color: rgba(252, 249, 248, 0.72);
}
.expired-card dd,
.expired-card .name {
  color: var(--surface);
}
.expired-headline {
  font-family: var(--serif);
  font-size: var(--step-3);
  line-height: 1.05;
  margin: 0.25rem 0 0.5rem;
  color: var(--surface);
}
.stat-expired {
  background: var(--ink);
  color: var(--surface);
}
.stat-expired .stat-label,
.stat-expired .stat-caption {
  color: rgba(252, 249, 248, 0.72);
}
.stat-expired .stat-figure {
  font-family: var(--serif);
  color: var(--surface);
}
.expired-cell {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--mono);
  font-size: var(--step--1);
}
tr.row-expired td {
  background: rgba(15, 15, 15, 0.04);
}
.excluded {
  border-top: 1px solid var(--hair);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}
.excluded ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

/* A word, not a figure. `archived` at the numeric display size overflows a
   stat cell and clipped to "arc…" at 1280px — the one cell on the page that
   most needs to be readable. */
.stat-expired .stat-figure {
  font-size: var(--step-1);
  letter-spacing: 0.01em;
}
.stat-expired .stat-caption {
  overflow-wrap: anywhere;
}

/* The status bar already wrapped between items, but each item was an
   unbreakable flex child: "ledger close 5.000000 s ± 0.000050 · measured, not
   assumed" is 437px, so at 390px it stretched the whole shell and every page
   scrolled sideways. Found by the layout check, not by looking — it is on
   every page and showed up on two.

   Information is wrapped rather than hidden; a status bar that drops the
   measurement on a phone is a status bar that lies by omission. */
.statusbar .status-item {
  /* `min-width: 0` alone is not enough: in a wrapping flex container an item
     wider than the line gets its own line and keeps its max-content width.
     `max-width: 100%` is what makes it fit. */
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
@media (max-width: 680px) {
  .statusbar .right {
    margin-left: 0;
  }
}

/* A contract ID is 56 unbreakable characters. At 467px it set the width of its
   card, then the grid, then the whole shell, and every page scrolled sideways
   on a phone — which the SOW says the assessor may be using. Mono strings that
   are addresses wrap; they are read in pieces anyway. */
.id,
.row-id,
.contract-card .id,
.id.mono {
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* Grid blowout. `main.main` and the page sections are grids with no explicit
   column, so their implicit track sized to the widest min-content on the page
   — a 56-character contract address — and every ancestor inherited that width.
   `minmax(0, 1fr)` lets a track be narrower than its content, which is what
   allows the address to wrap instead of setting the width of the site.

   This is why the two pages that overflowed were the two with a full contract
   ID rendered outside a scroll container. */
main.main,
.content,
.stack,
.card,
.contract-card {
  grid-template-columns: minmax(0, 1fr);
}

/* Sections are grid items of `main`; without this they size to min-content and
   re-create the blowout one level down. */
.main > section {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

/* Ledger keys and Wasm hashes are long unbreakable base64 run inline through
   prose. They are read in pieces, so they may break anywhere rather than set
   the width of the paragraph that contains them. */
.mono {
  overflow-wrap: anywhere;
}

/* On a phone the sidebar stacks above the content, and twelve stacked links
   filled the entire first screen: a visitor landed on a page whose content
   began below the fold, on every route. Found in the visual pass, not by the
   overflow check — nothing was overflowing, it was just all in the way.

   Below the two-column breakpoint the nav becomes a compact horizontal strip
   that scrolls sideways on its own. Every link stays reachable; none of them
   stands between the visitor and the page they asked for. */
@media (max-width: 959px) {
  .sidebar {
    gap: 10px;
    padding: 12px 0 8px;
  }
  .sidebar .brand {
    padding: 0 16px;
  }
  .sidebar nav {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 0 16px 4px;
    scrollbar-width: thin;
  }
  .nav-group {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
  }
  .nav-section {
    margin: 0 4px 0 0;
    white-space: nowrap;
    opacity: 0.55;
  }
  .nav-item {
    white-space: nowrap;
    padding: 6px 10px;
  }
  .sidebar-foot {
    padding: 0 16px;
    font-size: 12px;
  }
  .sidebar-foot p:first-child {
    display: none;
  }
}