: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);
}
/* The 3-way preview-frame toggle. Sits above the testing-phone in the local
   lab so the user can sanity-check stories at all three target form factors:
   phone portrait (default), phone landscape, and a desktop 16:9 window.
   Hidden on the public phone build (always portrait there). */
.testing-preview-mode-bar {
  display: inline-flex;
  gap: 4px;
  padding: 0 0 8px;
  flex: 0 0 auto;
}
.testing-preview-mode-btn {
  font-family: inherit;
  font-size: 11px;
  padding: 4px 10px;
  background: var(--bg, #0a100f);
  border: 1px solid var(--line, #2a3937);
  color: var(--text-muted, #93a09d);
  border-radius: 3px;
  cursor: pointer;
}
.testing-preview-mode-btn:hover { color: var(--text, #ece6d8); border-color: var(--accent, #d2a76b); }
.testing-preview-mode-btn[aria-pressed="true"] {
  background: rgba(210,167,107,0.18);
  border-color: var(--accent, #d2a76b);
  color: var(--accent, #d2a76b);
}
body.phone-build .testing-preview-mode-bar { display: none !important; }

/* Stack the preview-mode bar above the phone inside testing-lab. */
.testing-lab {
  /* The .testing-lab is already display:flex per its existing rule below;
     wrap so the bar sits on its own row above the phone. */
  flex-wrap: wrap;
  align-content: flex-start;
}
.testing-preview-mode-bar { width: 100%; }

/* Per-preview-mode aspect ratios + sizing. Explicit max-widths keep landscape
   and desktop visibly distinct (their aspects of 19.5:9 vs 16:9 are similar
   enough that the same width clamp would render near-identical boxes).
   Heights are capped so neither mode pushes off-screen. */
.testing-phone[data-preview-mode="phone-portrait"] {
  aspect-ratio: 9 / 19.5;
  height: 100%;
}
/* Portrait — image fills the upper area as a backdrop; banner, prompt, text
   and the Repeat button overlay it; the nav-buttons (controls) sit in an
   opaque strip at the bottom that the image doesn't bleed into. The image
   pane's inset values are set inline by applyTestingImageScale (bottom =
   controls height — needs JS because the controls row has dynamic height). */
.testing-phone[data-preview-mode="phone-portrait"] > .testing-phone-stage {
  display: contents;
}
.testing-phone[data-preview-mode="phone-portrait"] .testing-pane-image {
  position: absolute;
  z-index: 1;
}
.testing-phone[data-preview-mode="phone-portrait"] > .testing-banner,
.testing-phone[data-preview-mode="phone-portrait"] .testing-prompt-wrapper,
.testing-phone[data-preview-mode="phone-portrait"] .testing-pane-text,
.testing-phone[data-preview-mode="phone-portrait"] > .testing-pane-repeat {
  position: relative;
  z-index: 2;
  background: transparent !important;
}
.testing-phone[data-preview-mode="phone-portrait"] > .testing-pane-controls {
  position: relative;
  z-index: 3;
}
/* Text + prompt always paint on top of everything else (including the opaque
   controls strip), so their Y-offset sliders can shift them into the buttons
   area without disappearing. */
.testing-phone[data-preview-mode="phone-portrait"] .testing-pane-text,
.testing-phone[data-preview-mode="phone-portrait"] .testing-prompt-wrapper {
  z-index: 10;
}
.testing-phone[data-preview-mode="phone-landscape"] {
  aspect-ratio: 19.5 / 9;
  width: 100%;
  height: auto;
  max-width: min(900px, 100%);
}
.testing-phone[data-preview-mode="desktop"] {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  max-width: min(1200px, 100%);
}

/* Landscape + desktop: banner spans the full width on top; the left column
   sizes to the image's actual rendered width (set inline by
   applyTestingImageScale) — so a tall portrait image takes only the slim
   space it needs and gives the right column more room for text. The right
   column stacks prompt → text (flex-grows) → Repeat → prev/next. The stage
   uses display:contents so its children participate directly in the
   testing-phone grid. */
/* All three preview modes now use the same overlay layout (image fills the
   upper area as a backdrop; banner/prompt/text/repeat overlay it with
   transparent backgrounds; the controls strip sits opaque at the bottom).
   The portrait rules below set up the layering; here we just extend them to
   landscape + desktop by giving those modes the same stage-flattening +
   image absolute positioning + overlay treatment. Only the testing-phone
   aspect ratio differs between modes. */
.testing-phone[data-preview-mode="phone-landscape"] > .testing-phone-stage,
.testing-phone[data-preview-mode="desktop"] > .testing-phone-stage {
  display: contents;
}
.testing-phone[data-preview-mode="phone-landscape"] .testing-pane-image,
.testing-phone[data-preview-mode="desktop"] .testing-pane-image {
  position: absolute;
  z-index: 1;
}
.testing-phone[data-preview-mode="phone-landscape"] > .testing-banner,
.testing-phone[data-preview-mode="desktop"] > .testing-banner,
.testing-phone[data-preview-mode="phone-landscape"] .testing-prompt-wrapper,
.testing-phone[data-preview-mode="desktop"] .testing-prompt-wrapper,
.testing-phone[data-preview-mode="phone-landscape"] .testing-pane-text,
.testing-phone[data-preview-mode="desktop"] .testing-pane-text,
.testing-phone[data-preview-mode="phone-landscape"] > .testing-pane-repeat,
.testing-phone[data-preview-mode="desktop"] > .testing-pane-repeat {
  position: relative;
  z-index: 2;
  background: transparent !important;
}
.testing-phone[data-preview-mode="phone-landscape"] > .testing-pane-controls,
.testing-phone[data-preview-mode="desktop"] > .testing-pane-controls {
  position: relative;
  z-index: 3;
}
/* Text + prompt panes always paint on top (above controls) so Y-offset can
   slide them anywhere without disappearing behind the controls strip. */
.testing-phone[data-preview-mode="phone-landscape"] .testing-pane-text,
.testing-phone[data-preview-mode="desktop"] .testing-pane-text,
.testing-phone[data-preview-mode="phone-landscape"] .testing-prompt-wrapper,
.testing-phone[data-preview-mode="desktop"] .testing-prompt-wrapper {
  z-index: 10;
}

/* In landscape/desktop the banner becomes invisible to layout (no filled
   strip, no title text) — only the ☰ menu and 🎨 theme icons remain,
   floating at the top corners of the phone over the image. Portrait keeps
   the existing full-width banner with title centered between the icons. */
.testing-phone[data-preview-mode="phone-landscape"] > .testing-banner,
.testing-phone[data-preview-mode="desktop"] > .testing-banner {
  display: contents;
}
.testing-phone[data-preview-mode="phone-landscape"] .testing-banner-text,
.testing-phone[data-preview-mode="desktop"] .testing-banner-text {
  display: none;
}
.testing-phone[data-preview-mode="phone-landscape"] .testing-banner-menu,
.testing-phone[data-preview-mode="desktop"] .testing-banner-menu,
.testing-phone[data-preview-mode="phone-landscape"] .testing-banner-theme,
.testing-phone[data-preview-mode="desktop"] .testing-banner-theme {
  position: absolute;
  top: 10px;
  transform: none;     /* override translateY centering from default banner layout */
  z-index: 5;          /* above image (z=1) but below text/prompt (z=10) */
}
.testing-phone[data-preview-mode="phone-landscape"] .testing-banner-menu,
.testing-phone[data-preview-mode="desktop"] .testing-banner-menu {
  left: 10px;
}
.testing-phone[data-preview-mode="phone-landscape"] .testing-banner-theme,
.testing-phone[data-preview-mode="desktop"] .testing-banner-theme {
  right: 10px;
}

/* When the testing-phone shrinks (browser window resized down in desktop mode,
   small landscape phone, etc.), the 30%-wide right column of the grid layout
   can no longer fit the text + buttons at their default sizes. These rules
   lower --ui-shrink (which scales all font-sizes through calc() wrappers) and
   directly trim padding on the controls + text panes. Scoped to grid modes
   only — portrait gets the full container width for its content, so it
   doesn't need the same crunch protection at these thresholds.

   Thresholds in testing-phone inline-size; the right column is ~30% of that:
     950 → right col ≈ 285px  → ui-shrink 0.85, modest padding cut
     750 → right col ≈ 225px  → ui-shrink 0.7,  tight padding
     550 → right col ≈ 165px  → ui-shrink 0.55, last-resort
*/
/* --ui-shrink scales banner/buttons/prompt; --text-shrink scales the segment
   text. They're decoupled because buttons stop being tappable below ~10px
   font but the segment text can readably shrink further. */
/* --ui-shrink scales banner/buttons/prompt; --text-shrink scales the segment
   text. They're decoupled because buttons stop being tappable below ~10px
   font but the segment text can readably shrink further. The grid columns
   also rebalance: at narrow widths the image gives up width to the right
   column so the text + buttons get more horizontal room. */
@container tphone (max-width: 950px) {
  .testing-phone[data-preview-mode="phone-landscape"],
  .testing-phone[data-preview-mode="desktop"] {
    --ui-shrink: 0.85;
    --text-shrink: 0.82;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-controls,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-controls {
    padding: 8px 10px;
    gap: 4px;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-controls button,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-controls button {
    padding-left: 12px;
    padding-right: 12px;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-controls #testingLineRepeatNextButton,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-controls #testingLineRepeatNextButton {
    padding-left: 18px;
    padding-right: 18px;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-text-stack,
  .testing-phone[data-preview-mode="desktop"] .testing-text-stack {
    gap: 10px 12px;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-text,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-text {
    padding: 4px 12px 6px;
  }
  /* Repeat button gets shorter so the text-pane gains vertical space. */
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-repeat,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-repeat {
    padding: 10px 16px;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-repeat button,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-repeat button {
    padding: 10px 20px;
  }
}
@container tphone (max-width: 750px) {
  .testing-phone[data-preview-mode="phone-landscape"],
  .testing-phone[data-preview-mode="desktop"] {
    --ui-shrink: 0.7;
    --text-shrink: 0.6;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-controls,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-controls {
    padding: 6px 6px;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-controls button,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-controls button {
    padding-left: 8px;
    padding-right: 8px;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-controls #testingLineRepeatNextButton,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-controls #testingLineRepeatNextButton {
    padding-left: 10px;
    padding-right: 10px;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-text-stack,
  .testing-phone[data-preview-mode="desktop"] .testing-text-stack {
    gap: 6px 8px;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-text,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-text {
    padding: 2px 8px 4px;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-repeat,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-repeat {
    padding: 6px 10px;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-repeat button,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-repeat button {
    padding: 6px 14px;
  }
}
@container tphone (max-width: 550px) {
  .testing-phone[data-preview-mode="phone-landscape"],
  .testing-phone[data-preview-mode="desktop"] {
    --ui-shrink: 0.55;
    --text-shrink: 0.45;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-text-stack,
  .testing-phone[data-preview-mode="desktop"] .testing-text-stack {
    gap: 4px 6px;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-text,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-text {
    padding: 2px 6px 2px;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-repeat,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-repeat {
    padding: 4px 8px;
  }
  .testing-phone[data-preview-mode="phone-landscape"] .testing-pane-repeat button,
  .testing-phone[data-preview-mode="desktop"] .testing-pane-repeat button {
    padding: 4px 10px;
  }
}

.testing-phone {
  max-height: calc(100vh - 96px - 40px);
  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;
  /* Make testing-phone a container so child layout reacts to its inline-size,
     not the viewport. Lets the same testing-phone render correctly in the
     local lab preview frame AND in the fullscreen phone deploy. The
     --ui-shrink factor (default 1) multiplies font-sizes through the calc()
     wrappers below; @container rules near the bottom lower it for narrow
     grid layouts. */
  container-type: inline-size;
  container-name: tphone;
}
/* 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: var(--phone-menu-button-bg, rgba(0, 0, 0, 0.5));
  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 { filter: brightness(1.3); }
.testing-banner-theme {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 16px;
  background: var(--phone-menu-button-bg, rgba(0, 0, 0, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--phone-menu-button-color, var(--text));
  border-radius: 6px;
  cursor: pointer;
}
.testing-banner-theme:hover { filter: brightness(1.3); }

.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 has to clear the text-pane (z=10) and controls (z=3) in
     portrait so the dropdown lands ON TOP of the phone content. The
     nearest positioned ancestor (the banner) gets its own z-index bump
     via the `:has()` rule below when the menu is open. */
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testing-theme-menu[hidden] { display: none; }
/* In all modes: when the menu is open, raise the banner / phone above the
   text and image panes so the dropdown doesn't get painted over. */
.testing-phone:has(.testing-theme-menu:not([hidden])) > .testing-banner {
  z-index: 100;
}
/* Landscape + desktop have banner as display:contents → the menu's
   `top: 100%` would resolve against testing-phone, dropping the menu
   below the entire phone. Pin it just under the theme button instead. */
.testing-phone[data-preview-mode="phone-landscape"] .testing-theme-menu,
.testing-phone[data-preview-mode="desktop"] .testing-theme-menu {
  top: 52px;
  right: 10px;
}
.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;
  position: relative;
}
.testing-theme-item:hover { background: rgba(255, 255, 255, 0.06); }
/* Strong "currently selected" highlight — accent-tinted background, accent
   border on the left, and a trailing ✓ check so the choice is unambiguous. */
.testing-theme-item.active {
  background: rgba(210, 167, 107, 0.18);
  font-weight: 700;
  color: var(--accent, #d2a76b);
  box-shadow: inset 3px 0 0 var(--accent, #d2a76b);
}
.testing-theme-item.active::after {
  content: "✓";
  position: absolute;
  right: 10px;
  font-weight: 700;
  color: var(--accent, #d2a76b);
}
.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: calc(var(--phone-banner-font-size, 18px) * var(--ui-shrink, 1));
  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: calc(var(--phone-prompt-font-size, 15px) * var(--ui-shrink, 1));
  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;
  animation-delay: var(--prompt-anim-delay, 0s);
}
.testing-prompt[data-anim="pulse"] {
  animation: promptPulse var(--prompt-anim-duration, 1.5s) ease-in-out infinite;
  animation-delay: var(--prompt-anim-delay, 0s);
}
.testing-prompt[data-anim="bounce"] {
  animation: promptBounce var(--prompt-anim-duration, 1.5s) ease-in-out infinite;
  animation-delay: var(--prompt-anim-delay, 0s);
}
.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;
  animation-delay: var(--prompt-anim-delay, 0s);
}
@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 {
  text-shadow: var(--seg-text-shadow, none);
  font-size: calc(var(--seg-spanish-size, 28px) * var(--text-shrink, 1));
  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 {
  text-shadow: var(--seg-text-shadow, none);
  font-size: calc(var(--seg-english-size, 13px) * var(--text-shrink, 1));
  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: calc(var(--phone-button-size, 14px) * var(--ui-shrink, 1));
  /* min-width:0 lets flex shrink the button below its natural content width
     when the controls row is tighter than the buttons' combined min-content
     — otherwise the right-pinned Continue overflows and gets clipped by the
     testing-phone's overflow:hidden. */
  min-width: 0;
  flex-shrink: 1;
  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 var(--phone-button-border-color, 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: calc(var(--phone-continue-size, var(--phone-button-size, 14px)) * var(--ui-shrink, 1));
  letter-spacing: 0.4px;
}
.testing-pane-controls #testingLineRepeatFirstButton {
  font-size: calc(16px * var(--ui-shrink, 1));
  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) * var(--ui-shrink, 1));
  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 var(--phone-button-border-color, 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); }

/* The testing-phone lives inside a slot wrapper that's "invisible" to layout
   so the testing-lab flex math is unchanged. Kept for future phases — the
   slot is unused right now. */
.testing-phone-slot { display: contents; }

/* --- Phone-build landing page -------------------------------------------
   Two-view landing screen for the deployed mobile site (cacaospanish.com).
   Hidden in the local lab (body without .phone-build). When .phone-landing-
   active is set on body, the testing-phone slot is hidden so the landing
   shell occupies the viewport. Colour palette pulled from the "No café hoy"
   theme — cocoa background, cream text, orange accents. */
body:not(.phone-build) #phoneLanding { display: none !important; }
body.phone-build.phone-landing-active #testingPhoneSlot { display: none !important; }

#phoneLanding {
  position: fixed;
  inset: 0;
  background: #4d2214;
  color: #f3e5d4;
  z-index: 1000;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
#phoneLanding[hidden] { display: none !important; }
.landing-view { display: none; flex: 1 1 auto; flex-direction: column; min-height: 0; }
#phoneLanding[data-view="home"]    .landing-home    { display: flex; }
#phoneLanding[data-view="stories"] .landing-stories { display: flex; }

.landing-home {
  justify-content: center;
  align-items: center;
  padding: 24px;
  text-align: center;
}
.landing-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #ffa270;
  letter-spacing: 0.5px;
}
.landing-subtitle {
  font-size: 14px;
  opacity: 0.7;
  margin: 0 0 36px;
  max-width: 280px;
}
.landing-module-tile {
  background: #612e10;
  border: 1px solid #ffa270;
  color: #f3e5d4;
  font-size: 20px;
  padding: 22px 36px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-family: inherit;
  transition: background 120ms;
}
.landing-module-tile:hover,
.landing-module-tile:active { background: #7a3a14; }
.landing-tile-arrow { font-size: 22px; opacity: 0.85; }

.landing-stories-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #3a1a0e;
}
.landing-back {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f3e5d4;
  font-size: 18px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.landing-back:hover { background: rgba(255, 255, 255, 0.16); }
.landing-stories-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #ffa270;
}

.landing-story-grid {
  list-style: none;
  margin: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.landing-story-card {
  background: #612e10;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: border-color 120ms, transform 120ms;
}
.landing-story-card:hover,
.landing-story-card:active {
  border-color: #ffa270;
  transform: translateY(-2px);
}
.landing-story-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #3a1a0e;
  display: block;
}
.landing-story-card-title {
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
}

/* --- Layout editor page --------------------------------------------------
   Wireframe workspace: a rectangle representing the phone screen, recursively
   subdivided into split/leaf nodes. Each leaf is a coloured placeholder for
   one of the 6 panel types. Click a node → it's selected → the inspector
   on the right lets you change its content, size, direction, or split it
   again. Nothing on this page touches the live Testing phone (yet). */
.layout-lab {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 20px;
  height: calc(100vh - 56px);
}
.layout-workspace-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.layout-workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.layout-workspace-head h2 { margin: 0; font-size: 16px; }
.layout-toolbar { display: flex; gap: 8px; align-items: center; }
.layout-aspect,
.layout-preset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.layout-aspect select,
.layout-preset select {
  font-size: 12px;
  padding: 4px 6px;
  background: var(--input-bg, #1a1410);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.layout-toolbar button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Frame fills the remaining vertical space of the panel below the toolbar
   and centers the workspace inside it both horizontally and vertically. */
.layout-workspace-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Workspace dimensions are set inline by fitLayoutWorkspace() in JS — it
   reads the frame's size + the active preset's aspect ratio and picks the
   largest WxH rectangle that fits inside both. */
.layout-workspace {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
}
.layout-canvas {
  display: flex;
  width: 100%;
  height: 100%;
  background: #1a1410;
  border-radius: 4px;
  overflow: hidden;
}

/* Recursive tree nodes inside the canvas. */
.lw-node {
  display: flex;
  position: relative;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  cursor: pointer;
}
/* Panels — flex containers. Subtle outline so nesting is visible. */
.lw-panel {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  margin: 1px;
  transition: border-color 120ms;
}
.lw-panel:hover { border-color: rgba(255,255,255,0.25); }
.lw-panel.is-selected {
  border-color: var(--accent, #d2a76b);
  border-style: solid;
  border-width: 2px;
  margin: 0;            /* compensate for 2px border so layout doesn't shift */
}
.lw-empty-hint {
  flex: 1 1 auto;
  align-self: center;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  font-style: italic;
  user-select: none;
  pointer-events: none;
}

/* Objects — coloured leaf tiles. */
.lw-object {
  border: 1px dashed rgba(255,255,255,0.25);
  align-items: center;
  justify-content: center;
  margin: 2px;
  transition: border-color 120ms, background 120ms;
}
.lw-object:hover { border-color: rgba(255,255,255,0.55); }
.lw-object.is-selected {
  border-color: var(--accent, #d2a76b);
  border-style: solid;
  border-width: 2px;
  margin: 1px;
}
.lw-leaf-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.85);
  user-select: none;
  pointer-events: none;
}

/* Inspector — right-side panel with attributes for the selected node. */
.layout-inspector {
  flex: 0 0 320px;
  background: var(--bg-elev, #15110d);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.layout-inspector-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.layout-inspector-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.layout-inspector-head p {
  margin: 4px 0 0;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text);
  word-break: break-word;
}
.layout-inspector-head a[data-jump-id] {
  color: var(--text);
  text-decoration: none;
  padding: 1px 4px;
  border-radius: 3px;
  transition: background 100ms;
}
.layout-inspector-head a[data-jump-id]:hover {
  background: rgba(210,167,107,0.15);
  color: var(--accent, #d2a76b);
}
.li-crumb-sep { color: var(--text-dim); margin: 0 2px; }
.li-actions-top {
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.li-row input[type="color"] {
  width: 100%;
  height: 32px;
  padding: 2px;
  background: var(--input-bg, #1a1410);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.layout-inspector-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.li-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-dim);
}
.li-row input[type="text"],
.li-row select {
  font-size: 13px;
  padding: 6px 8px;
  background: var(--input-bg, #1a1410);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.li-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted, #93a09d);
}
.li-hint code {
  background: rgba(255,255,255,0.07);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.li-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.li-actions button {
  flex: 1 1 auto;
  font-size: 12px;
  padding: 7px 10px;
}
.li-actions button.danger {
  background: rgba(220,80,80,0.15);
  border-color: rgba(220,80,80,0.4);
  color: #ffb8b8;
}
.li-actions .li-grow { flex: 1 1 auto; }
.li-actions select {
  font-size: 12px;
  padding: 5px 8px;
  background: var(--input-bg, #1a1410);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.li-section-head {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  font-weight: 700;
}
.li-row-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.li-row input[type="number"] {
  font-size: 13px;
  padding: 6px 8px;
  background: var(--input-bg, #1a1410);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  -moz-appearance: textfield;
}

/* --- 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); }
/* Font-source toggle: small button that flips between theme and layout fonts. */
.testing-save-row button.testing-font-source-toggle {
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: lowercase;
}
.testing-save-row button.testing-font-source-toggle[data-font-source="layout"] {
  background: rgba(122,169,212,0.15);
  border-color: rgba(122,169,212,0.4);
  color: #b9d4ee;
}
.testing-save-row button.testing-font-source-toggle:hover { filter: brightness(1.3); }

/* Hover-highlight: when the user hovers Save theme or Save layout, the
   settings panel gets a `data-hl="theme"` or `data-hl="layout"` attribute.
   We DIM the non-matching category and HIGHLIGHT the matching one with a
   warm-tint background tint + accent outline, so it's obvious which fields
   the click will save. Class tagging is done by tagSettingFieldsByCategory()
   at bootstrap based on LAYOUT_KEYS membership. */
.testing-settings[data-hl="theme"]  .layout-setting,
.testing-settings[data-hl="layout"] .theme-setting {
  opacity: 0.25;
  transition: opacity 80ms ease, background 80ms ease;
}
.testing-settings[data-hl="theme"]  .theme-setting,
.testing-settings[data-hl="layout"] .layout-setting {
  background: rgba(210, 167, 107, 0.12);
  outline: 1px solid rgba(210, 167, 107, 0.55);
  border-radius: 4px;
  transition: background 80ms ease, outline-color 80ms ease;
}
/* "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; }