/* Scoped viewer controls work independently in VP and Rescue Me. */
.storyboard-enlarge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 10px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
}
.storyboard-enlarge[hidden] { display: none; }
.storyboard-dialog {
  box-sizing: border-box;
  width: min(1600px, calc(100vw - 24px));
  max-width: none;
  height: min(1000px, calc(100dvh - 24px));
  max-height: none;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
}
.storyboard-dialog[open] { display: flex; flex-direction: column; gap: 10px; }
.storyboard-dialog::backdrop { background: rgb(0 0 0 / .8); }
.storyboard-toolbar, .storyboard-zoom-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.storyboard-dialog .storyboard-toolbar h2 { flex: 1 1 180px; min-width: 0; margin: 0; font-size: 18px; line-height: 1.25; }
.storyboard-dialog button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.storyboard-dialog button:disabled { opacity: .5; cursor: default; }
.storyboard-zoom-controls output { min-width: 4ch; text-align: center; }
.storyboard-dialog .storyboard-help { margin: 0; color: var(--muted); font-size: 14px; }
.storyboard-viewport { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); background: #fff; }
.storyboard-dialog .storyboard-viewport img { display: block; width: auto; max-width: none; height: auto; max-height: none; margin: 0; }
@media (max-width: 480px) {
  .storyboard-dialog { padding: 10px; }
  .storyboard-dialog .storyboard-toolbar h2 { font-size: 16px; }
}