/* Pipeline v2 (2026-10-16) — board option A + adaptive job workspace.
   Loaded after components.css. Board rules are scoped to .pl2-page, workspace rules to
   .job-workspace-view. Step cards / rails adapt with the existing `rail` container queries. */

/* ═══════════════ Shared background: soft colour wash + dot grid ═══════════════ */
/* The hero band's palette (emerald / indigo / teal wash + dot grid) carried over the whole page.
   #view also gets it because layout.css paints its own background on the Pipeline view. */
.main:has(.pl2-page),
.main:has(.job-workspace-view),
#view:has(.pl2-page),
#view:has(.job-workspace-view) {
  background:
    radial-gradient(rgba(11, 143, 90, .10) 1px, transparent 1.3px) 0 0 / 18px 18px,
    radial-gradient(1100px 520px at 0% 0%, rgba(11, 143, 90, .16), transparent 68%),
    radial-gradient(1000px 560px at 100% 0%, rgba(99, 102, 241, .10), transparent 66%),
    radial-gradient(900px 600px at 70% 100%, rgba(45, 212, 191, .12), transparent 70%),
    linear-gradient(112deg, #e8f5ee 0%, #f0f9f4 46%, #edf3fc 100%);
  background-attachment: fixed;
}

/* ═══════════════════════════════ BOARD ═══════════════════════════════ */
.pl2-page { gap: 10px !important; }
.pl2-page .sr-only { position: absolute; }

/* Band: title + queue chips · KPI tiles · Create Job */
/* Full-bleed band (touches top/left/right like the Dashboard hero) — width/margin come
   from the base .pipeline-page-heading rule in components.css. */
.pl2-page .pipeline-page-heading {
  gap: 14px; padding-top: 14px; padding-bottom: 14px;
  position: relative; isolation: isolate; overflow: hidden; border-radius: 0;
  border: 0; border-bottom: 1px solid #d3e7db;
  background:
    radial-gradient(520px 220px at 0% 0%, rgba(11, 143, 90, .18), transparent 68%),
    radial-gradient(520px 260px at 92% 0%, rgba(99, 102, 241, .12), transparent 66%),
    radial-gradient(460px 220px at 70% 120%, rgba(45, 212, 191, .14), transparent 70%),
    linear-gradient(112deg, #dff2e8 0%, #eaf7f0 46%, #e6effb 100%);
}
.pl2-page .pipeline-page-heading::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(11, 143, 90, .16) 1px, transparent 1.3px); background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%); mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
}
.pl2-page .pipeline-heading-copy { flex: 0 1 auto; min-width: 0; }
.pl2-page .pipeline-heading-title-row { flex-wrap: nowrap; gap: 12px; }
.pl2-page .pipeline-heading-icon { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, #10b981, #047857); box-shadow: 0 8px 16px -8px rgba(4, 120, 87, .9); }
.pl2-title-col { min-width: 0; }
.pl2-title-line { display: flex; align-items: center; gap: 8px; }
.pl2-page .pipeline-page-heading h1 { font-size: 20px; color: #063d2a; white-space: nowrap; }
.pl2-page .pipeline-heading-pill { background: rgba(255, 255, 255, .72); border: 1px solid rgba(16, 185, 129, .3); font-size: 10.5px; padding: 2px 8px; }
.pl2-queue { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; min-height: 0; }
.pl2-queue:empty { display: none; }
.pl2-queue .badge { border-radius: 999px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; background: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, .9); }
.pl2-queue .badge-informational { color: #1d4ed8; }
.pl2-queue .badge-awaiting_final_approval { color: #6d28d9; }
.pl2-queue .badge-approved { color: #047857; }

.pl2-kpis { margin-left: auto; min-width: 0; }
.pl2-kpis .pipeline-summary-grid { display: flex; gap: 8px; }
.pl2-kpis .pipeline-summary-card {
  min-width: 128px; padding: 6px 12px 6px 8px; border-radius: 12px; gap: 8px;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); box-shadow: none;
}
.pl2-kpis .pipeline-summary-card.is-active { box-shadow: 0 0 0 2px rgba(16, 185, 129, .55); background: #fff; }
.pl2-kpis .pipeline-summary-card.is-inactive { opacity: .6; }
.pl2-kpis .pipeline-summary-sparkline { display: none; }
.pl2-kpis .pipeline-summary-icon { width: 28px; height: 28px; border-radius: 9px; }
.pl2-kpis .pipeline-summary-card:nth-child(1) .pipeline-summary-icon { background: #d1fae5; color: #047857; }
.pl2-kpis .pipeline-summary-card:nth-child(2) .pipeline-summary-icon { background: #dbeafe; color: #1d4ed8; }
.pl2-kpis .pipeline-summary-card:nth-child(3) .pipeline-summary-icon { background: #ede9fe; color: #6d28d9; }
.pl2-kpis .pipeline-summary-card:nth-child(4) .pipeline-summary-icon { background: #ffe4e6; color: #be123c; }
.pl2-kpis .pipeline-summary-card:nth-child(1) .pipeline-summary-count { color: #047857; }
.pl2-kpis .pipeline-summary-card:nth-child(2) .pipeline-summary-count { color: #1d4ed8; }
.pl2-kpis .pipeline-summary-card:nth-child(3) .pipeline-summary-count { color: #6d28d9; }
.pl2-kpis .pipeline-summary-card:nth-child(4) .pipeline-summary-count { color: #be123c; }
.pl2-kpis .pipeline-summary-label { font-size: 10.5px; }
.pl2-kpis .pipeline-summary-count { font-size: 17px; line-height: 1.1; }
.pl2-kpis .pipeline-summary-delta { font-size: 9.5px; }
.pl2-page .pipeline-create-btn { position: relative; z-index: 1; background: linear-gradient(135deg, #10b981, #047857); border: 0; box-shadow: 0 8px 16px -10px rgba(4, 120, 87, .9); }

/* Toolbar: one glass row */
.pl2-page .pipeline-control-panel {
  position: relative; z-index: 60;
  padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 14px 30px -24px rgba(16, 90, 70, .45);
}
.pl2-page .pipeline-toolbar-row { gap: 6px; }
.pl2-page .pipeline-toolbar-row > div:empty { display: none; }
.pl2-page .pipeline-view-tabs { background: #e9eef4; border-radius: 999px; padding: 3px; }
.pl2-page .pipeline-view-tabs .tab { border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 12px; }
.pl2-page .pipeline-view-tabs .tab.active { background: linear-gradient(135deg, #10b981, #047857); color: #fff; }
.pl2-seg { display: inline-flex; background: #e9eef4; border-radius: 999px; padding: 3px; }
.pl2-seg button { border: 0; background: transparent; border-radius: 999px; height: 26px; min-width: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; color: #334155; cursor: pointer; }
.pl2-seg button svg { width: 14px; height: 14px; }
.pl2-seg button.active { background: linear-gradient(135deg, #10b981, #047857); color: #fff; }
.pl2-page .pipeline-search-inline { width: 200px; border-radius: 10px; }
.pl2-page .pipeline-dropdown-trigger { border-radius: 999px; }
.pl2-more { position: relative; }
.pl2-more-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--matrix-border, #e2e8f0); background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: #334155; cursor: pointer; }
.pl2-more-btn svg { width: 13px; height: 13px; }
.pl2-more-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #10b981; color: #fff; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.pl2-more-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; display: flex; gap: 6px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .45); }
.pl2-more-pop[hidden] { display: none; }
.pl2-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pl2-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid #a7f3d0; background: #d1fae5; color: #047857; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.pl2-chip:hover { background: #a7f3d0; }
.pl2-page #pipeline-filter-status { margin-left: auto; font-size: 12px; }

/* Board section + lanes */
.pl2-page .pipeline-board-section { background: transparent; border: 0; box-shadow: none; padding: 0; }
.pl2-page .pipeline-subheader[hidden] { display: none; }
.pl2-page .kanban { gap: 10px; }
.pl2-page .kanban-column {
  width: 264px; padding: 0; overflow: hidden; border-radius: 16px;
  background: rgba(248, 250, 252, .86) !important; border: 1px solid #e2e8f0; border-top: 0;
  box-shadow: 0 10px 24px -22px rgba(15, 23, 42, .5);
}
.pl2-page .kanban-person-column .kanban-column-header-slot { margin: 0; }
.pl2-page .kanban-column-header,
.pl2-page .kanban-person-column .kanban-column-header {
  position: relative; padding: 12px 10px 10px; border-radius: 16px 16px 0 0; border-bottom: 1px solid #eef2f7;
  background:
    radial-gradient(160px 70px at 100% 0%, color-mix(in srgb, var(--col-accent, #94a3b8) 16%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--col-accent, #94a3b8) 9%, #fff) 0%, #fff 100%);
}
.pl2-page .kanban-column-header > .row { margin-bottom: 2px !important; }
/* equal-height lane headers so every "Drop to assign" zone lines up across lanes */
.pl2-page .kanban-by-person .kanban-column-header { display: flex; flex-direction: column; min-height: 112px; box-sizing: border-box; }
.pl2-page .kanban-by-person .kanban-column-header .kanban-drop-zone { margin-top: auto; }
.pl2-page .kanban-by-person .kanban-column-header .pl2-load + .kanban-drop-zone,
.pl2-page .kanban-by-person .kanban-column-header .pl2-lane-sub + .kanban-drop-zone { margin-top: auto; }
.pl2-page .kanban-by-person .kanban-column-header .kanban-drop-zone { flex: 0 0 auto; }
/* Sticky lane headers (trackPersonHeaders): must win over the header rule above, which sets
   position: relative — that override is what had switched the sticky behaviour off. */
.pl2-page .kanban-by-person .kanban-person-column .kanban-column-header.is-viewport-sticky {
  position: fixed; top: var(--header-height); left: var(--kanban-header-left); width: var(--kanban-header-width);
  z-index: 20; border-radius: 0 0 14px 14px; border: 1px solid #e2e8f0; border-top: 0;
  box-shadow: 0 12px 24px -16px rgba(15, 23, 42, .45);
  background: linear-gradient(180deg, color-mix(in srgb, var(--col-accent, #94a3b8) 9%, #fff) 0%, #fff 100%);
}
.pl2-page .kanban-person-column.lane-frozen .kanban-column-header.is-viewport-sticky { z-index: 21; }

/* ── Drag preview: every lane says up-front whether the dragged job can land there ── */
.pl2-page .kanban-column.drop-dim { opacity: 1; }
.pl2-page .kanban-column.drop-eligible { outline: 0; border-color: #6ee7b7; box-shadow: 0 0 0 2px rgba(16, 185, 129, .35), 0 12px 26px -18px rgba(5, 120, 80, .6); }
.pl2-page .kanban-column.drop-eligible .kanban-column-header { background: linear-gradient(180deg, #d1fae5 0%, #ecfdf5 100%); }
.pl2-page .kanban-column.drop-dim { border-color: #fecdd3; }
.pl2-page .kanban-column.drop-dim .kanban-column-header { background: linear-gradient(180deg, #fff1f2 0%, #fff 100%); }
.pl2-page .kanban-column.drop-dim .kanban-cards { opacity: .5; }
.pl2-page .kanban-column.drop-dim .kanban-drop-zone { border-color: #fda4af; background: #fff1f2; color: #be123c; }
.pl2-page .kanban-column.drop-same .kanban-drop-zone { border-color: #cbd5e1; background: #f8fafc; color: #64748b; }
.pl2-page .kanban-column.drag-over { outline: 0; }
.pl2-page .kanban-column.drag-over.drop-eligible { box-shadow: 0 0 0 3px #10b981, 0 16px 30px -16px rgba(5, 120, 80, .7); }
.pl2-page .kanban-column.drag-over.drop-dim { box-shadow: 0 0 0 3px #f43f5e; }
.pl2-page .kanban-column.drag-over.drop-eligible .kanban-drop-zone { background: #10b981; border-color: #059669; color: #fff; }
.pl2-drop-info { margin-top: 8px; padding: 8px 9px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0; font-size: 11px; line-height: 1.35; color: #334155; pointer-events: none; text-align: left; box-shadow: 0 6px 14px -12px rgba(15, 23, 42, .5); }
.pl2-drop-info .pl2-di-head { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 11.5px; margin-bottom: 5px; }
.pl2-drop-info .pl2-di-head i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; color: #fff; flex: 0 0 auto; }
.pl2-drop-info.is-ok { border-color: #a7f3d0; background: #f0fdf4; }
.pl2-drop-info.is-ok .pl2-di-head { color: #047857; } .pl2-drop-info.is-ok .pl2-di-head i { background: #10b981; }
.pl2-drop-info.is-no { border-color: #fecdd3; background: #fff7f8; }
.pl2-drop-info.is-no .pl2-di-head { color: #be123c; } .pl2-drop-info.is-no .pl2-di-head i { background: #f43f5e; }
.pl2-drop-info.is-same, .pl2-drop-info.is-info { background: #f8fafc; }
.pl2-drop-info.is-same .pl2-di-head, .pl2-drop-info.is-info .pl2-di-head { color: #475569; } .pl2-drop-info.is-same .pl2-di-head i, .pl2-drop-info.is-info .pl2-di-head i { background: #94a3b8; }
.pl2-drop-info.is-warn { border-color: #fde68a; background: #fffbeb; }
.pl2-drop-info.is-warn .pl2-di-head { color: #b45309; } .pl2-drop-info.is-warn .pl2-di-head i { background: #f59e0b; }
.pl2-di-step { display: flex; align-items: flex-start; gap: 6px; padding: 4px 0; border-top: 1px dashed #e2e8f0; }
.pl2-di-step:first-of-type { border-top: 0; }
.pl2-di-step > b { flex: 0 0 auto; width: 14px; text-align: center; }
.pl2-di-step.ok > b { color: #059669; } .pl2-di-step.no > b { color: #e11d48; } .pl2-di-step.held > b { color: #64748b; }
.pl2-di-step span { min-width: 0; }
.pl2-di-step em { font-style: normal; color: #64748b; }
.pl2-di-sk { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.pl2-di-sk s, .pl2-di-sk u { text-decoration: none; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.pl2-di-sk u { background: #d1fae5; color: #047857; }
.pl2-di-sk s { background: #ffe4e6; color: #be123c; }
.pl2-di-foot { margin-top: 5px; padding-top: 5px; border-top: 1px solid #eef2f7; color: #64748b; font-size: 10.5px; }
.pl2-lane-sub { font-size: 11px; color: #64748b; line-height: 1.35; margin: 0 0 2px 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl2-load { height: 4px; border-radius: 999px; background: #e9eef4; margin: 7px 0 0; overflow: hidden; }
.pl2-load > b { display: block; height: 100%; border-radius: inherit; background: var(--col-accent, #10b981); }
.pl2-page .kanban-column-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--col-accent, #94a3b8); }
.pl2-page .kanban-column-header h3 { font-size: 13.5px; font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl2-page .kanban-column .badge.col-count { background: var(--col-accent, #64748b); color: #fff; border-radius: 999px; font-weight: 800; }
.pl2-page .kanban-cards { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.pl2-page .kanban-drop-zone { min-height: 34px; margin-top: 8px; padding: 6px; border: 1.5px dashed color-mix(in srgb, var(--col-accent, #10b981) 45%, #fff); border-radius: 10px; background: color-mix(in srgb, var(--col-accent, #10b981) 6%, #fff); color: color-mix(in srgb, var(--col-accent, #10b981) 75%, #0f172a); font-weight: 700; font-size: 11px; }
.pl2-page .kanban-column.drag-over .kanban-drop-zone, .pl2-page .kanban-column.drop-eligible .kanban-drop-zone { border-color: #10b981; background: #d1fae5; color: #047857; }
.pl2-page .kanban-column.lane-frozen { background: #f8fafc !important; }
.pl2-lane-btn { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; color: #475569; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pl2-lane-btn:hover { background: #f1f5f9; }
/* collapsed lane → slim vertical strip (still a drop target) */
.pl2-page .kanban-column.is-lane-collapsed { width: 48px; min-height: 260px; }
.pl2-page .kanban-column.is-lane-collapsed .kanban-cards,
.pl2-page .kanban-column.is-lane-collapsed .kanban-drop-zone,
.pl2-page .kanban-column.is-lane-collapsed .kanban-column-header > :not(.row) { display: none; }
.pl2-page .kanban-column.is-lane-collapsed .kanban-column-header { height: 100%; min-height: 260px; padding: 10px 4px; border: 0; }
.pl2-page .kanban-column.is-lane-collapsed .kanban-column-header > .row { flex-direction: column; align-items: center !important; gap: 8px !important; }
.pl2-page .kanban-column.is-lane-collapsed .kanban-column-header h3 { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; overflow: visible; order: 3; }
.pl2-page .kanban-column.is-lane-collapsed .pl2-lane-btn { order: -1; transform: rotate(180deg); }

/* Job cards */
.pl2-page .job-card {
  border-radius: 12px; padding: 9px 10px; background: #fff; border: 1px solid #e5e7eb;
  box-shadow: 0 6px 14px -12px rgba(16, 24, 40, .45); transition: transform .12s, box-shadow .12s;
}
.pl2-page .job-card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(16, 90, 70, .45); }
.pl2-page .job-card.priority-urgent { border-left: 4px solid #e11d48; }
.pl2-page .job-card.priority-high { border-left: 4px solid #f59e0b; }
.pl2-page .job-card.priority-normal { border-left: 4px solid #10b981; }
.pl2-page .job-card.priority-low { border-left: 4px solid #94a3b8; }
.pl2-page .job-card-badges .badge { border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.pl2-page .job-card .badge-informational { background: #dbeafe; color: #1d4ed8; }
.pl2-page .job-card .badge-money { background: #fce7f3; color: #be185d; }
.pl2-page .job-card .badge-urgent { background: #ffe4e6; color: #be123c; }
.pl2-page .job-card .badge-high { background: #fef3c7; color: #b45309; }
.pl2-page .job-card-image { width: 44px; height: 44px; margin: 2px 0 4px 10px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--dom, #10b981) 22%, #fff), color-mix(in srgb, var(--dom, #10b981) 55%, #fff)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 6px 12px -8px var(--dom, #10b981); }
.pl2-page .job-card-image-letter { color: #fff; font-size: 17px; text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.pl2-page .job-card-badges { padding-right: 46px; }
.pl2-page .job-card-title { font-weight: 700; font-size: 12.8px; color: #0f172a; margin-top: 4px; }
.pl2-page .job-card-domain { background: transparent; color: #64748b; padding: 0; font-weight: 600; font-size: 10.5px; gap: 5px; align-items: center; margin-top: 2px; }
.pl2-dom-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.pl2-page .job-card-progress { gap: 0; margin-top: 7px; }
.pl2-page .job-progress-node { width: auto; height: 4px; flex: 1; border-radius: 999px; border: 0; background: #e2e8f0; box-shadow: none; }
.pl2-page .job-progress-line { width: 3px; height: 0; flex: 0 0 3px; }
.pl2-page .job-progress-node.done { background: #10b981; }
.pl2-page .job-progress-node.active { background: #3b82f6; box-shadow: none; }
.pl2-page .job-progress-node.reverted { background: #e11d48; }
.pl2-page .job-progress-node.locked { background: #e2e8f0; }
.pl2-page .job-card-footer { display: flex; gap: 6px; justify-content: space-between; padding-right: 0; padding-top: 7px; flex-wrap: nowrap; align-items: center !important; clear: both; }
.pl2-page .job-card-footer > div:first-child { flex: 1; min-width: 0; }
.pl2-page .job-card-footer .badge[data-ini]::before { content: attr(data-ini); display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 0 4px 0 -4px; border-radius: 50%; background: #3b82f6; color: #fff; font-size: 8px; font-weight: 800; vertical-align: -3px; }
.pl2-page .job-card-footer .badge[data-ini="?"]::before { background: #cbd5e1; }
.pl2-page .job-card-footer ~ .muted { font-size: 10.5px !important; color: #64748b; }
.pl2-page .job-card-footer .badge { border-radius: 999px; font-size: 10.5px; font-weight: 700; background: #eff6ff !important; color: #1d4ed8 !important; }
.pl2-page .job-card-actions { top: 7px; bottom: auto; right: 7px; }
/* Compact density (toggle in the toolbar): one line per job */
.pl2-page .kanban.pl2-dense .job-card { padding: 7px 9px; }
.pl2-page .kanban.pl2-dense .job-card-badges,
.pl2-page .kanban.pl2-dense .job-card-progress,
.pl2-page .kanban.pl2-dense .job-card-content > .muted,
.pl2-page .kanban.pl2-dense .job-card-content > [data-ai-intent],
.pl2-page .kanban.pl2-dense .job-card-footer > div:first-child,
.pl2-page .kanban.pl2-dense .job-card-footer ~ .muted { display: none; }
.pl2-page .kanban.pl2-dense .job-card-title { -webkit-line-clamp: 1; margin: 0; padding-right: 54px; }
.pl2-page .kanban.pl2-dense .job-card-domain { display: none; }
.pl2-page .kanban.pl2-dense .job-card-footer { position: absolute; right: 8px; top: 6px; padding: 0; min-height: 0; }
.pl2-page .kanban.pl2-dense .job-card { position: relative; }
.pl2-page .kanban.pl2-dense .job-card-actions { display: none; }

/* ═══════════════════════════════ JOB WORKSPACE ═══════════════════════════════ */
.job-workspace-view .workspace-top-bar {
  flex-direction: row; align-items: center; gap: 10px; padding: 9px var(--page-gutter, 24px); margin: 0;
  position: relative; z-index: 50; border-radius: 0; border: 0; border-bottom: 1px solid #d3e7db;
  background: radial-gradient(260px 120px at 98% -30%, rgba(255, 255, 255, .85), transparent 70%),
              linear-gradient(115deg, #cdeedd 0%, #dcf3ec 38%, #d9e8fb 75%, #e7e1fb 100%);
}
.job-workspace-view .ws-bar-identity { flex: 1; min-width: 0; gap: 10px; }
.job-workspace-view .workspace-back-btn { border-radius: 999px; background: rgba(255, 255, 255, .85); border: 0; font-weight: 700; }
.pl2-ring { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; }
.job-workspace-view .ws-title-group { min-width: 0; flex: 1 1 auto; }
.job-workspace-view .ws-title-text { min-width: 0; }
.pl2-kicker { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 10.5px; color: #3f6b5b; font-weight: 600; white-space: nowrap; overflow: hidden; }
.pl2-kicker > * + *::before { content: "·"; margin-right: 6px; color: #94a3b8; }
.job-workspace-view .pl2-kicker .workspace-job-id,
.job-workspace-view .pl2-kicker .workspace-domain-pill,
.job-workspace-view .pl2-kicker .workspace-creator-pill,
.job-workspace-view .pl2-kicker .ws-created-date,
.job-workspace-view .pl2-kicker .ws-description { background: none; border: 0; padding: 0; font-size: 10.5px; color: #3f6b5b; font-weight: 700; max-width: none; }
.job-workspace-view .pl2-kicker .ws-description { overflow: hidden; text-overflow: ellipsis; }
.job-workspace-view .workspace-job-title { font-size: 15px; color: #063d2a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.job-workspace-view .ws-info-items { display: flex; gap: 6px; flex: 0 0 auto; }
.job-workspace-view .ws-info-item { display: flex; flex-direction: column; padding: 3px 10px; border-radius: 10px; background: rgba(255, 255, 255, .75); border: 0; font-size: 11.5px; font-weight: 700; line-height: 1.2; text-transform: capitalize; }
.job-workspace-view .ws-info-item strong { font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: #64748b; font-weight: 800; }
.job-workspace-view .pl2-chip-pri span { color: #047857; }
.job-workspace-view .pl2-pri-urgent span { color: #be123c; }
.job-workspace-view .pl2-pri-high span { color: #b45309; }
.job-workspace-view .pl2-chip-lang span { color: #1d4ed8; }
.job-workspace-view .pl2-chip-words span { color: #6d28d9; }
.job-workspace-view .pl2-chip-due span { color: #b45309; }
.job-workspace-view .workspace-top-right { flex: 0 0 auto; gap: 8px; }
.job-workspace-view .ws-edit-btn { background: linear-gradient(135deg, #10b981, #047857) !important; color: #fff !important; border: 0 !important; }


/* Grid of three glass panels */
.job-workspace-view .workspace-grid { border-top: 0; gap: 0 2px; padding: 8px 12px 12px; }
.job-workspace-view .workspace-left-rail,
.job-workspace-view .workspace-centre-canvas,
.job-workspace-view .workspace-right-rail {
  background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .95); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 14px 30px -24px rgba(16, 90, 70, .45);
}
.job-workspace-view .ws-resize-handle { background: transparent; }
.job-workspace-view .ws-resize-handle::after { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 40px; margin-top: -20px; border-radius: 4px; background: #cbd5e1; }
.job-workspace-view .ws-resize-handle:hover::after, .job-workspace-view .ws-resize-handle.active::after { background: #10b981; }
.job-workspace-view .workspace-rail-header { border-bottom: 1px solid #eef2f7; background: linear-gradient(135deg, #f0fdf4, #eff6ff); border-radius: 16px 16px 0 0; }
.job-workspace-view .workspace-rail-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.job-workspace-view .ws-progress-track { height: 6px; border-radius: 999px; background: #e2e8f0; }
.job-workspace-view .ws-progress-fill { border-radius: 999px; background: linear-gradient(90deg, #10b981, #3b82f6); }
.job-workspace-view .workspace-ai-section { border-top: 1px solid #eef2f7; }

/* Editor */
.job-workspace-view .workspace-headline-banner { background: linear-gradient(135deg, #f0fdf4, #eff6ff); border-radius: 12px; padding: 10px 12px; }
.job-workspace-view .editor-toolbar { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 4px; gap: 2px; flex-wrap: wrap; overflow: visible; }
.job-workspace-view .editor-toolbar .btn { min-width: 30px; height: 28px; padding: 0 7px; border-radius: 8px; border: 0; background: transparent; font-weight: 800; }
.job-workspace-view .editor-toolbar .btn:hover { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.job-workspace-view .editor-toolbar .btn svg { width: 14px; height: 14px; }
.job-workspace-view .workspace-editor-header { align-items: center; gap: 8px; }
.pl2-saved:not(:empty) { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: #d1fae5; color: #047857; font-size: 11px; font-weight: 700; white-space: nowrap; }
.job-workspace-view .workspace-editor-surface { border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; }
.job-workspace-view .workspace-editor-footer { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.pl2-wc { display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; font-size: 11.5px; min-width: 120px; }
.pl2-wc #words { font-weight: 700; color: #0f172a; }
.pl2-wc-bar { flex: 1 0 100%; height: 5px; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin-top: 3px; }
.pl2-wc-bar b { display: block; height: 100%; background: linear-gradient(90deg, #10b981, #3b82f6); }
.pl2-autosave-note { font-size: 11px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-workspace-view .pl2-save { margin-left: auto; background: linear-gradient(135deg, #10b981, #047857); color: #fff; border: 0; white-space: nowrap; }
.job-workspace-view .pl2-save:disabled { background: #e2e8f0; color: #64748b; }
.job-workspace-view .pl2-save svg { width: 13px; height: 13px; }
@container canvas (max-width: 520px) {
  .pl2-autosave-note { display: none; }
}

/* Right rail: pill tabs with icons + collapsible sections */
.job-workspace-view .workspace-tabs-header { gap: 4px; padding: 8px; border-bottom: 1px solid #eef2f7; align-items: center; }
.job-workspace-view .workspace-tab-btn { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px !important; padding: 5px 10px !important; font-size: 11.5px !important; font-weight: 700; border-bottom: 0 !important; white-space: nowrap; }
.job-workspace-view .workspace-tab-btn svg { width: 13px; height: 13px; flex: 0 0 auto; }
.job-workspace-view .workspace-tab-btn.active { background: linear-gradient(135deg, #10b981, #047857); color: #fff !important; }
.pl2-sec { border: 1px solid #eef2f7; border-radius: 12px; background: #fff; padding: 0 10px; margin-bottom: 8px; }
.pl2-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 9px 0; font-weight: 800; font-size: 12px; color: #0f172a; }
.pl2-sec > summary::-webkit-details-marker { display: none; }
.pl2-sec > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: rotate(45deg); transition: transform .15s; }
.pl2-sec[open] > summary::after { transform: rotate(-135deg); }
.pl2-sec > summary svg { width: 14px; height: 14px; color: #059669; }
.pl2-sec[open] { padding-bottom: 10px; }
.job-workspace-view #ws-analyst-group { border: 1px solid #eef2f7; border-radius: 12px; background: #fff; padding: 10px; margin-bottom: 8px; }
.job-workspace-view .ws-analyst-empty { background: linear-gradient(135deg, #f5f3ff, #eff6ff); border-radius: 12px; border: 0; }

/* ── Step cards: one card, four sizes (container = the Steps rail) ── */
.job-workspace-view .task-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 6px;
  grid-template-areas: "num title status" ". who meta" ". acts acts";
  padding: 9px 10px; border: 1px solid #e5e7eb; border-left: 4px solid var(--st, #cbd5e1); border-radius: 12px;
  background: #fff; box-shadow: 0 6px 14px -12px rgba(16, 24, 40, .45);
}
.job-workspace-view .task-card-top, .job-workspace-view .task-card-bottom { display: contents; }
.job-workspace-view .task-step-circle { grid-area: num; align-self: center; border: 0; color: #fff; background: var(--st, #94a3b8); }
.job-workspace-view .task-card-title { grid-area: title; align-self: center; white-space: normal; font-weight: 700; font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: none; }
.job-workspace-view .task-status-badge { grid-area: status; align-self: center; justify-self: end; border-radius: 999px; white-space: nowrap; }
.job-workspace-view .task-card { position: relative; }
.job-workspace-view .task-card:has(.task-more-menu:not([hidden])) { z-index: 30; }
.job-workspace-view .task-more-wrap { position: relative; }
.job-workspace-view .task-more-menu { left: 0 !important; right: auto !important; z-index: 40; min-width: 160px; }
.job-workspace-view .task-menu-btn { display: none !important; }
.job-workspace-view .task-card-assignee { grid-area: who; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.job-workspace-view .task-card-meta { grid-area: meta; justify-self: end; align-self: center; white-space: nowrap; }
.job-workspace-view .task-card-actions { grid-area: acts; margin-left: 0 !important; display: flex !important; gap: 5px; flex-wrap: wrap; }
.job-workspace-view .task-card-actions:empty { display: none !important; }
.job-workspace-view .task-action-btn { border-radius: 8px; }
.job-workspace-view .task-action--start, .job-workspace-view .task-action--submit, .job-workspace-view .task-action--accept { background: linear-gradient(135deg, #10b981, #047857) !important; color: #fff !important; border: 0 !important; }
/* status colours */
.job-workspace-view .task-card[data-status="in_progress"] { --st: #3b82f6; }
.job-workspace-view .task-card[data-status="submitted"] { --st: #8b5cf6; }
.job-workspace-view .task-card[data-status="accepted"], .job-workspace-view .task-card[data-status="skipped"] { --st: #10b981; }
.job-workspace-view .task-card[data-status="reverted"] { --st: #e11d48; background: linear-gradient(90deg, #fff1f2, #fff 45%); }
.job-workspace-view .task-card[data-status="pending"], .job-workspace-view .task-card[data-status="assigned"] { --st: #94a3b8; }
.job-workspace-view .task-card[data-status="locked"], .job-workspace-view .task-card[data-status="cancelled"] { --st: #cbd5e1; opacity: .7; background: #f8fafc; }
.job-workspace-view .task-card[data-status="in_progress"] { background: linear-gradient(90deg, #eff6ff, #fff 45%); }
.job-workspace-view .waiting-research-banner { border-radius: 12px; background: linear-gradient(135deg, #fffbeb, #fef3c7); }

/* Wide (≥ 340): everything labelled (default above). */
/* Standard (260–339): main button full width, the rest icon-only */
@container rail (min-width: 260px) and (max-width: 339px) {
  .job-workspace-view .task-card-actions .task-action-btn { font-size: 0; gap: 0; padding: 0 7px; height: 26px; }
  .job-workspace-view .task-card-actions .task-action-btn svg { width: 13px; height: 13px; margin: 0; }
  .job-workspace-view .task-card-actions .task-action--start,
  .job-workspace-view .task-card-actions .task-action--submit,
  .job-workspace-view .task-card-actions .task-action--accept { flex: 1; font-size: 11px; justify-content: center; gap: 5px; }
  .job-workspace-view .task-card-actions .task-action--attach,
  .job-workspace-view .task-card-actions .task-action--revert,
  .job-workspace-view .task-card-actions .task-action--insights { display: inline-flex !important; }
  .job-workspace-view .task-assignee-name { max-width: 110px; }
}
/* Compact (90–259): one line — number · name · action icons; second line avatar + status */
@container rail (min-width: 90px) and (max-width: 259px) {
  .job-workspace-view .task-card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "num title acts" ". status status" ". who who"; padding: 7px 8px; row-gap: 4px; }
  .job-workspace-view .task-card-title { -webkit-line-clamp: 1; font-size: 12px; }
  .job-workspace-view .task-status-badge { justify-self: start; font-size: 10px; }
  .job-workspace-view .task-card-actions { flex-wrap: nowrap; display: flex !important; }
  .job-workspace-view .task-card-actions .task-action-btn { display: inline-flex !important; font-size: 0; gap: 0; width: 26px; height: 26px; padding: 0; justify-content: center; }
  .job-workspace-view .task-card-actions .task-action-btn svg { width: 13px; height: 13px; margin: 0; }
  .job-workspace-view .task-card-actions .task-hint, .job-workspace-view .task-lock-icon { font-size: 0; }
  .job-workspace-view .task-card-meta, .job-workspace-view .task-assigned-me, .job-workspace-view .dm-chat-btn { display: none; }
  .job-workspace-view .task-assignee-name { display: inline; max-width: 90px; font-size: 11px; }
  .job-workspace-view .task-thumb-wrap { display: none; }
}
/* Collapsed strip (< 90): numbered status dots only */
@container rail (max-width: 89px) {
  .job-workspace-view .workspace-left-rail { padding: 6px 0 !important; align-items: center; }
  .job-workspace-view .workspace-rail-header { margin: 0; padding: 4px; background: none; border: 0; align-items: center; }
  .job-workspace-view .workspace-rail-title, .job-workspace-view #job-progress,
  .job-workspace-view .workspace-ai-section, .job-workspace-view .waiting-research-banner { display: none !important; }
  .job-workspace-view #ws-job-tasks { align-items: center; gap: 12px !important; padding-top: 8px; }
  .job-workspace-view .task-card { display: flex; padding: 0; border: 0; background: transparent !important; box-shadow: none; cursor: pointer; }
  .job-workspace-view .task-card > .task-card-top { display: flex; }
  .job-workspace-view .task-card > .task-card-top > :not(.task-step-circle), .job-workspace-view .task-card > .task-card-bottom { display: none !important; }
  .job-workspace-view .task-step-circle { width: 30px; height: 30px; font-size: 12px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--st, #94a3b8) 30%, transparent); }
  /* right rail strip: vertical icon tabs, content hidden */
  .job-workspace-view .workspace-tabs-header { flex-direction: column; border: 0; padding: 8px 0; }
  .job-workspace-view .workspace-tab-btn { width: 36px; height: 36px; padding: 0 !important; justify-content: center; }
  .job-workspace-view .workspace-tab-btn svg { width: 16px; height: 16px; }
  .job-workspace-view .workspace-tab-content { display: none; }
}
/* Details rail narrow: icon-only tabs, one-column details */
@container rail (max-width: 380px) {
  .job-workspace-view .pl2-tab-lbl { display: none; }
  .job-workspace-view .workspace-tab-btn { padding: 6px 8px !important; }
  .job-workspace-view .workspace-tab-btn.active .pl2-tab-lbl { display: inline; }
}
@container rail (max-width: 89px) {
  .job-workspace-view .workspace-tab-btn.active .pl2-tab-lbl { display: none; }
}

/* ── Responsive board chrome (sizes follow the page's real width, not the viewport, so the
   sidebar open/closed, browser zoom and long live numbers never push things out of place) ── */
/* Containers sit on the band and the toolbar only — never on .pl2-page, because container
   (layout) containment would trap the position:fixed sticky lane headers. */
.pl2-page .pipeline-page-heading { container: pl2band / inline-size; flex-wrap: wrap; row-gap: 12px; }
.pl2-page .pipeline-control-panel { container: pl2bar / inline-size; }
.pl2-page .pipeline-heading-copy { flex: 0 1 auto; min-width: 0; }
.pl2-kpis { flex: 1 1 0; min-width: 0; max-width: 680px; margin-left: auto; }  /* basis 0 → never forces a wrap */
.pl2-kpis .pipeline-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pl2-kpis .pipeline-summary-card { min-width: 0; width: 100%; }
.pl2-kpis .pipeline-summary-card > :not(.pipeline-summary-icon) { min-width: 0; }
.pl2-kpis .pipeline-summary-label, .pl2-kpis .pipeline-summary-delta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl2-page .pipeline-create-btn { flex: 0 0 auto; white-space: nowrap; }
.pl2-page .pipeline-heading-pill, .pl2-queue .badge { white-space: nowrap; }
@container pl2band (max-width: 1000px) {
  .pl2-kpis { order: 3; flex: 1 1 100%; width: 100%; max-width: none; margin-left: 0; }
  .pl2-kpis .pipeline-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container pl2band (max-width: 620px) {
  .pl2-kpis .pipeline-summary-grid { grid-template-columns: 1fr 1fr; }
  .pl2-page .pipeline-heading-copy { min-width: 0; }
  .pl2-page .pipeline-create-btn { width: 100%; justify-content: center; }
}
/* Toolbar: search shrinks first so the filters stay on one row; wraps cleanly when narrow */
.pl2-page .pipeline-toolbar-row { flex-wrap: wrap; row-gap: 6px; }
.pl2-page #pipeline-search-slot { flex: 1 1 160px; min-width: 140px; max-width: 300px; margin-left: auto; }
.pl2-page #pipeline-search-slot .pipeline-search-inline, .pl2-page #pipeline-search-slot input { width: 100%; min-width: 0; }
.pl2-page .pipeline-toolbar-row > div, .pl2-page .pl2-more { flex: 0 0 auto; }
.pl2-page .pipeline-toolbar-row > #pipeline-search-slot { flex: 1 1 160px; }
.pl2-page .pl2-chips:empty { display: none; }
@container pl2bar (max-width: 900px) {
  .pl2-page #pipeline-search-slot { order: -1; flex-basis: 100%; max-width: none; margin-left: 0; }
}

/* ── Live presence toast (replaces the old "Also on the pipeline now" card) ── */
.pl2-presence {
  position: fixed; z-index: 950; bottom: 96px; right: 24px;  /* above the chat button, clear of Create Job */
  display: flex; align-items: center; gap: 10px; max-width: min(380px, calc(100vw - 36px));
  padding: 10px 10px 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .96);
  border: 1px solid #d1fae5; box-shadow: 0 20px 40px -20px rgba(15, 23, 42, .45); backdrop-filter: blur(8px);
  animation: pl2-presence-in .25s ease-out;
}
.pl2-presence.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .18s, transform .18s; }
@keyframes pl2-presence-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pl2-presence-stack { display: inline-flex; flex: 0 0 auto; }
.pl2-presence-av { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; margin-left: -7px; }
.pl2-presence-av:first-child { margin-left: 0; }
.pl2-presence-text { display: grid; min-width: 0; font-size: 12px; color: #334155; line-height: 1.35; }
.pl2-presence-text b { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #047857; }
.pl2-presence-text > span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pl2-presence-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .25); animation: pl2-pulse 1.8s infinite; }
@keyframes pl2-pulse { 50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } }
.pl2-presence-x { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 0; background: #f1f5f9; color: #475569; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pl2-presence-x:hover { background: #e2e8f0; }
@media (max-width: 640px) { .pl2-presence { left: 12px; right: 12px; bottom: 84px; max-width: none; } }

/* Job top bar: the title shrinks, chips drop out before the actions ever get pushed off */
.job-workspace-view .workspace-top-bar { min-width: 0; }

.job-workspace-view .workspace-top-right { flex-wrap: nowrap; }
.job-workspace-view .ws-field-value .badge, .job-workspace-view .workspace-field-value .badge { position: static; margin: 0; vertical-align: middle; }

/* ═════════════ Rich content editor (pipeline_editor.js) ═════════════ */
.job-workspace-view .workspace-editor-header { position: relative; align-items: flex-start; }
.job-workspace-view .pl2-rte-bar { display: flex; align-items: center; gap: 2px 3px; flex: 1; min-width: 0; padding: 4px 6px; }
.pl2-rte-grp { display: inline-flex; align-items: center; gap: 1px; }
.pl2-rte-sep { width: 1px; height: 18px; background: #e2e8f0; margin: 0 3px; flex: 0 0 auto; }
.job-workspace-view .pl2-rte-bar .btn { position: relative; min-width: 28px; height: 28px; padding: 0 6px; color: #334155; display: inline-flex; align-items: center; justify-content: center; }
.job-workspace-view .pl2-rte-bar .btn.is-on { background: #d1fae5; color: #047857; box-shadow: inset 0 0 0 1px #a7f3d0; }
.job-workspace-view .pl2-rte-bar .btn[aria-expanded="true"] { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.pl2-rte-swatch { position: absolute; left: 7px; right: 7px; bottom: 3px; height: 3px; border-radius: 2px; background: transparent; }
.pl2-rte-block { height: 28px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: #0f172a; padding: 0 6px; cursor: pointer; }
.pl2-rte-bar.is-source .btn:not([data-rte="source"]):not([data-rte="full"]), .pl2-rte-bar.is-source .pl2-rte-block { opacity: .35; pointer-events: none; }
@container canvas (max-width: 620px) { .pl2-rte-bar [data-rte-opt] { display: none !important; } .pl2-rte-sep { display: none; } }

.pl2-rte-pop { position: absolute; z-index: 70; min-width: 210px; max-width: 320px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 20px 40px -18px rgba(15, 23, 42, .45); font-size: 12px; }
.pl2-rte-pop-h { font-weight: 800; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #64748b; margin-bottom: 8px; }
.pl2-rte-sw { display: grid; grid-template-columns: repeat(5, 26px); gap: 6px; }
.pl2-rte-sw button { width: 26px; height: 26px; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 0 0 1px #e2e8f0; cursor: pointer; }
.pl2-rte-sw button:hover { box-shadow: 0 0 0 2px #10b981; }
.pl2-rte-link { margin-top: 8px; border: 0; background: none; color: #047857; font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.pl2-rte-fld { display: grid; gap: 3px; margin-bottom: 8px; font-weight: 700; color: #334155; }
.pl2-rte-fld em { font-style: normal; font-weight: 500; color: #94a3b8; }
.pl2-rte-fld input { height: 30px; border-radius: 8px; border: 1px solid #cbd5e1; padding: 0 8px; font: inherit; font-weight: 500; }
.pl2-rte-fld input:focus { outline: 2px solid #a7f3d0; border-color: #10b981; }
.pl2-rte-fld input.is-bad { border-color: #f43f5e; }
.pl2-rte-chk { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #475569; }
.pl2-rte-row { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.pl2-rte-count { margin-right: auto; color: #64748b; font-weight: 600; }
.pl2-rte-go, .pl2-rte-ghost { height: 28px; padding: 0 10px; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; }
.pl2-rte-go { border: 0; background: linear-gradient(135deg, #10b981, #047857); color: #fff; }
.pl2-rte-ghost { border: 1px solid #e2e8f0; background: #fff; color: #334155; }
.pl2-rte-grid { display: grid; grid-template-columns: repeat(8, 18px); gap: 3px; }
.pl2-rte-grid span { width: 18px; height: 18px; border-radius: 4px; border: 1px solid #cbd5e1; background: #f8fafc; cursor: pointer; }
.pl2-rte-grid span.on { background: #a7f3d0; border-color: #10b981; }
.pl2-rte-gridlbl { margin-top: 6px; text-align: center; color: #475569; font-weight: 700; }
.pl2-rte-tt { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pl2-rte-tt button { height: 28px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.pl2-rte-tt button:hover { background: #f0fdf4; border-color: #a7f3d0; }
.pl2-rte-tt .is-danger { color: #be123c; border-color: #fecdd3; }
.pl2-rte-keys { border-collapse: collapse; width: 100%; }
.pl2-rte-keys td { padding: 3px 4px; vertical-align: top; color: #334155; }
.pl2-rte-keys kbd { display: inline-block; padding: 1px 6px; border-radius: 6px; background: #f1f5f9; border: 1px solid #e2e8f0; font: 600 10.5px ui-monospace, monospace; white-space: nowrap; }

.pl2-rte-source { flex: 1; min-height: 320px; width: 100%; box-sizing: border-box; resize: none; border-radius: 12px; border: 1px solid #334155; background: #0f172a; color: #d1fae5; padding: 14px; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.pl2-rte-stats { display: inline-flex; flex-wrap: wrap; gap: 10px; font-size: 11px; }
.pl2-rte-stats .is-warn { color: #b45309; font-weight: 700; }
@container canvas (max-width: 620px) { .pl2-rte-stats { display: none; } }

/* Focus mode */
.job-workspace-view .workspace-centre-canvas.pl2-rte-full {
  position: fixed; inset: 0; z-index: 1200; border-radius: 0; border: 0; background: #f8fafc !important;
  padding: 0 max(24px, calc((100vw - 1280px) / 2)) 0; box-shadow: none;
}
.job-workspace-view .workspace-centre-canvas.pl2-rte-full .workspace-headline-banner { margin-top: 16px; }
.job-workspace-view .workspace-centre-canvas.pl2-rte-full .workspace-editor-surface { width: 100%; max-width: none; margin: 0; }
html.pl2-rte-noscroll { overflow: hidden; }

/* Article typography inside the editor */
.job-workspace-view .workspace-editor-surface { line-height: 1.7; }
.job-workspace-view .workspace-editor-surface h1 { font-size: 1.75em; line-height: 1.25; margin: .8em 0 .4em; }
.job-workspace-view .workspace-editor-surface h2 { font-size: 1.4em; line-height: 1.3; margin: 1em 0 .4em; color: #063d2a; }
.job-workspace-view .workspace-editor-surface h3 { font-size: 1.18em; margin: .9em 0 .35em; color: #0f3b2e; }
.job-workspace-view .workspace-editor-surface h4 { font-size: 1.04em; margin: .8em 0 .3em; }
.job-workspace-view .workspace-editor-surface blockquote { margin: .8em 0; padding: .5em 1em; border-left: 4px solid #10b981; background: #f0fdf4; border-radius: 0 10px 10px 0; color: #334155; }
.job-workspace-view .workspace-editor-surface pre { background: #0f172a; color: #e2e8f0; padding: .8em 1em; border-radius: 10px; overflow-x: auto; font: 12.5px/1.6 ui-monospace, monospace; white-space: pre-wrap; }
.job-workspace-view .workspace-editor-surface code { background: #f1f5f9; color: #be185d; padding: .1em .35em; border-radius: 5px; font-size: .9em; font-family: ui-monospace, monospace; }
.job-workspace-view .workspace-editor-surface pre code { background: none; color: inherit; padding: 0; }
.job-workspace-view .workspace-editor-surface table { border-collapse: collapse; width: 100%; margin: .8em 0; font-size: .95em; }
.job-workspace-view .workspace-editor-surface th, .job-workspace-view .workspace-editor-surface td { border: 1px solid #cbd5e1; padding: 6px 9px; text-align: left; vertical-align: top; min-width: 40px; }
.job-workspace-view .workspace-editor-surface th { background: #ecfdf5; font-weight: 700; }
.job-workspace-view .workspace-editor-surface img { max-width: 100%; height: auto; border-radius: 10px; }
.job-workspace-view .workspace-editor-surface figure { margin: 1em 0; text-align: center; }
.job-workspace-view .workspace-editor-surface figcaption { font-size: .85em; color: #64748b; margin-top: 4px; }
.job-workspace-view .workspace-editor-surface hr { border: 0; border-top: 2px solid #e2e8f0; margin: 1.4em 0; }
.job-workspace-view .workspace-editor-surface a { color: #047857; text-decoration: underline; }
.job-workspace-view .workspace-editor-surface ul, .job-workspace-view .workspace-editor-surface ol { padding-left: 1.5em; }

/* dragged card */
.pl2-page .job-card.pl2-dragging { opacity: .55; transform: rotate(-1.5deg); }
.job-workspace-view .pl2-rte-bar .pl2-rte-block { width: auto; min-width: 0; flex: 0 0 auto; max-width: 120px; }
.job-workspace-view .workspace-editor-header:has(.pl2-rte-bar) { padding-right: 0; }
.job-workspace-view .workspace-editor-header:has(.pl2-rte-bar) .pl2-saved { position: absolute; right: 6px; top: -22px; }
.job-workspace-view .workspace-editor-surface th { text-transform: none; letter-spacing: 0; font-size: inherit; color: #0f172a; }
/* Phones: keep the band a wrapping row (mobile.css switches it to a column, which pushed the
   KPI tiles out of view once they became flexible). */
@media (max-width: 768px) {
  .pl2-page .pipeline-page-heading { flex-direction: row; align-items: center; }
}
@container pl2bar (max-width: 900px) {
  .pl2-page .pipeline-toolbar-row > #pipeline-search-slot { flex: 1 1 100%; max-width: none; }
}


/* ═════ Editor layout v2: the whole canvas scrolls (headline scrolls away), the toolbar
   sticks to the top and the word-count/save bar to the bottom, so the writing area is tall. ═════ */
.job-workspace-view .workspace-centre-canvas { position: relative; overflow-y: auto; padding-top: 14px; padding-bottom: 0; }
.job-workspace-view .workspace-centre-canvas > .workspace-headline-banner { flex-shrink: 0; }
.job-workspace-view .workspace-editor-header:has(.pl2-rte-bar) {
  position: sticky; top: -14px; z-index: 8; margin: 0 -16px 10px; padding: 8px 16px 8px;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid #eef2f7;
}
.job-workspace-view .workspace-editor-header:has(.pl2-rte-bar) .pl2-saved { top: auto; bottom: calc(100% + 2px); right: 16px; }
.job-workspace-view #editor.workspace-editor-surface { flex: 1 0 auto; overflow: visible; min-height: max(460px, 62vh); padding: 22px 26px; font-size: 15.5px; }
.job-workspace-view .workspace-editor-surface::after { content: ""; display: block; clear: both; }
.job-workspace-view .pl2-rte-source { flex: 1 0 auto; min-height: max(460px, 62vh); }
.job-workspace-view .workspace-centre-canvas > .workspace-editor-footer {
  position: sticky; bottom: 0; z-index: 8; margin: 10px -16px 0; padding: 9px 16px;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-top: 1px solid #eef2f7;
}
.job-workspace-view .workspace-centre-canvas.pl2-rte-full > .workspace-editor-footer,
.job-workspace-view .workspace-centre-canvas.pl2-rte-full .workspace-editor-header:has(.pl2-rte-bar) { margin-left: 0; margin-right: 0; border-radius: 0; }

/* Headline banner: compact, with the brief's key facts */
.job-workspace-view .workspace-headline-banner { padding: 10px 14px; border: 1px solid #d1fae5; margin-bottom: 10px; }
.job-workspace-view .workspace-article-headline { font-size: 21px; font-weight: 700; line-height: 1.3; color: #063d2a; }
.pl2-hl-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.pl2-hl-meta:empty { display: none; }
.pl2-hl-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .85); border: 1px solid #e2e8f0; font-size: 11px; font-weight: 600; color: #334155; text-transform: capitalize; max-width: 100%; }
.pl2-hl-chip svg { width: 12px; height: 12px; color: #059669; flex: 0 0 auto; }
.pl2-hl-chip.is-kw { text-transform: none; border-color: #a7f3d0; background: #ecfdf5; color: #065f46; font-weight: 700; }
.pl2-hl-chip.is-kw b { font-weight: 600; color: #047857; opacity: .8; }
.pl2-hl-chip.is-kw b:not(:empty)::before { content: "· "; }
.pl2-hl-chip.is-kw.is-missing { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.pl2-hl-chip.is-kw.is-missing b { color: #b45309; }
.pl2-hl-chip.is-late { border-color: #fecdd3; background: #fff1f2; color: #be123c; }
.pl2-hl-chip.is-late svg { color: #e11d48; }

/* Image upload drop area in the Insert image popover */
.pl2-rte-drop { display: grid; justify-items: center; gap: 2px; padding: 12px; border: 1.5px dashed #a7f3d0; border-radius: 12px; background: #f0fdf4; cursor: pointer; text-align: center; margin-bottom: 8px; }
.pl2-rte-drop svg { width: 20px; height: 20px; color: #059669; }
.pl2-rte-drop b { font-size: 12px; color: #065f46; }
.pl2-rte-drop span { font-size: 10.5px; color: #64748b; }
.pl2-rte-drop:hover { background: #dcfce7; }
.pl2-rte-drop.is-ready { border-style: solid; border-color: #10b981; }
.pl2-rte-drop.is-busy { opacity: .6; }
.pl2-rte-or { display: flex; align-items: center; gap: 8px; color: #94a3b8; font-size: 10.5px; margin: 2px 0 8px; }
.pl2-rte-or::before, .pl2-rte-or::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }
.job-workspace-view .workspace-editor-surface img { cursor: pointer; }

/* Image selection frame + floating image toolbar */
.pl2-img-frame { position: absolute; z-index: 7; pointer-events: none; outline: 2px solid #10b981; outline-offset: 1px; border-radius: 6px; box-shadow: 0 0 0 4px rgba(16, 185, 129, .18); }
.pl2-img-frame[hidden], .pl2-img-bar[hidden] { display: none; }
.pl2-img-handle { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 4px; background: #10b981; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); cursor: nwse-resize; pointer-events: auto; }
.pl2-img-size { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(15, 23, 42, .75); color: #fff; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.pl2-img-bar { position: absolute; z-index: 9; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: #0f172a; box-shadow: 0 16px 34px -14px rgba(15, 23, 42, .7); }
.pl2-img-grp { display: inline-flex; gap: 1px; }
.pl2-img-grp + .pl2-img-grp { border-left: 1px solid rgba(255, 255, 255, .15); padding-left: 3px; margin-left: 2px; }
.pl2-img-bar button { min-width: 28px; height: 28px; padding: 0 7px; border: 0; border-radius: 8px; background: transparent; color: #e2e8f0; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pl2-img-bar button svg { width: 14px; height: 14px; }
.pl2-img-bar button:hover { background: rgba(255, 255, 255, .12); }
.pl2-img-bar button.is-on { background: #10b981; color: #fff; }
.pl2-img-bar button.is-warn { color: #fbbf24; }
.pl2-img-bar [data-img="delete"]:hover { background: #e11d48; color: #fff; }
@container canvas (max-width: 520px) { .pl2-img-bar { flex-wrap: wrap; max-width: calc(100% - 16px); } }
.job-workspace-view .workspace-editor-footer .pl2-saved { position: static; margin-left: auto; }
.job-workspace-view .workspace-editor-footer .pl2-saved:not(:empty) + .pl2-save { margin-left: 0; }


/* ═════ Job top bar v3: dynamic actions (Approve / Request changes / Publish…) never push the
   title out. The bar is its own size container; chips drop out one by one as space runs out,
   and as a last resort the actions wrap onto a second row aligned right. ═════ */
.job-workspace-view .workspace-top-bar { container: wsbar / inline-size; max-height: 220px; transition: max-height .22s ease, padding .22s ease, opacity .18s ease, border-color .22s; }
.job-workspace-view .ws-bar-identity { display: flex; align-items: center; flex-wrap: wrap; row-gap: 6px; width: 100%; min-width: 0; overflow: visible; }
.job-workspace-view .ws-title-group { flex: 1 1 240px; min-width: 180px; display: flex; align-items: center; gap: 8px; }
.job-workspace-view .ws-info-items { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
.job-workspace-view .workspace-top-right { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.job-workspace-view #ws-top-publish-container:empty { display: none; }
.job-workspace-view #ws-top-publish-container .row { flex-wrap: nowrap; gap: 6px !important; }
.job-workspace-view #ws-top-publish-container .btn { height: 30px; padding: 0 12px; font-size: 12px; font-weight: 700; border-radius: 999px; white-space: nowrap; }
.job-workspace-view #ws-top-publish-container .btn:not(.secondary) { background: linear-gradient(135deg, #10b981, #047857); border: 0; color: #fff; }
.job-workspace-view #ws-top-publish-container .btn.secondary { background: #fff; border: 1px solid #a7f3d0; color: #047857; }
.job-workspace-view .ws-status-group .badge { white-space: nowrap; }
@container wsbar (max-width: 1500px) { .job-workspace-view .pl2-chip-lang { display: none; } }
@container wsbar (max-width: 1380px) { .job-workspace-view .pl2-chip-words, .job-workspace-view .pl2-kicker .ws-description { display: none; } }
@container wsbar (max-width: 1240px) { .job-workspace-view .ws-info-items { display: none; } }
@container wsbar (max-width: 1080px) { .job-workspace-view .pl2-presets { display: none !important; } .job-workspace-view .pl2-kicker .ws-created-date { display: none; } }
@container wsbar (max-width: 900px) { .job-workspace-view .ws-status-group #ws-job-approval-badge { display: none; } .job-workspace-view .ws-content-type-icon { display: none; } }

/* Auto-hide: scrolling down in the editor folds the top bar away (more writing room);
   scrolling back up — or reaching the top — brings it back. */
.job-workspace-view.pl2-bar-hidden .workspace-top-bar { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-bottom-color: transparent; overflow: hidden; pointer-events: none; }

/* The article area never gets its own inner scrollbar — the canvas scrolls instead. */
.job-workspace-view #editor.workspace-editor-surface { max-height: none !important; overflow: visible !important; height: auto !important; }

/* Tighter page gutter on the Pipeline board (the band still runs edge to edge: its negative
   margins use the same variable). */
#view:has(> .pl2-page) { --page-gutter: 12px; }
.pl2-page .pipeline-page-heading { padding-left: 16px; padding-right: 16px; gap: 12px; }
.pl2-page .pipeline-heading-title-row { min-width: 0; }
.pl2-page .pipeline-page-heading h1 { overflow: hidden; text-overflow: ellipsis; }
@container pl2band (max-width: 1380px) { .pl2-page .pipeline-heading-pill { display: none; } }
@container pl2band (max-width: 1180px) { .pl2-kpis .pipeline-summary-icon { display: none; } .pl2-kpis .pipeline-summary-card { padding-left: 10px; } }

/* "My completed (30 days)" lane */
.pl2-page [data-my-completed-lane] { width: 340px; }
.pl2-done-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.pl2-done-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: #ede9fe; color: #6d28d9; }
.pl2-done-chip.is-accepted { background: #d1fae5; color: #047857; }
.pl2-done-stage { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: #f1f5f9; color: #475569; }