/* STEM Allocation — dense studio UI, light and dark. * * Every colour is declared once with light-dark(): the first value is light, * the second dark, and `color-scheme` decides which one applies. That keeps the * theme switch to a single attribute on and also gives native scrollbars, * form controls and range sliders the right appearance for free. * * data-theme="light" light * data-theme="dark" dark * * The attribute is always present: an inline script in resolves it * before first paint, seeding it from the OS preference on a first visit and * from the stored choice afterwards. `color-scheme: light dark` below is only * the safety net for a page rendered with scripting off. */ :root { color-scheme: light dark; --bg: light-dark(#f3f5f8, #0e1116); --bg-raised: light-dark(#ffffff, #161b22); --bg-sunken: light-dark(#eaeef3, #0a0d12); --surface-hover: light-dark(#e7ebf1, #1d242e); --stem-bg: light-dark(#f7f9fb, #12171f); --btn-bg: light-dark(#ffffff, #1f2630); --line: light-dark(#cfd6df, #262d38); --line-soft: light-dark(#e3e8ee, #1c222c); /* All three clear WCAG AA (4.5:1) against every surface they sit on, * including the muted count chips — the dimmest combination in the UI. */ --text: light-dark(#161b22, #e6edf3); --text-dim: light-dark(#46505f, #a9b3bf); --text-faint: light-dark(#5a6575, #8b949e); --accent: light-dark(#0b62c4, #4c9aff); --accent-dim: light-dark(#1f6feb, #1f6feb); --accent-on: #ffffff; --accent-surface: light-dark(#eaf2fd, #101725); --accent-hot: light-dark(#dceafc, #12203a); --chip-bg: light-dark(#dbe8fa, #223049); --chip-muted-bg: light-dark(#e5e9ef, #222932); --warn: light-dark(#9a6700, #d29922); --warn-bg: light-dark(#fff8e3, #2b2310); --warn-text: light-dark(#7a5200, #f0d08a); --warn-surface: light-dark(#fffaee, #1c1810); --warn-line: light-dark(#e6d6a8, #4a3c17); --ok: light-dark(#1a7f37, #3fb950); --ok-bg: light-dark(#e9f6ec, #10240f); --ok-line: light-dark(#a9d7b4, #1f5c2e); --ok-text: light-dark(#0f5323, #a7e6ae); --danger: light-dark(#c8232f, #f85149); --danger-bg: light-dark(#fdecec, #2a1513); --danger-line: light-dark(#e8b4b4, #5c2b28); --danger-text: light-dark(#9b1c26, #ffb3ae); --shadow: light-dark(0 -6px 24px rgb(15 25 40 / .12), 0 -6px 24px rgb(0 0 0 / .45)); --radius: 8px; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Browsers without light-dark() (pre-2024) get the dark palette rather than an * unstyled page — the theme switch is simply inert there. */ @supports not (color: light-dark(#fff, #000)) { :root { --bg: #0e1116; --bg-raised: #161b22; --bg-sunken: #0a0d12; --surface-hover: #1d242e; --stem-bg: #12171f; --btn-bg: #1f2630; --line: #262d38; --line-soft: #1c222c; --text: #e6edf3; --text-dim: #a9b3bf; --text-faint: #8b949e; --accent: #4c9aff; --accent-surface: #101725; --accent-hot: #12203a; --chip-bg: #223049; --chip-muted-bg: #222932; --warn-text: #f0d08a; --warn-surface: #1c1810; --warn-line: #4a3c17; --ok-bg: #10240f; --ok-line: #1f5c2e; --ok-text: #a7e6ae; --danger-bg: #2a1513; --danger-line: #5c2b28; --danger-text: #ffb3ae; --shadow: 0 -6px 24px rgb(0 0 0 / .45); } } * { box-sizing: border-box; } /* The `hidden` attribute must win over any component's own `display` (e.g. `.empty { display: grid }`), which would otherwise keep a hidden section on screen. Author styles beat the UA `[hidden]` rule, so restate it here. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; padding-bottom: 84px; } h1, h2 { margin: 0; font-weight: 600; } code { font-family: var(--mono); } small { color: var(--text-faint); font-size: 12px; } /* ------------------------------------------------------------------ login */ .login { min-height: 100vh; display: grid; justify-items: center; align-content: center; /* keep card and theme switch together, not one per track */ gap: 20px; padding: 24px; } .login__card { width: min(380px, 100%); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: grid; gap: 18px; } .login__brand { display: flex; gap: 14px; align-items: center; } .login__mark { font-size: 32px; } .login__brand h1 { font-size: 18px; } .login__brand p { margin: 2px 0 0; color: var(--text-dim); font-size: 13px; } .field { display: grid; gap: 6px; } .field span { font-size: 13px; color: var(--text-dim); } input[type="password"], input[type="text"], select { background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 9px 10px; font: inherit; width: 100%; } input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ----------------------------------------------------------------- topbar */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: stretch; gap: 16px; background: var(--bg-raised); border-bottom: 1px solid var(--line); padding: 0 16px; } .topbar__brand { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; padding-right: 8px; border-right: 1px solid var(--line); } .topbar__out { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* ----------------------------------------------------------- theme switch */ .theme { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--bg-sunken); } .theme__btn { border: none; background: transparent; color: var(--text-dim); font: inherit; font-size: 12px; line-height: 1; padding: 6px 9px; cursor: pointer; } .theme__btn + .theme__btn { border-left: 1px solid var(--line); } .theme__btn:hover { color: var(--text); background: var(--surface-hover); } .theme__btn--on { background: var(--accent-dim); color: var(--accent-on); } .theme__btn--on:hover { background: var(--accent-dim); color: var(--accent-on); } .login .theme { align-self: center; } .tabs { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: thin; } .tab { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 10px 14px; color: var(--text-dim); text-decoration: none; border: 1px solid transparent; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; } .tab:hover { color: var(--text); background: var(--surface-hover); } .tab--active { color: var(--text); border-bottom-color: var(--accent); background: var(--bg); } .tab__meta { font-size: 11px; color: var(--text-faint); font-weight: 400; } /* A tab owned by another user: visible for awareness, but not a link. */ .tab--foreign { flex-direction: row; align-items: center; gap: 6px; cursor: not-allowed; opacity: 0.55; } .tab--foreign:hover { background: none; color: var(--text-dim); } .tab--foreign .tab__meta { color: var(--text-faint); } .tab--new { flex-direction: row; align-items: center; gap: 6px; margin: 0; cursor: pointer; background: none; border: 1px dashed var(--line); border-radius: 6px; color: var(--text-dim); font-size: 13px; font-family: inherit; } .tab--new:hover { border-color: var(--accent); color: var(--accent); background: none; } .whoami { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-dim); white-space: nowrap; } .newalbum__back { justify-self: end; } .csv-flash:not(:empty) { padding: 12px 24px 0; } /* ------------------------------------------------------------------- page */ .page { max-width: 1180px; margin: 0 auto; padding: 24px 16px; } .empty { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 64px 16px; color: var(--text-dim); } .empty h2 { color: var(--text); font-size: 20px; } .empty p { max-width: 46ch; margin: 0; } .panel { display: grid; gap: 20px; } .panel__head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } .panel__title h1 { font-size: 22px; } .panel__csv { margin: 4px 0 0; color: var(--text-dim); font-size: 13px; } .stats { display: flex; gap: 8px; margin: 0; } .stats > div { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; text-align: center; min-width: 92px; } .stats dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } .stats dd { margin: 2px 0 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; } .stat--warn { border-color: var(--warn); } .stat--warn dd { color: var(--warn); } .stat--open { border-color: var(--accent-dim); } .stat--open dd { color: var(--accent); } /* --------------------------------------------------------------- controls */ .controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } .control { display: grid; gap: 6px; align-content: start; margin: 0; } .control > label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--text-dim); } .control output { font-family: var(--mono); font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; } .control input[type="range"] { width: 100%; accent-color: var(--accent); } .build { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* --------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--btn-bg); color: var(--text); border-radius: 6px; padding: 8px 14px; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; } .btn:hover:not([disabled]):not([aria-disabled="true"]) { border-color: var(--text-faint); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } /* Filled buttons keep white text in both themes — --text would be dark on blue. */ .btn--primary { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--accent-on); } .btn--primary:hover:not([disabled]) { background: var(--accent); border-color: var(--accent); } .btn--ghost { background: transparent; } .btn--danger { background: transparent; border-color: var(--danger-line); color: var(--danger); } .btn--danger:hover { background: var(--danger-bg); } .btn--stale { opacity: .45; } .spinner { color: var(--text-faint); font-size: 12px; } .htmx-indicator { opacity: 0; transition: opacity .15s; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } /* --------------------------------------------------------------- dropzone */ .dropzone { display: grid; gap: 4px; justify-items: center; padding: 22px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--bg-raised); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; } .dropzone:hover { border-color: var(--text-faint); } .dropzone--hot { border-color: var(--accent); background: var(--accent-hot); } .dropzone--busy { opacity: .6; pointer-events: none; } .dropzone strong { font-weight: 600; } .dropzone span { color: var(--text-dim); font-size: 13px; } .dropzone--wide { width: min(560px, 100%); padding: 40px; } .dropzone progress { width: 60%; margin-top: 8px; accent-color: var(--accent); } .dropzone progress[hidden] { display: none; } /* ----------------------------------------------------------------- flash */ .flash { margin: 0; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-raised); font-size: 13px; } .flash--ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-text); } .flash--warn { border-color: var(--warn); background: var(--warn-bg); color: var(--warn-text); } .flash--error { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger-text); } /* -------------------------------------------------------------- phases */ /* Sub-tabs inside the album panel. A finished phase keeps its tab — it stays readable — but is marked with a padlock and loses its editing controls. */ .phasetabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); } .phasetab { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid transparent; border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 14px; cursor: pointer; margin-bottom: -1px; } .phasetab:hover:not([disabled]) { background: var(--surface-hover); color: var(--text); } .phasetab[disabled] { opacity: .4; cursor: not-allowed; } .phasetab i { font-size: 12px; } .phasetab--on { background: var(--bg-raised); border-color: var(--line); border-bottom: 1px solid var(--bg-raised); color: var(--text); font-weight: 600; } .phasetab__meta { font-size: 11px; font-weight: 400; color: var(--text-faint); font-variant-numeric: tabular-nums; } .phasetab__lock { color: var(--text-faint); font-size: 10px; } .phasetab--done .phasetab__meta { color: var(--ok); } .tabpanel { display: grid; gap: 12px; padding: 16px 0 0; } .tabpanel[hidden] { display: none; } /* A read-only phase says so once, at the top, instead of leaving the user hunting for the buttons that used to be there. */ .hint--locked { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-sunken); max-width: none; } .hint--locked i { margin-top: 3px; color: var(--text-faint); } /* Same shape as hint--locked, but coloured: a warning the submission has to act on, and an outright failure. */ .hint--warn, .hint--error { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 6px; max-width: none; } .hint--warn { border: 1px solid var(--warn-line); background: var(--warn-surface); color: var(--warn-text); } .hint--error { border: 1px solid var(--danger-line); background: var(--danger-bg); color: var(--danger-text); } .hint--warn i, .hint--error i { margin-top: 3px; } .hint--warn code, .hint--error code { font-family: var(--mono); font-size: 12px; } /* ---------------------------------------------------------- submission */ /* The preview of what step A would create, and the trail of what it did. */ .plan, .progress { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-sunken); } .plan h3, .progress h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); } .plan__notes, .plan__blockers { margin: 10px 0 0; padding-left: 18px; font-size: 13px; } .plan__notes { color: var(--text-dim); } .plan__blockers { color: var(--danger-text); } .progress progress { width: 100%; height: 8px; } .progress p { margin: 8px 0 0; font-size: 13px; color: var(--text-dim); } .submission__log summary { cursor: pointer; font-size: 13px; color: var(--text-dim); } .submission__log ol { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 3px; } .submission__log code { font-size: 11.5px; color: var(--text-dim); } /* The metadata pair, shown at the top of the Tracks tab. */ .meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; } .meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); } .meta dd { margin: 2px 0 0; font-size: 13px; font-family: var(--mono); } .control--retention { max-width: 420px; } .phasenext { margin-top: 4px; } .pill--open { background: var(--warn); color: var(--accent-on); } .counter { margin: 0; color: var(--text-dim); font-size: 13px; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------- track checklist */ .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .checkrow { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; background: var(--stem-bg); font-size: 13px; } .checkrow--on { background: var(--ok-bg); } .checkrow__mark { flex: none; color: var(--text-faint); font-size: 13px; } .checkrow--on .checkrow__mark { color: var(--ok); } .checkrow__title { font-weight: 600; } .checkrow__version { color: var(--text-dim); } /* The filename the user has to go looking for — it is the long part of the row, so it takes the slack and truncates rather than wrapping. */ .checkrow__waiting { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--text-faint); } .checkrow--on .track__dur { margin-left: auto; } .stems--flat { max-height: 420px; overflow-y: auto; } /* ------------------------------------------------------------ unallocated */ .unassigned { border: 1px solid var(--accent-dim); border-radius: var(--radius); background: var(--accent-surface); padding: 16px; display: grid; gap: 12px; } .unassigned__head { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; user-select: none; } .unassigned__head::-webkit-details-marker { display: none; } .unassigned h2 { font-size: 15px; display: flex; align-items: center; gap: 8px; } /* Collapsed, only the summary is laid out — drop the grid gap so the box shrinks to the header instead of keeping a 12px skirt. */ .unassigned:not([open]) { gap: 0; } .hint { margin: 0; color: var(--text-dim); font-size: 13px; max-width: 80ch; } .pill { background: var(--accent-dim); color: var(--accent-on); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-variant-numeric: tabular-nums; } .ugroup { border: 1px solid var(--line); border-radius: 6px; background: var(--bg-sunken); overflow: hidden; } .ugroup__head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-raised); border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; } .ugroup__dur { font-family: var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; } .ugroup__count { color: var(--text-dim); font-size: 13px; } .ugroup__head .btn { margin-left: auto; } /* ------------------------------------------------------------- the picker */ /* Opens inside its group, so it is obvious which files it is about. Empty until something is being allocated — no container, no gap. */ .ugroup__picker:not(:empty) { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); background: var(--bg-raised); } .picker { display: grid; gap: 8px; } .picker__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .picker__head strong { font-size: 13px; } .picker__dur { margin-left: 8px; font-family: var(--mono); font-size: 12px; color: var(--accent); } .picker__close { background: none; border: 0; color: var(--text-faint); cursor: pointer; padding: 2px 6px; } .picker__close:hover { color: var(--text); } .picker__search { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 13px; } .picker__search:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .picker__results { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; max-height: 320px; overflow-y: auto; } .picker__empty { margin: 0; color: var(--text-dim); font-size: 13px; } /* One candidate. The whole row is the button, so the target is generous. Fixed columns rather than flex: the numbers are there to be compared down the list, which they cannot be if a badge on one row shifts the next. */ .cand { width: 100%; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 4.5rem 5.6rem 4.6rem 8.6rem; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid transparent; border-radius: 5px; background: var(--stem-bg); color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .cand:hover { background: var(--surface-hover); border-color: var(--accent-dim); } .cand__num { font-family: var(--mono); color: var(--text-faint); } .cand__title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cand__version { color: var(--text-dim); } .cand__dur { font-family: var(--mono); font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; text-align: right; } .cand__delta { font-family: var(--mono); font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; text-align: right; } /* The last column belongs to the warning, and stays empty on a main track so every row lines up whether or not it carries one. */ .cand .badge { justify-self: start; } .cand__delta--fits { color: var(--ok); } .cand__delta--none { color: var(--warn); } /* An edit is a deliberate destination, never an accidental one. */ .cand--version { border-color: var(--warn-line); } .btn--tiny { padding: 3px 8px; font-size: 12px; } .stem__pick { margin-left: auto; } /* ---------------------------------------------------------------- tracks */ .tracks { display: grid; gap: 6px; } .track { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); overflow: hidden; } .track--warn { border-color: var(--warn); background: var(--warn-surface); } .track__head, .version__head { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; list-style: none; user-select: none; } .track__head::-webkit-details-marker, .version__head::-webkit-details-marker { display: none; } .track__head:hover, .version__head:hover { background: var(--surface-hover); } .track__chev { color: var(--text-faint); transition: transform .15s; font-size: 11px; } details[open] > summary > .track__chev { transform: rotate(90deg); } .track__dur { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-dim); min-width: 52px; } .track__title { font-weight: 600; } .version__title { font-weight: 500; color: var(--text); } .track__identity { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; max-width: 22ch; white-space: nowrap; } .track__count { margin-left: auto; font-variant-numeric: tabular-nums; background: var(--chip-bg); color: var(--accent); border-radius: 999px; padding: 1px 10px; font-size: 12px; } .track__count.is-empty { background: var(--chip-muted-bg); color: var(--text-faint); } .track__body, .version__body { padding: 4px 14px 14px; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; } .track__file { margin: 8px 0 0; font-family: var(--mono); font-size: 12px; color: var(--text-faint); word-break: break-all; } .version { border: 1px solid var(--line-soft); border-radius: 6px; background: var(--bg-sunken); } .version--warn { border-color: var(--warn-line); } /* ----------------------------------------------------------------- stems */ .stems { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .stems__empty { color: var(--text-faint); font-size: 13px; padding: 6px 2px; } .stem { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 6px; background: var(--stem-bg); border: 1px solid transparent; } .stem:hover { border-color: var(--line); } .stem--manual { border-left: 2px solid var(--accent-dim); } .stem form { display: contents; } .stem__play { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--btn-bg); color: var(--text); cursor: pointer; font-size: 10px; display: grid; place-items: center; } .stem__play:hover { border-color: var(--accent); color: var(--accent); } .stem__play--on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-on); } .stem__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .stem__dur { font-family: var(--mono); font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .stem__move select { width: auto; min-width: 140px; max-width: 260px; padding: 4px 6px; font-size: 12px; } .stem__x { flex: none; border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 4px; } .stem__x:hover { color: var(--danger); background: var(--danger-bg); } /* ---------------------------------------------------------------- badges */ .badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim); white-space: nowrap; } .badge--warn { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); } .badge--manual { border-color: var(--accent-dim); color: var(--accent); } .badge--ok { border-color: var(--ok-line); color: var(--ok-text); background: var(--ok-bg); } .panel__foot { display: flex; justify-content: flex-end; padding-top: 8px; } /* ---------------------------------------------------------------- player */ .player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--bg-raised); border-top: 1px solid var(--line); box-shadow: var(--shadow); } .player[hidden] { display: none; } .player__toggle { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--accent-dim); color: var(--accent-on); cursor: pointer; font-size: 12px; flex: none; } .player__info { display: grid; min-width: 0; width: min(320px, 32vw); } .player__title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .player__sub { font-size: 11px; color: var(--text-faint); } .player__seek { flex: 1; accent-color: var(--accent); } .player__time { font-family: var(--mono); font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .player__close { border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 14px; } @media (max-width: 720px) { .track__identity, .stem__dur { display: none; } .player__info { width: 40vw; } .ugroup__head .btn { margin-left: 0; width: 100%; } /* The version and the absolute length give up their columns first; the delta and the warning are what the decision actually rests on. */ .cand { grid-template-columns: 2.4rem minmax(0, 1fr) 4.6rem 8.6rem; } .cand__dur, .cand__version { display: none; } }