/* Rainbow test: layout of its control row (the look comes from glass-controls.css and test-ui.css).
   Under the picture: scene menu and direction, speed, colour, Settings, pause, fullscreen.
   Settings (only what the current scene uses) open in a popover, a bottom sheet on phones,
   and sit open above the capsule in fullscreen. */
.rbt-speeds > button { min-width: 40px; padding: 0 9px; }
/* the readout's warning when the refresh rate is variable (ProMotion, VRR) */
.rbt-warn { display: block; margin-top: 4px; color: #ff9f0a; }
.rbt-warn[hidden] { display: none; }
.tst-fs .rbt-out:has(.rbt-warn:not([hidden])) { max-width: min(560px, calc(100% - 48px)); border-radius: 14px; }
.rbt-scene { padding-left: 10px; }
.rbt-scene-name { min-width: 7.4em; text-align: left; }
.rbt-setbtn { width: 36px; padding: 0; justify-content: center; }
.rbt-set [data-k="lines"] svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* muted: direction and speed in the dot scene */
.rbt-dirs, .rbt-spd { transition: opacity .2s; }
.rbt-off { opacity: .35; }
.rbt-off button:disabled { opacity: 1; cursor: default; }

/* Settings */
.rbt-set { position: absolute; right: 14px; bottom: calc(100% + 12px); width: 360px; padding: 16px 16px 14px;
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 16px 22px; }
.rbt-set .rbt-sec { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.rbt-set .rbt-sec[hidden] { display: none; }
.rbt-set .rbt-wide { flex: 1 1 100%; }
.rbt-set .gl-seg { align-self: flex-start; }
.rbt-rng { display: flex; align-items: center; gap: 12px; }
.rbt-rng .gl-range { flex: 1; }
.rbt-rng b { min-width: 36px; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* fullscreen: the colour choice sits open in the capsule instead of behind its button, Settings open above it */
.tst-fs .rbt-colbtn { display: none; }
.tst-fs .rbt-colpop[hidden], .tst-fs .rbt-colpop { display: flex; position: static; padding: 0 4px; background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
.tst-fs .rbt-colpop h5 { display: none; }
.tst-fs .rbt-cols { padding: 6px 4px; }
.tst-fs .rbt-setbtn { display: none; }
.tst-fs .rbt-set[hidden], .tst-fs .rbt-set { display: flex; position: static; width: auto; max-width: min(1100px, 100%); align-items: flex-end;
  border-radius: 22px; background: rgba(28,28,32,.84); animation: none; }
.tst-fs .rbt-set .rbt-wide { flex: 0 1 260px; }

/* a first-visit pointer at the scene menu: the same soft blue as in the rolling buffer test, three breaths */
@keyframes rbt-hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(10,132,255,0); } 50% { box-shadow: 0 0 0 2px rgba(10,132,255,.9), 0 0 14px 2px rgba(10,132,255,.45); } }
.rbt-scene.rbt-hint { animation: rbt-hint 2s ease-in-out infinite; }   /* breathes until the menu is opened */

@media (max-width: 600px) {
  .rbt .tst-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 6px; }
  .rbt-g1 { display: contents; }
  .rbt-scenewrap { grid-column: 1; grid-row: 1; justify-self: start; }
  .rbt .tst-end { grid-column: 2; grid-row: 1; }
  .rbt-dirs { grid-column: 1 / -1; grid-row: 2; }
  .rbt-spd { grid-column: 1 / -1; grid-row: 3; min-width: 0; }
  .rbt-spd .gl-seg { flex: 1; }
  .rbt-scene-name { min-width: 0; }
  .rbt-set.gl-sheet { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px; }
  .rbt-scenes.gl-sheet > button { padding: 12px; font-size: 15px; }
  .tst-fs.rbt .tst-bar { display: flex; }
  .tst-fs .rbt-set[hidden] { display: none !important; }
  .tst-fs .rbt-setbtn { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) { .rbt-dirs, .rbt-spd { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .tst-fs .rbt-set { background: #1c1c20; } }

/* picking the eye-jump dot: the picture dims for a couple of seconds under a short instruction */
.rbt-cue { position: absolute; inset: 0 0 auto 0; z-index: 3; display: grid; place-items: center; padding: 20px; text-align: center; pointer-events: none;
  background: rgba(0,0,0,.72); color: #fff; font-size: clamp(20px, 3.2vw, 40px); font-weight: 700; letter-spacing: -.01em; opacity: 0; }
.rbt-cue-on { animation: rbt-cue 2.6s ease-in-out forwards; }
@keyframes rbt-cue { 0% { opacity: 0; } 12%, 75% { opacity: 1; } 100% { opacity: 0; } }