/* HotelHinge web app — LOCKED design system.
   Source of truth: 00 - Scripts/export_preview.py PAGE_CSS (the Four Seasons gold standard) +
   09 - Web App/DESIGN.md. The property page is a faithful port; the app chrome (topbar, search,
   filters, auth, paywall) is restyled to the same tokens. Stripe-meets-CoStar, institutional. */
:root{
  --ink:#1a2230; --ink2:#3a4658; --muted:#5b6470; --line:#e7e3da; --line2:#f1efe8;
  --bg:#f6f5f1; --panel:#ffffff; --accent:#163a64; --link:#2f6fb0; --green:#1d7a4d; --gold:#c79320;
  /* event-type accents (transactions + sale tags). Tuned so white tag text clears AA (>=4.5:1). */
  --sale:#2f6fb0; --refinance:#0c7d7d; --development:#a0660c; --opening:#1d7a4d;
  --conversion:#7a4fcf; --other:#6b7480;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;font-size:13px;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
/* keyboard focus: a single visible ring for every interactive surface (mouse focus unaffected) */
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:3px}
.search input:focus-visible,.field input:focus-visible{outline:2px solid var(--link);outline-offset:1px}
.muted{color:var(--muted)}.mono{font-variant-numeric:tabular-nums;font-family:var(--mono)}
.dash{color:var(--muted)}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.eyebrow b{color:var(--accent)}

/* ── top bar (white, premium) ─────────────────────────────────────────────── */
/* full-width sticky bar; its content is centered to the same 1200/28 edge as the page windows */
.topbar{height:56px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.topbar-in{display:flex;align-items:center;gap:16px;height:56px;max-width:1200px;margin:0 auto;padding:0 28px}
.topbar-in .topsel{margin-left:auto}  /* push the market/gear/avatar cluster to the container's right edge */
.brand{font-weight:800;letter-spacing:.13em;font-size:15px;cursor:pointer;color:var(--ink)}
.brand span{color:var(--link)}
.search{flex:1;max-width:640px;position:relative}
.search input{width:100%;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--bg);
  color:var(--ink);padding:0 12px 0 34px;font-size:13px;outline:none}
.search input::placeholder{color:#9aa6b4}
.search input:focus{border-color:var(--link);background:#fff;box-shadow:0 0 0 3px rgba(47,111,176,.10)}
.search .ico{position:absolute;left:11px;top:8px;color:#9aa6b4}
.search kbd{position:absolute;right:8px;top:8px;font-size:10px;color:#9aa6b4;border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;font-family:var(--mono);background:#fff}
.topsel{height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 8px;
  font-size:12.5px;color:var(--ink);max-width:230px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:12px;cursor:pointer}

/* ── page containers ──────────────────────────────────────────────────────── */
.wrap{max-width:1120px;margin:26px auto;padding:0 22px}
.layout{display:grid;grid-template-columns:248px 1fr;gap:0;align-items:start}
.filters{position:sticky;top:56px;height:calc(100vh - 56px);overflow:auto;border-right:1px solid var(--line);
  background:var(--panel);padding:18px 16px}
.main{padding:22px 24px;min-height:calc(100vh - 56px);max-width:1180px;min-width:0}

/* ── cards / rows ─────────────────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  box-shadow:0 1px 2px rgba(20,30,50,.04);display:flex;flex-direction:column}
.card>h3{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.card>h3 .note{color:var(--muted);font-weight:600;text-transform:none;letter-spacing:0;margin-left:6px;font-size:11px}
.fill{flex:1;display:flex;flex-direction:column}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;align-items:stretch}
.onecol{margin-top:18px}

/* ── hero + KPIs ──────────────────────────────────────────────────────────── */
.hero{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 26px;
  box-shadow:0 1px 2px rgba(20,30,50,.04)}
.htop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero .nm{font-size:26px;font-weight:700;letter-spacing:-.01em;margin:0}
.herostars svg{vertical-align:middle}
.status{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--green);background:#e6f6ee;
  padding:4px 11px;border-radius:30px;text-transform:uppercase}
.hero .backlink{margin:0 0 12px;font-size:12.5px}
.hero .brandline{color:var(--ink2);font-size:13px;margin-top:7px;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);margin-top:20px;border:1px solid var(--line);
  border-radius:12px;overflow:hidden}
.kpi{padding:13px 10px;text-align:center;border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi .kv{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.kpi .kl{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* ── snapshot definition list ─────────────────────────────────────────────── */
.dl{display:flex;flex-direction:column}
.dlrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--line2)}
.dlrow:last-child{border-bottom:0}
.dlrow dt{margin:0;color:var(--muted);font-size:12.5px}
.dlrow dd{margin:0;font-weight:600;font-size:13.5px;color:var(--ink);text-align:right}

/* ── map ──────────────────────────────────────────────────────────────────── */
.map{flex:1;min-height:240px;border-radius:10px;border:1px solid var(--line);overflow:hidden;z-index:1}
.mapnote{font-size:10.5px;color:var(--muted);margin-top:8px}

/* ── summary ──────────────────────────────────────────────────────────────── */
.summary .lead{font-size:14px;color:var(--ink2);margin:0}
.summary .subhead{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.bullets{margin:0;padding-left:18px}.bullets li{font-size:13px;color:var(--ink2);margin-bottom:6px}

/* ── data tables (sale history, comps, search results) ────────────────────── */
.dtable{width:100%;border-collapse:collapse;font-size:13px}
.dtable th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:0 8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.dtable td{padding:9px 8px;border-bottom:1px solid var(--line2);vertical-align:middle}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable .price{font-weight:700;color:var(--green);white-space:nowrap}
/* Sale History: 5 cols (Date | Price | Seller | Buyer | Source) — even, predictable flow; long LLC names + jurisdictions wrap cleanly instead of forcing overflow */
.card.sale .dtable{table-layout:fixed}
.card.sale .dtable th:nth-child(1),.card.sale .dtable td:nth-child(1){width:13%;white-space:nowrap}
.card.sale .dtable th:nth-child(2),.card.sale .dtable td:nth-child(2){width:15%;white-space:nowrap}
.card.sale .dtable th:nth-child(n+3),.card.sale .dtable td:nth-child(n+3){width:24%;overflow-wrap:anywhere}
.comptbl th{cursor:pointer;user-select:none}.comptbl th:hover{color:var(--link)}
.comptbl th.asc::after{content:" \25B2";font-size:8px}
.comptbl th.desc::after{content:" \25BC";font-size:8px}
.comptbl td a{font-weight:600}
.comptbl svg.stars{vertical-align:middle}
.bsub{font-size:11px;color:var(--muted);font-weight:500;margin-top:1px}

/* clickable result rows (search/transactions) */
.rtable tbody tr{cursor:pointer}
.rtable tbody tr:hover{background:#f6f9fd}
.rtable tbody tr.sel{background:#eef4fb}
.pname{font-weight:600;color:var(--ink)}
.sub{color:var(--muted);font-size:11.5px}
.num{font-family:var(--mono);text-align:right;white-space:nowrap}
.tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:5px;color:#fff;
  text-transform:capitalize;letter-spacing:.02em}
.t-sale{background:var(--sale)}.t-refinance{background:var(--refinance)}
.t-development{background:var(--development)}.t-opening{background:var(--opening)}
.t-conversion{background:var(--conversion)}.t-other{background:var(--other)}
.pill{display:inline-block;font-size:10.5px;padding:1px 8px;border-radius:20px;background:#eef2f6;color:var(--ink2);border:1px solid var(--line)}
/* news category pill (Transaction=navy, Ownership=gold, Management=teal) - sits inline before a headline title */
.newscat{display:inline-block;font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:4px;color:#fff;
  text-transform:uppercase;letter-spacing:.04em;vertical-align:middle;margin-right:6px;position:relative;top:-1px}
.newscat.t-transaction{background:var(--accent)}
.newscat.t-ownership{background:var(--gold)}
.newscat.t-management{background:var(--refinance)}
.disc{color:var(--muted);font-style:italic}

/* ── SEO / branded-demand chart ───────────────────────────────────────────── */
.seogrid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.seotile{padding:13px 8px;text-align:center;border-right:1px solid var(--line)}
.seotile:last-child{border-right:0}
.seotile .sv{font-size:16px;font-weight:700;color:var(--ink)}
.seotile .sl{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.mom{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px}
.chartwrap{position:relative;flex:1;display:flex;align-items:flex-end;margin-top:14px;min-height:120px}
svg.chart{width:100%;height:auto;display:block;overflow:visible}
svg.chart .grid{stroke:#edf0f5;stroke-width:1;vector-effect:non-scaling-stroke}
svg.chart .area{fill:rgba(47,111,176,.07);stroke:none}
svg.chart .cline{fill:none;stroke:var(--link);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
svg.chart .dot{fill:#fff;stroke:var(--link);stroke-width:1.5;vector-effect:non-scaling-stroke}
svg.chart .hit{fill:transparent;cursor:pointer}
svg.chart .yax{fill:var(--muted);font-size:8px;text-anchor:end}
svg.chart .xax{fill:var(--muted);font-size:8px;text-anchor:middle}
.charttip{position:absolute;transform:translate(-50%,-100%);background:#1a2230;color:#fff;padding:6px 9px;
  border-radius:7px;font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;
  z-index:6;box-shadow:0 4px 12px rgba(20,30,50,.2)}
.charttip.on{opacity:1}
.charttip b{font-weight:700}.charttip span{display:block;color:#aab4c2;font-size:10px;margin-top:1px}
.chartcap{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:8px}

/* ── news ─────────────────────────────────────────────────────────────────── */
.news .fill{min-height:0}
.newslist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;flex:1;min-height:0}
.newslist li{padding-bottom:11px;border-bottom:1px solid var(--line2)}
.newslist li:last-child{border-bottom:0;padding-bottom:0}
.newslist a{font-weight:600;font-size:13.5px;color:var(--ink);display:block}
.newslist a:hover{color:var(--link)}
.newslist .meta{color:var(--muted);font-size:11.5px;margin-top:2px}
.newsrow{cursor:pointer}

/* ── comps scope toggle + pager ───────────────────────────────────────────── */
.scopetoggle{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.scopetoggle button{border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:7px;
  padding:5px 11px;font-size:12px;cursor:pointer}
.scopetoggle button:hover{border-color:var(--link);color:var(--link)}
.scopetoggle button.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.tscroll{overflow-x:auto}
.comps .dtable{font-size:12.5px;min-width:760px}
.comps .dtable td{padding:8px}
.comppager{display:flex;gap:4px;justify-content:flex-end;align-items:center;margin-top:14px;flex-wrap:wrap}
.comppager:empty{display:none}
.comppager button{border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:6px;
  padding:4px 6px;font-size:12px;cursor:pointer;min-width:38px;text-align:center;font-variant-numeric:tabular-nums}
.comppager button[data-pg="prev"],.comppager button[data-pg="next"]{min-width:auto;padding:4px 10px}
.comppager button:hover:not(:disabled){border-color:var(--link);color:var(--link)}
.comppager button.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.comppager button:disabled{opacity:.4;cursor:default}

/* ── search filter rail ───────────────────────────────────────────────────── */
.fgroup{margin-bottom:18px}
.fgroup h4{margin:0 0 8px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{flex:1;border:0;background:#fff;padding:8px 0;font-size:12px;cursor:pointer;color:var(--ink2)}
.seg button.on{background:var(--accent);color:#fff;font-weight:600}
.check{display:flex;align-items:center;gap:7px;padding:3px 0;cursor:pointer;font-size:12.5px}
.check input{accent-color:var(--link)}
select,.rangein{width:100%;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 9px;font-size:12.5px;color:var(--ink)}
.row-2{display:flex;gap:6px}.row-2 .rangein{width:50%}
.btn{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 11px;font-size:12px;cursor:pointer;color:var(--ink2)}
.btn:hover{border-color:var(--link);color:var(--link)}

/* results header + chips */
.rhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.rhead .count{font-size:13px;color:var(--ink2)}.rhead .count b{font-size:18px;color:var(--ink)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{background:#eef4fb;color:var(--accent);border:1px solid #d6e4f4;border-radius:20px;padding:3px 10px;font-size:11.5px;cursor:pointer}
.chip:hover{background:#e2edf9}
.results-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(20,30,50,.04);padding:8px 14px;overflow-x:auto}

/* ── account menu ─────────────────────────────────────────────────────────── */
.acctmenu{position:absolute;right:18px;top:52px;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 28px rgba(20,30,50,.16);padding:12px 14px;z-index:60;min-width:210px}
.acctmenu .who{font-size:11px;color:var(--muted)}
.acctmenu .em{font-weight:600;margin:2px 0 10px;overflow:hidden;text-overflow:ellipsis}

/* ── loading / empty / provenance ─────────────────────────────────────────── */
.loading{padding:48px;text-align:center;color:var(--muted)}
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--link);
  border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}
/* skeleton placeholders (transient; only shown while a list loads, then replaced by real content) */
.skel{display:inline-block;height:12px;min-width:24px;border-radius:6px;background:var(--line);position:relative;overflow:hidden;vertical-align:middle}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:llshim 1.15s infinite}
@keyframes llshim{100%{transform:translateX(100%)}}
.skelrow td{padding-top:13px;padding-bottom:13px}
.statstrip.skelstrip .kv .skel{height:16px}
.empty{color:var(--muted);font-size:12.5px;font-style:italic;padding:14px 0;text-align:center}
.prov{margin-top:22px;font-size:11px;color:var(--muted);text-align:center;line-height:1.6}
.prov b{color:var(--ink2)}

/* ── auth / landing / paywall ─────────────────────────────────────────────── */
.gate{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.gate-top{display:flex;align-items:center;height:56px;padding:0 22px;background:var(--panel);border-bottom:1px solid var(--line)}
.gate-body{flex:1;display:grid;grid-template-columns:1.05fr .95fr}
.gate-hero{padding:62px 56px;color:#eaf1fb;background:
  radial-gradient(1100px 480px at -8% -12%, #27538a 0%, transparent 55%),
  linear-gradient(157deg,#141d2e 0%,#1b3a6b 135%)}
.gate-hero .eyebrow{color:#7fb0e6}.gate-hero .eyebrow b{color:#cfe0f4}
.gate-hero h1{font-size:33px;line-height:1.16;letter-spacing:-.02em;margin:14px 0 14px;color:#fff;max-width:15ch}
.gate-hero p{font-size:15px;color:#bcccde;max-width:46ch;margin:0 0 20px}
.gate-hero ul{list-style:none;padding:0;margin:16px 0 0;max-width:46ch}
.gate-hero li{padding:7px 0 7px 26px;position:relative;color:#d3deec;font-size:13.5px}
.gate-hero li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px;border-radius:2px;background:var(--gold)}
.gate-hero .priceline{margin-top:24px;font-size:13px;color:#9fb4cb}
.gate-hero .priceline b{color:#fff;font-size:16px}
.gate-form{padding:62px 56px;display:flex;align-items:center;justify-content:center}
.authcard{width:100%;max-width:380px}
.authcard h2{margin:0 0 4px;font-size:21px}
.authcard .lede{color:var(--muted);font-size:13px;margin:0 0 22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:5px;font-weight:600}
.field input{width:100%;height:40px;border:1px solid var(--line);border-radius:9px;padding:0 12px;font-size:13.5px;background:#fff;outline:none}
.field input:focus{border-color:var(--link);box-shadow:0 0 0 3px rgba(47,111,176,.10)}
.pbtn{display:inline-block;border:0;background:var(--accent);color:#fff;border-radius:9px;padding:11px 18px;font-size:13.5px;font-weight:600;cursor:pointer}
.pbtn:hover{background:#16315b;text-decoration:none}
.pbtn.lg{padding:13px 26px;font-size:14px}
.pbtn[disabled]{opacity:.55;cursor:default}
.authcard .pbtn{width:100%;margin-top:6px}
.linkbtn{background:none;border:0;color:var(--link);cursor:pointer;font-size:12.5px;padding:0}
.linkbtn:hover{text-decoration:underline}
.authmsg{font-size:12.5px;margin:12px 0 0;padding:9px 11px;border-radius:8px;display:none}
.authmsg.show{display:block}
.authmsg.err{background:#fdeceb;color:#a3261f;border:1px solid #f3c7c3}
.authmsg.ok{background:#e6f6ee;color:#1a6a39;border:1px solid #bfe4cb}
.authmsg.info{background:#eef4fb;color:#274b78;border:1px solid #d6e4f4}
.authalt{margin-top:18px;font-size:12.5px;color:var(--muted);text-align:center}
.subwrap{max-width:520px;margin:60px auto;padding:0 22px;text-align:center}
.subwrap .plan{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:34px 30px;margin-top:22px;box-shadow:0 1px 2px rgba(20,30,50,.04)}
.subwrap .plan .price{font-size:40px;font-weight:800;letter-spacing:-.02em}
.subwrap .plan .price span{font-size:15px;font-weight:500;color:var(--muted)}
.subwrap .plan ul{list-style:none;padding:0;margin:18px 0 24px;text-align:left}
.subwrap .plan li{padding:7px 0 7px 26px;position:relative;font-size:13.5px;color:var(--ink2)}
.subwrap .plan li::before{content:"\2713";position:absolute;left:0;top:6px;color:var(--green);font-weight:700}
/* two-plan subscribe options (annual best-value + monthly) */
.subwrap .planopts{display:flex;gap:14px;margin-bottom:6px}
.subwrap .planopt{flex:1;border:1px solid var(--line);border-radius:12px;padding:20px 18px;background:var(--panel);display:flex;flex-direction:column;text-align:center}
.subwrap .planopt.best{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.subwrap .planopt .plabel{font-size:12px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:flex;align-items:center;gap:7px;justify-content:center}
.subwrap .planopt .badge{background:var(--gold);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:0;text-transform:none}
.subwrap .planopt .price{font-size:30px;font-weight:800;letter-spacing:-.02em}
.subwrap .planopt .price span{font-size:13px;font-weight:500;color:var(--muted)}
.subwrap .planopt .psub{font-size:12px;color:var(--muted);margin:4px 0 16px;min-height:15px}
.subwrap .planopt .pbtn{width:100%;margin-top:auto}
.subwrap .pbtn.ghost{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.subwrap .pbtn.ghost:hover{background:var(--accent);color:#fff}
@media(max-width:520px){.subwrap .planopts{flex-direction:column}}
.banner{padding:8px 18px;font-size:12.5px;text-align:center}
.banner.demo{background:#fff4d6;color:#7a5800;border-bottom:1px solid #f0dca0}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media(max-width:880px){
  .topbar-in{padding:0 16px}
  .row2{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .kpi:nth-child(3){border-right:0}
  .layout{grid-template-columns:1fr}.filters{display:none}
  .filters.open{display:block;position:fixed;top:56px;left:0;right:0;bottom:0;z-index:50;height:auto;border-right:0;box-shadow:0 8px 28px rgba(20,30,50,.18);padding:18px 18px 44px;overflow:auto}
  .gate-body{grid-template-columns:1fr}.gate-hero{display:none}
}

/* ════════════════ home market overview ════════════════ */
/* (Explore header / stat strip / advanced bar / rail live in the consolidated EXPLORE block below.) */

/* one edge shared with Explore (same 1200px container + 28px gutters); property page keeps its own .wrap */
.homewrap{max-width:1200px;margin:0 auto;padding:18px 28px 8px}
.homehero{margin-bottom:8px}
.homehero h1{font-size:30px;line-height:1.15;letter-spacing:-.02em;margin:6px 0 8px;max-width:18ch}
.homehero p{font-size:15px;color:var(--ink2);margin:0 0 18px;max-width:62ch}
.homehero .eyebrow{font-size:11px}
/* global stat band: same dividered card treatment + 11px label floor as the Explore stat band */
.kpis.home{grid-template-columns:repeat(5,1fr);border-radius:14px;box-shadow:0 1px 2px rgba(20,30,50,.04)}
.kpis.home .kpi{padding:14px 12px}
.kpis.home .kl{font-size:11px}
.homenav{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 4px}
.navbtn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;font:inherit;color:inherit;
  box-shadow:0 1px 2px rgba(20,30,50,.04);transition:border-color .12s,box-shadow .12s}
.navbtn .nbt{font-size:15px;font-weight:700;color:var(--ink)}
.navbtn .nbs{font-size:12px;font-weight:500;color:var(--muted)}
.navbtn:hover{border-color:var(--link);box-shadow:0 4px 14px rgba(20,30,50,.08)}
.navbtn:hover .nbt{color:var(--link)}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin:26px 0 12px}
.sec-h h3{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.marketgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.marketcard{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;cursor:pointer;box-shadow:0 1px 2px rgba(20,30,50,.04);font:inherit;color:inherit}
.marketcard:hover{border-color:var(--link);box-shadow:0 4px 14px rgba(20,30,50,.08)}
.marketcard .mc-state{font-size:22px;font-weight:800;letter-spacing:.02em;color:var(--accent)}
.marketcard .mc-hotels{font-size:13.5px;font-weight:600;color:var(--ink);margin-top:2px}
.marketcard .mc-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:8px}
.marketcard .mc-assessed{font-size:11.5px;color:var(--green);font-weight:600;margin-top:6px}

/* recent strips: the list fills the card so the pager pins to the bottom (both strips align on one line) */
.striplist{display:flex;flex-direction:column;flex:1;min-height:0}
.striplist .tag{font-size:11px}                              /* event tags meet the 11px floor on home */
.sr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line2);cursor:pointer}
.sr:last-child{border-bottom:0}
.sr:hover .srname{color:var(--link)}
.srname{font-size:13px;font-weight:600;color:var(--ink)}
/* news overview rows: keep each headline to ONE line (ellipsis) so rows stay a constant height.
   .row2 grid items default to min-width:auto and would grow to a long nowrap line, so pin them to 0;
   then block (not flex) rows let the inner div fill the card width and the headline clips to it. */
.row2>.card{min-width:0}
.sr.srnews{display:block}
.sr.srnews>div{min-width:0}
.sr.srnews .srname{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srmeta{font-size:11px;color:var(--muted);margin-top:2px}
.srprice{font-size:13px;font-weight:700;color:var(--green);white-space:nowrap;font-variant-numeric:tabular-nums}

@media(max-width:880px){
  .homewrap{padding:14px 16px 8px}
  .kpis.home{grid-template-columns:repeat(3,1fr)}
  .homenav{grid-template-columns:1fr}
}

/* ════════════════════════════════ EXPLORE (Round 5 rebuild) ════════════════════════════════
   Properties / Transactions / News. One container/edge, one vertical rhythm:
   header row -> advanced range bar -> filters|results body. On desktop the body is locked to the
   viewport so the rail and the results card start (stat band) and end (pager) on the same lines, and
   all three views are the same height; the pager pins to the window bottom. Fully fluid 4->2->1. */

/* one aligned wrapper: header, advanced bar, and the filters|results grid all share one left/right edge */
.exwrap{max-width:1200px;margin:0 auto;padding:18px 28px 22px}

/* ── header row: back to overview (left) · view switch · exact count (far right) ── */
.exwrap .exhead{max-width:none;margin:0;padding:0;display:flex;align-items:center;gap:18px}
.exhead .back{margin:0;font-size:12.5px;font-weight:600;color:var(--muted)}
.exhead .back:hover{color:var(--link)}
.pillswitch{display:flex;gap:6px}
.pill{border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:999px;padding:7px 18px;
  font-size:13px;font-weight:600;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.pill:hover{border-color:var(--link);color:var(--link)}
.pill.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.exright{margin-left:auto;display:flex;align-items:center;gap:14px}
.excount{font-size:13px;color:var(--muted);white-space:nowrap}
.excount b{font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:4px;font-weight:700}
.fbtn{display:none;border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer}
.fbtn:hover{border-color:var(--link);color:var(--link)}
.fclose{display:none}

/* ── advanced range bar: exactly 4 groups, generous spacing, clear dividers, fluid 4 -> 2 -> 1 ── */
.advsearch{display:grid;grid-template-columns:1fr;margin:16px 0 18px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(20,30,50,.04);overflow:hidden}
.advg{display:flex;flex-direction:column;gap:7px;min-width:0;padding:13px 22px}
.advg + .advg{border-top:1px solid var(--line2)}              /* 1-up: horizontal rule between rows */
.advg>label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.advr{display:flex;align-items:center;gap:8px}
.advr input{width:100%;min-width:0;height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:0 10px;font-size:12.5px;color:var(--ink);outline:none;font-variant-numeric:tabular-nums}
.advr input::placeholder{color:#9aa6b4}
.advr input:focus{border-color:var(--link);box-shadow:0 0 0 2px rgba(47,111,176,.12)}
.advx{color:var(--muted);font-size:12px}
@media(min-width:620px){
  .advsearch{grid-template-columns:1fr 1fr}
  .advg + .advg{border-top:0}
  .advg:nth-child(n+3){border-top:1px solid var(--line2)}     /* rule between the two rows */
  .advg:nth-child(even){border-left:1px solid var(--line)}    /* rule between the two columns */
}
@media(min-width:881px){   /* 4-up exactly when the rail appears (rail drawers at <=880) so bar + body align */
  .advsearch{grid-template-columns:repeat(4,1fr)}
  .advg{border-top:0 !important;padding:13px 18px}            /* tighter gutters so 4 ranges fit at ~900px */
  .advg + .advg{border-left:1px solid var(--line)}            /* vertical rule between all four */
}

/* ── body: filters rail | results, viewport-locked equal-height columns (JS fitLayout) ── */
.exwrap .layout{grid-template-columns:268px 1fr;gap:22px;align-items:stretch}
.exwrap .filters{position:static;height:100%;overflow:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 1px 2px rgba(20,30,50,.04);padding:18px}
.exwrap .main{padding:0;max-width:none;min-width:0;height:100%;min-height:0;display:flex;flex-direction:column}
/* results column rhythm: stat band (fixed) -> card fills the rest -> pager pinned at the window bottom */
#results .statstrip{flex:0 0 auto}
#results .results-card,#results>.card{flex:1 1 auto;min-height:0;overflow:auto}
#results .resultpager{flex:0 0 auto}
#results .empty{flex:1 1 auto;display:flex;align-items:center;justify-content:center}
#results .loading{flex:1 1 auto}
.results-card{padding:6px 16px 10px}
#results .dtable th{font-size:11px}
#results .tag{font-size:11px}                                /* event tags meet the 11px floor in results */
/* sortable result-table headers: same affordance as the comps table (pointer + hover + sorted cue) */
#results .rtable th[data-sp],#results .rtable th[data-st]{cursor:pointer;user-select:none}
#results .rtable th[data-sp]:hover,#results .rtable th[data-st]:hover{color:var(--link)}
#results .rtable th[aria-sort="ascending"],#results .rtable th[aria-sort="descending"]{color:var(--ink2)}
#results .rtable th .ar{color:var(--link)}

/* ── rail: heading, active-filter chips (top), facet groups, footer note ── */
.exwrap .filters .fgroup h4{margin:0 0 7px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.exwrap .filters .fgroup .sub{font-size:11.5px}
.fhead{margin-bottom:14px}
.activefilters{margin:0 0 16px}
.activefilters:empty{display:none}
.afhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.afhead span{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.afclear{border:0;background:none;color:var(--link);font-size:11.5px;font-weight:600;cursor:pointer;padding:0;font-family:inherit}
.afclear:hover{text-decoration:underline}
.filters .chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.frailfoot{margin-top:4px;padding-top:14px;border-top:1px solid var(--line2)}
/* in-place active cue: a filled rail control gets an accent border so its state shows at the control */
.exwrap .filters select.on,.exwrap .filters .rangein.on{border-color:var(--accent);font-weight:600;color:var(--ink)}
/* chips: small removable pills (button so they are keyboard-reachable) */
.chip{display:inline-flex;align-items:center;gap:5px;background:#eef4fb;color:var(--accent);border:1px solid #d6e4f4;
  border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1.45}
.chip .x{color:var(--link);font-size:10px}
.chip:hover{background:#e2edf9}

/* ── stat band (current result set): 4-up, top-aligned with the rail ── */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;background:var(--panel);margin:0 0 16px;box-shadow:0 1px 2px rgba(20,30,50,.04)}
.statstrip .kpi{padding:14px 12px;text-align:center;border-right:1px solid var(--line)}
.statstrip .kpi:last-child{border-right:0}
.statstrip .kpi .kv{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.statstrip .kpi .kl{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:5px}

.comppager .pgap{align-self:center;color:var(--muted);font-size:12px;padding:0 2px}

/* ── explore responsive: rail becomes a drawer, advanced bar already collapsed via its own queries ── */
@media(max-width:880px){
  .exwrap{padding:14px 16px 22px}
  .exhead{flex-wrap:wrap;gap:10px}
  .fbtn{display:inline-flex;align-items:center;gap:6px}
  .exright{gap:10px}
  .exwrap .layout{grid-template-columns:1fr;gap:0;height:auto !important}
  .exwrap .main{height:auto;min-height:0;display:block}
  /* release the desktop flex-fill but KEEP overflow-x containment so a wide table scrolls in-card
     instead of widening the mobile viewport */
  #results .results-card,#results>.card{flex:none;overflow-x:auto;overflow-y:visible}
  .exwrap .filters{display:none}
  .exwrap .filters.open{display:block;position:fixed;top:56px;left:0;right:0;bottom:0;z-index:50;height:auto;
    border:0;border-radius:0;box-shadow:0 8px 28px rgba(20,30,50,.18);padding:18px 18px 44px;overflow:auto}
  .fclose{display:block;width:100%;margin-bottom:14px;border:1px solid var(--accent);background:var(--accent);
    color:#fff;border-radius:9px;padding:11px;font-size:13px;font-weight:600;cursor:pointer}
  .statstrip{grid-template-columns:repeat(2,1fr)}
}

/* inspiring overview hero */
.homehero{margin-bottom:18px}
.homehero h1{font-size:40px;line-height:1.05;letter-spacing:-.025em;margin:8px 0 0;color:var(--ink);max-width:none}
.homehero h1::after{content:"";display:block;width:52px;height:3px;border-radius:2px;background:var(--gold);margin:14px 0 0}
.homehero .hlede{font-size:19px;font-weight:600;color:var(--ink2);margin:16px 0 4px;max-width:60ch}
.homehero .hsub{font-size:14px;color:var(--muted);margin:0 0 20px;max-width:66ch}

/* all-states comp table (overview) */
.states .note{color:var(--muted)}
.statestbl{min-width:560px}
.statestbl th{font-size:11px}                                /* 11px floor parity with Explore */
.statestbl th[aria-sort="ascending"],.statestbl th[aria-sort="descending"]{color:var(--ink2)}
.statestbl tbody tr{cursor:pointer}
.statestbl tbody tr:hover{background:#f3f1ea}
.statestbl td a{font-weight:600;color:var(--ink)}
.statestbl tbody tr:hover td a{color:var(--link)}

/* global source/disclosure footer */
.sitefoot{border-top:1px solid var(--line);margin-top:40px;background:var(--panel)}
.sitefoot .sf-in{max-width:1180px;margin:0 auto;padding:20px 24px 26px;color:var(--muted);font-size:11.5px;line-height:1.7}
.sitefoot p{margin:0 0 3px}
.sitefoot .sf-brand{color:var(--ink2);font-weight:600;margin-top:8px;letter-spacing:.02em}

/* ════════════════ round 4: property tile polish + txn columns ════════════════ */
/* property-page pre-hero header (back link + eyebrow) - clear separation, scrolls away above the sticky hero */
.pptop{margin:2px 0 14px}
.pptop .back{display:inline-block;margin-bottom:12px}
.pptop .eyebrow{margin:0}
/* sticky property hero: floats below the topbar as the page scrolls */
.wrap .hero{position:sticky;top:56px;z-index:5;box-shadow:0 4px 16px rgba(20,30,50,.07)}
/* non-disclosure flag (no public sale prices) */
.ndflag{background:#fdecec;color:#a3261f;border:1px solid #f3c7c3;border-radius:8px;padding:9px 12px;
  font-size:12.5px;font-weight:600;margin-bottom:10px}
/* transactions: Property column gets the room (Parties removed) so the name stays on one line */
.rtable td.cprop,.rtable th.cprop{width:46%}
.rtable td.cprop .pname{white-space:normal}

@media(max-width:880px){
  .homehero h1{font-size:30px}
  .statestbl{min-width:480px}
  .wrap .hero{position:static;box-shadow:0 1px 2px rgba(20,30,50,.04)}
}

/* ════════════════ topbar gear + SETTINGS (Round 6) ════════════════
   Settings mirrors the Explore flow: one container/edge -> left section-nav rail | content panel. */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);
  background:#fff;color:var(--ink2);border-radius:9px;cursor:pointer;padding:0;flex:0 0 auto}
.iconbtn:hover{border-color:var(--link);color:var(--link)}
.acctmenu .amitem{display:block;width:100%;text-align:left;margin-top:8px}

.setwrap{max-width:1200px;margin:0 auto;padding:18px 28px 28px}
.setwrap .exhead{display:flex;align-items:center;gap:18px;margin:0 0 16px;padding:0}
.settitle{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.setemail{font-size:12.5px;color:var(--muted);white-space:nowrap}
.setlayout{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:start}
.setnav{display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 1px 2px rgba(20,30,50,.04);padding:10px}
.setnavlink{display:block;padding:9px 12px;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink2)}
.setnavlink:hover{background:var(--bg);color:var(--link);text-decoration:none}
.setnavlink.on{background:var(--accent);color:#fff}
.setmain{display:flex;flex-direction:column;gap:18px;min-width:0}
.setcard .field{margin-bottom:14px;max-width:440px}
.setcard input[readonly]{background:var(--bg);color:var(--muted)}
.setcard .pbtn,.setcard .btn{margin-top:4px}
.setnote{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.6;max-width:580px}
.setplan{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.setplanline{font-size:13.5px;font-weight:600;color:var(--ink)}
.setbadge{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 11px;
  border-radius:30px;white-space:nowrap}
.setbadge.active{color:var(--green);background:#e6f6ee}
.setbadge.comp{color:var(--accent);background:#eef4fb}
.setbadge.none{color:var(--muted);background:#eef1f5}
.setactions{margin-top:14px}
@media(max-width:880px){
  .setwrap{padding:14px 16px 24px}
  .setlayout{grid-template-columns:1fr}
  .setnav{flex-direction:row;flex-wrap:wrap}
  .setnavlink{flex:1;text-align:center}
}