/* The control bar, out of the way of the thing it controls.
 *
 * Every chart here had five items floating over the poster in a slab: a help
 * button, two or three selects, a download button and a resolution picker.
 * On a laptop it sat on the footer; on a phone it took a third of the screen
 * and wrapped onto three rows. The content is the point and the chrome was
 * competing with it.
 *
 * So: the controls that change what you are looking at stay visible and quiet,
 * and the ones you use once - help, download, resolution - go behind a single
 * dot menu. The bar is a hairline pill that recedes until you touch it.
 */
.ctrl {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 100; display: flex; align-items: center; gap: 2px;
  max-width: calc(100vw - 20px);
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  border: 1px solid var(--btn-border);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(40, 34, 24, 0.10);
  opacity: 0.72;
  transition: opacity 0.18s;
}
.ctrl:hover, .ctrl:focus-within { opacity: 1; }

.ctrl select,
.ctrl button {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; border-radius: 999px;
  color: var(--ink); font: inherit; font-size: 13px; letter-spacing: 0.2px;
  padding: 7px 14px; cursor: pointer; min-width: 0;
  max-width: 42vw; text-overflow: ellipsis; white-space: nowrap;
  transition: background 0.14s, color 0.14s;
}
.ctrl select { padding-right: 26px; background-position: right 10px center; }
.ctrl select:hover, .ctrl button:hover,
.ctrl select:focus-visible, .ctrl button:focus-visible {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-bright);
}
.ctrl button[disabled] { opacity: 0.45; cursor: wait; }
.ctrl .sep { display: none; }

/* The dot menu, and the sheet it opens. */
.ctrl__more {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted);
}
.ctrl__more::after { content: '···'; font-size: 17px; letter-spacing: 1px; line-height: 1; }
.ctrl__more[aria-expanded='true'] { background: color-mix(in srgb, var(--ink) 10%, transparent); }

.ctrl__panel {
  position: absolute; right: 0; bottom: calc(100% + 8px);
  min-width: 208px; padding: 6px;
  display: none; flex-direction: column; gap: 2px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 6px 26px rgba(40, 34, 24, 0.16);
}
.ctrl__panel[data-open='true'] { display: flex; }
.ctrl__panel button,
.ctrl__panel select {
  width: 100%; max-width: none; text-align: left; border-radius: 8px;
  padding: 9px 12px;
}
.ctrl__row {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 12px 6px; color: var(--ink-muted); font-size: 11px;
  letter-spacing: 0.6px; text-transform: uppercase;
}

@media (max-width: 900px) {
  .ctrl { bottom: 10px; gap: 0; opacity: 1; }
  .ctrl select, .ctrl button { font-size: 13px; padding: 10px 12px; min-height: 44px; }
  .ctrl__more { width: 44px; height: 44px; }
  .ctrl__panel { right: auto; left: 50%; transform: translateX(-50%); min-width: min(280px, 88vw); }
}