/* styles/phone-editplan.css — the PHONE Edit Plan page (6 Oct 2026, src/PhoneEditPlan.jsx). Hugo's mockup 14-edit-plan,
   MEASURED (412 CSS px wide; the spec's element boxes, ours / mockup within 0.95-1.05):
   ONE section panel (the page's darker green, 11.4px from the screen edges) holds, top to bottom: the progress card (a
   70px two-tone ring | "0 DONE OF 1" + "1 still to do · my list"; the four status counts; a rule; P1 / P2 / P3 bars);
   the tabs (Notes / Priorities / Stats / Plan, a 4px lime underline on a full-width rule; pinned while the page
   scrolls, as the mockup's second panel shows); the edit card (the edit picker; Fill blank shots + Show resolved with
   its switch); Frames from the edit (title, a rule that is also the progress bar, Idle, the counts, Dry run | Extract
   frames); the filters card (NOTES BY rows, PRIORITY chips, PLAN chips); search + All filters; the add-a-job card
   (the field, PRIORITY 1 | 2 | 3, Add task); then each note: a card (the frame + timecode, the shot · author · date,
   the text, Open shot | Generate) and under it ASSIGNEE, PRIORITY and STATUS rows.
   The desktop EditPlanPage renders inside .pep-page; every rule is phone tier + .pep-page only (the desktop never
   changes). ONE scroller (the phone page). Skin tokens only; corners from the phone scale; every control a 40px TAP
   area (a transparent top + bottom band + an equal negative margin; the corner R / R + band) while the VISUAL box
   is the mockup's. */

/* ════════ THE MATERIAL (the mockup's, measured: opaque layered greens, no glows) ════════
   page -> section -> cards -> controls; active = a sage rim on deep green; priority 1 = solid red. Dark material is
   the glass family's (every dark skin); a pale skin keeps its own card colours. */
body[data-ui-tier="s"] .pep-page {
  --pep-page: color-mix(in srgb, var(--black) 5%, var(--card-bg-solid));
  --pep-section: var(--card-bg-solid);
  --pep-section-rim: var(--card-border);
  --pep-card: var(--card-bg-solid);
  --pep-card-2: var(--card-bg-solid);
  --pep-card-rim: var(--card-border);
  --pep-ctl: color-mix(in srgb, var(--ink) 5%, var(--card-bg-solid));
  --pep-ctl-rim: var(--card-border);
  --pep-input: var(--input-bg);
  --pep-input-rim: var(--input-border);
  --pep-on: color-mix(in srgb, var(--accent) 18%, var(--card-bg-solid));
  --pep-on-lo: var(--pep-on);
  --pep-ctl-2: var(--pep-ctl);
  --pep-on-rim: var(--accent);
  --pep-red: color-mix(in srgb, var(--status-bad) 55%, var(--danger));
  --pep-line: var(--card-border);
  --pep-track: color-mix(in srgb, var(--ink) 10%, var(--card-bg-solid));
  --pep-ring-a: color-mix(in srgb, var(--ink) 22%, var(--card-bg-solid));
  --pep-ring-b: color-mix(in srgb, var(--ink) 10%, var(--card-bg-solid));
  --pep-ring-in: var(--card-bg-solid);
  --pep-under: var(--accent);
  --pep-of: var(--ink-muted);
  --pep-switch: color-mix(in srgb, var(--ink) 18%, var(--card-bg-solid));
  --pep-dot-pending: color-mix(in srgb, var(--status-bad) 30%, var(--danger));
  --pep-dot-doing: color-mix(in oklab, var(--gold-2) 70%, var(--white));
  --pep-dot-review: color-mix(in srgb, var(--blue-41) 50%, var(--blue-17));
  --pep-dot-done: color-mix(in oklab, var(--ok) 72%, var(--white));
}
body[data-ui-tier="s"][data-skin-family="glass"] .pep-page {
  --pep-page: color-mix(in srgb, var(--bg) 94%, color-mix(in srgb, var(--card-bg-solid) 55%, var(--accent)));          /* L* 5.8 */
  --pep-section: color-mix(in srgb, var(--bg) 90%, color-mix(in srgb, var(--card-bg-solid) 35%, var(--accent)));       /* L* 8.8 */
  --pep-section-rim: color-mix(in srgb, var(--ink) 4%, transparent);
  --pep-card: color-mix(in srgb, var(--black) 38%, color-mix(in srgb, var(--card-bg-solid) 95%, var(--accent)));       /* L* 14.5 */
  --pep-card-2: color-mix(in srgb, var(--card-bg-solid) 54%, color-mix(in srgb, var(--accent) 15%, var(--black)));     /* L* 16.3 */
  --pep-card-rim: color-mix(in srgb, var(--accent) 2%, color-mix(in srgb, var(--card-bg-solid) 85%, var(--ink)));     /* L* 24-28 */
  --pep-ctl: color-mix(in srgb, var(--bg) 39%, var(--card-bg-solid));                                                  /* L* 15 */
  --pep-ctl-rim: color-mix(in srgb, var(--card-bg-solid) 82%, color-mix(in srgb, var(--ink) 85%, var(--black)));       /* L* 34 */
  --pep-input: color-mix(in srgb, var(--accent) 2%, color-mix(in srgb, var(--card-bg-solid) 75%, var(--black)));       /* L* 17.4 */
  --pep-input-rim: color-mix(in srgb, var(--card-bg-solid) 90%, color-mix(in srgb, var(--ink) 75%, var(--accent)));    /* L* 29.6 */
  --pep-on: color-mix(in srgb, var(--black) 41%, color-mix(in srgb, var(--accent) 35%, var(--card-bg-solid)));         /* L* 23.5 */
  --pep-on-lo: color-mix(in srgb, var(--black) 48%, color-mix(in srgb, var(--accent) 30%, var(--card-bg-solid)));     /* L* 18.4: the Everyone row */
  --pep-ctl-2: color-mix(in srgb, var(--bg) 18%, var(--card-bg-solid));                                              /* L* 18.5: Dry run */
  --pep-on-rim: color-mix(in srgb, var(--ink) 18%, var(--accent));                                                     /* L* 75 */
  --pep-line: color-mix(in srgb, var(--accent) 2%, color-mix(in srgb, var(--card-bg-solid) 85%, var(--black)));        /* L* 19.8 */
  --pep-track: color-mix(in srgb, var(--bg) 42%, color-mix(in srgb, var(--card-bg-solid) 85%, var(--accent)));         /* L* 19 */
  --pep-ring-a: color-mix(in srgb, var(--card-bg-solid) 82%, color-mix(in srgb, var(--ink-muted) 85%, var(--accent))); /* L* 33 */
  --pep-ring-b: color-mix(in srgb, var(--card-bg-solid) 98%, color-mix(in srgb, var(--bg) 25%, var(--ink-muted)));     /* L* 23 */
  --pep-ring-in: color-mix(in srgb, var(--card-bg-solid) 30%, color-mix(in srgb, var(--bg) 95%, var(--accent)));       /* L* 11.8 */
  --pep-under: color-mix(in oklab, var(--ok) 72%, var(--white));
  --pep-of: color-mix(in srgb, var(--ink) 55%, var(--card-bg-solid));
  --pep-switch: color-mix(in srgb, var(--card-bg-solid) 82%, color-mix(in srgb, var(--ink-muted) 95%, var(--black)));  /* L* 32.7 */
}
body[data-ui-tier="s"] .main-content > .pk-page.pep-page { background: var(--pep-page); }

/* ════════ THE PAGE + THE SECTION PANEL ════════ */
body[data-ui-tier="s"] .pep-page { position: relative; gap: 0; padding: 9px 11.4px 16px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view {
  position: relative; display: flex; flex-direction: column; gap: 0; height: auto; min-height: 0; max-height: none; overflow: visible;
  flex: 0 0 auto; padding: 12px 9.35px 13.5px; margin: 0; border: 0; border-radius: var(--pk-radius-card);
  background: var(--pep-section); box-shadow: inset 0 0 0 1px var(--pep-section-rim); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view > * { flex: 0 0 auto; min-width: 0; max-width: 100%; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-scroll { height: auto; min-height: 0; max-height: none; overflow: visible; padding: 0; margin: 0; }
/* the cards: one radius, a 1px rim (an inset ring: no layout) */
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-statbar, .vp-tabs-actions, .efb, .ep-authors) {
  position: relative; box-sizing: border-box; margin: 0; padding: 0;
  border: 0; border-radius: var(--pk-radius-card); background: var(--pep-card); box-shadow: inset 0 0 0 1px var(--pep-card-rim), 0 2px 6px color-mix(in srgb, var(--black) 35%, transparent);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-ctl-label {
  font-family: var(--font-body); font-size: 9.6px; font-weight: 400; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 94%, transparent);
}
/* a control: the visual box is the padding box; the band makes the 40px tap */
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-seg, .ep-act, .ep-shot-chip, .efb-btn, .ep-addtask-go, .ep-pri-btn, .ep-status-btn, .esb-btn, .ep-toggle) {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 40px; height: 40px; margin: 0; box-sizing: border-box;
  border-style: solid; border-color: transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  background-color: var(--pep-ctl); box-shadow: inset 0 0 0 1px var(--pep-ctl-rim); color: var(--ink); opacity: 1;
  font-family: var(--font-body); font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap; line-height: 1;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-seg, .ep-pri-btn, .ep-status-btn, .ep-addtask-go, .ep-shot-chip, .efb-btn--go, .esb-btn).is-on,
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.efb-btn--go, .esb-btn, .ep-addtask-go) {
  background-color: var(--pep-on); box-shadow: inset 0 0 0 1px var(--pep-on-rim);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-pri-btn--1.is-on, .ep-seg--p1.is-on) { background-color: var(--pep-red); box-shadow: inset 0 0 0 1px var(--pep-red); color: var(--white); }
body[data-ui-tier="s"] .pep-page .edit-plan-view button:disabled { opacity: 0.7; }
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(input[type="text"], input[type="search"]) { font-size: var(--fs-16); box-sizing: border-box; max-width: 100%; }
body[data-ui-tier="s"] .pep-page .edit-plan-view select { box-sizing: border-box; max-width: 100%; }

/* ════════ THE PROGRESS CARD (168.8 tall) ════════ */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statbar { display: block; height: 168.8px; min-height: 0; top: auto; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statbar-main { display: contents; }
/* the ring: 70px, a 9px two-tone track (light left half, darker right half), a darker centre */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-donut {
  position: absolute; left: 16.1px; top: 5.4px; width: 69.7px !important; height: 69.7px !important; border-radius: 50%;   /* the desktop sizes it inline */
  background: radial-gradient(circle closest-side, var(--pep-ring-in) calc(100% - 9px), transparent calc(100% - 8.6px));
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-donut::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--pep-ring-b) 0 50%, var(--pep-ring-a) 50% 100%);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 9px), var(--black) calc(100% - 8.6px));
  mask: radial-gradient(circle closest-side, transparent calc(100% - 9px), var(--black) calc(100% - 8.6px));
}
/* the desktop ring (r 78 of 200, stroke 11) scaled so its arcs sit ON the 9px track: 78.2px box, stroke 23 */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-donut > svg { position: absolute; left: -4.25px; top: -4.25px; width: 78.2px; height: 78.2px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-donut svg .ep-donut-track { stroke: transparent; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-donut-arc { stroke-width: 23px; }
/* the ring shows the DONE share only (the mockup: "0%", no arc yet); the status split is the legend under it */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-donut-arc:not([stroke="url(#epArc-completed)"]) { display: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-donut-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 2px 0 0 1px;
  font-family: var(--font-display); font-size: 25.8px; line-height: 1; color: var(--ink);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-donut-pct i { font-style: normal; font-size: 17px; margin: 5px 0 0 1px; color: var(--ink); }
/* 0 DONE OF 1 (Bebas 29.7, the OF small and grey) / 1 still to do · my list (14) */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statbar-head {
  position: absolute; left: 104.6px; top: 8.2px; display: block; margin: 0; white-space: nowrap;
  font-family: var(--font-display); font-size: 26.6px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statbar-head b { font-size: 26.6px; font-weight: 400; color: var(--ink); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statbar-head span { font-size: 17px; color: var(--pep-of); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statbar-sub {
  position: absolute; left: 106.6px; right: 12px; top: 39.6px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.4px; line-height: 17px; color: color-mix(in srgb, var(--ink) 96%, var(--white));
}
/* ● 1 Pending · ● 0 Doing · ● 0 Review · ● 0 Done */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statbar-chips {
  position: absolute; left: 15.5px; right: 23.4px; top: 73.6px; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0; margin: 0;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statchip {
  display: inline-flex; align-items: center; gap: 0; padding: 0; border: 0; background: transparent; white-space: nowrap;
  font-size: 10.8px; line-height: 17px; color: var(--ink);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statchip > i { flex: 0 0 auto; display: inline-block; width: 12.7px; height: 12.7px; margin-right: 6.7px; border-radius: 50%; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statchip > b { font-weight: 400; margin-right: 4px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-statchip > b, .ep-prirow-num, .ep-prirow-num > i, .ep-prirow-pct, .ep-seg-n, .vp-tab-count, .ep-date, .ep-thumb-tc, .efb-count, .ep-pri-btn) {
  font-family: var(--font-body); font-variant-numeric: normal;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statchip--pending > i { background: var(--pep-dot-pending); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statchip--in_progress > i { background: var(--pep-dot-doing); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statchip--for_review > i { background: var(--pep-dot-review); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statchip--completed > i { background: var(--pep-dot-done); }
/* the rule, then P1 / P2 / P3: label · 196px track · 0 / 0 · 0% */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statbar-pri {
  position: absolute; left: 13.4px; right: 13.2px; top: 96.5px; display: flex; flex-direction: column; gap: 9.7px; width: auto; min-width: 0;
  padding-top: 5.3px; border-top: 1px solid var(--pep-line);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-prirow { display: flex; align-items: center; gap: 0; height: 11.4px; width: auto; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-prirow-tag { flex: 0 0 40.2px; padding-left: 0.7px; font-size: 11.8px; font-weight: var(--fw-med); line-height: 1; color: var(--ink); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-prirow-track { flex: 0 0 195.6px; width: 195.6px; height: 11.4px; border-radius: var(--pk-radius-small); background: var(--pep-track); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-prirow-fill { border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-prirow-num {
  flex: 1 1 auto; display: flex; align-items: baseline; gap: 0; margin-left: 30.2px; white-space: nowrap;
  font-family: var(--font-body); font-size: 13px; line-height: 1; color: var(--ink);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-prirow-num > i { font-style: normal; margin-left: 4px; letter-spacing: 4px; color: inherit; opacity: 1; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-prirow-num > i::before { content: ""; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-prirow-pct { margin-left: auto; min-width: 0; text-align: right; font-size: 10px; color: color-mix(in srgb, var(--ink) 92%, var(--black)); opacity: 1; }

/* ════════ THE TABS + THE EDIT CARD ════════ */
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-head {
  position: relative; display: block; padding: 0; margin: 0 -2px; border: 0; background: transparent; box-shadow: none;
}
/* the desktop's title line ("59 notes on <edit>"): the picker names the edit, the band names the page */
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-head > div:first-child { display: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-head .vp-tabs {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0; width: auto; margin: 0; padding: 0 2px;
  border: 0; background: transparent; overflow: visible;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tab {
  flex: 0 0 auto; display: inline-flex; align-items: flex-start; justify-content: center; gap: 14px; height: 40px; min-height: 40px; padding: 14.6px 5.35px 0; margin: -5.8px 0 0;
  border: 0; border-bottom: 4px solid transparent; border-radius: 0; background: transparent; box-shadow: none;
  font-family: var(--font-body); font-size: 12.8px; font-weight: 400; line-height: 17px; color: color-mix(in srgb, var(--ink) 92%, var(--black)); white-space: nowrap;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tab.is-active { font-weight: var(--fw-med); color: var(--ink); border-bottom-color: var(--pep-under); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tab-count { min-width: 0; margin: 0; padding: 0; font-size: 12.8px; font-weight: 400; color: inherit; }
/* the rule under the tabs (the underline sits on it): the full width, then the edit card on the next row */
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-head .vp-tabs::after { content: ""; order: 1; flex: 1 1 100%; height: 1px; margin: -0.7px 0 0; background: var(--pep-line); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tabs-actions {
  order: 2; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0; width: auto; min-width: 0; min-height: 77px;
  margin: 8.4px 2px 0; padding: 6.7px 10.7px 8px 8.8px; background: var(--pep-card-2);
}
/* the edit picker: 351.7 x 28.1 */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-review-picker {
  flex: 1 1 100%; width: 100%; min-width: 0; height: 40.1px; min-height: 40px; margin: -6px 0; padding: 0 30px 0 11.3px;
  border: 6px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 6px); background-color: var(--pep-input);
  box-shadow: inset 0 0 0 1px var(--pep-input-rim); color: var(--ink); font-size: 11.9px; line-height: 1;
}
/* Fill blank shots from the edit (191.6 x 24.8, active) · Show resolved + its switch (40.9 x 24.8) */
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tabs-actions .esb-wrap { display: inline-flex; flex: 0 0 auto; margin-top: 9.4px; min-width: 0; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tabs-actions .esb-msg { display: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .esb-btn {
  width: 191.6px; height: 40.8px; padding: 0 10px; margin: -8px 0; border-width: 8px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 8px);
  font-size: 11px;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .esb-btn > svg { display: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tabs-actions .ep-toggle {
  position: relative; flex: 0 0 auto; height: 40.8px; margin: 1.4px 0 -8px auto; padding: 0 56.6px 0 0; border-width: 8px 0;
  background-color: transparent; box-shadow: none; font-size: 10.9px; line-height: 1; color: var(--ink);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tabs-actions .ep-toggle::before {
  content: ""; position: absolute; right: 0; top: 0; width: 40.9px; height: 24.8px; border-radius: var(--pk-radius-control);
  background: var(--pep-switch); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tabs-actions .ep-toggle::after {
  content: ""; position: absolute; right: 20.8px; top: 3.7px; width: 17.4px; height: 17.4px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--black) 40%, transparent); transition: transform 0.15s;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tabs-actions .ep-toggle.is-on::before { background: var(--pep-on-rim); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tabs-actions .ep-toggle.is-on::after { transform: translateX(17.8px); }

/* ════════ FRAMES FROM THE EDIT (title · rule = the progress bar · Idle · the counts · Dry run | Extract frames) ════════ */
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb {
  display: grid; grid-template-columns: 167.5px 168.1px; column-gap: 9.4px; align-items: start; min-height: 108.5px;
  margin-top: 9.4px; padding: 10.7px 15.4px 6.7px 13.4px; background: var(--pep-card);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-head { display: contents; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-title {
  grid-column: 1 / -1; grid-row: 1; font-family: var(--font-display); font-size: 18.5px; line-height: 15px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-edit,
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-spacer { display: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-track {
  grid-column: 1 / -1; grid-row: 2; height: 2px; margin: 4.5px -1.5px 0 -0.6px; border-radius: 0; background: var(--pep-card-rim);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-fill { background: var(--pep-on-rim); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-line { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 26px; margin: 0; font-size: 10.9px; line-height: 16px; color: var(--ink); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-line:not(.efb-line--sub) { grid-row: 3; margin-top: 3.5px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-phase { font-size: 12.1px; font-weight: 400; text-transform: capitalize; }
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.efb-count, .efb-now) { display: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb.is-running :is(.efb-count, .efb-now) { display: inline; font-size: 12px; color: var(--ink-muted); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-line--sub { grid-row: 4; margin-top: 1px; color: color-mix(in srgb, var(--ink) 86%, var(--black)); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-recent { grid-column: 1 / -1; grid-row: 6; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-btn {
  grid-row: 5; width: auto; height: 40.8px; margin: -2.7px 0 -5px; padding: 0 8px; border-width: 5px 0;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 5px); font-size: 11.5px;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-btn:not(.efb-btn--go) { background-color: var(--pep-ctl-2); box-shadow: inset 0 0 0 1px var(--pep-ctl-rim); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-ctl-label:first-child + .ep-seg.is-on { background-color: var(--pep-on-lo); }

/* the summary line only duplicates the progress card's counts on a phone; its error text stays */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-summary { display: block; min-height: 0; padding: 0; margin: 0; border: 0; background: transparent; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-summary > :not(.ep-sum-err) { display: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-sum-err:empty { display: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-sum-err { color: var(--danger); font-size: 13px; }

/* ════════ THE FILTERS CARD: NOTES BY (two full rows) · PRIORITY chips · PLAN chips ════════ */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-authors {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 4.6px; min-height: 164.8px; margin-top: 9.4px; padding: 8.7px 11px 0 11.4px;
  background: var(--pep-card);
}
body[data-ui-tier="s"] .pep-page.is-filters-folded .edit-plan-view .ep-authors { display: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-authors > .ep-ctl-label { flex: 1 1 100%; margin: 4.8px 0 5.2px 1.4px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-authors > .ep-ctl-label:first-child { margin-top: 0; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-authors > .ep-sum-sep { display: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-seg { height: 41.5px; margin: -8px 0; padding: 0 13px; border-width: 8px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 8px); font-size: 11px; gap: 3px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-seg-n { font-size: inherit; font-weight: 400; color: inherit; opacity: 1; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-seg-n::before { content: "("; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-seg-n::after { content: ")"; }
/* NOTES BY: Everyone (1) / each author, full-width rows 22.8 tall */
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-ctl-label:first-child + .ep-seg, .ep-seg--who) {
  flex: 1 1 100%; justify-content: flex-start; height: 40.8px; border-width: 9px 0; margin: -9px 0 -3.7px; padding: 0 13.4px; font-size: 11.2px;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-seg--who .ep-who-dot { display: none; }
/* PRIORITY: All (1) · Ranked (0) · P1 (0) · P2 (0) · P3 (0) · Unranked (1), 25.5 tall */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-seg:not(.ep-seg--who):not(.ep-seg--assign):not(.ep-ctl-label:first-child + .ep-seg) { flex: 1 1 auto; height: 41.5px; padding: 0 5px; }
/* PLAN: Mine (1) · Marta (0) · All (1), 22.1 tall */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-seg--assign { height: 40.1px; border-width: 9px 0; margin: -9px 4.1px -9px 0; padding: 0 17px; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 9px); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-seg--assign.is-on { font-weight: 400; }

/* ════════ SEARCH + ALL FILTERS, then THE ADD-A-JOB CARD ════════ */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-addtask {
  position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  margin-top: 10px; padding: 0 8px 8.7px; border: 0; background: transparent; box-shadow: none;
}
/* the card is drawn under everything but the search row (which sits above it, outside) */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-addtask::before {
  content: ""; position: absolute; left: 0; right: 0; top: 38.2px; bottom: 0; z-index: -1; border-radius: var(--pk-radius-card);
  background: var(--pep-card-2); box-shadow: inset 0 0 0 1px var(--pep-card-rim), 0 2px 6px color-mix(in srgb, var(--black) 35%, transparent);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-search {
  order: -1; flex: 0 0 auto; display: flex; align-items: center; gap: 0; width: 255.2px; height: 41.5px; min-height: 40px; margin: -6px 0 -6px -8px; padding: 0 8px 0 12.7px;
  border: 6px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box; box-sizing: border-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 6px); background-color: var(--pep-ctl); box-shadow: inset 0 0 0 1px var(--pep-input-rim);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-search-icon { flex: 0 0 auto; width: 14.1px; height: 14.1px; margin-right: 13.7px; color: var(--ink); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-search-input {
  flex: 1 1 auto; width: auto; min-width: 0; height: 29.5px; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--ink); font-size: 10.1px;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-search-input::placeholder { color: color-mix(in srgb, var(--ink) 84%, var(--black)); font-size: 11.8px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-search-n { flex: 0 0 auto; width: auto; font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-search-clear.is-hidden { display: none; }
/* (All filters: src/PhoneEditPlan.jsx places it beside the search, 107.2 x 29.5) */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-search { margin-bottom: -1.9px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-addtask-input {
  flex: 1 1 100%; width: 100%; min-width: 0; height: 40.8px; min-height: 40px; margin: 5.3px 0 -5px; padding: 0 10px;
  border: 5px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 5px); background-color: var(--pep-input); box-shadow: inset 0 0 0 1px var(--pep-input-rim);
  color: var(--ink); font-size: 9.9px;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-addtask-input::placeholder { color: color-mix(in srgb, var(--ink) 88%, var(--black)); font-size: 11.6px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-addtask > .ep-ctl-label { flex: 1 1 100%; margin: 14.8px 0 5px 2.7px; font-size: 10.3px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-addtask > .ep-pri { flex: 0 0 auto; width: 202.3px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-addtask-go { flex: 0 0 auto; width: 148.1px; height: 41.5px; margin: -4px 0 -4px auto; padding: 0; border-width: 4px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px); font-size: 13.3px; }
/* the 1 | 2 | 3 and status segmented controls: one box, equal cells, 1px dividers; the picked cell filled */
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-pri, .ep-status) {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0; width: auto; min-width: 0; height: auto; padding: 0; margin: 0;
  border: 0; border-radius: var(--pk-radius-control); background: var(--pep-ctl); box-shadow: inset 0 0 0 1px var(--pep-ctl-rim);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-pri-btn, .ep-status-btn) {
  position: relative; flex: 1 1 0; width: auto; height: 41.5px; padding: 0; border-width: 5px 0; margin: -5px 0;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 5px); background-color: transparent; box-shadow: none; font-size: 11.8px;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-pri-btn, .ep-status-btn) + :is(.ep-pri-btn, .ep-status-btn)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--pep-ctl-rim);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-pri-btn, .ep-status-btn).is-on::before,
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-pri-btn, .ep-status-btn).is-on + :is(.ep-pri-btn, .ep-status-btn)::before { display: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-addtask .ep-pri-btn { height: 41.5px; border-width: 5px 0; margin: -5px 0; }

/* ════════ THE NOTES ════════ */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list { display: flex; flex-direction: column; gap: 13.5px; padding: 0; margin: 8.1px 0 0; list-style: none; }
/* one note = a grid: the card (frame, meta, text, Open shot | Generate) is the ::before behind rows 1-4; ASSIGNEE,
   PRIORITY, STATUS rows under it (outside the card) */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 11.4px; row-gap: 0; align-items: center;
  min-width: 0; width: auto; height: auto; padding: 6.7px 8px 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row::before {
  content: ""; grid-column: 1 / -1; grid-row: 1 / 5; align-self: stretch; z-index: -1; margin: -6.7px -8px -11.4px;
  border-radius: var(--pk-radius-card); background: var(--pep-card-2);
  box-shadow: inset 0 0 0 1px var(--pep-card-rim), 0 2px 6px color-mix(in srgb, var(--black) 35%, transparent);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row > :is(.ep-body, .ep-controls),
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row .ep-actions { display: contents; }
/* the frame: 357.7 x 149.4, the film letterboxed, the timecode on a black bar along its foot */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row > .ep-thumb {
  grid-column: 1 / -1; grid-row: 1; position: relative; display: block; width: 100%; height: 149.4px; aspect-ratio: auto; padding: 0; margin: 0; border: 0;
  border-radius: var(--pk-radius-control); overflow: hidden; background: var(--black); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row > .ep-thumb > img { position: absolute; left: 0; right: 0; top: 18.1px; bottom: 21.6px; width: 100%; height: calc(100% - 39.7px); object-fit: cover; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row > .ep-thumb .ep-thumb-tc {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 21.6px; display: flex; align-items: center; padding: 0 11.4px; text-align: left;
  background: var(--black); color: var(--white); font-size: 12.2px; font-weight: var(--fw-semi); line-height: 1; border-radius: 0;
}
/* SH1167 · ● Markus Mooslechner · 22 Sept */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-row .ep-meta {
  grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: nowrap; align-items: center; gap: 0; min-width: 0; height: 24.8px; margin: 10px 0 0;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-shot-chip {
  flex: 0 0 auto; width: 68.3px; height: 40.8px; margin: -8px 0; padding: 0; border-width: 8px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 8px);
  background-color: var(--pep-on); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pep-on-rim) 55%, var(--pep-on)); font-size: 12.6px; font-weight: var(--fw-med);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-who { display: inline-flex; align-items: center; gap: 10.1px; min-width: 0; margin-left: 10.7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--ink); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-who .ep-who-dot { flex: 0 0 auto; width: 12.1px; height: 12.1px; border-radius: 50%; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-date { margin-left: auto; padding-right: 39px; font-size: 11.1px; color: color-mix(in srgb, var(--ink) 92%, var(--black)); white-space: nowrap; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-row .ep-text {
  grid-column: 1 / -1; grid-row: 3; width: auto; min-width: 0; margin: 4.8px 0 0; font-size: 15.7px; line-height: 21px; color: var(--ink); overflow-wrap: anywhere;
}
/* Open shot | Generate: two equal outline buttons, 29.5 tall */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-row .ep-act:not(.ep-act--assign) {
  grid-row: 4; height: 41.5px; margin: calc(6px - 6px) 0 -6px; padding: 0; border-width: 6px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 6px);
  font-size: 11.5px; gap: 14px;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-row .ep-act:not(.ep-act--assign) > svg { width: 14px; height: 14px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-row .ep-act:not(.ep-act--assign):not(.ep-act--gen) { grid-column: 1; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-row .ep-act--gen { grid-column: 2; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-row .ep-act-none { grid-column: 1 / -1; grid-row: 4; font-size: 12px; color: var(--ink-muted); }
/* ASSIGNEE [+ Marta] — the label is the row's ::after */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row:has(.ep-act--assign)::after {
  content: "Assignee"; grid-column: 1; grid-row: 5; align-self: center; margin-top: 18.1px; padding-left: 0.7px;
  font-size: 10.3px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 96%, var(--black));
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-row .ep-act--assign {
  grid-column: 1 / -1; grid-row: 5; justify-self: start; width: 74.4px; height: 41.5px; margin: calc(18.1px - 7px) 0 -7px 75px; padding: 0; gap: 9px;
  border-width: 7px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 7px); background-color: var(--pep-ctl); font-size: 11px;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-row .ep-act--assign.is-on { background-color: var(--pep-on); box-shadow: inset 0 0 0 1px var(--pep-on-rim); }
/* PRIORITY 1 | 2 | 3 (182.2 x 28.1) · STATUS Pending | Doing | Review | Done (302.1 x 30.1) */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row .ep-ctl-col:has(.ep-pri) { grid-row: 6; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row .ep-ctl-col:has(.ep-status) { grid-row: 7; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row .ep-ctl-col {
  grid-column: 1 / -1; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0; width: auto; min-width: 0; height: auto; margin-top: 8.6px; padding: 0;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row .ep-ctl-col > .ep-ctl-label { flex: 0 0 78.3px; padding-left: 0.7px; font-size: 10.3px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row .ep-ctl-col > .ep-pri { flex: 0 0 182.2px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row .ep-ctl-col > .ep-pri > .ep-pri-btn { height: 40.1px; border-width: 6px 0; margin: -6px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 6px); font-size: 11px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row .ep-ctl-col:has(.ep-status) { margin-top: 8.7px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row .ep-ctl-col:has(.ep-status) > .ep-ctl-label { flex-basis: 56.9px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row .ep-ctl-col > .ep-status { flex: 0 1 302.1px; min-width: 0; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row .ep-status-btn { flex: 1 1 auto; height: 40.1px; border-width: 5px 0; margin: -5px 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 5px); font-size: 11.3px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-status-btn.is-on { background-color: var(--pep-on); box-shadow: inset 0 0 0 1px var(--pep-on-rim); color: var(--ink); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-empty { padding: var(--pk-6) var(--pk-2); text-align: center; color: var(--ink-muted); font-size: 14px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-text-edit { grid-column: 1 / -1; grid-row: 3; width: 100%; min-height: 44px; font-size: 16px; box-sizing: border-box; }

/* ════════ PRIORITIES / STATS / PLAN TABS (the desktop's boards, stacked for one column) ════════ */
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-board-wrap, .ep-stats, .ep-plan, .ep-onegroup) { width: auto; min-width: 0; height: auto; max-height: none; overflow: visible; margin-top: 9.4px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-board-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-2); }
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-board, .ep-cols) { display: flex; flex-direction: column; gap: var(--pk-3); width: auto; min-width: 0; overflow: visible; grid-template-columns: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-grid { display: flex; flex-direction: column; gap: var(--pk-3); grid-template-columns: none; padding: 0; margin: 0; list-style: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-stat-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-2); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-stat-card { min-width: 0; padding: 10px; border: 0; border-radius: var(--pk-radius-card); background: var(--pep-card); box-shadow: inset 0 0 0 1px var(--pep-card-rim); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-hero-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-2); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-plan * { max-width: 100%; min-width: 0; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-col { width: auto; min-width: 0; height: auto; overflow: visible; }
/* the boards' compact note cards stay plain flex cards (the grid above is the Notes list only) */
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-grid, .ep-list--col) > .ep-row {
  display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: var(--pk-radius-row); background: var(--pep-card-2); box-shadow: inset 0 0 0 1px var(--pep-card-rim);
}
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-grid, .ep-list--col) > .ep-row > * { width: auto; max-width: none; min-width: 0; }
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-grid, .ep-list--col) > .ep-row.is-compact { height: auto; }
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-grid, .ep-list--col) > .ep-row.is-compact .ep-meta { height: auto; overflow: visible; }
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-grid, .ep-list--col) > .ep-row.is-compact .ep-text { min-height: 0; }

/* ════════ ALL FILTERS (src/PhoneEditPlan.jsx: a button beside the search; it folds the filters card) ════════ */
body[data-ui-tier="s"] .pep-page .pep-allf {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 13px; width: 107.2px; height: 41.5px; min-height: 40px; margin-top: -6px; padding: 0 9px 0 0;
  border: 6px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box; box-sizing: border-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 6px); background-color: var(--pep-on); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pep-on-rim) 50%, var(--pep-on));
  color: var(--ink); font-family: var(--font-body); font-size: 12.4px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pep-page .pep-allf > svg { flex: 0 0 auto; width: 16px; height: 15px; }
body[data-ui-tier="s"] .pep-page .pep-allf.is-folded { background-color: var(--pep-ctl); box-shadow: inset 0 0 0 1px var(--pep-ctl-rim); }

/* the glass skin paints these desktop buttons with a background shorthand at a higher specificity (it also resets the
   clip to the border box, so the 40px tap band showed): the phone's fills win back here */
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.ep-act, .esb-btn):not(.is-on):not(.is-running):not(:hover) { background-clip: padding-box; background-image: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-act:not(.is-on):not(.is-running):not(:hover) { background-color: var(--pep-ctl-2); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-act--assign:not(.is-on):not(.is-running):not(:hover) { background-color: var(--pep-ctl); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .esb-btn:not(.is-on):not(.is-running):not(:hover) { background-color: var(--pep-on); }

/* ════════ (round 1b) THE MOCKUP'S GREENS ARE BLUE-GREEN: the surfaces tinted with the skin's status green, not the
   accent's olive (measured: page #0a1612, section #0e1c16, cards #172620-#1b2c23, controls #1d2823, the picked
   chips #223f27); the status reds and the pending dot the mockup's bright red ════════ */
body[data-ui-tier="s"][data-skin-family="glass"] .pep-page {
  --pep-page: color-mix(in srgb, var(--status-ok) 7%, var(--bg));
  --pep-section: color-mix(in srgb, var(--status-ok) 8%, color-mix(in srgb, var(--bg) 87%, var(--card-bg-solid)));
  --pep-card: color-mix(in srgb, var(--status-ok) 7%, color-mix(in srgb, var(--bg) 58%, var(--card-bg-solid)));
  --pep-card-2: color-mix(in srgb, var(--status-ok) 7%, color-mix(in srgb, var(--bg) 48%, var(--card-bg-solid)));
  --pep-ctl: color-mix(in srgb, var(--status-ok) 2%, color-mix(in srgb, var(--bg) 42%, var(--card-bg-solid)));
  --pep-ctl-2: color-mix(in srgb, var(--status-ok) 5%, color-mix(in srgb, var(--bg) 26%, var(--card-bg-solid)));
  --pep-input: color-mix(in srgb, var(--status-ok) 5%, color-mix(in srgb, var(--bg) 33%, var(--card-bg-solid)));
  --pep-on: color-mix(in srgb, var(--black) 61%, color-mix(in srgb, var(--status-ok) 72%, var(--ink)));
  --pep-on-lo: color-mix(in srgb, var(--status-ok) 11%, color-mix(in srgb, var(--bg) 39%, var(--card-bg-solid)));
  --pep-track: color-mix(in srgb, var(--ink) 9%, color-mix(in srgb, var(--status-ok) 15%, var(--bg)));
}
body[data-ui-tier="s"][data-skin-family="glass"] .pep-page {
  --pep-red: color-mix(in oklch, var(--signal-red) 90%, var(--white));
  --pep-dot-pending: color-mix(in oklch, var(--signal-red) 90%, var(--white));
}
/* FRAMES FROM THE EDIT: the display face at 15.3 (no synthetic bold), the rule under it the card's hairline */
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-title { font-size: 15.3px; font-weight: 400; letter-spacing: 0.035em; }
/* Add task reads at full white like the mockup, also while the field is still empty */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-addtask-go:disabled { opacity: 1; }
/* the filter chips at the mockup's widths (wider than their words; a longer name or count still grows them); the
   chip rows reach 4.7px from the card's right edge like the mockup's (the Notes-by rows keep their 347) */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-authors.ep-authors { padding-right: 4.7px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-authors > :is(.ep-ctl-label:first-child + .ep-seg, .ep-seg--who) { max-width: 347px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-authors > .ep-seg:not(.ep-seg--who):not(.ep-seg--assign):not(.ep-ctl-label:first-child + .ep-seg) {
  flex: 0 0 auto; min-width: 42.6px; margin-right: -0.4px; padding: 0 4px; justify-content: center;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-authors.ep-authors.ep-authors > .ep-ctl-label:not(:first-child) + .ep-seg.ep-seg:not(.ep-seg--assign) { min-width: 57.6px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-authors.ep-authors.ep-authors > .ep-ctl-label:not(:first-child) + .ep-seg.ep-seg:not(.ep-seg--assign) + .ep-seg { min-width: 71.7px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-authors.ep-authors.ep-authors > .ep-seg--p3 + .ep-seg.ep-seg { min-width: 75.7px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-authors > .ep-seg--assign { flex: 0 0 auto; min-width: 79.4px; margin-right: 4.1px; padding: 0 12px; justify-content: center; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-authors > .ep-seg--assign + .ep-seg--assign + .ep-seg--assign { min-width: 67.7px; }
/* FRAMES FROM THE EDIT tracked like the mockup's (140.7 wide); P1-P3 and the pending dot at full strength */
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-title { letter-spacing: 0.112em; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-prirow-tag { font-size: 12.2px; color: var(--white); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tab { gap: 14.4px; }

/* the note's two actions carry the mockup's icons (open in a new view, the AI sparkle) */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-actions > .ep-act:first-child > svg,
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-actions > .ep-act--gen > svg { display: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-actions > .ep-act:first-child::before,
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-actions > .ep-act--gen::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-right: 6px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M21 3l-9 9'/%3E%3Cpath d='M15 3h6v6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M21 3l-9 9'/%3E%3Cpath d='M15 3h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-actions > .ep-act--gen::before { width: 16px; height: 16px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.6a1 1 0 0 0 .6.6L20 11l-5.6 1.8a1 1 0 0 0-.6.6L12 19l-1.8-5.6a1 1 0 0 0-.6-.6L4 11l5.6-1.8a1 1 0 0 0 .6-.6z'/%3E%3Cpath d='M19 3v4'/%3E%3Cpath d='M21 5h-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.6a1 1 0 0 0 .6.6L20 11l-5.6 1.8a1 1 0 0 0-.6.6L12 19l-1.8-5.6a1 1 0 0 0-.6-.6L4 11l5.6-1.8a1 1 0 0 0 .6-.6z'/%3E%3Cpath d='M19 3v4'/%3E%3Cpath d='M21 5h-4'/%3E%3C/svg%3E"); }
/* (round 1b) FRAMES FROM THE EDIT gives the room back on a narrower phone (its two buttons share the width) */
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb { grid-template-columns: minmax(0, 167.5px) minmax(0, 168.1px); }

/* the mockup draws proportional digits ("01" narrower than "02", "SH1167", "(1)"): the skin's tabular digits off on this page */
body[data-ui-tier="s"] .pep-page { font-feature-settings: "lnum"; }

/* ── ROUND 2 (after the measured shell): sizes measured on the real ink ── */
/* the statuses, the frames' state + buttons and the P1-P3 tags at the mockup's ink widths */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row .ep-status-btn { font-size: 11.65px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-phase { font-size: 12.8px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .efb-btn { font-size: 12px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-prirow-tag { font-size: 12.8px; }
/* "0 DONE OF 1": the small OF at the mockup's 12.7 x 13.4 */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-statbar-head span { font-size: 18.4px; }
/* the priority digits (1 2 3) at the mockup's 10 / 9.4 tall */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-addtask .ep-pri-btn { font-size: 13.2px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row .ep-ctl-col > .ep-pri > .ep-pri-btn { font-size: 12.3px; }
/* the edit picker's chevron: a thin line chevron (8.7 x 4.7) 13.4 in from the box's right edge, not the native arrow */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-review-picker { appearance: none; -webkit-appearance: none; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tabs-actions:has(> .ep-review-picker)::after {
  content: ""; position: absolute; right: 24.1px; top: 19.25px; width: 8.7px; height: 5px; pointer-events: none; background-color: var(--ink);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' preserveAspectRatio='none' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' preserveAspectRatio='none' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
/* the add-job card: PRIORITY 7 closer under the input (the card 99.8 tall like the mockup's) */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-addtask > .ep-ctl-label { margin-top: 8px; }
/* the tabs a notch larger (the mockup draws Notes 1 / Priorities 0 / Stats 1 / Plan 96 at 0.97 of ours on average) */
body[data-ui-tier="s"] .pep-page .edit-plan-view :is(.vp-tab, .vp-tab-count) { font-size: 13.2px; }
/* the ring's "0%" a notch smaller (19.4 x 18.1) */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-donut-pct { font-size: 25px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-donut-pct i { font-size: 16.4px; }
/* the note's Open shot / Generate icons at the mockup's 14.1 / 14.7 */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-actions > .ep-act:first-child::before { width: 16.2px; height: 16.2px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-actions > .ep-act--gen::before { width: 18px; height: 18px; }
/* the assignee's + at the mockup's 9.4, two closer to the name */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-row .ep-act--assign { gap: 7px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-row .ep-act--assign > svg { width: 14px; height: 14px; }
/* the tabs' side padding 3.5 (the active underline is the tab's width: the mockup's 67 for "Notes 1") */
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tab { padding-left: 3.5px; padding-right: 3.5px; }
/* the note's text starts at the card's 8 like the mockup (its 4px edit padding moves into a negative margin) */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-list > .ep-row .ep-text { margin-left: -4px; }
/* Open shot / Generate: the icon and the label where the mockup draws them (left of centre: icon 37.5 / 32.8, label 66.3 / 67.6) */
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-actions > .ep-act:first-child { justify-content: flex-start; padding-left: 36.5px; column-gap: 7.6px; }
body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-actions > .ep-act.ep-act--gen { justify-content: flex-start; padding-left: 31px; column-gap: 12.6px; }
/* the legend's Doing / Review / Done dots in the mockup's own colours (#fde973 / #4192fc / #9eee83), derived from the skin's
   tokens (oklch offsets: no literal colour) */
body[data-ui-tier="s"] .pep-page {
  --pep-dot-doing: oklch(from var(--gold-star) calc(l + 0.0742) calc(c * 1.0411) calc(h + 12.36));
  --pep-dot-review: oklch(from var(--blue-41) calc(l - 0.0258) calc(c * 1.472) calc(h + 13.5));
  --pep-dot-done: oklch(from var(--ok) calc(l + 0.113) calc(c * 0.9711) calc(h + 0.27));
}
/* ── ROUND 3 (the judge's findings on round 2, 7 Oct) ── */
/* the edit picker card flush with the cards above and below it (370.5 wide at x 20.7; it sat 2 in on the left and
   6 in on the right inside the tab strip's own padding) */
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tabs-actions { margin: 8.4px -4px 0 0; }
/* the picker shows the edit's NAME (src/PhoneEditPlan.jsx: data-pep-label, without the desktop's " · N notes"),
   one line, an ellipsis if a name is ever longer than the box; the select itself stays the tap target and the list */
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tabs-actions[data-pep-label] > .ep-review-picker { color: transparent; font-weight: var(--fw-med); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tabs-actions[data-pep-label] > .ep-review-picker option { color: var(--ink); background-color: var(--pep-input); }
body[data-ui-tier="s"] .pep-page .edit-plan-view .vp-tabs-actions[data-pep-label]::before {
  content: attr(data-pep-label); position: absolute; left: 20.1px; right: 40.7px; top: 6.7px; height: 28.1px; pointer-events: none;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.9px; font-weight: var(--fw-med); line-height: 28.1px; color: var(--ink);
}

/* ── NARROW PHONES (390 / 360): the mockup is 412 wide, so below 400 the P1 / P2 / P3 rows' 196px track gives way
   (it is the only part of the row that can: the tag, the "0 / 0" and the "0%" keep their sizes). At 360 the fixed track
   pushed the "%" 5px past the screen edge. Nothing above 399px changes. ── */
@media (max-width: 399px) {
  body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-prirow-track { flex: 1 1 60px; width: auto; min-width: 60px; }
  body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-prirow-num { flex: 0 0 auto; margin-left: 12px; }
  body[data-ui-tier="s"] .pep-page .edit-plan-view .ep-prirow-pct { flex: 0 0 auto; margin-left: 8px; }
}