/* /macro site layout. Colors, fonts, and type sizes come from theme.css
   (generated from the chartbook tokens.yaml); nothing here hardcodes a hex. */

* { box-sizing: border-box; }

/* TWO-COLUMN RULE (Jason, recurring): on a subpage, the table-beside band
   (.mf-band2) and the chart grid (.mf-grid2) MUST share the same column split so
   every column edge lines up straight down the section. They are both driven off
   this ONE variable so they can never silently drift apart again. Do not give
   either its own grid-template-columns. Guard: scripts/lint-macro-layout.mjs
   (runs in the Netlify build; fails the deploy if these drift apart). */
:root { --mf-subpage-2col: 1fr 1fr; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--mf-font);
  color: var(--mf-ink);
  background: var(--mf-bg);
  line-height: 1.5;
  font-size: 16px;
}

a { color: var(--mf-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.mf-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---- Top nav ------------------------------------------------------------ */
.mf-header {
  border-bottom: 1px solid var(--mf-gridline);
  background: var(--mf-bg);
  position: sticky;
  top: 0;
  z-index: 50;
}
.mf-header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 64px;
}
.mf-brand { display: flex; align-items: baseline; gap: 12px; flex: 0 0 auto; }
.mf-brand a { color: var(--mf-ink); font-weight: 700; font-size: 19px; letter-spacing: .01em; }
.mf-brand a:hover { text-decoration: none; }
.mf-asof { font-size: 12px; font-weight: 400; color: var(--mf-muted); letter-spacing: .01em; }
.mf-nav { display: flex; gap: 22px; flex: 1 1 auto; flex-wrap: wrap; }
.mf-nav a {
  color: var(--mf-ink);
  font-size: 15px;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.mf-nav a:hover { text-decoration: none; border-bottom-color: var(--mf-gridline); }
.mf-nav a.active { color: var(--mf-blue); border-bottom-color: var(--mf-blue); font-weight: 600; }
.mf-menu-btn {
  display: none;
  margin-left: auto;
  background: none; border: 1px solid var(--mf-gridline); border-radius: 6px;
  width: 40px; height: 36px; cursor: pointer; color: var(--mf-ink);
}

/* ---- KPI strip (Key Indicators) ---------------------------------------- */
.mf-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--mf-gridline);
  border: 1px solid var(--mf-gridline);
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
}
.mf-kpi { background: var(--mf-bg); padding: 14px 16px; }
/* Key Indicator tiles that link to a subpage section: keep the tile look (no
   underlined-text styling), just add a pointer + subtle hover. */
a.mf-kpi { text-decoration: none; color: inherit; cursor: pointer; display: block; }
a.mf-kpi:hover { background: var(--mf-hover, rgba(0, 0, 0, 0.03)); }
/* Standalone PCE-equivalent wage box (sits in a table column, not a grid). */
.mf-kpi.mf-kpi-solo { margin-top: 10px; }
.mf-kpi.mf-kpi-solo .sub { font-size: 11.5px; color: var(--mf-muted); margin-top: 2px; }
/* Ecumenical underlying-inflation tile, centered above the PCE / CPI sections. */
.mf-tile-center { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 8px 0 20px; }
/* One Underlying-inflation column = its ecumenical tile centered above its table. */
.mf-underlying-col { min-width: 0; }
.mf-kpi-ecu { max-width: 380px; width: 100%; margin-top: 0; border: 1px solid var(--mf-gridline); border-radius: 8px; text-align: center; }
.mf-kpi-ecu .label { text-transform: none; letter-spacing: .02em; font-size: 12px; font-weight: 600; color: var(--mf-ink); }
.mf-kpi-ecu .meta { justify-content: center; }
.mf-kpi .label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mf-muted); }
.mf-kpi .value { font-size: 26px; font-weight: 700; margin: 2px 0 1px; }
.mf-kpi .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 2px; font-size: 11.5px; color: var(--mf-muted); }
.mf-kpi .meta .date { white-space: nowrap; }
.mf-kpi .chg { font-weight: 600; white-space: nowrap; }
.mf-kpi .chg.up { color: var(--mf-green); }
.mf-kpi .chg.down { color: var(--mf-red); }

/* ---- Section heading ---------------------------------------------------- */
.mf-band-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 26px 0 10px;
}
.mf-band-head h2 { font-size: 17px; font-weight: 700; margin: 0; }
.mf-band-head a { font-size: 14px; }

/* ---- Band: table left, chart right ------------------------------------- */
.mf-band {
  display: grid;
  grid-template-columns: minmax(280px, 38%) 1fr;
  gap: 24px;
  align-items: stretch;
  border: 1px solid var(--mf-gridline);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.mf-band-table { align-self: center; }
.mf-band-fig { min-width: 0; }

/* ---- Booktabs-style table ---------------------------------------------- */
.mf-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mf-table caption { text-align: left; color: var(--mf-muted); font-size: 12px; margin-bottom: 6px; }
.mf-table thead th { border-bottom: 1px solid var(--mf-ink); padding: 4px 8px; text-align: center; font-weight: 600; }
.mf-table thead th:first-child { text-align: left; white-space: nowrap; }
.mf-table tbody td { padding: 3px 8px; text-align: center; font-variant-numeric: tabular-nums; }
.mf-table tbody td:first-child { text-align: left; color: var(--mf-muted); white-space: nowrap; }
/* Equal-width, centered number columns: every column after the label column gets
   the same fixed width so number columns line up across all tables (3-col Wages,
   ~5-col International overview, etc.); the first/label column stays flexible. */
.mf-table thead th:not(:first-child),
.mf-table tbody td:not(:first-child) { width: 86px; }
.mf-table tbody tr:last-child td { border-bottom: 1px solid var(--mf-ink); }
.mf-table .pos { color: var(--mf-ink); }
.mf-table .neg { color: var(--mf-red); }
/* International table only (home + subpage both use .mf-table-wide): shrink the
   Economy column so the numbers start further left, and let the numeric columns
   share the remaining width evenly with roomier gaps between them. Must follow the
   base .mf-table rules above to override the fixed 86px width. */
.mf-table-wide thead th:first-child,
.mf-table-wide tbody td:first-child { width: 1%; white-space: nowrap; padding-right: 24px; }
.mf-table-wide thead th:not(:first-child),
.mf-table-wide tbody td:not(:first-child) { width: auto; padding-left: 16px; padding-right: 16px; }

/* ---- Figure (chart) ----------------------------------------------------- */
/* margin:0 resets the browser's default <figure> margin (1em 40px), which
   otherwise shrinks every chart ~80px narrower than its cell and centers it —
   so charts never filled their two-column tracks and looked indented from the
   column's left edge. With it reset, each plot fills its cell width. */
.mf-fig { display: flex; flex-direction: column; height: 100%; margin: 0; }
.mf-fig-title { font-size: var(--mf-fs-title); font-weight: 700; margin-bottom: 2px; text-align: center; }
.mf-fig-meta { display: flex; justify-content: space-between; font-size: var(--mf-fs-units); }
.mf-fig-meta .units { color: var(--mf-ink); }
.mf-fig-meta .datestamp { color: var(--mf-muted); font-size: var(--mf-fs-datestamp); }
.mf-fig-plot { flex: 1 1 auto; min-height: 0; }
.mf-fig-plot svg { max-width: 100%; height: auto; font-family: var(--mf-font); }
.mf-fig-legend { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 4px; font-size: var(--mf-fs-axis); }
.mf-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.mf-legend-swatch { width: 14px; height: 4px; border-radius: 1px; display: inline-block; }
.mf-fig-foot { display: flex; justify-content: space-between; margin-top: 6px; }
.mf-fig-foot .src { font-size: var(--mf-fs-source); font-style: italic; color: var(--mf-muted); }
.mf-fig-foot .mark { font-size: var(--mf-fs-mark); color: var(--mf-muted); }
/* A chart rendered as a branded Chartbook PNG (the V2 dashboard + detail pages).
   The image already carries its own title, source note and jasonfurman.org mark,
   so the cell is just the picture. Lives here (not v2.css) so it survives the flip
   to /macro at promotion, where v2.css is intentionally not loaded. */
.mf-fig-png { margin: 0; }
.mf-fig-png .mf-png { display: block; width: 100%; height: auto; border-radius: 4px; }

/* ---- "Coming soon" band ------------------------------------------------- */
.mf-soon {
  border: 1px dashed var(--mf-gridline);
  border-radius: 8px;
  padding: 22px 20px;
  margin-bottom: 16px;
  color: var(--mf-muted);
}
.mf-soon h2 { color: var(--mf-ink); font-size: 17px; margin: 0 0 4px; }

/* ---- Under-construction (subpages) ------------------------------------- */
.mf-uc { padding: 60px 0; max-width: 70ch; }
.mf-uc .tag { display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--mf-orange); border: 1px solid var(--mf-orange); border-radius: 999px; padding: 3px 12px; }
.mf-uc h1 { font-size: 32px; margin: 16px 0 8px; }
.mf-uc p { color: var(--mf-muted); }
.mf-uc .planned { margin-top: 22px; }
.mf-uc .planned h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--mf-muted); margin: 0 0 8px; }
.mf-uc .planned ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mf-uc .planned li { border: 1px solid var(--mf-gridline); border-radius: 6px; padding: 6px 12px; font-size: 14px; color: var(--mf-ink); }

/* ---- Footer ------------------------------------------------------------- */
.mf-foot { border-top: 1px solid var(--mf-gridline); margin-top: 40px; padding: 20px 0 50px; color: var(--mf-muted); font-size: 13px; }
.mf-foot a { color: var(--mf-muted); text-decoration: underline; }

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 760px) {
  .mf-menu-btn { display: block; }
  .mf-nav {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--mf-bg); border-bottom: 1px solid var(--mf-gridline);
    padding: 6px 24px 14px;
  }
  .mf-nav.open { display: flex; }
  .mf-nav a { padding: 10px 0; border-bottom: 1px solid var(--mf-gridline); }
  .mf-nav a.active { border-bottom-color: var(--mf-gridline); }
  .mf-kpis { grid-template-columns: repeat(2, 1fr); }
  .mf-band { grid-template-columns: 1fr; }
  .mf-band-fig { min-height: 260px; }
  .mf-cols { grid-template-columns: 1fr; }
  .mf-charts { grid-template-columns: 1fr; }
  .mf-tables { grid-template-columns: 1fr; }
  .mf-fed-grid { grid-template-columns: 1fr; }
  .mf-secnav { gap: 4px 14px; font-size: 12.5px; }
}

/* ============ Full-dashboard additions (sections, tables, nav) =========== */

/* At-a-glance strip carries 12 tiles — fixed counts that divide 12 cleanly,
   so no empty cells show the strip's gridline background. */
.mf-kpis { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1080px) { .mf-kpis { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px)  { .mf-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 430px)  { .mf-kpis { grid-template-columns: repeat(2, 1fr); } }
.mf-kpi .value { font-size: 21px; }
.mf-kpi .sub { font-size: 11.5px; }
.mf-chg { color: var(--mf-muted); }

/* Sub-section nav — a full-width bar directly under the top nav (sticky), in
   smaller font. Subpages with their own within-page subsections reuse this. */
.mf-subbar { position: sticky; top: 64px; z-index: 40; background: var(--mf-bg); border-bottom: 1px solid var(--mf-gridline); }
.mf-secnav { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 8px 24px; font-size: 12.5px; }
.mf-secnav a { color: var(--mf-muted); }
.mf-secnav a:hover { color: var(--mf-blue); text-decoration: none; }

/* Section block. */
.mf-section { margin: 26px 0 6px; scroll-margin-top: 112px; }
.mf-section-head {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px;
  border-bottom: 2px solid var(--mf-ink); padding-bottom: 4px;
}
.mf-section-head h2 { font-size: 19px; font-weight: 700; margin: 0; }
.mf-section-note { font-size: 12px; color: var(--mf-muted); text-transform: uppercase; letter-spacing: .06em; }

/* Section body: charts column (left) + tables column (right) — the original
   dashboard's layout, flipped. Items stack within each column. */
/* Two-column split — charts left (wider, ~55%), tables right (~45%). The same
   ratio is used on subpages (.mf-band2) so column edges line up down the page. */
.mf-cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; align-items: start; }
.mf-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* min-width:0 + overflow:hidden keep an SVG from pushing past its grid track
   (grid children default to min-width:auto), which otherwise spills a chart tile
   over its neighbour. overflow:hidden clips any stray paint to the rounded box. */
.mf-chart-cell { border: 1px solid var(--mf-gridline); border-radius: 8px; padding: 14px 16px; min-width: 0; overflow: hidden; }
.mf-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px 18px; }

/* Tables: a single full-width table (International). */
.mf-tables { display: grid; grid-template-columns: 1fr; gap: 16px 22px; align-items: start; }
.mf-tables.cols-1 { grid-template-columns: 1fr; }
.mf-tablebox { border: 1px solid var(--mf-gridline); border-radius: 8px; padding: 14px 16px; min-width: 0; overflow-x: auto; }
.mf-table-cap { font-size: 12px; color: var(--mf-muted); font-weight: 600; margin-bottom: 8px; }
.mf-table-foot { font-size: 11px; color: var(--mf-muted); font-style: italic; margin-top: 8px; max-width: 70ch; }
.mf-table-grouped tbody td:first-child { color: var(--mf-ink); }
/* Native HTML twin of a chartbook ITA balance table (Jason 2026-07-06): row labels bold
   (house rule for these tables), the Change column bolded to match the PNG's one
   highlighted column, and a ruled/bold total row. */
.mf-table-ita tbody td:first-child { color: var(--mf-ink); font-weight: 700; }
.mf-table-ita tbody td:nth-child(4) { font-weight: 700; }
.mf-table-ita tbody tr.mf-total-row td { font-weight: 700; border-top: 1.5px solid var(--mf-ink); }
.mf-subhead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--mf-muted); font-weight: 600; padding: 12px 8px 3px; border-bottom: 1px solid var(--mf-gridline);
}
.mf-subhead:first-child th { padding-top: 2px; }
.mf-thru { color: var(--mf-muted); font-size: .82em; }

/* Soft (forecaster-sourced) marking — the fabrication firewall, made visible. */
.mf-soft-tag { color: var(--mf-orange); font-size: .68em; font-weight: 700; vertical-align: super; margin-left: 1px; cursor: help; }
.mf-soft td:first-child { font-style: italic; }

/* GDP nowcast trackers. */
.mf-trackers { margin-bottom: 6px; }
.mf-trackers-head { font-size: 12px; color: var(--mf-muted); font-weight: 600; margin-bottom: 8px; }
.mf-tracker-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.mf-tracker { border: 1px solid var(--mf-gridline); border-radius: 8px; padding: 8px 14px; }
/* reserve two lines for the source name so long names wrap and every tile stays the same height */
.mf-tracker .src { font-size: 11px; line-height: 1.25; color: var(--mf-muted); min-height: 2.5em; }
.mf-tracker .val { font-size: 20px; font-weight: 700; }
.mf-tracker .qtr { font-size: 10.5px; color: var(--mf-muted); }

/* Fed callouts + layout. */
.mf-callouts { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.mf-callout { border: 1px solid var(--mf-gridline); border-radius: 8px; padding: 10px 16px; min-width: 150px; }
.mf-callout .label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--mf-muted); }
.mf-callout .value { font-size: 22px; font-weight: 700; margin: 2px 0 1px; }
.mf-callout .sub { font-size: 11.5px; color: var(--mf-muted); }
.mf-fed-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); gap: 20px; align-items: start; }

/* ---- Financial subpage Fed section (renderFedSubpage) -------------------- */
/* 5-card stat strip. */
.mf-fed-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.mf-stat { border: 1px solid var(--mf-gridline); border-radius: 10px; padding: 12px 16px; min-width: 0; }
.mf-stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--mf-muted); }
.mf-stat .value { font-size: 24px; font-weight: 700; margin: 4px 0 1px; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.mf-stat .sub { font-size: 11.5px; color: var(--mf-muted); }
.mf-stat .delta { font-size: 11.5px; color: var(--mf-muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
.mf-stat .delta b { font-weight: 600; color: var(--mf-ink); }
.mf-stat .neg { color: var(--mf-red); }

/* Paired charts (Dec forecast | σ panel) and the two detail cards. */
.mf-fed-charts, .mf-fed-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; margin-bottom: 16px; }
.mf-fed-charts .mf-chart-cell { display: flex; flex-direction: column; }

/* Detail-card chrome: centered serif title, meta row, italic source / brand foot. */
.mf-fed-card { border: 1px solid var(--mf-gridline); border-radius: 12px; padding: 16px 18px; min-width: 0; display: flex; flex-direction: column; }
.mf-fed-card h3 { font-size: 16px; font-weight: 700; text-align: center; margin: 0 0 4px; }
.mf-card-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--mf-muted); }
.mf-card-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 12px; }
.mf-card-foot .src { font-size: 11px; font-style: italic; color: var(--mf-muted); }
.mf-card-foot .mark { font-size: 11px; color: var(--mf-muted); }

/* Next-meeting probability ladder. */
.mf-ladder { width: 100%; border-collapse: collapse; margin-top: 8px; }
.mf-ladder th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-muted); font-weight: 600; text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--mf-gridline); }
.mf-ladder th:first-child { text-align: left; }
.mf-ladder td { padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--mf-gridline); font-variant-numeric: tabular-nums; }
.mf-ladder td:first-child { text-align: left; font-weight: 600; }
.mf-ladder tr:last-child td { border-bottom: none; }
.mf-ladder .barcell { position: relative; }
.mf-ladder .bar { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 20px; background: rgba(68, 114, 196, .12); border-radius: 3px; z-index: 0; }
.mf-ladder .pct { position: relative; z-index: 1; font-size: 15px; font-weight: 600; }
.mf-imprate { margin-top: 12px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mf-imprate b { font-weight: 700; }
.mf-imprate .sub { color: var(--mf-muted); }
.mf-livehook { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mf-gridline); font-size: 11.5px; font-style: italic; color: var(--mf-muted); }

/* Live Kalshi layer in the next-meeting card (§2.6): the futures-vs-Kalshi basis
   readout (both layers labelled, never blended), the live dot, and the intraday
   P(move) sparkline with prior-close / 1-week-ago reference lines. */
.mf-fed-kalshi { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mf-gridline); }
/* the loading/unavailable note already sits under the .mf-fed-kalshi rule above —
   drop its own divider so we don't double the line */
.mf-fed-kalshi .mf-livehook { border-top: none; padding-top: 0; margin-top: 0; }
.mf-basis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 13px; font-variant-numeric: tabular-nums; }
.mf-basis-item { color: var(--mf-muted); }
.mf-basis-item b { color: var(--mf-ink); font-weight: 700; margin-left: 3px; }
.mf-live-dot { color: var(--mf-green); font-size: 8px; vertical-align: middle; margin-left: 3px; }
.mf-spark-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-muted); }
.mf-spark-head .sub { text-transform: none; letter-spacing: 0; }
.mf-spark { margin-top: 5px; }
.mf-spark-svg { width: 100%; height: 44px; display: block; }
.mf-spark-line { fill: none; stroke: var(--mf-green); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.mf-spark-ref { stroke: var(--mf-muted); stroke-width: .75; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.mf-spark-dot { fill: var(--mf-green); }
.mf-spark-pending { margin-top: 10px; font-size: 11.5px; }
.mf-kalshi-foot { margin-top: 8px; font-size: 11px; font-style: italic; color: var(--mf-muted); }

/* Year-end distribution bars + EV/modal note. */
.mf-disthead { margin-top: 16px; font-weight: 600; color: var(--mf-ink); }
.mf-dist { margin-top: 8px; }
.mf-dist .row { display: grid; grid-template-columns: 64px 1fr 42px; gap: 10px; align-items: center; margin: 7px 0; font-size: 13px; }
.mf-dist .lbl { color: var(--mf-ink); }
.mf-dist .track { display: block; height: 13px; background: var(--mf-gridline); border-radius: 3px; overflow: hidden; }
.mf-dist .fill { display: block; height: 100%; background: var(--mf-blue); border-radius: 3px; }
.mf-dist .v { text-align: right; color: var(--mf-muted); font-variant-numeric: tabular-nums; }
.mf-distnote { margin-top: 10px; font-size: 12px; color: var(--mf-muted); }

/* ---- Homepage Fed subsection (renderFedHome, §6.3) ----------------------- */
/* The generated read — the hero sentence. */
.mf-fed-read { font-size: 23px; line-height: 1.4; font-weight: 500; max-width: 62ch; margin: 2px 0 20px; }
.mf-fed-read b { font-weight: 700; }
/* The four-stat strip reuses .mf-stat; widen the grid to 4 across. */
.mf-fed-strip.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Wide December sparkline card (title suppressed; renderChart keeps the legend). */
.mf-spark-card { border: 1px solid var(--mf-gridline); border-radius: 12px; padding: 14px 18px 12px; margin-bottom: 14px; }
.mf-spark-cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 2px; }
.mf-spark-cardhead .t { font-size: 14px; font-weight: 600; }
.mf-spark-cardhead a { font-size: 13px; color: var(--mf-blue); white-space: nowrap; }
.mf-spark-chartcell { min-width: 0; overflow: hidden; }
/* One live Kalshi cross-check line. */
.mf-crosscheck { font-size: 14px; font-style: italic; color: var(--mf-muted); margin: 14px 0 0; max-width: 72ch; }
.mf-crosscheck b { font-style: normal; font-weight: 600; color: var(--mf-ink); }

/* Fed (implied) group in the unified markets table (§6.2): crimson subhead, a
   faint row tint, and the block "hold priced · P(hike) …" sub-label. */
.mf-fed-grp th { color: #8c2332; }
.mf-fedrow td { background: #fbf6f3; }
.mf-rowsub { display: block; font-size: 11px; color: var(--mf-muted); margin-top: 1px; }

/* Commentary (soft). */
.mf-commentary { border: 1px solid var(--mf-gridline); border-left: 3px solid var(--mf-orange); border-radius: 8px; padding: 14px 18px; margin-top: 14px; }
.mf-commentary-head { font-size: 13px; font-weight: 700; }
.mf-commentary-sum { margin: 8px 0 10px; font-size: 14px; }
.mf-calls { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.mf-calls li { font-size: 12.5px; color: var(--mf-ink); }
.mf-calls .who { font-weight: 600; }
.mf-calls .view { color: var(--mf-muted); }

/* ===== Prediction Markets section (§5): midterms hero · econ grid · spotlight ===== */
/* min-width:0 + overflow:hidden keep the hero chart's SVG inside its column (the
   same guard .mf-chart-cell carries) so no chart bleeds past its track. */
.mf-pred-card { border: 1px solid var(--mf-gridline); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; min-width: 0; overflow: hidden; }
.mf-pred-card .mf-fig-title { font-size: 16px; }
.mf-pred-h { font-size: 16px; font-weight: 700; text-align: center; margin: 0 0 4px; }

/* Current-standings legend (party colors kept): swatch · outcome · current %. */
.mf-mtg-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 26px; margin: 10px 0 2px; font-size: 13px; }
.mf-mtg-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mf-mtg-item .sw { width: 11px; height: 11px; border-radius: 2px; flex: 0 0 auto; }
.mf-mtg-item .lbl { color: var(--mf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-mtg-item .v { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.mf-pred-block { margin-top: 24px; }
.mf-pred-subhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.mf-pred-subhead .h { font-size: 14px; font-weight: 700; color: var(--mf-ink); }
.mf-pred-subhead .sub { font-size: 12px; color: var(--mf-muted); }

/* Econ & markets grid — four compact cards: question · current % · Δ1w · spark. */
.mf-econ-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mf-ecard { border: 1px solid var(--mf-gridline); border-radius: 10px; padding: 13px 15px; min-width: 0; }
.mf-ecard .q { font-size: 13px; line-height: 1.3; color: var(--mf-ink); min-height: 50px; }
.mf-ecard .p { font-size: 26px; font-weight: 700; margin: 6px 0 0; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.mf-ecard .d { font-size: 11.5px; color: var(--mf-muted); margin-top: 1px; font-variant-numeric: tabular-nums; min-height: 15px; }
.mf-ecard .d .neg { color: var(--mf-red); }
.mf-espark { margin-top: 8px; }
.mf-espark-svg { width: 100%; height: 34px; display: block; }
.mf-espark-svg path { fill: none; stroke: var(--mf-blue); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.mf-espark-svg.down path { stroke: var(--mf-muted); }

/* Spotlight — rotating, LLM-curated picks. */
.mf-spot-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mf-spot-head .h { font-size: 16px; font-weight: 700; }
.mf-spot-chip { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--mf-blue); border-radius: 4px; padding: 2px 7px; }
.mf-rotate { margin-left: auto; font-family: inherit; font-size: 12.5px; color: var(--mf-blue); background: none; border: 1px solid var(--mf-gridline); border-radius: 20px; padding: 5px 13px; cursor: pointer; }
.mf-rotate:hover { background: #fafafa; }
.mf-spot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mf-spot { border: 1px solid var(--mf-gridline); border-radius: 12px; padding: 16px 18px; display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.mf-spot .num { flex: 0 0 62px; text-align: center; }
.mf-spot .num .p { font-size: 27px; font-weight: 700; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.mf-spot .num .l { font-size: 11px; color: var(--mf-muted); text-transform: uppercase; letter-spacing: .05em; }
.mf-spot .body { min-width: 0; }
.mf-spot .tag { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mf-blue); font-weight: 700; }
.mf-spot .qn { font-size: 16px; font-weight: 600; margin: 3px 0 5px; line-height: 1.25; }
.mf-spot .why { font-size: 13px; font-style: italic; color: var(--mf-muted); line-height: 1.4; }

@media (max-width: 1000px) {
  .mf-spot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .mf-econ-grid { grid-template-columns: 1fr 1fr; }
  .mf-spot-grid { grid-template-columns: 1fr; }
  .mf-mtg-legend { grid-template-columns: 1fr; }
}

/* Freshness stamp. */
.mf-stamp { margin: 34px 0 0; font-size: 12px; color: var(--mf-muted); }

/* Cross-links to the commissioning apps + the email signup (calendar / lab /
   briefings). A small labelled row of bordered pill-links in the house blue. */
.mf-more { margin: 26px 0 4px; }
.mf-more.top { margin: 14px 0 22px; }
.mf-more-h { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--mf-muted); margin: 0 0 10px; }
.mf-more-links { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.mf-more-links a { display: inline-block; font-weight: 600; font-size: 14px; color: var(--mf-blue);
  border: 1px solid var(--mf-blue); border-radius: 7px; padding: 6px 13px; }
.mf-more-links a:hover { text-decoration: none; background: color-mix(in srgb, var(--mf-blue) 8%, var(--mf-bg)); }
/* Equal-width buttons (e.g. the briefings row): each link shares the row evenly. */
.mf-more-links.equal a { flex: 1 1 0; min-width: 150px; text-align: center; }
/* Subpage inline "More detail →" link: a direct <a> child of .mf-more (distinct from
   the .mf-more-links button grid above). Promotion-safe home for what was in v2.css. */
.mf-more > a { color: var(--mf-blue); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.mf-more > a:hover { text-decoration: underline; }
.mf-more.multi { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---- Subpages (assets/subpage.js): table area + two-column chart grid --- */
/* Small table on the left, its headline chart on the right. */
/* Table and chart share the SAME 50/50 split as the .mf-grid2 chart grid below
   (via --mf-subpage-2col), so the table-beside chart lines up exactly with the
   charts underneath it — the two-column rule. (It used to be 0.9/1.1, aligned to
   the home page instead of to this subpage's own grid, which left every
   table-beside chart ~5% wider and shifted, breaking the columns.) */
.mf-band2 { display: grid; grid-template-columns: var(--mf-subpage-2col); gap: 18px; align-items: start; margin-bottom: 16px; }
/* Grid children get min-width:0 so an SVG never pushes past its track (item 3). */
.mf-band2 > * { min-width: 0; }
/* Two booktabs tables side by side (e.g. payrolls + household survey). */
.mf-subtables { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 18px; align-items: start; margin-bottom: 16px; }
/* The chart pairs: always two columns (the spec's "two columns of charts"),
   sharing --mf-subpage-2col with .mf-band2 so column edges line up (see above). */
.mf-grid2 { display: grid; grid-template-columns: var(--mf-subpage-2col); gap: 14px 18px; align-items: stretch; }
/* min-width:0 so a chart SVG stays inside its half and never spills (item 3). */
.mf-grid2 > * { min-width: 0; }
/* Uniform chart tiles (Jason: productivity tiles same size): reserve ~2 title lines so a
   1-line and a 2-line title occupy the same height (plots align), and let the two cards in
   a row share height. */
.mf-grid2 .mf-fig-title { min-height: 2.5em; display: flex; flex-direction: column; justify-content: center; }
/* "Coming soon" placeholder inside a chart cell. */
.mf-soon-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 232px; gap: 7px; color: var(--mf-muted); }
.mf-soon-inner .tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--mf-orange); border: 1px solid var(--mf-orange); border-radius: 999px; padding: 2px 10px; }
.mf-soon-inner .mf-soon-title { font-size: 14.5px; font-weight: 700; color: var(--mf-ink); }
.mf-soon-inner p { font-size: 12px; margin: 0; max-width: 36ch; line-height: 1.45; }
@media (max-width: 760px) {
  .mf-band2 { grid-template-columns: 1fr; }
  .mf-grid2 { grid-template-columns: 1fr; }
}

/* ---- Fiscal tab: Explorer call-to-action + "Make your own" embed --------- */
.mf-fiscal-cta { display: flex; align-items: center; gap: 14px; text-decoration: none;
  border: 1px solid var(--mf-gridline); border-radius: 10px; padding: 13px 18px;
  background: color-mix(in srgb, var(--mf-blue) 5%, var(--mf-bg)); }
.mf-fiscal-cta:hover { border-color: var(--mf-blue); text-decoration: none;
  background: color-mix(in srgb, var(--mf-blue) 9%, var(--mf-bg)); }
.mf-fiscal-cta.top { margin: 2px 0 20px; }
.mf-fiscal-cta.bottom { margin: 22px 0 6px; }
.mf-fiscal-cta-ico { font-size: 24px; line-height: 1; flex: none; }
.mf-fiscal-cta-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mf-fiscal-cta-txt b { font-size: 15px; color: var(--mf-blue); font-weight: 700; }
.mf-fiscal-cta-sub { font-size: 12.5px; color: var(--mf-muted); }
.mf-fiscal-cta-arrow { font-size: 20px; color: var(--mf-blue); flex: none; }

.mf-fiscal-mkyo { margin: 26px 0 4px; }
.mf-fiscal-mkyo-head { border-top: 1px solid var(--mf-gridline); padding-top: 18px; margin-bottom: 12px; }
.mf-fiscal-mkyo-head h3 { font-size: 17px; font-weight: 700; margin: 0 0 3px; }
.mf-fiscal-mkyo-head .sub { font-size: 13px; color: var(--mf-muted); margin: 0; max-width: 74ch; }
.mf-fiscal-mkyo-link { margin: 8px 0 0; }
.mf-fiscal-mkyo-link a { color: var(--mf-blue); font-weight: 600; font-size: 13px; text-decoration: none; }
.mf-fiscal-mkyo-link a:hover { text-decoration: underline; }
.mf-fiscal-frame { width: 100%; height: 440px; border: 1px solid var(--mf-gridline);
  border-radius: 10px; background: #fff; display: block; }
@media (max-width: 760px) { .mf-fiscal-frame { height: 820px; } }  /* was 640: the embed's stacked controls need ~797px, so 640 clipped the chart off-screen */

/* Mobile: collapse the two-column section bodies (and the Fed grid). These base
   rules are defined after the main mobile block above, so the collapse must be
   re-declared here to win on source order. */
@media (max-width: 760px) {
  .mf-cols { grid-template-columns: 1fr; }
  .mf-fed-grid { grid-template-columns: 1fr; }
  .mf-fed-charts, .mf-fed-cards { grid-template-columns: 1fr; }
  .mf-fed-strip { grid-template-columns: repeat(2, 1fr); }
}
/* Tablet: 5 stat cards across get cramped — go to 3, and pair the charts/cards
   stay 2-up until the mobile collapse above. */
@media (max-width: 980px) and (min-width: 761px) {
  .mf-fed-strip { grid-template-columns: repeat(3, 1fr); }
}

/* ============ Nav divider (groups the section tabs from the data tabs) ===== */
.mf-nav-div { align-self: center; width: 1px; height: 20px; background: var(--mf-gridline); }
@media (max-width: 760px) { .mf-nav-div { display: none; } }

/* ============ Briefings (assets/briefings.js) ============================= */
.mf-brief { padding-bottom: 10px; }
.mf-brief-masthead { margin: 30px 0 18px; }
.mf-brief-masthead h1 { font-size: 30px; font-weight: 700; margin: 0 0 6px; letter-spacing: .01em; }
.mf-brief-sub { color: var(--mf-muted); font-size: 15px; margin: 0; max-width: 74ch; }
.mf-brief-empty { color: var(--mf-muted); padding: 40px 0; }

/* Hero (today's DEB, or the week's WEB on weekends) */
.mf-brief-hero { border: 1px solid var(--mf-gridline); border-top: 3px solid var(--mf-blue);
  border-radius: 10px; padding: 24px 30px 30px; margin-bottom: 26px; }
.mf-brief-head { margin-bottom: 8px; }
.mf-brief-kicker { display: flex; align-items: center; gap: 10px; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .09em; color: var(--mf-muted); font-weight: 600; }
.mf-brief-flag { background: var(--mf-blue); color: #fff; border-radius: 999px;
  padding: 2px 10px; font-size: 11px; letter-spacing: .06em; }
.mf-brief-hero-date { font-size: 25px; font-weight: 700; margin: 6px 0 0; }
.mf-brief-date { font-size: 19px; font-weight: 700; margin: 4px 0 0; }

/* Section headings + prose */
.mf-brief-sections { margin-top: 14px; }
.mf-brief-h { font-size: 17px; font-weight: 700; color: var(--mf-blue);
  margin: 24px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--mf-gridline); }
.mf-brief-sections > .mf-brief-h:first-child { margin-top: 6px; }
.mf-brief-sub { font-size: 15px; font-weight: 700; color: var(--mf-ink); margin: 16px 0 4px; }
.mf-brief-p { font-size: 15.5px; line-height: 1.65; margin: 0 0 12px; max-width: 78ch; }
.mf-brief-ul { margin: 0 0 12px; padding-left: 22px; max-width: 78ch; }
.mf-brief-ul li { font-size: 15.5px; line-height: 1.6; margin-bottom: 7px; }
.mf-brief-region { font-size: 15.5px; line-height: 1.6; margin: 0 0 9px; padding-left: 14px;
  border-left: 2px solid var(--mf-gridline); max-width: 78ch; }

/* WEB PDF bar */
.mf-brief-pdfbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 6px 0 4px; }
.mf-brief-pdf { display: inline-block; font-weight: 600; font-size: 14.5px; color: var(--mf-blue);
  border: 1px solid var(--mf-blue); border-radius: 7px; padding: 6px 14px; }
.mf-brief-pdf:hover { text-decoration: none; background: color-mix(in srgb, var(--mf-blue) 8%, var(--mf-bg)); }
.mf-brief-pdf-note { font-size: 12.5px; color: var(--mf-muted); }

/* Regional weeklies (China / Europe) — download-only rows */
.mf-brief-regional { margin: 10px 0 14px; }
.mf-brief-archive .mf-brief-regional { margin: 8px 0; }

/* Group headings + collapsibles (earlier this week / weekly / archives) */
.mf-brief-group { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--mf-muted); margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--mf-ink); }
.mf-brief-item { border: 1px solid var(--mf-gridline); border-radius: 9px; margin-bottom: 10px; overflow: hidden; }
.mf-brief-item[open] { border-color: color-mix(in srgb, var(--mf-blue) 35%, var(--mf-gridline)); }
.mf-brief-summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer;
  padding: 13px 18px; list-style: none; font-weight: 600; }
.mf-brief-summary::-webkit-details-marker { display: none; }
.mf-brief-summary::before { content: '▸'; color: var(--mf-muted); font-size: 12px; transition: transform .15s; }
.mf-brief-item[open] .mf-brief-summary::before { transform: rotate(90deg); }
.mf-brief-sum-date { font-size: 15.5px; }
.mf-brief-sum-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--mf-muted); border: 1px solid var(--mf-gridline); border-radius: 999px; padding: 1px 9px; }
.mf-brief-body { padding: 2px 18px 18px; border-top: 1px solid var(--mf-gridline); }
.mf-brief-archive { margin-top: 2px; }
/* Two-level archive disclosure: outer <details> reveals the list of past briefings. */
.mf-brief-archive-group { margin: 30px 0 0; }
.mf-brief-archive-group > .mf-brief-archive-summary { display: flex; align-items: baseline; gap: 10px;
  cursor: pointer; list-style: none; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--mf-ink); }
.mf-brief-archive-summary::-webkit-details-marker { display: none; }
.mf-brief-archive-summary::before { content: '▸'; color: var(--mf-muted); font-size: 12px; transition: transform .15s; }
.mf-brief-archive-group[open] > .mf-brief-archive-summary::before { transform: rotate(90deg); }
.mf-brief-archive-label { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--mf-muted); }
.mf-brief-archive-count { font-size: 11px; font-weight: 600; color: var(--mf-muted);
  border: 1px solid var(--mf-gridline); border-radius: 999px; padding: 1px 8px; }

/* ============ Calendar (assets/calendar.js) ============================== */
.mf-cal { padding-bottom: 10px; }
.mf-cal-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 4px 0 14px; font-size: 12.5px; color: var(--mf-muted); }
.mf-cal-leg { display: inline-flex; align-items: center; gap: 5px; }
.mf-cal-swatch { width: 22px; height: 12px; border-radius: 3px; border: 1px solid var(--mf-gridline); display: inline-block; }
.mf-cal-swatch.future { background: color-mix(in srgb, var(--mf-blue) 7%, var(--mf-bg)); }

.mf-cal-scroll { overflow-x: auto; }
.mf-cal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mf-cal-table thead th { background: var(--mf-bg);
  border-bottom: 1.5px solid var(--mf-ink); padding: 8px 12px; text-align: right; font-weight: 600; font-size: 12.5px; }
.mf-cal-table thead th.l { text-align: left; }
.mf-cal-table td { padding: 8px 12px; border-bottom: 1px solid var(--mf-gridline); vertical-align: top; }

.cal-date { white-space: nowrap; color: var(--mf-ink); font-variant-numeric: tabular-nums; }
.cal-dow { color: var(--mf-muted); }
.cal-est { color: var(--mf-orange); font-weight: 700; }
.cal-rel { text-align: left; }
.cal-rel-name { font-weight: 600; }
.cal-rel-sub, .cal-rel-more { color: var(--mf-muted); font-size: 13px; }
.cal-rel-more { padding-left: 4px; }
.cal-period { text-align: left; color: var(--mf-muted); white-space: nowrap; font-size: 13px; }
.cal-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-actval { font-weight: 600; }
.cal-cons, .cal-last { color: var(--mf-muted); }
.cal-surp { font-size: 11.5px; font-weight: 600; }
.cal-surp.good { color: var(--mf-green); }   /* beat in the good direction (polarity-aware) */
.cal-surp.bad  { color: var(--mf-red); }     /* miss / hot inflation etc. */

/* future (upcoming) rows — lightly shaded, same continuous table */
.mf-cal-table tr.future > td { background: color-mix(in srgb, var(--mf-blue) 6%, var(--mf-bg)); }
.mf-cal-table tr.future .cal-rel-name { font-weight: 600; }
.mf-cal-table tr.future .cal-act { color: var(--mf-muted); }

/* today divider */
.mf-cal-today td { background: var(--mf-bg); border-bottom: 2px solid var(--mf-blue); padding: 6px 12px; }
.cal-today-cell { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--mf-blue); }
.cal-today-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mf-blue); margin-right: 8px; vertical-align: middle; }

/* event rows (FOMC, Chair speeches) */
.mf-cal-event .cal-evt { border-left: 3px solid var(--mf-blue); }
.mf-cal-event.fomc .cal-evt { border-left-color: var(--mf-gold); }
.cal-evt-label { font-weight: 700; }
.mf-cal-event.fomc .cal-evt-label { color: color-mix(in srgb, var(--mf-gold) 60%, var(--mf-ink)); }
.mf-cal-event.speech .cal-evt-label { color: var(--mf-blue); }
.cal-evt-detail { color: var(--mf-muted); font-size: 13px; }

@media (max-width: 760px) {
  .mf-brief-hero { padding: 18px 18px 22px; }
  .mf-cal-table thead th { position: static; }
}

/* ---- Lab (experiments index) ------------------------------------------- */
.mf-lab { padding: 32px 0 64px; }
.mf-lab-warn {
  border: 1px solid var(--mf-red);
  border-left-width: 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--mf-red) 6%, var(--mf-bg));
  color: var(--mf-red);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
  padding: 12px 16px;
  margin-bottom: 26px;
}
.mf-lab-head { max-width: 72ch; margin-bottom: 18px; }
.mf-lab-head h1 { font-size: 32px; margin: 0 0 6px; }
.mf-lab-head p { margin: 0; color: var(--mf-muted); font-size: 15px; }

.mf-lab-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.mf-lab-chip {
  font: inherit; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--mf-gridline); border-radius: 999px;
  background: var(--mf-bg); color: var(--mf-ink);
  padding: 5px 13px;
}
.mf-lab-chip:hover { border-color: var(--mf-blue); }
.mf-lab-chip.on { background: var(--mf-blue); border-color: var(--mf-blue); color: #fff; }
.mf-lab-chip .n { font-size: 11px; color: var(--mf-muted); font-variant-numeric: tabular-nums; }
.mf-lab-chip.on .n { color: rgba(255, 255, 255, .8); }
.mf-lab-clear {
  font: inherit; font-size: 13px; cursor: pointer;
  background: none; border: none; color: var(--mf-blue);
  padding: 5px 4px; text-decoration: underline;
}

.mf-lab-list { display: flex; flex-direction: column; border-top: 1px solid var(--mf-gridline); }
.mf-lab-card {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 18px 6px; border-bottom: 1px solid var(--mf-gridline);
  color: var(--mf-ink);
}
.mf-lab-card:hover { background: color-mix(in srgb, var(--mf-blue) 4%, var(--mf-bg)); text-decoration: none; }
.mf-lab-card .left { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1; }
.mf-lab-card .emoji { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.mf-lab-card .text { min-width: 0; }
.mf-lab-card .title { margin: 0; font-weight: 700; font-size: 17px; }
.mf-lab-card:hover .title { color: var(--mf-blue); }
.mf-lab-card .desc { margin: 3px 0 0; color: var(--mf-muted); font-size: 14px; }
.mf-lab-card .tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.mf-lab-card .tag {
  font-size: 11px; color: var(--mf-muted);
  border: 1px solid var(--mf-gridline); border-radius: 4px; padding: 1px 7px;
}
.mf-lab-card .right { flex-shrink: 0; text-align: right; }
.mf-lab-card .created { color: var(--mf-muted); font-size: 12.5px; white-space: nowrap; }
.mf-lab-empty { color: var(--mf-muted); padding: 28px 0; }
@media (max-width: 560px) {
  .mf-lab-card { flex-direction: column; gap: 8px; }
  .mf-lab-card .right { text-align: left; }
}

/* ============ Quality floor — accessibility polish (§7, Phase F) ========== */
/* Visible keyboard focus. Nothing removes outlines, but custom-styled controls
   (KPI cards, the rotate pill, lab chips, nav links) otherwise show an
   inconsistent UA ring — give everything one clear on-brand focus outline.
   :focus-visible keeps mouse clicks ring-free while keyboard / assistive-tech
   users get the outline. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--mf-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Respect reduced-motion: collapse the few CSS transitions (disclosure arrows,
   hover tints) and any animation / smooth-scroll for users who ask for less. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile: the homepage Fed 4-stat strip (.mf-fed-strip.cols-4) outranks the
   shared .mf-fed-strip mobile collapse on specificity, so it stayed 4-across and
   cramped on phones. Match the subpage strip — 2×2 on small screens. */
@media (max-width: 760px) {
  .mf-fed-strip.cols-4 { grid-template-columns: repeat(2, 1fr); }
}