/* Mein hu Hero · script editor.
 *
 * A work tool for the organisers, laptop first and usable on a phone. It
 * borrows the site's typefaces and its light-theme palette so it reads as
 * the same production, but stays flat and quiet: the script is the thing
 * being worked on, the chrome should disappear.
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-subset.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/HankenGrotesk-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/HankenGrotesk-Italic-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-subset.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* the site's light theme, contrast ratios as recorded there */
  --bg: #f4ece0;
  --bg-2: #ede2d2;
  --paper: #fffaf2;
  --ink: #27221d;
  --ink-dim: #45403a;
  --muted: #69645d;
  --marigold: #8b6000;
  --sindoor: #af3029;
  --sindoor-strong: #8f241e;
  --magenta: #9f1d5a;
  --neel: #3a45a8;
  --teal: #006d64;
  --gold-bg: #fbedbe;
  --gold-border: #d9ab3f;
  --gold-ink: #5c4200;
  --hairline: rgba(90, 60, 20, 0.16);
  --hairline-strong: rgba(90, 60, 20, 0.3);
  --focus: var(--marigold);
  /* the site's dark-theme teal, for teal text on the dark formatting bar */
  --teal-on-dark: #44d0c1;
  --magenta-on-dark: #df6c98;
  --shadow: 0 1px 2px rgba(90, 60, 20, 0.08), 0 4px 14px rgba(90, 60, 20, 0.08);
  --shadow-lift: 0 18px 40px rgba(90, 60, 20, 0.22);
  /* text on a filled accent button or chip */
  --on-accent: #fffaf2;
  --direction-bg: #fbf6ee;
  --field-focus-bg: #fff;
  /* the dark bars (formatting bar, messages) in both themes */
  --bar-bg: #27221d;
  --bar-ink: #fffaf2;
  --error-bg: #8f241e;
  --chip-on-bg: var(--gold-border);
  --radius: 10px;
  --topbar-h: 60px;
  --ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
}

/* Night mode: the site's dark palette. Follows the device, like the
   site; the sun/moon button switches for this visit only. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0907;
  --bg-2: #1c1612;
  --paper: #16110e;
  --ink: #e5ded7;
  --ink-dim: #c3bdb6;
  --muted: #918b84;
  --marigold: #f9b73f;
  --sindoor: #f66e60;
  --sindoor-strong: #ff8a80;
  --magenta: #df6c98;
  --neel: #a9b1ff;
  --teal: #44d0c1;
  --gold-bg: color-mix(in srgb, var(--marigold) 12%, transparent);
  --gold-border: color-mix(in srgb, var(--marigold) 40%, transparent);
  /* a pressed "Optional" chip needs a solid fill behind its dark label */
  --chip-on-bg: var(--marigold);
  --gold-ink: #ffdf9e;
  --hairline: rgba(255, 240, 220, 0.12);
  --hairline-strong: rgba(255, 240, 220, 0.26);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 18px 40px rgba(0, 0, 0, 0.55);
  --on-accent: #1a0906;
  --direction-bg: #1b1511;
  --field-focus-bg: #1f1814;
  --bar-bg: #2e2520;
  --error-bg: #b3362c;
}

/* Wide-gamut screens (most Macs and phones) get the site's more saturated
   versions of the same colours. Values copied from index.html; keep them
   in step with it. */
@supports (color: oklch(0.5 0.1 60)) {
  :root {
    --marigold: oklch(0.52 0.109 78);
    --sindoor: oklch(0.505 0.165 28);
    --sindoor-strong: oklch(0.43 0.155 28);
    --magenta: oklch(0.47 0.17 358);
    --teal: oklch(0.48 0.085 185);
    --ink: oklch(0.255 0.012 70);
    --ink-dim: oklch(0.375 0.012 70);
    --muted: oklch(0.505 0.012 70);
    --bg: oklch(0.945 0.018 78);
    --bg-2: oklch(0.915 0.018 78);
  }
  html[data-theme="dark"] {
    --marigold: oklch(0.82 0.15 78);
    --sindoor: oklch(0.7 0.17 28);
    --sindoor-strong: oklch(0.76 0.14 26);
    --magenta: oklch(0.68 0.15 358);
    --teal: oklch(0.78 0.12 185);
    --ink: oklch(0.905 0.012 70);
    --ink-dim: oklch(0.8 0.012 70);
    --muted: oklch(0.64 0.012 70);
    --bg: oklch(0.145 0.008 60);
    --bg-2: oklch(0.185 0.008 60);
  }
}

* {
  box-sizing: border-box;
}
html {
  scroll-padding-top: calc(var(--topbar-h) + 16px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 60px;
  padding: 0.5rem max(16px, env(safe-area-inset-right)) 0.5rem
    max(16px, env(safe-area-inset-left));
  padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  /* never squeezed under the tabs: the save message gives way instead */
  flex-shrink: 0;
}
.brand-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  white-space: nowrap;
}
.brand-sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tabs {
  display: flex;
  gap: 0.25rem;
  margin-left: 0.75rem;
}
.tab {
  border: 0;
  background: none;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-dim);
  white-space: nowrap;
}
.tab:hover {
  background: var(--bg-2);
}
.tab[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.status {
  font-size: 0.82rem;
  color: var(--muted);
  margin-right: 0.4rem;
  min-width: 0;
  text-align: right;
  line-height: 1.25;
}
.status.is-dirty {
  color: var(--gold-ink);
  font-weight: 600;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  background: var(--paper);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
}
.btn:hover:not(:disabled) {
  background: var(--bg-2);
}
.btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.btn.icon {
  width: 40px;
  padding: 0;
}
.btn.primary {
  background: var(--sindoor);
  border-color: var(--sindoor);
  color: var(--on-accent);
}
.btn.primary:hover:not(:disabled) {
  background: var(--sindoor-strong);
}
.btn.danger {
  color: var(--sindoor);
  border-color: color-mix(in srgb, var(--sindoor) 45%, transparent);
}
/* a destructive confirm button is filled, so its label must stay light */
.btn.primary.danger {
  color: var(--on-accent);
  border-color: var(--sindoor);
}
.btn.small {
  min-height: 32px;
  padding: 0.2rem 0.6rem;
  font-size: 0.85rem;
}
.btn.ghost {
  border-color: transparent;
  background: transparent;
}
.theme-btn .ico-moon,
html[data-theme="dark"] .theme-btn .ico-sun {
  display: none;
}
html[data-theme="dark"] .theme-btn .ico-moon {
  display: inline;
}
.link-btn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--sindoor);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}

.loading {
  padding: 4rem 1rem;
  text-align: center;
  color: var(--muted);
}

/* ---------- page ---------- */
main {
  padding: 1.25rem max(16px, env(safe-area-inset-right)) 6rem
    max(16px, env(safe-area-inset-left));
  max-width: 1180px;
  margin: 0 auto;
}
.hint {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 0 0 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  color: var(--gold-ink);
  font-size: 0.93rem;
}
.hint p {
  margin: 0;
}
.hint .btn {
  margin-left: auto;
  flex-shrink: 0;
}
.panel-title {
  font-family: var(--display);
  font-size: 1.4rem;
  margin: 0 0 0.25rem;
}
.panel-intro {
  margin: 0 0 1.25rem;
  color: var(--muted);
}

/* ---------- script tab ---------- */
.script-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.scene-index {
  position: sticky;
  top: calc(var(--topbar-h) + 1.25rem);
  max-height: calc(100vh - var(--topbar-h) - 2.5rem);
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.6rem;
}
.scene-index-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.2rem 0.4rem 0.4rem;
}
.scene-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.scene-index-item {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  border-radius: 6px;
}
.scene-index-item a {
  flex: 1;
  display: flex;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.4rem 0.3rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 6px;
}
.scene-index-item a:hover {
  background: var(--bg-2);
}
.scene-index-item.is-current a {
  background: var(--gold-bg);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--sindoor);
}
.scene-index-item.is-current .num {
  color: var(--sindoor);
}
.scene-index-item .num {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  padding-top: 0.12rem;
}
.scene-index-item .t {
  overflow-wrap: anywhere;
}
.row > :last-child:not(:first-child) {
  justify-self: end;
}
.scene-index .btn {
  width: 100%;
  margin-top: 0.5rem;
}
.scene-jump {
  display: none;
}

.scene-block {
  margin-bottom: 2.5rem;
}
.scene-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.scene-no {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--sindoor);
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  white-space: nowrap;
}
.scene-title {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.45rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 0.15rem 0.4rem;
}
.scene-title:hover {
  border-color: var(--hairline);
}
.scene-title:focus {
  background: var(--paper);
  border-color: var(--hairline-strong);
  outline: none;
  box-shadow: 0 0 0 2px var(--focus);
}
.scene-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1rem;
  margin: 0 0 0.9rem;
  padding: 0.8rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.scene-details .full {
  grid-column: 1 / -1;
}
/* scene details: on-stage ticks, props and set-change rows */
.detail-group {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.chk-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}
.chk {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.2rem 0.65rem 0.2rem 0.45rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-size: 0.88rem;
  cursor: pointer;
}
.chk input {
  margin: 0;
  accent-color: var(--sindoor);
}
.chk.is-locked {
  background: var(--bg-2);
  color: var(--ink-dim);
  cursor: default;
}
.detail-hint {
  display: block;
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.detail-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}
.detail-row {
  display: grid;
  gap: 0.4rem;
  align-items: start;
}
.prop-row {
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr) 36px;
}
.step-row {
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 13rem) 36px;
}
.detail-row .select,
.detail-row .text-input,
.detail-row .textarea {
  min-height: 40px;
}
.step-row .textarea {
  resize: none;
  overflow: hidden;
}
.add-select {
  max-width: 16rem;
  color: var(--ink-dim);
}
.entity-row {
  grid-template-columns: minmax(10rem, 1fr) minmax(0, 1.4fr) 11rem 6.5rem;
}
.legend-edit-row {
  grid-template-columns: 9rem minmax(8rem, 12rem) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.row.legend-edit-row > .cell {
  justify-self: stretch;
}
.legend-edit-row .textarea {
  field-sizing: content;
  min-height: 2.6rem;
}
.show-field {
  display: block;
  margin-bottom: 0.9rem;
}
.photo-preview {
  display: block;
  width: min(420px, 100%);
  height: auto;
  border-radius: var(--radius);
  margin-bottom: 0.9rem;
}
.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.text-input,
.textarea,
.select {
  width: 100%;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  background: var(--paper);
  padding: 0.45rem 0.6rem;
  font-size: 0.95rem;
}
.textarea {
  resize: vertical;
  min-height: 2.6rem;
}
.select {
  appearance: auto;
  cursor: pointer;
}

/* ---------- cards ---------- */
.items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 3rem;
  border-radius: var(--radius);
}
.items:empty::before {
  content: "No lines in this scene yet. Use the buttons below to add one, or drag a line here.";
  display: block;
  padding: 0.9rem;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.9rem;
}
.card {
  position: relative;
  display: grid;
  grid-template-columns: 32px 200px minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: start;
  padding: 0.6rem 0.6rem 0.6rem 0.3rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--hairline-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card--line {
  border-left-color: var(--ink);
}
.card--direction {
  background: var(--direction-bg);
  border-left-color: var(--muted);
}
/* A direction headed "Setting" is shown as one on the site and in the PDF
   (centred between gold rules), so the editor marks it in gold too. */
.card--direction.is-setting {
  border-left-color: var(--marigold);
}
.card--direction.is-setting .note-input[data-field="label"] {
  color: var(--marigold);
  font-weight: 700;
}
.card--song {
  border-left-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 6%, var(--paper));
}
.card--sfx {
  border-left-color: var(--magenta);
  background: color-mix(in srgb, var(--magenta) 6%, var(--paper));
}
.card.is-optional {
  background: var(--gold-bg);
}
.card.is-dragging {
  opacity: 0;
}
.drag-ghost {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  box-shadow: var(--shadow-lift);
  transform: rotate(-0.6deg);
  opacity: 0.96;
}
.drop-placeholder {
  border: 2px dashed var(--sindoor);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--sindoor) 7%, transparent);
}
.card.flash {
  animation: flash 1.2s ease-out;
}
@keyframes flash {
  from {
    box-shadow: 0 0 0 3px var(--marigold);
  }
}

.handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 40px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}
.handle:hover {
  background: var(--bg-2);
  color: var(--ink);
}
.handle:active {
  cursor: grabbing;
}
.handle svg {
  fill: currentColor;
  stroke: none;
}

.who {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.kind {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.55rem;
}
.card--song .kind {
  color: var(--teal);
}
.card--sfx .kind {
  color: var(--magenta);
}
.who .select {
  font-weight: 700;
  padding: 0.4rem 0.4rem;
}
.note-input {
  border: 1px dashed transparent;
  background: transparent;
  font-size: 0.82rem;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  color: var(--ink-dim);
  width: 100%;
}
.note-input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.note-input:hover,
.note-input:focus {
  border-color: var(--hairline-strong);
  background: var(--paper);
}

.rich {
  min-height: 2.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 8px;
  line-height: 1.55;
  cursor: text;
  overflow-wrap: anywhere;
}
.rich:hover {
  border-color: var(--hairline);
}
.rich:focus {
  outline: none;
  border-color: var(--hairline-strong);
  background: var(--field-focus-bg);
  box-shadow: 0 0 0 2px var(--focus);
}
.rich p {
  margin: 0 0 0.45rem;
}
.rich p:last-child {
  margin-bottom: 0;
}
.rich:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}
.rich i,
.rich em {
  color: var(--ink-dim);
}
.rich mark {
  background: none;
  color: var(--teal);
  font-weight: 600;
}
.rich mark.sfx {
  color: var(--magenta);
}
/* words to say exactly as written, as on the site */
.rich strong,
.rich b {
  font-weight: inherit;
  color: var(--neel);
}

.cue-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.cue-body .select {
  flex: 1 1 14rem;
  font-weight: 700;
}
.cue-body .note-input {
  flex: 1 1 100%;
}
.play-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.play-btn.is-playing {
  background: var(--ink);
  color: var(--paper);
}
.empty-note {
  color: var(--muted);
  font-size: 0.9rem;
}

.card-actions {
  display: flex;
  gap: 0.2rem;
  align-items: center;
}
.chip-toggle {
  border: 1px solid var(--hairline-strong);
  background: transparent;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  min-height: 32px;
}
.chip-toggle[aria-pressed="true"] {
  background: var(--chip-on-bg);
  border-color: var(--chip-on-bg);
  color: #2c2003;
}
.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--bg-2);
  color: var(--ink);
}
.icon-btn.danger:hover {
  color: var(--sindoor);
}

/* insert-between control, on the top edge of each card */
.insert-before {
  position: absolute;
  left: 50%;
  top: -0.25rem;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.55rem 0.05rem 0.4rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-dim);
  cursor: pointer;
  opacity: 0;
}
.insert-before svg {
  width: 13px;
  height: 13px;
}
.card:hover .insert-before,
.insert-before:focus-visible,
.insert-before[aria-expanded="true"] {
  opacity: 1;
}
@media (hover: none) {
  .insert-before {
    opacity: 0.85;
  }
}

.add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.add-row .btn {
  font-size: 0.85rem;
  min-height: 36px;
}
.add-label {
  align-self: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin-right: 0.2rem;
}

/* ---------- formatting bar ---------- */
.fmt-bar {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  margin-top: 0.4rem;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--bar-bg);
  border-radius: 8px;
}
.fmt-bar button svg {
  width: 14px;
  height: 14px;
}
.fmt-bar button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  background: none;
  color: var(--bar-ink);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.fmt-bar button:hover,
.fmt-bar button[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.16);
}
.fmt-bar .fmt-i {
  font-style: italic;
}
.fmt-bar .fmt-s {
  color: var(--magenta-on-dark);
}
.fmt-bar .fmt-m {
  color: var(--teal-on-dark);
}
.fmt-bar .fmt-x {
  color: #a9b1ff;
}
/* only spoken lines can be word for word */
.card--direction .fmt-bar .fmt-x {
  display: none;
}

/* ---------- popover menu ---------- */
.menu {
  position: absolute;
  z-index: 50;
  min-width: 200px;
  padding: 0.3rem;
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lift);
}
.menu button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  background: none;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  font-size: 0.92rem;
}
.menu button:hover,
.menu button:focus-visible {
  background: var(--bg-2);
}
.menu button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.menu button.danger {
  color: var(--sindoor);
}
.menu hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0.25rem 0;
}
.menu .dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ---------- cast + sounds tables ---------- */
.section {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.section-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem;
}
.section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.section-head .btn {
  margin-left: auto;
}
.rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.row {
  display: grid;
  gap: 0.6rem;
  align-items: center;
  padding: 0.4rem 0.2rem;
  border-top: 1px solid var(--hairline);
}
.row:first-child {
  border-top: 0;
}
.row-head {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 0;
  padding-bottom: 0;
}
.actor-row {
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr) 6.5rem;
}
.char-row {
  grid-template-columns: minmax(9rem, 1.2fr) minmax(9rem, 1.4fr) minmax(9rem, 1fr) 6rem 6.5rem;
}
.sound-row {
  grid-template-columns: 36px minmax(10rem, 1.3fr) minmax(0, 1fr) 11rem 13.5rem;
}
/* A cell's label names its column. Wide screens show the header row
   instead, so the label is kept for screen readers only; narrow screens
   stack the cells and show every label. */
.cell {
  display: block;
  min-width: 0;
}
.cell-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.meta {
  font-size: 0.85rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.meta strong {
  color: var(--ink-dim);
  font-weight: 600;
}
.file-name {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.empty {
  color: var(--muted);
  padding: 0.5rem 0.2rem;
  margin: 0;
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(100vw - 32px);
  padding: 0.7rem 0.8rem 0.7rem 1.1rem;
  background: var(--bar-bg);
  color: var(--bar-ink);
  border-radius: 10px;
  box-shadow: var(--shadow-lift);
  font-size: 0.93rem;
}
.toast.is-error {
  background: var(--error-bg);
}
.toast-btn {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: none;
  color: #fff;
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 34px;
}

/* ---------- dialog ---------- */
.dialog {
  width: min(520px, calc(100vw - 32px));
  border: 0;
  border-radius: 14px;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
}
.dialog::backdrop {
  background: rgba(39, 34, 29, 0.45);
}
.dialog-form {
  padding: 1.3rem 1.3rem 1.1rem;
}
.dialog-title {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: 1.25rem;
}
.dialog-body {
  color: var(--ink-dim);
}
.dialog-body p {
  margin: 0 0 0.75rem;
}
.dialog-body .field {
  margin-bottom: 0.8rem;
}
.dialog-body ol {
  padding-left: 1.2rem;
  margin: 0 0 0.75rem;
}
.dialog-body li {
  margin-bottom: 0.3rem;
}
.dialog-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
.field-error {
  color: var(--sindoor);
  font-size: 0.88rem;
  margin: 0.3rem 0 0;
}

/* ---------- narrow screens ---------- */
/* The top bar needs about 1,220px in one row (five tabs, the save
   message, the buttons). Below that the tabs take a row of their own. */
@media (max-width: 1240px) {
  /* a first guess; editor.js sets the real height once the bar is drawn */
  :root {
    --topbar-h: 124px;
  }
  .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
  }
  /* level with the buttons, not with buttons plus the save message */
  .brand {
    padding-top: 0.2rem;
  }
  .tabs {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 0.2rem;
  }
  .tab {
    padding: 0.4rem 0.7rem;
  }
  /* the draft / published state stays visible, on its own line under
     the buttons */
  .actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .status {
    order: 4;
    flex-basis: 100%;
    margin: 0;
    text-align: right;
    font-size: 0.78rem;
  }
}
@media (max-width: 980px) {
  .script-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .scene-index {
    display: none;
  }
  .scene-jump {
    display: block;
    margin-bottom: 1rem;
  }
}
@media (max-width: 760px) {
  /* phones: the prop or step first with its delete button, then the
     note or the person on the line below */
  .prop-row,
  .step-row {
    grid-template-columns: minmax(0, 1fr) 36px;
  }
  .detail-row > :nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .detail-row > .icon-btn {
    grid-column: 2;
    grid-row: 1;
  }
  /* every section header puts its button on a line of its own, so the
     sections look alike whatever the length of their titles */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .section-head .btn {
    margin-left: 0;
  }
  main {
    padding-top: 1rem;
  }
  .brand-sub {
    display: none;
  }
  #previewBtn {
    display: none;
  }
  /* on a phone the speaker gets the full width and the actions drop to
     a row of their own under the text */
  .card {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas:
      "handle who"
      "handle body"
      "handle actions";
    gap: 0.4rem;
  }
  .card .card-actions {
    justify-content: flex-end;
  }
  .scene-header {
    flex-wrap: wrap;
  }
  .scene-title {
    order: 5;
    flex-basis: 100%;
    font-size: 1.3rem;
    /* the text, not the input box, lines up with the chip and cards */
    margin-left: calc(-0.4rem - 1px);
  }
  .scene-header .btn.ghost {
    margin-left: auto;
  }
  .card .handle {
    grid-area: handle;
  }
  .card .who {
    grid-area: who;
  }
  .card .body {
    grid-area: body;
  }
  .card .card-actions {
    grid-area: actions;
  }
  .kind {
    padding-top: 0.3rem;
  }
  .scene-details {
    grid-template-columns: 1fr;
  }
  .hint {
    flex-direction: column;
  }
  .hint .btn {
    margin-left: 0;
  }
}
/* Cast and sound rows stack on anything narrower than a laptop, with
   visible labels, so no field is ever squeezed until its text is cut off. */
@media (max-width: 980px) {
  .row-head {
    display: none;
  }
  .actor-row,
  .char-row,
  .sound-row,
  .entity-row,
  .legend-edit-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem 1rem;
    padding: 0.9rem 0.2rem;
  }
  .row > .cell {
    grid-column: 1 / -1;
  }
  .char-row > .cell:nth-child(3),
  .char-row > .cell:nth-child(4) {
    grid-column: auto;
  }
  /* Title, file and "used in" each take a full-width line with their
     label on the row's left edge, so the title is never cut short. The
     play button joins the row's other controls on the last line. */
  .sound-row {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 0.6rem;
  }
  .row.sound-row > .cell-play {
    grid-column: 1;
    grid-row: 4;
    align-self: center;
  }
  .row.sound-row > .cell-end {
    grid-column: 2;
    grid-row: 4;
  }
  .row > .cell-end {
    grid-column: 1 / -1;
    justify-self: end;
  }
  .cell-label {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card.flash {
    animation: none;
  }
  .drag-ghost {
    transform: none;
  }
}

/* ---------- audio requests ---------- */
/* A song or sound effect the director has asked for, with no audio yet. */
.request-tag {
  font-weight: 700;
  font-size: 0.9rem;
}
.card--song .request-tag {
  color: var(--teal);
}
.card--sfx .request-tag {
  color: var(--magenta);
}
.cue-body .request-input {
  flex: 1 1 16rem;
  min-width: 0;
}
.track-name {
  font-weight: 700;
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tab-count {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.4em;
  margin-left: 0.2rem;
  border-radius: 999px;
  background: var(--sindoor);
  color: var(--on-accent);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}
.request-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
  padding: 0.7rem 0.2rem 0.7rem 0.8rem;
  border-left: 3px dashed var(--teal);
}
.requests--sfx .request-row {
  border-left-color: var(--magenta);
}
.request-text {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.request-context {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

/* the key's column headings sit over their columns, the last one too */
.row.legend-edit-row.row-head > span {
  justify-self: start;
}

/* "Word for word" tag under the speaker, as on the site */
.who .exact-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: max-content;
  margin-top: 0.4rem;
  padding: 0.12rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neel);
  white-space: nowrap;
}
.who .exact-tag[hidden] {
  display: none;
}
.who .exact-tag svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}