/* Test patterns (rainbow, rolling buffer): one row of glass controls under the picture; in fullscreen the same row
   floats as a glass capsule with every setting open and hides with the cursor when idle (see /js/test-ui.js) */
.tst { position: relative; background: #000; border-radius: var(--radius-sm); overflow: hidden; margin: 20px 0 24px; }
.tst canvas { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; cursor: pointer; }

.tst-dock { position: relative; background: #121214; border-top: 1px solid #1f2023; color: #f2f2f7; font-size: 13px; }
.tst-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 14px 10px; }
.tst-grp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tst-end { display: flex; align-items: center; gap: 4px; }
.tst-lbl { color: #8e8e93; }
/* wide screens: the same three places in every test of the family: scene menu (and direction / object) on the left,
   speed in the middle, Settings, pause and fullscreen on the right */
@media (min-width: 1140px) {
  .tst:not(.tst-fs) .tst-bar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .tst:not(.tst-fs) .tst-bar > .tst-end { justify-self: end; }
}
.tst-out { padding: 0 16px 12px; background: #121214; color: #6e6f74; font-size: 12px; font-variant-numeric: tabular-nums; }
.tst-dot { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255,255,255,.35); }

/* popovers open upwards over the picture, right-aligned to their button */
.tst-popwrap { position: relative; }
.tst-pop { position: absolute; right: 0; bottom: calc(100% + 12px); display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 10px; }
.tst-pop.gl-menu { left: 0; right: auto; gap: 2px; padding: 6px; }

/* fullscreen (the Fullscreen API, or the box over the whole window where there is none) */
.tst.tst-fs { border-radius: 0; margin: 0; width: 100%; height: 100%; }
.tst.tst-pfs { position: fixed; inset: 0; z-index: 2000; width: 100vw; height: 100vh; height: 100dvh; }
html.tst-fs-on, html.tst-fs-on body { overflow: hidden; }
.tst.tst-fs canvas { width: 100%; height: 100%; aspect-ratio: auto; }
.tst.tst-fs .tst-dock { position: absolute; left: 50%; bottom: 24px; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
  display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; transition: opacity .3s; }
.tst.tst-fs .tst-bar { box-sizing: border-box; max-width: 100%; border-radius: 26px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(28,28,32,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.45); }
.tst.tst-fs .tst-bar { padding: 6px 8px; justify-content: center; }
/* the readout sits in the dock (test-ui.js moves it there): a small line above the controls, off the captions on top */
.tst.tst-fs .tst-out { max-width: 100%; box-sizing: border-box; padding: 3px 10px; border-radius: 999px; color: #c7c7cc;
  font-size: 11px; line-height: 1.35; text-align: center; background: rgba(28,28,32,.82); border: 1px solid rgba(255,255,255,.1); }
/* nothing on top of the moving picture blurs it: a backdrop-filter re-reads the canvas under it on every frame,
   which cost dropped frames (a stutter in the ticker), so the capsule, readout, buttons and popovers use dense fills */
.tst :is(.gl-pop, .gl-ibtn) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.tst .gl-dark .gl-pop, .tst .gl-pop.gl-dark { background: rgba(30,30,34,.94); }
.tst.tst-idle, .tst.tst-idle canvas { cursor: none; }
.tst.tst-idle .tst-dock { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
  .tst-bar { padding: 12px 12px 10px; }
  .tst-out { padding: 0 14px 12px; }
  .tst-lbl { display: none; }
  /* full-width segments: every button takes an equal share */
  .tst-bar .gl-seg.tst-full { display: flex; width: 100%; }
  .tst-bar .gl-seg.tst-full > button { flex: 1 1 0; min-width: 0; width: auto; padding: 0 2px; }
  .tst.tst-fs .tst-dock { bottom: 12px; max-width: calc(100% - 16px); }
  .tst.tst-fs .tst-out { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tst.tst-fs .tst-dock { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .tst.tst-fs .tst-bar, .tst.tst-fs .tst-out { background: #1c1c20; }
}