/* ==========================================================================
   Screen Test — full-screen white/black/colour screen, dead-pixel test,
   lightbox and test patterns. Uses the shared protium-ui tokens.
   ========================================================================== */

.st-main {
  display: flex; gap: 0; min-height: 0;
  height: calc(100vh - var(--nav-h) - var(--status-h));
}

/* ---- control panel ---- */
.st-panel {
  flex: 0 0 320px; overflow-y: auto;
  padding: 18px; background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 18px;
}
.st-group { display: flex; flex-direction: column; gap: 10px; }
.st-label {
  margin: 0; font: 600 11px/1 var(--font-sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
  display: flex; justify-content: space-between; align-items: center;
}
.st-label span { font-variant-numeric: tabular-nums; color: var(--text-muted); }

.st-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.st-sw {
  aspect-ratio: 1; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .12s ease;
}
.st-sw:hover { transform: translateY(-1px); }
.st-sw.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

.st-custom { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 13px/1 var(--font-sans); color: var(--text-muted); }
.st-custom input[type="color"] { width: 48px; height: 30px; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; padding: 2px; }

.st-segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.st-segmented button {
  flex: 1 1 auto; padding: 7px 10px; font: 500 12px/1 var(--font-sans);
  color: var(--text-muted); background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: 8px; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.st-segmented button:hover { color: var(--text); }
.st-segmented button.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }

.st-row { display: flex; gap: 8px; }
.st-row .pt-btn { flex: 1; }
.st-full { width: 100%; }
.st-hint { margin: 0; font: 400 11.5px/1.5 var(--font-sans); color: var(--text-faint); }

input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }

/* ---- stage (the actual screen surface) ---- */
.st-stage-wrap { flex: 1; min-width: 0; padding: 14px; }
.st-stage {
  width: 100%; height: 100%; border-radius: var(--r-lg, 12px);
  border: 1px solid var(--border);
  background: #ffffff; position: relative; overflow: hidden;
  outline: none; cursor: pointer;
}

/* Fullscreen: the stage becomes the whole screen, no rounding/border. */
.st-stage:fullscreen { border-radius: 0; border: none; }
.st-stage:fullscreen.is-hidecursor { cursor: none; }

/* Floating control bar shown only in fullscreen (auto-hides). */
.st-fsbar {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  display: none; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(15,23,42,.72); color: #fff; backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 5;
  font: 500 12px/1 var(--font-sans); transition: opacity .25s ease;
}
.st-stage:fullscreen .st-fsbar { display: flex; }
.st-stage.is-hidecursor .st-fsbar { opacity: 0; pointer-events: none; }
.st-fsname { font-variant-numeric: tabular-nums; min-width: 64px; }
.st-fsbar .pt-btn { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }

@media (max-width: 760px) {
  .st-main { flex-direction: column; height: auto; }
  .st-panel { flex-basis: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .st-stage-wrap { height: 60vh; }
}