/* =========================================================================
   views/contenthub.css — Content Hub — scheduling tab, compose modal, emoji/media/image editor, scheduling calendar
   Split from the old monolithic styles/views.css. LOAD ORDER MATTERS:
   the <link> order in Magnet CRM.html / Client App.html reproduces the
   original file order, so the cascade is unchanged — add new rules to the
   matching feature file, not the end of the list.
   ========================================================================= */
/* ===== Content Hub — Scheduling tab ===== */
.csched { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 20px var(--space-6) var(--space-6); display: flex; flex-direction: column; }
.csched > .empty-state { margin: auto 0; }
.csched-ws { display: flex; flex-direction: column; gap: var(--space-4); }
.csched-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.csched-title { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--text-strong); }
.csched-sub { font-size: var(--text-sm); color: var(--text-soft); margin-top: 2px; }
.csched-filter { align-self: flex-start; }
.csched-list { min-height: 220px; display: flex; flex-direction: column; }
.csched-list .empty-state { margin: auto 0; }
.csched-howto p { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); margin-bottom: var(--space-3); }
.csched-howto .intg-steps { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.csched-loading { padding: var(--space-6); text-align: center; color: var(--text-soft); font-size: var(--text-sm); }
/* scheduled-post cards */
.csched-posts { display: flex; flex-direction: column; gap: var(--space-3); }
.csched-post { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background: var(--surface); transition: border-color var(--dur-fast) var(--ease); }
.csched-post:hover { border-color: var(--border); }
.csched-post-thumb { position: relative; flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-100); display: inline-flex; align-items: center; justify-content: center; }
.csched-post-thumb img, .csched-post-thumb video { width: 100%; height: 100%; object-fit: cover; }
.csched-post-noimg svg { width: 22px; height: 22px; color: var(--text-soft); }
.csched-post-count { position: absolute; bottom: 3px; right: 3px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; font-weight: var(--fw-semibold); padding: 1px 5px; border-radius: 999px; }
.csched-post-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.csched-post-meta { display: flex; align-items: center; gap: var(--space-2); }
.csched-post-plats { display: inline-flex; gap: 3px; }
.csched-post-plat svg { width: 16px; height: 16px; display: block; }
.csched-post-when { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-soft); }
.csched-post-cap { font-size: var(--text-sm); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csched-post-nocap { color: var(--text-soft); font-style: italic; }
.csched-post-actions { display: flex; gap: 2px; flex-shrink: 0; }

/* ===== Content Hub — Compose post modal (Metricool-style) ===== */
.compose { display: flex; flex-direction: column; gap: var(--space-4); }
/* slimmer than the default md modal */
.modal-shell.modal-md[aria-label="Compose post"] { width: min(880px, calc(100vw - 32px)); }
.modal-shell[aria-label="Compose post"] .modal-body { padding: 0; display: flex; flex: 1; min-height: 0; overflow: hidden; }
.compose-wrap { display: flex; align-items: stretch; width: 100%; min-height: 0; }
.compose-wrap .compose { flex: 1; min-width: 0; padding: var(--space-5); overflow-y: auto; }
/* The composer always opens full-width WITH the live preview (no compact/eye
   toggle). Below 880px there's no room for the side-by-side preview, so it
   collapses to the single-column composer. */
@media (max-width: 880px) {
  .modal-shell.modal-md[aria-label="Compose post"] { width: min(496px, calc(100vw - 32px)); }
  /* scoped under .modal-shell so these BEAT the later same-specificity base
     rules (a bare .compose-preview{display:none} here silently loses to the
     base display:flex further down the file) */
  .modal-shell[aria-label="Compose post"] .compose-preview { display: none; }
}
/* Sync toggle lives in the modal header, just right of the title */
/* Template / Campaign / Labels — dashed chips like the reference */
/* account / platform tiles — avatar + badge, underline when selected */
.compose-accounts { display: flex; gap: var(--space-4); flex-wrap: wrap; padding-bottom: 2px; }
.compose-acct { position: relative; border: 0; background: transparent; padding: 0 0 9px; cursor: pointer; opacity: .4; transition: opacity var(--dur-fast) var(--ease); }
.compose-acct:hover { opacity: .7; }
.compose-acct.sel { opacity: 1; }
.compose-acct.sel::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 999px; background: var(--primary-500); }
.compose-acct-av { position: relative; display: block; }
.compose-acct-av .proj-logo { width: 50px; height: 50px; font-size: 18px; border-radius: 14px; }
.compose-acct-badge { position: absolute; top: -5px; right: -5px; width: 21px; height: 21px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2.5px var(--surface); }
.compose-acct-badge svg { width: 100%; height: 100%; display: block; }
/* post type — underlined tabs */
/* accounts row + format dropdown (Post/Story/Reels — applies to every selected platform) */
.compose-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--border-faint); padding-bottom: var(--space-2); }
.compose-fmt { position: relative; flex-shrink: 0; }
.compose-fmt-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-strong); font-size: var(--text-sm); font-weight: var(--fw-semibold); cursor: pointer; box-shadow: var(--btn-shadow); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.compose-fmt-btn:hover { background: var(--gray-25); }
.compose-fmt-btn > svg { width: 14px; height: 14px; color: var(--text-soft); }
.compose-fmt-ic { display: inline-flex; }
.compose-fmt-ic svg { width: 15px; height: 15px; color: var(--primary-600); }
.compose-fmt-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 168px; padding: 5px; }
.compose-fmt-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; text-align: left; }
.compose-fmt-opt:hover { background: var(--gray-50); }
.compose-fmt-opt svg:first-child { width: 15px; height: 15px; color: var(--text-soft); flex-shrink: 0; }
.compose-fmt-opt.active { color: var(--primary-600); font-weight: var(--fw-semibold); }
.compose-fmt-opt.active svg { color: var(--primary-600); }
.compose-fmt-opt span { flex: 1; }
.compose-fmt-opt svg:last-child { width: 14px; height: 14px; }
/* per-platform caption switcher — shown when Sync is off */
/* caption — borderless, flows, auto-grows with content */
.compose-caption { width: 100%; resize: none; overflow: hidden; min-height: 96px; padding: 2px 0; border: 0; font: inherit; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-strong); background: transparent; }
.compose-caption::placeholder { color: var(--text-soft); }
.compose-caption:focus { outline: none; border: 0; box-shadow: none; }
/* per-platform format errors + warnings — clean white cards, the severity
   lives in the header/icon colour (reference: Planable's validation card) */
.compose-errs { display: flex; flex-direction: column; gap: var(--space-2); }
.compose-errs-box { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden; }
.compose-errs-box--warn .compose-errs-head { color: var(--warning-600); }
.compose-errs-box--warn .compose-err-row .compose-err-ic { color: var(--warning-600); }
.compose-errs-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; background: transparent; color: var(--danger-600); font-size: var(--text-sm); font-weight: var(--fw-semibold); cursor: pointer; text-align: left; }
.compose-errs-badge { display: inline-flex; }
.compose-errs-badge svg { width: 16px; height: 16px; }
.compose-errs-caret { margin-left: auto; display: inline-flex; transition: transform var(--dur-fast) var(--ease); }
.compose-errs-caret svg { width: 15px; height: 15px; }
.compose-errs-caret.open { transform: rotate(180deg); }
.compose-errs-body { padding: 2px 12px 10px; display: flex; flex-direction: column; gap: 7px; }
/* display:flex beats the UA [hidden] rule — pin the collapse down */
.compose-errs-body[hidden] { display: none; }
.compose-err-row { display: flex; align-items: flex-start; gap: 9px; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text); }
.compose-err-row .compose-err-ic { flex-shrink: 0; display: inline-flex; margin-top: 1px; color: var(--danger-600); }
.compose-err-row .compose-err-ic svg { width: 16px; height: 16px; border-radius: 50%; }
.compose-err-row > span:last-child { flex: 1; }
/* actionable finding — inline "Crop" link opens the offending image in the crop tool */
.compose-err-fix { display: inline; padding: 0; border: 0; background: none; color: #0b6bcb; font: inherit; font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.compose-err-fix:hover { color: #084d92; }
/* media — compact thumbnail tiles with a ⋯ menu (the right pane previews the
   real feed layout). The tile stays overflow-visible so the menu can escape;
   rounding lives on the media element itself. */
.compose-media { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.compose-media:empty { display: none; }
.compose-thumb { position: relative; width: 104px; }
.compose-thumb img, .compose-thumb video { width: 100%; height: 104px; object-fit: cover; display: block; border-radius: var(--radius-lg); background: var(--gray-100); box-shadow: var(--shadow-xs); }
.compose-thumb.is-uploading img, .compose-thumb.is-uploading video { opacity: .4; }
.compose-thumb.is-error img, .compose-thumb.is-error video { outline: 2px solid var(--danger-600); outline-offset: -2px; }
.compose-thumb-play { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.compose-thumb-play svg { width: 14px; height: 14px; margin-left: 2px; }
.compose-thumb-grip { position: absolute; top: 5px; left: 5px; width: 24px; height: 24px; border-radius: 50%; background: rgba(20,20,28,.72); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: grab; }
.compose-thumb-grip svg { width: 13px; height: 13px; }
.compose-thumb[draggable="true"] { cursor: grab; }
.compose-thumb.dragging { opacity: .55; }
.compose-thumb-dots { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(20,20,28,.72); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.compose-thumb-dots:hover { background: rgba(20,20,28,.9); }
.compose-thumb-dots svg { width: 15px; height: 15px; }
/* opens ABOVE the dots and extends RIGHTWARD — the media row sits at the
   bottom-left of the scroll pane, so down/left would clip at the pane edges */
.compose-thumb-pop { position: absolute; bottom: calc(100% - 30px); left: 5px; z-index: 6; min-width: 158px; padding: 5px; }
.compose-thumb-pop button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; text-align: left; }
.compose-thumb-pop button:hover { background: var(--gray-50); }
.compose-thumb-pop button svg { width: 15px; height: 15px; color: var(--text-soft); flex-shrink: 0; }
.compose-thumb-pop button.danger { color: var(--danger-600); }
.compose-thumb-pop button.danger svg { color: var(--danger-600); }
/* measured size caption under the tile — "2048×1152", videos add "· 0:04";
   empty until measureMedia's metadata lands (refreshDims fills it in) */
.compose-thumb-dims { display: block; margin-top: 3px; font-size: 10px; line-height: 1.2; color: var(--text-soft); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compose-thumb-dims:empty { display: none; }
/* alt-text editor (small modal off the tile ⋯ menu) */
.compose-alt { display: flex; flex-direction: column; gap: var(--space-3); }
.compose-alt-thumb { border-radius: var(--radius-md); overflow: hidden; background: var(--gray-100); display: flex; align-items: center; justify-content: center; }
.compose-alt-thumb img, .compose-alt-thumb video { max-width: 100%; max-height: 180px; object-fit: contain; display: block; }
.compose-alt-label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); }
.compose-alt-input { resize: vertical; min-height: 92px; font: inherit; }
/* Reels: vertical 9:16 tile on black */
.compose-media--reel .compose-thumb { width: auto; }
.compose-media--reel .compose-thumb video, .compose-media--reel .compose-thumb img { width: auto; height: 185px; aspect-ratio: 9 / 16; background: #000; }
.compose-thumb-spin { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
/* manage mode — inline tile grid + "add more" tiles + Done (reuses .mman-*) */
.compose-media--manage { margin: 0; display: block; }
.compose-mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: var(--space-3); }
.compose-mm-grid .mman-tile { cursor: grab; }
.compose-mm-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); }
.compose-mm-hint { font-size: var(--text-sm); color: var(--text-muted); }
/* footer right group + preview eye */
.compose-foot-right { display: flex; align-items: center; gap: var(--space-3); }

/* live caption counter (right of the toolbar spacer) */
.compose-count { font-size: var(--text-xs); color: var(--text-soft); font-variant-numeric: tabular-nums; align-self: center; }
.compose-count.near { color: var(--warning-600); }
.compose-count.over { color: var(--danger-600); font-weight: var(--fw-semibold); }

/* ---- composer right pane: live feed preview ---- */
.compose-preview { width: 344px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-left: 1px solid var(--border-faint); background: var(--gray-25); overflow-y: auto; }
.compose-prev-toggle { display: flex; gap: var(--space-2); justify-content: center; }
.compose-prev-toggle.is-single .compose-prev-pill { cursor: default; }
.compose-prev-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--fw-semibold); cursor: pointer; transition: all var(--dur-fast) var(--ease); }
.compose-prev-pill svg { width: 14px; height: 14px; border-radius: 50%; }
.compose-prev-pill.active { border-color: var(--primary-500); color: var(--primary-600); background: var(--surface); }
.compose-prev-canvas { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.pv-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-top: var(--space-8); color: var(--text-soft); font-size: var(--text-sm); }
.pv-empty svg { width: 22px; height: 22px; }

/* shared feed-card chrome */
.pv-card { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); }
.pv-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; }
.pv-av { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; }
.pv-av .proj-logo, .pv-av-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; font-size: 12px; }
.pv-av--sm, .pv-av--sm .proj-logo, .pv-av--sm .pv-av-img { width: 26px; height: 26px; }
.pv-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pv-name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-sub { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-2xs); color: var(--text-soft); }
.pv-sub svg { width: 11px; height: 11px; }
.pv-dots { color: var(--text-soft); font-weight: var(--fw-bold); letter-spacing: 1px; flex-shrink: 0; }
.pv-cap { padding: 0 12px 10px; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text); white-space: pre-wrap; word-break: break-word; }
.pv-cap-ph { color: var(--text-soft); }
.pv-ig .pv-head { padding: 9px 12px; }
.pv-ig .pv-name { flex: 1; }
.pv-ig .pv-cap { padding-top: 2px; }

/* media grids */
.pv-grid { display: grid; gap: 2px; background: var(--gray-100); }
.pv-grid img, .pv-grid video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* single media: the container carries the publish frame (inline aspect-ratio
   from cropFor) and the media cover-fills it — preview == published crop */
.pv-grid-1 { overflow: hidden; }
.pv-grid-1 img, .pv-grid-1 video { width: 100%; height: 100%; object-fit: cover; }
.pv-grid-2 { grid-template-columns: 1fr 1fr; }
.pv-grid-2 img, .pv-grid-2 video { aspect-ratio: 1; }
.pv-grid-3 .pv-hero { width: 100%; max-height: 190px; object-fit: cover; }
.pv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.pv-pair img, .pv-pair video { aspect-ratio: 1.45; }
.pv-last { position: relative; }
.pv-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; font-size: var(--text-lg); font-weight: var(--fw-bold); }
.pv-media-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 1; background: #17171d; color: rgba(255,255,255,.55); font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.pv-media-empty svg { width: 24px; height: 24px; }

/* IG carousel — one slide, side arrows, n/total counter, dot strip */
.pv-car { position: relative; }
.pv-car img, .pv-car video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pv-car-count { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(20,20,28,.68); color: #fff; font-size: var(--text-2xs); font-weight: var(--fw-semibold); }
.pv-car-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #2b2b33; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-xs); }
.pv-car-arrow--l { left: 8px; }
.pv-car-arrow--r { right: 8px; }
.pv-car-arrow svg { width: 14px; height: 14px; }
.pv-car-dots { display: flex; justify-content: center; gap: 4px; padding: 8px 0 0; }
.pv-car-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-200); }
.pv-car-dots span.on { background: #0095f6; }

/* small play/pause chip on preview videos — fades away while playing */
.pv-vidhost { position: relative; }
.pv-play { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .pv-play:hover { background: rgba(0,0,0,.82); transform: scale(1.08); }
}
.pv-play:active { background: rgba(0,0,0,.82); transform: scale(.92); }
.pv-play svg { width: 15px; height: 15px; margin-left: 2px; }
.pv-play.is-playing { opacity: 0; }
.pv-vidhost:hover .pv-play.is-playing { opacity: 1; }

/* video trim modal — stage + tick ruler + filmstrip with yellow trim handles */
.vtrim { display: flex; flex-direction: column; gap: var(--space-3); }
/* the stage hugs the video (no letterbox bars) — controls float on the video */
.vtrim-stage { position: relative; align-self: center; max-width: 100%; }
.vtrim-video { max-width: 100%; max-height: min(60vh, 640px); display: block; background: #000; }
.vtrim-ctrls { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.vtrim-ctl { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #2b2b33; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-xs); transition: background var(--dur-fast) var(--ease); }
.vtrim-ctl:hover { background: #fff; }
.vtrim-ctl svg { width: 17px; height: 17px; }

.vtrim-ruler { display: flex; align-items: center; gap: 8px; height: 16px; }
.vtrim-end { font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.vtrim-ticks { flex: 1; height: 7px; background-image: repeating-linear-gradient(to right, var(--gray-300) 0 1.5px, transparent 1.5px calc(100% / 13)); background-size: calc(100% - 1.5px) 100%; }

.vtrim-strip { position: relative; height: 64px; border-radius: var(--radius-md); background: var(--gray-100); user-select: none; touch-action: none; cursor: pointer; }
.vtrim-frames { position: absolute; inset: 0; display: flex; border-radius: var(--radius-md); overflow: hidden; }
.vtrim-frames canvas { flex: 1; height: 100%; display: block; min-width: 0; }
.vtrim-dim { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,.62); pointer-events: none; }
.vtrim-dim--l { left: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.vtrim-dim--r { right: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.vtrim-sel { position: absolute; top: 0; bottom: 0; border: 3px solid #f7c948; border-radius: 10px; box-sizing: border-box; pointer-events: none; }
.vtrim-handle { position: absolute; top: -3px; bottom: -3px; width: 10px; background: #f7c948; cursor: ew-resize; pointer-events: auto; }
.vtrim-handle::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.5px; height: 16px; border-radius: 2px; background: rgba(0,0,0,.35); }
.vtrim-handle--l { left: -3px; border-radius: 10px 0 0 10px; }
.vtrim-handle--r { right: -3px; border-radius: 0 10px 10px 0; }
.vtrim-playhead { position: absolute; top: -6px; bottom: 0; width: 2px; margin-left: -1px; background: #1b1b23; pointer-events: none; }
.vtrim-bubble { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: #1b1b23; color: #fff; font-size: var(--text-2xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vtrim-hint { font-size: var(--text-xs); color: var(--text-soft); }

/* action rows */
.pv-fb-actions { display: flex; border-top: 1px solid var(--border-faint); }
.pv-fb-actions span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; color: var(--text-soft); font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.pv-fb-actions svg { width: 15px; height: 15px; }
.pv-fb-actions i { font-style: normal; }
.pv-ig-actions { display: flex; align-items: center; gap: 13px; padding: 9px 12px 4px; color: var(--text-strong); }
.pv-ig-actions svg { width: 20px; height: 20px; }
.pv-ig-save { margin-left: auto; }

/* story / reel — 9:16 frame */
.pv-vert { position: relative; width: min(232px, 100%); aspect-ratio: 9 / 16; border-radius: var(--radius-lg); overflow: hidden; background: #17171d; box-shadow: var(--shadow-xs); }
.pv-vert-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-vert-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.35); }
.pv-vert-ph svg { width: 26px; height: 26px; }
.pv-vert-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; gap: 7px; }
.pv-vert-name { color: #fff; font-size: var(--text-xs); font-weight: var(--fw-semibold); text-shadow: 0 1px 2px rgba(0,0,0,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* IG story chrome — progress track, top identity/tools, reply footer */
.pv-story-prog { position: absolute; top: 6px; left: 8px; right: 8px; height: 2px; border-radius: 999px; background: rgba(255,255,255,.35); }
.pv-story-prog::after { content: ""; display: block; width: 42%; height: 100%; border-radius: 999px; background: #fff; }
.pv-story-top { position: absolute; top: 13px; left: 10px; right: 6px; display: flex; align-items: center; gap: 7px; min-width: 0; }
.pv-story-time { flex-shrink: 0; color: rgba(255,255,255,.7); font-size: var(--text-2xs); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.pv-story-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.pv-story-play { display: inline-flex; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.pv-story-tools--fb svg { width: 14px; height: 14px; }
.pv-story-tools svg { width: 12px; height: 12px; }
.pv-story-tools svg:last-child { width: 16px; height: 16px; }
.pv-story-foot { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; color: #fff; }
.pv-story-reply { flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 7px 12px; font-size: var(--text-xs); color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-story-act { display: inline-flex; flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.pv-story-act svg { width: 20px; height: 20px; }

/* reel chrome — action rail (right) + identity/Follow + caption (bottom-left) */
.pv-reel-rail { position: absolute; right: 9px; bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 15px; color: #fff; }
.pv-rail-btn { display: inline-flex; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.pv-rail-btn svg { width: 19px; height: 19px; }
.pv-reel-bottom { position: absolute; left: 10px; right: 42px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.pv-reel-id { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pv-reel-id .pv-vert-name { flex-shrink: 1; }
.pv-reel-follow { flex-shrink: 0; padding: 2.5px 9px; border: 1px solid rgba(255,255,255,.85); border-radius: 7px; color: #fff; font-size: 10.5px; font-weight: var(--fw-semibold); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
/* Facebook's Follow is plain bold text, no pill */
.pv-reel-follow--fb { border: 0; padding: 0; border-radius: 0; }
.pv-reel-cap { color: #fff; font-size: var(--text-xs); line-height: var(--leading-snug); text-shadow: 0 1px 2px rgba(0,0,0,.55); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== Emoji picker popover ===== */
.emoji-pop { position: fixed; z-index: 1200; width: 312px; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px; }
.emoji-group-label { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); margin: 8px 4px 4px; }
.emoji-group-label:first-child { margin-top: 2px; }
.emoji-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-btn { border: 0; background: transparent; border-radius: var(--radius-sm); font-size: 20px; line-height: 1; height: 34px; cursor: pointer; }
.emoji-btn:hover { background: var(--gray-100); }

/* ===== Manage media modal ===== */
.mman-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.mman-tile { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-100); cursor: grab; }
.mman-thumb { width: 100%; height: 100%; }
.mman-tile img, .mman-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mman-tile.dragging { opacity: .5; }
.mman-tile.is-error { outline: 2px solid var(--danger-600); }
/* dark scrim + controls, revealed on hover */
.mman-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.42); opacity: 0; transition: opacity var(--dur-fast) var(--ease); pointer-events: none; }
.mman-ctrls { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.mman-drag { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: grab; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.mman-remove { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.mman-tile:hover .mman-scrim, .mman-tile:hover .mman-ctrls, .mman-tile:hover .mman-drag, .mman-tile:hover .mman-remove { opacity: 1; }
.mman-remove:hover, .mman-drag:hover { background: #000; }
.mman-remove svg, .mman-drag svg { width: 14px; height: 14px; }
.mman-round { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.8); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .03em; transition: background var(--dur-fast) var(--ease); }
.mman-round:hover { background: #000; }
.mman-round svg { width: 16px; height: 16px; }
.mman-tile.is-uploading .mman-thumb { opacity: .4; }
.mman-spin { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
/* dashed "Add more from…" tiles */
.mman-add { list-style: none; aspect-ratio: 1/1; }
.mman-add button { width: 100%; height: 100%; border: 1.5px dashed var(--border); border-radius: var(--radius-md); background: transparent; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; cursor: pointer; opacity: .85; font-size: var(--text-sm); font-weight: var(--fw-medium); text-align: center; line-height: 1.3; transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.mman-add button:hover { opacity: 1; border-color: var(--text-soft); }
.mman-add-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gray-100); color: var(--text-soft); }
.mman-add-ic svg { width: 18px; height: 18px; }
.mman-foot { display: flex; align-items: center; width: 100%; }

/* ===== Image editor modal ===== */
/* the default modal-lg (720px) leaves a lot of dead side padding around the
   480px stage — a bit narrower reads as sized-to-content, not a form that
   happens to hold an image */
.modal-shell.modal-lg[aria-label="Crop image"] { width: min(600px, calc(100vw - 32px)); }
.imed { display: flex; gap: var(--space-4); min-height: 440px; }
.imed-rail { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; width: 72px; }
.imed-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 60px; border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--surface); color: var(--text-soft); font-size: var(--text-xs); cursor: pointer; transition: all var(--dur-fast) var(--ease); }
.imed-tab:hover { color: var(--text-muted); border-color: var(--border); }
.imed-tab.active { color: var(--primary-600); border-color: var(--primary-500); background: var(--primary-50, var(--gray-25)); }
.imed-tab svg { width: 19px; height: 19px; }
/* the crop-wrap (canvas + crop box) is a FULL-BLEED layer behind the whole
   editor body — the toolbar and the ruler float above it (z-index), so a
   zoomed image's light-washed spill can reach every edge of the modal body,
   Pintura-style, instead of stopping at a stage strip between the controls */
.imed-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.imed-crop-wrap { position: absolute; inset: 0; z-index: 0; }
.imed-crop-wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.imed-crop-wrap canvas.can-drag { cursor: grab; }
.imed-crop-wrap canvas.can-drag:active { cursor: grabbing; }
/* toolbar — labeled pill buttons (rotate/flip/crop-shape), Pintura-style */
.imed-toolbar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; }
.imed-tool { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font-size: var(--text-xs); font-weight: var(--fw-medium); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.imed-tool:hover { background: var(--gray-100); }
.imed-tool-ic { display: inline-flex; }
.imed-tool-ic svg { width: 18px; height: 18px; display: block; }
/* pure vertical spacer — reserves the gap between toolbar and ruler that the
   crop box (positioned by JS on the full-bleed layer) visually occupies */
.imed-stage { flex: 1; min-height: 320px; }
/* white hairline + faint dark outer ring so the outline reads on BOTH sides:
   over the full-strength image inside and over the light wash outside */
.imed-crop-box { position: absolute; border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(20, 20, 28, .28); pointer-events: none; }
.imed-crop-box.is-animating { transition: left .22s cubic-bezier(.32, .72, 0, 1), top .22s cubic-bezier(.32, .72, 0, 1), width .22s cubic-bezier(.32, .72, 0, 1), height .22s cubic-bezier(.32, .72, 0, 1); }
.imed-crop-handle {
  position: absolute; width: 14px; height: 14px; margin: -7px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .25), var(--shadow-xs);
  pointer-events: auto; touch-action: none;
}
.imed-crop-handle--tl { top: 0; left: 0; cursor: nwse-resize; }
.imed-crop-handle--tr { top: 0; left: 100%; cursor: nesw-resize; }
.imed-crop-handle--bl { top: 100%; left: 0; cursor: nesw-resize; }
.imed-crop-handle--br { top: 100%; left: 100%; cursor: nwse-resize; }
/* crop-shape dropdown (replaces the old always-visible aspect-button rail) */
.imed-shape-dd { position: relative; }
.imed-shape-menu {
  /* centred via left:0;right:0;margin:auto — NOT transform:translateX(-50%).
     The popIn animation's keyframes also set `transform` (translateY+scale),
     which fully REPLACES the element's transform while the animation runs
     (a keyframe's `transform` doesn't compose with a separate static
     transform, it overrides it) — a centering transform would vanish for the
     animation's duration, then snap back once it finishes, landing exactly
     half the menu's width off-centre in the meantime. Margin-auto centering
     doesn't touch `transform` at all, so it can't collide with popIn. */
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0 auto; z-index: var(--z-popover);
  width: 224px; max-height: 320px; overflow-y: auto; padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
}
.imed-shape-menu[hidden] { display: none; }
.imed-shape-opt { display: flex; align-items: center; gap: var(--space-3); padding: 7px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text); text-align: left; }
@media (hover: hover) and (pointer: fine) {
  .imed-shape-opt:hover { background: var(--surface-hover); }
}
.imed-shape-opt.active { background: var(--gray-100); font-weight: var(--fw-medium); }
.imed-shape-ico { flex-shrink: 0; display: inline-block; width: 18px; background: var(--text-strong); border-radius: 3px; }
.imed-shape-ico--custom { width: 14px; height: 14px; background: transparent; border: 1.5px dashed var(--text-soft); border-radius: 3px; }
/* fine rotation/scale ruler — a native-camera-roll-style scrolling ruler:
   a fixed pin marks the centre, tick marks (painted by contentImageEditor.js
   inline, sized per mode) scroll underneath as you drag. */
.imed-fine { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding-top: 2px; }
.imed-ruler-pin { width: 1.5px; height: 10px; background: var(--border-strong, var(--text-soft)); }
.imed-ruler { position: relative; width: 320px; height: 22px; overflow: hidden; cursor: grab; touch-action: none; }
.imed-ruler:active { cursor: grabbing; }
.imed-ruler-ticks { position: absolute; top: 0; bottom: 0; left: 0; }
.imed-ruler-value {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  padding: 0 8px; background: var(--surface);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong);
  line-height: 22px; pointer-events: none;
}
.imed-fine-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--gray-100); }
.imed-fine-tab { height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.imed-fine-tab.active { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-xs); }
.imed-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); width: 100%; }
/* insert toolbar (image / library / link) — shown before media is added */
.compose-toolbar { display: flex; align-items: center; gap: 2px; margin-top: calc(-1 * var(--space-3)); }
.compose-toolbar .spacer { flex: 1; }
.compose-tool { width: 34px; height: 34px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.compose-tool:hover { background: var(--gray-100); color: var(--text-strong); }
.compose-tool svg { width: 19px; height: 19px; }
/* footer */
.compose-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; }
/* date/time picker — trigger button + suggestions popup */
.compose-when-wrap { position: relative; }
.compose-when { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-soft); font-size: var(--text-sm); cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.compose-when:hover { border-color: var(--text-soft); }
.compose-when.has-val { color: var(--text-strong); }
.compose-when svg { width: 16px; height: 16px; flex-shrink: 0; }
.compose-when-label { white-space: nowrap; }
.compose-when-caret { display: inline-flex; color: var(--text-soft); }
.compose-when-caret svg { width: 14px; height: 14px; }
.compose-when-native { position: absolute; left: 12px; bottom: 4px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.compose-when-pop { position: absolute; bottom: calc(100% + 6px); left: 0; width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 6; }
.compose-when-pop .cal-area, .compose-when-pop .cal-area--date { min-height: 0; }
.compose-when-clear { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 8px 10px; border: 0; border-top: 1px solid var(--border-faint); background: transparent; color: var(--text); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; text-align: left; }
.compose-when-clear:hover { background: var(--gray-50); }
.compose-when-clear svg { width: 13px; height: 13px; color: var(--text-soft); }
.compose-when-pop[hidden] { display: none; }
.compose-when-opt { display: flex; align-items: center; gap: var(--space-2); padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-strong); font-size: var(--text-sm); cursor: pointer; text-align: left; width: 100%; }
.compose-when-opt:hover { background: var(--gray-100); }
.compose-when-opt svg { width: 17px; height: 17px; color: var(--text-soft); flex-shrink: 0; }
.compose-when-rel { margin-left: auto; color: var(--text-soft); font-size: var(--text-xs); }
.compose-when-sep { height: 1px; background: var(--border-faint); margin: 4px 6px; }
.compose-save { position: relative; }
.compose-save-pop { position: absolute; bottom: calc(100% + 6px); right: 0; min-width: 186px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 5; }
.compose-save-pop[hidden] { display: none; }
.compose-save-pop button { display: flex; align-items: center; gap: var(--space-2); padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-strong); font-size: var(--text-sm); cursor: pointer; text-align: left; width: 100%; }
.compose-save-pop button:hover { background: var(--gray-100); }
.compose-save-pop button svg { width: 16px; height: 16px; color: var(--text-soft); }

/* ===== Content Hub — Scheduling calendar ===== */
.csched-cal { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-4); }
/* Meta planner bar: [Week/Month · ‹ Today ›]  ——  period  ——  [filters] */
.csched-cal-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.csched-bar-left { display: flex; align-items: center; gap: var(--space-3); justify-self: start; }
.csched-bar-right { display: flex; align-items: center; gap: var(--space-2); justify-self: end; }
/* centred period-with-nav — mirrors the Calendar toolbar's .cal-title-nav:
   ghost ‹ › chevrons flank the period, and the period itself is a button
   (data-today) that jumps back to today. */
.csched-title-nav { justify-self: center; display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.csched-title-arr { width: 28px; height: 28px; flex: none; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); border: none; background: none; padding: 0; transition: background var(--dur) var(--ease); }
.csched-title-arr svg { width: 18px; height: 18px; }
.csched-range { font-size: var(--text-lg); font-weight: var(--fw-normal); color: var(--text); white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; border: none; background: none; padding: 2px var(--space-2); border-radius: var(--radius-sm); transition: background var(--dur) var(--ease); }
.csched-range strong { font-weight: var(--fw-bold); color: var(--text-strong); }
@media (hover: hover) and (pointer: fine) {
  .csched-title-arr:hover, .csched-range:hover { background: var(--gray-100); }
}
/* filter buttons — value-in-button, tinted while narrowing */
.csched-filt svg { width: 13px; height: 13px; }
.csched-filt.is-on { border-color: var(--primary-400); color: var(--primary-700); background: var(--primary-50); }
/* row: the grid + the Drafts rail (rail hidden until an undated draft exists;
   phones keep the full width for the side-scrolling week grid) */
.csched-cal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: row; gap: var(--space-3); }
@media (max-width: 900px) { .csched-cal-body .csched-rail { display: none; } }
.csched-grid { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: auto; }
/* week — 7 columns need real room for the square thumbnail + caption to stay
   legible; below that width the grid scrolls sideways instead of crushing
   every column into an unreadable sliver */
/* connected columns — one bordered surface, days divided by shared hairlines
   (the Meta planner look), not separated rounded cards */
.csched-grid--week { display: grid; grid-template-columns: repeat(7, minmax(132px, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 0; height: 100%; border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--surface); }
.csched-day { display: flex; flex-direction: column; min-height: 0; border: 0; border-right: 1px solid var(--border-faint); border-radius: 0; background: transparent; overflow: hidden; }
.csched-day:last-child { border-right: 0; }
.csched-day:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.csched-day:last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
/* today — a light accent wash down the whole column */
.csched-day.is-today { background: color-mix(in srgb, var(--primary-600) 6%, var(--surface)); }
.csched-day-head { display: flex; align-items: center; gap: 5px; padding: 7px 8px; border-bottom: 1px solid var(--border-faint); }
.csched-day-dow { font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); }
.csched-day-num { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.csched-day.is-today .csched-day-num { color: var(--primary-600); }
.csched-day-add { margin-left: auto; width: 20px; height: 20px; border: 0; border-radius: 6px; background: transparent; color: var(--text-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.csched-day:hover .csched-day-add, .csched-mcell:hover .csched-day-add { opacity: 1; }
.csched-day-add:hover { background: var(--gray-100); color: var(--text); }
.csched-day-add svg { width: 14px; height: 14px; }
.csched-day-body { display: flex; flex-direction: column; gap: 6px; padding: 7px; flex: 1; min-height: 0; overflow-y: auto; }
.csched-day-empty { flex: 1; }
/* post card */
.csched-evt { display: flex; flex-direction: column; gap: 5px; padding: 6px; border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; text-align: left; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.csched-evt:hover { border-color: var(--border); box-shadow: var(--shadow-xs); }
/* header row: platform icon(s) pinned far left, time pinned far right — a
   true space-between so the gap grows/shrinks with the card, not a fixed gap */
.csched-evt-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 1px; }
.csched-evt-plats { display: inline-flex; gap: 2px; }
.csched-evt-plats svg { width: 15px; height: 15px; display: block; }
.csched-evt-time { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-soft); }
.csched-evt.status-published .csched-evt-time { color: var(--success-600, #18a558); }
.csched-evt.status-publishing .csched-evt-time { color: var(--primary-600); }
.csched-evt.status-failed, .csched-evt.status-partially_published { border-color: color-mix(in srgb, var(--danger-600) 42%, var(--border-faint)); }
.csched-evt.status-failed .csched-evt-time, .csched-evt.status-partially_published .csched-evt-time { color: var(--danger-600); }
/* awaiting client approval — amber, so it reads as "parked, not going out" */
.csched-evt.status-pending_approval { border-color: color-mix(in srgb, var(--warning-600, #b45309) 45%, var(--border-faint)); }
.csched-evt.status-pending_approval .csched-evt-time { color: var(--warning-600, #b45309); }
.csched-chip.status-pending_approval { box-shadow: inset 2px 0 0 var(--warning-600, #b45309); }
/* declined by the client — a draft again, flagged red until the admin re-saves */
.csched-evt.is-declined { border-color: color-mix(in srgb, var(--danger-600) 42%, var(--border-faint)); }
.csched-evt.is-declined .csched-evt-time { color: var(--danger-600); }
.csched-chip.is-declined { box-shadow: inset 2px 0 0 var(--danger-600); }
.csched-evt-error { display: flex; align-items: flex-start; gap: 4px; color: var(--danger-600); font-size: 10px; line-height: 1.25; overflow: hidden; }
.csched-evt-error svg { width: 11px; height: 11px; flex: 0 0 auto; }
.csched-evt-error span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csched-evt-error button { margin-left: auto; border: 0; background: none; color: inherit; font: inherit; font-weight: var(--fw-semibold); cursor: pointer; padding: 0; }
.csched-evt-declined-note { display: flex; align-items: flex-start; gap: 4px; color: var(--danger-600); font-size: 10px; line-height: 1.25; overflow: hidden; }
.csched-evt-declined-note svg { width: 11px; height: 11px; flex: 0 0 auto; }
.csched-evt-declined-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csched-evt-img { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1 / 1; background: var(--gray-100); }
.csched-evt-img img, .csched-evt-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.csched-evt-img--empty { display: flex; align-items: center; justify-content: center; }
.csched-evt-img--empty svg { width: 20px; height: 20px; color: var(--text-soft); }
/* hover tools — ⋯ then delete, overlaid top-right of the thumbnail, hidden
   until the card is hovered (dark chips so they read over any photo) */
.csched-evt-tools { position: absolute; top: 5px; right: 5px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.csched-evt:hover .csched-evt-tools, .csched-evt-tools:focus-within { opacity: 1; }
.csched-evt-del, .csched-evt-menu {
  width: 20px; height: 20px;
  border: 0; border-radius: 999px; background: rgba(20, 20, 24, .55); backdrop-filter: blur(2px);
  color: #fff; cursor: pointer; transition: background var(--dur-fast) var(--ease);
  display: inline-flex; align-items: center; justify-content: center;
}
.csched-evt-del:hover { background: var(--danger-600); }
.csched-evt-menu:hover { background: rgba(20, 20, 24, .82); }
.csched-evt-del svg, .csched-evt-menu svg { width: 12px; height: 12px; }
/* the card ⋯ / bulk menus (fixed, body-appended; surface from .filter-menu) */
.csched-menu { min-width: 176px; }
/* hover preview card — read-only, never a pointer target */
.csched-hover {
  position: fixed; z-index: var(--z-popover); width: 236px; pointer-events: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; animation: popIn var(--dur) var(--ease);
}
.csched-hover-media { position: relative; aspect-ratio: 16 / 10; background: var(--gray-100); }
.csched-hover-media img, .csched-hover-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.csched-hover-body { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 12px; }
.csched-hover-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.csched-hover-plats { display: inline-flex; gap: 3px; }
.csched-hover-plats svg { width: 15px; height: 15px; display: block; }
.csched-hover-status { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-soft); }
.csched-hover-status.status-published { color: var(--success-600, #18a558); }
.csched-hover-status.status-publishing { color: var(--primary-600); }
.csched-hover-status.status-failed, .csched-hover-status.status-partially_published { color: var(--danger-600); }
.csched-hover-status.status-pending_approval { color: var(--warning-600, #b45309); }
.csched-hover-when { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-strong); }
.csched-hover-cap { font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.csched-hover-err { font-size: 10.5px; line-height: 1.3; color: var(--danger-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.csched-hover-metrics { display: flex; flex-direction: column; gap: 3px; }
.csched-hover-metrics:empty { display: none; }
.csched-hover-metrics span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: var(--fw-semibold); color: var(--text); font-variant-numeric: tabular-nums; }
.csched-hover-metrics svg { width: 12px; height: 12px; flex: 0 0 auto; }
/* details-modal per-platform results line */
.pdet-metrics { color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* drag to reschedule */
.csched-evt[draggable="true"], .csched-chip[draggable="true"] { -webkit-user-drag: element; }
.csched-evt.is-dragging, .csched-chip.is-dragging { opacity: .45; }
.csched-day.is-dropover, .csched-mcell.is-dropover { outline: 2px solid var(--primary-400); outline-offset: -2px; background: var(--primary-50); }
.csched-rail.is-dropover { border-color: var(--primary-400); background: var(--primary-50); }
.csched.is-post-drag .csched-evt:not(.is-dragging), .csched.is-post-drag .csched-chip:not(.is-dragging) { pointer-events: none; }  /* cells, not cards, catch the dragover */
/* post-type badge (reel/story only — a plain "post" needs no marker) —
   bottom-left of the thumbnail, the same corner Instagram marks reels in */
.csched-evt-type {
  position: absolute; bottom: 5px; left: 5px; width: 18px; height: 18px;
  border-radius: 5px; background: rgba(20, 20, 24, .55); backdrop-filter: blur(2px);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.csched-evt-type svg { width: 11px; height: 11px; }
/* two lines, clipped with an ellipsis on overflow */
.csched-evt-cap { font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 1px; }
.csched-evt-nocap { color: var(--text-soft); font-style: italic; }
/* drafts rail */
.csched-rail { flex-shrink: 0; width: 200px; display: flex; flex-direction: column; border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--gray-25); overflow: hidden; }
.csched-rail[hidden] { display: none; }   /* the explicit display would beat the hidden attr */
.csched-rail-head { display: flex; align-items: center; gap: 6px; padding: 9px 11px; border-bottom: 1px solid var(--border-faint); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.csched-rail-head svg { width: 15px; height: 15px; color: var(--text-soft); }
.csched-rail-count { margin-left: auto; font-size: var(--text-xs); color: var(--text-soft); background: var(--gray-100); padding: 1px 7px; border-radius: 999px; }
.csched-rail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.csched-rail-empty { font-size: var(--text-xs); color: var(--text-soft); text-align: center; padding: var(--space-4) 0; }
.csched-rail-card { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.csched-rail-card:hover { border-color: var(--border); box-shadow: var(--shadow-xs); }
.csched-rail-card.is-declined { border-color: color-mix(in srgb, var(--danger-600) 42%, var(--border-faint)); }
.csched-rail-thumb { width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--radius-sm); overflow: hidden; background: var(--gray-100); display: inline-flex; align-items: center; justify-content: center; color: var(--text-soft); }
.csched-rail-thumb img, .csched-rail-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.csched-rail-thumb svg { width: 16px; height: 16px; }
.csched-rail-cap { flex: 1; min-width: 0; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.csched-rail-flag { display: inline; margin-right: 4px; color: var(--danger-600); font-weight: var(--fw-semibold); }
.csched-rail-del { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border: 0; border-radius: 999px; background: transparent; color: var(--text-soft); cursor: pointer; opacity: 0; display: inline-flex; align-items: center; justify-content: center; transition: opacity var(--dur-fast) var(--ease); }
.csched-rail-card:hover .csched-rail-del, .csched-rail-del:focus-visible { opacity: 1; }
.csched-rail-del:hover { color: var(--danger-600); background: var(--gray-100); }
.csched-rail-del svg { width: 11px; height: 11px; }
/* month */
/* fill the scroller like the week grid (min-height so a 6-row month on a short
   viewport can still grow past it and scroll instead of crushing the 98px rows) */
.csched-grid--month { display: flex; flex-direction: column; min-height: 100%; }
.csched-mhead-row { display: grid; grid-template-columns: repeat(7, 1fr); flex-shrink: 0; }
.csched-mhead { padding: 4px 8px; font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); }
.csched-mcells { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(98px, 1fr); gap: 1px; background: var(--border-faint); border: 1px solid var(--border-faint); border-radius: var(--radius-md); overflow: hidden; }
.csched-mcell { background: var(--surface); padding: 5px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.csched-mcell.is-out { background: var(--gray-25); }
.csched-mcell.is-today { background: color-mix(in srgb, var(--primary-600) 8%, var(--surface)); }
.csched-mcell-head { display: flex; align-items: center; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.csched-mcell.is-out .csched-mcell-head { color: var(--text-soft); }
/* month entries — Meta's chip anatomy: type icon + BOLD time leading, the
   platform badge pinned right, tinted by state (mint = going out / out,
   amber = awaiting approval, red = needs attention) */
.csched-chip { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--success-600, #18a558) 10%, var(--surface)); cursor: pointer; font-size: var(--text-xs); color: var(--text-strong); width: 100%; text-align: left; transition: filter var(--dur-fast) var(--ease); }
.csched-chip:hover { filter: brightness(0.97); }
.csched-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.csched-chip-ic { display: inline-flex; color: color-mix(in srgb, var(--success-600, #18a558) 75%, var(--text)); }
.csched-chip-t { flex-shrink: 0; font-weight: var(--fw-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.csched-chip-cap { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.csched-chip-plat { display: inline-flex; flex-shrink: 0; margin-left: auto; }
.csched-chip.status-publishing { background: color-mix(in srgb, var(--primary-500) 12%, var(--surface)); }
.csched-chip.status-publishing .csched-chip-ic { color: var(--primary-600); }
.csched-chip.status-pending_approval { background: color-mix(in srgb, var(--warning-600, #b45309) 12%, var(--surface)); }
.csched-chip.status-pending_approval .csched-chip-ic { color: var(--warning-600, #b45309); }
.csched-chip.status-failed, .csched-chip.status-partially_published { background: color-mix(in srgb, var(--danger-600) 10%, var(--surface)); }
.csched-chip.status-failed .csched-chip-ic, .csched-chip.status-partially_published .csched-chip-ic { color: var(--danger-600); }
.csched-chip.status-draft { background: var(--gray-100); }
.csched-chip.status-draft .csched-chip-ic { color: var(--text-soft); }
.csched-chip.is-declined { background: color-mix(in srgb, var(--danger-600) 10%, var(--surface)); }
.csched-mmore { font-size: 10px; color: var(--text-soft); padding-left: 2px; border: 0; background: none; cursor: pointer; text-align: left; font-weight: var(--fw-medium); align-self: flex-start; }
.csched-mmore:hover { color: var(--text); text-decoration: underline; }

/* ---- Bulk schedule (bsch) — the drop-N-files grid ---- */
/* wider than modal-xl — the grid wants 3 media tiles per line, Meta-style */
.modal-shell[aria-label="Bulk schedule"] { width: min(1120px, calc(100vw - 32px)); }
.modal-shell[aria-label="Bulk schedule"] .modal-body { display: flex; flex-direction: column; min-height: 0; }
.bsch { display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; }
.bsch-drop { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border: 1.5px dashed var(--border); border-radius: var(--radius-lg); color: var(--text-muted); font-size: var(--text-sm); background: var(--gray-25); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.bsch-drop svg { width: 17px; height: 17px; color: var(--text-soft); }
.bsch-drop strong { color: var(--text); font-weight: var(--fw-semibold); }
.bsch-drop.is-dropover { border-color: var(--primary-400); background: var(--primary-50); }
.bsch-rows { display: flex; flex-direction: column; gap: var(--space-3); overflow-y: auto; min-height: 0; max-height: 52vh; padding: 2px; }
/* columns centre against the tallest one, so a multi-line media grid keeps
   the caption + scheduling block vertically centred beside it */
.bsch-row { position: relative; display: grid; grid-template-columns: 22px 272px 1fr 208px; gap: var(--space-3); align-items: center; padding: 10px; border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--surface); }
.bsch-num { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-soft); text-align: center; font-variant-numeric: tabular-nums; }
/* reels: one video per row, no add tile — the freed width goes to the description */
.bsch--reels .bsch-row { grid-template-columns: 22px 100px 1fr 208px; }
.bsch-tiles { display: flex; flex-wrap: wrap; gap: 5px; }
.bsch-media.is-dropover .bsch-tiles { outline: 2px solid var(--primary-400); outline-offset: 2px; border-radius: var(--radius-sm); }
.bsch-tile { position: relative; width: 86px; height: 86px; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-100); }
.bsch-tile img, .bsch-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsch-tile.is-uploading img, .bsch-tile.is-uploading video { opacity: .4; }
.bsch-tile.is-error { outline: 2px solid var(--danger-600); outline-offset: -2px; }
/* Meta's add tile: dashed square, the + sitting on a soft circular disc */
.bsch-tile--add { border: 1.5px dashed var(--border); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text); overflow: visible; }
.bsch-tile--add svg { width: 16px; height: 16px; padding: 12px; box-sizing: content-box; border-radius: 50%; background: var(--gray-100); transition: background var(--dur-fast) var(--ease); }
.bsch-tile--add:hover { border-color: var(--primary-400); }
.bsch-tile--add:hover svg { background: var(--gray-200); }
.bsch-tile-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 999px; background: rgba(20,20,24,.6); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.bsch-tile:hover .bsch-tile-x { opacity: 1; }
.bsch-tile-x:hover { background: var(--danger-600); }
.bsch-tile-x svg { width: 12px; height: 12px; }
.bsch-tile-e { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border: 0; border-radius: 999px; background: rgba(20,20,24,.6); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.bsch-tile:hover .bsch-tile-e { opacity: 1; }
.bsch-tile-e:hover { background: rgba(20,20,24,.85); }
.bsch-tile-e svg { width: 12px; height: 12px; }
.bsch-tile[draggable="true"] { cursor: grab; }
.bsch-tile.dragging { opacity: .5; }
.bsch-tile-spin { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border: 2px solid rgba(120,120,130,.4); border-top-color: var(--text); border-radius: 50%; animation: spin .7s linear infinite; }
.bsch-cap { resize: none; min-height: 76px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-strong); background: var(--surface); }
.bsch-cap:focus { outline: none; border-color: var(--primary-400); }
.bsch-side { display: flex; flex-direction: column; gap: 6px; }
.bsch-side-row { display: flex; align-items: center; gap: 6px; }
.bsch-side-row { justify-content: space-between; }
.bsch-plats { display: inline-flex; gap: 4px; }
.bsch-plat { width: 26px; height: 26px; border: 1.5px solid transparent; border-radius: 999px; padding: 2px; background: transparent; cursor: pointer; opacity: .35; display: inline-flex; }
.bsch-plat svg { width: 100%; height: 100%; }
.bsch-plat.sel { opacity: 1; border-color: var(--primary-400); }
/* when button + its popover (the house date-time picker replaces the native
   datetime-local sheet; 1200 = the emoji-pop "over a modal" layer) */
.bsch-when { justify-content: flex-start; min-width: 0; max-width: 100%; }
.bsch-when svg { width: 13px; height: 13px; flex-shrink: 0; }
.bsch-when > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsch-when.is-draft > span { color: var(--text-soft); }
.bsch-when-pop { position: fixed; z-index: 1200; width: 264px; padding: 8px; }
.bsch-when-pop .cal-area--date, .bsch-when-pop .cal-area { min-height: 0; }
.bsch-when-draft { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 8px 10px; border: 0; border-top: 1px solid var(--border-faint); background: transparent; color: var(--text); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; text-align: left; }
.bsch-when-draft:hover { background: var(--gray-50); }
.bsch-when-draft svg { width: 14px; height: 14px; color: var(--text-soft); }
.bsch-err { display: flex; gap: 5px; align-items: flex-start; font-size: var(--text-xs); line-height: 1.3; color: var(--danger-600); }
.bsch-err svg { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 1px; }
.bsch-del { width: 26px; height: 26px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bsch-del:hover { color: var(--danger-600); background: var(--gray-100); }
.bsch-del svg { width: 14px; height: 14px; }
.bsch-row-veil { position: absolute; inset: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 65%, transparent); display: flex; align-items: center; justify-content: center; }
.bsch-foot { display: flex; align-items: center; gap: var(--space-3); width: 100%; }
.bsch-foot .spacer { flex: 1; }
.bsch-sum { font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bsch-save { position: relative; }
.bsch-save .compose-save-pop { bottom: calc(100% + 6px); top: auto; right: 0; left: auto; }
@media (max-width: 760px) {
  .bsch-row { grid-template-columns: 22px 1fr; }
  .bsch-media, .bsch-cap, .bsch-side { grid-column: 2; }
  .bsch-num { align-self: start; padding-top: 4px; }
}

/* ---- Post details (pdet) — the read-only modal for published rows ---- */
.pdet { display: flex; flex-direction: column; gap: var(--space-4); }
.pdet-media { display: flex; flex-direction: column; gap: 8px; }
.pdet-main { border-radius: var(--radius-md); overflow: hidden; background: var(--gray-100); display: flex; align-items: center; justify-content: center; }
.pdet-main img, .pdet-main video { max-width: 100%; max-height: 320px; object-fit: contain; display: block; }
.pdet-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.pdet-thumb { width: 52px; height: 52px; flex: 0 0 auto; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--gray-100); cursor: pointer; }
.pdet-thumb.active { border-color: var(--primary-500); }
.pdet-thumb img, .pdet-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdet-cap { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-strong); white-space: pre-wrap; }
.pdet-cap--none { color: var(--text-soft); font-style: italic; }
.pdet-rows { display: flex; flex-direction: column; gap: 6px; }
.pdet-row { display: flex; align-items: baseline; gap: 10px; font-size: var(--text-sm); }
.pdet-k { flex: 0 0 84px; color: var(--text-soft); font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .03em; }
.pdet-v { color: var(--text-strong); }
.pdet-fmt { display: inline-flex; align-items: center; gap: 6px; }
.pdet-fmt svg { width: 14px; height: 14px; color: var(--text-muted); }
.pdet-status.status-published { color: var(--success-600, #18a558); font-weight: var(--fw-semibold); }
.pdet-status.status-publishing { color: var(--primary-600); font-weight: var(--fw-semibold); }
.pdet-status.status-failed, .pdet-status.status-partially_published { color: var(--danger-600); font-weight: var(--fw-semibold); }
.pdet-results { display: flex; flex-direction: column; gap: 6px; }
.pdet-results:empty { display: none; }
.pdet-result { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border-faint); border-radius: var(--radius-md); background: var(--gray-25); font-size: var(--text-sm); color: var(--text); }
.pdet-result svg { width: 15px; height: 15px; flex: 0 0 auto; }
.pdet-result > span { flex: 1; min-width: 0; }
.pdet-result.is-ok { border-color: color-mix(in srgb, var(--success-600, #18a558) 30%, var(--border-faint)); }
.pdet-result.is-bad { border-color: color-mix(in srgb, var(--danger-600) 35%, var(--border-faint)); color: var(--danger-600); }
.pdet-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--primary-600); text-decoration: none; white-space: nowrap; }
.pdet-link:hover { text-decoration: underline; }
.pdet-link svg { width: 12px; height: 12px; }
.pdet-err { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--danger-600) 35%, var(--border-faint)); background: color-mix(in srgb, var(--danger-600) 6%, var(--surface)); color: var(--danger-600); font-size: var(--text-sm); }
/* status / schedule / format as chips — matches the Scheduled-content list */
.pdet-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pdet-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-faint); background: var(--surface-2, var(--surface)); color: var(--text-strong); font-size: var(--text-xs); font-weight: var(--fw-semibold); white-space: nowrap; }
.pdet-chip svg { width: 14px; height: 14px; color: var(--text-muted); }
.pdet-chip--ok { border-color: transparent; background: color-mix(in srgb, var(--success-600, #16a34a) 12%, var(--surface)); color: var(--success-700, #15803d); }
.pdet-chip--warn { border-color: transparent; background: color-mix(in srgb, #b45309 12%, var(--surface)); color: #b45309; }
.pdet-chip--bad { border-color: transparent; background: color-mix(in srgb, var(--danger-600) 10%, var(--surface)); color: var(--danger-600); }
.pdet-chip--idle { border-color: transparent; background: var(--gray-100, var(--surface-2)); color: var(--text-muted); }
.pdet-head { gap: 10px; }
.pdet-head .modal-title { flex: 0 0 auto; }
.pdet-chip--title { padding: 3px 10px; font-size: var(--text-2xs); margin-right: auto; }

/* the feed-preview card centred in the modal (portal approve-sheet twin) */
.pdet-feedwrap { width: 100%; }
.pdet-feedwrap .pv-card { width: 100%; }
/* reel/story: the 9:16 frame centred, tap-to-play (no native controls, which
   would sit over the reel chrome) */
.pdet-feedwrap .pv-vert { margin: 0 auto; width: min(268px, 100%); }
.pdet-reel { cursor: pointer; }
.pdet-reel-play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; color: #fff; pointer-events: none; opacity: .95; transition: opacity .18s var(--ease); filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); }
.pdet-reel-play svg { width: 44px; height: 44px; }
.pdet-reel.is-playing .pdet-reel-play { opacity: 0; }

/* decline note — a message reply: pfp centred on the name line, bubble below */
.pdet-note { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.pdet-note-top { display: flex; align-items: center; gap: 10px; }
.pdet-note-av { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; }
.pdet-note-avimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdet-note-avfall { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--primary-500, #4a6cf7); color: #fff; font-size: var(--text-sm); font-weight: var(--fw-bold); }
.pdet-note-bubble { margin-left: 42px; }
.pdet-note-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-xs); }
.pdet-note-head b { color: var(--text-strong); font-weight: var(--fw-semibold); font-size: var(--text-sm); }
.pdet-note-badge { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--danger-600) 10%, var(--surface)); color: var(--danger-600); font-size: var(--text-2xs); font-weight: var(--fw-semibold); }
.pdet-note-badge.is-ok { background: color-mix(in srgb, var(--success-600, #16a34a) 12%, var(--surface)); color: var(--success-700, #15803d); }
.pdet-note-round { font-size: var(--text-2xs); color: var(--text-soft); }
.pdet + .pdet-note, .pdet-note + .pdet-note { margin-top: 2px; }
.pdet-note-when { color: var(--text-soft); }
.pdet-note-bubble { display: inline-block; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: var(--gray-100, var(--surface-2)); color: var(--text-strong); font-size: var(--text-sm); line-height: 1.55; }
.pdet-note-bubble--none { color: var(--text-soft); font-style: italic; }
.pdet-err svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }

/* ---- portal post approvals (papr) — the client-side review flow ----
   Ships to BOTH shells (Client App.html loads this file); admin never renders
   these nodes. Mobile: the review modal is sheet:true, so ≤640px it's already
   a drag-dismissible bottom sheet. */
/* lives as the FIRST child of .dash (flex column, gap: --space-4) — no own
   margins: the container's padding gives the page gutters, its gap the spacing */
/* "Content waiting to post" — a slim full-width strip: overlapping previews
   of the waiting media, one line of copy, Review pinned right */
/* "Content waiting to post" — hero widget: the brand content collage runs
   edge to edge behind it (rotated a touch so the tilted cards read as one
   piece with the widget), fading under the text side; headline + next-slot
   pill left, Pending pill + Review → right */
.papr-banner { position: relative; display: flex; align-items: center; gap: 24px; margin: 0; padding: 26px 24px; border: 1px solid var(--border-faint); border-radius: 16px; background: var(--surface); overflow: hidden; min-height: 132px; }
.papr-banner::before { content: ""; position: absolute; inset: -20% -3%; background: url("/assets/portal-approvals-bg.jpg") right center / 58% auto no-repeat; transform: rotate(8deg); }
.papr-banner::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(225deg, rgba(14, 18, 32, .30), rgba(14, 18, 32, .12) 22%, transparent 42%),
  radial-gradient(130% 170% at 0% 55%, color-mix(in srgb, var(--primary-500) 13%, transparent), transparent 52%),
  linear-gradient(90deg, var(--surface) 30%, color-mix(in srgb, var(--surface) 72%, transparent) 55%, color-mix(in srgb, var(--surface) 25%, transparent) 78%, transparent); }
.papr-banner > * { position: relative; z-index: 1; }
.papr-banner-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; flex: 1; }
.papr-banner-head { display: flex; align-items: center; gap: 9px; }
.papr-banner-head strong { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
.papr-banner-txt > span { font-size: var(--text-sm); color: var(--text-muted); }
.papr-banner-when { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-faint); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); font-size: 11px; font-weight: var(--fw-semibold); color: var(--text) !important; white-space: nowrap; }
.papr-banner-when svg { width: 13px; height: 13px; border-radius: 50%; animation: paprPulse 2.2s ease-out infinite; }
@keyframes paprPulse {
  0% { box-shadow: 0 0 0 0 rgba(208, 56, 39, .35); }
  60% { box-shadow: 0 0 0 6px rgba(208, 56, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(208, 56, 39, 0); }
}
/* Pending-approvals nav indicators — sidebar Dashboard row (right-aligned,
   like the Tasks due-count) + the mobile bottom-nav Home tab (pinned to the
   icon corner, .bn-badge style). Painted by portalApprovals.updateApprovalsNav. */
.nav-item .nav-pend { margin-left: auto; display: inline-flex; }
.nav-item .nav-pend[hidden], .app.collapsed .nav-item .nav-pend { display: none; }
.nav-item .nav-pend svg { width: 13px; height: 13px; border-radius: 50%; animation: paprPulse 2.2s ease-out infinite; }
.bottom-nav-item .bn-alert { position: absolute; top: 3px; left: calc(50% + 6px); width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.bottom-nav-item .bn-alert svg { width: 14px; height: 14px; display: block; border-radius: 50%; animation: paprPulse 2.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .papr-banner-when svg, .nav-item .nav-pend svg, .bottom-nav-item .bn-alert svg { animation: none; } }
.papr-banner-row { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.papr-banner-cta { flex: 0 0 auto; gap: 7px; padding: 9px 17px; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.papr-banner-cta svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .papr-banner { gap: 12px; padding: 16px; min-height: 0; }
  .papr-banner::before { inset: -30%; background-size: 70% auto; transform: rotate(13deg); }
  .papr-banner-head { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
}
.papr-pop { text-align: center; padding: 10px 4px 2px; }
/* bell in its soft disc with the pulsing red ! riding the corner — the same
   mark the nav/dashboard indicators use */
.papr-pop-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--primary-50); color: var(--primary-600); margin-bottom: 14px; }
.papr-pop-ico > svg { width: 24px; height: 24px; }
.papr-pop-ico--late { background: color-mix(in srgb, var(--danger-600) 9%, var(--surface)); color: var(--danger-600); }
.papr-pop-mark { position: absolute; top: -2px; right: -2px; display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--surface); }
.papr-pop-mark svg { width: 19px; height: 19px; border-radius: 50%; animation: paprPulse 2.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .papr-pop-mark svg { animation: none; } }
/* actions stack and centre: primary first, Later as a quiet second */
.papr-pop-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
.papr-pop-cta { justify-content: center; padding: 11px 18px; border-radius: 12px; font-weight: var(--fw-semibold); }
.papr-pop-later { justify-content: center; color: var(--text-muted); }
.papr-pop h3 { margin: 0 0 6px; font-size: var(--text-base); color: var(--text-strong); }
.papr-pop p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.papr-review { display: flex; flex-direction: column; gap: 10px; }

/* Card-deck page turn: the old and new cards ride one conveyor — the leaver
   slides out while the next slides in, both in the same 340ms ease-out, and
   the stage's height glides between the two cards' sizes (no snap). Approve
   lifts the old card away upward; Decline drops it. The modal body's
   overflow-x:hidden is the clip that makes off-stage cards invisible. */
.papr-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 5000; }
.papr-stage { position: relative; transition: height .34s cubic-bezier(.22, .61, .36, 1); }
.papr-page { display: flex; flex-direction: column; gap: 10px; transform-origin: 50% 80%; transition: transform .34s cubic-bezier(.22, .61, .36, 1), opacity .34s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.papr-abs { position: absolute; left: 0; right: 0; top: 0; }
.papr-leaving { z-index: 2; }             /* the card being dealt away rides on top */
.papr-enter-l { transform: translateX(calc(-100% - 28px)) rotate(-3deg); }
/* forward: the next card was the one peeking behind — it promotes up out of
   the stack rather than sliding in from nowhere */
.papr-enter-stack { transform: translateY(-14px) scale(.94); opacity: .55; }

/* the deck: ghost cards peek out behind the live one, stacked slightly ABOVE
   it so the pile reads under the sheet header on every size */
/* the top margin is the stack's breathing room — without it the ghosts sit
   under the sheet header and read as a clipped line */
.papr-deck { position: relative; width: min(400px, 100%); margin-top: 30px; }
.papr-deck:has(.papr-reel) { width: min(300px, 100%); }   /* reels frame is narrower */
.papr-deck .papr-feed, .papr-deck .papr-reel { position: relative; z-index: 1; }
.papr-ghost {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 -3px 12px rgba(0, 0, 0, .08);
  transform: translateY(calc(var(--i) * -13px)) scale(calc(1 - var(--i) * .055));
  transform-origin: 50% 0;
  opacity: calc(1 - var(--i) * .25);
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), opacity .34s var(--ease);
}
.papr-fly-l { transform: translateX(calc(-100% - 28px)) rotate(-3deg); }
.papr-fly-r { transform: translateX(calc(100% + 28px)) rotate(3deg); }
.papr-fly-up { transform: translateY(-40%) rotate(3deg); opacity: 0; }
.papr-fly-down { transform: translateY(28%) rotate(-2deg); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .papr-stage, .papr-page { transition: none; } }
/* the feed-chrome preview card in the review sheet */
.papr-feed-wrap { display: flex; justify-content: center; }
.papr-feed { width: min(400px, 100%); }
/* reels review in the real reels-viewer frame: 9:16 canvas (pv-vert), rail +
   identity + caption overlaid. The video fills the frame (object-fit: cover,
   inherited from .pv-vert-media) exactly as the composer preview and the real
   viewer do — an off-ratio upload is centre-cropped, never letterboxed. */
.papr-feed-wrap .papr-reel { width: min(300px, 100%); }
.papr-reel .pv-vert-media { cursor: pointer; }
.papr-reel-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; pointer-events: none; opacity: .95; transition: opacity .18s var(--ease); }
.papr-reel-play svg { width: 46px; height: 46px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); }
.papr-reel.is-playing .papr-reel-play { opacity: 0; }
.papr-reel .pv-reel-cap .pv-cap-ph { color: rgba(255, 255, 255, .75); }
.papr-feed img, .papr-feed video { width: 100%; display: block; }
.papr-feed video { max-height: 52vh; background: #000; }
.papr-feed .pv-car-dots { padding-bottom: 8px; }
.papr-av-fallback { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--primary-100, #dbe5ff); color: var(--primary-700, #3450b2); font-size: var(--text-sm); font-weight: var(--fw-bold); }
/* decline popup: no header at all — the note box is the whole body, and Back
   (beside Send Note) is the way out */
.papr-decline-modal .confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* "Sent" confirmation: the plane lifts off, a ring pulses out behind it */
.papr-sent { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 0 6px; }
.papr-sent-badge {
  position: relative; z-index: 1; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--primary-500, #4a6cf7); color: #fff;
  animation: paprSentPop .42s cubic-bezier(.2, .9, .3, 1.2) both;
}
.papr-sent-badge svg { width: 22px; height: 22px; margin: 1px 2px 0 0; animation: paprSentFly .5s .1s cubic-bezier(.2, .8, .3, 1) both; }
.papr-sent-ring {
  position: absolute; top: 18px; width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--primary-500, #4a6cf7);
  animation: paprSentRing .85s .22s cubic-bezier(.2, .7, .3, 1) both;
}
.papr-sent b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); animation: paprSentText .3s .22s var(--ease) both; }
@keyframes paprSentPop { 0% { transform: scale(.55); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes paprSentFly { 0% { transform: translate(-7px, 7px) rotate(-12deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes paprSentRing { 0% { transform: scale(.85); opacity: .45; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes paprSentText { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .papr-sent-badge, .papr-sent-badge svg, .papr-sent b { animation: none; }
  .papr-sent-ring { display: none; }
}

/* media skeleton — shimmers in the media's own frame until the image/video
   decodes, then fades it in. Reuses the app-wide skel-shimmer keyframes so
   the motion matches every other loading state. */
.pv-skel { position: relative; background: var(--gray-200); overflow: hidden; }
.pv-skel::after {
  content: ""; position: absolute; inset: 0; z-index: 1; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: skel-shimmer 1.5s ease-in-out infinite;
}
html[data-theme="dark"] .pv-skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }
.pv-skel > img, .pv-skel > video { opacity: 0; transition: opacity .28s var(--ease); }
.pv-skel.is-loaded::after { content: none; }
.pv-skel.is-loaded > img, .pv-skel.is-loaded > video { opacity: 1; }
/* a media box with no intrinsic size yet still needs a frame to shimmer in */
.pv-vidbox { position: relative; min-height: 200px; }
.pv-grid-1.pv-skel:not([style*="aspect-ratio"]) { min-height: 220px; }
@media (prefers-reduced-motion: reduce) { .pv-skel::after { animation: none; } }

/* approve-confirm: what you're approving (cover + opening line), then when */
.papr-confirm { display: flex; flex-direction: column; gap: 10px; }
.papr-confirm-post { display: flex; align-items: center; gap: 10px; min-width: 0; }
.papr-confirm-thumb { position: relative; width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-200); }
.papr-confirm-thumb img, .papr-confirm-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.papr-confirm-thumb.is-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--text-soft); }
.papr-confirm-thumb.is-empty svg { width: 16px; height: 16px; }
.papr-confirm-n { position: absolute; right: 3px; top: 3px; min-width: 15px; height: 15px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 9px; font-weight: var(--fw-semibold); }
.papr-confirm-cap { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.papr-confirm-when { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-md); background: var(--primary-50, var(--surface-2)); }
.papr-confirm-when.is-late { background: color-mix(in srgb, #b45309 10%, var(--surface)); }
.papr-confirm-ico { display: inline-flex; flex: 0 0 auto; color: var(--primary-600, #4a6cf7); }
.papr-confirm-when.is-late .papr-confirm-ico { color: #b45309; }
.papr-confirm-ico svg { width: 18px; height: 18px; }
.papr-confirm-when b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.confirm-actions .btn svg { width: 15px; height: 15px; }

/* carousel thumbnail strip — tap to view, drag to re-arrange */
.papr-thumbs { display: flex; justify-content: center; gap: 6px; padding: 2px; overflow-x: auto; touch-action: none; }
.papr-thumb { position: relative; flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border: 2px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); cursor: grab; transition: transform .16s var(--ease), border-color .14s var(--ease); }
.papr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.papr-thumb.on { border-color: var(--primary-400); }
.papr-thumb.dragging { transition: border-color .14s var(--ease); z-index: 3; box-shadow: var(--shadow-md); cursor: grabbing; }
.papr-thumbs.is-dragging .papr-thumb:not(.dragging) { pointer-events: none; }
.papr-thumbs-hint { text-align: center; font-size: var(--text-2xs); color: var(--text-soft); margin-top: -4px; }
/* caption editor: one card — header strip (label + counter) over a seamless
   textarea, with the focus ring on the whole box rather than the field */
.papr-capbox { border: 1px solid var(--border-faint); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.papr-capbox:focus-within { border-color: var(--primary-400); box-shadow: 0 0 0 3px var(--primary-50); }
.papr-capbox-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; background: var(--surface-2, var(--gray-50)); border-bottom: 1px solid var(--border-faint); }
.papr-capbox-head label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); letter-spacing: .01em; cursor: text; }
.papr-capbox-head label svg { width: 13px; height: 13px; }
.papr-count { font-size: var(--text-2xs); font-weight: var(--fw-regular); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.papr-count.over { color: var(--danger-600); font-weight: var(--fw-semibold); }
.papr-caption { display: block; width: 100%; resize: vertical; min-height: 96px; padding: 12px; border: 0; border-radius: 0; background: transparent; color: var(--text-strong); font: inherit; font-size: var(--text-sm); line-height: 1.6; }
.papr-caption:focus { outline: none; }
/* the decline popup reuses .papr-caption on its own — keep it framed there */
.papr-decline-modal .papr-caption { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.papr-decline-modal .papr-caption:focus { border-color: var(--primary-400); box-shadow: 0 0 0 3px var(--primary-50); }
.papr-note { display: flex; flex-direction: column; gap: 6px; }
.papr-note label { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.papr-foot { display: flex; align-items: center; gap: 8px; width: 100%; }
.papr-foot .spacer { flex: 1; }

/* ---- scheduling calendar on phones ---- */
@media (max-width: 640px) {
  /* stack: controls row, then ‹ period › full-width, then filters —
     nothing truncates */
  .csched-cal-bar { display: flex; flex-wrap: wrap; row-gap: var(--space-2); }
  .csched-bar-left { flex: 1 1 auto; justify-content: space-between; }
  .csched-title-nav { flex: 1 0 100%; order: 3; justify-content: center; }
  .csched-bar-right { flex: 1 0 100%; order: 4; justify-content: center; }
  /* week columns: swipe with snap, one clean column edge at a time */
  .csched-grid--week { scroll-snap-type: x proximity; }
  .csched-grid--week .csched-day { scroll-snap-align: start; }
  /* month cells are ~48px wide here — a caption truncates to one letter, so
     chips reduce to their platform badge (tap opens the post regardless) */
  .csched-chip span { display: none; }
  .csched-chip { justify-content: center; padding: 3px 0; }
}
/* touch devices have no hover — the per-day compose "+" was permanently
   invisible on phones/tablets. Always show it there. */
@media (hover: none) {
  .csched-day-add { opacity: 1; }
}