/*
 * Market Intelligence Tracker — styles.css
 * Design: Bloomberg Terminal meets Broadsheet Newspaper
 * Typography: Inter Tight (UI/headers) + JetBrains Mono (all numbers/data)
 * Colors: Warm paper (#FDFDFD), Ink (#18181B), Terracotta (#B8542E), Slate Blue (#3A5A7C)
 * Layout: Strict grid, no rounded corners, thin ruled lines
 */

/* ─── RESET & BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper:       #FDFDFD;
  --paper-alt:   #F5F5F6;
  --paper-warm:  #F5F0E8;
  --ink:         #18181B;
  --ink-mid:     #52525B;
  --ink-light:   #A1A1AA;
  --rule:        #D8D8DB;
  --rule-light:  #EBEBED;
  --stan:        #B8542E;
  --stan-light:  #F5E8E3;
  --sj:          #3A5A7C;
  --sj-light:    #E3EBF3;
  --green:       #15803D;
  --green-bg:    #DCFCE7;
  --red:         #B91C1C;
  --red-bg:      #FEE2E2;
  --amber:       #B45309;
  --amber-bg:    #FEF3C7;
  --font-ui:     'Inter Tight', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Courier New', monospace;
}

html { font-size: 14px; scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
}

/* ─── TOP BAR ───────────────────────────────────────────────────────────────── */
.top-bar {
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--stan);
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px 8px;
  gap: 16px;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-logo {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  background: var(--stan);
  color: #fff;
  padding: 4px 8px;
  line-height: 1;
}

.brand-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.2;
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #A1A1AA;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.brand-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #A1A1AA;
  white-space: nowrap;
}

/* ─── TAB RAIL ──────────────────────────────────────────────────────────────── */
.tab-rail {
  display: flex;
  flex-wrap: nowrap;  /* keep all 9 tabs on one row — scroll horizontally if needed */
  background: #111113;
  border-top: 1px solid #2A2A2E;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #3A3A3E #111113;
}
.tab-rail::-webkit-scrollbar { height: 3px; }
.tab-rail::-webkit-scrollbar-track { background: #111113; }
.tab-rail::-webkit-scrollbar-thumb { background: #3A3A3E; }

.tab-btn {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: #71717A;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  text-transform: uppercase;
  flex-shrink: 0;
}

.tab-btn:hover { color: #E4E4E7; }

.tab-btn.active {
  color: #fff;
  border-bottom-color: var(--stan);
}

/* ─── MAIN CONTENT ──────────────────────────────────────────────────────────── */
#app {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

/* ─── SECTION HEADERS ───────────────────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}

.section-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--ink-light);
  letter-spacing: 0.1em;
}

.section-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.section-meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-mid);
  margin-left: auto;
}

/* ─── KPI STRIP ─────────────────────────────────────────────────────────────── */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--paper);
  padding: 12px 14px;
  position: relative;
}

.kpi-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}

.kpi-card.stan::before { background: var(--stan); }
.kpi-card.sj::before   { background: var(--sj); }
.kpi-card.neutral::before { background: var(--ink-light); }

.kpi-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--ink-mid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.kpi-county {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--ink-light);
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.kpi-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 4px;
}

.kpi-delta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px;
}

.kpi-delta.up   { color: var(--green); background: var(--green-bg); }
.kpi-delta.down { color: var(--red);   background: var(--red-bg); }
.kpi-delta.flat { color: var(--amber); background: var(--amber-bg); }

/* ─── LMH KPI BAR (Tab 01 top bar) ─────────────────────────────────────────── */
.lmh-kpi-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 20px;
}

.lmh-county-panel {
  background: var(--paper);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.lmh-county-panel::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.lmh-county-panel.stan::before { background: var(--stan); }
.lmh-county-panel.sj::before   { background: var(--sj); }

.lmh-county-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  padding: 8px 14px 6px 18px;
  border-bottom: 1px solid var(--rule-light);
}
.lmh-county-panel.stan .lmh-county-label { color: var(--stan); }
.lmh-county-panel.sj   .lmh-county-label { color: var(--sj); }

.lmh-metrics {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  padding: 0 18px;
}

.lmh-metric {
  padding: 10px 12px 10px 0;
}

.lmh-metric-divider {
  width: 1px;
  background: var(--rule-light);
  margin: 8px 12px;
  align-self: stretch;
}

.lmh-metric-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 500;
  color: var(--ink-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.lmh-metric-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 5px;
  letter-spacing: -0.02em;
}

.lmh-metric-delta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px;
  white-space: nowrap;
}
.lmh-metric-delta.up   { color: var(--green); background: var(--green-bg); }
.lmh-metric-delta.down { color: var(--red);   background: var(--red-bg); }
.lmh-metric-delta.flat { color: var(--amber); background: var(--amber-bg); }

@media (max-width: 900px) {
  .lmh-kpi-bar { grid-template-columns: 1fr; }
  .lmh-metrics { grid-template-columns: 1fr 1fr; }
  .lmh-metric-divider { display: none; }
}

/* ─── RE KPI BAR (Tab 03 Rate & Economic) ───────────────────────────────── */
.re-kpi-bar {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  margin-bottom: 20px;
  background: var(--rule);
  gap: 1px;
}

.re-kpi-group {
  background: var(--paper);
  flex: 1;
  padding: 0;
}

.re-kpi-group-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  padding: 7px 14px 6px 14px;
  border-bottom: 1px solid var(--rule-light);
  background: var(--paper-alt);
}

.re-kpi-cells {
  display: flex;
  gap: 0;
  padding: 0 8px;
}

.re-kpi-cell {
  flex: 1;
  padding: 10px 8px 10px 6px;
  border-right: 1px solid var(--rule-light);
}
.re-kpi-cell:last-child { border-right: none; }

.re-kpi-separator {
  width: 1px;
  background: var(--rule);
  flex-shrink: 0;
}

.re-kpi-label {
  font-family: var(--font-mono);
  font-size: 0.57rem;
  font-weight: 500;
  color: var(--ink-light);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 4px;
  white-space: nowrap;
}

.re-kpi-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 5px;
  letter-spacing: -0.02em;
}

.re-kpi-delta {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  white-space: nowrap;
}
.re-kpi-delta.up   { color: var(--green); background: var(--green-bg); }
.re-kpi-delta.down { color: var(--red);   background: var(--red-bg); }
.re-kpi-delta.flat { color: var(--amber); background: var(--amber-bg); }

@media (max-width: 1100px) {
  .re-kpi-bar { flex-wrap: wrap; }
  .re-kpi-group { min-width: 200px; }
}

/* ─── LIVE DATA BADGE & LOADING STATE ───────────────────────────────── */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  margin-left: 8px;
  color: #059669;
  background: #D1FAE5;
  vertical-align: middle;
}
.live-badge.static {
  color: #92400E;
  background: #FEF3C7;
}
.re-updated {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--ink-light);
  margin-left: 6px;
  font-weight: 400;
}
/* ─── Tab 03 Last-Updated Timestamp Badge ─────────────────────────────────── */
.re-ts-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
  cursor: default;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: opacity 0.15s;
}
.re-ts-badge:hover { opacity: 0.8; }
.re-ts-badge.live {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.25);
}
.re-ts-badge.cached {
  background: rgba(234, 179, 8, 0.12);
  color: #ca8a04;
  border-color: rgba(234, 179, 8, 0.25);
}
@media (max-width: 768px) {
  .re-ts-badge { font-size: 0.55rem; padding: 2px 5px; }
}

.re-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  gap: 14px;
}
.re-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--rule);
  border-top-color: var(--stan);
  border-radius: 50%;
  animation: re-spin 0.8s linear infinite;
}
@keyframes re-spin {
  to { transform: rotate(360deg); }
}
.re-loading-text {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-light);
  letter-spacing: 0.05em;
}
.re-refresh-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  color: var(--ink-light);
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.re-refresh-btn:hover {
  background: var(--stan);
  color: #fff;
  border-color: var(--stan);
}
.re-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ─── Tab 01 Market Condition badge ────────────────────────────────────────── */
.lmh-county-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.lmh-condition-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.lmh-cond--sellers {
  background: #DCFCE7;
  color: #15803D;
  border: 1px solid #86EFAC;
}
.lmh-cond--balanced {
  background: #FEF9C3;
  color: #A16207;
  border: 1px solid #FDE047;
}
.lmh-cond--buyers {
  background: #FEE2E2;
  color: #B91C1C;
  border: 1px solid #FCA5A5;
}
/* Remove the old margin-bottom from lmh-county-label since header-row handles spacing */
.lmh-county-label {
  margin-bottom: 0 !important;
}

/* Spread KPI cell — amber accent to distinguish from rate cells */
.re-kpi-cell--spread {
  border-left: 2px solid #D97706;
  padding-left: 10px;
  margin-left: 4px;
}
.re-kpi-spread-val {
  color: #D97706 !important;
}
.re-kpi-spread-unit {
  font-size: 0.65em;
  font-weight: 400;
  margin-left: 2px;
  color: var(--ink-light);
}
/* ─── Data Sources footnote panel ─────────────────────────────────────────── */
.re-sources-panel {
  margin-top: 20px;
  border: 1px solid var(--rule);
  background: #FAFAF8;
}
.re-sources-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-light);
  list-style: none;
  user-select: none;
}
.re-sources-summary::-webkit-details-marker { display: none; }
.re-sources-summary:hover { color: var(--ink); }
.re-sources-icon {
  font-size: 0.85rem;
  color: var(--sj);
}
.re-sources-chevron {
  margin-left: auto;
  font-size: 0.6rem;
  transition: transform 0.2s;
}
details[open] .re-sources-chevron { transform: rotate(180deg); }
.re-sources-body {
  padding: 12px 14px 16px;
  border-top: 1px solid var(--rule);
}
.re-sources-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  margin-bottom: 10px;
}
.re-sources-table th {
  text-align: left;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-light);
  border-bottom: 1px solid var(--rule);
  padding: 4px 8px 4px 0;
}
.re-sources-table td {
  padding: 5px 8px 5px 0;
  border-bottom: 1px solid #EDE8E0;
  color: var(--ink);
  vertical-align: top;
}
.re-src-series a {
  color: var(--sj);
  text-decoration: none;
  font-weight: 600;
}
.re-src-series a:hover { text-decoration: underline; }
.re-sources-note {
  font-size: 0.68rem;
  color: var(--ink-light);
  line-height: 1.5;
  margin: 0;
}
.re-sources-note a { color: var(--sj); }

/* Make section-header flex so the refresh button can push to the right */
.section-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* ─── CHART GRID ────────────────────────────────────────────────────────────── */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 24px;
}

.chart-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 24px;
}

.chart-panel {
  background: var(--paper);
  padding: 14px 14px 10px;
}

.chart-panel-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}

.chart-legend {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-mid);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  flex-shrink: 0;
}

.chart-wrap {
  width: 100%;
  overflow: hidden;
}

.chart-wrap svg {
  display: block;
  width: 100%;
}

/* ─── DATA TABLE ────────────────────────────────────────────────────────────── */
.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  margin-bottom: 24px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.data-table thead th {
  background: var(--ink);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 10px;
  text-align: right;
  white-space: nowrap;
  border-right: 1px solid #2A2A2E;
}

.data-table thead th:first-child { text-align: left; }

.data-table tbody tr:nth-child(even) { background: var(--paper-alt); }
.data-table tbody tr:hover { background: var(--paper-warm); }

.data-table tbody td {
  padding: 6px 10px;
  text-align: right;
  border-right: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
  white-space: nowrap;
  position: relative;
}

.data-table tbody td:first-child {
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.68rem;
  color: var(--ink);
  background: var(--paper-alt);
  border-right: 2px solid var(--rule);
}

.data-table tbody td.stan-cell { color: var(--stan); }
.data-table tbody td.sj-cell   { color: var(--sj); }

/* Heat bar inside table cell */
.heat-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(184, 84, 46, 0.08);
  pointer-events: none;
  z-index: 0;
}

.heat-bar-sj {
  background: rgba(58, 90, 124, 0.08);
}

.data-table tbody td .cell-val {
  position: relative;
  z-index: 1;
}

/* ─── DT2: NEW DATA TABLE (months-as-rows, STAN/SJ column pairs) ─────────────── */
.dt2-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  margin-bottom: 24px;
  border-radius: 4px;
}

.dt2 {
  width: max-content; /* let table grow as wide as needed */
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

/* ── County spanning header row ─────────────────────────────────────────── */
.dt2-county-hdr {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center !important;
  vertical-align: middle;
  padding: 8px 6px 6px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.dt2-stan-hdr {
  background: #B8542E; /* terracotta */
  color: #fff;
}

.dt2-sj-hdr {
  background: #3A5A7C; /* slate blue */
  color: #fff;
}

/* ── Metric label column header ─────────────────────────────────────────── */
.dt2-metric-th {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  text-align: left;
  white-space: nowrap;
  min-width: 130px;
  border-right: 2px solid #2A2A2E;
  vertical-align: middle;
}

/* ── Month column headers ───────────────────────────────────────────────── */
.dt2-mo-hdr {
  background: var(--ink);
  color: #aaa;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 5px 4px 6px;
  white-space: nowrap;
  min-width: 52px;
  border-right: 1px solid #2A2A2E;
}

/* Current month column header highlight */
.dt2-mo-curr {
  background: #5A3A1A !important;
  color: #F5E8C8 !important;
  font-weight: 700;
}

/* ── Divider column ─────────────────────────────────────────────────────── */
.dt2-divider-hdr,
.dt2-divider-cell {
  width: 10px;
  min-width: 10px;
  max-width: 10px;
  padding: 0;
  background: var(--ink);
  border-left: 3px solid #2A2A2E;
  border-right: 3px solid #2A2A2E;
}

.dt2-divider-hdr {
  background: #1A1A1E;
}

.dt2-divider-cell {
  background: #1A1A1E;
  border-bottom: 1px solid var(--rule-light);
}

/* ── Body rows ──────────────────────────────────────────────────────────── */
.dt2-row td {
  padding: 5px 8px;
  text-align: right;
  border-bottom: 1px solid var(--rule-light);
  border-right: 1px solid var(--rule-light);
  white-space: nowrap;
}

.dt2-row:hover { background: var(--paper-warm); }

/* Alternating row background */
.dt2-row--alt { background: var(--paper-alt); }

/* ── Metric label cell (sticky left) ───────────────────────────────────── */
.dt2-metric-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left !important;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.66rem;
  color: var(--ink);
  background: var(--paper-alt);
  border-right: 2px solid var(--rule) !important;
  padding: 5px 12px !important;
  white-space: nowrap;
  min-width: 130px;
}

.dt2-row--alt .dt2-metric-cell {
  background: var(--paper-alt);
}

.dt2-row:not(.dt2-row--alt) .dt2-metric-cell {
  background: var(--paper);
}

/* ── Data value cells ───────────────────────────────────────────────────── */
/* STAN values — terracotta */
.dt2-stan-val {
  color: var(--stan);
  font-weight: 600;
}

/* SJ values — slate blue */
.dt2-sj-val {
  color: var(--sj);
}

/* Current month column highlight */
.dt2-col-curr {
  background: #F5F0E8 !important;
  font-weight: 700;
}

.dt2-col-curr.dt2-stan-val { color: #8B3A18 !important; }
.dt2-col-curr.dt2-sj-val   { color: #1E3D5C !important; }

/* MoM trend cell coloring — green = up, red = down */
.dt2-cell-up {
  background: rgba(21, 128, 61, 0.10) !important;
  color: #15803D !important;
  font-weight: 600;
}

.dt2-cell-down {
  background: rgba(185, 28, 28, 0.10) !important;
  color: #B91C1C !important;
  font-weight: 600;
}

/* Override for current-month column so highlight still wins */
.dt2-col-curr.dt2-cell-up   { background: rgba(21, 128, 61, 0.18) !important; color: #14532D !important; }
.dt2-col-curr.dt2-cell-down { background: rgba(185, 28, 28, 0.18) !important; color: #7F1D1D !important; }

/* ─── COUNTY SECTION DIVIDER ────────────────────────────────────────────────── */
.county-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 12px;
}

.county-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  color: #fff;
}

.county-badge.stan { background: var(--stan); }
.county-badge.sj   { background: var(--sj); }

.county-rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ─── STATUS PILLS ──────────────────────────────────────────────────────────── */
.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  white-space: nowrap;
}

.pill-proposed  { background: #FEF3C7; color: #92400E; }
.pill-active    { background: #DCFCE7; color: #14532D; }
.pill-approved  { background: #DBEAFE; color: #1E3A5F; }
.pill-completed { background: #F3F4F6; color: #374151; }
.pill-planning  { background: #EDE9FE; color: #4C1D95; }

/* ─── NEWS CARDS ────────────────────────────────────────────────────────────── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 24px;
}

.news-card {
  background: var(--paper);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.news-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  color: #fff;
}

.tag-rates    { background: #B8542E; }
.tag-supply   { background: #3A5A7C; }
.tag-geo      { background: #15803D; }
.tag-policy   { background: #7C3AED; }
.tag-economy  { background: #B45309; }
.tag-housing  { background: #0E7490; }
.tag-labor    { background: #374151; }
.tag-tariffs  { background: #9F1239; }

.news-month {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-light);
}

.news-topic {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--ink);
}

.news-summary {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-mid);
  line-height: 1.5;
}

.news-impact {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-mid);
  border-top: 1px solid var(--rule-light);
  padding-top: 8px;
  margin-top: auto;
}

.news-impact strong {
  color: var(--ink);
  font-weight: 600;
}

/* ─── REFERENCE GUIDE ───────────────────────────────────────────────────────── */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.ref-card {
  background: var(--paper);
  padding: 16px;
}

.ref-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 4px;
}

.ref-what {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-mid);
  margin-bottom: 10px;
  line-height: 1.5;
}

.ref-effect {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 8px;
}

.ref-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ref-rising {
  background: #FEF2F2;
  padding: 8px 10px;
  border-left: 3px solid var(--red);
}

.ref-falling {
  background: #F0FDF4;
  padding: 8px 10px;
  border-left: 3px solid var(--green);
}

.ref-dir-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.ref-rising .ref-dir-label  { color: var(--red); }
.ref-falling .ref-dir-label { color: var(--green); }

.ref-dir-text {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--ink-mid);
  line-height: 1.4;
}

/* ─── GROWTH TABLE ──────────────────────────────────────────────────────────── */
.growth-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  margin-bottom: 24px;
}

.growth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.growth-table thead th {
  background: var(--ink);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 12px;
  text-align: left;
  border-right: 1px solid #2A2A2E;
  white-space: nowrap;
}

.growth-table tbody tr:nth-child(even) { background: var(--paper-alt); }
.growth-table tbody tr:hover { background: var(--paper-warm); }

.growth-table tbody td {
  padding: 10px 12px;
  border-right: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-mid);
  vertical-align: top;
}

.growth-table tbody td.bold-cell {
  font-weight: 600;
  color: var(--ink);
}

.impact-high   { color: var(--red);   font-weight: 600; }
.impact-medium { color: var(--amber); font-weight: 600; }
.impact-low    { color: var(--green); font-weight: 600; }

/* ─── CHART TOOLTIP ─────────────────────────────────────────────────────────── */
.chart-tooltip {
  position: fixed;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 8px 12px;
  pointer-events: none;
  z-index: 9999;
  border-left: 3px solid var(--stan);
  max-width: 240px;
  line-height: 1.6;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.tooltip-month {
  font-weight: 600;
  color: #E4E4E7;
  margin-bottom: 4px;
  font-size: 0.7rem;
}

.tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.tooltip-label { color: #A1A1AA; }
.tooltip-val   { color: #fff; font-weight: 500; }

/* ─── FOOTER ────────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: #52525B;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  padding: 12px 24px;
  text-align: center;
  border-top: 1px solid #2A2A2E;
}

/* ─── RESPONSIVE ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .chart-grid { grid-template-columns: repeat(2, 1fr); }
  .ref-grid   { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .chart-grid, .chart-grid-2 { grid-template-columns: 1fr; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .top-bar-inner { flex-direction: column; align-items: flex-start; }
  #app { padding: 16px 12px 32px; }
}

/* ─── CHART SVG STYLES ──────────────────────────────────────────────────────── */
.chart-axis-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  fill: #A1A1AA;
}

.chart-value-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  fill: #52525B;
}

.chart-guide-line {
  stroke: #D8D8DB;
  stroke-width: 1;
  stroke-dasharray: 3,3;
}

.chart-zero-line {
  stroke: #18181B;
  stroke-width: 1;
}

/* ─── TAB 07: RENT COMPS ────────────────────────────────────────────────────── */

/* CoStar note banner */
.rc-costar-note {
  background: var(--sj-light);
  border-left: 3px solid var(--sj);
  padding: 10px 16px;
  margin-bottom: 18px;
  font-size: 0.85rem;
  color: var(--ink-mid);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.rc-costar-icon {
  font-size: 1rem;
  color: var(--sj);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Filter bar */
.rc-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.rc-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rc-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-right: 4px;
}
.rc-filter-btn {
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  color: var(--ink-mid);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.rc-filter-btn:hover {
  background: var(--stan-light);
  border-color: var(--stan);
  color: var(--stan);
}
.rc-filter-btn.active {
  background: var(--stan);
  border-color: var(--stan);
  color: #fff;
  font-weight: 700;
}

/* Section title */
.rc-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-light);
}

/* Main rent comps table */
.rc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  margin-bottom: 8px;
}
.rc-table thead th {
  background: var(--ink);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 10px;
  text-align: left;
  border-right: 1px solid rgba(255,255,255,0.1);
  white-space: nowrap;
}
.rc-table thead th:last-child { border-right: none; }
.rc-table tbody tr { border-bottom: 1px solid var(--rule-light); }
.rc-table tbody tr:hover { background: var(--paper-warm); }
.rc-table td { padding: 8px 10px; vertical-align: middle; }
.rc-row-null td { color: var(--ink-light); background: var(--paper-alt); }
.rc-city {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
  white-space: nowrap;
  min-width: 90px;
}
.rc-median {
  font-weight: 700;
  color: var(--stan);
  font-size: 0.9rem;
  min-width: 130px;
}
.rc-mean { color: var(--ink-mid); }
.rc-spread { color: var(--ink-mid); white-space: nowrap; }
.rc-range { color: var(--ink-light); font-size: 0.78rem; white-space: nowrap; }
.rc-no-data { color: var(--ink-light); font-style: italic; font-family: var(--font-ui); }

/* Inline rent bar inside median cell */
.rent-bar-wrap {
  height: 4px;
  background: var(--rule-light);
  margin-top: 4px;
  width: 100%;
  max-width: 120px;
}
.rent-bar-fill {
  height: 4px;
  background: var(--stan);
  transition: width 0.3s ease;
}

/* Confidence pills */
.conf-pill {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid transparent;
}
.conf-hi   { background: var(--green-bg);  color: var(--green); border-color: var(--green); }
.conf-mid  { background: var(--amber-bg);  color: var(--amber); border-color: var(--amber); }
.conf-lo   { background: var(--red-bg);    color: var(--red);   border-color: var(--red); }
.conf-none { background: var(--paper-alt); color: var(--ink-light); border-color: var(--rule); }

/* Sample badges */
.sample-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 2px;
}
.sample-hi  { background: var(--green-bg);  color: var(--green); }
.sample-mid { background: var(--amber-bg);  color: var(--amber); }
.sample-lo  { background: var(--red-bg);    color: var(--red); }
.rc-radius {
  font-size: 0.68rem;
  color: var(--ink-light);
  font-family: var(--font-mono);
}

/* Summary grid — 9 city cards */
.sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.sg-card {
  border: 1px solid var(--rule);
  background: var(--paper);
}
.sg-city {
  background: var(--ink);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.sg-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.sg-table thead th {
  background: var(--paper-alt);
  color: var(--ink-light);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.sg-table tbody tr { border-bottom: 1px solid var(--rule-light); }
.sg-table tbody tr:hover { background: var(--paper-warm); }
.sg-table td { padding: 4px 8px; }
.sg-bed { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; color: var(--ink-mid); }
.sg-val { font-weight: 700; color: var(--stan); }
.sg-n   { color: var(--ink-light); font-size: 0.72rem; text-align: right; }

/* Footer note */
.rc-footer-note {
  background: var(--paper-alt);
  border-top: 2px solid var(--rule);
  padding: 12px 16px;
  font-size: 0.78rem;
  color: var(--ink-mid);
  margin-top: 8px;
  line-height: 1.6;
}

/* CoStar Section Styles */
.cs-section { margin: 1.5rem 0; border: 1px solid #C8B99A; border-radius: 2px; overflow: hidden; }
.cs-section-header { background: #2C3E50; color: #ECF0F1; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.55rem 1rem; display: flex; align-items: center; justify-content: space-between; }
.cs-pulled { font-size: 0.72rem; font-weight: 400; color: #BDC3C7; }
.cs-kpi-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0; border-bottom: 1px solid #C8B99A; }
.cs-kpi-card { padding: 0.6rem 0.75rem; border-right: 1px solid #E8DDD0; background: #FDFAF6; }
.cs-kpi-card:last-child { border-right: none; }
.cs-kpi-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #7A6652; margin-bottom: 0.2rem; }
.cs-kpi-val { font-family: 'JetBrains Mono', monospace; font-size: 0.92rem; font-weight: 700; color: #1A1A1A; }
.cs-kpi-sub { font-size: 0.65rem; color: #8A7A6A; margin-top: 0.1rem; font-family: 'JetBrains Mono', monospace; }
.cs-br-header, .cs-table-header { background: #F0EAE0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5A4A3A; padding: 0.35rem 1rem; border-top: 1px solid #C8B99A; border-bottom: 1px solid #C8B99A; }
.cs-br-row { display: flex; gap: 0; border-bottom: 1px solid #E8DDD0; }
.cs-br-cell { flex: 1; padding: 0.5rem 1rem; border-right: 1px solid #E8DDD0; background: #FDFAF6; display: flex; flex-direction: column; gap: 0.15rem; }
.cs-br-cell:last-child { border-right: none; }
.cs-br-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8A7A6A; }
.cs-br-val { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 700; color: #1A1A1A; }
.cs-table-wrap { overflow-x: auto; }
.cs-table { width: 100%; font-size: 0.78rem; }
.cs-table th { white-space: nowrap; font-size: 0.65rem; }
.cs-note-cell { text-align: center; cursor: help; font-size: 1rem; }


/* ─── TAB 08: RENTAL MARKET ─────────────────────────────────────────────────── */
.rm-county-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}
.rm-county-panel {
  border: 1px solid var(--border);
  padding: 1rem;
  background: #FAFAFA;
}
.rm-county-panel.rm-stan { border-top: 3px solid #B8542E; }
.rm-county-panel.rm-sj  { border-top: 3px solid #3A5A7C; }
.rm-county-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #52525B;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.rm-county-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
.rm-kpi { display: flex; flex-direction: column; gap: 1px; }
.rm-kpi-l {
  font-size: 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  color: #71717A;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rm-kpi-v {
  font-size: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.1;
}
.rm-kpi-s {
  font-size: 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  color: #A1A1AA;
}
.rm-br-strip {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.rm-br {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #F4F4F5;
  padding: 0.3rem 0.6rem;
  min-width: 56px;
}
.rm-br-l {
  font-size: 0.55rem;
  font-family: 'JetBrains Mono', monospace;
  color: #71717A;
  text-transform: uppercase;
}
.rm-br-v {
  font-size: 0.8rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #1A1A1A;
}
.rm-section-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #52525B;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.35rem;
  margin: 1.25rem 0 0.75rem;
}
.rm-chart-wrap {
  background: #FAFAFA;
  border: 1px solid var(--border);
  padding: 1rem 1rem 0.5rem;
  overflow-x: auto;
}
.rm-chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.rm-leg {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  font-family: 'JetBrains Mono', monospace;
  color: #52525B;
}
.rm-leg span {
  display: inline-block;
  width: 14px;
  height: 10px;
}
.rm-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0.75rem 0;
}
.rm-hl-panel {
  border: 1px solid var(--border);
  padding: 0.75rem;
  background: #FAFAFA;
}
.rm-hl-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #3A3A3A;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.rm-hl-row {
  display: grid;
  grid-template-columns: 1.2rem 1fr auto auto;
  gap: 0.25rem 0.4rem;
  align-items: center;
  padding: 0.25rem 0;
  border-bottom: 1px solid #F4F4F5;
  font-size: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
}
.rm-hl-rank { color: #A1A1AA; font-weight: 600; }
.rm-hl-city { color: #1A1A1A; font-weight: 600; }
.rm-hl-val  { font-weight: 700; }
.rm-hl-rent { color: #71717A; font-size: 0.62rem; }
.cs-note-cell { cursor: help; text-align: center; font-size: 0.9rem; }
@media (max-width: 900px) {
  .rm-county-compare { grid-template-columns: 1fr; }
  .rm-county-kpis { grid-template-columns: repeat(2, 1fr); }
  .rm-highlights { grid-template-columns: 1fr; }
}

/* ─── TAB 09: MULTIFAMILY TRANSACTION TRENDS ──────────────────────────────── */

.mft-county-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.mft-county-card {
  border: 1px solid var(--rule);
  padding: 1rem;
  background: var(--bg-card);
}

.mft-county-card.mft-stan { border-top: 3px solid #B8542E; }
.mft-county-card.mft-sj   { border-top: 3px solid #3A5A7C; }

.mft-county-name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.mft-county-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.mft-kpi {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
}

.mft-kl {
  font-size: 0.6rem;
  color: var(--text-muted);
  font-family: 'Inter Tight', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
}

.mft-kv {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mft-section-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

.mft-charts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.mft-chart-box {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  padding: 0.75rem;
}

.mft-chart-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.mft-chart-legend {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  font-family: 'Inter Tight', sans-serif;
}

/* Debt maturity wall section */
.mft-debt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.mft-debt-chart {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  padding: 0.75rem;
}

.mft-stat-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.mft-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-left: 3px solid #c0392b;
  padding: 0.6rem 0.75rem;
}

.mft-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.3rem;
  font-weight: 700;
  color: #c0392b;
  line-height: 1;
}

.mft-stat-lbl {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0.2rem 0 0.1rem;
}

.mft-stat-sub {
  font-size: 0.6rem;
  color: var(--text-muted);
  font-family: 'Inter Tight', sans-serif;
}

/* Delinquency section */
.mft-delinq-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.mft-delinq-row {
  display: grid;
  grid-template-columns: 180px 1fr 60px 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--rule);
}

.mft-delinq-lender {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mft-delinq-bar-wrap {
  background: var(--rule);
  height: 8px;
  border-radius: 0;
  overflow: hidden;
}

.mft-delinq-bar {
  height: 100%;
  transition: width 0.5s ease;
}

.mft-delinq-rate {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: right;
}

.mft-delinq-note {
  font-size: 0.6rem;
  color: var(--text-muted);
  font-family: 'Inter Tight', sans-serif;
}

/* Reset risk table */
.mft-table-wrap {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.mft-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.7rem;
}

.mft-table th {
  background: var(--bg-header);
  color: var(--text-muted);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 2px solid var(--rule);
}

.mft-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  color: var(--text-primary);
  vertical-align: top;
}

.mft-table tr:hover td {
  background: var(--bg-hover);
}

.mft-risk-pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
}

/* Cap rate advantage cards */
.mft-cv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.mft-cv-card {
  border: 1px solid var(--rule);
  padding: 1rem;
  background: var(--bg-card);
  text-align: center;
}

.mft-cv-card.mft-cv-sj    { border-top: 3px solid #27ae60; }
.mft-cv-card.mft-cv-stan  { border-top: 3px solid #e67e22; }
.mft-cv-card.mft-cv-coastal { border-top: 3px solid #c0392b; }
.mft-cv-card.mft-cv-debt  { border-top: 3px solid #555; }

.mft-cv-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.mft-cv-rate {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.mft-cv-sub {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin: 0.2rem 0 0.6rem;
  font-family: 'Inter Tight', sans-serif;
}

.mft-cv-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 2px;
  margin-bottom: 0.6rem;
  letter-spacing: 0.05em;
}

.mft-cv-positive { background: #27ae60; color: #fff; }
.mft-cv-borderline { background: #e67e22; color: #fff; }
.mft-cv-negative { background: #c0392b; color: #fff; }

.mft-cv-note {
  font-size: 0.62rem;
  color: var(--text-secondary);
  font-family: 'Inter Tight', sans-serif;
  line-height: 1.5;
  text-align: left;
}

@media (max-width: 900px) {
  .mft-county-strip { grid-template-columns: 1fr; }
  .mft-charts-grid  { grid-template-columns: 1fr 1fr; }
  .mft-debt-grid    { grid-template-columns: 1fr; }
  .mft-cv-grid      { grid-template-columns: 1fr 1fr; }
  .mft-county-kpis  { grid-template-columns: repeat(3, 1fr); }
  .mft-delinq-row   { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .mft-charts-grid  { grid-template-columns: 1fr; }
  .mft-cv-grid      { grid-template-columns: 1fr; }
  .mft-county-kpis  { grid-template-columns: repeat(2, 1fr); }
}

/* ─── DISTRESSED DEAL SCREENER (DDS) ─────────────────────────────────────── */

.dds-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--rule);
}

.dds-legend-item {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.68rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dds-scoring-explainer {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.68rem;
  color: var(--text-muted);
  padding: 0.5rem 0.75rem;
  background: var(--bg-header);
  border: 1px solid var(--rule);
  margin-bottom: 1rem;
}

.dds-tier-header {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.4rem;
  margin-top: 0.75rem;
}

.dds-tier-header-strong { background: #fdf0ef; border-left: 4px solid #c0392b; color: #c0392b; }
.dds-tier-header-monitor { background: #fef8f0; border-left: 4px solid #e67e22; color: #b8610a; }
.dds-tier-header-stable  { background: #f0faf4; border-left: 4px solid #27ae60; color: #1a7a42; }

.dds-tier-pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.dds-tier-strong { background: #c0392b; color: #fff; }
.dds-tier-monitor { background: #e67e22; color: #fff; }
.dds-tier-stable  { background: #27ae60; color: #fff; }

.dds-table td {
  font-size: 0.68rem;
  vertical-align: middle;
}

.dds-score-cell {
  min-width: 90px;
}

.dds-score-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}

.dds-score-bar-wrap {
  background: var(--rule);
  height: 5px;
  margin-top: 3px;
  width: 80px;
}

.dds-score-bar {
  height: 100%;
  transition: width 0.6s ease;
}

.dds-county-tag {
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  font-family: 'Inter Tight', sans-serif;
}

.dds-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  font-size: 0.6rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

.dds-badge-green  { background: #d4edda; color: #155724; }
.dds-badge-yellow { background: #fff3cd; color: #856404; }
.dds-badge-red    { background: #f8d7da; color: #721c24; }

.dds-chip {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.dds-chip-red    { background: #c0392b; color: #fff; }
.dds-chip-yellow { background: #e67e22; color: #fff; }
.dds-chip-green  { background: #27ae60; color: #fff; }

.dds-up   { color: #c0392b; font-weight: 700; }
.dds-down { color: #27ae60; font-weight: 700; }
.dds-flat { color: var(--text-muted); }

.dds-notes {
  font-size: 0.62rem;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 280px;
}

.dds-advisory {
  background: #1a2a3a;
  color: #e8e8e8;
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  border-left: 4px solid #B8542E;
}

.dds-advisory-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B8542E;
  margin-bottom: 0.75rem;
}

.dds-advisory-body p {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.78rem;
  line-height: 1.7;
  color: #d0d0d0;
  margin-bottom: 0.6rem;
}

.dds-advisory-body strong {
  color: #fff;
}

@media (max-width: 900px) {
  .dds-notes { max-width: 160px; }
  .dds-legend { flex-direction: column; }
}

/* ─── PDF EXPORT BUTTON ──────────────────────────────────────────────────────── */
.pdf-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #B8542E;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 20px;
  transition: background 0.15s ease, transform 0.1s ease;
  box-shadow: 0 2px 8px rgba(184,84,46,0.25);
}
.pdf-export-btn:hover {
  background: #9a4325;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(184,84,46,0.35);
}
.pdf-export-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(184,84,46,0.2);
}
.pdf-export-btn svg {
  flex-shrink: 0;
}

/* ─── EXPORT BUTTON ROW ──────────────────────────────────────────────────────── */
.export-btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.img-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1a2a3a;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}

.img-export-btn:hover {
  background: #2c4a6a;
}

.img-export-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Override the old single-button margin when inside the row */
.export-btn-row .pdf-export-btn {
  margin-bottom: 0;
}

/* ─── LIVE BADGE (Tab 01 & Tab 03) ─────────────────────────────────────────── */
.re-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  margin-left: 8px;
  color: #059669;
  background: #D1FAE5;
  vertical-align: middle;
}

.re-updated-ts {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--ink-light);
  margin-left: 6px;
  font-weight: 400;
  vertical-align: middle;
}

/* ─── FULL-WIDTH CHART PANEL (ZHVI, ZRI) ────────────────────────────────────── */
.chart-panel--full {
  grid-column: 1 / -1;
}

/* ─── PDF EXPORT BUTTON ──────────────────────────────────────────────────────── */
.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.export-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  color: rgba(255,255,255,0.85);
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.export-pdf-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.export-pdf-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ─── TAB REFRESH BUTTON ─────────────────────────────────────────────────────── */
.tab-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  color: rgba(255,255,255,0.7);
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.tab-refresh-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}
.tab-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Tab 01 KPI bar — two-row layout row labels ─────────────────────── */
.lmh-row-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  padding: 5px 18px 2px 18px;
  border-top: 1px solid var(--rule-light);
  background: var(--paper-alt);
}
.lmh-county-panel .lmh-row-label:first-of-type {
  border-top: none;
}

/* 6 metrics per row: 6 metric cols + 5 divider cols */
.lmh-metrics {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr !important;
}

@media (max-width: 1100px) {
  .lmh-metrics {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .lmh-metric-divider { display: none; }
}

/* ── Tab 01 KPI bar — sparklines ────────────────────────────────────── */
.lmh-sparkline {
  display: block;
  margin: 3px 0 4px 0;
  opacity: 0.75;
  overflow: visible;
}

/* ── Tab 01 KPI bar — mobile responsive ────────────────────────────── */
@media (max-width: 768px) {
  .lmh-kpi-bar {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .lmh-metrics {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .lmh-metric-divider { display: none; }
  .lmh-county-header-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .top-bar-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .export-pdf-btn {
    font-size: 10px;
    padding: 5px 10px;
  }
}

@media (max-width: 480px) {
  .lmh-metrics {
    grid-template-columns: 1fr 1fr !important;
  }
  .lmh-metric-cell {
    padding: 6px 8px;
  }
  .lmh-metric-val {
    font-size: 16px;
  }
  .lmh-sparkline {
    display: none; /* hide sparklines on very small screens to save space */
  }
  .tab-rail {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab-btn {
    white-space: nowrap;
    font-size: 9px;
    padding: 8px 10px;
  }
}
/* ── Tab 01 KPI bar — Metric card tooltips ────────────────── */
/* .lmh-metric-tip: metric card with a data-tip attribute shows a tooltip on hover/tap */
.lmh-metric-tip {
  position: relative;
  cursor: help;
}
/* Subtle dotted underline on the value to hint interactivity */
.lmh-metric-tip .lmh-metric-value {
  text-decoration: underline dotted rgba(255,255,255,0.25);
  text-underline-offset: 3px;
}
/* Tooltip bubble — appears above the card */
.lmh-metric-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  max-width: 300px;
  width: max-content;
  background: #1E1E24;
  color: #E4E4E7;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
  padding: 9px 12px;
  border-radius: 4px;
  border: 1px solid #3F3F46;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  white-space: pre-line;  /* honour \n line breaks in the tip string */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 9999;
}
/* Caret arrow */
.lmh-metric-tip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #3F3F46;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 9999;
}
.lmh-metric-tip:hover::after,
.lmh-metric-tip:hover::before,
.lmh-metric-tip--active::after,
.lmh-metric-tip--active::before {
  opacity: 1;
  visibility: visible;
}
/* Keep tooltip inside the panel on leftmost and rightmost cards */
.lmh-metrics > .lmh-metric-tip:first-child::after {
  left: 0;
  transform: none;
}
.lmh-metrics > .lmh-metric-tip:last-child::after {
  left: auto;
  right: 0;
  transform: none;
}
/* Touch overrides */
@media (pointer: coarse) {
  .lmh-metric-tip .lmh-metric-value {
    text-decoration-thickness: 1.5px;
  }
  .lmh-metric-tip--active {
    outline: 2px solid rgba(255,255,255,0.3);
    outline-offset: 2px;
    border-radius: 3px;
  }
  .lmh-metric-tip::after {
    font-size: 0.71rem;
    padding: 10px 14px;
    max-width: 260px;
  }
}

/* ── Tab 01 KPI bar — Market Trend arrow ───────────────────── */
.lmh-trend-arrow {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: default;
  user-select: none;
}
.lmh-trend--tightening {
  /* supply falling = market heating = green */
  color: #15803D;
  background: #DCFCE7;
  border-color: #86EFAC;
}
.lmh-trend--loosening {
  /* supply rising = market cooling = red */
  color: #B91C1C;
  background: #FEE2E2;
  border-color: #FCA5A5;
}
.lmh-trend--stable {
  /* supply flat = amber */
  color: #A16207;
  background: #FEF9C3;
  border-color: #FDE047;
}

/* ── Tab 01 KPI bar — Data as of date badge ────────────────── */
.lmh-data-date {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-light);
  background: var(--paper-alt);
  border: 1px solid var(--rule-light);
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
  margin-left: auto;
}

/* ── Tab 01 KPI bar — County Comparison row ───────────────────── */
.lmh-county-compare {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-top: none;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.lmh-compare-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
  white-space: nowrap;
  flex-shrink: 0;
}
.lmh-compare-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.lmh-compare-chip {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 2px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.lmh-compare-chip.stan {
  color: var(--stan);
  background: var(--stan-light);
  border-color: var(--stan);
  opacity: 0.9;
}
.lmh-compare-chip.sj {
  color: var(--sj);
  background: var(--sj-light);
  border-color: var(--sj);
  opacity: 0.9;
}
.lmh-compare-chip.tie {
  color: var(--ink-mid);
  background: var(--paper);
  border-color: var(--rule);
}

/* ── Tab 01 KPI bar — Market Summary tooltip ──────────────────── */
/* .lmh-tip: any span with data-tip shows a floating tooltip on hover */
.lmh-tip {
  position: relative;
  cursor: help;
  text-decoration: underline dotted currentColor;
  text-underline-offset: 2px;
}
/* Tooltip bubble */
.lmh-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 320px;
  width: max-content;
  background: #1E1E24;
  color: #E4E4E7;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: 0.02em;
  padding: 8px 11px;
  border-radius: 4px;
  border: 1px solid #3F3F46;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 9999;
}
/* Caret / arrow pointing down toward the text */
.lmh-tip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #3F3F46;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 9999;
}
.lmh-tip:hover::after,
.lmh-tip:hover::before,
.lmh-tip--active::after,
.lmh-tip--active::before {
  opacity: 1;
  visibility: visible;
}
/* Prevent tooltip from clipping off the left edge of the panel */
.lmh-tip:first-child::after {
  left: 0;
  transform: none;
}
/* Touch-friendly: larger tap target and a subtle active ring on tap */
@media (pointer: coarse) {
  .lmh-tip {
    /* Expand clickable area without affecting layout */
    padding: 2px 1px;
    margin: -2px -1px;
    /* Slightly bolder underline so it reads as interactive on small screens */
    text-decoration-thickness: 1.5px;
  }
  .lmh-tip--active {
    /* Brief highlight ring so the user knows the tap registered */
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
  }
  /* On touch devices the tooltip bubble should be slightly larger and
     always appear above the text (never clipped by the bottom of the panel) */
  .lmh-tip::after {
    font-size: 0.72rem;
    padding: 9px 13px;
    max-width: 280px;
  }
}

/* ── Tab 01 KPI bar — Market Summary narrative ────────────────── */
/* Accent spans inside the narrative text */
.lmh-summary-accent {
  font-weight: 600;
  font-style: normal;
}
.lmh-summary-accent.stan { color: var(--stan); }
.lmh-summary-accent.sj   { color: var(--sj); }
.lmh-summary-good {
  font-weight: 600;
  font-style: normal;
  color: #15803D; /* green — bullish signal */
}
.lmh-summary-bad {
  font-weight: 600;
  font-style: normal;
  color: #B91C1C; /* red — bearish signal */
}

.lmh-market-summary {
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-mid);
  padding: 6px 18px 10px 18px;
  border-bottom: 1px solid var(--rule-light);
  margin-bottom: 2px;
  font-style: italic;
}

/* ── Tab 01 KPI bar — metric cell overflow protection ───────────────── */
.lmh-metric {
  min-width: 0;
  overflow: hidden;
}
.lmh-metric-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.52rem; /* ensure consistent size across all breakpoints */
  letter-spacing: 0.06em;
}
.lmh-metric-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lmh-metric-delta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}