/* ═══════════════════════════════════════════════════════════════════
   GWS Market Monitor — Clean financial dashboard (no serif, no frills)
   ═══════════════════════════════════════════════════════════════════ */

.mm-wrap {
    --mm-ink: #0e1a26;
    --mm-ink-soft: #2b3a4a;
    --mm-hairline: #e2e8f0;
    --mm-hairline-strong: #cbd5e1;
    --mm-accent: var(--gws-accent, #2C3E50);
    --mm-pos: #10B981;
    --mm-pos-bg: rgba(16, 185, 129, 0.10);
    --mm-neg: #EF4444;
    --mm-neg-bg: rgba(239, 68, 68, 0.10);
    --mm-neutral-bg: rgba(15, 23, 42, 0.03);

    --mm-sans: 'IBM Plex Sans', system-ui, sans-serif;
    --mm-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

    max-width: 1320px;
    margin: 0 auto;
    padding: 0 0.5rem;
    font-family: var(--mm-sans);
    color: var(--mm-ink);
}

/* ── HERO ───────────────────────────────────────────────────────── */
.mm-hero {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 0 1rem;
    border-bottom: 1px solid var(--mm-hairline);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.mm-hero-title {
    font-family: var(--mm-sans);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--mm-accent);
    margin: 0;
    letter-spacing: -0.005em;
}
.mm-asof-block {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}
.mm-asof-label {
    font-family: var(--mm-sans);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mm-ink-soft);
}
.mm-asof-date {
    font-family: var(--mm-mono);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mm-ink);
}

/* ── LOADING ────────────────────────────────────────────────────── */
.mm-loading {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--mm-ink-soft);
}
.mm-loading p {
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

/* ── ROWS + PANELS ──────────────────────────────────────────────── */
.mm-row {
    margin-bottom: 1.5rem;
}
.mm-row-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1rem;
}

.mm-panel {
    background: var(--gws-card, #fff);
    border: 1px solid var(--mm-hairline);
    border-radius: 8px;
    overflow: hidden;
}

.mm-panel-head {
    padding: 0.65rem 0.95rem;
    border-bottom: 1px solid var(--mm-hairline);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fafbfc;
}
.mm-panel-kicker {
    display: none;  /* removed — was too precious */
}
.mm-panel-title {
    font-family: var(--mm-sans);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--mm-ink);
    margin: 0;
    flex: 1;
    letter-spacing: 0.01em;
}
/* Group as-of label — right-aligned in the header, same row as the
   title. One date per group replaces the old per-row "stale" chip;
   Bloomberg peer data lags live APIs by a day or two on some series,
   so a row-level flag was just noise. */
.mm-panel-asof {
    font-family: var(--mm-sans);
    font-size: 0.7rem;
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.mm-panel-source {
    font-family: var(--mm-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mm-ink-soft);
    white-space: nowrap;
}
.mm-panel-body {
    padding: 0.9rem;
}

/* ── MACRO GRID ─────────────────────────────────────────────────── */
.mm-macro-grid {
    display: grid;
    grid-template-columns: 1fr repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--mm-hairline);
    margin-top: -0.1rem;
}
.mm-macro-grid > div {
    padding: 0.65rem 0.7rem;
    border-right: 1px solid var(--mm-hairline);
    border-bottom: 1px solid var(--mm-hairline);
}
.mm-macro-grid > div:nth-child(4n) { border-right: none; }

.mm-macro-head {
    background: #f6f7f9;
    font-family: var(--mm-sans);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mm-ink-soft);
}
.mm-macro-region {
    font-family: var(--mm-sans);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mm-ink);
}
.mm-macro-cell { display: flex; flex-direction: column; gap: 0.1rem; }
.mm-macro-val {
    font-family: var(--mm-mono);
    font-size: 1rem;
    font-weight: 500;
    color: var(--mm-ink);
    font-variant-numeric: tabular-nums;
}
.mm-macro-sub {
    display: flex; align-items: center; gap: 0.35rem;
    font-family: var(--mm-mono);
    font-size: 0.66rem;
    color: var(--mm-ink-soft);
}
.mm-macro-arrow { font-size: 0.68rem; line-height: 1; }
.mm-macro-arrow-up-good, .mm-macro-arrow-down-good { color: var(--mm-pos); }
.mm-macro-arrow-up-bad, .mm-macro-arrow-down-bad { color: var(--mm-neg); }
.mm-macro-arrow-flat { color: var(--mm-ink-soft); opacity: 0.5; }
.mm-macro-na { color: var(--mm-ink-soft); opacity: 0.55; }

/* ── YIELD CURVE ────────────────────────────────────────────────── */
.mm-curve-wrap { display: flex; flex-direction: column; gap: 0.8rem; }
.mm-curve-chart { height: 180px; }
.mm-curve-svg { width: 100%; height: 100%; overflow: visible; }
.mm-curve-line { fill: none; stroke: var(--mm-accent); stroke-width: 2; }
.mm-curve-fill { fill: url(#mmCurveGrad); opacity: 0.5; }
.mm-curve-dot { fill: var(--mm-accent); }
.mm-curve-dot-label {
    font-family: var(--mm-mono);
    font-size: 10px;
    fill: var(--mm-ink);
    font-variant-numeric: tabular-nums;
}
.mm-curve-tenor {
    font-family: var(--mm-sans);
    font-size: 10px;
    font-weight: 500;
    fill: var(--mm-ink-soft);
}
.mm-curve-axis { stroke: var(--mm-hairline); stroke-width: 1; }
.mm-curve-grid { stroke: var(--mm-hairline); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.6; }
.mm-curve-gridlabel {
    font-family: var(--mm-mono);
    font-size: 9px;
    fill: var(--mm-ink-soft);
    font-variant-numeric: tabular-nums;
}
.mm-curve-history { border-top: 1px dashed var(--mm-hairline); padding-top: 0.75rem; }
.mm-curve-history-title {
    font-family: var(--mm-sans);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mm-ink-soft);
    margin-bottom: 0.4rem;
    display: flex; align-items: center; gap: 0.8rem;
}
.mm-curve-legend {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--mm-mono);
    font-size: 0.66rem;
    text-transform: none;
    font-weight: 400;
}
.mm-curve-legend-dot { width: 10px; height: 2px; display: inline-block; }
.mm-curve-history-chart { height: 100px; }

/* ── FRED STRIP ─────────────────────────────────────────────────── */
.mm-fred-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 0;
}
.mm-fred-tile {
    padding: 0.85rem 0.95rem;
    border-right: 1px solid var(--mm-hairline);
    display: flex; flex-direction: column; gap: 0.3rem;
    min-width: 0;
}
.mm-fred-tile:last-child { border-right: none; }
.mm-fred-label {
    font-family: var(--mm-sans);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mm-ink);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mm-fred-id {
    font-family: var(--mm-mono);
    font-size: 0.6rem;
    color: var(--mm-ink-soft);
    font-weight: 400;
}
.mm-fred-value {
    font-family: var(--mm-mono);
    font-size: 1.3rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--mm-ink);
    line-height: 1;
}
.mm-fred-unit { font-size: 0.85rem; color: var(--mm-ink-soft); margin-left: 0.1rem; }
.mm-fred-changes {
    display: flex; gap: 0.6rem;
    font-family: var(--mm-mono);
    font-size: 0.66rem;
    color: var(--mm-ink-soft);
    font-variant-numeric: tabular-nums;
}
.mm-fred-changes .mm-fred-delta-pos { color: var(--mm-pos); }
.mm-fred-changes .mm-fred-delta-neg { color: var(--mm-neg); }
.mm-fred-meta {
    font-family: var(--mm-mono);
    font-size: 0.6rem;
    color: var(--mm-ink-soft);
    margin-top: auto;
    padding-top: 0.2rem;
    opacity: 0.75;
}
.mm-fred-spark { margin-top: 0.2rem; height: 20px; opacity: 0.8; }

/* ── ASSET CLASS GROUPS ─────────────────────────────────────────── */
.mm-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.mm-groups .mm-panel-fx {
    grid-column: 1 / -1;
}

.mm-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mm-sans);
    font-size: 0.78rem;
    table-layout: fixed;
}

.mm-table thead th {
    font-family: var(--mm-sans);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mm-ink-soft);
    padding: 0.5rem 0.3rem;
    background: #fafbfc;
    border-bottom: 1px solid var(--mm-hairline);
    text-align: right;
    white-space: nowrap;
}
.mm-table thead th:first-child { text-align: left; padding-left: 0.95rem; }
.mm-table thead th:last-child { padding-right: 0.95rem; }

.mm-table tbody td {
    padding: 0.5rem 0.3rem;
    border-bottom: 1px solid var(--mm-hairline);
    color: var(--mm-ink);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mm-table tbody td:first-child {
    padding-left: 0.95rem;
    text-align: left;
}
.mm-table tbody td:last-child { padding-right: 0.95rem; }

.mm-table tbody tr {
    transition: background 130ms;
    cursor: pointer;
}
.mm-table tbody tr:hover { background: #f8f9fb; }

.mm-table tbody tr.mm-row-missing td { color: var(--mm-ink-soft); opacity: 0.55; }

.mm-name-cell {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
.mm-name-label {
    font-family: var(--mm-sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mm-ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.mm-chip {
    font-family: var(--mm-mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mm-ink-soft);
    padding: 0.08rem 0.34rem;
    border: 1px solid var(--mm-hairline);
    border-radius: 3px;
    background: transparent;
    flex-shrink: 0;
}
/* .mm-chip-stale removed 2026-04-22 — per-row stale flag was noisy
   because Bloomberg peer data routinely lags live APIs by a day or
   two on some series. Replaced with a single as-of date per group
   header (.mm-panel-asof above). */

.mm-spot,
.mm-perf-cell {
    font-family: var(--mm-mono);
    font-size: 0.72rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--mm-ink);
    display: inline-block;
    text-align: right;
    white-space: nowrap;
    line-height: 1.2;
    padding: 0;
    background: transparent;
    border-radius: 0;
    max-width: 100%;
}

.mm-na { color: var(--mm-ink-soft); opacity: 0.55; }

/* No shading — color-only signal */
.mm-heat-strong-pos,
.mm-heat-mild-pos   { color: var(--mm-pos); background: transparent; }
.mm-heat-neutral    { color: var(--mm-ink-soft); background: transparent; }
.mm-heat-strong-neg,
.mm-heat-mild-neg   { color: var(--mm-neg); background: transparent; }

/* Sparkline cell */
.mm-spark-cell {
    width: 96px;
    padding-right: 0.9rem;
}
.mm-spark {
    width: 90px;
    height: 22px;
    display: inline-block;
}
.mm-spark path.line { fill: none; stroke-width: 1.25; }
.mm-spark path.area { opacity: 0.14; stroke: none; }

/* Column widths
   Non-equity (9 cols): name ~22%, ticker ~14%, then 7 data cols ~9.1% each
   Equity (8 cols):     name ~26%, then 7 data cols ~10.5% each (ticker col absent) */
.mm-col-name    { width: 22%; }
.mm-col-ticker  { width: 14%; }
.mm-col-ccy     { width: 9%; }
.mm-col-perf    { width: 9%; }
.mm-col-spot    { width: 9%; }

/* Ticker column — left-aligned, mono */
.mm-ticker-col,
.mm-table thead th.mm-th-ticker {
    text-align: left !important;
}
.mm-ticker-col {
    font-family: var(--mm-mono);
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--mm-ink-soft);
    letter-spacing: 0.03em;
}

/* Currency column — centered */
.mm-currency-col,
.mm-table thead th.mm-th-ccy {
    text-align: center !important;
}
.mm-currency-col {
    font-family: var(--mm-mono);
    font-size: 0.7rem;
    color: var(--mm-ink-soft);
    letter-spacing: 0.05em;
}

/* Expanded detail row */
.mm-expand-row td {
    padding: 0 !important;
    border-bottom: 1px solid var(--mm-hairline);
    background: #f8f9fb;
}
.mm-expand-inner { padding: 1rem 1.1rem; }
.mm-expand-toolbar {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 0.65rem;
}
.mm-expand-name {
    font-family: var(--mm-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mm-ink);
}
.mm-expand-ticker {
    font-family: var(--mm-mono);
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--mm-ink-soft);
    margin-left: 0.2rem;
}
.mm-expand-controls { display: inline-flex; align-items: center; gap: 0.5rem; }
.mm-period-btns { display: inline-flex; gap: 0.35rem; }
.mm-export-btn {
    padding: 0.25rem 0.55rem;
    background: transparent;
    border: 1px solid var(--mm-hairline-strong);
    border-radius: 4px;
    font-family: var(--mm-sans);
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--mm-ink-soft);
    cursor: pointer;
    transition: all 140ms;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.mm-export-btn:hover { border-color: var(--mm-accent); color: var(--mm-accent); }
.mm-period-btn {
    padding: 0.25rem 0.6rem;
    background: transparent;
    border: 1px solid var(--mm-hairline-strong);
    border-radius: 4px;
    font-family: var(--mm-sans);
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--mm-ink-soft);
    cursor: pointer;
    transition: all 140ms;
}
.mm-period-btn:hover { border-color: var(--mm-accent); color: var(--mm-accent); }
.mm-period-btn.active { background: var(--mm-accent); color: #fff; border-color: var(--mm-accent); }

.mm-chart-box {
    height: 240px;
    background: #fff;
    border: 1px solid var(--mm-hairline);
    border-radius: 4px;
    padding: 0.35rem;
    position: relative;
}
.mm-chart-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    color: var(--mm-ink-soft);
    font-size: 0.85rem;
}

/* ── FOOTER ─────────────────────────────────────────────────────── */
.mm-footer {
    margin-top: 1.5rem;
    padding: 1rem 0 1.5rem;
    display: flex; align-items: center; gap: 1rem;
    border-top: 1px solid var(--mm-hairline);
}
.mm-footer-rule { flex: 1; height: 1px; background: transparent; }
.mm-footer-asof {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
}
.mm-footer-text {
    font-family: var(--mm-sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--mm-ink-soft);
}
.mm-footer-text em {
    font-style: normal;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mm-ink);
    margin: 0 0.15rem;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .mm-row-split { grid-template-columns: 1fr; }
    .mm-fred-strip { grid-template-columns: repeat(3, 1fr); }
    .mm-fred-tile:nth-child(3n) { border-right: none; }
    .mm-fred-tile:nth-child(-n+3) { border-bottom: 1px solid var(--mm-hairline); }
    /* Asset-class tables: drop to a single column and let each scroll
       horizontally instead of clipping the 1D/1M/3M/6M/YTD numbers. iPad
       portrait (810-834) lands here, where the old 2-col fixed-layout
       tables squeezed the figures down to an ellipsis. min-width forces
       enough per-column width that values render in full; the panel body
       owns the scroll because .mm-panel is overflow:hidden. */
    .mm-groups { grid-template-columns: 1fr; }
    .mm-panel-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mm-table { min-width: 900px; }
    .mm-spot, .mm-perf-cell { font-size: 0.7rem; }
}
@media (max-width: 760px) {
    .mm-fred-strip { grid-template-columns: repeat(2, 1fr); }
    .mm-fred-tile { border-right: 1px solid var(--mm-hairline); }
    .mm-fred-tile:nth-child(2n) { border-right: none; }
    .mm-hero-title { font-size: 1.2rem; }
    /* Tighter type/padding so more columns show before the scroll begins;
       sparkline dropped on phones to reclaim width. */
    .mm-table { font-size: 0.72rem; }
    .mm-table thead th { padding: 0.5rem 0.25rem; }
    .mm-table tbody td { padding: 0.5rem 0.25rem; }
    .mm-col-spark { display: none; }
}