/* Bali Property Atlas — the one design system.
   Neutral ground with a slight warm bias, near-black ink, a single accent
   (sea teal), and green/amber/red reserved strictly for status. Six type
   sizes, four radii, an 8-point spacing scale. Every page loads this and
   nothing else styles a control. */

:root {
  --ground:#FAF9F6; --surface:#FFFFFF; --soft:#F1EFEA; --soft-2:#E9E6DF;
  --ink:#1B1D22; --ink-2:#3A3D45; --muted:#6B6E78; --hair:#E5E2DC; --hair-2:#D6D2CA;
  --accent:#0E7C86; --accent-ink:#0A5C64; --accent-soft:#E3F1F2;
  --good:#2C7A4B; --good-soft:#E4F2E9; --warn:#B8701F; --warn-soft:#F8EDDC;
  --crit:#B23A32; --crit-soft:#F7E3E1;
  --dark:#1B1D22; --on-dark:#F4F2ED; --on-dark-muted:#A5A8B1;
  --primary:var(--ink); --primary-ink:var(--on-dark); --primary-hover:#000;
  --on-accent:#fff; --accent-hover:var(--accent-ink); --on-good:#fff; --link:var(--accent-ink);
  --r-s:6px; --r-m:10px; --r-l:14px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(27,29,34,.06), 0 1px 6px rgba(27,29,34,.05);
  --shadow-2:0 2px 6px rgba(27,29,34,.08), 0 12px 32px rgba(27,29,34,.10);
  --font:-apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --t-1:11px; --t-2:13px; --t-3:15px; --t-4:17px; --t-5:22px; --t-6:28px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --touch:44px;
  color-scheme:light;
}

html[data-theme="dark"] {
  --ground:#111719; --surface:#1B2326; --soft:#242E32; --soft-2:#2C383D;
  --ink:#EFF2EE; --ink-2:#CCD6D7; --muted:#A4B2B5; --hair:#344348; --hair-2:#495B62;
  --accent:#3BB6C1; --accent-ink:#8BD7D8; --accent-soft:#183D43;
  --good:#8FD5AA; --good-soft:#203D2E; --warn:#EDBD7B; --warn-soft:#413424;
  --crit:#F0AAA1; --crit-soft:#432B2A;
  --dark:#0C1214; --on-dark:#F4F2ED; --on-dark-muted:#AAB8BC;
  --primary:#DCE6E4; --primary-ink:#162326; --primary-hover:#fff;
  --on-accent:#082F34; --accent-hover:#70D1D7; --on-good:#10271B;
  --shadow-1:0 1px 3px rgba(0,0,0,.25), 0 1px 8px rgba(0,0,0,.16);
  --shadow-2:0 2px 8px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.28);
  color-scheme:dark;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--ground); color:var(--ink);
       font:var(--t-3)/1.5 var(--font); -webkit-font-smoothing:antialiased; }
a { color:var(--accent-ink); text-decoration:none; }
a:hover { text-decoration:underline; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-s); }
.visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden;
                   clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }

/* ── type ─────────────────────────────────────────────────────────────── */
.t-1 { font-size:var(--t-1); } .t-2 { font-size:var(--t-2); } .t-4 { font-size:var(--t-4); }
.t-5 { font-size:var(--t-5); } .t-6 { font-size:var(--t-6); }
.label { font-size:var(--t-1); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.muted { color:var(--muted); }
.num { font-variant-numeric:tabular-nums; }
.mono { font-family:var(--mono); font-size:var(--t-2); }
h1, h2, h3 { margin:0; font-weight:600; letter-spacing:-.01em; text-wrap:balance; }
h1 { font-size:var(--t-5); } h2 { font-size:var(--t-4); } h3 { font-size:var(--t-3); }

/* ── icons: one inline sprite (ui.js injects it), currentColor throughout ── */
.icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75;
        stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:-3px; }
.icon.s { width:15px; height:15px; }
.icon.brand { fill:currentColor; stroke:none; }

/* ── app header ───────────────────────────────────────────────────────── */
.app-header { background:var(--dark); color:var(--on-dark); padding:0 var(--sp-5);
              height:52px; display:flex; align-items:center; gap:var(--sp-4); flex:0 0 auto; }
.app-header .brand { font-weight:600; font-size:var(--t-4); letter-spacing:-.01em; color:var(--on-dark); }
.app-header .brand em { font-style:normal; color:var(--on-dark-muted); font-weight:500; }
.app-header .sub { color:var(--on-dark-muted); font-size:var(--t-2); }
.app-header nav { margin-left:auto; display:flex; gap:var(--sp-2); }
.app-header nav a { color:var(--on-dark-muted); font-size:var(--t-2); font-weight:500;
                    padding:6px 10px; border-radius:var(--r-s); }
.app-header nav a:hover { color:var(--on-dark); background:rgba(255,255,255,.08); text-decoration:none; }
.app-header nav a.primary { color:var(--on-dark); border:1px solid rgba(255,255,255,.22); }

/* ── bars ─────────────────────────────────────────────────────────────── */
.bar { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-5);
       background:var(--surface); border-bottom:1px solid var(--hair); flex-wrap:wrap; flex:0 0 auto; }
.bar .grow { flex:1 1 auto; }
.bar .end { margin-left:auto; }

/* ── segmented control ────────────────────────────────────────────────── */
.seg { display:inline-flex; background:var(--soft); border-radius:var(--r-m); padding:3px; gap:2px; }
.seg > button { border:none; background:none; padding:6px 14px; border-radius:7px; min-height:32px;
                font-size:var(--t-2); font-weight:600; color:var(--muted); }
.seg > button.on { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); }
.seg.dark { background:rgba(255,255,255,.10); }
.seg.dark > button { color:var(--on-dark-muted); }
.seg.dark > button.on { background:var(--on-dark); color:var(--dark); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
       min-height:36px; padding:0 14px; border-radius:var(--r-m); font-size:var(--t-2); font-weight:600;
       border:1px solid var(--hair-2); background:var(--surface); color:var(--ink);
       white-space:nowrap; transition:background .12s, border-color .12s, color .12s; }
.btn:hover { background:var(--soft); text-decoration:none; }
.btn.primary { background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
.btn.primary:hover { background:var(--primary-hover); }
.btn.accent { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.btn.accent:hover { background:var(--accent-hover); }
.btn.text { border-color:transparent; background:none; color:var(--accent-ink); padding:0 8px; }
.btn.text:hover { background:var(--accent-soft); }
.btn.on { background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
.btn.quiet { color:var(--muted); }
.btn.sm { min-height:30px; padding:0 10px; font-size:var(--t-1); }
.btn.icon-only { width:36px; padding:0; }
.btn:disabled { opacity:.5; cursor:default; }
.btn .badge { min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pill); background:var(--accent);
              color:var(--on-accent); font-size:var(--t-1); font-weight:700; display:inline-flex; align-items:center; justify-content:center; }

/* ── fields ───────────────────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.field > span { font-size:var(--t-1); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.input, select.input, textarea.input {
  min-height:36px; padding:0 11px; border:1px solid var(--hair-2); border-radius:var(--r-m);
  background:var(--surface); color:var(--ink); font-size:var(--t-2); width:100%; }
textarea.input { padding:9px 11px; line-height:1.45; min-height:120px; resize:vertical; }
.input:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.input::placeholder { color:var(--muted); }
select.input { appearance:none; -webkit-appearance:none; padding-right:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6E78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; }
.input.w-s { width:110px; } .input.w-m { width:160px; }
.check { display:inline-flex; align-items:center; gap:7px; font-size:var(--t-2); color:var(--ink-2); cursor:pointer; }
.check input { width:16px; height:16px; accent-color:var(--accent); margin:0; }

/* search box: the public bar's centrepiece */
.search { position:relative; display:flex; align-items:center; flex:1 1 320px; min-width:200px; }
.search .icon { position:absolute; left:11px; color:var(--muted); pointer-events:none; }
.search .input { padding-left:36px; padding-right:36px; min-height:40px; border-radius:var(--r-l); }
.search .clear { position:absolute; right:6px; }
.search .state { position:absolute; right:12px; color:var(--muted); font-size:var(--t-1); }

/* ── chips ────────────────────────────────────────────────────────────── */
.chip { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-pill);
        background:var(--soft); color:var(--ink-2); font-size:var(--t-1); font-weight:600; line-height:1.4; white-space:nowrap; }
.chip .dot { width:7px; height:7px; border-radius:50%; background:var(--muted); }
.chip.good { background:var(--good-soft); color:var(--good); } .chip.good .dot { background:var(--good); }
.chip.warn { background:var(--warn-soft); color:var(--warn); } .chip.warn .dot { background:var(--warn); }
.chip.crit { background:var(--crit-soft); color:var(--crit); } .chip.crit .dot { background:var(--crit); }
.chip.accent { background:var(--accent-soft); color:var(--accent-ink); }
.chip.dark { background:var(--primary); color:var(--primary-ink); }
.chip.ghost { background:transparent; border:1px solid var(--hair-2); color:var(--muted); }
.chip button { border:none; background:none; padding:0; margin-left:2px; color:inherit; display:inline-flex; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }

/* ── cards ────────────────────────────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-l); overflow:hidden;
        transition:border-color .12s, box-shadow .12s, transform .12s; }
.card:hover, .card.hot { border-color:var(--hair-2); box-shadow:var(--shadow-2); }
.card.row { display:flex; gap:var(--sp-3); }
.card .ph { background:var(--soft-2) center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.card.row .ph { width:132px; flex:0 0 132px; min-height:104px; }
.card .body { padding:var(--sp-3) var(--sp-3) var(--sp-3) 0; min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.card .price { font-size:var(--t-4); font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.card .price small { font-size:var(--t-1); font-weight:500; color:var(--muted); letter-spacing:0; }
.card .name { font-size:var(--t-2); font-weight:500; color:var(--ink-2);
              display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .chips { margin-top:2px; }
a.card, button.card { color:inherit; text-align:left; cursor:pointer; }
a.card:hover { text-decoration:none; }

.rent-comparison { display:inline-flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.rent-comparison > span { white-space:nowrap; }
.rent-saving { font-size:var(--t-1); color:var(--good); font-weight:600; letter-spacing:.02em; text-transform:uppercase; }

/* ── sheet / popover ──────────────────────────────────────────────────── */
.scrim { position:fixed; inset:0; background:rgba(27,29,34,.42); z-index:60; opacity:0; pointer-events:none; transition:opacity .16s; }
body.sheet-open .scrim { opacity:1; pointer-events:auto; }
.sheet { position:fixed; z-index:70; background:var(--surface); box-shadow:var(--shadow-2);
         display:flex; flex-direction:column; gap:var(--sp-3);
         opacity:0; pointer-events:none; transition:opacity .16s, transform .18s; }
body.sheet-open .sheet { opacity:1; pointer-events:auto; }
.sheet .head { display:flex; align-items:center; justify-content:space-between; font-weight:600; }
.sheet .foot { display:flex; gap:var(--sp-2); margin-top:var(--sp-1); }
.sheet .foot .btn { flex:1; min-height:var(--touch); }
/* desktop: a popover under the bar */
.sheet { top:112px; right:var(--sp-5); width:360px; max-height:calc(100dvh - 130px); overflow-y:auto;
         padding:var(--sp-4); border:1px solid var(--hair); border-radius:var(--r-l); transform:translateY(-6px); }
body.sheet-open .sheet { transform:translateY(0); }
/* phone: a bottom sheet */
@media (max-width:900px) {
  .sheet { top:auto; right:0; left:0; bottom:0; width:auto; max-height:84dvh; border-radius:18px 18px 0 0;
           padding:var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); transform:translateY(100%); }
  .sheet .input, .sheet select.input { min-height:var(--touch); font-size:16px; }
}

/* ── map chrome ───────────────────────────────────────────────────────── */
.map-tools { position:absolute; right:var(--sp-3); top:var(--sp-3); z-index:20; display:flex; flex-direction:column; gap:6px; }
.map-tools .btn { box-shadow:var(--shadow-1); border-color:rgba(27,29,34,.12); }
.marker { background:var(--surface); color:var(--ink); border:1px solid rgba(27,29,34,.14);
          border-radius:var(--r-pill); padding:4px 10px; font-size:var(--t-1); font-weight:600;
          font-variant-numeric:tabular-nums; white-space:nowrap; cursor:pointer;
          box-shadow:var(--shadow-1); transition:transform .12s, background .12s, color .12s; }
.marker:hover { transform:scale(1.06); }
.marker.hot { background:var(--primary); color:var(--primary-ink); border-color:var(--primary); transform:scale(1.08); box-shadow:var(--shadow-2); }
body.on-satellite .marker { border-color:rgba(27,29,34,.35); box-shadow:0 1px 3px rgba(0,0,0,.45), 0 5px 16px rgba(0,0,0,.3); }
.maplibregl-ctrl-group { background:var(--surface); color:var(--ink); border-radius:var(--r-m) !important; box-shadow:var(--shadow-1) !important; border:1px solid var(--hair); }
.maplibregl-ctrl-group button { width:36px; height:36px; }
.maplibregl-ctrl-group button+button { border-top-color:var(--hair); }
.maplibregl-ctrl-attrib { font-size:10px; background:var(--surface) !important; color:var(--ink) !important; }
.maplibregl-ctrl-attrib a { color:var(--ink-2); }
.maplibregl-popup { z-index:900; }
.maplibregl-popup-content { padding:0; background:var(--surface); color:var(--ink); border-radius:var(--r-l); overflow:hidden; width:230px; box-shadow:var(--shadow-2); border:1px solid var(--hair); }
.maplibregl-popup-close-button { color:#fff; font-size:18px; right:4px; top:2px; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color:var(--surface); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color:var(--surface); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color:var(--surface); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color:var(--surface); }

/* ── misc ─────────────────────────────────────────────────────────────── */
.empty { text-align:center; color:var(--muted); padding:var(--sp-6) var(--sp-4); font-size:var(--t-2); }
.msg { padding:8px 11px; border-radius:var(--r-m); font-size:var(--t-2); margin-top:var(--sp-2); display:none; }
.msg.ok { background:var(--good-soft); color:var(--good); display:block; }
.msg.err { background:var(--crit-soft); color:var(--crit); display:block; }
.divider { border:0; border-top:1px solid var(--hair); margin:var(--sp-4) 0; }
.contact { display:inline-flex; align-items:center; gap:7px; color:#fff; padding:9px 14px; border-radius:var(--r-pill);
           font-size:var(--t-2); font-weight:600; white-space:nowrap; box-shadow:var(--shadow-1); }
.contact:hover { text-decoration:none; filter:brightness(.95); }
.contact.wa { background:#25D366; } .contact.fb { background:#1877F2; } .contact.tg { background:#229ED9; }
.contact .icon { width:17px; height:17px; }