/* storyboard-editor.css -- Sizzle Storyboard Studio, Phase P3 (Builder E).
 * Self-contained styling for storyboard-editor.js. Every selector is prefixed .sb- and every colour, radius, shadow and
 * font comes from the dashboard's design tokens with a sensible fallback, so the module also renders on its own.
 */

.sb-root {
  --sb-bg: var(--bg-card, rgba(255, 255, 255, 0.92));
  --sb-bg-solid: var(--bg-surface-elevated, #ffffff);
  --sb-bg-alt: var(--bg-subtle, #f0ece4);
  --sb-text: var(--text-primary, #181f2c);
  --sb-text-2: var(--text-secondary, #4b5565);
  --sb-muted: var(--text-muted, #717d96);
  --sb-accent: var(--teal-primary, #0e7c7b);
  --sb-accent-hover: var(--teal-hover, #149b99);
  --sb-accent-soft: var(--teal-light, rgba(14, 124, 123, 0.08));
  --sb-accent-border: var(--teal-border, rgba(14, 124, 123, 0.28));
  --sb-border: var(--border-card, rgba(0, 0, 0, 0.1));
  --sb-focus: var(--border-focus, rgba(14, 124, 123, 0.7));
  --sb-radius: var(--radius-md, 12px);
  --sb-radius-sm: var(--radius-sm, 8px);
  --sb-radius-pill: var(--radius-full, 9999px);
  --sb-shadow: var(--shadow-md, 0 4px 14px rgba(0, 0, 0, 0.06));
  --sb-shadow-lg: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.08));
  --sb-font: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --sb-font-display: var(--font-display, Georgia, serif);
  --sb-green: var(--status-green, #059669);
  --sb-green-bg: var(--status-green-bg, rgba(16, 185, 129, 0.12));
  --sb-green-border: var(--status-green-border, rgba(16, 185, 129, 0.3));
  --sb-amber: var(--status-amber, #b45309);
  --sb-amber-bg: var(--status-amber-bg, rgba(245, 158, 11, 0.12));
  --sb-amber-border: var(--status-amber-border, rgba(245, 158, 11, 0.32));
  --sb-red: var(--status-red, #dc2626);
  --sb-red-bg: var(--status-red-bg, rgba(239, 68, 68, 0.1));
  --sb-red-border: var(--status-red-border, rgba(239, 68, 68, 0.3));
  --sb-blue: var(--status-blue, #2563eb);
  --sb-blue-bg: var(--status-blue-bg, rgba(37, 99, 235, 0.1));
  --sb-blue-border: var(--status-blue-border, rgba(37, 99, 235, 0.3));

  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 4px 0 32px;
  color: var(--sb-text);
  font-family: var(--sb-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sb-root *,
.sb-root *::before,
.sb-root *::after { box-sizing: border-box; }

.sb-root [hidden] { display: none !important; }

.sb-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- type ---------- */
.sb-root .sb-h2 {
  margin: 0;
  font-family: var(--sb-font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sb-text);
}
.sb-root .sb-h2:focus { outline: none; }
.sb-root .sb-sub { margin: 4px 0 0; color: var(--sb-muted); font-size: 0.9rem; }
.sb-root .sb-eyebrow {
  margin: 0 0 2px;
  color: var(--sb-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sb-root .sb-note { margin: 6px 0 0; color: var(--sb-text-2); font-size: 0.92rem; }
.sb-root .sb-hint { margin: 4px 0 0; color: var(--sb-muted); font-size: 0.8rem; }
.sb-root .sb-empty {
  margin: 20px 0;
  padding: 28px 20px;
  border: 1px dashed var(--sb-border);
  border-radius: var(--sb-radius);
  background: var(--sb-bg);
  color: var(--sb-text-2);
  text-align: center;
}

/* ---------- tones ---------- */
.sb-root .sb-tone-green { background: var(--sb-green-bg); border-color: var(--sb-green-border); color: var(--sb-text); }
.sb-root .sb-tone-amber { background: var(--sb-amber-bg); border-color: var(--sb-amber-border); color: var(--sb-text); }
.sb-root .sb-tone-red { background: var(--sb-red-bg); border-color: var(--sb-red-border); color: var(--sb-text); }
.sb-root .sb-tone-blue { background: var(--sb-blue-bg); border-color: var(--sb-blue-border); color: var(--sb-text); }

/* ---------- banners and notices ---------- */
.sb-root .sb-banners { display: grid; gap: 8px; margin-bottom: 14px; }
.sb-root .sb-banners:empty { display: none; }
.sb-root .sb-banner,
.sb-root .sb-notice {
  padding: 10px 14px;
  border: 1px solid var(--sb-border);
  border-left-width: 4px;
  border-radius: var(--sb-radius-sm);
  font-size: 0.92rem;
}
.sb-root .sb-notices { display: grid; gap: 8px; margin: 12px 0; }
.sb-root .sb-notices:empty { display: none; }
.sb-root .sb-notice-text { margin: 0; }
.sb-root .sb-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---------- buttons and controls ---------- */
.sb-root .sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-sm);
  background: var(--sb-bg-solid);
  color: var(--sb-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.sb-root .sb-btn:hover:not(:disabled) { border-color: var(--sb-accent-border); background: var(--sb-accent-soft); }
.sb-root .sb-btn:active:not(:disabled) { transform: translateY(1px); }
.sb-root .sb-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.sb-root .sb-btn-primary { border-color: var(--sb-accent); background: var(--sb-accent); color: #ffffff; }
.sb-root .sb-btn-primary:hover:not(:disabled) { border-color: var(--sb-accent-hover); background: var(--sb-accent-hover); }
.sb-root .sb-btn-secondary { background: var(--sb-bg-solid); }
.sb-root .sb-btn-ghost { border-color: transparent; background: transparent; color: var(--sb-text-2); }
.sb-root .sb-btn-toggle[aria-pressed="true"] { border-color: var(--sb-accent); background: var(--sb-accent-soft); color: var(--sb-accent); }
.sb-root .sb-btn-lock { min-height: 28px; padding: 3px 10px; font-size: 0.78rem; }
.sb-root .sb-btn-lock[aria-pressed="true"] { border-color: var(--sb-amber-border); background: var(--sb-amber-bg); color: var(--sb-amber); }

.sb-root .sb-btn:focus-visible,
.sb-root .sb-control:focus-visible,
.sb-root .sb-drop:focus-visible,
.sb-root .sb-card:focus-within {
  outline: 3px solid var(--sb-focus);
  outline-offset: 2px;
}

.sb-root .sb-control {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-sm);
  background: var(--sb-bg-solid);
  color: var(--sb-text);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  resize: vertical;
}
.sb-root .sb-control:focus { border-color: var(--sb-accent); }
.sb-root .sb-control:disabled { background: var(--sb-bg-alt); color: var(--sb-text-2); cursor: not-allowed; resize: none; }
.sb-root .sb-control[data-locked="true"] { border-style: dashed; border-color: var(--sb-amber-border); }
.sb-root .sb-control-small { display: inline-block; width: auto; padding: 6px 8px; }
.sb-root .sb-inline-label { display: inline-flex; align-items: center; gap: 6px; color: var(--sb-text-2); font-size: 0.9rem; }
.sb-root .sb-label { color: var(--sb-text-2); font-size: 0.82rem; font-weight: 700; }

/* ---------- chips ---------- */
.sb-root .sb-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-pill);
  background: var(--sb-bg-alt);
  color: var(--sb-text-2);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: normal;
}
.sb-root .sb-chip-media { border-color: var(--sb-accent-border); background: var(--sb-accent-soft); color: var(--sb-accent); }
.sb-root .sb-stale { border-color: var(--sb-amber-border); background: var(--sb-amber-bg); color: var(--sb-amber); }
.sb-root .sb-state-approved,
.sb-root .sb-state-posted { border-color: var(--sb-green-border); background: var(--sb-green-bg); color: var(--sb-green); }
.sb-root .sb-state-scheduled,
.sb-root .sb-state-rendering { border-color: var(--sb-blue-border); background: var(--sb-blue-bg); color: var(--sb-blue); }
.sb-root .sb-state-needs_changes,
.sb-root .sb-state-awaiting_assets { border-color: var(--sb-amber-border); background: var(--sb-amber-bg); color: var(--sb-amber); }
.sb-root .sb-state-saved { border-color: var(--sb-accent-border); background: var(--sb-accent-soft); color: var(--sb-accent); }
.sb-root .sb-state-failed { border-color: var(--sb-red-border); background: var(--sb-red-bg); color: var(--sb-red); }
.sb-root .sb-state-ready_for_review,
.sb-root .sb-state-storyboard_ready { border-color: var(--sb-accent-border); background: var(--sb-accent-soft); color: var(--sb-accent); }

/* ---------- calendar ---------- */
.sb-root .sb-cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 16px;
}
.sb-root .sb-cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sb-root .sb-days { display: grid; gap: 22px; }
.sb-root .sb-day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--sb-text);
  font-size: 0.95rem;
  font-weight: 700;
}
.sb-root .sb-today-tag {
  padding: 1px 9px;
  border-radius: var(--sb-radius-pill);
  background: var(--sb-accent);
  color: #ffffff;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sb-root .sb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sb-root .sb-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  background: var(--sb-bg);
  box-shadow: var(--sb-shadow);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.sb-root .sb-card:hover { border-color: var(--sb-accent-border); box-shadow: var(--sb-shadow-lg); transform: translateY(-1px); }
.sb-root .sb-card-legacy { background: var(--sb-bg-alt); }
.sb-root .sb-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.sb-root .sb-card-brand { margin: 0; color: var(--sb-muted); font-size: 0.8rem; }
.sb-root .sb-card-title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sb-root .sb-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; color: var(--sb-text-2); font-size: 0.85rem; }
.sb-root .sb-card-stale { color: var(--sb-amber); font-weight: 600; }
.sb-root .sb-card-brief { margin: 0; color: var(--sb-text-2); font-size: 0.88rem; }
.sb-root .sb-card-legacy-note { margin: 0; color: var(--sb-muted); font-size: 0.82rem; font-style: italic; }
.sb-root .sb-card .sb-btn { align-self: flex-start; margin-top: auto; }

/* ---------- editor header ---------- */
.sb-root .sb-ed-top { margin-bottom: 8px; }
.sb-root .sb-ed-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
  align-items: start;
  gap: 14px 24px;
  padding: 16px 18px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  background: var(--sb-bg);
  box-shadow: var(--sb-shadow);
}
.sb-root .sb-ed-stateblock .sb-note { margin-top: 4px; }
.sb-root .sb-ed-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.sb-root .sb-brief { color: var(--sb-muted); }

/* ---------- history ---------- */
.sb-root .sb-history {
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  background: var(--sb-bg);
  max-height: 320px;
  overflow: auto;
}
.sb-root .sb-history-head { margin: 0 0 8px; font-size: 0.95rem; }
.sb-root .sb-history-entry { padding: 8px 0; border-top: 1px solid var(--sb-border); }
.sb-root .sb-history-entry:first-of-type { border-top: 0; }
.sb-root .sb-history-current { background: var(--sb-accent-soft); margin: 0 -8px; padding: 8px; border-radius: var(--sb-radius-sm); }
.sb-root .sb-history-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; }
.sb-root .sb-history-val { margin: 2px 0 0; color: var(--sb-text-2); font-size: 0.85rem; overflow-wrap: anywhere; }

/* ---------- body: rows on the left, live preview on the right ---------- */
.sb-root .sb-ed-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: start;
  gap: 18px;
  margin-top: 14px;
}
.sb-root .sb-ed-main { min-width: 0; }

.sb-root .sb-rerender {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--sb-accent-border);
  border-radius: var(--sb-radius);
  background: var(--sb-accent-soft);
}
.sb-root .sb-rerender .sb-btn { justify-self: start; }
.sb-root .sb-cost { margin: 0; color: var(--sb-text); font-weight: 600; }
.sb-root .sb-job { margin: 0; color: var(--sb-text-2); }
.sb-root .sb-job:empty { display: none; }
.sb-root .sb-job[data-status="failed"] { color: var(--sb-red); font-weight: 600; }
.sb-root .sb-job[data-status="done"] { color: var(--sb-green); font-weight: 600; }
.sb-root .sb-sync {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-sm);
  font-weight: 600;
}
.sb-root .sb-confirm {
  padding: 12px 14px;
  border: 1px solid var(--sb-amber-border);
  border-radius: var(--sb-radius-sm);
  background: var(--sb-amber-bg);
}
.sb-root .sb-confirm-text { margin: 0; }

/* ---------- filmstrip rows ---------- */
.sb-root .sb-filmstrip { display: grid; gap: 12px; }
.sb-root .sb-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 200px;
  gap: 14px 18px;
  padding: 14px 16px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  background: var(--sb-bg);
  box-shadow: var(--sb-shadow);
}
.sb-root .sb-row[data-stale]:not([data-stale=""]) { border-color: var(--sb-amber-border); }
/* a silent beat (no spoken line) */
.sb-root .sb-silent { border-style: dashed; background: transparent; color: var(--sb-muted); }
.sb-root .sb-row-silent .sb-row-index { background: var(--sb-muted); }
/* a row that extends the previous shot is bracketed with the row above it */
.sb-root .sb-continues-label { color: var(--sb-accent); font-size: 0.75rem; font-weight: 700; }
.sb-root .sb-row-continues { border-left: 4px solid var(--sb-accent); }
.sb-root .sb-row + .sb-row-continues { margin-top: -12px; border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: dashed; }
.sb-root .sb-row:has(+ .sb-row-continues) { border-left: 4px solid var(--sb-accent); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sb-root .sb-row-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.sb-root .sb-row-head { display: flex; align-items: center; gap: 8px; }
.sb-root .sb-row-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--sb-radius-pill);
  background: var(--sb-accent);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
}
.sb-root .sb-row-beat { color: var(--sb-text); font-size: 0.9rem; font-weight: 700; }
.sb-root .sb-duration { color: var(--sb-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sb-root .sb-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sb-root .sb-row-fields { display: grid; gap: 10px; min-width: 0; }
.sb-root .sb-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; align-items: center; }
.sb-root .sb-field > .sb-label { grid-column: 1; grid-row: 1; }
.sb-root .sb-field > .sb-btn-lock { grid-column: 2; grid-row: 1; }
.sb-root .sb-field > .sb-control { grid-column: 1 / -1; grid-row: 2; }
.sb-root .sb-field > .sb-hint { grid-column: 1 / -1; grid-row: 3; margin: 0; }
.sb-root .sb-row-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.sb-root .sb-audio,
.sb-root .sb-copy { display: grid; gap: 4px; }
.sb-root .sb-audio-status,
.sb-root .sb-copy-status,
.sb-root .sb-row-status { color: var(--sb-muted); font-size: 0.8rem; min-height: 1.1em; }
.sb-root .sb-row-status[data-tone="good"] { color: var(--sb-green); font-weight: 600; }
.sb-root .sb-row-status[data-tone="warn"] { color: var(--sb-amber); font-weight: 600; }
.sb-root .sb-audio-status[data-code] { color: var(--sb-amber); }
.sb-root .sb-copy .sb-btn { justify-content: flex-start; }

.sb-root .sb-drop {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 2px dashed var(--sb-accent-border);
  border-radius: var(--sb-radius-sm);
  background: var(--sb-accent-soft);
  color: var(--sb-text-2);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sb-root .sb-drop-title { font-size: 0.85rem; font-weight: 700; color: var(--sb-accent); }
.sb-root .sb-drop-over { border-color: var(--sb-accent); background: var(--sb-blue-bg); }
.sb-root .sb-drop-disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- live preview ---------- */
.sb-root .sb-preview-panel {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  background: var(--sb-bg);
  box-shadow: var(--sb-shadow);
}
.sb-root .sb-preview-banner { margin: 0; color: var(--sb-text-2); font-size: 0.82rem; }
.sb-root .sb-preview-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sb-root .sb-preview-status { color: var(--sb-muted); font-size: 0.82rem; }
.sb-root .sb-preview-status[data-state="building"]::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid var(--sb-accent-border);
  border-top-color: var(--sb-accent);
  border-radius: 50%;
  animation: sb-spin 0.8s linear infinite;
  vertical-align: -1px;
}
.sb-root .sb-preview-status[data-state="failed"] { color: var(--sb-red); font-weight: 600; }
.sb-root .sb-preview-status[data-state="ready"] { color: var(--sb-green); }
.sb-root .sb-preview-frame {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 640px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-sm);
  background: #101418;
}
.sb-root .sb-preview-notice:empty { display: none; }

@keyframes sb-spin { to { transform: rotate(360deg); } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .sb-root .sb-ed-body { grid-template-columns: minmax(0, 1fr); }
  .sb-root .sb-preview-panel { position: static; order: -1; }
  .sb-root .sb-preview-frame { max-height: 520px; margin: 0 auto; max-width: 320px; }
}
@media (max-width: 900px) {
  .sb-root .sb-ed-head { grid-template-columns: minmax(0, 1fr); }
  .sb-root .sb-ed-tools { justify-content: flex-start; }
  .sb-root .sb-row { grid-template-columns: minmax(0, 1fr); }
  .sb-root .sb-row-side { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sb-root .sb-badges { flex-direction: row; flex-wrap: wrap; }
  .sb-root .sb-row-actions { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .sb-root .sb-row-actions > * { flex: 1 1 200px; }
}
@media (max-width: 560px) {
  .sb-root .sb-h2 { font-size: 1.4rem; }
  .sb-root .sb-cards { grid-template-columns: minmax(0, 1fr); }
  .sb-root .sb-btn { min-height: 44px; }
  .sb-root .sb-btn-lock { min-height: 36px; }
  .sb-root .sb-cal-tools { width: 100%; }
}

/* ---------- Phase P7 (additive): video type list, grammar label, shot span, medium dials, add voice, queued notice ---------- */
.sb-root .sb-fwpick {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 2px 0 6px;
  padding: 5px 12px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-pill);
  background: var(--sb-bg-solid);
  color: var(--sb-text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.sb-root .sb-fwpick:focus-visible { outline: 3px solid var(--sb-focus); outline-offset: 2px; }
.sb-root .sb-fwpick[aria-expanded="true"] { border-color: var(--sb-accent); border-radius: var(--sb-radius-sm); }
.sb-root .sb-fwpick-current { overflow-wrap: anywhere; }
.sb-root .sb-fwpick-caret { color: var(--sb-muted); font-size: 0.7rem; }
.sb-root .sb-fwpick[aria-expanded="true"] .sb-fwpick-caret { transform: rotate(180deg); }
.sb-root .sb-fwpick-list {
  flex: 1 1 100%;
  display: grid;
  gap: 2px;
  max-height: 220px;
  margin: 6px 0 0;
  padding: 6px 0 0;
  overflow: auto;
  list-style: none;
  border-top: 1px solid var(--sb-border);
}
.sb-root .sb-fwpick-option { padding: 6px 8px; border-radius: var(--sb-radius-sm); color: var(--sb-text-2); font-weight: 500; cursor: default; overflow-wrap: anywhere; }
.sb-root .sb-fwpick-selected { background: var(--sb-accent-soft); color: var(--sb-accent); font-weight: 700; }
.sb-root .sb-fwpick-note { flex: 1 1 100%; margin: 0; font-weight: 400; }
.sb-root .sb-grammar { margin: 6px 0 0; }
.sb-root .sb-grammar-label { border-color: var(--sb-accent-border); background: var(--sb-accent-soft); color: var(--sb-accent); }
.sb-root .sb-shot-span { border-color: var(--sb-accent-border); background: var(--sb-accent-soft); color: var(--sb-accent); }
.sb-root .sb-videobar {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  background: var(--sb-bg);
  box-shadow: var(--sb-shadow);
}
.sb-root .sb-videobar-head { margin: 0 0 6px; font-size: 0.95rem; }
.sb-root .sb-dials { display: grid; gap: 12px; }
.sb-root .sb-dial { display: grid; gap: 4px; }
.sb-root .sb-dial-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sb-root .sb-dial-value { color: var(--sb-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sb-root .sb-dial-input { width: 100%; margin: 0; accent-color: var(--sb-accent); }
.sb-root .sb-voicebox { display: grid; gap: 8px; justify-items: start; }
.sb-root .sb-queued {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--sb-blue-border);
  border-radius: var(--sb-radius-sm);
  font-weight: 600;
}

/* phone layout (the host sets data-sb-phone on the root; 480 px and under) */
@media (max-width: 480px) {
  .sb-root[data-sb-phone] { max-width: 100%; padding: 0 0 24px; font-size: 16px; overflow-x: hidden; }
  .sb-root[data-sb-phone] .sb-h2 { font-size: 1.3rem; overflow-wrap: anywhere; }
  /* the video type list below already names the type, so the small caps line above it is dropped on a phone */
  .sb-root[data-sb-phone] .sb-ed-titleblock > .sb-eyebrow { display: none; }
  .sb-root[data-sb-phone] .sb-ed-head { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
  .sb-root[data-sb-phone] .sb-ed-tools { justify-content: flex-start; gap: 6px; }
  .sb-root[data-sb-phone] .sb-ed-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sb-root[data-sb-phone] .sb-preview-panel { position: static; order: 2; padding: 10px; }
  .sb-root[data-sb-phone] .sb-rerender { padding: 12px; }
  .sb-root[data-sb-phone] .sb-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
  .sb-root[data-sb-phone] .sb-row-side { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sb-root[data-sb-phone] .sb-badges { flex-direction: row; flex-wrap: wrap; }
  .sb-root[data-sb-phone] .sb-row-actions { flex-direction: row; flex-wrap: wrap; }
  .sb-root[data-sb-phone] .sb-row-actions > * { flex: 1 1 140px; }
  .sb-root[data-sb-phone] .sb-control { font-size: 16px; }
  .sb-root[data-sb-phone] .sb-btn { min-height: 44px; }
  .sb-root[data-sb-phone] .sb-videobar { padding: 12px; }
  .sb-root[data-sb-phone] .sb-dial-input { min-height: 32px; }
  .sb-root[data-sb-phone] .sb-banner,
  .sb-root[data-sb-phone] .sb-notice { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-root *,
  .sb-root *::before,
  .sb-root *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}