/* freq-db — spectrum atlas
   Dark instrument ground with a quiet steel UI, so the category palette carries all the colour. */

:root{
  --ink:#04060a; --ink2:#070b11; --panel:#0c121a; --panel2:#111a25;
  --line:#18212c; --line2:#22303f; --line3:#2e4054;
  --text:#dbe4ef; --text2:#8d9db2; --text3:#5a6a7e;
  --mark:#ffdfae; --markglow:#ff9c3f;
  --link:#9fd4ff; --shadow:rgba(0,0,0,.6);
  --rail:96px; --mini:0px; --detailw:0px;

  --c-broadcast:#ff7a63; --c-amateur:#3ed9a4; --c-aviation:#61a8ff;
  --c-marine:#2fc6d8;   --c-military:#a08bdd; --c-satellite:#cf8ae8;
  --c-space:#cf8ae8;    --c-navigation:#ffb44d; --c-cellular:#ff92b6;
  --c-ism:#d9c84f;      --c-wifi:#7ce4ff;     --c-radar:#ef6b4f;
  --c-science:#9bdc52;  --c-timefreq:#b6c3d1; --c-emergency:#ff4152;
  --c-utility:#8794a8;  --c-citizen:#ffa53f;  --c-industrial:#8794a8;
  --c-natural:#6fd6c0;  --c-medical:#ff9fd0;  --c-government:#7f8ea4;
  --c-unknown:#6d7c92;
}
:root[data-skin="light"]{
  --ink:#f4f6f9; --ink2:#eef1f6; --panel:#ffffff; --panel2:#f7f9fc;
  --line:#dde3ec; --line2:#c9d3e0; --line3:#aab8c9;
  --text:#141b24; --text2:#4d5c70; --text3:#7e8da0;
  --mark:#8a4a00; --markglow:#d4761a;
  --link:#1a5fa8; --shadow:rgba(20,30,45,.16);
  --c-broadcast:#c8402b; --c-amateur:#0f8a5f; --c-aviation:#1d63c4;
  --c-marine:#0b7f90;   --c-military:#6a4fb5; --c-satellite:#9038b5;
  --c-space:#9038b5;    --c-navigation:#a86a00; --c-cellular:#c4356c;
  --c-ism:#8a7c00;      --c-wifi:#0a7f9e;     --c-radar:#bf4526;
  --c-science:#4e8a12;  --c-timefreq:#556575; --c-emergency:#c00d1c;
  --c-utility:#5a6878;  --c-citizen:#a85c00;  --c-industrial:#5a6878;
  --c-natural:#0e8a76;  --c-medical:#b03878;  --c-government:#5a6878;
  --c-unknown:#6d7c92;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:Archivo,"Helvetica Neue",Arial,system-ui,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}
button,input,select{font:inherit;color:inherit}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--markglow);outline-offset:2px;border-radius:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#app{display:flex;flex-direction:column;height:100dvh}

/* ---------------------------------------------------------------- header */
#bar{
  display:flex;align-items:center;gap:12px;padding:9px 14px;
  background:linear-gradient(var(--panel),var(--ink2));
  border-bottom:1px solid var(--line2);z-index:40;flex:0 0 auto;
}
.brand{display:flex;align-items:baseline;gap:9px;flex:0 0 auto;text-decoration:none;color:inherit}
.brand .glyph{
  width:15px;height:19px;flex:0 0 auto;align-self:center;
  background:
    linear-gradient(var(--markglow),var(--markglow)) 0 60%/2px 40% no-repeat,
    linear-gradient(var(--markglow),var(--markglow)) 4px 25%/2px 75% no-repeat,
    linear-gradient(var(--mark),var(--mark))         8px 0/2px 100% no-repeat,
    linear-gradient(var(--markglow),var(--markglow)) 12px 45%/2px 55% no-repeat;
}
.brand b{font-weight:700;letter-spacing:-.01em;font-size:16px}
.brand span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3)}

#search{flex:1 1 auto;max-width:440px;position:relative}
#q{width:100%;background:var(--ink);border:1px solid var(--line2);border-radius:7px;
   padding:7px 11px 7px 30px;font-size:13.5px}
#q::placeholder{color:var(--text3)}
#search::before{content:"";position:absolute;left:10px;top:50%;width:11px;height:11px;
  margin-top:-6px;border:1.5px solid var(--text3);border-radius:50%;
  box-shadow:5px 5px 0 -4.2px var(--text3);pointer-events:none}
#results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:var(--panel2);border:1px solid var(--line3);border-radius:8px;
  box-shadow:0 18px 40px var(--shadow);max-height:min(60dvh,420px);overflow:auto;display:none}
#results.on{display:block}
#results button{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);padding:8px 11px;cursor:pointer}
#results button:last-child{border-bottom:0}
#results button:hover,#results button:focus-visible,#results button.cur{background:var(--panel)}
#results .rf{font-size:11.5px;color:var(--text2);flex:0 0 96px}
#results .rn{font-size:13px;min-width:0}
#results .rs{display:block;font-size:11px;color:var(--text3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#results .grp{padding:6px 11px 4px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text3);border-bottom:1px solid var(--line)}
#results .empty{padding:11px;color:var(--text3);font-size:13px}

.tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn{background:var(--panel2);border:1px solid var(--line2);border-radius:7px;
  padding:6px 11px;font-size:12.5px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:var(--line3);background:var(--panel)}
.btn .cc{font-size:11px;color:var(--text2)}
.btn .auto{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--markglow);
  border:1px solid color-mix(in srgb,var(--markglow) 40%,transparent);border-radius:3px;padding:1px 4px}
.btn[aria-pressed="true"]{border-color:var(--markglow);color:var(--mark)}

/* ---------------------------------------------------------------- popovers */
.pop{position:absolute;top:52px;right:14px;width:300px;z-index:70;display:none;
  background:var(--panel2);border:1px solid var(--line3);border-radius:10px;
  box-shadow:0 22px 48px var(--shadow);overflow:hidden}
.pop.on{display:block}
.pop .hd{padding:10px 12px 8px;border-bottom:1px solid var(--line)}
.pop .hd p{margin:0 0 8px;font-size:11.5px;color:var(--text2);line-height:1.45}
.pop input[type=search]{width:100%;background:var(--ink);border:1px solid var(--line2);
  border-radius:6px;padding:6px 9px;font-size:13px}
.pop .list{max-height:min(50dvh,320px);overflow:auto;padding:5px}
.pop .list button{width:100%;display:flex;align-items:baseline;gap:9px;text-align:left;
  background:none;border:0;border-radius:6px;padding:7px 9px;cursor:pointer;font-size:13px}
.pop .list button:hover,.pop .list button:focus-visible{background:var(--panel)}
.pop .list button[aria-current="true"]{background:color-mix(in srgb,var(--markglow) 14%,transparent)}
.pop .code{font-size:11px;color:var(--text2);flex:0 0 48px;letter-spacing:.06em}
.pop .reg{color:var(--text3);font-size:11px;margin-left:auto}
.pop .ft{padding:8px 12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--text3)}

#filterPop label{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:6px;
  cursor:pointer;font-size:13px}
#filterPop label:hover{background:var(--panel)}
#filterPop .sw{width:11px;height:11px;border-radius:3px;background:var(--cc);flex:0 0 auto}
#filterPop input[type=checkbox]{accent-color:var(--markglow);margin:0}
#filterPop .n{margin-left:auto;font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- stage */
#stage{flex:1 1 auto;position:relative;overflow:hidden;display:flex;min-height:0}

/* The dial. Drawn on a canvas: nothing to accidentally text-select while dragging, and the
   occupancy marks render far better than 1,200 DOM nodes did. */
#mini{display:none;flex:0 0 var(--mini);position:relative;cursor:grab;touch-action:none;
  background:linear-gradient(90deg,var(--ink),var(--ink2));
  border-right:1px solid var(--line2);
  user-select:none;-webkit-user-select:none}
#mini:active{cursor:grabbing}
#miniCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#miniView{position:absolute;left:1px;right:1px;border:1px solid var(--mark);
  background:color-mix(in srgb,var(--mark) 10%,transparent);border-radius:2px;
  min-height:4px;pointer-events:none;
  box-shadow:0 0 10px color-mix(in srgb,var(--markglow) 30%,transparent)}
#miniView.off{opacity:.25}

#scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;position:relative;
  overscroll-behavior:contain;scrollbar-width:thin;
  background:radial-gradient(120% 60% at 50% 45%,
    color-mix(in srgb,var(--panel) 55%,transparent),transparent 70%)}
#canvas{position:relative;width:100%}

/* Lives in #stage, not #scroll. position:fixed anchored it to the viewport, so it painted
   over the minimap column. */
#bar,#dock,#railbg,#focus,#readout,#zoneLabel,.tick,#legend,.ent .chip{
  user-select:none;-webkit-user-select:none}
body.dragging{user-select:none;-webkit-user-select:none;cursor:grabbing}

#railbg{position:absolute;left:var(--mini);top:0;bottom:0;width:var(--rail);
  pointer-events:none;z-index:5;
  background:linear-gradient(90deg,var(--ink2),color-mix(in srgb,var(--ink2) 70%,transparent));
  border-right:1px solid var(--line)}

.tick{position:absolute;left:0;right:0;pointer-events:none}
.tick .ln{position:absolute;left:var(--rail);right:0;top:0;border-top:1px solid var(--line);opacity:.55}
.tick.maj .ln{border-top-color:var(--line2);opacity:.9}
.tick .lb{position:absolute;left:0;top:0;width:calc(var(--rail) - 12px);text-align:right;
  transform:translateY(-50%);font-size:10.5px;color:var(--text2);letter-spacing:.02em;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.tick.maj .lb{color:var(--text);font-weight:600}
.tick .nub{position:absolute;left:calc(var(--rail) - 7px);top:0;width:7px;border-top:1px solid var(--line3)}

.den{position:absolute;left:calc(var(--rail) - 7px);width:6px;height:2px;border-radius:1px;
  opacity:.8;box-shadow:0 0 4px -1px currentColor}

.ent{position:absolute;pointer-events:none;--cc:var(--c-unknown)}
.ent .band{position:absolute;inset:0;
  background:color-mix(in srgb,var(--cc) 13%,transparent);
  border-left:2px solid var(--cc);
  border-top:1px solid color-mix(in srgb,var(--cc) 40%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--cc) 40%,transparent);
  border-radius:0 3px 3px 0}
.ent.spot .band{background:none;border:0;border-top:2px solid var(--cc);
  border-radius:0;top:-1px;bottom:auto;height:0}
.ent.suspected .band{border-left-style:dashed;border-top-style:dashed;border-bottom-style:dashed}
.ent .chip{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;
  background:var(--panel);border:1px solid color-mix(in srgb,var(--cc) 45%,var(--line2));
  border-left:3px solid var(--cc);border-radius:0 6px 6px 0;
  padding:4px 9px 5px;max-width:100%;text-align:left;font:inherit;display:block;
  box-shadow:0 3px 10px color-mix(in srgb,var(--shadow) 60%,transparent)}
.ent .chip:hover{background:var(--panel2);border-color:var(--cc)}
.ent .chip .nm{font-size:12.5px;font-weight:500;line-height:1.28;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ent .chip .fr{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:10.5px;color:var(--text2);letter-spacing:.01em;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ent .chip .sus{color:var(--c-unknown);font-style:italic}
.ent.near .chip{border-color:var(--cc);background:var(--panel2);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 30%,transparent),0 8px 22px var(--shadow)}
.ent.near .chip .nm{font-weight:600}
.ent.sel .chip{box-shadow:0 0 0 2px var(--mark),0 8px 22px var(--shadow)}

/* Behind the entry chips: at z-index 20 the hairline crossed chip text and read as a
   strikethrough. The readout is a separate element on its own higher layer. */
#focus{position:absolute;left:0;right:0;pointer-events:none;z-index:6}
#focus .hair{position:absolute;left:calc(var(--rail) + var(--mini));right:var(--detailw);top:0;
  border-top:1px dashed color-mix(in srgb,var(--mark) 45%,transparent)}
#focus .glow{position:absolute;left:calc(var(--rail) + var(--mini));right:var(--detailw);
  top:-38px;height:76px;pointer-events:none;
  background:linear-gradient(var(--g0),var(--g1) 50%,var(--g0));
  --g0:transparent;--g1:color-mix(in srgb,var(--markglow) 7%,transparent)}
#readout{position:absolute;left:calc(var(--mini) + 4px);transform:translateY(-50%);z-index:22;
  pointer-events:none;
  background:var(--ink);border:1px solid var(--markglow);border-radius:4px;padding:2px 6px;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:11px;font-weight:600;color:var(--mark);white-space:nowrap;
  box-shadow:0 0 14px color-mix(in srgb,var(--markglow) 25%,transparent)}
#zoneLabel{position:absolute;left:calc(var(--rail) + var(--mini));right:var(--detailw);
  transform:translateY(-50%);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text3);text-align:right;padding-right:10px;pointer-events:none;z-index:20}

/* ---------------------------------------------------------------- detail */
#detail{position:absolute;top:0;right:0;bottom:0;width:360px;z-index:30;
  background:var(--panel);border-left:1px solid var(--line2);
  display:none;flex-direction:column;box-shadow:-14px 0 34px var(--shadow)}
#detail.on{display:flex}
#detail .dh{display:flex;align-items:flex-start;gap:10px;padding:14px 14px 11px;
  border-bottom:1px solid var(--line)}
#detail .dh h2{margin:0;font-size:17px;line-height:1.25;font-weight:600;text-wrap:balance}
#detail .close{margin-left:auto;flex:0 0 auto;background:none;border:1px solid var(--line2);
  border-radius:6px;width:26px;height:26px;cursor:pointer;color:var(--text2);line-height:1}
#detail .close:hover{border-color:var(--line3);color:var(--text)}
#detail .body{overflow:auto;padding:0 14px 22px}
.cat{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cc);
  border:1px solid color-mix(in srgb,var(--cc) 40%,transparent);
  background:color-mix(in srgb,var(--cc) 12%,transparent);
  border-radius:99px;padding:2px 8px;font-weight:600}
.freqbig{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:19px;font-weight:500;margin:13px 0 3px;letter-spacing:-.01em}
.freqsub{font-size:11.5px;color:var(--text3);font-family:"IBM Plex Mono",monospace}
#detail p{font-size:13.5px;line-height:1.6;color:var(--text2);margin:12px 0 0}
#detail p.lede{color:var(--text);font-size:14px}
#detail h3{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);
  margin:20px 0 8px;font-weight:600}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:16px 0 0;font-size:12.5px}
dl.facts dt{color:var(--text3);letter-spacing:.05em;text-transform:uppercase;font-size:10px;padding-top:2px}
dl.facts dd{margin:0;color:var(--text)}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}
.tags span,.tags a{font-size:10.5px;color:var(--text2);border:1px solid var(--line2);
  border-radius:4px;padding:1px 6px;background:var(--ink2);text-decoration:none}
.conf{display:inline-block;font-size:10.5px;border-radius:4px;padding:1px 6px;font-weight:600;letter-spacing:.04em}
.conf.high{color:var(--c-amateur);background:color-mix(in srgb,var(--c-amateur) 14%,transparent)}
.conf.medium{color:var(--c-navigation);background:color-mix(in srgb,var(--c-navigation) 14%,transparent)}
.conf.low{color:var(--c-radar);background:color-mix(in srgb,var(--c-radar) 14%,transparent)}
.nearby a{display:flex;gap:9px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--text);font-size:12.5px}
.nearby a:last-child{border-bottom:0}
.nearby a:hover{color:var(--link)}
.nearby .nf{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--text3);flex:0 0 88px}
.srcs{list-style:none;margin:0;padding:0}
.srcs li{margin:0 0 7px;font-size:11.5px;line-height:1.45;word-break:break-word}
.srcs .pub{color:var(--text3);display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase}

/* ---------------------------------------------------------------- dock */
#dock{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:9px 14px;
  background:linear-gradient(var(--ink2),var(--panel));border-top:1px solid var(--line2);z-index:40}
#zoomwrap{display:flex;align-items:center;gap:10px;flex:1 1 auto;max-width:440px}
#zoomwrap label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);flex:0 0 auto}
#zoom{flex:1 1 auto;-webkit-appearance:none;appearance:none;background:none;height:22px;cursor:ew-resize}
#zoom::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--line2),var(--line3))}
#zoom::-moz-range-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--line2),var(--line3))}
#zoom::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  margin-top:-5px;background:var(--mark);border:1px solid var(--markglow);
  box-shadow:0 0 10px color-mix(in srgb,var(--markglow) 45%,transparent)}
#zoom::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--mark);
  border:1px solid var(--markglow)}
#zspan{font-size:11px;color:var(--text2);flex:0 0 auto;min-width:78px;text-align:right}
#jumps{display:flex;gap:5px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
#jumps::-webkit-scrollbar{display:none}
#jumps button{background:var(--ink);border:1px solid var(--line2);border-radius:5px;
  padding:4px 9px;font-size:11px;cursor:pointer;color:var(--text2);white-space:nowrap;
  letter-spacing:.06em;font-weight:500}
#jumps button:hover{color:var(--text);border-color:var(--line3)}
#jumps button.act{color:var(--mark);border-color:var(--markglow);
  background:color-mix(in srgb,var(--markglow) 12%,transparent)}

/* ---------------------------------------------------------------- states */
#boot{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:var(--ink);flex-direction:column;gap:14px;text-align:center;padding:24px}
#boot.gone{display:none}
#boot .sweep{width:180px;height:2px;background:var(--line2);border-radius:2px;overflow:hidden;position:relative}
#boot .sweep::after{content:"";position:absolute;inset:0;width:40%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--markglow),transparent);
  animation:sweep 1.1s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
#boot p{margin:0;color:var(--text2);font-size:13px;max-width:38ch;line-height:1.55}
#boot .err{color:var(--c-emergency)}
#boot .retry{margin-top:4px}

#legend{position:absolute;right:calc(var(--detailw) + 14px);bottom:10px;z-index:25;
  background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line2);
  border-radius:8px;padding:8px 10px;backdrop-filter:blur(6px);max-width:290px}
#legend summary{cursor:pointer;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text3);list-style:none}
#legend summary::-webkit-details-marker{display:none}
#legend[open] summary{margin-bottom:8px}
#legend .grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px}
#legend .grid i{display:flex;align-items:center;gap:6px;font-style:normal;font-size:11px;color:var(--text2)}
#legend .grid i::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--cc);flex:0 0 auto}

/* ---------------------------------------------------------------- band zones */
/* Faint alternating shading behind each named band, with its name set large and very low
   contrast in the empty space. Turns dead vertical gaps into orientation. */
.zone{position:absolute;left:calc(var(--rail));right:0;pointer-events:none;z-index:0}
.zone.alt{background:color-mix(in srgb,var(--text3) 3.5%,transparent)}
.zone .zedge{position:absolute;left:0;right:0;top:0;border-top:1px solid var(--line2);opacity:.8}
.zone .zname{position:absolute;right:22px;transform:translateY(-50%);
  font-size:clamp(30px,5.5vw,62px);font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--text);opacity:.055;white-space:nowrap}
.zone .zsub{position:absolute;right:24px;transform:translateY(-50%);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text3);opacity:.5;white-space:nowrap}

/* ---------------------------------------------------------------- dock controls */
.zbtn{width:24px;height:24px;flex:0 0 auto;border-radius:6px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line2);color:var(--text2);
  font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
  padding:0;font-weight:500}
.zbtn:hover{border-color:var(--markglow);color:var(--mark);background:var(--panel)}
.zbtn:active{background:color-mix(in srgb,var(--markglow) 16%,transparent)}
.zbtn:disabled{opacity:.35;cursor:default;border-color:var(--line2);color:var(--text3);
  background:var(--panel2)}

#dialwrap{display:none;align-items:center;gap:9px;flex:0 0 auto;max-width:230px}
#dialwrap label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text3);flex:0 0 auto}
#dial{flex:1 1 auto;min-width:80px;-webkit-appearance:none;appearance:none;
  background:none;height:22px;cursor:ew-resize}
#dial::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:var(--line2)}
#dial::-moz-range-track{height:3px;border-radius:2px;background:var(--line2)}
#dial::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  margin-top:-4px;background:var(--text2);border:1px solid var(--line3)}
#dial::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--text2);
  border:1px solid var(--line3)}
#dial:hover::-webkit-slider-thumb{background:var(--mark);border-color:var(--markglow)}
#dspan{font-size:11px;color:var(--text3);flex:0 0 auto;min-width:46px;text-align:right}

/* ---------------------------------------------------------------- responsive */
@media (max-width:899px){
  :root{--rail:74px}
  #bar{flex-wrap:wrap;padding:8px 11px;gap:8px}
  .brand{order:1}.tools{order:2}#search{order:3;flex-basis:100%;max-width:none}
  #detail{top:auto;left:0;right:0;bottom:0;width:auto;max-height:74dvh;
    border-left:0;border-top:1px solid var(--line3);border-radius:14px 14px 0 0;
    box-shadow:0 -14px 40px var(--shadow)}
  #legend{display:none}
  #dock{gap:10px}#zspan{display:none}#jumps{margin-left:0}
  .pop{right:11px;left:11px;width:auto}
}
@media (min-width:900px){
  :root{--mini:54px}
  #mini{display:block}
  #dialwrap{display:flex}
  body.detail-open{--detailw:360px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;animation:none !important;transition:none !important}
}

/* A search hit that is allocated somewhere else — shown, but never presented as local. */
#results .oor{
  display:inline-block;margin-left:7px;padding:0 5px;border-radius:3px;
  font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;vertical-align:1px;
  color:var(--text3);border:1px solid var(--line2);background:var(--ink2);
}