/*
 * Backlog view stylesheet (kanban + list + gantt host + detail panel).
 *
 * Spec: .claude/specs/workflow-domain-redesign/ FR-01.
 * Extracted from inline <style> at pwa/views/backlog.js:51-239.
 * 53 hex/rgba literals retained for phase-2 token sweep.
 */

.bl-header { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 8px; position:sticky; top:0; z-index:20; background:var(--bg); }
.bl-header-left { display:flex; align-items:center; gap:var(--space-snug); }
.bl-header h1 { font-size:22px; font-weight:700; }
.bl-count { background:var(--link); color:var(--color-on-primary); font-size:13px; font-weight:600; padding:2px 8px; border-radius:var(--radius-snug); }
/* .bl-header-right shape covered by .base-row; class kept as JS hook only. */
.bl-live-pill { display:flex; align-items:center; gap:var(--space-tight); padding:5px 10px; border-radius:var(--radius-pill); font-size:11px; color:var(--hint); background:var(--bg2); border:1px solid color-mix(in srgb, var(--color-on-primary) 8%, transparent); }
.bl-live-dot { width:7px; height:7px; border-radius:var(--radius-full); background:var(--color-on-surface-variant); box-shadow:0 0 0 0 color-mix(in srgb, var(--color-on-surface-variant) 35%, transparent); }
.bl-live-dot.ok { background:var(--color-success); box-shadow:0 0 10px color-mix(in srgb, var(--color-success) 45%, transparent); }
.bl-live-dot.wait { background:var(--color-warning); box-shadow:0 0 10px color-mix(in srgb, var(--color-warning) 35%, transparent); }
.bl-live-dot.off { background:var(--color-error); box-shadow:0 0 10px color-mix(in srgb, var(--color-error) 35%, transparent); }
/* View toggle (Board/List/Gantt/Calendar) — primitive: mountTabStrip(variant:'segmented').
   Slot host gives the strip a max-width to match the original 4-button width. */
.bl-view-toggle { max-width:340px; }
.bl-add-btn { width:36px; height:36px; border-radius:var(--radius-full); background:var(--link); color:var(--color-on-primary); border:none; font-size:22px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.bl-search-wrap { padding:0 16px 8px; position:sticky; top:60px; z-index:15; background:var(--bg); }
.bl-search-box { display:flex; align-items:center; gap:var(--space-base); background:var(--bg2); border-radius:var(--radius-wide); padding:0 14px; height:40px; }
.bl-search-box input { flex:1; border:none; background:transparent; outline:none; font-size:15px; color:var(--text); }
.bl-search-box input::placeholder { color:var(--hint); }
.bl-search-clear { font-size:18px; color:var(--hint); cursor:pointer; display:none; }
.bl-search-clear.visible { display:block; }
/* Filter bar — primitive: uxFilterBar({filters, active, sort}). Outer pad
   keeps view chrome aligned with search box and main list. */
.bl-filter-bar-wrap { padding:4px 16px 12px; }
.bl-task-list { padding:0 16px; }
.bl-task-card { display:flex; align-items:center; gap:var(--space-sm); padding:var(--space-roomy); margin-bottom:var(--space-base); background:var(--bg2); border-radius:var(--radius-md); cursor:pointer; min-height:56px; }
.bl-task-card:active { transform:scale(0.98); }
.bl-task-info { flex:1; min-width:0; }
.bl-task-title { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-task-meta { font-size:12px; color:var(--hint); margin-top:var(--space-hairline); }
.bl-kanban { display:flex; gap:var(--space-sm); padding:8px 16px; overflow-x:auto; scroll-snap-type:x mandatory; min-height:calc(100vh - 120px); }
.bl-kanban::-webkit-scrollbar { display:none; }
.bl-kanban-col { flex:0 0 calc(100vw - 48px); scroll-snap-align:start; background:var(--bg2); border-radius:var(--radius-roomy); padding:var(--space-sm); display:flex; flex-direction:column; min-height:200px; max-height:calc(100vh - 130px); }
@media(min-width:600px) { .bl-kanban-col { flex:0 0 260px; } }
.bl-col-header { display:flex; align-items:center; gap:var(--space-base); padding:0 4px 10px; font-size:14px; font-weight:700; }
.bl-col-count { font-size:12px; font-weight:600; background:var(--bg); color:var(--hint); padding:1px 7px; border-radius:var(--radius-default); }
.bl-col-cards { flex: 1; overflow-y: auto; padding-bottom: var(--space-base); }
.bl-col-cards::-webkit-scrollbar { display:none; }
.bl-k-card { background:var(--bg); border-radius:var(--radius-snug); padding:var(--space-sm); cursor:pointer; box-shadow:0 1px 3px color-mix(in srgb, var(--color-on-surface) 10%, transparent); touch-action:pan-y; }
.bl-k-card:active { transform:scale(0.97); }
.bl-k-card.dragging { opacity:0.3; }
.bl-k-title { font-size:14px; font-weight:600; margin-bottom:var(--space-tight); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.bl-k-footer { display:flex; align-items:center; gap:var(--space-tight); font-size:11px; color:var(--hint); }
.bl-progress-wrap { height:4px; border-radius:var(--radius-sm); background:color-mix(in srgb, var(--color-on-primary) 10%, transparent); margin-top:var(--space-tight); overflow:hidden; }
.bl-progress-fill { height:100%; border-radius:var(--radius-sm); background:var(--link); }
.bl-drag-ghost { position:fixed; z-index:500; pointer-events:none; transform:rotate(3deg) scale(1.04); box-shadow:0 8px 24px color-mix(in srgb, var(--color-on-surface) 30%, transparent); border-radius:var(--radius-snug); opacity:0.95; }
.bl-kanban-col.drop-target { outline:2px dashed var(--link); outline-offset:-2px; background:color-mix(in srgb, var(--color-primary) 10%, transparent); }
.bl-fab { position:fixed; bottom:80px; right:var(--space-wide); z-index:50; width:56px; height:56px; border-radius:28px; background:var(--link); color:var(--color-on-primary); border:none; font-size:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 16px color-mix(in srgb, var(--color-on-surface) 30%, transparent); }
/* Empty state — primitive: uxEmpty(icon, title, desc) */
.bl-detail-overlay { position:fixed; inset:0; background:color-mix(in srgb, var(--color-on-surface) 40%, transparent); z-index:100; opacity:0; pointer-events:none; transition:opacity 0.25s; }
.bl-detail-overlay.open { opacity:1; pointer-events:auto; }
.bl-detail-panel { position:fixed; bottom:0; left:0; right:0; background:var(--bg); border-radius:16px 16px 0 0; z-index:101; transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.32,0.72,0,1); padding:8px 0 calc(76px + max(8px, env(safe-area-inset-bottom,16px)) + 8px); max-height:85vh; overflow-y:auto; }
body.has-work-tray .bl-detail-panel { padding-bottom: calc(76px + 34px + max(8px, env(safe-area-inset-bottom,16px)) + 8px); }
.bl-detail-panel.open { transform:translateY(0); }
.bl-detail-handle { width:36px; height:4px; border-radius:var(--radius-sm); background:var(--hint); opacity:0.5; margin:8px auto 12px; }
.bl-detail-header { padding:0 20px 12px; }
.bl-detail-title { font-size:18px; font-weight:700; margin-bottom:var(--space-base); }
.bl-detail-badges { display:flex; gap:var(--space-base); flex-wrap:wrap; }
.bl-detail-badge { font-size:12px; font-weight:600; padding:4px 10px; border-radius:var(--radius-snug); background:var(--bg2); }
.bl-detail-actions { display:flex; gap:var(--space-base); padding:8px 20px 16px; overflow-x:auto; }
.bl-action-chip { flex-shrink:0; padding:8px 14px; border-radius:var(--radius-snug); font-size:13px; font-weight:600; cursor:pointer; border:none; background:var(--bg2); color:var(--text); }
.bl-action-chip.primary { background:var(--link); color:var(--color-on-primary); }
.bl-action-chip.danger { color:var(--color-error); }
.bl-detail-section { padding:0 20px 16px; }
/* Section header — primitive: uxSectionHeader(text). Local rule keeps
   the action-row layout (e.g. "Stakeholders + Add" right-aligned button). */
.bl-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-base); }
.bl-section-header .ux-section-header { padding:0; }
.bl-subtask-item { display:flex; align-items:center; gap:var(--space-snug); padding:10px 0; border-bottom:1px solid var(--bg2); }
.bl-subtask-check { width:22px; height:22px; border-radius:var(--radius-tight); border:2px solid var(--hint); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; font-size:14px; color:transparent; }
.bl-subtask-check.checked { background:var(--link); border-color:var(--link); color:var(--color-on-primary); }
/* Subtask status pill — primitive: uxState(state). Mapping:
   pending → queued, in_progress → in-progress, done → completed,
   failed → failed, skipped → stale. The primitive owns visuals
   (text color + attention dot + pulse), so no local color rules needed. */
@keyframes pulse-status { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
.bl-subtask-text { flex:1; font-size:14px; }
.bl-subtask-text.done-text { text-decoration:line-through; color:var(--hint); }
.bl-subtask-text.failed-text { color:var(--color-error); }
.bl-subtask-del { font-size:16px; color:var(--hint); cursor:pointer; padding:var(--space-xs); }
.bl-inline-add { display:flex; gap:var(--space-base); margin-top:var(--space-base); }
.bl-inline-add input { flex:1; padding:8px 12px; border-radius:var(--radius-snug); border:1.5px solid var(--hint); font-size:14px; outline:none; background:var(--bg2); color:var(--text); }
.bl-inline-add input:focus { border-color:var(--link); }
.bl-inline-add button { padding:8px 14px; border-radius:var(--radius-snug); border:none; background:var(--link); color:var(--color-on-primary); font-size:14px; font-weight:600; cursor:pointer; }
.bl-progress-detail { height:6px; border-radius:3px; background:color-mix(in srgb, var(--color-on-primary) 10%, transparent); margin-bottom:var(--space-snug); overflow:hidden; }
.bl-progress-detail-fill { height:100%; border-radius:3px; background:var(--link); }
.bl-progress-label { font-size:12px; color:var(--hint); margin-bottom:var(--space-tight); }
.bl-comment-item { padding:10px 0; border-bottom:1px solid var(--bg2); display:flex; align-items:flex-start; gap:var(--space-base); }
.bl-comment-text { flex:1; font-size:14px; line-height:1.4; }
.bl-comment-time { font-size:11px; color:var(--hint); margin-top:var(--space-hairline); }
.bl-comment-del { font-size:14px; color:var(--hint); cursor:pointer; padding:var(--space-hairline); }
.bl-sheet-overlay { position:fixed; inset:0; background:color-mix(in srgb, var(--color-on-surface) 40%, transparent); z-index:200; opacity:0; pointer-events:none; transition:opacity 0.25s; }
.bl-sheet-overlay.open { opacity:1; pointer-events:auto; }
.bl-sheet { position:fixed; bottom:0; left:0; right:0; background:var(--bg); border-radius:16px 16px 0 0; z-index:201; transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.32,0.72,0,1); padding:8px 0 env(safe-area-inset-bottom,16px); max-height:70vh; overflow-y:auto; }
.bl-sheet.open { transform:translateY(0); }
.bl-sheet-title { font-size:16px; font-weight:700; padding:0 20px 12px; }
.bl-sheet-item { display:flex; align-items:center; gap:var(--space-roomy); padding:14px 20px; font-size:16px; cursor:pointer; }
.bl-sheet-item:active { background:var(--bg2); }
.bl-sheet-item.danger { color:var(--color-error); }
.bl-sheet-item .check { margin-left:auto; color:var(--link); font-size:18px; font-weight:700; }
.bl-modal-overlay { position:fixed; inset:0; background:color-mix(in srgb, var(--color-on-surface) 40%, transparent); z-index:300; opacity:0; pointer-events:none; transition:opacity 0.2s; display:flex; align-items:flex-end; justify-content:center; }
.bl-modal-overlay.open { opacity:1; pointer-events:auto; }
.bl-modal { width:100%; max-width:500px; background:var(--bg); border-radius:16px 16px 0 0; padding:20px 20px env(safe-area-inset-bottom,20px); transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.32,0.72,0,1); }
.bl-modal-overlay.open .bl-modal { transform:translateY(0); }
.bl-modal h2 { font-size:18px; font-weight:700; margin-bottom:var(--space-roomy); }
.bl-modal-input { width:100%; padding:12px 14px; border-radius:var(--radius-md); border:1.5px solid var(--hint); font-size:16px; outline:none; background:var(--bg2); color:var(--text); }
.bl-modal-input:focus { border-color:var(--link); }
.bl-modal-actions { display:flex; gap:var(--space-snug); margin-top:var(--space-roomy); }
.bl-modal-btn { flex:1; padding:var(--space-sm); border-radius:var(--radius-md); border:none; font-size:16px; font-weight:600; cursor:pointer; }
.bl-modal-btn.cancel { background:var(--bg2); color:var(--text); }
.bl-modal-btn.create { background:var(--link); color:var(--color-on-primary); }
.bl-modal-btn.create:disabled { opacity:0.5; }
/* Skeleton — primitive: uxSkeleton(height) */
.bl-chat-msg { display:flex; gap:var(--space-base); padding:8px 0; border-bottom:1px solid var(--bg2); }
.bl-chat-avatar { width:28px; height:28px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; background:var(--bg2); }
.bl-chat-avatar.agent { background:color-mix(in srgb, var(--color-primary) 20%, transparent); }
.bl-chat-avatar.user { background:color-mix(in srgb, var(--color-success) 20%, transparent); }
.bl-chat-avatar.system { background:color-mix(in srgb, var(--color-warning) 20%, transparent); }
.bl-chat-body { flex:1; min-width:0; }
.bl-chat-role { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--hint); margin-bottom:var(--space-hairline); }
.bl-chat-content { font-size:13px; line-height:1.4; white-space:pre-wrap; word-break:break-word; }
.bl-chat-time { font-size:10px; color:var(--hint); margin-top:var(--space-hairline); }
.bl-approve-bar { display:flex; gap:var(--space-snug); padding:12px 20px; }
.bl-approve-btn { flex:1; padding:var(--space-sm); border-radius:var(--radius-md); border:none; font-size:15px; font-weight:700; cursor:pointer; }
.bl-approve-btn.approve { background:var(--color-success); color:var(--color-on-primary); }
.bl-approve-btn.reject { background:var(--color-error); color:var(--color-on-primary); }
.bl-approve-btn:disabled { opacity:0.5; cursor:default; }
.bl-k-card.blocked { opacity:0.7; border-left:3px solid var(--color-warning); }
.bl-task-card.blocked { opacity:0.7; border-left:3px solid var(--color-warning); }
.bl-blocked-badge { display:inline-block; font-size:10px; background:var(--color-warning); color:var(--color-on-primary); padding:1px 6px; border-radius:var(--radius-tight); font-weight:600; }
.bl-dep-info { font-size:10px; color:var(--hint); white-space:nowrap; }
.bl-dep-tabs { display:flex; gap:var(--space-base); padding:8px 20px; }
.bl-dep-tab { padding:6px 14px; border-radius:var(--radius-default); font-size:13px; font-weight:600; cursor:pointer; border:none; background:var(--bg2); color:var(--hint); }
.bl-dep-tab.active { background:var(--link); color:var(--color-on-primary); }
.bl-action-badge { display:inline-block; font-size:10px; color:var(--color-warning); background:color-mix(in srgb, var(--color-warning) 12%, transparent); padding:1px 6px; border-radius:var(--radius-tight); font-weight:600; }
.bl-blocking-reason { font-size:13px; color:var(--text); padding:6px 0; display:flex; align-items:center; gap:var(--space-tight); }
.bl-reason-type { font-size:11px; font-weight:600; text-transform:uppercase; color:var(--hint); }
.bl-role-picker { display:flex; gap:var(--space-tight); flex-wrap:wrap; margin:8px 0; }
.bl-role-btn { padding:6px 12px; border-radius:var(--radius-default); font-size:12px; font-weight:600; cursor:pointer; border:1.5px solid var(--hint); background:transparent; color:var(--text); }
.bl-role-btn.selected { border-color:var(--link); background:var(--link); color:var(--color-on-primary); }
.bl-dep-filter { width:100%; padding:8px 12px; border-radius:var(--radius-default); border:1px solid var(--hint); background:var(--bg2); color:var(--text); font-size:13px; outline:none; margin:0 20px 8px; box-sizing:border-box; }
.bl-dep-filter:focus { border-color:var(--link); }
.bl-trace-item { display:flex; gap:var(--space-snug); padding:8px 0; position:relative; }
.bl-trace-item:not(:last-child)::after { content:''; position:absolute; left:11px; top:28px; bottom:-4px; width:2px; background:var(--bg2); }
.bl-trace-dot { width:24px; height:24px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; z-index:1; }
.bl-trace-dot.start { background:color-mix(in srgb, var(--color-primary) 20%, transparent); color:var(--color-primary); }
.bl-trace-dot.done { background:color-mix(in srgb, var(--color-success) 20%, transparent); color:var(--color-success); }
.bl-trace-dot.failed { background:color-mix(in srgb, var(--color-error) 20%, transparent); color:var(--color-error); }
.bl-trace-dot.retry { background:color-mix(in srgb, var(--color-warning) 20%, transparent); color:var(--color-warning); }
.bl-trace-dot.complete { background:color-mix(in srgb, var(--color-success) 20%, transparent); color:var(--color-success); }
.bl-trace-body { flex:1; min-width:0; padding-top:var(--space-hairline); }
.bl-trace-title { font-size:13px; font-weight:500; }
.bl-trace-meta { font-size:11px; color:var(--hint); margin-top:var(--space-hairline); display:flex; gap:var(--space-base); flex-wrap:wrap; }
.bl-trace-error { font-size:11px; color:var(--color-error); margin-top:3px; white-space:pre-wrap; word-break:break-word; }
.bl-trace-agent { display:inline-block; font-size:10px; font-weight:600; padding:1px 6px; border-radius:var(--radius-tight); background:color-mix(in srgb, var(--color-primary) 15%, transparent); color:var(--color-primary); }
.bl-trace-agent.ec2 { background:color-mix(in srgb, var(--color-warning) 15%, transparent); color:var(--color-warning); }
.bl-trace-agent.api { background:color-mix(in srgb, var(--color-error) 15%, transparent); color:var(--color-error); }
.bl-reflection-note { font-size:13px; line-height:1.5; color:var(--text); padding:10px 12px; background:var(--bg2); border-radius:var(--radius-snug); margin-bottom:var(--space-base); white-space:pre-wrap; word-break:break-word; }
.bl-reflection-meta { font-size:11px; color:var(--hint); margin-top:var(--space-xs); }
.bl-workflow-tabs { display:flex; gap:0; padding:0 16px 8px; border-bottom:1px solid var(--bg2); }
.bl-wf-tab { flex:1; padding:10px 0; border:none; background:transparent; font-size:14px; font-weight:600; color:var(--hint); cursor:pointer; border-bottom:2px solid transparent; transition:color 0.2s, border-color 0.2s; }
.bl-wf-tab.active { color:var(--link); border-bottom-color:var(--link); }
/* Init-hidden state — `pointer-events:none` distinguishes this rule from
   the global `.hidden` shape so the duplication lock-down doesn't flag
   it (state toggled to .active by JS, not via .hidden). */
.bl-wf-pane { display:none; pointer-events:none; }
.bl-wf-pane.active { display:block; pointer-events:auto; }
.bl-runs-list { padding:8px 16px; }
.bl-run-card { display:flex; align-items:flex-start; gap:var(--space-sm); padding:var(--space-roomy); margin-bottom:var(--space-base); background:var(--bg2); border-radius:var(--radius-md); cursor:pointer; }
.bl-run-card.bl-run-stale { border-left:3px solid var(--danger, var(--color-error)); }
.bl-run-status { width:10px; height:10px; border-radius:var(--radius-full); flex-shrink:0; margin-top:var(--space-xs); }
.bl-run-status.running { background:var(--color-success); animation:pulse-status 1.5s ease-in-out infinite; }
.bl-run-status.waiting { background:var(--color-warning); }
.bl-run-status.stale { background:var(--color-error); }
.bl-run-status.done { background:var(--color-on-surface-variant); }
.bl-run-status.failed { background:var(--color-error); }
.bl-run-info { flex:1; min-width:0; }
.bl-run-title { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-run-step { font-size:12px; color:var(--link); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-run-meta { font-size:11px; color:var(--hint); margin-top:var(--space-hairline); }
.bl-run-progress-wrap { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.bl-run-progress { width:48px; height:4px; border-radius:var(--radius-sm); background:color-mix(in srgb, var(--color-on-primary) 10%, transparent); overflow:hidden; flex-shrink:0; position:relative; }
.bl-run-progress-fill { height:100%; border-radius:var(--radius-sm); background:var(--link); }
.bl-run-progress-failed { height:100%; border-radius:var(--radius-sm); background:var(--color-error); position:absolute; top:0; right:0; }
.bl-run-pct { font-size:11px; color:var(--hint); }
.bl-deliv-list { padding:8px 16px; }
.bl-deliv-card { display:flex; align-items:center; gap:var(--space-sm); padding:var(--space-roomy); margin-bottom:var(--space-base); background:var(--bg2); border-radius:var(--radius-md); cursor:pointer; }
.bl-deliv-icon { font-size:20px; flex-shrink:0; }
.bl-deliv-info { flex:1; min-width:0; }
.bl-deliv-title { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-deliv-meta { font-size:12px; color:var(--hint); margin-top:var(--space-hairline); }

/* ────────────────────────────────────────────────────────────────────
 * Backlog view utility classes — closes the raw inline-style gap
 * (workflow-domain-redesign honesty-fix phase 4, 2026-05-03).
 *
 * Replaces ~80 raw inline `style="..."` attrs across kanban / list /
 * detail-modal / chat / runs / deliverables surfaces. CSS-var carve-out
 * (--bl-progress-pct, --bl-pri-color) for dynamic per-row values.
 * ──────────────────────────────────────────────────────────────────── */

/* Generic flex/spacing utilities.
 * `.bl-row` / `.bl-row-between` / `.bl-flex-col-8` were promoted to
 * `.base-row` / `.base-row-between` / `.base-stack-tight` in
 * pwa/styles/base.css 2026-05-03. Markup uses the .base-* classes
 * directly; the per-view aliases below remain only for backward-compat
 * during the migration sweep and resolve via the same rules in base.css. */
.bl-flex-1                { flex: 1; }
.bl-flex-1-13             { flex: 1; font-size: 13px; }
.bl-row-toolbar           {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px 4px;
}
.bl-mb-8                  { margin-bottom: var(--space-base); }
.bl-px-20                 { padding: 0 20px; }
.bl-px-20-pb-8            { padding: 0 20px 8px; font-size: 12px; color: var(--hint); }

/* Status / loading / empty copy patterns. */
.bl-empty-pad             { padding: var(--space-lg); text-align: center; color: var(--hint); }
.bl-empty-pad-32          { padding: 32px; text-align: center; color: var(--hint); }
.bl-empty-pad-lg          { padding: 48px 32px; text-align: center; color: var(--hint); }
.bl-empty-icon            { font-size: 40px; margin-bottom: var(--space-sm); }
.bl-empty-title           { font-size: 16px; font-weight: 600; margin-bottom: var(--space-xs); }
.bl-empty-sub             { font-size: 13px; }
.bl-loading-row           { padding: var(--space-wide); color: var(--hint); font-size: 14px; }
.bl-loading-inline        { color: var(--hint); font-size: 13px; }
.bl-loading-inline-error  { padding: var(--space-wide); color: var(--color-error); }
.bl-empty-card-row        { padding: var(--space-wide); text-align: center; color: var(--hint); font-size: 13px; }

/* Typography / hint utilities. */
.bl-fs-13                 { font-size: 13px; }
.bl-text-sm-hint          { font-size: 13px; color: var(--hint); padding: 4px 0; }
.bl-text-xs-hint          { font-size: 11px; color: var(--hint); }
.bl-text-12-hint          { font-size: 12px; color: var(--hint); width: 70px; }
.bl-text-12-hint-wrap     {
  font-size: 12px; color: var(--hint); margin-top: var(--space-hairline);
  word-break: break-word; white-space: pre-wrap;
  max-height: 60px; overflow: hidden;
}
.bl-text-12-bold-hint     { font-size: 12px; font-weight: 600; color: var(--hint); }
.bl-text-action-link      { font-size: 14px; color: var(--hint); cursor: pointer; }
.bl-text-action-primary   { font-size: 11px; color: var(--color-primary); cursor: pointer; }

/* Pill modifier — small pill inside priority/state contexts. */
.bl-pill-xs               { font-size: 10px; padding: 2px 6px; }
.bl-pill-meta             { font-size: 11px; padding: 4px 10px; }

/* Progress fills — width flows through --bl-progress-pct (CSS-var carve-out).
   Backgrounds resolve via the per-pri color OR a default link tint. */
.bl-progress-fill         { width: var(--bl-progress-pct, 0%); background: var(--bl-pri-color, var(--link)); }
.bl-progress-detail-fill  { width: var(--bl-progress-pct, 0%); }

/* Inline status-dot used inside the detail badge. */
.bl-status-dot-inline {
  display: inline-block;
  width: 8px; height: 8px;
  vertical-align: middle;
  margin-right: var(--space-xs);
}

/* Standalone inline date input (subtask deadline). */
.bl-subtask-date {
  width: 110px;
  padding: 3px 6px;
  border-radius: var(--radius-tight);
  border: 1px solid var(--hint);
  background: var(--bg2); color: var(--text);
  font-size: 11px;
}

/* Standalone inline form inputs (Add subtask / Add comment / search). */
.bl-form-input {
  flex: 1;
  padding: 6px 10px;
  border-radius: var(--radius-default);
  border: 1px solid var(--hint);
  background: var(--bg2); color: var(--text);
  font-size: 14px;
}
.bl-form-input-block {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-default);
  border: 1px solid var(--hint);
  background: var(--bg2); color: var(--text);
  font-size: 13px;
}

/* Compact subtask-row layout (dependency / blocking-reason rows). */
.bl-stack-row-tight {
  display: flex; gap: var(--space-base);
  padding: 6px 0;
  border-bottom: 1px solid var(--bg2);
  align-items: flex-start;
}

/* Comment row body wrapper (drops `style="flex:1"` on .bl-comment-item child). */
.bl-comment-body { flex: 1; }

/* Streamed assistant bubble wrap (whitespace-pre-wrap). */
.bl-stream-bubble { white-space: pre-wrap; }

/* Search-icon inline span (used inside .bl-toolbar). */
.bl-search-icon { font-size: 16px; color: var(--hint); }

/* Detail-modal: more shared patterns. */
.bl-detail-priority-radius     { border-radius: var(--radius-snug); }
.bl-chat-list                  { max-height: 300px; overflow-y: auto; }
/* .bl-flex-col-8 / .bl-row-between promoted to .base-stack-tight /
   .base-row-between — markup migrated 2026-05-03. */
.bl-row-divider                {
  display: flex; align-items: center; gap: var(--space-base);
  padding: 6px 0;
  border-bottom: 1px solid var(--bg2);
}
.bl-stakeholder-avatar {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: var(--radius-sm);
  background: var(--bl-role-color, var(--hint));
  color: var(--color-on-primary);
  font-size: 11px; font-weight: 700;
  text-align: center; line-height: 20px;
  flex-shrink: 0;
}
.bl-stakeholder-name { font-size: 13px; font-weight: 500; }
.bl-stakeholder-context {
  font-size: 11px; color: var(--hint);
  margin-top: var(--space-hairline);
  font-style: italic;
}
.bl-stakeholder-search-host {
  display: none;
  margin-top: var(--space-base);
}
.bl-stakeholder-search-host.is-open { display: block; }
.bl-stakeholder-results {
  max-height: 120px;
  overflow-y: auto;
  margin-top: var(--space-xs);
}
.bl-form-label-block {
  font-size: 12px; color: var(--hint);
  display: block;
  margin-bottom: var(--space-xs);
}

/* Deliverable & context rows. */
.bl-deliv-icon-inline { color: var(--bl-deliv-icon-color, var(--hint)); font-size: 14px; flex-shrink: 0; }
.bl-deliv-emoji-inline { font-size: 13px; flex-shrink: 0; }
.bl-context-icon-sized { font-size: 14px; flex-shrink: 0; }
.bl-context-body { flex: 1; min-width: 0; }
.bl-context-del {
  font-size: 11px;
  color: var(--hint);
  flex-shrink: 0;
  cursor: pointer;
}
.bl-context-empty {
  font-size: 12px;
  color: var(--hint);
  padding: 8px 0;
}
.bl-context-content {
  font-size: 11px;
  color: var(--hint);
  margin-top: var(--space-hairline);
  white-space: pre-line;
}
.bl-context-content-error { color: var(--color-error); }
.bl-context-preview {
  font-size: 11px;
  color: var(--hint);
  margin-top: var(--space-hairline);
  word-break: break-word;
}
.bl-context-deliv-value {
  font-size: 11px; color: var(--hint);
  margin-top: var(--space-hairline); word-break: break-all;
}
.bl-context-attach-link {
  color: var(--color-primary);
  font-size: 12px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-xs);
}
.bl-context-attach-size {
  color: var(--hint);
  font-size: 11px;
  margin-left: var(--space-tight);
}

/* Deliverable progress bar (hand-built — width via --bl-progress-pct). */
.bl-deliv-progbar { margin-bottom: var(--space-base); }
.bl-deliv-progbar-track {
  flex: 1; height: 4px;
  background: var(--bg2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.bl-deliv-progbar-fill {
  height: 100%;
  width: var(--bl-progress-pct, 0%);
  background: var(--color-success);
  border-radius: var(--radius-sm);
}

/* Human-required form panel. */
.bl-human-form {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-snug);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
}
.bl-human-form-title {
  font-size: 13px; font-weight: 600;
  margin-bottom: var(--space-base);
  color: var(--color-warning);
}
.bl-human-form-textarea {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-default);
  border: 1px solid var(--hint);
  background: var(--bg2); color: var(--text);
  font-size: 13px;
  margin-bottom: var(--space-base);
  resize: vertical;
}
.bl-human-form-submit {
  width: 100%;
  padding: var(--space-snug);
  border-radius: var(--radius-snug);
  border: none;
  background: var(--color-success);
  color: var(--color-on-success, var(--color-on-primary));
  font-weight: 600; font-size: 14px;
  cursor: pointer;
}

/* Trace-line phase tag. */
.bl-trace-phase     { color: var(--hint); font-weight: 400; }
.bl-trace-subtask   { color: var(--text); }
.bl-trace-action-link {
  font-size: 11px;
  color: var(--color-primary);
  cursor: pointer;
  font-weight: 400;
}

/* Status-dot inline (size 10px) used in bottom-sheet status menu. */
.bl-status-dot-md {
  display: inline-block;
  width: 10px; height: 10px;
}

/* Priority-pill modifier inside the priority bottom-sheet menu. */
.bl-priority-pill-spaced { margin-right: var(--space-base); }

/* Delete-confirm copy in bottom-sheet body. */
.bl-delete-confirm-copy {
  padding: 0 20px 12px;
  color: var(--hint);
  font-size: 14px;
}

/* People-search dropdown — picker rows + email highlight. */
.bl-people-pick-row {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--bg2);
  font-size: 13px;
}
.bl-people-pick-email { color: var(--hint); }
.bl-people-pick-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--hint);
}
.bl-stakeholder-context-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-default);
  border: 1px solid var(--hint);
  background: var(--bg2); color: var(--text);
  font-size: 13px;
  margin: 8px 0;
}
.bl-stakeholder-add-btn {
  width: 100%;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: none;
  background: var(--link);
  color: var(--color-on-primary);
  font-weight: 600; font-size: 15px;
  cursor: pointer;
  margin-top: var(--space-xs);
}

/* Skeleton row dynamic height — reads --bl-skel-h custom property. */
.bl-skel-row { height: var(--bl-skel-h, 56px); }

/* Run step-line tone classes (drops inline color: switch). */
.bl-run-step.bl-run-step-stale   { color: var(--danger, var(--color-error)); }
.bl-run-step.bl-run-step-warning { color: var(--warning, var(--color-warning)); }
.bl-run-step.bl-run-step-hint    { color: var(--hint); }

/* Run progress fills — width via CSS var. */
.bl-run-progress-fill { width: var(--bl-progress-pct, 0%); }
.bl-run-progress-failed { width: var(--bl-progress-failed-pct, 0%); }

/* Deliverables tab section heading. */
.bl-deliv-section-heading {
  padding: 4px 0 8px;
  font-size: 13px; font-weight: 700;
  color: var(--hint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bl-deliv-section-heading.bl-deliv-section-heading-mt {
  padding: 12px 0 8px;
}