/* ══ Market Wire ═════════════════════════════════════════════════════════
 * Reads on the shared tokens (web/css/tokens.css) — this file declares no
 * palette of its own. The page used to fork one: a light "parchment" theme
 * that redefined --bg / --accent / --border / --text-* on :root, which the
 * token file explicitly forbids. Because :root is global and the nav bar is
 * injected into the same document, the fork also repainted the nav, so the
 * one page that looked least like Graham Terminal was also the one dragging
 * the chrome with it. Dark ground, gold accent, and the light counterpart all
 * come from the tokens now, and the page follows the site theme toggle.
 *
 * Layout is the day's arc over a deep dive. The three editions run left to
 * right in time order, each showing its recap, so a whole session is legible
 * without a click; the selected column expands underneath into its narrative
 * and its sources. The previous build stacked narrative → recap → sources for
 * one edition at a time, which left the right half of a 1,180px container
 * empty and made "what happened today" a three-tab reconstruction.
 *
 * Colour means one thing: --accent marks the edition you are reading. The old
 * build hued each edition separately (orange / blue / purple), spending three
 * colours on what the label already says in words.
 */

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── Toolbar ── */
.wire-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 10px var(--space-6);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.wb-spacer { flex: 1 1 auto; }

.wb-stamp {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--muted-dim);
  white-space: nowrap;
}
.wb-stamp b { color: var(--muted); font-weight: 500; }

/* ── Date stepper + archive popover ── */
.wire-date { position: relative; display: flex; align-items: center; gap: 2px; }

.wb-step,
.wb-date {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1);
}
.wb-step {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-xs);
  font-size: 1rem;
  line-height: 1;
}
.wb-date {
  height: 30px;
  padding: 0 13px;
  border-radius: var(--radius-xs);
  color: var(--text-soft);
  font-weight: 500;
  white-space: nowrap;
}
.wb-step:hover:not(:disabled),
.wb-date:hover { color: var(--text-strong); border-color: var(--accent-line); background: var(--bg-chip); }
.wb-step:disabled { opacity: 0.35; cursor: default; }
.wb-date .wb-caret { color: var(--muted-dim); margin-left: 6px; font-size: 0.6rem; }
.wb-date[aria-expanded="true"] { border-color: var(--accent-line); color: var(--accent); }

.wb-step:focus-visible,
.wb-date:focus-visible,
.cal-nav:focus-visible,
.cal-day.available:focus-visible,
.arc-col:focus-visible,
.source-head:focus-visible,
.wb-recent button:focus-visible { outline: none; box-shadow: var(--ring); }

.wb-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 262px;
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}
.wb-pop[hidden] { display: none; }

/* ── Calendar ── */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.cal-month {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.cal-nav {
  background: none;
  border: 0;
  color: var(--muted-dim);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
.cal-nav:hover { color: var(--accent); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow {
  text-align: center;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.cal-day {
  text-align: center;
  padding: 5px 0;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1;
  color: var(--border);           /* a day with no digest — present, not offered */
}
.cal-day.available { color: var(--text-soft); cursor: pointer; background: var(--bg-panel); }
.cal-day.available:hover { background: var(--bg-chip); color: var(--text-strong); }
.cal-day.today { border-color: var(--border); }
.cal-day.selected,
.cal-day.selected:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }

.wb-recent-label {
  margin: var(--space-3) 0 var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.wb-recent { list-style: none; }
.wb-recent button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font-family: inherit;
  padding: 5px 6px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-xs);
  color: var(--muted);
  cursor: pointer;
}
.wb-recent button:hover { background: var(--bg-chip); color: var(--text); }
.wb-recent li.active button { color: var(--accent); }

/* ── Page body ── */
.wire {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-8);
}
.wire-msg {
  padding: var(--space-8) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--muted-dim);
}
.wire-msg.error { color: var(--down); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

/* ── The day's arc ──
 * auto-fit rather than a fixed three, because a day can carry fewer sessions
 * and an empty third column reads as a failure to load.
 */
.arc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.arc.n1 { max-width: 560px; }
.arc.n2 { max-width: 900px; }
.arc-col {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-1), background var(--dur-1);
}
.arc-col:hover { border-color: var(--border); background: var(--bg-panel); }
.arc-col.on {
  border-top-color: var(--accent);
  background: var(--bg-panel);
}

.arc-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 3px;
}
.arc-label {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.arc-col.on .arc-label { color: var(--accent); }
.arc-n {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted-dim);
}
.arc-n::after { content: ' posts'; }
.arc-range {
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--muted-dim);
}

/* ── An edition still to come ──
 * Holds the column so the day keeps its shape, and says when it lands. Dashed
 * and unlit, so it never reads as a card that failed to load.
 */
.arc-col.pending {
  border-style: dashed;
  border-top: 2px dashed var(--border);
  background: transparent;
  cursor: default;
}
.arc-col.pending:hover { background: transparent; border-color: var(--border); }
.arc-col.pending .arc-label { color: var(--muted-dim); }
.arc-soon {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dim);
  background: var(--bg-chip);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  white-space: nowrap;
}
.arc-await {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}
.arc-when {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.arc-when b { color: var(--accent); font-weight: 600; }
.arc-note {
  display: block;
  margin-top: 5px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--muted-dim);
}

.arc-list { list-style: none; counter-reset: arc; }
.arc-list li {
  counter-increment: arc;
  position: relative;
  padding: var(--space-3) 0 var(--space-3) 28px;
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-soft);
}
.arc-list li:last-child { padding-bottom: 0; }
.arc-list li::before {
  content: counter(arc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-dim);
}
.arc-col.on .arc-list li { color: var(--text); }
.arc-col.on .arc-list li::before { color: var(--accent); }
.arc-empty {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
  color: var(--muted-dim);
}

/* ── Deep dive ──
 * The selected edition in full: narrative on one measure, sources in a rail.
 */
.deep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-7);
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border);
}
.deep-head { margin-bottom: var(--space-4); }
.deep-head .deep-edition { color: var(--accent); }

.deep-lead {
  max-width: 68ch;
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--text-soft);
}
/* The opening clause carries the day's headline; give it the weight a headline
   would have had, without inventing one the digest never wrote. */
.deep-lead::first-line { color: var(--text-strong); }

.deep-rail > .eyebrow { margin-bottom: var(--space-3); }
.rail-cards { display: flex; flex-direction: column; gap: var(--space-3); }

.source {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.source-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}
.source.open .source-head { border-bottom: 1px solid var(--border-soft); }
.source-head:hover { background: var(--bg-panel); }
.source-id { flex: 1; min-width: 0; }
.source-name {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.source-handle {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted-dim);
  margin-top: 1px;
}
.source-n {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  background: var(--bg-chip);
  border-radius: var(--radius-pill);
  padding: 2px 7px;
  white-space: nowrap;
}
.source-caret {
  color: var(--muted-dim);
  font-size: 0.6rem;
  transition: transform var(--dur-2) var(--ease);
}
.source.open .source-caret { transform: rotate(180deg); }
/* Collapsed by default — see the note in x.js. The header stays a full-width
   hit target, and the caret is the only thing that moves. */
.source-body {
  display: none;
  padding: var(--space-3) var(--space-4) var(--space-4);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-soft);
}
.source.open .source-body { display: block; }

/* ── Responsive ── */
@media (max-width: 1060px) {
  .deep { grid-template-columns: 1fr; gap: var(--space-6); }
  .deep-rail .rail-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
  }
}
@media (max-width: 860px) {
  .wire-bar { padding: 10px var(--space-4); gap: var(--space-3); }
  .wb-stamp { width: 100%; order: 3; }
  .wire { padding: var(--space-5) var(--space-4) var(--space-7); }
  .deep-lead { font-size: var(--fs-base); }
}
@media (max-width: 420px) {
  .wb-pop { width: calc(100vw - 32px); }
}