:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  --bg: #0a100f;
  --bg-elev: #131c1b;
  --bg-elev-2: #1c2826;
  --line: #2a3937;
  --line-strong: #3a4f4c;
  --text: #ece6d8;
  --text-muted: #93a09d;
  --text-dim: #687572;
  --accent: #d2a76b;
  --accent-strong: #f0b873;
  --good: #6dbf8f;
  --warn: #d49a4a;
  --bad: #d76a6a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 22px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.topbar .brand { justify-self: start; }
.topbar .page-nav { justify-self: center; }
.topbar .status { justify-self: end; }

.page-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px;
}
.page-nav button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 4px;
  line-height: 1.2;
  cursor: pointer;
}
.page-nav button:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}
.page-nav button.active {
  background: var(--bg-elev-2);
  color: var(--accent);
  border-color: var(--line-strong);
  font-weight: 600;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark { flex: 0 0 auto; }
.brand-text {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.brand strong { font-weight: 600; letter-spacing: 0.2px; }
.story-label {
  font-size: 13px;
  color: var(--text-muted);
}

.status {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
}
.undo-control {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.undo-button,
.undo-history-toggle {
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  color: var(--text, #ece6d8);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  line-height: 1;
}
.undo-button { padding: 4px 10px; border-radius: 4px 0 0 4px; }
.undo-history-toggle { padding: 4px 6px; border-radius: 0 4px 4px 0; border-left: none; }
.undo-button:hover:not(:disabled),
.undo-history-toggle:hover:not(:disabled) { border-color: var(--accent, #d2a76b); color: var(--accent, #d2a76b); }
.undo-button:disabled,
.undo-history-toggle:disabled { opacity: 0.4; cursor: not-allowed; }
.undo-history-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 280px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  z-index: 100;
  padding: 4px;
}
.undo-history-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11.5px;
}
.undo-history-row.undo-history-next { background: rgba(210,167,107,0.10); }
.undo-history-label { color: var(--text, #ece6d8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-history-time { font-size: 10px; flex-shrink: 0; }
.undo-history-empty { padding: 12px; text-align: center; }
.auth-status {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  color: var(--text-muted);
  border: 1px solid var(--line);
}
.auth-status.ok { color: var(--good); border-color: var(--good); }
.auth-status.bad { color: var(--bad); border-color: var(--bad); }
.auth-status.checking { color: var(--text-dim); }
.cache-status { color: var(--text-dim); }
.play-status { color: var(--accent); min-width: 12ch; text-align: right; }
.play-status.error { color: var(--bad); }

.lab {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(380px, 1fr) minmax(300px, 1fr);
  gap: 16px;
  padding: 20px;
  align-items: start;
  /* Body is now overflow:hidden; each lab gets internal scroll if its content
     exceeds the viewport. Labs that need precise sizing (anchors/images/tts)
     override these with explicit height + overflow:hidden. */
  height: calc(100vh - var(--topbar-h, 60px));
  overflow-y: auto;
}
.capture-lab,
.tts-lab {
  --tts-left-w: 280px;
  grid-template-columns: var(--tts-left-w) minmax(420px, 1fr);
  align-items: stretch;
  padding: 12px;
  height: calc(100vh - var(--topbar-h, 60px));
  min-height: 0;
  overflow: hidden;
}
.tts-right-stack {
  /* chooser on top, editor below; user drags the handle between them. */
  --tts-chooser-h: 240px;
  display: grid;
  grid-template-rows: var(--tts-chooser-h) minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}

.tts-mid-panel {
  position: relative;       /* contains the resize handle */
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.tts-mid-editor-resize {
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 8px;
  cursor: ns-resize;
  z-index: 5;
  background: linear-gradient(0deg, transparent 0 3px, var(--line-strong, #3a4f4c) 3px 5px, transparent 5px);
}
.tts-mid-editor-resize:hover,
.tts-mid-editor-resize.dragging {
  background: linear-gradient(0deg, transparent 0 2px, var(--accent, #d2a76b) 2px 6px, transparent 6px);
}
.tts-mid-body {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(200px, 1fr);
  gap: 12px;
  min-height: 0;
  overflow: hidden;
  flex: 1;
}
.tts-target-list {
  list-style: none;
  margin: 0; padding: 0;
  overflow-y: auto;
  flex: 1; min-height: 0;
  border-bottom: 1px solid var(--line, #2a3937);
}
.tts-target-row {
  display: grid;
  grid-template-columns: 80px 1fr 22px;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line, #2a3937);
  cursor: pointer;
  align-items: baseline;
}
.tts-target-row:hover { background: var(--bg-elev-2, #1c2826); }
.tts-target-row.focused {
  background: rgba(210,167,107,0.08);
  border-left: 3px solid var(--accent, #d2a76b);
  padding-left: 9px;
}
.tts-target-row.is-line { background: rgba(122,169,212,0.06); }
.tts-target-row.is-line.focused { background: rgba(210,167,107,0.10); }
.tts-target-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted, #93a09d);
  font-variant-numeric: tabular-nums;
}
.tts-target-row.is-line .tts-target-label { color: var(--info, #7aa9d4); font-weight: 600; }
.tts-target-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; min-width: 0; }
.tts-target-speaker { color: var(--text-muted, #93a09d); font-size: 11px; }
.tts-target-text { color: var(--text, #ece6d8); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tts-target-status {
  font-size: 14px;
  color: var(--text-dim, #687572);
  text-align: center;
  background: transparent;
  border: none;
  padding: 0 4px;
  font-family: inherit;
  line-height: 1;
}
.tts-target-status:not(:disabled) { cursor: pointer; }
.tts-target-status:not(:disabled):hover { color: var(--bad, #d76a6a); }
.tts-target-row.has-audio .tts-target-status { color: var(--good, #6dbf8f); }

.tts-line-image {
  margin: 0;
  padding: 12px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
}
.tts-line-image img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg, #0a100f);
}
.tts-line-image figcaption { font-size: 11px; color: var(--text-dim, #687572); }

.tts-right-panel,
.tts-editor-text-panel,
.tts-editor-capture-panel {
  display: flex; flex-direction: column;
  padding: 12px 14px;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}
.tts-right-panel .panel-head,
.tts-editor-text-panel .panel-head,
.tts-editor-capture-panel .panel-head { padding: 0 0 4px; border-bottom: 1px solid var(--line, #2a3937); margin-bottom: 4px; }

/* Two side-by-side panels under the chooser: text/format/rate on the left,
   Generate (capture) controls on the right. Capture width is user-dragged
   via the resize handle between them. */
.tts-editor-row {
  --tts-capture-w: 260px;
  display: flex;
  flex-direction: row;
  gap: 0;
  min-height: 0;
}
.tts-editor-text-panel {
  flex: 1 1 0;
  min-width: 0;
}
.tts-editor-resize {
  flex: 0 0 12px;
  cursor: ew-resize;
  background: linear-gradient(90deg, transparent 0 5px, var(--line-strong, #3a4f4c) 5px 7px, transparent 7px);
  position: relative;
  z-index: 5;
}
.tts-editor-resize:hover,
.tts-editor-resize.dragging {
  background: linear-gradient(90deg, transparent 0 4px, var(--accent, #d2a76b) 4px 8px, transparent 8px);
}
.tts-editor-capture-panel {
  flex: 0 0 auto;
  width: var(--tts-capture-w);
  min-width: 0;
  align-items: stretch;
}
.tts-seg-nav-row {
  display: flex; justify-content: space-between; gap: 8px;
}
.tts-seg-nav-row .tts-nav-arrow { flex: 1; }
.tts-original-row {
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  border-radius: 6px;
  padding: 8px 10px;
}
.tts-original-row .lang-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted, #93a09d);
  display: block; margin-bottom: 4px;
}
.tts-original-row p { margin: 0; font-size: 15px; }
.tts-rate { display: flex; flex-direction: column; gap: 4px; }
.tts-rate input[type="range"] { width: 100%; }
.tts-rate-steppers {
  display: flex; align-items: center; gap: 6px;
  justify-content: center;
}
.tts-autonav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  align-self: flex-start;
}
.tts-capture-host {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}
.tts-capture-row {
  display: flex; align-items: center; gap: 8px;
  justify-content: center;
  align-self: center;
}
.tts-capture-row .tts-capture-host { padding: 0; }
.tts-editor-head {
  display: flex; align-items: center; gap: 8px;
}
.tts-editor-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tts-nav-arrow {
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text, #ece6d8);
  border-radius: 4px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.tts-nav-arrow:hover:not(:disabled) { border-color: var(--accent, #d2a76b); }
.tts-nav-arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.tts-line-tick {
  width: 14px;
  font-size: 12px;
  text-align: right;
  color: transparent;  /* hidden until a state class is applied */
}
.tts-line-tick.line-only { color: var(--accent, #d2a76b); }   /* orange — line audio only */
.tts-line-tick.full      { color: var(--good,   #6dbf8f); }   /* green  — line + every segment */
.capture-left {
  position: relative;          /* positioning context for .tts-left-resize */
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.tts-left-resize {
  position: absolute;
  right: -10px; top: 0; bottom: 0; width: 8px;
  cursor: ew-resize;
  z-index: 5;
  background: linear-gradient(90deg, transparent 0, transparent 3px, var(--line-strong, #3a4f4c) 3px, var(--line-strong, #3a4f4c) 5px, transparent 5px);
}
.tts-left-resize:hover,
.tts-left-resize.dragging {
  background: linear-gradient(90deg, transparent 0, transparent 2px, var(--accent, #d2a76b) 2px, var(--accent, #d2a76b) 6px, transparent 6px);
}
.capture-lines-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 60%;
  overflow: hidden;
}
.capture-line-list {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto;
  flex: 1; min-height: 0;
}
.capture-line-row {
  display: grid;
  grid-template-columns: 30px auto 1fr 14px;
  gap: 8px; padding: 5px 10px;
  border-bottom: 1px solid var(--line, #2a3937);
  cursor: pointer;
  align-items: baseline;
  font-size: 12px;
}
.capture-line-row:hover { background: var(--bg-elev-2, #1c2826); }
.capture-line-row.selected {
  background: rgba(210,167,107,0.08);
  border-left: 3px solid var(--accent, #d2a76b);
  padding-left: 7px;
}
.capture-line-row.flagged .n { color: var(--accent, #d2a76b); }
.capture-line-row .n { font-variant-numeric: tabular-nums; color: var(--text-muted, #93a09d); font-size: 11px; }
.capture-line-row .spk { color: var(--text-muted, #93a09d); font-size: 10.5px; }
.capture-line-row .es { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capture-lab .voices-panel { flex: 0 0 auto; }

.capture-lab .capture-lines-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.capture-lab .capture-lines-head h2 { margin: 0; font-size: 14px; }
.capture-lab .capture-lines-head .muted { margin: 0; }

.line-text-compact { padding: 4px 0; }
.line-spanish-compact { margin: 0; font-size: 16px; color: var(--text, #ece6d8); }
.lab[hidden] { display: none; }

.panel-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.trim-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.trim-controls .control { font-size: 12px; color: var(--text-muted); }
.trim-controls input[type="number"] {
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.trim-note { font-size: 11px; margin: 0; }
.trim-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.trim-actions button { font-size: 12px; padding: 6px 12px; }
.trim-status {
  display: block;
  font-size: 12px;
  margin-top: 6px;
}
.trim-info {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-muted);
}
.trim-info:empty { display: none; }
.trim-info-heading {
  color: var(--text);
  font-weight: 600;
  margin-bottom: 6px;
}
.trim-info-hint {
  color: var(--text-dim);
  font-size: 11px;
}
.trim-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 2px;
}
.trim-info-list li {
  display: contents;
}
.trim-info-list .trim-row-label { color: var(--text-muted); }
.trim-info-list .trim-row-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.panel {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.panel-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.panel-head .muted { margin: 0; font-size: 12px; color: var(--text-muted); }

.muted { color: var(--text-muted); }

.control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.control span { letter-spacing: 0.3px; }

select,
input[type="text"],
input[type="number"],
textarea {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
}

textarea { resize: vertical; min-height: 44px; }

select:focus,
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.control.range input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.control.range output { color: var(--text); font-variant-numeric: tabular-nums; }

.voice-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.voice-controls .control,
.voice-controls .voice-actions { grid-column: span 1; }
.voice-controls .control:nth-child(1),
.voice-controls .control.range,
.voice-controls .voice-actions { grid-column: 1 / -1; }

button {
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 80ms ease, border-color 80ms ease;
}
button:hover { background: var(--line); }
button:active { background: var(--bg); }
button.primary {
  background: var(--accent);
  color: #1a1410;
  border-color: var(--accent-strong);
  font-weight: 600;
}
button.primary:hover { background: var(--accent-strong); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.voice-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.line-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.line-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.speaker-pill {
  display: inline-block;
  padding: 2px 10px;
  background: var(--bg-elev-2);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.4px;
  font-size: 11px;
  text-transform: uppercase;
}
.line-number {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  font-size: 12px;
}

.line-text {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.line-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.line-row p { margin: 0; line-height: 1.4; }
.line-row.spanish p { font-size: 18px; }
.line-row.english p { font-size: 14px; color: var(--text-muted); font-style: italic; }
.lang-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.line-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.line-rate {
  flex: 1 1 auto;
  min-width: 0;
}

.cache-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--bad);
  flex: 0 0 auto;
  align-self: center;
}
.cache-dot.green { background: var(--good); }
.cache-dot.red { background: var(--bad); }

.capture-square {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-rows: auto;
  gap: 6px;
  align-items: stretch;
  justify-items: stretch;
  flex: 0 0 auto;
}
.capture-square button.icon {
  min-width: 108px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
}
.capture-square button.icon .icon-glyph {
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
}
.capture-square button.icon .icon-label {
  font-size: 12px;
  letter-spacing: 0.2px;
}
.capture-square button.icon[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.capture-square button.icon.action-capture { color: var(--accent); border-color: var(--accent); }
.capture-square button.icon.action-save.saved {
  background: var(--good);
  color: #0b1a12;
  border-color: var(--good);
}
.capture-square-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.seg-rate-nudge {
  display: inline-flex;
  gap: 4px;
}
.seg-rate-nudge .nudge {
  padding: 2px 8px;
  font-size: 13px;
  line-height: 1.2;
  min-width: 28px;
}

.rate-stepper {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.rate-stepper button {
  font-size: 12px;
  padding: 2px 12px;
  line-height: 1.2;
  min-width: 44px;
}

.saved-meta {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-image {
  margin: 8px 0 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  border-radius: 8px;
}
.line-image:focus-visible {
  outline: 2px solid var(--accent, #5ab);
  outline-offset: 2px;
}
.line-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.line-image img[hidden] {
  display: none;
}
.line-image.empty {
  min-height: 64px;
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.line-image .line-image-placeholder {
  display: none;
  color: var(--muted, #888);
  font-size: 13px;
  padding: 18px 12px;
  text-align: center;
}
.line-image.empty .line-image-placeholder {
  display: block;
}

/* ---------------- image picker modal ---------------- */
.image-picker-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 90vw;
  max-height: 90vh;
  width: 90vw;
}
.image-picker-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.image-picker-panel {
  background: var(--bg, #fff);
  color: var(--fg, #111);
  border-radius: 10px;
  border: 1px solid var(--line, #ddd);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}
.image-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, #ddd);
}
.image-picker-head h2 {
  margin: 0;
  font-size: 16px;
}
.image-picker-head-actions {
  display: flex;
  gap: 8px;
}
.image-picker-grid {
  padding: 16px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.image-picker-thumb {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px;
  background: var(--panel-bg, transparent);
  border: 2px solid var(--line, #ddd);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.image-picker-thumb:hover {
  border-color: var(--accent, #5ab);
}
.image-picker-thumb.selected {
  border-color: var(--accent, #5ab);
  box-shadow: 0 0 0 2px var(--accent, #5ab);
}
.image-picker-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background: var(--bg, #f4f4f4);
}
.image-picker-thumb-name {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted, #666);
  overflow-wrap: anywhere;
  text-align: left;
}
.image-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted, #666);
  padding: 24px 12px;
}

.image-lightbox-body {
  padding: 16px;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-lightbox-body img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
}

/* ---------------- Image Anchors page (mockup 11) ---------------- */

.anchors-lab {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h, 60px));
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.anchors-storypin {
  background: var(--bg-elev-2, #1c2826);
  border-bottom: 1px solid var(--line, #2a3937);
  padding: 8px 18px;
  display: flex; align-items: center; gap: 12px;
  font-size: 12px;
}
.anchors-storypin-text { color: var(--text, #ece6d8); font-weight: 500; }
.anchors-storypin-hint { font-size: 11px; }
.anchors-page {
  flex: 1;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

/* ---- Anchors page redesign: library + scratchpad + preview ---- */
.anchors-page2 {
  flex: 1;
  display: grid;
  /* library: auto-sized (drag handle on its right edge drives style.width)
     scratchpad: user-resizable middle column, driven by --scratchpad-w
     preview: fills whatever's left, reaches right edge of the browser.
     Per UI_LAYOUT.md, do NOT put the var inside a flex shorthand basis; it's
     a grid column track here, where var() resolves reliably. */
  --scratchpad-w: 420px;
  grid-template-columns: auto var(--scratchpad-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 12px 0 12px 12px;
  min-height: 0;
}
.anchors-library {
  position: relative;
  width: 320px;
  align-self: stretch;
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-radius: 10px;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.anchors-library-head {
  padding: 10px 12px;
  background: var(--bg-elev-2, #1c2826);
  border-bottom: 1px solid var(--line, #2a3937);
  display: flex; align-items: center; gap: 8px;
}
.anchors-library-head h2 { margin: 0; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anchors-library-head button { font-size: 11px; padding: 4px 10px; }
.anchors-library-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.anchors-library-section {
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  border-radius: 6px;
}
.anchors-library-section > summary {
  list-style: none;
  padding: 8px 10px;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
}
.anchors-library-section > summary::-webkit-details-marker { display: none; }
.anchors-lines-sort-btn {
  margin-left: auto;
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text-muted, #93a09d);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 10px;
  cursor: pointer;
  font-family: inherit;
}
.anchors-lines-sort-btn:hover { border-color: var(--accent, #d2a76b); color: var(--text, #ece6d8); }
.anchors-library-section > summary::before {
  content: "▾";
  font-size: 9px;
  color: var(--text-dim, #687572);
  transition: transform 0.15s;
}
.anchors-library-section:not([open]) > summary::before { transform: rotate(-90deg); }
.anchors-library-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px;
  border-top: 1px solid var(--line, #2a3937);
}
.anchors-library-resize {
  position: absolute;
  right: -4px; top: 0; bottom: 0; width: 8px;
  cursor: ew-resize;
  z-index: 5;
  background: linear-gradient(90deg, transparent 0, transparent 3px, var(--line-strong, #3a4f4c) 3px, var(--line-strong, #3a4f4c) 5px, transparent 5px);
}
.anchors-library-resize:hover {
  background: linear-gradient(90deg, transparent 0, transparent 2px, var(--accent, #d2a76b) 2px, var(--accent, #d2a76b) 6px, transparent 6px);
}

.lib-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  align-items: center;
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-radius: 5px;
  padding: 4px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.lib-card:hover { border-color: var(--line-strong, #3a4f4c); }
.lib-card.in-scratchpad { border-color: var(--accent, #d2a76b); box-shadow: 0 0 0 1px rgba(210,167,107,0.25); }
.lib-thumb {
  width: 56px; height: 42px;
  display: grid; place-items: center;
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  border-radius: 3px;
  overflow: hidden;
  font-size: 14px;
  color: var(--text-dim, #687572);
}
.lib-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lib-thumb-character { background: linear-gradient(135deg, #2d3d54, #1e2a3b); color: #7aa9d4; }
.lib-thumb-anchor    { background: linear-gradient(135deg, #463928, #2c2418); color: var(--accent, #d2a76b); }
.lib-thumb-pool      { background: linear-gradient(135deg, #2c3a32, #1f2924); color: #6dbf8f; }
.lib-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lib-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-sub  { font-size: 10.5px; color: var(--text-muted, #93a09d); }
.lib-card-line,
.lib-card-ref {
  grid-template-columns: 56px 1fr auto;
  cursor: pointer;
}
.lib-unpromote-btn {
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  color: var(--text-muted, #93a09d);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}
.lib-unpromote-btn:hover { border-color: var(--bad, #d76a6a); color: var(--bad, #d76a6a); }
.lib-ref-actions {
  display: flex; flex-direction: column; gap: 4px;
  align-self: center;
}
.lib-add-scratch-btn {
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  color: var(--text-muted, #93a09d);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}
.lib-add-scratch-btn:hover { border-color: var(--accent, #d2a76b); color: var(--accent, #d2a76b); }
.lib-promote {
  display: flex; flex-direction: column; gap: 4px;
}
.lib-promote-btn {
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  color: var(--text-muted, #93a09d);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.lib-promote-btn:hover { border-color: var(--accent, #d2a76b); color: var(--text, #ece6d8); }

.anchors-scratchpad {
  position: relative;   /* positioning context for the right-edge resize handle */
  align-self: start;
  max-height: 100%;
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--accent, #d2a76b);
  border-radius: 10px;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
/* Handle sits flush inside the scratchpad's right edge (per UI_LAYOUT.md:
   keep the handle inside the panel so overflow:hidden doesn't clip it). */
.anchors-scratchpad-resize {
  position: absolute;
  right: 0; top: 0; bottom: 0; width: 8px;
  cursor: ew-resize;
  z-index: 5;
  background: linear-gradient(90deg, transparent 0 3px, var(--line-strong, #3a4f4c) 3px 5px, transparent 5px);
}
.anchors-scratchpad-resize:hover,
.anchors-scratchpad-resize.dragging {
  background: linear-gradient(90deg, transparent 0 2px, var(--accent, #d2a76b) 2px 6px, transparent 6px);
}
.anchors-preview {
  align-self: stretch;
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-right: none;
  border-radius: 10px 0 0 10px;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.anchors-preview-head {
  padding: 10px 16px;
  background: var(--bg-elev-2, #1c2826);
  border-bottom: 1px solid var(--line, #2a3937);
  display: flex; align-items: baseline; gap: 10px;
}
.anchors-preview-head h2 { margin: 0; font-size: 13px; }
.anchors-preview-body {
  flex: 1; min-height: 0;
  display: grid; place-items: center;
  padding: 12px;
  background: var(--bg, #0a100f);
  overflow: hidden;
}
.anchors-preview-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.anchors-scratchpad-head {
  padding: 10px 16px;
  background: var(--bg-elev-2, #1c2826);
  border-bottom: 1px solid var(--line, #2a3937);
}
.anchors-scratchpad-head h2 { margin: 0; font-size: 14px; }

.anchors-scratchpad-context {
  padding: 10px 16px;
  background: var(--bg-elev-2, #1c2826);
  border-bottom: 1px solid var(--line, #2a3937);
  display: flex; flex-direction: column; gap: 8px;
}
.anchors-scratchpad-context-row {
  --scratchpad-context-left-w: 200px;
  display: grid;
  grid-template-columns: var(--scratchpad-context-left-w) 6px 1fr;
  gap: 8px;
  align-items: stretch;
}
.anchors-scratchpad-context-resize {
  width: 6px;
  cursor: ew-resize;
  align-self: stretch;
  background: linear-gradient(90deg, transparent 0 2px, var(--line-strong, #3a4f4c) 2px 4px, transparent 4px);
  border-radius: 2px;
}
.anchors-scratchpad-context-resize:hover,
.anchors-scratchpad-context-resize.dragging {
  background: linear-gradient(90deg, transparent 0 1px, var(--accent, #d2a76b) 1px 5px, transparent 5px);
}
.anchors-scratchpad-prev-image {
  margin: 0;
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  border-radius: 6px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 120px;
}
.anchors-scratchpad-prev-image img {
  width: 100%;
  flex: 1;
  min-height: 0;
  max-height: 200px;
  object-fit: contain;
  border-radius: 4px;
}
.anchors-scratchpad-prev-image figcaption {
  font-size: 10.5px;
  text-align: center;
}
.anchors-scratchpad-prev-text {
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px;
  min-width: 0;
  overflow-y: auto;
  /* Fit ~3 rows comfortably so the 6-row window (2 prev + cur + 3 next) is
     always scrollable and the centred current row has space above and below. */
  max-height: 132px;
}
.anchors-scratchpad-prev-line {
  display: grid;
  grid-template-columns: 24px auto 1fr 14px;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
  padding: 2px 6px;
  border-radius: 3px;
  margin: 0 -6px;        /* let the highlight bleed slightly into container padding */
  cursor: pointer;
}
.anchors-scratchpad-prev-line:hover:not(.current) {
  background: var(--bg-elev-2, #1c2826);
}
.anchors-scratchpad-prev-line .img-tick {
  text-align: right;
  font-size: 11px;
  color: var(--good, #6dbf8f);
  line-height: 1;
}
.anchors-scratchpad-prev-line.current {
  background: rgba(210, 167, 107, 0.14);
  border-left: 3px solid var(--accent, #d2a76b);
  padding-left: 5px;
  margin-left: -8px;
}
.anchors-scratchpad-prev-line.current .n,
.anchors-scratchpad-prev-line.current .spk { color: var(--accent, #d2a76b); }
.anchors-scratchpad-prev-line.current .es  { color: var(--text, #ece6d8); font-weight: 500; }
.anchors-scratchpad-prev-line .n {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #93a09d);
  font-size: 10.5px;
}
.anchors-scratchpad-prev-line .spk {
  color: var(--text-muted, #93a09d);
  font-size: 10.5px;
}
.anchors-scratchpad-prev-line .es {
  min-width: 0;
  /* Wrap long lines instead of truncating with ellipsis. break-word avoids
     a single very long token blowing past the column. */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.35;
}
.anchors-scratchpad-line-nav {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  gap: 8px;
  align-items: center;
}
.anchors-line-nav-arrow {
  width: 28px; height: 28px;
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text, #ece6d8);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: grid; place-items: center;
}
.anchors-line-nav-arrow:hover:not(:disabled) { border-color: var(--accent, #d2a76b); }
.anchors-line-nav-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.anchors-scratchpad-line-text {
  font-size: 12.5px;
  color: var(--text, #ece6d8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  text-align: center;
}
.anchors-scratchpad-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.anchors-scratchpad-images {
  display: flex; flex-wrap: wrap; gap: 8px;
  min-height: 44px;
  padding: 8px;
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  border-radius: 6px;
}
.scratchpad-img {
  position: relative;
  width: 84px;
  display: flex; flex-direction: column; gap: 2px;
}
.scratchpad-img-thumb {
  width: 84px; height: 64px;
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  border-radius: 3px;
  overflow: hidden;
  display: grid; place-items: center;
}
.scratchpad-img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.scratchpad-img-cap {
  font-size: 9.5px;
  color: var(--text-muted, #93a09d);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scratchpad-img-rm {
  position: absolute;
  top: 2px; right: 2px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  color: var(--text, #ece6d8);
  border: none;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 0;
}
.scratchpad-img-rm:hover { background: var(--bad, #d76a6a); }
.scope-tag.info { background: rgba(122,169,212,0.18); color: var(--info, #7aa9d4); border: 1px solid var(--info, #7aa9d4); font-size: 10px; padding: 1px 6px; border-radius: 3px; }
.scope-tag.muted-tag { background: var(--bg, #0a100f); color: var(--text-dim, #687572); border: 1px solid var(--line, #2a3937); font-size: 10px; padding: 1px 6px; border-radius: 3px; }
.lib-card-hidden { opacity: 0.6; }
.lib-card-hidden:hover { opacity: 1; }

/* ---- Image-library per-section controls (gallery toggle + size) ---- */
.lib-section-controls {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lib-size-btn, .lib-view-toggle {
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text-muted, #93a09d);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 10px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.3;
}
.lib-size-btn { padding: 1px 7px; font-weight: bold; }
.lib-size-btn:hover, .lib-view-toggle:hover {
  border-color: var(--accent, #d2a76b);
  color: var(--text, #ece6d8);
}
/* In list view, size buttons don't do anything visible — hide them so the
   summary stays tidy. Toggle still says "gallery" so user can switch in. */
.anchors-library-section:has(.anchors-library-body.view-list) .lib-size-btn {
  display: none;
}

/* ---- Gallery view: image-only square cells, sized via --lib-gallery-size ---- */
.anchors-library-body.view-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--lib-gallery-size, 90px), 1fr));
  gap: 4px;
  padding: 6px;
}
.anchors-library-body.view-gallery .lib-card {
  grid-template-columns: 1fr;
  padding: 0;
  border-radius: 4px;
}
.anchors-library-body.view-gallery .lib-card .lib-meta,
.anchors-library-body.view-gallery .lib-card .lib-ref-actions,
.anchors-library-body.view-gallery .lib-card .lib-promote {
  display: none;
}
.anchors-library-body.view-gallery .lib-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
}
.anchors-library-body.view-gallery .lib-thumb img {
  object-fit: contain;     /* see the whole image, no cropping */
}
.lib-hide-btn:hover { border-color: var(--bad, #d76a6a); color: var(--bad, #d76a6a); }

.anchors-right-images {
  position: relative;
  width: 280px;
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-radius: 10px;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.anchors-right-images-resize {
  position: absolute;
  left: -3px; top: 0; bottom: 0; width: 6px;
  cursor: ew-resize;
  z-index: 5;
}
.anchors-right-images-resize:hover { background: rgba(210,167,107,0.20); }
.anchors-right-images-head {
  padding: 8px 12px;
  background: var(--bg-elev-2, #1c2826);
  border-bottom: 1px solid var(--line, #2a3937);
  display: flex; align-items: center; gap: 10px;
}
.anchors-zoom-controls {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
}
.anchors-zoom-controls button {
  width: 22px; height: 22px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.anchors-image-browser {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(var(--anchor-thumb-size, 96px), 1fr));
  align-content: start;
}
.anchors-image-browser .ib-card {
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  border-radius: 6px;
  overflow: hidden;
  display: flex; flex-direction: column;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.anchors-image-browser .ib-card:hover { border-color: var(--line-strong, #3a4f4c); }
.anchors-image-browser .ib-thumb {
  aspect-ratio: 1;
  background: var(--bg, #0a100f);
  display: grid; place-items: center;
  overflow: hidden;
}
.anchors-image-browser .ib-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.anchors-image-browser .ib-cap {
  padding: 4px 6px;
  font-size: 10.5px;
  color: var(--text, #ece6d8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anchors-image-browser .ib-src {
  font-size: 9.5px;
  color: var(--text-muted, #93a09d);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 6px 4px;
}

.anchors-scope {
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  border-radius: 6px;
  margin-top: 8px;
}
.anchors-scope > summary {
  list-style: none;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}
.anchors-scope > summary::-webkit-details-marker { display: none; }
.anchors-scope > summary .scope-tick {
  margin-left: auto;        /* push to right edge of the flex summary */
  color: var(--good, #6dbf8f);
  font-size: 13px;
  font-weight: bold;
  display: none;            /* shown only when the scope has content */
}
.anchors-scope.has-content > summary .scope-tick { display: inline; }
.anchors-scope textarea {
  width: 100%;
  border: none;
  border-top: 1px solid var(--line, #2a3937);
  background: var(--bg, #0a100f);
  color: var(--text, #ece6d8);
  border-radius: 0 0 6px 6px;
  padding: 10px 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
}

.prompt-toolbar {
  display: flex; gap: 6px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-elev-2, #1c2826);
  border-top: 1px solid var(--line, #2a3937);
  border-bottom: 1px solid var(--line, #2a3937);
  font-size: 11px;
  flex-wrap: wrap;
}
.prompt-import-btn {
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text-muted, #93a09d);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 10.5px;
  cursor: pointer;
  line-height: 1.4;
}
.prompt-import-btn:hover { border-color: var(--accent, #d2a76b); color: var(--text, #ece6d8); }
.prompt-include-script {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  color: var(--text-muted, #93a09d);
  cursor: pointer;
  font-size: 10.5px;
}
.prompt-include-script input { margin: 0; }

.anchors-palette {
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-radius: 10px;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.anchors-palette-section {
  display: flex; flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  border-bottom: 1px solid var(--line, #2a3937);
}
/* Last open section absorbs any leftover vertical space. */
.anchors-palette-section[open]:last-of-type { flex: 1 1 auto; }
.anchors-palette-section:last-child { border-bottom: none; }
.anchors-palette-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg-elev-2, #1c2826);
  border-bottom: 1px solid var(--line, #2a3937);
  cursor: pointer;
  list-style: none;
}
.anchors-palette-head::-webkit-details-marker { display: none; }
.anchors-palette-head::before {
  content: "▾";
  font-size: 9px;
  color: var(--text-dim, #687572);
  transition: transform 0.15s;
  margin-right: 2px;
}
.anchors-palette-section:not([open]) > .anchors-palette-head::before { transform: rotate(-90deg); }
.anchors-palette-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted, #93a09d);
  flex: 1;
}
.anchors-palette-chars .anchors-palette-label { color: var(--info, #7aa9d4); }
.anchors-palette-anchors .anchors-palette-label { color: var(--text, #ece6d8); }
.anchors-palette-count {
  background: var(--bg-elev, #131c1b);
  color: var(--text-muted, #93a09d);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
}
.anchors-palette-head button {
  font-size: 11px;
  padding: 1px 8px;
}
.anchors-palette-body {
  padding: 8px;
  overflow-y: auto;
  flex: 1 1 auto; min-height: 0;
  max-height: 60vh;
  display: flex; flex-direction: column; gap: 6px;
}
.pal-empty {
  color: var(--text-dim, #687572);
  font-size: 11px;
  text-align: center;
  padding: 12px 8px;
  margin: 0;
}

.pal-card {
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  border-radius: 6px;
  padding: 5px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  cursor: pointer;
  align-items: center;
}
.pal-card:hover { border-color: var(--line-strong, #3a4f4c); }
.pal-card.current { border-color: var(--accent, #d2a76b); background: rgba(210,167,107,0.06); }
.pal-thumb {
  width: 44px; height: 44px; border-radius: 4px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px;
  overflow: hidden;
  position: relative;
}
.pal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pal-thumb-character { background: linear-gradient(135deg, #6a4232, #4a2a22); color: #f1c8a8; }
.pal-thumb-anchor    { background: linear-gradient(135deg, #3e4e3a, #2a3937); color: #cda; }
.pal-meta { font-size: 11.5px; min-width: 0; }
.pal-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-ver { color: var(--text-muted, #93a09d); font-size: 10.5px; }
.pal-associated-flag { font-size: 9.5px; color: var(--accent, #d2a76b); margin-top: 2px; }

.anchors-working {
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--accent, #d2a76b);
  border-radius: 10px;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.anchors-working-head {
  padding: 12px 16px;
  background: var(--bg-elev-2, #1c2826);
  border-bottom: 1px solid var(--line, #2a3937);
  display: flex; align-items: center; gap: 12px;
}
.anchors-working-badge {
  width: 44px; height: 44px; border-radius: 8px;
  background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
  color: var(--accent, #d2a76b);
  border: 1px dashed var(--accent, #d2a76b);
  display: grid; place-items: center;
  font-weight: 700; font-size: 18px;
  overflow: hidden;
}
.anchors-working-titles { flex: 1; min-width: 0; }
.anchors-working-titles h2 { margin: 0; font-size: 16px; }
.anchors-working-titles .muted { font-size: 11.5px; margin-top: 2px; }
.anchors-working-actions .anchors-upload-label {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line-strong, #3a4f4c);
  border-radius: 4px;
  background: var(--bg-elev-2, #1c2826);
  font-size: 12px;
  cursor: pointer;
}
.anchors-working-actions .anchors-upload-label:hover { background: var(--line, #2a3937); }
.anchors-working-body {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.anchors-section-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted, #93a09d);
  display: flex; align-items: center; gap: 8px;
}
.anchors-section-label .muted { font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--text-dim, #687572); font-weight: normal; }
.anchors-assoc-list { display: flex; flex-direction: column; gap: 4px; }
.assoc-empty {
  color: var(--text-dim, #687572);
  font-size: 11.5px;
  padding: 10px 12px;
  border: 1px dashed var(--line, #2a3937);
  border-radius: 6px;
  margin: 0;
}
.assoc-row {
  display: grid;
  grid-template-columns: 22px 28px 1fr auto auto;
  gap: 8px; align-items: center;
  padding: 6px 10px;
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  border-radius: 6px;
  font-size: 12px;
}
.assoc-row.unchecked { opacity: 0.55; background: transparent; border-style: dashed; }
.assoc-row.unchecked .assoc-name { text-decoration: line-through; color: var(--text-muted, #93a09d); }
.assoc-row input[type="checkbox"] { accent-color: var(--accent, #d2a76b); width: 14px; height: 14px; }
.assoc-sw {
  width: 28px; height: 28px; border-radius: 4px;
  overflow: hidden;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px;
  color: var(--text, #ece6d8);
}
.assoc-sw img { width: 100%; height: 100%; object-fit: cover; }
.assoc-sw-character { background: linear-gradient(135deg, #6a4232, #4a2a22); color: #f1c8a8; }
.assoc-sw-anchor    { background: linear-gradient(135deg, #3e4e3a, #2a3937); color: #cda; }
.assoc-name-wrap { display: flex; flex-direction: column; min-width: 0; }
.assoc-name { font-weight: 600; }
.assoc-kind { font-size: 10px; color: var(--text-dim, #687572); text-transform: uppercase; letter-spacing: 0.04em; }
.assoc-role {
  background: var(--bg, #0a100f);
  color: var(--text, #ece6d8);
  border: 1px solid var(--line, #2a3937);
  border-radius: 3px;
  font-size: 11px;
  padding: 1px 4px;
  font-family: inherit;
}
.assoc-remove {
  background: transparent;
  border: none;
  color: var(--text-dim, #687572);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}
.assoc-remove:hover { color: var(--bad, #d76a6a); background: transparent; }

.anchors-prompt {
  width: 100%;
  border: 1px solid var(--line, #2a3937);
  background: var(--bg, #0a100f);
  color: var(--text, #ece6d8);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
  min-height: 160px;
}

.anchors-working-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--line, #2a3937);
  background: var(--bg-elev-2, #1c2826);
  display: flex; gap: 8px; align-items: center;
}
.anchors-working-footer .muted { font-size: 11px; margin-left: auto; }
.scratchpad-prevline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted, #93a09d);
  cursor: pointer;
  user-select: none;
}
.scratchpad-prevline-toggle input { cursor: pointer; }
#anchorsScratchpadIncludePrevHint { font-size: 10.5px; color: var(--text-dim, #687572); }

.anchors-right { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.anchors-right-section {
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-radius: 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
  flex: 1 1 50%;
  min-height: 0;
}
.anchors-md {
  margin: 0;
  padding: 10px 12px;
  flex: 1; min-height: 0; overflow-y: auto;
  background: #0a0e0d;
  color: #d6e0c4;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.anchors-iterations {
  padding: 8px 12px;
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.iter-empty {
  color: var(--text-dim, #687572);
  font-size: 11.5px;
  padding: 10px 8px;
  margin: 0;
  text-align: center;
}
.iter-row {
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
  display: flex; flex-direction: column; gap: 4px;
}
.iter-head { display: flex; gap: 8px; align-items: baseline; }
.iter-ver { font-weight: 700; font-variant-numeric: tabular-nums; }
.iter-when { color: var(--text-muted, #93a09d); font-size: 10.5px; flex: 1; }
.iter-verdict { font-size: 10px; padding: 1px 6px; border-radius: 3px; }
.iter-verdict-pending { color: var(--warn, #d49a4a); border: 1px solid rgba(212,154,74,0.45); }
.iter-verdict-good { color: var(--good, #6dbf8f); border: 1px solid rgba(109,191,143,0.45); }
.iter-verdict-bad  { color: var(--bad,  #d76a6a); border: 1px solid rgba(215,106,106,0.45); }
.iter-set { color: var(--text, #ece6d8); font-size: 11px; }
.iter-notes { color: var(--text-muted, #93a09d); font-size: 11px; font-style: italic; }

.lines-lab {
  display: grid;
  --lines-left-w: 280px;
  grid-template-columns: var(--lines-left-w) minmax(0, 1fr);
  /* Without an explicit row, grid sizes the row to content and the panel
     stops where the right-side editor ends. minmax(0, 1fr) forces the row
     to fill the lab's height so the panel reaches the viewport bottom. */
  grid-template-rows: minmax(0, 1fr);
  /* CRITICAL: .lab base sets align-items: start, which leaves grid items at
     min-content height instead of stretching to the row. The inner flex
     column on .lines-line-panel then has nothing to grow into, so its
     overflow-y: auto never activates. Stretch lets the panel fill the row. */
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  height: calc(100vh - var(--topbar-h, 60px));
  min-height: 0;
  overflow: hidden;
}
.lines-line-panel {
  position: relative;  /* positioning context for the absolute resize handle */
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-radius: 10px;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.lines-left-resize {
  position: absolute;
  right: 0; top: 0; bottom: 0; width: 8px;
  cursor: ew-resize;
  z-index: 5;
  background: linear-gradient(90deg, transparent 0, transparent 3px, var(--line-strong, #3a4f4c) 3px, var(--line-strong, #3a4f4c) 5px, transparent 5px);
}
.lines-left-resize:hover,
.lines-left-resize.dragging {
  background: linear-gradient(90deg, transparent 0, transparent 2px, var(--accent, #d2a76b) 2px, var(--accent, #d2a76b) 6px, transparent 6px);
}
.lines-line-panel-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #2a3937);
  background: var(--bg-elev-2, #1c2826);
}
.lines-line-panel-head h2 { margin: 0; font-size: 13px; }
.lines-line-list {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto; flex: 1; min-height: 0;
}
.lines-line-row {
  display: grid;
  grid-template-columns: 30px auto 1fr;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line, #2a3937);
  cursor: pointer;
  align-items: baseline;
}
.lines-line-row:hover { background: var(--bg-elev-2, #1c2826); }
.lines-line-row.selected {
  background: rgba(210,167,107,0.08);
  border-left: 3px solid var(--accent, #d2a76b);
  padding-left: 7px;
}
.lines-line-row.flagged .n { color: var(--accent, #d2a76b); }
.lines-line-row .n { font-variant-numeric: tabular-nums; color: var(--text-muted, #93a09d); font-size: 11.5px; }
.lines-line-row .spk { color: var(--text-muted, #93a09d); font-size: 11px; }
.lines-line-row .es { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lines-right {
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden; gap: 12px;
}

.lines-images-row {
  position: relative;
  height: 240px;
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-radius: 10px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 12px;
  min-height: 100px;
  overflow: hidden;
}
.lines-img-figure {
  margin: 0;
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  border-radius: 8px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
  align-items: stretch;
  min-height: 0;
}
.lines-img-figure.lines-img-current { border-color: var(--accent, #d2a76b); }
.lines-img-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted, #93a09d);
}
.lines-img-figure img {
  flex: 1; min-height: 0;
  width: 100%;
  object-fit: contain;
  border-radius: 4px;
  background: var(--bg, #0a100f);
}
.lines-img-figure figcaption { font-size: 10.5px; color: var(--text-dim, #687572); }
.lines-img-figure button { margin-top: 4px; font-size: 11px; padding: 2px 8px; }
.lines-images-row-resize {
  position: absolute;
  left: 0; right: 0; bottom: -3px; height: 6px;
  cursor: ns-resize; z-index: 5;
}
.lines-images-row-resize:hover { background: rgba(210,167,107,0.20); }

.lines-edit-panel {
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
}

/* Lines text row — speaker shrinks to content, Spanish fills */
.lines-text-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.lines-speaker-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 80px;
  align-self: flex-start;
}
.lines-text-row textarea {
  flex: 1 1 auto;
  width: 100%;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--line, #2a3937);
  border-radius: 4px;
  background: var(--bg, #0a100f);
  color: inherit;
  resize: vertical;
  min-height: 36px;
}

/* Segments table */
.lines-segments-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 12px;
}
.lines-segments-table th,
.lines-segments-table td {
  border-bottom: 1px solid var(--line, #2a3937);
  padding: 4px 6px;
  vertical-align: middle;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.lines-segments-table th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted, #93a09d);
  font-weight: 600;
  background: var(--bg-elev-2, #1c2826);
}
.lines-segments-table td.col-num { color: var(--text-muted, #93a09d); font-variant-numeric: tabular-nums; text-align: right; }
.lines-segments-table .col-num   { width: 36px; }
.lines-segments-table .col-es    { width: 30%; }
.lines-segments-table .col-en    { width: 30%; }
.lines-segments-table .col-note  { width: 30%; }
.lines-segments-table .col-rm    { width: 28px; }
.lines-segments-table input {
  width: 100%;
  background: var(--bg, #0a100f);
  color: var(--text, #ece6d8);
  border: 1px solid var(--line, #2a3937);
  border-radius: 3px;
  padding: 4px 6px;
  font: inherit;
  box-sizing: border-box;
}
.lines-segments-table .seg-remove {
  background: transparent;
  border: none;
  color: var(--text-dim, #687572);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
}
.lines-segments-table .seg-remove:hover { color: var(--bad, #d76a6a); }
.lines-segments-table .col-resize {
  position: absolute;
  right: -4px; top: 0; bottom: 0; width: 8px;
  cursor: col-resize;
  user-select: none;
  z-index: 5;
  background: linear-gradient(90deg, transparent 0, transparent 3px, var(--line-strong, #3a4f4c) 3px, var(--line-strong, #3a4f4c) 5px, transparent 5px);
}
.lines-segments-table .col-resize:hover,
.lines-segments-table .col-resize.dragging {
  background: linear-gradient(90deg, transparent 0, transparent 2px, var(--accent, #d2a76b) 2px, var(--accent, #d2a76b) 6px, transparent 6px);
}

.lines-text-editor textarea,
.lines-segments-editor textarea,
.lines-segments-editor input[type="text"] {
  width: 100%;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--line, #ddd);
  border-radius: 4px;
  background: var(--bg, #fff);
  color: inherit;
  resize: vertical;
}

.editor-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.lines-selected-image {
  margin: 0;
  padding: 0;
}
.lines-selected-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.lines-selected-image img:not([src]),
.lines-selected-image img[src=""] {
  display: none;
}

.lines-segment-row {
  display: grid;
  grid-template-columns: 24px 1fr 1fr 1fr auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.lines-segment-row .seg-num {
  font-size: 11px;
  color: var(--muted, #888);
  text-align: right;
}
.lines-segment-row .seg-remove {
  padding: 2px 6px;
  font-size: 11px;
}

@media (max-width: 900px) {
  .anchors-page {
    grid-template-columns: 1fr;
  }
  .lines-lab {
    grid-template-columns: 1fr;
    grid-template-areas:
      "pickers"
      "image"
      "editors"
      "pool";
  }
  .lines-image-panel { position: static; }
}
.segment-row .saved-meta {
  margin-bottom: 4px;
}

/* ---------------- Images page (per-line prompt engineering) ---------------- */

.images-lab {
  display: flex; flex-direction: column;
  padding: 0;
  height: calc(100vh - var(--topbar-h, 60px));
  min-height: 0;
  overflow: hidden;
}
.images-page {
  flex: 1;
  display: flex;
  flex-direction: row;
  --images-left-w: 320px;
  --images-right-w: 280px;
  gap: 12px;
  padding: 12px 0 12px 12px;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.images-line-panel, .images-right {
  position: relative;  /* positioning context for the absolute resize handle inside */
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-radius: 10px;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
/* Flex sizing — DOM order is: line list (left) | pool (middle) | prompt (right).
   The pool absorbs free space; the two edge panels are fixed-width and
   user-resizable. basis 0 + grow 1 on the elastic panel keeps the resize
   math predictable. */
.images-line-panel {
  flex: 0 0 auto;
  width: var(--images-left-w);
  min-width: 0;
}
.images-right {
  flex: 1 1 0;
  min-width: 0;
}
.images-working {
  flex: 0 0 auto;
  width: var(--images-right-w);
  min-width: 0;
}
.images-left-resize {
  position: absolute;
  right: 0; top: 0; bottom: 0; width: 8px;
  cursor: ew-resize;
  z-index: 5;
  background: linear-gradient(90deg, transparent 0, transparent 3px, var(--line-strong, #3a4f4c) 3px, var(--line-strong, #3a4f4c) 5px, transparent 5px);
}
.images-left-resize:hover,
.images-left-resize.dragging {
  background: linear-gradient(90deg, transparent 0, transparent 2px, var(--accent, #d2a76b) 2px, var(--accent, #d2a76b) 6px, transparent 6px);
}
.images-line-panel-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #2a3937);
  background: var(--bg-elev-2, #1c2826);
}
.images-line-panel-head h2 { margin: 0; font-size: 13px; }

.images-line-list {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto; flex: 1; min-height: 0;
}
.images-line-row {
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line, #2a3937);
  cursor: pointer;
  align-items: center;
}
.images-line-row:hover { background: var(--bg-elev-2, #1c2826); }
.images-line-row:focus-visible { outline: 2px solid var(--accent, #d2a76b); outline-offset: -2px; }
.images-line-row.selected {
  background: rgba(210,167,107,0.08);
  border-left: 3px solid var(--accent, #d2a76b);
  padding-left: 7px;
}
.images-line-tick {
  width: 14px; text-align: center;
  color: var(--good, #6dbf8f);
  font-size: 12px;
}
.images-line-thumb {
  width: 42px; height: 32px;
  border-radius: 4px;
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  display: grid; place-items: center;
  font-size: 12px;
  color: var(--text-dim, #687572);
  overflow: hidden;
}
.images-line-thumb img { width: 100%; height: 100%; object-fit: cover; }
.images-line-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; }
.images-line-n { color: var(--text-muted, #93a09d); font-variant-numeric: tabular-nums; }
.images-line-speaker { color: var(--text-muted, #93a09d); font-size: 10.5px; }
.images-line-es { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.images-line-file {
  font-size: 10px;
  color: var(--text-dim, #687572);
  font-family: ui-monospace, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.images-line-file.muted { font-style: italic; opacity: 0.7; }
.images-line-tags { display: flex; gap: 4px; }
.images-line-tags .tag.flag { font-size: 11px; padding: 0 5px; }

.images-working {
  /* Prompt panel — now the rightmost column; sits flush against the browser's
     right edge (no right border, squared right corners). position: relative so
     the .images-right-resize handle on its LEFT edge is anchored to it. */
  position: relative;
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--accent, #d2a76b);
  border-right: none;
  border-radius: 10px 0 0 10px;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.images-working-head {
  padding: 10px 16px;
  background: var(--bg-elev-2, #1c2826);
  border-bottom: 1px solid var(--line, #2a3937);
  display: flex; align-items: center; gap: 8px;
}
.images-working-head h2 { margin: 0; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.images-nav-arrow {
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text, #ece6d8);
  border-radius: 4px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.images-nav-arrow:hover:not(:disabled) { border-color: var(--accent, #d2a76b); }
.images-nav-arrow:disabled { opacity: 0.4; cursor: not-allowed; }

.images-link-button {
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text, #ece6d8);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  margin-left: 8px;
  white-space: nowrap;
  font-family: inherit;
}
.images-link-button:hover:not(:disabled) { border-color: var(--accent, #d2a76b); color: var(--accent, #d2a76b); }
.images-link-button:not(:disabled) {
  background: rgba(210,167,107,0.12);
  border-color: var(--accent, #d2a76b);
  color: var(--accent, #d2a76b);
}
.images-link-button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Cycle button: same shell as Link but neutral colour even when enabled —
   Link is the primary action, Cycle is the supporting browse action. */
.images-cycle-button {
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text-muted, #93a09d);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  margin-left: 8px;
  white-space: nowrap;
  font-family: inherit;
}
.images-cycle-button:hover:not(:disabled) { border-color: var(--accent, #d2a76b); color: var(--text, #ece6d8); }
.images-cycle-button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Pool card "selected for linking" — distinct dashed-orange affordance vs the
   solid border used for "currently assigned to this line". */
.images-browser-card.link-pending {
  border: 2px dashed var(--accent, #d2a76b) !important;
  background: rgba(210,167,107,0.10);
}

/* Brief flash to confirm a link was made (applied to both ends). */
@keyframes images-link-blink {
  0%, 100% { background-color: transparent; }
  20%, 60% { background-color: rgba(210,167,107,0.50); }
}
.blink-confirm {
  animation: images-link-blink 0.7s ease-in-out;
}

.images-working > .images-current-figure,
.images-working > .images-prompts,
.images-working > .images-md-details { margin: 12px 16px; }
.images-working {
  overflow-y: auto;
}

.images-preview-figure {
  margin: 0;
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  border-radius: 8px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.images-current-figure {
  position: relative;
  min-height: 200px;
  height: 320px;
  overflow: hidden;
}
.images-current-figure.is-pending {
  outline: 2px dashed var(--accent, #d2a76b);
  outline-offset: -2px;
}
.images-current-figure img {
  width: 100%;
  height: calc(100% - 36px);
  object-fit: contain;
  display: block;
  border-radius: 4px;
  background: var(--bg, #0a100f);
}
.images-current-figure figcaption {
  font-size: 10.5px;
  color: var(--text-dim, #687572);
  overflow-wrap: anywhere;
}
.images-current-resize {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8px;
  cursor: ns-resize;
  background: linear-gradient(0deg, transparent 0 3px, var(--line-strong, #3a4f4c) 3px 5px, transparent 5px);
  z-index: 4;
  touch-action: none;  /* prevent the browser from interpreting the drag as scroll */
}
.images-current-resize:hover,
.images-current-resize.dragging {
  background: linear-gradient(0deg, transparent 0 2px, var(--accent, #d2a76b) 2px 6px, transparent 6px);
}
.images-change-current {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 11px;
  padding: 3px 8px;
}

.images-prompts { display: flex; flex-direction: column; gap: 10px; padding-top: 0 !important; }
.images-scope {
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  border-radius: 6px;
}
.images-scope > summary {
  list-style: none;
  padding: 8px 10px;
  cursor: pointer;
  display: flex; gap: 8px; align-items: center;
  font-size: 11px;
}
.images-scope > summary::-webkit-details-marker { display: none; }
.images-scope .scope-tag {
  font-size: 10px; padding: 1px 6px; border-radius: 3px;
}
.images-scope .scope-tag.global { background: rgba(122,169,212,0.15); color: var(--info, #7aa9d4); border: 1px solid rgba(122,169,212,0.4); }
.images-scope .scope-tag.story  { background: rgba(109,191,143,0.15); color: var(--good, #6dbf8f); border: 1px solid rgba(109,191,143,0.4); }
.scope-tag.image { background: rgba(210,167,107,0.18); color: var(--accent, #d2a76b); border: 1px solid var(--accent, #d2a76b); font-size: 10px; padding: 1px 6px; border-radius: 3px; }
.images-scope-text {
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--line, #2a3937);
  background: var(--bg, #0a100f);
  color: var(--text-muted, #93a09d);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  max-height: 260px;
  overflow-y: auto;
}

.images-line-prompt textarea {
  width: 100%;
  border: 1px solid var(--line, #2a3937);
  background: var(--bg, #0a100f);
  color: var(--text, #ece6d8);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}

.images-working-footer {
  padding: 10px 16px;
  background: var(--bg-elev-2, #1c2826);
  border-top: 1px solid var(--line, #2a3937);
  display: flex; gap: 8px; align-items: center;
}
.images-working-footer .muted { margin-left: 8px; font-size: 11px; }

.images-md-details {
  border-top: 1px solid var(--line, #2a3937);
}
.images-md-details > summary {
  list-style: none;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 11px;
  display: flex; gap: 8px; align-items: center;
  background: var(--bg-elev-2, #1c2826);
}
.images-md-details > summary::-webkit-details-marker { display: none; }

.images-anchor-browser {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.images-right {
  /* Pool sits in the middle of the row now; normal rounded panel. */
  display: flex; flex-direction: column;
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-radius: 10px;
  overflow: hidden;
}
.images-right-resize {
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 8px;
  cursor: ew-resize;
  z-index: 5;
  background: linear-gradient(90deg, transparent 0, transparent 3px, var(--line-strong, #3a4f4c) 3px, var(--line-strong, #3a4f4c) 5px, transparent 5px);
}
.images-right-resize:hover,
.images-right-resize.dragging {
  background: linear-gradient(90deg, transparent 0, transparent 2px, var(--accent, #d2a76b) 2px, var(--accent, #d2a76b) 6px, transparent 6px);
}
.images-browser-card.is-current-for-line {
  border-color: var(--accent, #d2a76b);
  box-shadow: 0 0 0 2px rgba(210,167,107,0.35);
}
.pal-thumb-pool { background: linear-gradient(135deg, #4a3a52, #2c2238); color: #cad; }
.images-browser-section {
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  border-radius: 6px;
}
details.images-browser-section { padding: 0; }
.images-browser-head {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #93a09d);
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.images-browser-head::-webkit-details-marker { display: none; }
.images-browser-head::before {
  content: "▾";
  font-size: 9px;
  color: var(--text-dim, #687572);
  transition: transform 0.15s;
}
details.images-browser-section:not([open]) > .images-browser-head::before { transform: rotate(-90deg); }
.images-browser-body {
  padding: 6px;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--line, #2a3937);
}
.images-browser-character .images-browser-head { color: var(--info, #7aa9d4); }
.images-browser-head { justify-content: space-between; }
.images-browser-head > span:first-child { flex: 1; }
.images-browser-view-toggle {
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text-muted, #93a09d);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 9.5px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.3;
  margin-left: 6px;
}
.images-browser-view-toggle:hover { border-color: var(--accent, #d2a76b); color: var(--text, #ece6d8); }

/* List view: drop thumbs, compact text rows. */
.images-browser-section.view-list .images-browser-card {
  grid-template-columns: 1fr;
  padding: 3px 6px;
}
.images-browser-section.view-list .images-browser-card .pal-thumb { display: none; }
.images-browser-section.view-list .images-browser-card .pal-meta .pal-name { font-size: 11.5px; }
.images-browser-section.view-list .images-browser-card .pal-meta .pal-ver  { font-size: 10px; }
.images-browser-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  align-items: center;
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-radius: 5px;
  padding: 4px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.images-browser-card:hover { border-color: var(--line-strong, #3a4f4c); }
.images-browser-card.associated { border-color: var(--accent, #d2a76b); }
.images-browser-card .pal-thumb { width: 36px; height: 36px; }
.images-browser-card .pal-meta .pal-name { font-size: 11.5px; }
.images-browser-card .pal-meta .pal-ver { font-size: 10px; }

/* Responsive overrides removed — the flex layout naturally adapts; widths can
   also be dragged by the user. */

/* ---------------- Stories dashboard (Page 1, mockup 1) ---------------- */

/* ---- New global shell: topbar on top, [sidebar | main-pane] below ---- */
.app-main-row {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  min-width: 0;
}
.main-pane {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.global-sidebar {
  position: relative;
  flex: 0 0 auto;
  width: var(--sidebar-w, 280px);
  background: var(--bg-elev, #131c1b);
  border-right: 1px solid var(--line, #2a3937);
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.global-sidebar.collapsed { width: 36px; }
.global-sidebar.collapsed .global-sidebar-body { display: none; }
.global-sidebar-toggle {
  position: absolute;
  top: 6px; right: 6px;
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text-muted, #93a09d);
  border-radius: 3px;
  width: 22px; height: 22px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: grid; place-items: center;
}
.global-sidebar.collapsed .global-sidebar-toggle {
  right: 7px; transform: rotate(180deg);
}
.global-sidebar-toggle:hover { border-color: var(--accent, #d2a76b); color: var(--text, #ece6d8); }
.global-sidebar-body {
  flex: 1;
  min-height: 0;
  display: flex; flex-direction: column;
}
.global-sidebar-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, #2a3937);
  display: flex; flex-direction: column; gap: 8px;
  /* Don't let the Module label + Filter input sit under the collapse button. */
  padding-right: 36px;
}
.global-sidebar-head .control { display: flex; flex-direction: column; gap: 4px; }
.global-sidebar-head .control span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted, #93a09d);
}
.global-sidebar-head select,
.global-sidebar-head input[type="search"] { width: 100%; }
.global-sidebar-filter-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.global-sidebar-filter-row input[type="search"] { flex: 1; min-width: 0; }
.stories-sort-pill {
  flex: 0 0 auto;
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text-muted, #93a09d);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 10.5px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.3;
  white-space: nowrap;
}
.stories-sort-pill:hover { border-color: var(--accent, #d2a76b); color: var(--text, #ece6d8); }
.stories-unfinished-pills {
  display: inline-flex;
  gap: 2px;
  flex: 0 0 auto;
}
.stories-unfinished-pill {
  flex: 0 0 auto;
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text-muted, #93a09d);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.3;
  min-width: 18px;
  text-align: center;
}
.stories-unfinished-pill:hover { border-color: var(--accent, #d2a76b); color: var(--text, #ece6d8); }
.stories-unfinished-pill[aria-pressed="true"] {
  background: rgba(210, 167, 107, 0.18);
  border-color: var(--accent, #d2a76b);
  color: var(--accent, #d2a76b);
}
.global-sidebar-resize {
  position: absolute;
  right: 0; top: 0; bottom: 0; width: 6px;
  cursor: ew-resize;
  z-index: 5;
  background: linear-gradient(90deg, transparent 0, transparent 2px, var(--line-strong, #3a4f4c) 2px, var(--line-strong, #3a4f4c) 4px, transparent 4px);
}
.global-sidebar-resize:hover,
.global-sidebar-resize.dragging {
  background: linear-gradient(90deg, transparent 0, transparent 1px, var(--accent, #d2a76b) 1px, var(--accent, #d2a76b) 5px, transparent 5px);
}
.global-sidebar.collapsed .global-sidebar-resize { display: none; }

.stories-lab {
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 0;
}
.stories-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
  min-height: 0;
  overflow: hidden;
}
.story-list {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto;
  flex: 1; min-height: 0;
}
.story-list-empty {
  list-style: none;
  padding: 20px 14px;
  color: var(--text-dim, #687572);
  font-size: 12.5px;
  text-align: center;
}
.story-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #2a3937);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.story-row:hover { background: var(--bg-elev-2, #1c2826); }
.story-row.selected {
  background: var(--bg-elev-2, #1c2826);
  border-left: 3px solid var(--accent, #d2a76b);
  padding-left: 11px;
}
.story-row-title { font-weight: 500; }
.story-row-sub  { font-size: 11px; color: var(--text-muted, #93a09d); }
.story-row-pct  { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-muted, #93a09d); }
.story-row-indicators {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.story-indicator {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--line, #2a3937);
  background: var(--bg, #0a100f);
  color: var(--text-dim, #687572);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}
.story-indicator.complete {
  background: rgba(109, 191, 143, 0.18);
  border-color: rgba(109, 191, 143, 0.55);
  color: var(--good, #6dbf8f);
}

.story-recap {
  display: flex; flex-direction: column;
  gap: 12px;
  min-height: 0; overflow-y: auto;
}
.recap-head {
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-radius: 10px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}
.recap-head h1 { margin: 0; font-size: 22px; }
.recap-premise {
  margin: 6px 0 0;
  color: var(--text-muted, #93a09d);
  font-size: 13px;
  line-height: 1.5;
}
.recap-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.progress-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line, #2a3937);
  border: 1px solid var(--line, #2a3937);
  border-radius: 10px;
  overflow: hidden;
}
.overview-cell {
  background: var(--bg-elev, #131c1b);
  padding: 12px 14px;
}
.overview-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted, #93a09d);
}
.overview-value {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 6px;
}
.overview-of { color: var(--text-dim, #687572); font-size: 14px; }

details.recap-section {
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--line, #2a3937);
  border-radius: 10px;
}
details.recap-section > summary {
  list-style: none;
  padding: 12px 14px;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}
details.recap-section > summary::-webkit-details-marker { display: none; }
details.recap-section > summary .caret { color: var(--text-dim, #687572); }
details.recap-section[open] > summary .caret { color: var(--accent, #d2a76b); }
details.recap-section > summary h3 { margin: 0; font-size: 14px; font-weight: 600; }
.recap-summary-sub { color: var(--text-muted, #93a09d); font-size: 12px; margin-top: 2px; }
.recap-section-body { padding: 0 14px 14px; }

/* Per-line progress: collapsing strip cards. Dirty rows are loud; done rows
   roll up into a single "N complete" header that can be expanded on demand. */
.line-strip-list { display: flex; flex-direction: column; gap: 4px; }
.line-strip-rollup {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border: 1px dashed var(--line, #2a3937);
  border-radius: 5px;
  color: var(--text-muted, #93a09d);
  font-size: 12px;
}
.line-strip-rollup-icon { color: var(--good, #7bd6a0); font-weight: 700; }
.line-strip-rollup-label { flex: 1; }
.line-strip-rollup-toggle {
  background: transparent;
  border: 1px solid var(--line, #2a3937);
  color: var(--text-muted, #93a09d);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}
.line-strip-rollup-toggle:hover { color: var(--text, #ece6d8); border-color: var(--accent, #d2a76b); }

.line-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--line, #2a3937);
  border-radius: 5px;
  background: rgba(255,255,255,0.015);
  cursor: pointer;
}
.line-strip:hover { border-color: var(--accent, #d2a76b); }
.line-strip.is-done {
  background: transparent;
  border-style: dashed;
  opacity: 0.65;
  cursor: default;
}
.line-strip.is-flagged { border-left: 3px solid var(--bad, #d76a6a); }
.line-strip-head {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0;
}
.line-strip-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text, #ece6d8);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.line-strip-flag { color: var(--bad, #d76a6a); font-size: 11px; }
.line-strip-meta {
  font-size: 12px;
  color: var(--text-muted, #93a09d);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.line-strip-spanish { color: var(--text, #ece6d8); }
.line-strip-badges {
  display: inline-flex; gap: 3px;
  flex: 0 0 auto;
  justify-self: end;
}
.line-strip-detail {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--text-muted, #93a09d);
  padding-left: 6px;
}
.line-strip-detail:empty { display: none; }

.line-strip-badge {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  min-width: 22px;
  text-align: center;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted, #93a09d);
  line-height: 1.4;
}
.line-strip-badge:hover:not(:disabled) {
  border-color: var(--accent, #d2a76b);
  color: var(--text, #ece6d8);
}
.line-strip-badge.state-done {
  background: rgba(123, 214, 160, 0.12);
  border-color: rgba(123, 214, 160, 0.35);
  color: var(--good, #7bd6a0);
}
.line-strip-badge.state-missing {
  background: rgba(215, 106, 106, 0.14);
  border-color: rgba(215, 106, 106, 0.45);
  color: var(--bad, #d76a6a);
}
.line-strip-badge.state-partial {
  background: rgba(210, 167, 107, 0.14);
  border-color: rgba(210, 167, 107, 0.45);
  color: var(--accent, #d2a76b);
}
.line-strip-badge.state-na {
  opacity: 0.45;
  border-color: var(--line, #2a3937);
  cursor: default;
}
.line-strip-badge:disabled { cursor: default; }

/* Per-line status table — replaces the strip-card list. Compact rows, fixed
   color states per cell, click-to-jump to the first undone slot inside the
   line's domain. */
.line-table-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #93a09d);
  margin-bottom: 8px;
  user-select: none;
  cursor: pointer;
}
.line-table-wrap { overflow-x: auto; }
.line-status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.line-status-table thead th {
  text-align: center;
  padding: 6px 8px;
  font-weight: 600;
  font-size: 11px;
  color: var(--text-muted, #93a09d);
  border-bottom: 1px solid var(--line, #2a3937);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.line-status-table thead th.col-id {
  text-align: left;
}
.line-status-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.line-status-table tbody td.col-id {
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-status-table tbody td.col-id .ln {
  display: inline-block;
  min-width: 28px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text, #ece6d8);
}
.line-status-table tbody td.col-id .speaker {
  color: var(--text, #ece6d8);
}
.line-status-table tbody td.col-id .snippet {
  color: var(--text-muted, #93a09d);
}
.line-status-table tbody tr.is-done td.col-id { opacity: 0.55; }
.line-status-table tbody tr.is-flagged td.col-id::before {
  content: "⚐ ";
  color: var(--bad, #d76a6a);
}

.line-status-table .state-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.line-status-table .state-cell-count {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  min-width: 36px;
  font-size: 11px;
}
.line-status-table .state-done .state-cell-count {
  background: rgba(123, 214, 160, 0.12);
  border-color: rgba(123, 214, 160, 0.35);
  color: var(--good, #7bd6a0);
}
.line-status-table .state-missing .state-cell-count {
  background: rgba(215, 106, 106, 0.14);
  border-color: rgba(215, 106, 106, 0.45);
  color: var(--bad, #d76a6a);
}
.line-status-table .state-partial .state-cell-count {
  background: rgba(210, 167, 107, 0.16);
  border-color: rgba(210, 167, 107, 0.45);
  color: var(--accent, #d2a76b);
}
.line-status-table .state-na .state-cell-count {
  border-color: var(--line, #2a3937);
  color: var(--text-dim, #687572);
}
.line-status-table tbody td.state-cell:hover .state-cell-count {
  filter: brightness(1.2);
}

.line-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 4px;
}
.line-mini-cell {
  background: var(--bg-elev-2, #1c2826);
  border: 1px solid var(--line, #2a3937);
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted, #93a09d);
  cursor: default;
}
.line-mini-cell .n {
  font-size: 13px;
  color: var(--text, #ece6d8);
  font-variant-numeric: tabular-nums;
}
.line-mini-cell.s-image       { border-color: var(--info, #7aa9d4); }
.line-mini-cell.s-image-audio { background: rgba(109, 191, 143, 0.20); border-color: var(--good, #6dbf8f); }
.line-mini-cell.s-flagged     { background: rgba(210, 167, 107, 0.20); border-color: var(--accent, #d2a76b); }
.line-mini-cell { cursor: pointer; font: inherit; }
.line-mini-cell:hover { box-shadow: 0 0 0 2px var(--accent, #d2a76b); }

.cell-menu {
  position: fixed;
  z-index: 1000;
  min-width: 240px;
  background: var(--bg-elev, #131c1b);
  border: 1px solid var(--accent, #d2a76b);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  padding: 4px;
  font-size: 12.5px;
}
.cell-menu-head {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line, #2a3937);
  margin-bottom: 4px;
  color: var(--text-muted, #93a09d);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cell-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text, #ece6d8);
  padding: 6px 10px;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}
.cell-menu-item:hover { background: var(--bg-elev-2, #1c2826); color: var(--accent, #d2a76b); }
.cell-menu-item-danger { color: var(--text-muted, #93a09d); border-top: 1px solid var(--line, #2a3937); }
.cell-menu-item-danger:hover { color: var(--bad, #d76a6a); }
.cell-menu-note { padding: 6px 10px; color: var(--good, #6dbf8f); font-size: 11.5px; }

.story-row-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(210, 167, 107, 0.18);
  color: var(--accent, #d2a76b);
  border: 1px solid var(--accent, #d2a76b);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* Timing/Trim line list: flagged-line styling */
.flagged-line .num { color: var(--accent, #d2a76b); }
.trim-lock-chip { color: var(--accent, #d2a76b); margin-right: 4px; font-size: 11px; }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist-item {
  padding: 5px 0;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
}
.checklist-item .ck {
  width: 14px; height: 14px;
  border: 1px solid var(--line-strong, #3a4f4c);
  border-radius: 3px;
  display: inline-block;
  position: relative;
}
.checklist-item .ck.done {
  background: var(--good, #6dbf8f);
  border-color: var(--good, #6dbf8f);
}
.checklist-item .ck.done::after {
  content: "✓";
  position: absolute;
  color: var(--bg, #0a100f);
  font-size: 11px;
  line-height: 1;
  top: 1px; left: 2px;
  font-weight: 700;
}
.checklist-item.done .text { color: var(--text-muted, #93a09d); }
.checklist-item.muted .text { color: var(--text-dim, #687572); font-style: italic; }

@media (max-width: 900px) {
  .progress-overview { grid-template-columns: repeat(2, 1fr); }
}

.line-override-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: -8px;
}
.line-override-actions > button {
  font-size: 12px;
  padding: 6px 12px;
}

.override-tools {
  display: inline-flex;
  gap: 4px;
}
.override-tools .override-tool {
  font-size: 13px;
  padding: 2px 8px;
  min-width: 28px;
  line-height: 1.2;
}
.override-tools .override-tool.active {
  background: var(--accent);
  color: #1a1410;
  border-color: var(--accent-strong);
}

.seg-override-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.seg-override-row input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Custom tooltips on capture-square elements and the dot.
   Uses data-tooltip to avoid the browser's default title delay. */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elev-2);
  color: var(--text);
  font-size: 11px;
  line-height: 1.4;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  white-space: normal;
  max-width: 220px;
  width: max-content;
  text-align: center;
  pointer-events: none;
  z-index: 30;
  opacity: 0.97;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--line-strong);
  pointer-events: none;
  z-index: 30;
}
/* Make sure disabled buttons still show their tooltip when hovered. */
button[disabled] { pointer-events: auto; }

.segments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.segment-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  align-items: start;
}
.segment-row .segment-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.segment-row .seg-spanish { font-size: 14px; }
.segment-row .seg-english { font-size: 12px; color: var(--text-muted); font-style: italic; }
.segment-row .seg-note { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.segment-row .seg-actions {
  display: flex;
  gap: 6px;
}
.segment-row .seg-override {
  grid-column: 1 / -1;
}
.segment-row .seg-override input {
  font-size: 12px;
}

/* ----- Timing page ----- */

.timing-lab {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(560px, 1fr);
  gap: 16px;
  padding: 20px;
  align-items: start;
}

/* Testing page: a phone-shaped screen on the left + control panel on the
   right. Phone fills the browser height (minus topbar + padding) and its
   width follows the 9:19.5 aspect ratio so it always looks like a phone. */
.testing-lab {
  /* Phone fixed-width, controls auto-width (only as wide as their content). */
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding: 20px;
  height: calc(100vh - 56px);
}
.testing-phone {
  aspect-ratio: 9 / 19.5;
  height: 100%;
  max-height: calc(100vh - 96px);
  background: var(--phone-bg, #0d0a07);
  border: 1px solid var(--line);
  /* Rectangular — this represents the screen content, not the phone hardware. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  position: relative;
}
/* Image background layer — sits below all children. Only painted when the
   phone has data-bg-mode="image" (toggle in the ⚙ tab) AND a URL has been
   wired via --phone-bg-image (auto-populated from the first scene image of
   the current story). Heavy blur + slight upscale produces a color-wash from
   the underlying image without exposing edges. */
.testing-phone::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--phone-bg-image, none);
  background-size: cover;
  background-position: center;
  filter:
    blur(var(--phone-bg-blur, 60px))
    saturate(1.25)
    brightness(var(--phone-bg-brightness, 1));
  transform: scale(1.2);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.testing-phone[data-bg-mode="image"]::before { opacity: var(--phone-bg-image-opacity, 1); }
/* Phone content sits above the ::before bg layer. Banner is bumped one level
   higher than the stage so the theme menu (which opens inside the banner and
   drops down over the stage) isn't trapped behind the image pane. Overlays
   (lessons, notes) keep their own z-indexes from their own CSS — we don't
   override them here. */
.testing-phone > .testing-banner       { position: relative; z-index: 2; }
.testing-phone > .testing-phone-stage,
.testing-phone > .testing-phone-pane   { position: relative; z-index: 1; }
.testing-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--phone-banner-bg, linear-gradient(180deg, #2a1a10, #1a1209));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.testing-banner-menu {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--phone-menu-button-color, var(--text));
  border-radius: 6px;
  cursor: pointer;
}
.testing-banner-menu:hover { background: rgba(255, 255, 255, 0.14); }
.testing-banner-theme {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}
.testing-banner-theme:hover { background: rgba(255, 255, 255, 0.14); }

.testing-theme-menu {
  position: absolute;
  right: 10px;
  top: calc(100% + 6px);
  width: 200px;
  background: #14100c;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  padding: 6px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testing-theme-menu[hidden] { display: none; }
.testing-theme-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
}
.testing-theme-item:hover { background: rgba(255, 255, 255, 0.06); }
.testing-theme-item.active {
  background: rgba(255, 255, 255, 0.09);
  font-weight: 600;
}
.testing-theme-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.testing-theme-swatch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.testing-banner-text {
  font-size: var(--phone-banner-font-size, 18px);
  font-family: var(--phone-banner-font, inherit);
  font-weight: var(--phone-banner-weight, 700);
  font-style: var(--phone-banner-style, normal);
  color: var(--phone-banner-color, #f3e5d4);
  letter-spacing: 1px;
}

.testing-phone-stage {
  /* Image + text live here, with a prompt wrapper above and a matching spacer
     below. The wrapper and the spacer both flex:1 so the image+text cluster
     stays vertically centered while the prompt centers itself in the gap
     between the banner and the top of the image. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}
.testing-phone-pane { overflow: hidden; flex: 0 0 auto; }
.testing-prompt-wrapper {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 0 12px;
  min-height: 0;
}
.testing-content-spacer {
  flex: 1 1 0;
  min-height: 0;
}
.testing-prompt {
  text-align: center;
  padding: 4px 12px;
  font-size: var(--phone-prompt-font-size, 15px);
  font-family: var(--phone-prompt-font, inherit);
  font-weight: var(--phone-prompt-weight, 400);
  font-style: var(--phone-prompt-style, italic);
  color: var(--phone-prompt-color, #9a8b7a);
  opacity: var(--phone-prompt-opacity, 1);
  visibility: hidden;
}
.testing-prompt.is-shown { visibility: visible; }
.testing-prompt:not(.is-shown) { animation-play-state: paused; }
/* Prompt animations. Driven by the data-anim attribute on the prompt element.
   Shared CSS vars: --prompt-anim-duration (s), --prompt-anim-color, --prompt-anim-intensity (0..1). */
.testing-prompt[data-anim="pulseGlow"] {
  animation: promptPulseGlow var(--prompt-anim-duration, 1.5s) ease-in-out infinite;
}
.testing-prompt[data-anim="pulse"] {
  animation: promptPulse var(--prompt-anim-duration, 1.5s) ease-in-out infinite;
}
.testing-prompt[data-anim="bounce"] {
  animation: promptBounce var(--prompt-anim-duration, 1.5s) ease-in-out infinite;
}
.testing-prompt[data-anim="shimmer"] {
  /* Gradient is clipped to the glyphs so the sweep travels through the text. */
  background-image: linear-gradient(110deg,
    var(--phone-prompt-color, #9a8b7a) 0%,
    var(--phone-prompt-color, #9a8b7a) 40%,
    var(--prompt-anim-color, #d2a76b) 50%,
    var(--phone-prompt-color, #9a8b7a) 60%,
    var(--phone-prompt-color, #9a8b7a) 100%);
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: promptShimmer var(--prompt-anim-duration, 1.5s) linear infinite;
}
@keyframes promptPulseGlow {
  0%, 100% {
    text-shadow: 0 0 calc(4px * var(--prompt-anim-intensity, 0.5)) var(--prompt-anim-color, #d2a76b);
  }
  50% {
    text-shadow:
      0 0 calc(14px * var(--prompt-anim-intensity, 0.5)) var(--prompt-anim-color, #d2a76b),
      0 0 calc(28px * var(--prompt-anim-intensity, 0.5)) var(--prompt-anim-color, #d2a76b);
  }
}
@keyframes promptPulse {
  0%, 100% { opacity: var(--phone-prompt-opacity, 1); }
  50%      { opacity: calc(var(--phone-prompt-opacity, 1) * (1 - var(--prompt-anim-intensity, 0.5))); }
}
@keyframes promptBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-10px * var(--prompt-anim-intensity, 0.5))); }
}
@keyframes promptShimmer {
  0%   { background-position: 200% 50%; }
  100% { background-position: -100% 50%; }
}
.testing-phone-pane.testing-pane-text {
  /* Top padding is the user-controlled image gap (Image tab). */
  padding: var(--phone-image-gap, 4px) 16px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testing-text-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 14px 18px;
  width: 100%;
  color: var(--text);
}
.testing-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.1;
  /* Suppress iOS callout / text-selection on press-and-hold so the note
     overlay can drive that gesture instead. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.testing-segment.hidden {
  /* visibility:hidden keeps the element in the flex flow so its slot is
     reserved at the final position from the start — only the paint is
     suppressed until reveal time. */
  visibility: hidden;
}
.testing-segment-spanish {
  font-size: var(--seg-spanish-size, 28px);
  font-family: var(--seg-spanish-font, inherit);
  font-weight: var(--seg-spanish-weight, 700);
  font-style: var(--seg-spanish-style, normal);
  letter-spacing: var(--seg-spanish-letter-spacing, 0);
  color: var(--seg-spanish-color, var(--text));
  opacity: var(--seg-spanish-opacity, 1);
}
.testing-segment-english {
  font-size: var(--seg-english-size, 13px);
  font-family: var(--seg-english-font, inherit);
  font-weight: var(--seg-english-weight, 400);
  font-style: var(--seg-english-style, normal);
  letter-spacing: var(--seg-english-letter-spacing, 0);
  color: var(--seg-english-color, var(--text-dim));
  opacity: var(--seg-english-opacity, 1);
  margin-top: var(--seg-english-gap, 2px);
}
@keyframes noteGlowPulse {
  0%, 100% {
    text-shadow:
      0 0 4px rgba(255, 255, 255, 0.25),
      0 0 12px rgba(255, 255, 255, 0.10);
  }
  50% {
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.75),
      0 0 20px rgba(255, 255, 255, 0.40),
      0 0 32px rgba(255, 255, 255, 0.20);
  }
}
/* Notes glow disabled for now — re-enable by adding .has-note in JS.
.testing-segment.has-note { cursor: pointer; }
.testing-segment.has-note .testing-segment-spanish,
.testing-segment.has-note .testing-segment-english {
  animation: noteGlowPulse 2.4s ease-in-out infinite;
}
*/
.testing-segment.clickable { cursor: pointer; }
.testing-pane-image {
  /* Transparent so reduced image opacity reveals the phone background (color
     OR blurred bg image), not the global app dark. */
  background: transparent;
  position: relative;
  overflow: hidden;
  border-radius: var(--phone-image-radius, 0);
}
.testing-pane-image.hidden { display: none; }
.testing-pane-image img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  opacity: var(--phone-image-opacity, 1);
  filter:
    brightness(var(--phone-image-brightness, 1))
    contrast(var(--phone-image-contrast, 1))
    saturate(var(--phone-image-saturation, 1));
  /* Smooth fade during a line-to-line swap. The .is-swapping class is added
     synchronously when renderTestingPage starts a swap and removed once the
     new image is decoded + applied — masking the brief intermediate position
     the image would otherwise visibly slide to. */
  transition: opacity 140ms ease;
  /* width/height set in JS by applyTestingImageScale to honor the user's
     horizontal and vertical zoom limits (Image tab). */
}
.testing-pane-image img.is-swapping {
  opacity: 0 !important;
  transition: opacity 80ms ease;
}
.testing-pane-controls {
  /* Bottom row: jump-to-first and back grouped left, Continue pinned right. */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 16px;
  gap: 6px;
  background: var(--phone-bg, #0d0a07);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.testing-pane-controls #testingLineRepeatNextButton { margin-left: auto; }
.testing-pane-controls button {
  padding: 8px 18px;
  font-size: var(--phone-button-size, 14px);
  font-family: var(--phone-button-font, inherit);
  font-weight: var(--phone-button-weight, 600);
  font-style: var(--phone-button-style, normal);
  background: var(--phone-button-bg, rgba(255, 255, 255, 0.06));
  border: var(--phone-button-border-width, 1px) solid rgba(255, 255, 255, 0.12);
  color: var(--phone-button-text, var(--text));
  border-radius: var(--phone-button-radius, 6px);
}
/* Next ("Continue") is the primary action — inherits Button-tab font family,
   weight, and italic from --phone-button-* vars (set on .testing-pane-controls
   button), but uses its own size variable so it can be bumped independently. */
.testing-pane-controls #testingLineRepeatNextButton {
  padding-left: 32px;
  padding-right: 32px;
  font-size: var(--phone-continue-size, var(--phone-button-size, 14px));
  letter-spacing: 0.4px;
}
.testing-pane-controls #testingLineRepeatFirstButton {
  font-size: 16px;
  padding-left: 12px;
  padding-right: 12px;
}
.testing-pane-controls button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}
.testing-pane-controls button:disabled { opacity: 0.35; cursor: not-allowed; }

.testing-pane-repeat {
  /* Big Repeat button just below the segment text. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  background: var(--phone-bg, #0d0a07);
}
.testing-pane-repeat button {
  width: 100%;
  padding: 16px 24px;
  /* Repeat tracks the controls font-size + 6px so the visual hierarchy
     (Repeat as primary, controls as secondary) holds regardless of the
     user's chosen size. */
  font-size: calc(var(--phone-button-size, 14px) + 6px);
  font-family: var(--phone-button-font, inherit);
  font-weight: var(--phone-button-weight, 700);
  font-style: var(--phone-button-style, normal);
  letter-spacing: 0.5px;
  background: var(--phone-button-bg, rgba(255, 255, 255, 0.08));
  border: var(--phone-button-border-width, 1px) solid rgba(255, 255, 255, 0.18);
  color: var(--phone-button-text, var(--text));
  border-radius: var(--phone-button-radius, 8px);
  cursor: pointer;
}
.testing-pane-repeat button:hover { background: rgba(255, 255, 255, 0.14); }
.testing-pane-repeat button:active { background: rgba(255, 255, 255, 0.2); }

/* --- Lessons overlay (full-phone, opens from the ☰ menu button) --- */
.testing-lessons-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--phone-bg, #0d0a07);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
  z-index: 9;
}
.testing-lessons-overlay[hidden] { display: none; }
.testing-lessons-overlay.visible { opacity: 1; pointer-events: auto; }
.testing-lessons-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #2a1a10, #1a1209);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.testing-lessons-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #f3e5d4;
  letter-spacing: 0.5px;
}
.testing-lessons-back {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}
.testing-lessons-back:hover { background: rgba(255, 255, 255, 0.14); }
.testing-lessons-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  overflow: auto;
}
.testing-lessons-item {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.testing-lessons-num {
  flex: 0 0 auto;
  min-width: 1.6em;
  color: var(--text-muted, #93a09d);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.testing-lessons-title { flex: 1 1 auto; }
.testing-lessons-item:hover { background: rgba(255, 255, 255, 0.04); }
.testing-lessons-item.current {
  color: #f3e5d4;
  background: rgba(255, 255, 255, 0.06);
  font-weight: 600;
}

/* --- Notes overlay (shown when a glowing segment is clicked) --- */
.testing-notes-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 10, 7, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  /* Don't intercept clicks until visible — display:flex above overrides the
     default hidden attribute behavior, so we use pointer-events to gate it. */
  pointer-events: none;
  transition: opacity 200ms ease-out;
  z-index: 10;
}
.testing-notes-overlay[hidden] { display: none; }
.testing-notes-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.testing-phone { position: relative; }
.testing-notes-card {
  width: min(86%, 360px);
  background: linear-gradient(180deg, #1c1612, #14100c);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 22px 24px 18px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  transform: scale(0.96);
  transition: transform 200ms cubic-bezier(.2, .8, .25, 1);
  text-align: center;
}
.testing-notes-overlay.visible .testing-notes-card { transform: scale(1); }
.testing-notes-spanish {
  font-size: 30px;
  font-weight: 700;
  color: #f3e5d4;
  letter-spacing: 0.3px;
}
.testing-notes-english {
  font-size: 14px;
  color: #9a8b7a;
  margin-top: 4px;
}
.testing-notes-text {
  margin: 14px 0 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  text-align: left;
  white-space: pre-wrap;
}
.testing-notes-close {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}
.testing-notes-close:hover { background: rgba(255, 255, 255, 0.14); }
.testing-controls {
  align-self: start;
  width: max-content;
  max-width: 400px;
}
.testing-line-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testing-line-nav h2 { margin: 0; flex: 1 1 auto; }
.testing-line-nav button {
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.testing-line-nav button:disabled { opacity: 0.35; cursor: not-allowed; }

.testing-settings {
  padding: 10px 12px;
}

/* Layout B — tabs along the top, one panel visible at a time. */
.testing-tabs {
  display: flex;
  gap: 0;
  margin: -4px -2px 8px;
  padding: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.testing-tabs::-webkit-scrollbar { display: none; }
.testing-tab {
  flex: 0 0 auto;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -1px;
}
.testing-tab:hover { color: var(--text); }
.testing-tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.testing-tab-body {
  min-height: 100px;
}
.testing-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.testing-tab-panel[hidden] { display: none; }
.testing-tab-panel .testing-setting {
  font-size: 11px;
  color: var(--text-muted);
  padding: 1px 0;
}
.testing-tab-panel .testing-setting input[type="number"] { width: 64px; }
.testing-tab-panel .testing-setting input[type="text"]   { width: 140px; }
.testing-tab-panel .testing-setting input[type="color"]  { width: 44px; height: 22px; }
.testing-tab-panel .testing-setting select               { width: 88px; }
.testing-tab-panel .testing-setting input[type="range"]  { max-width: 120px; }

.testing-subgroup-head {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-dim);
  padding: 4px 0 2px;
  border-bottom: 1px solid var(--line);
  margin: 4px 0 2px;
}
.testing-tab-panel > .testing-subgroup-head:first-child { margin-top: 0; }

.testing-preset-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0 4px;
}
.testing-preset-pills button {
  padding: 3px 8px;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
}
.testing-preset-pills button:hover { color: var(--text); border-color: var(--accent); }
.testing-preset-pills button.active {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(210, 167, 107, 0.12);
}

.testing-tab-reset {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.testing-tab-reset button {
  padding: 4px 8px;
  font-size: 11px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.testing-tab-reset button:hover { color: var(--text); border-color: var(--accent); }
.testing-tab-reset button.reset-all { color: var(--bad); border-color: rgba(215, 106, 106, 0.4); }
.testing-tab-reset button.reset-all:hover { background: rgba(215, 106, 106, 0.10); border-color: var(--bad); }

.testing-save-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.testing-save-row button {
  padding: 5px 8px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
/* "Apply to this story" is the primary, common action — full accent fill,
   takes more horizontal space than the secondary save-as-app button. */
.testing-save-row button.testing-apply-story {
  flex: 2 1 0;
  background: var(--accent);
  color: #1a1107;
  border-color: var(--accent-strong);
  font-weight: 600;
}
.testing-save-row button.testing-apply-story:hover { background: var(--accent-strong); }
/* "Save as app theme" is the rarer, more impactful action — quiet outline
   button with a subtle "danger" hover so the user feels it's heavier. */
.testing-save-row button.testing-save-settings {
  flex: 1 1 0;
  color: var(--text-muted);
  background: transparent;
}
.testing-save-row button.testing-save-settings:hover {
  color: var(--text);
  border-color: var(--accent);
}

.testing-theme-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 6px;
}
.testing-theme-item.testing-theme-default { color: var(--text-muted); }
.testing-theme-item.testing-theme-default:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.testing-theme-item.testing-theme-default .testing-theme-swatch {
  color: var(--text-muted);
  font-size: 13px;
}

/* Tiny copy/paste buttons appended after every color picker. */
.color-cp-buttons {
  display: inline-flex;
  gap: 2px;
  margin-left: 4px;
}
.color-cp-btn {
  width: 18px;
  height: 22px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
}
.color-cp-btn:hover { color: var(--text); border-color: var(--accent); }
.color-cp-btn.ok  { color: var(--accent); border-color: var(--accent); }
.color-cp-btn.err { color: var(--bad); border-color: var(--bad); }

.testing-settings-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.testing-settings-section {
  display: grid;
  /* Default 50/50 split; the resize divider writes a px-based value to
     --settings-col-split on this grid container's parent so every section
     stays in sync as the user drags. */
  grid-template-columns: var(--settings-col-split, 1fr 1fr);
  gap: 4px 12px;
}
.testing-settings-section-head {
  grid-column: 1 / -1;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-dim);
  padding: 1px 0 3px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
.testing-settings-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  margin-left: -3px;
  /* JS sets `left: <px>` based on saved/initial column split. */
  cursor: col-resize;
  background: transparent;
  z-index: 2;
}
.testing-settings-divider:hover,
.testing-settings-divider.dragging {
  background: var(--accent);
  opacity: 0.35;
}
.testing-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
  min-width: 0;
}
.testing-setting > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.testing-setting input[type="number"] {
  width: 56px;
  padding: 2px 4px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.testing-setting input[type="color"] {
  width: 36px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}
.testing-setting select {
  width: 78px;
  padding: 2px 4px;
  font-size: 11px;
}
.testing-setting input[type="range"] {
  flex: 1 1 auto;
  min-width: 60px;
  max-width: 110px;
  height: 16px;
  accent-color: var(--accent);
}
.testing-font-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.testing-font-group select { width: 64px; }
.bg-image-line-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0 4px;
  height: 22px;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.font-toggle {
  width: 20px;
  height: 22px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.font-toggle:hover { color: var(--text); border-color: var(--accent); }
.font-toggle[aria-pressed="true"] {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.testing-save-settings {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 11px;
  justify-self: start;
}

/* Generic data table used by the trim + timing tables on the Timing page. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.data-table th,
.data-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.data-table thead th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  font-weight: 600;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--line-strong);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-elev-2); }
.data-table button {
  font-size: 12px;
  padding: 3px 8px;
  min-width: 44px;
}
.data-table input[type="number"] {
  width: 100%;
  font-size: 12px;
  padding: 3px 6px;
  box-sizing: border-box;
}
.data-table td { overflow: hidden; }
.trim-table .offset-cell {
  width: 100%;
  justify-content: space-between;
}

.trim-table .title-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
  width: 100%;
}
.trim-table .title-cell .row-kind {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  font-size: 10px;
  margin-right: 6px;
}
.trim-table .trim-cell { color: var(--text); }
.trim-table .trim-cell.zero { color: var(--text-dim); }
.trim-table .waveform-cell {
  padding: 4px;
}
.trim-table .trim-waveform {
  display: block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  width: 100%;
  /* height set inline from state.waveformHeight so the zoom controls can scale it */
}

.trim-panel-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.trim-panel-head h2 { margin: 0; font-size: 14px; }
.waveform-zoom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.waveform-zoom-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.waveform-zoom-cap {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted, #93a09d);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 12px;
  text-align: center;
}
.trim-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.trim-panel-actions #commitTrimsButton {
  font-size: 13px;
  padding: 6px 14px;
}
.trim-panel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.trim-row-label {
  font-size: 10.5px;
  color: var(--text-muted, #93a09d);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.trim-row-spacer { flex: 1 1 auto; }
.trim-commit-row #commitTrimsButton {
  font-size: 13px;
  padding: 6px 14px;
}
.trim-detector-row {
  padding: 6px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line, #2a3937);
  border-radius: 6px;
}
.trim-global-field {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--text-dim);
}
.trim-global-field input {
  width: 72px;
  padding: 4px 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.trim-offset-row { display: inline-flex; align-items: center; gap: 4px; }
.trim-offset-row input { width: 56px; text-align: center; }
.trim-stepper {
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text, #ece6d8);
  border-radius: 4px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
.trim-stepper:hover { border-color: var(--accent, #d2a76b); }
.trim-audition-bar {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.trim-audition-label { font-size: 10.5px; color: var(--text-muted, #93a09d); text-transform: uppercase; letter-spacing: 0.05em; }
.trim-audition-btn {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text, #ece6d8);
  border-radius: 3px;
  cursor: pointer;
}
.trim-audition-btn:hover:not(:disabled) { border-color: var(--accent, #d2a76b); }
.trim-audition-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.trim-row-selected { background: rgba(210,167,107,0.12); }
.trim-row-selected td { box-shadow: inset 3px 0 0 var(--accent, #d2a76b); }
.trim-table tbody tr { cursor: pointer; }
.waveform-zoom button {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 10px;
  min-width: 32px;
  line-height: 1;
}
.trim-table {
  table-layout: fixed;
  width: 100%;
  /* Last <col> has no explicit width — auto-absorbs the remainder so the
     waveform column always stretches to the right edge of the panel. */
}
.trim-table th { position: relative; user-select: none; }
.trim-table .col-resize {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  background: linear-gradient(90deg, transparent 0, transparent 3px, var(--line-strong, #3a4f4c) 3px, var(--line-strong, #3a4f4c) 5px, transparent 5px);
}
.trim-table .col-resize:hover,
.trim-table .col-resize.dragging {
  background: linear-gradient(90deg, transparent 0, transparent 2px, var(--accent, #d2a76b) 2px, var(--accent, #d2a76b) 6px, transparent 6px);
}

.trim-table .offset-cell {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.trim-table .offset-cell .nudge {
  padding: 2px 6px;
  font-size: 11px;
  min-width: 22px;
}
.trim-table .offset-cell .nudge.offset-default {
  min-width: 0;
  margin-left: 4px;
  color: var(--text-muted);
}
.trim-table .offset-cell .offset-value {
  min-width: 4ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.testing-save-settings {
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 12px;
  align-self: flex-start;
}

.timing-waveform-canvas {
  display: block;
  width: 100%;
  height: 90px;
  margin: 8px 0;
  background: #1c1410;
  border-radius: 4px;
  cursor: crosshair;
}

.timing-table {
  table-layout: fixed;
  width: 100%;
  /* Last <col> has no explicit width — auto-absorbs so the Segment column
     stretches to the right edge of the panel. */
}
.timing-line-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.timing-line-nav h2 { margin: 0; flex: 0 0 auto; }
.timing-line-nav button {
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.timing-line-nav button:disabled { opacity: 0.35; cursor: not-allowed; }
.timing-table th { position: relative; user-select: none; }
.timing-table .col-resize {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 5;
}
.timing-table .col-resize:hover,
.timing-table .col-resize.dragging {
  background: var(--accent);
  opacity: 0.5;
}
.timing-table td { overflow: hidden; }
.timing-table .start-time {
  color: var(--accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.timing-table .seg-spanish { font-size: 13px; }
.timing-table .nudge-cell {
  display: inline-flex;
  gap: 4px;
}
.timing-table .nudge-cell .nudge {
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.2;
  min-width: 28px;
}
.timing-table .play-slice {
  padding: 4px 10px;
  font-size: 12px;
}

.timing-line-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 70vh;
  overflow-y: auto;
}
.timing-line-list li {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  transition: background 80ms ease, border-color 80ms ease;
}
.timing-line-list li:hover { background: var(--bg-elev-2); }
.timing-line-list li.selected {
  border-color: var(--accent);
  background: var(--bg-elev-2);
}
.timing-line-list li .num {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.timing-line-list li .speaker {
  color: var(--accent);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.timing-line-list li.no-audio { opacity: 0.45; }
.timing-line-list li.no-audio .num::after { content: " ·"; }
.timing-line-list .status {
  color: var(--text-dim);
}
.timing-line-list .status.timings-saved {
  color: #4ade80;
  font-weight: 700;
}

.timing-detail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.timing-detail-actions .muted { font-size: 12px; }
.timing-detail-actions #timingCalculateStatus { flex: 1 1 auto; min-width: 0; }
.timing-detail-actions #timingSaveButton { margin-left: auto; }

.timing-segments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.timing-segments-list li {
  display: grid;
  grid-template-columns: auto auto 72px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
.timing-segments-list .nudge-buttons {
  display: inline-flex;
  gap: 4px;
}
.timing-segments-list .nudge {
  padding: 2px 8px;
  font-size: 13px;
  line-height: 1.2;
  min-width: 28px;
}
.timing-segments-list .start-time {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.timing-segments-list .seg-spanish { font-size: 14px; }
.timing-segments-list .play-slice {
  padding: 4px 10px;
  font-size: 12px;
}
.timing-segments-list .play-slice[disabled] { opacity: 0.4; cursor: not-allowed; }