@keyframes s-ping{0%{transform:scale(.3);opacity:1}100%{transform:scale(2.8);opacity:0}}
@keyframes s-flash{from{background:rgba(214,255,92,.18)}to{background:transparent}}
@keyframes s-rise{from{transform:scale(1.06);opacity:0}to{transform:none;opacity:1}}
@keyframes s-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

body[data-tab="search"]{
  --ink:#08090b;--panel:#0e0f12;--glass:rgba(14,15,18,.88);--line:#22252c;--line2:#30343c;--bone:#ece8df;--mute:#8b909a;--dim:#7c818b;--lit:#d6ff5c;--red:#ff6b5b;--pw:460px;--ease:cubic-bezier(.2,.8,.2,1);
  /* --dim is 04's #5d626c lifted to ≥4.5:1 on every panel shade it sits on (#0e0f12 … #16181c): it labels 10–11 px text */
  background:var(--ink);color:var(--bone);font:14px/1.5 'Geist',system-ui,sans-serif;

  .mono,kbd{font-family:'Geist Mono',ui-monospace,monospace}
  a{color:var(--bone)}
  :focus-visible{outline:2px solid var(--lit);outline-offset:2px;border-radius:4px}
  kbd{font-size:11px;color:var(--mute);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:#14161a}
  .maplibregl-ctrl-attrib{background:rgba(8,9,11,.7)!important;color:var(--dim)}
  .maplibregl-ctrl-attrib a{color:var(--mute)}
  .maplibregl-ctrl-attrib-button{filter:invert(1)}

  /* the tab bar sits where 04's brand was, and moves left of the page panel */
  #tabs{top:16px;right:16px;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line2);font-family:'Geist Mono',monospace;transition:right .5s var(--ease)}
  #tabs a{color:var(--mute)}
  #tabs a:hover{color:var(--bone)}
  #tabs a[aria-current]{background:var(--lit);color:var(--ink)}
  &.paged #tabs{right:calc(var(--pw) + 16px)}

  /* command column */
  .side{position:fixed;top:16px;left:16px;bottom:16px;width:590px;z-index:20;display:flex;flex-direction:column;gap:10px;pointer-events:none}
  .side>*{pointer-events:auto}
  &.paged .side{width:340px}
  .cmd{display:flex;flex-direction:column;min-height:0;flex:0 1 auto}
  .bar{flex:none;display:flex;align-items:center;gap:10px;height:52px;padding:0 14px 0 16px;background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--line2);border-radius:12px;box-shadow:0 18px 50px -10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .2s,box-shadow .2s}
  .bar:focus-within{border-color:#4a4f58;box-shadow:0 18px 60px -10px rgba(0,0,0,.8),0 0 0 4px rgba(214,255,92,.07)}
  .pr{color:var(--lit);font-size:18px;font-weight:600}
  #s-q{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--bone);font:500 16px 'Geist',sans-serif;letter-spacing:-.01em}
  #s-q::placeholder{color:var(--dim)}
  #s-count{font-size:11px;color:var(--lit);white-space:nowrap}
  .chips{flex:none;display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
  .chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 7px;border-radius:7px;font:11.5px 'Geist Mono',monospace;color:var(--mute);background:rgba(14,15,18,.8);border:1px solid var(--line);transition:color .15s,border-color .15s,background .15s}
  .chip i{width:6px;height:6px;border-radius:50%;background:var(--c)}
  .chip .n{color:var(--dim);font-size:10.5px}
  .chip:hover{color:var(--bone);border-color:var(--line2)}
  .chip[aria-pressed=true]{color:var(--ink);background:var(--c);border-color:var(--c)}
  .chip[aria-pressed=true] i{background:var(--ink)}
  .chip[aria-pressed=true] .n{color:var(--ink)}
  #s-res{margin:8px 0 0;padding:6px;min-height:0;flex:0 1 auto;overflow:auto;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line2);border-radius:12px;box-shadow:0 30px 70px -20px rgba(0,0,0,.85);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  .sec{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:10px 10px 4px}
  .more{flex:none;font:500 11px 'Geist Mono',monospace;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--lit);border-radius:6px;padding:3px 9px}
  .more:hover{background:#e6ff94}
  .note{padding:6px 10px 8px;color:var(--mute);font-size:12.5px}
  .note .hint{font:11.5px 'Geist Mono',monospace;color:var(--lit);border:1px solid var(--line);border-radius:5px;padding:1px 6px;margin:0 2px}
  .note .hint:hover{border-color:var(--lit)}
  .note.empty{padding:22px 10px;text-align:center}
  .opts{list-style:none;margin:0;padding:0}
  .row{display:flex;align-items:center;border-radius:8px;position:relative}
  .row[aria-selected=true]{background:#1a1d22}
  .row[aria-selected=true]::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--lit)}
  .go{flex:1;min-width:0;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:0 12px;padding:7px 10px;text-align:left}
  .go :is(img,.img-ph,.gl){width:36px;height:36px;border-radius:6px;object-fit:cover;background:#1a1d22;grid-row:span 2}
  .go .img-ph{padding:2px;font-size:7px;line-height:1.1}
  .go .gl{display:grid;place-items:center;font:600 13px 'Geist Mono',monospace;color:var(--lit)}
  .go b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .go small{grid-column:2;color:var(--mute);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .go .k{grid-column:3;grid-row:1/span 2;font-size:10.5px;color:var(--dim);letter-spacing:.08em;text-align:right}
  .row[aria-selected=true] .k{color:var(--lit)}
  .add{flex:none;min-width:34px;height:30px;margin-right:6px;padding:0 8px;border-radius:7px;font:500 13px 'Geist Mono',monospace;color:var(--mute);border:1px solid var(--line)}
  .add:hover{color:var(--ink);background:var(--lit);border-color:var(--lit)}
  .add.on{color:var(--lit);border-color:rgba(214,255,92,.35)}
  .add.on:hover{background:var(--red);border-color:var(--red);color:var(--ink)}

  /* pins: MapLibre owns the button's transform and opacity, so only its children animate */
  .pe-pin{width:22px;height:22px;display:grid;place-items:center}
  .pe-pin .dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--c);opacity:.92;box-shadow:0 0 0 1.5px rgba(8,9,11,.85);transition:transform .45s cubic-bezier(.2,1.4,.4,1) var(--d,0ms),background .25s var(--d,0ms),opacity .25s var(--d,0ms),box-shadow .35s var(--d,0ms)}
  .pe-pin:hover .dot{opacity:1;transform:scale(1.6)}
  .pe-pin.dim{pointer-events:none}
  .pe-pin.dim .dot{opacity:.14;transform:scale(.7)}
  .pe-pin.gone{visibility:hidden;pointer-events:none;transition:visibility 0s .25s}
  .pe-pin.gone .dot,.pe-pin.gone .lbl{opacity:0}
  .pe-pin.lit .dot{opacity:1;transform:scale(1.6);box-shadow:0 0 0 1.5px #08090b,0 0 14px 3px var(--c)}
  .pe-pin.lit .dot::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--c);opacity:0;animation:s-ping 1s ease-out var(--d,0ms)}
  .pe-pin:is(.cur,.on) .dot{opacity:1;transform:scale(2.2);box-shadow:0 0 0 1.5px #fff,0 0 22px 6px var(--c)}
  .pe-pin .lbl{position:absolute;left:20px;top:50%;transform:translate(-4px,-50%);white-space:nowrap;font:500 11.5px 'Geist Mono',monospace;color:var(--bone);background:rgba(8,9,11,.82);border:1px solid var(--line);padding:2px 7px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .2s var(--d,0ms),transform .3s var(--ease) var(--d,0ms)}
  .pe-pin:is(.top,.cur) .lbl{opacity:1;transform:translate(0,-50%)}
  .pe-pin.on .lbl,.pe-pin:hover .lbl{opacity:0}
  .pe-pin.inr::before{content:attr(data-n);position:absolute;right:-6px;top:-8px;min-width:16px;height:16px;padding:0 3px;border-radius:4px;background:var(--bone);color:var(--ink);font:600 10px/16px 'Geist Mono',monospace;text-align:center;pointer-events:none}
  .pe-pin.inr .dot{opacity:1;box-shadow:0 0 0 2px var(--bone),0 0 10px 1px var(--c)}

  /* hover popup */
  .pe-pop{z-index:10}
  .pe-pop .maplibregl-popup-content{padding:0;width:240px;background:var(--panel);color:var(--bone);border:1px solid var(--line2);border-top:3px solid var(--c);border-radius:10px;overflow:hidden;box-shadow:0 18px 40px -10px rgba(0,0,0,.8);font-family:'Geist',sans-serif;cursor:pointer}
  .pe-pop .maplibregl-popup-tip{display:none}
  .pe-pop :is(img,.img-ph){display:block;width:100%;height:118px;object-fit:cover;background:#15171b}
  .pe-pop b{display:block;padding:8px 12px 0;font-weight:500;font-size:13.5px;line-height:1.3}
  .pe-pop span:not(.img-ph){display:block;padding:3px 12px 10px;font-size:12px;line-height:1.4;color:var(--mute)}
  .pe-pop i{font:normal 10px 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--c);padding:0 12px 10px;display:block}

  /* route */
  .route{margin-top:auto;flex:none;max-height:40%;display:flex;flex-direction:column;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line2);border-radius:12px;box-shadow:0 20px 50px -14px rgba(0,0,0,.75)}
  .route header{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px 10px;border-bottom:1px solid var(--line)}
  .route header b{font-size:11px;letter-spacing:.16em;font-weight:600}
  #s-rstats{font-size:11.5px;color:var(--lit)}
  #s-rlist{list-style:none;margin:0;padding:6px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  #s-rlist li{display:flex;align-items:center;border-radius:7px;transition:background .15s}
  #s-rlist li[draggable]{cursor:grab}
  #s-rlist li:hover,#s-rlist li:focus-within{background:#181a1f}
  .stop{flex:1;min-width:0;display:grid;grid-template-columns:22px 1fr auto;align-items:baseline;gap:0 8px;padding:7px 8px;text-align:left}
  .stop .n{font-size:11px;color:var(--lit)}
  .stop .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
  .stop .m{font-size:10.5px;color:var(--dim);white-space:nowrap}
  .ctl{display:none;gap:2px;padding-right:4px}
  #s-rlist li:hover .ctl,#s-rlist li:focus-within .ctl{display:flex}
  #s-rlist li:hover .m,#s-rlist li:focus-within .m{display:none}
  .ctl button{width:24px;height:24px;border-radius:5px;font:12px 'Geist Mono',monospace;color:var(--mute)}
  .ctl button:hover{background:#262930;color:var(--bone)}
  .ctl button.x:hover{background:var(--red);color:var(--ink)}
  #s-rlist li.moved{animation:s-flash .6s ease-out}
  #s-rlist li.empty{display:block;padding:10px 8px;color:var(--mute);font-size:12.5px;line-height:1.6}
  .route .empty code{font-family:'Geist Mono',monospace;color:var(--lit);font-size:12px}
  .route footer{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-top:1px solid var(--line);font-size:10.5px;color:var(--dim)}
  .route footer button{color:var(--mute);font-size:11px}
  .route footer button:hover{color:var(--red)}

  /* key hints and toast */
  .keys{position:fixed;top:24px;left:630px;z-index:4;font-size:11px;color:var(--dim);display:flex;gap:14px;white-space:nowrap;transition:opacity .3s}
  &.paged .keys{opacity:0}
  @media (max-width:1399px){.keys{display:none}} /* at 1280 px the hints would run under the tab bar */
  #s-toast{position:fixed;bottom:52px;left:50%;z-index:30;transform:translate(-50%,8px);opacity:0;font-size:12px;background:var(--lit);color:var(--ink);padding:6px 12px;border-radius:7px;pointer-events:none;transition:opacity .2s,transform .3s var(--ease)}
  #s-toast.show{opacity:1;transform:translate(-50%,0)}
  &.paged #s-toast{left:calc(50% - var(--pw) / 2)}

  /* page panel */
  .page{position:fixed;top:0;right:0;bottom:0;width:var(--pw);z-index:15;background:var(--panel);border-left:1px solid var(--line2);overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;box-shadow:-30px 0 60px -20px rgba(0,0,0,.7)}
  &.paged .page{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
  .page:focus{outline:0}
  .close{position:fixed;top:12px;right:12px;z-index:2;display:flex;gap:8px;align-items:center;height:30px;padding:0 10px;border-radius:7px;background:rgba(8,9,11,.75);backdrop-filter:blur(8px);border:1px solid var(--line2);font:11px 'Geist Mono',monospace;color:var(--mute)}
  .close:hover{color:var(--bone);border-color:#4a4f58}
  .hero{margin:0;position:relative;height:300px;overflow:hidden;background:#15171b}
  .hero :is(img,.img-ph){width:100%;height:100%;object-fit:cover;display:block}
  .hero img{animation:s-rise 1.1s var(--ease)}
  .hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,18,0) 45%,var(--panel));pointer-events:none}
  .hero figcaption{position:absolute;left:24px;right:24px;bottom:10px;z-index:1;font-size:10.5px;color:var(--mute)}
  .pbody{padding:6px 24px 40px;animation:s-up .5s var(--ease) .08s both}
  .kick{font:10.5px 'Geist Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--lit);margin:0 0 10px}
  .page h1{font-size:29px;line-height:1.12;letter-spacing:-.025em;font-weight:600;margin:0 0 6px;text-wrap:balance}
  .page h1:focus{outline:0}
  .sub{font:13px 'Geist Mono',monospace;color:var(--mute);margin:0 0 16px}
  .lede{font-size:15.5px;line-height:1.6;color:#d6d2c9;margin:0 0 18px}
  .btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:8px;font-weight:500;border:1px solid var(--line2);transition:background .15s,color .15s}
  .btn.pri{background:var(--lit);color:var(--ink);border-color:var(--lit)}
  .btn.pri:hover{background:#e6ff94}
  .btn.rem{color:var(--red);border-color:rgba(255,107,91,.4)}
  .btn.rem:hover{background:var(--red);color:var(--ink)}
  .acts{display:flex;align-items:center;gap:12px;margin-bottom:22px}
  .acts .mono{font-size:11px;color:var(--dim)}
  .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 14px}
  .facts div{background:var(--panel);padding:10px 12px}
  .facts dt{font:10px 'Geist Mono',monospace;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
  .facts dd{margin:2px 0 0;font:500 13.5px 'Geist Mono',monospace}
  .months{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin:0 0 6px}
  .months span{height:26px;display:grid;place-items:center;font:500 10.5px 'Geist Mono',monospace;color:var(--dim);border-radius:4px;background:#16181c}
  .months span.y{background:rgba(214,255,92,.14);color:var(--lit)}
  .months-text{font-size:12px;color:var(--mute);margin:0 0 6px}
  .est{font-size:12px;color:var(--mute);margin:-6px 0 14px}
  .ints{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
  .ints li{font-size:11.5px;color:var(--mute);display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:6px;padding:2px 8px}
  .ints i{width:6px;height:6px;border-radius:50%;background:var(--c)}
  .ints small{color:var(--dim);font:10px 'Geist Mono',monospace}
  .page h3{font:500 10.5px 'Geist Mono',monospace;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin:28px 0 10px;display:flex;gap:10px;align-items:center}
  .page h3::after{content:'';flex:1;height:1px;background:var(--line)}
  .page :is(p,li){color:#cfcbc2}
  .tips{margin:0;padding:0;list-style:none;counter-reset:t}
  .tips li{position:relative;padding:0 0 10px 28px;counter-increment:t}
  .tips li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:2px;font:11px 'Geist Mono',monospace;color:var(--lit)}
  .gal{display:grid;gap:14px}
  .gal figure{margin:0}
  .gal .ph{display:block;width:100%}
  .gal :is(img,.img-ph){width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;display:block;background:#15171b}
  .gal.two{grid-template-columns:1fr 1fr}
  .gal.two :is(img,.img-ph){aspect-ratio:4/3}
  figcaption{font-size:12px;color:var(--mute);margin-top:6px;line-height:1.4}
  .cr{display:block;font:10.5px 'Geist Mono',monospace;color:var(--dim);margin-top:2px}
  .cr a{color:var(--mute)}
  :is(.near,.src,.tstops){list-style:none;margin:0;padding:0}
  :is(.near,.tstops) a{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);text-decoration:none}
  :is(.near,.tstops) a:hover b{color:var(--lit)}
  :is(.near,.tstops) b{font-weight:500}
  :is(.near,.tstops) span{font:11.5px 'Geist Mono',monospace;color:var(--dim);white-space:nowrap}
  .src li{font:11px 'Geist Mono',monospace;padding:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .src a{color:var(--mute)}
  .legs{width:100%;border-collapse:collapse;font-size:12.5px}
  .legs td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top}
  .legs td.n{font-family:'Geist Mono',monospace;font-size:11.5px;color:var(--mute);white-space:nowrap;text-align:right}
  .legs small{display:block;color:var(--dim);font-size:11.5px;line-height:1.4;margin-top:2px}
  .by{font:10px 'Geist Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--lit);border:1px solid rgba(214,255,92,.3);border-radius:4px;padding:0 4px}
  .tagline{font-size:17px;color:#d6d2c9;margin:0 0 18px}
}