/* ─────────────────────────────────────────────────────────── Right dock — vertical energy sliders + cluster/jet panel. Two stacked cards (#rpanel2 above, #rpanel below). Detector tabs run vertically along the left edge of #rpanel. ─────────────────────────────────────────────────────────── */ #rpanel-wrap { position: fixed; top: 12px; right: 12px; z-index: 30; display: flex; flex-direction: column; gap: 8px; transition: transform var(--pt) cubic-bezier(0.4, 0, 0.2, 1); } #rpanel-wrap.collapsed { transform: translateX(calc(var(--rpw) + 24px)); } #rpanel, #rpanel2 { width: var(--rpw); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2); display: flex; flex-direction: column; } #rpanel { max-height: calc(100vh - 32px); } #rpanel2 { max-height: calc(100vh - 32px); } /* ── Detector tabs ─────────────────────────────────────── */ #det-tab-bar, #det-tab-bar-cluster { display: flex; flex-direction: column; flex-shrink: 0; border-bottom: 1px solid var(--border); padding: 4px 0; } .det-tab { padding: 6px 8px; font: 600 10.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--muted); text-align: center; border: 0; border-left: 2px solid transparent; background: transparent; cursor: pointer; transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast); } .det-tab:hover { color: var(--text); } .det-tab.on { color: var(--bright); border-left-color: var(--tab-col, var(--accent)); background: rgba(255, 255, 255, 0.03); } /* ── Floating threshold-value tooltip ──────────────────── Singleton element appended to by detectorPanels.js. Follows the cursor while hovering or dragging any slider track. */ #thr-val-tip { position: fixed; z-index: 9999; pointer-events: none; padding: 3px 7px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm); color: var(--bright); font: 500 11px/1 var(--mono); letter-spacing: 0.02em; box-shadow: var(--shadow-2); white-space: nowrap; } #thr-val-tip[hidden] { display: none; } /* ── Cell-metric selector (E vs E_T) ───────────────────── Custom dropdown — same skin as the jet-collection dropdown below, so the E_T option can carry a real _{. Trigger sits in #rpanel; the menu lives
at root (#cell-metric-menu) for layering. */
#cell-metric-row {
display: flex;
flex-shrink: 0;
padding: 6px 0 7px;
/* sits at the top of #rpanel, under the detector tab bar */
border-bottom: 1px solid var(--border);
}
.cell-metric-trigger {
display: flex;
align-items: center;
gap: 4px;
flex: 1;
margin: 0 7px;
padding: 5px 7px;
background: var(--surface-3);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--text);
font: 500 10.5px var(--mono);
letter-spacing: 0.02em;
cursor: pointer;
transition:
border-color var(--motion-fast),
background var(--motion-fast),
color var(--motion-fast);
}
.cell-metric-trigger:hover {
border-color: var(--border-strong);
color: var(--bright);
}
.cell-metric-trigger[aria-expanded='true'] {
border-color: var(--accent);
color: var(--bright);
background: var(--accent-soft);
}
.cell-metric-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.cell-metric-chev {
width: 10px;
height: 10px;
flex-shrink: 0;
stroke: currentColor;
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform var(--motion-base);
}
.cell-metric-trigger[aria-expanded='true'] .cell-metric-chev {
transform: rotate(180deg);
}

.cell-metric-menu {
position: fixed;
z-index: 60;
display: none;
flex-direction: column;
gap: 1px;
min-width: 140px;
padding: 4px;

background: var(--surface-2);
border: 1px solid var(--border-strong);
border-radius: var(--r);
box-shadow: var(--shadow-2);

opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition:
opacity var(--motion-fast),
transform var(--motion-fast);
}
.cell-metric-menu.open {
display: flex;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.cell-metric-opt {
display: flex;
align-items: center;
padding: 6px 9px;
border-radius: var(--r-sm);
background: transparent;
border: 0;
color: var(--muted);
font: 500 11px var(--mono);
letter-spacing: 0.02em;
text-align: left;
white-space: nowrap;
cursor: pointer;
transition:
color var(--motion-fast),
background var(--motion-fast);
}
.cell-metric-opt:hover {
color: var(--bright);
background: var(--surface-hover);
}
.cell-metric-opt.on {
color: var(--accent-text);
background: var(--accent-soft);
}
.cell-metric-opt-name sub {
font-size: 0.78em;
}

/* ── Detector pane (vertical slider area) ──────────────── */
.det-pane {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 10px 0 12px;
}
.pane-det-row {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 4px;
}
.pane-det-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.pane-det-name {
font: 500 10.5px/1 var(--font);
color: var(--text);
letter-spacing: 0.04em;
}
.slbl {
font: 400 10px/1 var(--font);
letter-spacing: 0.12em;
color: var(--muted);
text-transform: uppercase;
text-align: center;
}
.sval {
font: 500 10.5px/1 var(--mono);
color: var(--muted);
text-align: center;
letter-spacing: 0.02em;
}

/* ── Slider track + thumb ──────────────────────────────── */
.strak {
position: relative;
width: 12px;
height: 168px;
border-radius: var(--r-sm);
cursor: ns-resize;
user-select: none;
touch-action: none;
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow:
inset 0 1px 6px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(0, 0, 0, 0.32);
}
.sthumb {
position: absolute;
left: -7px;
right: -7px;
height: 3px;
border-radius: 2px;
background: var(--bright);
box-shadow:
0 0 8px rgba(255, 255, 255, 0.6),
0 0 0 1px rgba(0, 0, 0, 0.4);
pointer-events: none;
top: 50%;
}

/* ── Threshold input pop-up (dblclick on slider) ───────── */
#thr-popup {
position: fixed;
z-index: 9000;
background: var(--surface-2);
border: 1px solid var(--accent);
border-radius: var(--r-sm);
padding: 4px 6px;
box-shadow: var(--shadow-2);
}
#thr-popup input {
width: 84px;
padding: 2px 4px;
background: transparent;
border: 0;
color: var(--bright);
font: 500 12px var(--mono);
text-align: center;
}
#thr-popup input::placeholder {
color: var(--dim);
}

/* ─────────────────────────────────────────────────────────
Jet collection dropdown — opens from #jet-coll-trigger
inside #rpanel2; menu lives at root for layering.
───────────────────────────────────────────────────────── */
.jet-coll-trigger {
display: flex;
align-items: center;
gap: 4px;
margin: 6px 7px 0;
padding: 5px 7px;
background: var(--surface-3);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--text);
font: 500 10.5px var(--mono);
letter-spacing: 0.02em;
cursor: pointer;
transition:
border-color var(--motion-fast),
background var(--motion-fast),
color var(--motion-fast);
}
.jet-coll-trigger:hover {
border-color: var(--border-strong);
color: var(--bright);
}
.jet-coll-trigger[aria-expanded='true'] {
border-color: var(--accent);
color: var(--bright);
background: var(--accent-soft);
}
.jet-coll-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.jet-coll-chev {
width: 10px;
height: 10px;
flex-shrink: 0;
stroke: currentColor;
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform var(--motion-base);
}
.jet-coll-trigger[aria-expanded='true'] .jet-coll-chev {
transform: rotate(180deg);
}

.jet-coll-menu {
position: fixed;
z-index: 60;
display: none;
flex-direction: column;
gap: 1px;
min-width: 200px;
max-width: 320px;
max-height: 50vh;
overflow-y: auto;
padding: 4px;

background: var(--surface-2);
border: 1px solid var(--border-strong);
border-radius: var(--r);
box-shadow: var(--shadow-2);

opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition:
opacity var(--motion-fast),
transform var(--motion-fast);
}
.jet-coll-menu.open {
display: flex;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

.jet-coll-opt {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 9px;
border-radius: var(--r-sm);
background: transparent;
border: 0;
color: var(--muted);
font: 500 11px var(--mono);
letter-spacing: 0.02em;
text-align: left;
white-space: nowrap;
cursor: pointer;
transition:
color var(--motion-fast),
background var(--motion-fast);
}
.jet-coll-opt:hover {
color: var(--bright);
background: var(--surface-hover);
}
.jet-coll-opt.on {
color: var(--accent-text);
background: var(--accent-soft);
}
.jet-coll-opt-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.jet-coll-opt-count {
flex-shrink: 0;
font: 500 10px var(--mono);
color: var(--muted);
background: rgba(255, 255, 255, 0.05);
padding: 1px 6px;
border-radius: 8px;
letter-spacing: 0.02em;
}
.jet-coll-opt.on .jet-coll-opt-count {
color: var(--bright);
background: rgba(99, 152, 255, 0.28);
}

/* ─────────────────────────────────────────────────────────
Generic switch (used in popovers, helpers, settings).
Color comes from inline style: --gswitch-col.
───────────────────────────────────────────────────────── */
.gswitch {
position: relative;
width: 28px;
height: 16px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 9px;
cursor: pointer;
transition: background var(--motion-base);
}
.gswitch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--muted);
transition:
transform var(--motion-base),
background var(--motion-base);
}
.gswitch.on {
background: var(--gswitch-col, var(--accent));
border-color: transparent;
}
.gswitch.on::after {
transform: translateX(12px);
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.gswitch:hover {
background: rgba(255, 255, 255, 0.1);
}
.gswitch.on:hover {
filter: brightness(1.08);
}}