/* Base stylesheet — province-agnostic token system + layout. theme-<code>.css
 * loads AFTER this and overrides only the token VALUES (see theme-alberta.css).
 * Defaults here are the SaskTaxSales green so the seam is visible. */
:root {
  --green:#1d6b4a; --green-700:#16573b; --green-800:#14502f; --green-ink:#1d6b4a;
  --green-tint:#e8f1ec; --green-tint-2:#bcd9c8;
  --blue:#2a6a8f; --blue-700:#225877; --blue-tint:#eaf1f6; --blue-tint-2:#cddfe9;
  --accent:#c99a3b; --accent-deep:#a87e28;
  --ink:#1f2a30; --ink-2:#5d6b72; --ink-3:#8a929a;
  --paper:#f6f5f0; --surface:#fff; --cream:#f3f8f5; --line:#e7e4dc; --line-2:#d4d0c6;
  --status-soon-ink:#a86a13; --status-soon-bg:#fbf2e1; --status-soon-line:#e6d2a3; --status-soon-accent:#d8a445;
  --focus-ring:0 0 0 3px rgba(29,107,74,.35);
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --hd:58px;
}
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; font-family:var(--font-sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; }
a { color:var(--green); }

/* Header */
.header { display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:var(--hd); padding:0 20px; background:var(--surface); position:sticky; top:0; z-index:20;
  border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(0,0,0,.02); }
.brand { display:flex; align-items:center; line-height:0; }
.brand .logo { height:20px; width:auto; display:block; }
.header-right { display:flex; align-items:center; gap:16px; }
.freshness { color:var(--ink-2); font-size:12.5px; white-space:nowrap; }
.view { color:var(--green); font-weight:600; font-size:12.5px; text-decoration:none;
  border:1px solid var(--line-2); padding:6px 12px; border-radius:8px; white-space:nowrap; }
.view:hover { border-color:var(--green); background:var(--green-tint); }

/* Layout */
.layout { display:grid; grid-template-columns:408px 1fr; height:calc(100vh - var(--hd)); }
.sidebar { overflow-y:auto; background:var(--surface); border-right:1px solid var(--line); }
.map-wrap { position:relative; }
#map { position:absolute; inset:0; z-index:1; }

/* Sidebar head + value prop */
.sidebar-head { padding:20px 20px 16px; border-bottom:1px solid var(--line); background:var(--paper); }
.eyebrow { display:flex; align-items:center; gap:7px; color:var(--green); font-weight:700;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 6px; }
.dot-live { width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(155,47,34,.5); animation:pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(155,47,34,.45)} 70%{box-shadow:0 0 0 7px rgba(155,47,34,0)} 100%{box-shadow:0 0 0 0 rgba(155,47,34,0)} }
@media (prefers-reduced-motion:reduce){ .dot-live{ animation:none } }
.sh-title { font-family:var(--font-serif); font-weight:600; font-size:22px; line-height:1.15;
  margin:0 0 6px; letter-spacing:-.01em; text-wrap:balance; }
.sh-sub { margin:0 0 16px; color:var(--ink-2); font-size:14px; line-height:1.45; }

/* Early-access signup */
.signup { padding:14px; background:var(--green-tint); border:1px solid var(--green-tint-2);
  border-radius:12px; }
.signup-t { display:block; font-size:13px; color:var(--ink); line-height:1.45; margin-bottom:10px; }
.signup-r { display:flex; gap:8px; }
.signup input { flex:1; min-width:0; padding:10px 12px; border:1px solid var(--line-2);
  border-radius:9px; font-size:14px; font-family:inherit; background:var(--surface); }
.signup input:focus-visible { outline:none; box-shadow:var(--focus-ring); border-color:var(--green); }
.signup-msg { margin:10px 0 0; font-size:13px; font-weight:600; }
.signup-msg.ok { color:var(--green-ink); } .signup-msg.err { color:#a3352a; }

.btn { background:var(--green); color:#fff; border:none; border-radius:9px; padding:10px 16px;
  font-weight:600; font-size:14px; font-family:inherit; cursor:pointer; white-space:nowrap;
  transition:background .12s; }
.btn:hover { background:var(--green-700); }
.btn:focus-visible { outline:none; box-shadow:var(--focus-ring); }

/* List */
.list-head { position:sticky; top:0; z-index:2; padding:9px 20px; background:var(--surface);
  border-bottom:1px solid var(--line); color:var(--ink-2); font-size:12px; font-weight:600;
  letter-spacing:.02em; text-transform:uppercase; }
/* Listing card — hierarchy mirrors SaskTaxSales (municipality eyebrow, serif
   subject, mono secondary legal, auction-date band). */
.listing { display:block; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit;
  background:var(--surface); border:none; border-bottom:1px solid var(--line);
  padding:15px 20px 16px; position:relative; transition:background .1s; }
.listing:hover { background:var(--cream); }
.listing.is-active { background:var(--cream); box-shadow:inset 3px 0 0 var(--green); }
.listing:focus-visible { outline:2px solid var(--green); outline-offset:-2px; }
.listing .ic { width:14px; height:14px; flex:none; }
.listing-muni-lead { display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:7px; font-size:12.5px; font-weight:700; color:var(--ink-2); }
.listing-muni-lead .muni-name { display:flex; align-items:center; gap:6px; min-width:0; }
.listing-muni-lead .muni-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.listing-muni-lead .ic { color:var(--ink-3); }
.listing-type { font-size:10.5px; font-weight:700; letter-spacing:.02em; line-height:1.7;
  padding:1px 8px; border-radius:999px; white-space:nowrap; flex:none; }
.lt-auction { color:var(--green-ink); background:var(--green-tint); border:1px solid var(--green-tint-2); }
.listing-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.listing-legal { font-family:var(--font-serif); font-weight:600; font-size:18px; line-height:1.25;
  color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.listing-status { font-size:12.5px; font-weight:700; white-space:nowrap; flex:none; }
.listing-status.s-open { color:var(--green-ink); }
.listing-secondary { margin-top:5px; color:var(--ink-3); font-family:var(--font-mono);
  font-size:12px; overflow-wrap:anywhere; }
.listing-deadline { display:flex; align-items:center; gap:8px; margin-top:11px; padding:9px 11px;
  background:var(--green-tint); border-radius:9px; font-size:13.5px; color:var(--green-ink); }
.listing-deadline .ic { width:17px; height:17px; color:var(--green-ink); }
.listing-deadline > span:not(.pill) { display:inline-flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0; }
.listing-deadline .lab { font-weight:400; }
.listing-deadline .big { font-weight:700; }
.listing-deadline .pill { margin-left:auto; background:#fff; border:1px solid var(--green-tint-2);
  padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; flex:none;
  display:inline-flex; align-items:center; gap:5px; }
.listing-deadline .pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill-open { color:var(--green-ink); }
.pill-closing { color:var(--status-soon-ink); border-color:var(--status-soon-line); background:var(--status-soon-bg); }
.pill-soon { color:var(--status-soon-ink); border-color:var(--status-soon-accent); background:var(--status-soon-bg); }

.empty { padding:26px 20px; color:var(--ink-3); font-size:14px; text-align:center; }
.muted { color:var(--ink-3); font-size:12px; }

/* Leaflet popup polish */
.leaflet-popup-content { font-family:var(--font-sans); font-size:13px; line-height:1.5; }
.leaflet-popup-content b { color:var(--ink); }

/* Mobile (SaskTaxSales parity: the map is desktop-width; below it the page
   becomes a single scrolling column, map hero first, then the list). */
@media (max-width:900px) {
  .layout { display:flex; flex-direction:column; height:auto; }
  .map-wrap { order:1; height:42vh; flex:none; }
  .sidebar { order:2; overflow:visible; border-right:none; }
  .list-head { position:static; }
  .freshness { display:none; }
  .brand .logo { height:18px; }
  .view { padding:5px 11px; }
}
