/* ════════════════════════════════════════════════════════════════════════════
   Market Context log tab (2026-07-10). Standalone, namespaced `mc-*`; it draws with
   the app's theme tokens (every palette x mode for free), the shared radius scale
   (--r-xs..--r-lg) and the shared SURFACE language in surface.css.

   The page is a stack of discrete CARDS on the tinted ground — the header, the run
   picker, then one card per compute — rather than one hairline-divided sheet. Card
   geometry (surface, hairline, radius, shadow) comes from `.card` / `.card--pad` /
   `.card--table`, added to those wrappers in js/market-context.js and mirrored in its
   skeleton builder. What survives here is only what is specific to THIS page: the
   feed-row density, the freshness chips and the inputs band.

   Responsive at 760px.
   ════════════════════════════════════════════════════════════════════════════ */

/* The old `#view-market-context { padding: 0 }` reset is deliberately gone: `.view`
   in surface.css supplies the column flow, the gap BETWEEN cards and the top
   padding, and an id-specificity `padding: 0` silently cancelled all three.
   The page-local `.mono` rule is gone for the same reason — app.css and surface.css
   already own that class, and a third definition of it was drift waiting to happen. */

/* The skeleton is painted inside reveal.js's own `.g10-sk` wrapper, which is a plain
   block — so without this the placeholder cards would touch while the real ones sit a
   gap apart, and the swap would shift the page. Scoped to this view; the wrapper is
   shared, the rhythm is the page's. */

.mc-empty {
  padding: 40px 24px; color: var(--text-muted); font-size: 14px; text-align: center;
  /* Every state this view can land in is a card on the ground, the empty and loading
     ones included — a lone sentence floating on the tint reads as a broken page. */
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.mc-faint { color: var(--text-faint); }

/* ── controls — the page header card (`.card .card--pad` in the renderer) ───── */
.mc-controls {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
/* Headlines are the serif, and only headlines. */
.mc-title { font: 600 20px/1.25 var(--font-display); letter-spacing: -.015em; color: var(--text); }
/* The gloss beside the headline is plain language, so it drops out of the serif into
   the UI face — the .sec-head / .sec-note pairing, inline. */
.mc-controls .mc-faint { font: 400 12px/1.5 var(--font-sans); color: var(--text-muted); }

/* ── chips ─────────────────────────────────────────────────────────────────── */
.mc-chip {
  display: inline-flex; align-items: center; font: 500 10px/1.4 var(--font-sans);
  letter-spacing: .06em; padding: 2px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--line); color: var(--text-2); white-space: nowrap;
}
.mc-chip--fresh { color: var(--bull-text); border-color: var(--bull-edge); }
.mc-chip--stale { color: var(--bear-text); border-color: var(--bear-edge); }
.mc-chip--unknown { color: var(--text-muted); border-color: var(--line); }
/* `news` is a CATEGORY sitting in a freshness family, not a freshness level, so it takes
   the informational rung rather than --accent — which is the interactive colour and must
   not double as a data status. */
.mc-chip--news { color: var(--info-text); border-color: var(--info-edge); }

/* ── run picker — grouped by UTC day (`.card .card--pad` in the renderer) ───── */
/* one date heading, its runs listed latest-first */
/* The design's signature label: uppercase mono at wide tracking in the quietest
   tier, so a group can be introduced without a heading that competes with it. */
.mc-picker-h {
  font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--colhead); margin-bottom: 10px;
}
.mc-day { margin-bottom: 12px; }
.mc-day:last-child { margin-bottom: 0; }
/* A date is a figure: mono and tabular, so the day headings line up down the column.
   The rule under it divides two run groups INSIDE one card, which is a different
   thing from the full-bleed sheet the card language replaced. */
.mc-day-h {
  display: flex; align-items: baseline; gap: 8px;
  font: 500 11px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--text);
  font-variant-numeric: tabular-nums;
  padding: 2px 2px 6px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.mc-day-n { font: 400 10px/1.4 var(--font-sans); color: var(--text-faint); }
.mc-runs { display: flex; flex-wrap: wrap; gap: 6px; }
/* A run cube is a surface nested inside the picker card, so it steps DOWN a rung:
   --r-md, the sunken tier, no shadow of its own. */
.mc-run {
  display: inline-flex; flex-direction: column; gap: 3px; cursor: pointer;
  font-size: 11px; padding: 7px 11px; border-radius: var(--r-md); max-width: 240px;
  border: 1px solid var(--line); background: var(--surface-sunken);
  color: var(--text-2); text-align: left; font-family: var(--font-sans);
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.mc-run:hover { border-color: var(--accent-edge); background: var(--surface-row-active); }
.mc-run--active { border-color: var(--accent); color: var(--text); }
.mc-run-ts { font-weight: 600; font-variant-numeric: tabular-nums; }
/* compute names logged by the run — sans (not mono) + wrapping so a many-compute run
   reads cleanly and never stretches the flex row */
.mc-run-k {
  font-family: var(--font-sans); font-size: 10px; line-height: 1.35;
  color: var(--text-faint); white-space: normal; word-break: break-word;
}
.mc-run--active .mc-run-k { color: var(--text-2); }

/* ── detail — one card per compute ─────────────────────────────────────────── */
/* The compute cards are separate objects on the ground, so the column that holds them
   supplies the gap and nothing else — it is not itself a card. */
.mc-detail {
  display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px);
}
/* Provenance: the correlation id the cards below belong to. Left on the ground rather
   than boxed — it labels the stack, it is not one of its objects. */
.mc-detail-h {
  font: 400 11px/1.4 var(--font-sans); letter-spacing: .04em;
  color: var(--text-faint); padding: 0 2px; word-break: break-all;
}
/* The card's children are full-bleed rows (header rule, inputs wash, feed rows and their
   hover tint), so the frame carries the only rounding and clips them — otherwise a square
   child paints straight over the rounded corner. That is exactly what `.card--table`
   does, which is why this rule no longer restates the border, radius or overflow. */
.mc-compute-h {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.mc-compute-t { font: 500 15px/1.25 var(--font-display); letter-spacing: -.015em; color: var(--text); }
.mc-compute-b { flex: 1; }
.mc-compute-ts {
  font: 400 10.5px/1.4 var(--font-mono); font-variant-numeric: tabular-nums;
}

/* ── feeds ─────────────────────────────────────────────────────────────────── */
.mc-feeds { display: flex; flex-direction: column; }
.mc-feed { border-bottom: 1px solid var(--line); }
.mc-feed:last-child { border-bottom: 0; }
.mc-feed-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 9px 14px; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
/* hover is a background tint only — no lift, no border change. --surface-row-active is
   the token for a hovered/expanded row; the old theme-blind grey wash barely registered
   over the light grounds. */
.mc-feed-head:hover { background: var(--surface-row-active); }
.mc-tw { color: var(--text-faint); font-size: 10px; width: 10px; }
.mc-feed-name { font-family: var(--font-sans); font-size: 12px; color: var(--text); }
.mc-feed-role { font-size: 11px; flex: 1; min-width: 120px; }
.mc-feed-fresh { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11px; }
.mc-when {
  color: var(--text-muted); font-family: var(--font-mono); font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.mc-age {
  color: var(--text-faint); font-size: 10px; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* feed preview body */
.mc-feed-body { padding: 4px 14px 12px 32px; }
.mc-note { font-size: 11px; color: var(--text-2); margin-bottom: 4px; }
.mc-meta {
  font-size: 10px; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
/* A raw preview is a nested surface inside the compute card, so it steps down to the
   sunken tier rather than sitting at the same level as the card holding it. */
.mc-prev {
  margin: 0; padding: 10px 12px; max-height: 220px; overflow: auto;
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: var(--r-md); font-family: var(--font-sans); font-size: 11px;
  color: var(--text-2); white-space: pre-wrap; word-break: break-word;
}

/* ── inputs — the news/events that fed a compute (daily EP, Sunday author) ──── */
/* Recessed, not washed: it reads as the floor the compute sat on. Was a 4%-alpha blue of
   the retired accent, which never tracked the palette and cast cool over the warm
   light grounds. Full-bleed inside .mc-compute, so it takes no radius of its own. */
.mc-inputs {
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface-sunken);
}
.mc-inputs-h {
  font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--colhead); margin-bottom: 10px;
}
.mc-in-grp { margin-bottom: 12px; }
.mc-in-grp:last-child { margin-bottom: 0; }
/* One rung under the band label: still mono, but sentence case and less tracking, so
   two stacked labels do not read as the same level. */
.mc-in-h {
  font: 500 11px/1.4 var(--font-sans); letter-spacing: .06em; color: var(--text-2);
  margin-bottom: 6px;
}
/* The table's own frame rounds and clips; the CELLS stay square. It lifts back to the
   plain surface because it sits on the sunken inputs band — a sunken box on a sunken
   band has no edge at all. */
.mc-in-tblwrap {
  overflow-x: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.mc-in-tbl { border-collapse: collapse; width: 100%; font-size: 11px; }
.mc-in-tbl { font-variant-numeric: tabular-nums; }
/* Mono tracked capitals on the sunken tier, so the header row reads as chrome rather
   than as data. The bespoke 6%-alpha row rule this table used to draw is retired in
   favour of the hairline token every other table here now uses — it tracks the palette
   and carries the same weight per unit alpha, which was the reason for the old tuning. */
.mc-in-tbl th {
  font: 500 9.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--colhead); text-align: left; background: var(--surface-sunken);
  padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.mc-in-tbl td {
  padding: 8px 12px; color: var(--text-2);
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.mc-in-tbl tbody tr:last-child td { border-bottom: 0; }
.mc-in-tbl td:first-child { color: var(--text); }
/* The article + story lists are the same object in list form, so they take the same frame. */
.mc-in-list {
  list-style: none; margin: 0; padding: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.mc-in-list li {
  font-size: 11px; color: var(--text-2); padding: 7px 12px;
  line-height: 1.4; border-bottom: 1px solid var(--line);
}
.mc-in-list li:last-child { border-bottom: 0; }
.mc-in-src { color: var(--text); font-weight: 500; }
.mc-in-when {
  font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.mc-in-more { font-size: 10px; margin-top: 6px; }

@media (max-width: 760px) {
  .mc-feed-role { flex-basis: 100%; }
  .mc-feed-body { padding-left: 14px; }
}