/*
 * Mayday Pizza site styles. Every color, font, space, radius and glow is a var() from /brand/tokens.css,
 * which is generated from packages/site/brand/tokens.json. No literal colors in this file (Rule 7).
 * Two halves: the sign (header only) glows; the desk (everything else) is ink on ground, mono for data.
 */

@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: Yellowtail;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/yellowtail-latin-400-normal.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ground);
  color: var(--ink);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-style: normal;
}

em,
i,
cite,
address {
  font-style: normal;
}
a {
  color: inherit;
  text-underline-offset: 3px;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ground);
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius-none);
  cursor: pointer;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: inherit;
}
.mute {
  color: var(--mute);
}

/* ---------------------------------------------------------------- banner (top and bottom of every page) */
.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-1) var(--space-6);
  background: var(--ink);
  color: var(--ground);
}
.banner-status {
  white-space: nowrap;
}
/*
 * "MAYDAY" in the name stays ink on the banner. Only the status word turns red, and only in MAYDAY. The banner is
 * inverted, so it takes the other theme's --mayday: the one made to read on this ground (tokens.css).
 */
body[data-status="MAYDAY"] .banner-state {
  color: var(--mayday-inverse);
  font-weight: 700;
}

/* ---------------------------------------------------------------- header and the sign */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-6);
  border-bottom: 1px solid var(--ink);
}
.theme-toggle {
  padding: var(--space-1) var(--space-2);
}

.sign {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  min-width: 200px;
}
.lockup-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  padding: var(--space-3);
}

.mp-radar {
  width: 56px;
  height: 56px;
  color: var(--neon-aqua);
  filter: drop-shadow(0 0 6px var(--neon-aqua-glow));
}
.mp-sweep {
  transform-box: view-box;
  transform-origin: 50px 50px;
}

.mp-script {
  display: inline-block;
  font-family: var(--font-script);
  font-size: 48px; /* never under 40px */
  line-height: 0.9;
  color: var(--neon-cream);
  text-shadow: var(--glow-cream);
  transform: rotate(-6deg);
  padding: 0 var(--space-1);
}

.mp-box {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.42em;
  color: var(--neon-aqua);
  text-shadow: var(--glow-aqua);
  border: 3px solid var(--neon-aqua);
  border-radius: var(--radius-tube);
  box-shadow: var(--glow-aqua-box);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}

/*
 * OPEN LATE is the diner sign, not a status: it runs on the reader's clock (docs/brand/status.md). The server sends
 * it dark (an unlit tube). /js/clock.js sets data-night="true" on <html> from 9:00 PM to 5:59 AM local, and it
 * lights then, in NORMAL or ELEVATED only. MAYDAY and UNKNOWN keep it dark at any hour.
 */
.mp-open {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--tube-off);
  text-shadow: none;
}
/*
 * Lit. :where() keeps this at the weight of .mp-open, so the MAYDAY, UNKNOWN and light-theme rules below win
 * without a fight: the light theme drops the glow and the flicker (neon is for a black ground only).
 */
:where(:root[data-night="true"]) :where(body[data-status="NORMAL"], body[data-status="ELEVATED"]) .mp-open {
  color: var(--neon-cream);
  text-shadow: var(--glow-cream);
}

@keyframes mp-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes mp-flicker {
  0%,
  18%,
  22%,
  62%,
  66%,
  100% {
    opacity: 1;
  }
  20%,
  64% {
    opacity: 0.25;
  }
}

/*
 * Every animation lives inside this block, so nothing moves under prefers-reduced-motion: reduce.
 * NORMAL: slow sweep. ELEVATED: fast sweep. MAYDAY: the sweep stops (below).
 * OPEN LATE, when lit at night: the slow neon flicker, dark ground only. Under reduced motion it is lit, still.
 */
@media (prefers-reduced-motion: no-preference) {
  .mp-sweep {
    animation: mp-spin 6s linear infinite;
  }
  body[data-status="ELEVATED"] .mp-sweep {
    animation-duration: 1.6s;
  }
  :where(:root[data-night="true"]) :where(body[data-status="NORMAL"], body[data-status="ELEVATED"]) .mp-open {
    animation: mp-flicker 9s linear infinite;
  }
}

/* MAYDAY: the whole sign goes red, the sweep stops, OPEN LATE stays dark at any hour. */
body[data-status="MAYDAY"] .sign {
  --neon-cream: var(--neon-red);
  --neon-aqua: var(--neon-red);
  --neon-aqua-glow: var(--neon-red-glow);
  --glow-cream: var(--glow-red);
  --glow-aqua: var(--glow-red);
  --glow-aqua-box: var(--glow-red);
}
body[data-status="MAYDAY"] .mp-sweep {
  animation: none;
}
body[data-status="MAYDAY"] .mp-open {
  color: var(--tube-off);
  text-shadow: none;
}

/*
 * UNKNOWN: the page could not read the status (the status line did not answer, or has not run). The sign shows
 * no state: the sweep stops and OPEN LATE goes dark, like a sign that is off. Never red: that is MAYDAY only.
 */
body[data-status="UNKNOWN"] .mp-sweep {
  animation: none;
}
body[data-status="UNKNOWN"] .mp-open {
  color: var(--tube-off);
  text-shadow: none;
}

/* Light ground: the ink tone, no glow. Neon is for black ground only. An unlit OPEN LATE is mute. */
:root[data-theme="light"] .sign {
  --neon-cream: var(--print-ink);
  --neon-aqua: var(--print-ink);
  --neon-red: var(--print-ink);
  --tube-off: var(--mute);
}
:root[data-theme="light"] .mp-radar {
  filter: none;
}
:root[data-theme="light"] .mp-script,
:root[data-theme="light"] .mp-box,
:root[data-theme="light"] .mp-open {
  text-shadow: none;
  box-shadow: none;
}
/* OPEN LATE in the ink tone: lit or unlit, never flickering. */
:root[data-theme="light"] .mp-open {
  animation: none;
}

/* ---------------------------------------------------------------- the desk */
.desk {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.block {
  border-bottom: 1px solid var(--ink);
  padding: var(--space-8) 0;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule-soft);
}
.prose {
  max-width: 65ch;
}
.site-footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-6);
  color: var(--mute);
}

.note {
  margin-top: var(--space-4);
}

/* ---------------------------------------------------------------- tables (level 3 detail pages) */
/* 1px rules, no zebra, header in caps, numbers right-aligned. Past about 40 rows the table scrolls in place. */
.table-wrap {
  overflow: auto;
  max-height: 80vh;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-soft);
}
.data-table thead th {
  position: sticky;
  top: 0;
  background: var(--ground);
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.data-table tbody tr:last-child td {
  border-bottom: 0;
}
.data-table .num {
  text-align: right;
  white-space: nowrap;
}
.data-table .when,
.data-table .source {
  white-space: nowrap;
}
.data-table td a {
  text-decoration: none;
}
.data-table td a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- receipts */
.receipt {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--space-6);
}
.receipt dt {
  color: var(--mute);
}
.receipt dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.receipt-raw {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--ink);
  border-radius: var(--radius-none);
  max-height: 70vh;
  overflow: auto;
  white-space: pre;
  tab-size: 4;
}
.preview-sub {
  margin: var(--space-6) 0 var(--space-3);
}

/* Nothing else moves, and nothing moves at all under reduced motion: as specific as any state rule above. */
@media (prefers-reduced-motion: reduce) {
  body[data-status] .mp-sweep,
  body[data-status] .mp-open {
    animation: none;
  }
}

@media (max-width: 720px) {
  .banner {
    padding: var(--space-1) var(--space-4);
    flex-wrap: wrap;
  }
  /* Phone width: the name and the status only. */
  .banner-middle {
    display: none;
  }
  .site-header {
    padding: var(--space-4);
    flex-wrap: wrap;
  }
  .desk {
    padding: 0 var(--space-4);
  }
  .receipt {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .receipt dd {
    margin-bottom: var(--space-3);
  }
}

/* ---------------------------------------------------------------- home: module lines (level 2, plain words) */
.home-link {
  text-decoration: none;
}
.home-link:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- Mayday Index (/mayday and /mayday/<site>) */
/* Data here is desk: ink on ground, mono. No red for a single site: red is only for the global STATUS: MAYDAY. */
.mi-question {
  margin: var(--space-6) 0 var(--space-2);
}
.mi-intro .mi-question:first-of-type {
  margin-top: 0;
}
.mi-sites,
.mi-site {
  position: relative;
}

/* The view switch: two links, the current one inverted. Works with no script. */
.mi-toggle {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.mi-view {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--ink);
  text-decoration: none;
}
.mi-view[aria-current="page"] {
  background: var(--ink);
  color: var(--ground);
}

/* The static world map. At most 1000px wide, so one viewBox unit is one pixel and a site square is 6px. */
.mi-map {
  margin: 0 0 var(--space-6);
}
.mi-map-frame {
  overflow-x: auto;
}
.mi-map-svg {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
}
.mi-land {
  fill: var(--rule-soft);
}
.mi-dot {
  fill: var(--ground);
  stroke: var(--ink);
  stroke-width: 1;
}
.mi-dot.is-quiet {
  stroke: var(--mute);
}
.mi-dot.is-filled {
  fill: var(--ink);
}
.mi-ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
}
.mi-map-caption {
  max-width: 1000px;
  margin: var(--space-2) auto 0;
}

.mi-caption {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--mute);
}
.mi-table .mi-name {
  min-width: 14ch;
}
.mi-table .mi-words {
  min-width: 22ch;
}
.mi-state {
  white-space: nowrap;
}

/* Sparkline: a 1px line, no axes, the last value as a dot. */
.spark {
  display: block;
  color: var(--ink);
  overflow: visible;
}
.spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linejoin: round;
}
.spark-point,
.spark-dot {
  fill: currentColor;
}

/* Stamp: a rotated outlined word in size-3 over a block. Max one per screen. */
.stamp {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border: 2px solid var(--ink);
  border-radius: var(--radius-ui);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-6deg);
  pointer-events: none;
}

/* A stamp under a section head, at its right: clear of the head's note. The block's text wraps round it. */
.stamp-under {
  position: relative;
  float: right;
  margin: var(--space-2) var(--space-2) var(--space-4) var(--space-4);
}

/* Site page */
.mi-thanks {
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
}
/* On /mayday the stamp sits in the empty top-right corner of the map (the Arctic), clear of the header row. */
.mi-sites .stamp {
  top: 104px;
  right: var(--space-4);
}
.mi-stat {
  position: relative;
  margin: 0 0 var(--space-6);
}
.mi-stat p {
  margin: 0 0 var(--space-2);
}
.mi-stat .t-stat-number a {
  text-decoration: none;
}
.mi-stat .t-stat-number .mi-state {
  font-size: 12px;
}
.mi-stat-word {
  font-family: var(--font-mono);
}
.mi-off {
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
}

.mi-venue-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.mi-venue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.mi-venue p {
  margin: 0 0 var(--space-1);
}
.mi-venue-name {
  font-weight: 600;
}

/* The report form: four buttons in a row, then the bot check. */
.report fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.report legend {
  padding: 0;
  margin-bottom: var(--space-2);
}
.report-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.report button {
  padding: var(--space-2) var(--space-3);
}
.report button:hover:enabled {
  background: var(--ink);
  color: var(--ground);
}
.report button:disabled {
  border-color: var(--mute);
  color: var(--mute);
  cursor: not-allowed;
}
.report .cf-turnstile {
  margin-top: var(--space-2);
}

.mi-history summary {
  cursor: pointer;
  padding: var(--space-2) 0;
}

@media (max-width: 720px) {
  /* On a phone the map keeps a readable size and scrolls inside its frame; the table is the full list. */
  .mi-map-svg {
    min-width: 720px;
  }
  .mi-venue {
    grid-template-columns: minmax(0, 1fr);
  }
  .stamp {
    font-size: 20px;
  }
}

/* ---------------------------------------------------------------- Follow the Money (/money and below) */
/* Deadpan desk: ink on ground, mono for data, no red. --mayday is only for MAYDAY status and convergence alerts. */
.fm-question {
  margin: var(--space-6) 0 var(--space-2);
}
.home-money {
  margin-top: var(--space-2);
}

/* Tabs and the chart's view switch: links, the current one inverted. Works with no script. */
.fm-tabs,
.fm-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.fm-tab {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--ink);
  text-decoration: none;
}
.fm-tab[aria-current="page"] {
  background: var(--ink);
  color: var(--ground);
}

/* Filters: a GET form, one row that wraps. */
.fm-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin: 0;
}
.fm-filters label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.fm-filters select,
.fm-filters input {
  font: inherit;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--ink);
  border-radius: var(--radius-none);
  padding: var(--space-1) var(--space-2);
  min-height: 32px;
}
.fm-filters input[type="number"] {
  width: 8ch;
}
.fm-filters button {
  padding: var(--space-1) var(--space-3);
  min-height: 32px;
}
.fm-filters button:hover {
  background: var(--ink);
  color: var(--ground);
}
.fm-clear {
  padding: var(--space-1) 0;
}
.fm-off {
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
}

/* The feed: one card per trade, 1px rules between them, no card backgrounds. */
.trade-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.trade-list > li {
  border-bottom: 1px solid var(--rule-soft);
}
.trade-list > li:last-child {
  border-bottom: 0;
}
.trade-card {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-4) var(--space-8);
  padding: var(--space-6) 0;
}
.trade-head {
  grid-column: 1 / -1;
}
.trade-card .trade-head a {
  text-decoration: none;
}
.trade-card .trade-head a:hover {
  text-decoration: underline;
}
.trade-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  margin: 0;
}
.trade-facts dt {
  color: var(--mute);
}
.trade-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.trade-links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.trade-card .trade-links a {
  text-decoration: none;
}
.trade-card .trade-links a:hover {
  text-decoration: underline;
}
.trade-disclaimer {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 80ch;
}

/* Score breakdown: a monospace receipt, points right-aligned, a dashed rule, the total. */
.score-box {
  min-width: 0;
}
.score-label {
  margin: 0 0 var(--space-2);
}
.score-box .score-label a {
  text-decoration: none;
  margin-left: var(--space-2);
}
.score-receipt {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--ink);
  border-radius: var(--radius-none);
  white-space: pre;
  overflow-x: auto;
  font-variant-numeric: tabular-nums;
}
.score-null,
.score-none {
  margin: var(--space-2) 0 0;
}
.score-factors {
  margin-top: var(--space-4);
  max-height: none;
}
.score-caption {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--mute);
}
.score-factor {
  font-weight: inherit;
  text-align: left;
  white-space: nowrap;
}
.score-why,
.score-formula {
  min-width: 24ch;
}
.fm-trade .trade-card {
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--ink);
}
.fm-summary {
  margin: 0 0 var(--space-4);
}
.fm-pages {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
}
.fm-feed .fm-pages a {
  text-decoration: none;
}

/* The chart: two panels on the same weeks, square ink bars, hairline baselines, no grid. */
.fm-chart {
  margin: 0;
}
.fm-chart-frame {
  overflow-x: auto;
}
.fm-chart-svg {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
}
.fm-bar {
  fill: var(--ink);
}
.fm-base {
  stroke: var(--mute);
  stroke-width: 1;
}
.fm-label,
.fm-tick {
  fill: var(--mute);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.fm-hit {
  fill: transparent;
  stroke: none;
}
.fm-week:hover .fm-hit {
  stroke: var(--ink);
  stroke-width: 1;
}
.fm-chart-caption {
  margin: var(--space-2) 0 0;
  max-width: 80ch;
}
.fm-caption {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--mute);
}
.fm-leader-table .fm-filer {
  min-width: 22ch;
}

@media (max-width: 720px) {
  .trade-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .fm-chart-svg {
    min-width: 640px;
  }
}

/* ---------------------------------------------------------------- Phase 4: shared view switch */
/* Links, the current one inverted. Works with no script: every map has a list toggle, every chart a table. */
.view-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.view-link {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--ink);
  text-decoration: none;
}
.view-link[aria-current="page"] {
  background: var(--ink);
  color: var(--ground);
}

/* ---------------------------------------------------------------- home: the status line (level 1) */
.sl {
  position: relative;
}
.sl-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.sl-label {
  font-family: var(--font-mono);
}
.sl-word {
  overflow-wrap: anywhere;
}
/* The one red word: STATUS MAYDAY (Rule 7). */
body[data-status="MAYDAY"] .sl-word {
  color: var(--mayday);
}
.sl-sentence {
  margin: 0 0 var(--space-4);
  max-width: 40ch;
}
.sl-stale {
  margin: 0 0 var(--space-4);
}
.sl-hold {
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
  max-width: 80ch;
}
.sl-hold p {
  margin: 0;
}
.sl-hold .sl-note {
  margin-top: var(--space-2);
}
.sl-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
}
.sl-link {
  text-decoration: none;
}
.sl-link:hover {
  text-decoration: underline;
}

.hm-bullets {
  margin: 0;
  padding-left: var(--space-6);
  max-width: 70ch;
}
.hm-bullets li + li {
  margin-top: var(--space-2);
}

/* The convergence alert: inverted, full width, a --mayday border (docs/brand/status.md). The only alert block. */
.convergence .convergence-alert {
  background: var(--ink);
  color: var(--ground);
  border: 4px solid var(--mayday);
  padding: var(--space-4) var(--space-6);
}
.convergence .convergence-alert + .convergence-alert {
  margin-top: var(--space-4);
}
.convergence .cv-head {
  margin: 0 0 var(--space-2);
}
.convergence .cv-text {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1.45;
  max-width: 80ch;
}
.convergence .cv-receipts {
  margin: 0;
}
.convergence .cv-receipts a {
  color: var(--ground);
  text-decoration: none;
}
.convergence .cv-receipts a:hover {
  text-decoration: underline;
}
.cv-none p {
  margin: 0;
}

/* The six scenarios: one row each, 1px rules, the count in mono. */
.sc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.sc-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) max-content;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.sc-name {
  font-weight: 600;
  text-decoration: none;
}
.sc-name:hover {
  text-decoration: underline;
}
/* ELEVATED and MAYDAY on an inverted chip, in ink: red is only for the global status. */
.sc-chip {
  display: inline-block;
  background: var(--ink);
  color: var(--ground);
  padding: 0 var(--space-2);
  border-radius: var(--radius-ui);
}
.home-line {
  margin: 0 0 var(--space-2);
}

/* ---------------------------------------------------------------- signs (scenario pages and pizza-admin) */
.sg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.sg-row {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.sg-row p {
  margin: 0 0 var(--space-1);
}
.sg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}
.sg-state {
  display: inline-block;
  min-width: 18ch;
  padding: 0 var(--space-2);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
}
.sg-row[data-state="LIT"] .sg-state {
  background: var(--ink);
  color: var(--ground);
}
.sg-row[data-state="NOT EVALUATED"] .sg-state {
  border-style: dashed;
  color: var(--mute);
}
.sg-plain {
  font-weight: 600;
}
.sg-why {
  max-width: 80ch;
}
.sg-receipts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.sg-receipt {
  text-decoration: none;
}
.sg-receipt:hover {
  text-decoration: underline;
}
.sg-detail {
  margin-top: var(--space-2);
}
.sg-detail summary {
  cursor: pointer;
  padding: var(--space-1) 0;
}
.sg-detail .t-body,
.sg-detail .t-data {
  margin: var(--space-2) 0;
}
.sg-findings {
  margin-top: var(--space-2);
  max-height: none;
}
.sg-caption {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--mute);
}

/* ---------------------------------------------------------------- scenario pages */
.sc-title {
  margin: 0 0 var(--space-3);
}
.sc-alt-list,
.sc-gap-list {
  margin: 0;
  padding-left: var(--space-6);
  max-width: 80ch;
}
.sc-alt-list li + li,
.sc-gap-list li + li {
  margin-top: var(--space-2);
}
.sc-alt-list p {
  margin: 0;
}
.sc-facts {
  margin-top: var(--space-4);
}

/* ---------------------------------------------------------------- Sky Watch (/sky) */
.sw-question,
.wp-question {
  margin: var(--space-6) 0 var(--space-2);
}
.sw-intro .sw-question:first-of-type,
.wp-intro .wp-question:first-of-type {
  margin-top: 0;
}
.sw-quiet {
  margin: 0 0 var(--space-4);
}
.sw-empty,
.wp-empty {
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
}
.sw-map,
.wp-map {
  margin: 0 0 var(--space-6);
}
.sw-map-frame,
.wp-map-frame,
.sw-chart-frame {
  overflow-x: auto;
}
.sw-map-svg,
.wp-map-svg {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
}
.sw-land,
.wp-land {
  fill: var(--rule-soft);
}
.sw-mark {
  stroke: var(--ink);
  stroke-width: 1;
}
.sw-mark.is-filled {
  fill: var(--ink);
}
.sw-mark.is-hollow {
  fill: var(--ground);
}
.sw-key,
.wp-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  list-style: none;
  margin: var(--space-2) auto 0;
  padding: 0;
  max-width: 1000px;
}
.sw-swatch,
.wp-swatch {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
.sw-map-caption,
.wp-map-caption {
  max-width: 1000px;
  margin: var(--space-2) auto 0;
}
.sw-caption,
.wp-caption {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--mute);
}
.sw-table .sw-name,
.wp-table .wp-place,
.wp-markets .wp-question-cell {
  min-width: 18ch;
}
.sw-tfr-table .sw-where {
  min-width: 28ch;
}
.sw-note,
.wp-note {
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
}

/* The tanker chart: a 1px count line, a dashed normal line, a hairline base, no grid. */
.sw-chart {
  margin: 0;
}
.sw-chart-svg {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
}
.sw-count {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  stroke-linejoin: round;
}
.sw-normal {
  fill: none;
  stroke: var(--mute);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.sw-dot {
  fill: var(--ink);
}
.sw-axis {
  stroke: var(--mute);
  stroke-width: 1;
}
.sw-tick {
  fill: var(--mute);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.sw-chart-caption {
  margin: var(--space-2) 0 0;
  max-width: 80ch;
}

/* ---------------------------------------------------------------- World Pulse (/pulse) */
/* The hex layer: ink at four opacity steps, no color ramp (UI spec). A hairline keeps a tiny cell visible. */
.wp-hex {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}
.wp-hex[data-step="0"] {
  fill-opacity: 0;
  stroke: var(--mute);
}
.wp-hex[data-step="25"] {
  fill-opacity: 0.25;
}
.wp-hex[data-step="50"] {
  fill-opacity: 0.5;
}
.wp-hex[data-step="100"] {
  fill-opacity: 1;
}
.wp-flag {
  display: inline-block;
  background: var(--ink);
  color: var(--ground);
  padding: 0 var(--space-2);
}
.wp-sanctions {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.wp-sanction {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.wp-sanction-receipt {
  text-decoration: none;
}

@media (max-width: 720px) {
  .sw-map-svg,
  .wp-map-svg {
    min-width: 720px;
  }
  .sw-chart-svg {
    min-width: 640px;
  }
  .sc-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .convergence .convergence-alert {
    padding: var(--space-3) var(--space-4);
  }
  /* The status word keeps to one line on a phone. */
  .sl-word {
    font-size: 44px;
  }
}

/* ---------------------------------------------------------------- Phase 5: the Morning Desk (/desk and home) */
/* Ink on ground. Each part is labeled in caps; every number is mono and links to its receipt. */
.desk-title {
  margin: 0 0 var(--space-4);
}
.desk-brief {
  max-width: 80ch;
  margin: 0 0 var(--space-4);
}
.desk-part {
  margin: 0 0 var(--space-3);
}
.desk-label {
  margin-right: var(--space-1);
}
.desk-num {
  white-space: nowrap;
}
a.desk-num {
  text-decoration-thickness: 1px;
}
.desk-sign {
  margin: 0 0 var(--space-3);
}
.desk-facts {
  margin-top: var(--space-6);
}
.desk-days {
  margin-top: var(--space-4);
}
.desk-receipts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.desk-receipt {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule-soft);
  overflow-wrap: anywhere;
}
.desk-receipts .desk-num {
  font-weight: 700;
}

/* ---------------------------------------------------------------- Phase 5: near me (home box and /near) */
/* A GET form, no script. The note under it says the zip is not stored or logged. */
.zip-form {
  margin: 0;
  max-width: 60ch;
}
.zip-form label {
  display: block;
  margin-bottom: var(--space-1);
}
.zip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.zip-input {
  font: inherit;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--ink);
  border-radius: var(--radius-none);
  padding: var(--space-1) var(--space-2);
  min-height: 36px;
  width: 14ch;
}
/* The browser's own placeholder grey is not a token (Rule 7): every placeholder is --mute. */
input::placeholder,
textarea::placeholder {
  color: var(--mute);
  opacity: 1;
}
.zip-go {
  padding: var(--space-1) var(--space-3);
  min-height: 36px;
}
.zip-go:hover {
  background: var(--ink);
  color: var(--ground);
}
.zip-note {
  margin: var(--space-2) 0 0;
}
.near-alert-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  border-top: 1px solid var(--ink);
}
.near-alert {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.near-advisory {
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
  max-width: 80ch;
}
.near-advisory p {
  margin: 0 0 var(--space-2);
}
.near-advisory p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- Phase 5: alerts by email (/alerts) */
.subscribe {
  max-width: 70ch;
}
.subscribe fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.subscribe legend {
  padding: 0;
  margin-bottom: var(--space-3);
}
.sub-email-label,
.sub-modules-label {
  display: block;
  margin: 0 0 var(--space-1);
}
.sub-email {
  font: inherit;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--ink);
  border-radius: var(--radius-none);
  padding: var(--space-1) var(--space-2);
  min-height: 36px;
  width: 100%;
  max-width: 40ch;
  margin-bottom: var(--space-4);
}
.sub-modules {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  border-top: 1px solid var(--ink);
}
.sub-module-row {
  border-bottom: 1px solid var(--rule-soft);
}
.sub-module {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 var(--space-2);
  align-items: baseline;
  padding: var(--space-2) 0;
  cursor: pointer;
}
.sub-module input {
  accent-color: var(--ink);
}
.sub-module-name {
  font-weight: 600;
}
.sub-module-about {
  grid-column: 2;
}
.subscribe .cf-turnstile {
  margin: 0 0 var(--space-3);
}
.sub-go,
.unsub button {
  padding: var(--space-2) var(--space-3);
}
.sub-go:hover:enabled,
.unsub button:hover {
  background: var(--ink);
  color: var(--ground);
}
.subscribe fieldset:disabled .sub-go,
.subscribe fieldset:disabled input {
  border-color: var(--mute);
  color: var(--mute);
  cursor: not-allowed;
}
.al-notice {
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
  max-width: 80ch;
}
.al-notice p {
  margin: 0;
}
.unsub {
  margin: var(--space-4) 0 0;
}
.hm-subscribe {
  margin: var(--space-2) 0 0;
}

/* ---------------------------------------------------------------- Phase 5: the LLM receipt (/receipt/llm/<id>) */
/* Raw model output beside what was published, then the changes: struck through out, underlined in. Ink only. */
.llm-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
}
.llm-col {
  min-width: 0;
}
.llm-pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 60vh;
}
.llm-sent summary {
  cursor: pointer;
  padding: var(--space-2) 0;
}
.llm-problems {
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
}
.diff {
  max-width: 90ch;
  margin: 0 0 var(--space-4);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.diff-del {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--mute);
}
.diff-ins {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  background: none;
  font-weight: 700;
}

/* ---------------------------------------------------------------- Phase 5: status (/status) */
/* MET is plain ink, MISSED an inverted ink chip, OFF dashed and muted. Never --mayday: red is only for MAYDAY. */
.st-slo {
  display: inline-block;
  padding: 0 var(--space-2);
  border: 1px solid var(--ink);
  border-radius: var(--radius-ui);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.st-slo[data-slo="missed"] {
  background: var(--ink);
  color: var(--ground);
}
.st-slo[data-slo="off"] {
  border-style: dashed;
  color: var(--mute);
  border-color: var(--mute);
}
.st-slo[data-slo="none"] {
  color: var(--mute);
  border-color: var(--rule-soft);
}
.st-name {
  min-width: 22ch;
  text-align: left;
}
.st-note {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  color: var(--mute);
  max-width: 50ch;
  white-space: normal;
}
.st-cron {
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Phase 5: the record (/record) */
.rc-name {
  min-width: 18ch;
  text-align: left;
}
.rc-what {
  min-width: 30ch;
}
.rc-match {
  display: inline-block;
  padding: 0 var(--space-2);
  border: 1px solid var(--ink);
  border-radius: var(--radius-ui);
  white-space: nowrap;
}
.rc-match[data-match="matched"] {
  background: var(--ink);
  color: var(--ground);
}
.rc-match[data-match="open"],
.rc-match[data-match="unmarked"] {
  border-style: dashed;
  color: var(--mute);
  border-color: var(--mute);
}
.rc-mark {
  display: block;
  margin-top: var(--space-1);
}
.rc-note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.rc-note {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule-soft);
}

/* The backtest: one block per window, each evaluation folded, signs grouped by state. */
.bt-times {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bt-provisional {
  font-family: var(--font-mono);
}
.bt-eval {
  border-top: 1px solid var(--rule-soft);
  padding: var(--space-2) 0;
}
.bt-eval summary {
  cursor: pointer;
  padding: var(--space-1) 0;
}
.bt-scenario {
  margin: var(--space-4) 0 0;
}
.bt-scenario-name {
  margin: 0 0 var(--space-2);
  font-weight: 600;
}
.bt-group {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
  border-left: 1px solid var(--rule-soft);
}
.bt-state {
  margin: 0 0 var(--space-1);
}
.bt-signs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bt-signs li + li {
  margin-top: var(--space-2);
}
.bt-signs p {
  margin: 0;
}
.bt-inputs {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  color: var(--mute);
  overflow-wrap: anywhere;
}
.bt-hashes summary {
  cursor: pointer;
  padding: var(--space-2) 0;
}

@media (max-width: 720px) {
  .llm-side {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .sub-module {
    grid-template-columns: max-content minmax(0, 1fr);
  }
  .bt-group {
    padding-left: var(--space-2);
  }
}

/* ---------------------------------------------------------------- glossary (/glossary) */
/* Ink on ground like the rest of the desk. No color of its own: a word defined here is not a live status. */
.gl-title {
  margin: 0 0 var(--space-4);
}
.gl-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}
.gl-table {
  max-width: 80ch;
  margin: var(--space-4) 0;
}
.gl-caption {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--mute);
}
.gl-list {
  margin: 0;
  max-width: 80ch;
}
.gl-list dt {
  font-weight: 600;
  margin-top: var(--space-6);
}
.gl-list dt:first-child {
  margin-top: 0;
}
.gl-list dd {
  margin: var(--space-1) 0 0;
}
.gl-p {
  margin: 0;
}
.gl-parts {
  margin-top: var(--space-2);
}
.gl-link {
  margin: var(--space-4) 0 0;
}