/* ============================================================
   Real Estate Price Prediction — Report Theme (plain CSS)
   Loaded via the `css:` key, so no SCSS layer boundary needed.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap');

body { font-family:'Inter',sans-serif; font-size:16px; line-height:1.75; color:#1f2333; }
p { margin-bottom:1.1rem; }
pre, code { font-family:'Fira Code',monospace; font-size:0.83em; }

h1,h2,h3,h4 { font-weight:700; color:#16213e; letter-spacing:-0.01em; }
h1 { font-size:1.95rem; margin-top:2.6rem; border-bottom:3px solid #ef4023; padding-bottom:0.45rem; }
h2 { font-size:1.45rem; margin-top:2.2rem; border-left:5px solid #0f3460; padding-left:0.8rem; }
h3 { font-size:1.18rem; margin-top:1.6rem; color:#0f3460; }

/* Title block */
.quarto-title .title { font-size:2.5rem; font-weight:800; line-height:1.15; color:#16213e; }
.quarto-title .subtitle { font-size:1.25rem; color:#ef4023; font-weight:500; }

/* Stat cards */
.stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1rem; margin:1.8rem 0; }
.stat-card { background:#f8f9ff; border:1px solid #e0e4f5; border-radius:12px;
  padding:1.3rem 1rem; text-align:center; transition:transform .2s,box-shadow .2s; }
.stat-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(15,52,96,.12); }
.stat-number { font-size:1.8rem; font-weight:800; color:#0f3460; display:block; line-height:1.1; }
.stat-label { font-size:0.72rem; color:#777; text-transform:uppercase; letter-spacing:.07em; margin-top:.4rem; }

/* Interactive-plot frame + buttons */
.plot-frame { width:100%; border:1px solid #e0e4f5; border-radius:10px;
  box-shadow:0 4px 18px rgba(0,0,0,.07); background:#fff; }
.plot-actions { display:flex; gap:.6rem; justify-content:flex-end; margin:.5rem 0 1.6rem; }
.view-btn { display:inline-block; background:#0f3460; color:#fff !important; text-decoration:none;
  font-size:0.8rem; font-weight:600; padding:.45rem .9rem; border-radius:7px;
  transition:background .15s; }
.view-btn:hover { background:#ef4023; }
.view-btn.alt { background:#eef1f8; color:#0f3460 !important; }
.view-btn.alt:hover { background:#dfe5f3; }

/* Section intro lede */
.lede { font-size:1.05rem; color:#3a3f52; }

/* Figures */
img { border-radius:8px; box-shadow:0 4px 18px rgba(0,0,0,.08); max-width:100%; }
figure { margin:1.6rem 0; }
figcaption,.figure-caption { font-size:0.82em; color:#777; font-style:italic; text-align:center; margin-top:.5rem; }
.svg-fig svg { width:100%; height:auto; background:#fff; border-radius:10px;
  box-shadow:0 4px 18px rgba(0,0,0,.06); padding:0.5rem; }

/* gt tables */
table { font-size:0.9rem; }

/* dataset preview scroll */
.scroll-table { overflow-x:auto; }

/* divider */
.section-divider { border:none; height:2px;
  background:linear-gradient(90deg,#ef4023,transparent); margin:3rem 0; }

/* TOC on the right reads better a touch narrower */
#TOC { font-size:0.85rem; }

/* Callout polish (keeps Quarto's native green/red/blue but softens them) */
.callout { border-radius:10px !important; }
.callout.callout-style-default { border-left-width:5px !important; }