/* D3 uses the existing workbench design tokens in both skins/themes. */
.demo-d3-quality {
  display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  gap:4px 6px; max-width:100%; box-sizing:border-box; margin:4px 0; padding:4px 6px;
  color:var(--text); background:var(--surface-solid); border:2px solid var(--ink);
  border-radius:var(--r-ctl); box-shadow:2px 2px 0 var(--ink);
  font:12px/1.3 var(--display); text-transform:uppercase; cursor:default;
}
.demo-d3-quality select {
  min-width:0; max-width:100%; min-height:30px; margin:0; padding:3px 5px;
  color:var(--text); background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:var(--r-ctl); font:inherit; cursor:pointer;
}
.demo-d3-quality select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.demo-d3-quality select:disabled { cursor:default; color:var(--muted); }
.demo-d3-quality small { flex-basis:100%; text-align:end; color:var(--muted); font:11px/1.2 var(--mono); }
.demo-d3-quality [hidden], .demo-d3-toast[hidden] { display:none; }
.demo-d3-host { position:relative; }
.demo-d3-overlay {
  position:absolute; inset-block-start:6px; inset-inline-end:6px; z-index:6;
  max-width:calc(100% - 12px); margin:0;
}
/* The film page swaps two videos in-place. Only its front player's control is shown. */
.stage > video.v:not(.on) + .demo-d3-quality { display:none; }
:root[data-style="classic"] .demo-d3-quality {
  border:1px solid var(--line-strong);
  box-shadow:0 2px 6px color-mix(in srgb, var(--ink) 12%, transparent);
}
.demo-d3-toast {
  position:fixed; inset-block-end:24px; inset-inline:12px; margin-inline:auto;
  width:max-content; max-width:calc(100% - 24px); padding:10px 14px; z-index:10000;
  color:var(--ink-text); background:var(--ink); border-radius:var(--r-ctl); font-size:14px;
}
@media (max-width:640px) {
  .demo-d3-quality { font-size:11px; gap:3px; padding:3px 4px; }
  .demo-d3-quality select { min-height:32px; }
  .demo-d3-overlay { inset-block-start:4px; inset-inline-end:4px; max-width:calc(100% - 8px); }
}