/* Market Expectations Engine tab (Phase 8). Standalone, namespaced `mx-*`; uses the
app's theme tokens (every palette × light/dark for free) and the shared SURFACE
language: the view is a tinted ground and each top-level strip — controls, replay,
global summary, basis, the cross-bank grid and the master-detail pair — is a card
floating on it. Radii come from the shared scale (--r-xs marks, --r-sm chips,
--r-md panels nested inside --r-lg cards). Responsive tiers at 760px (grid → 1 col)
and 520px (tighten).
The page no longer zeroes the view's padding or hairline-divides its strips:
surface.css's `.view` supplies the column rhythm, and the sections below are
discrete cards separated by that gap rather than bands on one continuous sheet. */
/* ── card shape ──────────────────────────────────────────────────────────────
Applied to this module's OWN section classes rather than by adding `.card` in the
renderer, so the markup — and the skeleton that mirrors it selector for selector,
and MX_REVEAL_ORDER which stages by those same selectors — is untouched. */
.mx-controls,
.mx-replay,
.mx-global,
.mx-basis-strip,
.mx-xbank {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-1);
padding: clamp(13px, 1.2vw, 18px);
}
.mx-empty {
padding: 40px 24px; color: var(--text-muted); font-size: 14px; text-align: center;
}
/* The dark / not-yet-generated message IS the page in that state, so it is a card
too — a bare sentence on the ground reads as a failed paint. Scoped to a direct
child so the "Select a central bank." copy nested in the detail pane stays plain. */
#view-market-expectations > .mx-empty {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-1);
}
.mx-muted { color: var(--text-muted); }
/* M3a cross-tab deep-link (→ Standing board) */
.mx-link { font-size: 11px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.mx-link:hover { text-decoration: underline; }
/* `.mono` is the shared numeric treatment and carries the mono face AND tabular
figures from surface.css; these three are this page's own figure spans and take
the same pair, so a column of them still lines up under itself. */
.mx-fig, .mx-rate, .mx-code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* controls / legend — the board's masthead: a serif headline with the plain-English
legend beside it. Also the mount point for the shared data-vintage strip. */
.mx-controls {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
flex-wrap: wrap;
}
.mx-title {
font-family: var(--font-display); font-size: 18px; font-weight: 600;
letter-spacing: -.015em; color: var(--text);
}
.mx-legend { font-size: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* provenance + confidence markers */
.mx-prov {
font-family: var(--font-sans); font-size: 10px; padding: 0 4px; border-radius: var(--r-xs);
border: 1px solid transparent; white-space: nowrap;
}
.mx-prov--data { color: var(--bull-text); border-color: var(--bull-edge); }
.mx-prov--proxy { color: var(--warn-text); border-color: var(--warn-edge); }
.mx-prov--derived { color: var(--text-2); border-color: var(--line2); }
.mx-prov--gap { color: var(--text-muted); border-color: var(--line); }
.mx-conf {
font-family: var(--font-sans); font-size: 10px; color: var(--text-muted);
margin-left: 2px;
}
.mx-asof { font-size: 10px; color: var(--text-faint); margin-left: 4px; }
.mx-fig { display: inline-flex; align-items: baseline; gap: 3px; }
/* chips — the shared tag shape: mono at .06em on the chip rung. `text-transform:
none` is load-bearing, not decoration: a chip carries a VALUE (a date, a bp gap,
a bias word) and several of them sit inside labels that are now uppercase, so
without this the value would inherit the label's case. */
.mx-chip {
display: inline-block; font: 500 10.5px/1.5 var(--font-sans); letter-spacing: .06em;
text-transform: none; padding: 2px 8px; border-radius: var(--r-sm);
border: 1px solid var(--line2); color: var(--text-2); white-space: nowrap;
}
.mx-chip--bull { color: var(--bull-text); border-color: var(--bull-edge); background: var(--bull-tint); }
.mx-chip--bear { color: var(--bear-text); border-color: var(--bear-edge); background: var(--bear-tint); }
.mx-chip--warn { color: var(--warn-text); border-color: var(--warn-edge); }
.mx-chip--info { color: var(--text-2); border-color: var(--line2); }
.mx-chip--mute { color: var(--text-muted); border-color: var(--line); }
/* global summary strip */
.mx-global-h {
font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
color: var(--colhead); margin-bottom: 10px;
}
.mx-gchips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Declared AFTER the .mx-chip--* variants on purpose: the global chips carry a gap
variant class for their tooltip semantics, and this rule is what keeps the strip
reading as one neutral row of selectors rather than ten tinted ones. */
.mx-gchip {
font: 500 10.5px/1 var(--font-sans); letter-spacing: .06em; cursor: pointer;
padding: 6px 10px; border-radius: var(--r-sm);
border: 1px solid var(--line); background: var(--surface-sunken);
color: var(--text-2);
transition: border-color var(--dur-micro) var(--ease-out),
color var(--dur-micro) var(--ease-out);
}
.mx-gchip:hover { border-color: var(--accent); }
/* master-detail — no card of its own: the rail's bank cards and the detail pane
are the cards, and the grid is only what holds them apart. */
.mx-md { display: grid; grid-template-columns: minmax(210px, 300px) 1fr; gap: 16px; align-items: start; }
.mx-list { display: flex; flex-direction: column; gap: 8px; }
.mx-card {
display: block; width: 100%; text-align: left; cursor: pointer;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-md); box-shadow: var(--shadow-1);
padding: 12px 14px; color: var(--text);
transition: border-color var(--dur-micro) var(--ease-out),
background-color var(--dur-micro) var(--ease-out);
}
.mx-card:hover { border-color: var(--line2); }
.mx-card.is-active { border-color: var(--accent); background: var(--surface-row-active); }
/* The hub rail keeps its accent edge, now composited with the card's own shadow —
a bare `box-shadow` here would drop the float. */
.mx-card--hub { box-shadow: inset 3px 0 0 var(--accent), var(--shadow-1); }
.mx-card-top { display: flex; align-items: baseline; gap: 8px; }
.mx-code { font-size: 15px; font-weight: 600; }
.mx-hub {
font: 500 9px/1.6 var(--font-sans); letter-spacing: .12em; padding: 0 4px;
border: 1px solid var(--accent); border-radius: var(--r-xs); color: var(--accent);
}
.mx-rate { margin-left: auto; font-size: 13px; color: var(--text-2); }
.mx-cb { font-size: 11px; margin: 2px 0 6px; }
.mx-card-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.mx-card-cov { font-size: 10px; }
.mx-stars { color: var(--warn-text); letter-spacing: -1px; }
/* detail pane */
.mx-detail {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-lg); box-shadow: var(--shadow-1);
padding: 6px 16px 16px; min-width: 0;
}
.mx-detail-h { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mx-detail-cb { font-size: 14px; color: var(--text-2); }
/* collapsible sections — tracked mono capitals, the design's section label, on a
control that is still a button. */
.mx-sec { border-bottom: 1px solid var(--line); }
.mx-sec-h {
width: 100%; text-align: left; background: none; border: none; cursor: pointer;
padding: 12px 0;
font: 600 10.5px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
color: var(--text);
transition: color var(--dur-micro) var(--ease-out);
}
.mx-sec-h:hover { color: var(--accent); }
.mx-caret { color: var(--text-muted); display: inline-block; width: 14px; letter-spacing: normal; }
.mx-sec-b { padding: 2px 0 12px 14px; }
/* key-value rows */
.mx-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; border-bottom: 1px dotted var(--line); }
.mx-kv-l { color: var(--text-muted); }
.mx-kv-v { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
/* unavailable block (fail-closed, first-class). A panel nested inside the detail
card, so it steps DOWN a radius rung. */
.mx-unavail {
padding: 12px 14px; border: 1px dashed var(--line2); border-radius: var(--r-md);
color: var(--text-2); font-size: 13px; background: var(--surface-sunken);
}
.mx-unavail strong { color: var(--warn-text); }
/* which rate the market-implied levels price — a footnote, not a warning:
it explains an expected difference rather than flagging a problem */
.mx-basis-note {
margin-top: 8px; padding: 8px 10px; border-left: 2px solid var(--line2);
color: var(--text-muted); font-size: 12px; line-height: 1.5;
}
/* rate path steps */
.mx-rp { display: flex; align-items: flex-end; gap: 10px; padding: 12px 0 4px; }
.mx-rp-step { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mx-rp-bar { width: 26px; background: var(--accent); opacity: .7; border-radius: var(--r-xs) var(--r-xs) 0 0; }
.mx-rp-v { font-size: 11px; color: var(--text); }
.mx-rp-l { font: 500 9px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
/* probability bars */
.mx-probs { padding: 10px 0 2px; }
.mx-probs-h {
font: 500 10px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
color: var(--colhead); margin-bottom: 8px;
}
.mx-approx-tag { display: inline-block; font-size: 10px; text-transform: uppercase;
letter-spacing: .04em; padding: 1px 5px; border-radius: var(--r-xs); vertical-align: middle;
color: var(--warn-text); background: var(--warn-tint); }
.mx-probs-note { margin-top: 7px; font-size: 11px; line-height: 1.45;
color: var(--text-muted); border-left: 2px solid var(--warn-edge);
padding-left: 8px; }
.mx-bar-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.mx-bar-l {
width: 40px; font: 500 10px/1 var(--font-mono); letter-spacing: .1em;
text-transform: uppercase; color: var(--text-2);
}
.mx-bar-track {
flex: 1; height: 12px; background: var(--surface-sunken);
border: 1px solid var(--line); border-radius: var(--r-xs); overflow: hidden;
}
.mx-bar-fill { display: block; height: 100%; }
.mx-bar-fill.mx-bar--bull { background: var(--bull-edge); }
.mx-bar-fill.mx-bar--bear { background: var(--bear-edge); }
.mx-bar-fill.mx-bar--mute { background: var(--line2); }
.mx-bar-p { width: 40px; text-align: right; font-size: 12px; color: var(--text-2); }
/* repricing */
.mx-reprice-h {
font: 500 10px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
text-align: right; margin-bottom: 6px;
}
.mx-cat { font-size: 11px; color: var(--text-muted); }
/* three-tier gap */
.mx-tier { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; }
.mx-tier-l {
width: 110px; flex-shrink: 0; color: var(--colhead);
font: 500 9.5px/1.5 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
padding-top: 2px;
}
.mx-tier-v { color: var(--text); }
.mx-gap { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.mx-impl { padding: 6px 0; font-size: 13px; }
/* meeting timeline */
.mx-mtl { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mx-mtl-i {
font-size: 10px; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
padding: 1px 5px; border: 1px solid var(--line); border-radius: var(--r-xs);
color: var(--text-muted);
}
.mx-mtl--past { opacity: .5; }
.mx-mtl--next { border-color: var(--accent); color: var(--accent); }
/* differential matrix + evidence tables — nested table cards inside the detail
pane: the WRAP rounds and clips (and still scrolls on overflow), the CELLS stay
square, and the header band sits on the sunken tier so it reads as chrome. */
.mx-matrix-wrap, .mx-ev-wrap {
overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md);
}
.mx-matrix, .mx-ev { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.mx-matrix th, .mx-matrix td, .mx-ev th, .mx-ev td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
/* Scoped to the HEAD row. These tables use | for row labels as well
("Policy", "Real 2Y", "Terminal"), and the unscoped selector put those on a
header band in tracked capitals -- turning a row's name into what looks like
a column heading, and restyling a data label as chrome. */
.mx-matrix thead th, .mx-ev thead th {
font: 500 10px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
color: var(--colhead); background: var(--surface-sunken);
}
/* Row labels stay sentence-cased and on the row's own surface. */
.mx-matrix tbody th, .mx-ev tbody th {
font: 500 11.5px/1.4 var(--font-sans);
color: var(--text-2);
background: transparent;
}
.mx-matrix th:first-child, .mx-ev td:first-child, .mx-ev th:first-child { text-align: left; }
.mx-pos { color: var(--bull-text); }
.mx-neg { color: var(--bear-text); }
/* the caption is rendered INSIDE the wrap, so it is padded as the card's footer
row rather than floated off it with a margin */
.mx-matrix-note { font-size: 11px; padding: 8px 10px; }
/* cross-bank comparator (§21, M2) — diverging bars from the differential matrix */
.mx-cmp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 10px; }
.mx-cmp-base { font-size: 14px; font-weight: 600; }
.mx-cmp-qs { display: flex; flex-wrap: wrap; gap: 3px; }
.mx-cmp-q {
font: 500 10px/1 var(--font-sans); letter-spacing: .06em; padding: 4px 8px; cursor: pointer;
border: 1px solid var(--line); background: var(--surface-sunken);
color: var(--text-muted); border-radius: var(--r-sm);
transition: border-color var(--dur-micro) var(--ease-out),
color var(--dur-micro) var(--ease-out);
}
.mx-cmp-q:hover { border-color: var(--line2); color: var(--text-2); }
.mx-cmp-q.is-active { border-color: var(--accent); color: var(--accent); }
.mx-cmp-bars { display: flex; flex-direction: column; gap: 6px; }
.mx-cmp-row { display: flex; align-items: center; gap: 8px; }
.mx-cmp-l { width: 92px; flex-shrink: 0; font-size: 12px; }
.mx-cmp-track {
position: relative; flex: 1; height: 14px; background: var(--surface-sunken);
border: 1px solid var(--line); border-radius: var(--r-xs); overflow: hidden;
}
.mx-cmp-track.is-gap { opacity: .5; }
.mx-cmp-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line2); }
.mx-cmp-fill { position: absolute; top: 1px; bottom: 1px; }
.mx-cmp-fill.is-base { background: var(--bull-edge); }
.mx-cmp-fill.is-quote { background: var(--bear-edge); }
.mx-cmp-v { width: 54px; text-align: right; font-size: 11px; color: var(--text-2); }
.mx-cmp-foot { padding: 8px 0 2px; font-size: 12px; color: var(--text); }
.mx-cmp-note { font-size: 10px; margin-top: 2px; }
/* §21 cross-bank comparator grid (M2) — all G10 in one sortable table */
/* The two section toggles are the shared label-plus-gloss pairing: tracked mono
capitals for the name, plain running text for the sentence that explains it. */
.mx-xbank-toggle, .mx-rp-toggle {
background: none; border: none; cursor: pointer;
font: 600 10.5px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
color: var(--text); display: inline-flex; align-items: center; gap: 8px; padding: 2px 0;
transition: color var(--dur-micro) var(--ease-out);
}
.mx-xbank-toggle:hover, .mx-rp-toggle:hover { color: var(--accent); }
.mx-xbank-toggle .mx-muted, .mx-rp-toggle .mx-muted {
font: 400 12px/1.5 var(--font-sans); letter-spacing: normal; text-transform: none;
color: var(--text-muted);
}
.mx-xbank-head { font-size: 12px; margin: 8px 0 2px; }
.mx-xbank-wrap {
overflow-x: auto; margin-top: 10px;
border: 1px solid var(--line); border-radius: var(--r-md);
}
.mx-xbank-table { border-collapse: collapse; font-size: 12px; min-width: 100%; white-space: nowrap; }
.mx-xbank-table th, .mx-xbank-table td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--line); }
/* on the | element, not only on .mx-xbank-th, so the skeleton table (whose
headers carry no class) wears the same band as the real one */
.mx-xbank-table th {
font: 500 10px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
color: var(--colhead); background: var(--surface-sunken);
}
.mx-xbank-th { color: var(--colhead); font-weight: 500; }
.mx-xbank-th.is-bank, .mx-xbank-table td.mx-xbank-bank { text-align: left; }
.mx-xbank-th.is-sort { cursor: pointer; user-select: none; }
.mx-xbank-th.is-sort:hover { color: var(--text-2); }
.mx-xbank-th.is-on { color: var(--accent); }
/* hover and selected stay on DIFFERENT tiers on purpose — collapsing them onto one
token makes a hovered row indistinguishable from the open one */
.mx-xbank-row:hover td { background: var(--surface-raised); }
.mx-xbank-row.is-active td { background: var(--surface-row-active); }
.mx-xbank-sel {
background: none; border: none; cursor: pointer; padding: 0; text-align: left;
color: var(--text); font-size: 12px;
transition: color var(--dur-micro) var(--ease-out);
}
.mx-xbank-sel .mono { font-weight: 600; }
.mx-xbank-sel:hover { color: var(--accent); }
.mx-xbank-note { font-size: 10px; margin-top: 8px; }
/* historical replay (§19) — scrub past daily snapshots. `mx-rp-*` names here are
distinct from the rate-path `.mx-rp`/`.mx-rp-step/bar/v/l` above (no collision). */
.mx-replay.is-replaying { background: var(--warn-tint); }
.mx-rp-body { margin-top: 10px; }
.mx-rp-dates { display: flex; flex-wrap: wrap; gap: 4px; }
.mx-rp-date {
font: 500 10px/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .06em;
padding: 5px 9px; cursor: pointer;
border: 1px solid var(--line); background: var(--surface-sunken);
color: var(--text-muted); border-radius: var(--r-sm);
transition: border-color var(--dur-micro) var(--ease-out),
color var(--dur-micro) var(--ease-out);
}
.mx-rp-date:hover { border-color: var(--line2); color: var(--text-2); }
.mx-rp-date.is-on { border-color: var(--accent); color: var(--accent); }
.mx-rp-live { color: var(--bull-text); }
.mx-rp-live.is-on { border-color: var(--bull-edge); color: var(--bull-text); }
.mx-rp-empty { font-size: 12px; }
.mx-rp-banner { margin-top: 8px; font-size: 12px; }
.mx-rp-banner.mx-rp-on { color: var(--warn-text); }
.mx-rp-banner.mx-rp-err { color: var(--bear-text); }
/* real vs nominal yield (Capital-Flows-style baseline chart) */
.mx-rvn { display: flex; flex-direction: column; gap: 8px; }
.mx-rvn-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.mx-rvn-key { display: inline-flex; align-items: center; gap: 6px; }
.mx-rvn-sw { width: 14px; height: 3px; display: inline-block; border-radius: var(--r-xs); }
/* These two swatches are a hand-maintained mirror of the line colours rvnTheme()
feeds the chart in js/market-expectations.js. They are the SAME two rate series,
so they take the same pair of chart tokens — move one side without the other and
the legend silently stops matching the drawn line. */
.mx-rvn-sw--real { background: var(--chart-rate1); }
.mx-rvn-sw--nom { background: var(--chart-rate2); }
/* A nested surface, so it steps down to the --r-md rung. It must never be given a
display:none or a zero height: the chart measures host.clientWidth at mount and
its ResizeObserver only sees LATER changes, so a hidden mount pins it at the
600px fallback permanently. */
.mx-rvn-host {
width: 100%; height: 300px; min-height: 300px;
border: 1px solid var(--line); border-radius: var(--r-md);
background: var(--surface-sunken);
}
.mx-rvn-note { font-size: 12px; line-height: 1.5; }
.mx-rvn-err { color: var(--bear-text); }
/* responsive */
@media (max-width: 760px) {
.mx-md { grid-template-columns: 1fr; }
.mx-list { flex-direction: row; flex-wrap: wrap; }
.mx-card { width: auto; flex: 1 1 130px; }
.mx-rvn-host { height: 240px; min-height: 240px; }
}
@media (max-width: 520px) {
.mx-tier { flex-direction: column; gap: 2px; }
.mx-tier-l { width: auto; }
.mx-sec-b { padding-left: 6px; }
.mx-rp-bar { width: 18px; }
.mx-xbank-table th, .mx-xbank-table td { padding: 6px 8px; }
}
/* Synthetic xccy basis strip (plan Phase 3) */
.mx-basis-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
|