/* After neuron-explorer's style.css (lyramakesmusic/neuron-explorer): its palette, panels and type, for the parts the
   expert explorer keeps. */
:root {
  --bg: #000;
  --panel: rgba(9, 11, 13, 0.74);
  --raise: rgba(255, 255, 255, 0.06);
  --ink: #d4d4d4;
  --dim: #8c8c8c;
  --faint: #555;
  --up: #ffb547;
  --down: #ff4f9a;
  --link: #38c8ff;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
input, select { background: var(--raise); border: 0; border-radius: 4px; padding: 5px 8px; outline: none; }
select option { background: #111; }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 1px solid var(--dim); outline-offset: 1px; }
a { color: var(--dim); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.faint { color: var(--faint); }

header { position: fixed; inset: 0 0 auto 0; height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 16px; z-index: 5; }
#title { font-weight: 600; }
#jump { width: 130px; font-family: var(--mono); }
#home:hover { color: var(--ink); }
#status { margin-left: auto; color: var(--dim); font-size: 12px; }

main, #map-view, canvas { position: absolute; inset: 0; }
main { top: 44px; }
canvas { width: 100%; height: 100%; display: block; }
#no-map { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; max-width: 360px; text-align: center; }
#no-map.on { display: block; }
.slot { color: var(--dim); font-size: 13px; }

.float { position: fixed; background: var(--panel); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.6); z-index: 4; }
#list { top: 52px; left: 12px; bottom: 36px; width: 380px; display: flex; flex-direction: column; }
#list.hidden, #focus.collapsed { display: none !important; }
#list-head { display: flex; align-items: center; gap: 10px; padding: 10px; }
#filter { flex: 1; }
#list-sum { font-size: 12px; padding: 0 12px 6px; }
.rows { list-style: none; margin: 0; padding: 0 0 8px; overflow-y: auto; flex: 1; }
.rows li { display: grid; grid-template-columns: 74px 52px 1fr; gap: 8px; padding: 4px 10px; cursor: pointer; align-items: baseline; }
.rows li:hover { background: var(--raise); }
.rows li.sel { background: rgba(56, 200, 255, 0.12); }
.rows .n { font: 12px var(--mono); }
.rows .z { font: 12px var(--mono); color: var(--dim); text-align: right; }
.rows .w { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.rows .w b { color: var(--ink); font-weight: 500; }
.edge { color: var(--dim); font-size: 16px; line-height: 1; padding: 0 4px; }
.tab-edge { position: fixed; top: 52px; z-index: 4; display: none; background: var(--panel); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 4px; color: var(--dim); padding: 8px 10px; font-size: 13px; }
.tab-edge.left { left: 12px; }
.tab-edge.on { display: block; }
.tab-edge:hover { color: var(--ink); }

#focus { top: 52px; right: 12px; bottom: 36px; width: min(520px, 40vw); display: none; flex-direction: column; }
#focus.on { display: flex; }
#focus-head { padding: 12px 16px 0; }
.id-line { display: flex; gap: 12px; align-items: baseline; font-size: 12px; }
#f-close { margin-left: auto; color: var(--dim); font-size: 18px; line-height: 1; }
#f-label { margin: 6px 0 4px; font: 600 20px/1.3 var(--font); overflow-wrap: anywhere; }
#f-label.none { color: var(--faint); font-weight: 400; font-size: 15px; }
.tab { overflow-y: auto; flex: 1; padding: 10px 16px 16px; }

.lab { font: 11px var(--mono); color: var(--dim); margin: 16px 0 6px; }
.tok { font-family: var(--mono); display: inline-block; background: var(--raise); border-radius: 3px; padding: 1px 5px; margin: 0 4px 4px 0; white-space: pre; font-size: 12.5px; }
.dtable { border-collapse: collapse; font-size: 13px; }
.dtable th { text-align: left; font-weight: 400; color: var(--dim); font-size: 12px; padding: 4px 18px 6px 0; }
.dtable td { padding: 3px 18px 3px 0; vertical-align: top; }
.dtable td.num, .dtable th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.links .out .lab { color: var(--link); } .links .in .lab { color: var(--down); }
tr.con { cursor: pointer; }
tr.con:hover td { background: var(--raise); }
.bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--up); vertical-align: middle; opacity: .8; }

#tip { display: none; max-width: 420px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; pointer-events: none; z-index: 6; }
#tip .lab { margin: 0 0 4px; color: var(--link); font-size: 12px; }
#tip .tname { font-weight: 600; }
#tip .twords { color: var(--dim); font-family: var(--mono); font-size: 12px; }

#layer-back { position: fixed; top: 52px; left: 404px; z-index: 4; display: none; background: var(--panel);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 4px; padding: 6px 12px; font: 13px var(--mono); color: var(--dim); }
#layer-back.on { display: block; }
#layer-back:hover { color: var(--ink); }
body.list-hidden #layer-back { left: 56px; }

#credit { position: fixed; left: 16px; bottom: 10px; z-index: 5; font-size: 11px; color: var(--faint); }

@media (max-width: 760px) {
  #list { width: auto; right: 12px; bottom: auto; max-height: 40vh; }
  #focus { left: 12px; width: auto; }
}
.rows li.more { display: block; text-align: center; font-size: 12px; }