/* Glass controls shared by the tools (rainbow test, rolling buffer test, ADL calculator; next the throw calculator).
   Two surfaces: .gl-dark is a dark panel in both themes (test patterns, the throw calculator figure),
   everything else follows the site theme. Segments get their sliding thumb from main.js (.g-seg::before).

   .gl-seg           segmented track; add .gl-seg--blue for the main choice (accent thumb), .gl-seg--ico for icon buttons
   .gl-range         slider: thin groove filled up to --p, capsule thumb that springs into clear glass while dragged
   .gl-well          recessed glass input cell
   .gl-ibtn          round icon button (dark glass on .gl-dark)
   .gl-chip          text button with an optional chevron (menus, Settings)
   .gl-pop           glass popover / menu; .gl-sheet turns it into a bottom sheet on phones
   .gl-switch        on / off switch (aria-pressed)
   .gl-dots          colour swatches in a group; the thumb draws a ring around the chosen one
   .gl-pill          small inline glass capsule for a unit switch
   .gl-tag           flat tinted status tag (not a control)
   .tc-gl            the throw calculator block (charts-ax.js); its own rules are at the end */

.gl-dark { --gl-text: #f2f2f7; --gl-text-2: rgba(242,242,247,.68); --gl-track: rgba(118,118,128,.26); --gl-track-in: inset 0 1px 2px rgba(0,0,0,.35);
  --gl-hover: rgba(255,255,255,.1); --gl-groove: rgba(118,118,128,.36); --gl-fill: #f2f2f7; --gl-cap: #8e8e93; color-scheme: dark; }
:root { --gl-text: var(--text); --gl-text-2: var(--text-2); --gl-track: rgba(118,118,128,.12); --gl-track-in: inset 0 1px 2px rgba(0,0,0,.06);
  --gl-hover: rgba(118,118,128,.14); --gl-groove: rgba(118,118,128,.24); --gl-fill: var(--accent); --gl-cap: var(--text-3); }
[data-theme="dark"] { --gl-track: rgba(118,118,128,.24); --gl-track-in: inset 0 1px 2px rgba(0,0,0,.3); --gl-groove: rgba(118,118,128,.36); }
.gl-dark { --gl-track: rgba(118,118,128,.26); --gl-track-in: inset 0 1px 2px rgba(0,0,0,.35); --gl-groove: rgba(118,118,128,.36); }

/* ---------- segments ---------- */
.gl-seg { display: inline-flex; align-items: center; flex: none; max-width: 100%; gap: 0; padding: 3px; margin: 0; border: 0; border-radius: 999px;
  background: var(--gl-track); box-shadow: var(--gl-track-in); box-sizing: border-box; }
.gl-seg > button { height: 30px; min-width: 34px; padding: 0 11px; margin: 0; border: 0; border-radius: 999px; display: inline-grid; place-items: center;
  background: transparent; color: var(--gl-text-2); font: inherit; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums; cursor: pointer; transition: color .25s, background .15s; }
.gl-seg > button:hover:not(:disabled):not([aria-pressed="true"]) { color: var(--gl-text); }
.gl-seg > button:disabled { opacity: .35; cursor: default; }
.gl-seg--ico > button { width: 38px; padding: 0; }
.gl-seg svg { width: 18px; height: 18px; display: block; }
/* without main.js (or before it runs) the active button carries the thumb itself */
.gl-seg:not(.g-seg) > button[aria-pressed="true"] { background: var(--g-thumb); box-shadow: var(--g-thumb-shadow); color: var(--gl-text); }
.gl-seg.g-seg > button[aria-pressed="true"] { color: var(--gl-text); }
/* thumbs: theme glass on the page, light glass on dark panels, accent for the main choice */
.gl-seg.g-seg::before { border-radius: 999px; }
.gl-dark .gl-seg.g-seg::before, .gl-dark.gl-seg.g-seg::before { background: linear-gradient(180deg, #f4f4f6, #d9dadf);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.4), 0 3px 8px rgba(0,0,0,.35); }
.gl-dark .gl-seg.g-seg > button[aria-pressed="true"], .gl-dark .gl-seg:not(.g-seg) > button[aria-pressed="true"] { color: #111; }
.gl-dark .gl-seg:not(.g-seg) > button[aria-pressed="true"] { background: linear-gradient(180deg, #f4f4f6, #d9dadf); }
.gl-seg--blue.g-seg::before, .gl-dark .gl-seg--blue.g-seg::before { background: linear-gradient(180deg, #2b8cff, #0a6fe8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,80,200,.25), 0 3px 8px rgba(0,100,255,.25); }
.gl-seg--blue > button[aria-pressed="true"], .gl-dark .gl-seg--blue > button[aria-pressed="true"] { color: #fff !important; }
.gl-seg--blue:not(.g-seg) > button[aria-pressed="true"] { background: linear-gradient(180deg, #2b8cff, #0a6fe8); }

/* ---------- colour swatches (a group of round buttons; the thumb is a ring) ---------- */
.gl-dots { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0; border: 0; }
.gl-dots > button, .gl-dots.g-seg > button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; flex: none; cursor: pointer;
  background: var(--c) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.28) !important; transition: transform .25s var(--g-spring); }
.gl-dots > button:hover:not(:disabled) { transform: scale(1.12); }
.gl-dots > button:disabled { opacity: .35; cursor: default; }
.gl-dots:not(.g-seg) > button[aria-pressed="true"] { box-shadow: 0 0 0 2px #1c1c20, 0 0 0 4px #fff !important; }
.gl-dots.g-seg::before { border-radius: 50%; background: none; box-shadow: 0 0 0 2px #1c1c20, 0 0 0 4px #fff, 0 0 10px 3px rgba(255,255,255,.2); }

/* ---------- icon buttons, chips ---------- */
.gl-ibtn { width: 36px; height: 36px; flex: none; padding: 0; margin: 0; display: inline-grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--gl-track); color: var(--gl-text); cursor: pointer; transition: background .15s, transform .3s var(--g-spring); }
.gl-ibtn:hover { background: var(--gl-hover); }
.gl-ibtn:active { transform: scale(.9); }
.gl-ibtn svg { width: 18px; height: 18px; display: block; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.gl-ibtn svg[fill=none] { fill: none; stroke-width: 2.2; }
/* dark glass over a picture or on a dark panel */
.gl-dark .gl-ibtn { background: rgba(28,28,30,.42); color: #fff; border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 8px rgba(0,0,0,.25); }
.gl-dark .gl-ibtn:hover { background: rgba(72,72,78,.6); }
.gl-chip { height: 36px; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; margin: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--gl-text); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .15s; }
.gl-chip:hover, .gl-chip[aria-expanded="true"] { background: var(--gl-hover); }
.gl-chip svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gl-chip .gl-chev { width: 12px; height: 12px; stroke-width: 3; opacity: .7; transition: transform .3s var(--g-spring); }
.gl-chip[aria-expanded="true"] .gl-chev { transform: rotate(180deg); }
.gl-sep { width: 1px; height: 22px; flex: none; background: rgba(255,255,255,.16); margin: 0 4px; }
.gl-cap { color: var(--gl-cap); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- small capsule ---------- */
.gl-pill { display: inline-block; padding: 1px 7px; border-radius: 99px; text-align: center; text-decoration: none;
  background: var(--gl-track); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 .5px rgba(255,255,255,.12); }
:root:not([data-theme="dark"]) :not(.gl-dark) .gl-pill { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 .5px rgba(0,0,0,.08); }
.gl-pill[data-tip] { cursor: help; }
.gl-tag { box-shadow: none; }          /* a status tag (SDR / HDR verdict): flat tint, nothing to press, so no raised rim */
.gl-pill[style*="cursor: pointer"]:hover, .gl-pill[style*="cursor:pointer"]:hover { background: var(--gl-hover); }

/* ---------- slider ---------- */
.gl-range { -webkit-appearance: none; appearance: none; display: block; min-width: 0; height: 24px; margin: 0; padding: 0; background: transparent; cursor: pointer;
  --gl-thumb: linear-gradient(180deg, #fff, #e6e6eb); }
.gl-range:focus { outline: none; }
.gl-range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--gl-fill) 0 var(--p, 50%), var(--gl-groove) var(--p, 50%) 100%); box-shadow: inset 0 1px 1px rgba(0,0,0,.3); }
.gl-range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--gl-groove); box-shadow: inset 0 1px 1px rgba(0,0,0,.3); }
.gl-range::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--gl-fill); }
.gl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 20px; margin-top: -7px; border: 0; border-radius: 99px; background: var(--gl-thumb);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.3);
  transition: transform .35s var(--g-spring), background .2s, box-shadow .2s; }
.gl-range::-moz-range-thumb { width: 30px; height: 20px; border: 0; border-radius: 99px; background: var(--gl-thumb);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.3); transition: transform .35s var(--g-spring), background .2s, box-shadow .2s; }
/* dragging: the thumb grows and turns into clear glass with a white rim */
.gl-range:active::-webkit-slider-thumb, .gl-range.gl-drag::-webkit-slider-thumb { transform: scale(1.3); background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), inset 0 1px 3px rgba(255,255,255,.6), 0 4px 16px rgba(0,0,0,.45); }
.gl-range:active::-moz-range-thumb, .gl-range.gl-drag::-moz-range-thumb { transform: scale(1.3); background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), 0 4px 16px rgba(0,0,0,.45); }
:root:not([data-theme="dark"]) :not(.gl-dark) > .gl-range:active::-webkit-slider-thumb { box-shadow: inset 0 0 0 1.5px var(--accent), 0 4px 16px rgba(0,0,0,.25); }
.gl-range:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(10,132,255,.55); }
.gl-range:disabled { cursor: default; opacity: .4; }
.gl-range:disabled::-webkit-slider-thumb { transform: none; }

/* ---------- switch ---------- */
.gl-switch { position: relative; flex: none; width: 44px; height: 26px; padding: 0; margin: 0; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--gl-groove); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); transition: background .25s; }
.gl-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, #fff, #e6e6eb); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .35s var(--g-spring); }
.gl-switch[aria-pressed="true"] { background: #34c759; }
.gl-switch[aria-pressed="true"]::after { transform: translateX(18px); }
.gl-switch:disabled { opacity: .35; cursor: default; }

/* ---------- input cells ---------- */
.gl-well { box-sizing: border-box; min-width: 0; height: 40px; padding: 0 12px; margin: 0; border-radius: 12px; font: inherit; color: var(--text);
  background: rgba(118,118,128,.08); border: 1px solid rgba(118,118,128,.18);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.7); transition: border-color .2s, box-shadow .25s, background .2s; }
[data-theme="dark"] .gl-well, .gl-dark .gl-well { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05); }
.gl-well:hover:not(:focus) { border-color: rgba(118,118,128,.4); }
.gl-well:focus { outline: none; border-color: rgba(10,132,255,.9); box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 0 0 3px rgba(10,132,255,.25); }
[data-theme="dark"] .gl-well:focus, .gl-dark .gl-well:focus { box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 0 0 3px rgba(10,132,255,.35); }
.gl-well::placeholder { color: var(--text-3); }

/* ---------- popover, menu, bottom sheet ---------- */
.gl-pop { z-index: 30; box-sizing: border-box; border-radius: 18px; color: var(--gl-text);
  background: var(--g-bg-pop); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-rim); box-shadow: var(--g-shadow), 0 12px 32px rgba(0,0,0,.18); }
.gl-dark .gl-pop, .gl-pop.gl-dark { background: rgba(30,30,34,.9); border-color: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 40px rgba(0,0,0,.5); }
.gl-pop[hidden] { display: none; }
.gl-pop.gl-open { animation: gl-pop .28s var(--g-spring); }
@keyframes gl-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.gl-pop h5 { margin: 0; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--gl-cap); }
.gl-menu { display: flex; flex-direction: column; gap: 2px; padding: 6px; min-width: 200px; }
.gl-menu > button { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin: 0; border: 0; border-radius: 10px; text-align: left;
  background: transparent; color: var(--gl-text); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.gl-menu > button::before { content: ""; width: 14px; flex: none; }
.gl-menu > button[aria-pressed="true"] { background: rgba(255,255,255,.12); font-weight: 600; }
.gl-menu > button[aria-pressed="true"]::before { content: "✓"; }
.gl-menu > button:hover { background: var(--gl-hover); }
.gl-scrim { position: fixed; inset: 0; z-index: 1190; background: rgba(0,0,0,.35); animation: gl-fade .25s; }
.gl-scrim[hidden] { display: none; }
@keyframes gl-fade { from { opacity: 0; } }
/* phones: a popover marked .gl-sheet becomes a bottom sheet (almost solid: WebKit shows the page through a thin one) */
@media (max-width: 600px) {
  .gl-pop.gl-sheet { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important;
    z-index: 1200; max-height: 80vh; overflow: auto; overscroll-behavior: contain; border-radius: 22px 22px 0 0; border-width: 1px 0 0;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom)) !important; background: rgba(28,28,32,.96) !important; }
  .gl-pop.gl-sheet.gl-open { animation: gl-sheet .34s var(--g-spring-soft); }
  .gl-pop.gl-sheet::before { content: ""; display: block; width: 36px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: rgba(255,255,255,.3); }
}
@keyframes gl-sheet { from { transform: translateY(100%); } }

/* ---------- throw calculator (charts-ax.js adds .gl-dark.tc-gl to #calc-throw) ---------- */
.chart-section.tc-gl { border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 .5px rgba(0,0,0,.35), 0 10px 32px rgba(0,0,0,.18); }
.tc-gl .gl-seg > button { font-size: 12px; font-weight: 600; height: 28px; padding: 0 13px; }
.tc-gl .gl-well { height: 28px; padding: 2px 4px; border-radius: 9px; }
/* the brightness and seat sliders keep their coloured scale and take the same capsule thumb */
.tc-gl input.sv-br { box-shadow: inset 0 1px 1px rgba(0,0,0,.35); }
.tc-gl input.sv-br::-webkit-slider-thumb { width: 30px; height: 20px; border-radius: 99px; background: linear-gradient(180deg, #fff, #e6e6eb);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.3);
  transition: transform .35s var(--g-spring), background .2s, box-shadow .2s; }
.tc-gl input.sv-br::-moz-range-thumb { width: 30px; height: 20px; border-radius: 99px; background: linear-gradient(180deg, #fff, #e6e6eb);
  transition: transform .35s var(--g-spring), background .2s, box-shadow .2s; }
.tc-gl input.sv-br:active::-webkit-slider-thumb { transform: scale(1.3); background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), inset 0 1px 3px rgba(255,255,255,.6), 0 4px 16px rgba(0,0,0,.45); }
.tc-gl input.sv-br:active::-moz-range-thumb { transform: scale(1.3); background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9); }
:root .chart-section.tc-gl .gl-range:active::-webkit-slider-thumb {   /* the panel is dark in both themes: white rim, not the light-page accent */
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), inset 0 1px 3px rgba(255,255,255,.6), 0 4px 16px rgba(0,0,0,.45); }
.tc-gl > .gl-ibtn svg { width: 12px; height: 12px; stroke-width: 1.6; }
.tc-gl > .gl-ibtn svg[fill=none] { stroke-width: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .tc-gl input.sv-br::-webkit-slider-thumb { transition: none; }
  .tc-gl input.sv-br:active::-webkit-slider-thumb, .tc-gl > .gl-ibtn:active { transform: none; }
  .gl-seg > button, .gl-dots > button, .gl-ibtn, .gl-chip, .gl-chip .gl-chev, .gl-switch, .gl-switch::after, .gl-well { transition: none; }
  .gl-range::-webkit-slider-thumb { transition: none; }
  .gl-range::-moz-range-thumb { transition: none; }
  .gl-pop.gl-open, .gl-pop.gl-sheet.gl-open, .gl-scrim { animation: none; }
  .gl-ibtn:active, .gl-dots > button:hover:not(:disabled) { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .gl-pop, .gl-dark .gl-pop, .gl-dark .gl-ibtn { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .gl-dark .gl-pop, .gl-pop.gl-dark { background: #1e1e22; }
  .gl-pop { background: var(--surface); }
}