/* ═══ §5 · SHARED · THE PANEL FAMILY ══════════════════════════════════════════════════
   panel · head · title · meta · strip · stat · host · caption · note · field · controls.
   Home, Scan, Telemetry, Settings and Logs are built out of these, so they are declared ONCE
   and every surface inherits. They were previously emitted per-surface with a `#view-*`
   prefix — the same ~90 lines written five times — which is how one rule could be right on
   Telemetry and missing on Home. */

/* A HOST is a box JavaScript fills. Its content is unknown at author time, so the one thing
   true of every host is that it may not push its content's intrinsic minimum onto its parent. */
.r-host {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* the two hosts that bound their own height; every other host grows with its content */
.r-host.sl-list { max-height: 55dvh; overflow-y: auto; }
#knobs-list { max-height: 420px; overflow-y: auto; }

.r-panel { padding: 12px; border-radius: 14px; }
.r-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.r-panel-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-cyan);
  min-width: 0;
  overflow-wrap: anywhere;
}
.r-panel-meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  flex: 0 0 auto;
  white-space: nowrap;
}

/* the tile row — equal columns that can each shrink to nothing, so N tiles always fit N
   columns and a long value grows a line instead of widening its column past its siblings */
.r-strip {
  display: grid;
  gap: 8px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.r-stat {
  text-align: center;
  padding: 10px 4px;
  min-width: 0;
  container-type: inline-size;
}
.r-stat-val {
  font-size: clamp(0.8rem, 20cqi, 1.2rem);
  font-weight: 700;
  color: var(--accent-cyan);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  white-space: nowrap;
}
.r-stat-lbl {
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.r-caption {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: 12px 0 8px;
  padding-left: 8px;
  border-left: 2px solid var(--accent-cyan);
}
.r-note {
  font-size: 0.66rem;
  font-style: italic;
  color: var(--text-dim);
  line-height: 1.45;
  min-width: 0;
}
.r-field {
  min-height: 44px;
  touch-action: manipulation;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  min-width: 0;
}
.r-input { width: 100%; }
.r-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.r-controls > * { flex: 0 0 auto; }
.r-btnrow { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.r-btnrow .settings-btn { width: auto; flex: 0 1 auto; }

/* the slack absorber — `margin-top: auto` hands it the remainder of the surface column, so a
   collapsed surface's basis line sits at the bottom of the scroll box rather than a third of
   the way down with dead space under it */
.surface-basis {
  margin-top: auto;
  padding: 14px 14px 4px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.6;
  color: var(--text-dim);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  overflow-wrap: anywhere;
}
/* the LIVE half of a basis line — app._setSurfaceReading appends this per surface with the
   numbers the surface is reading right now, under the static sentence above it. */
.basis-live {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.basis-live b { color: var(--accent-cyan); font-weight: 700; }