:root {
  color-scheme: light;
  --ink: #18202a;
  --muted: #586477;
  --line: #c7d0dc;
  --panel: #ffffff;
  --page: #f5f7fa;
  --accent: #0f766e;
  --state-unknown-bg: #fff2bf;
  --state-unknown-border: #a36a00;
  --state-unknown-text: #533400;
  --state-not-captured-bg: #dbeafe;
  --state-not-captured-border: #2563eb;
  --state-not-captured-text: #153e75;
  --state-negative-bg: #ffe0e0;
  --state-negative-border: #b83232;
  --state-negative-text: #63171b;
  --state-unobservable-bg: #eef2f7;
  --state-unobservable-border: #64748b;
  --state-unobservable-text: #334155;
  --state-refused-bg: #ede9fe;
  --state-refused-border: #7c3aed;
  --state-refused-text: #3b0764;
  --state-satisfied-bg: #dcfce7;
  --state-satisfied-border: #15803d;
  --state-satisfied-text: #14532d;
  --state-neutral-bg: #f8fafc;
  --state-neutral-border: #94a3b8;
  --state-neutral-text: #334155;
  --state-frozen-bg: #ecfeff;
  --state-frozen-border: #0891b2;
  --state-frozen-text: #164e63;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}

code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.92em;
}

.booting,
.rocketship-shell {
  min-height: 100vh;
}

.rocketship-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
}

.topbar {
  align-items: center;
  background: #102526;
  border: 1px solid #0f3d3a;
  border-radius: 6px;
  color: #f8fafc;
  display: flex;
  justify-content: space-between;
  min-height: 72px;
  padding: 14px 16px;
}

.topbar h1,
.screen h2,
.detail-rail h2,
.detail-block h3 {
  letter-spacing: 0;
  margin: 0;
}

.topbar h1 {
  font-size: 22px;
  line-height: 1.15;
}

.eyebrow {
  color: #9ee7dd;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.observation-marker {
  background: #fff7ed;
  border: 1px solid #ea580c;
  border-radius: 6px;
  color: #7c2d12;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  line-height: 1.2;
  max-width: 240px;
  padding: 8px 10px;
  text-align: center;
}

.mobile-stack-nav {
  display: none;
}

.screen,
.table-panel,
.detail-rail {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.screen {
  padding: 14px;
}

.board-screen {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.board-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
}

.table-panel,
.detail-rail {
  min-width: 0;
  padding: 14px;
}

.section-heading {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.search-panel {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(140px, 1fr));
}

.search-panel label {
  display: grid;
  gap: 5px;
}

.search-panel span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.search-panel input,
.search-panel select {
  appearance: none;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  min-height: 40px;
  padding: 8px 10px;
  width: 100%;
}

.status-strip {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
}

.population-zero-line {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 12px;
}

.population-zero-line strong {
  color: var(--ink);
}

.population-zero-line span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.status-cell {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 64px;
  padding: 10px;
}

.status-cell span:first-child {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.operations-table {
  table-layout: fixed;
}

.operations-table th,
.operations-table td {
  word-break: break-word;
}

.row-link {
  background: #0f766e;
  border: 1px solid #0b5f59;
  border-radius: 6px;
  color: #ffffff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 32px;
  min-width: 58px;
  padding: 7px 9px;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

.empty-row td {
  background: #f8fafc;
  height: 180px;
  text-align: center;
}

.empty-row p {
  color: var(--muted);
  margin: 12px auto 0;
  max-width: 560px;
}

.detail-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}

.detail-rail p {
  color: var(--muted);
  margin: 0;
}

.detail-block {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.split-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
}

.state-catalog,
.source-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.state-catalog li,
.source-list li {
  align-items: flex-start;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  gap: 8px;
  padding: 10px;
}

.source-list li {
  flex-direction: column;
}

.source-list span {
  color: var(--muted);
  font-size: 13px;
}

.history-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.history-tabs button {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  min-height: 36px;
  padding: 7px 11px;
}

.history-tabs button[aria-pressed="true"] {
  background: #e6f4f1;
  border-color: #0f766e;
  color: #0b4d49;
}

.history-summary {
  display: grid;
  gap: 8px 12px;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 14px 0 0;
}

.history-summary dt {
  color: var(--muted);
  font-weight: 800;
}

.history-summary dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.state-pill {
  align-items: center;
  border: 1px solid;
  border-radius: 6px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: center;
  line-height: 1.1;
  min-height: 24px;
  padding: 5px 7px;
  white-space: nowrap;
}

.state-unknown {
  background: var(--state-unknown-bg);
  border-color: var(--state-unknown-border);
  color: var(--state-unknown-text);
}

.state-not-captured {
  background: var(--state-not-captured-bg);
  border-color: var(--state-not-captured-border);
  color: var(--state-not-captured-text);
}

.state-negative {
  background: var(--state-negative-bg);
  border-color: var(--state-negative-border);
  color: var(--state-negative-text);
}

.state-unobservable {
  background: var(--state-unobservable-bg);
  border-color: var(--state-unobservable-border);
  color: var(--state-unobservable-text);
}

.state-refused {
  background: var(--state-refused-bg);
  border-color: var(--state-refused-border);
  color: var(--state-refused-text);
}

.state-satisfied {
  background: var(--state-satisfied-bg);
  border-color: var(--state-satisfied-border);
  color: var(--state-satisfied-text);
}

.state-neutral {
  background: var(--state-neutral-bg);
  border-color: var(--state-neutral-border);
  color: var(--state-neutral-text);
}

.state-frozen {
  background: var(--state-frozen-bg);
  border-color: var(--state-frozen-border);
  color: var(--state-frozen-text);
}

@media (max-width: 760px) {
  .rocketship-shell {
    padding: 10px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .observation-marker {
    max-width: none;
    width: 100%;
  }

  .mobile-stack-nav {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 6px;
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, 1fr);
    padding: 6px;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .mobile-stack-nav a {
    background: #eef7f5;
    border: 1px solid #9bd7cf;
    border-radius: 6px;
    color: #0f3d3a;
    font-size: 13px;
    font-weight: 800;
    min-height: 38px;
    padding: 9px 6px;
    text-align: center;
    text-decoration: none;
  }

  .board-layout,
  .split-grid,
  .search-panel,
  .status-strip {
    grid-template-columns: 1fr;
  }

  /* ==========================================================================================
     CC93 - THE PHONE GETS A LIST, NOT A SQUEEZED TABLE.
     Observed on the NA's phone, 2026-09-02: the alert table failed in TWO OPPOSITE WAYS AT ONCE.
     `table-layout` plus `word-break: break-word` compressed the text columns to roughly one
     character - headers included, so ALERT ID, SYMBOL and DATE MINUTE ran vertically, one letter
     per line - while the chip columns refused to compress and pushed the table's right edge past
     the viewport. Squeeze and overflow, simultaneously, which is why neither a wider column nor a
     scroll container alone would have fixed it.
     BELOW THE BREAKPOINT THERE IS NO TABLE. Each row becomes a card in the shape the DETAIL card
     already uses on this phone - one label, one value, chips inline - because that shape is the
     one surface the NA's screenshots show rendering perfectly. It is reused rather than invented.
     THIS IS CSS ONLY. No markup changed, so the desktop rendered output is byte-identical by
     construction rather than by assertion - and the labels below come from :nth-of-type, which is
     why they must stay in the table's own column order.
     ========================================================================================== */
  .operations-table,
  .operations-table tbody,
  .operations-table tr,
  .operations-table td {
    display: block;
    width: 100%;
  }

  .operations-table {
    border-collapse: separate;
    overflow-x: visible;
    table-layout: auto;
  }

  /* The header row becomes the per-cell labels below; it is hidden from sight and kept for
     assistive technology rather than deleted. */
  .operations-table thead {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }

  .operations-table tbody tr {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
  }

  .operations-table td {
    border: 0;
    display: grid;
    gap: 2px 10px;
    grid-template-columns: minmax(0, 9ch) minmax(0, 1fr);
    padding: 3px 0;
    /* THE PER-CHARACTER BREAK IS GONE. A value now owns the full width of the card, so ordinary
       wrapping applies; `anywhere` remains only so a 38-character alert id cannot overflow. */
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .operations-table td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  /* The table's own column order, in words. If a column is added or moved in app.mjs these
     must move with it - which is the cost of labelling without touching the markup. */
  .operations-table td:nth-of-type(1)::before { content: "Open"; }
  .operations-table td:nth-of-type(2)::before { content: "Alert ID"; }
  .operations-table td:nth-of-type(3)::before { content: "Symbol"; }
  .operations-table td:nth-of-type(4)::before { content: "Population"; }
  .operations-table td:nth-of-type(5)::before { content: "Date Minute"; }
  .operations-table td:nth-of-type(6)::before { content: "Capture"; }
  .operations-table td:nth-of-type(7)::before { content: "Market Facts"; }
  .operations-table td:nth-of-type(8)::before { content: "Catalyst"; }
  .operations-table td:nth-of-type(9)::before { content: "Delivery"; }

  /* Open is the action, so it spans the card rather than sitting in a label column. */
  .operations-table td:nth-of-type(1) {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 8px;
  }

  .operations-table td:nth-of-type(1)::before {
    display: none;
  }

  .operations-table .row-link {
    display: block;
    text-align: center;
  }

  /* ---- EVERY OTHER WIDE PANEL: a mobile shape, or overflow contained inside its card ------- */
  /* Access And Delivery (VIEWER / ROLE / ACCESS / DELIVERY / CHANNEL / GATE) and Predicate
     States both ran past their cards on the phone. Same stacking, same reason. */
  .compact-table,
  .compact-table tbody,
  .compact-table tr,
  .compact-table td {
    display: block;
    width: 100%;
  }

  .compact-table thead {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }

  .compact-table tbody tr {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
  }

  .compact-table td {
    border: 0;
    overflow-wrap: anywhere;
    padding: 2px 0;
    word-break: normal;
  }

  /* Custody Inputs: long repository paths extended past the card. They wrap inside it now, and
     nothing here is truncated - a path a reader cannot finish is a path they cannot check. */
  .source-list,
  .source-list li,
  .state-catalog,
  .state-catalog li {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* THE RULE THE ADDENDUM STATES: no panel may exceed its card at 390px. */
  .card,
  .table-panel,
  .screen {
    max-width: 100%;
    overflow-x: hidden;
  }

  .detail-rail {
    min-height: 260px;
  }

  .state-catalog li {
    align-items: stretch;
    flex-direction: column;
  }
}