:root {
  --ink: #1f2a2f;
  --muted: #6e747a;
  --sand: #f6f5f2;
  --clay: #efe7dc;
  --cream: #ffffff;
  --sun: #d8b273;
  --sage: #3f6b5c;
  --sea: #2f5561;
  --brick: #b23a2b;
  --card: #ffffff;
  --border: #e2ddd4;
  --shadow: 0 14px 28px rgba(16, 22, 26, 0.08);
}

:root[data-theme="dark"] {
  --ink: #e9edee;
  --muted: #98a1a7;
  --sand: #13181b;
  --clay: #1c2327;
  --cream: #1d2429;
  --sun: #d8b273;
  --sage: #82c8a3;
  --sea: #7fb3c2;
  --brick: #e57c6e;
  --card: #1d2429;
  --border: #2c343a;
  --shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
  --tab-hover-bg: rgba(229, 124, 110, 0.18);
  --tab-focus-outline: rgba(229, 124, 110, 0.5);
  --active-tab-fg: #1d2429;
  --toggle-hover-bg: rgba(229, 124, 110, 0.18);
  --toggle-icon-color: #e9edee;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background: var(--sand);
  background-image: linear-gradient(rgba(30, 27, 22, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 27, 22, 0.03) 1px, transparent 1px);
  background-size: 52px 52px;
  min-height: 100vh;
}

[data-animate] {
  opacity: 0;
  transform: translateY(14px);
}

body.ready [data-animate] {
  animation: fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.glow {
  position: fixed;
  inset: -20% -10% auto auto;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, rgba(178, 58, 43, 0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hero {
  position: relative;
  padding: 2.8rem 6vw 2.4rem;
  max-width: 1200px;
  margin: 2.5rem auto 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  z-index: 1;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brick);
  border-radius: 22px 22px 0 0;
}

.hero-strip {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.hero-tags {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.source-tabs {
  display: flex;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--card);
}

.source-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0.55rem 1.1rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.source-tab:hover {
  background: rgba(178, 58, 43, 0.06);
}

.source-tab.active {
  background: var(--brick);
  color: #fff;
  font-weight: 600;
}

.source-tab:focus-visible {
  outline: 2px solid rgba(178, 58, 43, 0.4);
  outline-offset: -2px;
}

.theme-toggle {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 12px;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--clay);
}

.theme-toggle:focus-visible {
  outline: 2px solid rgba(178, 58, 43, 0.4);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.theme-toggle .icon-moon {
  display: none;
}

.theme-toggle[data-theme="dark"] .icon-sun {
  display: none;
}

.theme-toggle[data-theme="dark"] .icon-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  .theme-toggle .icon-sun {
    display: none;
  }
  .theme-toggle .icon-moon {
    display: block;
  }
  :root:not([data-theme]) {
    --ink: #e9edee;
    --muted: #98a1a7;
    --sand: #13181b;
    --clay: #1c2327;
    --cream: #1d2429;
    --sun: #d8b273;
    --sage: #82c8a3;
    --sea: #7fb3c2;
    --brick: #e57c6e;
    --card: #1d2429;
    --border: #2c343a;
    --shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
  }
}

.source-note {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.tag {
  display: inline-flex;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.tag.mls {
  background: rgba(178, 58, 43, 0.1);
  border-color: rgba(178, 58, 43, 0.4);
  color: var(--brick);
  font-weight: 600;
}

h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  margin: 0 0 1rem;
}

.hero-subtitle {
  font-size: 1.05rem;
  max-width: 36rem;
  color: var(--muted);
  margin-bottom: 1.8rem;
}

.hero-remark {
  margin: -1rem 0 1.8rem;
  padding-left: 0.9rem;
  border-left: 3px solid rgba(178, 58, 43, 0.4);
  color: var(--muted);
  font-size: 0.92rem;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

main {
  padding: 0 6vw 4rem;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 2.75rem;
}

.panel {
  background: transparent;
  position: relative;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

.panel:first-of-type {
  border-top: none;
  padding-top: 0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.panel-header h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0;
}

.panel-subtitle {
  max-width: 28rem;
  color: var(--muted);
  margin: 0;
}

.grid {
  display: grid;
  gap: 1.2rem;
}

.grid.two {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
  background: var(--card);
  border-radius: 24px;
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.card h3 {
  font-family: "Playfair Display", serif;
  margin: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* === Source provenance badges =====================================
   Small uppercase pill that appears next to a panel header or
   card title to disclose where the underlying data came from.
   OFFICIAL      = Interior REALTORS monthly benchmark
   REALTOR.CA    = Realtor.ca scrape (active + event history)
   RE/MAX        = RE/MAX active inventory
   COMBINED      = Realtor.ca + RE/MAX, possibly with Realtor.ca
                   market-flow indicators layered on top.
   Cards inherit the panel's badge by default; cards whose data
   source differs from their panel get an explicit override badge.
   ================================================================ */
.source-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--cream);
  color: var(--ink);
  cursor: help;
}

.source-badge.official {
  background: rgba(47, 85, 97, 0.12);
  border-color: rgba(47, 85, 97, 0.45);
  color: var(--sea);
}

.source-badge.realtorca {
  background: rgba(178, 58, 43, 0.10);
  border-color: rgba(178, 58, 43, 0.40);
  color: var(--brick);
}

.source-badge.remax {
  background: rgba(64, 91, 168, 0.10);
  border-color: rgba(64, 91, 168, 0.40);
  color: #405ba8;
}

.source-badge.combined {
  background: rgba(122, 106, 83, 0.14);
  border-color: rgba(122, 106, 83, 0.45);
  color: #7a6a53;
}

:root[data-theme="dark"] .source-badge.remax {
  background: rgba(120, 145, 220, 0.14);
  border-color: rgba(120, 145, 220, 0.45);
  color: #9bb1e8;
}

:root[data-theme="dark"] .source-badge.combined {
  background: rgba(190, 170, 140, 0.14);
  border-color: rgba(190, 170, 140, 0.45);
  color: #c8b89a;
}

:root[data-theme="dark"] .methodology-note {
  border-left-color: rgba(229, 124, 110, 0.45);
  background: rgba(229, 124, 110, 0.06);
}

.card-badge {
  font-size: 0.62rem;
  padding: 0.12rem 0.45rem;
}

.official-group {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--border);
}

.official-group-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.official-group-header h3 {
  font-family: "Playfair Display", serif;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.methodology-note {
  margin: 0 0 1rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.82rem;
  color: var(--muted);
  border-left: 3px solid rgba(178, 58, 43, 0.35);
  background: rgba(178, 58, 43, 0.04);
  border-radius: 0 8px 8px 0;
}

.bar-list {
  display: grid;
  gap: 0.75rem;
}

.bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
}

.bar-label {
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
}

.bar-track {
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(47, 85, 97, 0.12);
  overflow: hidden;
  grid-column: 1 / -1;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sea), var(--sage));
}

.metric {
  background: rgba(226, 221, 212, 0.35);
  border-radius: 18px;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.metric .value {
  font-family: "DM Sans", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
}

.metric .label {
  font-size: 0.9rem;
  color: var(--muted);
}

/* Lead metric: the headline number of its card (sale-to-list median). */
.metric.lead .value {
  font-size: 2.5rem;
}

.metric-grid {
  display: grid;
  gap: 0.75rem;
}

.official-stats {
  margin-top: 1rem;
  border-top: 1px solid rgba(43, 50, 65, 0.12);
  padding-top: 1rem;
}

.official-stats[hidden] {
  display: none;
}

.official-stats-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.official-stats-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}

.official-stats-meta {
  font-size: 0.8rem;
  color: var(--muted);
}

.official-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.official-stat {
  background: rgba(226, 221, 212, 0.35);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.official-stat .value {
  font-family: "DM Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
}

.official-stat .label {
  font-size: 0.85rem;
  color: var(--muted);
}

.official-stat .delta {
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  gap: 0.75rem;
}

.official-stat .delta .up {
  color: #2e7d32;
}

.official-stat .delta .down {
  color: #c62828;
}

.series-list {
  margin-top: 1rem;
  display: grid;
  gap: 0.4rem;
  max-height: 210px;
  overflow: auto;
  padding-right: 0.5rem;
}

.series-item {
  display: flex;
  justify-content: space-between;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  color: var(--muted);
}

.chart-wrapper {
  position: relative;
  width: 100%;
  height: 160px;
}

.chart {
  width: 100% !important;
  height: 100% !important;
}

.legend {
  display: flex;
  gap: 1rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.8rem;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.4rem;
}

.dot.sold {
  background: var(--brick);
}

.dot.active {
  background: var(--sea);
}

.band-grid {
  display: grid;
  gap: 0.75rem;
}

.type-metrics {
  display: grid;
  gap: 0.6rem;
}

.type-row {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.8fr;
  gap: 0.75rem;
  align-items: baseline;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
}

.type-row.header {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  color: var(--muted);
}

.type-row span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.band-item {
  display: flex;
  justify-content: space-between;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
}

/* === Generic table ================================================
   Single-row grid that hosts one header row and N data rows.
   Consumers pick a column-count variant (cols-4 / cols-5 / cols-6)
   so that each table's header + cells line up under the same
   template. Without the variant the global 5-column template would
   leak into 4- and 6-column tables and break alignment.
   ================================================================ */
.table {
  display: grid;
  gap: 0.4rem;
}

.table-row {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.6fr 0.6fr 0.8fr;
  gap: 0.6rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(30, 27, 22, 0.06);
}

.table-row.cols-4 {
  grid-template-columns: 1.2fr 0.7fr 0.7fr 0.6fr;
}

.table-row.cols-5 {
  grid-template-columns: 1.2fr 0.9fr 0.6fr 0.6fr 0.8fr;
}

.table-row.cols-6 {
  grid-template-columns: 1.1fr 0.55fr 0.55fr 0.7fr 0.7fr 0.7fr;
}

/* 6-col tables (Price Cuts by City, Buyer Leverage by Price Band)
   need more horizontal room than a half-grid card allows. .wide
   opts them into the full panel width (same trick as .xtab-card). */
.card.wide {
  grid-column: 1 / -1;
}

.card.wide .table-row.cols-6 {
  grid-template-columns: 1.1fr 0.9fr 0.7fr 0.85fr 0.85fr 0.85fr;
}

/* Wide cards hold 6-col tables; let the card itself scroll horizontally
   on narrow viewports instead of crushing columns. */
.card.wide .table {
  overflow-x: auto;
}

.card.wide .table-row.cols-6 {
  min-width: 38rem;
}

.table-row.cols-9 {
  grid-template-columns: 1.1fr 1fr 0.6fr 0.6fr 0.65fr 0.5fr 0.5fr 0.6fr 0.6fr;
}

/* Discount table (9 cols) scrolls like the negotiation table. */
.tabwide .table-row {
  min-width: 52rem;
}

.table-row.header {
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid rgba(30, 27, 22, 0.2);
}

/* Right-align numeric columns 2+; keep the first column (label)
   left-aligned. Done with sibling-index selectors so we don't have
   to add a class to every cell. */
.table-row > span:nth-child(n+2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table-row > span:first-child {
  text-align: left;
}

/* Cross-tab anchor card: span the full Listings Now grid width on
   desktop. Auto-placement still works for the smaller cards above. */
.xtab-card {
  grid-column: 1 / -1;
}

.xtab-toolbar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.75rem;
}

.xtab-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  color: var(--muted);
}

.xtab-select {
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  color: var(--ink);
}

.xtab-row-count {
  font-size: 0.78rem;
  margin-left: auto;
}

.xtab-meta {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
}

.xtab-meta-secondary {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
}

/* Cross-tab table: 9 columns, sticky header. The wrap is the
   horizontal-scroll container for narrow screens only — vertical
   scroll is intentionally disabled so the full filtered city list
   displays naturally on desktop. Column widths chosen so the most
   important columns (City, Active, Cut rate, Turnover) get enough
   space; numeric columns are right-aligned via the column's
   text-align where useful. */
.xtab-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(30, 27, 22, 0.08);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.4);
}

.xtab-table {
  display: grid;
  gap: 0;
  min-width: 56rem;
}

.xtab-table-row {
  display: grid;
  grid-template-columns:
    minmax(7rem, 1.4fr)   /* City               */
    minmax(3.5rem, 0.6fr) /* Active             */
    minmax(5rem, 0.9fr)   /* Median ask         */
    minmax(4rem, 0.8fr)   /* Median DOM         */
    minmax(4rem, 0.7fr)   /* Cuts (n/elig)      */
    minmax(4rem, 0.7fr)   /* Cut rate           */
    minmax(4rem, 0.7fr)   /* First obs (30d)    */
    minmax(4rem, 0.7fr)   /* Removed (30d)      */
    minmax(4rem, 0.7fr);  /* Turnover           */
  gap: 0.6rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid rgba(30, 27, 22, 0.06);
  align-items: center;
  cursor: pointer;
  transition: background 0.12s ease;
}

.xtab-table-row.header {
  cursor: default;
}

.xtab-table-row:not(.header) {
  cursor: pointer;
}

.xtab-table-row:not(.header):hover > span:first-child {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.xtab-table-row:hover:not(.header) {
  background: rgba(127, 179, 194, 0.08);
}

.xtab-table-row.selected {
  background: rgba(127, 179, 194, 0.16);
  border-left: 3px solid var(--sea);
  padding-left: calc(0.75rem - 3px);
}

.xtab-table-row > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xtab-table-row > span:nth-child(n+2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.xtab-table-row > span:first-child {
  text-align: left;
}

.xtab-table-row.header {
  font-weight: 600;
  color: var(--muted);
  background: var(--card, #ffffff);
  border-bottom: 1px solid rgba(30, 27, 22, 0.2);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.xtab-table-row.small-sample {
  opacity: 0.7;
}

/* Dynamic insight line below the cross-tab table */
.xtab-cut-insight {
  margin: 0.55rem 0 0.35rem 0;
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink);
  background: rgba(127, 179, 194, 0.08);
  border-left: 3px solid var(--sea);
  border-radius: 0 4px 4px 0;
}

.xtab-cut-insight:empty {
  display: none;
}

/* "Empty intersection" placeholder inside the wrap. */
.xtab-empty {
  padding: 0.75rem 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Localized Seller Pricing card table in Pricing & Negotiation */
/* Negotiation table (6 cols) is wider than a half-grid card: scroll
   the table element itself (.card clips overflow) instead of letting
   columns crush. */
#negotiation-table {
  overflow-x: auto;
}

#negotiation-table .table-row {
  min-width: 34rem;
}

/* Driven card: follows the cross-tab row selection. Same sea accent
   as the selected row so the linkage reads without extra chrome. */
#seller-pricing-card {
  border-left: 3px solid var(--sea);
}

.seller-pricing-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.25rem;
}

.seller-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(30, 27, 22, 0.06);
  font-size: 0.85rem;
}

.seller-pricing-row:last-child {
  border-bottom: none;
}

.seller-pricing-label {
  color: var(--muted);
}

.seller-pricing-val {
  font-weight: 500;
  text-align: right;
  color: var(--ink);
}

.seller-pricing-sub {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 400;
  margin-left: 0.35rem;
  font-style: italic;
}

.metric-stack {
  display: grid;
  gap: 0.8rem;
}

.tom-by-type {
  display: grid;
  gap: 0.65rem;
  font-family: "DM Sans", sans-serif;
}

.tom-by-type .row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.6rem;
  align-items: center;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}

.tom-by-type .row:last-child {
  border-bottom: none;
}

.tom-by-type .row .label {
  font-weight: 500;
  color: var(--muted);
}

.tom-by-type .row .days {
  font-weight: 600;
}

.tom-by-type .row .count {
  color: var(--muted);
  font-size: 0.85rem;
}

.tom-by-type .group-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.4rem;
}

.tom-by-type .group-label:first-child {
  margin-top: 0;
}

.diff {
  display: grid;
  gap: 0.5rem;
  font-family: "DM Sans", sans-serif;
}

.muted {
  color: var(--muted);
}

.footer {
  padding: 2.5rem 6vw 3.5rem;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: "DM Sans", sans-serif;
  color: var(--muted);
}

.footer-right {
  display: flex;
  gap: 0.5rem;
}

.area-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0;
  font-family: "DM Sans", sans-serif;
}

.area-filter-bar label {
  font-size: 0.85rem;
  color: var(--muted);
}

.area-filter-bar select {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 2rem 0.4rem 0.9rem;
  background: var(--card);
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  color: var(--ink);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.area-filter-bar select:focus {
  outline: 2px solid rgba(47, 85, 97, 0.25);
  outline-offset: 2px;
}

.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--sage);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.export-btn svg {
  width: 16px;
  height: 16px;
}

.export-btn:hover {
  background: var(--clay);
  border-color: var(--sage);
}

.export-btn:focus-visible {
  outline: 2px solid rgba(63, 107, 92, 0.4);
  outline-offset: 2px;
}

.export-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 900px) {
  .hero-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .hero-stats {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .area-filter-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .source-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .source-tabs::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 2.2rem 6vw 1.8rem;
    margin: 1.5rem auto 1rem;
  }

  .hero h1 {
    font-size: 1.9rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  main {
    padding: 0 5vw 3rem;
    gap: 2rem;
  }

  .card {
    padding: 1.1rem 1.2rem;
  }

  .hero-stats {
    grid-template-columns: 1fr 1fr;
  }

  .area-filter-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0;
  }

  .area-filter-bar select {
    width: 100%;
    max-width: 280px;
  }

  .source-tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .source-tabs::-webkit-scrollbar {
    display: none;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 2rem 6vw;
  }

  .xtab-table {
    /* Reduce horizontal wrap on phones; scroll instead. */
    min-width: 48rem;
  }
}

/* Absorption/TOM rows where the ratio denominator is tiny (n<5). */
.table-row.small-sample,
.row.small-sample {
  opacity: 0.7;
}