/* ============================================================
   real-estate.css
   Card, category-grid, and micro-interaction styling for the
   Real Estate category homepage. Same pattern as finance.css /
   salary.css: base tokens, .fcard, .catcard, .feat-pill, .fstat,
   .scenario-list, .viz-strip, .calc-viz, donut-*, and rate-bars
   are copied verbatim from salary.css so the shared reveal script
   (bars rising, donut sweeping, counters, rolling feature pill)
   keeps working identically without any changes to that script's
   assumptions about class names or structure.

   Two small, additive extensions live at the bottom, both scoped
   to this page only:
   - .compare-bar-buy / .compare-bar-rent: Rent vs Buy needs two
     *named* colours (buy vs rent), not the muted/winner pairing
     Job Offer Comparison uses, since here both sides are things
     the calculator itself teaches you to recognise by colour.
   - .donut-arc-price / .donut-arc-duty, legend-dot .price/.duty:
     Stamp Duty's 2-segment donut (price vs duty+registration),
     using the exact same donut-track/donut-arc/donut-center
     mechanics as the CTC card, just a different pair of segment
     names (the reveal script on this page reads segment names
     from each card's own data-segments attribute, generalised
     slightly from the CTC-only version so one script can drive
     both a 4-segment donut and a 2-segment one).
   ============================================================ */

/* ---------- base ---------- */
body{ font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; }
.font-num{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }

/* ---------- sticky nav shadow-on-scroll (matches every other homepage) ---------- */
#mainNav{ transition:box-shadow .25s ease; }
#mainNav.scrolled{ box-shadow:0 1px 2px rgba(20,20,50,.06); }

/* ---------- design tokens (category accent colors) ---------- */
:root{
  --c-salary:#2A3AAF;  --c-salary-tint:#eef0fb;
  --c-finance:#0F9D6B; --c-finance-tint:#e6f7f0;
  --c-docs:#C2760C;    --c-docs-tint:#fdf1e0;
  --c-tax:#7C3AED;     --c-tax-tint:#f2ecfd;
  --c-estate:#0284C7;  --c-estate-tint:#e0f2fe;
  --c-units:#E11D63;   --c-units-tint:#fde9f0;
  --tag-text:#4a4a6a;
  --surface:#fff;
  --slate-tint:#e9e9ef;
}
html.dark{
  --c-salary:#6B7FE8;  --c-salary-tint:#1e2060;
  --c-finance:#34D399; --c-finance-tint:#0f2a23;
  --c-docs:#F2B94A;    --c-docs-tint:#332409;
  --c-tax:#B794F6;     --c-tax-tint:#2a2049;
  --c-estate:#38BDF8;  --c-estate-tint:#0c2d3d;
  --c-units:#F472B6;   --c-units-tint:#341022;
  --tag-text:#9898bb;
  --surface:#1a1a2e;
  --slate-tint:#2a2a45;
}

/* ---------- section tag chip ---------- */
.section-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tag-text); margin-bottom:16px;
}
.section-tag .eq{
  width:18px; height:18px; border-radius:5px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--tag-tint, var(--c-estate-tint));
  color:var(--tag-color, var(--c-estate));
  font-size:12px; font-weight:700;
}

/* ---------- category grid tiles ---------- */
.catcard{ position:relative; overflow:hidden; }
.catcard::before{
  content:''; position:absolute; top:0; left:0; right:0; height:0; background:var(--accent); transition:height .22s ease;
}
.catcard:hover::before{ height:3px; }
.catcard .cat-icon{ transition:transform .22s cubic-bezier(.34,1.56,.64,1); }
.catcard:hover .cat-icon{ transform:scale(1.12) rotate(-6deg); }

/* ---------- tool card grid ---------- */
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .fgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .fgrid{ grid-template-columns:1fr; } }

.fcard{
  position:relative; background:var(--surface, #fff); border:1px solid var(--border, rgba(0,0,0,.1)); border-radius:16px;
  padding:18px; transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column; overflow:hidden;
}
html.dark .fcard{ background:#1a1a2e; border-color:rgba(255,255,255,.1); }
.fcard:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(20,20,50,.2); }
html.dark .fcard:hover{ box-shadow:0 14px 30px -14px rgba(0,0,0,.5); }
.fcard.is-soon{ opacity:.65; }

.fcard .ficon{ width:38px; height:38px; border-radius:10px; background:var(--accent-tint, #e0f2fe); color:var(--accent, #0284C7); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; font-family:'IBM Plex Mono',monospace; margin-bottom:14px; flex-shrink:0; align-self:flex-start; }
.fcard .fbadge{ font-size:10px; font-weight:600; padding:2px 7px; border-radius:5px; margin-left:6px; vertical-align:middle; }
.fcard h3{ font-size:15px; font-weight:600; margin:0 0 6px; letter-spacing:-.01em; color:#1a1a2e; }
html.dark .fcard h3{ color:#e8e8f5; }
.fcard p.desc{
  font-size:12.5px; color:#4a4a6a; line-height:1.55; margin:0 0 12px;
  height:39px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
html.dark .fcard p.desc{ color:#9898bb; }

.fcard .fcta{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--c-estate); text-decoration:none; margin-top:auto; padding-top:8px; }
.fcard .fcta span{ transition:transform .15s ease; }
.fcard:hover .fcta span{ transform:translateX(3px); }

/* ---------- rolling feature pill ---------- */
.feat-pill{ display:inline-flex; align-items:center; gap:7px; max-width:100%; background:var(--c-estate-tint); border-radius:999px; padding:6px 12px 6px 10px; margin-bottom:10px; }
.feat-dot{ width:6px; height:6px; border-radius:50%; background:var(--c-estate); flex-shrink:0; }
.feat-viewport{ position:relative; height:14px; overflow:hidden; flex:1; min-width:0; }
.feat-text{
  position:absolute; left:0; top:0; right:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:11px; font-weight:600; color:var(--c-estate); line-height:14px;
  transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .6s ease;
}
.feat-a{ transform:translateY(0); opacity:1; }
.feat-b{ transform:translateY(100%); opacity:0; }

/* ---------- "try a real example" scenario list ---------- */
.scenario-list{
  display:flex; flex-direction:column; background:var(--surface, #fff);
  border:1px solid rgba(0,0,0,.1); border-radius:14px; overflow:hidden;
}
html.dark .scenario-list{ border-color:rgba(255,255,255,.1); }
.scenario-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.06);
  transition:background .15s ease, padding-left .15s ease;
}
html.dark .scenario-row{ border-color:rgba(255,255,255,.06); }
.scenario-list a:last-child{ border-bottom:none; }
.scenario-row:hover{ background:var(--c-estate-tint); padding-left:24px; }
.scenario-q{ font-size:13.5px; font-weight:500; color:#1a1a2e; }
html.dark .scenario-q{ color:#e8e8f5; }
.scenario-arrow{ font-size:16px; color:var(--c-estate); flex-shrink:0; transition:transform .15s ease; }
.scenario-row:hover .scenario-arrow{ transform:translateX(3px); }

/* ============================================================
   PAGE-SPECIFIC: shared viz row (icon box left + data column
   right), used by all five cards on this page so they read as
   one system, exactly like CTC/Freelance/Job-Offer do on Salary.
   ============================================================ */
.calc-viz{ display:flex; align-items:center; gap:20px; height:130px; margin-bottom:16px; }
.viz-icon{ width:100px; height:108px; flex-shrink:0; position:relative; display:flex; align-items:center; justify-content:center; }
.viz-data{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:7px; }

/* ---------- donut (Stamp Duty: price vs duty+registration) ---------- */
.donut-svg{ width:100px; height:100px; transform:rotate(-90deg); }
.donut-track{ fill:none; stroke:var(--slate-tint); stroke-width:9; }
.donut-arc{ fill:none; stroke-width:9; stroke-linecap:round; }
.donut-arc-price{ stroke:#c7cbd6; }
html.dark .donut-arc-price{ stroke:#44475c; }
.donut-arc-duty{ stroke:var(--c-estate); }
.donut-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:76px; line-height:1.2;
}
.donut-figure{ font-size:15px; font-weight:700; color:#1a1a2e; letter-spacing:-.01em; }
html.dark .donut-figure{ color:#e8e8f5; }
.donut-sub{ font-size:8px; color:#8888aa; margin-top:4px; letter-spacing:.01em; }

.legend-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.legend-label{ display:flex; align-items:center; gap:6px; font-size:11px; color:#4a4a6a; }
html.dark .legend-label{ color:#9898bb; }
.legend-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.legend-dot.price{ background:#c7cbd6; }
html.dark .legend-dot.price{ background:#44475c; }
.legend-dot.duty{ background:var(--c-estate); }
.legend-pct{ font-size:12.5px; font-weight:700; color:#1a1a2e; }
html.dark .legend-pct{ color:#e8e8f5; }

/* ---------- rising / comparison bars (Rent vs Buy, Capital Gains,
   Rental Yield, Construction Cost) ---------- */
.rate-bars{ width:76px; height:92px; }
.rate-bar{ fill:var(--c-estate); }
.rate-baseline{ stroke:rgba(0,0,0,.08); stroke-width:1; }
html.dark .rate-baseline{ stroke:rgba(255,255,255,.08); }

.rate-label{ font-size:12px; color:#4a4a6a; }
html.dark .rate-label{ color:#9898bb; }
.rate-figure{ display:flex; align-items:baseline; gap:4px; }
.rate-figure .out{ font-size:22px; font-weight:700; color:#1a1a2e; letter-spacing:-.01em; }
html.dark .rate-figure .out{ color:#e8e8f5; }
.rate-unit{ font-size:12px; color:#8888aa; }
.rate-sub{ font-size:11px; color:#8888aa; margin:0; }

/* Job-Offer-style generic comparison (Capital Gains: old method wins by being lower) */
.compare-bar-muted{ fill:var(--c-salary); opacity:.35; }
.compare-bar-winner{ fill:#0F9D6B; opacity:1; }

/* Real estate's own named-category comparison (Rent vs Buy: both sides are
   things the calculator teaches you to recognise by colour, not a generic
   muted/winner pairing). */
.compare-bar-buy{ fill:var(--c-salary); opacity:1; }
.compare-bar-rent{ fill:var(--c-estate); opacity:1; }