:root {
  color-scheme: light;
  --ink: #142141;
  --muted: #6f6a63;
  --line: #ded8cc;
  --soft: #f7f3eb;
  --paper: #ffffff;
  --brand-navy: #142141;
  --brand-white: #ffffff;
  --brand-cream: #ede9e0;
  --brand-amber: #ffbe6e;
  --brand-blue-soft: #d8e0f7;
  --gold: #b7791f;
  --blue: #2563eb;
  --red: #b91c1c;
  --green: #15803d;
  --shadow: 0 18px 50px rgba(20, 33, 65, 0.1);
  --sidebar-bg: var(--brand-navy);
  --main-bg: var(--brand-cream);
  --active-nav: var(--brand-amber);
  --active-nav-text: var(--brand-navy);
  --bar-top: var(--brand-amber);
  --bar-bottom: var(--brand-navy);
}

body[data-theme="bankerDark"] {
  --ink: #fdfdfd;
  --muted: #c9c1b4;
  --line: #304061;
  --soft: #1c2b50;
  --paper: #142141;
  --sidebar-bg: #142141;
  --main-bg: #0f172a;
  --active-nav: #ffbe6e;
  --active-nav-text: #142141;
  --bar-top: #ffbe6e;
  --bar-bottom: #d8e0f7;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

body[data-theme="coastal"] {
  --ink: #0f172a;
  --muted: #55707d;
  --line: #c7d8dd;
  --soft: #eef8f8;
  --paper: #ffffff;
  --sidebar-bg: #142141;
  --main-bg: #d8e0f7;
  --active-nav: #ffbe6e;
  --active-nav-text: #142141;
  --bar-top: #ffbe6e;
  --bar-bottom: #142141;
  --shadow: 0 18px 50px rgba(20, 33, 65, 0.09);
}

body[data-theme="classic"] {
  --ink: #142141;
  --muted: #5c667f;
  --line: #d8e0f7;
  --soft: #ede9e0;
  --paper: #ffffff;
  --sidebar-bg: #142141;
  --main-bg: #ede9e0;
  --active-nav: #142141;
  --active-nav-text: #ffffff;
  --bar-top: #142141;
  --bar-bottom: #ffbe6e;
  --shadow: 0 18px 50px rgba(20, 33, 65, 0.11);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--main-bg);
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 20px;
  background: var(--sidebar-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.eyebrow {
  margin: 0 0 7px;
  color: #8fbcb7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 10px;
  font-size: 28px;
  line-height: 1.05;
}

.period {
  margin-bottom: 0;
  color: #b9c9cc;
  font-size: 13px;
  line-height: 1.45;
}

.field {
  display: grid;
  gap: 7px;
}

.field span {
  color: #b9c9cc;
  font-size: 12px;
  font-weight: 700;
}

.field select,
.field input {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 0 11px;
  color: #fff;
  background: #223039;
  outline: none;
}

.tabs {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.tab-group {
  display: grid;
  gap: 7px;
}

.tab-group-label {
  color: rgba(216, 224, 247, 0.68);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tab,
.segmented button {
  border: 0;
  cursor: pointer;
}

.tab {
  min-height: 40px;
  border-radius: 6px;
  padding: 0 12px;
  color: #dbe7e8;
  background: transparent;
  text-align: left;
}

.tab.active,
.tab:hover {
  color: var(--active-nav-text);
  background: var(--active-nav);
}

.palette-field {
  gap: 8px;
}

.theme-switcher {
  display: flex;
  gap: 8px;
}

.theme-switcher button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(216, 224, 247, 0.36);
  border-radius: 999px;
  padding: 3px;
  background: transparent;
  cursor: pointer;
}

.theme-switcher button i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(20, 33, 65, 0.1);
}

.theme-switcher button[data-theme="bankerLight"] i {
  background: linear-gradient(135deg, #ffffff 0 48%, #ffbe6e 48% 68%, #142141 68%);
}

.theme-switcher button[data-theme="bankerDark"] i {
  background: linear-gradient(135deg, #142141 0 55%, #d8e0f7 55% 74%, #ffbe6e 74%);
}

.theme-switcher button[data-theme="coastal"] i {
  background: linear-gradient(135deg, #d8e0f7 0 52%, #ffffff 52% 70%, #142141 70%);
}

.theme-switcher button[data-theme="classic"] i {
  background: linear-gradient(135deg, #ede9e0 0 52%, #ffbe6e 52% 72%, #142141 72%);
}

.theme-switcher button.active,
.theme-switcher button:hover {
  border-color: var(--brand-amber);
  box-shadow: 0 0 0 2px rgba(255, 190, 110, 0.24);
}

.banker-toggle {
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

body.admin-mode .banker-toggle {
  display: grid;
}

.banker-toggle span {
  display: grid;
  gap: 2px;
}

.banker-toggle strong {
  font-size: 12px;
}

.banker-toggle small {
  color: #b9c9cc;
  font-size: 11px;
}

.banker-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.banker-toggle i {
  position: relative;
  width: 42px;
  height: 24px;
  border: 1px solid rgba(216, 224, 247, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.banker-toggle i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d8e0f7;
  transition: transform 160ms ease, background 160ms ease;
}

.banker-toggle input:checked + i {
  border-color: var(--brand-amber);
  background: rgba(255, 190, 110, 0.28);
}

.banker-toggle input:checked + i::after {
  transform: translateX(18px);
  background: var(--brand-amber);
}

.banker-only {
  display: none;
}

body.banker-mode .tab.banker-only {
  display: block;
}

.sidebar-brand-link {
  display: grid;
  justify-items: start;
  gap: 7px;
  margin-top: auto;
  padding: 2px 0;
  color: #d8e0f7;
  text-decoration: none;
}

.sidebar-brand-link:hover {
  color: var(--brand-white);
}

.sidebar-brand-link img {
  width: 104px;
  filter: brightness(0) invert(1);
}

.sidebar-brand-link span {
  font-size: 12px;
  font-weight: 700;
}

.version-stamp {
  display: block;
  margin-top: 8px;
  color: rgba(216, 224, 247, 0.68);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

main {
  min-width: 0;
  padding: 22px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

h2 {
  margin-bottom: 0;
  font-size: 30px;
  line-height: 1.1;
}

.source-pill {
  flex: 0 0 auto;
  color: var(--brand-blue);
  font-size: 12px;
}

.source-pill a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-weight: 800;
  text-decoration: none;
}

.source-pill img {
  display: block;
  width: 34px;
  height: auto;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kpi {
  min-height: 104px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.card-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.card-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--brand-amber);
  border-radius: 8px;
  color: #ffffff;
  background: var(--brand-navy);
  box-shadow: 0 8px 18px rgba(20, 33, 65, .18);
}

.card-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kpi span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.kpi strong {
  display: block;
  margin-top: 10px;
  font-size: 24px;
  line-height: 1;
}

.kpi small {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  line-height: 1.3;
}

.delta {
  display: inline !important;
  padding: 0;
  font-weight: 900 !important;
  line-height: inherit;
  background: transparent;
}

span.delta-good,
.delta.delta-good {
  color: #0f5132;
  background: transparent;
}

span.delta-bad,
.delta.delta-bad {
  color: #7f1d1d;
  background: transparent;
}

span.delta-neutral,
.delta.delta-neutral {
  color: #8a4b00;
  background: transparent;
}

.banker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.banker-card {
  min-height: 112px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand-amber);
  border-radius: 8px;
  padding: 14px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.banker-card span,
.banker-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.banker-card strong {
  display: block;
  margin: 11px 0 8px;
  font-size: 25px;
  line-height: 1;
}

.panel {
  display: none;
}

.panel.active {
  display: block;
}

.section-heading,
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-heading {
  margin: 6px 0 14px;
}

.section-heading h3 {
  margin: 0;
  font-size: 20px;
}

.section-heading span,
.panel-title span {
  color: var(--muted);
  font-size: 12px;
}

.chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.market-direction-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.direction-card {
  display: flex;
  min-height: 116px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand-amber);
  border-radius: 8px;
  background: var(--paper);
  padding: 14px;
  box-shadow: var(--shadow);
}

.direction-card span,
.direction-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.direction-card strong {
  display: block;
  margin: 8px 0 7px;
  color: var(--ink);
  font-size: 23px;
  line-height: 1;
}

.direction-heating {
  border-left-color: #0f766e;
}

.direction-cooling {
  border-left-color: #b45309;
}

.direction-improving {
  border-left-color: #2563a9;
}

.direction-stable {
  border-left-color: #8a91a3;
}

.market-narrative-card {
  margin-bottom: 14px;
}

.narrative-copy {
  display: grid;
  gap: 10px;
}

.market-narrative-card p {
  max-width: 980px;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}

.market-narrative-card .quality-note {
  max-width: 980px;
  border-left: 3px solid var(--brand-amber);
  padding-left: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.narrative-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 13px;
}

.narrative-facts span {
  border: 0;
  padding: 0;
  color: var(--brand-navy);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
}

.price-band-panel {
  margin-bottom: 14px;
}

.price-band-chart {
  display: grid;
  gap: 13px;
}

.price-band-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.price-band-label strong,
.price-band-label span {
  display: block;
}

.price-band-label strong {
  color: var(--ink);
  font-size: 13px;
}

.price-band-label span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.price-band-bars {
  display: grid;
  gap: 5px;
}

.price-band-bar {
  display: flex;
  min-width: 30px;
  height: 23px;
  align-items: center;
  justify-content: flex-end;
  border-radius: 0 5px 5px 0;
  padding-right: 7px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.price-band-bar.current {
  background: var(--brand-navy);
}

.price-band-bar.prior {
  background: #8a91a3;
}

.price-band-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.chart-panel,
.table-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.moves-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.move-summary-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.move-summary-card span,
.move-summary-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.move-summary-card strong {
  display: block;
  margin: 4px 0 2px;
  color: var(--brand-navy);
  font-size: 26px;
  line-height: 1;
}

.move-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  color: var(--brand-navy);
  background: var(--brand-blue-soft);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.move-badge.new-listing {
  color: #0f5d49;
  background: #dff3ec;
}

.move-badge.price-change {
  color: #8b4a00;
  background: #fff0d7;
}

.move-badge.went-pending {
  color: #142141;
  background: #d8e0f7;
}

.move-badge.closed {
  color: #ffffff;
  background: #142141;
}

.table-link {
  color: var(--brand-navy);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chart-panel {
  padding: 16px;
  overflow: visible;
}

.panel-title {
  margin-bottom: 14px;
}

.panel-title h4 {
  margin: 0;
  font-size: 15px;
}

.bar-chart {
  height: 260px;
  display: flex;
  align-items: end;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.bar {
  flex: 1;
  min-width: 12px;
  position: relative;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--bar-top), var(--bar-bottom));
}

.bar::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 11px;
}

.bar:hover::before {
  content: attr(data-value);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  white-space: nowrap;
  border-radius: 5px;
  padding: 5px 7px;
  color: #fff;
  background: var(--ink);
  font-size: 12px;
}

.line-chart {
  min-height: 260px;
  overflow: visible;
}

.line-chart svg {
  display: block;
  width: 100%;
  height: 222px;
  overflow: visible;
}

.line-chart text {
  fill: var(--muted);
  font-size: 10px;
}

.trend-chart .legend {
  margin-top: 8px;
}

.benchmark-bars {
  position: relative;
  height: 222px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
  align-items: stretch;
  gap: 9px;
  padding-bottom: 20px;
  box-sizing: border-box;
}

.benchmark-bars::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 1px;
  background: var(--line);
}

.benchmark-month {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 18px;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}

.benchmark-pair {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 4px;
}

.benchmark-pair i {
  position: relative;
  width: 12px;
  min-height: 0;
  border-radius: 4px 4px 0 0;
  cursor: help;
}

.benchmark-pair i span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  display: none;
  transform: translateX(-50%);
  white-space: nowrap;
  border-radius: 5px;
  padding: 5px 7px;
  color: #fff;
  background: var(--ink);
  font-size: 12px;
  z-index: 20;
  pointer-events: none;
}

.benchmark-pair i:hover span,
.benchmark-pair i:focus span {
  display: block;
}

.benchmark-pair .prior,
.legend-prior {
  background: var(--brand-blue-soft);
}

.benchmark-pair .current,
.legend-current {
  background: var(--brand-amber);
}

.benchmark-month em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  align-self: end;
}

.svg-point {
  cursor: help;
  outline: none;
}

.svg-point circle:last-child {
  stroke: var(--paper);
  stroke-width: 1.5;
}

.svg-point.prior-point circle:last-child {
  fill: #8a91a3;
}

.svg-point.current-point circle:last-child {
  fill: #142141;
}

.svg-point:hover circle:last-child,
.svg-point:focus circle:last-child {
  r: 7;
  stroke-width: 2;
}

.chart-tooltip {
  position: fixed;
  z-index: 2000;
  display: none;
  max-width: 240px;
  border: 1px solid rgba(216, 224, 247, 0.24);
  border-radius: 6px;
  padding: 7px 9px;
  color: #fff;
  background: rgba(20, 33, 65, 0.96);
  box-shadow: 0 14px 30px rgba(20, 33, 65, 0.22);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  pointer-events: none;
}

.chart-tooltip.visible {
  display: block;
}

.info-tip {
  display: inline-grid !important;
  place-items: center;
  width: 15px !important;
  height: 15px !important;
  margin-left: 6px;
  transform: translateY(-1px);
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--blue);
  background: rgba(216, 224, 247, 0.32);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-transform: none !important;
  cursor: help;
  vertical-align: middle;
}

.section-heading .info-tip,
.panel-title .info-tip,
.card-topline .info-tip,
.macro-card-head .info-tip,
.market-read-item .info-tip,
.banker-card .info-tip,
th .info-tip {
  color: var(--blue);
  font-size: 10px;
  line-height: 1;
}

.chart-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.table-panel {
  padding: 16px;
}

.signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.signal-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.signal-card > div {
  min-width: 0;
}

.score-ring {
  width: 74px;
  height: 74px;
  border: 7px solid var(--brand-blue-soft);
  border-top-color: var(--brand-amber);
  border-right-color: var(--blue);
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
}

.score-ring strong {
  display: block;
  font-size: 23px;
  line-height: 1;
}

.score-ring span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.signal-head,
.card-signal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.signal-head h4 {
  margin: 0;
  font-size: 16px;
}

.signal-card p {
  margin: 6px 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.signal-badge,
.outlook-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 9px;
  color: #fff;
  background: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.outlook-badge {
  margin-top: 6px;
  color: var(--ink);
  background: var(--soft);
}

.signal-badge:hover::after,
.signal-badge:focus-visible::after,
.outlook-badge:hover::after,
.outlook-badge:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 10;
  width: max-content;
  max-width: 260px;
  border-radius: 6px;
  padding: 8px 10px;
  color: #fff;
  background: var(--brand-navy);
  box-shadow: 0 12px 30px rgba(20, 33, 65, 0.22);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
}

.signal-badge:hover::before,
.signal-badge:focus-visible::before,
.outlook-badge:hover::before,
.outlook-badge:focus-visible::before {
  content: "";
  position: absolute;
  right: 14px;
  bottom: calc(100% + 2px);
  z-index: 11;
  border: 6px solid transparent;
  border-top-color: var(--brand-navy);
}

.signal-badge:hover::before,
.signal-badge:hover::after,
.signal-badge:focus-visible::before,
.signal-badge:focus-visible::after,
.outlook-badge:hover::before,
.outlook-badge:hover::after,
.outlook-badge:focus-visible::before,
.outlook-badge:focus-visible::after {
  display: none;
}

.signal-badge.on-a-run {
  background: var(--green);
}

.signal-badge.rising-star,
.signal-badge.early-momentum {
  background: var(--blue);
}

.signal-badge.two-way-threat {
  color: var(--brand-navy);
  background: var(--brand-blue-soft);
}

.signal-badge.fast-mover {
  background: var(--gold);
}

.signal-badge.listing-heavy {
  background: #7c3aed;
}

.signal-badge.buyer-magnet {
  background: #be185d;
}

.signal-badge.blue-chip {
  background: var(--brand-navy);
}

.outlook-badge.bullish {
  color: #0f5132;
  background: #d7f2df;
}

.outlook-badge.early-momentum {
  color: #173f8a;
  background: #dce9ff;
}

.outlook-badge.durable {
  color: var(--brand-navy);
  background: var(--brand-blue-soft);
}

.outlook-badge.efficient {
  color: #7a4a00;
  background: #fff0d6;
}

.outlook-badge.seller-side {
  color: var(--brand-navy);
  background: var(--brand-blue-soft);
}

.outlook-badge.referral-fit {
  color: var(--brand-navy);
  background: #fff0d6;
}

.outlook-badge.established {
  color: #142141;
  background: #e4e8f2;
}

.outlook-badge.watchlist,
.outlook-badge.needs-more-data,
.outlook-badge.stable {
  color: var(--brand-navy);
  background: var(--brand-cream);
}

.spark-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.spark-grid div {
  min-width: 0;
  border-radius: 6px;
  padding: 8px;
  background: var(--soft);
}

.spark-grid span,
.spark-grid small {
  display: block;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 10px;
}

.spark-grid strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1;
}

.mix-label {
  display: inline-block;
  color: var(--brand-navy);
  font-size: 12px;
  font-weight: 900;
}

.spark-grid .mix-label {
  margin-top: 4px;
  line-height: 1.1;
}

.mom-hover {
  position: relative;
  display: grid;
  grid-template-columns: minmax(100px, 1fr) auto;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  outline: none;
}

.mom-hover.compact {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 0;
}

.sparkline {
  width: 100%;
  min-width: 0;
  height: 42px;
  color: var(--brand-navy);
}

body[data-theme="bankerDark"] .sparkline {
  color: var(--brand-amber);
}

.sparkline circle {
  fill: currentColor;
}

.trend-up,
.trend-down,
.trend-flat {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: normal;
}

.trend-up {
  color: #0f5132;
  background: #d7f2df;
}

.trend-down {
  color: #7f1d1d;
  background: #fee2e2;
}

.trend-flat {
  color: var(--brand-navy);
  background: var(--brand-blue-soft);
}

.mom-detail {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 25;
  display: none;
  width: min(520px, 80vw);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 18px 55px rgba(20, 33, 65, 0.24);
}

.mom-popover {
  position: fixed;
  z-index: 1000;
  display: none;
  width: min(520px, calc(100vw - 24px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 18px 55px rgba(20, 33, 65, 0.24);
}

.mom-popover.visible {
  display: block;
}

.mom-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.mom-detail-head strong {
  font-size: 15px;
}

.mom-detail-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.mom-detail-chart {
  height: 150px;
  display: grid;
  grid-template-columns: repeat(12, minmax(18px, 1fr));
  align-items: end;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 21px;
}

.mom-month {
  position: relative;
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
}

.mom-bars {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
}

.mom-bars i {
  width: 9px;
  border-radius: 4px 4px 0 0;
}

.side-bar {
  background: var(--brand-navy);
}

.vol-bar {
  background: var(--brand-amber);
}

body[data-theme="bankerDark"] .side-bar {
  background: var(--brand-blue-soft);
}

.mom-month > span {
  position: absolute;
  bottom: -19px;
  color: var(--muted);
  font-size: 10px;
}

.mom-detail-rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
  margin-top: 12px;
}

.mom-detail-rows div {
  display: grid;
  grid-template-columns: 58px 1fr 58px 70px;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}

.mom-detail-rows strong,
.mom-detail-rows em,
.mom-detail-rows small {
  font-style: normal;
  font-size: 11px;
}

.mom-detail-rows strong {
  color: var(--ink);
}

.signal-table-panel {
  margin-top: 0;
}

.context-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.context-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.context-card span,
.context-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.context-card strong {
  display: block;
  margin: 9px 0 5px;
  font-size: 25px;
  line-height: 1;
}

.context-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.context-subhead {
  margin-top: 0;
}

.macro-section {
  margin-top: 22px;
  border: 1px solid #c8d1e2;
  border-radius: 8px;
  background: #eef3fb;
  padding: 16px;
}

.macro-section .section-heading {
  margin-bottom: 14px;
  border-bottom: 1px solid #c8d1e2;
  padding-bottom: 12px;
}

.macro-section .section-heading h3 {
  color: #142141;
}

.macro-section .section-heading span {
  color: #4b5b78;
}

.macro-explainer {
  max-width: 1080px;
  margin: 0 0 16px;
  color: #34415c;
  font-size: 14px;
  line-height: 1.55;
}

.macro-grid {
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 0;
}

.macro-card {
  display: flex;
  min-height: 350px;
  flex-direction: column;
  border-color: #b8c4d8;
  background: #ffffff;
  box-shadow: none;
  overflow: hidden;
}

.macro-card strong {
  margin-top: 12px;
  color: #1f2937;
  font-size: 29px;
  letter-spacing: 0;
}

.macro-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.macro-card-corner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.macro-card-head small,
.macro-card-corner small {
  white-space: nowrap;
}

.macro-card .card-icon {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-color: #ffbe6e;
  color: #ffffff;
  background: #2563a9;
  box-shadow: 0 7px 16px rgba(37, 99, 169, .18);
}

.macro-card .card-icon svg {
  width: 21px;
  height: 21px;
}

.macro-card-trend {
  box-sizing: border-box;
  margin-top: 16px;
  min-height: 190px;
  border: 1px solid #d9dee8;
  background: #ffffff;
  padding: 8px 8px 2px;
}

.macro-card-trend svg {
  display: block;
  width: 100%;
  height: 176px;
  overflow: visible;
}

.macro-card-trend text {
  fill: #606977;
  font-size: 11px;
  font-weight: 600;
}

.fred-grid-line {
  stroke: #e5e7eb;
  stroke-width: 1;
}

.fred-axis {
  stroke: #9ca3af;
  stroke-width: 1;
}

.fred-series-line {
  stroke: #2563a9;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.macro-point circle:last-child {
  fill: #2563a9;
  stroke: #ffffff;
  stroke-width: 1.5;
}

.macro-source {
  margin-top: auto;
  border-top: 1px solid #d9dee8;
  padding-top: 9px;
  color: #606977;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.mortgage-history-card {
  margin-top: 16px;
  border: 1px solid #b8c4d8;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px;
}

.mortgage-history-copy {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.macro-eyebrow {
  display: block;
  color: #606977;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.mortgage-history-card h4 {
  margin: 4px 0 0;
  color: #142141;
  font-size: 24px;
}

.mortgage-history-card p {
  max-width: 980px;
  margin: 12px 0 16px;
  color: #34415c;
  font-size: 14px;
  line-height: 1.55;
}

.mortgage-history-stat {
  text-align: right;
}

.mortgage-history-stat strong {
  display: block;
  color: #1f2937;
  font-size: 34px;
  line-height: 1;
}

.mortgage-history-stat small {
  display: block;
  margin-top: 5px;
  color: #606977;
  font-size: 12px;
  font-weight: 700;
}

.mortgage-history-chart {
  box-sizing: border-box;
  border: 1px solid #d9dee8;
  background: #ffffff;
  padding: 10px;
}

.mortgage-history-chart svg {
  display: block;
  width: 100%;
  height: 350px;
}

.mortgage-history-chart text {
  fill: #606977;
  font-size: 12px;
  font-weight: 600;
}

.mortgage-history-line {
  stroke: #2563a9;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inflation-history-line {
  stroke: #b45309;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.treasury-history-line {
  stroke: #8a91a3;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cost-waiting-line {
  stroke: #2563a9;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cost-waiting-card {
  border-color: #b8c4d8;
}

.history-guide-line {
  stroke: #142141;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: .7;
}

.history-guide-dot {
  fill: #ffbe6e;
  stroke: #142141;
  stroke-width: 2;
}

.history-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 8px;
  color: #34415c;
  font-size: 12px;
  font-weight: 800;
}

.history-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.history-legend i {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 999px;
}

.mortgage-swatch {
  background: #2563a9;
}

.inflation-swatch {
  background: #b45309;
}

.treasury-swatch {
  background: #8a91a3;
}

.mortgage-history-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 10px;
  color: #606977;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.macro-latest {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.macro-latest li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 7px;
  color: var(--muted);
  font-size: 12px;
}

.macro-latest strong {
  color: var(--ink);
}

.market-read-panel {
  display: flex;
  flex-direction: column;
}

.market-read-list {
  display: grid;
  gap: 9px;
}

.market-read-item {
  border-left: 3px solid var(--brand-amber);
  padding: 4px 0 4px 10px;
}

.market-read-item span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.market-read-item strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 15px;
}

.market-read-item p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1040px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: #f8faf8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.sort-header {
  display: inline-block;
  width: auto;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: inherit;
  text-transform: inherit;
  cursor: pointer;
}

th.num .sort-header {
  margin-left: auto;
}

.sort-header:hover,
.sort-header:focus-visible {
  color: var(--brand-navy);
}

.sort-indicator {
  display: inline-block;
  margin-left: 5px;
  color: var(--brand-amber);
  font-size: 10px;
  line-height: 1;
}

tbody tr:hover {
  background: #f6fbfa;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  background: var(--paper);
}

.segmented button {
  min-height: 32px;
  border-radius: 6px;
  padding: 0 10px;
  color: var(--muted);
  background: transparent;
}

.segmented button.active {
  color: var(--active-nav-text);
  background: var(--active-nav);
}

.agent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}

.agent-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.agent-card h4 {
  margin-bottom: 5px;
  font-size: 16px;
}

.agent-card p {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.card-signal {
  margin-bottom: 10px;
}

.card-signal strong {
  font-size: 22px;
}

.agent-trend {
  grid-template-columns: 1fr auto;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.mini-stat {
  border-radius: 6px;
  padding: 9px;
  background: var(--soft);
}

.mini-stat span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.mini-stat strong {
  display: block;
  margin-top: 5px;
  font-size: 15px;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chip {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--brand-navy);
  background: #fff0d6;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
  }

  .sidebar-brand-link {
    margin-top: 2px;
  }

  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .banker-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .chart-grid,
  .signal-grid,
  .context-grid,
  .moves-summary,
  .market-direction-strip,
  .agent-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  main {
    padding: 16px;
  }

  .topbar,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .banker-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .price-band-row {
    grid-template-columns: 1fr;
  }

  h2 {
    font-size: 24px;
  }
}