/* Michael's SoCal Intel — shared styles */
:root{
  /* Dark-forest-green brand scheme (from the Estate Properties gradient ad) */
  --navy:#123a22; --navy-dark:#0c2817; --navy-800:#17492b;
  --brand-grad:linear-gradient(115deg,#0a1f12 0%,#123a22 46%,#1e5c33 100%);
  --bg:#eef4ee; --card:#ffffff; --line:#dde7de; --line-2:#eaf1ea;
  --text:#1f2937; --muted:#5b6b60; --muted-2:#8ba090;
  --accent:#2f9e57; --accent-light:#5cd98a;
  --green:#16a34a; --blue:#2563eb; --red:#dc2626; --gray:#94a3b8;
  --amber:#d97706;
  --radius:14px; --shadow:0 1px 3px rgba(12,40,23,.08),0 8px 24px rgba(12,40,23,.07);
  --shadow-lg:0 12px 40px rgba(12,40,23,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Georgia","Times New Roman",serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
body, input, button, select{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.serif{font-family:Georgia,"Times New Roman",serif}

/* Header */
.site-header{
  background:var(--brand-grad); color:#fff; position:sticky; top:0; z-index:1000;
  box-shadow:0 2px 14px rgba(10,31,18,.30);
}
.nav-inner{
  max-width:1400px; margin:0 auto; padding:0 22px; height:60px;
  display:flex; align-items:center; gap:18px;
}
.brand{display:flex; align-items:center; gap:11px}
.brand .logo{width:30px;height:30px;flex:0 0 30px}
.brand .brandtext{display:flex; flex-direction:column; line-height:1.05}
.brand .title{font-family:Georgia,serif; font-weight:700; font-size:19px; letter-spacing:.2px; white-space:nowrap}
.brand .tagline{color:var(--accent-light); font-size:11px; font-weight:600; letter-spacing:.3px; white-space:nowrap; margin-top:2px}
.brand .region{color:var(--accent-light); font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; margin-left:2px}

/* private-server footer notation */
.mv-foot{font-size:11px; color:var(--muted-2); text-align:center; letter-spacing:.2px}
.mv-foot-map{position:absolute; left:50%; transform:translateX(-50%); bottom:3px; z-index:500;
  background:rgba(255,255,255,.72); padding:3px 12px; border-radius:10px; pointer-events:none;
  box-shadow:0 1px 4px rgba(12,40,23,.12)}
.mv-foot-page{max-width:1200px; margin:44px auto 0; padding:18px 22px 34px; border-top:1px solid var(--line-2)}
.nav-links{display:flex; align-items:center; gap:4px; margin-left:24px}
.nav-links a{
  padding:8px 14px; border-radius:9px; font-size:14.5px; font-weight:600; color:#c7d6ea; transition:.15s;
}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.08)}
.nav-links a.active{color:#fff; background:rgba(255,255,255,.16)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.btn-search{
  display:flex; align-items:center; gap:8px; background:var(--navy-dark);
  color:#d8efe0; border:1px solid rgba(255,255,255,.16); padding:8px 14px; border-radius:9px;
  font-size:14px; cursor:pointer; font-weight:600;
}
.btn-search:hover{background:#0c2817}
.link-signin{color:#c7d6ea; font-size:14.5px; font-weight:600; padding:8px 6px}
.link-signin:hover{color:#fff}
.btn-signup{
  background:var(--accent-light); color:#0b2545; padding:9px 16px; border-radius:9px;
  font-weight:700; font-size:14px; cursor:pointer; border:none;
}
.btn-signup:hover{background:#5cd98a}

/* Layout */
.page{max-width:1200px; margin:0 auto; padding:34px 22px 70px}
.page-narrow{max-width:940px}
h1.page-title{font-family:Georgia,serif; font-size:34px; font-weight:700; margin:0 0 8px; color:#123a22}
.page-sub{color:var(--muted); font-size:16px; margin:0 0 26px; line-height:1.5}

/* Cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card-pad{padding:22px}

/* Controls */
.seg{display:inline-flex; background:#e6efe8; border-radius:10px; padding:4px; gap:3px}
.seg button{
  border:none; background:transparent; padding:7px 15px; border-radius:8px; cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--muted); transition:.12s;
}
.seg button.active{background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(16,42,77,.12)}
.seg button:disabled{opacity:.55; cursor:not-allowed}
.chip-lock{font-size:10px}
select.mv-select, input.mv-input{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:#fff;
  font-size:14.5px; color:var(--text); appearance:none;
}
select.mv-select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 13px center; padding-right:34px}
label.ctl-label{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--muted-2); margin:0 0 8px}
.btn-primary{background:var(--navy); color:#fff; border:none; padding:11px 20px; border-radius:10px; font-weight:600; font-size:14.5px; cursor:pointer}
.btn-primary:hover{background:var(--navy-800)}
.btn-ghost{background:#fff; color:var(--navy); border:1px solid var(--line); padding:11px 20px; border-radius:10px; font-weight:600; font-size:14.5px; cursor:pointer}
.btn-ghost:hover{border-color:var(--accent-light); color:var(--accent)}

/* Map */
#map{position:absolute; inset:60px 0 0 0}
.map-badge{
  position:absolute; top:76px; left:16px; z-index:600; background:#fff; border:1px solid var(--line);
  padding:7px 13px; border-radius:20px; font-size:13px; font-weight:700; color:var(--navy); box-shadow:var(--shadow);
}
.map-legend{
  position:absolute; bottom:22px; left:16px; z-index:600; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; box-shadow:var(--shadow); min-width:150px;
}
.map-legend h4{margin:0 0 10px; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted-2)}
.leg-row{display:flex; align-items:center; gap:9px; font-size:13px; margin:6px 0; color:#334155}
.leg-dot{width:11px;height:11px;border-radius:50%}
.map-cta{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:600;
  background:var(--navy); color:#fff; padding:12px 22px; border-radius:24px; font-size:14px; font-weight:600;
  box-shadow:var(--shadow-lg);
}
.metric-switch{
  position:absolute; top:76px; left:50%; transform:translateX(-50%); z-index:600;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  display:flex; gap:2px; padding:5px;
}
.metric-switch button{border:none;background:transparent;padding:7px 13px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.metric-switch button.active{background:var(--navy);color:#fff}
.city-marker{border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer}

/* Popups / leaflet tweaks */
.leaflet-popup-content-wrapper{border-radius:14px; box-shadow:var(--shadow-lg); padding:0}
.leaflet-popup-content{margin:0; width:270px !important}
.pop{padding:16px 17px}
.pop h3{margin:0; font-family:Georgia,serif; font-size:18px; color:#123a22}
.pop .pcounty{color:var(--muted); font-size:12px; margin:2px 0 12px; font-weight:600}
.pop .pgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px}
.pop .pstat .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted-2); font-weight:700}
.pop .pstat .v{font-size:16px; font-weight:700; color:#1f2937; margin-top:1px}
.pop .pbadge{display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; margin-bottom:12px}
.pop .plink{display:block; margin-top:14px; text-align:center; background:var(--navy); color:#fff; padding:9px; border-radius:9px; font-weight:600; font-size:13.5px}

/* City detail side-panel */
.detail-panel{
  position:absolute; top:60px; right:0; bottom:0; width:384px; max-width:92vw;
  background:#fff; z-index:900; border-left:1px solid var(--line);
  box-shadow:-10px 0 34px rgba(16,42,77,.16); overflow-y:auto;
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.detail-panel.open{transform:none}
.dp-close{
  position:absolute; top:14px; right:16px; background:#f1f5f9; border:none; width:30px; height:30px;
  border-radius:8px; font-size:20px; line-height:1; color:#475569; cursor:pointer; z-index:2;
}
.dp-close:hover{background:#e2e8f0}
.dp-head{padding:24px 26px 18px; border-bottom:1px solid var(--line-2)}
.dp-month{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted-2)}
.dp-live{color:var(--green); margin-left:8px; font-weight:700}
.dp-head h2{font-family:Georgia,serif; font-size:25px; color:#123a22; margin:5px 0 2px}
.dp-county{font-size:13px; color:var(--muted); font-weight:600; margin-bottom:12px}
.dp-badge{display:inline-block; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700}
.dp-desc{font-size:13.5px; color:#475569; line-height:1.55; margin:12px 0 0}
.dp-sec{padding:18px 26px; border-bottom:1px solid var(--line-2)}
.dp-sec h4{margin:0 0 15px; font-size:11px; text-transform:uppercase; letter-spacing:.9px; color:var(--navy); font-weight:700}
.dp-grid{display:grid; grid-template-columns:1fr 1fr; gap:17px 20px}
.dp-k{font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted-2); font-weight:700}
.dp-v{font-size:16px; font-weight:700; color:#1f2937; margin-top:3px}
.dp-yoy{font-size:11.5px; font-weight:700; margin-left:3px; white-space:nowrap}
.dp-yoy.up{color:var(--green)} .dp-yoy.down{color:var(--red)}
.dp-src{margin-top:12px; font-size:11px; color:var(--muted-2); line-height:1.4}
.dp-link{display:block; margin:20px 26px 30px; text-align:center; background:var(--navy); color:#fff; padding:12px; border-radius:10px; font-weight:600; font-size:14px}
.dp-link:hover{background:var(--navy-800)}

/* Graphs horizontal filter bar */
.graph-filters{display:flex; flex-wrap:wrap; gap:16px 18px; align-items:flex-end; margin-bottom:18px}
.graph-filters .gf{flex:1 1 150px; min-width:140px}
.graph-filters .ctl-label{margin-bottom:7px}
@media(max-width:820px){ .graph-filters .gf{flex:1 1 45%} }

/* Stat tiles */
.stat-row{display:grid; gr