/* Top bar: page chrome above the picture (main.js fit keeps the film under
   it), two rows. The nav row is global: the views as tabs on the left
   (player/views.js), the film's name and song title quietly centred on the
   page (over the film; main.js drops the title, then all of it, before it
   meets either side), on the right Copy link (the film at the playhead)
   and, on the dev server only, the take edits' status
   (player/takes-adapter.js enableEdit). The tools row is the view's own,
   one airy band, the same in every view: groups side by side, each a small
   label above its control, selectors on the left, actions on the right
   (on the controls' line): the player's version and format
   (player/switcher.js, safe zones with a vertical frame), the scenes
   grid's (player/scenes-grid.js) or the Share tab's (player/share.js).
   Fullscreen viewer: over the film, fading out with the viewer bar. */
:root {
  --tb-nav: 40px; --tb-pad: 12px; --tb-ctl: 32px; --tb-lab: 11px; --tb-lab-gap: 6px;
  --tb-tools: calc(var(--tb-lab) + var(--tb-lab-gap) + var(--tb-ctl) + 2 * var(--tb-pad) + 1px);
  --tb-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m2 5.2 2 2L8 3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#topbar { position: absolute; z-index: 4; left: 0; right: 0; top: 0; display: flex; flex-direction: column; color: #ddd; font-size: 11px; user-select: none; transition: opacity 0.35s, transform 0.35s; }
body.render #topbar { display: none; }
body.idle #topbar { opacity: 0; transform: translateY(-8px); pointer-events: none; }
/* Fullscreen (the page's, or the browser's): no bars at all, the film fills the screen. */
body.fs #topbar { display: none; }
@media (display-mode: fullscreen) { #topbar { display: none; } }

/* Both rows: one ground, one line under each. */
.tb-nav, .tb-tools { box-sizing: border-box; background: var(--ui-bar); border-bottom: 1px solid var(--ui-line); }
.tb-nav { position: relative; height: var(--tb-nav); display: flex; align-items: center; gap: 16px; padding: 0 20px; }
.tb-tools { height: var(--tb-tools); display: flex; align-items: flex-end; gap: 28px; padding: var(--tb-pad) 20px; }
body.view-open #switch { display: none; }

/* Left: the tabs. */
.tb-start { flex: none; align-self: stretch; display: flex; align-items: center; margin-left: -8px; }

/* The views: tabs, the current one bright and underlined on the row's
   edge, in the chrome's light grey (--ui-accent; the yellow is the film's). No ring on focus: the keyboard's (focus-visible) brightens
   the label and shows a faint underline. */
#views { align-self: stretch; display: flex; gap: 2px; }
#views button { position: relative; height: 100%; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12px; letter-spacing: 0.03em; white-space: nowrap; color: #8a8a8e; background: none; border: 0; cursor: pointer; transition: color 0.12s; }
#views button::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--ui-accent); transform: scaleX(0); transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.12s; }
#views button:hover { color: #ddd; }
#views button:focus { outline: none; }
#views button[aria-pressed='true'] { color: var(--ui-accent-strong); font-weight: 700; cursor: default; }
#views button[aria-pressed='true']::after { transform: none; }
#views button:focus-visible { color: #fff; }
#views button:focus-visible:not([aria-pressed='true'])::after { background: #ffffff59; transform: none; }
#views svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#views [data-view=''] svg { fill: currentColor; stroke: none; }

/* Centre: the film's name and the song's title, on the page's axis, quiet. main.js:
   .short drops the title, .off all of it, before it meets either side. */
.tb-id { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 9px; white-space: nowrap; pointer-events: none; }
.tb-id b { font: 400 13px / 1 Anton, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: #bdb9b0; }
.tb-title { font: 300 12px / 1 'DM Sans Variable', sans-serif; letter-spacing: 0.04em; color: #5e5e63; }
.tb-id.short .tb-title { display: none; }
.tb-id.off { visibility: hidden; }

.tb-end { flex: none; margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* A bar's button: ghost; primary in the chrome's light grey (the one action of its bar). */
.tb-btn { flex: none; height: var(--tb-ctl); padding: 0 12px 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 11.5px; white-space: nowrap; color: #ddd; text-decoration: none; background: #161616; border: 1px solid #333; border-radius: 6px; cursor: pointer; transition: color 0.12s, border-color 0.12s, background-color 0.12s; }
.tb-btn svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tb-btn small { font-size: 10px; font-variant-numeric: tabular-nums; color: #7a7a7e; }
.tb-btn:hover:not(:disabled, [aria-disabled='true']) { color: #fff; border-color: #555; }
.tb-btn.primary { color: var(--ui-ink); font-weight: 700; background: var(--ui-accent); border-color: var(--ui-accent); }
.tb-btn.primary small { color: #11111199; font-weight: 400; }
.tb-btn.primary:hover:not(:disabled, [aria-disabled='true']) { color: var(--ui-ink); background: var(--ui-accent-strong); border-color: var(--ui-accent-strong); }
.tb-btn:disabled, .tb-btn[aria-disabled='true'] { cursor: progress; opacity: 0.55; }
.tb-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* Take edits' status (dev server only): one dashed chip, its menu says
   what to do; the dot turns orange while edits are uncommitted. */
#devstatus { height: 26px; padding: 0 10px 0 8px; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 10.5px; letter-spacing: 0.04em; white-space: nowrap; color: #9a9a9a; background: none; border: 1px dashed #3c3c40; border-radius: 13px; cursor: pointer; transition: color 0.12s, border-color 0.12s; }
#devstatus[hidden] { display: none; }
#devstatus:hover { color: #ddd; border-color: #5a5a5e; }
#devstatus:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
#devstatus .ds-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #6c6c70; }
#devstatus.warn { color: var(--ui-accent-strong); border-color: #ff9a5266; }
#devstatus.warn .ds-dot { background: #ff9a52; }
#devstatus .ds-tag { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #6c6c70; }

/* The tools rows' groups: a small label above a segmented control (one
   choice, lit) or toggles (on / off, outlined in light grey with a check). */
#switch { display: flex; align-items: flex-end; gap: 28px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#switch::-webkit-scrollbar { display: none; }
.sw-group { flex: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--tb-lab-gap); }
.sw-lab { height: var(--tb-lab); font-size: 9.5px; line-height: var(--tb-lab); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: #6c6c70; }
.sw-seg { display: inline-flex; border: 1px solid #333; border-radius: 6px; overflow: hidden; }
.sw-seg button, .sw-toggle { height: calc(var(--tb-ctl) - 2px); padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 11.5px; white-space: nowrap; color: #9a9a9a; background: #161616; border: 0; cursor: pointer; transition: color 0.12s, background-color 0.12s, border-color 0.12s; }
.sw-seg button + button { border-left: 1px solid #333; }
.sw-seg button:hover { color: #fff; background: #242424; }
.sw-seg small { font-size: 10px; font-variant-numeric: tabular-nums; color: #6c6c70; }
.sw-seg button:is([aria-pressed='true'], [aria-current='true']) { color: var(--ui-ink); background: var(--ui-accent); font-weight: 700; }
.sw-seg button[aria-pressed='true'] { cursor: default; }
.sw-seg button:is([aria-pressed='true'], [aria-current='true']) small { color: #11111199; font-weight: 400; }
/* No ring on focus; the keyboard's lights the segment's text and ground. */
.sw-seg button:focus { outline: none; }
.sw-seg button:focus-visible:not([aria-pressed='true'], [aria-current='true']) { color: #fff; background: #2a2a2d; }
/* A format's shape, as the scenes grid draws it. */
.sw-ratio { flex: none; width: 14px; height: 9px; border: 1.3px solid currentColor; border-radius: 2px; opacity: 0.8; }
.sw-ratio.tall { width: 8px; height: 13px; }
/* Narrow screens' dropdown of the same choices. */
.sw-select { display: none; height: var(--tb-ctl); max-width: 46vw; padding: 0 22px 0 10px; font: inherit; font-size: 11.5px; color: var(--ui-accent-strong); background: #161616 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 3 4 5.5 6.5 3' fill='none' stroke='%239a9a9a' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 7px center / 8px; border: 1px solid #333; border-radius: 6px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sw-select:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
/* An on / off option of the format (safe zones). */
.sw-toggle { flex: none; height: var(--tb-ctl); margin-left: -16px; border: 1px solid #333; border-radius: 6px; }
.sw-toggle:hover { color: #fff; border-color: #555; }
.sw-toggle[aria-pressed='true'] { color: var(--ui-accent-strong); border-color: var(--ui-accent); }
.sw-toggle[aria-pressed='true']::before { content: ''; flex: none; width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--tb-check) center / contain no-repeat; mask: var(--tb-check) center / contain no-repeat; }
.sw-toggle:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* The nav row's buttons sit lower than the tools rows'. */
.tb-nav .tb-btn { height: 28px; }
/* Copy link: the time it links to, aside; its icon only when tight. */
@media (max-width: 1100px) {
  #copylink .lbl { display: none; }
}
@media (max-width: 760px) {
  #devstatus { width: 26px; padding: 0; justify-content: center; }
  #devstatus > :not(.ds-dot) { display: none; }
}
/* Phones: dropdowns for the version and format, under their labels. */
@media (max-width: 640px) {
  :root { --tb-nav: 44px; --tb-pad: 9px; }
  .tb-nav { gap: 8px; padding: 0 12px; }
  .tb-tools { gap: 12px; padding: var(--tb-pad) 12px; }
  .tb-start { margin-left: -6px; }
  /* The current tab named, the others as icons (their labels say them). */
  #views button { padding: 0 9px; gap: 6px; }
  #views button[aria-pressed='false'] .vw-lab { display: none; }
  .tb-end { gap: 8px; }
  #copylink { width: 32px; padding: 0; }
  #copylink small { display: none; }
  #switch { gap: 10px; overflow: visible; }
  #switch .sw-seg { display: none; }
  .sw-select { display: inline-block; }
  .sw-toggle { margin-left: -4px; padding: 0 9px; }
  /* The dropdowns shrink (ellipsis) before the row overflows. */
  #switch .sw-group { flex: 0 1 auto; min-width: 0; }
  .sw-select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
}