/* ============================================================
   YieldSplit — dashboard styles
   Whitewashed Coastal palette — warm-white bg, terracotta +
   sea-foam accents. Clean, dense, information-first.
   ============================================================ */

:root {
  /* Whitewashed Coastal palette */
  --parchment:      #FFFFFF;   /* page background */
  --cream:          #FFFFFF;   /* card / panel    */
  --surface:        #F8FAFC;   /* secondary bg    */
  --ink:            #0F172A;   /* primary text    */
  --inkSoft:        rgba(15,23,42, 0.72);
  --terracotta:     #16A34A;   /* primary accent  */
  --terraDeep:      #DC2626;   /* warning / dark accent */
  --terraSoft:      rgba(22,163,74, 0.08);
  --seafoam:        #BBF7D0;   /* secondary accent */
  --seafoamDeep:    #16A34A;   /* sea-foam dark   */
  --muted:          #64748B;   /* secondary text  */
  --ash:            #94A3B8;   /* tertiary text   */
  --hairline:       #E5E7EB;   /* default border  */
  --hairlineSoft:   rgba(15,23,42, 0.06);

  /* Legacy aliases — old rule references stay consistent */
  --bg:             var(--parchment);
  --surface-warm:   #FFFFFF;
  --border:         var(--hairline);
  --text:           var(--ink);
  --smoke:          var(--muted);
  --smoke-dark:     #475569;
  --ember:          var(--terracotta);
  --emberDark:      var(--terraDeep);
  --forest:         var(--seafoamDeep);
  --clay:           var(--terraDeep);
  --clay-soft:      rgba(22,163,74, 0.08);
  --accent:         var(--terracotta);
  --accent-dark:    var(--terraDeep);

  --pos:            var(--seafoamDeep);
  --neg:            var(--terraDeep);
  --warn:           #D97706;

  --score-high:     var(--seafoamDeep);
  --score-mid:      var(--terraDeep);
  --score-low:      var(--muted);

  --radius: 6px;
  --shadow: 0 1px 2px rgba(15,23,42, 0.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

.container {
  max-width: none;
  margin: 0 auto;
  padding: 0 20px;
}

/* --------- Top bar (legacy; nav now in base.html) --------- */
.topbar {
  background: rgba(255,255,255, 0.92);
  border-bottom: 1px solid var(--hairline);
  padding: 10px 0;
  margin-bottom: 24px;
  position: sticky; top: 0; z-index: 100;
}
.topbar .container {
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
.topbar nav { display: flex; gap: 18px; flex: 1; }
.topbar nav a {
  padding: 5px 0;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.topbar nav a.active { color: var(--ink); border-bottom-color: var(--terracotta); }

.rate-pill {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* --------- Page head --------- */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.page-head h1 { margin: 0; font-size: 22px; }

.sort-controls {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sort-controls a {
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--muted);
}
.sort-controls a.sort-active {
  background: var(--ink);
  color: white;
}

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

/* --------- Card grid --------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.card {
  display: block;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  color: var(--ink);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 280ms;
  box-shadow:
    0 1px 2px rgba(15,23,42, 0.04),
    0 8px 24px -12px rgba(15,23,42, 0.08);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 6px rgba(15,23,42, 0.05),
    0 24px 40px -16px rgba(15,23,42, 0.16);
  text-decoration: none;
}
.card-img {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--surface);
  overflow: hidden;
}
.card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.no-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 13px;
}

/* Score badge — clean circle, top-right of photo */
.score-badge {
  position: absolute;
  top: 14px; right: 14px;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  box-shadow:
    0 2px 8px rgba(15,23,42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.score-high { color: #16A34A; border: 1.5px solid #16A34A; }
.score-mid  { color: #F59E0B; border: 1.5px solid #F59E0B; }
.score-low  { color: #94A3B8; border: 1.5px solid #94A3B8; }

/* Photo overlay — address + year at the bottom of card photo */
.photo-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 22px 18px;
  color: #FFFFFF;
}
.photo-overlay::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(15,23,42, 0.55) 100%
  );
  pointer-events: none;
}
.photo-overlay .addr {
  position: relative;
  font-size: 17px; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.photo-overlay .built {
  position: relative;
  margin-top: 5px;
  font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.16em;
  opacity: 0.88; font-weight: 500;
}

.flag-row {
  position: absolute;
  bottom: 8px; left: 8px; right: 8px;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.flag {
  background: rgba(15,23,42, 0.78);
  color: white;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  font-weight: 600;
}
.flag.warm { background: rgba(22,163,74, 0.85); color: white; }
.flag.cool { background: rgba(22,163,74, 0.85); color: white; }
.flag-drop  { background: rgba(22,163,74, 0.85); }
.flag-bom   { background: rgba(15,23,42, 0.85); }
.flag-warn  { background: rgba(220,38,38, 0.85); }
.flag-rehab { background: rgba(15,23,42, 0.7); }

/* Card body — price + specs + data table */
.card-body { padding: 22px 22px 22px; }
.card-price-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairlineSoft);
}
.card-price {
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1;
}
.card-price .price-currency { color: var(--terracotta); margin-right: 2px; }
.card-specs {
  color: var(--muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.card-specs .num { color: var(--ink); font-weight: 600; }
.card-specs .sep { color: var(--hairline); margin: 0 5px; }

/* Data table inside card body */
.data-table { margin-top: 14px; }
.data-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
}
.data-row + .data-row { border-top: 1px dashed var(--hairlineSoft); }
.data-row .key {
  color: var(--muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.data-row .val {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: 600;
  font-size: 14px;
}
.data-row .val.pos { color: var(--seafoamDeep); }
.data-row .val.neg { color: var(--terraDeep); }

/* Legacy card elements */
.card-addr {
  font-size: 13px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-stats {
  display: flex; gap: 12px;
  font-size: 13px;
  border-top: 1px solid var(--hairline);
  padding-top: 8px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.stat { display: flex; gap: 5px; }

.pos { color: var(--seafoamDeep); }
.neg { color: var(--terraDeep); }

/* --------- Empty state --------- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.empty-state pre {
  display: inline-block;
  background: var(--surface);
  padding: 10px 16px;
  border-radius: 4px;
  border: 1px solid var(--hairline);
}

/* --------- Detail page --------- */
/* Back link — lives inside the sticky-row, mockup style */
.back-link {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.back-link:hover { color: var(--ink); text-decoration: none; }

/* Sticky header wrapper — iOS-style scroll-linked collapse.
   JS writes --collapse-progress (0→1) and all rules below
   interpolate via calc() to shrink/fade smoothly. */
.detail-sticky {
  --collapse-progress: 0;
  position: sticky;
  top: var(--logo-header-height, 0px);
  z-index: 20;
  background: rgba(255,255,255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  padding-top: calc(18px - 8px * var(--collapse-progress));
  padding-bottom: calc(18px - 13px * var(--collapse-progress));
  box-shadow: 0 6px 6px -6px rgba(15,23,42, calc(0.20 * var(--collapse-progress)));
}

/* Secondary content (specs · built · Zillow · County) — sits inline at
   baseline with the address + price, single line, fades + collapses on
   scroll. */
.detail-secondary {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 14px;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  max-height: calc(20px * (1 - var(--collapse-progress)));
  opacity: calc(1 - var(--collapse-progress));
}
.detail-secondary .num { color: var(--ink); font-weight: 600; }
.detail-secondary .sep { color: var(--ash); }
.detail-secondary .external {
  color: var(--terracotta);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
  display: inline-block;
}

/* Score badge — 64px expanded → 38px collapsed */
.detail-sticky .score-big {
  width: calc(64px - 26px * var(--collapse-progress));
  height: calc(64px - 26px * var(--collapse-progress));
  font-size: calc(26px - 12px * var(--collapse-progress));
}

/* "/ 100" suffix collapses both opacity + width */
.detail-score-suffix {
  overflow: hidden;
  max-width: calc(48px * (1 - var(--collapse-progress)));
  opacity: calc(1 - var(--collapse-progress));
  margin-top: calc(2px * (1 - var(--collapse-progress)));
  color: var(--ash); font-size: 12px; font-weight: 500;
  white-space: nowrap;
}

/* Address h1 — simple inline-baseline element next to price + meta */
.detail-sticky h1 {
  font-size: calc(26px - 8px * var(--collapse-progress));
  line-height: calc(1.1 - 0.1 * var(--collapse-progress));
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  white-space: nowrap;
}

/* List price sits at baseline with the h1 */
.detail-list-price {
  font-size: calc(18px - 4px * var(--collapse-progress));
  font-weight: 500;
  color: var(--inkSoft);
  letter-spacing: -0.015em;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}

/* sticky-row equivalent: back-link + sticky-title + score */
.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  max-width: none;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
/* sticky-title equivalent: address + price + meta on one baseline,
   single line — never wraps. */
.detail-head-main {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 22px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}

.detail-score {
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Score big circle — used in sticky header */
.score-big {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--cream);
}
.score-big.score-high, .score-big.high {
  color: #16A34A; border: 2px solid #16A34A;
}
.score-big.score-mid, .score-big.mid {
  color: #F59E0B; border: 2px solid #F59E0B;
}
.score-big.score-low, .score-big.low {
  color: #94A3B8; border: 2px solid #94A3B8;
}

/* Flags row in sticky header */
.detail-flags {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: none;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: calc(14px * (1 - var(--collapse-progress)));
  overflow: hidden;
  max-height: calc(40px * (1 - var(--collapse-progress)));
  opacity: calc(1 - var(--collapse-progress));
}
.detail-flags .flag {
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface); color: var(--inkSoft);
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.detail-flags .flag.warm { background: var(--terraSoft); color: var(--terraDeep); }
.detail-flags .flag.cool { background: rgba(187,247,208,0.18); color: var(--seafoamDeep); }
.detail-flags .flag.flag-drop { background: rgba(187,247,208, 0.22); color: var(--seafoamDeep); }
.detail-flags .flag.flag-bom  { background: var(--ink); color: white; }
.detail-flags .flag.flag-warn { background: var(--terraSoft); color: var(--terraDeep); }

/* --------- Gallery — single horizontal scroll, mockup proportions ---
   Layout: 2 rows × N columns; hero spans 2 columns + 2 rows (50%
   width × full height), every other tile takes 1 column × 1 row
   (25% × 50%). Initial view = hero + 4 small tiles (matches 2fr/1fr/1fr
   mockup); horizontal scroll slides hero off-screen along with the
   rest. All images carry .gallery-photo so the lightbox JS finds them. */
.gallery {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 4);
  gap: 8px;
  height: 420px;
  margin: 14px 0 0;
  border-radius: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.gallery > * {
  background: var(--surface);
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.gallery-hero {
  grid-row: 1 / span 2;
  grid-column: span 2;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
}
.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-track { background: transparent; }
.gallery::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }
.gallery::-webkit-scrollbar-thumb:hover { background: var(--ash); }

/* Off-market gallery — Street View hero + Map static, equal halves.
   Used when an OCPA-only parcel has no MLS photo history. Overrides
   the scrollable grid layout above with a fixed 2-tile flex split. */
.gallery.gallery-2up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 8px;
  height: 420px;
  margin: 24px 0 0;
  border-radius: 16px;
  overflow: hidden;
}
.gallery.gallery-2up > .gallery-tile {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  text-decoration: none;
}
.gallery.gallery-2up > .gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery img, .gallery-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
}
.gallery-photo-fp {
  object-fit: contain;
  background: var(--surfaceWarm, #FFFFFF);
}
/* Map / Street-View tiles */
.gallery-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  background: var(--surface);
}
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.gallery-tile-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(15,23,42, 0.82);
  color: var(--cream);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(15,23,42, 0.12);
}
.gallery-tile-bg .gallery-tile-label {
  position: static;
  background: transparent;
  padding: 0;
}
.gallery-tile-bg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--cream);
}
.gallery-tile-bg-map {
  background: linear-gradient(135deg, #1E293B 0%, var(--ink) 100%);
}
.gallery-tile-bg-streetview {
  background: linear-gradient(135deg, var(--seafoamDeep) 0%, var(--ink) 100%);
}
.gallery-tile:hover { opacity: 0.92; }

/* --------- Sections --------- */
.section {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px 22px;
  /* margin-top only so adjacent .section.underwriting overrides actually
     produce the intended 14/18px gap (margin-bottom would collapse with
     it and reinstate the larger value). */
  margin: 22px 0 0;
}
.section h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}

/* Bare sections — no card background/border/padding. Mockup style:
   the section title sits over the page bg with a hairline below it.
   Used for Suggested offers, Offer & Conversion, PadSplit cash flow,
   Refi projections, and Notes. */
.section.underwriting,
.section.bare {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.section.underwriting {
  margin-top: 18px;
}
.section.underwriting + .section.underwriting {
  margin-top: 14px;
}
.section.underwriting h2 {
  font-size: 16px;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
}
/* Match the bare-section .section-h spacing exactly so Suggested offers,
   Offer & Conversion, and PadSplit monthly cash flow titles sit the same
   distance from the hairline as Refi projections. */
.section.underwriting .section-h {
  padding-bottom: 4px;
  margin-bottom: 8px;
}
.section.underwriting .section-h h2 {
  font-size: 16px;
  letter-spacing: -0.015em;
  /* Reset h2's own padding/margin/border so only .section-h's
     padding-bottom contributes to the title→hairline gap. Without this
     reset, the .section.underwriting h2 rule layered an extra 3px
     padding + 10px margin on top of the .section-h padding. */
  margin: 0;
  padding: 0;
  border: 0;
}
/* Inner card padding inside the underwriting cluster — match mockup
   exactly so the visual rhythm of Suggested offers / Offer & Conversion
   / PadSplit cash flow looks like synthesis-02-detail-page.html. */
.section.underwriting .tier {
  padding: 10px 14px;
}
.section.underwriting .tier.featured {
  padding: 9px 13px;
}
.section.underwriting .tier-price { font-size: 18px; }
.section.underwriting .pane,
.section.underwriting .offer-pane {
  padding: 12px 16px 14px;
}
.section.underwriting .pane h3,
.section.underwriting .offer-pane h3 {
  font-size: 13px;
  margin-bottom: 8px;
}
.section.underwriting .scenario {
  padding: 12px 16px;
}
.section.underwriting .comps-toggle {
  margin-top: 10px;
}
.section.underwriting .cpsf-strip {
  margin-top: 10px;
  padding: 10px 16px;
}

/* Section header with flex metadata on the right */
.section-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.section-h h2 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
  margin: 0; padding: 0; border: 0;
}
.section-h .meta { color: var(--muted); font-size: 13px; }

/* --------- MLS description: collapse past 3 lines --------- */
.mls-desc-wrap { position: relative; }
.mls-desc {
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.mls-desc.expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}
.mls-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  background: none;
  border: none;
  padding: 2px 0;
  color: var(--terracotta);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.mls-toggle:hover { color: var(--terraDeep); }
.mls-toggle.hidden { display: none; }
.mls-chevron { transition: transform 200ms ease; }
.mls-toggle[aria-expanded="true"] .mls-chevron { transform: rotate(180deg); }

/* --------- Cost-per-sqft strip — new edge-to-edge layout --------- */
.cpsf-strip {
  margin-top: 10px; padding: 10px 16px;
  background: var(--surface); border-radius: 8px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  font-size: 12px;
}
.cpsf-group { min-width: 0; flex: 0 0 auto; }
.cpsf-group:nth-child(1) { text-align: left; }
.cpsf-group:nth-child(2) { text-align: center; }
.cpsf-group:nth-child(3) { text-align: right; }
/* inline-block trick: the group's text-align positions the stack
   horizontally; inside the stack everything aligns left so both
   the permitted and unpermitted rows share the same left edge */
.cpsf-stack { display: inline-block; text-align: left; }
.cpsf-row { display: flex; gap: 8px; align-items: baseline; padding: 1px 0; }
.cpsf-row.dim { opacity: 0.72; }
.cpsf-label {
  color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 10.5px;
}
.cpsf-value {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: 700; color: var(--ink);
}
.cpsf-tag {
  font-size: 10px; padding: 2px 7px; border-radius: 4px;
  background: var(--terraSoft); color: var(--terraDeep);
  font-weight: 600; white-space: nowrap;
}
.cpsf-tag.permitted-tag {
  background: rgba(187,247,208, 0.22); color: var(--seafoamDeep);
}
/* Legacy aliases (old template IDs still work) */
.cpsf-pair { display: inline-flex; align-items: center; gap: 8px; }
.cpsf-tag-unpermitted { color: var(--terraDeep); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9.5px; font-weight: 600; }
.cpsf-tag-permitted   { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9.5px; font-weight: 500; font-style: italic; }
.cpsf-pair-permitted .cpsf-value { color: var(--muted); }

/* --------- Actions row --------- */
.actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.rating-form, .rehab-form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.rehab-form input {
  width: 120px;
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font: inherit;
}

.btn {
  padding: 7px 14px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font: inherit;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms;
}
.btn:hover { background: var(--surface); color: var(--ink); }
.btn-active {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.btn-active:hover { background: var(--ink); }
.btn-active.warm { background: var(--terracotta); border-color: var(--terracotta); }

/* --------- Tables --------- */
.kv {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.kv tr { border-bottom: 1px dashed var(--hairlineSoft); }
.kv tr:last-child { border-bottom: none; }
.kv td { padding: 7px 0; }
.kv td:first-child { color: var(--muted); }
.kv tr.emph td { font-weight: 700; }
.kv tr.emph {
  border-top: 1px solid var(--ink);
  font-size: 14px;
}

.scenarios, .refi {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.scenarios th, .scenarios td,
.refi th, .refi td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
}
.scenarios th, .refi th {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--hairline);
}
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.cap { text-transform: capitalize; }
.scenarios tr.scoring { background: rgba(187,247,208, 0.08); font-weight: 600; }
.scroll-x { overflow-x: auto; }

/* Price history table — production-matching */
table.history { width: 100%; border-collapse: collapse; font-size: 13px; }
table.history thead th {
  color: var(--muted); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em;
  padding: 6px 8px; text-align: left;
  border-bottom: 1px solid var(--hairline);
}
table.history thead th.num { text-align: right; }
table.history tbody td {
  padding: 9px 8px; border-bottom: 1px dashed var(--hairlineSoft);
  vertical-align: baseline;
}
table.history tbody tr:last-child td { border-bottom: 0; }
table.history td.num { text-align: right !important; font-family: 'JetBrains Mono', monospace; font-weight: 600; }
table.history td.date { white-space: nowrap; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
table.history td.source { color: var(--muted); font-size: 12px; }
.event-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em;
}
.event-badge.listed  { background: var(--terracotta); color: #fff; }
.event-badge.sold    { background: var(--ink); color: var(--cream); }
.event-badge.removed { background: var(--terraDeep); color: #fff; }
.event-badge.neutral { background: rgba(15,23,42, 0.08); color: var(--ink); }
.pct-pos  { color: var(--seafoamDeep); font-weight: 700; }
.pct-neg  { color: var(--terraDeep); font-weight: 700; }
.pct-zero { color: var(--muted); }

.score-notes {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  padding-left: 20px;
  line-height: 1.8;
}

/* Notes textarea */
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  font: inherit;
  resize: vertical;
  margin-bottom: 10px;
}

code {
  background: var(--surface);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* --------- Offer price slider section --------- */
.offer-section { padding: 0; }
.offer-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.offer-head h2 {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin: 0;
}
.offer-controls { display: flex; flex-direction: column; gap: 10px; }
.offer-number-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.offer-number-row input[type="text"] {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  width: 160px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: var(--cream);
}
.offer-number-row input[type="text"]:focus {
  outline: 2px solid var(--terracotta);
  outline-offset: -1px;
}
.offer-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* Offer + conversion grid — 2-column tighter panes */
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pane {
  background: var(--cream); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 12px 16px 14px;
}
.pane-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.pane-h h3 {
  font-size: 13px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em;
}
.pane-h .stat-saved { font-size: 10.5px; color: var(--seafoamDeep); font-weight: 600; }
.number-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.big-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1;
}
.delta { font-size: 11.5px; font-weight: 600; color: var(--terraDeep); }

/* --------- Suggested Offers section --------- */
.suggested-offers-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.suggested-offers-head h2 {
  font-size: 15px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin: 0;
}
.head-flex { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.avm-block { text-align: right; line-height: 1.1; }
.avm-block .smallcaps { color: var(--muted); display: block; margin-bottom: 4px; }
.avm-block .val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
}
/* Inline AVM tag for the Suggested offers header — sits to the right
   of the h2 on a single baseline so .section-h doesn't get any taller
   than the h2 itself. Without this, the stacked .avm-block pushed the
   hairline ~20px below the h2. */
.avm-block-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
}
.avm-block-inline .smallcaps {
  color: var(--muted);
}
.avm-block-inline .num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  font-size: 14px;
}

/* Tier cards — 3-column grid */
.tier-cards, .tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .tier-cards, .tiers { grid-template-columns: 1fr; }
}

/* Compact horizontal tier card */
.tier-card, .tier {
  background: var(--cream); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 10px 14px;
  transition: border-color 200ms;
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
}
.tier-card-highlight, .tier.featured {
  border: 2px solid var(--terracotta); padding: 9px 13px;
  box-shadow: 0 6px 14px -8px rgba(22,163,74, 0.16);
}
.tier-label, .tier-name {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.tier-pct { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); margin-left: 4px; }
.tier-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
  text-align: left !important;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.tier-aux { font-size: 10.5px; color: var(--muted); }
.tier-aux .num { color: var(--inkSoft); font-weight: 600; }
.tier-score-line { font-size: 10.5px; color: var(--muted); }
.tier-score-line .num { color: var(--seafoamDeep); font-weight: 700; }
/* Legacy tier sub/meta */
.tier-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tier-meta { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; min-width: 0; }
.tier-sub, .tier-score { font-size: 12px; white-space: nowrap; color: var(--muted); }
.tier-use-btn, .tier-use {
  padding: 5px 12px; border-radius: 4px;
  border: 1px solid var(--hairline); background: var(--cream);
  color: var(--inkSoft); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em;
  cursor: pointer; font-family: inherit;
  align-self: center;
  white-space: nowrap;
  margin-top: 0;
}
.tier.featured .tier-use,
.tier-card-highlight .tier-use-btn {
  border-color: var(--terracotta); color: var(--terracotta);
}

/* Comps toggle */
.comps-toggle {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface); border: 0;
  color: var(--inkSoft); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em;
  cursor: pointer; font-family: inherit;
}
.comps-toggle .num { color: var(--ink); font-weight: 700; }
.comps-toggle:hover { color: var(--ink); }
.comps-list { margin-top: 8px; }
.comps-list.hidden { display: none; }

/* Refi year-pill selector — sits in the right side of .section-h next to
   the title. Each pill is a small unstyled button; the active one is
   inverted to ink. Used to pick the seasoning horizon for refi math. */
.refi-years-pills {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.refi-year-pill {
  border: 1px solid var(--hairline);
  background: var(--cream);
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.refi-year-pill:hover {
  border-color: var(--inkSoft);
  color: var(--ink);
}
.refi-year-pill.active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* Refi tier cards — slightly more breathing room than the suggested-offers
   tiers since they show four lines of data each. */
.refi-tiers .tier {
  padding: 12px 14px;
}

/* --------- PadSplit scenario — single-line --------- */
.scenario {
  background: var(--cream); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 12px 16px;
}
.scenario-line {
  /* Distribute the bedrooms label, each metric, and Net evenly across
     the row width — drops the dot separators, items breathe equally. */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
}
.scenario-line .item { display: flex; align-items: baseline; gap: 5px; }
.scenario-line .item .key {
  color: var(--muted); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 600;
}
.scenario-line .item .val {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px;
}
.scenario-line .item .val.pos { color: var(--seafoamDeep); }
.scenario-line .item .val.neg { color: var(--terraDeep); }
/* Dot separators no longer needed once items justify space-between */
.scenario-line .sep { display: none; }
.scenario-line .net {
  font-size: 15px; padding-left: 6px;
  border-left: 2px solid var(--seafoam); margin-left: 4px;
}
.scenario-line .net .val { font-size: 16px; }

/* --------- Purchase panel — kv table --------- */
.purchase-table { font-size: 13px; }
.purchase-table .row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0;
  border-top: 1px dashed var(--hairlineSoft);
}
.purchase-table .row:first-child { border-top: 0; }
.purchase-table .row.emph {
  margin-top: 6px; padding-top: 11px;
  border-top: 1px solid var(--ink);
  font-size: 14px;
}
.purchase-table .key { color: var(--muted); }
.purchase-table .val { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.purchase-table .row.emph .key { color: var(--ink); font-weight: 600; }
.purchase-table .row.emph .val { font-size: 16px; }

/* Financing strip — Cash/Financed toggle + Down% + Rate inputs at the
   top of the Purchase panel. */
.financing-strip { font-size: 12.5px; }
.financing-strip .smallcaps { font-size: 11px; }
.seg-pill {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}
.seg-btn {
  padding: 4px 12px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.seg-btn.active {
  background: var(--ink);
  color: #FFFFFF;
}
.revert-link {
  font-size: 11px;
  color: var(--muted);
  margin-left: 4px;
  text-decoration: none;
}
.revert-link:hover { color: #16A34A; }

/* Purchase section stacking */
.purchase-section + .purchase-section {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.purchase-section-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.purchase-section-h .smallcaps { color: var(--muted); }
.purchase-section-h .total {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; color: var(--ink); font-size: 13px;
}

/* Capital allocation stacked bar */
.capital-bar {
  display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--surface);
}
.capital-bar .seg { height: 100%; }
.capital-bar .seg.offer   { background: var(--ink); }
.capital-bar .seg.down    { background: var(--ink); }
.capital-bar .seg.closing { background: var(--ash); }
.capital-bar .seg.rehab   { background: var(--terracotta); }
.capital-bar .seg.conv    { background: var(--seafoamDeep); }
.capital-legend {
  margin-top: 12px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  font-size: 12px;
}
.capital-legend.capital-legend-4 {
  grid-template-columns: repeat(4, 1fr);
}
.leg-item { display: flex; flex-direction: column; gap: 3px; }
.leg-head { display: flex; align-items: center; gap: 6px; }
.leg-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.leg-dot.offer   { background: var(--ink); }
.leg-dot.down    { background: var(--ink); }
.leg-dot.closing { background: var(--ash); }
.leg-dot.rehab   { background: var(--terracotta); }
.leg-dot.conv    { background: var(--seafoamDeep); }
.leg-label { color: var(--ink); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.leg-val { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--inkSoft); padding-left: 14px; }
.leg-val .pct { color: var(--muted); }

/* --------- Score breakdown bars --------- */
.score-component { margin-bottom: 14px; }
.score-component:last-child { margin-bottom: 0; }
.score-component-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 5px;
}
.score-component .name { color: var(--ink); font-size: 12.5px; font-weight: 600; }
.score-component .max { color: var(--muted); font-size: 11px; }
.score-component .pts { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; }
.score-component .pts.high { color: #16A34A; }
.score-component .pts.mid  { color: #F59E0B; }
.score-bar {
  height: 6px; background: var(--surface); border-radius: 3px;
  overflow: hidden; position: relative;
}
.score-bar-fill { height: 100%; border-radius: 3px; }
.score-bar-fill.high { background: #16A34A; }
.score-bar-fill.mid  { background: #F59E0B; }
.score-note {
  margin-top: 4px;
  color: var(--muted); font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}

/* Two-column panel layout */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.panel {
  background: var(--cream); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 22px 24px;
}
.panel h3 {
  font-size: 14px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.14em; font-weight: 700; margin-bottom: 14px;
}

/* --------- Tax Roll kv-table --------- */
.kv-table {
  display: grid; grid-template-columns: 1fr auto;
  gap: 8px 16px; font-size: 13px;
}
.kv-table .key { color: var(--muted); }
.kv-table .val { font-family: 'JetBrains Mono', monospace; font-weight: 600; text-align: right; }

/* --------- Permits --------- */
.permit-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-top: 1px dashed var(--hairlineSoft); font-size: 13px;
}
.permit-row:first-of-type { border-top: 0; }
.permit-type { font-weight: 600; }
.permit-date { font-family: 'JetBrains Mono', monospace; color: var(--muted); font-size: 12px; }
.permit-status {
  font-size: 10px; padding: 2px 7px; border-radius: 4px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
}
.permit-status.closed { background: rgba(187,247,208, 0.22); color: var(--seafoamDeep); }
.permit-status.open   { background: var(--terraSoft); color: var(--terraDeep); }

/* --------- Notes block --------- */
.notes-block {
  background: var(--cream); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 18px 20px;
}
.notes-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.notes-h h3 {
  font-size: 13px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.14em; font-weight: 700;
}
.notes-meta { color: var(--ash); font-size: 11px; font-family: 'JetBrains Mono', monospace; }
.notes-area {
  width: 100%; min-height: 90px;
  border: 1px solid var(--hairline); border-radius: 8px;
  padding: 12px 14px;
  font-family: inherit; font-size: 13.5px; line-height: 1.55; color: var(--ink);
  background: var(--bg);
  resize: vertical;
  margin-bottom: 0;
}
.notes-area:focus { outline: 0; border-color: var(--terracotta); }

/* ---------------------------------------------------------------------------
 * Range slider — sea-foam thumb, 22px diameter
 * ------------------------------------------------------------------------- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  background: var(--hairline);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin: 4px 0 2px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--seafoamDeep);
  border: 3px solid var(--cream);
  box-shadow: 0 1px 4px rgba(15,23,42, 0.18);
  cursor: pointer;
  transition: transform 120ms ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--seafoamDeep);
  border: 3px solid var(--cream);
  box-shadow: 0 1px 4px rgba(15,23,42, 0.18);
  cursor: pointer;
  transition: transform 120ms ease;
}
input[type="range"]::-moz-range-thumb:hover { transform: scale(1.1); }
input[type="range"]::-moz-range-track {
  height: 5px;
  background: var(--hairline);
  border-radius: 3px;
}

/* PadSplit rate chip — sits on the right side of the cash-flow section
   header, shows the active shared/private rates + cluster label. */
.padsplit-rate-chip {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  flex-shrink: 0;
}
.padsplit-rate-chip .num {
  color: var(--ink);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
.padsplit-rate-chip .padsplit-rate-label {
  color: var(--inkSoft);
}
/* Bath-type kind label ("shared bath" / "private bath") — sits right of
   the dollar amount with breathing room so the price doesn't crash into
   the word. */
.padsplit-rate-chip .padsplit-rate-kind {
  margin-left: 6px;
}
.padsplit-rate-chip.edited .num,
.padsplit-rate-chip.edited .padsplit-rate-label {
  color: var(--terracotta);
}
.padsplit-rate-chip.muted {
  font-style: italic;
  color: var(--ash);
}

/* Edit toggle pill */
.padsplit-edit-toggle {
  margin-left: 8px;
  background: transparent;
  border: 0;
  color: var(--terracotta);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
}
.padsplit-edit-toggle:hover { text-decoration: underline; }

/* Edit pane container — pads itself; child inputs are inline-styled. */
.padsplit-edit-pane[hidden] { display: none !important; }