/* Surfing Dog — sharp but friendly. Warm white, hairlines, one blue, one four-colour line. */
:root {
  --ground:#FBF8F2; --surface:#FFFFFF; --ink:#1F1D1A; --ink-2:#6E675D; --ink-3:#A39B8E; --hair:#E4DED3;
  --blue:#2C54D4; --orange:#FF7A1A; --yellow:#FFC222; --teal:#0FA3A3;
  --sans:"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --r:3px;
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; font-family:var(--sans); color:var(--ink); background:var(--ground); -webkit-font-smoothing:antialiased; }
#map { position:fixed; inset:0; background:var(--ground); }
a { color:inherit; }
button { font-family:var(--sans); }

.surface { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); }

/* top */
.top { position:fixed; top:16px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; z-index:5; gap:10px; }
.top > * { pointer-events:auto; }
.wordmark { display:inline-flex; flex-direction:column; text-decoration:none; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; }
.wordmark span { font-weight:700; font-size:15px; letter-spacing:-.02em; padding:9px 13px 8px; line-height:1; }
.stripe { display:flex; height:3px; }
.stripe b { flex:1; }
.stripe b:nth-child(1){background:var(--orange)} .stripe b:nth-child(2){background:var(--yellow)}
.stripe b:nth-child(3){background:var(--teal)} .stripe b:nth-child(4){background:var(--blue)}
.actions-top { display:flex; gap:8px; align-items:center; }
.who { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:9px 13px; font-size:13px; line-height:1; }
.who a { text-decoration:none; color:var(--ink); }
.who a:hover { color:var(--blue); }
.add { display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff; border:1px solid var(--ink); border-radius:var(--r);
       padding:9px 14px 9px 12px; font-size:13px; font-weight:500; line-height:1; cursor:pointer; }
.add:hover { background:var(--blue); border-color:var(--blue); }
.add .plus { font-size:16px; font-weight:400; line-height:0; position:relative; top:-1px; }
.chip { position:fixed; top:66px; left:16px; z-index:5; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:7px 12px; font-size:13px; color:var(--ink-2); }
.chip b { color:var(--ink); font-weight:600; }
.chip a { color:var(--blue); text-decoration:none; }

/* map controls */
.maplibregl-ctrl-top-right { top:62px; right:16px; }
.maplibregl-ctrl-group { background:var(--surface) !important; border:1px solid var(--hair); border-radius:var(--r) !important; box-shadow:none !important; }
.maplibregl-ctrl-group button { width:34px; height:34px; border-radius:0 !important; }
.maplibregl-ctrl-group button + button { border-top:1px solid var(--hair) !important; }
.maplibregl-ctrl-bottom-right { bottom:12px; right:16px; }
.maplibregl-ctrl-attrib { font-family:var(--sans); font-size:11px; color:var(--ink-3); background:transparent !important; border:0; border-radius:0 !important; padding:2px 0 !important; }
.maplibregl-ctrl-attrib a { color:var(--ink-3); text-decoration:none; }
.maplibregl-ctrl-attrib-button { display:none !important; }
.maplibregl-ctrl-attrib.maplibregl-compact { min-height:0; padding:2px 0 !important; }
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner { display:block !important; }

/* empty-state whisper */
.whisper { position:fixed; left:16px; bottom:16px; z-index:4; font-size:13px; color:var(--ink-2); background:var(--surface); border:1px solid var(--hair);
           border-radius:var(--r); padding:9px 12px; }
.whisper[hidden] { display:none; }

/* panels */
.panel { position:fixed; left:16px; bottom:16px; z-index:7; width:min(360px, calc(100vw - 32px)); background:var(--surface); border:1px solid var(--hair);
         border-radius:var(--r); padding:18px 20px 20px; }
.panel[hidden] { display:none; }
.row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.row strong { font-weight:600; font-size:15px; letter-spacing:-.01em; }
.x { border:0; background:transparent; font-size:20px; line-height:1; cursor:pointer; color:var(--ink-3); padding:2px 4px; border-radius:var(--r); }
.x:hover { color:var(--ink); background:var(--ground); }
.panel input, .panel textarea { width:100%; font-family:var(--sans); font-size:15px; padding:10px 12px; margin-top:10px; border:1px solid var(--hair);
                                border-radius:var(--r); background:var(--surface); color:var(--ink); resize:none; }
.panel input::placeholder, .panel textarea::placeholder { color:var(--ink-3); }
.panel input:focus, .panel textarea:focus { outline:none; border-color:var(--ink); }
.panel input[hidden] { display:none; }
.results { list-style:none; margin:8px 0 0; padding:0; max-height:240px; overflow:auto; }
.results li { padding:10px 2px; border-top:1px solid var(--hair); cursor:pointer; }
.results li:first-child { border-top:0; }
.results li:hover b { color:var(--blue); }
.results li b { display:block; font-size:14px; font-weight:600; }
.results li span { font-size:12px; color:var(--ink-2); }
.hint { font-size:13px; color:var(--ink-2); margin:12px 0 0; }
.hint a { color:var(--blue); text-decoration:none; }
.hint a:hover { text-decoration:underline; }
.muted { font-size:13px; color:var(--ink-2); text-decoration:none; }
.chosen { margin-top:2px; }
.chosen b { display:block; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.chosen span { font-size:12px; color:var(--ink-2); }
.btn { font-family:var(--sans); font-weight:500; font-size:14px; padding:10px 16px; margin-top:12px; border:1px solid var(--ink); border-radius:var(--r);
       background:var(--ink); color:#fff; cursor:pointer; }
.btn:hover { background:var(--blue); border-color:var(--blue); }
.btn:disabled { opacity:.5; }
.err { color:var(--orange); font-size:13px; min-height:1em; margin:8px 0 0; }

/* place card */
.card h2 { margin:0; font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.25; }
.card .addr { font-size:12px; color:var(--ink-2); margin:3px 0 10px; }
.card .v { padding:10px 0; border-top:1px solid var(--hair); font-size:14px; line-height:1.45; }
.card .v a { color:var(--blue); font-weight:600; text-decoration:none; font-size:13px; }
.card .v a:hover { text-decoration:underline; }
.card .actions { margin-top:8px; padding-top:12px; border-top:1px solid var(--hair); display:flex; gap:16px; font-size:13px; }
.card .actions a { color:var(--ink); text-decoration:none; }
.card .actions a:hover { color:var(--blue); }

@media (max-width:640px) {
  .add { position:fixed; right:16px; bottom:16px; z-index:6; width:48px; height:48px; padding:0; justify-content:center; font-size:0; }
  .add .plus { font-size:26px; top:0; }
  .whisper { right:80px; }
  .panel { left:0; right:0; bottom:0; width:100%; border-left:0; border-right:0; border-bottom:0; border-radius:0; padding-bottom:max(20px, env(safe-area-inset-bottom)); }
  .maplibregl-ctrl-bottom-right { bottom:72px; }
}