/* Same tokens, fonts and component shapes as the trunk.lincolnscanner.org dashboard. */
:root{--bg:#16181d;--panel:#1b1e24;--panel2:#24272e;--line:#2e323b;--line2:#3a3e47;--text:#e9e9ed;--dim:#9397ab;--dim2:#75798c;--blue:#7fa6f5;--amber:#e0b25f;--green:#6fcf87;--red:#e5736f;--accent:#5b8def}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden}
body{color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:13px}
button,input{font-family:inherit}
.mono{font-family:'JetBrains Mono',monospace}
.dimtxt{color:var(--dim)}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

#app{height:100vh;height:100dvh;display:flex;flex-direction:column}
#top{height:46px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--panel)}
#top .title{font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.btn{background:none;border:1px solid #3a5a8f;color:#cfdcfa;border-radius:6px;padding:5px 9px;cursor:pointer;font-size:12px;white-space:nowrap;text-decoration:none;display:inline-block}
.btn:hover{background:#24324d}
.btn.plain{border-color:var(--line2);color:#b2b6ca}
.btn.plain:hover{border-color:var(--dim);background:none}
.btn.on{background:#3a5a8f;color:#fff}

.livechip{display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:12px;font-size:11.5px;border:1px solid var(--line2);color:var(--dim)}
.livechip i{width:7px;height:7px;border-radius:50%;background:var(--dim2)}
.livechip.ok{color:#b9e8c5;border-color:#2c4a35}.livechip.ok i{background:var(--green)}
.livechip.bad{color:#f3c4bd;border-color:#5a2f2b}.livechip.bad i{background:var(--red)}

#main{flex:1;min-height:0;display:flex}
#panel{width:316px;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--panel);min-height:0}
#listView,#detailView{flex:1;min-height:0;display:flex;flex-direction:column}
#panel .head{padding:12px 14px 8px;display:flex;flex-direction:column;gap:10px}
.headline{display:flex;align-items:baseline;justify-content:space-between}
.h1{font-size:15px;font-weight:500}
.seg{display:flex;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.seg div{flex:1;text-align:center;padding:5px 0;font-size:12px;cursor:pointer;color:var(--dim);user-select:none}
.seg div.on{background:var(--line);color:var(--text)}
#search{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line2);border-radius:6px;padding:7px 9px;font-size:12px}
#search::placeholder{color:var(--dim2)}
.legend{display:flex;gap:12px;font-size:11px;color:var(--dim)}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.foot{padding:10px 14px 12px;border-top:1px solid var(--line);font-size:10.5px;line-height:1.5;color:var(--dim2)}

#rows{flex:1;overflow:auto;padding:4px 8px 12px;display:flex;flex-direction:column;gap:2px}
.gh{padding:10px 8px 4px;font-size:11px;color:var(--dim2);text-transform:uppercase;letter-spacing:.06em}
.row{padding:9px 8px 9px 10px;border-radius:8px;display:flex;flex-direction:column;gap:5px;cursor:pointer;border:1px solid transparent;text-align:left;background:none;color:inherit;width:100%}
.row:hover{background:var(--panel2)}
.row.sel{background:var(--panel2);border-color:var(--line2)}
.row .l1{display:flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.row .nm{flex:1;min-width:0}
.row .nm b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .nm span{display:block;font-size:11px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tm{font-size:11px;color:var(--dim);flex:none}
.row .snip{font-size:11.5px;color:#b2b6ca;padding-left:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.tag{font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--line);color:#cfd3e5;flex:none}
.tag.ok{background:#1e3324;color:var(--green)}
.empty{color:var(--dim2);padding:26px 18px;text-align:center;line-height:1.5}
.empty b{display:block;color:var(--dim);font-weight:500;margin-bottom:4px}
.skel{height:58px;margin:3px 0;border-radius:8px;background:linear-gradient(90deg,var(--panel2),#2b2f37,var(--panel2));background-size:200% 100%;animation:sk 1.2s infinite linear}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
#more{margin:8px auto 0;display:block}

/* detail */
.dhead{padding:10px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.back{background:none;border:1px solid var(--line2);color:#b2b6ca;border-radius:6px;padding:4px 9px;font-size:12px;cursor:pointer}
.back:hover{border-color:var(--dim)}
.dbody{flex:1;overflow:auto;padding:12px 14px 16px;display:flex;flex-direction:column;gap:12px}
.dtitle{display:flex;align-items:center;gap:8px}
.dtitle .dot{width:9px;height:9px}
.dtitle h2{margin:0;font-size:15px;font-weight:600;flex:1;min-width:0}
.meta{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12px}
.meta dt{color:var(--dim2)}.meta dd{margin:0;color:var(--text)}
.note{font-size:11.5px;line-height:1.5;color:var(--dim);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.evs{display:flex;flex-direction:column;gap:6px}
.ev{display:flex;gap:10px;padding:9px 10px;border-radius:8px;background:var(--panel2);border:1px solid transparent}
.ev.playing{border-color:#3a5a8f}
.ev .pbtn{margin-top:1px}
.ev .tx{flex:1;min-width:0}
.ev .t{font-size:11px;color:var(--dim2);margin-bottom:3px;display:flex;gap:8px}
.ev p{margin:0;font-size:12.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ev .noaud{font-size:10.5px;color:var(--dim2)}
.pbtn{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--line);color:var(--text);font-size:10px;flex:none;border:0;cursor:pointer;padding:0}
.pbtn:hover:not(:disabled){background:var(--line2)}
.pbtn:disabled{opacity:.4;cursor:default}
.pbtn.ghost{visibility:hidden}

/* map */
#mapwrap{flex:1;min-width:0;position:relative;background:var(--bg)}
#map{position:absolute;inset:0;background:var(--bg)}
.leaflet-container{font-family:Inter,system-ui,sans-serif;background:var(--bg)}
.leaflet-control-attribution{background:rgba(27,30,36,.85) !important;color:var(--dim2) !important;font-size:10px}
.leaflet-control-attribution a{color:var(--dim) !important}
.leaflet-bar a{background:var(--panel);color:var(--text);border-color:var(--line2)}
.leaflet-bar a:hover{background:var(--panel2)}
.leaflet-tooltip{background:rgba(10,11,14,.92);border:1px solid var(--line2);color:var(--text);border-radius:6px;font-size:11.5px;box-shadow:none;padding:4px 8px}
.leaflet-tooltip-top:before{border-top-color:rgba(10,11,14,.92)}
.pin{position:relative;width:16px;height:16px}
.pin b{position:absolute;inset:3px;border-radius:50%;background:var(--c);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--c)}
.pin.closed b{opacity:.55;box-shadow:none}
.pin.sel b{inset:1px;box-shadow:0 0 0 2px #fff}
.pin.active:before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--c);animation:pulse 1.8s infinite ease-out}
@keyframes pulse{from{transform:scale(.7);opacity:.9}to{transform:scale(2.3);opacity:0}}
.pin.fresh b{animation:flash .5s 6 alternate}
@keyframes flash{from{background:#fff}to{background:var(--c)}}

#banner{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:12px;background:#5a1f1c;border:1px solid #c0504a;color:#ffe4e1;border-radius:8px;padding:8px 12px;box-shadow:0 8px 28px rgba(0,0,0,.55);max-width:calc(100% - 24px)}
#toast{position:absolute;left:50%;bottom:16px;transform:translate(-50%,12px);z-index:1000;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:8px 12px;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 24px)}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* transport (same slot as the trunk dashboard's bottom bar) */
#transport{height:58px;flex:none;display:flex;align-items:center;gap:14px;padding:0 16px;border-top:1px solid var(--line);background:var(--panel)}
#transport .pbtn{width:32px;height:32px;font-size:12px}
#now{min-width:0;width:260px;display:flex;align-items:center;gap:8px;color:#b2b6ca;white-space:nowrap;overflow:hidden}
#now b{font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis}
#seek{flex:1;min-width:60px;accent-color:var(--accent)}
#time{width:84px;text-align:right;font-size:11.5px}

.modal{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:16px}
.modal .card{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:20px 22px;max-width:460px;line-height:1.55;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal h2{margin:0 0 10px;font-size:16px}
.modal p{margin:0 0 10px;color:#c6c9d8}
.modal .actions{display:flex;justify-content:flex-end;margin-top:6px}

.onlymobile{display:none}
path.area.active{animation:areapulse 2.4s infinite ease-in-out}
@keyframes areapulse{0%,100%{fill-opacity:.12}50%{fill-opacity:.28}}
#mtabs{display:none}
@media (max-width:760px){
  #top{height:auto;flex-wrap:wrap;gap:8px 10px;padding:8px 12px}
  #top .btn.plain:not(#aboutBtn){display:none}
  #mtabs{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
  #mtabs .seg{flex:1}
  #mtabs .seg div{padding:9px 0;font-size:13px}
  #main{flex-direction:column}
  #panel{width:100%;border-right:none;flex:1}
  .page-map #panel{display:none}
  .page-calls #mapwrap{display:none}
  #mapwrap{flex:1}
  #transport{height:auto;flex-wrap:wrap;gap:8px 10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  #now{width:auto;flex:1}
  #seek{order:5;flex-basis:100%}
  .onlymobile{display:inline-block}
  .row{padding:12px 10px}
  #search{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.pin.active:before,.pin.fresh b,.skel,path.area.active{animation:none}}