/* ============================================================
   COMPACT COTTAGES — Shared tool-page styles
   Scoped under body.tool-page. Builds on cc-design-system.css:
   reuse its custom properties; never hardcode brand hex here
   except the two new component tints (sage sitework, tan fees).
   ============================================================ */

body.tool-page {
  /* Local additions that extend the design-system palette. */
  --tool-sitework: #8DA487;   /* SW 7742 Agate Green — sitework segment */
  --tool-fees:     #C9B79A;   /* muted tan — fees segment */
  --tool-fit:      #6E8A5A;   /* deeper sage — "fits" state */
  --tool-stretch:  #C08A3E;   /* amber — "stretch" state */
}

/* ── STEPPER ──────────────────────────────────────────────── */
body.tool-page .tool-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
body.tool-page .tool-step-dot {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.tool-page .tool-step-num {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-soft);
  font-family: var(--font-number);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s, color .2s;
}
body.tool-page .tool-step-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
body.tool-page .tool-step-dot.is-active .tool-step-num {
  background: var(--color-clay);
  border-color: var(--color-clay);
  color: #fff;
}
body.tool-page .tool-step-dot.is-active .tool-step-label { color: var(--color-clay-deep); }
body.tool-page .tool-step-dot.is-done .tool-step-num {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: #fff;
}
body.tool-page .tool-step-connector {
  flex: 1;
  min-width: 16px;
  height: 1.5px;
  background: var(--color-border);
}

/* ── PANEL (step card) ────────────────────────────────────── */
body.tool-page .tool-panel {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
  margin-bottom: 24px;
}
body.tool-page .tool-panel-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}
body.tool-page .tool-panel-lead {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 24px;
}

/* ── CHIP ROW (extends .filter-chip) ──────────────────────── */
body.tool-page .tool-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
body.tool-page .tool-chip {
  padding: 9px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
body.tool-page .tool-chip:hover {
  border-color: var(--color-clay);
  color: var(--color-clay-deep);
  background: rgba(201, 122, 80, 0.08);
}
body.tool-page .tool-chip.is-selected {
  border-color: var(--color-clay);
  background: var(--color-clay);
  color: #fff;
}
body.tool-page .tool-chip:focus-visible {
  outline: 2px solid var(--color-clay);
  outline-offset: 2px;
}

/* ── RANGE SLIDER ─────────────────────────────────────────── */
body.tool-page .tool-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-warm);
  outline: none;
  margin: 14px 0;
}
body.tool-page .tool-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-clay);
  border: 3px solid var(--color-bg-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform .15s;
}
body.tool-page .tool-slider::-webkit-slider-thumb:hover { transform: scale(1.08); }
body.tool-page .tool-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-clay);
  border: 3px solid var(--color-bg-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
body.tool-page .tool-slider::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-warm);
}
body.tool-page .tool-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-clay-deep);
  outline-offset: 2px;
}
body.tool-page .tool-slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-clay-deep);
  outline-offset: 2px;
}
body.tool-page .tool-slider-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text-soft);
}

/* ── MODE TOGGLE (two large pills) ────────────────────────── */
body.tool-page .tool-mode-toggle {
  display: inline-flex;
  padding: 5px;
  gap: 4px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
}
body.tool-page .tool-mode-btn {
  padding: 12px 26px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
body.tool-page .tool-mode-btn.is-active {
  background: var(--color-bg-card);
  color: var(--color-clay-deep);
  box-shadow: var(--shadow-card);
}
body.tool-page .tool-mode-btn:focus-visible {
  outline: 2px solid var(--color-clay);
  outline-offset: 2px;
}

/* ── STACKED COST BAR ─────────────────────────────────────── */
body.tool-page .stack-bar {
  display: flex;
  width: 100%;
  height: 44px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border);
}
body.tool-page .stack-seg {
  height: 100%;
  transition: width 300ms ease;
  min-width: 0;
}
body.tool-page .stack-seg--base     { background: var(--color-clay); }
body.tool-page .stack-seg--sitework { background: var(--tool-sitework); }
body.tool-page .stack-seg--land     { background: var(--color-teal); }
body.tool-page .stack-seg--fees     { background: var(--tool-fees); }

body.tool-page .stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
}
body.tool-page .stack-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--color-text-muted);
}
body.tool-page .stack-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
body.tool-page .stack-legend-swatch--base     { background: var(--color-clay); }
body.tool-page .stack-legend-swatch--sitework { background: var(--tool-sitework); }
body.tool-page .stack-legend-swatch--land     { background: var(--color-teal); }
body.tool-page .stack-legend-swatch--fees     { background: var(--tool-fees); }

/* ── MODEL CARD IMAGE (budget picker + reverse tiers) ─────── */
body.tool-page .tool-model-img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-bg-warm);
}

/* ── TIER MODIFIERS (reverse mode model cards) ────────────── */
body.tool-page .tier-fit {
  outline: 2px solid var(--tool-fit);
  outline-offset: -2px;
  position: relative;
}
body.tool-page .tier-fit::after {
  content: "\2713";  /* check mark */
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tool-fit);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
body.tool-page .tier-stretch {
  outline: 2px solid var(--tool-stretch);
  outline-offset: -2px;
}
body.tool-page .tier-stretch .model-card-price-val,
body.tool-page .tier-stretch .lot-price { color: var(--tool-stretch); }
body.tool-page .tier-out {
  opacity: 0.45;
  transition: opacity 300ms ease;
}

/* ── CTA ROW (3 cards) ────────────────────────────────────── */
body.tool-page .tool-cta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
body.tool-page .tool-cta-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-clay);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.tool-page .tool-cta-card h3 {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--color-teal);
}
body.tool-page .tool-cta-card p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  flex: 1;
}

/* ── RESULT TOTAL + DISCLAIMER ────────────────────────────── */
body.tool-page .tool-result-total {
  font-family: var(--font-number);
  font-size: 46px;
  font-weight: 500;
  color: var(--color-teal);
  letter-spacing: -1px;
  line-height: 1.05;
}
body.tool-page .tool-result-sub {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
body.tool-page .tool-disclaimer {
  font-size: 12px;
  color: var(--color-text-soft);
  line-height: 1.6;
  margin-top: 20px;
  max-width: 640px;
}

/* ── LOT FINDER ───────────────────────────────────────────── */
body.tool-page .lot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
body.tool-page .lot-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-rule);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
body.tool-page .lot-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
body.tool-page .lot-photo {
  width: 100%;
  height: 180px;
  background: var(--color-bg-warm);
  overflow: hidden;
  position: relative;
}
body.tool-page .lot-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.tool-page .lot-body {
  padding: 22px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
body.tool-page .lot-price {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-teal);
  letter-spacing: -0.4px;
  margin-bottom: 4px;
}
body.tool-page .lot-address {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}
body.tool-page .lot-city {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}
body.tool-page .lot-badge--owned,
body.tool-page .lot-badge--mls {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  z-index: 2;
}
body.tool-page .lot-badge--owned {
  background: var(--color-clay);
  color: #fff;
}
body.tool-page .lot-badge--mls {
  background: var(--color-teal);
  color: #fff;
}
body.tool-page .lot-pair-expander {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-rule);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-clay-deep);
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  text-align: left;
  width: 100%;
}
body.tool-page .lot-pair-expander:focus-visible {
  outline: 2px solid var(--color-clay);
  outline-offset: 2px;
}
body.tool-page .lot-attribution {
  font-size: 11px;
  color: var(--color-text-soft);
  margin-top: 12px;
  line-height: 1.5;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  body.tool-page .tool-panel { padding: 26px; }
  body.tool-page .tool-cta-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  body.tool-page .tool-panel { padding: 22px; }
  body.tool-page .tool-result-total { font-size: 38px; }
  body.tool-page .tool-mode-btn { padding: 12px 20px; }
  body.tool-page .lot-grid { grid-template-columns: 1fr; }
  body.tool-page .stack-legend { gap: 12px; }
}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.tool-page .stack-seg,
  body.tool-page .tier-out,
  body.tool-page .lot-card,
  body.tool-page .tool-slider::-webkit-slider-thumb {
    transition: none;
  }
}

/* ── DARK MODE (system preference) ────────────────────────────
   Remap the design-system tokens on tool pages so the shared nav,
   footer, and cards inherit a dark scheme automatically. Contrast
   checked: body text (#EDE6DA / #B5AB9C) on the dark backgrounds
   clears 4.5:1; clay is reserved for large text and filled buttons
   with white labels. */
@media (prefers-color-scheme: dark) {
  body.tool-page {
    --color-bg:          #201C17;
    --color-bg-soft:     #282218;
    --color-bg-warm:     #2E2820;
    --color-bg-card:     #2A251E;
    --color-bg-dark:     #141D18;

    --color-text:        #EDE6DA;
    --color-text-muted:  #B5AB9C;
    --color-text-soft:   #948A7B;

    --color-border:      #3A342B;
    --color-rule:        #352F26;

    --color-teal:        #7FB0C4;

    --tool-fees:         #B7A585;
  }
  /* --color-teal is remapped light above for text legibility. Surfaces that
     fill with teal and carry white labels must stay dark to keep that text
     readable, so pin them to the (un-remapped, still dark) teal-deep. */
  body.tool-page .tool-step-dot.is-done .tool-step-num,
  body.tool-page .lot-badge--mls {
    background: var(--color-teal-deep);
    border-color: var(--color-teal-deep);
  }
  /* Keep chip/legend tints legible against the darker card. */
  body.tool-page .tool-chip:hover {
    background: rgba(201, 122, 80, 0.18);
  }
  /* Soften model photos slightly so they sit calmly on the dark cards. */
  body.tool-page .tool-model-img {
    filter: brightness(0.9);
  }
}