/* Da Nang rentals: UI prototype. Tokens and type follow prior/danang-site-2026-09-30. */
:root {
  --bg:#F7F3EC; --surface:#FFFFFF; --surface-2:#FBF8F2; --ink:#12252E; --muted:#5E7079;
  --accent:#0E6E7D; --accent-soft:#DCEDEF; --warm:#B85630; --line:#E4DCCE; --line-2:#EFE9DE;
  --ok:#2C6E4B; --ok-bg:#E1F0E6; --warn:#8A5E14; --warn-bg:#F6EBD5; --bad:#A33F2E; --bad-bg:#F6E1DC;
  --grey:#7C8A90; --grey-bg:#ECE8E1;
  --on-accent:#FFFFFF; --img-ph:#EFE9DE;
  --lb-bg:rgba(10,22,28,.94); --lb-ctl:rgba(255,255,255,.14); --lb-ctl-hover:rgba(255,255,255,.28); --lb-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(18,37,46,.06), 0 8px 24px -16px rgba(18,37,46,.22);
  --shadow-lg:0 2px 6px rgba(18,37,46,.08), 0 24px 48px -24px rgba(18,37,46,.35);
  --radius:8px; --radius-lg:12px;
  --serif:"Fraunces", Georgia, serif; --sans:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --tile-filter:none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0B1920; --surface:#122630; --surface-2:#16303B; --ink:#E9EEEF; --muted:#94A8AF;
    --accent:#58BECE; --accent-soft:#16333C; --warm:#E08A5C; --line:#1F3A45; --line-2:#1A3039;
    --ok:#6FC79A; --ok-bg:#12342A; --warn:#DCAE5E; --warn-bg:#33280F; --bad:#E3907E; --bad-bg:#37201B;
    --grey:#8A9BA1; --grey-bg:#1B2F38;
    --on-accent:#0B1920; --img-ph:#16303B;
    --lb-bg:rgba(3,9,12,.96);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
    --shadow-lg:0 2px 6px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.9);
    --tile-filter:brightness(.62) invert(1) contrast(.82) hue-rotate(195deg) saturate(.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0B1920; --surface:#122630; --surface-2:#16303B; --ink:#E9EEEF; --muted:#94A8AF;
  --accent:#58BECE; --accent-soft:#16333C; --warm:#E08A5C; --line:#1F3A45; --line-2:#1A3039;
  --ok:#6FC79A; --ok-bg:#12342A; --warn:#DCAE5E; --warn-bg:#33280F; --bad:#E3907E; --bad-bg:#37201B;
  --grey:#8A9BA1; --grey-bg:#1B2F38;
  --on-accent:#0B1920; --img-ph:#16303B;
  --lb-bg:rgba(3,9,12,.96);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
  --shadow-lg:0 2px 6px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.9);
  --tile-filter:brightness(.62) invert(1) contrast(.82) hue-rotate(195deg) saturate(.35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { background:var(--bg); color:var(--ink); font:15px/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
button, input, select { font:inherit; color:inherit; }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.mono { font-family:var(--mono); }
.muted { color:var(--muted); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- app frame ---------- */
.app { display:grid; grid-template-rows:auto auto 1fr; grid-template-columns:minmax(0, 1fr); height:100vh; height:100dvh; }
.top { display:flex; align-items:center; gap:16px; padding:12px 20px; border-bottom:1px solid var(--line); background:var(--bg); }
.top .brand { display:flex; flex-direction:column; min-width:0; }
.eyebrow { font:600 11px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--warm); }
.top h1 { margin:2px 0 0; font:600 24px/1.1 var(--serif); letter-spacing:-.01em; }
.top .stats { margin-left:auto; display:flex; gap:18px; align-items:center; font-size:13px; color:var(--muted); }
.top .stats b { color:var(--ink); font-family:var(--mono); font-weight:600; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:2px; background:var(--surface); }
.seg button { border:0; background:transparent; padding:5px 11px; border-radius:999px; font-size:12.5px; cursor:pointer; color:var(--muted); min-height:30px; }
.seg button[aria-pressed="true"] { background:var(--ink); color:var(--bg); }
.theme-label { font:600 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

.bar { display:flex; align-items:center; gap:10px; padding:10px 20px; border-bottom:1px solid var(--line); background:var(--surface-2); flex-wrap:wrap; position:relative; z-index:500; }
.types { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.types::-webkit-scrollbar { display:none; }
.chip-btn { border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 12px; font-size:13.5px; cursor:pointer; white-space:nowrap; min-height:34px; display:inline-flex; align-items:center; gap:6px; }
.chip-btn .n { font:12px var(--mono); color:var(--muted); }
.chip-btn[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--bg); }
.chip-btn[aria-pressed="true"] .n { color:inherit; opacity:.75; }
.btn { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:6px 12px; font-size:13.5px; cursor:pointer; min-height:34px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.btn:hover { border-color:var(--muted); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.btn .badge { background:var(--accent); color:var(--on-accent); border-radius:999px; font:600 11.5px var(--mono); padding:1px 7px; }
.btn .badge:empty { display:none; }
.btn[disabled] { opacity:.45; cursor:default; }
.bar .spacer { flex:1; }
.sort { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.sort select { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:6px 8px; min-height:34px; max-width:220px; }
.toggle { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); cursor:pointer; user-select:none; }
.toggle input { accent-color:var(--accent); width:16px; height:16px; }
.count { font-size:13px; color:var(--muted); white-space:nowrap; }
.count b { color:var(--ink); font-family:var(--mono); }
.viewseg { display:none; }

.main { display:grid; grid-template-columns:minmax(440px, 47%) minmax(0, 1fr); min-height:0; }
.main > *, .card > *, .cb > *, .r1 > * { min-width:0; }
.listcol { overflow-y:auto; padding:14px 16px 40px 20px; scroll-behavior:smooth; }
.mapcol { position:relative; border-left:1px solid var(--line); }
#map { position:absolute; inset:0; background:var(--img-ph); }

/* ---------- notices above the list ---------- */
.note { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--muted); padding:8px 12px; border:1px dashed var(--line); border-radius:var(--radius); margin:0 0 12px; background:var(--surface-2); }
.note button { border:0; background:none; color:var(--accent); text-decoration:underline; cursor:pointer; padding:0; font-size:13px; }
.more { text-align:center; margin:4px 0 8px; }
.intro { font-size:13.5px; padding:10px 12px; border-radius:var(--radius); background:var(--accent-soft); margin:0 0 12px; }
.intro button { border:0; background:none; color:var(--accent); font-weight:600; text-decoration:underline; cursor:pointer; padding:0; margin-left:4px; }
.empty { text-align:center; padding:48px 16px; color:var(--muted); }

/* ---------- cards ---------- */
.card { display:grid; grid-template-columns:168px 1fr; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); margin-bottom:12px; box-shadow:var(--shadow); overflow:hidden; transition:border-color .15s, box-shadow .15s; scroll-margin:12px; }
.card:hover, .card.hot { border-color:var(--accent); }
.card.sel { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), var(--shadow); }
.card.flash { animation:flash 1.2s ease-out; }
@keyframes flash { 0% { box-shadow:0 0 0 6px var(--accent-soft); } 100% { box-shadow:var(--shadow); } }
.card.dim .ph img { filter:grayscale(1); opacity:.6; }
.ph { position:relative; border:0; padding:0; margin:0; background:var(--img-ph); cursor:zoom-in; min-height:150px; display:block; width:100%; }
.ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ph .none { position:absolute; inset:0; display:grid; place-items:center; font-size:12px; color:var(--muted); padding:8px; text-align:center; cursor:default; }
.ph .cnt { position:absolute; right:6px; bottom:6px; background:rgba(10,22,28,.72); color:#fff; font:600 11.5px var(--mono); border-radius:6px; padding:2px 6px; }
.ph .fr { position:absolute; left:8px; top:8px; width:12px; height:12px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.fr.g { background:#2E9E62; } .fr.a { background:#D69A1F; } .fr.r { background:#C8513B; } .fr.x { background:#8A9399; }
.cb { padding:12px 14px 10px; min-width:0; display:flex; flex-direction:column; gap:6px; }
.r1 { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }
.ttl { margin:0; font:600 18px/1.2 var(--serif); }
.ttl small { font:500 13px var(--sans); color:var(--muted); display:block; margin-top:3px; }
.price { text-align:right; white-space:nowrap; }
.price b { font:600 17px/1.15 var(--mono); color:var(--accent); display:block; }
.price span { font:12.5px var(--mono); color:var(--muted); }
.price .alt { display:block; font-size:11.5px; }
.place { font-size:13.5px; color:var(--ink); display:flex; gap:6px; flex-wrap:wrap; align-items:baseline; }
.prec { font:11px var(--mono); padding:1px 6px; border-radius:4px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.prec.b { border-color:var(--accent); color:var(--accent); }
.prec.a { border-style:dashed; }
.chips { display:flex; flex-wrap:wrap; gap:5px; }
.chip { font-size:12px; line-height:1.2; padding:3px 8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink); white-space:nowrap; display:inline-flex; gap:5px; align-items:center; }
.chip .dot { width:8px; height:8px; border-radius:50%; }
.chip.ok { background:var(--ok-bg); border-color:transparent; color:var(--ok); }
.chip.warn { background:var(--warn-bg); border-color:transparent; color:var(--warn); }
.chip.bad { background:var(--bad-bg); border-color:transparent; color:var(--bad); }
.chip.grey { background:var(--grey-bg); border-color:transparent; color:var(--grey); }
.chip.score { font-family:var(--mono); font-weight:600; background:var(--ink); color:var(--bg); border-color:var(--ink); }
.chip.score.zero { background:var(--bad-bg); color:var(--bad); border-color:transparent; }
.chip.src { font-family:var(--mono); font-size:11.5px; }
.feat { font-size:12.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 12px; }
.feat .no { color:var(--bad); }
.feat .yes { color:var(--ok); }
.feat .inf::after { content:" ≈"; color:var(--muted); }
.alerts { display:flex; flex-direction:column; gap:4px; }
.alert { font-size:12.5px; padding:5px 9px; border-radius:6px; background:var(--warn-bg); color:var(--warn); }
.alert.bad { background:var(--bad-bg); color:var(--bad); }
.alert a, .alert button { color:inherit; font-weight:600; background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; font-size:inherit; }
.acts { display:flex; gap:6px; align-items:center; margin-top:2px; flex-wrap:wrap; }
.acts .btn { min-height:32px; padding:4px 10px; font-size:13px; }
.acts .icon { width:34px; justify-content:center; padding:0; font-size:15px; }
.acts .icon[aria-pressed="true"] { color:var(--warm); border-color:var(--warm); }
.acts .grow { flex:1; }
.acts a.btn { text-decoration:none; color:var(--ink); }

/* details */
.det { grid-column:1 / -1; border-top:1px solid var(--line); padding:14px 16px 16px; display:none; gap:14px; background:var(--surface-2); }
.card.open .det { display:grid; }
.det h4 { margin:0 0 6px; font:600 11px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.det .sum { margin:0; font-size:14.5px; }
.pc { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pc ul { margin:0; padding:0; list-style:none; font-size:13.5px; }
.pc li { padding-left:16px; position:relative; margin-bottom:3px; }
.pc .pro li::before { content:"+"; position:absolute; left:0; color:var(--ok); font-weight:700; }
.pc .con li::before { content:"−"; position:absolute; left:0; color:var(--bad); font-weight:700; }
.chk li::before { content:"□"; position:absolute; left:0; color:var(--muted); }
.chk { margin:0; padding:0; list-style:none; font-size:13.5px; }
.chk li { padding-left:18px; position:relative; margin-bottom:3px; }
.byline { font-size:11.5px; color:var(--muted); margin-top:4px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.grid div { background:var(--surface); padding:7px 10px; min-width:0; }
.grid dt { font:10.5px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.grid dd { margin:2px 0 0; font-size:13.5px; overflow-wrap:anywhere; }
.grid dd.u { color:var(--grey); font-style:italic; }
.grid dd .s { font:10.5px var(--mono); color:var(--muted); margin-left:4px; }
.bars { display:grid; gap:4px; font-size:12.5px; }
.bars .row { display:grid; grid-template-columns:120px 1fr 52px; gap:8px; align-items:center; }
.bars .track { height:6px; border-radius:3px; background:var(--line-2); overflow:hidden; }
.bars .fill { height:100%; background:var(--accent); }
.bars .v { font-family:var(--mono); text-align:right; color:var(--muted); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bld { font-size:13.5px; border-left:3px solid var(--accent); padding:4px 0 4px 10px; }
.bld b { font-family:var(--serif); }
table.src { width:100%; border-collapse:collapse; font-size:12.5px; }
table.src th { text-align:left; font:10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:4px 6px; border-bottom:1px solid var(--line); }
table.src td { padding:5px 6px; border-bottom:1px solid var(--line-2); vertical-align:top; }
table.src td.dead { color:var(--grey); text-decoration:line-through; }
details.orig summary { cursor:pointer; font-size:13px; color:var(--accent); }
details.orig pre { white-space:pre-wrap; font:13px/1.5 var(--sans); margin:8px 0 0; padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); max-height:320px; overflow:auto; }

/* ---------- filter drawer ---------- */
.drawer { position:fixed; top:0; bottom:0; left:0; width:min(420px, 100vw); background:var(--surface); z-index:1500; box-shadow:var(--shadow-lg); transform:translateX(-104%); transition:transform .22s ease; display:flex; flex-direction:column; }
.drawer.on { transform:none; }
.scrim { position:fixed; inset:0; background:rgba(8,18,24,.38); z-index:1400; opacity:0; pointer-events:none; transition:opacity .2s; }
.scrim.on { opacity:1; pointer-events:auto; }
@media (min-width: 761px) { .scrim { display:none; } }
.dh { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.dh h2 { margin:0; font:600 20px var(--serif); flex:1; }
.dh .x { border:0; background:none; font-size:22px; cursor:pointer; width:40px; height:40px; border-radius:50%; }
.dh .x:hover { background:var(--surface-2); }
.dbody { overflow-y:auto; flex:1; padding:12px 16px 20px; }
.dfoot { display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--line); background:var(--surface-2); }
.dfoot .btn { flex:1; justify-content:center; min-height:42px; }
.search { width:100%; border:1px solid var(--line); border-radius:var(--radius); padding:9px 12px; background:var(--surface-2); margin-bottom:10px; }
.strict { display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--muted); margin:0 0 12px; }
.strict input { margin-top:3px; accent-color:var(--accent); }
.sec { border:1px solid var(--line); border-radius:var(--radius); margin-bottom:8px; background:var(--surface); }
.sec > summary { list-style:none; cursor:pointer; padding:10px 12px; display:flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; }
.sec > summary::-webkit-details-marker { display:none; }
.sec > summary::after { content:""; margin-left:auto; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s; }
.sec[open] > summary::after { transform:rotate(-135deg); }
.sec .cnt { font:600 11.5px var(--mono); background:var(--line-2); color:var(--muted); border-radius:999px; padding:1px 7px; }
.sec .cnt.on { background:var(--accent); color:var(--on-accent); }
.sec .in { padding:4px 12px 12px; display:grid; gap:12px; }
.f label.l, .f .l { display:flex; justify-content:space-between; gap:8px; font-size:13px; font-weight:500; margin-bottom:5px; }
.f .l .have { font:11px var(--mono); color:var(--muted); font-weight:400; }
.f.act .l { color:var(--accent); }
.rng { display:grid; grid-template-columns:1fr auto 1fr; gap:6px; align-items:center; }
.rng input { width:100%; border:1px solid var(--line); border-radius:6px; padding:6px 8px; background:var(--surface-2); font-family:var(--mono); font-size:13px; min-width:0; }
.rng span { color:var(--muted); }
.opts { display:flex; flex-direction:column; gap:2px; max-height:176px; overflow-y:auto; }
.opts label { display:flex; align-items:center; gap:8px; font-size:13.5px; padding:3px 2px; cursor:pointer; border-radius:4px; }
.opts label:hover { background:var(--surface-2); }
.opts input { accent-color:var(--accent); width:16px; height:16px; flex:none; }
.opts .t { flex:1; min-width:0; overflow-wrap:anywhere; }
.opts .c { font:12px var(--mono); color:var(--muted); }
.opts label.zero { opacity:.45; }
.tri { display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.tri button { border:0; border-right:1px solid var(--line); background:var(--surface); padding:5px 11px; font-size:13px; cursor:pointer; min-height:32px; }
.tri button:last-child { border-right:0; }
.tri button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }

/* ---------- map ---------- */
.leaflet-tile-pane { filter:var(--tile-filter); }
.leaflet-container { font-family:var(--sans); background:var(--img-ph); }
.pin { position:relative; transform:translate(-50%, calc(-100% - 7px)); display:inline-flex; align-items:center; gap:5px; background:var(--surface); color:var(--ink); border:1.5px solid var(--ink); border-radius:7px; padding:3px 7px 3px 6px; font:600 12px/1 var(--mono); white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.18); cursor:pointer; transition:transform .12s; }
.pin::after { content:""; position:absolute; left:50%; bottom:-6px; width:9px; height:9px; background:inherit; border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform:translateX(-50%) rotate(45deg); }
.pin .d { width:8px; height:8px; border-radius:50%; flex:none; }
.pin.appr { border-style:dashed; }
.pin.appr::after { border-right-style:dashed; border-bottom-style:dashed; }
.pin.hot, .pin.sel { background:var(--ink); color:var(--bg); z-index:1000; transform:translate(-50%, calc(-100% - 7px)) scale(1.08); }
.pin.dead { opacity:.6; }
.pin.fav { border-color:var(--warm); }
.leaflet-marker-icon.pinwrap { background:none; border:0; }
.leaflet-marker-icon.pinwrap.raised { z-index:9999 !important; }
.clus { background:var(--accent); color:var(--on-accent); border:3px solid var(--surface); border-radius:50%; display:grid; place-items:center; font:600 13px var(--mono); box-shadow:0 2px 8px rgba(0,0,0,.25); }
.maptools { position:absolute; right:12px; top:12px; z-index:600; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.maptools .toggle { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:6px 10px; min-height:34px; color:var(--ink); box-shadow:var(--shadow); }
.legend { position:absolute; left:12px; bottom:22px; z-index:600; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; font-size:12px; box-shadow:var(--shadow); display:grid; gap:4px; }
.legend .li { display:flex; align-items:center; gap:7px; }
.legend .sw { width:10px; height:10px; border-radius:50%; }
.legend .box { width:22px; height:12px; border:1.5px solid var(--ink); border-radius:3px; }
.legend .box.appr { border-style:dashed; }
.peek { display:none; }

/* ---------- lightbox ---------- */
.lb { position:fixed; inset:0; z-index:3000; background:var(--lb-bg); display:none; align-items:center; justify-content:center; }
.lb.on { display:flex; }
.lb img { max-width:min(92vw, 1400px); max-height:82vh; max-height:82dvh; object-fit:contain; border-radius:6px; }
.lb .cap { position:absolute; left:0; right:0; bottom:16px; text-align:center; color:var(--lb-ink); font-size:13.5px; padding:0 70px; }
.lb .cap .mono { opacity:.75; }
.lb button { position:absolute; border:0; background:var(--lb-ctl); color:var(--lb-ink); width:48px; height:48px; border-radius:50%; font-size:22px; cursor:pointer; display:grid; place-items:center; }
.lb button:hover { background:var(--lb-ctl-hover); }
.lb .close { top:calc(14px + env(safe-area-inset-top)); right:calc(14px + env(safe-area-inset-right)); }
.lb .prev { left:calc(16px + env(safe-area-inset-left)); top:50%; transform:translateY(-50%); }
.lb .next { right:calc(16px + env(safe-area-inset-right)); top:50%; transform:translateY(-50%); }

/* ---------- footer inside list ---------- */
.foot { font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); margin-top:18px; padding-top:12px; display:grid; gap:6px; }
.foot b { color:var(--ink); font-weight:600; }

/* ---------- narrow screens ---------- */
@media (max-width: 1100px) {
  .top .stats .hide-m { display:none; }
  .main { grid-template-columns:minmax(380px, 52%) 1fr; }
  .card { grid-template-columns:140px 1fr; }
}
@media (max-width: 760px) {
  .top { padding:10px 16px; gap:10px; }
  .top h1 { font-size:20px; }
  .eyebrow .long { display:none; }
  .seg button { font-size:11.5px; }
  .top .stats { display:none; }
  .theme-label { display:none; }
  .seg button { padding:4px 9px; }
  .bar { padding:8px 16px; gap:8px; }
  .bar .types { order:5; flex-basis:100%; margin:0 -16px; padding:0 16px; }
  .viewseg { display:inline-flex; }
  .sort select { max-width:150px; }
  .sort .lbl, .bar .toggle .lbl-long { display:none; }
  .bar .count { margin-left:auto; }
  .bar .spacer { display:none; }
  .sort { order:4; }
  .main { grid-template-columns:1fr; position:relative; }
  .listcol { padding:12px 16px 40px; }
  .mapcol { display:none; border-left:0; }
  .app.mapview .listcol { display:none; }
  .app.mapview .mapcol { display:block; }
  .card { grid-template-columns:1fr; }
  .ph { aspect-ratio:2 / 1; min-height:0; }
  .main { grid-template-columns:minmax(0, 1fr); }
  .pc, .two { grid-template-columns:1fr; }
  .bars .row { grid-template-columns:100px 1fr 46px; }
  .legend { left:10px; bottom:calc(10px + env(safe-area-inset-bottom)); font-size:11px; display:flex; flex-wrap:wrap; gap:4px 10px; max-width:calc(100% - 20px); padding:6px 8px; }
  .legend .li.l-box { display:none; }
  .mapcol.peeking .legend { display:none; }
  .peek { position:absolute; left:12px; right:12px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:700; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:none; grid-template-columns:96px 1fr; overflow:hidden; }
  .peek.on { display:grid; }
  .peek img { width:96px; height:100%; object-fit:cover; min-height:96px; background:var(--img-ph); }
  .peek .pb { padding:9px 12px; display:grid; gap:3px; min-width:0; }
  .peek .pb b { font:600 15px var(--serif); }
  .peek .pb .p { font:600 14px var(--mono); color:var(--accent); }
  .peek .pb .s { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .peek .pb .btn { justify-self:start; min-height:32px; padding:3px 10px; font-size:12.5px; margin-top:2px; }
  .peek .x { position:absolute; right:4px; top:4px; border:0; background:none; width:32px; height:32px; font-size:18px; color:var(--muted); cursor:pointer; }
  .lb .cap { padding:0 16px; bottom:calc(76px + env(safe-area-inset-bottom)); }
  .lb .prev, .lb .next { top:auto; bottom:calc(14px + env(safe-area-inset-bottom)); transform:none; background:var(--lb-ctl); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}