/* ══════════════════════════════════════════════════════════════
   Kanban Board Layout — portal workflow board view
   SCOPE: Portal (loaded on kanban board pages via admin shell).
   Uses --bk-admin accent inherited from Django admin context.
   Consumes --bk-* tokens from design_tokens.css.
   ══════════════════════════════════════════════════════════════ */
/* Page scrolls vertically — no height lock */
.kb-page { display: flex; flex-direction: column; }

.kb-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--bk-grey-300);
    background: var(--bk-card);
}
.kb-header-left { display: flex; flex-direction: column; gap: 4px; }
.kb-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--bk-admin-hover); }
.kb-meta { display: flex; gap: 8px; }
.kb-stat { font-size: .75rem; padding: 2px 8px; border-radius: 10px; background: var(--bk-grey-200); color: var(--bk-grey-800); }
.kb-stat-warn { background: var(--bk-status-rejected-bg); color: var(--bk-status-rejected-fg); }
.kb-btn {
    display: inline-block; padding: 6px 14px; border-radius: 4px; font-size: .8rem;
    border: 1px solid var(--bk-grey-400); background: var(--bk-card); color: var(--bk-grey-900); text-decoration: none;
}
.kb-btn:hover { background: var(--bk-grey-100); }
.kb-btn-primary { background: var(--bk-admin); color: var(--bk-card) !important; border-color: var(--bk-admin); cursor: pointer; }
.kb-btn-primary:hover { background: var(--bk-admin-hover); }

/* ── Board — horizontal scroll of instance columns ── */
.kb-board {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 12px 16px;
    overflow-x: auto;
    align-items: flex-start;
    min-height: 200px;
}
.kb-board-empty {
    font-size: .85rem; color: var(--bk-grey-400); font-style: italic;
    padding: 32px; text-align: center; width: 100%;
}

/* ── Instance column ── */
.kb-instance-col {
    display: flex; flex-direction: column;
    min-width: 280px; max-width: 320px; flex-shrink: 0;
}

/* ── Instance header ── */
.kb-inst-header {
    background: var(--board-color, #1a1a2e); color: #fff;
    border-radius: 8px 8px 0 0; padding: 10px 12px;
    cursor: pointer; transition: filter .15s;
}
.kb-inst-header:hover { filter: brightness(1.25); }
.kb-inst-header-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kb-inst-title { font-size: .88rem; font-weight: 700; color: var(--bk-card); flex: 1; min-width: 0; }
.kb-inst-meta {
    font-size: .65rem; color: var(--bk-grey-400); margin-top: 5px;
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.kb-inst-action-btn {
    background: none; border: none; cursor: pointer; color: var(--bk-status-in_progress-fg);
    font-size: .72rem; padding: 2px 4px; border-radius: 3px;
    transition: background .12s; line-height: 1;
}
.kb-inst-action-btn:hover { background: rgba(255,255,255,.1); }

/* ── Step rows ── */
.kb-step-row {
    position: relative; background: var(--bk-card);
    border: 1px solid #e8e8e8; border-top: none;
    cursor: pointer; overflow: hidden;
    transition: background .12s;
}
.kb-step-row:last-child { border-radius: 0 0 8px 8px; }
.kb-step-row:hover { background: var(--bk-grey-100); }
.kb-step-row-body { padding: 8px 10px; }
.kb-step-row-top {
    display: flex; align-items: center;
    justify-content: space-between; gap: 4px; margin-bottom: 4px;
}
.kb-step-row-name { font-size: .8rem; font-weight: 600; color: var(--bk-grey-900); flex: 1; min-width: 0; }
.kb-step-row-meta {
    display: flex; align-items: center; gap: 4px;
    flex-wrap: wrap; margin-bottom: 4px;
}
.kb-step-row-footer { display: flex; align-items: center; gap: 3px; margin-top: 5px; }

/* Active step — highlighted blue */
.kb-step-active { background: color-mix(in srgb, var(--board-color, #1a73a7) 10%, white); border-color: color-mix(in srgb, var(--board-color, #1a73a7) 30%, white); }
.kb-step-active .kb-step-row-name { color: var(--board-color, #205067); }

/* Completed step — muted green tint */
.kb-step-done { background: #f9fdf9; }
.kb-step-done .kb-step-row-name { color: var(--bk-grey-600); }

/* Pending step — grey */
.kb-step-pending .kb-step-row-name { color: var(--bk-grey-500); }

/* ── Advance button (inside step row footer) ── */
.kb-advance-btn {
    margin-left: auto; padding: 4px 10px; border: none; border-radius: 4px;
    background: var(--bk-admin); color: var(--bk-card); font-size: .72rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; transition: background .15s;
}
.kb-advance-btn:hover { background: var(--bk-admin-hover); }

/* ── Step popup modal ── */
.kb-step-popup {
    max-width: 400px; max-height: 90vh; overflow: visible;
    width: 92vw;
    display: flex; flex-direction: column;
}
#kb-sp-content {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0; overflow: hidden;
    border-radius: inherit;
}
/* Horizontal resize handle on right edge */
.kb-step-popup .psc-resize-h {
    position: absolute; right: -6px; top: 0; bottom: 0; width: 14px;
    cursor: ew-resize; z-index: 5;
}
.kb-step-popup .psc-resize-h::after {
    content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 4px; height: 40px; border-radius: 2px;
    background: rgba(0,0,0,0.15); transition: background 0.15s;
}
.kb-step-popup .psc-resize-h:hover::after,
.kb-step-popup .psc-resize-h:active::after { background: rgba(0,0,0,0.4); width: 5px; }

/* ── Width tiers — moved here from kanban.html inline <style> so every shell
   (kanban + portal x4 + admin) widens the same way; previously only kanban
   could render wide variants.

   Two tiers:
   • .kb-step-popup-wide  → 720px form-shaped widgets (Header sheet, model form,
                            wizard step, style picker — multi-column forms that
                            need to fit on one row but not the full viewport).
   • .kb-step-popup-erp   → 1280px tabular widgets (erp_changelist — actual data
                            tables that need horizontal real estate).
   The previous 1400px / .kb-step-popup-erp was applied indiscriminately to all
   po_/erp_/form_ types and read as "very large width" on form-shaped widgets.
   Splitting fixes both the cramped-form-on-portal bug AND the too-wide-on-kanban
   bug in one pass. */
.kb-step-popup.kb-step-popup-wide {
    width: 720px !important;
    max-width: 90vw !important;
}
/* Auto-wide for engagement.picker — the atom's dense grid + toolbar
   (search + 3 outline buttons + slim pill tab row) doesn't fit in the
   400px default. Uses `:has()` so no popup-open JS needs to know the
   step_type; pure CSS handles widget-driven width. Supported in Chrome
   105+ / Safari 15.4+ / Firefox 121+. Matches the 720px .wide tier
   used by form-shaped widgets — same reasoning: multi-column widgets
   need one screen line to breathe, but not the full viewport. */
.kb-step-popup:has(.pk-card) {
    width: 720px !important;
    max-width: 90vw !important;
}
.kb-step-popup.kb-step-popup-erp {
    width: 92vw !important; max-width: 1280px !important;
    height: 88vh !important; max-height: 88vh !important;
    top: 6vh !important; left: 50% !important;
    transform: translateX(-50%) !important;
}
.kb-step-popup.kb-step-popup-erp > [data-psc-content],
.kb-step-popup-erp #kb-sp-content {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden;
}

/* ── Card ── */
.kb-card {
    background: var(--bk-card); border-radius: 6px; border: 1px solid var(--bk-grey-300);
    padding: 0; cursor: pointer; transition: box-shadow .15s, transform .1s;
    position: relative; overflow: hidden; display: flex; flex-direction: column;
}
.kb-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); transform: translateY(-1px); }
.kb-card-ghost { opacity: .4; }
.kb-card-dragging { box-shadow: 0 6px 20px rgba(0,0,0,.2); transform: rotate(1.5deg); }

/* Card inner padding wrapper — applied to all content rows */
.kb-card-title,
.kb-card-thumbs,
.kb-card-assignees,
.kb-card-due-row,
.kb-card-icons {
    padding: 0 10px;
}
.kb-card-title { padding-top: 8px; }
.kb-card-icons { padding-bottom: 8px; }

/* 1. Risk color bar */
.kb-risk-bar { height: 6px; flex-shrink: 0; }
.kb-risk-ok      { background: var(--bk-emerald); }
.kb-risk-soon    { background: var(--bk-amber); }
.kb-risk-overdue { background: var(--bk-red); }

/* 2. Title */
.kb-card-title { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
.kb-card-po-link {
    font-size: .6rem; font-weight: 700; color: var(--bk-admin); text-transform: uppercase;
    letter-spacing: .04em; text-decoration: none;
}
.kb-card-po-link:hover { text-decoration: underline; }
.kb-card-label { font-size: .78rem; font-weight: 600; color: #212121; line-height: 1.3; }
.kb-card-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.kb-card-date { font-size: .62rem; color: var(--bk-grey-400); }
.kb-card-status {
    font-size: .58rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; flex-shrink: 0;
}
.kb-status-in_progress       { background: var(--bk-status-in_progress-bg); color: #0d47a1; }
.kb-status-pending            { background: var(--bk-grey-100); color: var(--bk-grey-500); }
.kb-status-awaiting_approval  { background: #fff3e0; color: #e65100; }
.kb-status-completed          { background: var(--bk-status-completed-bg); color: var(--bk-emerald); }
.kb-status-approved           { background: var(--bk-status-completed-bg); color: var(--bk-emerald); }
.kb-status-rejected           { background: #ffebee; color: var(--bk-red); }
.kb-status-skipped            { background: var(--bk-grey-100); color: var(--bk-grey-500); }

/* 3. Thumbnail row */
.kb-card-thumbs {
    display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap;
}
.kb-thumb {
    width: 44px; height: 44px; object-fit: cover; border-radius: 4px;
    border: 1px solid var(--bk-grey-300); flex-shrink: 0;
}
.kb-thumb-design { border-color: var(--bk-admin); }
.kb-thumb-strikeoff { opacity: .85; }

/* 4. Assignees + action text */
.kb-card-assignees { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.kb-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    font-size: .52rem; font-weight: 700; color: var(--bk-card);
    border: 2px solid var(--bk-card); margin-left: -6px; flex-shrink: 0; line-height: 1;
}
.kb-avatar:first-child { margin-left: 0; }
.kb-avatar-more { background: #90a4ae; font-size: .45rem; }
.kb-card-action-text { font-size: .65rem; color: var(--bk-grey-600); margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }

/* 5. Days-remaining chip */
.kb-card-due-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.kb-days-chip { font-size: .62rem; font-weight: 700; padding: 2px 7px; border-radius: 8px; flex-shrink: 0; }
.kb-days-ok   { background: #dcfce7; color: #166534; }
.kb-days-soon { background: var(--bk-status-awaiting-bg); color: #92400e; }
.kb-days-late { background: var(--bk-status-rejected-bg); color: var(--bk-status-rejected-fg); }
.kb-due-date  { font-size: .62rem; color: var(--bk-grey-500); }

/* 6. Footer icon counts — now buttons */
.kb-card-icons { display: flex; gap: 4px; margin-top: 6px; border-top: 1px solid var(--bk-grey-200); padding-top: 5px; }
.kb-icon-btn {
    background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 4px;
    font-size: .65rem; color: var(--bk-grey-400); display: flex; align-items: center; gap: 2px;
    transition: background .12s, color .12s;
}
.kb-icon-btn:hover { background: #f0f7fb; color: var(--bk-admin); }
.kb-icon-btn.kb-icon-active { color: var(--bk-admin); font-weight: 600; }
.kb-icon-num { font-size: .63rem; }

/* ── Backdrop — used for step popup and modals only ── */
.kb-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 900;
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
.kb-backdrop.open { opacity: 1; pointer-events: auto; }

/* ── WF detail panel — in-page, replaces board content (no fixed overlay) ── */
.kb-panel {
    display: none;
    background: var(--bk-card);
    min-height: 400px;
}
.kb-panel-loading { padding: 32px; text-align: center; color: var(--bk-grey-500); font-size: .85rem; }
.kb-panel-error { padding: 16px; color: var(--bk-red); font-size: .8rem; }

/* ── Panel Detail Styles ── */
.kb-pd-header {
    padding: 12px 16px; border-bottom: 1px solid #e8e8e8;
    background: #f8f9fa; position: sticky; top: 0; z-index: 1;
}
.kb-pd-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kb-pd-po { font-size: .65rem; font-weight: 700; color: var(--bk-admin); text-transform: uppercase; letter-spacing: .06em; }
.kb-pd-title { font-size: 1rem; font-weight: 700; color: var(--bk-admin-hover); margin-top: 2px; line-height: 1.3; }
.kb-pd-supplier { font-size: .75rem; color: var(--bk-grey-500); margin-top: 4px; }
/* Back button replaces close */
.kb-pd-back-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: 1px solid var(--bk-grey-300); border-radius: 5px;
    cursor: pointer; font-size: .78rem; color: var(--bk-admin); font-weight: 600;
    padding: 4px 10px; white-space: nowrap; transition: background .12s;
}
.kb-pd-back-btn:hover { background: #f0f7fb; border-color: var(--bk-admin); }
.kb-pd-close { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--bk-grey-500); padding: 2px 4px; border-radius: 4px; }
.kb-pd-close:hover { background: var(--bk-border); color: var(--bk-grey-900); }
.kb-pd-archive-btn { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--bk-grey-500); padding: 2px 4px; border-radius: 4px; }
.kb-pd-archive-btn:hover { background: var(--bk-status-rejected-bg); color: var(--bk-status-rejected-fg); }

.kb-pd-body { padding: 16px; display: flex; flex-direction: column; gap: 20px; }
.kb-pd-section { display: flex; flex-direction: column; gap: 8px; }
.kb-pd-section-lbl { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--bk-grey-400); }

/* ── Checklist items (sop_checklist + checklist_step) ── */
.kb-cl-progress {
    font-size: .7rem; font-weight: 600; color: var(--bk-grey-600);
}
.kb-cl-bar {
    width: 80px; height: 5px; background: var(--bk-grey-300); border-radius: 3px; overflow: hidden;
    display: inline-block; vertical-align: middle; margin-left: 4px;
}
.kb-cl-bar-fill {
    height: 100%; background: var(--bk-emerald); border-radius: 3px; transition: width .3s;
}
.kb-cl-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; cursor: pointer; font-size: .88rem; color: var(--bk-grey-900);
    border-radius: 4px; transition: background .15s;
}
.kb-cl-item:hover { background: #f0fdf4; }
.kb-cl-item input[type="checkbox"] { accent-color: var(--bk-emerald); width: 16px; height: 16px; cursor: pointer; }
.kb-cl-checked { background: #f0fdf4; }
.kb-cl-checked .kb-cl-label { color: #16a34a; }
.kb-cl-label { flex: 1; }
.kb-cl-mark-all-wrap { padding: 8px 0 4px; }
.kb-cl-mark-all-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bk-navy, #1a1a2e); color: #fff; border: none;
    padding: 8px 18px; border-radius: 6px; font-size: .85rem;
    font-weight: 600; cursor: pointer; transition: opacity .15s;
}
.kb-cl-mark-all-btn:hover { opacity: .85; }

/* Timeline */
.kb-pd-timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.kb-pd-step { display: flex; gap: 10px; padding: 8px 0; position: relative; }
.kb-pd-step + .kb-pd-step::before {
    content: ''; position: absolute; left: 7px; top: 0; width: 2px; height: 8px;
    background: var(--bk-grey-300);
}
.kb-pd-step-dot {
    width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
    border: 2px solid var(--bk-grey-300); background: var(--bk-card);
}
.kb-pd-step-done .kb-pd-step-dot { background: var(--bk-emerald); border-color: var(--bk-emerald); }
.kb-pd-step-current .kb-pd-step-dot { background: #417690; border-color: #417690; box-shadow: 0 0 0 3px rgba(65,118,144,.25); }
.kb-pd-step-rejected .kb-pd-step-dot { background: var(--bk-red); border-color: var(--bk-red); }
.kb-pd-step-pending .kb-pd-step-dot { background: var(--bk-grey-100); border-color: var(--bk-grey-400); }
.kb-pd-step-body { flex: 1; min-width: 0; }
.kb-pd-step-label { font-size: .82rem; font-weight: 600; color: #212121; }
.kb-pd-step-current .kb-pd-step-label { color: var(--bk-admin-hover); }
.kb-pd-step-done .kb-pd-step-label { color: var(--bk-emerald); }
.kb-pd-step-rejected .kb-pd-step-label { color: var(--bk-red); }
.kb-pd-step-pending .kb-pd-step-label { color: var(--bk-grey-500); }
.kb-pd-step-meta { font-size: .68rem; color: var(--bk-grey-500); margin-top: 1px; line-height: 1.4; }
.kb-pd-overdue { color: var(--bk-red); font-weight: 600; }
.kb-pd-step-assignees { display: flex; margin-top: 4px; }
.kb-pd-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    font-size: .5rem; font-weight: 700; color: var(--bk-card);
    border: 2px solid var(--bk-card); margin-left: -5px; flex-shrink: 0;
}
.kb-pd-avatar:first-child { margin-left: 0; }

/* Info grid */
.kb-pd-info-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .78rem; }
.kb-pd-info-lbl { color: var(--bk-grey-500); font-size: .68rem; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; padding-top: 1px; }

/* Panel PO link */
.kb-pd-po { font-size: .65rem; font-weight: 700; color: var(--bk-admin); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.kb-pd-po:hover { text-decoration: underline; }

/* ── Panel: started date ── */
.kb-pd-started { font-size: .65rem; color: var(--bk-grey-400); margin-top: 2px; }
.kb-pd-po-placeholder { font-size: .65rem; font-weight: 700; color: #90a4ae; text-transform: uppercase; letter-spacing: .06em; }

/* ── Panel: current step card ── */
.kb-pd-step-card {
    background: #f0f7fb; border: 1px solid #cde3ef; border-radius: 6px;
    padding: 10px 12px; display: flex; flex-direction: column; gap: 5px;
}
.kb-pd-step-name { font-size: .9rem; font-weight: 700; color: var(--bk-admin-hover); }
.kb-pd-step-status {
    display: inline-block; font-size: .68rem; font-weight: 700;
    padding: 2px 8px; border-radius: 10px; align-self: flex-start;
}
.kb-step-status-in_progress  { background: var(--bk-status-in_progress-bg); color: #0d47a1; }
.kb-step-status-pending       { background: var(--bk-grey-100); color: #757575; }
.kb-step-status-awaiting_approval { background: #fff3e0; color: #e65100; }
.kb-step-status-completed     { background: var(--bk-status-completed-bg); color: var(--bk-emerald); }
.kb-step-status-approved      { background: var(--bk-status-completed-bg); color: var(--bk-emerald); }
.kb-step-status-rejected      { background: #ffebee; color: var(--bk-red); }
.kb-step-status-skipped       { background: var(--bk-grey-100); color: var(--bk-grey-500); }
.kb-pd-step-due { font-size: .72rem; color: #757575; }

/* ── Advance button (panel — full width) ── */
.kb-pd-advance-btn {
    width: 100%; padding: 9px 14px; border: none; border-radius: 5px;
    background: var(--bk-admin); color: var(--bk-card); font-size: .82rem; font-weight: 600;
    cursor: pointer; text-align: center; transition: background .15s;
    margin-top: 4px;
}
.kb-pd-advance-btn:hover { background: var(--bk-admin-hover); }

/* ── Panel: add button ── */
.kb-pd-add-btn {
    background: none; border: 1px solid var(--bk-grey-400); border-radius: 4px;
    padding: 1px 8px; font-size: .68rem; color: var(--bk-grey-700); cursor: pointer;
}
.kb-pd-add-btn:hover { border-color: var(--bk-admin); color: var(--bk-admin); background: #f0f7fb; }

/* ── Popup modals ── */
.kb-popup-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 10001; background: var(--bk-card); border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.22); padding: 1.5rem;
    min-width: 320px; max-width: 420px; width: 90vw;
}
/* Drag-to-move (psc_draggable.js): grab handle on the PSC color bar / eyebrow
   strip (step popup) and the .kb-popup-header (small kanban popups). Once the
   user drags, the modal drops the centering transform and the resize handler
   reads `.is-moved` to switch to a natural left-edge resize. Dbl-click the
   strip to recenter. */
.kb-popup-modal .psc-color-bar,
.kb-popup-modal .psc-eyebrow,
.kb-popup-modal .kb-popup-header,
.kb-popup-modal .cc-treasure-bar,
.kb-popup-modal .cc-treasure-cover,
.kb-popup-modal .cc-treasure-eyebrow,
.kb-popup-modal .cc-treasure-title,
.kb-popup-modal .cc-treasure-mood,
.kb-popup-modal .cc-treasure-arrived-pill { cursor: grab; user-select: none; }
.kb-popup-modal.is-moved { transition: none; }
/* Phase 0.5/5 of editor window-wrapper refactor (2026-06-27) — window types
   that aren't PSC step cards (Cinematic Editor, future Workflow Canvas Editor)
   pass {noDrawerRail: true} to PSCWindows.open() which adds this class. The
   drawer rail surfaces history/comments/assets for a step instance; editor
   windows have their own Palette + ConfigPanel and don't need it.

   Phase 3-HOTFIX (2026-06-27) — base .kb-popup-modal is sized for tiny step
   cards (max-width 420px, padding 1.5rem). Editor windows need to:
     1. Drop the 420px cap so inline style.width (1200px from PSCWindows.open)
        is respected rather than clamped down to 420px.
     2. Drop the 1.5rem padding so .ce-shell fills the popup edge-to-edge.
     3. Become a flex column so the head + content + the editor SPA stack
        properly (head fixed height, content fills remaining space).
     4. Hide overflow so the editor's interior scrolls/clips inside the
        popup chrome, not outside it.
   The content slot also needs to flex-grow so .ce-shell (height:100% on grid)
   has a sized parent to resolve against. */
.kb-popup-modal--no-rail {
  padding: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kb-popup-modal--no-rail [data-psc-content] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.kb-popup-modal--no-rail .psc-drawers-section { display: none; }
body.psc-dragging,
body.psc-dragging .psc-color-bar,
body.psc-dragging .psc-eyebrow,
body.psc-dragging .kb-popup-header,
body.psc-dragging .cc-treasure-bar,
body.psc-dragging .cc-treasure-cover,
body.psc-dragging .cc-treasure-eyebrow,
body.psc-dragging .cc-treasure-title,
body.psc-dragging .cc-treasure-mood { cursor: grabbing !important; }
.kb-media-modal { max-width: 480px; }
.kb-popup-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;
}
.kb-popup-title { margin: 0; font-size: 1rem; color: var(--bk-admin-hover); font-weight: 700; }

/* Three large tap buttons */
.kb-media-tap-row { display: flex; gap: 12px; margin: .5rem 0 1rem; justify-content: center; }
.kb-media-tap-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 18px 8px; border: 2px solid var(--bk-grey-300); border-radius: 10px;
    background: #f8f9fa; color: var(--bk-grey-900); font-size: 1.8rem; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.kb-media-tap-btn span { font-size: .72rem; font-weight: 700; color: var(--bk-grey-800); }
.kb-media-tap-btn:hover { border-color: var(--bk-admin); background: #f0f7fb; }
.kb-media-tap-btn:active { background: #e0eff7; }

/* Active capture area */
.kb-media-status { font-size: .75rem; color: var(--bk-grey-500); text-align: center; padding: 4px 0; }
.kb-media-rec-btn {
    flex: 1; padding: 10px; border: none; border-radius: 6px;
    background: var(--bk-admin); color: var(--bk-card); font-size: .82rem; font-weight: 700;
    cursor: pointer; transition: background .15s;
}
.kb-media-rec-btn:hover { background: var(--bk-admin-hover); }
.kb-media-rec-btn.recording { background: var(--bk-red); animation: kb-pulse 1.2s infinite; }
@keyframes kb-pulse { 0%,100%{opacity:1} 50%{opacity:.7} }
.kb-media-video {
    width: 100%; border-radius: 6px; background: #000;
    max-height: 240px; object-fit: cover;
}

/* (kb-card-hist removed — no longer needed in instance-column layout) */

/* ── Comments ── */
.kb-pd-comments { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; }
.kb-pd-comment { display: flex; gap: 8px; align-items: flex-start; }
.kb-pd-comment-body { flex: 1; min-width: 0; }
.kb-pd-comment-author { font-size: .7rem; font-weight: 700; color: var(--bk-admin-hover); }
.kb-pd-comment-text { font-size: .78rem; color: var(--bk-grey-900); line-height: 1.4; word-break: break-word; }
.kb-pd-comment-ts { font-size: .62rem; color: var(--bk-grey-400); margin-top: 2px; }

.kb-pd-comment-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.kb-pd-comment-input {
    width: 100%; border: 1px solid var(--bk-grey-300); border-radius: 5px;
    padding: 6px 8px; font-size: .78rem; resize: vertical; min-height: 48px;
    box-sizing: border-box;
}
.kb-pd-comment-input:focus { outline: none; border-color: var(--bk-admin); }
.kb-sp-ctext-input {
    flex: 1; border: 1px solid var(--bk-grey-300); border-radius: 5px;
    padding: 5px 8px; font-size: .78rem; min-width: 0;
}
.kb-sp-ctext-input:focus { outline: none; border-color: var(--bk-admin); }
.kb-pd-send-btn {
    align-self: flex-end; padding: 5px 14px; border-radius: 4px;
    background: var(--bk-admin); color: var(--bk-card); border: none; cursor: pointer; font-size: .78rem;
    font-weight: 600;
}
.kb-pd-send-btn:hover { background: #2c5f74; }
.kb-pd-send-btn:disabled { opacity: .5; cursor: default; }

/* ── Attachments ── */
.kb-pd-files { display: flex; flex-direction: column; gap: 5px; }
.kb-pd-file { display: flex; align-items: center; gap: 8px; }
.kb-pd-file-link { font-size: .78rem; color: var(--bk-admin); text-decoration: none; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-pd-file-link:hover { text-decoration: underline; }
.kb-pd-file-by { font-size: .62rem; color: var(--bk-grey-400); flex-shrink: 0; }

/* ── Voice notes ── */
.kb-pd-voices { display: flex; flex-direction: column; gap: 8px; }
.kb-pd-voice { display: flex; flex-direction: column; gap: 2px; }
.kb-pd-audio { width: 100%; height: 32px; }
.kb-pd-voice-meta { font-size: .62rem; color: var(--bk-grey-500); }

/* Upload button */
.kb-pd-upload-btn {
    display: inline-block; margin-top: 6px; padding: 4px 12px;
    border: 1px dashed var(--bk-grey-400); border-radius: 4px; font-size: .75rem;
    color: var(--bk-grey-700); cursor: pointer; text-align: center;
}
.kb-pd-upload-btn:hover { border-color: var(--bk-admin); color: var(--bk-admin); background: #f0f7fb; }

/* Empty state */
.kb-pd-empty { font-size: .72rem; color: var(--bk-grey-400); font-style: italic; }

/* ── Toast ── */
.kb-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: #c62828; color: var(--bk-card); padding: 10px 20px; border-radius: 6px;
    font-size: .82rem; font-weight: 600; z-index: 999;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
    white-space: nowrap;
}
.kb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Error fragment ── */
.kb-error-toast { display: none; }

/* ── Inline recording bar (inside step row, no popup) ── */
.kb-step-rec-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 0; margin-top: 4px;
}
.kb-srec-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--bk-red); flex-shrink: 0;
    animation: kb-srec-pulse 1s ease-in-out infinite;
}
@keyframes kb-srec-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .45; transform: scale(.75); }
}
.kb-srec-label {
    font-size: .65rem; font-weight: 600; color: var(--bk-red);
    flex: 1; white-space: nowrap;
}
.kb-srec-stop {
    background: none; border: 1px solid var(--bk-red); border-radius: 3px;
    color: var(--bk-red); font-size: .62rem; font-weight: 700;
    padding: 1px 7px; cursor: pointer; flex-shrink: 0;
    transition: background .12s, color .12s;
}
.kb-srec-stop:hover { background: #ef4444; color: var(--bk-card); }

/* Mic button turns red while recording */
.kb-icon-btn.kb-mic-recording { color: var(--bk-red); }

/* ── Inline camera/video capture bar (inside step row) ── */
.kb-step-cam-bar {
    margin-top: 5px; border-radius: 5px; overflow: hidden; background: #111;
}
.kb-scam-video {
    width: 100%; max-height: 150px; object-fit: cover; display: block;
}
.kb-scam-preview {
    width: 100%; max-height: 150px; object-fit: cover; display: block;
}
.kb-scam-controls {
    display: flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,.75); padding: 5px 8px;
}
.kb-scam-label { flex: 1; font-size: .65rem; color: var(--bk-card); font-weight: 600; }
.kb-scam-capture-btn {
    background: var(--bk-admin); border: none; border-radius: 4px;
    color: var(--bk-card); font-size: .7rem; font-weight: 700;
    padding: 3px 10px; cursor: pointer; transition: background .12s;
}
.kb-scam-capture-btn:hover { background: var(--bk-admin-hover); }
.kb-scam-capture-btn.kb-scam-recording { background: var(--bk-red); animation: kb-srec-pulse 1s infinite; }
.kb-scam-close-btn {
    background: none; border: 1px solid rgba(255,255,255,.4); border-radius: 4px;
    color: var(--bk-card); font-size: .65rem; padding: 2px 7px; cursor: pointer;
}
.kb-scam-close-btn:hover { background: rgba(255,255,255,.15); }

/* ── Inline comment bar (same dark strip as rec/cam bar) ── */
.kb-step-cmt-bar {
    display: flex; align-items: center; gap: 6px;
    background: var(--bk-navy); padding: 5px 8px;
}
.kb-scmt-input {
    flex: 1; border: none; border-radius: 4px; padding: 4px 7px;
    font-size: .75rem; min-width: 0; background: var(--bk-card); color: var(--bk-navy);
}
.kb-scmt-input::placeholder { color: var(--bk-grey-500); }
.kb-scmt-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.4); }

/* ── Step popup: voice note row (avatar + name + audio player) ── */
.kb-sp-voice-row {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid var(--bk-grey-200);
}
.kb-sp-voice-row:last-child { border-bottom: none; }
.kb-sp-voice-avatar {
    width: 28px; height: 28px; font-size: .6rem;
    flex-shrink: 0; margin-top: 2px;
}
.kb-sp-voice-info {
    display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0;
}
.kb-pd-audio { width: 100%; height: 32px; }

/* ── Step popup: file row (avatar + info + delete) ── */
.kb-sp-file-avatar { width: 24px; height: 24px; font-size: .52rem; flex-shrink: 0; }
.kb-sp-att-del {
    background: none; border: none; color: var(--bk-grey-400); cursor: pointer;
    font-size: .7rem; padding: 2px 4px; border-radius: 3px; flex-shrink: 0;
    transition: color .12s, background .12s;
}
.kb-sp-att-del:hover { color: var(--bk-red); background: var(--bk-status-rejected-bg); }

/* Panel body */
.kb-pd-body { padding: 16px; display: flex; flex-direction: column; gap: 20px; }

/* File row with avatar */
.kb-pd-file {
    display: flex; align-items: center; gap: 8px; padding: 4px 0;
}
.kb-pd-file-avatar {
    width: 24px; height: 24px; font-size: .52rem; flex-shrink: 0;
}
.kb-pd-file-info { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }

/* Voice note row in WF panel — same avatar pattern as step popup */
.kb-pd-voice {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid var(--bk-grey-200);
}
.kb-pd-voice:last-child { border-bottom: none; }
.kb-pd-voice-avatar {
    width: 28px; height: 28px; font-size: .6rem; flex-shrink: 0; margin-top: 2px;
}
.kb-pd-voice-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }

/* ── Column drag-drop reorder ── */
.kb-inst-header[draggable="true"] { cursor: grab; }
.kb-inst-header[draggable="true"]:active { cursor: grabbing; }
.kb-instance-col.kb-card-dragging { opacity: 0.5; }
.kb-instance-col.kb-col-drop-before { border-left: 3px solid var(--bk-admin); }
.kb-instance-col.kb-col-drop-after { border-right: 3px solid var(--bk-admin); }

/* ── Responsive ── */
@media (max-width: 640px) {
    .kb-instance-col { min-width: 240px; max-width: 280px; }
    .kb-step-popup { max-width: 100%; width: 96vw; }
    .kb-step-popup .psc-resize-h { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   KB2 — Warm-Modern Redesign
   All new classes are prefixed kb2- to avoid conflicts with existing kb-
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --kb2-navy:       #1F3A5F;
    --kb2-terra:      #C97B5C;
    --kb2-terra-dk:   #B45309;
    --kb2-amber:      #F59E0B;
    --kb2-amber-bg:   #FEF3C7;
    --kb2-orange:     #F97316;
    --kb2-red:        #EF4444;
    --kb2-green:      #10B981;
    --kb2-green-bg:   #D1FAE5;
    --kb2-bg:         #FAF9F6;
    --kb2-raised:     #FDFCFA;
    --kb2-border:     #E8E2D9;
    --kb2-muted:      #D6CDBF;
    --kb2-text:       #1F2937;
    --kb2-text-sub:   #4B5563;
    --kb2-text-dim:   #9CA3AF;
}

/* ── Instance column ── */
.kb2-instance-col {
    width: clamp(240px, 30vw, 344px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    /* override the fixed kb-instance-col sizing */
    min-width: unset !important;
    max-width: unset !important;
}

.kb2-steps-scroll {
    overflow-y: auto;
    flex: 1;
    max-height: calc(100vh - 240px);
}

/* ── Instance header ── */
.kb2-inst-header {
    background: var(--kb2-bg);
    border: 0.5px solid var(--kb2-border);
    border-radius: 12px 12px 0 0;
    padding: 14px 14px 10px;
    cursor: pointer;
    transition: background 120ms;
}
.kb2-inst-header:hover { background: #F5F3EF; }

.kb2-eyebrow {
    font-size: 10px; font-weight: 500; color: var(--kb2-terra-dk);
    letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px;
}
.kb2-header-title-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px;
}
.kb2-inst-title {
    font-size: 16px; font-weight: 500; color: var(--kb2-text); line-height: 1.3; flex: 1; min-width: 0;
}
.kb2-header-meta {
    font-size: 11px; color: var(--kb2-text-sub); margin-bottom: 8px;
}
.kb2-header-bottom {
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap;
}
.kb2-presence-row {
    display: flex; align-items: center; gap: 3px;
}
.kb2-presence-avatar {
    width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid white;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 500; color: white; margin-left: -5px;
    flex-shrink: 0;
}
.kb2-presence-avatar:first-child { margin-left: 0; }
.kb2-presence-label { font-size: 10px; color: var(--kb2-text-sub); margin-left: 4px; }

.kb2-po-link {
    font-size: 10px; color: var(--kb2-navy); text-decoration: none;
    padding: 2px 6px; border: 0.5px solid var(--kb2-border); border-radius: 4px;
    white-space: nowrap;
}
.kb2-po-link:hover { background: #E8EFF7; }

.kb2-header-action-btn {
    background: none; border: none; cursor: pointer; color: var(--kb2-text-dim);
    font-size: 11px; padding: 2px 5px; border-radius: 4px;
    display: inline-flex; align-items: center; gap: 3px;
    transition: background 100ms, color 100ms;
}
.kb2-header-action-btn:hover { background: #EEEAE4; color: var(--kb2-text-sub); }

.kb2-progress-track {
    height: 4px; background: var(--bk-surface-2); border-radius: 2px; overflow: hidden;
}
.kb2-progress-fill {
    height: 100%; background: var(--kb2-green); border-radius: 2px;
    transition: width 400ms ease;
}

/* Instance status badge */
.kb2-inst-status-badge {
    font-size: 10px; padding: 2px 7px; border-radius: 8px; font-weight: 500; flex-shrink: 0;
}
.kb2-status-active     { background: var(--kb2-amber-bg); color: var(--kb2-terra-dk); }
.kb2-status-completed  { background: var(--kb2-green-bg); color: #047857; }
.kb2-status-on_hold    { background: var(--bk-status-awaiting-bg); color: #92400E; }
.kb2-status-cancelled  { background: var(--bk-status-rejected-bg); color: var(--bk-status-rejected-fg); }

/* ── Step row ── */
.kb2-step-row {
    background: white;
    border-top: 0.5px solid var(--kb2-border);
    border-right: 0.5px solid var(--kb2-border);
    border-bottom: 0.5px solid var(--kb2-border);
    border-left: 3px solid var(--kb2-muted);
    position: relative;
    cursor: pointer;
    transition: background 80ms, border-color 80ms;
}
.kb2-step-row:last-child { border-radius: 0 0 8px 8px; }

/* Left bar colors */
.kb2-bar-done    { border-left-color: var(--kb2-green); }
.kb2-bar-active  { border-left-color: var(--kb2-amber); }
.kb2-bar-soon    { border-left-color: var(--kb2-orange); }
.kb2-bar-urgent  { border-left-color: var(--kb2-red); }
.kb2-bar-pending { border-left-color: var(--step-category-color, var(--kb2-muted)); }
.kb2-bar-skipped { border-left-color: var(--kb2-text-dim); }

/* Hover on non-active rows */
.kb2-step-row:not([data-is-active="1"]):hover {
    background: var(--kb2-raised);
    border-top-color: var(--kb2-terra);
    border-right-color: var(--kb2-terra);
    border-bottom-color: var(--kb2-terra);
}

.kb2-step-body { padding: 9px 10px; }

/* Step top row */
.kb2-step-top {
    display: flex; align-items: flex-start; gap: 8px;
}
.kb2-step-icon {
    width: 30px; height: 30px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kb2-icon-done    { background: var(--kb2-green-bg); }
.kb2-icon-active  { background: var(--kb2-amber-bg); }
.kb2-icon-pending { background: var(--bk-surface-2); }

.kb2-step-title-group {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.kb2-step-name {
    font-size: 13px; font-weight: 500; color: var(--kb2-text);
}
.kb2-bar-pending .kb2-step-name { color: var(--kb2-text-sub); }
.kb2-bar-skipped .kb2-step-name { color: var(--kb2-text-dim); text-decoration: line-through; }

/* Status pill */
.kb2-status-pill {
    font-size: 11px; padding: 2px 7px; border-radius: 10px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.kb2-pill-completed, .kb2-pill-approved  { background: var(--kb2-green-bg); color: #047857; }
.kb2-pill-in_progress                    { background: var(--kb2-amber-bg); color: var(--kb2-terra-dk); }
.kb2-pill-pending                        { background: var(--bk-surface-2); color: var(--bk-text-muted); }
.kb2-pill-awaiting_approval              { background: #EDE9FE; color: #5B21B6; }
.kb2-pill-rejected                       { background: var(--bk-status-rejected-bg); color: var(--bk-status-rejected-fg); }
.kb2-pill-skipped                        { background: var(--bk-grey-100); color: var(--bk-text-muted); }
.kb2-pill-blocked                        { background: color-mix(in srgb, var(--bk-amber, #F59E0B) 14%, transparent); color: var(--bk-amber, #F59E0B); }

/* WorkflowContext Protocol — blocked chip on a step waiting for a required consume */
.kb2-blocked-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; padding: 3px 8px; border-radius: 999px; font-weight: 600;
    background: color-mix(in srgb, var(--bk-amber, #F59E0B) 14%, transparent);
    color: var(--bk-amber, #F59E0B);
    border: 1px solid color-mix(in srgb, var(--bk-amber, #F59E0B) 30%, transparent);
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-height: 22px;
}

/* Pulsing dot on active step pill */
.kb2-pulse-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--kb2-amber);
    display: inline-block; animation: kb2-pulse 1.5s ease-in-out infinite; flex-shrink: 0;
}
@keyframes kb2-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.75); }
}

/* Type badge */
.kb2-type-badge {
    font-size: 10px; padding: 1px 5px; background: var(--bk-surface-2); color: var(--bk-text-muted);
    border-radius: 3px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
    white-space: nowrap; border-left: 2px solid var(--step-category-color, #F4F2EE);
}

/* Overflow button */
.kb2-overflow-btn {
    background: none; border: none; color: var(--kb2-text-dim);
    cursor: pointer; padding: 2px 5px; font-size: 15px; border-radius: 4px;
    flex-shrink: 0; line-height: 1;
}
.kb2-overflow-btn:hover { background: #F4F2EE; color: var(--kb2-text-sub); }

/* Meta row */
.kb2-step-meta {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    margin-top: 5px; font-size: 11px; color: var(--kb2-text-sub);
}
.kb2-mini-avatar {
    width: 16px; height: 16px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 9px; font-weight: 600; color: white; flex-shrink: 0;
}
.kb2-meta-name { font-size: 11px; color: var(--kb2-text-sub); }
.kb2-meta-sep  { color: var(--kb2-muted); }
.kb2-due       { font-size: 11px; color: var(--kb2-text-sub); white-space: nowrap; }
.kb2-due-late  { color: var(--bk-red) !important; }
.kb2-due-soon  { color: #D97706 !important; }

/* Presence dot on active step */
.kb2-viewing-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--kb2-terra); flex-shrink: 0;
}
.kb2-viewing-label { font-size: 11px; color: var(--kb2-terra); }

/* ── Photo grid ── */
.kb2-photo-section { margin-top: 8px; }
.kb2-photo-section-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;
}
.kb2-photo-label {
    font-size: 10px; font-weight: 500; color: var(--kb2-text-sub);
    letter-spacing: 0.04em; text-transform: uppercase;
}
.kb2-photo-required { font-size: 10px; color: var(--kb2-terra-dk); }
.kb2-photo-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;
}
.kb2-photo-thumb {
    aspect-ratio: 1; border-radius: 5px; background-size: cover; background-position: center;
    background-color: var(--bk-grey-300);
}
.kb2-video-thumb {
    background-color: var(--bk-navy);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.kb2-video-thumb:hover { background-color: #2d2d4e; }
.kb2-photo-slot {
    aspect-ratio: 1; border-radius: 5px; border: 1.5px dashed var(--kb2-muted);
    background: var(--kb2-bg); display: flex; align-items: center; justify-content: center;
    color: var(--kb2-terra-dk); font-size: 15px; cursor: pointer;
    transition: background 100ms, border-color 100ms;
}
.kb2-photo-slot:hover { background: var(--kb2-amber-bg); border-color: var(--kb2-terra); }

/* ── Approval inline ── */
.kb2-approval-inline {
    display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap;
}
.kb2-approve-btn, .kb2-approve-all-btn {
    background: var(--kb2-navy); color: white; border: none; border-radius: 6px;
    padding: 5px 12px; font-size: 11px; font-weight: 500; cursor: pointer;
}
.kb2-approve-btn:hover, .kb2-approve-all-btn:hover { background: var(--bk-navy); }
.kb2-reject-btn {
    background: white; color: var(--bk-red); border: 0.5px solid #FECACA; border-radius: 6px;
    padding: 5px 12px; font-size: 11px; font-weight: 500; cursor: pointer;
}
.kb2-reject-btn:hover { background: var(--bk-status-rejected-bg); }
.kb2-rejection-input { display: flex; gap: 4px; align-items: center; width: 100%; }
.kb2-rej-text {
    flex: 1; border: 1px solid var(--kb2-border); border-radius: 5px; padding: 4px 8px;
    font-size: 12px; outline: none;
}
.kb2-rej-text:focus { border-color: var(--kb2-terra); }
.kb2-rej-send {
    background: var(--kb2-red); color: white; border: none; border-radius: 5px;
    padding: 4px 10px; font-size: 11px; cursor: pointer;
}

/* ── Checklist preview ── */
.kb2-checklist-preview { margin-top: 6px; }
.kb2-cl-meta { font-size: 11px; color: var(--kb2-text-sub); margin-bottom: 3px; }
.kb2-cl-bar  { height: 4px; background: var(--bk-grey-300); border-radius: 2px; overflow: hidden; }
.kb2-cl-fill { height: 100%; background: var(--kb2-green); border-radius: 2px; transition: width 300ms; }

/* ── Media chips ── */
.kb2-media-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.kb2-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; background: #E8EFF7; color: var(--kb2-navy);
    border-radius: 10px; font-size: 11px; font-weight: 500;
}
.kb2-chip-btn {
    border: none; cursor: pointer; transition: background 80ms;
}
.kb2-chip-btn:hover { background: #c8d8ee; }

/* ── Hint text for pending steps ── */
.kb2-hint { font-size: 11px; color: var(--kb2-text-dim); margin-top: 4px; font-style: italic; }

/* ── ERP link row ── */
.kb2-erp-link-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-top: 8px; flex-wrap: wrap;
}
.kb2-erp-open-btn {
    background: var(--kb2-navy); color: white; border: none; border-radius: 6px;
    padding: 5px 10px; font-size: 11px; font-weight: 500; cursor: pointer;
    text-decoration: none; white-space: nowrap;
}
.kb2-erp-open-btn:hover { background: var(--bk-navy); }

/* ── Notes block ── */
.kb2-notes-block {
    margin-top: 6px; padding: 7px 10px; background: var(--bk-surface-2); border-radius: 5px;
    font-size: 12px; color: var(--kb2-text-sub); line-height: 1.5;
}

/* ── Styles preview ── */
.kb2-styles-preview { margin-top: 6px; }

/* ── Hover-reveal action buttons ── */
.kb2-hover-actions {
    display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px;
    opacity: 0;
    transition: opacity 80ms ease;
    pointer-events: none;
}
.kb2-step-row:not([data-is-active="1"]):hover .kb2-hover-actions {
    opacity: 1;
    pointer-events: auto;
}
/* Mobile: always visible (touch devices have no hover) */
@media (hover: none) {
    .kb2-hover-actions { opacity: 1 !important; pointer-events: auto !important; }
}

.kb2-hover-btn {
    background: white; border: 0.5px solid var(--kb2-muted);
    color: var(--kb2-text-sub); padding: 4px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 500; cursor: pointer;
    display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}
.kb2-hover-btn:hover { background: var(--kb2-bg); border-color: var(--kb2-terra); }

/* ── Active step footer ── */
.kb2-step-footer {
    margin-top: 10px; padding: 8px 0 0;
    border-top: 0.5px solid var(--kb2-border);
    display: flex; justify-content: space-between; align-items: center;
    gap: 6px; flex-wrap: wrap;
}
.kb2-footer-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.kb2-action-btn {
    background: white; border: 0.5px solid var(--kb2-muted); border-radius: 6px;
    padding: 5px 10px; font-size: 11px; color: var(--kb2-text-sub); cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    font-family: inherit;
}
.kb2-action-btn:hover { background: var(--kb2-bg); border-color: var(--kb2-terra); }
.kb2-action-primary {
    background: var(--kb2-navy) !important; color: white !important;
    border-color: var(--kb2-navy) !important;
}
.kb2-action-primary:hover { background: var(--bk-navy) !important; }

.kb2-advance-btn {
    background: var(--kb2-navy); color: white; border: none; border-radius: 6px;
    padding: 6px 12px; font-size: 11px; font-weight: 500; cursor: pointer;
    white-space: nowrap; text-decoration: none; display: inline-block; font-family: inherit;
}
.kb2-advance-btn:hover { background: var(--bk-navy); }
.kb2-advance-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Overflow dropdown menu ── */
.kb2-overflow-menu {
    position: absolute; right: 8px; top: 40px; z-index: 100;
    background: white; border: 1px solid var(--kb2-border); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10); padding: 4px 0; min-width: 150px;
}
.kb2-overflow-menu button {
    display: block; width: 100%; background: none; border: none;
    padding: 7px 14px; text-align: left; font-size: 12px;
    color: var(--kb2-text-sub); cursor: pointer; font-family: inherit;
}
.kb2-overflow-menu button:hover { background: var(--kb2-bg); color: var(--kb2-text); }

/* ── Reassign button (action footer) ── */
.kb2-reassign-btn {
    color: var(--kb2-terra-dk);
    border-color: var(--kb2-terra-dk);
}
.kb2-reassign-btn:hover { background: #FFF7F3; border-color: var(--kb2-terra); }

/* ── Inline reassign panel ── */
.kb2-reassign-panel {
    position: relative;
    margin-top: 8px;
    background: white;
    border: 1px solid var(--kb2-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    padding: 8px;
    z-index: 40;
}
.kb2-reassign-input {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--kb2-border); border-radius: 6px;
    padding: 6px 28px 6px 8px; font-size: 12px; color: var(--kb2-text);
    outline: none; font-family: inherit;
}
.kb2-reassign-input:focus { border-color: var(--kb2-terra); }
.kb2-reassign-list { margin-top: 4px; max-height: 160px; overflow-y: auto; }
.kb2-reassign-user {
    display: flex; align-items: center; gap: 7px; width: 100%;
    background: none; border: none; padding: 6px 8px; border-radius: 5px;
    text-align: left; font-size: 12px; color: var(--kb2-text); cursor: pointer; font-family: inherit;
}
.kb2-reassign-user:hover { background: var(--kb2-bg); }
.kb2-reassign-empty { font-size: 11px; color: var(--kb2-text-dim); padding: 4px 8px; }

/* ── Column resize handle ── */
.kb2-col-resize-handle {
    position: absolute; right: -4px; top: 0; bottom: 0; width: 8px;
    cursor: col-resize; z-index: 20;
}
.kb2-col-resize-handle:hover::after,
.kb2-col-resize-handle.active::after {
    content: ''; display: block; position: absolute; left: 3px; top: 10%;
    height: 80%; width: 2px; background: var(--kb2-terra); border-radius: 1px;
}

/* ── Responsive overrides for kb2 ── */
@media (max-width: 640px) {
    .kb2-instance-col { width: 100% !important; }
    .kb2-steps-scroll { max-height: none; }
    .kb2-photo-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   PSC Universal Shell — Spec Section 2.2 compliance
   ═══════════════════════════════════════════════════════════════ */

/* 1. Top color bar (6px) */
.psc-color-bar {
    height: 6px; border-radius: 8px 8px 0 0; flex-shrink: 0;
}

/* 2. Eyebrow strip — v1 (legacy compact strip kept for backward compat
 *                      when widgets still emit the old eyebrow content) */
.psc-eyebrow {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 14px; font-size: 0.72rem; font-weight: 500;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.psc-eyebrow-icon {
    font-size: 0.85rem; line-height: 1;
}
.psc-eyebrow-context {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--bk-grey-800);
}

/* 2b. Eyebrow v2 (2026-06-26) — repurposed as the PSC's main title row.
 *     Carries step label + ⓘ + 👥 + Assignee chip + status pill. The
 *     `.psc-eyebrow-v2` class layered on top of `.psc-eyebrow` upgrades
 *     it visually to a proper title strip. Wrapper title (above) shows
 *     the parent SOP instance name; this carries the per-step label.
 */
.psc-eyebrow-v2 {
    padding: 10px 14px;
    gap: 8px;
}
.psc-eyebrow-title {
    flex: 1;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bk-navy, #1a1a2e);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.psc-eyebrow-performers {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

/* 2c. Title group (v2.8.8, 2026-06-26) — wraps the step label h2 +
 *     the small PSC kind badge in a vertical flex column inside the
 *     eyebrow. Badge sits visually under the title (same eyebrow row,
 *     no separate horizontal row). Mirrors the kanban step-card layout. */
.psc-eyebrow-title-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.psc-eyebrow-title-group .psc-eyebrow-title { flex: 0 0 auto; }

/* PSC kind badge — small uppercase widget catalog name (e.g. PO HEADER,
 * CLIENT PICKER, DOCUMENT PICKER, GENERATE PDF). Inline text style, no
 * background/border — same visual treatment as the kanban card badges. */
.psc-kind-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bk-text-muted, #72727e);
    line-height: 1.2;
}

/* Urgency tone CSS vars — eyebrow + status pill */
.psc-urgency-red    { --psc-urgency: #DC2626; --psc-urgency-bg: rgba(220,38,38,0.08); }
.psc-urgency-amber  { --psc-urgency: #D97706; --psc-urgency-bg: rgba(217,119,6,0.08); }
.psc-urgency-green  { --psc-urgency: #059669; --psc-urgency-bg: rgba(5,150,105,0.08); }
.psc-urgency-navy   { --psc-urgency: #1a1a2e; --psc-urgency-bg: rgba(26,26,46,0.06); }

/* Status pill */
.psc-status-pill {
    background: var(--psc-urgency, #1a1a2e); color: #fff;
    font-size: 0.65rem; font-weight: 600;
    padding: 2px 8px; border-radius: 10px;
    text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
}

/* 3. Title + subtitle */
.psc-title-row {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 14px 2px;
}
.psc-title {
    flex: 1; margin: 0; font-size: 0.95rem; font-weight: 600;
    color: var(--bk-navy); line-height: 1.3;
}
.psc-title-actions {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
/* Primary "complete" = single navy icon (auto-grows if JS injects a text label,
   e.g. collection_create's "Continue → …"). The one primary action per card. */
.psc-btn-advance {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; min-width: 44px; padding: 0 13px;
    background: var(--bk-navy, #1a1a2e); color: #fff; border: 1px solid var(--bk-navy, #1a1a2e);
    border-radius: var(--bk-radius-sm, 6px); font-size: 0.8rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; transition: background 0.15s;
}
.psc-btn-advance:hover { background: #24243e; }
.psc-btn-advance:active { background: #15151f; }
.psc-btn-advance:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-btn-advance svg { flex-shrink: 0; }
.psc-close {
    background: none; border: none; cursor: pointer;
    font-size: 1.2rem; color: var(--bk-grey-600); padding: 0 2px; line-height: 1;
}
.psc-close:hover { color: var(--bk-grey-900); }
.psc-subtitle {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 0 14px 6px; font-size: 0.75rem; color: #777;
    border-bottom: 1px solid var(--bk-grey-200);
}

/* Widget type badge (in eyebrow) */
.psc-type-badge {
    font-size: 0.65rem; font-weight: 600;
    padding: 1px 6px; border-radius: 3px;
    background: rgba(0,0,0,0.06); white-space: nowrap;
}

/* 4. Body slot — scrollable in flex popup */
.psc-body {
    padding: 0;
    flex: 1; overflow-y: auto; min-height: 0;
}

/* ── Performer avatars ── */
.psc-performers {
    display: flex; align-items: center; gap: 4px;
}
.psc-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    color: var(--bk-card); font-size: 0.6rem; font-weight: 700;
    flex-shrink: 0; line-height: 1;
}
.psc-performer-names {
    font-size: 0.78rem; color: var(--bk-grey-800); margin-left: 2px;
}
.psc-due-text {
    font-size: 0.75rem; color: var(--bk-grey-600); margin-left: 4px;
}
.psc-assignee-required {
    font-size: 0.75rem; font-weight: 600;
    color: #b91c1c; background: #fee2e2;
    border: 1px solid #fca5a5; border-radius: 10px;
    padding: 2px 8px; margin-left: 4px;
    display: inline-flex; align-items: center; gap: 4px;
}
.psc-title-reassign {
    background: none; border: 1px solid var(--bk-grey-300);
    border-radius: 6px; cursor: pointer;
    padding: 4px 6px; margin-right: 4px;
    color: var(--bk-grey-600);
    display: inline-flex; align-items: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.psc-title-reassign:hover {
    background: var(--bk-grey-100);
    color: var(--bk-admin); border-color: var(--bk-admin);
}

/* Step Anatomy — read-only inspector trigger (producer-only). Gold accent
   distinguishes it from the reassign button. Opened by psc_anatomy.js. */
.psc-title-anatomy {
    background: none; border: 1px solid var(--bk-grey-300);
    border-radius: 6px; cursor: pointer;
    padding: 4px 6px; margin-right: 4px;
    color: var(--bk-grey-600);
    display: inline-flex; align-items: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.psc-title-anatomy:hover {
    background: var(--bk-gold-soft, #f5eedd);
    color: var(--bk-gold, #c29954); border-color: var(--bk-gold, #c29954);
}
.psc-title-anatomy:focus-visible {
    outline: 2px solid var(--bk-gold, #c29954); outline-offset: 2px;
}

/* ⓘ "What this step does" — shared across ALL PSCs (native <details>). */
.psc-info { position: relative; display: inline-block; margin-right: 4px; }
.psc-info > summary { list-style: none; }
.psc-info > summary::-webkit-details-marker { display: none; }
.psc-info-toggle {
    background: none; border: 1px solid var(--bk-grey-300);
    border-radius: 6px; cursor: pointer; padding: 4px 6px;
    color: var(--bk-grey-600); display: inline-flex; align-items: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.psc-info[open] > .psc-info-toggle,
.psc-info-toggle:hover { background: var(--bk-grey-100); color: var(--bk-navy, #1a1a2e); border-color: var(--bk-navy, #1a1a2e); }
.psc-info-toggle:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-info-pop {
    position: absolute; top: 34px; right: 0; z-index: 30; width: 280px; max-width: 78vw;
    background: var(--bk-card, #fff); border: 1px solid var(--bk-border, #e2e4e8);
    border-radius: 8px; box-shadow: var(--bk-shadow-md, 0 4px 16px rgba(0,0,0,0.14));
    padding: 12px 14px; text-align: left;
}
.psc-info-pop-title {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--bk-gold, #c29954); margin-bottom: 6px;
}
.psc-info-pop-body { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--bk-text, #2d2d3a); }
.psc-performer-by {
    display: inline-flex; align-items: center;
    gap: 4px; margin-left: 8px;
    font-size: 0.75rem; color: var(--bk-grey-600);
}
.psc-performer-by-label {
    font-style: italic;
}
.psc-avatar-performer {
    /* Distinguish performer avatar from assignee with a teal ring */
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--bk-teal, #2D7D7B);
}

/* 5. Footer — unified ONE row (Layout D). Minimal height so the BODY owns the card.
   Status is shown in the header pill, never here. ALWAYS one row (nowrap):
   the media row shrinks (min-width:0) to share the line with the action cluster. */
.psc-footer {
    display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
    padding: 4px 8px; border-top: 1px solid var(--bk-grey-200);
    background: var(--bk-grey-100); border-radius: 0 0 8px 8px; flex-shrink: 0;
}
.psc-footer-media { display: flex; align-items: center; gap: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.psc-footer-actions { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
/* Mobile-only "Media · N" collapse button — hidden on desktop, shown < 480px (see @media). */
.psc-media-collapse {
    display: none; align-items: center; gap: 6px; height: 44px; padding: 0 12px; flex-shrink: 0;
    border: 1px solid var(--bk-border, #e2e4e8); border-radius: 11px; background: var(--bk-card, #fff);
    color: var(--bk-navy, #1a1a2e); font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.psc-media-collapse:hover { background: var(--bk-parchment, #f4f5f7); }
.psc-media-collapse:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-mc-total {
    background: var(--bk-navy, #1a1a2e); color: #fff; border-radius: 9999px; font-size: 0.72rem;
    font-weight: 800; min-width: 20px; height: 20px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Unified media icon: grey = empty, black = filled, count span, hover-"+" to add */
.psc-media-icon { position: relative; display: inline-flex; align-items: center; }
.psc-count-chip {
    display: inline-flex; align-items: center; gap: 2px; position: relative;
    min-height: 44px; padding: 0 6px; background: none; border: none; border-radius: 7px;
    color: var(--bk-grey-400); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.psc-media-icon.filled .psc-count-chip { color: var(--bk-grey-900); }
.psc-count-chip:hover { background: var(--bk-grey-200); color: var(--bk-navy, #1a1a2e); }
.psc-count-chip:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-count-chip svg { flex-shrink: 0; }
.psc-count-chip span { font-size: 0.62rem; font-weight: 800; color: var(--bk-navy, #1a1a2e); }
.psc-media-icon:not(.filled) .psc-count-chip span { display: none; } /* count only when filled */

/* "+" = a REAL Add button on the icon (revealed on hover / focus). Clicking it
   opens the popover AND starts capture; clicking the icon body just views. */
.mi-plus-btn {
    position: absolute; top: -5px; left: -5px; z-index: 3;
    width: 20px; height: 20px; padding: 0; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--bk-card, #fff); border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.22);
    font-size: 1.2rem; font-weight: 800; line-height: 1; color: var(--bk-emerald, #10B981);
    opacity: 0; transition: opacity 0.12s, transform 0.12s;
}
.psc-media-icon:not(.can-add) .mi-plus-btn { display: none; }   /* terminal steps: no add */
.psc-media-icon.can-add:hover .mi-plus-btn,
.mi-plus-btn:focus-visible { opacity: 1; }
.mi-plus-btn:hover { transform: scale(1.12); }
.mi-plus-btn:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 1px; }

/* Right-cluster icon buttons (Reassign / Read / Share) */
.psc-add-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-height: 44px; min-width: 36px; padding: 0 8px;
    font-size: 0.72rem; color: var(--bk-grey-700);
    background: var(--bk-card, #fff); border: 1px solid var(--bk-border, #e2e4e8);
    border-radius: var(--bk-radius-sm, 6px); cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.psc-add-btn:hover { color: var(--bk-navy, #1a1a2e); border-color: var(--bk-grey-400); background: var(--bk-parchment, #f4f5f7); }
.psc-add-btn:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-add-btn svg { flex-shrink: 0; }
.psc-add-btn.psc-soon { opacity: 0.4; pointer-events: none; cursor: not-allowed; } /* Phase-2 placeholder */

/* Actions burger menu (native <details>, no JS) */
.psc-actions-menu { position: relative; }
.psc-actions-menu > summary {
    list-style: none; display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 36px; padding: 0 8px;
    background: var(--bk-card, #fff); border: 1px solid var(--bk-border, #e2e4e8);
    border-radius: var(--bk-radius-sm, 6px); color: var(--bk-grey-700); cursor: pointer;
}
.psc-actions-menu > summary::-webkit-details-marker { display: none; }
.psc-actions-menu > summary:hover { border-color: var(--bk-grey-400); color: var(--bk-navy, #1a1a2e); background: var(--bk-parchment, #f4f5f7); }
.psc-actions-menu[open] > summary { border-color: var(--bk-navy, #1a1a2e); color: var(--bk-navy, #1a1a2e); }
.psc-add-pop {
    position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 30;
    display: flex; flex-direction: column; gap: 2px; min-width: 188px; padding: 6px;
    background: var(--bk-card, #fff); border: 1px solid var(--bk-border, #e2e4e8);
    border-radius: 10px; box-shadow: var(--bk-shadow-lg, 0 4px 16px rgba(0,0,0,0.12));
}
.psc-add-pop .psc-add-btn { justify-content: flex-start; width: 100%; gap: 9px; font-size: 0.78rem; }

/* Calm at rest: dim the right action cluster until hover or the active step.
   Media icons are never dimmed — empty/grey already encodes their state. */
.psc-footer-actions { opacity: 0.55; transition: opacity 0.2s; }
.psc-footer:hover .psc-footer-actions,
.psc-footer.psc-footer-active .psc-footer-actions { opacity: 1; }

/* ── Inline "Add" controls inside each media popover (psc_media_add.js) ── */
.psc-media-add { padding: 8px 10px; border-top: 1px solid var(--bk-border, #e2e4e8); }
.psc-media-add-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
    width: 100%; justify-content: center; padding: 0 14px;
    background: var(--bk-card, #fff); color: var(--bk-navy, #1a1a2e);
    border: 1px dashed var(--bk-grey-400, #ccc); border-radius: var(--bk-radius-sm, 6px);
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.psc-media-add-btn:hover { background: var(--bk-parchment, #f4f5f7); border-color: var(--bk-navy, #1a1a2e); }
.psc-media-add-btn:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-media-add-btn:disabled { opacity: 0.5; pointer-events: none; }
.psc-media-add-plus { font-size: 1.1rem; font-weight: 800; line-height: 1; color: var(--bk-emerald, #10B981); }
.psc-comment-add { display: flex; gap: 6px; align-items: flex-end; }
.psc-comment-input {
    flex: 1; resize: vertical; min-height: 38px; padding: 8px 10px;
    border: 1px solid var(--bk-grey-300, #e0e0e0); border-radius: var(--bk-radius-sm, 6px);
    font-family: inherit; font-size: 0.82rem; box-sizing: border-box;
}
.psc-comment-input:focus { outline: none; border-color: var(--bk-navy, #1a1a2e); box-shadow: 0 0 0 2px rgba(26,26,46,0.12); }
.psc-comment-add .psc-comment-send { width: auto; flex-shrink: 0; }

/* ── In-popover live capture area (psc_media_add.js) ── */
.psc-capture-area { padding: 8px 0; }
.psc-capture-video {
    width: 100%; max-height: 240px; background: #000; border-radius: var(--bk-radius-sm, 6px);
    object-fit: cover; display: block;
}
.psc-capture-msg { padding: 12px; text-align: center; font-size: 0.82rem; color: var(--bk-text-muted, #6c757d); }
.psc-capture-err { color: var(--bk-red, #DC2626); }
.psc-capture-rec {
    display: flex; align-items: center; gap: 8px; padding: 8px 4px;
    font-size: 0.82rem; font-weight: 600; color: #b91c1c;
}
.psc-capture-controls { display: flex; gap: 8px; margin-top: 8px; }
.psc-cap-btn {
    flex: 1; min-height: 44px; padding: 0 14px; cursor: pointer;
    border-radius: var(--bk-radius-sm, 6px); border: 1px solid var(--bk-border, #e2e4e8);
    background: var(--bk-card, #fff); color: var(--bk-navy, #1a1a2e);
    font-size: 0.82rem; font-weight: 600;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.psc-cap-btn:hover { background: var(--bk-parchment, #f4f5f7); border-color: var(--bk-grey-400, #ccc); }
.psc-cap-btn:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-cap-btn:disabled { opacity: 0.5; pointer-events: none; }
.psc-cap-primary { background: var(--bk-navy, #1a1a2e); color: #fff; border-color: var(--bk-navy, #1a1a2e); }
.psc-cap-primary:hover { background: #24243e; }
.psc-cap-stop { background: #ef4444; color: #fff; border-color: #ef4444; }
.psc-cap-stop:hover { background: var(--bk-red, #DC2626); }
.psc-cap-cancel { flex: 0 0 auto; }

/* ── Footer right-cluster: read-aloud state, modal/send dialog, toast ── */
.psc-add-btn.is-speaking { color: var(--bk-emerald, #10B981); background: #ecfdf5; border-color: var(--bk-emerald, #10B981); }

.psc-modal-overlay {
    position: fixed; inset: 0; z-index: 100000; background: rgba(26,26,46,0.45);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.psc-modal {
    background: var(--bk-card, #fff); border-radius: 12px; box-shadow: var(--bk-shadow-lg, 0 4px 16px rgba(0,0,0,0.12));
    width: 380px; max-width: 100%; padding: 18px 18px 16px; box-sizing: border-box;
}
.psc-modal-title { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--bk-navy, #1a1a2e); }
.psc-modal-sub { margin: 0 0 12px; font-size: 0.8rem; color: var(--bk-text-muted, #6c757d); }
.psc-modal-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bk-text-muted, #6c757d); margin: 10px 0 6px; }
.psc-modal-status {
    margin: 10px 0 0; padding: 8px 10px; border-radius: var(--bk-radius-sm, 6px);
    font-size: 0.8rem; font-weight: 600; color: var(--bk-navy, #1a1a2e);
    background: var(--bk-parchment, #f4f5f7); border: 1px solid var(--bk-border, #e2e4e8);
    display: flex; align-items: center; gap: 8px;
}
.psc-modal-status::before {
    content: ''; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--bk-border, #e2e4e8); border-top-color: var(--bk-gold, #c29954);
    animation: psc-modal-spin 0.8s linear infinite;
}
.psc-modal-status.is-err { color: var(--bk-red, #DC2626); background: #fef2f2; border-color: #fecaca; }
.psc-modal-status.is-err::before { content: '!'; border: none; width: auto; height: auto; animation: none; font-weight: 800; color: var(--bk-red, #DC2626); }
.psc-modal-status.is-done::before { content: '\2713'; border: none; width: auto; height: auto; animation: none; font-weight: 800; color: var(--bk-emerald, #10B981); }
.psc-modal-status.is-done { color: var(--bk-emerald, #10B981); background: #ecfdf5; border-color: #a7f3d0; }
@keyframes psc-modal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .psc-modal-status::before { animation: none; } }
.psc-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.psc-chan-row { display: flex; flex-wrap: wrap; gap: 6px; }
.psc-chan-btn {
    flex: 1 1 auto; min-height: 40px; padding: 0 12px; cursor: pointer;
    border: 1px solid var(--bk-border, #e2e4e8); border-radius: var(--bk-radius-sm, 6px);
    background: var(--bk-card, #fff); color: var(--bk-navy, #1a1a2e); font-size: 0.8rem; font-weight: 600;
    transition: background 0.12s, border-color 0.12s;
}
.psc-chan-btn:hover { background: var(--bk-parchment, #f4f5f7); }
.psc-chan-btn:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-chan-btn.is-sel { background: var(--bk-navy, #1a1a2e); color: #fff; border-color: var(--bk-navy, #1a1a2e); }
.psc-recip-input {
    width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 10px;
    border: 1px solid var(--bk-grey-300, #e0e0e0); border-radius: var(--bk-radius-sm, 6px); font-size: 0.85rem;
}
.psc-recip-input:focus { outline: none; border-color: var(--bk-navy, #1a1a2e); box-shadow: 0 0 0 2px rgba(26,26,46,0.12); }
.psc-recip-list { max-height: 180px; overflow-y: auto; margin-top: 4px; }
.psc-recip-row {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px;
    background: none; border: none; border-radius: 5px; cursor: pointer; text-align: left;
    font-size: 0.85rem; color: var(--bk-text, #2d2d3a);
}
.psc-recip-row:hover { background: var(--bk-grey-100, #f8f8f8); }
.psc-recip-empty { padding: 10px 8px; font-size: 0.8rem; color: var(--bk-grey-500, #999); text-align: center; }
.psc-mini-av { width: 28px; height: 28px; border-radius: 50%; background: var(--bk-navy, #1a1a2e); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex: 0 0 auto; }
.psc-mini-grp { background: var(--bk-gold, #c29954); border-radius: 7px; }
.psc-recip-count { margin-left: auto; font-size: 0.76rem; color: var(--bk-text-muted, #6c757d); }

/* ── Send / Export modal (two tabs: Send out · Shared) ── */
.psc-modal:has(.psc-se-tabs) { width: 520px; }
.psc-se-head { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 14px; }
.psc-se-x { width: 44px; height: 44px; border: none; background: none; font-size: 1.5rem; line-height: 1;
  color: var(--bk-text-muted, #6c757d); cursor: pointer; border-radius: 8px; }
.psc-se-x:hover { background: rgba(0,0,0,0.05); }
.psc-se-x:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-se-tabs { display: flex; gap: 6px; background: var(--bk-parchment, #efe7d8); border-radius: 14px; padding: 5px; margin-bottom: 18px; }
.psc-se-tab { flex: 1; min-height: 44px; border: none; border-radius: 10px; background: none; cursor: pointer;
  font-size: 0.92rem; font-weight: 700; color: var(--bk-text-muted, #6c757d); transition: background 0.12s, color 0.12s; }
.psc-se-tab.is-active { background: var(--bk-card, #fff); color: var(--bk-navy, #1a1a2e); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.psc-se-tab:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-se-fmts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.psc-se-fmt { min-height: 76px; border: 2px solid var(--bk-border, #e2e4e8); border-radius: 14px; background: var(--bk-card, #fff);
  cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: border-color 0.12s, background 0.12s; }
.psc-se-fmt b { color: var(--bk-navy, #1a1a2e); font-size: 0.98rem; }
.psc-se-fmt small { color: var(--bk-text-muted, #6c757d); font-size: 0.72rem; }
.psc-se-fmt.is-sel { border-color: var(--bk-navy, #1a1a2e); background: var(--bk-parchment, #f4f5f7); }
.psc-se-fmt:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-se-hint { font-size: 0.76rem; color: var(--bk-text-muted, #6c757d); margin: 8px 0 0; line-height: 1.4; }
.psc-se-send { flex: 1; min-height: 44px; border: none; border-radius: 10px; color: #fff; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; background: var(--bk-navy, #1a1a2e); transition: background 0.12s; }
.psc-se-send:hover { background: #24243e; }
.psc-se-send:active { background: #12121f; }
.psc-se-send:disabled { opacity: 0.45; pointer-events: none; }
.psc-se-send:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .psc-se-tab, .psc-se-fmt, .psc-se-send { transition: none; } }
.psc-share-row { display: flex; gap: 6px; }
.psc-share-input {
    flex: 1; min-width: 0; padding: 8px 10px; font-size: 0.82rem; font-family: var(--bk-font-mono, monospace);
    border: 1px solid var(--bk-grey-300, #e0e0e0); border-radius: var(--bk-radius-sm, 6px); box-sizing: border-box;
}
.psc-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
    z-index: 100001; background: var(--bk-navy, #1a1a2e); color: #fff;
    padding: 10px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 600;
    box-shadow: var(--bk-shadow-lg, 0 4px 16px rgba(0,0,0,0.12)); opacity: 0; transition: opacity 0.25s, transform 0.25s;
    max-width: 80vw;
}
.psc-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.psc-toast.is-ok { background: var(--bk-emerald, #10B981); }
@media (prefers-reduced-motion: reduce) { .psc-toast { transition: none; } }

/* Footer button tiers */
/* ── PSC buttons — Aesthetic Foundation compliant ──
   6 variants, 5 states each (default/hover/active/focus-visible/disabled),
   44px minimum hit target, --bk-* tokens (no raw hex except token fallbacks). */
.psc-btn-primary, .psc-btn-secondary, .psc-btn-confirm,
.psc-btn-destructive, .psc-btn-ghost, .psc-btn-tertiary {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 0.55rem 1.25rem;
    border-radius: var(--bk-radius-sm, 6px);
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s, opacity 0.15s, box-shadow 0.15s;
}
/* Primary — navy (main CTA / one per card) */
.psc-btn-primary {
    background: var(--bk-navy, #1a1a2e); color: #fff;
    border: 1px solid var(--bk-navy, #1a1a2e);
}
.psc-btn-primary:hover { background: #24243e; }
.psc-btn-primary:active { background: #0f0f1c; }
.psc-btn-primary:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-btn-primary:disabled, .psc-btn-primary.disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
/* Secondary — outline (cancel / bulk helpers) */
.psc-btn-secondary {
    background: var(--bk-card, #fff); color: var(--bk-navy, #1a1a2e);
    border: 1px solid var(--bk-border, #e2e4e8);
}
.psc-btn-secondary:hover { background: var(--bk-parchment, #f4f5f7); }
.psc-btn-secondary:active { background: #e9ecef; }
.psc-btn-secondary:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-btn-secondary:disabled, .psc-btn-secondary.disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
/* Confirm — emerald (positive commit) */
.psc-btn-confirm {
    background: var(--bk-emerald, #10B981); color: #fff;
    border: 1px solid var(--bk-emerald, #10B981);
}
.psc-btn-confirm:hover { background: #059669; }
.psc-btn-confirm:active { background: #047857; }
.psc-btn-confirm:focus-visible { outline: 2px solid var(--bk-emerald, #10B981); outline-offset: 2px; }
.psc-btn-confirm:disabled, .psc-btn-confirm.disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
/* Destructive — red outline (irreversible) */
.psc-btn-destructive {
    background: var(--bk-card, #fff); color: var(--bk-red, #DC2626);
    border: 1px solid var(--bk-red, #DC2626);
}
.psc-btn-destructive:hover { background: #fef2f2; }
.psc-btn-destructive:active { background: #fee2e2; }
.psc-btn-destructive:focus-visible { outline: 2px solid var(--bk-red, #DC2626); outline-offset: 2px; }
.psc-btn-destructive:disabled, .psc-btn-destructive.disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
/* Ghost / tertiary — transparent (low-emphasis: redo, dismiss) */
.psc-btn-ghost, .psc-btn-tertiary {
    background: none; color: var(--bk-navy, #1a1a2e);
    border: 1px solid transparent;
}
.psc-btn-ghost:hover, .psc-btn-tertiary:hover { background: var(--bk-parchment, #f4f5f7); }
.psc-btn-ghost:active, .psc-btn-tertiary:active { background: #e9ecef; }
.psc-btn-ghost:focus-visible, .psc-btn-tertiary:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-btn-ghost:disabled, .psc-btn-tertiary:disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; }

/* ── Inline voice recording bar ── */
.psc-rec-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; background: #fef3f2;
    border-top: 1px solid #fecaca;
}
.psc-rec-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--bk-red); animation: psc-pulse 1s infinite;
}
@keyframes psc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.psc-rec-label {
    flex: 1; font-size: 0.8rem; font-weight: 600; color: #b91c1c;
}
.psc-rec-stop {
    padding: 4px 12px; background: #ef4444; color: var(--bk-card);
    border: none; border-radius: 4px; font-size: 0.78rem;
    font-weight: 600; cursor: pointer;
}
.psc-rec-stop:hover { background: var(--bk-red); }
.psc-rec-close {
    background: none; border: none; font-size: 1rem;
    color: var(--bk-grey-600); cursor: pointer; padding: 0 4px;
}
.psc-rec-close:hover { color: var(--bk-grey-900); }

/* ── Inline camera/video capture bar ── */
.psc-cam-bar {
    position: relative; background: #000;
    border-top: 1px solid var(--bk-grey-900);
}
.psc-cam-video {
    width: 100%; max-height: 240px; object-fit: cover;
    display: block;
}
.psc-cam-preview {
    width: 100%; max-height: 240px; object-fit: cover;
    display: block;
}
.psc-cam-controls {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; background: rgba(0,0,0,0.7);
    position: absolute; bottom: 0; left: 0; right: 0;
}
.psc-cam-label {
    flex: 1; font-size: 0.8rem; color: var(--bk-card); font-weight: 500;
}
.psc-cam-capture-btn {
    padding: 5px 14px; background: var(--bk-card); color: var(--bk-navy);
    border: none; border-radius: 5px; font-size: 0.8rem;
    font-weight: 600; cursor: pointer;
}
.psc-cam-capture-btn.psc-cam-recording {
    background: #ef4444; color: var(--bk-card);
}
.psc-cam-close-btn {
    background: none; border: none; color: var(--bk-card);
    font-size: 1.1rem; cursor: pointer; padding: 0 4px;
}
.psc-cam-close-btn:hover { color: var(--bk-grey-300); }

/* ── Reassign panel ── */
.psc-reassign-panel {
    border-top: 1px solid var(--bk-grey-300); background: #fafbfc;
    padding: 10px 16px;
}
.psc-reassign-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.psc-reassign-title {
    font-size: 0.82rem; font-weight: 600; color: var(--bk-text);
}
.psc-reassign-panel .psc-cam-close-btn { color: var(--bk-grey-600); }
.psc-reassign-panel .psc-cam-close-btn:hover { color: var(--bk-grey-900); }
.psc-reassign-input {
    width: 100%; padding: 7px 10px; border: 1px solid var(--bk-grey-300);
    border-radius: 5px; font-size: 0.82rem; background: var(--bk-card);
    box-sizing: border-box; margin-bottom: 6px;
}
.psc-reassign-input:focus {
    border-color: var(--bk-admin); outline: none;
    box-shadow: 0 0 0 2px rgba(65,118,144,0.15);
}
.psc-reassign-list {
    max-height: 180px; overflow-y: auto;
}
.psc-reassign-user {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 6px 8px; background: none;
    border: none; border-radius: 4px; cursor: pointer;
    text-align: left; font-size: 0.82rem; color: var(--bk-text);
}
.psc-reassign-user:hover { background: var(--bk-grey-100); }
.psc-mini-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    color: var(--bk-card); font-size: 0.6rem; font-weight: 700;
    flex-shrink: 0;
}
.psc-reassign-empty {
    font-size: 0.8rem; color: var(--bk-grey-500); padding: 8px;
    text-align: center;
}
.psc-reassign-btn { margin-left: 2px; }

/* ── Multi-assignee picker (quorum/all steps) — the standard-picker controls ── */
/* [hidden] must beat the class display rules below (single mode hides these). */
.psc-reassign-tools[hidden], .psc-reassign-foot[hidden] { display: none; }
.psc-reassign-tools {
    display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0 2px;
}
.psc-reassign-tool {
    border: 1px solid var(--bk-border, #d1d1d9); background: var(--bk-card, #fff);
    border-radius: 999px; padding: 4px 10px; font-size: 0.72rem; font-weight: 600;
    color: var(--bk-navy, #1a1a2e); cursor: pointer;
}
.psc-reassign-tool:hover { border-color: var(--bk-gold, #c29954); }
.psc-reassign-tool.is-on { background: var(--bk-navy, #1a1a2e); color: #fff; border-color: var(--bk-navy, #1a1a2e); }
/* Inline checkbox chips — compact, wrapping (not one row per person). */
.psc-reassign-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 6px 2px; }
.psc-reassign-chip {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--bk-border, #d1d1d9); border-radius: 999px;
    padding: 5px 11px 5px 8px; font-size: 0.82rem; cursor: pointer;
    background: var(--bk-card, #fff); white-space: nowrap; color: var(--bk-text, #2d2d3a);
}
.psc-reassign-chip:hover { border-color: var(--bk-gold, #c29954); }
.psc-reassign-chip.is-sel { background: #eafaf1; border-color: var(--bk-emerald, #2e7d32); }
.psc-reassign-chip input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--bk-emerald, #2e7d32); flex-shrink: 0; margin: 0;
}
.psc-reassign-chip .psc-mini-avatar { width: 22px; height: 22px; }
.psc-reassign-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 2px 2px; margin-top: 6px; border-top: 1px solid var(--bk-border, #e2e4e8);
}
.psc-reassign-count { font-size: 0.78rem; color: var(--bk-grey-600, #72727e); }
.psc-reassign-confirm {
    margin-left: auto; min-height: 36px; padding: 0 14px;
    border: none; border-radius: 8px; font-size: 0.82rem; font-weight: 700;
    background: var(--bk-navy, #1a1a2e); color: #fff; cursor: pointer;
}
.psc-reassign-confirm:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── PSC default body (GAP 7 — CardSpec field composition) ── */
.psc-default-body { padding: 12px 16px; }
.psc-field-text { margin: 4px 0; font-size: 0.88rem; color: var(--bk-grey-900); }
.psc-field-rich { margin: 6px 0; font-size: 0.88rem; line-height: 1.5; }
.psc-field-checklist { margin: 6px 0; }
.psc-field-images { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.psc-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; cursor: pointer; }
.psc-field-upload {
    border: 2px dashed var(--bk-grey-400); border-radius: 8px; padding: 24px;
    text-align: center; color: var(--bk-grey-600); cursor: pointer; margin: 6px 0;
}
.psc-field-upload:hover { border-color: var(--bk-grey-500); background: #fafafa; }
.psc-field-metric {
    display: inline-flex; flex-direction: column; align-items: center;
    padding: 8px 16px; margin: 4px 6px 4px 0; background: var(--bk-grey-100);
    border-radius: 6px;
}
.psc-metric-value { font-size: 1.4rem; font-weight: 700; color: var(--bk-navy); }
.psc-metric-label { font-size: 0.7rem; color: var(--bk-grey-600); text-transform: uppercase; }
.psc-field-pdf {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; background: #fff3e0; border-radius: 4px;
    color: #e65100; text-decoration: none; font-size: 0.85rem; margin: 4px 0;
}
.psc-field-pdf:hover { background: #ffe0b2; }
.psc-field-audio { width: 100%; margin: 6px 0; }
.psc-field-voting { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.psc-vote-btn {
    padding: 6px 16px; border: 1px solid var(--bk-grey-400); border-radius: 20px;
    background: var(--bk-card); cursor: pointer; font-size: 0.85rem;
}
.psc-vote-btn:hover { background: var(--bk-grey-200); }
.psc-field-matrix { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 0.82rem; }
.psc-field-matrix td { padding: 4px 8px; border: 1px solid var(--bk-grey-300); }
.psc-description { color: var(--bk-grey-800); font-size: 0.88rem; margin: 6px 0; }
.psc-hint { color: var(--bk-grey-500); font-size: 0.82rem; font-style: italic; margin: 4px 0; }
.psc-default-actions { margin-top: 12px; }

/* ── PSC Tier 1: quick_entry — single-field capture, phone-friendly ── */
.psc-body-quick-entry {
    padding: 20px 16px 12px;
    display: flex; flex-direction: column; align-items: stretch;
}
.psc-qe-label {
    font-size: 1.1rem; font-weight: 700; color: var(--bk-navy);
    margin-bottom: 4px; line-height: 1.3;
}
.psc-qe-hint {
    font-size: 0.82rem; color: var(--bk-grey-600); margin: 0 0 12px;
    line-height: 1.4;
}
.psc-qe-input {
    width: 100%; box-sizing: border-box;
    padding: 14px 16px; font-size: 1.25rem;
    border: 2px solid var(--bk-grey-300); border-radius: 8px;
    background: #fafbfc; color: var(--bk-navy);
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.psc-qe-input:focus {
    border-color: #417690; box-shadow: 0 0 0 3px rgba(65,118,144,.15);
    background: var(--bk-card);
}
.psc-qe-input::placeholder { color: #b0b8c4; font-weight: 400; }
.psc-qe-save-btn {
    display: block; width: 100%; margin-top: 10px;
    background: var(--bk-navy, #1a1a2e); color: #fff; border: none;
    padding: 5px 14px; border-radius: 5px; font-size: 0.8rem;
    font-weight: 600; cursor: pointer;
}
.psc-qe-save-btn:hover { opacity: 0.9; }
.psc-qe-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px; min-height: 22px;
}
.psc-qe-status { font-size: 0.8rem; font-weight: 600; }
.psc-qe-enter-hint {
    font-size: 0.75rem; color: #aab; font-style: italic;
}
/* Scanner — input row with scan button (uses footer psc-cam-bar for camera) */
.psc-scan-input-row {
    display: flex; gap: 6px; align-items: stretch;
}
.psc-scan-input-row .psc-qe-input {
    flex: 1; margin-bottom: 0;
}
.psc-scan-btn {
    flex-shrink: 0; width: 44px;
    background: var(--bk-navy, #1a1a2e); color: #fff; border: none;
    border-radius: 6px; font-size: 1.1rem; cursor: pointer;
}
.psc-scan-btn:hover { opacity: 0.9; }
.psc-qe-ok { color: var(--bk-emerald); }
.psc-qe-err { color: var(--bk-red); }
.psc-qe-invalid {
    border-color: var(--bk-red) !important;
    box-shadow: 0 0 0 3px rgba(198,40,40,.15) !important;
}
/* Phone-friendly: bigger touch target */
@media (max-width: 480px) {
    .psc-qe-input { font-size: 1.4rem; padding: 16px; }
    .psc-qe-label { font-size: 1.2rem; }
}

/* ── PSC Tier 1: assign_step ── */
.psc-body-assign { padding: 12px 16px; }
.psc-body-assign label { font-size: 0.82rem; font-weight: 600; color: var(--bk-grey-800); margin-bottom: 6px; display: block; }
.psc-body-assign select {
    width: 100%; padding: 8px; border: 1px solid var(--bk-grey-300); border-radius: 4px;
    font-size: 0.88rem; margin-bottom: 10px;
}

/* ── PSC Tier 1: wait_step ── */
.psc-body-wait { padding: 16px; text-align: center; }
.psc-wait-timer {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 20px; background: var(--bk-grey-100); border-radius: 8px; margin-bottom: 8px;
}
.psc-wait-timer .material-symbols-outlined { font-size: 2rem; color: #78909c; }
.psc-wait-label { font-size: 0.9rem; color: var(--bk-grey-800); }
.psc-wait-due { font-size: 0.82rem; color: var(--bk-grey-600); }

/* ── Changelist Step — PSC spec compliant ── */
.psc-cl-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.psc-cl-title {
    font-size: 0.9rem; font-weight: 700; color: var(--bk-navy, #1a1a2e);
}
.psc-cl-badge {
    background: var(--bk-navy, #1a1a2e); color: #fff;
    font-size: 0.7rem; font-weight: 700;
    padding: 2px 8px; border-radius: 10px;
}
.psc-cl-actions {
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 8px; flex-wrap: wrap;
}
.psc-cl-action-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: #f4f5f7; border: 1px solid var(--bk-grey-300);
    color: var(--bk-navy, #1a1a2e); font-size: 0.75rem; font-weight: 600;
    padding: 5px 10px; border-radius: 5px; cursor: pointer;
    transition: background .15s;
}
.psc-cl-action-btn:hover { background: #e8e9ed; }
.psc-cl-action-btn:active { background: var(--bk-grey-300); }
.psc-cl-action-btn input[type="checkbox"] { margin: 0; cursor: pointer; }
.psc-changelist-wrap {
    max-height: calc(82vh - 280px); overflow: auto;
    border: 1px solid var(--bk-grey-300); border-radius: 6px;
}
.psc-changelist-table {
    width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 0.82rem;
}
.psc-changelist-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--bk-navy, #1a1a2e); color: #fff;
    font-weight: 600; font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 8px 10px; text-align: left; white-space: nowrap;
    border-bottom: 2px solid var(--bk-gold, #c29954);
    user-select: none;
}
.psc-changelist-table thead th[draggable="true"] { cursor: grab; }
.psc-changelist-table thead th[draggable="true"]:active { cursor: grabbing; }
/* Column resize handle (appended by JS) */
.psc-col-resize:hover { background: rgba(255,255,255,0.25); }
.psc-cl-th-check, .psc-cl-td-check { width: 32px; text-align: center; }
.psc-changelist-table tbody td {
    padding: 3px 4px; border-bottom: 1px solid var(--bk-border);
    white-space: nowrap; color: var(--bk-text);
}
.psc-changelist-table tbody tr:nth-child(even) td { background: var(--bk-stripe); }
.psc-changelist-table tbody tr:hover td { background: #eef3ff; }
.psc-changelist-table tbody tr.psc-cl-selected td { background: var(--bk-status-in_progress-bg); }
.psc-changelist-table tbody tr.psc-cl-dirty td { border-left: 2px solid var(--bk-amber); }
.psc-changelist-table .psc-cl-check { cursor: pointer; }
.psc-cl-empty { text-align: center; color: var(--bk-grey-600); padding: 1.5rem !important; }
/* Editable inputs inside cells */
.psc-cl-input {
    width: 100%; box-sizing: border-box; border: 1px solid var(--bk-grey-300);
    border-radius: 3px; padding: 3px 5px; font-size: 0.78rem;
    background: var(--bk-card); color: var(--bk-text);
}
.psc-cl-input:focus { border-color: var(--bk-navy, #1a1a2e); outline: none; box-shadow: 0 0 0 1px rgba(26,26,46,0.15); }
.psc-cl-check-edit { cursor: pointer; }
/* Set-All row */
.psc-cl-set-all-row td {
    background: #eef3ff !important; border-bottom: 2px solid var(--bk-admin);
    padding: 4px;
}
.psc-cl-sa-label {
    font-size: 0.65rem; font-weight: 700; color: var(--bk-admin);
    text-transform: uppercase; text-align: center; white-space: nowrap;
}
.psc-cl-set-all-row .psc-cl-input { border-color: #b8cff0; font-size: 0.75rem; }
/* Footer bar with status + Done */
.psc-cl-footer-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; margin-top: 4px;
}
.psc-cl-status {
    font-size: 0.78rem; color: var(--bk-navy, #1a1a2e);
    min-height: 1.2em; font-weight: 600; flex: 1;
}
.psc-cl-done-btn {
    background: var(--bk-navy, #1a1a2e); color: #fff; border: none;
    padding: 6px 16px; border-radius: 5px; font-size: 0.8rem;
    font-weight: 600; cursor: pointer; white-space: nowrap;
}
.psc-cl-done-btn:hover { opacity: 0.85; }
.psc-cl-save-btn { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════ */
/* PSC — Comment Preview Strip                                     */
/* ═══════════════════════════════════════════════════════════════ */
.psc-comment-strip {
    border-top: 1px solid var(--bk-grey-300); padding: 5px 10px; flex-shrink: 0;
}
.psc-comment-preview {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 4px 6px; border-radius: 6px; cursor: pointer;
    background: #f8f9fa; margin-bottom: 4px;
    transition: background .12s;
}
.psc-comment-preview:hover { background: #eef3ff; }
.psc-preview-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    color: var(--bk-card); font-size: 0.52rem; font-weight: 700;
    flex-shrink: 0; line-height: 1;
}
.psc-preview-body {
    flex: 1; min-width: 0; margin: 0;
    font-size: 0.78rem; color: var(--bk-grey-800); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.psc-preview-name {
    font-weight: 700; color: var(--bk-text);
}
.psc-preview-more {
    font-size: 0.68rem; color: var(--bk-admin); font-weight: 600;
    flex-shrink: 0; align-self: center; margin-left: 4px;
}
.psc-comment-input-row {
    display: flex; gap: 6px; align-items: center;
}
.psc-comment-input {
    flex: 1; padding: 5px 10px; border: 1px solid var(--bk-grey-300);
    border-radius: 18px; font-size: 0.78rem; background: var(--bk-card);
    box-sizing: border-box;
}
.psc-comment-input:focus {
    border-color: var(--bk-admin); outline: none;
    box-shadow: 0 0 0 2px rgba(65,118,144,0.12);
}
.psc-comment-send {
    padding: 4px 12px; border: none; border-radius: 18px;
    background: var(--bk-navy, #1a1a2e); color: #fff;
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: opacity .15s;
}
.psc-comment-send:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════ */
/* PSC — Media Panels (photos, videos, voice, comments, files)     */
/* ═══════════════════════════════════════════════════════════════ */
.psc-media-panel {
    position: fixed; z-index: 100000;
    width: 320px; max-height: 360px;
    background: var(--bk-card); border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
    animation: pscPanelPop 0.15s ease-out;
    overflow: hidden;
    display: flex; flex-direction: column;
}
@keyframes pscPanelPop {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.psc-media-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px 6px;
    background: #f8f9fa; flex-shrink: 0;
    border-bottom: 1px solid var(--bk-grey-300);
    cursor: grab; user-select: none;
    border-radius: 8px 8px 0 0;
}
.psc-media-panel-title {
    font-size: 0.78rem; font-weight: 700; color: var(--bk-text);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.psc-media-panel-close {
    background: none; border: none; cursor: pointer;
    font-size: 1rem; color: var(--bk-grey-500); padding: 2px 4px; border-radius: 4px;
    line-height: 1;
}
.psc-media-panel-close:hover { color: var(--bk-text); background: var(--bk-grey-100); }
.psc-media-panel-body {
    padding: 6px 14px 14px; overflow-y: auto; flex: 1;
}

/* ── Photo grid ── */
.psc-photo-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 6px;
}
.psc-photo-thumb {
    position: relative; border-radius: 6px; overflow: hidden;
    background: var(--bk-grey-100);
}
.psc-photo-img {
    width: 100%; aspect-ratio: 1; object-fit: cover; cursor: pointer;
    display: block; transition: transform .15s;
}
.psc-photo-img:hover { transform: scale(1.05); }
.psc-photo-meta {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.55));
    padding: 14px 6px 4px; display: flex; align-items: center;
    justify-content: space-between;
}
.psc-photo-by {
    font-size: 0.62rem; color: var(--bk-card); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Video items ── */
.psc-video-item {
    margin-bottom: 10px; border-radius: 6px; overflow: hidden;
    background: #f9fafb; border: 1px solid var(--bk-grey-300);
}
.psc-video-player {
    width: 100%; max-height: 200px; display: block; background: #000;
}
.psc-video-meta {
    display: flex; align-items: center; gap: 6px; padding: 6px 10px;
}
.psc-video-name {
    font-size: 0.78rem; color: var(--bk-text); font-weight: 500;
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}
.psc-video-by { font-size: 0.68rem; color: var(--bk-grey-500); }

/* ── Voice note items ── */
.psc-voice-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid var(--bk-grey-100);
}
.psc-voice-item:last-child { border-bottom: none; }
.psc-voice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.psc-voice-name { font-size: 0.75rem; color: var(--bk-text); font-weight: 500; }
.psc-voice-audio { width: 100%; height: 32px; }

/* Transcript line under the audio control (Phase 1.2). Reads as a quiet
   secondary line — same column as the audio control, indented slightly,
   muted-text colour to avoid competing with the player UI. */
.psc-vn-transcript {
    margin: 4px 0 0;
    padding: 4px 8px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--bk-text-muted, #6c757d);
    background: var(--bk-surface-inset, #f0f2f5);
    border-radius: 6px;
    word-break: break-word;
}
.psc-vn-transcript-ready { color: var(--bk-text, #2d2d3a); }
.psc-vn-transcribing {
    display: inline-flex; align-items: center; gap: 6px;
    font-style: italic; color: var(--bk-text-muted, #6c757d);
}
.psc-vn-spin {
    width: 10px; height: 10px;
    border: 2px solid var(--bk-border, #e2e4e8);
    border-top-color: var(--bk-gold, #c29954);
    border-radius: 50%;
    display: inline-block;
    animation: psc-vn-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes psc-vn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .psc-vn-spin { animation-duration: 0.01ms !important; }
}

/* ── Comment rows (panel) ── */
.psc-comments-list { display: flex; flex-direction: column; gap: 2px; }
.psc-comment-row {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 6px; border-radius: 6px;
    transition: background .1s;
}
.psc-comment-row:hover { background: #f9fafb; }
.psc-comment-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.psc-comment-author { font-size: 0.72rem; font-weight: 600; color: var(--bk-text); }
.psc-comment-text { font-size: 0.82rem; color: var(--bk-grey-800); line-height: 1.4; word-break: break-word; }
.psc-comment-ts { font-size: 0.62rem; color: var(--bk-grey-500); margin-top: 2px; }

/* ── File items ── */
.psc-file-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid var(--bk-grey-100);
}
.psc-file-item:last-child { border-bottom: none; }
.psc-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.psc-file-link {
    font-size: 0.82rem; color: var(--bk-admin); font-weight: 500;
    text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.psc-file-link:hover { text-decoration: underline; }
.psc-file-by { font-size: 0.65rem; color: var(--bk-grey-500); }

/* ── Shared: media delete button ── */
.psc-media-del {
    background: none; border: none; cursor: pointer;
    color: var(--bk-grey-300); font-size: 0.85rem; padding: 2px 4px;
    border-radius: 4px; flex-shrink: 0; line-height: 1;
    transition: color .12s, background .12s;
}
.psc-media-del:hover { color: var(--bk-red); background: #fef2f2; }

/* ══════════════════════════════════════════════════════════════
   ERP Wizard Step PSC — .kb-wiz-*
   ══════════════════════════════════════════════════════════════ */

.kb-wiz-section { padding: 0; }

/* Top bar: step badge + PO badge + admin link */
.kb-wiz-topbar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; background: #f0f4f8;
    border-bottom: 1px solid var(--bk-grey-300);
}
.kb-wiz-step-badge {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    color: var(--bk-navy); background: #dbeafe; padding: 3px 10px;
    border-radius: 12px; letter-spacing: 0.03em;
}
.kb-wiz-po-badge {
    font-size: 0.75rem; font-weight: 600; color: var(--bk-text-muted);
    font-family: 'SF Mono', 'Consolas', monospace;
}
.kb-wiz-open-admin {
    margin-left: auto; font-size: 0.75rem; font-weight: 600;
    color: var(--bk-admin); text-decoration: none;
}
.kb-wiz-open-admin:hover { text-decoration: underline; }

/* Key-value grid (header, review, fallback) */
.kb-wiz-kv-grid {
    display: grid; grid-template-columns: 1fr;
    gap: 0; padding: 8px 0;
}
.kb-wiz-kv-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 16px; border-bottom: 1px solid #f1f5f9;
}
.kb-wiz-kv-row:last-child { border-bottom: none; }
.kb-wiz-kv-label {
    flex: 0 0 120px; font-size: 0.72rem; font-weight: 600;
    color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em;
}
.kb-wiz-kv-value {
    flex: 1; font-size: 0.85rem; color: #1e293b;
}
.kb-wiz-mono {
    font-family: 'SF Mono', 'Consolas', monospace; font-size: 0.82rem;
}

/* Editable inputs in kv grid */
.kb-wiz-kv-input {
    flex: 1; font-size: 0.85rem; color: #1e293b;
    border: 1px solid transparent; background: transparent;
    padding: 3px 6px; border-radius: 4px;
    transition: border-color 0.15s, background 0.15s;
}
.kb-wiz-kv-input:hover { border-color: #cbd5e1; background: var(--bk-card); }
.kb-wiz-kv-input:focus {
    outline: none; border-color: var(--bk-admin); background: var(--bk-card);
    box-shadow: 0 0 0 2px rgba(65, 118, 144, 0.15);
}
.kb-wiz-kv-textarea {
    min-height: 2.5rem; resize: vertical;
}
.kb-wiz-kv-input.kb-wiz-saving { opacity: 0.6; }
.kb-wiz-kv-input.kb-wiz-saved {
    border-color: var(--bk-emerald); background: #f0fdf4;
    transition: border-color 0.15s, background 0.15s;
}

/* Tags (contacts, styles, fabrics) */
.kb-wiz-tag {
    display: inline-block; font-size: 0.75rem; font-weight: 500;
    color: #334155; background: var(--bk-grey-300); padding: 2px 8px;
    border-radius: 10px; margin: 1px 3px 1px 0;
}
.kb-wiz-tag-primary {
    background: var(--bk-status-awaiting-bg); color: #92400e; font-weight: 600;
}
.kb-wiz-tag-list {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0;
}

/* Compact table (items, allocation, quantities) */
.kb-wiz-table-wrap {
    overflow-x: auto; max-height: 320px; overflow-y: auto;
}
.kb-wiz-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 0.8rem;
}
.kb-wiz-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: #f8fafc; color: var(--bk-text-muted); font-weight: 600;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 6px 10px; text-align: left; border-bottom: 2px solid var(--bk-grey-300);
    white-space: nowrap;
}
.kb-wiz-table tbody td {
    padding: 5px 10px; border-bottom: 1px solid #f1f5f9;
    color: #334155; white-space: nowrap;
}
.kb-wiz-table tbody tr:hover td { background: #f8fafc; }
.kb-wiz-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Cards (per-item style/material listings) */
.kb-wiz-card {
    border: 1px solid var(--bk-grey-300); border-radius: 6px;
    margin: 8px 16px; overflow: hidden;
}
.kb-wiz-card-header {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; background: #f8fafc;
    border-bottom: 1px solid var(--bk-grey-300);
}
.kb-wiz-count-badge {
    font-size: 0.7rem; color: var(--bk-text-muted); margin-left: auto;
}

/* Section label */
.kb-wiz-section-lbl {
    padding: 10px 16px 4px; font-size: 0.75rem; font-weight: 600;
    color: var(--bk-text-muted); text-transform: uppercase; letter-spacing: 0.04em;
}

/* Empty state hint */
.kb-wiz-empty-hint {
    padding: 8px 16px; color: #94a3b8; font-size: 0.82rem;
    font-style: italic;
}

/* Status pills (review step) */
.kb-wiz-status-pill {
    display: inline-block; padding: 2px 10px; border-radius: 10px;
    font-size: 0.75rem; font-weight: 600;
}
.kb-wiz-status-draft { background: #f1f5f9; color: var(--bk-text-muted); }
.kb-wiz-status-processing { background: #dbeafe; color: #1d4ed8; }
.kb-wiz-status-submitted { background: var(--bk-status-awaiting-bg); color: #92400e; }
.kb-wiz-status-approved { background: #dcfce7; color: #166534; }
.kb-wiz-status-closed { background: #f3e8ff; color: #7c3aed; }

/* Fallback CTA */
.kb-wiz-fallback-cta {
    padding: 16px; text-align: center;
}

/* Video Checklist — compact bulk pills + per-item video with kebab + VOID */
.psc-vchk-bulk { display: flex; gap: 6px; margin: 6px 0 10px; flex-wrap: wrap; }

/* Compact pill button — small height for mobile density (deliberately NOT
   the 44px primary tap target; reserved for secondary bulk helpers). */
.psc-pill-btn {
    min-height: 30px; padding: 3px 12px;
    border-radius: var(--bk-radius-pill, 9999px);
    background: var(--bk-card, #fff); color: var(--bk-navy, #1a1a2e);
    border: 1px solid var(--bk-border, #e2e4e8);
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s;
}
.psc-pill-btn:hover { background: var(--bk-parchment, #f4f5f7); }
.psc-pill-btn:active { background: #e9ecef; }
.psc-pill-btn:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-pill-btn:disabled { opacity: 0.45; pointer-events: none; }

.psc-vchk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; border-radius: 8px; }
/* Batch drop — dropping several videos onto the list distributes them. */
.psc-vchk-list.is-batch-dragover { outline: 2px dashed var(--bk-gold, #c29954); outline-offset: 4px; background: #fffaf0; }
.psc-vchk-batch-btn { display: inline-flex; align-items: center; gap: 5px; }
.psc-vchk-batch-btn .material-symbols-outlined { font-size: 16px; }
.psc-vchk-item { border: 1px solid var(--bk-border, #e2e4e8); border-radius: 8px; padding: 8px; }
.psc-vchk-item.is-voided { border-color: var(--bk-red, #DC2626); }
.psc-vchk-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.psc-vchk-box { width: 18px; height: 18px; flex: 0 0 auto; cursor: pointer; }
.psc-vchk-label { font-weight: 600; font-size: 0.85rem; flex: 1; }
.psc-vchk-count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--bk-text-muted, #72727e); }

/* Video + VOID stamp overlay */
.psc-vchk-video-wrap { position: relative; }
.psc-vchk-video { width: 100%; max-height: 200px; border-radius: 6px; background: #000; display: block; }

/* Row icon buttons: ⬆ upload/replace (left) + red ✕ void (right). */
.psc-vchk-upload-btn, .psc-vchk-void-btn {
    flex: 0 0 auto;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 6px; cursor: pointer; background: none;
}
.psc-vchk-upload-btn .material-symbols-outlined,
.psc-vchk-void-btn .material-symbols-outlined { font-size: 20px; }
.psc-vchk-upload-btn { color: var(--bk-text-muted, #72727e); }
.psc-vchk-upload-btn:hover { background: var(--bk-parchment, #f4f5f7); color: var(--bk-navy, #1a1a2e); }
.psc-vchk-upload-btn:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-vchk-void-btn { color: var(--bk-red, #DC2626); }
.psc-vchk-void-btn:hover { background: #fef2f2; }
.psc-vchk-void-btn:focus-visible { outline: 2px solid var(--bk-red, #DC2626); outline-offset: 2px; }

/* Empty-state drop zone — drag a video onto it OR tap to pick. */
.psc-vchk-dropzone {
    min-height: 96px; border: 2px dashed var(--bk-border, #e2e4e8); border-radius: 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 10px; text-align: center; cursor: pointer;
    color: var(--bk-text-muted, #72727e); background: #fafbfc;
    transition: border-color .15s, background .15s, color .15s;
}
.psc-vchk-dropzone:hover { border-color: var(--bk-gold, #c29954); color: var(--bk-navy, #1a1a2e); }
.psc-vchk-dropzone.is-dragover { border-color: var(--bk-gold, #c29954); background: #fffaf0; color: var(--bk-navy, #1a1a2e); }
.psc-vchk-dropzone:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-vchk-dropzone .material-symbols-outlined { font-size: 30px; color: var(--bk-gold, #c29954); }
.psc-vchk-dropzone .psc-vchk-dz-sub { font-size: 0.7rem; }

/* Diagonal VOID watermark stamp over a rejected video. */
.psc-vchk-void-stamp {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    pointer-events: none; z-index: 15;
    font-size: 2.2rem; font-weight: 800; letter-spacing: 0.15em;
    color: var(--bk-red, #DC2626);
    border: 4px solid var(--bk-red, #DC2626); border-radius: 8px;
    padding: 4px 18px; background: rgba(255,255,255,0.72);
}

/* ── Template Reference (template_reference_step) ── */
.psc-ref-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.psc-ref-title { font-weight: 700; font-size: 0.95rem; }
.psc-ref-replace-btn {
    margin-left: auto; flex: 0 0 auto; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 6px; cursor: pointer;
    background: none; color: var(--bk-text-muted, #72727e);
}
.psc-ref-replace-btn .material-symbols-outlined { font-size: 20px; }
.psc-ref-replace-btn:hover { background: var(--bk-parchment, #f4f5f7); color: var(--bk-navy, #1a1a2e); }
.psc-ref-dropzone {
    min-height: 96px; border: 2px dashed var(--bk-border, #e2e4e8); border-radius: 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 14px; text-align: center; cursor: pointer;
    color: var(--bk-text-muted, #72727e); background: #fafbfc;
    transition: border-color .15s, background .15s, color .15s;
}
.psc-ref-dropzone:hover { border-color: var(--bk-gold, #c29954); color: var(--bk-navy, #1a1a2e); }
.psc-ref-dropzone.is-dragover { border-color: var(--bk-gold, #c29954); background: #fffaf0; color: var(--bk-navy, #1a1a2e); }
.psc-ref-dropzone:focus-visible { outline: 2px solid var(--bk-navy, #1a1a2e); outline-offset: 2px; }
.psc-ref-dropzone .material-symbols-outlined { font-size: 30px; color: var(--bk-gold, #c29954); }
.psc-ref-dropzone .psc-ref-dz-sub { font-size: 0.7rem; }
.psc-ref-doc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.psc-ref-doc-name { font-size: 0.82rem; color: var(--bk-text-muted, #72727e); word-break: break-all; }
.psc-ref-doc .psc-btn-secondary { display: inline-flex; align-items: center; gap: 6px; }
.psc-ref-opened { display: flex; align-items: center; gap: 6px; color: var(--bk-emerald, #10B981); font-size: 0.8rem; margin: 6px 0; }
.psc-ref-opened .material-symbols-outlined, .psc-ref-result .material-symbols-outlined { font-size: 18px; }
.psc-ref-result { display: flex; align-items: center; gap: 6px; color: var(--bk-emerald, #10B981); font-weight: 600; }
.psc-ref-actions { margin-top: 10px; }
.psc-ref-error { color: var(--bk-red, #DC2626); font-size: 0.82rem; padding: 8px 0; }

/* ============================================================
   PSC SHELL — Mobile responsiveness (step popup modal, header/
   body/footer chrome, Send/Export dialog). SHELL only — does
   NOT touch individual widget bodies. No new animation; layout
   only, so no prefers-reduced-motion override is required.
   ============================================================ */
@media (max-width: 480px) {
    /* Step popup modal — fill the narrow viewport instead of clipping at 420px */
    .kb-popup-modal { max-width: 96vw; min-width: 0; }

    /* PSC modal + Send/Export (wider) modal — drop fixed widths */
    .psc-modal { width: 92vw; max-width: none; }
    .psc-modal:has(.psc-se-tabs) { width: 92vw; max-width: none; }

    /* Footer stays ONE row: the 5 media icons collapse into the "Media · N" button
       (left), which toggles .psc-footer-media open as a popover ABOVE the footer.
       Keeps 44px targets without clipping or a second row. */
    .psc-footer { position: relative; flex-wrap: nowrap; gap: 4px; }
    /* Compact the Media button to just 📎 + count (drop the "Media" word) and
       tighten gaps so the action cluster incl. the Submit button always fits. */
    .psc-media-collapse { display: inline-flex; padding: 0 9px; gap: 4px; }
    .psc-mc-label { display: none; }
    .psc-footer-actions { margin-left: auto; gap: 2px; }
    .psc-btn-advance { flex-shrink: 0; }   /* never let Submit (primary) be clipped */
    .psc-footer > .psc-footer-media {
        position: absolute; left: 8px; bottom: calc(100% + 6px);
        flex-direction: row; align-items: center; gap: 12px; overflow: visible;
        width: max-content; max-width: calc(100vw - 32px);
        background: var(--bk-card, #fff); border: 1px solid var(--bk-border, #e2e4e8);
        border-radius: 12px; box-shadow: var(--bk-shadow-lg, 0 8px 24px rgba(0,0,0,0.18));
        padding: 11px 10px 6px; display: none; z-index: 50;
    }
    .psc-footer > .psc-footer-media.is-expanded { display: flex; }
    /* Touch has no hover, so always reveal the "+" add affordance in the popover. */
    .psc-footer > .psc-footer-media.is-expanded .psc-media-icon.can-add .mi-plus-btn { opacity: 1; }

    /* Tap targets >= 44px */
    .psc-add-btn,
    .psc-actions-menu > summary { min-width: 44px; }
    .psc-chan-btn { min-height: 44px; }

    /* Send/Export format grid: 3 cols -> 2 cols */
    .psc-se-fmts { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 360px) {
    /* Send/Export format grid: 2 cols -> 1 col on the smallest phones */
    .psc-se-fmts { grid-template-columns: 1fr; }
}

/* ── PSC bottom-of-viewport tray ───────────────────────────────────────────
   One chip per open .kb-popup-modal. Ported from Noor's `.tray` /
   `.trayChip` (frontend/src/components/chat/ChatSetView.module.css).
   Populated by static/workflow/js/psc_window_manager.js → _renderTray(). */
.psc-tray {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px;
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    background: rgba(26, 26, 46, 0.92); color: #fff;
    border-radius: 9999px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    /* z-index pinned to the max safe int so the tray sits above every PSC popup
       regardless of how many times zTop has incremented. Popups start at 10001
       and bump on every open/focus — 2_147_483_647 (signed 32-bit max) makes
       the tray uncoverable in practice. */
    z-index: 2147483647; max-width: 92vw; overflow-x: auto;
}
.psc-tray[hidden] { display: none; }
.psc-tray-lbl {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.6); padding: 0 6px;
    flex-shrink: 0;
}
.psc-tray-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 10px;
    background: rgba(255, 255, 255, 0.08); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 9999px;
    cursor: pointer; font-size: 0.8rem; font-family: inherit; line-height: 1.2;
    max-width: 220px;
    transition: background 0.12s, border-color 0.12s;
}
.psc-tray-chip:hover { background: rgba(255, 255, 255, 0.14); }
.psc-tray-chip.is-top { background: rgba(194, 153, 84, 0.18); border-color: #c29954; }
.psc-tray-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #c29954; flex-shrink: 0;
}
.psc-tray-text {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 180px;
}
.psc-tray-x {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 1rem; line-height: 1;
    color: rgba(255, 255, 255, 0.7);
}
.psc-tray-x:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
@media (max-width: 480px) {
    .psc-tray-text { max-width: 100px; }
    .psc-tray { bottom: 8px; padding: 4px 8px; }
}

/* ── PSC tray edge docking (v1.1.0) ────────────────────────────────────────
   Default bottom dock keeps the base .psc-tray rules above. Edge classes
   override position + flex-direction so the tray can live on any viewport
   side. JS adds exactly ONE of these classes (.psc-tray-edge-{bottom,top,
   left,right}); it never combines them.

   - Bottom/top: horizontal flex row; chips scroll horizontally if many.
   - Left/right: vertical flex column; chips stack readable; tray scrolls
     vertically. The "OPEN" label stays at the start of the flex line so the
     drag handle stays in the same relative spot. Border-radius shrinks to
     a softer pill for the vertical orientations since the column height
     can be tall. */
.psc-tray-edge-bottom {
    left: 50%; right: auto; top: auto; bottom: 12px;
    transform: translateX(-50%);
    flex-direction: row; align-items: center;
    max-width: 92vw; max-height: none;
    overflow-x: auto; overflow-y: visible;
}
.psc-tray-edge-top {
    left: 50%; right: auto; top: 12px; bottom: auto;
    transform: translateX(-50%);
    flex-direction: row; align-items: center;
    max-width: 92vw; max-height: none;
    overflow-x: auto; overflow-y: visible;
}
.psc-tray-edge-left {
    left: 12px; right: auto; top: 50%; bottom: auto;
    transform: translateY(-50%);
    flex-direction: column; align-items: stretch;
    max-width: none; max-height: 88vh;
    overflow-x: visible; overflow-y: auto;
    border-radius: 18px;
}
.psc-tray-edge-right {
    left: auto; right: 12px; top: 50%; bottom: auto;
    transform: translateY(-50%);
    flex-direction: column; align-items: stretch;
    max-width: none; max-height: 88vh;
    overflow-x: visible; overflow-y: auto;
    border-radius: 18px;
}
/* In vertical orientations, chips stretch to a comfortable common width
   so the strip reads as a clean vertical menu rather than ragged pills. */
.psc-tray-edge-left .psc-tray-chip,
.psc-tray-edge-right .psc-tray-chip {
    width: 220px; max-width: 220px; justify-content: flex-start;
}
.psc-tray-edge-left .psc-tray-lbl,
.psc-tray-edge-right .psc-tray-lbl {
    text-align: center; padding: 4px 6px;
}
/* Whole tray body is the drag handle now (chips/× excluded in JS).
   The "OPEN" label alone was too small to discover. */
.psc-tray { cursor: grab; touch-action: none; }
.psc-tray:active { cursor: grabbing; }
.psc-tray-chip, .psc-tray-x { cursor: pointer; }
.psc-tray-lbl { user-select: none; }
/* While the tray is mid-drag, JS sets inline left/top + this class so the
   chosen-edge transform doesn't fight the pointer position. */
.psc-tray.is-dragging {
    transform: none !important;
    transition: none !important;
    cursor: grabbing;
}

/* ── PSC v1.0.5 wrapper chrome (.psc-modal-head) — Aesthetic Foundation compliant ──
   - All colour via --bk-* tokens (no raw hex)
   - Close button is a 44x44 hit target (Foundation rule), visual glyph stays small
   - Title 0.95rem / 700, ellipsis-truncated; grip subtle, hidden on touch widths
   - The whole head is the drag handle (data-psc-drag on the element); the close
     button is excluded from drag via the JS INTERACTIVE_SEL guard.

   Layout: the head is `flex-shrink: 0` so it never collapses; the card content
   below scrolls inside .psc-body (see the body-grammar block further down). */

/* Step popup is a flex column with a fixed-height modal + scrolling body.
   Zero out the legacy 1.5rem padding from .kb-popup-modal — the wrapper chrome
   sits flush at the top, the body fills the rest, and the footer pins below. */
.kb-popup-modal.kb-step-popup {
    padding: 0;
    overflow: hidden;       /* the V-scroll lives on .psc-body, not here */
    min-height: 240px;
}

/* The cloned template uses [data-psc-content] now (id was stripped to allow N
   popups). Replicate what #kb-sp-content used to do for the flex chain. */
.kb-popup-modal.kb-step-popup > [data-psc-content] {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
    overflow: hidden;
    border-radius: inherit;
}

.psc-modal-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;       /* keeps the head compact so total chrome stays slim */
    background: var(--bk-card, #ffffff);
    border-bottom: 1px solid var(--bk-border-warm, #E5E0DA);
    cursor: grab;
    user-select: none;
    touch-action: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.psc-modal-head:active { cursor: grabbing; }

/* 44x44 min hit target per PSC Aesthetic Foundation. Visible ✕ scaled up to
   1.6rem + weight 600 so the glyph reads as a proper close affordance — the
   previous 1.1rem read as small even though the hit box was correct.
   data-no-drag stops the head's drag from also starting on the button. */
.psc-modal-close {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--bk-text, #2d2d3a);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 8px;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}
.psc-modal-close:hover {
    background: var(--bk-surface-inset, #f0f2f5);
    color: var(--bk-text, #2d2d3a);
}
.psc-modal-close:focus-visible {
    outline: 2px solid var(--bk-navy, #1a1a2e);
    outline-offset: 2px;
}

.psc-modal-head-title {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 0.95rem;             /* up from 0.84 — readable as the modal label */
    color: var(--bk-text, #2d2d3a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.005em;
}

.psc-modal-grip {
    color: var(--bk-text-muted, #6c757d);
    letter-spacing: -2px;
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1;
    opacity: 0.55;
}

/* Mobile (≤480px): hide the visual drag grip — the whole head IS the handle.
   Close button stays the same 44x44; head padding stays generous for touch. */
@media (max-width: 480px) {
    .psc-modal-grip { display: none; }
    .psc-modal-head { padding: 6px 8px; }
}