/* Layout: header bar · [viewer + readout | inspector]; stacks to one column on phones.
   Deliberately a single neutral-dark theme: a colour-grading tool must not tint
   the viewer's perception, so greys are true neutrals and the only hue is the
   red that water takes away first. */
:root {
  --ground: #141515;
  --panel: #1c1d1e;
  --raise: #27282a;
  --line: #36383b;
  --ink: #ecebe8;
  --muted: #9a9b9e;
  --red: #ff5d4f;
  --red-ink: #1d0907;
  --good: #73cf92;
  --warn: #f0b443;
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", "Segoe UI", Roboto, system-ui, sans-serif;
  --r: 6px;
  color-scheme: dark;
}

[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 14px/1.45 var(--font-body);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--ground); }

button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

h2 {
  font: 600 13px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ---------------------------------------------------------------- bar */
.bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-block: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.mark { width: 32px; height: 32px; align-self: center; flex: none; display: block; }
.name { font: 600 24px/1 var(--font-display); letter-spacing: 0.02em; }
.sub { color: var(--muted); font-size: 13px; }
.file { flex: 1 1 160px; min-width: 0; display: flex; gap: 10px; align-items: baseline; justify-content: flex-end; }
.file-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.actions { display: flex; gap: 8px; margin-left: auto; }
.icon-btn svg { flex: none; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--raise);
  font-weight: 500; white-space: nowrap;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--red); border-color: var(--red); color: var(--red-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.link { background: none; border: 0; padding: 4px 2px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--ink); }

/* ---------------------------------------------------------------- app */
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  min-height: 0;
}
.viewer { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); }
.toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px max(16px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--line);
}
.hint { color: var(--muted); font-size: 12px; }
kbd { font: 600 11px var(--font-body); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.seg button { background: transparent; border: 0; padding: 5px 12px; cursor: pointer; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--raise); color: var(--ink); }

.preview-pane { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.stage-wrap {
  position: relative; flex: 1 1 auto; min-height: 280px;
  display: grid; place-items: center; overflow: hidden;
  background:
    repeating-conic-gradient(var(--panel) 0 25%, var(--ground) 0 50%) 0 0 / 24px 24px;
}
.stage { position: relative; touch-action: none; user-select: none; box-shadow: 0 0 0 1px var(--line); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage.view-after #beforeCanvas, .stage.view-before #afterCanvas { visibility: hidden; }
.stage.view-split { cursor: ew-resize; }
.handle { position: absolute; top: 0; bottom: 0; width: 0; left: 50%; pointer-events: none; }
.handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--ink); opacity: 0.85; }
.handle span {
  position: absolute; top: 50%; left: -14px; width: 28px; height: 28px; margin-top: -14px;
  border-radius: 50%; background: var(--ink); box-shadow: 0 1px 6px rgb(0 0 0 / 0.5);
}
.handle span::before, .handle span::after {
  content: ""; position: absolute; top: 9px; border: 5px solid transparent;
}
.handle span::before { left: 2px; border-right-color: var(--ground); }
.handle span::after { right: 2px; border-left-color: var(--ground); }
.stage:not(.view-split) .handle { display: none; }
.corner {
  position: absolute; top: 10px; padding: 2px 8px; border-radius: 3px;
  background: rgb(0 0 0 / 0.55); color: #fff;
  font: 600 12px/1.5 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase;
  pointer-events: none;
}
.corner-l { left: 10px; }
.corner-r { right: 10px; }
.stage.view-after .corner-l, .stage.view-before .corner-r { display: none; }
.stage.view-before .corner-l { left: 10px; }

.drop, .busy {
  position: absolute; inset: 12px; display: grid; place-items: center;
  border-radius: 10px; z-index: 3;
}
.drop { border: 2px dashed var(--red); background: rgb(20 21 21 / 0.86); font: 600 28px var(--font-display); text-align: center; }
.drop small { display: block; font: 400 13px var(--font-body); color: var(--muted); margin-top: 6px; }
.busy { background: rgb(20 21 21 / 0.6); }
.busy-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; display: grid; gap: 10px; min-width: min(280px, 80vw); }
.meter { height: 6px; border-radius: 3px; background: var(--raise); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0%; background: var(--red); transition: width 0.15s; }

/* ---------------------------------------------------------------- transport */
.transport {
  display: flex; align-items: center; gap: 8px;
  padding: 8px max(16px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--line);
}
.transport input[type=range] { flex: 1; min-width: 60px; }
.icon { width: 34px; height: 30px; border-radius: var(--r); border: 1px solid var(--line); background: var(--raise); cursor: pointer; }
.icon.small { width: 26px; }
.time { font: 500 15px var(--font-display); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.chip { white-space: nowrap; border: 1px solid var(--line); background: transparent; border-radius: 99px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--muted); }
.chip[aria-pressed="false"] { color: var(--ink); border-color: var(--muted); }

/* ---------------------------------------------------------------- readout */
.readout {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: 140px minmax(0, 1.2fr) minmax(0, 1fr);
  padding-block: 12px 14px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.readout figure { margin: 0; min-width: 0; }
.readout canvas { width: 100%; height: auto; display: block; }
.cast canvas { max-width: 140px; aspect-ratio: 1; }
figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }
.legend { display: block; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin: 0 3px 0 6px; }
.dot.hollow { background: transparent; border: 1.5px solid var(--ink); margin-left: 0; }
.metrics { min-width: 0; display: grid; gap: 8px; }
.verdict { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill { font: 600 12px/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 8px; border-radius: 99px; background: var(--raise); }
.pill.good { background: var(--good); color: #0b1a10; }
.pill.warn { background: var(--warn); color: #241904; }
.pill.bad { background: var(--red); color: var(--red-ink); }
.vtext { color: var(--muted); font-size: 12px; }
.metrics table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.metrics th { text-align: right; font: 600 11px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0 0 4px; }
.metrics th:first-child, .metrics td:first-child { text-align: left; }
.metrics td { text-align: right; padding: 3px 0; border-top: 1px solid var(--line); }
.metrics td:first-child { color: var(--muted); }
.metrics td.up { color: var(--good); }
.metrics td.down { color: var(--warn); }
.metrics td abbr { text-decoration: none; cursor: help; border-bottom: 1px dotted var(--muted); }

/* ---------------------------------------------------------------- inspector */
.inspector { overflow-y: auto; min-height: 0; background: var(--panel); }
.panel {
  padding-block: 14px;
  padding-left: 16px;
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--line);
  display: grid; gap: 10px;
}
.presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.preset {
  text-align: left; cursor: pointer; padding: 7px 10px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--raise); display: grid; gap: 1px;
}
.preset b { font: 600 16px/1.1 var(--font-display); letter-spacing: 0.02em; }
.preset small { color: var(--muted); font-size: 11.5px; }
.preset[aria-pressed="true"] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.preset.modified[aria-pressed="true"] b::after { content: " · edited"; color: var(--muted); font: 400 12px var(--font-body); }

.absorb { display: grid; gap: 4px; }
.absorb-bar { display: grid; gap: 3px; }
.absorb-bar i { display: block; height: 3px; width: var(--l); background: var(--c); border-radius: 2px; }
.absorb-scale { display: flex; justify-content: space-between; font: 500 12px var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.absorb-scale span:nth-child(2) { margin-left: 4%; }
.absorb-scale span:nth-child(3) { margin-left: 4%; }
.absorb p { margin: 0; font-size: 12px; color: var(--muted); }

.auto-grid { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.auto-grid div { display: grid; gap: 2px; }
.auto-grid dt { font-size: 11.5px; color: var(--muted); }
.auto-grid dd { margin: 0; font: 600 18px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); cursor: pointer; }
.check input { margin-top: 2px; accent-color: var(--red); }

.group { padding-block: 12px 14px; padding-left: 16px; padding-right: max(16px, env(safe-area-inset-right, 0px)); border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.slider { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.slider label { font-size: 13px; }
.slider output { font: 500 15px var(--font-display); font-variant-numeric: tabular-nums; color: var(--muted); min-width: 4ch; text-align: right; }
.slider output.changed { color: var(--ink); }
.slider input { grid-column: 1 / -1; width: 100%; accent-color: var(--red); margin: 0; height: 18px; }
.slider .tip { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); margin-top: -2px; }
.foot { border-bottom: 0; justify-items: start; }
.sub-h { margin-top: 4px; }
.btn.small { padding: 5px 10px; font-size: 12.5px; }

/* ---------------------------------------------------------------- batch queue */
.app.has-queue { grid-template-columns: 264px minmax(0, 1fr) 340px; }
.queue {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border-right: 1px solid var(--line);
}
.q-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-block: 12px 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: 12px;
}
.q-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.q-list { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; flex: 1 1 auto; display: grid; gap: 4px; align-content: start; }
.q-item { position: relative; }
.q-main {
  width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 10px;
  text-align: left; cursor: pointer; padding: 6px 30px 8px 6px;
  border: 1px solid transparent; border-radius: var(--r); background: transparent; position: relative; overflow: hidden;
}
.q-main:hover { background: var(--raise); }
.q-item[aria-current="true"] .q-main { background: var(--raise); border-color: var(--muted); }
.q-thumb {
  grid-row: span 3; width: 56px; height: 42px; border-radius: 4px; object-fit: cover; background: var(--ground);
  align-self: center;
}
.q-name { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-meta { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-line { display: flex; gap: 6px; align-items: center; min-width: 0; }
.q-chip {
  font: 600 11px/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.q-chip.custom { border-color: var(--red); color: var(--ink); }
.q-state { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-item[data-status="done"] .q-state { color: var(--good); }
.q-item[data-status="error"] .q-state { color: var(--red); }
.q-item[data-status="stale"] .q-state { color: var(--warn); }
.q-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p, 0%); background: var(--red); transition: width 0.2s; }
.q-item[data-status="done"] .q-bar { background: var(--good); width: 100%; }
.q-x, .q-dl {
  position: absolute; right: 4px; width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1;
}
.q-x { top: 4px; }
.q-dl { bottom: 6px; }
.q-x:hover, .q-dl:hover { background: var(--ground); color: var(--ink); }
.q-foot {
  border-top: 1px solid var(--line); display: grid; gap: 8px;
  padding-block: 12px calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: 12px;
}
.q-buttons { display: grid; grid-template-columns: 1fr; gap: 6px; }
.q-buttons .btn { justify-content: center; }
.q-status { margin: 0; font-size: 12px; color: var(--muted); }
.field.small { font-size: 12px; gap: 4px; }
.field.small select { padding: 6px; }
.this-file { gap: 8px; }
.tf-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tf-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.speed-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px; }
.speed-table th { text-align: left; font: 600 11px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0 0 4px; }
.speed-table td { padding: 6px 0; border-top: 1px solid var(--line); }
.speed-table td + td, .speed-table th + th { text-align: right; }
.speed-table small { display: block; color: var(--muted); font-size: 11.5px; }

/* ---------------------------------------------------------------- sheet & toast */
.sheet-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.6); display: grid; place-items: center; z-index: 20; padding: 16px; }
.sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px; width: min(440px, 100%); display: grid; gap: 14px; }
.sheet h2 { font-size: 20px; color: var(--ink); letter-spacing: 0.02em; text-transform: none; }
.field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.field select { background: var(--raise); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; }
.note { margin: 0; font-size: 12.5px; color: var(--muted); }
.progress { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.err { margin: 0; color: var(--red); font-size: 13px; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--raise); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 14px; z-index: 30; max-width: calc(100% - 32px); font-size: 13px;
  white-space: pre-line; overflow-wrap: anywhere; user-select: text;
}

/* ---------------------------------------------------------------- narrow */
@media (max-width: 900px) {
  body { display: block; height: auto; }
  .app, .app.has-queue { grid-template-columns: minmax(0, 1fr); }
  .queue { border-right: 0; border-bottom: 1px solid var(--line); }
  .q-list { max-height: 38vh; }
  /* The preview pins to the top while the settings scroll under it, so every
     slider move is visible. .viewer is flattened so the pinned pane's
     containing block is the whole page, not just the viewer column. */
  .viewer { display: contents; }
  .preview-pane {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6;
    background: var(--ground); border-bottom: 1px solid var(--line);
    transition: box-shadow 0.15s;
  }
  .preview-pane.stuck { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); }
  .stage-wrap { min-height: 0; height: 40vh; }
  .transport { padding-block: 6px; gap: 6px; }
  .transport .time { font-size: 11.5px; }
  .readout { grid-template-columns: 110px minmax(0, 1fr); }
  .readout .metrics { grid-column: 1 / -1; }
  /* compact header: logo and name on the left, icon buttons on the right */
  .bar { flex-wrap: nowrap; gap: 8px; padding-block: 8px; }
  .name { font-size: 21px; }
  .mark { width: 28px; height: 28px; }
  .btn-label { display: none; }
  .icon-btn, .help-btn { padding: 8px 10px; }
  #exportBtn { padding: 8px 12px; }
  /* the preview spans the whole width, compare buttons right on top of it */
  .toolbar { padding: 6px 8px; gap: 8px; flex-wrap: nowrap; border-bottom: 0; }
  .seg button { padding: 5px 10px; }
  .file { flex: 1 1 0; }
  .file-name { font-size: 13px; }
  .stage-wrap { background: var(--ground); }
  .stage { box-shadow: none; }
  /* touch-sized controls: remove/download in the batch list, Advanced toggle */
  .q-main { padding-right: 52px; }
  .q-x, .q-dl { width: 44px; height: 44px; font-size: 24px; right: 2px; background: var(--raise); }
  .q-x { top: 2px; }
  .q-dl { bottom: 2px; font-size: 20px; }

  .inspector { overflow: visible; }
  .sub, .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .meter i { transition: none; } }

/* ---------------------------------------------------------------- debug log */
.version { font-size: 11.5px; color: var(--muted); }
.version a { color: var(--muted); }
.debug {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 45vh; display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--panel); border-top: 2px solid var(--red);
  padding-block: 8px calc(8px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.debug-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.debug-head b { margin-right: auto; }
.debug pre { margin: 0; overflow: auto; font: 11.5px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }

/* ---------------------------------------------------------------- tour */
.help-btn { gap: 6px; }
.help-btn > span:first-child {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid currentColor; font-weight: 600; font-size: 12px; line-height: 1;
}
.help-btn.nudge { border-color: var(--red); color: var(--red); }
.tour { position: fixed; inset: 0; z-index: 50; }
.tour-block { position: absolute; inset: 0; }
.tour-spot {
  position: fixed; border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--red), 0 0 0 9999px rgba(0, 0, 0, 0.62);
  transition: left 0.2s, top 0.2s, width 0.2s, height 0.2s;
}
.tour.centred .tour-spot { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62); }
.tour-card {
  position: fixed; width: min(360px, calc(100vw - 24px)); box-sizing: border-box;
  background: var(--raise); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 16px 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  transition: left 0.2s, top 0.2s;
}
.tour-count { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tour-card h3 { font: 600 20px/1.15 var(--font-display); letter-spacing: 0.02em; margin: 0 0 6px; }
.tour-card p { margin: 0 0 14px; color: var(--ink); font-size: 14px; }
.tour-card b { font-weight: 600; }
.tour-nav { display: flex; gap: 8px; align-items: center; }
.tour-gap { flex: 1; }
@media (max-width: 900px) { .help-label { display: none; } .help-btn { padding-inline: 10px; } }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card { transition: none; } }

/* ---------------------------------------------------------------- read failure */
.stage-msg {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  padding: 16px; text-align: center; background: rgba(20, 21, 21, 0.82); z-index: 3;
}
.stage-msg p { margin: 0; max-width: 38ch; }
.stage-msg-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.q-thumb-empty { display: grid; place-items: center; background: var(--raise); color: var(--muted); font-size: 20px; }

/* ---------------------------------------------------------------- advanced */
.advanced { border-top: 1px solid var(--line); }
.advanced > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px;
  padding: 10px max(16px, env(safe-area-inset-left, 0px));
  font: 600 13px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before { content: "▸"; font-size: 11px; transition: transform 0.15s; }
.advanced[open] > summary::before { transform: rotate(90deg); }
.advanced > summary span { font: 400 12px var(--font-body); letter-spacing: 0; text-transform: none; }
.advanced > summary:hover { color: var(--ink); }
@media (max-width: 900px) {
  .advanced > summary span { display: none; }
  .advanced > summary { padding-block: 15px; font-size: 15px; gap: 12px; min-height: 48px; box-sizing: border-box; align-items: center; }
  .advanced > summary::before { font-size: 20px; width: 22px; text-align: center; }
}

/* sound toggle in the video transport */
.icon.mute { display: inline-grid; place-items: center; color: var(--muted); }
.icon.mute[aria-pressed="false"] { color: var(--ink); }