:root,
:root[data-theme="light"] {
  --bg: #F6F1E7;
  --panel: #EDE4D3;
  --ink: #22261F;
  --muted: #7d7465;
  --rule: #d9cfbc;
  --rule-strong: #22261F;
  --accent: #2E4237;
  --accent-contrast: #F6F1E7;
  --link: #5B2333;
  --green: #1F6E54;
  --score: #8A1F2D;
  --dusty: #91A6BE;
}

:root[data-theme="dark"] {
  --bg: #1E2A3C;
  --panel: #24324a;
  --ink: #F6F1E7;
  --muted: #91A6BE;
  --rule: #33445c;
  --rule-strong: #EFD48C;
  --accent: #EFD48C;
  --accent-contrast: #1E2A3C;
  --link: #EFD48C;
  --green: #7fc7a8;
  --score: #EFD48C;
  --dusty: #91A6BE;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  transition: background 0.4s ease, color 0.4s ease;
  min-height: 100vh;
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 16px;
  margin-bottom: 56px;
}

.wordmark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.masthead-right {
  display: flex;
  align-items: baseline;
  gap: 28px;
}

.site-nav {
  display: flex;
  gap: 22px;
}

.site-nav a {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--link);
  padding-bottom: 3px;
}

.site-nav a.active {
  border-bottom: 1px solid var(--link);
}

.theme-toggle {
  /* one small sun or moon — compact, no words */
  font-size: 15px;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--rule); }
/* the tiny dot = "following the clock" */
.theme-toggle.theme-auto::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--score);
}

.stage {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.dropzone {
  border: 1px solid var(--muted);
  outline: 1px solid var(--muted);
  outline-offset: 4px;
  border-radius: 2px;
  padding: 72px 40px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.dropzone.dragover,
.dropzone:hover { background: var(--panel); }

.dropzone h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 36px;
  font-weight: 500;
  margin: 0 0 6px;
  line-height: 1.2;
}

.dropzone p.sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 28px;
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  padding: 12px 30px;
  cursor: pointer;
}

.btn:hover { opacity: 0.9; }

.or-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0 20px;
  color: var(--muted);
}

.or-rule::before,
.or-rule::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
}

.or-rule span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  white-space: nowrap;
}

.drive-row {
  display: flex;
  gap: 12px;
}

.drive-input {
  flex: 1;
  background: transparent;
  border: 1px solid var(--muted);
  border-radius: 2px;
  padding: 11px 14px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  color: var(--ink);
}

.drive-input::placeholder { color: var(--muted); }

.drive-input:focus {
  outline: 1px solid var(--dusty);
  outline-offset: 2px;
}

.upload-status {
  margin-top: 36px;
  min-height: 60px;
}

.upload-filename {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.progress-track {
  height: 2px;
  background: var(--rule);
  border-radius: 1px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--score);
  transition: width 0.2s ease;
}

.upload-message {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 19px;
  color: var(--link);
  margin-top: 16px;
}

.upload-message.error { color: #8A1F2D; }

.upload-link { color: var(--link); }

.pipe-progress { display: block; margin-top: 8px; }

.pipe-track {
  display: block;
  height: 2px;
  max-width: 260px;
  background: var(--rule);
  border-radius: 1px;
  overflow: hidden;
}

.pipe-fill {
  display: block;
  height: 100%;
  background: var(--score);
  transition: width 0.9s ease;
}

.pipe-progress em {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--muted);
}

:root[data-theme="dark"] .upload-message.error { color: #f0a5ae; }

.library-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}

.library-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 21px;
  color: var(--link);
}

.view-switch { display: flex; align-items: baseline; gap: 10px; }
.view-dot { color: var(--muted); }

.view-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 3px;
}

.view-tab.active {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}

.ledger-header {
  display: grid;
  grid-template-columns: 64px 1fr 110px 56px 100px;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr 110px 56px 100px;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  font-size: 13px;
  cursor: pointer;
}

.ledger-row:hover { background: var(--panel); }

.row-thumb, .thumb-blank {
  width: 56px;
  height: 80px;              /* portrait slot; the true frame fits inside it */
  object-fit: contain;
  border-radius: 3px;
  background: var(--panel);
  display: block;
}

.row-caption { line-height: 1.55; }

.tags { color: var(--green); }

.pending-note {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
}

.date-serif {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
}

.date-serif.unscheduled { font-style: italic; color: var(--muted); }

.score {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 21px;
  color: var(--score);
}

.score-of { font-size: 12px; color: var(--muted); }

.status {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status-planned { color: var(--dusty); font-style: italic; }
.status-fetching { color: var(--dusty); }
.status-fetchfailed { color: var(--score); }
.status-received { color: var(--muted); }
.status-transcribing { color: var(--dusty); }
.status-transcribed { color: var(--dusty); }
.status-cutting { color: var(--score); }
.status-polished { color: var(--green); }

/* ---------- new project card ---------- */

.new-project-btn { margin-left: auto; }

.library-head { justify-content: flex-start; gap: 18px; }

.np-card { max-width: 420px; padding: 34px 38px; }

.np-label {
  display: block;
  margin: 18px 0 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.np-label em { text-transform: none; letter-spacing: 0; font-style: italic; }

.np-input {
  width: 100%;
  border: 1px solid var(--muted);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  padding: 9px 12px;
}

.np-file-btn { display: inline-block; }

.np-actions { margin-top: 26px; display: flex; justify-content: flex-end; }

.cal-add {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-cell:hover .cal-add { opacity: 1; }
.cal-add:hover { color: var(--ink); border-color: var(--ink); }

.last-edited {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

#cut-last-edited { display: inline; margin-left: 14px; }

.chooser-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.chooser-status .last-edited { margin-top: 0; }

.empty-note {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--muted);
  text-align: center;
  padding: 56px 0;
}

.cal-nav {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 14px;
}

.cal-month {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
}

.cal-arrow {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 16px;
  padding: 0 4px;
}

.cal-arrow:hover { color: var(--ink); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}

.cal-dayname {
  padding: 6px 8px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}

.cal-cell {
  position: relative;
  height: 134px;             /* fixed so every cell matches — a real calendar grid */
  overflow: hidden;
  padding: 6px 8px;
  border-right: 1px solid var(--panel);
  border-bottom: 1px solid var(--panel);
}

.cal-cell:nth-child(7n) { border-right: none; }
.cal-blank { background: transparent; }
.cal-cell.has-clips { background: var(--panel); }
.cal-cell.today .cal-daynum { border-bottom: 1px solid var(--score); }
.cal-cell.drop-target { outline: 1px dashed var(--dusty); outline-offset: -4px; }

.cal-daynum {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 14px;
  color: var(--muted);
}

.cal-cell.has-clips .cal-daynum { color: var(--ink); }

.cal-more { display: block; font-size: 9.5px; color: var(--muted); margin-top: 2px; }

/* calendar day chip: a clean Notion-style line item — thumbnail, title, rating */
.clip-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: grab;
  margin-top: 3px;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--bg);
  border: 1px solid var(--rule);
  transition: border-color 0.13s ease, background 0.13s ease;
}
.clip-chip:hover { border-color: var(--accent); }
.clip-chip:active { cursor: grabbing; }
.chip-thumb-wrap {
  flex-shrink: 0;
  width: 15px;
  height: 21px;              /* 9:16 mini, so vertical clips fill it exactly */
  border-radius: 3px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--rule);
}
.chip-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* the true frame, fit to the slot — never cropped */
  display: block;
  pointer-events: none;
}
.chip-title {
  flex: 1;
  min-width: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-rate {
  flex-shrink: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 9px;
  color: var(--muted);
  background: var(--panel);
  border-radius: 7px;
  padding: 1px 6px;
}

/* the hook-ratings toggle, top-right above the calendar */
.cal-toolbar { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.hook-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.hook-switch:hover { color: var(--ink); }
.hook-switch .pr-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 18px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--panel);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hook-switch .pr-switch .pr-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--muted);
  transition: left 0.15s ease, background 0.15s ease;
}
.hook-switch .pr-switch.on { background: color-mix(in srgb, var(--accent) 32%, transparent); border-color: var(--accent); }
.hook-switch .pr-switch.on .pr-knob { left: 22px; background: var(--accent); }

/* strategy rating hidden: drop every at-a-glance rating */
body.hooks-off .chip-rate,
body.hooks-off .poster-rate,
body.hooks-off .ledger-row .score { display: none; }

.shelf {
  margin-top: 18px;
  border: 1px solid var(--muted);
  outline: 1px solid var(--muted);
  outline-offset: 3px;
  background: var(--panel);
  border-radius: 3px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.title-editable { cursor: text; }
.title-editable:hover { text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--muted); }

.title-input {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--dusty);
  outline: none;
  width: 100%;
  min-width: 220px;
  padding: 0;
}

.shelf.drop-target { outline: 1px dashed var(--dusty); outline-offset: -4px; }

.shelf-label {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--link);
  white-space: nowrap;
}

.shelf-items { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.shelf-empty {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
}

.clip-chip.chip-wide {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

.chip-wide .chip-thumb { width: 30px; height: 40px; }

.chip-title { font-size: 11.5px; color: var(--ink); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- the "Not scheduled" board: portrait poster tiles ---------- */
.shelf-items.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 16px;
  align-items: start;
}
.poster {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: grab;
}
.poster:active { cursor: grabbing; }
.poster-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--rule);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.poster:hover .poster-thumb {
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(10, 14, 18, 0.12);
  transform: translateY(-2px);
}
.poster-media { width: 100%; height: 100%; object-fit: contain; display: block; }
.poster-thumb .thumb-blank { width: 100%; height: 100%; }
.poster-title {
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.poster-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.poster-status {
  font-family: "DM Sans", sans-serif;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.poster-rate {
  margin-left: auto;
  font-family: "DM Sans", sans-serif;
  font-size: 9px;
  color: var(--muted);
  background: var(--panel);
  border-radius: 7px;
  padding: 1px 6px;
}

/* ---------- the quiet trash affordance (everywhere a post shows) ---------- */
.trash-btn {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  padding: 3px;
  border-radius: 5px;
  display: inline-flex;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ledger-row:hover .row-trash,
.poster:hover .poster-trash { opacity: 0.6; }
.trash-btn:hover { opacity: 1; color: var(--score); background: color-mix(in srgb, var(--score) 12%, transparent); }

.row-trash { position: absolute; right: 2px; bottom: 8px; }
.poster-trash {
  position: absolute;
  right: 5px; bottom: 5px;
  background: rgba(12, 14, 18, 0.55);
  color: #fff;
}
.poster:hover .poster-trash { opacity: 0.9; }
.poster-trash:hover { background: var(--score); color: #fff; opacity: 1; }
.modal-trash { position: absolute; right: 16px; bottom: 14px; opacity: 0.5; }
.modal-trash:hover { opacity: 1; }

/* ---------- the calm "are you sure?" confirm ---------- */
.del-confirm {
  position: fixed;
  z-index: 3000;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 7px;
  box-shadow: 0 14px 40px rgba(10, 14, 18, 0.28);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 280px;
}
.del-q {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--ink);
}
.del-row { display: flex; gap: 8px; justify-content: flex-end; }
.del-no {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
}
.del-no:hover { color: var(--ink); border-color: var(--ink); }
.del-yes {
  border: 1px solid var(--score);
  background: var(--score);
  color: var(--accent-contrast);
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 16px;
  border-radius: 3px;
  cursor: pointer;
}
.del-yes:hover { filter: brightness(1.08); }

.cal-hint {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 10px;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 18, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10;
}

.clip-view {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--muted);
  outline: 1px solid var(--muted);
  outline-offset: 4px;
  border-radius: 3px;
  max-width: 720px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 30px;
}

.clip-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
}

.clip-close:hover { color: var(--ink); }

.clip-body { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }

/* the left column is fixed to the video's width, so the caption controls
   stack neatly UNDER the photo instead of stretching the column wide */
.clip-player { width: 232px; flex-shrink: 0; }

.clip-player video {
  width: 100%;
  height: auto;
  max-height: 440px;
  border-radius: 4px;
  background: #000;
  display: block;
}

.player-blank {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 412px;
  border-radius: 4px;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-blank span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
}

.clip-info { flex: 1; min-width: 0; }

.clip-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 6px;
}

.clip-meta {
  font-size: 11px;
  letter-spacing: 0.1em;
  margin: 0 0 12px;
}

.hook-note {
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 8px;
  color: var(--ink);
}

.hook-note em {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--link);
}

.caption-block {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.65;
  margin: 12px 0 14px;
  white-space: pre-line;
}

.clip-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.clip-head .clip-title { margin: 0; }

.clip-tabs { display: flex; align-items: baseline; gap: 10px; }

.caption-clickable { cursor: pointer; position: relative; transition: border-color 0.2s ease; }

.caption-clickable:hover { border-color: var(--dusty); }

.caption-hint {
  display: block;
  text-align: right;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 8px;
}

.caption-input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--dusty);
  border-radius: 3px;
  padding: 14px 16px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  margin: 12px 0 0;
  resize: vertical;
}

.caption-input:focus { outline: 1px solid var(--dusty); outline-offset: 2px; }

.caption-edit-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0 14px;
}

.caption-edit-link { display: block; margin: 4px 0 14px; padding: 0; }

.clip-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--muted);
  text-decoration: none;
}

.date-row { display: flex; align-items: center; gap: 12px; }

.date-label {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--link);
}

.date-row input[type="date"] {
  background: transparent;
  border: 1px solid var(--muted);
  border-radius: 2px;
  padding: 7px 10px;
  font-family: "DM Sans", sans-serif;
  font-size: 12.5px;
  color: var(--ink);
}

:root[data-theme="dark"] .date-row input[type="date"] { color-scheme: dark; }

.date-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
}

.date-clear:hover { color: var(--ink); }

.kit-intro {
  font-size: 13px;
  color: var(--muted);
  margin: -8px 0 24px;
}

.kit-saved {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
}

.kit-card {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.kit-row { display: flex; gap: 16px; flex-wrap: wrap; }
.kit-half { flex: 1; min-width: 260px; }

.kit-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.kit-hint {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.kit-note {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 0;
}

.pillar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.pillar-chip {
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

:root[data-theme="dark"] .pillar-chip { border-color: var(--accent); color: var(--accent); }

.chip-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  padding: 0;
  line-height: 1;
}

.chip-x:hover { color: var(--score); }

.pillar-add { display: flex; gap: 10px; }

.kit-assist {
  display: block;
  margin-top: 12px;
  padding: 0;
  font-size: 14px;
  color: var(--link);
  border-bottom: 1px dotted var(--link);
}

.kit-toggle-row {
  display: block;
  font-size: 13px;
  margin: 0 0 8px;
  cursor: pointer;
}

.kit-toggle-row input { accent-color: var(--accent); margin-right: 8px; }

.swatch-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.swatch-wrap { position: relative; display: inline-flex; }

.swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  padding: 0;
  cursor: pointer;
}

.swatch:hover { border-color: var(--ink); }

.picker-panel {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--muted);
  outline: 1px solid var(--muted);
  outline-offset: 4px;
  border-radius: 3px;
  width: 340px;
  max-width: 92vw;
  padding: 26px;
}

.sv-area {
  position: relative;
  height: 190px;
  border-radius: 3px;
  cursor: crosshair;
  touch-action: none;
  margin-bottom: 16px;
}

.hue-track {
  position: relative;
  height: 14px;
  border-radius: 7px;
  cursor: pointer;
  touch-action: none;
  margin-bottom: 16px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.picker-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.picker-row { display: flex; align-items: center; gap: 12px; }

.picker-preview {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  flex-shrink: 0;
}

.hex-input {
  width: 110px;
  flex: none;
  font-family: "SF Mono", Menlo, monospace;
  text-transform: lowercase;
}

.picker-quick { display: flex; gap: 8px; flex-wrap: wrap; }

.quick-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  padding: 0;
  cursor: pointer;
}

.quick-swatch:hover { border-color: var(--ink); }

.swatch-x {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--bg);
  border-radius: 50%;
  font-size: 12px;
}

.swatch-add {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px dashed var(--muted);
  background: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}

.swatch-add:hover { color: var(--ink); border-color: var(--ink); }

.font-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.font-card {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: none;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.font-card:hover { border-color: var(--muted); }

.font-card.selected {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.font-sample { display: block; font-size: 17px; margin-bottom: 6px; line-height: 1.3; }

.font-name {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.font-upload-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.kit-actions { margin: 24px 0 0; }

.cut-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 12px 18px;
  margin-bottom: 12px;
}

.cut-runtime {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
}

.runtime-num { font-size: 21px; color: var(--score); }
.runtime-num.runtime-good { color: var(--green); }

.cut-bar-actions { display: flex; align-items: center; gap: 18px; }

.cut-help {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 20px;
}

.transcript {
  font-size: 15.5px;
  line-height: 2.3;
  color: var(--muted);
  max-width: 74ch;
}

.word {
  cursor: pointer;
  padding: 3px 1px;
  border-radius: 2px;
  opacity: 0.55;
}

.word.in-cut {
  background: var(--panel);
  color: var(--ink);
  opacity: 1;
}

.word.in-cut:hover { outline: 1px solid var(--dusty); }

.word.struck {
  text-decoration: line-through;
  text-decoration-color: var(--score);
  text-decoration-thickness: 1.5px;
  color: var(--muted);
}

.cut-marker {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 21px;
  color: var(--score);
  cursor: grab;
  padding: 0 4px;
  user-select: none;
  touch-action: none;
}

.dragging-cut { cursor: grabbing; user-select: none; }
.dragging-cut .cut-marker { cursor: grabbing; }

.pause-pill {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--muted);
  background: none;
  border: 1px dashed var(--muted);
  border-radius: 9px;
  padding: 1px 9px;
  margin: 0 3px;
  cursor: pointer;
  text-decoration: line-through;
  text-decoration-color: var(--score);
  vertical-align: 1px;
}

.pause-pill.kept {
  border-style: solid;
  border-color: var(--green);
  color: var(--green);
  text-decoration: none;
}

.pause-pill.outside { opacity: 0.4; cursor: default; text-decoration: none; }

.cut-preview { margin-top: 32px; }

.cut-preview video {
  width: 240px;
  max-height: 426px;
  border-radius: 4px;
  background: #000;
  display: block;
  margin-top: 8px;
}

.page-wide { max-width: 1280px; }

.three-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 300px;
  gap: 28px;
  align-items: start;
}

.transcript-pane {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  padding-right: 8px;
}

.stage-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 0;
}

.aspect-toggle { display: flex; gap: 6px; }

.aspect-btn {
  border: 1px solid var(--rule);
  background: none;
  color: var(--muted);
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 5px 14px;
  border-radius: 2px;
  cursor: pointer;
}

.aspect-btn.selected {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

/* the Cutting Room's video stage — NOT the upload page's .stage layout box */
.cut-stage {
  position: relative;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}

.stage-9x16 { width: 300px; height: 533px; }
.stage-16x9 { width: 480px; height: 270px; }

.cut-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

.cap-overlay {
  position: absolute;
  left: 50%;
  width: max-content;
  max-width: 84%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  cursor: grab;
  touch-action: none;
}

.cap-overlay:active { cursor: grabbing; }

.text-layer { position: absolute; inset: 0; pointer-events: none; }

.text-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  width: max-content;
  max-width: 92%;
}

.text-wrap.active .text-content { outline: 1px dashed var(--dusty); outline-offset: 3px; }

.text-content {
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  cursor: grab;
  white-space: pre-wrap;
  text-align: center;
  border-radius: 3px;
  max-width: 90vw;
  min-width: 12px;
  min-height: 1em;
}

.text-content:active { cursor: grabbing; }
.text-content[contenteditable="true"] { cursor: text; outline: 1px solid var(--dusty); outline-offset: 3px; }

.text-x {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-grip {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: var(--bg);
  cursor: nwse-resize;
  touch-action: none;
}

.text-w-grip {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 8px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--muted);
  background: var(--bg);
  cursor: ew-resize;
  touch-action: none;
}

.font-menu { position: relative; margin-bottom: 8px; }

.font-menu-btn {
  width: 100%;
  text-align: left;
  border: 1px solid var(--muted);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  padding: 8px 10px;
  cursor: pointer;
}

.font-menu-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--muted);
  border-radius: 3px;
}

.font-menu-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 15px;
  padding: 8px 10px;
  cursor: pointer;
}

.font-menu-opt:hover { background: var(--panel); }
.font-menu-opt.selected { color: var(--link); }

.rail-mini-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 0 6px;
}

.spacing-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 6px;
}

.spacing-row input { flex: 1; }

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  margin-bottom: 4px;
}

.preset-chip {
  background: #33332e;
  border: 1px solid transparent;
  border-radius: 6px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.preset-chip:hover { border-color: var(--muted); }
.preset-chip.selected { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: 1px; }

.preset-aa {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}

.preset-grid-mini .preset-chip { height: 34px; }
.preset-grid-mini .preset-aa { font-size: 14px; }

.swatch-none {
  background:
    linear-gradient(to top left, transparent calc(50% - 1px), #8A1F2D calc(50% - 1px), #8A1F2D calc(50% + 1px), transparent calc(50% + 1px)),
    var(--bg);
  border: 1px solid var(--rule);
}

.stage-note {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  max-width: 300px;
  margin: 0;
  min-height: 18px;
}

.rail {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* undo/redo ride right above the properties frame, always in reach */
.rail-quick { display: flex; gap: 10px; margin: 0 0 6px 2px; }
.rail-card { margin: 0; }

.pane-tabs {
  display: flex;
  align-items: baseline;
  gap: 10px;
  row-gap: 5px;
  /* tabs are sacred: when a pane is dragged narrow (or the screen is small)
     the row wraps to more lines — it never clips, never hides a tab */
  flex-wrap: wrap;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
}
.pane-tabs .view-tab { white-space: nowrap; flex: 0 0 auto; }

.caption-pane { max-width: 60ch; }

.card-toggle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.card-toggle-label { margin: 0; }

.chev {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 13px;
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.rail-card.collapsed .chev { transform: rotate(0deg); }
.rail-card.collapsed .card-body { display: none; }
.rail-card .card-body { margin-top: 12px; }
.rail-sub {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 12px 0 8px;
}
.rail-add { width: 100%; margin-bottom: 12px; }

/* saved caption/text presets — shared chips */
.saved-presets { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.saved-preset {
  display: flex;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--panel);
  overflow: hidden;
}
.saved-preset.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sp-apply {
  flex: 1;
  text-align: left;
  border: none;
  background: none;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  padding: 7px 10px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-apply:hover { color: var(--accent); }
.sp-star, .sp-x {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  padding: 6px 8px;
  flex-shrink: 0;
}
.saved-preset.is-default .sp-star { color: var(--accent); }
.sp-star:hover { color: var(--accent); }
.sp-x:hover { color: var(--score); }
.anim-speed.hidden { display: none; }

.cap-zones { display: flex; flex-wrap: wrap; gap: 6px; }

.text-row {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.text-row.active { border-color: var(--dusty); }
.text-input { width: 100%; margin-bottom: 8px; }
.text-font {
  width: 100%;
  margin-bottom: 8px;
  padding: 7px 8px;
  border: 1px solid var(--muted);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
}
.text-swatches { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.quick-swatch.mini { width: 20px; height: 20px; }
.text-custom { width: 24px; height: 24px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: none; cursor: pointer; }
.text-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.text-size { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex: 1; }
.text-size input { flex: 1; }

.cap-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.cap-mode {
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 2px;
  cursor: pointer;
}

.cap-mode:hover { border-color: var(--muted); }

.cap-mode.selected {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.cap-colors { display: flex; gap: 8px; flex-wrap: wrap; }

.selected-swatch { outline: 2px solid var(--accent); outline-offset: 2px; }

.kit-link { color: var(--link); }

.word.playing { outline: 1px solid var(--dusty); }

.select-pop {
  position: absolute;
  z-index: 30;
  background: var(--bg);
  border: 1px solid var(--muted);
  outline: 1px solid var(--muted);
  outline-offset: 3px;
  border-radius: 3px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pop-count {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13.5px;
  color: var(--muted);
}

.pop-btn {
  border: 1px solid var(--muted);
  background: none;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 2px;
  cursor: pointer;
}

.pop-cut {
  background: var(--score);
  border-color: var(--score);
  color: #F6F1E7;
}

.pop-edit-row { display: flex; align-items: center; gap: 8px; }

.pop-input {
  width: 220px;
  border: 1px solid var(--muted);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 12.5px;
  padding: 6px 10px;
}

.timeline { margin-top: 4px; } /* the timeline hugs the divider — depth goes to tracks */

.tl-ruler {
  position: relative;
  height: 12px;
  margin-bottom: 1px;
}

.tl-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ⌘+/⌘− timeline zoom: ruler + tracks widen inside this scroller, every
   %-positioned child (chips, ticks, playhead, markers) spreads with them */
.tl-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}
/* the ruler + tracks shift right to leave a fixed left gutter for the track
   headers (the film, layers, audio) — set once here as a CSS var */
.timeline { --tl-gut: 116px; }
.tl-ruler, .tl-tracks {
  margin-left: var(--tl-gut);
  min-width: calc(100% - var(--tl-gut));
}

/* the film's own voice, CapCut-style: a full quarter of the strip so the
   lines are readable at a glance */
.tl-wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 22px;
  pointer-events: none;
}

.tl-strip {
  position: relative;
  height: 56px; /* the film row reads fine slim — the big preview is for looking */
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  background: var(--panel);
}

.tl-thumbs {
  display: flex;
  height: 100%;
}

.tl-thumb {
  flex: 1;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tl-segments {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* a kept piece is a clean CapCut-style block: its own rectangle with a
   visible seam beside its neighbor, selection stays inside its edges */
.tl-chip {
  pointer-events: auto;
  position: absolute;
  top: 1px;
  bottom: 1px;
  height: auto;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--score) 8%, transparent);
  border: 2px solid var(--score);
  border-radius: 4px; /* overridden per-piece in JS: outer ends round, seams square */
  cursor: grab;
  overflow: visible; /* keyframe diamonds at the clip edges must show in full */
  background-clip: padding-box;
}

.tl-chip:active { cursor: grabbing; }

.tl-chip.selected {
  background: color-mix(in srgb, var(--score) 22%, transparent);
  border-width: 4px;
  box-shadow: 0 0 0 1px var(--score);
}

.tl-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
}

.tl-handle-l { left: 0; border-radius: 3px 0 0 3px; }
.tl-handle-r { right: 0; border-radius: 0 3px 3px 0; }

/* CapCut-style side grips: solid bars on the selected clip */
.tl-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 52%;
  border-radius: 2px;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.tl-chip.selected .tl-handle { background: var(--score); }
.tl-chip.selected .tl-handle::after { opacity: 1; }
.tl-chip:hover:not(.selected) .tl-handle::after { background: var(--score); opacity: 0.8; }

.tl-text-chip .tl-handle::after { background: var(--dusty); height: 60%; }

.tl-x {
  position: absolute;
  top: 3px;
  right: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--score);
  background: var(--bg);
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* thin and sleek — one short row, every pixel saved goes to the timeline */
.tl-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.tl-tool {
  border: 1px solid var(--muted);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
}

.tl-tool:hover { border-color: var(--ink); }

/* the shortcuts live behind one small button; the sheet floats above */
.tl-shortcuts-wrap { position: relative; display: inline-flex; align-items: center; }
.tl-flex-gap { flex: 1; } /* pushes keyframe + record to the right edge */
.shortcuts-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 800;
  width: min(520px, 70vw);
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}
.shortcuts-pop.hidden { display: none; }

/* the voice-over recorder — a quiet red dot until it's live, then it pulses */
.tl-rec-btn { color: #a83232; }
.tl-rec-btn.recording,
.shelf-rec-btn.recording {
  color: #fff;
  background: #a83232;
  border-color: #a83232;
  animation: pr-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes pr-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.shelf-rec-row { display: flex; gap: 8px; align-items: center; margin: 6px 0 2px; }
.shelf-rec-row .rail-add { margin: 0; flex: 0 0 auto; }
.shelf-rec-btn { color: #a83232; }
.shelf-mic-pick {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  padding: 5px 6px;
  border: 1px solid var(--rule);
  background: transparent;
  border-radius: 3px;
  color: var(--ink);
}

.tl-hint {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
}

.tl-text-lane {
  position: relative;
  height: 34px;
  padding: 0;
  overflow: hidden;
}

.tl-lane-label {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "DM Sans", sans-serif;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
  pointer-events: none;
}

.tl-text-chip {
  position: absolute;
  top: 4px;
  bottom: 4px;
  box-sizing: border-box;
  min-width: 4px; /* short words stay grabbable at their true width */
  background: color-mix(in srgb, var(--dusty) 26%, transparent);
  border: 1px solid var(--dusty);
  border-radius: 3px;
  cursor: grab;
  display: flex;
  align-items: center;
  padding: 0 3px; /* slim — fat padding forced tiny chips to overlap */
  overflow: hidden;
}

.tl-text-chip:active { cursor: grabbing; }
/* selected overlay chips (text, b-roll, audio) glow in the SAME main color as
   a selected A-roll piece, so it's obvious which clip you're about to split */
.tl-text-chip.selected {
  border-color: var(--score);
  border-width: 2.5px;
  box-shadow: 0 0 0 1px var(--score);
  background: color-mix(in srgb, var(--score) 22%, transparent);
}

.tl-text-chip-label {
  font-family: "DM Sans", sans-serif;
  font-style: normal;
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.time-hidden { display: none !important; }

/* ---------- b-roll ---------- */

.broll-layer {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.broll-layer.hidden { pointer-events: none; }

.broll-layer video,
.broll-layer img,
.broll-layer canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* display:block above outguns the global .hidden (type selector adds
   specificity) — these MUST hide or a stale element paints over the film */
.broll-layer video.hidden,
.broll-layer img.hidden,
.broll-layer canvas.hidden { display: none; }

/* a free b-roll box keeps its own shape and floats where you put it */
.broll-layer .broll-free {
  position: absolute;
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
  border-radius: 2px;
}

.broll-frame {
  position: absolute;
  border: 1px dashed var(--dusty);
  pointer-events: none;
}

.broll-grip {
  position: absolute;
  right: -7px;
  bottom: -7px;
  pointer-events: auto;
}

.tl-broll-chip {
  background: color-mix(in srgb, var(--gold, #C9A96A) 30%, transparent);
  border-color: var(--gold, #C9A96A);
}

.tl-broll-lane.drop-ready {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, transparent);
}

.broll-shelf {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

.shelf-add { flex-shrink: 0; }

.shelf-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0;
}

.shelf-item {
  position: relative;
  flex-shrink: 0;
  width: 74px;
  cursor: grab;
  text-align: center;
}

.shelf-item:active { cursor: grabbing; }

.shelf-thumb {
  width: 74px;
  height: 44px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--rule);
  display: block;
  background: #000;
}

.shelf-name {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 9.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.tl-time {
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  color: var(--ink);
  white-space: nowrap;
}

.tl-time em {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  color: var(--muted);
}

/* the playhead rides over EVERY track, CapCut-style */
.tl-tracks { position: relative; }

.tl-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5px;
  background: var(--ink);
  cursor: ew-resize;
  z-index: 6;
}

/* generous grab zone so the line is easy to catch */
.tl-playhead::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: -6px;
}

.tl-ruler { cursor: ew-resize; }

/* the playhead's grab head: rides up in the timestamp row where there's
   nothing else to accidentally click */
.tl-ph-head {
  position: absolute;
  top: -20px;
  width: 15px;
  height: 18px;
  transform: translateX(-50%);
  background: var(--ink);
  border-radius: 4px 4px 8px 8px;
  cursor: ew-resize;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.tl-ph-head:hover { transform: translateX(-50%) scale(1.15); }

.tl-playhead::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}

.tl-play { font-size: 11px; min-width: 30px; padding: 2px 6px; }

.tl-lane {
  margin-top: 8px;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 12px 16px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13.5px;
  color: var(--muted);
}

.chooser-row {
  display: grid;
  grid-template-columns: 64px 1fr 110px;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}

.chooser-row:hover { background: var(--panel); }

.chooser-title { font-size: 14px; }

.colophon {
  margin-top: 96px;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
}

.hidden { display: none; }

.word.timecut { text-decoration-style: dotted; }

body.scrubbing { user-select: none; cursor: ew-resize; }

.tl-reordering { opacity: 0.45; }

.tl-droptarget {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  pointer-events: none;
  z-index: 6;
}

/* seam marker in the transcript where the film jumps between pieces */
.piece-seam {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin: 0 8px -0.2em 2px;
  border-radius: 2px;
  background: var(--score);
  opacity: 0.65;
}

/* ---------- Cutting Room app shell ----------
   A locked, desktop-app layout: left / center / right panels over a
   full-width timeline. Zones never restack; below their minimum sizes
   the page scrolls instead of letting panels crush each other. */

body.app-mode { height: 100vh; overflow: hidden; }

body.app-mode .page {
  max-width: none;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 18px 24px 12px;
  overflow: hidden; /* the whole editor fits the window — only the timeline
                       scrolls, inside itself. The page never scrolls. */
}

body.app-mode .masthead { margin-bottom: 18px; padding-bottom: 10px; }
body.app-mode main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.app-mode #editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.app-mode .colophon { display: none; }
body.app-mode .library-head { margin-bottom: 8px; }
body.app-mode .cut-bar { margin-bottom: 10px; }

.app-shell {
  --pane-l: 340px;
  --pane-r: 300px;
  --tl-h: 230px;
  flex: 1;
  /* the shell FITS the window, always — it never forces a scroll. The top row
     can shrink to nothing (its panes scroll inside themselves), so the whole
     editor stays on one screen no matter the window height. */
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, var(--pane-l)) 7px minmax(220px, 1fr) 7px minmax(200px, var(--pane-r));
  grid-template-rows: minmax(0, 1fr) 7px var(--tl-h);
}

.shell-pane { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

.pane-left { grid-column: 1; grid-row: 1; }
.pane-center { grid-column: 3; grid-row: 1; overflow: auto; align-items: center; }
.pane-right { grid-column: 5; grid-row: 1; overflow-y: auto; }
.pane-timeline { grid-column: 1 / -1; grid-row: 3; overflow: auto; }

.pane-left .transcript-pane { max-height: none; }
.pane-center .stage-col { width: 100%; }
.pane-right .rail { width: 100%; }

.shell-divider { background: transparent; position: relative; z-index: 4; }
.shell-divider::after {
  content: "";
  position: absolute;
  background: var(--rule);
  transition: background 0.15s ease;
}
.divider-v { grid-row: 1; cursor: col-resize; }
#div-l { grid-column: 2; }
#div-r { grid-column: 4; }
.divider-v::after { top: 0; bottom: 0; left: 3px; width: 1px; }
.divider-h { grid-column: 1 / -1; grid-row: 2; cursor: row-resize; }
.divider-h::after { left: 0; right: 0; top: 3px; height: 1px; }

/* ---- STAGE RIGHT: the CapCut-style second layout ----
   The video moves to a tall column on the right (full height, big), the
   properties rail slides to the middle, and the timeline spans left+middle.
   The classic layout stays the default; this is a toggle. */
.app-shell.shell-right {
  grid-template-columns: minmax(180px, var(--pane-l)) 7px minmax(180px, var(--pane-r)) 7px minmax(200px, 1fr);
}
.shell-right .pane-left { grid-column: 1; grid-row: 1; }
.shell-right .pane-right { grid-column: 3; grid-row: 1; }
.shell-right .pane-center { grid-column: 5; grid-row: 1 / 4; }
.shell-right .pane-timeline { grid-column: 1 / 4; grid-row: 3; }
.shell-right .divider-v#div-l { grid-column: 2; grid-row: 1 / 4; }
.shell-right .divider-v#div-r { grid-column: 4; grid-row: 1 / 4; }
.shell-right .divider-h { grid-column: 1 / 4; }
.shell-right .pane-center .stage-col { height: 100%; display: flex; flex-direction: column; justify-content: center; }

/* the layout toggle sits with the aspect buttons */
.layout-toggle-btn { margin-left: 10px; }

/* the 3·2·1 countdown before the mic goes hot — big, centered over everything */
#rec-countdown {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  background: rgba(20, 22, 18, 0.28);
}
#rec-countdown.show { display: flex; }
#rec-countdown .rec-count-num {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(168, 50, 50, 0.94);
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 140px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.4);
}
#rec-countdown .rec-count-num.pop { animation: rec-count-pop 0.85s ease-out; }
@keyframes rec-count-pop {
  0% { transform: scale(0.45); opacity: 0; }
  28% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(0.86); opacity: 0.9; }
}

/* the live take, growing on its own new bottom lane while you speak */
.tl-rec-live-chip {
  position: absolute;
  top: 1px;
  bottom: 1px;
  background: color-mix(in srgb, #a83232 18%, transparent);
  border: 2px solid #a83232;
  border-radius: 4px;
  color: #a83232;
  font-family: "DM Sans", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  animation: pr-rec-pulse 1.2s ease-in-out infinite;
}
.shell-divider:hover::after,
.shell-divider.dragging::after { background: var(--score); }

.stage-fit { transform-origin: top center; position: relative; }

/* unified layer stack: text and video overlays share z-order on the stage */
.broll-layer { z-index: 10; }
.text-layer { z-index: auto; }
.text-wrap { z-index: 10; }
.cap-overlay { z-index: 200; }
.broll-frame { z-index: 190; }

/* the captions track: pinned above every layer, read-only chips */
.tl-cap-lane {
  position: relative;
  height: 22px;
  padding: 0;
  overflow: hidden;
  border-style: solid;
  opacity: 0.95;
}

.tl-cap-chip {
  position: absolute;
  top: 4px;
  bottom: 4px;
  min-width: 3px; /* stays clickable even when the word is very short */
  background: color-mix(in srgb, var(--green) 45%, transparent);
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: inset -1px 0 0 var(--bg); /* a hairline seam between neighbours */
}

.tl-cap-chip-label {
  padding: 0 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 10.5px;
  line-height: 1.15;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.tl-cap-chip:hover { background: var(--green); }

/* the film itself sits between the under-layers and layer 1 */
.cut-stage video#player { position: relative; z-index: 18; }

/* the film's background-removed twin: plays exactly where the film's picture
   was (the player runs invisibly underneath for voice, timing, and clicks) */
#film-cutout {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 18;
  pointer-events: none;
}
#film-cutout.hidden { display: none; }
/* when the film plays as a free box, its cutout twin wears the same frame */
#film-cutout.aroll-free { height: auto; inset: auto; object-fit: contain; transform: translate(-50%, -50%); border-radius: 2px; }
.tl-cap-lane { cursor: grab; }
.tl-cap-lane:active { cursor: grabbing; }
.tl-underlane { border-style: dotted; opacity: 0.85; }
.cap-overlay { z-index: 500; }

/* CapCut-style track headers */
.lane-head {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px 0 4px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  z-index: 3;
}

.lane-btn {
  border: none;
  background: none;
  font-size: 10px;
  line-height: 1;
  padding: 2px 3px;
  cursor: pointer;
  color: var(--muted);
  border-radius: 2px;
}

.lane-btn:hover { background: var(--panel); color: var(--ink); }
.lane-grip { cursor: grab; font-size: 12px; }
.lane-grip:active { cursor: grabbing; }
.lane-del:hover { color: var(--score); }
.lane-on { color: var(--score); }

.tl-overlane .tl-lane-label { left: 96px; }
.lane-hidden .tl-text-chip { opacity: 0.35; }
.lane-locked .tl-text-chip { cursor: not-allowed; }

/* the film as a free box on the stage */
.cut-stage video#player.aroll-free {
  position: absolute;
  height: auto;
  width: 60%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  border-radius: 2px;
}

.aroll-frame {
  position: absolute;
  border: 1px dashed var(--score);
  z-index: 185;
  cursor: grab;
}

.aroll-frame:active { cursor: grabbing; }

.film-head { background: color-mix(in srgb, var(--bg) 70%, transparent); border-radius: 2px; }

.film-label {
  font-family: "DM Sans", sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- the track-header GUTTER: a fixed column on the far left ----
   Every lane's controls are MOVED here (see layoutGutter in cut.html) so they
   sit in their own section instead of overlaying the clips. */
#tl-gutter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--tl-gut));
  width: var(--tl-gut);
  z-index: 7;
  pointer-events: none;
}
.gutter-cell {
  position: absolute;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 6px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-right-width: 2px;
  border-radius: 3px 0 0 3px;
  overflow: hidden;
  pointer-events: auto;
}
.gutter-cap { cursor: grab; }
.gutter-cap:active { cursor: grabbing; }
/* headers flow normally inside their gutter cell — no absolute overlay, no
   translucent wash over footage */
.gutter-cell .lane-head,
.gutter-cell .film-head {
  position: static;
  inset: auto;
  background: none;
  padding: 0;
  gap: 1px;
  flex: 0 0 auto;
}
.gutter-cell .tl-lane-label {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  margin-left: 4px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Ask AI: edit by conversation (the panel's sixth tab) ---- */
.ai-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 23px;
  color: var(--ink);
  margin: 2px 0 8px;
}
.ai-sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 10px;
}
.ai-steps { margin: 4px 0 14px; padding-left: 20px; }
.ai-steps li { font-size: 12px; color: var(--ink); margin: 7px 0; line-height: 1.5; }
.ai-steps a { color: var(--link, var(--accent)); }
.ai-key-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  padding: 9px 10px;
  margin-bottom: 8px;
}
.ai-key-err { font-size: 11.5px; color: var(--score); margin: 8px 0 0; }
.ai-key-err.hidden { display: none; }
.ai-fine {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 0;
}
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.ai-chip {
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.ai-chip:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.ai-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 10px;
  max-height: 300px;
  overflow-y: auto;
}
.ai-msg {
  border-radius: 8px;
  padding: 8px 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 92%;
  white-space: pre-wrap;
}
.ai-msg.you {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--ink);
}
.ai-msg.bot {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.ai-busy {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
}
.ai-form { display: flex; gap: 6px; align-items: flex-end; }
.ai-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  padding: 8px 10px;
}
.ai-input:focus { outline: none; border-color: var(--accent); }
.ai-send { white-space: nowrap; }
.ai-send:disabled { opacity: 0.5; cursor: default; }
.ai-disconnect {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 10.5px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.ai-disconnect:hover { color: var(--score); }

/* properties panel (Adjust / Speed / Audio) */
.props-card { border: 1px solid var(--rule); border-radius: 3px; padding: 14px 16px; margin-bottom: 14px; }
.props-tabs { margin-bottom: 10px; }
.props-empty { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 14px; color: var(--muted); margin: 6px 0; }
.props-scope { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }

.adj-row { display: grid; grid-template-columns: 86px 1fr 46px 20px; gap: 6px; align-items: center; margin-bottom: 4px; }
.adj-label { font-size: 11px; color: var(--ink); white-space: nowrap; }
.adj-slider { width: 100%; }
.adj-num {
  width: 46px; border: 1px solid var(--rule); border-radius: 2px; background: transparent;
  color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 11px; padding: 2px 4px;
}
.adj-reset { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0; }
.adj-reset:hover { color: var(--score); }
.adj-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.adj-preset-pick { width: auto; font-size: 11px; padding: 4px 8px; }

/* quick caption controls under the clip in the Library */
.cap-quick {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cap-quick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cap-quick-name {
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 76px;
}
.cq-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cq-pill {
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.cq-pill:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.cq-pill.selected { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.cq-pill:disabled { opacity: 0.45; cursor: default; }
.cap-quick-note {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}
.cap-quick-sync { font-size: 12px; opacity: 0.85; }

.caption-autosave {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin-left: 8px;
}

/* while a caption change re-polishes, the (now outdated) clip is veiled so a
   click never looks like it did nothing */
/* shrink-wraps the video so the veil hugs the picture exactly — a block div
   here spans the whole column and the veil dims empty air */
.cq-player-wrap { position: relative; width: 100%; }

/* live captions drawn over the caption-free master — instant toggles */
.cq-cap-live {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 92%;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  white-space: pre-wrap;
  z-index: 4;
}
.cq-veil.hidden { display: none; } /* .cq-veil's own display:flex outranks the global .hidden by order — be explicit */
.cq-veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 18, 0.62);
  backdrop-filter: blur(2px);
  border-radius: 4px;
  pointer-events: none;
  z-index: 5;
}
.cq-veil-text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: #f2ede2;
  text-align: center;
  padding: 0 18px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.cap-quick-link {
  font-family: "DM Sans", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.cap-quick-link:hover { text-decoration: underline; }

/* ON/OFF pill switches */
.pr-switch-row { grid-template-columns: 110px 1fr; cursor: pointer; }
.pr-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 62px;
  height: 20px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--panel);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pr-switch .pr-knob {
  position: absolute;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--muted);
  transition: left 0.15s ease, background 0.15s ease;
}
.pr-switch .pr-state {
  position: absolute;
  right: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.pr-switch.on { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); }
.pr-switch.on .pr-knob { left: 44px; background: var(--accent); }
.pr-switch.on .pr-state { right: auto; left: 8px; color: var(--ink); }
.pr-switch.disabled { opacity: 0.45; cursor: not-allowed; }

/* THE SHELF: the media bank as the left pane's third tab */
.shelf-pane {
  overflow-y: auto;
  padding: 4px 2px 20px;
}
.shelf-pane.hidden { display: none; }
.shelf-scope { display: flex; gap: 6px; margin: 8px 0 10px; }
.shelf-folders { display: flex; gap: 12px; margin: 0 0 10px; align-items: baseline; }
.shelf-panel-add { margin-bottom: 12px; font-size: 11px; }
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}
.shelf-grid-audio { grid-template-columns: 1fr; }
.shelf-card {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--panel);
  padding: 0 0 6px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.shelf-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.shelf-card-thumb {
  display: block;
  width: 100%;
  height: 118px;
  object-fit: cover;
  background:
    linear-gradient(45deg, var(--rule) 25%, transparent 25%, transparent 75%, var(--rule) 75%) 0 0 / 12px 12px,
    linear-gradient(45deg, var(--rule) 25%, transparent 25%, transparent 75%, var(--rule) 75%) 6px 6px / 12px 12px;
}
.shelf-grid-audio .shelf-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.shelf-card-audio { font-size: 20px; color: var(--dusty); flex: 0 0 auto; }
.shelf-card-name {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 10.5px;
  color: var(--ink);
  padding: 5px 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shelf-grid-audio .shelf-card-name { padding: 0; flex: 1; }
.shelf-card-dur {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(10, 14, 18, 0.72);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 2px;
  pointer-events: none;
}
.shelf-grid-audio .shelf-card-dur { position: static; background: none; color: var(--muted); padding: 0; }
.shelf-card-badge {
  position: absolute;
  bottom: 26px;
  left: 6px;
  background: color-mix(in srgb, var(--accent) 85%, #000);
  color: var(--accent-contrast);
  font-family: "DM Sans", sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 2px;
  pointer-events: none;
}
.shelf-card-x {
  position: absolute;
  top: 4px;
  right: 4px;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: rgba(10, 14, 18, 0.72);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.shelf-card:hover .shelf-card-x { opacity: 0.85; }
.shelf-grid-audio .shelf-card-x { position: static; opacity: 0.5; flex: 0 0 auto; }

/* Sound FX library: category headers + a clickable play/preview button */
.shelf-cat-head {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin: 12px 2px 2px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rule);
}
.shelf-cat-head:first-child { margin-top: 2px; }
.shelf-sfx-note {
  font-size: 10.5px;
  color: var(--muted);
  margin: 4px 2px 8px;
  line-height: 1.4;
}
.shelf-grid-audio .shelf-card-audio {
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--rule);
  font-size: 10px;
  color: var(--accent);
  transition: background 0.12s ease, color 0.12s ease;
}
.shelf-grid-audio .shelf-card-audio:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.shelf-grid-audio .shelf-card-audio.playing { background: var(--accent); color: var(--accent-contrast); }
.shelf-grid-audio .shelf-card-music { cursor: pointer; font-size: 12px; }

/* search box for the Music tab */
.shelf-search {
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 8px;
  padding: 6px 10px;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.shelf-search::placeholder { color: var(--muted); }
.shelf-search:focus { outline: none; border-color: var(--accent); }

/* Export button — distinct from Re-polish, on-brand (cherry in light, butter
   in dark), with a download arrow. --accent-contrast reads correctly on --score
   in both themes. */
/* the Export button narrates its own wait, just like the Miracle button:
   a fill sweeps across it and a quiet line under it says what's happening */
.export-wrap {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}
.btn-export {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--score);
  color: var(--accent-contrast);
  border-color: var(--score);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.btn-export:hover { opacity: 0.9; }
.btn-export:disabled { cursor: progress; opacity: 0.95; }
.btn-export .export-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.22);
  transition: width 0.5s ease;
  pointer-events: none;
}
.btn-export svg, .btn-export .export-btn-label { position: relative; }
.export-live {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  white-space: nowrap;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--muted);
  pointer-events: none;
  /* sits over whatever is below (the mode pills' outlined box) — give it its
     own little plate of page colour so it never fades into that border */
  background: var(--bg);
  padding: 2px 10px;
  border-radius: 999px;
}

/* ✦ the miracle button + its target-length pills. While it works, the button
   is its own progress bar: .magic-fill sweeps left→right and the label
   narrates the phase, so nobody wonders (or refreshes). */
.btn-magic {
  font-weight: 600;
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
  min-width: 168px; /* label changes phase to phase — keep the button steady */
}
.btn-magic .magic-btn-label { position: relative; z-index: 1; }
.btn-magic .magic-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: color-mix(in srgb, var(--accent-contrast) 22%, transparent);
  transition: width 0.5s ease;
  pointer-events: none;
}
.btn-magic.working { cursor: progress; }
.btn-magic.working:disabled { opacity: 1; } /* stay legible — the fill IS the signal */
.btn-magic.working .magic-fill::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -34px;
  width: 34px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-contrast) 30%, transparent));
  animation: magic-shimmer 1.6s ease-in-out infinite;
}
@keyframes magic-shimmer {
  0% { opacity: 0.2; }
  50% { opacity: 0.9; }
  100% { opacity: 0.2; }
}
.magic-len { display: inline-flex; gap: 6px; margin-right: 4px; }
.magic-len .cq-pill { font-size: 10.5px; }

/* the magic layers panel — everything the button did, each row removable */
.magic-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--panel);
  padding: 9px 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.12s ease;
}
.magic-row:hover { border-color: var(--accent); }
.magic-ic {
  flex: 0 0 auto;
  width: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--link);
  font-family: "Cormorant Garamond", serif;
}
.magic-label {
  flex: 1;
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.35;
}
.magic-x { position: static; opacity: 0.5; flex: 0 0 auto; }
.magic-row:hover .magic-x { opacity: 0.85; }

/* Export dialog */
.export-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 14, 18, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.export-overlay.hidden { display: none; }
.export-modal {
  background: var(--panel);
  color: var(--ink);
  width: min(520px, 94vw);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 22px 24px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.export-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.export-head h2 { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 24px; margin: 0; color: var(--link); }
.export-close { background: none; border: none; font-size: 15px; color: var(--muted); cursor: pointer; }
.export-presets { display: flex; gap: 8px; margin-bottom: 18px; }
.export-preset {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-family: "DM Sans", sans-serif;
  cursor: pointer;
}
.export-preset .ep-ic { font-size: 15px; }
.export-preset.selected { border-color: var(--score); color: var(--ink); background: color-mix(in srgb, var(--score) 8%, transparent); }
.export-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.export-label { width: 84px; flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.export-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.export-note { font-size: 11px; color: var(--muted); margin: 6px 0 16px; line-height: 1.45; }
.export-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.export-status { font-size: 11.5px; color: var(--muted); font-style: italic; margin-right: auto; }

/* the quiet toast: feedback that fades away on its own */
#pr-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(8px);
  max-width: min(560px, 86vw);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 10px 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 900;
}
#pr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* the erase brush's red marking overlay on the stage */
#erase-overlay {
  position: absolute;
  z-index: 240;
  pointer-events: none;
}

/* chroma key controls (Erase tab) */
.chroma-row { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.chroma-swatch {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-sizing: border-box;
}
.chroma-swatch.empty {
  background:
    linear-gradient(45deg, var(--rule) 25%, transparent 25%, transparent 75%, var(--rule) 75%) 0 0 / 8px 8px,
    linear-gradient(45deg, var(--rule) 25%, transparent 25%, transparent 75%, var(--rule) 75%) 4px 4px / 8px 8px;
}

/* audio tracks */
.tl-audiolane { position: relative; height: 30px; padding: 0; overflow: hidden; border-style: solid; }
.tl-audio-chip { background: color-mix(in srgb, #3a5a8c 40%, transparent); border-color: var(--dusty); }
.tl-audio-chip .tl-text-chip-label { font-size: 10px; }
.audio-thumb { display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--dusty); background: var(--panel); }
.tl-chip { background-repeat: no-repeat; }

/* keyframes: diamonds in the panel, markers on the clips */
.kf-row { grid-template-columns: 18px 80px 1fr 46px; }
.kf-diamond-spacer { width: 18px; }

/* section headers inside the Motion tab: Zoom / Keyframe motion */
.props-sect {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); margin: 16px 0 6px;
  border-bottom: 1px solid var(--rule); padding-bottom: 4px;
}
/* the master ◆ — the obvious "add a keyframe" button */
.kf-master {
  display: block; width: 100%;
  border: 1px solid var(--score); border-radius: 2px;
  background: transparent; color: var(--score);
  font-family: "DM Sans", sans-serif; font-size: 11.5px; letter-spacing: 0.08em;
  padding: 7px 12px; margin: 4px 0 2px; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.kf-master:hover { background: var(--score); color: var(--accent-contrast); }
.kf-master.on-kf { background: var(--score); color: var(--accent-contrast); }

/* toolbar ◆: sits on the right, opposite play/split */
.tl-kf-btn { margin-left: auto; border-color: var(--score); color: var(--score); }
.tl-kf-btn:hover { border-color: var(--score); background: var(--score); color: var(--accent-contrast); }
.tl-kf-btn.on-kf { background: var(--score); color: var(--accent-contrast); }
.tl-kf-btn:disabled { opacity: 0.35; cursor: default; background: transparent; color: var(--score); }
.kf-diamond {
  border: none; background: none; cursor: pointer;
  font-size: 11px; color: var(--rule); padding: 0; line-height: 1;
  transition: color 0.12s ease, transform 0.12s ease;
}
.kf-diamond.has-kfs { color: var(--dusty); }
.kf-diamond.on-kf { color: var(--score); transform: scale(1.25); }
.kf-diamond:hover { color: var(--score); }

/* keyframe markers: bold WHITE diamonds that pop on any footage (CapCut-style).
   theme accent colors vanish against colorful thumbnails — white + dark outline
   reads on anything. */
.kf-marker {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #ffffff;
  border: 1.5px solid rgba(12, 14, 18, 0.9);
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
  cursor: ew-resize;
  z-index: 8;
  user-select: none;
  transition: width 0.1s ease, height 0.1s ease;
}
.kf-marker:hover { width: 18px; height: 18px; }
.kf-marker.selected {
  width: 21px;
  height: 21px;
  background: #ffffff;
  border: 3px solid var(--score);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 1px 7px rgba(0, 0, 0, 0.7);
}

.motion-grip {
  position: absolute;
  z-index: 250;
  border-color: var(--score);
  background: var(--bg);
  width: 15px;
  height: 15px;
}

/* CapCut-style selection frame: white box hugging the video's outer edge,
   corner circles straddling it OUTSIDE the picture. Lives in #stage-fit, not
   #stage, so nothing clips it. Never eats clicks — only the handles do. */
.film-frame {
  position: absolute;
  z-index: 600;
  pointer-events: none;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(12, 14, 18, 0.5);
}
.ff-handle,
.bf-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid rgba(12, 14, 18, 0.75);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  transition: transform 0.1s ease;
}
.ff-handle:hover, .bf-handle:hover { transform: scale(1.25); }
.ff-handle[data-corner="tl"], .bf-handle[data-corner="tl"] { left: -7px; top: -7px; cursor: nwse-resize; }
.ff-handle[data-corner="br"], .bf-handle[data-corner="br"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.ff-handle[data-corner="tr"], .bf-handle[data-corner="tr"] { right: -7px; top: -7px; cursor: nesw-resize; }
.ff-handle[data-corner="bl"], .bf-handle[data-corner="bl"] { left: -7px; bottom: -7px; cursor: nesw-resize; }

/* ---------- the home base: her name, her line, her places ---------- */

.hb {
  text-align: center;
  padding: 44px 0 8px;
}
.hb-greet {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 52px;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.hb-name {
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 55%, transparent);
  cursor: text;
  padding: 0 2px;
}
.hb-name:focus { outline: none; border-bottom-style: solid; }
.hb-line {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 19px;
  color: var(--muted);
  margin: 10px 0 26px;
  transition: opacity 0.6s ease;
}
.hb-line.fading { opacity: 0; }

.hb-socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.hb-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--panel);
  padding: 8px 16px;
  text-decoration: none;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.hb-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 18px rgba(10, 14, 18, 0.10);
}
.hb-tile-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.hb-tile-x {
  position: absolute;
  top: -7px; right: -7px;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.hb-tile:hover .hb-tile-x { opacity: 1; }
.hb-tile-x:hover { color: var(--score); border-color: var(--score); }
.hb-tile-add {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.hb-tile-add:hover { color: var(--ink); }

.hb-add-form.hidden, .drive-row.hidden { display: none; } /* their own display rules outrank the global .hidden by order */
.hb-add-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.hb-select {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--panel);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  padding: 8px 10px;
}
.hb-input {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--panel);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  padding: 8px 12px;
  width: min(320px, 60vw);
}
.hb-add-go { padding: 8px 16px; font-size: 11px; }

/* quiet space reserved for the dashboard-to-come (drafts, review, streak) */
.hb-grow {
  margin: 34px auto 0;
  max-width: 560px;
  border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
  height: 20px;
}

/* ---------- one upload surface: mode pills + adaptive dropzone ---------- */

.mode-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 6px;
}
.mode-pill {
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: transparent;
  color: var(--muted);
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.mode-pill:hover { border-color: var(--ink); color: var(--ink); }
.mode-pill.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--ink);
}
.mode-whisper {
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--muted);
  margin: 0 0 16px;
}

.dz-drive { text-align: center; margin: 14px 0 0; }
.dz-drive-link {
  border: none;
  background: none;
  color: var(--muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px dotted var(--rule);
  padding: 0 2px 1px;
}
.dz-drive-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.dz-drive-row { margin-top: 12px; }
.dz-drive-soon {
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13.5px;
  color: var(--muted);
  margin: 12px 0 0;
}

.stage-panel {
  max-width: 640px;
  margin: 18px auto 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--panel);
  padding: 16px 18px;
}
.stage-panel.duo-staged { border-top: 1px solid var(--rule); padding-top: 16px; }

/* the always-there customize door: one quiet line under the dropzone */
.customize-slot { max-width: 640px; margin: 10px auto 0; }
.customize-slot .opt-inline { border-top: none; margin-top: 0; padding-top: 0; }
.customize-slot .opt-toggle { color: var(--muted); }
.customize-slot .opt-toggle:hover { color: var(--ink); }
.customize-slot .opt-panel { padding: 14px 10px 8px; }

/* the Drive paste lives right under the zone — no reveal click */
.dz-drive-row { max-width: 640px; margin: 14px auto 0; }

.banner-choice {
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  padding: 4px 12px;
  margin: 0 2px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.banner-choice:hover { background: var(--accent); color: var(--accent-contrast); }

/* ---------- Stitch & Batch: many films, two very different doors ---------- */

.duo-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0 6px;
  color: var(--muted);
  font-family: "DM Sans", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.duo-rule::before, .duo-rule::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
}

.duo-banner {
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  margin: 10px 0 2px;
}

.duo-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
}
@media (max-width: 720px) { .duo-cards { grid-template-columns: 1fr; } }

.trio-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
@media (max-width: 900px) { .trio-cards { grid-template-columns: 1fr; } }

/* the customize door, living inside each card */
.opt-inline { width: 100%; margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 8px; }
.opt-inline .opt-toggle { width: 100%; justify-content: center; font-size: 11px; padding: 8px 0; }
.opt-inline .opt-panel { padding: 10px 0 4px; }
.opt-inline .opt-cards { grid-template-columns: 1fr; gap: 8px; }
.opt-inline .opt-card { padding: 12px 14px; }
.opt-inline .opt-card-name { font-size: 14px; }
.opt-inline .opt-card-desc { font-size: 11px; }
.opt-inline .opt-pills { flex-wrap: wrap; }
.opt-batch-note {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  margin: 2px 0 10px;
  text-align: center;
}
.opt-batch-note strong { color: var(--accent); font-weight: 600; }

.duo-card {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--panel);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.duo-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(10, 14, 18, 0.10);
}
.duo-card.dragover {
  transform: translateY(-2px) scale(1.012);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 12px 30px rgba(10, 14, 18, 0.12);
}
@keyframes beckon {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.duo-card.beckon { border-color: var(--accent); animation: beckon 1.2s ease 2; }

.duo-icon { color: var(--accent); }
.duo-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  margin: 2px 0 0;
  color: var(--ink);
}
.duo-sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  margin: 0;
  color: var(--ink);
}
.duo-sub em { font-style: italic; color: var(--accent); }
.duo-desc {
  font-family: "DM Sans", sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 2px 0 10px;
}
.duo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.duo-btn { font-size: 11px; padding: 8px 14px; cursor: pointer; }
.duo-soon {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
  margin-left: 4px;
}
.duo-drive { opacity: 0.65; cursor: default; }
.duo-hint {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0 0;
}
.duo-drive-row { margin-top: 10px; width: 100%; }

.duo-staged { width: 100%; margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 12px; }
.duo-staged-label {
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.stitch-list, .batch-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.stitch-take, .batch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
  padding: 7px 10px;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  color: var(--ink);
}
.stitch-take { cursor: grab; }
.stitch-take.lifting { opacity: 0.45; }
.stitch-take.over { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
@keyframes arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.arrive { animation: arrive 0.25s ease both; }

.take-grip { color: var(--muted); letter-spacing: -2px; cursor: grab; }
.take-num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  color: var(--accent);
  min-width: 16px;
  text-align: center;
}
.take-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.take-x {
  border: none; background: none; color: var(--muted);
  font-size: 15px; cursor: pointer; padding: 0 2px;
}
.take-x:hover { color: var(--score); }

.duo-go { width: 100%; }

.duo-progress { margin-top: 18px; }
.batch-state { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.batch-state.done { color: var(--ink); font-style: normal; font-family: "DM Sans", sans-serif; font-size: 11.5px; }
.batch-mini {
  display: inline-block; width: 72px; height: 4px;
  border-radius: 2px; background: var(--rule); overflow: hidden;
}
.batch-mini-fill { display: block; height: 100%; background: var(--accent); transition: width 0.5s ease; }

/* ---------- optional "Options" door on the upload page ---------- */
.opt-door { text-align: center; margin: 22px 0 0; }

.opt-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}
.opt-toggle:hover { color: var(--ink); }
.opt-chevron { font-style: normal; font-size: 13px; transition: transform 0.25s ease; }
.opt-toggle[aria-expanded="true"] .opt-chevron { transform: rotate(180deg); }

.opt-panel {
  margin-top: 14px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 26px 26px 28px;
  background: color-mix(in srgb, var(--panel) 40%, transparent);
  text-align: left;
  animation: opt-open 0.32s ease;
}
@keyframes opt-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.opt-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 21px;
  color: var(--ink);
  text-align: center;
  margin: 0 0 18px;
}

.opt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.opt-card {
  position: relative;
  text-align: left;
  cursor: pointer;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.opt-card:hover { border-color: var(--muted); }
.opt-card.selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}

.opt-card-icon { color: var(--accent); line-height: 0; }
.opt-card-name {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.opt-card-desc { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.opt-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
}
.opt-card.selected .opt-check { display: flex; }

.opt-sub { margin-top: 22px; }
.opt-sub-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.opt-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-pill {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 8px 16px;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-size: 12.5px;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.opt-pill:hover { border-color: var(--muted); }
.opt-pill.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.opt-hint {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  margin: 12px 0 0;
}

/* on-screen text: the rail box is multi-line now */
textarea.text-input {
  resize: vertical;
  min-height: 2.6em;
  line-height: 1.4;
  font-family: "DM Sans", sans-serif;
}

/* upload page: quiet reassurance under the live status */
.upload-reassure {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  font-style: normal;
}

/* the microphone self-test under the record row */
.mic-check-link { display: inline-block; margin: 2px 0 0; }
.mic-check-out { white-space: pre-wrap; margin-top: 4px; }

/* ---- select many at once: the marquee box, highlights, and the bulk bar ---- */
#marquee-box {
  position: fixed;
  z-index: 9000;
  border: 1.5px dashed var(--score);
  background: color-mix(in srgb, var(--score) 10%, transparent);
  pointer-events: none;
}
.multi-sel { outline: 2px solid var(--score); outline-offset: 1px; }

/* the drop-here line when a chip hovers the gap between two layers */
#gap-line {
  position: fixed;
  height: 3px;
  border-radius: 2px;
  background: var(--score);
  z-index: 9000;
  display: none;
  pointer-events: none;
}
#gap-line.show { display: block; }

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  margin: 6px 0 0;
  border: 1px solid var(--score);
  border-radius: 3px;
  background: color-mix(in srgb, var(--score) 6%, var(--panel));
}
.bulk-bar.hidden { display: none; }
.bulk-count {
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
#bulk-font {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  border-radius: 3px;
  max-width: 150px;
}
.bulk-swatches { display: flex; gap: 4px; align-items: center; }
.bulk-del { color: #a83232; }

/* the first track hugs the ruler — between-lane gaps stay as drop targets */
#tl-tracks > .tl-lane:first-child, #tl-tracks > .tl-cap-lane:first-child { margin-top: 2px; }

/* ---- the front door + account chrome ---- */
#auth-door {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.auth-door-card { text-align: center; max-width: 420px; padding: 24px; }
.auth-door-mark { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; letter-spacing: 0.14em; font-weight: 600; }
.auth-door-note { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; color: var(--muted); margin: 6px 0 18px; }
.auth-door-hint { font-size: 12px; color: var(--muted); margin-top: 16px; }
#auth-door-mount { display: flex; justify-content: center; }
.credits-pill {
  font-family: "DM Sans", sans-serif; font-size: 11px; letter-spacing: 0.06em;
  border: 1px solid var(--rule); border-radius: 14px; padding: 3px 10px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.credits-pill.credits-out { border-color: #a83232; color: #a83232; }
.admin-link { font-family: "DM Sans", sans-serif; font-size: 11px; letter-spacing: 0.08em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
#viewing-as-banner {
  position: sticky; top: 0; z-index: 9999;
  background: #a83232; color: #fff; text-align: center;
  font-family: "DM Sans", sans-serif; font-size: 12.5px; padding: 6px 10px;
}
#viewing-as-banner a { color: #fff; }
#user-button { display: inline-flex; align-items: center; }

/* the admin desk table */
.admin-table { width: 100%; border-collapse: collapse; font-family: "DM Sans", sans-serif; font-size: 13px; margin-top: 14px; }
.admin-table th { text-align: left; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--rule-strong); }
.admin-table td { padding: 9px 10px; border-bottom: 1px solid var(--rule); }
.admin-plan { font-size: 12px; padding: 2px 6px; border: 1px solid var(--rule); background: transparent; color: var(--ink); border-radius: 3px; }
.admin-view { margin-left: 10px; }

.admin-activity { margin: 10px 0 4px; }
.admin-activity .rail-sub { margin: 10px 0 2px; }
.admin-give-wrap { display: inline-flex; gap: 4px; align-items: center; }
.admin-give { width: 64px; font-size: 12px; padding: 2px 6px; border: 1px solid var(--rule); background: transparent; color: var(--ink); border-radius: 3px; }

/* the plans page */
.plan-cards { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.plan-card { flex: 1; min-width: 200px; max-width: 300px; border: 1px solid var(--rule); border-radius: 6px; padding: 22px; }
.plan-card.plan-mine { border-color: var(--score); }
.plan-name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; font-weight: 600; margin: 0; }
.plan-price { font-family: "DM Sans", sans-serif; font-size: 15px; margin: 2px 0 10px; color: var(--muted); }
.plan-credits { font-family: "DM Sans", sans-serif; font-size: 13px; margin: 0 0 8px; }
.plan-blurb { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 14.5px; color: var(--muted); min-height: 56px; }
.plan-fine { font-family: "DM Sans", sans-serif; font-size: 11.5px; color: var(--muted); opacity: 0.8; margin: 0 0 10px; }
.plan-btn { width: 100%; }
.plan-btn[disabled] { opacity: 0.55; cursor: default; }