/* Shared, opt-in controls. A host adds ui-controls and a theme to its body;
   individual controls add ui-* classes. Existing page selectors remain valid.
   Every colour, radius and ring below is a token of ui/theme.json (blocks
   controls, controls-light, controls-concert, controls-dead, controls-tape and
   controls-operator); the rules only arrange them. */
.ui-controls{--ui-ink:var(--ink,#222b25);--ui-muted:var(--muted,#70766c);--ui-line:var(--line,#d7d8ce);--ui-accent:var(--accent,#b86742);--ui-surface:var(--card,var(--panel,#faf8f2));--ui-recess:#fff;--ui-control-line:#bec5b7;--ui-primary:var(--green,#284b3c);--ui-primary-ink:#fff;--ui-primary-hover:#37634d;--ui-secondary:transparent;--ui-selected:#e2e6da;--ui-focus:var(--ui-accent);--ui-track:#d7d9ce;--ui-fill:var(--ui-accent);--ui-error:#a23424;--ui-success:#2e7850;--ui-bezel:#252b2d;--ui-bezel-edge:#6c7475;--ui-bezel-ink:#e7eded;--ui-bezel-lit:#83df9e;--ui-quality-thumb:linear-gradient(#7d4159,#59293e);--ui-button-height:43px;--ui-button-radius:4px;--ui-field-height:44px;--ui-field-radius:4px;--ui-focus-width:2px;--ui-focus-offset:3px;--ui-focus-ring:#9fe0b3;--ui-key-face:linear-gradient(#3b4142,#252b2d 52%,#1b2123);--ui-key-face-hover:linear-gradient(#495354,#30393b);--ui-key-face-active:linear-gradient(#1c2426,#31393b);--ui-key-face-primary:linear-gradient(#46534c,#2d3932 52%,#1e2c25);--ui-key-face-primary-flat:linear-gradient(#46534c,#2d3932);--ui-key-edge:#535b5d;--ui-key-edge-top:#929a9b;--ui-key-edge-hover:#adc0b9;--ui-key-edge-primary:#94b8a3;--ui-key-ink:#e8eeee;--ui-key-ink-primary:#f4fff8;--ui-key-highlight:#ffffff26;--ui-key-shade:#101719;--ui-key-shadow:#0008;--ui-key-press-shadow:#0009;--ui-recess-face:#0d171a;--ui-recess-edge:#59686e;--ui-recess-ink:#e8eeee;--ui-recess-placeholder:#a4b1b1;--ui-recess-shadow:#0008;--ui-recess-radius:3px;--ui-chevron:#b9c5cb;--ui-native-accent:#83df9e;--ui-check-edge:#6e7d78;--ui-check-face:#111b1b;--ui-check-shadow:#0009;--ui-check-edge-on:#9cc9a7;--ui-check-face-on:#385b42;--ui-check-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m3 9 4 4 8-9' fill='none' stroke='%23d9ffe2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--ui-chip-outline:#63849d;--ui-chip-edge:#677474;--ui-chip-face:#222b2c;--ui-chip-ink:#d9e3df;--ui-status-edge:#53615d;--ui-status-ink:#c9d7d1;--ui-dialog-face:#1b2525;--ui-dialog-edge:#66716e;--ui-dialog-ink:#e8eeee;--ui-dialog-backdrop:#060b12bb;--ui-progress-fill:#2e9e5b;--ui-bezel-face:linear-gradient(180deg,#8c9090 0,#5a5e5e 2px,#292d2e 3px,#111516 100%);--ui-bezel-frame:#565a5b;--ui-bezel-shadow:#0005;--ui-bezel-highlight:#c3c6c63b;--ui-option-face:linear-gradient(180deg,#33393b,#23282a 52%,#1c2123);--ui-option-face-active:linear-gradient(#161c1e,#252c2e);--ui-option-edge:#484d4e;--ui-option-edge-top:#73797a;--ui-option-edge-on:#719681;--ui-option-ink:#d9dede;--ui-option-ink-on:#fff;--ui-option-highlight:#ffffff16;--ui-option-shade:#111719;--ui-option-shadow:#0008;--ui-option-indicator:#59615a;--ui-option-lit:#83df9e;--ui-option-glow:#59cd7966;--ui-option-focus:#a2dbb1;--ui-quality-face:#1b1119;--ui-quality-shadow:#0006;--ui-quality-thumb-edge:#e293ab;--ui-room-quality-edge:#565d5f;--ui-room-quality-shadow:#0009;--ui-room-thumb-edge:#8b9596;--ui-room-thumb-face:linear-gradient(#3a4244,#252d30 55%,#1b2325);--ui-room-thumb-highlight:#d8dfe333;--ui-room-thumb-lit:#83df9e;--ui-room-thumb-shadow:#0008;--ui-room-option-ink:#92999a;--ui-filter-edge:#b9c8bd;--ui-filter-ink:#264e43;--ui-filter-ink-on:white;--ui-disclosure-edge:#a8b3ad;--ui-disclosure-face:linear-gradient(#465051,#252d2f);--ui-disclosure-shadow:#000b;--ui-disclosure-highlight:#ffffff36;--ui-disclosure-ink:#eef8f2}
html[data-theme="shitbeard"] .ui-controls{--ui-ink:#000;--ui-muted:#444;--ui-line:#000;--ui-accent:#000;--ui-surface:#fff;--ui-recess:#fff;--ui-control-line:#000;--ui-primary:#000;--ui-primary-ink:#fff;--ui-primary-hover:#000;--ui-secondary:#fff;--ui-selected:#eee;--ui-focus:#000;--ui-track:#fff;--ui-fill:#000;--ui-error:#9b1c1c;--ui-success:#17632d;--ui-bezel:#000;--ui-bezel-edge:#000;--ui-bezel-ink:#000;--ui-bezel-lit:#000;--ui-quality-thumb:#fff;--ui-button-height:44px;--ui-button-radius:0px;--ui-field-height:44px;--ui-field-radius:0px;--ui-focus-ring:#000;--ui-key-face:#fff;--ui-key-face-hover:#fff;--ui-key-face-active:#000;--ui-key-face-primary:#000;--ui-key-face-primary-flat:#fff;--ui-key-edge:#000;--ui-key-edge-top:#000;--ui-key-edge-hover:#000;--ui-key-edge-primary:#000;--ui-key-ink:#000;--ui-key-ink-primary:#fff;--ui-key-highlight:transparent;--ui-key-shade:transparent;--ui-key-shadow:transparent;--ui-key-press-shadow:transparent;--ui-recess-face:#fff;--ui-recess-edge:#000;--ui-recess-ink:#000;--ui-recess-placeholder:#444;--ui-recess-shadow:transparent;--ui-recess-radius:0px;--ui-chevron:#000;--ui-native-accent:#000;--ui-check-edge:#000;--ui-check-face:#fff;--ui-check-shadow:transparent;--ui-check-edge-on:#000;--ui-check-face-on:#fff;--ui-check-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m3 9 4 4 8-9' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--ui-chip-outline:#000;--ui-chip-edge:#000;--ui-chip-face:#fff;--ui-chip-ink:#000;--ui-status-edge:#000;--ui-status-ink:#000;--ui-dialog-face:#fff;--ui-dialog-edge:#000;--ui-dialog-ink:#000;--ui-dialog-backdrop:#ffffffeb;--ui-progress-fill:#000;--ui-bezel-face:#fff;--ui-bezel-frame:#000;--ui-bezel-shadow:transparent;--ui-bezel-highlight:transparent;--ui-option-face:#fff;--ui-option-face-active:#000;--ui-option-edge:#000;--ui-option-edge-top:#000;--ui-option-edge-on:#000;--ui-option-ink:#000;--ui-option-ink-on:#000;--ui-option-highlight:transparent;--ui-option-shade:transparent;--ui-option-shadow:transparent;--ui-option-indicator:#000;--ui-option-lit:#000;--ui-option-glow:transparent;--ui-option-focus:#000;--ui-quality-face:#fff;--ui-quality-shadow:transparent;--ui-quality-thumb-edge:#000;--ui-room-quality-edge:#000;--ui-room-quality-shadow:transparent;--ui-room-thumb-edge:#000;--ui-room-thumb-face:#fff;--ui-room-thumb-highlight:transparent;--ui-room-thumb-lit:#000;--ui-room-thumb-shadow:transparent;--ui-room-option-ink:#444;--ui-filter-edge:#000;--ui-filter-ink:#000;--ui-filter-ink-on:#fff;--ui-disclosure-edge:#000;--ui-disclosure-face:#fff;--ui-disclosure-shadow:transparent;--ui-disclosure-highlight:transparent;--ui-disclosure-ink:#000}
.ui-controls.ui-theme-light{--ui-auth-primary:#9c3655;--ui-auth-primary-hover:#b34667;--ui-auth-primary-ink:#fff;--ui-auth-field-edge:#6a455a;--ui-auth-field-face:#1b1119;--ui-auth-field-ink:#f4e1ec;--ui-auth-show-ink:#4a2b3a;--ui-auth-show-ink-on:#fff;--ui-auth-focus-width:3px;--ui-auth-focus-offset:4px;--ui-auth-error:#a23424}
html[data-theme="shitbeard"] .ui-controls.ui-theme-light{--ui-auth-primary:#000;--ui-auth-primary-hover:#000;--ui-auth-primary-ink:#fff;--ui-auth-field-edge:#000;--ui-auth-field-face:#fff;--ui-auth-field-ink:#000;--ui-auth-show-ink:#000;--ui-auth-show-ink-on:#fff;--ui-auth-error:#9b1c1c}
.ui-controls.ui-theme-concert{--ui-recess:#1b1119;--ui-control-line:#6a455a;--ui-primary:#9c3655;--ui-primary-hover:#b34667;--ui-secondary:#35202c;--ui-selected:#512738;--ui-track:#47313e;--ui-error:#ffad9f;--ui-success:#9ad4ad;--ui-room-quality-face:#111719}
html[data-theme="shitbeard"] .ui-controls.ui-theme-concert{--ui-recess:#fff;--ui-control-line:#000;--ui-primary:#000;--ui-primary-hover:#000;--ui-secondary:#fff;--ui-selected:#eee;--ui-track:#fff;--ui-error:#9b1c1c;--ui-success:#17632d;--ui-room-quality-face:#fff}
.ui-controls.ui-theme-dead{--ui-recess:#111923;--ui-control-line:#37475a;--ui-primary:#8c3a44;--ui-primary-hover:#a54752;--ui-secondary:#18212d;--ui-selected:#24384d;--ui-track:#28313d;--ui-fill:#9cb9d6;--ui-focus:#d9949b;--ui-error:#ffad9f;--ui-success:#9ad4ad}
html[data-theme="shitbeard"] .ui-controls.ui-theme-dead{--ui-recess:#fff;--ui-control-line:#000;--ui-primary:#000;--ui-primary-hover:#000;--ui-secondary:#fff;--ui-selected:#eee;--ui-track:#fff;--ui-fill:#000;--ui-focus:#000;--ui-error:#9b1c1c;--ui-success:#17632d}
.ui-controls.ui-theme-tape{--ui-recess:#0d1721;--ui-control-line:#586d80;--ui-primary:#28475e;--ui-primary-hover:#365b76;--ui-secondary:#1e2d3a;--ui-selected:#243d51;--ui-track:#263645;--ui-fill:#97c5d8;--ui-focus:#c5e2f5;--ui-error:#e49b91;--ui-success:#98c8ac;--ui-deck-chip-edge:#59686e;--ui-deck-chip-face:linear-gradient(#333a3b,#222a2c);--ui-deck-chip-highlight:#ffffff1a;--ui-deck-chip-shadow:#0007;--ui-deck-chip-edge-on:#a2adb0;--ui-deck-chip-face-on:linear-gradient(#424c4e,#2b3436);--ui-deck-key-primary-edge:#9aa6a7;--ui-deck-key-primary-face:linear-gradient(#495456,#303b3d 52%,#222c2e);--ui-deck-key-primary-lit:#8fbd9f}
html[data-theme="shitbeard"] .ui-controls.ui-theme-tape{--ui-recess:#fff;--ui-control-line:#000;--ui-primary:#000;--ui-primary-hover:#000;--ui-secondary:#fff;--ui-selected:#eee;--ui-track:#fff;--ui-fill:#000;--ui-focus:#000;--ui-error:#9b1c1c;--ui-success:#17632d;--ui-deck-chip-edge:#000;--ui-deck-chip-face:#fff;--ui-deck-chip-highlight:transparent;--ui-deck-chip-shadow:transparent;--ui-deck-chip-edge-on:#000;--ui-deck-chip-face-on:#fff;--ui-deck-key-primary-edge:#000;--ui-deck-key-primary-face:#000;--ui-deck-key-primary-lit:#000}
.ui-controls.ui-theme-operator{--ui-recess:#0e1620;--ui-control-line:#50657a;--ui-primary:#304f63;--ui-primary-hover:#3d627b;--ui-secondary:#242f39;--ui-selected:#243d52;--ui-track:#354454;--ui-fill:#96bbd7;--ui-focus:#a4c7df;--ui-error:#ffad9f;--ui-success:#84c8a1;--ui-range-face:#0e1620;--ui-gear-edge:#536472;--ui-gear-edge-top:#7a8c99;--ui-gear-face:linear-gradient(180deg,#34404b,#242f39 52%,#1b252f);--ui-gear-ink:#e0e8ee;--ui-gear-highlight:#ffffff16;--ui-gear-shade:#101922;--ui-gear-shadow:#0007;--ui-gear-edge-hover:#9cb4c6;--ui-gear-face-hover:linear-gradient(#3e4c58,#2c3944);--ui-gear-ink-hover:white;--ui-gear-focus:#a4c7df}
html[data-theme="shitbeard"] .ui-controls.ui-theme-operator{--ui-recess:#fff;--ui-control-line:#000;--ui-primary:#000;--ui-primary-hover:#000;--ui-secondary:#fff;--ui-selected:#eee;--ui-track:#fff;--ui-fill:#000;--ui-focus:#000;--ui-error:#9b1c1c;--ui-success:#17632d;--ui-range-face:#fff;--ui-gear-edge:#000;--ui-gear-edge-top:#000;--ui-gear-face:#fff;--ui-gear-ink:#000;--ui-gear-highlight:transparent;--ui-gear-shade:transparent;--ui-gear-shadow:transparent;--ui-gear-edge-hover:#000;--ui-gear-face-hover:#fff;--ui-gear-ink-hover:#000;--ui-gear-focus:#000}
/* Operator header controls share the rectangular Test/Tape shape. */
.control-theme input[type=range]{background-color:var(--ui-range-face)}
.control-theme .control-gear{border:1px solid var(--ui-gear-edge);border-top-color:var(--ui-gear-edge-top);border-radius:3px;background:var(--ui-gear-face);color:var(--ui-gear-ink);box-shadow:inset 0 1px var(--ui-gear-highlight),inset 0 -3px var(--ui-gear-shade),0 1px 2px var(--ui-gear-shadow)}
.control-theme button:not(.vu-panel button):not(.control-meter-rack button){min-height:44px}
.control-theme .control-gear:hover:not(:disabled){border-color:var(--ui-gear-edge-hover);color:var(--ui-gear-ink-hover);background:var(--ui-gear-face-hover)}
.control-theme button:not(.vu-panel button):not(.control-meter-rack button):active{transform:none}
.control-theme .control-gear:focus-visible{outline:2px solid var(--ui-gear-focus);outline-offset:3px}
.control-theme .control-gear:disabled{opacity:.45;cursor:default}
/* Tape control sizing stays local; raised finish and select chevron live below. */
:where(.ui-controls.ui-theme-tape) button{min-height:43px;padding:.55rem .9rem;cursor:pointer;border-radius:3px}
:where(.ui-controls.ui-theme-tape) button.primary{font-weight:700}
:where(.ui-controls.ui-theme-tape) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){width:100%;min-width:0;min-height:40px;padding:.55rem .7rem}
:where(.ui-controls.ui-theme-tape) .ui-deck-chip{border-color:var(--ui-deck-chip-edge);background:var(--ui-deck-chip-face);box-shadow:inset 0 1px var(--ui-deck-chip-highlight),0 1px 2px var(--ui-deck-chip-shadow)}
:where(.ui-controls.ui-theme-tape) .ui-deck-chip:has(input:checked){border-color:var(--ui-deck-chip-edge-on);background:var(--ui-deck-chip-face-on)}
.ui-controls .ui-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  min-height:var(--ui-button-height);max-width:100%;padding:.65rem 1rem;
  border:1px solid var(--ui-control-line);border-radius:var(--ui-button-radius);
  background:var(--ui-secondary);color:var(--ui-ink);
  font:inherit;font-weight:600;line-height:1.25;text-align:center;text-decoration:none;
  cursor:pointer;touch-action:manipulation;
}
.ui-controls .ui-button:is(:hover,:focus-visible):not(:disabled):not([aria-disabled="true"]){border-color:var(--ui-focus)}
.ui-controls .ui-button--primary{background:var(--ui-primary);border-color:var(--ui-primary);color:var(--ui-primary-ink)}
.ui-controls .ui-button--primary:hover:not(:disabled){background:var(--ui-primary-hover)}
.ui-controls .ui-button:is([aria-pressed="true"],[aria-selected="true"],[aria-current="true"]){background:var(--ui-selected);border-color:var(--ui-focus);color:var(--ui-ink)}
.ui-controls .ui-button:disabled,.ui-controls .ui-button[aria-disabled="true"]{opacity:.48;cursor:default}
.ui-controls .ui-button:focus-visible,.ui-controls .ui-field:focus-visible,.ui-controls .ui-range:focus-visible,.ui-controls .ui-quality-track:focus-visible,.ui-controls .ui-bezel-option:has(input:focus-visible){outline:var(--ui-focus-width) solid var(--ui-focus);outline-offset:var(--ui-focus-offset)}
/* Both sign-in shells keep the original light controls and distinct auth endpoints. */
.ui-controls.ui-theme-light .ui-button--auth{display:inline-block;max-width:none;min-height:49px;padding:15px 25px;border:0;border-radius:3px;background:var(--ui-auth-primary);color:var(--ui-auth-primary-ink);font-weight:600;line-height:normal}
.ui-controls.ui-theme-light .ui-button--auth:hover:not(:disabled){background:var(--ui-auth-primary-hover)}
.ui-controls.ui-theme-light .ui-button--auth:disabled{opacity:.45;cursor:not-allowed}
.ui-controls.ui-theme-light .ui-button--auth:focus-visible,.ui-controls.ui-theme-light .ui-field--auth:focus-visible{outline:var(--ui-auth-focus-width) solid var(--accent);outline-offset:var(--ui-auth-focus-offset)}
.ui-controls .ui-field{
  display:block;width:100%;min-width:0;min-height:var(--ui-field-height);
  padding:.55rem .7rem;border:1px solid var(--ui-control-line);border-radius:var(--ui-field-radius);
  background:var(--ui-recess);color:var(--ui-ink);font:inherit;
}
.ui-controls .ui-field::placeholder{color:var(--ui-muted)}
.ui-controls .ui-field:disabled{opacity:.55}
.ui-controls.ui-theme-light .ui-field--auth{display:inline-block;min-height:44px;padding:10px 12px;border:1px solid var(--ui-auth-field-edge);border-radius:3px;background:var(--ui-auth-field-face);color:var(--ui-auth-field-ink);margin-top:7px}
.ui-controls .ui-status{color:var(--ui-muted);font-size:.8rem;margin:.65rem 0 0}
.ui-controls .ui-status[data-state="error"]{color:var(--ui-error)}
.ui-controls .ui-status[data-state="success"]{color:var(--ui-success)}
.ui-controls .ui-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .5rem;border:1px solid var(--ui-chip-outline);border-radius:4px;font-size:.75rem;overflow-wrap:anywhere}
.ui-controls .ui-chip.inherited{color:var(--ui-muted);border-style:dashed}
.ui-controls .ui-chip[data-state="error"]{border-color:var(--ui-error);color:var(--ui-error)}
/* The signal-path filters are a light-theme chip variant with pressed semantics. */
.ui-controls .ui-filter-chip{border:1px solid var(--ui-filter-edge);border-radius:30px;padding:11px 20px;background:transparent;color:var(--ui-filter-ink);font:inherit;cursor:pointer}
.ui-controls .ui-filter-chip[aria-pressed=true]{background:var(--ui-filter-ink);color:var(--ui-filter-ink-on);border-color:var(--ui-filter-ink)}
.ui-controls .ui-dialog{max-width:900px;width:calc(100% - 2rem);max-height:90vh;overflow:auto;padding:1rem;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-surface);color:var(--ui-ink)}
.ui-controls .ui-dialog-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-bottom:12px;background:var(--ui-dialog-surface,var(--ui-surface));border-bottom:1px solid var(--ui-line);box-shadow:0 -1rem 0 1rem var(--ui-dialog-surface,var(--ui-surface))}
.ui-controls .ui-dialog-head>h2{min-width:0;overflow-wrap:anywhere}
.ui-controls .ui-dialog-close{flex:none;display:grid;place-items:center;min-width:44px;min-height:44px;width:44px;height:44px;padding:0;font:normal 1.6rem/1 system-ui,sans-serif}
.ui-controls .ui-dialog::backdrop{background:var(--ui-dialog-backdrop)}
.ui-controls .ui-image-dialog{width:min(900px,calc(100% - 1rem));max-height:95vh;text-align:right}
.ui-controls .ui-image-dialog figure{margin:.5rem 0 0;text-align:center}
.ui-controls .ui-image-dialog img{display:block;max-width:100%;max-height:calc(95vh - 7rem);width:auto;height:auto;object-fit:contain;margin:auto}
.ui-controls .ui-image-dialog figcaption{margin-top:.4rem;overflow-wrap:anywhere;color:var(--ui-muted);font-size:.8rem}
.ui-controls .ui-progress{height:14px;margin:0;border:1px solid var(--ui-line);border-radius:7px;background:var(--paper);overflow:hidden}
.ui-controls .ui-progress-fill{height:100%;width:0;background:var(--ui-progress-fill);transition:width .4s linear}
.ui-controls .ui-range{width:100%;min-height:32px;padding:0;accent-color:var(--ui-fill);background:transparent}
/* The visible bezel does not carry the radio semantics. Its native input does. */
.ui-controls .ui-bezel{display:flex;flex-wrap:wrap;gap:5px;max-width:100%;padding:5px;border:1px solid var(--ui-bezel-frame);border-radius:3px;background:var(--ui-bezel-face);box-shadow:0 2px 7px var(--ui-bezel-shadow),inset 0 1px var(--ui-bezel-highlight)}
.ui-controls .ui-bezel-option{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:70px;min-height:43px;padding:8px 12px 12px;border:1px solid var(--ui-option-edge);border-top-color:var(--ui-option-edge-top);border-radius:2px;background:var(--ui-option-face);box-shadow:inset 0 1px 0 var(--ui-option-highlight),inset 0 -3px 0 var(--ui-option-shade),0 1px 2px var(--ui-option-shadow);color:var(--ui-option-ink);font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap;cursor:pointer}
.ui-controls .ui-bezel-option::after{content:"";position:absolute;bottom:5px;left:50%;width:9px;height:2px;border-radius:1px;transform:translateX(-50%);background:var(--ui-option-indicator)}
.ui-controls .ui-bezel-option:has(input:checked){border-color:var(--ui-option-edge-on);color:var(--ui-option-ink-on);box-shadow:inset 0 1px var(--ui-option-highlight),inset 0 -3px var(--ui-option-shade),0 1px 2px var(--ui-option-shadow)}
.ui-controls .ui-bezel-option:has(input:checked)::after{background:var(--ui-option-lit);box-shadow:0 0 5px var(--ui-option-glow)}
.ui-controls .ui-bezel-option:has(input:focus-visible){outline:2px solid var(--ui-option-focus);outline-offset:3px}
.ui-controls .ui-bezel-option:active{background:var(--ui-option-face-active)}
.ui-controls button.ui-bezel-option:focus-visible{outline:var(--ui-focus-width) solid var(--ui-focus);outline-offset:var(--ui-focus-offset)}
.ui-controls.ui-theme-tape .ui-deck-key--primary{border-color:var(--ui-deck-key-primary-edge);background:var(--ui-deck-key-primary-face)}
.ui-controls.ui-theme-tape .ui-deck-key--primary::after{background:var(--ui-deck-key-primary-lit)}
.ui-controls.ui-theme-tape .transport.ui-bezel .ui-bezel-option{min-width:0;white-space:normal;text-wrap:balance}
.ui-controls .ui-bezel-option input[type="radio"]{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer}
/* Two physical positions; data-position is visual only and does not change quality. */
.ui-controls .ui-quality-track{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;width:100%;max-width:360px;min-height:48px;padding:4px;border:1px solid var(--ui-line);border-radius:5px;background:var(--ui-quality-face);box-shadow:inset 0 1px 2px var(--ui-quality-shadow);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.ui-controls .ui-quality-track:focus-visible{outline:3px solid var(--ui-accent);outline-offset:4px}
.ui-controls .ui-quality-thumb{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border:1px solid var(--ui-quality-thumb-edge);border-radius:4px;background:var(--ui-quality-thumb);box-shadow:0 2px 8px var(--ui-quality-shadow);transition:transform .18s ease;pointer-events:none}
.ui-controls .ui-quality-track:is([data-position="end"],[data-quality="compressed"]) .ui-quality-thumb{transform:translateX(100%)}
.ui-controls .ui-quality-track[data-dragging] .ui-quality-thumb{transition:none}
.ui-controls .ui-quality-option{position:relative;z-index:1;padding:0 6px;color:var(--ui-muted);text-align:center;line-height:1.25;pointer-events:none;overflow-wrap:anywhere}
.ui-controls .ui-quality-track:is([data-position="start"],[data-quality="lossless"]) .ui-quality-option:is([data-position="start"],[data-for="lossless"]),.ui-controls .ui-quality-track:is([data-position="end"],[data-quality="compressed"]) .ui-quality-option:is([data-position="end"],[data-for="compressed"]){color:var(--ui-ink);font-weight:650}
.ui-controls .ui-quality-track[aria-disabled="true"]{opacity:.6;cursor:progress}
/* The room uses the existing dark deck finish; the codec choice is still owned by its adapter. */
:is(.ui-controls.listening-room,.ui-controls .listening-room) .ui-quality-track{border-color:var(--ui-room-quality-edge);border-radius:3px;background:var(--deck-rail-fill);box-shadow:inset 0 1px 3px var(--ui-room-quality-shadow)}
:is(.ui-controls.listening-room,.ui-controls .listening-room) .ui-quality-thumb{border-color:var(--ui-room-thumb-edge);border-radius:2px;background:var(--ui-room-thumb-face);box-shadow:inset 0 1px var(--ui-room-thumb-highlight),inset 0 -2px var(--ui-room-thumb-lit),0 1px 3px var(--ui-room-thumb-shadow)}
:is(.ui-controls.listening-room,.ui-controls .listening-room) .ui-quality-option{color:var(--ui-room-option-ink)}
:is(.ui-controls.listening-room,.ui-controls .listening-room) .ui-quality-track[data-quality=lossless] [data-for=lossless],:is(.ui-controls.listening-room,.ui-controls .listening-room) .ui-quality-track[data-quality=compressed] [data-for=compressed]{color:var(--deck-key-text)}
:is(.ui-controls.listening-room,.ui-controls .listening-room) .ui-quality-track:focus-visible{outline:2px solid var(--deck-focus);outline-offset:3px}
:is(.ui-controls.ui-theme-concert.listening-room,.ui-controls.ui-theme-concert .listening-room) .ui-quality-track{background:var(--ui-room-quality-face)}
@media (max-width:600px),(pointer:coarse){.ui-controls .ui-quality-track{max-width:none;min-height:52px}}
@media (prefers-reduced-motion:reduce){.ui-controls .ui-quality-thumb{transition:none}}
.ui-controls .ui-bezel.ui-bezel-fit{width:fit-content;max-width:100%}

/* One deck finish for every generated host, including controls added later by JS.
   Domain styles continue to own geometry, visibility, and command semantics. */
body.ui-controls :is(button:not(.control-gear):not(.visual-exit),a.primary,a.secondary,a.tape-load-link,[role="button"]:not(.dead-map-pin)){border:1px solid var(--ui-key-edge)!important;border-top-color:var(--ui-key-edge-top)!important;background:var(--ui-key-face)!important;box-shadow:inset 0 1px var(--ui-key-highlight),inset 0 -3px var(--ui-key-shade),0 1px 2px var(--ui-key-shadow)!important;color:var(--ui-key-ink)!important}
body.ui-controls :is(button:not(.control-gear):not(.visual-exit),a.primary,a.secondary,a.tape-load-link,[role="button"]:not(.dead-map-pin)):is(:hover,:focus-visible):not(:disabled):not([aria-disabled="true"]){border-color:var(--ui-key-edge-hover)!important;background:var(--ui-key-face-hover)!important}
body.ui-controls :is(button:not(.control-gear):not(.visual-exit),a.primary,a.secondary,a.tape-load-link,[role="button"]:not(.dead-map-pin)):active:not(:disabled){background:var(--ui-key-face-active)!important;box-shadow:inset 0 2px 4px var(--ui-key-press-shadow)!important}
body.ui-controls :is(button.primary,button.ui-button--primary,a.primary,[role="tab"][aria-selected="true"],button[aria-pressed="true"]){border-color:var(--ui-key-edge-primary)!important;background:var(--ui-key-face-primary)!important;color:var(--ui-key-ink-primary)!important}
body.ui-controls :is(button:not(.control-gear):not(.visual-exit),a.primary,a.secondary,a.tape-load-link,[role="button"]):disabled{opacity:.48;cursor:default}
body.ui-controls :is(a.primary,a.secondary,a.tape-load-link){text-decoration:none}
body.ui-controls :is(a.primary,a.secondary,a.tape-load-link)[aria-disabled="true"]{opacity:.48;pointer-events:none}
body.ui-controls :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),select,textarea){min-height:40px;border:1px solid var(--ui-recess-edge)!important;border-radius:var(--ui-recess-radius)!important;background-color:var(--ui-recess-face)!important;color:var(--ui-recess-ink)!important;box-shadow:inset 0 2px 5px var(--ui-recess-shadow),inset 0 1px var(--ui-recess-shadow)!important}
body.ui-controls :is(input,textarea)::placeholder{color:var(--ui-recess-placeholder)!important;opacity:1}
body.ui-controls select{appearance:none!important;-webkit-appearance:none!important;padding-right:2.2rem!important;background-image:linear-gradient(45deg,transparent 50%,var(--ui-chevron) 50%),linear-gradient(135deg,var(--ui-chevron) 50%,transparent 50%)!important;background-position:calc(100% - 18px) center,calc(100% - 12px) center!important;background-size:6px 6px!important;background-repeat:no-repeat!important}
body.ui-controls :is(input[type="checkbox"],input[type="radio"]){accent-color:var(--ui-native-accent)!important}
body.ui-controls input[type="checkbox"]{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;min-width:18px;min-height:18px;margin:0;border:1px solid var(--ui-check-edge);border-radius:2px;background:var(--ui-check-face);box-shadow:inset 0 1px 3px var(--ui-check-shadow);vertical-align:middle;cursor:pointer}
/* Checkbox filters share one padded label; the whole label remains the native hit target. */
body.ui-controls .check-option{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.5rem .75rem;border:2px solid transparent;border-radius:var(--theme-surface-radius,4px);cursor:pointer}
body.ui-controls .check-option>input[type="checkbox"]{margin:0}
body.ui-controls .check-option>span{min-width:0;overflow-wrap:anywhere}
body.ui-controls input[type="checkbox"]:checked{border-color:var(--ui-check-edge-on);background-color:var(--ui-check-face-on);background-image:var(--ui-check-mark)}
body.ui-controls input[type="checkbox"]:disabled{opacity:.48;cursor:default}
body.ui-controls :is(input[type="range"],.ui-range){accent-color:var(--ui-native-accent)!important;--dead-oxblood-lit:var(--ui-native-accent)}
body.ui-controls :is(.tag-options label,.check-option,.side-image-option label):has(input:checked){border-color:var(--ui-key-edge-primary)!important;background:var(--ui-key-face-primary-flat)!important}
body.ui-controls :is(.ui-chip,.tag-chip){border-color:var(--ui-chip-edge);background-color:var(--ui-chip-face);color:var(--ui-chip-ink)}
body.ui-controls :is(.ui-status,.status-line,.banner){border-color:var(--ui-status-edge);color:var(--ui-status-ink)}
body.ui-controls :is(.ui-dialog,.room-create,.dead-help){--ui-dialog-surface:var(--ui-dialog-face);border-color:var(--ui-dialog-edge)!important;background:var(--ui-dialog-surface)!important;color:var(--ui-dialog-ink)!important}
body.ui-controls :is(button:not(.control-gear):not(.visual-exit),a.primary,a.secondary,a.tape-load-link,input,select,textarea,summary,[role="button"]:not(.dead-map-pin)):focus-visible{outline:var(--ui-focus-width) solid var(--ui-focus-ring)!important;outline-offset:var(--ui-focus-offset)}

/* Only listening views mount a disclosure. Its 20px key keeps a 44px target. */
body.ui-controls .tape-display-figure{position:relative}
body.ui-controls .tape-display-figure .tape-artwork-disclosure{position:absolute;z-index:1;top:3px;left:3px;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;max-width:none;margin:0;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;font-size:0;white-space:nowrap;cursor:pointer}
body.ui-controls .tape-display-figure .tape-artwork-disclosure::before{content:"";position:absolute;width:20px;height:20px;border:1px solid var(--ui-disclosure-edge);border-radius:3px;background:var(--ui-disclosure-face);box-shadow:0 2px 5px var(--ui-disclosure-shadow),inset 0 1px var(--ui-disclosure-highlight)}
body.ui-controls .tape-display-figure .tape-artwork-disclosure::after{content:"−";position:relative;color:var(--ui-disclosure-ink);font-size:16px;line-height:1}
body.ui-controls .tape-display-figure .tape-artwork-disclosure[aria-expanded="false"]::after{content:"+"}
body.ui-controls .tape-display-figure .tape-artwork-disclosure:disabled{opacity:.65;cursor:progress}
body.ui-controls .tape-display-figure .tape-artwork-disclosure:focus-visible{outline:var(--ui-focus-width) solid var(--ui-focus-ring)!important;outline-offset:1px}
body.ui-controls .tape-display-figure.tape-artwork-collapsed{min-height:54px}
body.ui-controls .tape-display-figure.tape-artwork-collapsed figcaption{padding-left:56px;min-height:44px;display:flex;align-items:center}