/* Page layout for the standalone Open Media Player page — just the shell
   bits the tab area, chrome bar, and mini player need (adapted from
   data-kitchen's assets/dk-chrome.css). Component internals style
   themselves; nothing here may overflow its container — panels clip and
   scroll inside. */

html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; overflow: hidden; }

.omp-chrome-bar {
  position: absolute; top: 0; right: 12px; z-index: 20;
  height: 50px;
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: none;
}

.omp-panels { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; }
.omp-panels sol-tabs { flex: 1 1 auto; min-width: 0; }

.omp-panels ia-player { display: block; width: 100%; }
/* Higher specificity than ia.css's `ia-player { height: 100vh }` — the
   panel must fill the flex area below the tab bar, not a whole viewport. */
.omp-panels ia-player { height: 100%; min-height: 0; overflow: hidden; }
ia-player[hidden] { display: none; }
.omp-panels omp-images { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
omp-images[hidden] { display: none; }

.chrome-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 6px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; cursor: pointer; font-size: 16px;
}

.omp-mini {
  display: flex; align-items: center; gap: 9px;
  flex: 0 0 auto; min-width: 0;
}
.omp-mini[hidden] { display: none; }
.omp-mini-seek {
  flex: 0 0 110px; width: 110px; min-width: 60px; height: 4px; cursor: pointer;
  accent-color: var(--tab-music, var(--ia-accent, #f0a23a));
}
/* Tabular figures so the elapsed/total readout doesn't jitter as it ticks. */
.omp-mini-time {
  color: var(--ia-text-muted, #9aa);
  font-size: 16px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}