/* GENERATED from musix/songs/player/index.html for JCOM Builder Kit. */
/* @musix-controls:begin
MUSIX CONTROLS (owner, 2026-09-26, PENDING 62: "square and round buttons alternating and some
buttons have underlined words ... we should be using a consistent visual style"). ONE control
system for every page under Musix; design from .lane-reports/ds62f-audit.md and ds62a-audit.md.
THE SOURCE IS THIS BLOCK, IN THIS FILE. The player may not load a stylesheet (it is one
self-contained file), so the other Musix surfaces - the embed, the share cards, MusixVideo -
are served a verbatim copy, musix-controls.css, cut from between the two markers by
musix/songs/player/controls-sheet.mjs at staging. Edit here; never edit a copy.
Colours: the Musix palette, dark and light, exactly as the player has always had it, declared
at ZERO specificity (:where) so a surface can re-point a token in its own :root - MusixVideo
keeps its amber as --accent - without copying the rest. No colour here is new.
.btn + .btn-primary | .btn-secondary | .btn-ghost text buttons, one per emphasis
.btn.btn-icon icon-only, square with the same corners
.btn-play the main play button: the ONLY circle
.chip, .chip-group toggles, filters, identifiers: the ONLY pills
.link a link inside running text: the ONLY underline
.field text inputs, selects, textareas
Shape: --r-control (10px, the cards' --radius) on every button and field; 999px on chips.
A §9 overlay CONTAINER (a float bar, a notice card) keeps PWA_FORMAT's 12px; the controls in it
are controls, so they take 10px like every other.
Size: 44 visual by default, .is-md 36, .is-sm and chips 28; a primary text button is 48 tall
under a coarse pointer (PWA_FORMAT §6). Wherever a coarse pointer exists, every control
answers a 44x44 region (::before) whatever size it draws.
States: one focus ring (2px --focus, 2px out), hover only where hover exists, one pressed fill
(80ms in, 140ms out, no scale: PWA_FORMAT §6; the page adds one passive touchstart listener so
iOS applies :active), selected (aria-pressed / -current / -selected) = accent text on
accent-soft, disabled = .45 opacity with hover and press switched off. */
:where(:root) {
--bg: #0e1013; --panel: #161a20; --line: #262e38; --ink: #e8edf4; --ink-dim: #9aa7b8;
--accent: #6ea8fe; --accent-dim: #3c5a8a; --accent-soft: rgba(110,168,254,.14);
--accent-hover: #8dbbff; --accent-press: #5b93ea; --on-accent: #0b1017; --focus: #9fc4ff;
--btn-ghost-hover: rgba(232,237,244,.07); --btn-ghost-active: rgba(232,237,244,.13);
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:where(:root[data-theme="light"]) {
--bg: #f5f7fa; --panel: #ffffff; --line: #cbd5e1; --ink: #172334; --ink-dim: #43546a;
--accent: #245caa; --accent-dim: #5479a9; --accent-soft: rgba(36,92,170,.12);
--accent-hover: #2f6fc4; --accent-press: #1d4d90; --on-accent: #ffffff; --focus: #245caa;
--btn-ghost-hover: rgba(23,35,52,.07); --btn-ghost-active: rgba(23,35,52,.13);
}
:where(:root) {
--r-control: 10px; --r-pill: 999px;
--h-lg: 44px; --h-md: 36px; --h-sm: 28px; --hit: 44px;
--motion-fast: 140ms; --ease-out: cubic-bezier(.2,0,0,1);
--line-strong: color-mix(in srgb, var(--ink) 24%, transparent);
--accent-ring: color-mix(in srgb, var(--accent) 18%, transparent);
}
.btn, .chip {
-webkit-appearance: none; appearance: none; box-sizing: border-box; position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
margin: 0; max-width: 100%; border: 1px solid transparent; background: transparent;
color: var(--ink); font: 500 13px/1.2 var(--sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out),
color var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}
.btn { min-height: var(--h-lg); min-width: var(--h-lg); padding: 0 16px; border-radius: var(--r-control); }
.btn.is-md { min-height: var(--h-md); min-width: var(--h-md); padding: 0 12px; }
.btn.is-sm { min-height: var(--h-sm); min-width: var(--h-sm); padding: 0 10px; font-size: 12px; }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-secondary { border-color: var(--line-strong); }
.btn-icon { width: var(--h-lg); height: var(--h-lg); padding: 0; flex: 0 0 auto; }
.btn-icon.is-md { width: var(--h-md); height: var(--h-md); padding: 0; }
.btn-icon svg { width: 20px; height: 20px; }
.btn-play { border-radius: 50%; }
.chip {
min-height: var(--h-sm); padding: 0 10px; gap: 6px; border-radius: var(--r-pill);
border-color: var(--line-strong); color: var(--ink-dim); font-size: 12px;
}
.chip.is-mono { font: 500 11px/1.2 var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); }
.chip.is-accent { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-soft); }
.chip-group { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
/* State rules carry the specificity of ONE class (:where), so a surface rule written after
this block - a glass float, a drawer row - still owns its own fill. */
@media (hover: hover) {
:where(.btn-secondary, .btn-ghost, .btn-icon:not(.btn-primary), .chip):where(:not(:disabled, [aria-disabled="true"])):hover { background: var(--btn-ghost-hover); }
.chip.is-accent:where(:not(:disabled)):hover { border-color: var(--accent); }
.btn-primary:where(:not(:disabled, [aria-disabled="true"])):hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-play:where(:not(:disabled)):hover { box-shadow: 0 0 0 6px var(--accent-ring); }
}
:where(.btn, .chip):active { transition-duration: 80ms; }
:where(.btn-secondary, .btn-ghost, .btn-icon:not(.btn-primary), .chip):where(:not(:disabled, [aria-disabled="true"])):active { background: var(--btn-ghost-active); }
.btn-primary:where(:not(:disabled, [aria-disabled="true"])):active { background: var(--accent-press); border-color: var(--accent-press); box-shadow: none; }
:where(.btn:not(.btn-primary), .chip):is([aria-pressed="true"], [aria-current="true"], [aria-current="page"], [aria-selected="true"]) {
color: var(--accent); background: var(--accent-soft); border-color: var(--accent-dim);
}
:where(.btn, .chip):is(:disabled, [aria-disabled="true"]) { opacity: .45; cursor: not-allowed; }
:where(.btn, .chip, .link, .field):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
@media (hover: hover) { .link:hover { color: var(--accent-hover); } }
.field {
box-sizing: border-box; min-height: var(--h-lg); padding: 8px 12px; margin: 0;
border: 1px solid var(--line-strong); border-radius: var(--r-control);
background: var(--bg, transparent); color: var(--ink); font: 400 max(16px, 1rem)/1.4 var(--sans, system-ui, sans-serif);
-webkit-user-select: text; user-select: text; touch-action: manipulation;
}
/* max(16px, 1rem): the focus-zoom guard (PWA_FORMAT §6). A monospace field keeps the size. */
.field.is-mono { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); }
/* The 44px region on touch: a transparent ::before centred on the control. Its box is the
control's own, so nothing may clip it: a chip never takes overflow:hidden itself. */
@media (any-pointer: coarse) {
.btn-primary:not(.btn-icon) { min-height: 48px; }
:where(.chip, .btn.is-md, .btn.is-sm)::before {
content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: max(100%, var(--hit)); height: max(100%, var(--hit));
}
}
@media (prefers-reduced-motion: reduce) { .btn, .chip { transition: none; } }
/* @musix-controls:end */