/* Trip hub — palette after Bikavér, Tokaji gold and Danube water. List pane left, live map right; phones get a bottom tab bar. */
:root{
  --bg:#EEF0EC; --surface:#FBFBF8; --surface-2:#E4E7E1; --line:#D2D6CE; --fg:#1B211F; --muted:#5D6862; --faint:#8A948E;
  --accent:#7B1E2C; --accent-ink:#FFFFFF; --accent-soft:#F1DEE0; --gold:#9A6B12; --gold-soft:#F3E7CC;
  --ok:#2F6B45; --ok-soft:#DCEBDF; --warn:#9A5A08; --warn-soft:#F6E5C9; --bad:#A33A2A; --bad-soft:#F5DEDA;
  --val:#1D6A66; --ana:#B9476F;
  --c-dine:#7B1E2C; --c-wine:#8C3A63; --c-cocktail:#1D6A66; --c-rooftop:#A56F10; --c-coffee:#6E4A2F; --c-sweet:#B9476F; --c-classic:#C0451D; --c-winery:#56407A; --c-see:#2D6A8A; --c-go:#47586A;
  --f-display:"Young Serif", Georgia, "Times New Roman", serif;
  --f-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --r:12px; --pane:560px; color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#121614; --surface:#1A1F1D; --surface-2:#232A27; --line:#2E3733; --fg:#E9ECE8; --muted:#A3ADA7; --faint:#77827C;
  --accent:#D77381; --accent-ink:#1A0E10; --accent-soft:#3A2227; --gold:#D9AE5B; --gold-soft:#3A3020;
  --ok:#7DC497; --ok-soft:#1F3428; --warn:#E3A957; --warn-soft:#3A2D1B; --bad:#E58372; --bad-soft:#3B2420;
  --val:#4FB3AC; --ana:#E287A8;
  --c-dine:#D77381; --c-wine:#C77FA5; --c-cocktail:#4FB3AC; --c-rooftop:#D9AE5B; --c-coffee:#C29672; --c-sweet:#E287A8; --c-classic:#E87D53; --c-winery:#A58ACB; --c-see:#6FB2D3; --c-go:#8FA3B6;
  color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.45 var(--f-body);-webkit-font-smoothing:antialiased;padding-top:env(safe-area-inset-top,0px)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.app{height:100%;display:grid;grid-template-rows:auto 1fr;min-height:0}
.top{display:flex;align-items:center;gap:14px;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--surface)}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand h1{font:400 22px/1.1 var(--f-display);margin:0;white-space:nowrap}
.brand h1 i{font-style:normal;color:var(--accent)}
.dates{font:12px var(--f-mono);color:var(--muted)}
.status{font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold);font-weight:600;white-space:nowrap}
.who{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff;font-weight:700;font-size:13px;flex:none}
.tabs{display:flex;gap:2px;margin-left:auto}
.tab{position:relative;border:0;background:none;padding:8px 11px;border-radius:9px;cursor:pointer;color:var(--muted);font-weight:600;font-size:14px;display:flex;align-items:center;gap:6px}
.tab svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tab[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.tab .dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.tab.mobile-only{display:none}
.main{display:grid;grid-template-columns:minmax(0,var(--pane)) minmax(0,1fr);min-height:0}
.pane{overflow-y:auto;min-height:0;padding:18px 20px 60px;border-right:1px solid var(--line)}
.mapwrap{position:relative;min-height:0;overflow:hidden;background:var(--surface-2)}
#map{position:absolute;inset:0}
@media (max-width:980px){
  .top{padding:8px 16px;gap:10px}
  .brand h1{font-size:20px}.dates{display:none}
  .main{grid-template-columns:minmax(0,1fr)}
  .pane{border-right:0;padding:14px 16px calc(96px + env(safe-area-inset-bottom,0px))}
  .mapwrap{display:none}
  body.show-map .pane{display:none}
  body.show-map .mapwrap{display:block}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));justify-content:space-between;overflow-x:auto}
  .tab{flex:1 0 auto;flex-direction:column;gap:2px;font-size:11px;padding:6px 6px;min-width:52px}
  .tab[aria-selected="true"]{background:none;color:var(--accent)}
  .tab.mobile-only{display:flex}
  body.show-map .mapwrap{height:calc(100% - 64px - env(safe-area-inset-bottom,0px))}
}
h2.vt{font:400 26px/1.15 var(--f-display);margin:2px 0 4px;text-wrap:balance}
.lede{color:var(--muted);margin:0 0 14px;max-width:62ch}
.eyebrow{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:6px 11px;font-size:13.5px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;min-height:34px}
.btn:hover{border-color:var(--fg)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{border-color:transparent;background:none}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:2px;background:var(--surface);gap:2px}
.seg button{border:0;background:none;padding:6px 11px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--c);display:inline-block}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.field{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 10px;min-width:0;width:100%}
.badges{display:flex;flex-wrap:wrap;gap:4px}
.badge{font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.badge.mich{background:var(--accent-soft);color:var(--accent)}
.badge.gm{background:var(--gold-soft);color:var(--gold)}
.pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.p-locked{background:var(--ok-soft);color:var(--ok)}
.p-agreed{background:var(--ok-soft);color:var(--ok)}
.p-split{background:var(--bad-soft);color:var(--bad)}
.p-open{background:var(--warn-soft);color:var(--warn)}
.p-todo{background:var(--warn-soft);color:var(--warn)}
.p-asked{background:var(--gold-soft);color:var(--gold)}
.p-booked{background:var(--ok-soft);color:var(--ok)}
.price{font:12.5px var(--f-mono)}
.note{margin:4px 0 0;color:var(--muted);font-size:13.5px}
/* votes */
.votes{display:inline-flex;gap:4px;align-items:center}
.vchip{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;padding:2px 6px 2px 2px;border-radius:999px;background:var(--surface-2)}
.vchip b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;color:#fff;font-size:10px}
.vchip svg{width:13px;height:13px}
.vchip.v2{background:var(--accent-soft);color:var(--accent)}
.vchip.v1{background:var(--ok-soft);color:var(--ok)}
.vchip.vn{background:var(--surface-2);color:var(--muted)}
.vchip.vx{color:var(--faint)}
.vote{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.vote button{border:0;background:none;padding:6px 10px;cursor:pointer;display:grid;place-items:center;color:var(--muted);min-width:40px;min-height:34px}
.vote button+button{border-left:1px solid var(--line)}
.vote svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vote button[aria-pressed="true"][data-v="2"]{background:var(--accent);color:var(--accent-ink)}
.vote button[aria-pressed="true"][data-v="2"] svg{fill:currentColor}
.vote button[aria-pressed="true"][data-v="1"]{background:var(--ok);color:#fff}
.vote button[aria-pressed="true"][data-v="-1"]{background:var(--fg);color:var(--bg)}
/* days */
.days{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px 4px;scrollbar-width:thin}
.day{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 11px;cursor:pointer;text-align:left;min-width:66px}
.day b{display:block;font:400 17px/1.1 var(--f-display)}
.day span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.day[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.day[aria-pressed="true"] span{color:inherit;opacity:.85}
.day.today{box-shadow:inset 0 -3px 0 var(--gold)}
.dayhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.dayhead h3{font:400 24px/1.15 var(--f-display);margin:0}
.daycost{font:13px var(--f-mono);color:var(--muted);text-align:right;margin-left:auto}
.daycost b{display:block;font-size:20px;color:var(--fg);font-weight:600}
/* timeline */
.tl{list-style:none;margin:0;padding:0}
.tl>li{display:grid;grid-template-columns:50px 18px minmax(0,1fr);gap:0 8px}
.tl .time{font:13px var(--f-mono);color:var(--muted);padding-top:14px;text-align:right}
.tl .rail{position:relative}
.tl .rail::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--line)}
.tl>li:first-child .rail::before{top:20px}
.tl>li:last-child .rail::before{bottom:calc(100% - 20px)}
.tl .num{position:absolute;left:-1px;top:11px;width:20px;height:20px;border-radius:50%;background:var(--c,var(--faint));color:#fff;font:600 11px/20px var(--f-mono);text-align:center}
.tl .dot{position:absolute;left:2px;top:14px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:3px solid var(--faint)}
.tl>li.next .time{color:var(--accent);font-weight:600}
.stop{padding:8px 0 14px;min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.card.plain{background:none;border-style:dashed}
.stopcard{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:12px}
.stopcard.noimg{grid-template-columns:minmax(0,1fr)}
.what{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--c,var(--muted));font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pname{font:400 19px/1.2 var(--f-display);margin:2px 0 4px;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.pname:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.thumb{width:92px;height:92px;border-radius:9px;object-fit:cover;display:block;background:var(--surface-2)}
.ph-empty{display:grid;place-items:center;background:color-mix(in srgb,var(--c) 18%,var(--surface));color:var(--c);font:400 13px/1.2 var(--f-display);text-align:center;padding:8px}
.alts{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--muted)}
/* decide */
.slotbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.slotbox header{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.slotbox header b{font:400 17px var(--f-display)}
.slotbox header .when{font:12.5px var(--f-mono);color:var(--muted)}
.cand{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);align-items:center}
.cand:last-child{border-bottom:0}
.cand.chosen{background:color-mix(in srgb,var(--ok) 8%,var(--surface))}
.cand .thumb{width:64px;height:64px}
.cand .nm{font-weight:700;font-size:15px;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.cand .meta{font-size:12.5px;color:var(--muted)}
.cand .ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.closed{font-size:11px;font-weight:700;color:var(--bad)}
.deck{position:relative;max-width:440px;margin:0 auto}
.deckcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.deckcard .ph{aspect-ratio:4/3;position:relative}
.deckcard .ph img,.deckcard .ph .ph-empty{width:100%;height:100%;object-fit:cover;display:block}
.deckcard .bd{padding:14px;display:grid;gap:6px}
.deckbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.deckbtns button{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.deckbtns svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
.deckbtns .love{color:var(--accent)}.deckbtns .ok{color:var(--ok)}.deckbtns .no{color:var(--muted)}
/* places */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.pcard .ph{position:relative;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.pcard .ph img,.pcard .ph .ph-empty{width:100%;height:100%;object-fit:cover;display:block}
.strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:100%;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip img{flex:0 0 100%;scroll-snap-align:start;cursor:zoom-in}
.pcount{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font:600 11px var(--f-mono);padding:2px 6px;border-radius:6px}
.pcard .cat{position:absolute;left:8px;top:8px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--c);color:#fff}
.pcard .bd{padding:10px 12px 12px;display:grid;gap:5px;flex:1;align-content:start}
.filters{display:grid;gap:10px;margin-bottom:14px}
.count{font-size:13px;color:var(--muted)}
/* bookings, budget */
.progress{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin:6px 0 4px}
.progress i{display:block;height:100%;background:var(--ok);border-radius:99px}
.list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.bk .h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.bk .h b{font:400 18px var(--f-display)}
.bk .when{font:12.5px var(--f-mono);color:var(--muted)}
.phone{font:13px var(--f-mono);user-select:all}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 16px}
.tilek{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.tilek span{font-size:12px;color:var(--muted)}
.tilek b{display:block;font:600 20px var(--f-mono);font-variant-numeric:tabular-nums}
.bars{display:grid;gap:8px;margin:6px 0 10px}
.barrow{display:grid;grid-template-columns:62px minmax(0,1fr) 100px;gap:8px;align-items:center;font-size:13px}
.track{position:relative;height:16px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.track .plan{position:absolute;inset:0 auto 0 0;background:var(--line)}
.track .act{position:absolute;inset:4px auto 4px 0;background:var(--accent);border-radius:2px}
.barrow .v{font:12px var(--f-mono);text-align:right;color:var(--muted)}
form.grid2{display:grid;grid-template-columns:110px 80px minmax(0,1fr);gap:8px}
form.grid2 .full{grid-column:1/-1}
form label{font-size:12px;color:var(--muted);display:grid;gap:3px}
.splist li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 10px}
.x{border:0;background:none;cursor:pointer;color:var(--faint);padding:6px}
.kv{display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 10px;font-size:14px;margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.tips{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px}
.info{display:grid;gap:12px}
.info h4{margin:0 0 8px;font:400 18px var(--f-display)}
.empty{padding:20px;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);text-align:center}
/* map */
.maptitle{position:absolute;left:12px;top:12px;z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;max-width:calc(100% - 70px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.maplegend{position:absolute;left:12px;bottom:26px;z-index:2;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);border-radius:10px;padding:7px 10px;display:flex;flex-wrap:wrap;gap:4px 10px;max-width:calc(100% - 24px);font-size:11.5px}
.maplegend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.maplegend i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.mk{width:18px;height:18px;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);color:#fff;font:700 10.5px/14px var(--f-mono);text-align:center;cursor:pointer;padding:0}
.mk.n{width:24px;height:24px;line-height:20px;font-size:11.5px}
.mk.love{box-shadow:0 0 0 3px var(--accent-soft),0 1px 4px rgba(0,0,0,.35)}
.maplibregl-popup-content{background:var(--surface);color:var(--fg);border-radius:10px;padding:8px 10px;font:13px var(--f-body);box-shadow:0 4px 14px rgba(0,0,0,.2)}
.maplibregl-popup-tip{border-top-color:var(--surface)!important;border-bottom-color:var(--surface)!important}
.maplibregl-ctrl-attrib{font-size:10px}
/* sheet */
.scrim{position:fixed;inset:0;background:rgba(10,12,11,.45);z-index:50}
.sheet{position:fixed;z-index:51;right:0;top:0;bottom:0;width:min(480px,100%);background:var(--surface);border-left:1px solid var(--line);overflow-y:auto;box-shadow:-10px 0 30px rgba(0,0,0,.18);padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
@media (max-width:600px){.sheet{top:auto;height:90%;width:100%;border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0}}
.sheet .hero{position:relative;aspect-ratio:16/10;background:var(--surface-2)}
.sheet .hero .strip img,.sheet .hero .ph-empty{width:100%;height:100%;object-fit:cover}
.sheet .close{position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:22px;cursor:pointer;z-index:2}
.sheet .in{padding:16px 18px;display:grid;gap:14px}
.sheet h3{font:400 26px/1.15 var(--f-display);margin:0;text-wrap:balance}
.sheet p{margin:0}
.sec{display:grid;gap:5px}
.sec>b{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.opendays{display:flex;gap:4px;flex-wrap:wrap}
.opendays span{font:11.5px var(--f-mono);padding:3px 6px;border-radius:6px;background:var(--surface-2);color:var(--faint)}
.opendays span.on{background:var(--ok-soft);color:var(--ok);font-weight:600}
.thread{display:grid;gap:8px}
.msg{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;font-size:14px}
.msg .av{width:24px;height:24px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.msg time{font-size:11.5px;color:var(--faint);margin-left:6px}
.thumbs{display:flex;gap:6px;overflow-x:auto}
.thumbs img{width:76px;height:76px;object-fit:cover;border-radius:8px;cursor:zoom-in;flex:none}
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:20px}
.lightbox img{max-height:86vh;max-width:100%;border-radius:8px}
.lightbox .cap{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#ddd;font-size:12px}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:9px 14px;border-radius:9px;font-size:13.5px;z-index:70;max-width:90vw}
.login{max-width:440px;margin:12vh auto;padding:24px;text-align:center}
.login h2{font:400 30px var(--f-display);margin:0 0 8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.leaflet-container{background:var(--surface-2);font:12px var(--f-body)}
@media (prefers-color-scheme: dark){.leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9)}}
.leaflet-div-icon{background:none;border:0}
