/* Panel — the shared dark-console system
   ----------------------------------------------------------------------
   Added 2026-10-05. This file exists because the old additive-only rule
   forbade consolidating earlier days' work, so three sections each grew
   their own copy of the same dark panel: #shelf's display case, #euclid's
   drum console and #slime's field. Same gradient, same inset rim, same
   drop shadow, same pill button with a glowing status dot, same ghost
   button, same select, same focus ring — written out three times with
   three different prefixes.

   That duplication is now one place. Each section keeps its identity by
   setting four custom properties and nothing else:

     --panel-top / --panel-bottom   the surface gradient
     --panel-accent                 the lit colour (blue, amber, …)
     --panel-rim                    the inset highlight along the top edge

   Section-specific layout stays in that section's own file. Only the
   chrome lives here. */

.panel{
  --panel-top:#1c1f27;
  --panel-bottom:#11131a;
  --panel-rim:rgba(255,255,255,.07);
  --panel-line:rgba(255,255,255,.09);
  --panel-ink:#e8eaf0;
  --panel-dim:#8b93a6;
  --panel-accent:#6ea8ff;
  --panel-accent-soft:rgba(110,168,255,.7);
  --panel-btn-top:#2b3040;
  --panel-btn-bottom:#1f2430;
  --panel-btn-on-top:#233a6e;
  --panel-btn-on-bottom:#1a2b52;

  padding:clamp(16px, 3vw, 28px);
  border-radius:var(--radius-lg);
  background:linear-gradient(var(--panel-top), var(--panel-bottom));
  box-shadow:
    inset 0 1px 0 var(--panel-rim),
    0 18px 40px rgba(0,0,0,.2);
  color:var(--panel-ink);
}

/* ---------- the pill button with a status dot ---------- */

.panel-btn{
  font:inherit;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:116px;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(var(--panel-btn-top), var(--panel-btn-bottom));
  color:var(--panel-ink);
  cursor:pointer;
}

.panel-btn:hover{ border-color:rgba(255,255,255,.34); }

.panel-dot{
  width:9px; height:9px;
  border-radius:50%;
  background:#5d6577;
  flex:none;
}

.panel-btn[aria-pressed="true"]{
  background:linear-gradient(var(--panel-btn-on-top), var(--panel-btn-on-bottom));
  border-color:var(--panel-accent);
}

.panel-btn[aria-pressed="true"] .panel-dot{
  background:var(--panel-accent);
  box-shadow:0 0 9px 2px var(--panel-accent-soft);
}

/* ---------- secondary controls ---------- */

.panel-ghost,
.panel-select{
  font:inherit;
  font-size:var(--fs-base);
  padding:8px 12px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:var(--panel-ink);
  cursor:pointer;
  min-width:0;
  max-width:100%;
}

.panel-ghost:hover,
.panel-select:hover{ border-color:rgba(255,255,255,.34); }

/* A <select> takes its intrinsic width from its longest option, which is
   wide enough to push a phone page sideways; min-width:0 lets it shrink. */
.panel-field{
  display:flex;
  align-items:center;
  gap:9px;
  flex:1 1 190px;
  min-width:0;
}

.panel-field span{
  font-size:var(--fs-sm);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--panel-dim);
}

.panel-select{ flex:1 1 auto; text-overflow:ellipsis; }

.panel-num{
  font-family:var(--mono);
  font-size:var(--fs-sm);
  letter-spacing:0;
  color:var(--panel-ink);
  text-align:right;
}

.panel input[type="range"],
.panel input[type="checkbox"]{ accent-color:var(--panel-accent); }

.panel :focus-visible{
  outline:2px solid var(--panel-accent);
  outline-offset:2px;
}