/* Harta blocurilor noi — București
   Faces are the ones the yourcolorpalette project uses: Instrument Serif for
   display, IBM Plex Sans for the interface, IBM Plex Mono for every number.
   Numbers are mono so a price never re-flows the card as the digits change. */

:root{
  --ground:#FAF9F7;
  --paper:#FFFFFF;
  --ink:#14161C;
  --ink-2:#4A5160;
  --ink-3:#8A91A0;
  --line:#E4E1DA;
  --build:#C2410C;          /* în construcție */
  --build-soft:#FDE8D7;
  --done:#0F766E;           /* finalizat din 2018 încoace */
  --done-soft:#D8EFEC;
  /* Third state, and deliberately not a third signal colour: slate says
     "we do not know", which is what it means. Used where the source sells
     from the developer but publishes no completion date. */
  --unknown:#64748B;
  --unknown-soft:#E7EAEF;
  --shadow:0 1px 2px rgba(20,22,28,.05), 0 8px 28px rgba(20,22,28,.10);
  --r:14px;
  --panel-w:352px;
  --font-display:'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-body:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
#map{position:fixed; inset:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- left panel ---------- */
.panel{
  position:fixed; top:16px; left:16px; width:var(--panel-w); z-index:5;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:18px 18px 14px;
  max-height:calc(100dvh - 32px); overflow:auto;
}
.panel.is-min .controls,
.panel.is-min .legend,
.panel.is-min .lede,
.panel.is-min .tally{display:none}

.panel-head h1{
  font-family:var(--font-display); font-weight:400; font-size:29px; line-height:1.1;
  margin:0 0 6px; letter-spacing:-.01em;
}
.panel-head h1 em{font-style:italic}
.lede{margin:0 0 14px; color:var(--ink-2); font-size:13px}

.controls{display:flex; flex-direction:column; gap:10px}

.search{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:10px; padding:0 10px; background:var(--ground);
}
.search:focus-within{border-color:var(--ink-3); background:var(--paper)}
.search svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.search input{
  border:0; outline:0; background:transparent; padding:9px 0; width:100%;
  font:inherit; color:var(--ink);
}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-2);
  border-radius:999px; padding:6px 11px; font:inherit; font-size:12.5px; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.chip:hover{border-color:var(--ink-3)}
.chip.is-on{background:var(--ink); color:#fff; border-color:var(--ink)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
.dot-build{background:var(--build)}
.dot-done{background:var(--done)}
.dot-unknown{background:var(--unknown)}

.slider{display:block; font-size:12.5px; color:var(--ink-2)}
.slider span{display:flex; justify-content:space-between; margin-bottom:4px}
.slider b{font-family:var(--font-mono); font-weight:500; color:var(--ink)}
.slider input{width:100%; accent-color:var(--ink); margin:0}

.tally{margin:12px 0 0; font-size:12.5px; color:var(--ink-2)}
.tally b{font-family:var(--font-mono); color:var(--ink)}

.legend{display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:10px; font-size:12px; color:var(--ink-2)}
.legend span{display:inline-flex; align-items:center; gap:6px}

.foot{margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line);
      font-size:11.5px; color:var(--ink-3); line-height:1.45}
.link{background:none;border:0;padding:0;font:inherit;color:var(--ink-2);
      text-decoration:underline;cursor:pointer}

.reopen{
  position:fixed; top:16px; left:16px; z-index:5;
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--shadow); padding:9px 16px; font:inherit; font-size:13px; cursor:pointer;
}

/* ---------- project card ---------- */
.card{
  position:fixed; top:16px; right:16px; width:372px; z-index:6;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden;
  max-height:calc(100dvh - 32px); display:flex; flex-direction:column;
  animation:rise .22s cubic-bezier(.2,.7,.3,1);
}
.panel[hidden]{display:none}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card{animation:none}}

.card-close{
  position:absolute; top:10px; right:10px; z-index:2;
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:0; background:rgba(255,255,255,.92); color:var(--ink);
  font-size:20px; line-height:28px; box-shadow:0 1px 6px rgba(0,0,0,.18);
}
.card-photo{background:var(--ground); aspect-ratio:16/10; overflow:hidden}
.card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.card-photo.is-empty{display:none}
.card[hidden]{display:none}

.card-body{padding:16px 18px 18px; overflow:auto}

.badge{
  display:inline-block; border-radius:999px; padding:3px 9px;
  font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
}
.badge.build{background:var(--build-soft); color:var(--build)}
.badge.done{background:var(--done-soft); color:var(--done)}
.badge.unknown{background:var(--unknown-soft); color:var(--unknown)}

.card h2{
  font-family:var(--font-display); font-weight:400; font-size:26px; line-height:1.15;
  margin:8px 0 2px; letter-spacing:-.01em;
}
.dev{margin:0 0 8px; font-size:13px; color:var(--ink-2)}
.addr{margin:0 0 14px; font-size:13px; color:var(--ink-2)}

.price{border:1px solid var(--line); border-radius:10px; padding:11px 13px; background:var(--ground)}
.price-label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3)}
.price-val{display:block; font-family:var(--font-mono); font-size:19px; font-weight:500; margin-top:3px}
.price-note{display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px}

.facts{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:14px 0 0; font-size:13px}
.facts dt{color:var(--ink-3)}
.facts dd{margin:0; color:var(--ink); font-family:var(--font-mono); font-size:12.5px}

.actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.btn{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  border:1px solid var(--line); border-radius:10px; padding:9px 13px;
  font-size:13px; color:var(--ink); background:var(--paper); transition:background .15s;
}
.btn:hover{background:var(--ground)}
.btn.primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn.primary:hover{background:#000}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.src{margin:14px 0 0; font-size:11.5px; color:var(--ink-3)}
.src a{color:var(--ink-3)}

.loading{
  position:fixed; inset:auto 0 24px; text-align:center; z-index:4;
  font-size:12.5px; color:var(--ink-3);
}
.loading[hidden]{display:none}

.maplibregl-ctrl-bottom-right{margin-bottom:4px}
.maplibregl-ctrl-attrib{font-size:10px}

/* ---------- phones ---------- */
@media (max-width:760px){
  :root{--panel-w:auto}
  .panel{
    top:auto; bottom:0; left:0; right:0; width:auto;
    border-radius:16px 16px 0 0; border-bottom:0;
    max-height:52dvh; padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  }
  .panel-head h1{font-size:24px}
  .reopen{top:auto; bottom:16px; left:50%; transform:translateX(-50%)}
  .card{
    top:auto; bottom:0; left:0; right:0; width:auto;
    border-radius:16px 16px 0 0; max-height:85dvh;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .card-photo{aspect-ratio:16/9}
  .loading{bottom:auto; top:12px}
}