/* ── Edit Plan (v1012) ─────────────────────────────────────────────────────
   Review notes as a ranked plan of work. Four tabs share one row component, so
   a note looks the same wherever you meet it.

   Sizing rule throughout: every control reserves its space. The priority and
   status buttons are always all rendered at a fixed size, and the counts strip
   is always present — so ranking a note never moves the note under it. */

.edit-plan-view .vp-tabs-actions { gap: 8px; }

/* ── the picker + the resolved toggle in the tab row ─────────────────────── */
.ep-review-picker {
  max-width: 300px;
  font: inherit;
  font-size: var(--fs-12);
  color: var(--ink);
  background: color-mix(in srgb, var(--cream-2) 75%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  cursor: pointer;
}
.ep-toggle {
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-10);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--line-soft-3);
  border-radius: var(--r-round);
  padding: 4px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease, background var(--dur-1) ease;
}
.ep-toggle:hover { color: var(--ink); border-color: var(--ink-muted); }
.ep-toggle.is-on,
.ep-seg.is-on {
  color: var(--ink-forest-3);
  border-color: color-mix(in srgb, var(--olive) 55%, transparent);
  background: color-mix(in srgb, var(--olive) 16%, transparent);
}

/* small segmented button, reused by the board switch and the plan filters */
.ep-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--line-soft-3);
  border-radius: var(--r-round);
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease, background var(--dur-1) ease;
}
.ep-seg:hover { color: var(--ink); border-color: var(--ink-muted); }
.ep-seg-n {
  min-width: 2ch;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-10-5);
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* ── the counts strip. Always rendered, so nothing below it can jump. ────── */
.ep-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  min-height: 34px;
  padding: 6px 4px;
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line-soft);
}
.ep-sum-item b {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin-right: 3px;
}
.ep-sum-item.is-muted b { color: var(--ink-muted); }
.ep-sum-sep { width: 1px; height: 14px; background: var(--line-soft-3); }
.ep-sum-err {
  margin-left: auto;
  min-height: 14px;            /* holds the line even with no error */
  color: var(--danger);
  font-weight: var(--fw-semi);
}

/* v1017 — "Notes by" chips. Always rendered, with a fixed min-height, so
   picking a person never moves the rows underneath. */
.ep-authors {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 34px;
  padding: 8px 4px 2px;
}
.ep-authors .ep-ctl-label { margin-right: 2px; }
.ep-seg--who { padding-left: 9px; }
.ep-seg--who .ep-who-dot { margin-right: 1px; }
.ep-seg--who.is-on {
  color: var(--ink);
  border-color: var(--ep-user, var(--ink-muted));
  background: color-mix(in srgb, var(--ep-user) 16%, transparent);
}

.ep-scroll { padding-top: 12px; }
.ep-empty {
  padding: 30px 8px;
  color: var(--ink-muted);
  font-size: var(--fs-13);
}

/* ── the rows ────────────────────────────────────────────────────────────── */
.ep-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ep-row {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--cream-2) 62%, transparent);
  border: 1px solid var(--card-border);
  border-left-width: 3px;
  border-left-color: transparent;
  border-radius: var(--r-panel);
  transition: border-color var(--dur-1) ease, background var(--dur-1) ease, opacity var(--dur-1) ease;
}
.ep-row:hover { border-color: color-mix(in srgb, var(--gold-15) 55%, transparent); }
.ep-row--p1 { border-left-color: var(--red-1); }
.ep-row--p2 { border-left-color: var(--gold-14); }
.ep-row--p3 { border-left-color: var(--olive); }
.ep-row.is-completed { opacity: 0.55; }
.ep-row.is-completed .ep-text { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--black) 25%, transparent); }

/* in a board column the row stacks: big frame on top, text, then controls */
.ep-row.is-compact {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
}
.ep-row.is-compact .ep-thumb { width: 100%; }
/* A board column is narrow, so the two control groups stack instead of sitting
   side by side — otherwise the last status button is clipped off the edge. */
.ep-row.is-compact .ep-controls { flex-direction: column; align-items: stretch; gap: 8px; }
.ep-row.is-compact .ep-pri,
.ep-row.is-compact .ep-status { flex-wrap: wrap; }
.ep-row.is-compact .ep-status-btn { flex: 1 1 auto; padding: 0 6px; }

/* thumb — fixed box so a missing frame leaves the row exactly as tall */
.ep-thumb {
  position: relative;
  width: 300px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: color-mix(in srgb, var(--tan-deep) 12%, transparent);
  cursor: pointer;
  font: inherit;
}
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-thumb-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-22);
  color: var(--ink-muted);
}
.ep-thumb-tc {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  padding: 2px 7px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--shade-13) 75%, transparent);
  color: var(--ink-cream);
}
.ep-thumb:hover { border-color: color-mix(in srgb, var(--gold-15) 75%, transparent); }

/* body */
.ep-body { min-width: 0; }
.ep-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-height: 22px;
  margin-bottom: 5px;
  font-size: var(--fs-11);
  color: var(--ink-muted);
}
.ep-shot-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-04);
  color: var(--ink-forest-3);
  background: color-mix(in srgb, var(--olive) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--olive) 45%, transparent);
  border-radius: var(--r-round);
  padding: 2px 8px;
  cursor: pointer;
}
.ep-shot-chip:hover { background: color-mix(in srgb, var(--olive) 28%, transparent); }
.ep-shot-chip.is-none {
  color: var(--ink-muted);
  background: transparent;
  border-color: var(--line-soft-3);
  cursor: default;
}
/* who wrote it — a dot in that person's own colour, same hash the Review page
   uses for comment avatars, so a person reads the same on both pages */
.ep-who { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--fw-semi); color: var(--ink); }
.ep-who-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ep-user, var(--ink-muted));
  box-shadow: 0 0 0 var(--hairline-w) color-mix(in srgb, var(--black) 12%, transparent);
  flex: none;
}
.ep-replies,
.ep-resolved {
  font-size: var(--fs-9-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-08);
  text-transform: uppercase;
  border-radius: var(--r-round);
  padding: 1px 7px;
}
.ep-replies { color: var(--ink-blue-14); border: 1px solid color-mix(in srgb, var(--blue-15) 45%, transparent); }
.ep-resolved { color: var(--ink-forest-3); border: 1px solid color-mix(in srgb, var(--olive) 45%, transparent); }
.ep-text {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── controls: two labelled columns, both button groups ──────────────────── */
.ep-controls {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex: none;
}
.ep-ctl-col { display: flex; flex-direction: column; gap: 4px; }
.ep-ctl-label {
  font-size: var(--fs-9);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-14);
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.ep-pri, .ep-status { display: flex; gap: 4px; }
.ep-pri-btn, .ep-status-btn {
  height: 26px;
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--line-soft-4);
  border-radius: var(--r-7);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-1) ease, background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.ep-pri-btn { width: 30px; font-family: var(--font-mono); font-size: var(--fs-12); }
.ep-status-btn { padding: 0 10px; }
.ep-pri-btn:hover:not(:disabled),
.ep-status-btn:hover:not(:disabled) { border-color: var(--ink-muted); color: var(--ink); }
.ep-pri-btn:disabled, .ep-status-btn:disabled { cursor: default; opacity: 0.45; }
.ep-pri-btn--1.is-on { color: color-mix(in srgb, var(--gold-16) 10%, var(--mix-light)); background: var(--red-1); border-color: var(--red-1); }
.ep-pri-btn--2.is-on { color: color-mix(in srgb, var(--ink-deep) 83%, var(--mix-dark)); background: color-mix(in srgb, var(--gold-10) 90%, var(--mix-light)); border-color: var(--gold-14); }
.ep-pri-btn--3.is-on { color: var(--ink-mint-4); background: var(--olive); border-color: color-mix(in srgb, var(--olive) 84%, var(--mix-dark)); }
.ep-status-btn--pending.is-on     { color: var(--ink-cream); background: color-mix(in srgb, var(--taupe-4) 82%, var(--mix-light)); border-color: color-mix(in srgb, var(--shadow-ink-2) 69%, var(--mix-light)); }
.ep-status-btn--in_progress.is-on { color: color-mix(in srgb, var(--ink-deep) 83%, var(--mix-dark)); background: color-mix(in srgb, var(--gold-10) 90%, var(--mix-light)); border-color: var(--gold-14); }
.ep-status-btn--for_review.is-on  { color: color-mix(in srgb, var(--ink-cream-5) 96%, var(--mix-dark)); background: var(--blue-14); border-color: var(--blue-23); }
.ep-status-btn--completed.is-on   { color: var(--ink-mint-4); background: var(--olive); border-color: color-mix(in srgb, var(--olive) 84%, var(--mix-dark)); }

/* ── the Priorities board ────────────────────────────────────────────────── */
.ep-board-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin-bottom: 14px;
}
.ep-board-note { font-size: var(--fs-11); color: var(--ink-muted); margin-left: 6px; }
.ep-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: 14px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 10px;
}
.ep-col {
  background: color-mix(in srgb, color-mix(in srgb, var(--paper-2) 54%, var(--mix-light)) 45%, transparent);
  border: 1px solid var(--line-soft);
  border-top-width: 3px;
  border-top-color: var(--ink-muted);
  border-radius: var(--r-md);
  padding: 10px;
  min-width: 0;
}
.ep-col--p1 { border-top-color: var(--red-1); }
.ep-col--p2 { border-top-color: var(--gold-14); }
.ep-col--p3 { border-top-color: var(--olive); }
.ep-col--s-pending     { border-top-color: color-mix(in srgb, var(--taupe-4) 82%, var(--mix-light)); }
.ep-col--s-in_progress { border-top-color: var(--gold-14); }
.ep-col--s-for_review  { border-top-color: var(--blue-14); }
.ep-col--s-completed   { border-top-color: var(--olive); }
.ep-col-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 24px;
  margin-bottom: 10px;
  padding: 0 2px;
}
.ep-col-title {
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-14);
  text-transform: uppercase;
  color: var(--ink);
}
.ep-col-count {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.ep-col-empty { padding: 14px 4px; font-size: var(--fs-12); color: var(--ink-muted); opacity: 0.75; }
.ep-list--col { gap: 10px; }

/* ── Stats ───────────────────────────────────────────────────────────────── */
.ep-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.ep-stat-card {
  background: color-mix(in srgb, var(--cream-2) 62%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  min-height: 96px;
}
.ep-stat-n {
  font-family: var(--font-display);
  font-size: var(--fs-34);
  line-height: 1;
  color: var(--ink);
}
.ep-stat-label { font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--ink); margin-top: 4px; }
.ep-stat-sub { font-size: var(--fs-11); color: var(--ink-muted); margin-top: 2px; }
.ep-stat-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}
.ep-stat-block {
  background: color-mix(in srgb, var(--cream-2) 45%, transparent);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.ep-stat-title {
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-14);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.ep-hist { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.ep-hist-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 3px; }
.ep-hist-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, var(--olive), color-mix(in srgb, var(--pale-green) 93%, var(--mix-light)));
}
.ep-hist-n { font-family: var(--font-mono); font-size: var(--fs-9-5); color: var(--ink-muted); }
.ep-hist-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  color: var(--ink-muted);
}
.ep-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ep-bars li { display: grid; grid-template-columns: 158px minmax(0, 1fr) 34px; align-items: center; gap: 9px; }
.ep-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-11-5);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-bar-label--btn {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.ep-bar-label--btn:hover { color: var(--ink-forest-3); text-decoration: underline; }
.ep-bar-track { height: 9px; border-radius: var(--r-round); background: color-mix(in srgb, var(--tan-deep) 14%, transparent); overflow: hidden; }
.ep-bar-fill { display: block; height: 100%; border-radius: var(--r-round); background: var(--olive); }
.ep-bar-n {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-muted);
}

/* ── the written Plan — a producer's one-sheet ───────────────────────────
   Nine numbered MOVES read top to bottom in the order to do them. Everything
   optional (the per-shot reasons) is folded away, so the page reads as a
   decision, not a dump. Faint ruled-paper lines behind the whole thing sell
   the "document" feel without shouting. */
.ep-plan {
  --paper: color-mix(in srgb, var(--cream-2) 55%, transparent);
  --rule-soft: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  max-width: 1180px;
  padding: 6px 2px 40px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule-soft) 27px 28px);
  background-attachment: local;
}

/* category colours, used by moves, chips, bars and dots alike */
.ep-plan, .ep-stats {
  --c-narrative: var(--olive-7);
  --c-technical: var(--cat-technical);
  --c-audio:     var(--cat-audio);
  --c-retake:    color-mix(in srgb, var(--tan-deep) 90%, var(--mix-light));
  --c-accuracy:  var(--cat-accuracy);
  --c-character: var(--gold-14);
  --c-vfx:       var(--cat-vfx);
  --c-redo:      var(--cat-redo);
  --c-question:  color-mix(in srgb, var(--taupe-4) 82%, var(--mix-light));
}

/* ── hero: four numbers and one sentence ─────────────────────────────────── */
.ep-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 22px 26px;
  margin-bottom: 26px;
  background: var(--paper);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow-ink) 7%, transparent);
}
.ep-hero-nums {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
}
.ep-hero-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--tan-deep) 22%, transparent);
}
.ep-hero-stat b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 58px;
  line-height: 0.9;
  letter-spacing: var(--track-01);
  color: var(--ink);
  min-width: 2ch;
  text-align: right;
}
.ep-hero-stat span { font-size: var(--fs-11-5); line-height: 1.3; color: var(--ink-muted); }
.ep-hero-stat.is-cheap b    { color: var(--c-narrative); }
.ep-hero-stat.is-accuracy b { color: var(--c-accuracy); }
.ep-hero-stat.is-redo b     { color: var(--c-redo); }
.ep-hero-stat.is-parked b   { color: var(--c-question); }
.ep-headline {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-30);
  line-height: 1.02;
  letter-spacing: var(--track-01);
  color: var(--ink);
}
.ep-order-note { margin: 0 0 10px; font-size: var(--fs-13); line-height: 1.5; color: var(--ink); }
.ep-fineprint { margin: 0; font-size: var(--fs-10-5); line-height: 1.5; color: var(--ink-muted); }

/* ── section frames ──────────────────────────────────────────────────────── */
.ep-sec { margin-bottom: 30px; }
.ep-sec--quiet { opacity: 0.85; }
.ep-sec-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 28px;
  margin-bottom: 12px;
  padding: 0 2px;
}
.ep-sec-kicker {
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-18);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ep-sec-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-22);
  letter-spacing: var(--track-02);
  color: var(--ink);
}
.ep-sec-count {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--ink-muted);
}

/* ── fix-together batches ────────────────────────────────────────────────── */
.ep-batches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.ep-batch {
  background: var(--paper);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  animation: ep-rise 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.ep-batch.is-wide { grid-column: span 2; }
.ep-batch-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.ep-batch-label { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--ink); }
.ep-batch-n { font-family: var(--font-mono); font-size: var(--fs-10-5); color: var(--ink-muted); }
.ep-batch-why { margin: 0 0 9px; font-size: var(--fs-11-5); line-height: 1.45; color: var(--ink-muted); }
.ep-batch-more { margin-top: 9px; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--tan-deep) 22%, transparent); }
.ep-batch-more-label { display: block; margin-bottom: 6px; font-size: var(--fs-10-5); color: var(--ink-muted); }

/* ── shot chips (plan flavour) ───────────────────────────────────────────── */
.ep-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ep-chips--move { margin: 10px 0 8px; }
.ep-pchip {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-03);
  color: var(--ink);
  background: color-mix(in srgb, var(--cream-12) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--tan-deep) 30%, transparent);
  border-radius: var(--r-7);
  padding: 3px 8px 3px 9px;
  cursor: pointer;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-1) ease;
}
.ep-pchip:hover { border-color: var(--ink-muted); transform: translateY(-1px); }
.ep-pchip sup {
  font-size: var(--fs-8-5);
  font-weight: var(--fw-bold);
  margin-left: 3px;
  color: var(--ink-muted);
  vertical-align: top;
}
.ep-pchip.is-critical { border-color: var(--c-accuracy); box-shadow: inset 3px 0 0 var(--c-accuracy); }
.ep-pchip.is-cheap:not(.is-critical) { box-shadow: inset 3px 0 0 var(--c-narrative); }
.ep-pchip.is-quiet { opacity: 0.6; font-weight: var(--fw-med); }

/* ── the moves ───────────────────────────────────────────────────────────── */
.ep-moves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ep-move {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 20px 14px 16px;
  background: var(--paper);
  border: 1px solid var(--card-border);
  border-left: 5px solid var(--move, var(--ink-muted));
  border-radius: var(--r-card);
  animation: ep-rise 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.ep-move--narrative { --move: var(--c-narrative); }
.ep-move--technical { --move: var(--c-technical); }
.ep-move--audio     { --move: var(--c-audio); }
.ep-move--retake    { --move: var(--c-retake); }
.ep-move--accuracy  { --move: var(--c-accuracy); }
.ep-move--character { --move: var(--c-character); }
.ep-move--vfx       { --move: var(--c-vfx); }
.ep-move--redo      { --move: var(--c-redo); }
.ep-move--question  { --move: var(--c-question); }

.ep-move-num { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ep-move-digit {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 0.85;
  letter-spacing: var(--track-01);
  color: var(--move, var(--ink));
}
.ep-move-kicker {
  font-size: var(--fs-9-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-18);
  text-transform: uppercase;
  color: var(--move, var(--ink-muted));
  margin-top: 6px;
}
.ep-move-body { min-width: 0; }
.ep-move-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title meter" "count meter";
  column-gap: 18px;
  align-items: center;
}
.ep-move-title {
  grid-area: title;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-28);
  line-height: 1;
  letter-spacing: var(--track-02);
  color: var(--ink);
}
.ep-move-count {
  grid-area: count;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--ink-muted);
  margin-top: 3px;
}
.ep-move-blurb { margin: 8px 0 0; font-size: var(--fs-13); line-height: 1.5; color: var(--ink); max-width: 760px; }

/* cost vs payoff — two short bars, always the same box */
.ep-meter { grid-area: meter; display: flex; flex-direction: column; gap: 4px; width: 150px; }
.ep-meter-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 6px; }
.ep-meter-row em {
  font-style: normal;
  font-size: var(--fs-9);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-14);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: right;
}
.ep-meter-row i { display: block; height: 8px; border-radius: var(--r-round); background: color-mix(in srgb, var(--tan-deep) 14%, transparent); overflow: hidden; }
.ep-meter-row b { display: block; height: 100%; border-radius: var(--r-round); }
.ep-meter-row b.is-cost   { background: linear-gradient(to right, var(--gold-14), var(--c-redo)); }
.ep-meter-row b.is-payoff { background: linear-gradient(to right, color-mix(in srgb, var(--pale-green) 93%, var(--mix-light)), var(--c-narrative)); }

.ep-why-toggle {
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-10);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  border-bottom: 1px dashed color-mix(in srgb, var(--tan-deep) 40%, transparent);
}
.ep-why-toggle:hover, .ep-why-toggle.is-on { color: var(--ink); }
.ep-why { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ep-why-row {
  display: grid;
  grid-template-columns: 78px 96px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--cream-12) 55%, transparent);
  border-radius: var(--r-sm);
}
.ep-why-dots { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.ep-dots { display: inline-flex; gap: 3px; }
.ep-dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--tan-deep) 18%, transparent); }
.ep-dots--effort i.is-on { background: var(--c-redo); }
.ep-dots--impact i.is-on { background: var(--c-narrative); }
.ep-why-text { font-size: var(--fs-12-5); line-height: 1.45; color: var(--ink); }

.ep-unlinked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ep-unlinked li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  font-size: var(--fs-12-5);
  color: var(--ink);
  padding: 6px 10px;
  background: var(--paper);
  border-radius: var(--r-sm);
}
.ep-unlinked-at { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-muted); }

/* ── stats additions ─────────────────────────────────────────────────────── */
.ep-stat-card.is-redo  .ep-stat-n { color: var(--c-redo); }
.ep-stat-card.is-cheap .ep-stat-n { color: var(--c-narrative); }
.ep-stat-foot { margin-top: 10px; font-size: var(--fs-10-5); color: var(--ink-muted); }
.ep-cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); flex: none; }
.ep-cat-dot--narrative, .ep-bar-fill--narrative { background: var(--c-narrative); }
.ep-cat-dot--technical, .ep-bar-fill--technical { background: var(--c-technical); }
.ep-cat-dot--audio,     .ep-bar-fill--audio     { background: var(--c-audio); }
.ep-cat-dot--retake,    .ep-bar-fill--retake    { background: var(--c-retake); }
.ep-cat-dot--accuracy,  .ep-bar-fill--accuracy  { background: var(--c-accuracy); }
.ep-cat-dot--character, .ep-bar-fill--character { background: var(--c-character); }
.ep-cat-dot--vfx,       .ep-bar-fill--vfx       { background: var(--c-vfx); }
.ep-cat-dot--redo,      .ep-bar-fill--redo      { background: var(--c-redo); }
.ep-cat-dot--question,  .ep-bar-fill--question  { background: var(--c-question); }

@keyframes ep-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ep-move, .ep-batch { animation: none; }
}

/* ── narrow screens ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ep-row { grid-template-columns: 200px minmax(0, 1fr); }
  .ep-thumb { width: 200px; }
  .ep-controls { grid-column: 2; }
  .ep-hero { grid-template-columns: minmax(0, 1fr); }
  .ep-move { grid-template-columns: 64px minmax(0, 1fr); }
  .ep-move-digit { font-size: var(--fs-48); }
  .ep-move-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "count" "meter"; }
  .ep-batch.is-wide { grid-column: auto; }
}

/* v1022 — print / save the ranked list. Sits at the right of the board head. */
.ep-pdf-btn { margin-left: auto; }
.ep-pdf-btn:disabled { opacity: 0.45; cursor: default; }

/* v1022 — the priority chips carry their own colour when picked, so the row
   reads at a glance. Same shape as every other .ep-seg. */
.ep-seg--p1.is-on { color: color-mix(in srgb, var(--gold-16) 10%, var(--mix-light)); background: var(--red-1); border-color: var(--red-1); }
.ep-seg--p2.is-on { color: color-mix(in srgb, var(--ink-deep) 83%, var(--mix-dark)); background: color-mix(in srgb, var(--gold-10) 90%, var(--mix-light)); border-color: var(--gold-14); }
.ep-seg--p3.is-on { color: var(--ink-mint-4); background: var(--olive); border-color: color-mix(in srgb, var(--olive) 84%, var(--mix-dark)); }
.ep-seg--p1.is-on .ep-seg-n,
.ep-seg--p3.is-on .ep-seg-n { opacity: 0.85; }

/* v1023 — ONE GROUP LEFT. Hugo: "If I click on the P1 filter, it just hides the
   other ones without re-ordering the cards in a grid." Right — 61 cards stacked
   in one narrow column with two empty ones beside it wastes the screen. When the
   board is down to a single group the cards reflow across the full width. */
.ep-onegroup {
  background: color-mix(in srgb, color-mix(in srgb, var(--paper-2) 54%, var(--mix-light)) 45%, transparent);
  border: 1px solid var(--line-soft);
  border-top-width: 3px;
  border-top-color: var(--ink-muted);
  border-radius: var(--r-md);
  padding: 12px 14px 16px;
}
.ep-onegroup--p1 { border-top-color: var(--red-1); }
.ep-onegroup--p2 { border-top-color: var(--gold-14); }
.ep-onegroup--p3 { border-top-color: var(--olive); }
.ep-onegroup--s-pending     { border-top-color: color-mix(in srgb, var(--taupe-4) 82%, var(--mix-light)); }
.ep-onegroup--s-in_progress { border-top-color: var(--gold-14); }
.ep-onegroup--s-for_review  { border-top-color: var(--blue-14); }
.ep-onegroup--s-completed   { border-top-color: var(--olive); }
.ep-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
  /* stretch, not start: every card fills its row so the grid reads as a grid
     and not as a ragged pile (invariant #20 — nothing should jitter). */
  align-items: stretch;
}

/* ── every card the SAME height ────────────────────────────────────────────
   Three things have to agree or the row is ragged:
     1. the card fills its grid cell           (height:100%)
     2. the note text is CLAMPED               (so a long note can't stretch it)
     3. the controls are pinned to the bottom  (margin-top:auto)
   The meta line also reserves two lines, because a "1 REPLY" badge wraps on
   some cards and not others. */
/* FLEX, not grid, for the compact card: margin-top:auto only pushes the controls
   to the bottom in a flex column. As a grid item it did nothing, which is why the
   control blocks sat at four different heights across one row. */
.ep-grid > .ep-row.is-compact,
.ep-list--col > .ep-row.is-compact {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ep-grid > .ep-row.is-compact .ep-body,
.ep-list--col > .ep-row.is-compact .ep-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* FIXED, not min-height: a "1 REPLY" badge wraps onto a second line on some
   cards and not others, and min-height still let those grow — which is what made
   the first row 9px taller than every other row. */
.ep-grid > .ep-row.is-compact .ep-meta,
.ep-list--col > .ep-row.is-compact .ep-meta {
  height: 38px;
  overflow: hidden;
  align-content: flex-start;
}
.ep-grid > .ep-row.is-compact .ep-text,
.ep-list--col > .ep-row.is-compact .ep-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(4 * 1.45 * 14px);   /* four lines, reserved even when short */
}
.ep-grid > .ep-row.is-compact .ep-controls,
.ep-list--col > .ep-row.is-compact .ep-controls { margin-top: auto; }

/* v1026 — from a note straight to the shot, or straight to Generate for it.
   Fixed height, always present when the note has a shot, so a card cannot
   change size (invariant #20). */
.ep-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  min-height: 24px;
  margin-top: 8px;
}
.ep-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-06);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--cream-12) 70%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-round);
  cursor: pointer;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease, background var(--dur-1) ease;
}
.ep-act:hover { color: var(--ink-forest-3); border-color: color-mix(in srgb, var(--olive) 60%, transparent); background: color-mix(in srgb, var(--olive) 14%, transparent); }
.ep-act--gen:hover { color: var(--ink-tan-deep); border-color: color-mix(in srgb, var(--gold-14) 65%, transparent); background: color-mix(in srgb, color-mix(in srgb, var(--gold-10) 90%, var(--mix-light)) 18%, transparent); }
/* the clamp has to account for the action row now */
.ep-grid > .ep-row.is-compact .ep-text,
.ep-list--col > .ep-row.is-compact .ep-text { -webkit-line-clamp: 3; min-height: calc(3 * 1.45 * 14px); }

/* ── v1030 — edit a note in place, and hand it to the editor ──────────────
   The note text swaps for a textarea on click. The textarea is given the
   paragraph's MEASURED height inline (see EditPlanRow.beginEdit), so entering
   edit mode cannot move anything below it — invariant #20. */
.ep-text.is-editable { cursor: text; border-radius: 4px; margin-inline: -4px; padding-inline: 4px; }
.ep-text.is-editable:hover { background: color-mix(in srgb, var(--olive) 10%, transparent); box-shadow: inset 0 0 0 var(--hairline-w) color-mix(in srgb, var(--olive) 28%, transparent); }

.ep-text-edit {
  display: block;
  width: 100%;
  margin: 0;
  padding: 4px;
  margin-inline: -4px;
  /* BORDER-box, not content-box. The height handed in from JS is the paragraph's
     getBoundingClientRect().height — a border-box measure — so with content-box
     the padding and border were added ON TOP and the card grew ~10px on click. */
  box-sizing: border-box;
  font: inherit;
  line-height: 1.45;
  color: var(--ink);
  background: var(--cream-12);
  border: 1px solid color-mix(in srgb, var(--olive) 55%, transparent);
  border-radius: 4px;
  resize: vertical;
  outline: none;
}
.ep-text-edit:focus { border-color: var(--olive); box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--olive) 18%, transparent); }

/* Placeholder where the shot buttons would be, so a card with no linked shot
   is exactly as tall as one that has them. */
.ep-act-none {
  display: inline-flex;
  align-items: center;
  height: 22px;
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-06);
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--ink-hi) 64%, var(--mix-dark));
}

/* Put the assign button on the right of the action row. Its LABEL is constant
   (the first name) — only colour and icon change — so it cannot re-wrap. */
.ep-act--assign { margin-left: auto; }
.ep-act--assign:hover { color: var(--ink-blue-23); border-color: color-mix(in srgb, var(--blue-14) 60%, transparent); background: color-mix(in srgb, var(--blue-14) 14%, transparent); }
.ep-act--assign.is-on {
  color: var(--ink-blue-24);
  border-color: color-mix(in srgb, var(--blue-14) 75%, transparent);
  background: color-mix(in srgb, var(--blue-14) 20%, transparent);
}
.ep-act--assign:disabled { opacity: 0.5; cursor: default; }

/* The matching filter chip. */
.ep-seg--assign { display: inline-flex; align-items: center; gap: 5px; }
.ep-seg--assign.is-on {
  color: var(--ink-blue-24);
  border-color: color-mix(in srgb, var(--blue-14) 75%, transparent);
  background: color-mix(in srgb, var(--blue-14) 18%, transparent);
}

/* v1030 — three buttons in a ~300px grid card came to exactly the row width, so
   the last one (the assignee) was shaved off at the card edge. Tighten the
   padding in compact mode only; the labels stay readable and nothing wraps. */
.ep-grid > .ep-row.is-compact .ep-actions,
.ep-list--col > .ep-row.is-compact .ep-actions { gap: 4px; }
.ep-grid > .ep-row.is-compact .ep-act,
.ep-list--col > .ep-row.is-compact .ep-act {
  flex: 0 0 auto;
  padding: 0 6px;
  gap: 4px;
  letter-spacing: var(--track-03);
}

/* ── v1031 — standalone to-dos on the plan ────────────────────────────────
   A task has no frame behind it, so its thumb box is a plain panel. Same size
   as a real frame so a task card lines up with the note cards beside it. */
.ep-thumb.is-task {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--tan-deep) 7%, transparent) 0 8px,
    color-mix(in srgb, var(--tan-deep) 13%, transparent) 8px 16px
  );
  border-style: dashed;
}
.ep-thumb-task {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-14);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ep-shot-chip.is-task {
  color: var(--ink-tan-deep);
  background: color-mix(in srgb, var(--gold-14) 16%, transparent);
  border-color: color-mix(in srgb, var(--gold-14) 50%, transparent);
  cursor: default;
}

/* the add row. Always rendered, fixed height, so no tab switch moves the list. */
.ep-addtask {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 4px 4px 6px;
  border-bottom: 1px solid var(--line-soft);
}
.ep-addtask-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0 11px;
  font: inherit;
  font-size: var(--fs-12-5);
  color: var(--ink);
  background: color-mix(in srgb, var(--cream-2) 75%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-round);
  outline: none;
}
.ep-addtask-input:focus { border-color: var(--olive); box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--olive) 16%, transparent); }
.ep-addtask-input:disabled { opacity: 0.55; cursor: default; }
.ep-addtask .ep-ctl-label { flex: none; }
.ep-addtask .ep-pri { flex: none; }
.ep-addtask-go { flex: none; }
.ep-addtask-go:disabled { opacity: 0.45; cursor: default; }

/* ── v1032 — the "1 REPLY" badge was being eaten ──────────────────────────
   The meta row wrapped it onto a second line, and the fixed 38px height then
   sliced it clean in half. Wrapping was never wanted here — it was only ever
   allowed because four items would not fit. So: drop the DATE on a board card
   (least useful of the four; still there in the list view), keep the row on ONE
   line, and pin the badges so they can never be the thing that shrinks. A very
   long name clips instead — far better than losing the badge entirely.
   Overrides the 38px rule above by cascade: same specificity, declared later. */
.ep-grid > .ep-row.is-compact .ep-meta,
.ep-list--col > .ep-row.is-compact .ep-meta {
  height: 22px;
  gap: 7px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.ep-grid > .ep-row.is-compact .ep-date,
.ep-list--col > .ep-row.is-compact .ep-date { display: none; }
.ep-grid > .ep-row.is-compact .ep-who,
.ep-list--col > .ep-row.is-compact .ep-who { min-width: 0; overflow: hidden; white-space: nowrap; }
.ep-grid > .ep-row.is-compact .ep-shot-chip,
.ep-grid > .ep-row.is-compact .ep-replies,
.ep-grid > .ep-row.is-compact .ep-resolved,
.ep-list--col > .ep-row.is-compact .ep-shot-chip,
.ep-list--col > .ep-row.is-compact .ep-replies,
.ep-list--col > .ep-row.is-compact .ep-resolved { flex: none; }

/* ── v1046 — the panel's own sticky header ────────────────────────────────
   v1045 sat INSIDE the panel's 20px padding, so scrolled cards showed in the
   gap above it and it read as floating "over" the page. This bleeds out through
   that padding to the panel's real edges, takes the panel's own colour and its
   rounded top corners, and carries no shadow — so it IS the top of the panel and
   cards vanish cleanly behind it. Panel padding is 16px top / 20px sides. */
.ep-statbar {
  position: sticky;
  top: -16px;                     /* cancel the panel's top padding so it sits flush */
  /* v1047 — ABOVE .vp-head, which is position:relative z-index:30 and was
     painting the tab row, the edit picker and the action buttons straight
     through the bar. Anything that must sit over this (modals, popovers) lives
     in #modal-root, outside this stacking context entirely. */
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 116px;
  margin: -16px -20px 16px;
  padding: 18px 26px;
  background: color-mix(in srgb, var(--gold-9) 34%, var(--mix-light));
  border-bottom: 1px solid color-mix(in srgb, color-mix(in srgb, var(--foil) 76%, var(--mix-dark)) 45%, transparent);
  border-radius: 20px 20px 0 0;
}

/* the donut — geometry copied from the Overview ring: thin stroke, round caps,
   gradient fills. The track is the same muted cream it uses. */
.ep-donut { position: relative; flex: none; display: grid; place-items: center; }
.ep-donut svg { display: block; overflow: visible; }
.ep-donut-track { fill: none; stroke: color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 82%, var(--mix-light)) 22%, transparent); stroke-width: 11; }
.ep-donut-arc {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  transition: stroke-dasharray 300ms ease, stroke-dashoffset 300ms ease;
}
.ep-donut-pct {
  position: absolute;
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: var(--track-02);
}
.ep-donut-pct i { font-style: normal; font-size: var(--fs-12); opacity: 0.55; margin-left: 1px; }

/* headline block */
.ep-statbar-main { flex: 1 1 auto; min-width: 0; }
.ep-statbar-head {
  font-family: var(--font-display);
  font-size: var(--fs-34);
  line-height: 1;
  letter-spacing: var(--track-02);
  color: var(--ink);
}
.ep-statbar-head b { font-weight: 400; color: var(--ink-forest-3); }
.ep-statbar-head span { opacity: 0.4; font-size: var(--fs-22); }
.ep-statbar-sub { margin-top: 5px; font-size: var(--fs-12); color: var(--ink-muted); }
.ep-statbar-chips { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 11px; }
.ep-statchip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-11); color: var(--ink-muted); white-space: nowrap;
}
.ep-statchip i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ep-statchip b { font-family: var(--font-mono); font-size: var(--fs-12-5); color: var(--ink); }
/* dots carry the MIDDLE stop of each arc gradient, so chip and ring agree */
.ep-statchip--pending i     { background: color-mix(in srgb, var(--tan) 90%, transparent); }
.ep-statchip--in_progress i { background: var(--gold-16); }
.ep-statchip--for_review i  { background: var(--teal); }
.ep-statchip--completed i   { background: var(--leaf-bright); }

/* per-priority progress — three rows, stacked, using the row-stripe colours
   already on the cards so a P1 bar and a P1 card read as the same thing */
.ep-statbar-pri {
  flex: none;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ep-prirow { display: flex; align-items: center; gap: 10px; }
.ep-prirow-tag {
  flex: none; width: 22px;
  font-family: var(--font-mono);
  font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--ink-muted);
}
.ep-prirow-track {
  flex: 1 1 auto; height: 9px; border-radius: var(--r-round);
  background: color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 82%, var(--mix-light)) 22%, transparent); overflow: hidden;
}
.ep-prirow-fill { display: block; height: 100%; border-radius: var(--r-round); transition: width 300ms ease; }
.ep-prirow--p1 .ep-prirow-fill { background: linear-gradient(180deg, var(--red-1-deep), var(--red-1), color-mix(in srgb, var(--gold-16) 88%, var(--mix-dark))); }
.ep-prirow--p2 .ep-prirow-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--tan-deep) 74%, var(--mix-dark)), var(--gold-14), color-mix(in srgb, var(--gold-2) 88%, var(--mix-light))); }
.ep-prirow--p3 .ep-prirow-fill { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-forest-2) 79%, var(--mix-dark)), var(--olive), color-mix(in srgb, var(--pale-green) 89%, var(--mix-light))); }
.ep-prirow-num {
  flex: none; min-width: 52px; text-align: right;
  font-family: var(--font-mono); font-size: var(--fs-11-5); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ep-prirow-num i { font-style: normal; opacity: 0.5; }

/* narrow: the status chips go before anything structural does */
@media (max-width: 1180px) {
  .ep-statbar-chips { display: none; }
  .ep-statbar-pri { width: 230px; }
}

/* v1060 — "Frames from the edit" status bar. The job runs 20+ minutes on the
   server, so this names the phase, the counts and the shot being written RIGHT
   NOW. The progress track is always present so the card cannot change height
   when a run starts or stops (invariant #20). */
.efb {
  margin: 10px 0 14px; padding: 12px 14px; border-radius: var(--r-panel);
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 55%, transparent);
}
.efb.is-running { border-color: color-mix(in srgb, var(--leaf) 65%, transparent); background: color-mix(in srgb, var(--mint-6) 75%, transparent); }
.efb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.efb-title { font-weight: var(--fw-bold); font-size: var(--fs-12); letter-spacing: var(--track-04); text-transform: uppercase; color: var(--ink); }
.efb-edit { font-size: var(--fs-11); color: var(--ink-7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.efb-spacer { flex: 1 1 auto; }
.efb-btn {
  font: inherit; font-size: var(--fs-11); font-weight: var(--fw-semi); padding: 5px 10px; border-radius: var(--r-7); cursor: pointer;
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 90%, transparent); color: var(--ink);
}
.efb-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--leaf) 60%, transparent); }
.efb-btn:disabled { opacity: .5; cursor: default; }
.efb-btn--go { background: color-mix(in srgb, var(--leaf) 18%, transparent); border-color: color-mix(in srgb, var(--leaf) 70%, transparent); }
.efb-btn--stop { background: color-mix(in srgb, var(--chart-fail) 14%, transparent); border-color: color-mix(in srgb, var(--chart-fail) 60%, transparent); color: color-mix(in srgb, var(--ink-tan-deep) 90%, var(--mix-dark)); }
.efb-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--black) 8%, transparent); overflow: hidden; }
.efb-fill { height: 100%; background: var(--olive); transition: width 300ms ease; }
.efb-line { display: flex; align-items: baseline; gap: 12px; margin-top: 7px; font-size: var(--fs-11-5); }
.efb-phase { font-weight: var(--fw-semi); color: var(--ink); }
.efb-count { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-7); }
.efb-now { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-forest-3); min-height: 14px; }
.efb-line--sub { gap: 14px; color: var(--ink-7); font-size: var(--fs-10-5); }
.efb-bad { color: var(--chart-fail); font-weight: var(--fw-semi); }
.efb-dim { opacity: .65; margin-left: auto; }
.efb-recent { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.efb-chip {
  font-family: var(--font-mono); font-size: var(--fs-10); padding: 2px 6px; border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--leaf) 45%, transparent); background: color-mix(in srgb, var(--leaf) 12%, transparent); color: var(--ink-forest-3);
}
.efb-chip i { font-style: normal; opacity: .6; margin-left: 4px; }
.efb-err { margin-top: 7px; font-size: var(--fs-11); color: var(--chart-fail); }
/* v1089 — search the notes (Hugo: "a search function in the notes ... so i can filter by
   words in the notes"). At the right end of the filter row. Every part inside has a fixed
   width, so typing, the count and the clear button never move anything (invariant #20). */
.ep-search {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 300px;
  max-width: 100%;
  height: 28px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--line-soft-3);
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--cream-2) 55%, transparent);
  cursor: text;
  transition: border-color var(--dur-1) ease, background var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.ep-search:hover { border-color: var(--ink-muted); }
.ep-search:focus-within { border-color: var(--olive); box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--olive) 16%, transparent); }
.ep-search.is-on { border-color: color-mix(in srgb, var(--olive) 55%, transparent); background: color-mix(in srgb, var(--olive) 12%, transparent); }
.ep-search-icon { flex: none; color: var(--ink-muted); }
.ep-search.is-on .ep-search-icon { color: var(--ink-forest-3); }
.ep-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-12);
  color: var(--ink);
  padding: 0;
}
.ep-search-input::placeholder { color: var(--ink-muted); opacity: 0.8; }
.ep-search-input::-webkit-search-cancel-button { display: none; }   /* our own clear button */
.ep-search-n {
  flex: none;
  min-width: 9ch;              /* room for "148 found" — the box never changes width */
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-10-5);
  font-variant-numeric: tabular-nums;
  color: var(--ink-forest-3);
}
.ep-search-clear {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tan-deep) 14%, transparent);
  color: var(--ink-muted);
  font-size: var(--fs-13);
  line-height: 18px;
  cursor: pointer;
}
.ep-search-clear:hover { background: color-mix(in srgb, var(--tan-deep) 26%, transparent); color: var(--ink); }
.ep-search-clear.is-hidden { visibility: hidden; }   /* hidden, not removed: same width */
/* the matching words inside a note */
mark.ep-hl {
  background: color-mix(in srgb, var(--gold-3) 42%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* v1089b — the page is a column flex scroller, so while the list is long it SHRANK these rows
   to their min-height: a wrapped second line then hid under the next row (the search box,
   and any author chips that wrap on a narrow screen). Rows above the list never shrink. */
.edit-plan-view > * { flex-shrink: 0; }
/* ...and keep the scroll bar's space when the list gets short (a search with no match), so
   the page does not slide sideways when the bar comes and goes. */
.edit-plan-view { scrollbar-gutter: stable; }
/* the search box at the right end of the add-task row, set apart from "Add task" */
.ep-addtask .ep-search { margin-left: 14px; flex: none; }