/* =========================================================================
   PLAN / RETAINER — the Deliverables-tab plan rail (admin), the Manage-services
   library drawer, the per-client plan sheet, and the client-portal "My Plan"
   page. Shared building blocks (.plan-ring / .plan-item / .plan-tl) are used by
   both apps via src/features/clients/planShared.js.
   ========================================================================= */

/* ---- admin: Deliverables full-bleed two-column layout ------------------
   The tab fills the whole page (same full-bleed treatment as the Content
   tab): the deliverables list centers in the flexible left column and the
   plan rail pins to the right edge behind a FULL-HEIGHT divider. */
.client-detail:has(#cdDeliverablesSlot) { display: flex; flex-direction: column; min-height: 100%; padding: 0; }
.client-detail:has(#cdDeliverablesSlot) .cd-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#cdDeliverablesSlot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cdeliv-layout { flex: 1; display: grid; grid-template-columns: minmax(0, 13fr) minmax(0, 7fr); grid-template-rows: auto 1fr; align-items: stretch; }
/* rows must be pinned: the layout stretches to fill the viewport, and without
   an explicit template the grid hands the spare height to the cycbar's auto
   row (a huge blank band under the pager). Bar hidden -> single 1fr row. */
.cdeliv-layout:has(> .cdeliv-cycbar[hidden]) { grid-template-rows: 1fr; }
/* the deliverables cycle pager spans both columns, styled like the Content
   Schedule title-nav (bold range, regular year/dates, ghost arrows) */
/* no top border (the toolbar above already draws that line) — a surface-
   coloured shadow seals any subpixel slit so content can't peek over the edge */
.cdeliv-layout > .cdeliv-cycbar { grid-column: 1 / -1; padding: var(--space-2-5) var(--space-6); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface); box-shadow: 0 -2px 0 0 var(--surface); }
/* no plan → the rail hides itself; collapse to one column */
.cdeliv-layout:has(> .cdeliv-rail[hidden]) { grid-template-columns: minmax(0, 1fr); }
/* the admin wrapper owns padding + separator — the inner bar goes bare */
.cdeliv-cycbar .pplan-cycbar { padding: 0; border-bottom: 0; margin-bottom: 0; }

/* fill the left column edge-to-edge (like every other tab) — override the
   standalone .cdeliv-page 760px centering cap */
.cdeliv-layout .cdeliv-page { width: 100%; max-width: none; margin: 0; }
.cdeliv-rail { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); min-width: 0; border-left: 1px solid var(--border); }
/* display:flex above would beat the UA [hidden] rule at equal specificity —
   the no-plan state sets hidden on the rail and it must actually vanish */
.cdeliv-rail[hidden] { display: none; }
@media (max-width: 1080px) {
  .cdeliv-layout { display: flex; flex-direction: column; }
  .cdeliv-rail { border-left: 0; border-top: 1px solid var(--border); padding: var(--space-5) var(--space-6) var(--space-6); }
}
/* mobile: clientTabs re-slots [data-plan-card] under the progress hero */
@media (max-width: 640px) {
  /* the hero already carries the no-plan empty state — don't show it twice */
  .cdeliv-page > [data-plan-card]:has(> .plan-card--empty) { display: none; }
  /* …and with a real plan the card repeats the hero's ring + renews line,
     so the hero stands down and the plan card leads the page */
  .cdeliv-page > .cdeliv-hero:has(+ [data-plan-card] .plan-card:not(.plan-card--empty)) { display: none; }
  /* card moved out + timeline hidden → the rail is an empty band; drop it */
  .cdeliv-rail:not(:has(> [data-plan-card])):has(> [data-plan-tl][hidden]) { display: none; }
}

/* ---- plan card (admin rail) -------------------------------------------- */
/* ONE card recipe — the admin rail card and the portal hero/cards share it;
   the portal rules below keep only their own layout/padding overrides */
.plan-card, .pplan-hero, .pplan-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.plan-card { display: flex; flex-direction: column; gap: var(--space-4); }
.plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.plan-card-title { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-strong); margin: 0; }
/* inline-block, NOT inline-flex — text-overflow ellipsis never renders on a
   flex container, so long names clipped mid-letter with no "…" */
.plan-chip { display: inline-block; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--primary-600); background: var(--primary-50); white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.plan-hero { display: flex; align-items: center; gap: var(--space-4); }
.plan-hero-cycle { min-width: 0; }
.plan-hero-cycle .plan-cycle { display: block; font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-strong); }
.plan-hero-cycle .plan-billing { display: block; font-size: var(--text-sm); color: var(--text-soft); margin-top: var(--space-0-5); }

/* ring */
.plan-ring { position: relative; flex: 0 0 auto; }
.plan-ring svg { width: 100%; height: 100%; display: block; }
.plan-ring-track { stroke: var(--border); }
.plan-ring-fill { stroke: var(--primary-600); transition: stroke-dashoffset 0.4s var(--ease); }
.plan-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.plan-ring-label b { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.plan-ring-label i { font-style: normal; font-size: var(--text-micro); color: var(--text-soft); }

/* included each cycle */
.plan-included-label { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-soft); margin: 0; }
.plan-items { display: flex; flex-direction: column; }
.plan-item { display: flex; align-items: center; gap: var(--space-3); padding: 7px 0; }
/* solid-but-faint separators (dashed = empty/secondary in this app's vocabulary) */
.plan-item + .plan-item { border-top: 1px solid var(--border-faint); }
.plan-item-ico { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--primary-50); color: var(--primary-600); }
.plan-item-ico svg { width: 15px; height: 15px; }
.plan-item-label { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-item-qty { flex: 0 0 auto; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--primary-600); background: var(--primary-50); border-radius: var(--radius-full); padding: var(--space-0-5) var(--space-2); }
.plan-items-empty, .plan-tl-empty { color: var(--text-soft); font-size: var(--text-sm); margin: 0; }

/* plan-details button (footer of the card) */
.plan-details-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1-5); border: none; background: none; padding: 0; color: var(--primary-600); font-size: var(--text-sm); font-weight: var(--fw-semibold); cursor: pointer; }
.plan-details-btn svg { width: 14px; height: 14px; }
@media (hover: hover) { .plan-details-btn:hover { text-decoration: underline; } }

/* empty plan card — when it's the only thing in the rail (no timeline), it
   stretches to the rail's full height with its content centered */
.plan-card--empty { border-style: dashed; align-items: center; text-align: center; padding: var(--space-6) var(--space-5); gap: var(--space-2); }
.cdeliv-rail:has([data-plan-tl][hidden]) [data-plan-card]:has(> .plan-card--empty) { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cdeliv-rail:has([data-plan-tl][hidden]) .plan-card--empty { flex: 1; justify-content: center; }
.plan-card--empty .plan-empty-ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--primary-50); color: var(--primary-600); margin-bottom: 2px; }
.plan-card--empty .plan-empty-ico svg { width: 18px; height: 18px; }
.plan-card--empty h4 { margin: 0; font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-strong); }
.plan-card--empty p { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-soft); max-width: 250px; }

/* ---- cycle pager (admin progress card + portal timeline card) ----------- */
.pp-cycle { display: inline-flex; align-items: center; gap: var(--space-0-5); }
.pp-cycle b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); padding: 0 var(--space-1); white-space: nowrap; }
.cyc-btn { width: 24px; height: 24px; border: none; background: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-soft); cursor: pointer; flex-shrink: 0; }
.cyc-btn svg { width: 14px; height: 14px; }
.cyc-btn:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) { .cyc-btn:not(:disabled):hover { background: var(--surface-hover); color: var(--text-strong); } }
/* admin progress-card top row: pager pinned left, counts pushed right */
.proj-progress-top:has(.pp-cycle) { justify-content: flex-start; gap: var(--space-3); }
.proj-progress-top .pp-cycle { margin-right: auto; margin-left: -6px; }
/* portal timeline card head */
.pplan-tl-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-4); }
.pplan-tl-bar h3 { margin: 0; }
/* phones: title + helper link fight for one row — stack them, left-aligned,
   and the helper reads as a tappable chip (quiet primary fill) */
@media (max-width: 640px) {
  .pplan-tl-bar { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .pplan-tl-bar h3 { white-space: nowrap; }
  .ppsched-help { padding: var(--space-1-5) var(--space-2-5); background: color-mix(in srgb, var(--primary-500) 8%, var(--surface)); border-radius: var(--radius-full); }
}

/* ---- timeline (shared) --------------------------------------------------- */
.plan-tl-head { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
.plan-tl-head h3 { margin: 0; font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-strong); }
.plan-tl-seen { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-soft); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 2px 9px; }
.plan-tl-seen svg { width: 12px; height: 12px; }
.plan-tl { display: flex; flex-direction: column; }
.plan-tl-row { display: flex; align-items: flex-start; gap: var(--space-3); position: relative; padding: 0 0 var(--space-4); }
.plan-tl-row:last-child { padding-bottom: 0; }
/* dotted connector between badges (activity-feed style) */
.plan-tl-row::before { content: ""; position: absolute; left: 14px; top: 34px; bottom: 4px; width: 0; border-left: 2px dotted var(--border-strong); }
.plan-tl-row:last-child::before { display: none; }
/* tinted circular icon badge — status carried by the tint */
.plan-tl-badge { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); position: relative; z-index: 1; }
.plan-tl-badge svg { width: 14px; height: 14px; }
.plan-tl-row.is-done .plan-tl-badge { background: var(--success-bg); border-color: transparent; color: var(--success-600); }
.plan-tl-row.is-active .plan-tl-badge { background: var(--primary-50); border-color: transparent; color: var(--primary-600); box-shadow: 0 0 0 3px var(--primary-100); }
.plan-tl-row.is-overdue .plan-tl-badge { background: var(--danger-bg); border-color: transparent; color: var(--danger-600); }
.plan-tl-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); padding-top: 5px; }
/* trailing mini-ring — the deliverable's subtask progress (e.g. 1/3) */
.plan-tl-prog { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding-top: var(--space-1-5); }
.plan-tl-prog svg { display: block; }
.plan-tl-prog .plan-ring-fill { transition: none; }
.plan-tl-prog i { font-style: normal; font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* "No date set" bucket — same rows, no connectors (not a sequence) */
.plan-tl-undated { margin-top: var(--space-5); }
.plan-tl-undated .plan-tl-row::before { display: none; }
.plan-tl-undated .plan-tl-row { padding-bottom: var(--space-3); }
.plan-tl-undated .plan-tl-row:last-child { padding-bottom: 0; }
.plan-tl-undated .plan-tl-body { padding-top: 0; justify-content: center; min-height: 30px; }
.plan-tl-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.plan-tl-row.is-done .plan-tl-title { text-decoration: line-through; color: var(--text-soft); }
.plan-tl-sub { font-size: var(--text-xs); color: var(--text-soft); }
.plan-tl-row.is-active .plan-tl-sub { color: var(--primary-600); font-weight: var(--fw-medium); }
.plan-tl-row.is-overdue .plan-tl-sub { color: var(--danger-600); font-weight: var(--fw-medium); }

/* ---- plan sheet + services drawer (shared editor bits) ------------------ */
.plan-sheet-head-title { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-strong); margin-right: var(--space-2); }
.plan-sheet-body { display: flex; flex-direction: column; gap: var(--space-4); }
.plan-field { display: flex; flex-direction: column; gap: var(--space-1-5); }
/* Plan notes auto-grows with its content (JS sets height) — no manual
   resize handle, no inner scrollbar fighting the growth */
.plan-field textarea { resize: none; overflow: hidden; min-height: 92px; }
.plan-field > label { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-soft); }
.plan-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.plan-renews-note { font-size: var(--text-xs); color: var(--text-soft); }

/* item editor rows */
.plan-edit-items { display: flex; flex-direction: column; gap: var(--space-2); }
.plan-edit-item { display: flex; align-items: center; gap: var(--space-2); }
.plan-edit-ico { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--primary-600); cursor: pointer; }
.plan-edit-ico svg { width: 15px; height: 15px; }
@media (hover: hover) { .plan-edit-ico:hover { border-color: var(--border-strong); } }
.plan-edit-item .input { flex: 1; min-width: 0; }
.plan-qty { flex: 0 0 auto; display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.plan-qty button { border: none; background: none; width: 26px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-soft); cursor: pointer; font-size: var(--text-md); }
@media (hover: hover) { .plan-qty button:hover { background: var(--surface-hover); color: var(--text-strong); } }
.plan-qty b { min-width: 26px; text-align: center; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.plan-edit-del { flex: 0 0 auto; width: 30px; height: 32px; border: none; background: none; color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--radius-md); }
.plan-edit-del svg { width: 14px; height: 14px; }
@media (hover: hover) { .plan-edit-del:hover { color: var(--danger-600); background: var(--danger-bg); } }
.plan-add-item { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1-5); border: none; background: none; padding: var(--space-1) 0; color: var(--primary-600); font-size: var(--text-sm); font-weight: var(--fw-semibold); cursor: pointer; }
.plan-add-item svg { width: 14px; height: 14px; }

/* icon picker popover — surface + popIn come from the components tier list */
.plan-ico-menu { position: fixed; z-index: var(--z-sheet-high); padding: var(--space-2); display: grid; grid-template-columns: repeat(5, 34px); gap: var(--space-1); }
.plan-ico-menu button { width: 34px; height: 34px; border: none; background: none; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; color: var(--text-soft); cursor: pointer; }
.plan-ico-menu button.active { background: var(--primary-50); color: var(--primary-600); }
@media (hover: hover) { .plan-ico-menu button:hover { background: var(--surface-hover); color: var(--text-strong); } }
.plan-ico-menu svg { width: 16px; height: 16px; }

/* services drawer split view — opening a service widens the drawer and the
   editor slides in as a panel on the LEFT of the list (the same expand
   pattern as the lead drawer's record-call panel, .drawer.recording). */
/* slimmer resting width than the default drawer — the list is just a name,
   Apply and a kebab; --dw-w also sizes the list column in the split view */
.svc-drawer { --dw-w: clamp(340px, 26vw, 400px); }
.svc-panel { display: none; background: var(--surface); }
@media (min-width: 641px) {
  .drawer.svc-editing { width: min(82%, 960px); }
  /* .svc-collapsing keeps the split LAYOUT alive while the width animates
     back down — the list column stays pinned at its fixed width against the
     right edge and only the panel column squeezes shut. Without it the list
     snaps to flex:1 mid-animation and visibly slides with the drawer edge. */
  .drawer.svc-editing, .drawer.svc-collapsing { flex-direction: row; }
  .drawer.svc-editing .svc-panel, .drawer.svc-collapsing .svc-panel { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 0; border-right: 1px solid var(--border); overflow: hidden; }
  .drawer.svc-editing .drawer-main, .drawer.svc-collapsing .drawer-main { flex: 0 0 var(--dw-w); min-width: 0; }
}
.svc-panel-inner { flex: 1; min-height: 0; display: flex; flex-direction: column; opacity: 0; transform: translateX(12px); pointer-events: none; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
/* the .spacer flex rule lives scoped to .task-detail (tasks.css) — the panel
   sits outside one, so re-apply it here to push the Back control to the edge */
.svc-panel-inner .spacer { flex: 1; }
/* minimal "Collapse ›" (collapses the panel back into the services list) —
   30px tall to match .td-x so both drawer heads line up */
.plan-panel-back { display: inline-flex; align-items: center; gap: var(--space-1); border: none; background: none; height: 30px; padding: 0 var(--space-2); flex-shrink: 0; color: var(--text-soft); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; border-radius: var(--radius-sm); }
.plan-panel-back svg { width: 15px; height: 15px; }
@media (hover: hover) { .plan-panel-back:hover { color: var(--text-strong); background: var(--surface-hover); } }
.drawer.svc-editing .svc-panel-inner { opacity: 1; transform: none; pointer-events: auto; }

/* services drawer list */
.svc-list { display: flex; flex-direction: column; gap: var(--space-2); }
.svc-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.svc-row.is-editing { border-color: var(--primary-300); background: var(--primary-50); }
.svc-row-main { flex: 1; min-width: 0; cursor: pointer; }
.svc-row-name { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-row-meta { display: block; font-size: var(--text-xs); color: var(--text-soft); margin-top: 1px; }
.svc-row .kebab { flex: 0 0 auto; }
.svc-row .btn-sm { flex: 0 0 auto; }
.svc-empty { padding: var(--space-6); text-align: center; color: var(--text-soft); font-size: var(--text-sm); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.plan-sheet-foot-note { font-size: var(--text-xs); color: var(--text-soft); }

/* ---- client portal: My Plan page ---------------------------------------- */
.pplan { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); min-height: 100%; }
.pplan-hero { padding: var(--space-5) var(--space-6); display: flex; align-items: center; gap: var(--space-5); }
.pplan-hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1-5); }
.pplan-hero-main h2 { margin: 0; font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em; }
.pplan-hero-main p { margin: 0; font-size: var(--text-sm); color: var(--text-soft); }
.pplan-hero-side { flex: 0 0 200px; display: flex; flex-direction: column; gap: var(--space-1-5); align-items: stretch; }
.pplan-hero-side .proj-bar { height: 6px; }
.pplan-hero-side span { font-size: var(--text-xs); color: var(--text-soft); text-align: right; }
/* minmax(0, …): a bare fr track floors at its content's min-content, so one
   long nowrap plan-item label silently widened the track past the viewport
   (587px on a 375px phone) — the whole page then scrolled sideways */
.pplan-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-5); align-items: start; }
.pplan-grid--single { grid-template-columns: minmax(0, 1fr); }
.pplan-desc { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--text-soft); line-height: var(--leading-snug, 1.45); white-space: pre-wrap; }
.pplan-card h3 { margin: 0 0 var(--space-4); font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-strong); }
.pplan-card .plan-included-label { margin-bottom: var(--space-2); }
/* full-height wrapper around the shared dashed-grid + notepad empty state
   (src/shared/lib/ui.js emptyState) — the illustration floats centered in
   the whole page, matching the Tasks / Content empty views. */
.pplan-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-6); }

@media (max-width: 900px) {
  .pplan { padding: var(--space-4); gap: var(--space-4); }
  .pplan-hero { flex-wrap: wrap; gap: var(--space-4); }
  .pplan-hero-side { flex: 1 1 100%; }
  .pplan-hero-side span { text-align: left; }
  .pplan-grid { grid-template-columns: minmax(0, 1fr); }
}
/* the fold chevron exists only on phones — desktop cards never collapse */
.pplan-fold-chev { display: none; }
/* phones: a client should read their full plan inclusions — wrap instead of
   ellipsizing (applies to the admin's page-slotted plan card too) */
@media (max-width: 640px) {
  .plan-item-label { white-space: normal; }
  /* hero reads as a centred stack — ring on top, then chip/title/sub,
     progress bar full width beneath (instead of ring-left row) */
  .pplan-hero { flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
  .pplan-hero .plan-chip { max-width: 100%; }   /* the chip owns its own line now */
  /* collapsible cards: the header row toggles (portalPlanPage) — the plan
     inclusions default folded, the live timeline defaults open */
  .pplan-fold [data-fold-toggle] { display: flex; align-items: center; width: 100%; cursor: pointer; }
  .pplan-fold-chev { display: inline-flex; margin-left: auto; color: var(--text-soft); transition: transform var(--dur) var(--ease); }
  .pplan-fold-chev svg { width: 18px; height: 18px; }
  .pplan-fold.is-folded .pplan-fold-chev { transform: rotate(-90deg); }
  .pplan-fold.is-folded > :not(h3):not(.pplan-tl-bar) { display: none; }
  .pplan-fold.is-folded h3, .pplan-fold.is-folded .pplan-tl-bar { margin-bottom: 0; }
  .pplan-hero-main { align-items: center; }
  .pplan-hero-side { flex-basis: auto; width: 100%; }
  .pplan-hero-side span { text-align: center; }
}

/* per-item content-format dropdown (plan sheet + services library) */
.plan-edit-item .plan-fmt { flex: 0 0 118px; width: 118px; padding: var(--space-1-5) var(--space-2); font-size: var(--text-xs); }

/* posting-order configurator */
.plan-order-toggle { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-sm); color: var(--text-strong); cursor: pointer; text-align: left; }
.plan-order-toggle span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.plan-order-toggle > svg { width: 14px; height: 14px; color: var(--text-soft); transition: transform var(--dur) var(--ease); }
.plan-order-toggle.is-open > svg { transform: rotate(180deg); }
.plan-order-list { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1-5); }
.plan-order-list[hidden] { display: none; }   /* display:flex would beat the hidden attr */
.plan-order-row { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); cursor: grab; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .plan-order-row:hover { border-color: var(--border-strong); box-shadow: 0 2px 6px rgba(16, 24, 40, 0.07); } }
.plan-order-row.is-dragging { opacity: 0.45; }
.plan-order-row.is-ordtarget { outline: 2px dashed var(--primary-400); outline-offset: 1px; }
.plan-order-row .plan-order-grip { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; color: var(--gray-300); }
.plan-order-grip svg { width: 14px; height: 14px; }
.plan-order-row .plan-order-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); }
.plan-order-ico svg { width: 14px; height: 14px; }
/* format-tile tint map — ONE rule serves both sizes (row tile + order peek) */
.plan-order-ico.is-video, .plan-order-peekico.is-video { background: color-mix(in srgb, var(--primary-500) 10%, var(--surface)); color: var(--primary-600); }
.plan-order-ico.is-photo, .plan-order-peekico.is-photo { background: color-mix(in srgb, var(--success-600) 12%, var(--surface)); color: var(--success-600); }
.plan-order-ico.is-motion, .plan-order-peekico.is-motion { background: color-mix(in srgb, #7a5af8 12%, var(--surface)); color: #6941c6; }
/* the violet pair has no token — brighten it on dark so it stays legible */
html[data-theme="dark"] .plan-order-ico.is-motion,
html[data-theme="dark"] .plan-order-peekico.is-motion { background: color-mix(in srgb, #a78bfa 14%, var(--surface)); color: #b9a1fd; }
.plan-order-row .plan-order-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.plan-order-main b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); white-space: nowrap; }
.plan-order-main i { font-style: normal; font-size: var(--text-2xs); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.plan-order-row .plan-order-idx { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--gray-100); font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.plan-order-week { display: flex; align-items: center; gap: var(--space-2-5); margin: var(--space-2-5) var(--space-0-5) var(--space-0-5); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-soft); }
.plan-order-week::after { content: ""; flex: 1; height: 1px; background: var(--border-faint); }
.plan-order-note { margin: var(--space-2-5) var(--space-0-5) 0; font-size: var(--text-xs); color: var(--text-soft); line-height: 1.5; }
.plan-order-row b { width: 16px; font-size: var(--text-xs); color: var(--text-soft); font-weight: var(--fw-semibold); }
.plan-order-row span { flex: 1; font-size: var(--text-sm); color: var(--text-strong); }
.plan-order-row button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-soft); cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .plan-order-row button:hover:not(:disabled) { background: var(--gray-100); color: var(--text-strong); }
}
.plan-order-row button:disabled { opacity: 0.3; cursor: default; }
.plan-order-row button svg { width: 14px; height: 14px; }
.plan-order-row .plan-order-up svg { transform: rotate(180deg); }

/* ---- plan sheet cleanup: one card per item, format-first ---- */
.plan-edit-item { align-items: center; gap: var(--space-2-5); padding: var(--space-2) var(--space-2-5); border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
/* the old editor's span rules outrank the bare .plan-order-ico tile styles
   in here — restate the tile at editor specificity */
.plan-edit-item .plan-item-fmtico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; align-self: center; width: 30px; height: 30px; border-radius: var(--radius-sm); }
.plan-edit-item .plan-item-fmtico svg { width: 14px; height: 14px; }
.plan-edit-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.plan-edit-label { width: 100%; border: 0; background: transparent; padding: 0; font: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); outline: none; }
.plan-edit-label::placeholder { color: var(--text-soft); font-weight: var(--fw-regular); }
.plan-edit-item .plan-fmt { flex: none; width: max-content; max-width: 100%; border: 0; background: transparent; padding: 0; margin: 0; font-size: var(--text-2xs); color: var(--text-soft); cursor: pointer; outline: none; }
.plan-order-ico.is-shoot { background: var(--gray-100); color: var(--text-muted); }
.plan-order-ico.is-story { background: color-mix(in srgb, var(--warning-600) 14%, var(--surface)); color: var(--warning-700); }
/* order peek: the sequence as tinted mini-tiles */
.plan-order-toggle span[data-ps-orderpeek] { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.plan-order-peekcount { flex: 0 0 auto; margin-right: var(--space-1); font-style: normal; font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--text-soft); }
.plan-order-peekico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-xs); }
.plan-order-peekico svg { width: 11px; height: 11px; }
/* tint map shared with .plan-order-ico above */
/* list-view loading: heading shimmer bar */

/* week drop zones in the posting-order editor */
.plan-order-empty { padding: var(--space-2-5) var(--space-3); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--text-soft); text-align: center; }
.plan-order-week.is-ordtarget span { color: var(--primary-600); }
.plan-order-week.is-ordtarget::after { background: var(--primary-400); }
.plan-order-empty.is-ordtarget { border-color: var(--primary-400); color: var(--primary-600); background: color-mix(in srgb, var(--primary-500) 4%, var(--surface)); }

/* ---- portal "Your content" card: the client's cycle-at-a-time calendar ---- */
.pplan-card--sched { margin-top: var(--space-4); }
.ppsched-now { font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--primary-600); background: color-mix(in srgb, var(--primary-500) 9%, var(--surface)); padding: 3px 9px; border-radius: var(--radius-full); }
/* page-top cycle bar: ONE pager drives the hero, timeline and content */
.pplan-cycbar { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-2-5); padding: var(--space-2-5) 0; border-bottom: 1px solid var(--border); margin-bottom: var(--space-4); }
/* portal page: bleed the bar (and its separator) edge-to-edge past .pplan's
   padding, exactly like the admin bar spans its full layout width; the chip
   then right-aligns to the page padding, not the page edge */
.pplan > .pplan-cycbar { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0; padding: 0 var(--space-6); height: var(--shell-toolbar-height); flex-shrink: 0; position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface); }
/* mobile: no sidebar seam to align with — compact bar */
@media (max-width: 640px) { .pplan > .pplan-cycbar { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0; padding: var(--space-2-5) var(--space-4); height: auto; } }
.pplan > .pplan-cycbar .ppsched-now, .pplan > .pplan-cycbar .pplan-cycnow { right: var(--space-6); }
@media (max-width: 640px) { .pplan > .pplan-cycbar .ppsched-now, .pplan > .pplan-cycbar .pplan-cycnow { right: var(--space-4); } }
/* ONE pager look on both sides (portal My Plan + admin Deliverables), matched
   to the Content Schedule title-nav: bold cycle name, regular dates, ghost
   .csched-title-arr arrows, hairline separator below. */
.pplan-cycbar .cyc-pager-label { font-size: var(--text-lg); font-weight: var(--fw-regular); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pplan-cycbar .cyc-pager-label strong { font-weight: var(--fw-bold); color: var(--text-strong); }
.pplan-cycbar .csched-title-arr[disabled] { opacity: 0.35; pointer-events: none; }
.ppsched-pager-label { font-size: var(--text-md); color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ppsched-pager-label b { font-weight: var(--fw-semibold); }
.pplan-cycbar .ppsched-now, .pplan-cycnow { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.pplan-cycnow { border: 0; background: transparent; color: var(--primary-600); font-size: var(--text-xs); font-weight: var(--fw-semibold); cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
@media (hover: hover) and (pointer: fine) {
  .pplan-cycnow:hover { background: color-mix(in srgb, var(--primary-500) 8%, var(--surface)); }
}
@media (max-width: 720px) { .pplan-cycbar .ppsched-now, .pplan-cycnow { position: static; transform: none; } .ppsched-pager-label { font-size: var(--text-sm); } }
/* mobile: the current-cycle pill crams the pager — drop it and let the blue
   cycle name carry the "you're on the current cycle" signal instead */
@media (max-width: 640px) {
  .pplan-cycbar .ppsched-now { display: none; }
  .pplan-cycbar:has(.ppsched-now) .cyc-pager-label strong,
  .pplan-cycbar:has(.ppsched-now) .ppsched-pager-label b { color: var(--primary-600); }
}
.ppsched-list { display: flex; flex-direction: column; gap: var(--space-2); }
.ppsched-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--surface); }
.ppsched-row.is-click { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .ppsched-row.is-click:hover { border-color: var(--primary-400); } }
.ppsched-cover { position: relative; flex: 0 0 auto; width: 54px; height: 42px; border-radius: var(--radius-sm); overflow: hidden; background: var(--gray-100); display: flex; align-items: center; justify-content: center; }
.ppsched-cover video, .ppsched-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ppsched-cover--icon { color: var(--text-soft); }
.ppsched-cover--icon svg { width: 16px; height: 16px; }
.ppsched-count { position: absolute; right: 3px; bottom: 3px; padding: 0 5px; border-radius: var(--radius-full); background: rgba(15, 17, 21, 0.68); color: #fff; font-size: var(--text-3xs); font-weight: var(--fw-semibold); }
.ppsched-cap { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppsched-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-2); }
.ppsched-badges { display: inline-flex; gap: 3px; }
.ppsched-badges svg { width: 15px; height: 15px; }
.ppsched-chip { padding: 3px 9px; border-radius: var(--radius-full); font-size: var(--text-2xs); font-weight: var(--fw-semibold); white-space: nowrap; }
.ppsched-chip.is-idle { background: var(--gray-100); color: var(--text-muted); }
.ppsched-chip.is-ok { background: color-mix(in srgb, var(--success-600) 12%, var(--surface)); color: var(--success-700); }
.ppsched-chip.is-warn { background: color-mix(in srgb, var(--warning-600) 12%, var(--surface)); color: var(--warning-700); }
.ppsched-slot { display: flex; align-items: center; gap: var(--space-3); padding: 9px 12px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--text-soft); }
.ppsched-slot-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--gray-100); }
.ppsched-slot-ico svg { width: 13px; height: 13px; }
.ppsched-slot-name { flex: 1; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); }
.ppsched-slot-when { font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* ---- sidebar "My Plan" feature card (portal, above Settings) ---- */
/* (4 Sep) accent-driven: the gradient, glow and button all read the user's
   accent ramp — Ink (default) gives a near-black card with a white button; the
   dark theme's white ramp inverts it to a white card with an ink button. */
.nav-plancard { position: relative; margin: 0 var(--space-2-5) var(--space-2-5); padding: var(--space-3-5) var(--space-3-5) var(--space-3); border-radius: 14px; cursor: pointer; overflow: hidden; color: var(--on-primary); background: linear-gradient(150deg, var(--primary-500) 0%, var(--primary-600) 42%, var(--primary-800) 115%); box-shadow: var(--primary-glow-lg); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.nav-plancard::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--on-primary) 16%, transparent), transparent 65%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .nav-plancard:hover { transform: translateY(-1px); box-shadow: var(--primary-glow-lg), var(--shadow-md); } }
.nav-plancard.active { outline: 2px solid color-mix(in srgb, var(--on-primary) 50%, transparent); outline-offset: -2px; }
.nav-plancard-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface); color: var(--primary-600); margin-bottom: 9px; }
.nav-plancard-ico svg { width: 17px; height: 17px; }
.nav-plancard b { display: block; font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.nav-plancard p { margin: 3px 0 10px; font-size: var(--text-2xs); line-height: 1.45; color: color-mix(in srgb, var(--on-primary) 82%, transparent); }
.nav-plancard-btn { display: block; text-align: center; padding: 7px 10px; border-radius: var(--radius-full); background: var(--surface); color: var(--primary-600); font-size: var(--text-xs); font-weight: var(--fw-semibold); }
/* collapsed sidebar (.app.collapsed — the rail): the card becomes ONE
   gradient button with the icon straight on it — no tile-within-a-tile */
.app.collapsed .nav-plancard { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-2-5); border-radius: 12px; }
.app.collapsed .nav-plancard::after { display: none; }
.app.collapsed .nav-plancard b, .app.collapsed .nav-plancard p, .app.collapsed .nav-plancard-btn { display: none; }
.app.collapsed .nav-plancard-ico { margin: 0; width: auto; height: auto; background: transparent; color: var(--on-primary); border-radius: 0; }
.app.collapsed .nav-plancard-ico svg { width: 18px; height: 18px; }

/* portal read-only post preview sheet */
.ppv { display: flex; justify-content: center; }
.ppv .pv-card { width: min(420px, 100%); }
/* same side inset as .pv-head above it (10px 12px), so the caption's left edge lines up with the avatar */
.ppv-cap { margin: var(--space-2-5) var(--space-3) var(--space-3); font-size: var(--text-sm); color: var(--text); line-height: 1.55; white-space: pre-wrap; }

/* content-spacing explainer */
.ppsched-help { display: inline-flex; align-items: center; gap: var(--space-1-5); border: 0; background: transparent; color: var(--primary-600); font-size: var(--text-xs); font-weight: var(--fw-semibold); cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
@media (hover: hover) and (pointer: fine) {
  .ppsched-help:hover { background: color-mix(in srgb, var(--primary-500) 8%, var(--surface)); }
}
.ppsched-help svg { width: 13px; height: 13px; }
.ppv-help { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-sm); color: var(--text); line-height: 1.6; }
.ppv-help b { color: var(--text-strong); }
.ppv-weeks { display: flex; flex-direction: column; gap: var(--space-1-5); padding: var(--space-3); border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--gray-25); }
.ppv-weeks > b { font-size: var(--text-xs); color: var(--text-soft); font-weight: var(--fw-semibold); }
.ppv-week { display: flex; gap: var(--space-2-5); font-size: var(--text-sm); }
.ppv-week b { flex: 0 0 58px; color: var(--text-muted); font-weight: var(--fw-semibold); }
.ppv-week span { color: var(--text-strong); }
.ppv-help-note { font-size: var(--text-xs); color: var(--text-soft); }

/* spacing explainer: stat tiles + the cycle strip */
.ppv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.ppv-stats > div { display: flex; flex-direction: column; gap: var(--space-0-5); align-items: center; padding: var(--space-3) var(--space-2); border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--gray-25); text-align: center; }
.ppv-stats b { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ppv-stats span { font-size: var(--text-2xs); color: var(--text-soft); }
.ppv-strip { margin-top: var(--space-0-5); }
.ppv-strip-bar { position: relative; height: 26px; border-radius: var(--radius-full); background: var(--gray-100); }
.ppv-strip-bar i { position: absolute; top: 4px; bottom: 4px; width: 1px; background: var(--border-strong); }
.ppv-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18); }
.ppv-dot.is-video { background: var(--primary-500); }
.ppv-dot.is-photo { background: var(--success-600); }
.ppv-dot.is-motion { background: #7a5af8; }
html[data-theme="dark"] .ppv-dot.is-motion { background: #a78bfa; }
.ppv-strip-axis { display: flex; justify-content: space-between; margin-top: var(--space-1-5); font-size: var(--text-2xs); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.ppv-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ppv-leg { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-xs); color: var(--text); font-weight: var(--fw-medium); }
.ppv-leg .ppv-dot { position: static; transform: none; width: 10px; height: 10px; border: 0; box-shadow: none; }

/* preview sheet skeleton (instant open, shimmer while the post loads) */
.ppv .pv-av.skel { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }
.ppv-skel-media { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 0; }

/* cross-cycle notice banner under the pager */
.pplan-notice { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; margin: 0 0 var(--space-3-5); padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--primary-500) 22%, var(--border-faint)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--primary-500) 6%, var(--surface)); color: var(--text); font-size: var(--text-sm); cursor: pointer; text-align: left; }
.pplan-notice > svg:first-child { width: 16px; height: 16px; flex: 0 0 auto; color: var(--primary-600); }
.pplan-notice > svg:last-child { width: 14px; height: 14px; flex: 0 0 auto; margin-left: auto; color: var(--text-soft); }
.pplan-notice span { flex: 1; min-width: 0; }
.pplan-notice b { font-weight: var(--fw-semibold); color: var(--text-strong); }
.pplan-notice.is-warn { border-color: color-mix(in srgb, var(--warning-700) 30%, var(--border-faint)); background: color-mix(in srgb, #f59e0b 8%, var(--surface)); }
.pplan-notice.is-warn > svg:first-child { color: var(--warning-700); }
@media (hover: hover) and (pointer: fine) { .pplan-notice:hover { border-color: var(--primary-400); } }