/* ════════════════════════════════════════════════════════════════════════════
   PARCELYTICS — DESIGN SYSTEM
   Verified Travis County, TX property-tax intelligence.

   Positioning: investment-grade. Reference craft: Stripe / Webflow.
   Direction: confident, high-contrast, restrained, precise — NOT soft pastel.

   One source of truth for color, type, spacing, radius, elevation, motion.
   Two applications of one system:
     • Front door (landing/about) — spacious, dark hero, full marketing craft.
     • App (property/snapshot/rates/compare/parcels) — same tokens, kept dense.

   Data-integrity is the brand: confidence pills, provenance, "Not Available",
   tabular-nums and estimate treatments are elevated here, never removed.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Type families ──────────────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* ── Type scale (decisive ratio: 12/13/14/16/20/28/40/56) ───────────────── */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   20px;
  --fs-xl:   28px;
  --fs-2xl:  40px;
  --fs-3xl:  56px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;   /* hero display */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  /* Tracking */
  --track-display: -0.03em;   /* large headlines */
  --track-tight:   -0.018em;  /* section heads */
  --track-caps:    0.07em;    /* small-caps labels */

  /* ── Spacing scale (8px base: 4/8/12/16/24/32/48/64/96) ─────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ── Surfaces & ink (neutral canvas, high-contrast ink) ─────────────────── */
  --ink:        #0B1220;   /* near-black navy — headlines, dark sections, hero */
  --ink-2:      #10182A;   /* slightly lifted ink for layered dark surfaces */

  --bg:         #F7F8FA;   /* app canvas */
  --surface:    #FFFFFF;   /* cards, tables */
  --surface-2:  #F4F5F8;   /* subtle fill: table heads, chips, footers */
  --surface-3:  #ECEEF3;   /* deeper fill: tracks, hover wells */

  --border:        #E5E7EE; /* hairline */
  --border-strong: #CBD0DC; /* dividers, table rules, input borders */

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --text:   #0B1220;   /* primary */
  --text-2: #434B5E;   /* secondary / body */
  --text-3: #6B7280;   /* muted / labels */
  --text-on-dark:    #FFFFFF;
  --text-on-dark-2:  rgba(255,255,255,0.70);
  --text-on-dark-3:  rgba(255,255,255,0.46);

  /* ── Accent — single confident indigo, reserved for CTA + signal ────────── */
  --accent:        #4263EB;
  --accent-hover:  #3550C8;
  --accent-active: #2C44AB;
  --accent-soft:   #EEF1FE;   /* faint tint — replaces the old pale-blue field */
  --accent-border: #C7D1FA;
  --accent-ring:   rgba(66, 99, 235, 0.30);
  --accent-dark:   #3550C8;   /* legacy alias used by some templates */
  --accent-light:  #EEF1FE;   /* legacy alias — now a faint tint, not a field */
  /* Dark-surface companions (July 2026, per Diego — Homepage hero: "keep it
     dark, make it deliberate"): the hero/trust-panel dark sections
     (Home + About only) used these exact values already, just as bare
     hex/rgba literals scattered across the FRONT DOOR block below instead
     of declared tokens — coincidentally correct, not traceably so.
     --accent-rgb is the R,G,B triplet of --accent itself (66,99,235 =
     #4263EB), needed because rgba() can't take alpha on a hex custom
     property directly. --accent-on-dark is --accent lightened for
     legibility against --ink (used identically in both the hero h1's
     ".accent" span and the trust panel's kicker — already the same value
     in both places pre-fix, just not declared once). --success-on-dark is
     the dark-surface variant of --verified-text/--down (both #067647) —
     that value reads muddy against --ink, so the hero/trust-panel's
     "live/verified" dots used a brighter mint green instead; also already
     identical in both of its two call sites pre-fix. Declaring all three
     here makes that reuse explicit instead of incidental, per the brief. */
  --accent-rgb:         66, 99, 235;
  --accent-on-dark:     #93A7FF;
  --success-on-dark:    #32D583;
  --success-on-dark-rgb: 50, 213, 131;

  /* ── Functional signal set — DATA MEANING ONLY, never decoration ────────── */
  /* In tax context: ↑ value/tax = risk (red), ↓ = relief (green) */
  --up:        #D92D20;  --up-bg:   #FEF3F2;  --up-border:   #FECDCA;
  --down:      #067647;  --down-bg: #ECFDF3;  --down-border: #A6F4C5;

  /* ── Confidence system (signature, branded data-integrity component) ────── */
  --verified-text:   #067647;  --verified-bg:   #ECFDF3;  --verified-border:   #A6F4C5;
  --partial-text:    #B54708;  --partial-bg:    #FFFAEB;  --partial-border:    #FEDF89;
  --estimated-text:  #6938EF;  --estimated-bg:  #F4F1FE;  --estimated-border:  #D9CFFB;
  --preliminary-text:#175CD3;  --preliminary-bg:#EFF6FF;  --preliminary-border:#B2D4FE;
  --na-text:         #98A0AE;

  /* ── Risk callout blocks ────────────────────────────────────────────────── */
  --risk-warn-text:  #B54708; --risk-warn-bg:  #FFFAEB; --risk-warn-border:  #FEDF89;
  --risk-err-text:   #B42318; --risk-err-bg:   #FEF3F2; --risk-err-border:   #FECDCA;
  --risk-info-text:  #175CD3; --risk-info-bg:  #EFF6FF; --risk-info-border:  #B2D4FE;

  /* ── Elevation (restrained 3-step scale) ────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(11, 18, 32, 0.05), 0 1px 1px rgba(11, 18, 32, 0.04);
  --shadow-2: 0 2px 8px rgba(11, 18, 32, 0.06), 0 1px 2px rgba(11, 18, 32, 0.05);
  --shadow-3: 0 12px 32px rgba(11, 18, 32, 0.12), 0 4px 10px rgba(11, 18, 32, 0.06);

  /* ── Motion (subtle, purposeful) ────────────────────────────────────────── */
  --t-fast: 0.12s ease;
  --t:      0.2s cubic-bezier(0.4, 0, 0.2, 1);

  --maxw: 1200px;       /* front-door content width */
  --maxw-app: 1440px;   /* dense app content width */
}

/* ════════════════════════════════════════════════════════════════════════════
   RESET / BASE
   ════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* contain the full-bleed hero's 100vw breakout */
}

::selection { background: var(--accent-ring); color: var(--ink); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* Bootstrap semantic colour overrides → our functional palette */
.text-danger  { color: var(--up)     !important; }
.text-success { color: var(--down)   !important; }
.text-muted   { color: var(--text-3) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  color: var(--text);
  line-height: var(--lh-snug);
}

/* Tabular numerals everywhere data appears */
td, th, .tabnum { font-variant-numeric: tabular-nums; }

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  color: var(--text-2);
}

/* Small-caps utility label (used across app for column/section labels) */
.eyebrow,
.label-caps {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-3);
}

/* ════════════════════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════════════════════ */
main.container {
  max-width: var(--maxw-app);
  padding-top: var(--s-5);
  padding-bottom: var(--s-7);
}

/* Front-door surfaces opt into a narrower, more spacious measure */
main.container.is-frontdoor { max-width: var(--maxw); }

.col-12 .table-responsive,
.col-12 .table { width: 100%; }

/* Generic page header (snapshot, compare, parcels) */
.page-header { margin-bottom: var(--s-4); }
.page-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  color: var(--text);
  line-height: var(--lh-tight);
}

/* ════════════════════════════════════════════════════════════════════════════
   NAVBAR — clean dark top bar, wordmark + clear labels + one primary CTA
   ════════════════════════════════════════════════════════════════════════════ */
.navbar {
  background: var(--surface) !important;       /* light, investment-grade Stripe-style bar */
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-1) !important;
  padding: 0 var(--s-5) !important;
  min-height: 58px;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar-brand {
  gap: 10px;
  display: flex;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
}
/* Uploaded logos in their original colours on the light bar — mark on
   transparency (no chip), two-tone wordmark as supplied. */
.navbar-brand .brand-mark-img { height: 30px; width: auto; display: block; }
.navbar-brand .brand-wordmark-img { height: 19px; width: auto; display: block; }
@media (max-width: 576px) {
  .navbar-brand .brand-mark-img { height: 27px; }
  .navbar-brand .brand-wordmark-img { height: 17px; }
}

.navbar .nav-link {
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  color: var(--text-2) !important;            /* crisp dark link text on light bar */
  padding: 0.4rem 0.75rem !important;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--text) !important;
  background: var(--surface-2);
}
.navbar .nav-link.active { color: var(--accent) !important; font-weight: var(--fw-semibold); }

/* Primary CTA living in the nav — accent reserved for this */
.navbar .nav-cta {
  background: var(--accent);
  color: #fff !important;
  font-weight: var(--fw-semibold);
  padding: 0.42rem 0.95rem !important;
  border-radius: var(--r-sm);
  margin-left: var(--s-2);
  box-shadow: 0 1px 2px rgba(11,18,32,0.12);
  transition: background var(--t-fast), transform var(--t-fast);
}
.navbar .nav-cta:hover { background: var(--accent-hover); color: #fff !important; }
.navbar .nav-cta.active { color: #fff !important; }

/* Mobile collapse toggler — dark icon for the light bar */
.navbar-toggler {
  border-color: var(--border-strong) !important;
  padding: 4px 8px;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--accent-ring) !important; }
.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2310182A' stroke-width='2.2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* On mobile the collapsed menu drops as a light panel */
@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    background: var(--surface);
    border-top: 1px solid var(--border);
    margin: 0 calc(-1 * var(--s-5));
    padding: 8px var(--s-5) 12px;
  }
  .navbar .nav-cta { display: inline-block; margin-left: 0; margin-top: 6px; }
}

/* Sector dropdown — light surface */
.sector-dropdown {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 0 !important;
  min-width: 200px;
  box-shadow: var(--shadow-3) !important;
}
.sector-dropdown .dropdown-item {
  color: var(--text-2) !important;
  font-size: 13px;
  padding: 6px 16px !important;
  transition: background var(--t-fast), color var(--t-fast);
}
.sector-dropdown .dropdown-item:hover,
.sector-dropdown .dropdown-item:focus {
  background: var(--surface-2) !important;
  color: var(--accent) !important;
}
.sector-dropdown .dropdown-divider {
  border-color: var(--border) !important;
  margin: 4px 0 !important;
}
.sector-dropdown .dropdown-header {
  color: var(--text-3) !important;
  font-size: 10px !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--track-caps) !important;
  text-transform: uppercase !important;
  padding: 6px 16px 3px !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   BUTTONS — one primary (accent), one secondary (outline/ghost), one ink
   ════════════════════════════════════════════════════════════════════════════ */
.btn {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  letter-spacing: -0.005em;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

/* Primary = accent */
.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #fff !important;
}

/* Ink button = serious dark action (Estimate, Compare, Search) */
.btn-dark {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
.btn-dark:hover,
.btn-dark:focus {
  background: var(--ink-2) !important;
  border-color: var(--ink-2) !important;
  color: #fff !important;
}

/* Secondary = outline / ghost */
.btn-outline-secondary {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-2) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: var(--surface-2) !important;
  border-color: var(--text-3) !important;
  color: var(--text) !important;
}

/* Big accent CTA used on front door */
.btn-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  padding: 13px 24px;
  border-radius: var(--r-sm);
  border: none;
  box-shadow: 0 1px 2px rgba(11,18,32,0.18);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn-cta:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-2); }

.btn-ghost-light {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  padding: 13px 22px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.22);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.4); }

/* Bootstrap toggle button group (snapshot views, buyer type) */
.btn-check:checked + .btn-outline-secondary {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   KPI HEADLINE CARDS (CoStar-grade)
   ════════════════════════════════════════════════════════════════════════════ */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .kpi-row { grid-template-columns: 1fr 1fr; } }

/* Investor Overview two-year restructure (July 2026, per Diego): 3 cards per
   row (Market Value / Assessed-Taxable Value / Effective Tax Rate), one row
   for 2025 and one for 2026 — a 3-column variant of .kpi-row, which is fixed
   at 4 columns and would otherwise leave a visible empty gap. */
.kpi-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
@media (max-width: 900px) { .kpi-row-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .kpi-row-3 { grid-template-columns: 1fr; } }

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 18px 14px;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.kpi-card:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.kpi-label {
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.kpi-value {
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: var(--fw-bold);
  line-height: 1.05;
  color: var(--text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.kpi-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION HEADERS
   ════════════════════════════════════════════════════════════════════════════ */
.section-hdr {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  color: var(--text);
  margin: var(--s-6) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-hdr .section-hdr-badge {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 2px 7px;
}

/* ════════════════════════════════════════════════════════════════════════════
   OVERVIEW NARRATIVE
   ════════════════════════════════════════════════════════════════════════════ */
.overview-narrative {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-1);
}
.overview-narrative p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
  margin-bottom: 0.65rem;
}
.overview-narrative p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   ANNUAL TRENDS TABLE
   ════════════════════════════════════════════════════════════════════════════ */
.annual-trends-table th,
.annual-trends-table td { font-size: 12px !important; padding: 7px 12px !important; }
.annual-trends-table thead th {
  font-weight: var(--fw-bold);
  color: var(--text-3);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  font-size: 10px !important;
  border-bottom: 1px solid var(--border-strong) !important;
}
.annual-trends-table .trend-row-label { font-weight: var(--fw-semibold); color: var(--text); min-width: 130px; }
.annual-trends-table .trend-peak     { color: var(--up); }
.annual-trends-table .trend-trough   { color: var(--down); }
.annual-trends-table .trend-forecast { color: var(--text-3); font-style: italic; }

/* ════════════════════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════════════════════ */
.card {
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-1) !important;
  background: var(--surface);
}

.card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--r) var(--r) 0 0 !important;
  padding: 11px 18px !important;
  font-size: 11px !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--track-caps) !important;
  text-transform: uppercase !important;
  color: var(--text-2) !important;
}

/* Insight report: accent hairline accent header */
.insight-card { border-color: var(--accent-border) !important; }
.insight-card > .card-header {
  background: var(--accent-soft) !important;
  border-bottom-color: var(--accent-border) !important;
  color: var(--accent-active) !important;
}

.delinquency-card { border-color: var(--risk-err-border) !important; }
.delinquency-card > .card-header {
  background: var(--risk-err-bg) !important;
  border-bottom-color: var(--risk-err-border) !important;
  color: var(--risk-err-text) !important;
}

.card-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r) var(--r) !important;
  padding: 11px 18px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════════════════════
   TABLES — investment-grade craft
   ════════════════════════════════════════════════════════════════════════════ */
.table {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0;
  color: var(--text);
  --bs-table-hover-bg: var(--surface-2);
  --bs-table-striped-bg: transparent;
}

.table thead th {
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border-strong) !important;
  padding: 9px 14px;
  white-space: nowrap;
  background: var(--surface-2) !important;
  vertical-align: middle;
}

/* Override Bootstrap .table-light in thead */
.table-light {
  --bs-table-bg: var(--surface-2) !important;
  --bs-table-color: var(--text-3) !important;
}

.table td,
.table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}

.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:last-child > td,
.table tbody tr:last-child > th { border-bottom: none; }

.table tfoot td,
.table tfoot th {
  border-top: 2px solid var(--border-strong) !important;
  font-weight: var(--fw-semibold);
  background: var(--surface-2);
}

tfoot .combined-rate-row td { font-size: 12px; border-top: 2px solid var(--border-strong); }
tfoot .combined-rate-row td:first-child { padding-top: 11px; }

/* Numeric cells: right-align by convention, lighten the mono weight subtly */
.table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums; }

/* Compare table — soften bootstrap's heavy bordering */
.table-bordered { --bs-border-color: var(--border); }
.compare-table th, .compare-table td { vertical-align: middle; }
.compare-table thead th { background: var(--surface-2); }

/* ════════════════════════════════════════════════════════════════════════════
   CONFIDENCE BADGES — signature data-integrity component
   ════════════════════════════════════════════════════════════════════════════ */
.badge-verified,
.badge-partial,
.badge-estimated,
.badge-preliminary,
.badge-na {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  line-height: 1.5;
  white-space: nowrap;
}
/* Status dot prefix for at-a-glance legibility */
.badge-verified::before,
.badge-partial::before,
.badge-estimated::before,
.badge-preliminary::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0; opacity: 0.85;
}

.badge-verified   { background: var(--verified-bg);   color: var(--verified-text);   border-color: var(--verified-border); }
.badge-partial    { background: var(--partial-bg);    color: var(--partial-text);    border-color: var(--partial-border); }
.badge-estimated  { background: var(--estimated-bg);  color: var(--estimated-text);  border-color: var(--estimated-border); }
.badge-preliminary{ background: var(--preliminary-bg);color: var(--preliminary-text);border-color: var(--preliminary-border); }

.badge-na {
  background: transparent;
  color: var(--na-text);
  border-color: transparent;
  font-style: italic;
  font-weight: var(--fw-regular);
  padding-left: 0;
  padding-right: 0;
}

/* Inline data-anomaly indicator */
.badge-data-anomaly {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px;
  background: var(--partial-bg);
  color: var(--partial-text);
  border: 1px solid var(--partial-border);
  border-radius: var(--r-xs);
  font-size: 9px; font-weight: var(--fw-black); line-height: 1;
  cursor: help; margin-left: 4px; vertical-align: middle; flex-shrink: 0;
}

/* 2026 preliminary callout card */
.preliminary-card { border-color: var(--preliminary-border) !important; }
.preliminary-card > .card-header {
  background: var(--preliminary-bg) !important;
  border-bottom-color: var(--preliminary-border) !important;
  color: var(--preliminary-text) !important;
}

/* Estimates-only label for projection table */
.estimates-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--estimated-bg);
  color: var(--estimated-text);
  border: 1px solid var(--estimated-border);
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  padding: 3px 9px;
}

/* ════════════════════════════════════════════════════════════════════════════
   ENTITY CODE PILLS
   ════════════════════════════════════════════════════════════════════════════ */
.entity-badge {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  font-family: var(--font-mono);
  padding: 1px 7px;
  border-radius: var(--r-xs);
  letter-spacing: 0.01em;
}

/* Delinquent property badge */
.badge-delinquent {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--up);
  color: #fff;
  font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  padding: 2px 10px;
  border-radius: var(--r-pill);
}
.badge-delinquent::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ════════════════════════════════════════════════════════════════════════════
   RISK CALLOUT BLOCKS
   ════════════════════════════════════════════════════════════════════════════ */
.risk-block {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  margin-bottom: 10px;
}
.risk-block:last-child { margin-bottom: 0; }
.risk-block.warn  { background: var(--risk-warn-bg); border-color: var(--risk-warn-border); }
.risk-block.error { background: var(--risk-err-bg);  border-color: var(--risk-err-border); }
.risk-block.info  { background: var(--risk-info-bg); border-color: var(--risk-info-border); }
.risk-block.ok    { background: var(--down-bg);      border-color: var(--down-border); }

.risk-icon {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--fw-black);
  flex-shrink: 0; margin-top: 1px;
}
.warn  .risk-icon { background: #FEC84B; color: #93370D; }
.error .risk-icon { background: var(--up); color: #fff; }
.info  .risk-icon { background: var(--preliminary-border); color: var(--preliminary-text); }
.ok    .risk-icon { background: var(--down-border); color: var(--down); }

.risk-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); margin-bottom: 2px; line-height: 1.35; }
.risk-desc  { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   PROJECTION TABLE — visually distinct from recorded data (3 stacked signals)
   ════════════════════════════════════════════════════════════════════════════ */
.projection-card {
  border-style: dashed !important;
  border-color: var(--estimated-border) !important;
  background: var(--estimated-bg) !important;
}
.projection-card > .card-header {
  border-bottom-style: dashed !important;
  border-bottom-color: var(--estimated-border) !important;
  background: transparent !important;
  color: var(--estimated-text) !important;
}
.projection-row td { color: var(--text-2) !important; font-style: italic; }
.projection-row .proj-year { color: var(--text) !important; font-style: normal; font-weight: var(--fw-semibold); }

/* ════════════════════════════════════════════════════════════════════════════
   NOT-AVAILABLE CELL
   ════════════════════════════════════════════════════════════════════════════ */
.na-cell { color: var(--na-text); font-size: 12px; font-style: italic; }

/* ════════════════════════════════════════════════════════════════════════════
   INFO / SNAPSHOT LABEL-VALUE TABLES
   ════════════════════════════════════════════════════════════════════════════ */
.info-table { width: 100%; border-collapse: collapse; }
.info-table th {
  width: 46%;
  font-size: 12px; font-weight: var(--fw-regular);
  color: var(--text-3);
  padding: 8px 8px 8px 0;
  border: none; border-top: 1px solid var(--border);
  vertical-align: top; white-space: nowrap;
}
.info-table td {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--text);
  padding: 8px 0;
  border: none; border-top: 1px solid var(--border);
  text-align: right; font-variant-numeric: tabular-nums;
}
.info-table tr:first-child th,
.info-table tr:first-child td { border-top: none; }
.info-table .divider-row td,
.info-table .divider-row th { padding: 0; border-top: 2px solid var(--border-strong); }

.primary-value {
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--text) !important;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ── Value-derivation breakdown (How this value is derived) ───────────────── */
.derivation { font-size: var(--fs-sm); }
.derivation .drow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 0;
}
.derivation .drow .lbl { color: var(--text-2); }
.derivation .drow .val {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--text); white-space: nowrap;
}
.derivation .drow.sub { padding: 3px 0; }
.derivation .drow.sub .lbl { color: var(--text-3); padding-left: 12px; font-size: 12px; }
.derivation .drow.sub .val { color: var(--text-3); font-size: 12px; }
/* deductions reduce the taxable base → relief → green, consistent with app semantics */
.derivation .drow.deduct .val { color: var(--down); }
.derivation .drow.total {
  border-top: 1px solid var(--border-strong);
  margin-top: 2px; padding-top: 8px; font-weight: var(--fw-semibold);
}
.derivation .drow.grand { border-top: 2px solid var(--border-strong); }
.derivation .drow.grand .lbl, .derivation .drow.grand .val {
  font-weight: var(--fw-bold); color: var(--text);
}
.derivation-note { font-size: 11px; color: var(--text-3); margin-top: 10px; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════════════
   PROPERTY HEADER
   ════════════════════════════════════════════════════════════════════════════ */
.property-header { margin-bottom: var(--s-5); }
.property-header h2 {
  font-size: var(--fs-xl);
  letter-spacing: var(--track-tight);
  margin-bottom: 6px;
}
.property-meta {
  font-size: var(--fs-sm);
  color: var(--text-3);
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
}
.property-meta .sep { color: var(--border-strong); }

/* Confidence badge cluster — the property-level data-integrity signature */
.confidence-cluster {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;
}

/* ════════════════════════════════════════════════════════════════════════════
   BACK LINK
   ════════════════════════════════════════════════════════════════════════════ */
.back-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-sm); color: var(--text-3);
  text-decoration: none; margin-bottom: var(--s-4);
  transition: color var(--t-fast);
}
.back-link:hover { color: var(--text-2); }

/* ════════════════════════════════════════════════════════════════════════════
   SEARCH (input + button + examples)
   ════════════════════════════════════════════════════════════════════════════ */
.search-input-wrap { display: flex; gap: var(--s-2); align-items: stretch; }
.search-input {
  flex: 1;
  /* Mobile hero overflow fix (July 2026, per Fable review P2-20): a plain
     <input> in a flex row defaults to min-width:auto, which resolves to
     the input's intrinsic content size (UA-dependent, roughly a 20-char
     text box) rather than 0 -- so flex:1 could shrink the search button's
     sibling (search-btn, flex-shrink:0, ~120px+) but couldn't shrink this
     input below its intrinsic width. At the 390px hero viewport Fable
     flagged, hero padding + the button leave less room than that intrinsic
     width, so the input pushed the row (and with it, .hero-search) wider
     than the viewport -- invisible as page scroll only because body already
     has overflow-x:hidden as a blanket guard (see that rule's own comment),
     but the search bar itself was genuinely clipped/cut off on the right,
     not just theoretically overflowing. min-width:0 is the standard fix for
     a flex-child form control refusing to shrink; verified against the
     search-input-wrap flex row (this input + .search-btn, flex-shrink:0)
     with pen-and-paper box math: 390px viewport − 2×var(--s-5) hero
     padding (48px) − .search-btn's ~130px (26px×2 padding + "Search" text)
     − var(--s-2) gap (8px) ≈ 184px left for the input, which is exactly
     the kind of narrow remainder this rule now lets it accept instead of
     forcing overflow. This class is also reused undamaged on the
     styleguide page's own search-input-wrap demo (explicit inline
     max-width:480px there, well clear of any mobile-narrow scenario). */
  min-width: 0;
  height: 52px;
  font-size: var(--fs-md);
  font-family: var(--font-sans);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r);
  padding: 0 18px;
  color: var(--text);
  background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
}
.search-input::placeholder { color: var(--text-3); }
.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.search-input.is-error { border-color: var(--up); }

.search-btn {
  height: 52px; padding: 0 26px;
  font-size: var(--fs-base); font-weight: var(--fw-semibold);
  font-family: var(--font-sans);
  background: var(--ink); color: #fff;
  border: none; border-radius: var(--r);
  cursor: pointer; transition: background var(--t-fast);
  white-space: nowrap; flex-shrink: 0;
}
.search-btn:hover  { background: var(--ink-2); }
.search-btn:active { background: var(--accent); }

.search-error-block {
  background: var(--risk-err-bg);
  border: 1px solid var(--risk-err-border);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: var(--fs-sm);
  color: var(--risk-err-text);
  margin-top: var(--s-2);
  line-height: 1.5;
}

.search-examples { margin-top: var(--s-6); text-align: center; }
.examples-label {
  display: block;
  font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.examples-list { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-2); }
.example-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: var(--fw-medium);
  padding: 6px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-2);
  text-decoration: none; background: var(--surface);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.example-link:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Disambiguation list-group */
.list-group-item { border-color: var(--border) !important; }
.list-group-item a { color: var(--text); }
.list-group-item a:hover { color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════════════
   CHART CANVAS
   ════════════════════════════════════════════════════════════════════════════ */
canvas { max-height: 440px; }

/* ════════════════════════════════════════════════════════════════════════════
   FORM CONTROLS (estimator, filters)
   ════════════════════════════════════════════════════════════════════════════ */
.form-label { font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-2); margin-bottom: 5px; }
.form-control, .form-select {
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  border-color: var(--border-strong);
  color: var(--text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.input-group-text {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.form-check { margin-bottom: 2px; }
.form-check-label { font-size: 12.5px; color: var(--text-2); cursor: pointer; }

/* Bootstrap alert (snapshot empty state) */
.alert-info {
  background: var(--risk-info-bg);
  border-color: var(--risk-info-border);
  color: var(--risk-info-text);
  border-radius: var(--r);
}

/* ════════════════════════════════════════════════════════════════════════════
   TYPEAHEAD WIDGET
   ════════════════════════════════════════════════════════════════════════════ */
.ta-wrap { position: relative; }
.ta-list {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0;
  z-index: 1050;
  min-width: 100%; max-height: 260px; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-3);
  padding: 4px;
}
/* .ta-item (address search box's #spTaList result rows) reuses this same
   ruleset — same single-line flex layout with a label + value pushed to
   opposite ends, same padding/hover treatment as .ta-opt (Filter Parcels
   panel's dropdowns), so both dropdowns on this page look consistent
   instead of .ta-item rendering as a bare unstyled link. */
.ta-opt, .ta-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer; white-space: nowrap;
  color: var(--text);
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: space-between;
}
.ta-opt:hover, .ta-opt.active, .ta-item:hover { background: var(--accent-soft); color: var(--accent-active); }

/* Combobox affordance: a select-style chevron on typeahead-select inputs
   (Search page's County / Neighborhood / Property Type / Use Code filters)
   so they read as real selectors, not plain text fields, even before the
   dropdown is opened. */
.ta-select-input {
  padding-right: 30px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236B7280' d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px 14px;
}

/* Quick Filters (Search page) — one-click preset buttons */
.quick-filter-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.quick-filter-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.quick-filter-btn:disabled { opacity: .5; cursor: default; }
.quick-filter-btn .qf-title { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--text); }
.quick-filter-btn .qf-desc { font-size: 11px; color: var(--text-3); margin-top: 1px; }

/* ════════════════════════════════════════════════════════════════════════════
   POST-ACQUISITION ESTIMATOR — flagship app feature
   ════════════════════════════════════════════════════════════════════════════ */
.estimator-card {
  border: 1px solid var(--accent-border) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-2) !important;
}
.estimator-card > .card-header {
  background: var(--accent-soft) !important;
  border-bottom: 1px solid var(--accent-border) !important;
  color: var(--accent-active) !important;
}
.estimator-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 16px;
  min-width: 140px;
  flex: 0 1 auto;
}
.estimator-chip-label {
  font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--text-3); margin-bottom: 4px;
}
.estimator-chip-val {
  font-family: var(--font-mono);
  font-size: 1.35rem; font-weight: var(--fw-bold);
  color: var(--text); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* Highlight the headline result chip */
.estimator-chip.is-primary { background: var(--accent-soft); border-color: var(--accent-border); }
.estimator-chip.is-primary .estimator-chip-val { color: var(--accent-active); }

/* Homestead-exemption explainer grid */
.hs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
@media (max-width: 640px) { .hs-grid { grid-template-columns: 1fr; } }
.hs-grid > div { display: flex; flex-direction: column; gap: 2px; }
.hs-grid .hs-k {
  font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--text-3);
}
.hs-grid .hs-v { font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

/* ════════════════════════════════════════════════════════════════════════════
   ENTITY HORIZONTAL BAR (Task 4) — styled analysis bar
   ════════════════════════════════════════════════════════════════════════════ */
.entity-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 9px; }
.entity-bar-code { min-width: 76px; color: var(--text-2); font-size: 11px; font-weight: var(--fw-semibold); font-family: var(--font-mono); white-space: nowrap; }
.entity-bar-track { flex: 1; background: var(--surface-3); border-radius: var(--r-pill); height: 8px; overflow: hidden; }
.entity-bar-fill  { background: var(--accent); height: 100%; border-radius: var(--r-pill); transition: width var(--t); }
.entity-bar-pct   { min-width: 46px; text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.entity-bar-amt   { min-width: 92px; text-align: right; font-family: var(--font-mono); font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--text); }

/* ════════════════════════════════════════════════════════════════════════════
   SECTION NAVIGATION BAR (Task 4) — sticky on app
   ════════════════════════════════════════════════════════════════════════════ */
.section-nav-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  z-index: 20;
  transition: box-shadow var(--t-fast);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.section-nav-bar::-webkit-scrollbar { display: none; }
.section-nav-bar.stuck {
  position: sticky; top: 56px;
  background: var(--bg);
  box-shadow: 0 4px 16px rgba(11,18,32,0.08);
  margin-left: calc(-1 * var(--s-4)); margin-right: calc(-1 * var(--s-4));
  padding-left: var(--s-4); padding-right: var(--s-4);
}
.section-nav-link {
  padding: 11px 16px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.section-nav-link:hover { color: var(--text); }
.section-nav-link.active { color: var(--accent); border-bottom-color: var(--accent); }

.section-anchor {
  display: block; height: 0;
  margin-top: -116px; padding-top: 116px;
  visibility: hidden; pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   TAX CALENDAR STRIP (July 2026 Cowork brief, item 1) — "where a parcel sits
   in the annual property tax cycle right now"
   ════════════════════════════════════════════════════════════════════════════ */
.tax-calendar-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 4px;
}
.tax-calendar-node {
  flex: 1 0 110px;
  min-width: 110px;
  position: relative;
  text-align: center;
  padding: 0 6px;
  cursor: help;
}
/* Connecting line through every dot, drawn once via each node's own
   ::before so it reads as one continuous track without an extra wrapper el */
.tax-calendar-node::before {
  content: "";
  position: absolute;
  top: 5px; left: -50%; width: 100%; height: 2px;
  background: var(--border-strong);
  z-index: 0;
}
.tax-calendar-node:first-child::before { display: none; }
.tax-calendar-node.passed::before,
.tax-calendar-node.current::before { background: var(--verified-text); opacity: 0.4; }

.tax-calendar-dot {
  width: 12px; height: 12px; border-radius: 50%;
  margin: 0 auto 8px; position: relative; z-index: 1;
  background: var(--surface-2); border: 2px solid var(--border-strong);
}
.tax-calendar-node.passed .tax-calendar-dot {
  background: var(--verified-text); border-color: var(--verified-text);
}
.tax-calendar-node.current .tax-calendar-dot {
  background: var(--accent); border-color: var(--accent);
  width: 14px; height: 14px;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
}

.tax-calendar-label {
  font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--text-2);
  line-height: 1.3; margin-bottom: 2px;
}
.tax-calendar-node.current .tax-calendar-label { color: var(--accent); }
.tax-calendar-here {
  display: block;
  font-size: 9.5px; font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--accent); margin-top: 2px;
}
.tax-calendar-date { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tax-calendar-countdown {
  font-size: 10px; color: var(--accent); margin-top: 3px; font-weight: var(--fw-semibold);
}
.tax-calendar-note {
  margin-top: 5px; font-size: 10px; color: var(--partial-text);
  background: var(--partial-bg); border: 1px solid var(--partial-border);
  border-radius: 6px; padding: 3px 6px; line-height: 1.35;
}

/* ════════════════════════════════════════════════════════════════════════════
   NARRATIVE DISCLOSURE (Task 4)
   ════════════════════════════════════════════════════════════════════════════ */
.overview-narrative-collapse { border-radius: var(--r); }
.overview-collapse-summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0; user-select: none;
}
.overview-collapse-summary::-webkit-details-marker { display: none; }
.overview-collapse-summary::after {
  content: "▸"; color: var(--text-3); font-size: 11px; transition: transform var(--t-fast);
}
.overview-narrative-collapse[open] .overview-collapse-summary::after { transform: rotate(90deg); }
.overview-narrative-collapse[open] .overview-collapse-summary { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   COMPARE TRAY + PIN (Task 5)
   ════════════════════════════════════════════════════════════════════════════ */
.compare-tray {
  position: fixed; bottom: 0; left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-bottom: none;
  border-radius: var(--r) var(--r) 0 0;
  padding: 12px 18px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-3);
  z-index: 100;
  max-width: 760px; width: 92%;
}
.compare-tray-title { font-weight: var(--fw-bold); font-size: var(--fs-sm); white-space: nowrap; }
.compare-tray-items { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.compare-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px 11px;
  font-size: 11.5px;
  display: flex; align-items: center; gap: 7px;
}
.compare-tray-actions { display: flex; gap: 8px; align-items: center; }

.compare-pin-btn {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  cursor: pointer;
  padding: 1px 6px;
  font-size: 13px; color: var(--text-3);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  line-height: 1.4;
}
.compare-pin-btn:hover,
.compare-pin-btn.pinned {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════════ */
footer.site-footer {
  background: var(--ink);
  color: var(--text-on-dark-2);
  border-top: none !important;
  margin-top: var(--s-8);
  padding: var(--s-7) 0 var(--s-5);
}
footer.site-footer a { color: var(--text-on-dark-2); transition: color var(--t-fast); }
footer.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--s-5);
  max-width: var(--maxw-app);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.footer-brand-word { font-size: var(--fs-md); font-weight: var(--fw-bold); color: #fff; margin-bottom: 8px; }
.footer-brand-word b { color: var(--accent); }
.footer-tagline { font-size: 12.5px; line-height: 1.6; color: var(--text-on-dark-3); max-width: 280px; }
.footer-col-title {
  font-size: 10.5px; font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--text-on-dark-3); margin-bottom: 12px;
}
.footer-col a, .footer-col span {
  display: block; font-size: 12.5px; line-height: 1.4;
  margin-bottom: 9px; color: var(--text-on-dark-2);
}
.footer-bottom {
  max-width: var(--maxw-app); margin: var(--s-5) auto 0;
  padding: var(--s-4) var(--s-5) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px; color: var(--text-on-dark-3);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

/* Legacy plain footer fallback */
footer:not(.site-footer) {
  font-size: 12px;
  color: var(--text-3) !important;
  border-top: 1px solid var(--border) !important;
  padding: 1.25rem 0; margin-top: var(--s-6);
}

/* ════════════════════════════════════════════════════════════════════════════
   FRONT DOOR — HERO + MARKETING SECTIONS (dark, confident)
   ════════════════════════════════════════════════════════════════════════════ */
.hero {
  background: var(--ink);
  /* Hand-off fix (July 2026, per Diego — Homepage hero: "make it
     deliberate"): the third gradient layer below REPLACES the previous
     `border-bottom: 1px solid rgba(255,255,255,0.07)` hard rule. That
     border ended the hero on a razor edge -- functionally fine, but read
     as an incidental stopping point, not a designed one. This layer starts
     fully transparent (inert) for the hero's top 80%, then over the final
     20% eases toward a faint lift using --ink-2 (this system's own
     "slightly lifted ink" token, already used elsewhere for layered dark
     surfaces) -- a soft internal glow that begins inside the hero's own
     bottom edge, so the eye is released into the section below rather than
     cut off at a line. */
  background-image:
    radial-gradient(900px 400px at 78% -10%, rgba(var(--accent-rgb), 0.22), transparent 60%),
    radial-gradient(700px 500px at 8% 8%, rgba(var(--accent-rgb), 0.10), transparent 55%),
    linear-gradient(to bottom, transparent 0%, transparent 80%, var(--ink-2) 100%);
  color: #fff;
  /* break out of the .container that wraps it */
  margin: calc(-1 * var(--s-5)) calc(50% - 50vw) 0;
  width: 100vw;
  padding: var(--s-9) var(--s-5) var(--s-8);
}
.hero-inner { max-width: var(--maxw); margin: 0 auto; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--text-on-dark-2);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 6px 13px; border-radius: var(--r-pill);
  margin-bottom: var(--s-5);
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success-on-dark); box-shadow: 0 0 0 3px rgba(var(--success-on-dark-rgb), 0.22); }
.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-display);
  line-height: 1.05;
  margin-bottom: var(--s-4);
  max-width: 16ch;
}
.hero h1 .accent { color: var(--accent-on-dark); }
.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-on-dark-2);
  max-width: 56ch;
  margin-bottom: var(--s-6);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Hero search (on dark) */
.hero-search { margin-top: var(--s-6); max-width: 620px; }
.hero-search .search-input {
  background: rgba(255,255,255,0.97);
  border-color: transparent;
  box-shadow: var(--shadow-3);
}
.hero-search .search-btn { background: var(--accent); }
.hero-search .search-btn:hover { background: var(--accent-hover); }
.hero-search-hint { margin-top: 10px; font-size: 12px; color: var(--text-on-dark-3); }

/* Trust strip under hero */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-7);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.10);
}
.trust-stat .num {
  font-family: var(--font-mono);
  font-size: 1.7rem; font-weight: var(--fw-bold);
  color: #fff; letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.trust-stat .lbl {
  font-size: 12px; color: var(--text-on-dark-3);
  margin-top: 6px;
}

/* Section scaffolding for front door */
.fd-section { padding: var(--s-8) 0; }
.fd-section-tight { padding: var(--s-7) 0; }
.fd-kicker {
  font-size: 12px; font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.fd-h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: var(--fw-black);
  letter-spacing: var(--track-display);
  line-height: 1.1; color: var(--ink);
  margin-bottom: var(--s-3);
  max-width: 20ch;
}
.fd-lead { font-size: var(--fs-md); line-height: 1.65; color: var(--text-2); max-width: 60ch; }

/* How-it-works / feature cards */
.fd-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  height: 100%;
  transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.fd-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--border-strong); }
.fd-card-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent);
  font-weight: var(--fw-black); font-size: 15px;
  margin-bottom: var(--s-3);
}
.fd-card h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); margin-bottom: 8px; color: var(--ink); }
.fd-card p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); margin: 0; }

/* Audience cards */
.audience-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  height: 100%;
}
.audience-card h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink); margin-bottom: 8px; }
.audience-card p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); margin: 0; }

/* Trust / provenance panel (dark) — same dark-surface token set as .hero
   (Home + About only; see the --accent-rgb/--accent-on-dark/--success-on-dark
   comment in :root). */
.fd-trust-panel {
  background: var(--ink);
  background-image: radial-gradient(700px 320px at 85% 0%, rgba(var(--accent-rgb), 0.18), transparent 60%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-7);
}
.fd-trust-panel .fd-kicker { color: var(--accent-on-dark); }
.fd-trust-panel h2 { color: #fff; }
.provenance-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.provenance-row:last-child { border-bottom: none; }
.provenance-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(var(--success-on-dark-rgb), 0.16); color: var(--success-on-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--fw-black); flex-shrink: 0;
}
.provenance-row .src { font-weight: var(--fw-semibold); color: #fff; font-size: var(--fs-sm); }
.provenance-row .desc { color: var(--text-on-dark-3); font-size: 12.5px; }

/* Confidence legend (front-door preview of the data-integrity system) */
.confidence-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.confidence-legend .item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 9px 13px;
}

/* CTA band */
.fd-cta-band {
  background: var(--accent);
  background-image: linear-gradient(135deg, var(--accent) 0%, #5B73F0 100%);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  text-align: center;
  color: #fff;
}
.fd-cta-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--fw-black); letter-spacing: var(--track-display); margin-bottom: 10px; }
.fd-cta-band p { color: rgba(255,255,255,0.88); font-size: var(--fs-md); margin-bottom: var(--s-5); }
.fd-cta-band .btn-cta { background: #fff; color: var(--accent-active); }
.fd-cta-band .btn-cta:hover { background: #F2F4FF; color: var(--accent-active); }

/* Product visual frame (screenshot mock on hero) */
.product-frame {
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.product-frame .pf-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.product-frame .pf-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.22); }

/* ════════════════════════════════════════════════════════════════════════════
   STYLE GUIDE PAGE
   ════════════════════════════════════════════════════════════════════════════ */
.sg-section { margin-bottom: var(--s-8); }
.sg-swatch { border-radius: var(--r-sm); height: 72px; border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.sg-swatch-label { font-size: 11px; color: var(--text-2); margin-top: 6px; font-family: var(--font-mono); }
.sg-swatch-name { font-size: 12px; font-weight: var(--fw-semibold); color: var(--text); margin-top: 8px; }
.sg-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3); }
@media (max-width: 900px) { .sg-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .sg-row { grid-template-columns: repeat(2, 1fr); } }
.sg-type-row { display: flex; align-items: baseline; gap: var(--s-4); padding: 10px 0; border-bottom: 1px solid var(--border); }
.sg-type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); min-width: 120px; }
.sg-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s-5); box-shadow: var(--shadow-1); }

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile-first guards, table reflow
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  main.container { padding-top: var(--s-4); }
  .hero { padding: var(--s-7) var(--s-4) var(--s-6); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
}

@media (max-width: 576px) {
  /* Mobile readability fix (July 2026, per Fable review P2-22): this used
     to shrink the base font BELOW the already-small 14px desktop size
     (13.5px) -- backwards from what mobile needs (a LARGER base, since
     small text is harder to read on a phone, not easier). Bumped to 16px,
     the top of Diego's requested 15-16px range and also the exact
     threshold iOS Safari uses to decide whether to auto-zoom a page on
     input focus (see the form-control rule below, same reasoning). */
  body { font-size: 16px; }
  .property-header h2, .page-title { font-size: var(--fs-lg); }
  .kpi-value { font-size: 1.4rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }

  /* iOS zoom-on-focus fix (July 2026, per Fable review P2-22): Mobile
     Safari auto-zooms the page whenever a focused form input's computed
     font-size is under 16px -- true regardless of the site's own type
     scale. .form-control/.form-select's own font-size (var(--fs-sm) =
     13px) already violated this site-wide, before counting the dozens of
     inline style="font-size:12px" overrides on individual .form-control-sm
     inputs across property.html/search.html/snapshot.html/rates.html. A
     single !important rule here, scoped to mobile only, is deliberately
     used instead of hunting down and editing every inline override
     individually -- this is exactly the kind of blanket, cross-cutting
     concern !important exists for, and this file already uses the same
     technique for mobile-only font overrides a few rules up. Desktop
     sizing (the deliberately compact form-control-sm inputs used
     throughout the filter panels) is completely unaffected. */
  input.form-control, select.form-select, textarea.form-control,
  .form-control, .form-select { font-size: 16px !important; }

  /* ── Data-table reflow: stack rows as labelled cards instead of x-scroll ──
     Opt-in via .table-stack on the <table>; each <td> exposes a data-label.   */
  table.table-stack thead { display: none; }
  table.table-stack, table.table-stack tbody, table.table-stack tr, table.table-stack td { display: block; width: 100%; }
  table.table-stack tr {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    margin-bottom: 10px;
    padding: 4px 12px;
    background: var(--surface);
  }
  table.table-stack td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    text-align: right !important;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
  }
  table.table-stack tr td:last-child { border-bottom: none; }
  table.table-stack td::before {
    content: attr(data-label);
    text-align: left;
    font-size: 10.5px; font-weight: var(--fw-bold);
    letter-spacing: var(--track-caps); text-transform: uppercase;
    color: var(--text-3);
    flex-shrink: 0;
  }
  table.table-stack td:empty { display: none; }

  /* ── Sticky first column (July 2026, per Fable review P2-21) ──────────────
     For wide tables kept in genuine table form on mobile (not stacked --
     .table-stack above is the stacking alternative, used for the Value
     History and Peer Benchmark tables where each row is naturally "one
     year"). Annual Trends' rows are property-type categories with 7 dense
     numeric columns each; the row label ("Overall", "Residential", etc, via
     .trend-row-label) is what a reader needs anchored while scrolling
     through 12 Month/Hist Avg/Forecast/Peak/When/Trough/When -- stacking it
     into a card would just recreate the same 7-line-per-category scroll
     problem in a different shape. table-responsive (already wrapping this
     table) still supplies the horizontal scroll; this only freezes column 1
     within that scroll. Solid backgrounds (matching this table's own
     body/head fills, --surface / --surface-2) are required on the sticky
     cells so scrolled-under columns don't show through. */
  table.annual-trends-table th:first-child,
  table.annual-trends-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 1px 0 0 var(--border);
  }
  table.annual-trends-table td:first-child { background: var(--surface); }
  table.annual-trends-table th:first-child { background: var(--surface-2); }
}