/* Colors come from theme.css custom properties only. */
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html,body{height:100%}
body{background:var(--outside);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.35;-webkit-text-size-adjust:100%;overscroll-behavior:none}
button,select,input{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer;text-align:inherit}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--hl);outline-offset:2px}
.search :focus-visible,.sign :focus-visible,.btn.nav:focus-visible,.btn.svc:focus-visible,.locate:focus-visible{outline-color:var(--on-sign)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mut{color:var(--muted)}
.nojs{padding:24px;background:var(--bg);color:var(--text)}

/* A sign: solid color, white text, thin white inner border */
.sign{color:var(--on-sign);outline:2px solid var(--on-sign);outline-offset:-5px}

#app{height:100svh;max-width:1280px;margin:0 auto;background:var(--bg);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;position:relative;overflow:hidden;overflow:clip}
.top{background:var(--yel);color:var(--ink);padding:calc(8px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 8px calc(16px + env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:center;gap:10px}
#app[data-tab=spot] .top{background:var(--blue);color:var(--on-sign)}
#app[data-tab=info] .top{background:var(--green);color:var(--on-sign)}
.brand{font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:.5px;line-height:1;color:inherit}
.top-right{display:flex;align-items:center;gap:8px}
.clock{font:700 13px var(--mono);white-space:nowrap}
.hbtn{font:700 12px var(--mono);border:3px solid currentColor;padding:4px 8px;min-height:34px;text-align:center;display:flex;align-items:center;gap:6px;color:inherit;letter-spacing:.3px}
.hbtn:hover{background:var(--ink);color:var(--yel);border-color:var(--ink)}
#app[data-tab=spot] .hbtn:hover,#app[data-tab=info] .hbtn:hover{background:var(--on-sign);color:var(--ink);border-color:var(--on-sign)}
.ic{width:18px;height:18px;flex:0 0 auto;display:none;fill:currentColor}
html[data-mode=auto] .ic-auto,html[data-mode=day] .ic-day,html[data-mode=night] .ic-night{display:block}
.hbtn .tl{display:inline}

main{min-height:0;position:relative}
.view{height:100%}
.view[hidden]{display:none}
.find{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:0}
.controls,.content,.panel,.mapwrap{min-width:0}
.controls{padding:8px calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left))}

/* Guide green search panel with a brown destination chip inside */
.search{background:var(--green);color:var(--on-sign);outline:2px solid var(--on-sign);outline-offset:-5px;padding:9px 12px;font-weight:800;font-size:15px;text-transform:uppercase;display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.chip-dest{background:var(--brown);outline:2px solid var(--on-sign);outline-offset:-3px;padding:2px 10px;display:flex;align-items:center;gap:8px;flex:2 1 auto;min-width:0}
.chip-dest .near{flex:0 0 auto;color:var(--on-sign)}
.chip-dest.me .near{display:none}
.search .slash{flex:0 0 auto;color:var(--on-sign)}
.sel{position:relative;display:block;min-width:0;flex:1 1 auto}
.sel select{appearance:none;-webkit-appearance:none;color:var(--on-sign);font-weight:800;text-transform:uppercase;padding:6px 20px 6px 0;width:100%;min-width:0;text-overflow:ellipsis;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat right 4px center}
.sel select option{background:var(--brown);color:var(--on-sign)}
.sel.tsel{flex:0 0 auto}
.sel.tsel select{width:auto;min-width:0}
.sel.tsel select option{background:var(--green)}
.pickrow{margin-top:6px}
.pickrow input{border:3px solid var(--line);padding:8px 10px;font:700 14px var(--mono);width:100%;background:var(--panel);color:var(--text)}
.filters{display:flex;gap:6px;margin-top:6px;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.flt{flex:0 0 auto;border:2px solid var(--line);padding:8px 10px 6px;font-weight:800;font-size:12px;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;min-height:38px;color:var(--text)}
.flt.on{background:var(--text);border-color:var(--text);color:var(--bg)}
.flt.sm{font:700 11px var(--mono);letter-spacing:.4px;min-height:32px;padding:6px 9px 4px}

/* Mobile: the map fills the area and the list is a bottom sheet over it */
.content{position:relative;min-height:0;overflow:hidden;overflow:clip}
.mapwrap{position:absolute;inset:0;background:var(--map-bg)}
#map{position:absolute;inset:0}
.mapskel{position:absolute;inset:0;background:var(--map-bg);animation:blink 1.1s steps(2) infinite}
.mapskel[hidden],.mapmsg[hidden]{display:none}
.mapmsg{position:absolute;inset:0;background:var(--raised);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px;border:3px solid var(--red)}
.mapmsg h2{font-weight:900;font-size:20px;text-transform:uppercase}
.mapmsg p{color:var(--muted);font-size:14px}
@keyframes blink{50%{opacity:.55}}
.locate{position:absolute;top:10px;right:10px;width:48px;height:48px;background:var(--green);outline:2px solid var(--on-sign);outline-offset:-4px;display:flex;align-items:center;justify-content:center;z-index:4}
.locate svg{fill:var(--on-sign)}
.locate.busy{animation:blink .8s steps(2) infinite}
.locate:hover{background:var(--green-hover)}

.panel{position:absolute;left:0;right:0;bottom:0;height:142px;background:var(--panel);border-top:4px solid var(--line);display:flex;flex-direction:column;z-index:6}
.grab{display:flex;justify-content:center;align-items:center;height:26px;width:100%;flex:0 0 auto;touch-action:none;cursor:grab}
.grab .bar{display:block;width:56px;height:5px;background:var(--muted)}
.grab:hover .bar,.grab:focus-visible .bar{background:var(--text)}
.listhead{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 calc(12px + env(safe-area-inset-right)) 6px calc(12px + env(safe-area-inset-left));flex:0 0 auto;touch-action:none}
.count{font:700 12px var(--mono);color:var(--muted);letter-spacing:1px;white-space:nowrap}
.sort{display:flex;gap:6px}
.list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left));overscroll-behavior:contain}
.row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:center;border-top:2px solid var(--rule);padding:10px 0;width:100%;min-height:60px;color:var(--text)}
@media (hover:hover){.row:hover{background:var(--raised)}}
.row.picked{background:var(--raised)}
.px{background:var(--yel);color:var(--ink);font-weight:900;font-size:22px;text-align:center;padding:6px 2px 2px;line-height:1.05;min-height:38px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.px small{font:700 9px var(--mono);letter-spacing:.5px;line-height:1;margin-top:2px}
.px.free{background:var(--free-bg);color:var(--ink);border:2px solid var(--free-border);font-size:16px}
.px.rates{background:var(--rates-bg);color:var(--rates-fg);border:2px solid var(--rates-fg);font-size:11px;letter-spacing:.5px}
.px.closed{background:var(--raised);color:var(--muted);border:2px solid var(--muted);font-size:11px;letter-spacing:.5px}
.nm{font-weight:800;font-size:15px;text-transform:uppercase;line-height:1.15}
.dt{font:500 12px var(--mono);color:var(--muted);margin-top:3px}
/* Walk time reads like a green exit sign */
.walk{font:700 12px var(--mono);color:var(--on-sign);background:var(--green);outline:2px solid var(--on-sign);outline-offset:-3px;text-align:center;white-space:nowrap;padding:7px 9px;line-height:1.25}
.sk{pointer-events:none}
.skb,.skl{background:var(--raised);animation:blink 1.1s steps(2) infinite}
.skl{height:12px;margin:6px 0}.skl.w70{width:70%}.skl.w40{width:40%}.skl.w20{width:44px}
.msg{border:3px solid var(--line);padding:16px;margin:10px 0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.msg.err{border-color:var(--red)}
.msg h2{font-weight:900;font-size:22px;text-transform:uppercase;line-height:1}
.msg p{color:var(--muted)}
.msg .list{width:100%;padding:0}

.btn{display:flex;align-items:center;justify-content:center;background:var(--yel);color:var(--ink);font-weight:900;font-size:18px;text-transform:uppercase;text-align:center;padding:13px 14px 11px;border:3px solid var(--yel);text-decoration:none;min-height:50px;width:100%;letter-spacing:.2px}
.btn.alt{background:none;color:var(--text);border-color:var(--line);font-size:16px}
/* Directions are guide green, saving a spot is service blue, reserve and pay stay yellow */
.btn.nav{background:var(--green);border-color:var(--green);color:var(--on-sign);outline:2px solid var(--on-sign);outline-offset:-7px}
.btn.svc{background:var(--blue);border-color:var(--blue);color:var(--on-sign);outline:2px solid var(--on-sign);outline-offset:-7px}
@media (hover:hover){
  .btn:hover{background:var(--text);border-color:var(--text);color:var(--bg)}
  .btn.nav:hover{background:var(--green-hover);border-color:var(--green-hover);color:var(--on-sign)}
  .btn.svc:hover{background:var(--blue-hover);border-color:var(--blue-hover);color:var(--on-sign)}
}
.msg .btn,.mapmsg .btn{width:auto}

.pin{background:var(--yel);color:var(--ink);font:800 13px var(--sans);padding:4px 7px 2px;border:2px solid var(--ink);white-space:nowrap;line-height:1.1;cursor:pointer;display:block}
.pin.free{background:var(--free-bg);border-color:var(--ink)}
.pin.rates,.pin.closed{background:var(--rates-bg);color:var(--rates-fg);border-color:var(--rates-fg);font-size:10px;letter-spacing:.4px}
.pin.closed{color:var(--muted);border-color:var(--muted)}
.pin.cluster{z-index:2;background:var(--cluster-bg);color:var(--on-sign);border:3px solid var(--on-sign);font:900 16px var(--sans);min-width:36px;text-align:center;padding:5px 8px 3px}
.pin.hide,.pin.clustered{display:none}
.pin.picked{outline:3px solid var(--hl);z-index:5}
.pin.spread{z-index:4}
.dest{z-index:7;background:var(--brown);color:var(--on-sign);font:800 11px var(--mono);padding:5px 8px 3px;outline:2px solid var(--on-sign);outline-offset:-4px;border:2px solid var(--brown);text-transform:uppercase;pointer-events:none;white-space:nowrap}
.dest.hide{display:none}
/* Your location is the one round shape, the universal blue dot */
.medot{width:20px;height:20px;background:var(--dot);border:3px solid var(--on-sign);border-radius:50% !important;pointer-events:none}
.maplibregl-ctrl-attrib{background:var(--attrib-bg)!important;color:var(--muted)!important;font-size:10px}
.maplibregl-ctrl-attrib a{color:var(--text)!important}

.sheet{position:absolute;left:0;right:0;bottom:0;height:56%;background:var(--panel);z-index:20;border-top:6px solid var(--yel);display:flex;flex-direction:column}
.sheet[hidden]{display:none}
.sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 calc(14px + env(safe-area-inset-right)) 16px calc(14px + env(safe-area-inset-left));overscroll-behavior:contain}
.sheet-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding-top:4px}
.sheet h2{font-weight:900;font-size:28px;line-height:.98;text-transform:uppercase}
.x{flex:0 0 auto;border:2px solid var(--line);font:700 11px var(--mono);padding:8px 8px 6px;min-height:36px;letter-spacing:.5px;color:var(--text)}
.addr{font:500 13px var(--mono);color:var(--muted);margin-top:8px}
.bigrow{display:flex;gap:14px;align-items:center;margin-top:14px;border:4px solid var(--yel);padding:12px}
.bigrow .px{min-width:92px;font-size:34px;padding:10px 6px 6px}
.bigrow .px.free{font-size:26px}.bigrow .px.rates,.bigrow .px.closed{font-size:14px}
.lab,.kv2 label{font:500 11px var(--mono);color:var(--muted);display:block;letter-spacing:.5px;text-transform:uppercase}
.val{font-weight:900;font-size:20px;text-transform:uppercase;line-height:1.05;margin-top:2px}
.kv2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.kv2>div{border-top:2px solid var(--rule);padding-top:6px}
.kv2 b{font-weight:900;font-size:19px;line-height:1.1;display:block;text-transform:uppercase}
.kv2 b.exit{font:700 15px var(--mono);color:var(--on-sign);background:var(--green);outline:2px solid var(--on-sign);outline-offset:-3px;padding:8px 10px;display:inline-block;margin-top:4px}
.ctas{display:grid;gap:8px;margin-top:16px}
.sheet h3,.page h3{font:700 12px var(--mono);color:var(--heading);letter-spacing:1px;margin:20px 0 6px;text-transform:uppercase}
.kvl{list-style:none}
.kvl li{border-top:2px solid var(--rule);padding:7px 0;font-size:15px}
.sheet p,.page p{margin-top:6px}
.src{margin-top:20px;font:500 12px var(--mono);color:var(--muted);display:grid;gap:4px;border-top:2px solid var(--rule);padding-top:10px}
.src a{color:var(--text)}

.page{overflow-y:auto;-webkit-overflow-scrolling:touch}
.page-in{padding:16px calc(16px + env(safe-area-inset-right)) 24px calc(16px + env(safe-area-inset-left));max-width:760px;display:grid;gap:4px}
.ph{font-weight:900;font-size:34px;text-transform:uppercase;line-height:1}
.page .btn{margin-top:12px}
.empty-box{background:var(--blue);color:var(--on-sign);outline:2px solid var(--on-sign);outline-offset:-8px;padding:24px;margin-top:12px;display:grid;gap:12px}
.empty-box h3{font:900 28px var(--sans);color:var(--on-sign);margin:0;letter-spacing:0;line-height:1}
.empty-box p{font-size:18px;margin:0}
.empty-box .btn{background:var(--yel);border-color:var(--yel);color:var(--ink)}
.warn{border:2px solid var(--red);padding:10px;font-size:19px}
.big{background:var(--blue);color:var(--on-sign);outline:2px solid var(--on-sign);outline-offset:-8px;padding:22px;margin-top:12px}
.big .lab,.big .kv2 label{color:var(--on-blue-soft)}
.big .kv2>div{border-top-color:var(--blue-rule)}
.bigname{font:900 38px var(--sans);color:var(--on-sign);letter-spacing:0;text-transform:uppercase;line-height:.95;margin:6px 0 0}
.count-big{font:700 44px var(--mono);margin-top:16px;letter-spacing:-1px}
.count-big.mut{font-size:16px;color:var(--on-blue-soft);letter-spacing:0}
.count-big.expired{color:var(--on-sign);background:var(--red);padding:4px 10px;display:inline-block;font-size:30px;font-family:var(--sans);font-weight:900}
.meterform{margin-top:12px;display:grid;gap:6px}
.meterform label{font:700 12px var(--mono);color:var(--heading);letter-spacing:1px;text-transform:uppercase}
.mf-row{display:grid;grid-template-columns:1fr 110px;gap:8px}
.mf-row input{border:3px solid var(--line);padding:10px;font:700 18px var(--mono);min-width:0;background:var(--panel);color:var(--text)}
.mf-row .btn{margin-top:0}
.page .btn.svc{margin-top:12px}
/* INFO is guide green, since it holds the free parking guide */
#app[data-tab=info] .page h3{background:var(--green);color:var(--on-sign);outline:2px solid var(--on-sign);outline-offset:-4px;padding:9px 12px 7px;letter-spacing:1px}
.info .byline{font-weight:900;font-size:20px;text-transform:uppercase}
.info .links a,.info .contact a{color:var(--link)}
.plate{display:inline-block;justify-self:start;background:var(--yel);color:var(--ink);font-weight:900;font-size:56px;line-height:.9;padding:10px 16px 4px;border:4px solid var(--ink);outline:3px solid var(--yel);margin:6px 3px 14px}
.plate small{display:block;font-size:20px;letter-spacing:4px;margin-top:2px}

.tabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--yel);padding-bottom:env(safe-area-inset-bottom);background:var(--panel)}
.tabs button{padding:15px 0 16px;text-align:center;font-weight:900;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.tabs button.on{background:var(--yel);color:var(--ink)}
.tabs button[data-tab=spot].on{background:var(--blue);color:var(--on-sign)}
.tabs button[data-tab=info].on{background:var(--green);color:var(--on-sign)}
#app[data-tab=spot] .tabs{border-top-color:var(--blue)}
#app[data-tab=info] .tabs{border-top-color:var(--green)}

.errbar,.notebar{position:absolute;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom));padding:12px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between;z-index:50;font-weight:800;font-size:19px;line-height:1.2}
.errbar{background:var(--red);color:var(--on-sign)}
.notebar{background:var(--blue);color:var(--on-sign);outline:2px solid var(--on-sign);outline-offset:-6px;z-index:49}
.errbar[hidden],.notebar[hidden]{display:none}
.errbar .btn,.notebar .btn{width:auto;min-height:44px;padding:8px 12px;font-size:19px;color:var(--on-sign);border-color:var(--on-sign)}
@media (hover:hover){.errbar .btn:hover,.notebar .btn:hover{background:var(--on-sign);color:var(--ink);border-color:var(--on-sign)}}

/* Red plates (FULL, error): white on #D7261E is 4.48:1, so text stays 19px or larger. */
.px.full,.pin.full{background:var(--red);color:var(--on-sign);font-size:19px}

/* Desktop: map left at about 65%, list and details in a right column */
@media (min-width:900px){
  body{padding:0}
  #app{border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
  .brand{font-size:26px}
  .controls{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:center;padding:10px 14px}
  .controls .pickrow{grid-column:1 / -1;margin:0}
  .search{white-space:nowrap;min-width:440px}
  .filters{margin-top:0}
  .content{display:grid;grid-template-columns:65fr 35fr;grid-template-rows:minmax(0,1fr);overflow:visible}
  .mapwrap{position:relative;inset:auto;margin:0 0 0 14px}
  .panel{position:static;height:auto;border-top:0;margin:0 14px;z-index:auto;background:var(--bg)}
  .grab{display:none}
  .listhead{padding:8px 0 6px;touch-action:auto}
  .list{padding:0}
  .sheet{left:auto;width:35%;right:0;top:0;bottom:0;height:auto;border-top:6px solid var(--yel)}
  .sheet .grab{display:none}
}
@media (max-width:380px){
  .hbtn .tl{display:none}
  .hbtn{padding:4px 7px}
}
@media (max-height:700px){
  .flt{min-height:34px;padding:6px 9px 4px}
}
@media (prefers-reduced-motion:reduce){.mapskel,.skb,.skl,.locate.busy{animation:none}}