/* PORTED VERBATIM from vo-app-marketing-hub/apps/Work/work.css, minus 182 rule(s)
   whose selectors name a class crm.css / ax-containers.css already own.
   DO NOT EDIT — node tools/port-marketing-hub.cjs */
/* ================================================================
   WORK HUB — Workspace-within-workspace execution system
   Mirrors layout patterns from Process Hub (hub-shared.css)
   and ax-containers.css for scorecards.
   ================================================================ */

/* ── Shared dim layer (SOP-Template pattern) ── */
#__wk_dim_layer__ {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  z-index: 54999;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}

#__wk_dim_layer__.wk-dim--on { opacity: 1; pointer-events: auto; }

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

@keyframes wkFadeUp { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

@keyframes wkSlideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

@keyframes wkPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

@keyframes wkSpin { to { transform: rotate(360deg); } }

@keyframes wkTabEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@keyframes ccPulse { 0%,100%{box-shadow:0 0 0 0 rgba(25,128,56,.35)} 50%{box-shadow:0 0 0 4px rgba(25,128,56,0)} }

/* Directional slide transitions */
@keyframes wkSlideLeft  { from { opacity:0; transform:translateX( 60px); } to { opacity:1; transform:translateX(0); } }

@keyframes wkSlideRight { from { opacity:0; transform:translateX(-60px); } to { opacity:1; transform:translateX(0); } }

@keyframes wkSlideUp    { from { opacity:0; transform:translateY( 30px); } to { opacity:1; transform:translateY(0); } }

@keyframes wkSlideDown  { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }

/* Exit directions (used for outgoing panel) */
@keyframes wkExitLeft   { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(-60px); } }

@keyframes wkExitRight  { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX( 60px); } }

/* Staggered child load-in */
@keyframes wkCardIn     { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }

@keyframes wkScaleIn    { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }

@keyframes wkSupportIn  { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

.ph-nav-badge {
  margin-left: 6px; min-width: 16px; height: 16px; border-radius: 9px;
  font-size: 9px; font-weight: 800; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 4px; background: var(--c-red); color: #fff;
}

.ph-nav-badge:empty { display: none; }

.ph-sb-badge-red { background: var(--c-red); color: #fff; }

.ph-sb-badge-yellow { background: var(--c-yellow); color: #fff; }

.ph-sb-badge-blue { background: var(--c-blue); color: #fff; }

.ph-sb-badge-green { background: var(--c-green); color: #fff; }

.ph-sb-badge-teal { background: var(--c-teal); color: #fff; }

.ph-sub { display: none; }

.ph-sub.is-active { display: block; }

/* Sub-panel enter transitions */
.ph-sub.wk-enter-left  { animation: wkSlideLeft  .28s cubic-bezier(.22,1,.36,1) both; }

.ph-sub.wk-enter-right { animation: wkSlideRight .28s cubic-bezier(.22,1,.36,1) both; }

.ph-sub.wk-enter-up    { animation: wkSlideUp    .28s cubic-bezier(.22,1,.36,1) both; }

/* ── Static display card (financial rollups — not a filter, same look as count cards) ── */
.ax-card--static {
  cursor: default !important;
  pointer-events: none;
}

/* ================================================================
   2-COLUMN BODY LAYOUT (.wk-body / .wk-focus-panel / .wk-support-stack)
   Mirrors lfc-body pattern from Process Hub
   ================================================================ */
.wk-body {
  display: grid; grid-template-columns: 1fr 340px;
  gap: 18px; align-items: start;
}

@media (max-width: 1100px) {
.wk-body { grid-template-columns: 1fr; }
}

.wk-focus-panel {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--radius, 16px); padding: 0;
  overflow-x: clip; overflow-y: auto; scrollbar-width: none;
  transition: padding .4s var(--ease-spring);
  box-shadow: var(--shadow-sm);
}

.wk-focus-panel::-webkit-scrollbar { display: none; }

.wk-focus-head {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
  background: color-mix(in srgb, var(--surf) 85%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: padding .2s ease, gap .2s ease;
}

/* Row 1: title + count + show-all + view toggle */
.wk-focus-title-row {
  display: flex; align-items: center; gap: 10px;
  transition: gap .2s ease;
}

.wk-focus-title { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.3; transition: color .2s ease; }

.wk-focus-count {
  font-size: 12px; font-weight: 800;
  color: var(--ink3);
  padding: 0; background: none;
  letter-spacing: -.02em;
}

.wk-focus-title-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; transition: gap .2s ease; }

/* Row 2: search + filter + New button (right-aligned) */
.wk-focus-action-row {
  display: flex; align-items: center; gap: 8px;
  position: relative;
  transition: gap .2s ease;
}

.wk-focus-right { display: flex; align-items: center; gap: 8px; margin-left: auto; position: relative; }

/* Focus panel search */
.wk-focus-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--wt-neutral-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 14px; flex: 1; min-width: 160px; max-width: 380px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wk-focus-search-wrap:focus-within {
  border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(0,75,124,.08);
  background: #fff;
}

.wk-focus-search-wrap svg { width: 15px; height: 15px; stroke: var(--ink4); flex-shrink: 0; }

.wk-focus-search-wrap:focus-within svg { stroke: var(--c-blue); }

.wk-focus-search-wrap input {
  border: none; background: none; outline: none;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  font-family: inherit; width: 100%; transition: width .2s;
}

.wk-focus-search-wrap input:focus { width: 100%; }

.wk-focus-search-wrap input::placeholder { color: var(--ink4); }

/* Focus panel filter button */
.wk-focus-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border-radius: 8px; border: 1px solid var(--border);
  color: var(--ink2); background: #fff; cursor: pointer;
  font-family: inherit; transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
  position: relative; flex-shrink: 0;
}

.wk-focus-filter-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.wk-focus-filter-btn:hover,
.wk-focus-filter-btn:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(0,75,124,.08); color: var(--c-blue); }

.wk-focus-filter-btn.is-active { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-bg); }

/* Filter button is icon-only — hide any inline "Filters" label and the
   zero-count pill. The pill is shown only when JS toggles its hidden attr off
   AND it has a non-empty, non-zero count. */
.wk-focus-filter-btn .wk-filter-label { display: none; }

.wk-filter-pill {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--c-blue, #004b7c); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  pointer-events: none;
}

.wk-filter-pill[hidden],
.wk-filter-pill:empty { display: none !important; }

/* Contextual "New" button in focus panel headers — right-aligned */
.wk-focus-new-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; font-family: inherit;
  padding: 5px 12px; border-radius: 8px; border: none;
  background: var(--c-blue, #004b7c); color: #fff;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  margin-left: auto;
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}

.wk-focus-new-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

.wk-focus-new-btn:hover { background: var(--c-blue-d, #003a5e); box-shadow: 0 2px 8px rgba(0,75,124,.18); }

.wk-focus-new-btn:active { transform: scale(.97); }

/* Focus panel view toggles */
.wk-focus-views { display: flex; gap: 2px; background: var(--border-s); border-radius: 7px; padding: 2px; }

.wk-focus-view-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; border-radius: 5px;
  border: none; background: none; cursor: pointer; transition: all .14s;
  color: var(--ink3);
}

.wk-focus-view-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.wk-focus-view-btn:hover { color: var(--ink); }

.wk-focus-view-btn.is-active { background: #fff; color: var(--c-blue); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Focus list / items — glassmorphic like Process Hub lfc-focus-item */
.wk-focus-list { overflow-y: auto; padding: 8px 8px 48px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; transition: padding .4s cubic-bezier(.22,1,.36,1); }

.wk-focus-list::-webkit-scrollbar { display: none; }

.wk-focus-list:empty::after {
  content: 'Click a scorecard above to filter'; display: block; text-align: center;
  padding: 40px 0; color: var(--ink3); font-size: 12px;
}

.wk-focus-list.wk-view-compact .wk-focus-item { padding: 6px 12px; }

.wk-focus-list.wk-view-compact .wk-fi-reason { display: none; }

.wk-focus-list.wk-view-compact .mw-task-card { border-radius: 10px; }

.wk-focus-list.wk-view-compact .mw-card-left { padding: 8px 0 8px 10px; gap: 8px; }

.wk-focus-list.wk-view-compact .mw-card-right { padding: 8px 10px 8px 8px; gap: 6px; }

.wk-focus-list.wk-view-compact .mw-card-desc { display: none; }

.wk-focus-list.wk-view-compact .mw-card-meta { display: none; }

.wk-focus-list.wk-view-board { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.wk-focus-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius, 16px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--_fi-color, #94a3b8) 3%, var(--surf)), var(--surf));
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .35s var(--ease-spring);
  position: relative; overflow: hidden;
}

.wk-focus-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, var(--_fi-color, #94a3b8), color-mix(in srgb, var(--_fi-color, #94a3b8) 60%, #fff));
  border-radius: var(--radius) var(--radius) 0 0;
}

.wk-focus-item:hover {
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.7);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--_fi-color, #94a3b8) 25%, var(--border));
}

.wk-fi-icon {
  width: 22px; height: 22px; min-width: 22px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent !important;
  border: 2px solid var(--border); cursor: pointer;
  transition: all .15s ease;
}

/* Hide redundant icon when checkbox is present */
.wk-task-check + .wk-fi-icon { display: none; }

.wk-fi-icon:hover { border-color: var(--c-blue); background: var(--c-blue-bg) !important; }

.wk-fi-icon svg { display: none; }

.wk-fi-body { flex: 1; min-width: 0; }

.wk-fi-name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }

.wk-fi-reason { font-size: 10px; color: var(--ink4); margin-top: 2px; line-height: 1.4; }

/* Meta pills row inside focus items */
.wk-fi-pills { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 4px; }

.wk-fi-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  white-space: nowrap; letter-spacing: .15px;
  transition: transform .12s;
}

.wk-fi-pill:hover { transform: translateY(-1px); }

.wk-fi-pill svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

.wk-fi-pill--pri-high { background: var(--c-red-bg, #fff1f1); color: var(--c-red, #ef4444); }

.wk-fi-pill--pri-medium { background: var(--c-yellow-bg, #fef3c7); color: var(--c-yellow, #f59e0b); }

.wk-fi-pill--pri-low { background: var(--c-green-bg, #defbe6); color: var(--c-green, #16a34a); }

.wk-fi-pill--goal { background: var(--c-purple-bg, #f5f3ff); color: var(--c-purple, #7c3aed); max-width: 110px; overflow: hidden; text-overflow: ellipsis; }

.wk-fi-pill--due { font-weight: 800; letter-spacing: .2px; }

.wk-fi-pill--due.is-overdue { background: var(--c-red-bg, #fff1f1); color: var(--c-red, #ef4444); }

.wk-fi-pill--due:not(.is-overdue) { background: var(--c-blue-bg, #e6f3ff); color: var(--c-blue, #004b7c); }

/* Assignee avatar inside focus item */
.wk-fi-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.wk-fi-count {
  font-size: 9px; font-weight: 800; padding: 2px 8px;
  border-radius: 20px; white-space: nowrap; flex-shrink: 0;
  min-width: 32px; text-align: center;
}

.wk-fi-status {
  font-size: 9px; font-weight: 700; padding: 3px 10px;
  border-radius: 20px; white-space: nowrap; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: .3px;
  background: var(--border-s); color: var(--ink3);
  display: none;
}

.wk-fi-status--overdue { background: var(--c-red-bg); color: var(--c-red); }

.wk-fi-status--progress { background: var(--c-yellow-bg); color: var(--c-yellow); }

.wk-fi-status--done { background: var(--c-green-bg); color: var(--c-green); }

.wk-fi-status--blocked { background: var(--c-red-bg); color: var(--c-red); }

.wk-fi-status--due-soon { background: var(--c-yellow-bg, #fef3c7); color: var(--c-yellow, #f59e0b); }

.wk-fi-status--missed { background: var(--c-red-bg); color: var(--c-red); }

/* ── Focus group sections — headers hidden (flat list) ── */
.wk-focus-group { padding: 0; transition: opacity .35s cubic-bezier(.22,1,.36,1), max-height .5s cubic-bezier(.22,1,.36,1); }

.wk-focus-group + .wk-focus-group { margin-top: 0; }

.wk-focus-group.is-hidden { display: none; opacity: 0; }

.wk-focus-group.is-empty { display: none; opacity: 0; }

.wk-focus-group.is-shown { display: block !important; opacity: 1 !important; }

/* Per-group empty messages are hidden; only .wk-panel-empty shows */
.wk-focus-group .wk-focus-list > .wk-empty { display: none; }

.wk-focus-group-head { display: none; }

/* Repeat of a row already shown higher up this flat list. The groups overlap
   ("Due Today" ⊂ "Due This Week") and their headings are hidden, so a second
   copy is indistinguishable from the task existing twice. _wkDedupeFlatPanel
   decides which copy this is and re-decides on every filter change. */
.wk-dup-row { display: none !important; }

.wk-focus-group .wk-focus-list .wk-empty { display: flex; }

.wk-focus-group-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.wk-focus-group-label { font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .5px; font-size: 10px; }

.wk-focus-group-count { font-size: 10px; font-weight: 800; color: var(--ink3); background: var(--border-s); border-radius: 6px; padding: 1px 7px; min-width: 18px; text-align: center; }

/* Zero-value scorecards inside drawers and popups (program / project / grant
   detail popups, engagement profile drawer, etc.). The JS normalizer in
   work.js toggles is-zero on every variant; these rules keep the visual
   treatment consistent across all of them. */
.wdp-stat-card.is-zero,
.wdp-kpi.is-zero,
.wdp-award-card-stat.is-zero,
.ep-kpi-card.is-zero,
.ep-deliv-stat.is-zero,
.ep-value-card-stat.is-zero,
.ep-time-stat.is-zero,
.ep-init-stat.is-zero,
.ep-report-headline-stat.is-zero,
.gd-team-stat.is-zero,
.gd-member-stat.is-zero,
.gr-scorecard.is-zero,
.gr-side-stat.is-zero,
.grant-card-stat.is-zero,
.mw-focus-stat.is-zero,
.out-evidence-stat.is-zero,
.pb-team-stat.is-zero,
.prog-card-stat.is-zero,
.prog-staff-stat.is-zero,
.rp-card-stat.is-zero,
.rpv-stat.is-zero,
.wh-port-stat.is-zero,
.wh-activity-stat.is-zero,
.wk-card-stat.is-zero,
.wk-contrib-stat.is-zero,
.doc-kpi.is-zero,
.out-kpi.is-zero,
.time-approval-kpi.is-zero,
.time-program-stat.is-zero,
.time-team-kpi.is-zero,
.wk-metric.is-zero { opacity: 0.55; }

.wdp-stat-card.is-zero .wdp-stat-val,
.wdp-kpi.is-zero .wdp-kpi-val,
.wdp-award-card-stat.is-zero .wdp-award-card-stat-val,
.ep-kpi-card.is-zero .ep-kpi-value,
.ep-deliv-stat.is-zero .ep-deliv-stat-val,
.ep-value-card-stat.is-zero .ep-value-card-stat-val,
.ep-time-stat.is-zero .ep-time-stat-val,
.ep-init-stat.is-zero .ep-init-stat-val,
.ep-report-headline-stat.is-zero .ep-report-headline-stat-val,
.gd-team-stat.is-zero .gd-team-stat-val,
.gd-member-stat.is-zero .gd-member-stat-val,
.gr-side-stat.is-zero .gr-side-stat-val,
.grant-card-stat.is-zero .grant-card-stat-val,
.mw-focus-stat.is-zero .mw-focus-stat-val,
.out-evidence-stat.is-zero .out-evidence-stat-val,
.pb-team-stat.is-zero .pb-team-stat-val,
.prog-card-stat.is-zero .prog-card-stat-val,
.prog-staff-stat.is-zero .prog-staff-stat-val,
.rp-card-stat.is-zero .rp-card-stat-val,
.rpv-stat.is-zero .rpv-stat-val,
.wh-port-stat.is-zero .wh-port-stat-val,
.wh-activity-stat.is-zero .wh-activity-stat-val,
.wk-card-stat.is-zero .wk-card-stat-val,
.wk-contrib-stat.is-zero .wk-contrib-stat-val,
.doc-kpi.is-zero .doc-kpi-val,
.out-kpi.is-zero .out-kpi-val,
.time-approval-kpi.is-zero .time-approval-kpi-val,
.time-program-stat.is-zero .time-program-stat-val,
.time-team-kpi.is-zero .time-team-kpi-val,
.wk-metric.is-zero .wk-metric-val { color: #94a3b8 !important; }

/* ── Smart Insight Tooltips ── */
[data-wk-tip] { position: relative; }

[data-wk-tip]::after {
  content: attr(data-wk-tip);
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: var(--surf, #fff); color: var(--ink, #161616); font-size: 11.5px; font-weight: 500;
  line-height: 1.5; letter-spacing: .1px;
  padding: 10px 14px; border-radius: 10px; white-space: pre-line; max-width: 280px; width: max-content;
  border: 1px solid var(--border, #e0e0e0);
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06); pointer-events: none;
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
  transform: translateX(-50%) translateY(4px);
  z-index: 99999;
}

[data-wk-tip]::before {
  content: ''; position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--surf, #fff);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
  opacity: 0; transition: opacity .2s ease; z-index: 100000; pointer-events: none;
}

[data-wk-tip]:hover::after,
[data-wk-tip]:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); }

[data-wk-tip]:hover::before { transform: translateX(-50%); }

/* Tooltip variants for cards at bottom of viewport */
[data-wk-tip-pos="top"]::after { bottom: calc(100% + 10px); top: auto; }

[data-wk-tip-pos="bottom"]::after { top: calc(100% + 10px); bottom: auto; }

[data-wk-tip-pos="bottom"]::before { top: calc(100% + 5px); bottom: auto; border-top-color: transparent; border-bottom-color: var(--surf, #fff); }

/* Badge pill tooltips */
.wk-goal-status[data-wk-tip]::after,
.mw-card-pill[data-wk-tip]::after { max-width: 260px; font-size: 11.5px; }

/* ── Quick add row ── */
.wk-quick-add {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-top: 1px solid var(--border-s);
  margin: 0 8px 4px;
}

.wk-quick-add-icon {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-blue-bg); color: var(--c-blue);
}

.wk-quick-add-icon svg {
  width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2;
}

.wk-quick-add-input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 12px; font-weight: 500; color: var(--ink);
  font-family: inherit;
}

.wk-quick-add-input::placeholder { color: var(--ink4); }

/* ── Show-all reset button (appears when filtered) ── */
.wk-show-all-btn {
  font-size: 11px; font-weight: 700; color: var(--c-blue);
  background: var(--c-blue-bg); border: none; border-radius: 6px;
  padding: 4px 12px; cursor: pointer; font-family: inherit;
  transition: all .15s; margin-left: 6px;
}

.wk-show-all-btn:hover { background: var(--c-blue); color: #fff; }

/* ── AI recommendation items (sidebar modules) ── */
.wk-ai-rec-item {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; transition: box-shadow .2s ease, transform .2s ease;
}

.wk-ai-rec-icon {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.wk-ai-rec-icon svg { width: 14px; height: 14px; }

.wk-ai-rec-body { flex: 1; min-width: 0; }

.wk-ai-rec-title { font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.35; }

.wk-ai-rec-reason { font-size: 10px; color: var(--ink3); line-height: 1.4; margin-top: 2px; }

/* ── AI briefing card grid (in center when scorecard selected) ── */
.wk-ai-card-grid { display: flex; flex-direction: column; gap: 8px; padding: 8px; }

.wk-ai-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 10px;
  background: var(--surf); border: 1px solid var(--border);
  cursor: pointer; transition: all .18s ease; position: relative; overflow: hidden;
}

.wk-ai-card::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px; background: var(--_ac, #94a3b8); border-radius: 10px 0 0 10px;
}

.wk-ai-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); transform: translateY(-1px); }

.wk-ai-card-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.wk-ai-card-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

.wk-ai-card-body { flex: 1; min-width: 0; }

.wk-ai-card-title { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }

.wk-ai-card-desc { font-size: 10.5px; color: var(--ink3); line-height: 1.45; }

.wk-ai-card-meta { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

.wk-ai-card-tag {
  font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: .3px;
}

/* Right column — support/intelligence modules */
.wk-support-stack { display: flex; flex-direction: column; gap: 12px; }

.wk-support-module {
  background: var(--surf);
  border: 1px solid var(--border);
  border-left: 3px solid var(--_sm-color, var(--c-blue));
  border-radius: var(--radius, 16px); padding: 14px 16px;
  overflow: visible;
  box-shadow: var(--shadow-sm);
  transition: all .35s var(--ease-spring);
}

.wk-support-module:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.wk-support-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-s);
}

.wk-support-icon {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--_sm-bg, var(--c-green-bg));
}

.wk-support-icon svg {
  width: 13px; height: 13px; stroke: var(--_sm-color, var(--c-green));
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.wk-support-title { font-size: 12px; font-weight: 700; color: var(--ink); }

.wk-support-body { max-height: 260px; overflow-y: auto; overflow-x: visible; scrollbar-width: none; }

.wk-support-body::-webkit-scrollbar { display: none; }

.wk-support-body:empty::after {
  content: 'Loading\2026'; display: block; text-align: center;
  padding: 16px 0; color: var(--ink4); font-size: 11px;
}

/* ── Upcoming Deadlines list ────────────────────── */
.wk-up-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }

.wk-up-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; transition: background .12s ease, transform .12s ease;
}

.wk-up-row:hover { background: var(--bg, #f8fafc); transform: translateX(2px); }

.wk-up-row:focus-visible { outline: 2px solid var(--c-blue, #3b82f6); outline-offset: 1px; }

.wk-up-icon {
  flex-shrink: 0; font-size: 14px; line-height: 1;
  width: 22px; text-align: center; font-weight: 700;
}

.wk-up-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.wk-up-label {
  font-size: 12.5px; font-weight: 600; color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wk-up-sub {
  font-size: 11px; color: var(--ink3, #94a3b8);
  text-transform: capitalize;
}

.wk-up-pill {
  flex-shrink: 0; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  white-space: nowrap;
}

/* ── Activity Stream list ───────────────────────── */
.wk-act-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }

.wk-act-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  transition: background .12s ease, transform .12s ease;
}

.wk-act-row.is-clickable { cursor: pointer; }

.wk-act-row.is-clickable:hover { background: var(--bg, #f8fafc); transform: translateX(2px); }

.wk-act-row.is-clickable:focus-visible { outline: 2px solid var(--c-blue, #3b82f6); outline-offset: 1px; }

.wk-act-icon {
  flex-shrink: 0; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 12px; font-weight: 700;
  margin-top: 1px;
}

.wk-act-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.wk-act-label {
  font-size: 12.5px; font-weight: 600; color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wk-act-sub {
  font-size: 11px; color: var(--ink3, #94a3b8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wk-act-time {
  flex-shrink: 0; font-size: 10.5px; color: var(--ink3, #94a3b8);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* ── Owner chip (avatar + name) — used wherever home shows
   "who's doing what" so assignees never read as raw emails or IDs. */
.wk-owner-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--ink2, #475569);
  line-height: 1;
}

.wk-owner-chip-av {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 8.5px; font-weight: 800;
  letter-spacing: 0; flex-shrink: 0;
}

.wk-owner-chip-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px;
}

.wk-owner-chip--unassigned { color: var(--ink3, #94a3b8); font-style: italic; }

.wk-owner-chip--unassigned .wk-owner-chip-name { font-style: normal; }

.wk-owner-chip--xs { font-size: 10.5px; }

.wk-owner-chip--xs .wk-owner-chip-av { width: 14px; height: 14px; font-size: 7.5px; }

/* AI-rec rows render with the chip inline; align it cleanly */
.wk-sm-row--with-owner { align-items: flex-start; }

.wk-sm-row--with-owner .wk-sm-note { display: inline-flex; margin-left: 6px; vertical-align: middle; }

/* Momentum day bars */
.wk-day-bars { display: flex; gap: 4px; align-items: flex-end; height: 80px; }

.wk-day-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; }

.wk-day-bar {
  width: 100%; border-radius: 3px 3px 0 0;
  background: var(--c-green); min-height: 4px;
  transition: height .3s ease;
}

.wk-day-bar--zero { background: var(--border-s); }

.wk-day-lbl { font-size: 8px; font-weight: 700; color: var(--ink4); text-transform: uppercase; }

.wk-day-val { font-size: 9px; font-weight: 800; color: var(--ink); }

/* Momentum bar hover */
.wk-day-bar-wrap:hover .wk-day-bar { filter: brightness(1.05); }

.wk-day-bar-wrap:hover { transform: translateY(-1px); }

.wk-day-bar-wrap { transition: transform .2s ease; }

/* Momentum bar tooltip */
.wk-bar-tooltip {
  display: none; position: fixed; z-index: 99999;
  background: var(--surf, #fff); color: var(--ink, #1e293b);
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  padding: 12px 16px; min-width: 200px; max-width: 260px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  font-size: 11px; pointer-events: auto;
}

.wk-bar-tooltip.is-visible { display: block; }

.wk-btt-head {
  font-weight: 800; font-size: 12px; margin-bottom: 8px; color: var(--ink, #1e293b);
  border-bottom: 1px solid var(--border-s, #e2e8f0); padding-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}

.wk-btt-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin: 2px -8px; font-size: 11px; color: var(--ink2, #475569);
  cursor: pointer; border-radius: 6px; transition: all .15s ease;
}

.wk-btt-item:hover { background: var(--bg, #f1f5f9); }

.wk-btt-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-blue, #004b7c); flex-shrink: 0;
}

.wk-btt-more { font-size: 10px; color: var(--ink4, #94a3b8); margin-top: 6px; padding-left: 8px; }

/* Distribution rows — card-style */
.wk-dist-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 4px;
  background: var(--surf, #fff); border: 1px solid var(--border-s);
  border-left: 3px solid var(--c-red, #ef4444);
  border-radius: 8px; cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease;
}

.wk-dist-row:last-child { margin-bottom: 0; }

.wk-dist-row + .wk-dist-row { border-top: none; }

.wk-dist-row:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  transform: translateY(-1px);
}

.wk-dist-label { font-size: 11px; font-weight: 700; color: var(--ink); flex: 1; min-width: 0; }

.wk-dist-bar-wrap { width: 70px; height: 5px; background: var(--border-s); border-radius: 3px; overflow: hidden; flex-shrink: 0; }

.wk-dist-bar { height: 100%; border-radius: 3px; background: var(--c-yellow); transition: width .3s ease; }

.wk-dist-val {
  font-size: 10px; font-weight: 800; color: var(--ink);
  min-width: 26px; text-align: center; flex-shrink: 0;
  background: var(--c-purple-bg, rgba(245,158,11,.08)); border-radius: 10px;
  padding: 2px 6px;
}

/* Expandable owner task list (injected by JS) */
.wk-dist-tasks {
  display: none; flex-direction: column; gap: 4px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-s);
  width: 100%;
}

.wk-dist-row.is-expanded .wk-dist-tasks { display: flex; }

.wk-dist-row.is-expanded { flex-wrap: wrap; background: var(--surf, #fff); box-shadow: 0 2px 10px rgba(0,0,0,.07); }

.wk-dist-task-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 6px;
  font-size: 10.5px; font-weight: 600; color: var(--ink2);
  background: var(--bg, #f8fafc); border: 1px solid var(--border-s);
  cursor: pointer; transition: box-shadow .18s ease, transform .18s ease;
  width: 100%;
}

.wk-dist-task-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

.wk-dist-task-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-yellow);
}

.wk-dist-expand-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  transition: transform .25s ease;
  display: flex; align-items: center; justify-content: center;
}

.wk-dist-expand-icon svg { width: 10px; height: 10px; stroke: var(--ink3); fill: none; stroke-width: 2.5; }

.wk-dist-row.is-expanded .wk-dist-expand-icon { transform: rotate(90deg); }

/* Owner tooltip — fixed positioning to avoid clipping */
.wk-owner-tooltip {
  display: none; position: fixed; z-index: 99999;
  background: var(--surf, #fff); color: var(--ink, #1e293b);
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  font-size: 10px; pointer-events: none;
  min-width: 180px; max-width: 260px;
}

.wk-owner-tooltip.is-visible { display: block; }

.wk-ott-head { font-weight: 800; font-size: 12px; color: var(--ink, #1e293b); margin-bottom: 3px; }

.wk-ott-hint { font-size: 10px; color: var(--ink4, #94a3b8); }

.wk-ott-tasks { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-s, #e2e8f0); }

.wk-ott-task {
  font-size: 10px; color: var(--ink2, #475569); padding: 3px 0;
  display: flex; align-items: center; gap: 6px;
}

.wk-ott-task::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--c-purple, #7c3aed); flex-shrink: 0;
}

/* Activity items — card-style */
.wk-activity-item {
  transition: box-shadow .2s ease, transform .2s ease;
  border-radius: 8px; padding: 8px 10px; margin-bottom: 4px;
  background: var(--surf, #fff); border: 1px solid var(--border-s);
  cursor: pointer;
}

.wk-activity-item:last-child { margin-bottom: 0; }

.wk-activity-item:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  transform: translateY(-1px);
}

/* Risk insight rows — card-style */
.wk-risk-insight-row {
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  border-radius: 8px; padding: 8px 12px; margin-bottom: 4px;
  background: var(--surf, #fff); border: 1px solid var(--border-s);
  cursor: pointer;
}

.wk-risk-insight-row:last-child { margin-bottom: 0; }

.wk-risk-insight-row:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  transform: translateY(-1px);
}

/* Clickable support-rail rows — applied to anything _navAttrs decorates */
.wk-nav-row { cursor: pointer; }

.wk-nav-row:hover { background: var(--bg2, #f1f5f9); }

.wk-nav-row:active { transform: translateY(0); }

.wk-risk-insight-row.wk-nav-row:hover { border-color: var(--wt-theme-primary, #6366f1); }

.wk-metric-bar.wk-nav-row { transition: background .15s ease, transform .15s ease; }

.wk-metric-bar.wk-nav-row:hover { background: var(--bg2, #f1f5f9); }

/* Dependency chains — card-style */
.wk-dep-chain {
  transition: box-shadow .2s ease, transform .2s ease;
  border-radius: 8px; padding: 8px 12px; margin-bottom: 4px;
  background: var(--surf, #fff); border: 1px solid var(--border-s);
  cursor: pointer;
}

.wk-dep-chain:last-child { margin-bottom: 0; }

.wk-dep-chain:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  transform: translateY(-1px);
}

/* AI rec items — card-style */
.wk-ai-rec-item {
  background: var(--surf, #fff); border: 1px solid var(--border-s);
  border-left: 3px solid var(--c-purple, #7c3aed);
  border-radius: 8px; margin-bottom: 4px; padding: 10px 12px;
}

.wk-ai-rec-item:last-child { margin-bottom: 0; }

.wk-ai-rec-item:hover {
  box-shadow: 0 2px 10px rgba(124,58,237,.12);
  transform: translateY(-1px);
}

/* ── Support Module Insight Rails ──────────────────────────── */
/* compact list rows */
.wk-sm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.wk-sm-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 5px 8px; border-radius: 7px;
  background: var(--bg, #f8fafc); font-size: 11px; line-height: 1.35;
  transition: background .15s, transform .15s, box-shadow .15s;
}

.wk-sm-row:hover { background: var(--border-s, #e2e8f0); }

.wk-sm-row.is-clickable { cursor: pointer; }

.wk-sm-row.is-clickable:hover {
  background: color-mix(in srgb, var(--_sm-color, var(--c-blue, #2563eb)) 10%, var(--bg, #f8fafc));
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}

.wk-sm-row.is-clickable:focus-visible { outline: 2px solid var(--c-blue, #3b82f6); outline-offset: 1px; }

.wk-sm-row.is-clickable .wk-sm-label::after {
  content: "›"; margin-left: 6px; color: var(--ink4, #cbd5e1);
  font-weight: 700; opacity: 0; transition: opacity .12s ease, transform .12s ease;
  display: inline-block;
}

.wk-sm-row.is-clickable:hover .wk-sm-label::after { opacity: 1; transform: translateX(2px); }

.wk-sm-label { flex: 1; color: var(--ink2, #475569); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wk-sm-note { font-size: 10px; color: var(--ink3, #94a3b8); margin-left: 2px; }

.wk-sm-val { font-weight: 700; color: var(--ink, #1e293b); white-space: nowrap; font-size: 11px; display: flex; align-items: center; gap: 5px; }

.wk-sm-badge { border-radius: 6px; padding: 2px 7px; font-size: 10px; font-weight: 700; }

.wk-sm-pill { border-radius: 99px; padding: 1px 7px; font-size: 9.5px; font-weight: 700; white-space: nowrap; background: var(--border-s); color: var(--ink2); }

.wk-sm-empty { font-size: 11px; color: var(--ink4, #cbd5e1); padding: 12px 8px; text-align: center; font-style: italic; }

/* mini bar rows */
.wk-sm-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.wk-sm-bar-row {
  display: flex; align-items: center; gap: 7px; font-size: 10.5px;
  padding: 3px 6px; border-radius: 6px;
  transition: background .12s ease, transform .12s ease;
}

.wk-sm-bar-row.is-clickable { cursor: pointer; }

.wk-sm-bar-row.is-clickable:hover {
  background: color-mix(in srgb, var(--_sm-color, var(--c-blue, #2563eb)) 10%, transparent);
  transform: translateX(2px);
}

.wk-sm-bar-row.is-clickable:focus-visible { outline: 2px solid var(--c-blue, #3b82f6); outline-offset: 1px; }

.wk-sm-momentum.is-clickable { cursor: pointer; padding: 4px; margin: -4px; border-radius: 8px; transition: background .12s ease; }

.wk-sm-momentum.is-clickable:hover { background: color-mix(in srgb, var(--c-green, #16a34a) 8%, transparent); }

.wk-sm-bar-label { width: 80px; flex-shrink: 0; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wk-sm-bar-track { flex: 1; height: 6px; background: var(--border-s); border-radius: 99px; overflow: hidden; }

.wk-sm-bar-fill { height: 100%; background: var(--_sm-color, var(--c-blue, #2563eb)); border-radius: 99px; transition: width .4s ease; min-width: 4px; }

.wk-sm-bar-val { font-weight: 700; color: var(--ink); width: 24px; text-align: right; flex-shrink: 0; }

/* momentum mini-chart */
.wk-sm-momentum { padding: 0; }

/* count badge in support head */
.wk-support-count {
  margin-left: auto; background: var(--_sm-bg, var(--bg)); color: var(--_sm-color, var(--ink3));
  border: 1px solid currentColor; border-radius: 99px; font-size: 9.5px; font-weight: 800;
  padding: 1px 7px; opacity: .85;
}

/* AI module — purple accent styling */
.wk-ai-module {
  background: linear-gradient(135deg, var(--surf) 70%, color-mix(in srgb, var(--c-purple, #7c3aed) 5%, var(--surf)));
}

.wk-ai-module .wk-support-head {
  border-bottom-color: color-mix(in srgb, var(--c-purple, #7c3aed) 15%, var(--border-s));
}

/* Alert items inside support modules — card-style */
.wk-support-body .wk-alert {
  background: var(--surf, #fff); border: 1px solid var(--border-s);
  border-radius: 8px; margin-bottom: 4px; padding: 8px 12px; cursor: pointer;
}

.wk-support-body .wk-alert:last-child { margin-bottom: 0; }

.wk-support-body .wk-alert:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  transform: translateY(-1px);
}

/* Support module head — collapse indicator */
.wk-support-head.is-collapsed::after {
  content: '▸'; position: absolute; right: 16px; top: 14px;
  font-size: 10px; color: var(--ink3);
}

.wk-support-head { position: relative; }

/* Focus items — ensure clickable */
.wk-focus-item { cursor: pointer; }

/* Goal contribution rows */
.wk-contrib-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }

.wk-contrib-row + .wk-contrib-row { border-top: 1px solid var(--border-s); }

.wk-contrib-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.wk-contrib-name { font-size: 11px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wk-contrib-stat { font-size: 10px; font-weight: 700; color: var(--ink3); flex-shrink: 0; }

/* ================================================================
   TAB PANELS (.wk-tab-panel)
   ================================================================ */
.wk-tab-panel { display: none; }

.wk-tab-panel.is-active { display: block; }

/* Tab enter transitions */
.wk-tab-panel.wk-enter-left  { animation: wkSlideLeft  .3s cubic-bezier(.22,1,.36,1) both; }

.wk-tab-panel.wk-enter-right { animation: wkSlideRight .3s cubic-bezier(.22,1,.36,1) both; }

.wk-tab-panel.wk-enter-up    { animation: wkSlideUp    .3s cubic-bezier(.22,1,.36,1) both; }

/* ================================================================
   CONTAINER CARDS (.wk-container)
   General purpose content card used across all tabs
   ================================================================ */
.wk-container {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 16px;
}

.wk-container-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}

.wk-container-title {
  font-size: 13px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}

.wk-container-title svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.wk-container-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  background: var(--border-s); color: var(--ink3);
}

.wk-container-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }

.wk-container-body:empty::after {
  content: 'No data yet'; display: block; text-align: center;
  padding: 32px 0; color: var(--ink3); font-size: 12px;
}

.wk-container-footer {
  padding: 10px 18px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--ink3);
}

.wk-container-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 900px) {
.wk-container-2col { grid-template-columns: 1fr; }
}

/* ================================================================
   ALERT CARD (critical alerts, bottleneck, execution gap)
   ================================================================ */
.wk-alert {
  background: var(--surf); border: 1px solid var(--border);
  border-left: 4px solid var(--c-yellow);
  border-radius: var(--radius-sm); padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 12px;
  transition: box-shadow .2s ease; margin-bottom: 10px;
}

.wk-alert:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); }

.wk-alert--red { border-left-color: var(--c-red); }

.wk-alert--green { border-left-color: var(--c-green); }

.wk-alert--blue { border-left-color: var(--c-blue); }

.wk-alert--stalled { border-left-color: var(--ink4); }

.wk-alert--gap {
  border-left-color: var(--c-yellow);
  background: linear-gradient(135deg, rgba(245,158,11,.03), var(--surf));
}

.wk-alert-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}

.wk-alert-body { flex: 1; min-width: 0; }

.wk-alert-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }

.wk-alert-desc { font-size: 11px; color: var(--ink3); line-height: 1.5; }

.wk-alert-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

.wk-tag {
  font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .3px;
}

.wk-tag--risk { background: var(--c-yellow-bg); color: var(--c-yellow); }

.wk-tag--behind { background: var(--c-red-bg); color: var(--c-red); }

.wk-tag--stalled { background: var(--border-s); color: var(--ink3); }

.wk-tag--ontrack { background: var(--c-green-bg); color: var(--c-green); }

.wk-tag--gap { background: var(--c-yellow-bg); color: var(--c-yellow); }

/* ================================================================
   EXECUTION RISKS — Chronic Delays / Risky Goals / Dependencies
   ================================================================ */
.wk-risk-insight-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}

.wk-risk-insight-row + .wk-risk-insight-row { border-top: none; }

.wk-risk-insight-name { font-size: 12px; font-weight: 700; color: var(--ink); flex: 1; min-width: 0; }

.wk-risk-insight-detail { flex-shrink: 0; }

.wk-risk-badge {
  font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: .3px; white-space: nowrap;
}

.wk-risk-badge--red { background: var(--c-red-bg); color: var(--c-red); }

.wk-risk-badge--yellow { background: var(--c-yellow-bg); color: var(--c-yellow); }

.wk-risk-badge--green { background: var(--c-green-bg); color: var(--c-green); }

.wk-risk-insight-sub {
  margin-top: 8px; padding: 6px 8px; border-radius: 6px;
  background: var(--border-s); font-size: 9px; font-weight: 600;
  color: var(--ink3); text-transform: uppercase; letter-spacing: .3px;
  text-align: center;
}

/* Risky Goals cards */
.wk-risk-goal-card {
  padding: 10px 0;
}

.wk-risk-goal-card + .wk-risk-goal-card { border-top: 1px solid var(--border-s); }

.wk-risk-goal-name { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }

.wk-risk-goal-stats { display: flex; gap: 16px; margin-bottom: 6px; }

.wk-risk-goal-stat { display: flex; flex-direction: column; gap: 1px; }

.wk-risk-goal-stat-lbl { font-size: 9px; font-weight: 600; color: var(--ink3); text-transform: uppercase; letter-spacing: .3px; }

.wk-risk-goal-stat-val { font-size: 14px; font-weight: 800; color: var(--ink); }

.wk-risk-goal-bar { height: 5px; border-radius: 3px; background: var(--border-s); overflow: hidden; margin-bottom: 4px; }

.wk-risk-goal-bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }

.wk-risk-goal-warn {
  font-size: 10px; font-weight: 600; color: var(--c-red); font-style: italic;
}

/* Dependency Conflicts */
.wk-dep-chain + .wk-dep-chain { border-top: none; }

.wk-dep-blocked { margin-bottom: 6px; }

.wk-dep-blocked-name { font-size: 12px; font-weight: 700; color: var(--ink); }

.wk-dep-blocked-label { font-size: 9px; font-weight: 600; color: var(--ink3); text-transform: uppercase; letter-spacing: .3px; margin-top: 1px; }

.wk-dep-blockers { display: flex; flex-direction: column; gap: 4px; padding-left: 12px; border-left: 2px solid var(--border); }

.wk-dep-blocker {
  font-size: 11px; font-weight: 600; color: var(--ink2);
  display: flex; align-items: center; gap: 6px; padding: 3px 0;
}

.wk-dep-blocker-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ================================================================
   TASK ITEMS (My Work, assignments)
   ================================================================ */
.wk-task-list { padding: 0; margin: 0; list-style: none; }

.wk-task-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-bottom: 1px solid var(--border-s);
  transition: background .15s ease;
}

.wk-task-item:last-child { border-bottom: none; }

.wk-task-item:hover { background: rgba(0,0,0,.015); }

.wk-task-check {
  width: 20px; height: 20px; min-width: 20px; border-radius: 3px;
  border: 2px solid var(--border); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  align-self: center;
  transition: background .25s cubic-bezier(.23,1,.32,1), border-color .2s, transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s;
}

.wk-task-check:hover { border-color: var(--c-blue); background: var(--c-blue-bg); }

.wk-task-check.is-done { background: var(--c-green); border-color: var(--c-green); }

.wk-task-check.is-done::after { content: '✓'; font-size: 11px; font-weight: 800; color: #fff; }

.wk-task-body { flex: 1; min-width: 0; }

.wk-task-title { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wk-task-item.is-done .wk-task-title { text-decoration: line-through; color: var(--ink3); }

.wk-task-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 3px; }

.wk-task-due { font-size: 10px; font-weight: 600; color: var(--ink3); white-space: nowrap; }

.wk-task-due.is-overdue { color: var(--c-red); font-weight: 700; }

.wk-task-priority {
  font-size: 9px; font-weight: 800; padding: 3px 9px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .3px; white-space: nowrap;
}

.wk-priority--high { background: var(--c-red-bg); color: var(--c-red); }

.wk-priority--medium { background: var(--c-yellow-bg); color: var(--c-yellow); }

.wk-priority--low { background: var(--c-green-bg); color: var(--c-green); }

.wk-task-goal { font-size: 9px; color: var(--c-yellow); font-weight: 600; }

.wk-task-assignee { font-size: 9px; color: var(--ink3); font-weight: 600; }

.wk-task-recurring { display: inline-flex; align-items: center; color: var(--c-blue, #004b7c); opacity: .7; }

.wk-task-item.is-overdue { border-left: 3px solid var(--c-red); }

.wk-task-check.is-checked { background: var(--c-green); border-color: var(--c-green); }

.wk-task-check.is-checked svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 3; }

/* Quick add */
.wk-add-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 18px;
  border-top: 1px solid var(--border-s);
}

.wk-add-input {
  flex: 1; border: none; outline: none; font-family: var(--f);
  font-size: 12.5px; color: var(--ink); background: transparent; padding: 5px 0;
}

.wk-add-input::placeholder { color: var(--ink4); }

.wk-add-btn {
  padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 700;
  color: #fff; background: var(--c-blue); transition: all .15s ease;
}

.wk-add-btn:hover { opacity: .85; }

.wk-add-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ================================================================
   TEAM MEMBER CARDS
   ================================================================ */
.wk-member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

.wk-member-card {
  background: var(--surf); border: 1px solid var(--border);
  border-left: 3px solid var(--c-blue);
  border-radius: var(--radius); padding: 16px; transition: all .2s ease;
}

.wk-member-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); transform: translateY(-1px); }

.wk-member-card.is-flagged { border-color: var(--c-red); border-left-color: var(--c-red); }

.wk-member-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.wk-member-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-blue-bg); display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0;
  overflow: hidden;
}

.wk-member-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.wk-member-avatar--sm { width: 24px; height: 24px; border-radius: 50%; font-size: 10px; }

.wk-member-info { flex: 1; min-width: 0; }

.wk-member-bar-wrap { height: 5px; background: var(--border-s); border-radius: 3px; overflow: hidden; margin-top: 10px; }

.wk-member-bar { height: 100%; border-radius: 3px; transition: width .4s ease; }

.wk-member-pct { font-size: 10px; color: var(--ink3); margin-top: 4px; font-weight: 600; }

.wk-member-stat-val--red { color: var(--c-red) !important; }

.wk-member-name { font-size: 13px; font-weight: 700; color: var(--ink); }

.wk-member-role { font-size: 10px; color: var(--ink3); }

.wk-member-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

.wk-member-stat {
  text-align: center; padding: 6px; background: var(--border-s);
  border-radius: var(--radius-sm);
}

.wk-member-stat-val { font-size: 16px; font-weight: 800; color: var(--ink); }

.wk-member-stat-lbl { font-size: 8px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .3px; }

.wk-member-stat--warn .wk-member-stat-val { color: var(--c-red); }

/* Workload bar */
.wk-workload-bar { height: 6px; background: var(--border-s); border-radius: 3px; overflow: hidden; margin-top: 8px; }

.wk-workload-fill { height: 100%; border-radius: 3px; background: var(--c-green); transition: width .4s ease; }

.wk-workload-fill.is-high { background: var(--c-red); }

.wk-workload-fill.is-medium { background: var(--c-yellow); }

/* ================================================================
   GOAL CARDS
   ================================================================ */
.wk-goal-list { display: flex; flex-direction: column; gap: 10px; }

.wk-goal-card {
  position: relative;
  background: var(--surf, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px; padding: 16px 18px 14px;
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s var(--ease-spring, ease);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
}

.wk-goal-card:hover {
  border-color: var(--_project-accent, var(--c-blue));
  box-shadow: 0 10px 24px -10px rgba(15,23,42,.18),
              0 4px 10px -4px color-mix(in srgb, var(--_project-accent, var(--c-blue)) 22%, transparent);
  transform: translateY(-2px);
}

.wk-goal-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }

.wk-goal-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0; background: var(--c-blue-bg);
}

.wk-goal-info { flex: 1; min-width: 0; }

.wk-goal-name { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }

.wk-goal-owner { font-size: 10px; color: var(--ink3); }

.wk-goal-health {
  font-size: 8px; font-weight: 800; padding: 3px 8px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0;
}

.wk-gh-ontrack, .wk-gh-on-track { background: var(--c-green-bg); color: var(--c-green); }

.wk-gh-atrisk, .wk-gh-at-risk { background: var(--c-yellow-bg); color: var(--c-yellow); }

.wk-gh-behind { background: var(--c-red-bg); color: var(--c-red); }

.wk-gh-stalled { background: var(--border-s); color: var(--ink3); }

.wk-gh-missed { background: #1e293b; color: #fff; }

.wk-gh-completed { background: var(--c-green-bg); color: var(--c-green); }

.wk-goal-progress { margin-bottom: 0; }

.wk-goal-progress-bar { height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }

.wk-goal-progress-fill { height: 100%; border-radius: 999px; background: var(--c-green); transition: width .5s cubic-bezier(.22,1,.36,1); }

.wk-goal-progress-row { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; }

.wk-goal-progress-pct { font-size: 12px; font-weight: 800; color: var(--ink); }

.wk-goal-progress-tasks { font-size: 10px; color: var(--ink3); }

.wk-goal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 0; margin-top: 2px; }

.wk-goal-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.35; flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.wk-goal-status { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .04em; flex-shrink: 0; white-space: nowrap; }

.wk-goal-status--on-track { background: #dcfce7; color: #15803d; }

.wk-goal-status--at-risk { background: #fef9c3; color: #854d0e; }

.wk-goal-status--behind { background: #fee2e2; color: #b91c1c; }

.wk-goal-status--complete { background: #15803d; color: #fff; }

.wk-goal-status--planning { background: #f1f5f9; color: #64748b; }

.wk-goal-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--ink3, #64748b); margin-bottom: 0; align-items: center; }

.wk-goal-progress-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 0; }

.wk-goal-progress-wrap .wk-goal-progress-bar { flex: 1; }

.wk-goal-progress-wrap .wk-goal-progress-pct { font-size: 12px; font-weight: 800; color: var(--ink); flex-shrink: 0; }

.wk-goal-progress--on-track { background: linear-gradient(90deg, #10b981, #34d399); }

.wk-goal-progress--at-risk { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

.wk-goal-progress--behind { background: linear-gradient(90deg, #ef4444, #f87171); }

.wk-goal-progress--complete { background: linear-gradient(90deg, #15803d, #10b981); }

.wk-goal-progress--planning { background: #cbd5e1; }

.wk-goal-task-summary { font-size: 11.5px; color: var(--ink3, #64748b); font-weight: 600; padding-top: 10px; border-top: 1px solid #f1f5f9; }

.wk-goal-meta-item { display: flex; align-items: center; gap: 3px; }

.wk-goal-meta-item svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Goal filters */
.wk-goals-toolbar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }

.wk-goals-filter {
  padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: 600;
  border: 1px solid var(--border); color: var(--ink3); transition: all .15s ease;
}

.wk-goals-filter:hover, .wk-goals-filter.is-active { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-bg); }

/* ================================================================
   INSIGHT CARDS
   ================================================================ */
.wk-insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }

.wk-insight-card {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; transition: all .2s ease;
}

.wk-insight-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); }

.wk-insight-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.wk-insight-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.wk-insight-icon svg {
  width: 15px; height: 15px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.wk-insight-title { font-size: 13px; font-weight: 700; color: var(--ink); }

.wk-insight-value { font-size: 22px; font-weight: 800; color: var(--ink); margin: 4px 0; }

.wk-insight-desc { font-size: 11px; color: var(--ink3); line-height: 1.5; }

.wk-insight-body { font-size: 12px; color: var(--ink2); line-height: 1.6; }

.wk-insight-body ul { list-style: none; padding: 0; margin: 4px 0 0; }

.wk-insight-body li {
  padding: 5px 0; border-bottom: 1px solid var(--border-s);
  display: flex; align-items: center; justify-content: space-between;
}

.wk-insight-body li:last-child { border-bottom: none; }

.wk-insight-li-label { font-weight: 600; }

.wk-insight-li-value { font-weight: 700; }

.wk-insight-highlight {
  background: linear-gradient(135deg, var(--c-yellow-bg), var(--c-green-bg));
  border: 1px solid rgba(245,158,11,.12); border-radius: 8px;
  padding: 10px 12px; margin-top: 10px; font-size: 11px;
  color: var(--c-yellow); font-weight: 600;
}

/* ================================================================
   REPORT CARDS
   ================================================================ */
.wk-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }

.wk-report-card {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; text-align: center;
}

.wk-report-card-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; text-align: left; }

.wk-report-card-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--ink3); margin-bottom: 10px; text-align: left; }

.wk-report-quarter { font-size: 11px; font-weight: 800; color: var(--c-blue); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }

.wk-report-stats { display: flex; gap: 14px; justify-content: center; }

.wk-report-stat-val { font-size: 22px; font-weight: 800; }

.wk-report-stat-lbl { font-size: 9px; color: var(--ink3); font-weight: 600; text-transform: uppercase; }

.wk-trend-banner {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}

.wk-trend-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.wk-trend-body { flex: 1; }

.wk-trend-title { font-size: 12px; font-weight: 700; color: var(--ink); }

.wk-trend-desc { font-size: 11px; color: var(--ink3); margin-top: 1px; }

/* ================================================================
   REPORTS TAB — Long-term Intelligence
   ================================================================ */

/* Report signal rows in support modules */
.rp-signal-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border-s);
  transition: background .1s ease;
}

.rp-signal-row:hover { background: var(--bg-hover, rgba(0,0,0,.015)); border-radius: 8px; margin: 0 -6px; padding: 8px 6px; }

.rp-signal-row:last-child { border-bottom: none; }

.rp-signal-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  margin-top: 4px; background: var(--_sm-color, var(--c-green));
}

.rp-signal-body { flex: 1; min-width: 0; }

.rp-signal-name { font-size: 0.76rem; font-weight: 700; color: var(--ink); }

.rp-signal-detail { font-size: 0.68rem; color: var(--ink3); margin-top: 2px; }

.rp-signal-sub { font-size: 0.66rem; color: var(--ink4, var(--ink3)); font-style: italic; padding: 4px 0 2px; }

.rp-signal-tag {
  display: inline-flex; align-items: center; font-size: 0.6rem; font-weight: 700; padding: 3px 8px;
  border-radius: 8px; text-transform: uppercase; letter-spacing: .04em;
}

.rp-signal-tag--red { background: var(--c-red-bg, #fff1f1); color: var(--c-red, #ef4444); }

.rp-signal-tag--yellow { background: var(--c-yellow-bg, #fef3c7); color: var(--c-yellow, #f59e0b); }

.rp-signal-tag--green { background: var(--c-green-bg, #defbe6); color: var(--c-green, #16a34a); }

.rp-signal-tag--blue { background: var(--c-blue-bg, #e6f3ff); color: var(--c-blue, #004b7c); }

/* Report progress bar (horizontal inline bar) */
.rp-bar-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }

.rp-bar-label { font-size: 11px; font-weight: 600; color: var(--ink); min-width: 70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rp-bar-track { flex: 1; height: 6px; background: var(--border-s); border-radius: 3px; overflow: hidden; }

.rp-bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }

.rp-bar-val { font-size: 10px; font-weight: 700; color: var(--ink3); min-width: 30px; text-align: right; }

/* Report items — reusable card for center list items */
.rp-item {
  background: var(--surf); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
  display: flex; align-items: flex-start; gap: 12px;
  position: relative; overflow: hidden;
  transition: box-shadow .2s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.22,1,.36,1);
}

.rp-item:hover { box-shadow: 0 6px 20px rgba(0,0,0,.06); transform: translateY(-1px); }

.rp-item::before {
  content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: var(--_rp-accent, var(--c-green)); border-radius: 3px 0 0 3px;
}

.rp-item-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--_rp-bg, #f0fdf4); color: var(--_rp-accent, var(--c-green));
  font-size: 0.88rem; font-weight: 800;
}

.rp-item-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.rp-item-body { flex: 1; min-width: 0; }

.rp-item-title { font-size: 0.82rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rp-item-meta { font-size: 0.68rem; color: var(--ink3); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }

.rp-item-tags { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }

.rp-item-progress {
  margin-top: 6px; height: 4px; background: var(--border-s); border-radius: 2px; overflow: hidden;
}

.rp-item-progress-fill { height: 100%; border-radius: 2px; transition: width .4s ease; }

/* Forecast timeline bars */
.rp-fc-week {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border-s);
}

.rp-fc-week:last-child { border-bottom: none; }

.rp-fc-label { font-size: 11px; font-weight: 700; color: var(--ink); min-width: 75px; }

.rp-fc-bar-wrap { flex: 1; height: 22px; background: var(--border-s); border-radius: 8px; overflow: hidden; position: relative; }

.rp-fc-bar { height: 100%; border-radius: 8px; transition: width .5s ease; position: relative; min-width: 24px; }

.rp-fc-bar-label { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 9px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2); }

.rp-fc-count { font-size: 11px; font-weight: 700; color: var(--ink3); min-width: 30px; text-align: right; }

/* ================================================================
   ACTIVITY FEED
   ================================================================ */
.wk-activity-item { display: flex; gap: 10px; align-items: flex-start; }

.wk-activity-item:last-child { border-bottom: none; }

.wk-activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); margin-top: 4px; flex-shrink: 0; }

.wk-activity-dot--green, .wk-activity-dot--done { background: var(--c-green); }

.wk-activity-dot--yellow { background: var(--c-yellow); }

.wk-activity-dot--red { background: var(--c-red); }

.wk-activity-text { font-size: 12px; color: var(--ink); flex: 1; }

.wk-activity-text strong { font-weight: 700; }

.wk-activity-time { font-size: 10px; color: var(--ink4); white-space: nowrap; }

/* Workload rows */
.wk-workload-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-s); cursor: pointer; transition: background .15s; border-radius: 6px; padding-left: 6px; padding-right: 6px; }

.wk-workload-row:hover { background: var(--c-blue-bg, #eff6ff); }

.wk-workload-row:last-child { border-bottom: none; }

.wk-workload-name { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; width: 160px; flex-shrink: 0; }

.wk-workload-bar-wrap { flex: 1; height: 5px; background: var(--border-s); border-radius: 3px; overflow: hidden; }

.wk-workload-nums { font-size: 11px; color: var(--ink3); font-weight: 600; white-space: nowrap; min-width: 80px; text-align: right; }

/* Timeline items */
.wk-timeline-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-s); }

.wk-timeline-item:last-child { border-bottom: none; }

.wk-timeline-marker { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }

.wk-timeline-marker--on-track { background: var(--c-green); }

.wk-timeline-marker--at-risk { background: var(--c-yellow); }

.wk-timeline-marker--behind { background: var(--c-red); }

.wk-timeline-body { flex: 1; }

.wk-timeline-title { font-size: 13px; font-weight: 700; color: var(--ink); }

.wk-timeline-meta { font-size: 10px; color: var(--ink3); margin-top: 2px; }

/* Contributor rows */
.wk-contributor-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-s); }

.wk-contributor-row:last-child { border-bottom: none; }

.wk-contributor-name { font-size: 12px; font-weight: 600; color: var(--ink); flex: 1; }

.wk-contributor-stats { font-size: 11px; color: var(--ink3); font-weight: 600; }

/* Snapshot grid */
.wk-snapshot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }

.wk-snapshot-item { text-align: center; padding: 10px; background: var(--border-s); border-radius: var(--radius-sm); }

.wk-snapshot-val { font-size: 20px; font-weight: 800; color: var(--ink); display: block; }

.wk-snapshot-lbl { font-size: 9px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .3px; display: block; margin-top: 2px; }

/* ================================================================
   AI BRIEFING
   ================================================================ */
.wk-ai-briefing {
  background: linear-gradient(135deg, var(--c-purple-bg), color-mix(in srgb, var(--c-purple-bg) 40%, var(--surf)));
  border: 1px solid rgba(124,58,237,.12);
  border-radius: var(--radius); padding: 18px; margin-bottom: 16px;
}

.wk-ai-briefing-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

.wk-ai-briefing-title { font-size: 12px; font-weight: 700; color: var(--c-purple); text-transform: uppercase; letter-spacing: .5px; }

.wk-ai-briefing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-purple); animation: ccPulse 2s ease infinite; }

.wk-ai-briefing-body { font-size: 12px; color: var(--ink2); line-height: 1.7; }

.wk-ai-briefing-body li { padding: 4px 0; list-style: none; }

.wk-ai-briefing-body li::before { content: '•'; color: var(--c-purple); margin-right: 6px; font-weight: 700; }

/* ================================================================
   NOTES PANEL
   ================================================================ */
.wk-notes-area {
  width: 100%; min-height: 120px; border: 2px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-family: var(--f); font-size: 13px; color: var(--ink);
  resize: vertical; transition: border-color .2s ease;
}

.wk-notes-area:focus { outline: none; border-color: var(--c-blue); }

/* ================================================================
   MODALS
   ================================================================ */
.wk-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 60000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; visibility: hidden;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity .25s cubic-bezier(.22,1,.36,1), visibility 0s .25s;
}

.wk-modal-overlay.is-visible { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .25s cubic-bezier(.22,1,.36,1), visibility 0s 0s; }

.wk-modal {
  background: var(--surf); border-radius: 18px; width: 1040px; max-width: 94vw;
  max-height: 90vh; overflow: hidden; box-shadow: 0 32px 100px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05);
  display: flex; flex-direction: column; animation: wkFadeUp .35s cubic-bezier(.22,1,.36,1) both;
  pointer-events: auto;
}

.wk-modal--wide  { width: 1040px; max-width: 96vw; }

.wk-modal--xwide { width: 1240px; max-width: 96vw; }

.wk-modal-body .wk-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.wk-modal-body .wk-field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

.wk-modal-body .wk-field { margin-bottom: 14px; }

.wk-modal-body .wk-field label { display: block; font-size: 11px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }

.wk-modal-body .wk-field input,
.wk-modal-body .wk-field textarea,
.wk-modal-body .wk-field select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; background: var(--surf); color: var(--ink); transition: border-color .15s, box-shadow .15s; }

.wk-modal-body .wk-field input:focus,
.wk-modal-body .wk-field textarea:focus,
.wk-modal-body .wk-field select:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

.wk-modal-body .wk-field-hint { font-size: 11px; color: var(--ink3); margin-top: 4px; }

.wk-modal-head {
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  cursor: grab; user-select: none;
}

.wk-modal-head:active { cursor: grabbing; }

.wk-modal-title { font-size: 16px; font-weight: 800; color: var(--ink); }

.wk-modal-close {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--ink3); transition: all .2s cubic-bezier(.22,1,.36,1);
}

.wk-modal-close:hover { background: var(--c-red-bg); color: var(--c-red); transform: scale(1.08); }

.wk-modal-body { flex: 1; overflow-y: auto; padding: 20px 24px; overscroll-behavior: contain; }

.wk-modal-footer {
  padding: 16px 24px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* Buttons */
.wk-btn { padding: 9px 20px; border-radius: 10px; font-size: 13px; font-weight: 700; transition: all .2s cubic-bezier(.22,1,.36,1); }

.wk-btn--primary { color: #fff; background: var(--c-blue); }

.wk-btn--primary:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(59,130,246,.25); }

.wk-btn--ghost { color: var(--ink3); border: 1px solid var(--border); }

.wk-btn--ghost:hover { background: var(--border-s); color: var(--ink); }

.wk-btn--link { color: var(--c-blue); background: none; display: inline-flex; align-items: center; gap: 5px; }

.wk-btn--link:hover { opacity: .7; }

/* ── Report modal extras ── */
.wk-modal--report { width: 980px; max-width: 96vw; }

.wk-modal-head-left { display: flex; align-items: center; gap: 12px; }

.wk-modal-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.wk-modal-icon svg { width: 18px; height: 18px; color: #fff; }

.wk-modal-subtitle { font-size: 11px; font-weight: 500; color: var(--ink3); margin-top: 1px; }

/* Progress bar (wizard steps) */
.wk-rp-progress {
  display: flex; align-items: center; justify-content: center; gap: 0;
  padding: 16px 28px 12px; background: var(--surf);
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.wk-rp-step {
  display: flex; align-items: center; gap: 8px; padding: 0 4px;
}

.wk-rp-step-num {
  width: 28px; height: 28px; border-radius: 50%; font-size: 12px;
  font-weight: 800; display: flex; align-items: center; justify-content: center;
  background: var(--border-s, #f1f5f9); color: var(--ink3);
  transition: all .3s cubic-bezier(.22,1,.36,1);
  flex-shrink: 0;
}

.wk-rp-step-label {
  font-size: 12px; font-weight: 700; color: var(--ink3);
  transition: color .3s ease;
}

.wk-rp-step.is-active .wk-rp-step-num {
  background: var(--c-blue, #3b82f6); color: #fff;
  box-shadow: 0 2px 8px rgba(59,130,246,.25);
}

.wk-rp-step.is-active .wk-rp-step-label { color: var(--c-blue, #3b82f6); }

.wk-rp-step.is-done .wk-rp-step-num {
  background: var(--c-green, #22c55e); color: #fff;
}

.wk-rp-step.is-done .wk-rp-step-label { color: var(--c-green, #22c55e); }

.wk-rp-step-line {
  flex: 1; max-width: 60px; height: 2px;
  background: var(--border, #e2e8f0); margin: 0 8px;
  border-radius: 1px; transition: background .3s ease;
}

.wk-rp-step-line.is-done { background: var(--c-green, #22c55e); }

/* Pane switching */
.wk-rp-pane { display: none; animation: wkRpFadeIn .25s ease both; }

.wk-rp-pane.is-active { display: block; }

@keyframes wkRpFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Shared label */
.wk-rp-label {
  font-size: 10px; font-weight: 800; color: var(--ink2, #475569);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 8px;
}

/* Section blocks */
.wk-rp-section {
  margin-bottom: 20px; padding: 16px;
  border: 1.5px solid var(--border, #e2e8f0); border-radius: 12px;
  background: color-mix(in srgb, var(--surf) 97%, var(--bg, #f8fafc));
}

.wk-rp-section:last-child { margin-bottom: 0; }

.wk-rp-section-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; color: var(--ink);
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border-s, #f1f5f9);
}

.wk-rp-section-head svg {
  width: 16px; height: 16px; stroke: var(--c-blue, #3b82f6);
  flex-shrink: 0;
}

/* Title input */
.wk-rp-title-wrap { margin-bottom: 20px; }

.wk-rp-title-input {
  width: 100%; padding: 12px 16px; border: 2px solid var(--border, #e2e8f0);
  border-radius: 10px; font-family: var(--f); font-size: 16px; font-weight: 700;
  color: var(--ink); background: var(--surf);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wk-rp-title-input:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }

.wk-rp-title-input::placeholder { color: var(--ink4); font-weight: 500; transition: opacity .2s ease; }

.wk-rp-title-input.rp-ph-fade::placeholder { opacity: 0; }

/* Report type cards */
.wk-rp-type-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.wk-rp-type-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 10px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--border, #e2e8f0); background: var(--surf);
  font-family: var(--f); transition: all .2s cubic-bezier(.22,1,.36,1);
  position: relative; overflow: hidden;
}

.wk-rp-type-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rp-c, #6366f1) 6%, transparent), transparent);
  opacity: 0; transition: opacity .2s ease;
}

.wk-rp-type-card:hover { border-color: color-mix(in srgb, var(--rp-c, #6366f1) 40%, var(--border)); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.06); }

.wk-rp-type-card:hover::before { opacity: 1; }

.wk-rp-type-card.is-selected {
  border-color: var(--rp-c, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-c, #6366f1) 15%, transparent), 0 4px 16px rgba(0,0,0,.06);
}

.wk-rp-type-card.is-selected::before { opacity: 1; }

.wk-rp-type-icon {
  width: 40px; height: 40px; border-radius: 10px; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--rp-c, #6366f1) 12%, transparent);
  transition: all .2s ease;
}

.wk-rp-type-icon svg { width: 20px; height: 20px; stroke: var(--rp-c, #6366f1); fill: none; stroke-width: 2; }

.wk-rp-type-card.is-selected .wk-rp-type-icon {
  background: var(--rp-c, #6366f1); box-shadow: 0 2px 8px color-mix(in srgb, var(--rp-c, #6366f1) 30%, transparent);
}

.wk-rp-type-card.is-selected .wk-rp-type-icon svg { stroke: #fff; }

.wk-rp-type-name {
  font-size: 11px; font-weight: 700; color: var(--ink);
  text-align: center; position: relative; z-index: 1; line-height: 1.3;
}

/* Scope — field rows and grid */
.wk-rp-field-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
}

.wk-rp-field-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

.wk-rp-field { display: flex; flex-direction: column; gap: 4px; }

.wk-rp-field label {
  font-size: 10px; font-weight: 800; color: var(--ink3);
  text-transform: uppercase; letter-spacing: .3px;
}

.wk-rp-field select,
.wk-rp-field input {
  width: 100%; padding: 8px 10px; border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px; font-family: var(--f); font-size: 12px; font-weight: 600;
  color: var(--ink); background: var(--surf); cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wk-rp-field select:focus,
.wk-rp-field input:focus {
  outline: none; border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,.08);
}

/* Toggle switches */
.wk-rp-toggle-grid { display: flex; flex-direction: column; gap: 4px; }

.wk-rp-toggle {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--border, #e2e8f0); background: var(--surf);
  transition: all .2s cubic-bezier(.22,1,.36,1); user-select: none;
}

.wk-rp-toggle:hover { border-color: color-mix(in srgb, var(--c-blue) 30%, var(--border)); background: color-mix(in srgb, var(--c-blue) 3%, var(--surf)); }

.wk-rp-toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.wk-rp-toggle-track {
  width: 34px; height: 20px; border-radius: 10px; flex-shrink: 0;
  background: var(--border, #cbd5e1); position: relative;
  transition: background .2s ease;
}

.wk-rp-toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: transform .2s cubic-bezier(.22,1,.36,1);
}

.wk-rp-toggle input:checked ~ .wk-rp-toggle-track {
  background: var(--c-blue, #3b82f6);
}

.wk-rp-toggle input:checked ~ .wk-rp-toggle-track .wk-rp-toggle-thumb {
  transform: translateX(14px);
}

.wk-rp-toggle-info { flex: 1; min-width: 0; }

.wk-rp-toggle-name { display: block; font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.3; }

.wk-rp-toggle-desc { display: block; font-size: 10px; color: var(--ink3); margin-top: 1px; }

/* Notes textarea */
.wk-rp-notes {
  width: 100%; min-height: 60px; max-height: 120px; resize: vertical;
  padding: 10px 12px; border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px; font-family: var(--f); font-size: 12px; color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wk-rp-notes:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }

.wk-rp-notes::placeholder { color: var(--ink4); }

/* Card Appearance — color swatches */
.wk-rp-section-hint {
  font-size: 11px; color: var(--ink3); margin: -4px 0 10px; line-height: 1.4;
}

.wk-rp-color-swatches {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

.wk-rp-swatch {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer; flex-shrink: 0;
  transition: transform .13s ease, border-color .13s ease, box-shadow .13s ease;
  position: relative;
}

.wk-rp-swatch:hover { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,.18); }

.wk-rp-swatch.is-selected {
  border-color: var(--ink, #0f172a);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
}

.wk-rp-swatch.is-selected::after {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(255,255,255,.35);
}

.wk-rp-swatch--custom {
  background: var(--surf2, #f1f5f9);
  border: 2px dashed var(--border, #e2e8f0);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink3);
}

.wk-rp-swatch--custom input[type="color"] {
  opacity: 0; position: absolute; width: 0; height: 0; pointer-events: none;
}

.wk-rp-swatch--custom:hover { background: var(--surf3, #e2e8f0); color: var(--ink); }

.wk-rp-swatch--custom.is-selected { border-style: solid; }

/* Wizard footer */
.wk-rp-wizard-footer { gap: 8px; }

.wk-rp-back-btn {
  display: inline-flex; align-items: center; gap: 4px;
}

.wk-rp-next-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--c-blue, #3b82f6) !important;
  box-shadow: 0 2px 8px rgba(59,130,246,.2);
}

.wk-rp-next-btn:hover { box-shadow: 0 4px 16px rgba(59,130,246,.3); transform: translateY(-1px) !important; }

.wk-rp-next-btn svg { stroke: #fff; }

/* Generate button */
.wk-rp-generate-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  box-shadow: 0 2px 8px rgba(99,102,241,.25);
}

.wk-rp-generate-btn:hover { box-shadow: 0 4px 16px rgba(99,102,241,.35); transform: translateY(-1px) !important; }

.wk-rp-generate-btn svg { stroke: #fff; }

/* ── Required label ── */
.wk-rp-req { color: #ef4444; }

.wk-rp-title-error {
  display: none; margin-top: 6px; font-size: 11px; font-weight: 600;
  color: #ef4444; padding: 4px 8px; border-radius: 6px;
  background: rgba(239,68,68,.06);
}

.wk-rp-title-error.is-visible { display: block; }

.wk-rp-title-input.is-error { border-color: #ef4444; }

.wk-rp-title-input.is-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.1); }

/* ── Custom dropdown ── */
.rp-drop { position: relative; }

.rp-drop-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px; font-family: var(--f); font-size: 12px; font-weight: 600;
  color: var(--ink); background: var(--surf); cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.rp-drop-btn:hover { border-color: color-mix(in srgb, var(--c-blue) 40%, var(--border)); }

.rp-drop-btn:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(59,130,246,.08); }

.rp-drop-btn svg { width: 14px; height: 14px; stroke: var(--ink3); flex-shrink: 0; margin-left: auto; transition: transform .2s ease; }

.rp-drop.is-open .rp-drop-btn svg:last-child { transform: rotate(180deg); }

.rp-drop-val { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rp-drop-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 99990; background: var(--surf, #fff); border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  overflow: hidden; animation: rpDropIn .15s ease both;
  max-height: 250px; overflow-y: auto;
}

@keyframes rpDropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.rp-drop-menu--search { overflow: hidden; max-height: none; }

.rp-drop-menu--search .rp-drop-list { max-height: 200px; overflow-y: auto; }

.rp-drop-search {
  display: block; width: 100%; padding: 9px 12px; border: none;
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-family: var(--f); font-size: 12px; color: var(--ink);
  background: transparent; outline: none;
}

.rp-drop-search::placeholder { color: var(--ink4); }

/* Hover tooltip for multi-select dropdown values */
.rp-drop-tooltip {
  position: fixed; z-index: 99999; pointer-events: none;
  background: var(--ink, #1e293b); color: #fff; font-size: 11px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; max-width: 260px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  line-height: 1.45; white-space: normal;
  animation: rpTtIn .12s ease both;
}

.rp-drop-tooltip::after {
  content: ''; position: absolute; top: -4px; left: 16px;
  width: 8px; height: 8px; background: var(--ink, #1e293b);
  transform: rotate(45deg);
}

.rp-drop-tooltip.is-above::after { top: auto; bottom: -4px; }

.rp-drop-tooltip-list { max-height: 180px; overflow-y: auto; scrollbar-width: thin; }

.rp-drop-tooltip-item { padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.1); }

.rp-drop-tooltip-item:last-child { border-bottom: none; }

@keyframes rpTtIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.rp-drop-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 12px; font-weight: 600;
  color: var(--ink); cursor: pointer; transition: background .12s ease;
}

.rp-drop-item:hover { background: var(--border-s, #f1f5f9); }

.rp-drop-item.is-active { background: color-mix(in srgb, var(--c-blue) 8%, var(--surf)); color: var(--c-blue); }

.rp-drop-item.is-active::after {
  content: '✓'; margin-left: auto; font-size: 13px; font-weight: 800;
  color: var(--c-blue);
}

.rp-drop-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* ── Multi-select dropdown ── */
.rp-drop--multi .rp-drop-item.is-active::after { content: '✓'; }

.rp-drop--multi .rp-drop-item { position: relative; padding-left: 32px; }

.rp-drop--multi .rp-drop-item::before {
  content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border: 2px solid var(--border, #e2e8f0);
  border-radius: 4px; background: var(--surf); transition: all .15s ease;
}

.rp-drop--multi .rp-drop-item.is-active::before {
  background: var(--c-blue); border-color: var(--c-blue);
}

.rp-drop--multi .rp-drop-item.is-active::after {
  content: '✓'; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 10px; font-weight: 800; color: #fff; margin-left: 0;
}

.rp-drop--multi .rp-drop-item[data-val=""]::before,
.rp-drop--multi .rp-drop-item[data-val=""]::after { display: none; }

.rp-drop--multi .rp-drop-item[data-val=""] { padding-left: 12px; }

.rp-drop-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--c-blue); color: #fff; font-size: 10px; font-weight: 800;
  margin-left: 6px; flex-shrink: 0;
}

/* ── Date summary (auto-calculated) ── */
.rp-date-summary {
  margin-top: 6px; padding: 6px 10px; border-radius: 6px;
  background: color-mix(in srgb, var(--c-blue) 5%, var(--surf));
  border: 1px solid color-mix(in srgb, var(--c-blue) 12%, var(--border));
  font-size: 11px; font-weight: 600; color: var(--c-blue);
  display: flex; align-items: center; gap: 6px;
}

.rp-date-summary::before {
  content: '📅'; font-size: 12px;
}

/* ── Custom date row (2 columns) ── */
.wk-rp-field-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }

.rp-custom-dates { animation: rpSlideDown .2s ease both; }

@keyframes rpSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Assignee avatar in dropdown */
.rp-drop-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff;
}

.rp-drop-assignee-name { flex: 1; }

/* ── Custom calendar popover ── */
.rp-date-trigger { position: relative; }

.rp-cal-popover {
  display: none; position: fixed; z-index: 200;
  background: var(--surf, #fff); border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
  padding: 12px; width: 280px;
  animation: rpDropIn .15s ease both;
}

.rp-cal-popover.is-visible { display: block; }

.rp-cal-popover .qa-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.rp-cal-popover .qa-cal-arrow {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: none; background: var(--border-s, #f1f5f9); border-radius: 6px;
  font-size: 16px; cursor: pointer; color: var(--ink); font-family: var(--f);
  transition: background .15s ease;
}

.rp-cal-popover .qa-cal-arrow:hover { background: var(--border, #e2e8f0); }

.rp-cal-popover .qa-cal-month { font-size: 13px; font-weight: 800; color: var(--ink); }

.rp-cal-popover .qa-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}

.rp-cal-popover .qa-cal-hdr {
  text-align: center; font-size: 10px; font-weight: 700; color: var(--ink4);
  padding: 4px 0; text-transform: uppercase;
}

.rp-cal-popover .qa-cal-day {
  text-align: center; padding: 6px 0; border-radius: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink);
  transition: all .12s ease;
}

.rp-cal-popover .qa-cal-day:hover { background: var(--border-s, #f1f5f9); }

.rp-cal-popover .qa-cal-day.is-today { color: var(--c-blue); font-weight: 800; }

.rp-cal-popover .qa-cal-day.is-selected { background: var(--c-blue); color: #fff; border-radius: 6px; }

.rp-cal-popover .qa-cal-day.is-other { color: var(--ink4); opacity: .5; }

.rp-cal-popover .qa-cal-foot {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--border-s, #f1f5f9);
}

.rp-cal-today-btn, .rp-cal-clear-btn {
  flex: 1; padding: 6px 0; border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--f); font-size: 11px; font-weight: 700;
  cursor: pointer; background: var(--surf); color: var(--ink);
  transition: all .15s ease;
}

.rp-cal-today-btn:hover { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }

.rp-cal-clear-btn:hover { background: var(--border-s); }

/* ── Time range 3-column ── */
.wk-rp-field-row--3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* ── Wizard layout: sidebar + content ── */
.wk-rp-wizard-layout {
  display: grid; grid-template-columns: 240px 1fr;
  flex: 1; min-height: 0; overflow: hidden;
}

.wk-rp-sidebar {
  background: var(--bg, #f8fafc); border-right: 1.5px solid var(--border, #e2e8f0);
  display: flex; flex-direction: column; overflow: hidden;
}

.rp-sb-header {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-s, #f1f5f9);
  font-size: 11px; font-weight: 800; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .3px;
}

.rp-sb-body {
  flex: 1; overflow-y: auto; padding: 12px 14px;
}

.rp-sb-row { margin-bottom: 10px; }

.rp-sb-row--hidden { display: none; }

.rp-sb-label {
  font-size: 9px; font-weight: 800; color: var(--ink3);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px;
}

.rp-sb-value {
  font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.4;
  word-break: break-word;
}

.rp-sb-empty { color: var(--ink4); font-weight: 600; font-style: italic; }

.rp-sb-tag {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 700;
}

.rp-sb-divider {
  height: 1px; background: var(--border-s, #f1f5f9); margin: 10px 0;
}

.rp-sb-group { margin-bottom: 10px; }

.rp-sb-filter-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }

.rp-sb-filter {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ink); padding: 3px 0;
}

.rp-sb-filter-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}

.rp-sb-section-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }

.rp-sb-section-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; color: var(--ink); padding: 3px 6px;
  border-radius: 6px; background: var(--surf);
  border: 1px solid var(--border-s, #f1f5f9);
}

.rp-sb-section-icon {
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.rp-sb-section-icon svg { width: 9px; height: 9px; stroke: #fff; }

.rp-sb-color-dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0; vertical-align: middle; margin-right: 5px;
  border: 1.5px solid rgba(0,0,0,.12);
}

#rpSbColorVal { display: flex; align-items: center; gap: 4px; font-size: 11px; font-family: monospace; }

.wk-rp-wizard-content { display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }

/* Keep old preview classes for JS compatibility but hide standalone */
.rp-pv-section {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; margin-bottom: 4px;
  font-size: 11px; font-weight: 700; color: var(--ink);
  border: 1px solid var(--border-s, #f1f5f9);
  background: var(--surf);
  animation: rpPvIn .2s ease both;
}

@keyframes rpPvIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

.rp-pv-icon {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.rp-pv-icon svg { width: 12px; height: 12px; stroke: #fff; }

.rp-pv-name { flex: 1; }

.rp-pv-empty {
  text-align: center; padding: 20px 10px; color: var(--ink4);
  font-size: 11px; font-weight: 600;
}

/* ── Report viewer modal ── */
.wk-modal--report-viewer { width: 94vw; max-width: 94vw; height: 92vh; display: flex; flex-direction: column; }

.wk-modal--report-viewer .wk-modal-head { flex-shrink: 0; }

.rpv-actions { display: flex; align-items: center; gap: 6px; }

.rpv-dl-btn {
  font-size: 11px !important; padding: 5px 10px !important;
  display: inline-flex; align-items: center; gap: 4px;
}

.rpv-body { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 32px !important; }

.rpv-section { margin-bottom: 24px; }

.rpv-section-title {
  font-size: 13px; font-weight: 800; color: var(--ink);
  margin-bottom: 14px; padding: 10px 14px;
  border-radius: 10px; border: none;
  background: color-mix(in srgb, var(--c-blue) 6%, var(--surf));
  display: flex; align-items: center; gap: 10px;
}

.rpv-section-title svg { width: 16px; height: 16px; stroke: var(--c-blue); }

.rpv-stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 20px;
}

.rpv-stat {
  padding: 20px 16px; border-radius: 14px; text-align: center;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--surf);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.rpv-stat:hover { border-color: color-mix(in srgb, var(--c-blue) 30%, var(--border)); box-shadow: 0 4px 16px rgba(0,0,0,.05); }

.rpv-stat-val { font-size: 28px; font-weight: 900; color: var(--ink); line-height: 1; }

.rpv-stat-label { font-size: 10px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .4px; margin-top: 6px; }

.rpv-table-wrap {
  border: 1.5px solid var(--border, #e2e8f0); border-radius: 12px; overflow: hidden;
}

.rpv-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}

.rpv-table th {
  text-align: left; font-size: 10px; font-weight: 800;
  color: var(--ink3); text-transform: uppercase; letter-spacing: .3px;
  padding: 10px 14px; background: color-mix(in srgb, var(--bg) 60%, var(--surf));
  border-bottom: 1.5px solid var(--border, #e2e8f0);
}

.rpv-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--border-s, #f1f5f9);
  color: var(--ink); font-weight: 600;
}

.rpv-table tr:last-child td { border-bottom: none; }

.rpv-table tr:hover td { background: color-mix(in srgb, var(--c-blue) 3%, var(--surf)); }

.rpv-badge {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 700;
}

.rpv-badge--done { background: var(--c-green-bg, #defbe6); color: var(--c-green, #16a34a); }

.rpv-badge--progress { background: var(--c-blue-bg, #e6f3ff); color: var(--c-blue, #004b7c); }

.rpv-badge--todo { background: #f1f5f9; color: #475569; }

.rpv-badge--overdue { background: var(--c-red-bg, #fff1f1); color: var(--c-red, #ef4444); }

.rpv-badge--blocked { background: var(--c-red-bg, #fff1f1); color: var(--c-red, #ef4444); }

.rpv-badge--high { background: var(--c-red-bg, #fff1f1); color: var(--c-red, #ef4444); }

.rpv-badge--medium { background: var(--c-yellow-bg, #fef3c7); color: var(--c-yellow, #f59e0b); }

.rpv-badge--low { background: var(--c-green-bg, #defbe6); color: var(--c-green, #16a34a); }

.rpv-progress-bar {
  width: 100%; height: 6px; border-radius: 3px;
  background: var(--border-s, #f1f5f9); overflow: hidden;
}

.rpv-progress-fill { height: 100%; border-radius: 3px; transition: width .3s ease; }

.rpv-empty { text-align: center; padding: 32px; color: var(--ink3); font-size: 13px; font-weight: 600; }

/* ── Report cards — Flowgen tcd-card style ── */
/* ── Reports Overview Grid (inside focus-panel) ── */
.rp-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 18px;
}

@media(max-width:1100px) {
.rp-overview-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:700px) {
.rp-overview-grid { grid-template-columns: 1fr; }
}

/* Empty state */
.rp-overview-empty {
  grid-column: 1 / -1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  padding: 60px 24px; text-align: center;
}

.rp-overview-empty-icon {
  width: 72px; height: 72px; border-radius: 20px;
  background: linear-gradient(135deg, #6366f120, #8b5cf620);
  display: flex; align-items: center; justify-content: center;
}

.rp-overview-empty-icon svg { width: 32px; height: 32px; stroke: #8b5cf6; }

.rp-overview-empty-title {
  font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.3;
}

.rp-overview-empty-desc {
  font-size: 12px; color: var(--ink3); max-width: 340px; line-height: 1.5;
}

/* Legacy compat */
.rp-generated-section { margin-top: 20px; }

.rp-generated-title {
  font-size: 12px; font-weight: 800; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}

.rp-generated-count {
  background: var(--c-blue); color: #fff; font-size: 10px;
  padding: 1px 7px; border-radius: 8px; font-weight: 800;
}

.rp-card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media(max-width:900px) {
.rp-card-list { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:600px) {
.rp-card-list { grid-template-columns: 1fr; }
}

.rp-card {
  background: var(--surf); border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 14px); overflow: hidden;
  display: flex; flex-direction: column; cursor: pointer;
  transition: border-color .22s, box-shadow .22s, transform .22s;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.02);
  position: relative;
}

.rp-card:hover {
  border-color: color-mix(in srgb, var(--rp-card-c, #6366f1) 40%, var(--border));
  box-shadow: 0 8px 32px rgba(0,0,0,.10), 0 2px 8px color-mix(in srgb, var(--rp-card-c) 12%, transparent);
  transform: translateY(-3px);
}

/* Thumbnail */
.rp-card-thumb {
  position: relative; height: 100px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.rp-card-thumb::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--rp-card-c, #6366f1); opacity: .8;
}

.rp-card-thumb::before {
  content: ''; position: absolute; inset: 0;
}

/* Thumb decorative patterns per report type */
.rp-card[data-rp-type="executive"] .rp-card-thumb { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }

.rp-card[data-rp-type="executive"] .rp-card-thumb::before { background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.06) 8px 10px), linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.15)) no-repeat 20% 30% / 60% 3px, linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)) no-repeat 20% 50% / 45% 3px, linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)) no-repeat 20% 70% / 30% 3px; }

.rp-card[data-rp-type="task-progress"] .rp-card-thumb { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }

.rp-card[data-rp-type="task-progress"] .rp-card-thumb::before { background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255,255,255,.05) 12px 13px), repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,.05) 12px 13px), radial-gradient(circle at 30% 40%, rgba(255,255,255,.2) 4px, transparent 4px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.2) 4px, transparent 4px); }

.rp-card[data-rp-type="goal-progress"] .rp-card-thumb { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }

.rp-card[data-rp-type="goal-progress"] .rp-card-thumb::before { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 18px, transparent 18px), radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 32px, transparent 32px); }

.rp-card[data-rp-type="team-performance"] .rp-card-thumb { background: linear-gradient(160deg, #7c3aed 0%, #8b5cf6 40%, #a78bfa 100%); }

.rp-card[data-rp-type="team-performance"] .rp-card-thumb::before { background: linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) no-repeat 15% 28% / 20% 44%, linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) no-repeat 42% 38% / 20% 34%, linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)) no-repeat 68% 48% / 20% 24%; }

.rp-card[data-rp-type="overdue"] .rp-card-thumb { background: radial-gradient(ellipse at 40% 45%, #ef4444 0%, #dc2626 60%, #b91c1c 100%); }

.rp-card[data-rp-type="overdue"] .rp-card-thumb::before { background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255,255,255,.05) 6px 8px), radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 16px, transparent 16px); }

.rp-card[data-rp-type="completion"] .rp-card-thumb { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }

.rp-card[data-rp-type="completion"] .rp-card-thumb::before { background: linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) no-repeat 18% 45% / 64% 10px, linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)) no-repeat 18% 65% / 44% 10px; }

.rp-card[data-rp-type="workload"] .rp-card-thumb { background: linear-gradient(180deg, #0891b2 0%, #06b6d4 50%, #22d3ee 100%); }

.rp-card[data-rp-type="workload"] .rp-card-thumb::before { background: repeating-linear-gradient(0deg, transparent 0 14px, rgba(255,255,255,.06) 14px 15px), repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.06) 14px 15px); }

.rp-card[data-rp-type="custom"] .rp-card-thumb { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }

.rp-card[data-rp-type="custom"] .rp-card-thumb::before { background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.04) 8px 10px); }

/* Marketing types */
.rp-card[data-rp-type="campaign-performance"] .rp-card-thumb { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }

.rp-card[data-rp-type="campaign-performance"] .rp-card-thumb::before { background: linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) no-repeat 18% 70% / 12% 24%, linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) no-repeat 35% 55% / 12% 38%, linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,.26)) no-repeat 52% 40% / 12% 52%, linear-gradient(rgba(255,255,255,.30),rgba(255,255,255,.30)) no-repeat 69% 28% / 12% 64%; }

.rp-card[data-rp-type="channel-mix"] .rp-card-thumb { background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%); }

.rp-card[data-rp-type="channel-mix"] .rp-card-thumb::before { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 18px, transparent 18px), radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 30px, transparent 30px), radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 42px, transparent 42px); }

.rp-card[data-rp-type="cpl-trend"] .rp-card-thumb { background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); }

.rp-card[data-rp-type="cpl-trend"] .rp-card-thumb::before { background: linear-gradient(135deg, transparent 48%, rgba(255,255,255,.35) 48% 52%, transparent 52%); }

.rp-card[data-rp-type="funnel"] .rp-card-thumb { background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); }

.rp-card[data-rp-type="funnel"] .rp-card-thumb::before { background: linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)) no-repeat 15% 28% / 70% 8px, linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) no-repeat 22% 48% / 56% 8px, linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) no-repeat 30% 68% / 40% 8px; }

.rp-card[data-rp-type="attribution"] .rp-card-thumb { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }

.rp-card[data-rp-type="attribution"] .rp-card-thumb::before { background: linear-gradient(135deg, transparent 49%, rgba(255,255,255,.30) 49% 51%, transparent 51%), radial-gradient(circle at 30% 35%, rgba(255,255,255,.20) 6px, transparent 6px), radial-gradient(circle at 70% 65%, rgba(255,255,255,.20) 6px, transparent 6px); }

.rp-card[data-rp-type="content"] .rp-card-thumb { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }

.rp-card[data-rp-type="content"] .rp-card-thumb::before { background: linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)) no-repeat 22% 30% / 56% 6px, linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) no-repeat 22% 48% / 44% 6px, linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) no-repeat 22% 66% / 36% 6px; }

/* Delivery / Financial / Resource / Account / Governance types */
.rp-card[data-rp-type="delivery-health"] .rp-card-thumb { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }

.rp-card[data-rp-type="delivery-health"] .rp-card-thumb::before { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 22px, transparent 22px), radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 36px, transparent 36px); }

.rp-card[data-rp-type="financial-health"] .rp-card-thumb { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }

.rp-card[data-rp-type="financial-health"] .rp-card-thumb::before { background: linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,.24)) no-repeat 16% 60% / 12% 30%, linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)) no-repeat 32% 50% / 12% 42%, linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,.32)) no-repeat 48% 38% / 12% 56%, linear-gradient(rgba(255,255,255,.36),rgba(255,255,255,.36)) no-repeat 64% 26% / 12% 70%; }

.rp-card[data-rp-type="resource-mix"] .rp-card-thumb { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }

.rp-card[data-rp-type="resource-mix"] .rp-card-thumb::before { background: radial-gradient(circle at 28% 50%, rgba(255,255,255,.22) 14px, transparent 14px), radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 14px, transparent 14px), radial-gradient(circle at 72% 50%, rgba(255,255,255,.22) 14px, transparent 14px); }

.rp-card[data-rp-type="account-health"] .rp-card-thumb { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); }

.rp-card[data-rp-type="account-health"] .rp-card-thumb::before { background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.30) 40% 44%, transparent 44%, rgba(255,255,255,.20) 50% 53%, transparent 53%), radial-gradient(circle at 75% 25%, rgba(255,255,255,.25) 10px, transparent 10px); }

.rp-card[data-rp-type="governance"] .rp-card-thumb { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }

.rp-card[data-rp-type="governance"] .rp-card-thumb::before { background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.18) 30px, transparent 30px), linear-gradient(rgba(255,255,255,.20),rgba(255,255,255,.20)) no-repeat 38% 60% / 24% 4px; }

/* Fallback for any unmapped type — use --rp-card-c */
.rp-card:not([data-rp-type="executive"]):not([data-rp-type="task-progress"]):not([data-rp-type="goal-progress"]):not([data-rp-type="team-performance"]):not([data-rp-type="overdue"]):not([data-rp-type="completion"]):not([data-rp-type="workload"]):not([data-rp-type="custom"]):not([data-rp-type="campaign-performance"]):not([data-rp-type="channel-mix"]):not([data-rp-type="cpl-trend"]):not([data-rp-type="funnel"]):not([data-rp-type="attribution"]):not([data-rp-type="content"]):not([data-rp-type="delivery-health"]):not([data-rp-type="financial-health"]):not([data-rp-type="resource-mix"]):not([data-rp-type="account-health"]):not([data-rp-type="governance"]) .rp-card-thumb {
  background: linear-gradient(135deg, var(--rp-card-c, #6366f1) 0%, color-mix(in srgb, var(--rp-card-c, #6366f1) 80%, #000) 100%);
}

.rp-card:hover .rp-card-thumb::before { filter: brightness(1.15); }

/* Thumb icon overlay */
.rp-card-thumb-icon {
  position: relative; z-index: 2;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.2); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}

.rp-card-thumb-icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }

/* Body */
.rp-card-body { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 5px; flex: 1; }

.rp-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }

.rp-card-tag {
  display: inline-flex; padding: 2px 7px; border-radius: 5px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}

.rp-card-name {
  font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-top: 1px;
}

.rp-card-desc {
  font-size: 10.5px; color: var(--ink3); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}

/* Report info pills (sections included, scope, time range) */
.rp-card-info {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}

.rp-card-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 600; color: var(--ink3);
  background: color-mix(in srgb, var(--rp-card-c, #64748b) 8%, var(--surf));
  border: 1px solid color-mix(in srgb, var(--rp-card-c, #64748b) 12%, var(--border));
  border-radius: 5px; padding: 2px 6px; line-height: 1.3;
}

.rp-card-pill svg { width: 9px; height: 9px; stroke: var(--ink4); fill: none; stroke-width: 2; flex-shrink: 0; }

/* Stats row */
.rp-card-stats {
  display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px;
  border-top: 1px solid var(--border-s, #f1f5f9); padding-top: 8px;
}

.rp-card-stat {
  display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 50px;
  text-align: center; padding: 2px 4px;
}

.rp-card-stat + .rp-card-stat { border-left: 1px solid var(--border-s, #f1f5f9); }

.rp-card-stat-val { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1; }

.rp-card-stat-lbl { font-size: 8px; color: var(--ink4); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }

/* Completion % overlay on thumbnail */
.rp-card-thumb-pct {
  position: absolute; bottom: 8px; right: 8px; z-index: 3;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px);
  border-radius: 8px; padding: 3px 8px; display: flex; align-items: center; gap: 4px;
  border: 1px solid rgba(255,255,255,.15);
}

.rp-card-thumb-pct-num {
  font-size: 13px; font-weight: 800; color: var(--pct-c, #fff); line-height: 1;
}

.rp-card-thumb-pct-lbl {
  font-size: 8px; font-weight: 600; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .3px;
}

/* Progress bar */
.rp-card-progress {
  height: 4px; background: var(--border-s, #f1f5f9); border-radius: 2px;
  overflow: hidden; margin-top: 6px;
}

.rp-card-progress-bar {
  height: 100%; border-radius: 2px; transition: width .4s ease;
}

/* Assignee label in footer */
.rp-card-foot-assignee {
  font-size: 9px; font-weight: 700; color: var(--ink3);
  background: color-mix(in srgb, var(--rp-card-c, #6366f1) 8%, var(--surf));
  border: 1px solid color-mix(in srgb, var(--rp-card-c, #6366f1) 15%, var(--border));
  border-radius: 5px; padding: 2px 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}

/* Footer */
.rp-card-foot {
  display: flex; align-items: center; gap: 6px; margin-top: auto;
  padding: 8px 14px; border-top: 1px solid var(--border-s, #f1f5f9);
}

.rp-card-foot-date {
  flex: 1; min-width: 0; font-size: 10px; color: var(--ink3); font-weight: 600;
}

.rp-card-foot-actions { display: flex; gap: 3px; }

.rp-card-action {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border, #e2e8f0);
  background: var(--surf); cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: all .15s ease; color: var(--ink3);
}

.rp-card-action:hover { border-color: var(--c-blue); color: var(--c-blue); background: color-mix(in srgb, var(--c-blue) 6%, var(--surf)); }

.rp-card-action svg { width: 12px; height: 12px; stroke: currentColor; }

/* ── Save dropdown in viewer ── */
.rpv-actions { display: flex; align-items: center; gap: 8px; }

.rpv-delete-btn {
  display: inline-flex !important; align-items: center; gap: 5px;
  background: transparent !important; color: var(--ink3) !important;
  font-size: 12px !important; font-weight: 600 !important;
  padding: 7px 12px !important; border-radius: 8px !important; cursor: pointer;
  border: 1px solid var(--border, #e2e8f0) !important;
  transition: all .15s ease;
}

.rpv-delete-btn:hover {
  background: #fef2f2 !important; color: #ef4444 !important;
  border-color: #fca5a5 !important;
}

.rpv-delete-btn svg { stroke: currentColor; }

.rpv-save-drop { position: relative; }

.rpv-save-btn {
  display: inline-flex !important; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important; font-size: 12px !important; font-weight: 700 !important;
  padding: 7px 14px !important; border-radius: 8px !important; cursor: pointer;
  border: none !important; box-shadow: 0 2px 8px rgba(99,102,241,.25);
  transition: all .15s ease;
}

.rpv-save-btn:hover { box-shadow: 0 4px 16px rgba(99,102,241,.35); transform: translateY(-1px); }

.rpv-save-btn svg { stroke: #fff; }

.rpv-save-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  width: 200px; z-index: 130; background: var(--surf, #fff);
  border: 1.5px solid var(--border, #e2e8f0); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); overflow: hidden;
  animation: rpDropIn .15s ease both;
}

.rpv-save-drop.is-open .rpv-save-menu { display: block; }

.rpv-save-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; font-size: 12px; font-weight: 600;
  color: var(--ink); cursor: pointer; transition: background .12s ease;
}

.rpv-save-item:hover { background: var(--border-s, #f1f5f9); }

.rpv-save-item svg { width: 14px; height: 14px; stroke: var(--ink3); flex-shrink: 0; }

.rpv-save-divider { height: 1px; background: var(--border-s, #f1f5f9); margin: 4px 0; }

@media (max-width: 640px) {
.wk-rp-type-grid { grid-template-columns: repeat(2, 1fr); }

.wk-rp-field-row--3 { grid-template-columns: 1fr; }

.wk-rp-field-row--2 { grid-template-columns: 1fr; }

.wk-rp-field-grid { grid-template-columns: 1fr; }

.wk-rp-wizard-layout { grid-template-columns: 1fr; }

.wk-rp-sidebar { display: none; }

.rpv-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Form fields */
.wk-field { margin-bottom: 12px; }

.wk-field label { display: block; font-size: 10px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }

.wk-field input, .wk-field select, .wk-field textarea {
  width: 100%; padding: 8px 10px; border: 2px solid var(--border);
  border-radius: 8px; font-family: var(--f); font-size: 12.5px; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}

.wk-field input:focus, .wk-field select:focus, .wk-field textarea:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(59,130,246,.08); }

/* Required / error */
.wk-req { color: #ef4444; font-weight: 800; }

.wk-field-error { display: none; margin-top: 4px; font-size: 11px; font-weight: 600; color: #ef4444; padding: 3px 8px; border-radius: 6px; background: rgba(239,68,68,.06); }

.wk-field-error.is-visible { display: block; }

.wk-field input.is-error, .wk-field select.is-error { border-color: #ef4444; }

.wk-field input.is-error:focus, .wk-field select.is-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.1); }

/* ── Member Modal extras ── */
.wk-modal--member { width: 540px; }

.wkm-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--c-blue) 4%, var(--surf)); border: 1.5px solid color-mix(in srgb, var(--c-blue) 10%, var(--border)); }

.wkm-avatar-preview {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff;
  font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(59,130,246,.25); letter-spacing: -0.5px;
}

.wkm-avatar-hint { font-size: 11px; font-weight: 600; color: var(--ink3); line-height: 1.5; }

.wkm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.wkm-field-row .wk-field { margin-bottom: 12px; }

/* ── Primary button with icon ── */
.wk-btn--primary { display: inline-flex; align-items: center; gap: 6px; }

.wk-btn--primary svg { stroke: #fff; flex-shrink: 0; }

/* Toast */
.wk-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e293b; color: #fff; padding: 8px 18px; border-radius: 10px;
  font-size: 12px; font-weight: 600; box-shadow: 0 8px 32px rgba(0,0,0,.2);
  opacity: 0; pointer-events: none; transition: all .3s cubic-bezier(.2,.8,.2,1);
  /* ⚠️ THE TOAST TIER, not just "a big number". At 99999 this sat UNDER every
     modal in the 1000000+ band (report review, deliverable modal, shared
     pickers), so their confirmations rendered behind a full-screen scrim and
     read as "I pressed the button and literally nothing happened". A popup
     must never cover its own confirmations — see the tier table in
     reference_work_zindex_tiers (toasts/critical = 2000400+). */
  z-index: 2000500;
}

.wk-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Empty state */
.wk-empty {
  text-align: center; padding: 36px 18px; color: var(--ink3); font-size: 12px;
  font-weight: 500; letter-spacing: .01em;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  min-height: 60px;
}

.wk-support-body .wk-empty { padding: 18px 12px; min-height: 40px; }

.wk-empty-state {
  text-align: center; padding: 36px 18px; color: var(--ink3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.wk-empty-state .wk-empty-icon { margin-bottom: 12px; opacity: .4; }

.wk-empty-state .wk-empty-title {
  font-size: 13px; font-weight: 700; color: var(--ink2); margin-bottom: 6px;
}

.wk-empty-state .wk-empty-desc {
  font-size: 11px; font-weight: 500; color: var(--ink3); max-width: 280px; line-height: 1.5;
}

/* Main wrapper */
.wk-app { padding: 0 16px 40px; max-width: 1280px; margin: 0 auto; }

@media (max-width: 700px) {
.wk-app { padding: 0 8px 32px; }
}

/* Page header shared */
.wk-page-header { margin-bottom: 12px; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

.wk-page-title { font-size: 18px; font-weight: 800; color: var(--ink); }

.wk-page-sub { font-size: 11px; color: var(--ink3); margin-top: 2px; }

/* 3-column grid */
.mw-exec-grid {
  display: grid; grid-template-columns: 200px 1fr 280px;
  gap: 14px; align-items: start; min-height: 520px;
}

@media (max-width: 1100px) {
.mw-exec-grid { grid-template-columns: 180px 1fr; }

.mw-intel { display: none; }
}

@media (max-width: 760px) {
.mw-exec-grid { grid-template-columns: 1fr; }

.mw-sidebar { position: static !important; max-height: none !important; display: flex; flex-wrap: wrap; gap: 4px; padding: 8px !important; }
}

/* ── LEFT SIDEBAR ── */
.mw-sidebar {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px;
  position: sticky; top: 60px; align-self: start;
  max-height: calc(100vh - 100px); overflow-y: auto;
}

.mw-nav-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer;
  border: none; background: none; text-align: left; font-family: var(--f);
  transition: background .15s ease, color .15s ease;
}

.mw-nav-item:hover { background: rgba(0,0,0,.03); }

.mw-nav-item.is-active { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.05); color: var(--c-blue); }

.mw-nav-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; }

.mw-nav-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mw-nav-badge {
  margin-left: auto; min-width: 18px; height: 18px; border-radius: 9px;
  font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; flex-shrink: 0; background: var(--c-blue); color: #fff;
}

.mw-nav-badge:empty { display: none; }

.mw-nav-badge--red { background: var(--c-red); }

.mw-nav-badge--teal { background: var(--c-teal); }

/* Daily Plan block inside sidebar */
.mw-plan-block {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
}

.mw-plan-head {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  font-size: 10px; font-weight: 700; color: var(--c-yellow);
  text-transform: uppercase; letter-spacing: .04em;
}

.mw-plan-head svg { width: 14px; height: 14px; stroke: var(--c-yellow); fill: none; stroke-width: 2; stroke-linecap: round; }

.mw-plan-body { padding: 0 4px; }

.mw-plan-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  font-size: 11px; font-weight: 600; color: var(--ink);
  border-radius: 6px; cursor: pointer; transition: background .15s;
}

.mw-plan-item:hover { background: var(--c-yellow-bg); }

.mw-plan-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.mw-plan-dot--high { background: var(--c-red); }

.mw-plan-dot--medium { background: var(--c-yellow); }

.mw-plan-dot--low { background: var(--c-green); }

.mw-plan-reason { font-size: 9px; color: var(--ink3); font-weight: 500; margin-left: auto; white-space: nowrap; }

.mw-plan-empty { font-size: 10px; color: var(--ink4); padding: 8px 6px; text-align: center; }

@media (max-width: 760px) {
.mw-plan-block { display: none; }
}

/* ── CENTER WORKSPACE ── */
.mw-center { min-width: 0; }

.mw-view-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}

.mw-view-title { font-size: 16px; font-weight: 800; color: var(--ink); }

.mw-view-count {
  font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 99px;
  background: var(--border-s); color: var(--ink3);
}

.mw-view-actions { margin-left: auto; }

.mw-filter-check { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--ink3); font-weight: 600; cursor: pointer; }

.mw-filter-check input { accent-color: var(--c-blue); }

/* Quick add bar */
.mw-quick-add {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--surf); border: 2px dashed var(--border);
  border-radius: var(--radius-sm); margin-bottom: 12px;
  transition: border-color .2s; flex-wrap: wrap; position: relative;
}

.mw-quick-add:focus-within { border-color: var(--c-blue); border-style: solid; }

.mw-quick-add.is-highlighted {
  border-color: var(--c-blue); border-style: solid;
  animation: mwQaHighlight 1.2s ease;
}

@keyframes mwQaHighlight {
  0%   { box-shadow: 0 0 0 0 rgba(0,75,124,.4); }
  30%  { box-shadow: 0 0 0 6px rgba(0,75,124,.25); background: rgba(0,75,124,.06); }
  100% { box-shadow: 0 0 0 0 rgba(0,75,124,0); background: transparent; }
}

.mw-quick-add-icon { display: flex; flex-shrink: 0; }

.mw-quick-add-icon svg { width: 16px; height: 16px; stroke: var(--ink4); fill: none; stroke-width: 2; stroke-linecap: round; }

.mw-quick-add-input {
  flex: 1; border: none; outline: none; font-family: var(--f);
  font-size: 12.5px; color: var(--ink); background: transparent; padding: 4px 0;
}

.mw-quick-add-input::placeholder { color: var(--ink4); }

.mw-quick-add-btn {
  padding: 5px 14px; border-radius: 6px; font-size: 11px; font-weight: 700;
  color: #fff; background: var(--c-blue); transition: opacity .15s;
}

.mw-quick-add-btn:hover { opacity: .85; }

.mw-quick-add-btn:disabled { opacity: .3; cursor: not-allowed; }

/* AI toggle button (labeled pill with sparkle + AI) */
.mw-qa-ai-toggle {
  height: 26px; padding: 0 8px; gap: 4px;
  border: 1.5px solid rgba(139,92,246,.25); background: rgba(139,92,246,.06);
  border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: #7c3aed; font-family: inherit;
  transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
}

.mw-qa-ai-toggle svg { width: 12px; height: 12px; flex-shrink: 0; }

.mw-qa-ai-label { font-size: 11px; font-weight: 700; letter-spacing: .03em; }

.mw-qa-ai-toggle:hover { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.4); box-shadow: 0 2px 8px rgba(139,92,246,.1); }

.mw-qa-ai-toggle:active { transform: scale(.93); }

/* AI mode active */
.mw-quick-add.is-ai-mode .mw-qa-ai-toggle { background: #7c3aed; color: #fff; border-color: #7c3aed; box-shadow: 0 2px 10px rgba(124,58,237,.25); }

.mw-quick-add.is-ai-mode .mw-qa-ai-toggle svg { stroke: #fff; }

.wk-launch-scope {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-blue) 5%, #fff), #fff);
  box-shadow: var(--shadow-sm);
}

.wk-launch-scope-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink3);
  flex-shrink: 0;
}

.wk-launch-scope-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.wk-launch-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--c-blue-bg);
  color: var(--c-blue);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--c-blue) 22%, transparent);
}

.wk-launch-chip--campaign {
  background: var(--c-purple-bg);
  color: var(--c-purple);
  border-color: color-mix(in srgb, var(--c-purple) 24%, transparent);
}

.wk-launch-scope-clear {
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 700;
}

.wk-launch-scope-clear:hover {
  border-color: var(--c-blue);
  color: var(--c-blue);
}

@media (max-width: 760px) {
.wk-launch-scope {
    align-items: flex-start;
    flex-wrap: wrap;
  }

.wk-launch-scope-clear {
    margin-left: 0;
  }
}

.mw-quick-add.is-ai-mode .mw-qa-ai-toggle:hover { background: #6d28d9; border-color: #6d28d9; }

.mw-quick-add.is-ai-mode { border-color: rgba(139,92,246,.35); border-style: solid; }

.mw-quick-add.is-ai-mode .mw-quick-add-input::placeholder { color: #a78bfa; }

.mw-quick-add.is-ai-mode .mw-quick-add-btn { background: #7c3aed; }

.mw-quick-add.is-ai-mode .mw-quick-add-btn:hover { opacity: .85; }

/* AI status row below bar */
.mw-qa-ai-status { display: none; padding: 4px 14px; font-size: 11px; color: #7c3aed; font-weight: 600; }

.mw-qa-ai-status.is-visible { display: flex; align-items: center; gap: 6px; }

.mw-qa-ai-status svg { width: 12px; height: 12px; animation: mwQaAiSpin 1s linear infinite; }

@keyframes mwQaAiSpin { to { transform: rotate(360deg); } }

/* Quick-add inline option buttons */
.qa-options {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}

.qa-opt-btn {
  width: 28px; height: 28px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  transition: all .2s cubic-bezier(.22,1,.36,1);
  position: relative;
}

.qa-opt-btn svg {
  width: 14px; height: 14px; stroke: var(--ink4); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .2s ease;
}

.qa-opt-btn:hover { background: var(--bg, #f1f5f9); border-color: var(--border-s); }

.qa-opt-btn:hover svg { stroke: var(--ink2); }

.qa-opt-btn.is-set { background: var(--c-blue-bg, rgba(0,75,124,.08)); border-color: var(--c-blue-bg, rgba(0,75,124,.15)); }

.qa-opt-btn.is-set svg { stroke: var(--c-blue); }

.qa-opt-btn.is-colored { background: color-mix(in srgb, var(--qa-btn-color) 10%, transparent); border-color: color-mix(in srgb, var(--qa-btn-color) 20%, transparent); }

.qa-opt-btn.is-colored svg { stroke: var(--qa-btn-color); }

/* Badge count on option buttons */
.qa-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px; font-size: 9px; font-weight: 800;
  line-height: 14px; text-align: center;
  background: var(--qa-btn-color, var(--c-blue, #3b82f6)); color: #fff;
  pointer-events: none; z-index: 1;
  animation: qaBadgeIn .2s ease;
}

@keyframes qaBadgeIn { from { transform: scale(0); } to { transform: scale(1); } }

.qa-opt-divider {
  width: 1px; height: 16px; background: var(--border-s);
  margin: 0 4px; flex-shrink: 0;
}

.qa-opt-expand svg { stroke-width: 1.8; }

/* Quick-add popover (appears below the option button) */
.qa-popover {
  position: absolute; top: calc(100% + 6px); right: 0;
  z-index: 9999; min-width: 200px;
  background: var(--surf, #fff); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  opacity: 0; transform: translateY(-4px) scale(.97);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.qa-popover.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.qa-popover-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--ink4); margin-bottom: 6px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border-s);
}

/* Popover — assignee list */
.qa-pop-list { max-height: 360px; overflow-y: auto; }

.qa-pop-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink);
  transition: background .12s ease;
}

.qa-pop-item:hover { background: var(--bg, #f1f5f9); }

.qa-pop-item.is-selected { background: var(--c-blue-bg); }

.qa-pop-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-blue-bg); color: var(--c-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; flex-shrink: 0;
}

.qa-pop-item-clear {
  font-size: 11px; color: var(--ink4); padding: 4px 8px;
  cursor: pointer; border-radius: 6px;
}

.qa-pop-item-clear:hover { background: var(--bg); color: var(--ink2); }

/* Popover — priority options */
.qa-pop-priorities { display: flex; flex-direction: column; gap: 2px; }

.qa-pop-priority {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink);
  transition: background .12s ease;
}

.qa-pop-priority:hover { background: var(--bg, #f1f5f9); }

.qa-pop-priority.is-selected { background: var(--c-blue-bg); }

.qa-pop-priority-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* Popover — recurring options */
.qa-pop-recurrences { display: flex; flex-direction: column; gap: 2px; }

.qa-pop-recurrence {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink);
  transition: background .12s ease;
}

.qa-pop-recurrence:hover { background: var(--bg, #f1f5f9); }

.qa-pop-recurrence.is-selected { background: var(--c-blue-bg); color: var(--c-blue); }

.qa-pop-recurrence-icon {
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--ink3);
}

.qa-pop-recurrence-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.qa-pop-recurrence.is-selected .qa-pop-recurrence-icon { color: var(--c-blue); }

/* Popover — custom recurrence row */
.qa-pop-custom-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-top: 1px solid var(--border-s, #e2e8f0);
  margin-top: 2px;
}

.qa-pop-custom-row span { font-size: 11px; font-weight: 600; color: var(--ink3); white-space: nowrap; }

.qa-pop-custom-num {
  width: 48px; padding: 4px 6px; font-size: 12px; font-family: var(--f);
  border: 1px solid var(--border-s); border-radius: 5px; outline: none;
  background: var(--bg, #f8fafc); color: var(--ink);
  text-align: center; -moz-appearance: textfield;
}

.qa-pop-custom-num::-webkit-outer-spin-button,
.qa-pop-custom-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.qa-pop-custom-unit {
  padding: 4px 6px; font-size: 12px; font-family: var(--f);
  border: 1px solid var(--border-s); border-radius: 5px; outline: none;
  background: var(--bg, #f8fafc); color: var(--ink); cursor: pointer;
}

.qa-pop-custom-ok {
  padding: 4px 10px; font-size: 11px; font-weight: 700; font-family: var(--f);
  border: none; border-radius: 5px; cursor: pointer;
  background: var(--c-blue, #3b82f6); color: #fff;
  transition: opacity .12s ease;
}

.qa-pop-custom-ok:hover { opacity: .85; }

/* Task profile — custom recurrence row in edit popover */
.tp-drop-custom-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 12px; border-top: 1px solid var(--border-s, #e2e8f0);
}

.tp-drop-custom-row span { white-space: nowrap; }

.tp-drop-custom-row .tp-sched-lbl { flex: 0 0 auto; }

.tp-drop-custom-row .tp-drop-custom-ok { margin-left: auto; }

.tp-drop-custom-ok {
  padding: 4px 10px; font-size: 11px; font-weight: 700; font-family: var(--f);
  border: none; border-radius: 5px; cursor: pointer;
  background: var(--c-blue, #3b82f6); color: #fff;
}

.tp-drop-custom-ok:hover { opacity: .85; }

.tp-drop-recur-icon { display: inline-flex; align-items: center; margin-right: 2px; color: var(--ink4); }

/* Quick-add popover — weekday picker row */
.qa-pop-weekdays-row {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-top: 1px solid var(--border-s, #e2e8f0);
  flex-wrap: wrap;
}

.qa-pop-wd-btn {
  width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-s, #e2e8f0);
  background: var(--bg, #f8fafc); color: var(--ink);
  font-size: 11px; font-weight: 700; font-family: var(--f);
  cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.qa-pop-wd-btn:hover { background: var(--surf, #fff); }

.qa-pop-wd-btn.is-selected {
  background: var(--c-blue, #3b82f6); color: #fff; border-color: var(--c-blue, #3b82f6);
}

.qa-pop-wd-ok { margin-left: auto; }

/* Quick-add popover — time-of-day row (always visible at bottom of recurring popover) */
.qa-pop-time-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-top: 1px solid var(--border-s, #e2e8f0);
}

.qa-pop-time-row span { font-size: 11px; font-weight: 600; color: var(--ink3); white-space: nowrap; }

.qa-pop-time-input {
  flex: 1; padding: 4px 6px; font-size: 12px; font-family: var(--f);
  border: 1px solid var(--border-s); border-radius: 5px; outline: none;
  background: var(--bg, #f8fafc); color: var(--ink);
}

.qa-pop-time-clear {
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-s, #e2e8f0);
  background: var(--bg, #f8fafc); color: var(--ink3);
  font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
}

.qa-pop-time-clear:hover { background: var(--surf, #fff); color: var(--ink); }

/* Quick-add popover — "if missed" (roll-forward / don't-stack) row */
.qa-pop-missed-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 10px; border-top: 1px solid var(--border-s, #e2e8f0);
}

.qa-pop-missed-label { font-size: 11px; font-weight: 600; color: var(--ink3); white-space: nowrap; margin-right: 2px; }

.qa-pop-missed-btn {
  padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; font-family: var(--f);
  border: 1px solid var(--border-s, #e2e8f0); background: var(--bg, #f8fafc); color: var(--ink);
  cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.qa-pop-missed-btn:hover { background: var(--surf, #fff); }

.qa-pop-missed-btn.is-selected { background: var(--c-blue, #3b82f6); color: #fff; border-color: var(--c-blue, #3b82f6); }

/* Quick-add popover — "when it shows up" hold time. Reuses the missed-row skin
   for the segment; this is only the follow-up time input, which borrows the
   time-row layout so the two clocks in this popover look like one control. */
.qa-pop-show-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px 8px;
}

.qa-pop-show-row span { font-size: 11px; font-weight: 600; color: var(--ink3); white-space: nowrap; }

.qa-pop-show-input {
  width: 96px; padding: 4px 6px; font-size: 12px; font-family: var(--f);
  border: 1px solid var(--border-s); border-radius: 5px; outline: none;
  background: var(--bg, #f8fafc); color: var(--ink);
}

.qa-pop-show-unit { color: var(--ink4, #94a3b8) !important; }

/* Quick-add popover — "ends" (never / after N / on date) rows */
.qa-pop-ends-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px; border-top: 1px solid var(--border-s, #e2e8f0); }

.qa-pop-ends-btn {
  padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; font-family: var(--f);
  border: 1px solid var(--border-s, #e2e8f0); background: var(--bg, #f8fafc); color: var(--ink);
  cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.qa-pop-ends-btn:hover { background: var(--surf, #fff); }

.qa-pop-ends-btn.is-selected { background: var(--c-blue, #3b82f6); color: #fff; border-color: var(--c-blue, #3b82f6); }

.qa-pop-ends-after-row, .qa-pop-ends-on-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--border-s, #e2e8f0); }

.qa-pop-ends-after-row span, .qa-pop-ends-on-row span { font-size: 11px; font-weight: 600; color: var(--ink3); white-space: nowrap; }

.qa-pop-ends-num { width: 52px; padding: 4px 6px; font-size: 12px; font-family: var(--f); border: 1px solid var(--border-s); border-radius: 5px; background: var(--bg, #f8fafc); color: var(--ink); }

.qa-pop-ends-date { flex: 1; min-width: 0; padding: 4px 6px; font-size: 12px; font-family: var(--f); border: 1px solid var(--border-s); border-radius: 5px; background: var(--bg, #f8fafc); color: var(--ink); }

/* Task profile — weekday picker row */
.tp-drop-weekdays-row {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px; border-top: 1px solid var(--border-s, #e2e8f0);
  flex-wrap: wrap;
}

.tp-drop-wd-btn {
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-s, #e2e8f0);
  background: var(--bg, #f8fafc); color: var(--ink);
  font-size: 11px; font-weight: 700; font-family: var(--f);
  cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.tp-drop-wd-btn:hover { background: var(--surf, #fff); }

.tp-drop-wd-btn.is-selected {
  background: var(--c-blue, #3b82f6); color: #fff; border-color: var(--c-blue, #3b82f6);
}

.tp-drop-wd-ok { margin-left: auto; }

/* Schedule editor — time-of-day input (inside .tp-sched-row) */

/* Task profile sidebar — recurring field highlight */
.tp-sb-field.is-recurring .tp-sb-field-value { color: var(--c-blue, #3b82f6); font-weight: 600; }

/* Two-line value (schedule + "Next: …"). A recurring task hides the Due date
   row, so the next occurrence has to show up here instead. */
.tp-sb-field-value--col { flex-direction: column; align-items: flex-start; gap: 1px; }

.tp-sb-field-sub { font-size: 10.5px; font-weight: 600; color: var(--ink4, #94a3b8); }

.tp-sb-field.is-recurring .tp-sb-field-sub { color: var(--ink3, #8d8d8d); }

/* Visibility row: highlight when the task is limited to certain departments,
   so a restricted task is obvious at a glance (default "Everyone" stays plain). */
.tp-sb-field.is-restricted .tp-sb-field-value { color: #b45309; font-weight: 600; }

.tp-sb-field.is-restricted .tp-sb-field-label svg { color: #b45309; }

/* ── Schedule popover (the Recurring row) ──────────────────────────────────
   TWO COLUMNS, not one tall stack. Head + summary span the top, WHEN (the
   cadence list) sits left of HOW (mode, start, one-at-a-time, missed-day rule,
   ends), and Done spans the bottom. Stacked vertically this editor never fit:
   the list scrolled, the settings block scrolled, and every setting added made
   it worse — the popover was ~370px wide and taller than the task popup could
   hold. Side by side it is wider than it is tall and nothing has to scroll.
   _positionEditPopover still caps the height and clamps to the viewport. */
.tp-edit-popover.is-sched.is-visible { display: flex; flex-direction: column; }

/* The content sits one level down in .tp-edit-popover-body, so THAT is the real
   column — it has to fill the capped popover and carry the min-height:0 chain,
   or the columns refuse to shrink and the Done footer gets clipped off. */
.tp-edit-popover.is-sched > .tp-edit-popover-body {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}

.tp-edit-popover.is-sched .tp-drop-head,
.tp-edit-popover.is-sched .tp-sched-summary,
.tp-edit-popover.is-sched .tp-drop-recur-foot { flex: 0 0 auto; }

/* The column pair. `is-single` (set by _recRevealEnds whenever the settings
   column is collapsed, i.e. the task does not repeat) drops back to one lane so
   a one-off task never opens a double-width popover with an empty half. */
/* The grid carries the popover's WIDTH (it is the widest child, and the popover
   sizes to content). Keeping it here means width and layout can never disagree —
   which is exactly how the old `max-width: 420px` in work-series-ai.css ended up
   silently capping an editor that needed more room. */
.tp-sched-cols {
  flex: 1 1 auto; min-height: 0;
  width: 616px; max-width: calc(100vw - 24px);
  display: grid; grid-template-columns: minmax(0, 244px) minmax(0, 1fr);
  align-items: stretch;
}

/* No cadence chosen → one lane, and back to a normal dropdown width. */
.tp-sched-cols.is-single { width: 324px; grid-template-columns: minmax(0, 1fr); }

.tp-sched-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* Matches the left column's group-head top inset so the two halves start level. */
.tp-sched-col--how { padding-top: 7px; }

/* Hairline rule between the two halves — a border, not a filled sidebar. */
.tp-sched-col--when { border-right: 1px solid var(--border-s, #e2e8f0); }

.tp-sched-cols.is-single .tp-sched-col--when { border-right: 0; }

/* Column caption. Same weight/tracking as .tp-drop-head so the two halves read
   as one form rather than two stacked widgets. */
.tp-sched-grouphead {
  flex: 0 0 auto; padding: 9px 12px 3px;
  font: 700 9.5px/1.3 var(--f); text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink4, #94a3b8);
}

/* The cadence list now has a whole column to itself, so it only scrolls when the
   viewport is genuinely short — and it is the FIRST thing to give height up
   (shrink 100 vs the settings column's 1). */
.tp-edit-popover.is-sched .tp-drop-list {
  flex: 0 100 auto; min-height: 0; max-height: none; overflow-y: auto;
}

/* Last resort in a very short popup: the settings column scrolls itself rather
   than pushing the Done button past the edge. */
.tp-edit-popover.is-sched .tp-sched-detail {
  flex: 0 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
}

/* ⚠️ The groups inside must not SHRINK. This is a flex column, so when the
   content is taller than the capped popover the browser's first move is to
   squeeze the last group instead of scrolling — and `.tp-drop-ends-section`
   carries `overflow: hidden`, so ENDS silently lost its Never/After/On-date
   buttons while `scrollHeight === clientHeight` insisted everything fit. Pin
   every group's height and the column's own `overflow-y: auto` does the job it
   was put there for: a short window scrolls, visibly, and nothing disappears. */
.tp-edit-popover.is-sched .tp-sched-detail > * { flex: 0 0 auto; }

@media (max-width: 700px) {
.tp-sched-cols,
  .tp-sched-cols.is-single { width: min(340px, calc(100vw - 24px)); grid-template-columns: minmax(0, 1fr); }

.tp-sched-col--when { border-right: 0; border-bottom: 1px solid var(--border-s, #e2e8f0); }

/* Stacked again, so the list has to give height back the way it used to. */
  .tp-edit-popover.is-sched .tp-drop-list { max-height: 190px; }
}

/* Summary line reads grey while the task is a one-off, green once it recurs. */
.tp-sched-summary.is-off {
  background: var(--bg, #f8fafc); border-bottom-color: var(--border-s, #e2e8f0);
  color: var(--ink3, #8d8d8d); font-weight: 600;
}

/* Starts · At · Ends — only meaningful once a cadence is chosen. NOTE: the
   reveal deliberately animates opacity ONLY. Animating max-height meant the
   block was still collapsed when the fit maths ran, so the popover got sized
   for the old height and the revealed rows spilled off the edge. */
/* NOTE: the cap has to clear the tallest the settings column gets (mode +
   Starts + At + how-many-at-once + missed-day + Ends ≈ 430px). It was 340px
   when this block held only Starts/At/Ends; leaving it there would have made the
   column scroll for no reason now that it has a lane of its own. */
.tp-sched-detail {
  overflow: hidden; max-height: 640px; opacity: 1;
  transition: opacity .18s ease, border-color .2s ease;
}

/* No border-top any more. It belonged to the stacked layout, where this block sat
   UNDER the cadence list; the divider is now the when-column's own border —
   border-right side by side, border-bottom when it wraps to one lane. */
.tp-sched-detail.is-collapsed {
  max-height: 0; opacity: 0; border-top-color: transparent; pointer-events: none;
}

.tp-sched-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px 0; }

.tp-sched-lbl {
  flex: 0 0 42px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink4, #94a3b8);
}

/* "STARTS" and "AT" fit the 42px lane; a two-word label ("NOT BEFORE") does not,
   and clipping the label is how a row stops explaining itself. */
.tp-sched-lbl--wide { flex: 0 0 auto; white-space: nowrap; }

/* ── Coded value controls ──────────────────────────────────────────────────
   Every value in this popover is picked with app UI, never a native
   <input type="date|time|number"> — those render as OS chrome that ignores the
   theme and looks nothing like the rest of Work. A value reads as a button and
   opens the real calendar / time wheel in the sub-view below. */
.tp-sched-val {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 9px; border: 1px solid var(--border-s, #e2e8f0); border-radius: 7px;
  background: var(--surf, #fff); color: var(--ink, #161616);
  font: 600 12px/1.25 var(--f); cursor: pointer; text-align: left;
  transition: border-color .12s ease, background .12s ease;
}

.tp-sched-val:hover { border-color: var(--wt-theme-primary, #4f46e5); background: var(--bg, #f8fafc); }

.tp-sched-val svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--ink4, #94a3b8); }

.tp-sched-val span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tp-sched-clear {
  width: 24px; height: 24px; padding: 0; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--border-s, #e2e8f0);
  background: var(--bg, #f8fafc); color: var(--ink3, #64748b);
  font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
}

.tp-sched-clear:hover { background: var(--surf, #fff); color: var(--ink); }

/* Count steppers (occurrences, custom interval) — replaces <input type=number>. */
.tp-sched-step {
  width: 26px; height: 26px; padding: 0; border-radius: 7px; flex: 0 0 auto;
  border: 1px solid var(--border-s, #e2e8f0); background: var(--surf, #fff);
  color: var(--ink2, #475569); font: 700 13px/1 var(--f); cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}

.tp-sched-step:hover { border-color: var(--wt-theme-primary, #4f46e5); color: var(--ink); }

.tp-sched-count {
  min-width: 28px; text-align: center; flex: 0 0 auto;
  font: 700 13px/1 var(--f); color: var(--ink, #161616);
}

/* Unit chips (days/weeks/months/years) — replaces <select>. */
.tp-sched-units { display: flex; gap: 3px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }

.tp-sched-unit {
  padding: 5px 7px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border-s, #e2e8f0); background: var(--surf, #fff);
  color: var(--ink3, #64748b); font: 600 11px/1 var(--f);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.tp-sched-unit:hover { border-color: var(--ink4, #94a3b8); }

.tp-sched-unit.is-on {
  border-color: var(--c-green, #10b981); background: var(--c-green-bg, #ecfdf5); color: #047857;
}

/* ── Sub-view: the calendar / time wheel takes over the popover body IN PLACE,
   so picking a date never grows the popover past the popup edge. ── */
.tp-edit-popover-body.is-sub > :not(.tp-sched-view) { display: none !important; }

.tp-sched-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.tp-sched-view[hidden] { display: none; }

.tp-sched-subhead {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 8px 10px; border-bottom: 1px solid var(--border-s, #e2e8f0);
}

.tp-sched-back {
  width: 26px; height: 26px; padding: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-s, #e2e8f0); background: var(--surf, #fff);
  border-radius: 8px; cursor: pointer; color: var(--ink3, #64748b);
}

.tp-sched-back svg { width: 14px; height: 14px; }

.tp-sched-back:hover { background: var(--border-s, #f1f5f9); color: var(--ink); }

.tp-sched-subtitle {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink4, #94a3b8);
}

.tp-sched-subbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* The time wheel is bare markup (it normally sits inside a padded row), so give
   it its own gutter here — otherwise the hour column and the AM/PM buttons sit
   flush against the popover edge and read as cut off. Fixed row height + a
   whole-multiple column height (5 × 28 + 4 gaps + padding) so the wheel never
   ends on a half-drawn row, which reads as broken rather than as scrollable. */
.tp-sched-subbody > .tp-tp { padding: 12px; }

.tp-sched-subbody > .tp-tp .tp-tp-opt { height: 28px; padding: 0; line-height: 28px; }

.tp-sched-subbody > .tp-tp .tp-tp-col { max-height: 156px; }

/* Recurring popover — Ends section */
.tp-drop-ends-section {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border-s, #e2e8f0);
  overflow: hidden;
  max-height: 300px; opacity: 1;
  transition: max-height .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease, padding .28s ease, border-color .2s ease;
}

.tp-drop-ends-section.is-collapsed {
  max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0;
  border-top-color: transparent; pointer-events: none;
}

.tp-drop-recur-foot { padding: 8px 12px 12px; display: flex; justify-content: flex-end; }

.tp-drop-recur-done {
  font-size: 12px; font-weight: 700; font-family: var(--f);
  padding: 6px 18px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--wt-theme-primary, #4f46e5); color: #fff;
  transition: filter .12s ease;
}

.tp-drop-recur-done:hover { filter: brightness(1.06); }

.tp-drop-ends-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink4, #94a3b8);
  margin-bottom: 6px;
}

.tp-drop-ends-btns {
  display: flex; gap: 4px; margin-bottom: 6px;
}

.tp-drop-ends-btn {
  flex: 1; padding: 4px 6px; font-size: 11px; font-weight: 600;
  font-family: var(--f); border: 1px solid var(--border-s, #e2e8f0);
  border-radius: 5px; background: var(--bg, #f8fafc);
  color: var(--ink3, #64748b); cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.tp-drop-ends-btn:hover { background: var(--surf, #fff); color: var(--ink); }

.tp-drop-ends-btn.is-active {
  background: var(--c-blue, #3b82f6); color: #fff;
  border-color: var(--c-blue, #3b82f6);
}

.tp-drop-ends-after-row,
.tp-drop-ends-on-row {
  display: flex; align-items: center; gap: 6px;
}

.tp-drop-ends-unit {
  font-size: 12px; color: var(--ink3, #64748b); white-space: nowrap;
}

/* Task create modal — custom recurring row */
.wk-recur-custom-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 8px 12px;
  background: var(--bg, #f8fafc); border-radius: 8px;
  border: 1px solid var(--border-s, #e2e8f0);
}

.wk-recur-label { font-size: 12px; color: var(--ink3, #6b7280); font-weight: 600; white-space: nowrap; }

.wk-recur-num {
  width: 52px; padding: 5px 8px; border: 1px solid var(--border-s, #e2e8f0);
  border-radius: 6px; font-size: 13px; font-family: var(--f);
  color: var(--ink); background: var(--surf, #fff); outline: none;
  -moz-appearance: textfield;
}

.wk-recur-num::-webkit-inner-spin-button,
.wk-recur-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.wk-recur-num:focus { border-color: var(--c-blue); }

.wk-recur-unit {
  padding: 5px 8px; border: 1px solid var(--border-s, #e2e8f0);
  border-radius: 6px; font-size: 12px; font-family: var(--f);
  color: var(--ink); background: var(--surf, #fff); outline: none; cursor: pointer;
}

.wk-recur-unit:focus { border-color: var(--c-blue); }

/* Task create modal — description field */
.wk-field--desc { margin-top: 8px; }

.wk-field--desc textarea {
  width: 100%; min-height: 48px; max-height: 100px; resize: vertical;
  border: 1px solid var(--border-s); border-radius: 8px;
  font-family: var(--f); font-size: 13px; color: var(--ink);
  padding: 8px 12px; outline: none; background: var(--bg, #f8fafc);
  transition: border-color .15s ease;
}

.wk-field--desc textarea:focus { border-color: var(--c-blue); }

/* Popover — description textarea */
.qa-pop-desc {
  width: 100%; min-height: 60px; max-height: 120px; resize: vertical;
  border: 1px solid var(--border-s); border-radius: 6px;
  font-family: var(--f); font-size: 12px; color: var(--ink);
  padding: 8px 10px; outline: none; background: var(--bg, #f8fafc);
  transition: border-color .15s ease;
}

.qa-pop-desc:focus { border-color: var(--c-blue); }

.qa-pop-desc::placeholder { color: var(--ink4); }

/* Popover — goal multi-select */
.qa-pop-goal-search {
  width: 100%; border: 1px solid var(--border-s); border-radius: 6px;
  font-family: var(--f); font-size: 12px; color: var(--ink);
  padding: 7px 10px; outline: none; background: var(--bg, #f8fafc);
  margin-bottom: 6px; transition: border-color .15s ease;
}

.qa-pop-goal-search:focus { border-color: var(--c-blue); }

.qa-pop-goal-search::placeholder { color: var(--ink4); }

.qa-pop-goal-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }

.qa-pop-goal-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink);
  transition: background .12s ease;
}

.qa-pop-goal-item:hover { background: var(--bg, #f1f5f9); }

.qa-pop-goal-item.is-checked { background: var(--c-blue-bg); }

.qa-pop-goal-item input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.qa-pop-goal-check {
  width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--border, #cbd5e1);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease; background: #fff;
}

.qa-pop-goal-check svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3; opacity: 0; transition: opacity .12s ease; }

.qa-pop-goal-item.is-checked .qa-pop-goal-check {
  background: var(--c-blue, #3b82f6); border-color: var(--c-blue, #3b82f6);
}

.qa-pop-goal-item.is-checked .qa-pop-goal-check svg { opacity: 1; }

.qa-pop-goal-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qa-pop-goal-empty { font-size: 11px; color: var(--ink4); padding: 8px; text-align: center; }

.qa-pop-goal-done { padding-top: 6px; border-top: 1px solid var(--border-s, #e2e8f0); margin-top: 4px; text-align: right; }

.qa-pop-goal-done-btn {
  padding: 4px 14px; font-size: 11px; font-weight: 700; font-family: var(--f);
  border: none; border-radius: 5px; cursor: pointer;
  background: var(--c-blue, #3b82f6); color: #fff; transition: opacity .12s ease;
}

.qa-pop-goal-done-btn:hover { opacity: .85; }

/* Popover — due date calendar */
.qa-cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}

.qa-cal-arrow {
  width: 24px; height: 24px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  font-size: 16px; font-weight: 700; color: var(--ink3);
  transition: background .12s, color .12s;
}

.qa-cal-arrow:hover { background: var(--bg, #f1f5f9); color: var(--ink); }

.qa-cal-month { font-size: 12px; font-weight: 700; color: var(--ink); }

.qa-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}

.qa-cal-hdr {
  font-size: 9px; font-weight: 700; color: var(--ink4);
  text-align: center; padding: 2px 0; text-transform: uppercase;
}

.qa-cal-day {
  width: 30px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--ink2); border-radius: 6px;
  cursor: pointer; transition: background .12s, color .12s;
}

.qa-cal-day:hover { background: var(--bg, #f1f5f9); }

.qa-cal-day.is-today { font-weight: 800; color: var(--c-blue); }

.qa-cal-day.is-selected { background: var(--c-blue, #3b82f6); color: #fff; }

.qa-cal-day.qa-cal-blank { cursor: default; }

.qa-cal-foot {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-s, #e2e8f0);
}

.qa-cal-text {
  flex: 1; border: 1px solid var(--border-s); border-radius: 6px;
  font-family: var(--f); font-size: 11px; color: var(--ink);
  padding: 5px 8px; outline: none; background: var(--bg, #f8fafc);
  transition: border-color .15s;
}

.qa-cal-text:focus { border-color: var(--c-blue); }

.qa-cal-text::placeholder { color: var(--ink4); }

.qa-cal-clear {
  padding: 4px 8px; font-size: 10px; font-weight: 700; font-family: var(--f);
  border: none; border-radius: 5px; cursor: pointer;
  background: var(--bg, #f1f5f9); color: var(--ink3); transition: background .12s;
}

.qa-cal-clear:hover { background: var(--border-s); color: var(--ink); }

/* Quick-add tag pills (hidden — replaced by badges) */
.qa-tag-row { display: none; }

/* When bar is focused, show options */
.mw-quick-add .qa-options { opacity: 0; pointer-events: none; transition: opacity .2s ease; }

.mw-quick-add:focus-within .qa-options,
.mw-quick-add:hover .qa-options,
.mw-quick-add.has-tags .qa-options { opacity: 1; pointer-events: auto; }

/* Task workspace */
.mw-task-workspace {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}

.mw-task-workspace:empty::after {
  content: 'No tasks in this view'; display: block; text-align: center;
  padding: 48px 0; color: var(--ink3); font-size: 12px;
}

/* ── Task card (vault-quality, modern) ── */
.mw-task-card {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 0; padding: 0; cursor: pointer;
  min-height: 68px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--_pri, #94a3b8) 4%, var(--surf)), var(--surf) 60%, color-mix(in srgb, var(--_pri, #94a3b8) 2%, var(--surf)));
  border: 1px solid var(--border);
  border-radius: var(--radius, 16px);
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
  transition: all .3s cubic-bezier(.22,1,.36,1);
  overflow: hidden; position: relative;
}

.mw-task-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--_pri, #94a3b8), color-mix(in srgb, var(--_pri, #94a3b8) 50%, #a78bfa));
  border-radius: var(--radius) var(--radius) 0 0;
  opacity: .85; transition: opacity .2s, height .2s;
}

.mw-task-card:hover::before { height: 4px; opacity: 1; }

.mw-task-card:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  transform: translateY(-3px) scale(1.002);
  border-color: color-mix(in srgb, var(--_pri, #94a3b8) 25%, var(--border));
}

.mw-task-card:active { transform: translateY(-1px) scale(.998); }

.mw-task-card.is-done { opacity: .5; }

.mw-task-card.is-done:hover { opacity: .7; }

.mw-task-card.is-overdue {
  border-color: color-mix(in srgb, var(--c-red) 45%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-red) 9%, var(--surf)), var(--surf) 72%);
  box-shadow: inset 4px 0 0 var(--c-red, #ef4444), 0 1px 3px rgba(239,68,68,.10), 0 1px 2px rgba(0,0,0,.06);
}

.mw-task-card.is-overdue:hover {
  border-color: color-mix(in srgb, var(--c-red) 55%, var(--border));
  box-shadow: inset 4px 0 0 var(--c-red, #ef4444), 0 8px 25px rgba(239,68,68,.16), 0 2px 8px rgba(0,0,0,.05);
}

.mw-task-card.is-overdue::before { background: linear-gradient(90deg, #ef4444, #f97316); opacity: 1; height: 4px; }

/* Critical: 8+ days overdue — deeper wash, darker rail, stronger border.
   Live tasks only: severity outranks .is-done on specificity, so without the
   :not() a task you just finished keeps the full red-alert treatment. */
.mw-task-card.is-overdue.mw-od-crit:not(.is-done) {
  border-color: color-mix(in srgb, var(--c-red) 62%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-red) 15%, var(--surf)), var(--surf) 66%);
  box-shadow: inset 5px 0 0 #b91c1c, 0 1px 4px rgba(185,28,28,.16), 0 1px 2px rgba(0,0,0,.06);
}

.mw-task-card.is-overdue.mw-od-crit:not(.is-done):hover {
  box-shadow: inset 5px 0 0 #b91c1c, 0 8px 26px rgba(185,28,28,.22), 0 2px 8px rgba(0,0,0,.06);
}

/* Due-soon (≤2 days out) — milder amber flag */
.mw-task-card[data-status="due-soon"]:not(.is-done) {
  border-color: color-mix(in srgb, var(--c-yellow, #f59e0b) 38%, var(--border));
  box-shadow: inset 4px 0 0 var(--c-yellow, #f59e0b), 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.06);
}

.mw-task-card[data-status="due-soon"]:not(.is-done):hover {
  box-shadow: inset 4px 0 0 var(--c-yellow, #f59e0b), 0 8px 25px rgba(245,158,11,.14), 0 2px 8px rgba(0,0,0,.05);
}

.mw-task-card[data-status="due-soon"]:not(.is-done) .mw-pill--reldue {
  background: var(--c-yellow-bg, #fef3c7); color: #b45309;
}

/* Priority accent strip — replaced by ::before top bar */
.mw-card-accent { display: none; }

/* Left section: check + content */
.mw-card-left {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0; padding: 16px 0 16px 16px;
}

/* Content area */
.mw-card-content { flex: 1; min-width: 0; }

.mw-task-card-title {
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  margin-bottom: 3px; line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .3s, text-decoration-color .6s;
  letter-spacing: -.01em;
}

.mw-task-card.is-done .mw-task-card-title {
  text-decoration: line-through;
  text-decoration-color: var(--c-green);
  color: var(--ink3);
}

/* Description snippet */
.mw-card-desc {
  font-size: 11px; font-weight: 500; color: var(--ink4);
  line-height: 1.35; margin-bottom: 7px;
  white-space: nowrap; overflow: hidden;
  max-width: 420px; position: relative;
  -webkit-mask-image: linear-gradient(to right, #000 80%, transparent);
  mask-image: linear-gradient(to right, #000 80%, transparent);
}

/* Meta pills row */
.mw-card-meta { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 2px; }

.mw-card-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  white-space: nowrap; letter-spacing: .15px;
  transition: transform .12s, box-shadow .12s;
}

.mw-card-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.06); }

.mw-card-pill svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

/* Pills that point at a real thing (work stream, client, department, tag)
   are clickable and open/filter to that thing. */
.mw-card-pill.mw-pill--nav { cursor: pointer; }

.mw-card-pill.mw-pill--nav:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); text-decoration: underline; text-underline-offset: 2px; }

/* A lone meta pill owns the whole row — show its full label instead of
   truncating. Only a crowded row keeps the per-pill max-width. It still
   ellipsizes at the row edge if the label is longer than the whole card. */
.mw-card-meta--solo .mw-card-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.mw-pill--high { background: var(--c-red-bg, #fff1f1); color: var(--c-red, #ef4444); }

.mw-pill--medium { background: var(--c-yellow-bg, #fef3c7); color: var(--c-yellow, #f59e0b); }

.mw-pill--low { background: var(--c-green-bg, #defbe6); color: var(--c-green, #16a34a); }

.mw-pill--goal { background: var(--c-purple-bg, #f5f3ff); color: var(--c-purple, #7c3aed); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

/* In the task popup's preview strip there's plenty of width — let the work-stream
   tag run longer so its name fits instead of truncating to "Role-Based Interface D…". */
#tpCardStrip .mw-pill--goal { max-width: 340px; }

/* text-overflow needs a block-ish box to act on. The pill itself is an
   inline-flex row (icon + label), so the ellipsis declared above never
   applied — a capped pill hard-CLIPPED its name mid-word with no "…" at all.
   Give the label its own box and the ellipsis works everywhere. */
.mw-card-pill .mw-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* On a DELIVERABLE card the meta row is usually near-empty and the card is
   wide, so a flat 140px cap shortened work-stream names for no reason —
   "Ryan Onboarding And Training" read as "Ryan Onboarding And T" on a row with
   nothing else in it. Let the tag take whatever the row isn't using: it keeps
   its natural width while there's space, wraps to its own line before it
   shortens (the row already wraps), and only ellipsizes when the name is
   genuinely wider than the card. min-width:0 is what lets a flex item shrink
   past its content at all. */
.wk-deliv-card .mw-card-meta .mw-pill--goal { max-width: 100%; min-width: 0; }

.mw-pill--subtasks { background: var(--c-blue-bg, #edf5ff); color: var(--c-blue, #0f62fe); }

.mw-pill--time { background: var(--c-teal-bg, #f0fdfa); color: var(--c-teal, #0d9488); }

/* Repeat identity. The cadence pill reads as a schedule, not a status — an
   outlined indigo chip that sits quietly next to the coloured state pills, so a
   column of same-titled occurrences is finally tellable apart. `is-occurrence`
   (one instance out of a series) is the muted variant of the same chip. */
.mw-pill--recur {
  background: #fff; color: #4f46e5; border: 1px solid #c7d2fe;
  padding: 2px 8px; border-radius: 6px; letter-spacing: .2px;
}

.mw-pill--recur.is-occurrence { color: #64748b; border-color: var(--border-s, #e2e8f0); background: #f8fafc; }

/* Whole-card cue: a repeating task's top accent bar goes DASHED. Same vocabulary
   the calendar already uses for projected occurrences, it costs no space, and it
   means the repeating rows are spottable while scanning a column without
   reading a single pill. */
.mw-task-card.is-repeating::before {
  background: repeating-linear-gradient(90deg,
    var(--_pri, #94a3b8) 0 10px, transparent 10px 16px);
}

.mw-pill--status { text-transform: uppercase; letter-spacing: .3px; font-size: 9px; font-weight: 800; padding: 3px 10px; border-radius: 20px; }

/* Priority pill in card-right — compact badge */
.mw-pill--pri { text-transform: uppercase; letter-spacing: .3px; font-size: 9px; font-weight: 800; padding: 3px 10px; border-radius: 20px; flex-shrink: 0; }

/* Progress bar — hidden on front card */
.mw-card-progress { display: none; }

.mw-card-progress-fill { height: 100%; border-radius: 3px; }

/* Subtask donut — hidden on front card */
.mw-donut { display: none; }

.mw-donut-bg { fill: none; stroke: var(--border-s); stroke-width: 3; }

.mw-donut-fill { fill: none; stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .5s cubic-bezier(.22,1,.36,1); }

/* Right section: due + status + avatar + chevron */
.mw-card-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 16px 16px 16px 12px;
}

/* Thin separator between content and right section */
.mw-card-right::before {
  content: ''; width: 1px; align-self: stretch;
  background: var(--border-s); margin-right: 4px; flex-shrink: 0;
  border-radius: 1px;
}

.mw-card-due {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--ink3); white-space: nowrap;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(0,0,0,.025);
}

.mw-card-due svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; opacity: .7; }

.mw-card-due.is-overdue { color: var(--c-red); font-weight: 700; background: var(--c-red-bg, rgba(239,68,68,.06)); }

.mw-card-due.is-overdue svg { opacity: 1; }

.mw-card-due--none { color: var(--ink4); font-style: italic; opacity: .5; }

/* ── A face never shows a hole ─────────────────────────────────────────
   Layering, and nothing else — the size, shape and border stay with whatever
   class the caller already used (.mw-card-avatar, .tp-assignee-pill-av, …), so
   adding .wk-facefill changes only WHEN the photo appears, never how it looks.

   The initials are the element's own text and its coloured background is its
   own background; the photo is absolutely positioned over both and covers them
   the instant it decodes. That is the whole trick: there is no state where the
   element is empty, so a photo still in flight (or one that 404s and removes
   itself) leaves the right person's initials on screen instead of a grey disc.
   Built by WkFace.html() — see wk-face.js. */
.wk-facefill { position: relative; overflow: hidden; }

.wk-facefill > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border-radius: inherit;
}

/* Assignee avatar */
.mw-card-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
  border: 2px solid rgba(255,255,255,.85);
}

.mw-task-card:hover .mw-card-avatar { transform: scale(1.12); box-shadow: 0 3px 10px rgba(0,0,0,.15); }

.mw-card-avatar--empty { background: var(--ink5, #e0e0e0); color: var(--ink3); border: 2px dashed var(--border); box-shadow: none; }

.mw-card-avatar--empty svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.mw-card-avatar--img { background: transparent; padding: 0; overflow: hidden; }

.mw-card-avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

.mw-card-assignee-label { font-size: 10px; font-weight: 600; color: var(--ink3); white-space: nowrap; max-width: 60px; overflow: hidden; text-overflow: ellipsis; }

/* ── Completion attribution ─────────────────────────────────────────
   Who marked the task complete. Two surfaces on the same card: a meta pill
   carrying name + date for scanning a long list, and a badged face in the
   right rail that reads at a glance. `.is-other` (amber) means the person who
   closed it is NOT an assignee — the case worth a second look.
   Both are filled rather than tinted: .mw-task-card.is-done sets opacity on the
   CARD, which children cannot opt out of, so a soft pill would wash out at .5
   exactly where the attribution matters most. */
.mw-card-pill.mw-pill--doneby {
  background: var(--c-green, #16a34a); color: #fff;
  gap: 4px; padding-left: 6px; max-width: 190px; overflow: hidden;
}

.mw-card-pill.mw-pill--doneby.is-other { background: #b45309; color: #fff; }

.mw-card-pill.mw-pill--doneby svg { stroke-width: 3.5; }

.mw-doneby-face {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 800; letter-spacing: 0;
  color: #fff; text-transform: uppercase;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.9);
}

.mw-doneby-face--img { background: transparent; overflow: hidden; }

.mw-doneby-face--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

.mw-card-doneby { position: relative; flex-shrink: 0; line-height: 0; cursor: pointer; }

.mw-card-doneby-av {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  color: #fff; border: 2px solid var(--c-green, #16a34a);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}

.mw-card-doneby.is-other .mw-card-doneby-av { border-color: var(--c-yellow, #f59e0b); }

.mw-card-doneby-av--img { background: transparent; overflow: hidden; }

.mw-card-doneby-av--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

.mw-card-doneby-tick {
  position: absolute; right: -3px; bottom: -3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-green, #16a34a); border: 1.5px solid var(--card, #fff);
  display: flex; align-items: center; justify-content: center;
}

.mw-card-doneby.is-other .mw-card-doneby-tick { background: var(--c-yellow, #f59e0b); }

.mw-card-doneby-tick svg { width: 8px; height: 8px; stroke: #fff; fill: none; stroke-width: 4; }

.mw-task-card:hover .mw-card-doneby-av { transform: scale(1.12); box-shadow: 0 3px 10px rgba(0,0,0,.15); }

/* Multi-assignee avatar stack — overlapping circles, like Slack/Linear/Asana.
   Each avatar is a full circle with a white ring for separation; subsequent
   avatars overlap by ~30% so the row stays compact. >5 collapses the trailing
   cells into a "+N" circle. The legacy --g1/g2/g3 modifier classes are kept
   for back-compat with the renderer but no longer drive layout. */
.mw-card-avatar-stack {
  display: inline-flex; align-items: center;
  height: 30px; flex-shrink: 0;
  isolation: isolate;
}

.mw-card-avatar-stack__av {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; text-transform: uppercase;
  letter-spacing: .03em; font-size: 9.5px;
  overflow: hidden; box-sizing: border-box;
  border: 2px solid var(--surf, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
  transition: transform .15s ease, filter .15s ease;
}

.mw-card-avatar-stack__av + .mw-card-avatar-stack__av { margin-left: -8px; }

/* Stagger z-index so the leftmost avatar sits on top */
.mw-card-avatar-stack__av:nth-child(1) { z-index: 9; }

.mw-card-avatar-stack__av:nth-child(2) { z-index: 8; }

.mw-card-avatar-stack__av:nth-child(3) { z-index: 7; }

.mw-card-avatar-stack__av:nth-child(4) { z-index: 6; }

.mw-card-avatar-stack__av:nth-child(5) { z-index: 5; }

.mw-card-avatar-stack__av:nth-child(6) { z-index: 4; }

.mw-card-avatar-stack__av:nth-child(7) { z-index: 3; }

.mw-card-avatar-stack__av:nth-child(8) { z-index: 2; }

.mw-card-avatar-stack__av:nth-child(9) { z-index: 1; }

.mw-card-avatar-stack:hover .mw-card-avatar-stack__av { filter: brightness(1.04); }

.mw-card-avatar-stack:hover .mw-card-avatar-stack__av:hover { transform: translateY(-1px); z-index: 20; }

.mw-card-avatar-stack__av--img { background: transparent; padding: 0; }

.mw-card-avatar-stack__av--img img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
}

.mw-card-avatar-stack__av--more {
  background: #e2e8f0; color: #475569;
  font-weight: 800;
}

/* Chevron */
.mw-card-chevron {
  width: 16px; height: 16px; stroke: var(--ink4); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; opacity: 0; transition: opacity .2s, transform .2s;
}

.mw-task-card:hover .mw-card-chevron { opacity: .6; transform: translateX(2px); }

/* ── Cross-off animation ── */
@keyframes mwCheckPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes mwStrikeReveal {
  from { text-decoration-color: transparent; }
  to { text-decoration-color: var(--c-green); }
}

.mw-task-card.is-crossing-off .wk-task-check {
  animation: mwCheckPop .35s cubic-bezier(.22,1,.36,1);
}

.mw-task-card.is-crossing-off .mw-task-card-title {
  text-decoration: line-through; text-decoration-color: transparent;
  animation: mwStrikeReveal .5s .15s ease forwards;
  color: var(--ink3);
}

/* The card settles into its done state in place. It used to fade to .25 and
   collapse to zero height, and then render() put it straight back — a
   completed task flickered out and popped in, which is the single loudest
   thing that can happen on the page. Now it just lands. */
.mw-task-card.is-crossing-off {
  animation: mwDoneSettle .6s cubic-bezier(.22,1,.36,1);
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}

@keyframes mwDoneSettle {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-green) 40%, transparent); }
  60%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-green) 0%, transparent); }
  100% { box-shadow: none; }
}

/* One green wash across the card — the "captured" beat. Fires once on the
   transition and is gone; nothing about the resting state is animated. */
@keyframes mwDoneWash {
  from { transform: translateX(-100%); opacity: .6; }
  to   { transform: translateX(100%);  opacity: 0; }
}

.mw-task-card.is-crossing-off::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-green) 24%, transparent), transparent);
  animation: mwDoneWash .55s cubic-bezier(.22,1,.36,1) forwards;
}

/* ── Done tasks: settled, not dimmed ──
   A checked-off card kept every affordance that says "live option" — the
   priority-tinted gradient, the colour-coded accent bar, the drop shadow,
   the hover lift — and got opacity:.5 dropped on top of the lot. That reads
   as a task you still have to parse: same shape as its neighbours, only
   harder to read. So invert it. Full opacity, because the text has to stay
   legible; strip the affordances instead. What makes the eye keep checking a
   card is that it still looks actionable, not that it's too bright. */
.mw-task-card.is-done,
.mw-task-card.is-done:hover { opacity: 1; }

.mw-task-card.is-done {
  /* Flat and slightly recessed — filed away rather than faded out. */
  background: color-mix(in srgb, var(--ink) 2.5%, var(--surf));
  border-color: var(--border);
  box-shadow: none;
}

/* Accent bar loses its status colour: no red/amber/green edge on finished
   work. The [data-status] is carried purely for specificity — the card
   personality block further down sets a green bar via
   `.mw-task-card[data-status="done"]::before` at the same weight as a plain
   `.is-done::before`, and being later in the file it would otherwise win.
   A bright green rule along the top edge is the loudest thing in the row,
   which is the exact opposite of what a finished task should be doing. */
.mw-task-card.is-done[data-status]::before,
.mw-task-card.is-done[data-status]:hover::before {
  background: var(--border, #e0e0e0);
  height: 3px; opacity: 1;
}

/* No lift. The hover affordance is most of what makes a done card read as
   something you could still act on; a quiet wash keeps it obviously openable
   without advertising itself while you scan past. */
.mw-task-card.is-done:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  border-color: var(--border);
  background: var(--border-s, #f4f4f4);
}

.mw-task-card.is-done .mw-task-card-title {
  /* --ink2 not --ink3: struck through and quiet, but still readable at a
     glance, which is the whole point of leaving it on screen. */
  color: var(--ink2, #525252);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--c-green) 55%, transparent);
}

/* Meta pills stop competing — colour drains out, the text stays readable.
   The done-by pill is exempt: who finished it is the one thing a completed
   card is still saying, so it keeps its colour. A red overdue date is pure
   noise once the work is done, so that goes quiet with the rest. */
.mw-task-card.is-done .mw-card-pill:not(.mw-pill--doneby) { filter: grayscale(1); opacity: .85; }

.mw-task-card.is-done .mw-card-due.is-overdue {
  color: var(--ink3); font-weight: 600;
  background: transparent;  /* clears the red-tinted plate from .mw-card-due.is-overdue */
}

/* The overdue pill is the one place grayscale() backfires: it's a solid red
   fill, so draining the colour leaves a heavy charcoal slab that pulls the
   eye harder than the red did. Restyle it flat instead of filtering it. */
.mw-task-card.is-done .mw-pill--reldue.is-overdue {
  background: var(--border-s, #f4f4f4);
  color: var(--ink3, #8d8d8d);
  box-shadow: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
.mw-task-card.is-crossing-off,
  .mw-task-card.is-crossing-off::after,
  .mw-task-card.is-crossing-off .wk-task-check,
  .mw-task-card.is-crossing-off .mw-task-card-title { animation: none; }
}

/* ── Completion celebration layer (window.WkCelebrate) ──
   One transient, pointer-transparent overlay that every "you finished
   something" flourish draws into — the confetti puff and the ripple that
   leaves the control you clicked. Created on the first burst and removed once
   the last bit lands, so nothing is sitting over the page the rest of the
   time. Above the toast tier (2000600) because completions happen inside
   modals and popups; harmless at the top because it can't be clicked.
   All motion is driven from JS via Web Animations, so there is nothing to
   disable here for reduced-motion — WkCelebrate.at() returns early instead. */
.wk-fx-layer {
  position: fixed; inset: 0; z-index: 2000700;
  pointer-events: none; overflow: hidden;
  contain: layout style paint;
}

.wk-fx-bit {
  position: absolute; display: block;
  will-change: transform, opacity;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

/* The "satisfying click" — a soft ring that leaves the checkbox. Green, thin,
   and gone in under half a second. */
.wk-fx-ring {
  position: absolute; display: block;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--c-green, #16a34a);
  will-change: transform, opacity;
}

/* The tick WkCelebrate.tick() paints into the box you just pressed draws itself
   on rather than appearing whole — the beat that makes the click land. Path
   length of the checkmark polyline is ~23 units, so 24 covers it. */
@keyframes wkTickDraw {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}

.wk-task-check.wk-fx-ticked svg {
  stroke-dasharray: 24;
  animation: wkTickDraw .26s cubic-bezier(.5,0,.4,1) both;
}

.wk-task-check.wk-fx-ticked { animation: mwCheckPop .3s cubic-bezier(.22,1,.36,1); }

@media (prefers-reduced-motion: reduce) {
.wk-task-check.wk-fx-ticked,
  .wk-task-check.wk-fx-ticked svg { animation: none; stroke-dasharray: none; }
}

/* ── Subtask progress bar ── */
.mw-card-subtask-bar {
  height: 3px; border-radius: 3px; background: var(--border-s, #e5e7eb);
  margin: 4px 0 3px; overflow: hidden; max-width: 200px;
}

.mw-card-subtask-fill {
  height: 100%; border-radius: 3px; min-width: 2px;
  background: linear-gradient(90deg, var(--c-green, #16a34a), color-mix(in srgb, var(--c-green, #16a34a) 70%, #3b82f6));
  transition: width .4s cubic-bezier(.22,1,.36,1);
}

/* ── Tag pills ── */
.mw-pill--tag {
  font-size: 9px !important; font-weight: 700 !important;
  letter-spacing: .2px; border-radius: 12px !important;
  padding: 2px 8px !important;
}

/* Legacy compat (keep old selectors working for static cards) */
.mw-task-card-body { flex: 1; min-width: 0; cursor: pointer; }

.mw-task-card-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.mw-task-card-owner { font-size: 10px; color: var(--ink2-4); font-weight: 600; }

.mw-task-card-due { font-size: 10px; color: var(--ink3); font-weight: 600; }

.mw-task-card-due.is-overdue { color: var(--c-red); font-weight: 700; }

.mw-task-card-goal {
  font-size: 9px; font-weight: 600; color: var(--c-yellow); background: var(--c-yellow-bg);
  padding: 1px 7px; border-radius: 4px; white-space: nowrap;
}

.mw-task-card-status {
  display: none;
}

.mw-status--in-progress { background: var(--c-yellow-bg); color: var(--c-yellow); }

.mw-status--waiting { background: var(--c-teal-bg); color: var(--c-teal); }

.mw-status--todo { background: var(--border-s); color: var(--ink3); }

.mw-status--done { background: var(--c-green-bg); color: var(--c-green); }

.mw-status--blocked { background: var(--c-red-bg); color: var(--c-red); }

.mw-status--due-soon { background: var(--c-yellow-bg, #fef3c7); color: #d97706; }

.mw-status--overdue { background: var(--c-red-bg, #fff1f1); color: var(--c-red, #da1e28); }

/* ── Card personality — status-based top bar color (no bg tint) ── */
.mw-task-card[data-status="blocked"]::before { background: var(--c-red); }

.mw-task-card.is-overdue:not(.is-done)::before { background: var(--c-red); }

.mw-task-card[data-status="in-progress"]::before { background: var(--c-yellow); }

.mw-task-card[data-status="waiting"]::before { background: var(--c-teal); }

.mw-task-card[data-status="done"]::before { background: var(--c-green); }

/* High priority emphasis */
.mw-task-card[data-priority="high"]:not(.is-done) { border-color: color-mix(in srgb, var(--c-red) 20%, var(--border)); }

/* Relative due pill */
.mw-pill--reldue { background: var(--c-blue-bg, #edf5ff); color: var(--c-blue, #0f62fe); font-weight: 800; font-size: 9px; letter-spacing: .2px; }

.mw-pill--reldue.is-overdue {
  background: var(--c-red, #da1e28); color: #fff; font-weight: 800;
  box-shadow: 0 1px 3px rgba(218,30,40,.30);
}

.mw-pill--reldue.is-overdue::before { content: '\26A0'; margin-right: 3px; font-weight: 900; }

/* Live criticals only — see the .is-done note above. A finished task has no
   business still wearing a solid-red date badge. */
.mw-od-crit:not(.is-done) .mw-pill--reldue.is-overdue { background: #b91c1c; }

/* Critical cards: make the right-side due-date badge solid red too */
.mw-od-crit:not(.is-done) .mw-card-due.is-overdue { background: var(--c-red, #da1e28); color: #fff; }

.mw-od-crit:not(.is-done) .mw-card-due.is-overdue svg { opacity: 1; }

/* Status pill */
.mw-pill--status { background: var(--c-blue-bg, #edf5ff); color: var(--c-blue, #0f62fe); font-weight: 700; font-size: 9px; letter-spacing: .2px; }

.mw-pill--status-blocked, .mw-pill--status-overdue { background: var(--c-red-bg, #fff1f1); color: var(--c-red, #ef4444); }

.mw-pill--status-progress, .mw-pill--status-in-progress { background: var(--c-blue-bg, #e6f3ff); color: var(--c-blue, #004b7c); }

.mw-pill--status-waiting, .mw-pill--status-due-soon { background: var(--c-yellow-bg, #fef3c7); color: var(--c-yellow, #f59e0b); }

/* Assignee name label */
.mw-card-assignee-label {
  font-size: 10px; font-weight: 600; color: var(--ink3); white-space: nowrap;
  max-width: 70px; overflow: hidden; text-overflow: ellipsis;
}

/* ── Quick-delete button on task cards ── */
.mw-card-del {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; border-radius: 6px;
  border: none; background: transparent; color: #94a3b8;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, background .12s, color .12s;
  z-index: 2; padding: 0;
}

.mw-task-card:hover .mw-card-del { opacity: 1; }

.mw-card-del:hover { background: #fef2f2; color: #ef4444; }

.mw-card-del svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

.mw-card-del.mw-del-confirm {
  opacity: 1; width: auto; background: #ef4444; color: #fff;
  border-radius: 6px; padding: 2px 8px;
}

.mw-del-confirm-text { font-size: 10px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════
   DELIVERABLE CARD  (.wk-deliv-card)
   A deliverable is what the client RECEIVES — an output, not a to-do.
   It rides on .mw-task-card so every list keeps searching/counting/
   selecting it, but the silhouette is deliberately its own, the way
   work streams, projects and goals each have theirs:
     · squared-off left edge + solid rail  → reads as a document, not a pill
     · output glyph where a task has its checkbox (nothing to tick off)
     · "Deliverable" eyebrow instead of a priority bar
     · lifecycle stepper along the bottom (Proposed → Accepted)
     · stage chip in the slot where a task shows priority
   --_dv is the stage colour, set inline by buildDeliverableCard().
   ══════════════════════════════════════════════════════════════════ */
.mw-task-card.wk-deliv-card {
  --_pri: var(--_dv, #6366f1);
  min-height: 88px; align-items: stretch;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--_dv, #6366f1) 9%, var(--surf)), var(--surf) 58%),
    repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--_dv, #6366f1) 4%, transparent) 7px 8px);
  border: 1px solid color-mix(in srgb, var(--_dv, #6366f1) 28%, var(--border));
  /* Squared left, rounded right — a sheet of paper against a rail. */
  border-radius: 4px var(--radius, 16px) var(--radius, 16px) 4px;
  box-shadow: inset 4px 0 0 var(--_dv, #6366f1), 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.05);
}

/* No priority top-bar — the rail carries the identity instead. */
.mw-task-card.wk-deliv-card::before { display: none; }

.mw-task-card.wk-deliv-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--_dv, #6366f1) 46%, var(--border));
  box-shadow: inset 4px 0 0 var(--_dv, #6366f1), 0 10px 26px color-mix(in srgb, var(--_dv, #6366f1) 20%, transparent), 0 2px 8px rgba(0,0,0,.05);
}

.mw-task-card.wk-deliv-card .mw-card-left { padding: 15px 0 14px 18px; align-items: flex-start; }

.mw-task-card.wk-deliv-card .mw-card-right { align-items: center; }

/* A shipped deliverable is a win, never a faded-out done row. */
.mw-task-card.wk-deliv-card .mw-task-card-title {
  font-size: 14px; letter-spacing: -.012em; text-decoration: none; color: var(--ink);
}

.mw-task-card.wk-deliv-card.is-pastdue {
  border-color: color-mix(in srgb, var(--c-red) 42%, var(--border));
  box-shadow: inset 4px 0 0 var(--c-red, #ef4444), 0 1px 3px rgba(239,68,68,.10);
}

.mw-task-card.wk-deliv-card.is-pastdue:hover {
  box-shadow: inset 4px 0 0 var(--c-red, #ef4444), 0 10px 26px rgba(239,68,68,.18);
}

/* Output glyph — a folded sheet, sized and shaped unlike any task control */
.wk-deliv-glyph {
  position: relative; flex-shrink: 0; margin-top: 2px;
  width: 34px; height: 40px; border-radius: 4px 11px 4px 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--_dv, #6366f1);
  background: linear-gradient(160deg, color-mix(in srgb, var(--_dv, #6366f1) 26%, var(--surf)), color-mix(in srgb, var(--_dv, #6366f1) 11%, var(--surf)));
  border: 1px solid color-mix(in srgb, var(--_dv, #6366f1) 45%, var(--border));
  box-shadow: 0 1px 3px color-mix(in srgb, var(--_dv, #6366f1) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .2s cubic-bezier(.22,1,.36,1);
}

.wk-deliv-card:hover .wk-deliv-glyph { transform: translateY(-1px) rotate(-2deg); }

.wk-deliv-glyph svg { width: 17px; height: 17px; }

/* ── Front cover ───────────────────────────────────────────
   The uploaded screenshot, as a leading tile on the card and the list row —
   the same read as a training material's thumbnail. zoom-in cursor because
   clicking it opens the full picture (WkCoverView), not the record. */
.wk-deliv-cover {
  flex-shrink: 0; margin-top: 2px; padding: 0; cursor: zoom-in; display: block;
  width: 58px; height: 64px; border-radius: 8px; overflow: hidden;
  background: color-mix(in srgb, var(--_dv, #6366f1) 8%, var(--surf));
  border: 1px solid color-mix(in srgb, var(--_dv, #6366f1) 34%, var(--border));
  box-shadow: 0 1px 3px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}

.wk-deliv-cover:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 4px 12px rgba(15,23,42,.2); }

.wk-deliv-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* With a picture present the folded-sheet glyph steps down to a marker, so the
   row keeps ONE focal point — but it stays, because it (and its accepted seal)
   is what says "deliverable, not task". */
.wk-deliv-card.has-cover .wk-deliv-glyph { width: 22px; height: 26px; border-radius: 3px 7px 3px 3px; }

.wk-deliv-card.has-cover .wk-deliv-glyph svg { width: 11px; height: 11px; }

.wk-deliv-card.has-cover .wk-deliv-seal { width: 13px; height: 13px; right: -4px; bottom: -4px; }

.wk-deliv-card.has-cover .wk-deliv-seal svg { width: 8px; height: 8px; }

/* ── Cover viewer (full picture) ───────────────────────── */
.wk-coverview {
  position: fixed; inset: 0; z-index: 2000800;
  background: rgba(2, 6, 23, .86); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 24px 24px;
  animation: wkCoverIn .16s ease-out;
}

@keyframes wkCoverIn { from { opacity: 0; } to { opacity: 1; } }

.wk-coverview-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 48px;
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
  color: #e2e8f0; font-size: 13px; font-weight: 600;
}

.wk-coverview-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wk-coverview-open { color: #93c5fd; font-size: 12px; font-weight: 600; text-decoration: none; flex-shrink: 0; }

.wk-coverview-open:hover { text-decoration: underline; }

.wk-coverview-x {
  background: transparent; border: 0; color: #e2e8f0; cursor: pointer;
  padding: 6px; border-radius: 6px; display: flex; flex-shrink: 0;
}

.wk-coverview-x:hover { background: rgba(255, 255, 255, .14); }

.wk-coverview-img {
  max-width: min(1100px, 94vw); max-height: calc(100vh - 88px);
  object-fit: contain; border-radius: 10px; background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.wk-deliv-seal {
  position: absolute; right: -6px; bottom: -6px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--c-green, #10b981); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surf);
}

.wk-deliv-seal svg { width: 8px; height: 8px; stroke: currentColor; fill: none; stroke-width: 3.6; }

/* Eyebrow — says what the row IS before you read the title */
.wk-deliv-eyebrow {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  color: var(--_dv, #6366f1); line-height: 1; margin-bottom: 5px;
}

.wk-deliv-eyebrow svg { width: 11px; height: 11px; flex-shrink: 0; }

.wk-deliv-eyebrow-sep { opacity: .45; }

.wk-deliv-recipient {
  font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: none;
  color: var(--ink3); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Lifecycle stepper — the single clearest "this is not a task" signal */
.wk-deliv-track {
  display: flex; align-items: center; margin-top: 9px; padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--_dv, #6366f1) 26%, var(--border));
  overflow: hidden;
}

.wk-deliv-step {
  position: relative; display: flex; align-items: center; gap: 5px;
  padding-right: 15px; flex-shrink: 0;
}

.wk-deliv-step::after {
  content: ''; position: absolute; right: 4px; top: 50%;
  width: 7px; height: 1.5px; border-radius: 1px;
  background: var(--border-s, #e5e7eb);
}

.wk-deliv-step:last-child { padding-right: 0; }

.wk-deliv-step:last-child::after { display: none; }

.wk-deliv-step-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--surf); border: 2px solid color-mix(in srgb, var(--ink3) 38%, transparent);
}

.wk-deliv-step-label {
  font-size: 9px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink4); white-space: nowrap;
}

.wk-deliv-step.is-done .wk-deliv-step-dot { background: var(--_st, #6366f1); border-color: var(--_st, #6366f1); }

.wk-deliv-step.is-done .wk-deliv-step-label { color: var(--ink3); }

.wk-deliv-step.is-done::after { background: color-mix(in srgb, var(--_st, #6366f1) 45%, var(--border-s, #e5e7eb)); }

.wk-deliv-step.is-current .wk-deliv-step-dot {
  background: var(--_st, #6366f1); border-color: var(--_st, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_st, #6366f1) 22%, transparent);
}

.wk-deliv-step.is-current .wk-deliv-step-label { color: var(--_st, #6366f1); }

/* Stage chip — same slot a task uses for priority, different verb entirely */
.wk-deliv-stage-chip {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 9.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 7px; white-space: nowrap;
  background: color-mix(in srgb, var(--_dv, #6366f1) 13%, var(--surf));
  color: color-mix(in srgb, var(--_dv, #6366f1) 78%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--_dv, #6366f1) 30%, transparent);
}

.wk-deliv-stage-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--_dv, #6366f1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--_dv, #6366f1) 22%, transparent);
}

.wk-deliv-card.is-accepted .wk-deliv-stage-chip { background: var(--_dv, #10b981); color: #fff; border-color: transparent; }

.wk-deliv-card.is-accepted .wk-deliv-stage-dot { background: #fff; box-shadow: none; }

/* Stage chip as an inline picker — the Deliverables tabs let you change stage
   from the row without opening the modal. */
.wk-deliv-stage-chip.is-pickable { cursor: pointer; }

.wk-deliv-stage-chip.is-pickable:hover {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--_dv, #6366f1) 26%, transparent);
  border-color: color-mix(in srgb, var(--_dv, #6366f1) 50%, transparent);
}

.wk-deliv-stage-caret { margin-left: 1px; opacity: .65; }

/* ── The card inside a Deliverables tab ──
   Those tabs render this same card and keep their own list chrome, so the only
   thing to reconcile is bulk-select: its checkbox overlay sits where the card's
   glyph is, so the card's left column shifts over while selecting. */
.ep-deliv-list .wk-deliv-card { cursor: pointer; }

.ep-deliv-list.ep-deliv-selecting .wk-deliv-card .mw-card-left { padding-left: 46px; }

.ep-deliv-list.ep-deliv-selecting .wk-deliv-card { transform: none; }

.ep-deliv-list .wk-deliv-card .ep-deliv-row-ai-tag,
.ep-deliv-list .wk-deliv-card .ep-deliv-row-mark-done { flex-shrink: 0; }

/* Tracked annual impact — the headline number a deliverable earns */
.wk-deliv-value {
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.15; flex-shrink: 0;
}

.wk-deliv-value-money { font-size: 13px; font-weight: 900; letter-spacing: -.02em; color: var(--c-green, #16a34a); }

.wk-deliv-value-hrs { font-size: 9px; font-weight: 700; color: var(--ink4); }

/* Who shipped it — green because it answers "this went out", and it carries a
   face so the closer is recognisable at scanning speed (same job the task
   card's completed-by pill does). */
.wk-deliv-by {
  display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--c-green, #16a34a) 12%, var(--surf));
  color: var(--c-green, #16a34a); font-weight: 700;
  padding-left: 3px;
}

.wk-deliv-by-face {
  width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; color: #fff; line-height: 1;
  overflow: hidden;
}

.wk-deliv-by-face--img { background: none !important; }

.wk-deliv-by-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wk-deliv-by-when { opacity: .7; font-weight: 600; margin-left: 2px; }

/* Deliverable-only meta pills */
.mw-pill--linked { background: color-mix(in srgb, var(--c-blue, #0f62fe) 10%, var(--surf)); color: var(--c-blue, #0f62fe); }

.mw-pill--bundle { background: color-mix(in srgb, #a855f7 12%, var(--surf)); color: #7e22ce; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 780px) {
.wk-deliv-step:not(.is-current) .wk-deliv-step-label { display: none; }

.wk-deliv-step { padding-right: 12px; }

.wk-deliv-recipient { max-width: 110px; }
}

/* ── CALENDAR VIEW ── */
.mw-calendar-view {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}

.mw-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}

.mw-cal-header-left { display: flex; align-items: center; gap: 8px; }

.mw-cal-title { font-size: 14px; font-weight: 800; color: var(--ink); }

.mw-cal-today-btn {
  font-size: 10px; font-weight: 700; color: var(--c-blue); background: var(--c-blue-bg);
  border: 1px solid color-mix(in srgb, var(--c-blue) 20%, transparent);
  border-radius: 6px; padding: 3px 10px; cursor: pointer; transition: all .15s;
}

.mw-cal-today-btn:hover { background: color-mix(in srgb, var(--c-blue) 15%, var(--surf)); }

.mw-cal-nav {
  width: 30px; height: 30px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 16px;
  color: var(--ink3); transition: all .15s;
}

.mw-cal-nav:hover { background: var(--border-s); color: var(--ink); }

.mw-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
}

.mw-cal-day-head {
  padding: 8px 4px; text-align: center; font-size: 9px; font-weight: 700;
  color: var(--ink4); text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 1px solid var(--border-s); background: var(--surf2, var(--border-s));
}

.mw-cal-day {
  min-height: 82px; padding: 4px 5px; border-right: 1px solid var(--border-s);
  border-bottom: 1px solid var(--border-s); position: relative;
  cursor: pointer; transition: background .15s;
}

.mw-cal-day:hover { background: color-mix(in srgb, var(--c-blue) 4%, var(--surf)); }

.mw-cal-day:nth-child(7n) { border-right: none; }

.mw-cal-day.is-other { opacity: .35; }

.mw-cal-day.is-today { background: var(--c-blue-bg); }

.mw-cal-day.is-today:hover { background: color-mix(in srgb, var(--c-blue) 12%, var(--surf)); }

.mw-cal-day.is-selected { background: color-mix(in srgb, var(--c-blue) 12%, var(--surf)); box-shadow: inset 0 0 0 2px var(--c-blue); border-radius: 4px; }

.mw-cal-day-num {
  font-size: 11px; font-weight: 700; color: var(--ink3); margin-bottom: 4px;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}

.mw-cal-day.is-today .mw-cal-day-num { color: #fff; background: var(--c-blue); font-weight: 800; }

.mw-cal-day.is-selected .mw-cal-day-num { color: var(--c-blue); font-weight: 800; }

.mw-cal-task-pip {
  font-size: 9px; font-weight: 600; color: var(--ink); padding: 2px 5px;
  border-radius: 3px; margin-bottom: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; cursor: default;
  background: var(--c-blue-bg); line-height: 1.3;
}

.mw-cal-task-pip.is-overdue { background: var(--c-red-bg); color: var(--c-red); }

.mw-cal-task-pip.is-done { background: var(--c-green-bg); color: var(--c-green); text-decoration: line-through; }

.mw-cal-task-pip.is-high { background: #fef3c7; color: #b45309; }

.mw-cal-more { font-size: 8px; color: var(--ink4); font-weight: 700; padding: 1px 4px; }

.mw-cal-dot-row { display: flex; gap: 3px; margin-top: 4px; justify-content: center; }

.mw-cal-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--c-blue); }

.mw-cal-dot.is-overdue { background: var(--c-red); }

.mw-cal-dot.is-done { background: var(--c-green); }

.mw-cal-dot-more { font-size: 8px; color: var(--ink4); font-weight: 700; line-height: 6px; }

.mw-cal-high-pip { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--c-red); margin-left: 3px; vertical-align: top; }

.mw-cal-selected-banner {
  padding: 10px 16px; background: var(--c-blue-bg); border-bottom: 1px solid var(--border-s);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 700; color: var(--c-blue);
}

.mw-cal-selected-banner button {
  font-size: 10px; color: var(--ink3); cursor: pointer; padding: 2px 8px;
  border-radius: 4px; transition: all .15s;
}

.mw-cal-selected-banner button:hover { background: var(--border-s); }

/* ── RIGHT INTEL PANEL ── */
.mw-intel { display: flex; flex-direction: column; gap: 10px; }

.mw-intel-card {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}

.mw-intel-head {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 8px; padding-bottom: 7px;
  border-bottom: 1px solid var(--border-s);
}

.mw-intel-icon {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.mw-intel-icon svg {
  width: 12px; height: 12px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.mw-intel-title { font-size: 11px; font-weight: 700; color: var(--ink); }

.mw-intel-body { max-height: 160px; overflow-y: auto; }

.mw-intel-body:empty::after {
  content: 'No data'; display: block; text-align: center;
  padding: 12px 0; color: var(--ink4); font-size: 10px;
}

/* ── My Work filter button (Tasks/Projects/Programs sub-panel headers) ── */
.wk-mw-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--border-s, #e2e8f0); background: var(--surf, #fff);
  font-size: 11px; font-weight: 700; color: var(--ink2, #334155);
  cursor: pointer; transition: all .15s;
}

/* Capacity teammate picker */
.wk-capacity-picker { position: relative; }

.wk-capacity-picker-drop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 120;
  min-width: 180px; background: var(--surf, #fff);
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10); padding: 4px;
  display: flex; flex-direction: column; gap: 1px;
}

.wk-capacity-picker-drop[hidden] { display: none; }

.wk-cpd-item {
  padding: 7px 12px; border-radius: 7px; font-size: 12px; font-weight: 600;
  color: var(--ink2, #334155); cursor: pointer; transition: background .1s;
}

.wk-cpd-item:hover { background: var(--hover-bg, #f1f5f9); }

.wk-cpd-item.is-active { color: var(--c-blue, #2563eb); background: var(--c-blue-bg, #edf5ff); }

.wk-team-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.wk-team-toolbar-spacer { flex: 1; min-width: 0; }

.wk-team-picker { position: relative; display: inline-flex; }

.wk-team-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--surf, #fff);
  color: var(--ink, #0f172a);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}

.wk-team-picker-btn:hover,
.wk-team-picker-btn.is-active {
  border-color: color-mix(in srgb, var(--c-blue, #0f62fe) 40%, var(--border, #e2e8f0));
  background: var(--c-blue-bg, #edf5ff);
  color: var(--c-blue, #0f62fe);
}

.wk-team-picker-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--surf, #fff);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .16);
}

.wk-team-picker-menu[hidden] { display: none; }

.wk-team-picker-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink, #0f172a);
  text-align: left;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.wk-team-picker-option:hover { background: var(--hover-bg, #f1f5f9); }

.wk-team-picker-option.is-active { background: var(--c-blue-bg, #edf5ff); color: var(--c-blue, #0f62fe); }

.mw-card-list { display: flex; flex-direction: column; gap: 10px; }

.wk-capacity-list { display: flex; flex-direction: column; gap: 10px; padding: 8px; }

.wk-capacity-card {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--surf, #fff);
  padding: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.wk-capacity-card.is-clickable { cursor: pointer; }

.wk-capacity-card.is-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
  border-color: color-mix(in srgb, var(--c-blue, #0f62fe) 40%, var(--border, #e2e8f0));
}

.wk-capacity-card.is-clickable:focus-visible {
  outline: 2px solid var(--c-blue, #0f62fe);
  outline-offset: 2px;
}

.wk-capacity-card.is-over { border-color: color-mix(in srgb, var(--c-red, #ef4444) 35%, var(--border, #e2e8f0)); }

.wk-capacity-card.is-under { border-color: color-mix(in srgb, var(--c-blue, #0f62fe) 28%, var(--border, #e2e8f0)); }

.wk-capacity-person { display: flex; align-items: center; gap: 10px; min-width: 0; }

.wk-capacity-person > div { flex: 1; min-width: 0; }

.wk-capacity-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  color: var(--ink3, #94a3b8); flex-shrink: 0;
  transition: color .14s ease, transform .14s ease, background .14s ease;
}

.wk-capacity-card.is-clickable:hover .wk-capacity-chev {
  color: var(--c-blue, #0f62fe); transform: translateX(2px); background: var(--c-blue-bg, #edf5ff);
}

.wk-capacity-name { color: var(--ink, #0f172a); font-size: 13px; font-weight: 850; line-height: 1.25; }

.wk-capacity-role { color: var(--ink3, #64748b); font-size: 11px; font-weight: 700; line-height: 1.3; }

.wk-capacity-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.wk-capacity-metrics div {
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: var(--soft, #f8fafc);
  transition: background .12s ease, transform .12s ease;
}

.wk-capacity-metrics div[data-cap-action] { cursor: pointer; }

.wk-capacity-metrics div[data-cap-action]:hover {
  background: color-mix(in srgb, var(--c-blue, #0f62fe) 10%, var(--soft, #f8fafc));
}

.wk-capacity-metrics b { display: block; color: var(--ink, #0f172a); font-size: 13px; line-height: 1.1; }

.wk-capacity-metrics span { display: block; margin-top: 3px; color: var(--ink3, #64748b); font-size: 10px; font-weight: 800; text-transform: uppercase; }

.wk-capacity-bar { height: 5px; margin-top: 10px; border-radius: 999px; background: var(--border-s, #e5e7eb); overflow: hidden; }

.wk-capacity-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-blue, #0f62fe), var(--c-green, #16a34a)); }

.wk-capacity-card.is-over .wk-capacity-bar span { background: var(--c-red, #ef4444); }

/* ── Capacity support-stack mini rows (Over / Available / Trend) ── */
.wk-cap-mini {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--surf, #fff);
  border: 1px solid var(--border-s, #eef2f7);
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
  min-width: 0;
}

.wk-cap-mini + .wk-cap-mini { margin-top: 6px; }

.wk-cap-mini.is-clickable { cursor: pointer; }

.wk-cap-mini.is-clickable:hover {
  background: color-mix(in srgb, var(--c-blue, #0f62fe) 6%, var(--surf, #fff));
  border-color: color-mix(in srgb, var(--c-blue, #0f62fe) 30%, var(--border, #e2e8f0));
  transform: translateX(2px);
}

.wk-cap-mini.is-clickable:focus-visible {
  outline: 2px solid var(--c-blue, #0f62fe); outline-offset: 2px;
}

.wk-cap-mini-av {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em;
}

.wk-cap-mini-main { flex: 1; min-width: 0; }

.wk-cap-mini-name {
  color: var(--ink, #0f172a); font-size: 12.5px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wk-cap-mini-sub {
  color: var(--ink3, #64748b); font-size: 10.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}

.wk-cap-mini-val { flex-shrink: 0; text-align: right; min-width: 52px; }

.wk-cap-mini-val b {
  display: block; color: var(--ink, #0f172a);
  font-size: 13px; font-weight: 850; line-height: 1.1;
}

.wk-cap-mini-val span {
  display: block; margin-top: 1px;
  color: var(--ink3, #94a3b8); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}

@media (max-width: 760px) {
.wk-capacity-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.wk-team-toolbar { flex-wrap: wrap; }
}

.wk-mw-filter-btn:hover { background: color-mix(in srgb, var(--c-blue, #2563eb) 6%, var(--surf, #fff)); border-color: color-mix(in srgb, var(--c-blue, #2563eb) 35%, var(--border, #cbd5e1)); }

.wk-mw-filter-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

.wk-mw-filter-btn .wk-filter-label { line-height: 1; }

.wk-mw-filter-btn .wk-filter-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 5px;
  border-radius: 999px; background: var(--c-blue, #2563eb); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
}

.wk-mw-filter-btn[data-has-filters="true"] {
  background: color-mix(in srgb, var(--c-blue, #2563eb) 12%, var(--surf, #fff));
  border-color: var(--c-blue, #2563eb); color: var(--c-blue, #2563eb);
}

.wk-mw-filter-pop {
  background: var(--surf, #fff); border: 1px solid var(--border, #cbd5e1);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,.18);
  padding: 12px; min-width: 240px; max-width: 320px;
}

.wk-mw-filter-pop-head {
  font-size: 11px; font-weight: 800; color: var(--ink3, #64748b);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border-s, #f1f5f9);
}

.wk-mw-filter-pop-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

.wk-mw-filter-pop-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--c-blue, #2563eb) 12%, var(--surf, #fff));
  color: var(--c-blue, #2563eb);
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}

.wk-mw-filter-pop-clear {
  font-size: 11px; font-weight: 700; color: var(--ink3, #64748b);
  background: var(--border-s, #f1f5f9); border: 1px solid var(--border, #cbd5e1);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; transition: all .15s;
}

.wk-mw-filter-pop-clear:hover { background: var(--c-red-bg, #fee2e2); color: var(--c-red, #dc2626); border-color: var(--c-red, #dc2626); }

.wk-mw-filter-pop-empty {
  font-size: 11px; color: var(--ink3, #64748b); padding: 4px 0;
}

/* Clickable support-module rows (Recently Completed, Upcoming Deadlines, etc.) */
.wk-support-body .wk-clickable {
  cursor: pointer;
  transition: background .12s, transform .1s;
  border-radius: 6px;
}

.wk-support-body .wk-clickable:hover {
  background: color-mix(in srgb, var(--c-blue, #2563eb) 8%, transparent);
  transform: translateX(2px);
}

/* ── CALENDAR SELECTED-DAY SECTION (lives inside the existing wkc-upcoming sidebar) ── */
.wkc-selected-section { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-s); }

.wkc-selected-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}

.wkc-selected-title { font-size: 12px; font-weight: 800; color: var(--c-blue); }

.wkc-selected-clear {
  font-size: 10px; color: var(--ink3); cursor: pointer; padding: 2px 8px;
  border-radius: 4px; transition: all .15s; background: transparent; border: 1px solid var(--border-s);
}

.wkc-selected-clear:hover { background: var(--border-s); color: var(--ink); }

.wkc-selected-empty {
  padding: 12px 6px; text-align: center; color: var(--ink4);
  font-size: 11px; font-style: italic;
}

/* Header bar from dashboard-meta */
#wtHeaderContainer { max-width: var(--wt-bar-max-width, 1620px) !important; margin: 0 auto !important; padding: 0 20px !important; width: 100% !important; box-sizing: border-box !important; z-index: 1000 !important; }

/* ========================= display: none; .wk-container { position: relative; }
.wk-container::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;
  background: linear-gradient(90deg, var(--_wk-accent, var(--c-blue)), color-mix(in srgb, var(--_wk-accent, var(--c-blue)) 60%, #fff));
  border-radius: var(--radius) var(--radius) 0 0; z-index: 1;
}
.wk-support-module { position: relative; overflow: hidden; }
.wk-support-module::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;
  background: linear-gradient(90deg, var(--_sm-color, var(--c-blue)), color-mix(in srgb, var(--_sm-color, var(--c-blue)) 60%, #fff));
  border-radius: var(--radius) var(--radius) 0 0; z-index: 1;
}
.wk-focus-panel { position: relative; }
.wk-focus-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;
  background: linear-gradient(90deg, var(--_fp-accent, var(--c-blue)), color-mix(in srgb, var(--_fp-accent, var(--c-blue)) 60%, #fff));
  border-radius: var(--radius) var(--radius) 0 0; z-index: 1;
}
.mw-task-workspace { position: relative; }
.mw-task-workspace::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;
  background: linear-gradient(90deg, var(--c-blue), color-mix(in srgb, var(--c-blue) 60%, #fff));
  border-radius: var(--radius) var(--radius) 0 0; z-index: 1;
}
.mw-intel-card { position: relative; overflow: hidden; }
.mw-intel-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;
  background: linear-gradient(90deg, var(--_wk-accent, var(--c-blue)), color-mix(in srgb, var(--_wk-accent, var(--c-blue)) 60%, #fff));
  border-radius: var(--radius) var(--radius) 0 0; z-index: 1;
}
.wk-insight-card { position: relative; overflow: hidden; }
.wk-insight-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;
  background: linear-gradient(90deg, var(--_wk-accent, var(--c-yellow)), color-mix(in srgb, var(--_wk-accent, var(--c-yellow)) 60%, #fff));
  border-radius: var(--radius) var(--radius) 0 0; z-index: 1;
}
.wk-report-card { position: relative; overflow: hidden; }
.wk-report-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;
  background: linear-gradient(90deg, var(--_wk-accent, var(--c-blue)), color-mix(in srgb, var(--_wk-accent, var(--c-blue)) 60%, #fff));
  border-radius: var(--radius) var(--radius) 0 0; z-index: 1;
}
.wk-goal-card { overflow: hidden; }
/* The clip above is for the accent stripe, but it also swallowed any
   `data-wk-tip` tooltip on the card (they render as an ::after ABOVE the
   hovered element, i.e. outside the card box). Release it on hover only —
   the resting card still clips exactly as before — and lift the card while
   we're at it, since its hover `transform` makes it a stacking context and
   the freed tooltip would otherwise paint under later cards in the grid. */
.wk-goal-card:hover { overflow: visible; z-index: 60; }

.wk-goal-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--_project-accent, var(--c-blue)), color-mix(in srgb, var(--_project-accent, var(--c-blue)) 55%, #fff));
  border-radius: 14px 14px 0 0; z-index: 1;
}

.wk-member-card { position: relative; overflow: hidden; }

.wk-member-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;
  background: linear-gradient(90deg, var(--_wk-accent, var(--c-yellow)), color-mix(in srgb, var(--_wk-accent, var(--c-yellow)) 60%, #fff));
  border-radius: var(--radius) var(--radius) 0 0; z-index: 1;
}

.mw-sidebar { position: relative; overflow: hidden; }

.mw-sidebar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;
  background: linear-gradient(90deg, var(--c-blue), color-mix(in srgb, var(--c-blue) 60%, #fff));
  border-radius: var(--radius) var(--radius) 0 0; z-index: 1;
}

.mw-calendar-view { position: relative; overflow: hidden; }

.mw-calendar-view::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;
  background: linear-gradient(90deg, var(--c-blue), color-mix(in srgb, var(--c-blue) 60%, #fff));
  border-radius: var(--radius) var(--radius) 0 0; z-index: 1;
}

/* ================================================================
   ENHANCED CARD PERSONALITY — vault-quality depth + spring easing
   ================================================================ */
.wk-focus-panel, .mw-task-workspace, .mw-intel-card,
.wk-insight-card, .wk-report-card, .wk-goal-card,
.wk-member-card, .wk-container, .wk-support-module {
  box-shadow: var(--shadow-sm);
  transition: all .35s var(--ease-spring);
}

.wk-focus-panel:hover, .mw-task-workspace:hover, .wk-insight-card:hover,
.wk-report-card:hover, .wk-goal-card:hover, .wk-member-card:hover,
.wk-container:hover, .wk-support-module:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* ================================================================
   GOALS — Full Goals UI (Overview, All, My, Team, Missed, AI)
   ================================================================ */

/* Focus group headers hidden — flat list (Goals section) */
.wk-focus-group { border-bottom: none; }

.wk-focus-group:last-child { border-bottom: none; }

.wk-focus-group > .wk-focus-list { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; max-height: none; overflow: visible; }

/* Goal cards — avatar layout */
.gl-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
  transition: all .2s ease; cursor: pointer;
}

.gl-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  border-color: var(--c-blue); transform: translateY(-1px);
}

.gl-card--missed { border-left: 3px solid var(--c-red); }

.gl-card--overdue { border-left: 3px solid var(--c-red); background: rgba(218,30,40,.03); }

.gl-card--risk { border-left: 3px solid #f59e0b; }

.gl-card--done { border-left: 3px solid var(--c-green); opacity: .8; }

.gl-card-left { flex-shrink: 0; }

.gl-card-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  letter-spacing: .02em;
}

.gl-card-avatar--sm {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}

.gl-card-body { flex: 1; min-width: 0; }

.gl-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}

.gl-card-name { font-size: 13px; font-weight: 700; color: var(--ink); flex: 1; min-width: 0; }

.gl-card-pct { font-size: 14px; font-weight: 800; flex-shrink: 0; margin-left: 8px; }

.gl-card-meta {
  display: flex; gap: 12px; font-size: 10px; color: var(--ink3);
  font-weight: 500; margin-bottom: 8px;
}

.gl-card-tasks {
  font-size: 10px; color: var(--ink3); font-weight: 600;
  margin-top: 6px;
}

/* All Goals flat list */
.gl-all-list { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 8px; }

/* Missed goal review rows */
.gl-missed-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
}

.gl-missed-row + .gl-missed-row { border-top: 1px solid var(--border-s); }

.gl-missed-info { flex: 1; min-width: 0; }

.gl-missed-name { font-size: 12px; font-weight: 700; color: var(--ink); }

.gl-missed-meta { font-size: 10px; color: var(--ink3); margin-top: 2px; }

.gl-missed-pct { font-size: 14px; font-weight: 800; flex-shrink: 0; }

/* Insight note under support modules */
.gl-insight-note {
  margin-top: 8px; padding: 8px 10px;
  background: var(--c-yellow-bg); border-radius: 6px;
  font-size: 10px; font-weight: 600; color: var(--c-yellow);
  line-height: 1.4;
}

/* Upcoming deadline rows */
.gl-deadline-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
}

.gl-deadline-row + .gl-deadline-row { border-top: 1px solid var(--border-s); }

.gl-deadline-date {
  font-size: 10px; font-weight: 800; color: var(--c-yellow);
  min-width: 48px; flex-shrink: 0;
}

.gl-deadline-name {
  font-size: 11px; font-weight: 600; color: var(--ink);
  flex: 1; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Health rows (used in All Goals, Missed, AI panels) */
.gl-health-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
}

.gl-health-row + .gl-health-row { border-top: 1px solid var(--border-s); }

.gl-health-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.gl-health-label { flex: 1; font-size: 11px; font-weight: 600; color: var(--ink2); }

.gl-health-val { font-size: 12px; font-weight: 800; color: var(--ink); flex-shrink: 0; }

/* Momentum rows */
.gl-momentum-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
}

.gl-momentum-row + .gl-momentum-row { border-top: 1px solid var(--border-s); }

.gl-momentum-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.gl-momentum-name { flex: 1; font-size: 11px; font-weight: 600; color: var(--ink2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gl-momentum-val { font-size: 12px; font-weight: 800; flex-shrink: 0; }

/* AI Insights report */
.gl-ai-report { padding: 18px 20px; }

.gl-ai-section { margin-bottom: 22px; background: var(--surf); border: 1px solid var(--border-s); border-radius: var(--radius-sm); padding: 14px 16px; }

.gl-ai-section:last-child { margin-bottom: 0; }

.gl-ai-section-title {
  font-size: 11px; font-weight: 800; color: var(--c-blue);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-s);
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 6px;
}

.gl-ai-section-title::before {
  content: ''; display: inline-block; width: 3px; height: 14px;
  background: var(--c-blue); border-radius: 2px; flex-shrink: 0;
}

.gl-ai-insight {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
}

.gl-ai-insight + .gl-ai-insight { border-top: 1px solid var(--border-s); }

.gl-ai-bullet {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  margin-top: 4px;
}

.gl-ai-text {
  font-size: 12px; font-weight: 500; color: var(--ink2);
  line-height: 1.6;
}

.gl-ai-text strong { font-weight: 700; color: var(--ink); }

/* ── View Toggle (List / Card / Heatmap) ─────────────── */
.gl-view-toggle {
  display: flex; gap: 2px; background: var(--border-s); border-radius: 7px; padding: 2px;
}

.gl-vt-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; border-radius: 5px;
  border: none; background: none; cursor: pointer; transition: all .14s;
  color: var(--ink3);
}

.gl-vt-btn svg { width: 13px; height: 13px; pointer-events: none; }

.gl-vt-btn:hover { color: var(--ink); }

.gl-vt-btn.is-active { background: #fff; color: var(--c-blue); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ── Card / Kanban View (severity-based, matches Flowgen) ──── */
/* Hide groups in card view — Kanban columns replace them */
.gl-view-card .wk-focus-group { display: none; }

.gl-view-card .mw-kanban-wrap { display: grid; }

/* Kanban Board */
.mw-kanban-wrap {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; padding: 16px 8px;
}

.mw-kanban-col {
  border-radius: 12px; overflow: hidden;
  min-height: 120px; position: relative;
}

/* Scroll gradient at column bottom */
.mw-kanban-col::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 24px; pointer-events: none; border-radius: 0 0 12px 12px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.85));
  opacity: 0; transition: opacity .2s;
}

.mw-kanban-col.has-scroll::after { opacity: 1; }

/* Column Headers */
.mw-kanban-col-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; border-bottom: 2px solid transparent;
}

.mw-kanban-col-header h4 {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; flex: 1; margin: 0;
}

/* Count badges — filled with severity color */
.mw-kanban-count {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 8px; color: #fff; min-width: 20px; text-align: center;
}

.mw-kanban-col-body {
  padding: 8px 6px;
  display: flex; flex-direction: column; gap: 6px;
  /* No height cap — columns grow to fit cards so each card renders at its
     natural height. Page-level scroll handles long columns. */
}

.mw-kanban-empty {
  text-align: center; padding: 28px 8px;
  color: var(--ink4); font-size: 11px; font-weight: 600;
}

/* Severity column coloring — Critical (red) */
.mw-kanban-col[data-col="critical"] .mw-kanban-col-header {
  color: var(--c-red, #dc2626);
  border-bottom-color: var(--c-red, #ef4444);
  background: rgba(239,68,68,.04);
}

.mw-kanban-col[data-col="critical"] .mw-kanban-count { background: var(--c-red, #ef4444); }

/* Severity column coloring — Warning (orange) */
.mw-kanban-col[data-col="warning"] .mw-kanban-col-header {
  color: var(--c-orange, #b45309);
  border-bottom-color: var(--c-orange, #f59e0b);
  background: rgba(245,158,11,.04);
}

.mw-kanban-col[data-col="warning"] .mw-kanban-count { background: var(--c-orange, #f59e0b); }

/* Severity column coloring — On Track (green) */
.mw-kanban-col[data-col="good"] .mw-kanban-col-header {
  color: var(--c-green, #15803d);
  border-bottom-color: var(--c-green, #22c55e);
  background: rgba(34,197,94,.04);
}

.mw-kanban-col[data-col="good"] .mw-kanban-count { background: var(--c-green, #22c55e); }

/* Cards inside Kanban columns — flex-shrink: 0 so the column body never
   crushes cards when there are many of them. Each card renders at its
   natural height; the column grows vertically and the page scrolls. */
.mw-kanban-col .mw-task-card,
.mw-kanban-col .wk-focus-item,
.mw-kanban-col .gl-card,
.mw-kanban-col .wk-goal-card,
.mw-kanban-col .wk-pc-card,
.mw-kanban-col .wk-gc-card,
.mw-kanban-col .wk-dp-card--program {
  padding: 12px 14px;
  background: var(--surf, #fff); border: 1px solid var(--border, #e0e0e0);
  border-radius: 12px; cursor: pointer; position: relative; overflow: hidden;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0; flex-grow: 0; flex-basis: auto;
  height: auto; min-height: 0; max-height: none;
}

.mw-kanban-col .mw-task-card:hover,
.mw-kanban-col .wk-focus-item:hover,
.mw-kanban-col .gl-card:hover,
.mw-kanban-col .wk-goal-card:hover,
.mw-kanban-col .wk-pc-card:hover,
.mw-kanban-col .wk-gc-card:hover,
.mw-kanban-col .wk-dp-card--program:hover {
  transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

/* Restore the seeded project/program card's native padding inside the
   column (the generic kanban rule above was too tight). */
.mw-kanban-col .wk-pc-card,
.mw-kanban-col .wk-gc-card { padding: 16px 18px 14px; }

.mw-kanban-col .wk-goal-card { padding: 16px 18px 14px; }

/* Task cards in kanban — VERTICAL layout (stack left/right) */
.mw-kanban-col .mw-task-card {
  padding: 0; flex-direction: column; align-items: stretch;
}

.mw-kanban-col .mw-card-left {
  flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px 8px;
}

.mw-kanban-col .mw-card-left .wk-task-check { position: absolute; top: 10px; right: 10px; }

.mw-kanban-col .mw-card-content { width: 100%; }

.mw-kanban-col .mw-task-card-title {
  font-size: 13px; font-weight: 700; white-space: normal; overflow: hidden;
  -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical;
  padding-right: 28px; letter-spacing: -.01em; line-height: 1.4;
}

.mw-kanban-col .mw-card-desc {
  white-space: normal; -webkit-line-clamp: 2;
  display: -webkit-box; -webkit-box-orient: vertical;
  max-width: none; font-size: 11px; overflow: hidden;
}

.mw-kanban-col .mw-card-meta { flex-wrap: wrap; }

.mw-kanban-col .mw-card-right {
  border-left: none; border-top: 1px solid var(--border-s);
  padding: 8px 14px 10px; gap: 8px;
  flex-wrap: wrap; justify-content: flex-start;
}

.mw-kanban-col .mw-card-right::before { display: none; }

.mw-kanban-col .mw-card-chevron { display: none; }

/* Static HTML cards (old structure) in kanban — make vertical too */
.mw-kanban-col .mw-task-card-body { flex: 1; min-width: 0; padding: 12px 14px 8px; }

.mw-kanban-col .mw-task-card-body .mw-task-card-title {
  white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-height: 1.4; padding-right: 0;
}

.mw-kanban-col .mw-task-card-row {
  flex-wrap: wrap; gap: 6px; padding-top: 6px;
}

.mw-kanban-col .wk-task-check { position: absolute; top: 10px; right: 10px; }

/* Focus items in kanban */
.mw-kanban-col .wk-focus-item {
  flex-direction: row; padding: 10px 12px; gap: 8px;
}

.mw-kanban-col .wk-fi-icon { width: 28px; height: 28px; flex-shrink: 0; }

.mw-kanban-col .wk-fi-name { font-size: 12px; white-space: normal; }

/* Goal cards in kanban */
.mw-kanban-col .gl-card { padding: 12px 14px; }

.mw-kanban-col .gl-card-left { margin-bottom: 6px; }

@media(max-width: 900px) {
.mw-kanban-wrap { grid-template-columns: 1fr; }
}

/* ── Heat Map View ───────────────────────────────────── */
@keyframes wkHeatFadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

/* Heatmap is the same beautiful card layout as the card view, just
   in a 2-column grid with a temperature stripe + tinted background
   per status. Don't strip metadata — the cards should be readable. */
.gl-view-heatmap .wk-focus-list,
.gl-view-heatmap .gl-all-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 14px;
  max-height: none;
  align-items: stretch;
}

.gl-view-heatmap .gl-card {
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--_hm-color, var(--c-green));
  opacity: 0;
  animation: wkHeatFadeUp .4s cubic-bezier(.22,1,.36,1) both;
}

.gl-view-heatmap .gl-card:nth-child(1){animation-delay:.06s;}

.gl-view-heatmap .gl-card:nth-child(2){animation-delay:.12s;}

.gl-view-heatmap .gl-card:nth-child(3){animation-delay:.18s;}

.gl-view-heatmap .gl-card:nth-child(4){animation-delay:.24s;}

.gl-view-heatmap .gl-card:nth-child(5){animation-delay:.30s;}

.gl-view-heatmap .gl-card:nth-child(6){animation-delay:.36s;}

/* Status tint — keeps the colour signal but lets the card content show through */
.gl-view-heatmap .gl-card.mw-hm--bad  { border-left-color: var(--c-red);    background: color-mix(in srgb, var(--c-red) 5%, var(--surf));    box-shadow: inset 4px 0 8px -4px var(--c-red); }

.gl-view-heatmap .gl-card.mw-hm--warn { border-left-color: var(--c-yellow); background: color-mix(in srgb, var(--c-yellow) 4%, var(--surf)); box-shadow: inset 4px 0 8px -4px var(--c-yellow); }

.gl-view-heatmap .gl-card.mw-hm--good { border-left-color: var(--c-green);  background: color-mix(in srgb, var(--c-green) 4%, var(--surf));  box-shadow: inset 4px 0 8px -4px var(--c-green); }

.gl-view-heatmap .gl-card::before { display: none; }

.gl-view-heatmap .gl-card:hover {
  box-shadow: 0 10px 32px rgba(0,0,0,.08);
  transform: translateY(-3px);
}

.gl-view-heatmap .gl-card > * { position: relative; z-index: 1; }

@media(max-width:760px) {
.gl-view-heatmap .wk-focus-list,
  .gl-view-heatmap .gl-all-list { grid-template-columns: 1fr; }
}

/* ── Heatmap View — wk-focus-item ────────────────────── */
.gl-view-heatmap .wk-focus-item {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 18px;
  border-radius: 14px;
  border: none;
  min-height: auto;
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--_hm-color, var(--_fi-color, var(--c-green)));
  opacity: 0; animation: wkHeatFadeUp .4s cubic-bezier(.22,1,.36,1) both;
}

.gl-view-heatmap .wk-focus-item:nth-child(1){animation-delay:.06s;}

.gl-view-heatmap .wk-focus-item:nth-child(2){animation-delay:.12s;}

.gl-view-heatmap .wk-focus-item:nth-child(3){animation-delay:.18s;}

.gl-view-heatmap .wk-focus-item:nth-child(4){animation-delay:.24s;}

.gl-view-heatmap .wk-focus-item:nth-child(5){animation-delay:.30s;}

.gl-view-heatmap .wk-focus-item:nth-child(6){animation-delay:.36s;}

/* Coloring for focus items (uniform size, set via JS class) */
.gl-view-heatmap .wk-focus-item.mw-hm--bad { border-left-color: var(--c-red); background: color-mix(in srgb, var(--c-red) 5%, var(--surf)); box-shadow: inset 4px 0 8px -4px var(--c-red); }

.gl-view-heatmap .wk-focus-item.mw-hm--warn { border-left-color: var(--c-yellow); background: color-mix(in srgb, var(--c-yellow) 4%, var(--surf)); box-shadow: inset 4px 0 8px -4px var(--c-yellow); }

.gl-view-heatmap .wk-focus-item.mw-hm--good { border-left-color: var(--c-green); background: color-mix(in srgb, var(--c-green) 4%, var(--surf)); box-shadow: inset 4px 0 8px -4px var(--c-green); }

.gl-view-heatmap .wk-focus-item::before { display: none; }

.gl-view-heatmap .wk-focus-item:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  transform: translateY(-3px);
}

.gl-view-heatmap .wk-focus-item > * { position: relative; z-index: 1; }

.gl-view-heatmap .wk-fi-icon { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 4px; }

.gl-view-heatmap .wk-fi-reason { display: none; }

.gl-view-heatmap .wk-fi-pills { display: flex; margin-top: 6px; }

.gl-view-heatmap .wk-fi-avatar { width: 22px; height: 22px; font-size: 8px; margin-top: 6px; }

.gl-view-heatmap .wk-fi-name {
  font-size: 13px; line-height: 1.35; font-weight: 800;
  white-space: normal; -webkit-line-clamp: 3;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}

/* Critical tiles — show reason */
.gl-view-heatmap .wk-focus-item.mw-hm--bad .wk-fi-reason {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; margin-top: 4px;
}

.gl-view-heatmap .wk-fi-status {
  font-size: 10px; font-weight: 800; margin-top: 6px;
}

.gl-view-heatmap .wk-fi-count {
  position: absolute; top: 10px; right: 10px;
}

/* ── Heatmap View — mw-task-card (Priority-based Bento) ──── */
.gl-view-heatmap .mw-task-card {
  flex-direction: column; align-items: stretch; text-align: left;
  border-radius: 14px; border: none;
  min-height: auto; position: relative; overflow: hidden;
  padding: 0;
  border-left: 4px solid var(--_hm-border, var(--c-yellow));
  background: var(--surf);
  opacity: 0; animation: wkHeatFadeUp .4s cubic-bezier(.22,1,.36,1) both;
}

.gl-view-heatmap .mw-task-card:nth-child(1){animation-delay:.06s;}

.gl-view-heatmap .mw-task-card:nth-child(2){animation-delay:.12s;}

.gl-view-heatmap .mw-task-card:nth-child(3){animation-delay:.18s;}

.gl-view-heatmap .mw-task-card:nth-child(4){animation-delay:.24s;}

.gl-view-heatmap .mw-task-card:nth-child(5){animation-delay:.30s;}

.gl-view-heatmap .mw-task-card:nth-child(6){animation-delay:.36s;}

.gl-view-heatmap .mw-task-card:nth-child(7){animation-delay:.42s;}

.gl-view-heatmap .mw-task-card:nth-child(8){animation-delay:.48s;}

/* Priority-based coloring — ALL cards same size, color indicates priority */
.gl-view-heatmap .mw-task-card.mw-hm--high {
  border-left-color: var(--c-red); background: color-mix(in srgb, var(--c-red) 5%, var(--surf));
  box-shadow: inset 4px 0 8px -4px var(--c-red);
}

.gl-view-heatmap .mw-task-card.mw-hm--medium {
  border-left-color: var(--c-yellow); background: color-mix(in srgb, var(--c-yellow) 4%, var(--surf));
  box-shadow: inset 4px 0 8px -4px var(--c-yellow);
}

.gl-view-heatmap .mw-task-card.mw-hm--low {
  border-left-color: var(--c-green); background: color-mix(in srgb, var(--c-green) 4%, var(--surf));
  box-shadow: inset 4px 0 8px -4px var(--c-green);
}

.gl-view-heatmap .mw-task-card.mw-hm--done {
  opacity: .55;
  border-left-color: var(--c-green); background: color-mix(in srgb, var(--c-green) 3%, var(--surf));
  box-shadow: inset 4px 0 8px -4px var(--c-green);
}

.gl-view-heatmap .mw-task-card::before { display: none; }

.gl-view-heatmap .mw-task-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  transform: translateY(-3px);
}

.gl-view-heatmap .mw-task-card > * { position: relative; z-index: 1; }

.gl-view-heatmap .mw-card-accent { display: none; }

.gl-view-heatmap .mw-card-left {
  flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 18px 8px;
}

.gl-view-heatmap .mw-task-card { position: relative; }

.gl-view-heatmap .mw-card-left .wk-task-check {
  position: absolute; top: 10px; right: 10px; z-index: 2;
}

.gl-view-heatmap .mw-card-left .mw-donut { display: none; }

/* Description visible in heatmap for all cards */
.gl-view-heatmap .mw-card-meta { margin-top: 4px; }

.gl-view-heatmap .mw-card-progress { margin-top: 8px; height: 6px; border-radius: 3px; }

.gl-view-heatmap .mw-task-card-title {
  font-size: 13px; line-height: 1.35; font-weight: 800; white-space: normal;
  -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  padding-right: 32px;
}

/* All heatmap cards show full title + description (uniform layout) */
.gl-view-heatmap .mw-task-card .mw-card-desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; max-width: none; overflow: hidden;
}

/* Right section — show avatar + due date in heatmap */
.gl-view-heatmap .mw-card-right {
  border-left: none; padding: 4px 18px 14px; gap: 8px;
  flex-wrap: wrap; justify-content: flex-start;
}

.gl-view-heatmap .mw-card-due { font-size: 10px; }

.gl-view-heatmap .mw-card-due svg { width: 11px; height: 11px; }

.gl-view-heatmap .mw-card-avatar { width: 24px; height: 24px; font-size: 9px; }

.gl-view-heatmap .mw-card-assignee-label { font-size: 9px; }

.gl-view-heatmap .mw-card-chevron { display: none; }

.gl-view-heatmap .mw-task-card .mw-pill--pri { display: inline-flex; }

/* Heatmap: static HTML cards (old structure) */
.gl-view-heatmap .mw-task-card .mw-task-card-body { padding: 18px 18px 8px; }

.gl-view-heatmap .mw-task-card .mw-task-card-body .mw-task-card-title {
  white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  font-size: 13px; font-weight: 800; line-height: 1.35;
}

.gl-view-heatmap .mw-task-card .mw-task-card-row {
  flex-wrap: wrap; gap: 5px; margin-top: 8px;
}

.gl-view-heatmap .mw-task-card .wk-task-check {
  position: absolute; top: 10px; right: 10px;
}

@media(max-width:900px) {
.gl-view-heatmap .mw-task-card { grid-column: 1 / -1; }
}

/* ── Heatmap grid for wk-focus-list / mw-task-list ───── */
.gl-view-heatmap .wk-focus-list,
.gl-view-heatmap .mw-task-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 10px; max-height: none;
}

@media(max-width:900px) {
.gl-view-heatmap .wk-focus-list,
  .gl-view-heatmap .mw-task-list { grid-template-columns: 1fr; }
}

.gl-view-card .mw-task-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  max-height: none;
}

/* Card/Grid view: make task cards vertical in grid cells */
.gl-view-card .mw-task-list .mw-task-card {
  flex-direction: column; align-items: stretch;
}

.gl-view-card .mw-task-list .mw-card-right {
  border-left: none; border-top: 1px solid var(--border-s);
  padding: 8px 14px 10px; gap: 8px;
  flex-wrap: wrap; justify-content: flex-start;
}

.gl-view-card .mw-task-list .mw-card-right::before { display: none; }

.gl-view-card .mw-task-list .mw-card-chevron { display: none; }

.gl-view-card .mw-task-list .mw-card-left {
  flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 14px 8px;
}

.gl-view-card .mw-task-list .mw-card-left .wk-task-check { position: absolute; top: 10px; right: 10px; }

.gl-view-card .mw-task-list .mw-task-card-title {
  white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-height: 1.4; padding-right: 28px;
}

.gl-view-card .mw-task-list .mw-card-meta { flex-wrap: wrap; }

/* Card/Grid view: old-structure cards */
.gl-view-card .mw-task-list .mw-task-card-body { padding: 14px 14px 8px; }

.gl-view-card .mw-task-list .mw-task-card-body .mw-task-card-title {
  white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-height: 1.4;
}

.gl-view-card .mw-task-list .mw-task-card-row {
  flex-wrap: wrap; gap: 6px; padding-top: 6px;
}

.gl-view-card .mw-task-list .wk-task-check { position: absolute; top: 10px; right: 10px; }

/* ── Filter Popup ────────────────────────────────────── */
.wk-filter-popup {
  position: absolute;
  width: 280px;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.03);
  z-index: 10000;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  padding: 0;
  overflow: hidden;
}

.wk-filter-popup.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.wk-filter-popup-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-s);
}

.wk-filter-popup-title {
  font-size: 12px; font-weight: 800; color: var(--ink);
  text-transform: uppercase; letter-spacing: .03em;
}

.wk-filter-popup-close {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; color: var(--ink3);
  border-radius: 5px; transition: all .12s;
}

.wk-filter-popup-close:hover { background: var(--border-s); color: var(--ink); }

.wk-filter-popup-close svg { width: 12px; height: 12px; }

.wk-filter-popup-body {
  padding: 10px 14px;
  max-height: 320px;
  overflow-y: auto;
}

.wk-filter-section {
  margin-bottom: 12px;
}

.wk-filter-section:last-child { margin-bottom: 0; }

.wk-filter-section-label {
  font-size: 9px; font-weight: 700; color: var(--ink4);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 6px;
}

.wk-filter-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
}

.wk-filter-chip {
  padding: 4px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surf); color: var(--ink2);
  cursor: pointer; transition: all .14s;
  font-family: inherit;
}

.wk-filter-chip:hover { border-color: var(--c-blue); color: var(--c-blue); }

.wk-filter-chip.is-active {
  background: var(--c-blue); color: #fff;
  border-color: var(--c-blue);
}

.wk-filter-actions {
  display: flex; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--border-s);
}

.wk-filter-apply {
  flex: 1; padding: 7px 0; border-radius: 7px;
  border: none; background: var(--c-blue); color: #fff;
  font-size: 11px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: all .14s;
}

.wk-filter-apply:hover { filter: brightness(1.1); }

.wk-filter-reset {
  padding: 7px 14px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surf);
  color: var(--ink2); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .14s;
}

.wk-filter-reset:hover { border-color: var(--c-red); color: var(--c-red); }

/* ── Scorecard group transitions ─────────────────────── */
.wk-focus-group {
  transition: opacity .25s ease, transform .25s ease;
  border: none;
}

.wk-focus-group.is-hidden {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  margin: 0; padding: 0;
  border: none;
}

/* Subtle gradient bg for support modules */
.wk-support-module {
  background: linear-gradient(135deg, var(--surf) 60%, color-mix(in srgb, var(--_sm-bg, var(--c-green-bg)) 30%, var(--surf)));
}

/* Subtle gradient bg for intel cards */
.mw-intel-card {
  background: linear-gradient(135deg, var(--surf) 70%, color-mix(in srgb, var(--_wk-accent, var(--c-blue)) 6%, var(--surf)));
}

/* Example content helper - fade style */
.wk-example-label {
  font-size: 8px; font-weight: 700; color: var(--ink4); text-transform: uppercase;
  letter-spacing: .5px; padding: 2px 6px; background: var(--border-s);
  border-radius: 4px; display: inline-block; margin-bottom: 6px;
}

/* Trend sparkline mini-bar for intel */
.wk-mini-bars { display: flex; gap: 2px; align-items: flex-end; height: 32px; margin-top: 6px; }

.wk-mini-bar { flex: 1; border-radius: 2px; min-height: 3px; transition: height .3s ease; }

/* Goal progress in goal cards - shimmer on hover */
.wk-goal-card:hover .wk-goal-progress-fill {
  filter: brightness(1.1);
}

/* Intel — Goal contribution rows */
.mw-gc-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }

.mw-gc-row + .mw-gc-row { border-top: 1px solid var(--border-s); }

.mw-gc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.mw-gc-name { font-size: 11px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mw-gc-count { font-size: 10px; font-weight: 700; color: var(--ink3); flex-shrink: 0; }

/* Intel — Focus Load */
.mw-focus-stat { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }

.mw-focus-label { font-size: 11px; font-weight: 600; color: var(--ink); }

.mw-focus-val { font-size: 14px; font-weight: 800; }

.mw-focus-val--ok { color: var(--c-green); }

.mw-focus-val--warn { color: var(--c-yellow); }

.mw-focus-val--danger { color: var(--c-red); }

.mw-focus-insight {
  margin-top: 6px; padding: 6px 8px; border-radius: 6px;
  background: var(--c-yellow-bg); font-size: 10px; color: var(--c-yellow);
  font-weight: 600; line-height: 1.4;
}

.mw-focus-insight--ok { background: var(--c-green-bg); color: var(--c-green); }

/* Intel — Waiting bottlenecks */
.mw-wait-row { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; }

.mw-wait-row + .mw-wait-row { border-top: 1px solid var(--border-s); }

.mw-wait-person { font-size: 10px; font-weight: 700; color: var(--c-teal); white-space: nowrap; }

.mw-wait-task { font-size: 11px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }

/* Intel — Work balance */
.mw-bal-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }

.mw-bal-row + .mw-bal-row { border-top: 1px solid var(--border-s); }

.mw-bal-label { font-size: 11px; font-weight: 600; color: var(--ink); flex: 1; }

.mw-bal-count { font-size: 12px; font-weight: 800; color: var(--ink); min-width: 32px; text-align: right; }

.mw-bal-bar-wrap { width: 60px; height: 5px; background: var(--border-s); border-radius: 3px; overflow: hidden; flex-shrink: 0; }

.mw-bal-bar { height: 100%; border-radius: 3px; background: var(--c-green); transition: width .3s; }

.mw-bal-bar.is-spike { background: var(--c-red); }

.mw-bal-insight {
  margin-top: 6px; padding: 6px 8px; border-radius: 6px;
  background: var(--c-yellow-bg); font-size: 10px; color: var(--c-yellow);
  font-weight: 600; line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════
   TASK PROFILE — Centered Popup Modal (v2)
   ════════════════════════════════════════════════════════════ */
.tp-overlay {
  position: fixed; inset: 0; z-index: 60000;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .25s ease, visibility 0s .25s;
}

.tp-overlay.is-open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .25s ease, visibility 0s 0s; }

/* Capture mode (opened from inside the template editor): the task profile must
   clear the template modal (.wkt-detail, z 2000000) and its mini-form
   (2000100). !important beats the focus system's inline z-index (~60000). */
.tp-overlay.tp-front { z-index: 2000200 !important; }

.tp-popup {
  position: relative;
  width: 94vw; height: 92vh;
  background: var(--surf, #fff);
  border-radius: 14px;
  box-shadow: 0 16px 60px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(.97);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  pointer-events: auto;
}

.tp-overlay.is-open .tp-popup { transform: translateY(0) scale(1); }

/* ── Slim header ── */
.tp-header {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
  cursor: grab; user-select: none;
}

.tp-header:active { cursor: grabbing; }

.tp-header-title {
  flex: 1; min-width: 0;
  font-size: 18px; font-weight: 800; color: var(--ink, #161616);
  line-height: 1.3; margin: 0;
  outline: none; padding: 4px 8px; margin: -4px -8px;
  border-radius: 6px; transition: background .15s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tp-header-title:hover { background: var(--border-s, #f1f5f9); cursor: text; }

.tp-header-title:focus {
  background: var(--border-s, #f1f5f9);
  box-shadow: none;
  border-bottom: 2px solid var(--ink3, #94a3b8);
  white-space: normal; overflow: visible;
}

.tp-header-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

/* The "Draft with AI" pill shares the header row with the 32px Edit / icon
   buttons — pin it to the same height (and add a little breathing room) so the
   whole control row reads as one even line. */
.tp-header-right .wk-aifill-top { height: 32px; }

.tp-status-pill {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px; border-radius: 10px;
  background: var(--c-blue-bg, #e0f2fe); color: var(--c-blue, #0284c7);
}

.tp-status-pill.is-done { background: var(--c-green-bg, #dcfce7); color: var(--c-green, #16a34a); }

.tp-status-pill.is-overdue { background: var(--c-red-bg, #fee2e2); color: var(--c-red, #dc2626); }

.tp-hdr-btn {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--ink3, #8d8d8d); transition: all .15s;
}

.tp-hdr-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Subtle, neutral hover by default — only semantically-meaningful buttons get a
   color (done = green, delete = red). Everything turning green read as cheap. */
.tp-hdr-btn:hover { background: var(--border-s, #f1f5f9); color: var(--ink, #161616); }

#tpToggleDone:hover { background: var(--c-green-bg, #dcfce7); color: var(--c-green, #16a34a); }

/* Edit button — pill with label; turns green when toggled active (in edit mode). */
.tp-hdr-btn--edit {
  width: auto; gap: 6px; padding: 0 12px; height: 32px;
  font-size: 13px; font-weight: 600;
  color: var(--ink, #161616);
  font-family: inherit;
}

.tp-hdr-btn--edit .tp-hdr-btn-label { line-height: 1; }

.tp-hdr-btn--edit.is-active {
  background: var(--c-green, #16a34a); color: #fff;
}

.tp-hdr-btn--edit.is-active:hover { background: #15803d; color: #fff; }

.tp-hdr-btn--edit svg { width: 14px; height: 14px; }

/* The task ⋯ menu is the shared WkRecordMenu (wk-record-menu.js, which injects
   its own .wk-rmenu styles) — this file used to carry a second copy of those
   rules for the task popup alone. One menu, one stylesheet. #tpMore just needs
   the header-button sizing, which .tp-hdr-btn already gives it. */
.tp-hdr-close:hover { background: #f4f4f4; color: var(--ink, #161616); }

.tp-hdr-close svg { width: 18px; height: 18px; }

.tp-hdr-sep {
  width: 1px; height: 20px; background: var(--border, #e2e8f0);
  margin: 0 4px;
}

/* ── Explicit Create / Save action buttons in the profile header ── */
.tp-action-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .15s, transform .1s, background .15s, box-shadow .15s;
}

.tp-action-btn:active { transform: scale(0.97); }

.tp-action-btn:disabled { opacity: .45; cursor: not-allowed; }

.tp-action-btn--create {
  background: var(--c-green, #16a34a);
  color: #fff;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25);
}

.tp-action-btn--create:hover:not(:disabled) { background: #15803d; }

.tp-action-btn--save {
  background: var(--c-blue-bg, #e0f2fe);
  color: var(--c-blue, #0284c7);
}

.tp-action-btn--save:not(:disabled) {
  background: var(--c-blue, #0284c7);
  color: #fff;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.25);
}

.tp-action-btn--save:hover:not(:disabled) { background: #0369a1; }

/* Hide action buttons in view-only mode */
.tp-view-only .tp-action-btn { display: none !important; }

/* ── Card strip — embeds a .mw-task-card directly under the slim header
   so the popup visually inherits the home-page card design. ── */
.tp-card-strip {
  flex-shrink: 0;
  padding: 10px 24px 14px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: linear-gradient(180deg, var(--surf, #fff) 0%, var(--border-s, #f8fafc) 100%);
}

.tp-card-strip:empty { display: none; }

.tp-card-strip .mw-task-card {
  width: 100%; box-sizing: border-box;
  cursor: default;
}

/* Card meta row is what we want — keep it. Hide things that would duplicate
   what the slim header already shows. */
.tp-card-strip .mw-task-card-title { display: none; }

.tp-card-strip .mw-card-del,
.tp-card-strip .mw-card-chevron { display: none; }

.tp-card-strip .mw-card-desc { display: none; }

.tp-card-strip .mw-card-meta { margin-top: 0; }

.tp-card-strip .mw-task-card:hover { transform: none; box-shadow: 0 1px 2px rgba(0,0,0,.04); }

/* ── Body (two-column: main + sidebar) ── */
.tp-body {
  flex: 1; overflow: hidden; min-height: 0;
  display: flex;
}

/* ── Main work surface ── */
.tp-main {
  flex: 1; min-width: 0; overflow-y: auto;
  padding: 20px 28px;
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}

/* ── Pill tab bar ── */
.tp-pill-bar {
  display: flex; gap: 6px;
  margin-bottom: 22px;
  flex-shrink: 0;
  transition: background .2s ease, border-bottom-color .2s ease;
  padding: 8px 12px;
  border-radius: 12px;
}

/* Edit-mode visual transition — orange tab strip mirrors the program popup
   (.ep-is-editing #epTabs) and the project popup (.gd-overlay.is-editing
   #pdpTabs) so all three popups (program/project/task) signal Edit mode
   identically. tp-view-only is the inverse: present when locked, absent
   when actively editing. */
.tp-popup:not(.tp-view-only) .tp-pill-bar {
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
  border-bottom: 1px solid #fdba74;
}

/* Pulsing "EDITING" badge — appears in the header when Edit mode is on. */
.tp-popup #tpEditBanner { display: none; }

.tp-popup:not(.tp-view-only) #tpEditBanner {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: #fed7aa; color: #9a3412;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  animation: tpEditBannerIn .25s ease;
}

@keyframes tpEditBannerIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.tp-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 16px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
  color: var(--ink3, #8d8d8d);
  background: var(--border-s, #f1f5f9);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: all .15s; font-family: inherit;
}

.tp-pill:hover { color: var(--ink2, #525252); background: var(--border, #e2e8f0); }

.tp-pill.is-active {
  background: var(--c-blue, #0284c7); color: #fff;
  border-color: var(--c-blue, #0284c7);
}

.tp-pill-badge {
  font-size: 9px; font-weight: 800;
  background: rgba(255,255,255,.25); color: inherit;
  padding: 1px 6px; border-radius: 8px;
  min-width: 14px; text-align: center;
}

.tp-pill-badge:empty { display: none; }

.tp-pill.is-active .tp-pill-badge { background: rgba(255,255,255,.3); }

/* ── Tab panels ── */
.tp-panel {
  display: none;
  animation: tpPanelIn .22s ease;
  flex: 1;
}

.tp-panel.is-active { display: block; }

@keyframes tpPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Blocks (sections within panels) ── */
.tp-block { margin-bottom: 24px; }

.tp-block-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--_head-c, var(--ink2, #525252));
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-s, #f1f5f9);
}

.tp-block-head svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.tp-block-count {
  margin-left: auto; font-size: 10px; font-weight: 800;
  background: var(--c-blue-bg, #e0f2fe); color: var(--c-blue, #0284c7);
  padding: 2px 7px; border-radius: 10px;
}

/* ── Editor (contenteditable) ── */
.tp-editor {
  font-size: 13px; line-height: 1.65; color: var(--ink, #161616);
  min-height: 60px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border-s, #f1f5f9); outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.tp-editor:empty::before {
  content: attr(data-placeholder); color: var(--ink4, #94a3b8); pointer-events: none;
}

.tp-editor:focus { border-color: var(--c-blue, #0284c7); box-shadow: 0 0 0 2px rgba(0,75,124,.1); }

.tp-editor--tall { min-height: 160px; }

/* Title box — a real input in the body; the header title just mirrors it. */
.tp-title-input {
  width: 100%; box-sizing: border-box;
  font-size: 15px; font-weight: 700; line-height: 1.4;
  color: var(--ink, #161616);
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border-s, #f1f5f9); outline: none; background: #fff;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}

.tp-title-input::placeholder { color: var(--ink4, #94a3b8); font-weight: 500; }

.tp-title-input:focus { border-color: var(--c-blue, #0284c7); box-shadow: 0 0 0 2px rgba(0,75,124,.1); }

.tp-view-only .tp-title-input { background: transparent; border-color: transparent; padding-left: 0; }

/* ── Checklist ── */
.tp-checklist { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }

.tp-add-row { display: flex; gap: 6px; }

.tp-add-row input {
  flex: 1; padding: 8px 10px; border-radius: 8px;
  border: 1px dashed var(--border, #e2e8f0); background: transparent;
  font-size: 12px; color: var(--ink, #161616); outline: none;
  transition: border-color .15s; font-family: inherit;
}

.tp-add-row input::placeholder { color: var(--ink4, #94a3b8); }

.tp-add-row input:focus { border-color: var(--c-blue, #0284c7); border-style: solid; }

.tp-add-btn {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--wt-theme-primary, #16a34a); background: var(--wt-theme-primary, #16a34a);
  color: #fff; font-size: 12px; font-weight: 600; font-family: inherit;
  transition: filter .15s, opacity .15s;
}

.tp-add-btn:hover { filter: brightness(1.05); }

.tp-add-btn:active { opacity: .85; }

/* ── Notes split (Notes & Files panel) ── */
.tp-notes-split {
  display: flex; gap: 24px;
}

.tp-notes-block { flex: 3; }

.tp-files-block { flex: 2; }

.tp-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 24px; color: var(--ink4, #94a3b8); text-align: center;
  font-size: 12px;
}

.tp-empty-state svg { width: 32px; height: 32px; opacity: .4; }

/* ── Subtasks ── */
.tp-subtask-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }

.tp-subtask {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  transition: background .12s;
}

.tp-subtask:hover { background: var(--border-s, #f1f5f9); }

.tp-subtask-check {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border, #e2e8f0); background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s cubic-bezier(.2,.8,.2,1); color: transparent;
}

.tp-subtask-check svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 3; }

.tp-subtask-check.is-done {
  background: var(--c-green, #16a34a); border-color: var(--c-green, #16a34a); color: #fff;
}

.tp-subtask-text {
  flex: 1; font-size: 13px; color: var(--ink, #161616); line-height: 1.4;
  transition: color .2s, text-decoration .2s;
}

.tp-subtask-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}

.tp-subtask-desc {
  font-size: 11px; color: var(--ink4, #94a3b8); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Editable list rows ───────────────────────────────────────────────────
   Checklist steps, instructions, deliverables and criteria are edited in place.
   In view mode they look exactly as they always did; in edit mode they invite a
   click, and while focused they drop the clamps/ellipsis so you can see the end
   of what you are typing. */
.tp-inline-edit { outline: none; border-radius: 5px; }

.tp-inline-edit[contenteditable="true"] {
  cursor: text; padding: 1px 4px; margin: -1px -4px;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .12s, background .12s;
}

.tp-inline-edit[contenteditable="true"]:hover { box-shadow: inset 0 0 0 1px var(--border, #e4e9f0); }

.tp-inline-edit[contenteditable="true"]:focus {
  background: var(--card, #fff); box-shadow: 0 0 0 2px var(--c-blue, #0284c7);
  white-space: pre-wrap; overflow: visible; text-overflow: clip;
  -webkit-line-clamp: unset; display: block;
}

/* A finished step keeps its strike-through, but not while you are fixing it. */
.tp-subtask.is-done .tp-subtask-text.tp-inline-edit:focus { text-decoration: none; color: var(--ink, #161616); }

/* ── Drag-to-reorder — Checklist / Instructions / Deliverables / Criteria ──
   Every ordered list in the task popup is draggable. A grip handle on the left
   signals it; the row dims while dragging and a blue line marks the drop slot. */
.tp-sortable-item { position: relative; }

.tp-drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 14px; margin-right: -2px;
  cursor: grab; color: var(--ink4, #cbd5e1);
  opacity: .45; transition: opacity .12s ease, color .12s ease;
}

.tp-drag-handle:active { cursor: grabbing; }

.tp-sortable-item:hover .tp-drag-handle { opacity: 1; }

.tp-drag-handle:hover { color: var(--ink3, #8d8d8d); }

.tp-sortable-item.tp-dragging { opacity: .45; }

.tp-sortable-item.tp-drag-over { box-shadow: inset 0 2px 0 var(--c-blue, #0284c7); }

/* ── RIGHT SIDEBAR ── */
.tp-sidebar {
  width: 340px; flex-shrink: 0;
  border-left: 1px solid var(--border, #e2e8f0);
  padding: 20px 18px;
  overflow-y: auto;
  background: var(--border-s, #f8fafc);
}

/* Sidebar progress ring */
.tp-sb-progress {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; margin-bottom: 20px;
  background: var(--surf, #fff);
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
}

.tp-sb-ring-wrap {
  position: relative; width: 56px; height: 56px; flex-shrink: 0;
}

.tp-sb-ring { width: 56px; height: 56px; transform: rotate(-90deg); }

.tp-sb-ring-bg {
  fill: none; stroke: var(--border, #e2e8f0);
  stroke-width: 5; stroke-linecap: round;
}

.tp-sb-ring-fill {
  fill: none; stroke: var(--c-blue, #0284c7);
  stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 188.496; stroke-dashoffset: 188.496;
  transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1), stroke .3s;
}

.tp-sb-ring-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--c-blue, #0284c7);
  transition: color .3s;
}

.tp-sb-progress-info { flex: 1; min-width: 0; }

.tp-sb-progress-label {
  font-size: 12px; font-weight: 700; color: var(--ink, #161616);
  display: block; margin-bottom: 2px;
}

.tp-sb-progress-detail {
  font-size: 11px; color: var(--ink3, #8d8d8d); display: block;
}

/* Status colors for ring (applied by JS via inline style or data-attr) */
.tp-sb-progress[data-status="good"] .tp-sb-ring-fill { stroke: var(--c-green, #16a34a); }

.tp-sb-progress[data-status="good"] .tp-sb-ring-pct { color: var(--c-green, #16a34a); }

.tp-sb-progress[data-status="ok"] .tp-sb-ring-fill { stroke: var(--c-yellow, #ca8a04); }

.tp-sb-progress[data-status="ok"] .tp-sb-ring-pct { color: var(--c-yellow, #ca8a04); }

.tp-sb-progress[data-status="bad"] .tp-sb-ring-fill { stroke: var(--c-red, #dc2626); }

.tp-sb-progress[data-status="bad"] .tp-sb-ring-pct { color: var(--c-red, #dc2626); }

.tp-sb-progress[data-status="done"] .tp-sb-ring-fill { stroke: var(--c-green, #16a34a); }

.tp-sb-progress[data-status="done"] .tp-sb-ring-pct { color: var(--c-green, #16a34a); }

/* Sidebar sections */
.tp-sb-section { margin-bottom: 18px; }

.tp-sb-heading {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink3, #8d8d8d);
  margin-bottom: 10px;
}

/* Sidebar meta fields
   Alignment rationale + the rule that these must stay identical to
   project-detail.css's .gd-sb-* twins: see the comment there. */
.tp-sb-field {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  cursor: pointer; transition: background .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
  margin-bottom: 1px;
}

.tp-sb-field:hover { background: var(--surf, #fff); }

.tp-sb-field-label {
  width: 96px; flex-shrink: 0; min-height: 22px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ink3, #8d8d8d);
  line-height: 1.3;
}

.tp-sb-field-label svg {
  width: 13px; height: 13px; stroke: currentColor; fill: none;
  stroke-width: 2; flex-shrink: 0;
}

.tp-sb-field-value {
  flex: 1; min-width: 0; min-height: 22px;
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 12.5px; font-weight: 650; color: var(--ink, #0f172a);
  line-height: 1.45; overflow-wrap: anywhere;
}

.tp-sb-field-value--clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}

.tp-sb-field-value.is-empty { color: var(--ink4, #94a3b8); font-weight: 600; }

.tp-sb-field-av {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-blue, #0284c7); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  overflow: hidden;
}

.tp-sb-field.is-overdue .tp-sb-field-value { color: var(--c-red, #dc2626); }

.tp-sb-field.is-priority-high .tp-sb-field-value { color: var(--c-red, #dc2626); }

.tp-sb-field.is-priority-low .tp-sb-field-value { color: var(--c-green, #16a34a); }

/* Goal row reads as a link once it resolves to a linked goal. */
.tp-sb-field.is-linked { cursor: pointer; }

.tp-sb-field.is-linked .tp-sb-field-value { color: var(--c-blue, #3b82f6); }

.tp-sb-field.is-linked:hover .tp-sb-field-value { text-decoration: underline; }

/* Tags row — tag names can be long (they mirror work-stream / project names),
   so a narrow right-hand value column crushed and overlapped them. Stack it:
   label on its own line, chips wrap full-width below, left-aligned, and let a
   long chip wrap its own text instead of overflowing. */
.tp-sb-field--tags { flex-direction: column; align-items: stretch; gap: 6px; }

.tp-sb-field--tags .tp-sb-field-label { width: auto; }

.tp-sb-field--tags .tp-sb-field-value {
  flex-wrap: wrap; justify-content: flex-start; gap: 5px; width: 100%;
}

.tp-sb-field--tags .mw-card-pill {
  font-size: 10px; line-height: 1.4; max-width: 100%;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  height: auto;
}

/* Stacked variant for inline editors (Tags input, etc.) */
.tp-sb-field--stack { flex-direction: column; align-items: stretch; gap: 4px; }

.tp-sb-field--stack .tp-sb-field-label { width: auto; }

.tp-sb-field-input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink2, #525252);
  background: var(--surf, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px; padding: 6px 8px;
  outline: none; transition: border-color .15s;
}

.tp-sb-field-input:focus { border-color: var(--c-blue, #3b82f6); }

/* Sidebar audit */
.tp-sb-audit {
  font-size: 11px; color: var(--ink4, #94a3b8); line-height: 1.6;
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 10px;
}

/* Sidebar intel (deadline, context, deps) */
.tp-sb-intel { font-size: 12px; color: var(--ink2, #525252); line-height: 1.55; padding: 0 2px; }

/* AI Suggest button in task profile */
.tp-ai-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; font-family: inherit;
  color: var(--c-blue); background: var(--c-blue-bg);
  border: 1px solid color-mix(in srgb, var(--c-blue) 20%, transparent);
  border-radius: 6px; padding: 7px 14px; cursor: pointer;
  transition: all .15s ease; width: 100%;
  justify-content: center;
}

.tp-ai-btn:hover { background: color-mix(in srgb, var(--c-blue) 15%, transparent); }

.tp-ai-btn:disabled { opacity: .5; cursor: not-allowed; }

.tp-ai-btn svg { flex-shrink: 0; }

.tp-ai-result { font-size: 12px; color: var(--ink2); line-height: 1.6; margin-top: 10px; }

.tp-ai-result:empty { display: none; }

.tp-ai-result .tp-ai-item {
  padding: 8px 0; border-bottom: 1px solid var(--border-s);
}

.tp-ai-result .tp-ai-item:last-child { border-bottom: none; }

.tp-ai-loading {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink3); padding: 8px 0;
}

.tp-ai-loading::before {
  content: ''; width: 14px; height: 14px; border: 2px solid var(--border-s);
  border-top-color: var(--c-blue); border-radius: 50%;
  animation: tp-ai-spin .6s linear infinite;
}

@keyframes tp-ai-spin { to { transform: rotate(360deg); } }

/* ================================================================
   SHOW ALL BUTTON (Process-Hub pattern)
   ================================================================ */
.wk-show-all {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600;
  color: var(--ink3); cursor: pointer;
  background: none; border: none; border-radius: 4px;
  padding: 3px 8px; font-family: inherit;
  white-space: nowrap; flex-shrink: 0; transition: all .14s;
}

.wk-show-all:hover { background: var(--border-s); color: var(--ink2); }

.wk-show-all svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }

.wk-show-all.is-showing-all { color: var(--c-blue); }

/* ================================================================
   STAGGERED CHILD ANIMATIONS (applied by JS on panel enter)
   ================================================================ */
/* Containers fade up */
.wk-stagger .wk-container {
  opacity: 0;
  animation: wkFadeUp .32s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .04s;
}

/* GL cards stagger in */
.wk-stagger .gl-card {
  opacity: 0;
  animation: wkCardIn .35s cubic-bezier(.22,1,.36,1) both;
}

.wk-stagger .gl-card:nth-child(1)  { animation-delay: .06s; }

.wk-stagger .gl-card:nth-child(2)  { animation-delay: .10s; }

.wk-stagger .gl-card:nth-child(3)  { animation-delay: .14s; }

.wk-stagger .gl-card:nth-child(4)  { animation-delay: .18s; }

.wk-stagger .gl-card:nth-child(5)  { animation-delay: .22s; }

.wk-stagger .gl-card:nth-child(6)  { animation-delay: .26s; }

.wk-stagger .gl-card:nth-child(7)  { animation-delay: .30s; }

.wk-stagger .gl-card:nth-child(8)  { animation-delay: .34s; }

.wk-stagger .gl-card:nth-child(9)  { animation-delay: .38s; }

.wk-stagger .gl-card:nth-child(10) { animation-delay: .42s; }

/* Support modules slide in from right */
.wk-stagger .wk-support-module {
  opacity: 0;
  animation: wkSupportIn .36s cubic-bezier(.22,1,.36,1) both;
}

.wk-stagger .wk-support-module:nth-child(1) { animation-delay: .10s; }

.wk-stagger .wk-support-module:nth-child(2) { animation-delay: .18s; }

.wk-stagger .wk-support-module:nth-child(3) { animation-delay: .26s; }

/* Focus groups stagger */
.wk-stagger .wk-focus-group {
  opacity: 0;
  animation: wkFadeUp .32s cubic-bezier(.22,1,.36,1) both;
}

.wk-stagger .wk-focus-group:nth-child(1) { animation-delay: .06s; }

.wk-stagger .wk-focus-group:nth-child(2) { animation-delay: .14s; }

.wk-stagger .wk-focus-group:nth-child(3) { animation-delay: .22s; }

.wk-stagger .wk-focus-group:nth-child(4) { animation-delay: .30s; }

/* Distribution bars animate width */
.wk-stagger .wk-dist-bar {
  animation: wkBarGrow .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .2s;
}

@keyframes wkBarGrow { from { width: 0; } }

/* Progress bars animate width */
.wk-stagger .wk-goal-progress-fill,
.wk-stagger .wk-member-bar,
.wk-stagger .wk-workload-fill {
  animation: wkBarGrow .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .25s;
}

/* Health rows stagger */
.wk-stagger .gl-health-row {
  opacity: 0;
  animation: wkFadeUp .24s cubic-bezier(.22,1,.36,1) both;
}

.wk-stagger .gl-health-row:nth-child(1) { animation-delay: .12s; }

.wk-stagger .gl-health-row:nth-child(2) { animation-delay: .16s; }

.wk-stagger .gl-health-row:nth-child(3) { animation-delay: .20s; }

.wk-stagger .gl-health-row:nth-child(4) { animation-delay: .24s; }

/* Insight notes fade in last */
.wk-stagger .gl-insight-note {
  opacity: 0;
  animation: wkFadeUp .3s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .35s;
}

/* Focus search bar slides down */
.wk-stagger .wk-focus-head {
  opacity: 0;
  animation: wkSlideDown .28s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .02s;
}

/* ================================================================
   CONTENT TRANSITIONS — smooth changes for panels, lists, cards
   ================================================================ */
/* Focus group show/hide — uses display:none via .is-empty at line 418 */

/* Focus list items fade-slide in */
.wk-focus-list .mw-task-card,
.wk-focus-list .gl-card,
.wk-focus-list .wk-goal-card,
.wk-focus-list .wk-dp-card {
  transition: opacity .2s ease, transform .2s ease;
}

.wk-focus-list .wk-dp-card { width: 100%; box-sizing: border-box; }

.wk-focus-list .wk-goal-card { width: 100%; box-sizing: border-box; }

/* Scorecard count number transitions */
.ax-value, .wk-focus-count, .wk-focus-group-count {
  transition: color .2s ease;
}

/* Support module transitions */
.wk-support-module {
  transition: opacity .2s ease, transform .2s ease;
}

/* New card entry animation */
@keyframes wkCardEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.wk-card-enter {
  animation: wkCardEnter .24s cubic-bezier(.22,1,.36,1) both;
}

.tp-subtask.is-done .tp-subtask-text { text-decoration: line-through; color: var(--ink4); }

.tp-subtask-del {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--ink4);
  opacity: 0; transition: all .15s;
}

.tp-subtask-del svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

.tp-subtask:hover .tp-subtask-del { opacity: 1; }

.tp-subtask-del:hover { background: var(--c-red-bg); color: var(--c-red); }

/* ── Attachments ── */
.tp-attachments { min-height: 32px; }

.tp-attach-list { display: flex; flex-direction: column; gap: 4px; }

.tp-attach-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px;
  background: var(--bg, #f9fafb); border: 1px solid var(--border-s, #f1f5f9);
  transition: background .15s;
}

.tp-attach-item:hover { background: var(--hover-bg, #f1f5f9); }

.tp-attach-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink3, #6b7280); }

.tp-attach-icon svg { width: 16px; height: 16px; }

.tp-attach-name {
  flex: 1; font-size: 12px; color: var(--ink, #161616);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tp-attach-rm {
  width: 18px; height: 18px; border: none; background: none;
  color: var(--ink4, #9ca3af); cursor: pointer; padding: 0;
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, color .15s;
}

.tp-attach-item:hover .tp-attach-rm { opacity: 1; }

.tp-attach-rm:hover { color: var(--c-red, #ef4444); }

.tp-attach-rm svg { width: 14px; height: 14px; }

.tp-attach-actions {
  display: flex; gap: 8px; margin-top: 8px;
}

.tp-attach-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 600; font-family: var(--f);
  color: var(--c-blue, #0284c7); background: rgba(2,132,199,.06);
  border: 1px solid rgba(2,132,199,.15); cursor: pointer;
  transition: background .15s, border-color .15s;
}

.tp-attach-btn:hover { background: rgba(2,132,199,.12); border-color: rgba(2,132,199,.25); }

.tp-attach-btn svg { width: 14px; height: 14px; }

/* ── Rail rows (sidebar context/deadline/deps) ── */
.tp-rail-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 0; border-bottom: 1px solid var(--border-s, #f1f5f9);
}

.tp-rail-row:last-child { border-bottom: none; }

.tp-rail-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.tp-rail-label { flex: 1; font-size: 11px; color: var(--ink2, #525252); }

.tp-rail-val { font-size: 11px; font-weight: 700; color: var(--ink, #161616); }

.tp-rail-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px; margin-top: 4px;
}

.tp-rail-tag--green { background: var(--c-green-bg); color: var(--c-green); }

.tp-rail-tag--yellow { background: var(--c-yellow-bg); color: var(--c-yellow); }

.tp-rail-tag--red { background: var(--c-red-bg); color: var(--c-red); }

.tp-rail-tag--blue { background: var(--c-blue-bg); color: var(--c-blue); }

/* ── Task Profile: View-Only Mode ── */
.tp-view-only .tp-sb-field { pointer-events: none; cursor: default; }

.tp-view-only .tp-sb-field:hover { background: transparent; }

/* …EXCEPT the rows whose click NAVIGATES rather than edits. work.js has always
   had "view mode opens the linked deliverable / goal" branches, but this rule
   swallowed the click before they could run — the row showed cursor:pointer and
   then did nothing, which is the worst of both. Deliverable is also how a task
   says which output it feeds, so it has to work without hunting for Edit. */
.tp-view-only .tp-sb-field[data-field="deliverable"],
.tp-view-only .tp-sb-field[data-field="goal"] { pointer-events: auto; cursor: pointer; }

.tp-view-only .tp-sb-field[data-field="deliverable"]:hover,
.tp-view-only .tp-sb-field[data-field="goal"]:hover { background: var(--border-s, #f1f5f9); }

.tp-view-only .tp-header-title { cursor: default; }

.tp-view-only .tp-header-title:focus { outline: none; }

.tp-view-only .tp-editor { cursor: default; }

.tp-view-only .tp-editor:focus { outline: none; }

.tp-view-only .tp-add-row { display: none; }

.tp-view-only .tp-subtask-del { display: none; }

/* The Delete button is gone — it's a ⋯ menu item now, and the menu itself
   decides: Delete/Save as template are only built when the user can edit,
   while Export stays available to viewers. So the kebab is NOT hidden here. */
.tp-view-only #tpExpandBtn { display: none; }

.tp-view-only .tp-header-right::before {
  content: 'View Only';
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink4, #94a3b8);
  background: var(--c-green-bg, #f0fdf4);
  padding: 3px 10px; border-radius: 6px;
  margin-right: 4px;
}

/* ── Full Assignment Designer Modal ── */
.wk-designer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 55000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}

.wk-designer-overlay.is-visible {
  opacity: 1; pointer-events: auto;
}

.wk-designer-frame {
  position: relative;
  width: 94vw; height: 92vh;
  background: var(--surface, #fff);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(.97);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}

.wk-designer-overlay.is-visible .wk-designer-frame {
  transform: translateY(0) scale(1);
}

.wk-designer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border, #e0e0e0);
  background: var(--surface, #fff);
  flex-shrink: 0;
}

.wk-designer-title {
  font-size: 14px; font-weight: 700;
  color: var(--ink, #161616);
}

.wk-designer-close {
  width: 32px; height: 32px;
  border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; cursor: pointer;
  color: var(--ink3, #8d8d8d);
  transition: all .15s ease;
}

.wk-designer-close:hover {
  background: #f4f4f4; color: var(--ink, #161616);
}

.wk-designer-close svg { width: 18px; height: 18px; }

.wk-designer-iframe {
  flex: 1; width: 100%; border: none;
}

.wk-designer-frame.is-loading .wk-designer-iframe {
  opacity: 0;
}

.wk-designer-frame.is-loading::after {
  content: ''; position: absolute; inset: 0; top: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface, #fff);
  background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' stroke='%233b82f6'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(1 1)' stroke-width='2'%3E%3Ccircle stroke-opacity='.25' cx='18' cy='18' r='18'/%3E%3Cpath d='M36 18c0-9.94-8.06-18-18-18'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* ── Toast with Undo ── */
.wk-toast.is-visible { pointer-events: auto; }

.wk-toast { display: flex; align-items: center; gap: 10px; }

.wk-undo-btn {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 12px; border-radius: 6px; cursor: pointer;
  transition: background .15s;
}

.wk-undo-btn:hover { background: rgba(255,255,255,.3); }

/* ── Completed FAB ── */
.wk-completed-fab {
  display: none; /* FAB removed from UI */
}

/* ── Completed Drawer ── */
.wk-completed-drawer {
  position: fixed; bottom: 0; right: 24px; z-index: 9999;
  width: 380px; max-height: 60vh;
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-bottom: none; border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.12);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
}

.wk-completed-drawer.is-open { transform: translateY(0); }

.wk-completed-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
}

.wk-completed-head-title {
  font-size: 14px; font-weight: 700; color: var(--ink1, #0f172a); flex: 1;
}

.wk-completed-head-hint {
  font-size: 11px; color: var(--ink4, #94a3b8); white-space: nowrap;
}

.wk-completed-close {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--ink3, #64748b); border-radius: 6px;
}

.wk-completed-close:hover { background: var(--c-green-bg, #f0fdf4); color: var(--c-green); }

.wk-completed-close svg { width: 16px; height: 16px; }

.wk-completed-body {
  overflow-y: auto; flex: 1; padding: 8px 0;
}

.wk-completed-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; cursor: pointer;
  transition: background .15s;
}

.wk-completed-item:hover { background: var(--c-green-bg, #f0fdf4); }

.wk-completed-info { flex: 1; min-width: 0; }

.wk-completed-title {
  font-size: 13px; font-weight: 600; color: var(--ink2, #334155);
  text-decoration: line-through; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.wk-completed-meta {
  display: flex; gap: 8px; font-size: 11px; color: var(--ink4, #94a3b8); margin-top: 2px;
}

/* ── Focus item checkbox (injected by upgradeStaticCards) ── */
.wk-focus-item .wk-task-check {
  flex-shrink: 0; order: -1; margin-right: -4px;
}

.wk-focus-item.is-done .wk-fi-name { text-decoration: line-through; color: var(--ink3); }

.wk-focus-item.is-done { opacity: .55; }

/* ── Cursor for clickable card bodies ── */
.mw-task-card-body { cursor: pointer; }

.wk-fi-body { cursor: pointer; }

/* ── Inline edit popover ── */
/* Positioned in VIEWPORT coordinates and re-parented to the overlay at show
   time (see _liftEditPopover). .tp-popup has a transform AND overflow:hidden, so
   a popover living inside it is both clipped by it and unable to escape — which
   is why these editors ran off the screen instead of being clamped to it.
   z-index sits above the popup's own layers; the overlay is the stacking
   context, so this is always drawn over the profile content. */
.tp-edit-popover {
  position: fixed; z-index: 400;
  background: var(--surf, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
  padding: 0; min-width: 220px;
  display: none; overflow: hidden;
  opacity: 0; transform: translateY(6px) scale(.97);
}

/* Only the task-profile rail editor is viewport-positioned. `.tp-edit-popover` is
   a shared class: #tpAsgnPopover and the JS-built pickers (ep-goal-picker,
   pd-owner-picker, .wkpp) also wear it. Those either force `position: fixed`
   inline or, like .tp-asgn-popover, re-declare `absolute` later in this file and
   place themselves in POPUP-relative coordinates — so pinning this to the id
   keeps them working no matter how the cascade is later reordered. */
#tpEditPopover { position: fixed; }

/* Once it has landed once, MOVES glide instead of jumping — switching mode,
   opening the weekday row, entering the calendar sub-view. Never applied to the
   first paint, or it would slide in from wherever the last popover sat. */
.tp-edit-popover.is-settled {
  transition: top .16s cubic-bezier(.2,.8,.2,1),
              left .16s cubic-bezier(.2,.8,.2,1),
              max-height .16s cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: reduce) {
.tp-edit-popover.is-settled { transition: none; }
}

.tp-edit-popover.is-visible {
  display: block;
  animation: tpPopIn .18s cubic-bezier(.2,.8,.2,1) forwards;
}

/* ── A picker with a pinned create row is a COLUMN, not a tall stack ───────────
   _positionEditPopover caps the popover's height and, for a plain stack, puts the
   overflow on the popover itself — which would scroll the pinned row out of view
   the moment the list is long, i.e. exactly when you need it. Same shell the
   schedule editor uses: the body carries the min-height:0 chain so the head,
   search and create row hold the top and only the options scroll. */
.tp-edit-popover.is-pinned.is-visible { display: flex; flex-direction: column; }

.tp-edit-popover.is-pinned > .tp-edit-popover-body {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}

.tp-edit-popover.is-pinned .tp-drop-head,
.tp-edit-popover.is-pinned .tp-drop-note,
.tp-edit-popover.is-pinned .tp-drop-search-wrap { flex: 0 0 auto; }

.tp-edit-popover.is-pinned .tp-drop-list {
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
}

/* Custom dropdown list */
.tp-drop-head {
  padding: 10px 14px; border-bottom: 1px solid var(--border, #e2e8f0);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink4, #94a3b8);
}

.tp-drop-list {
  max-height: 220px; overflow-y: auto; padding: 4px;
}

.tp-drop-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  transition: background .15s ease, color .15s ease; font-size: 13px; font-weight: 600;
  color: var(--ink, #161616);
}

.tp-drop-item:hover { background: var(--border-s, #f1f5f9); }

.tp-drop-item.is-active { background: var(--c-blue-bg, #e0f2fe); color: var(--c-blue, #0284c7); }

/* Inline "+ Create new …" row at the bottom of an entity picker. */
.tp-drop-create,
.tp-drop-new {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 6px 6px; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--c-indigo-700, #4338ca);
  border-top: 1px solid var(--border-s, #f1f5f9);
  transition: background .15s ease;
}

.tp-drop-create:hover,
.tp-drop-new:hover { background: var(--c-indigo-50, #eef2ff); }

/* ── The pinned "＋ Create a new …" row every record picker on the task rail
   carries: Company, Project, Work Stream, Deliverable, Goal. ONE class, ONE look,
   ONE position — at the TOP, above the options and outside the scrolling list, so
   it is the first thing you see when the record you wanted isn't there. Sits on a
   rule BELOW it (the bottom-anchored .tp-drop-create rule draws its rule above),
   and it never shrinks away when the list is long. */
.tp-drop-new {
  align-items: flex-start;
  flex: 0 0 auto;
  margin: 6px 6px 4px;
  border-top: 0; border-bottom: 1px solid var(--border-s, #f1f5f9);
  border-radius: 8px 8px 0 0; padding-bottom: 10px;
}

.tp-drop-new:focus-visible {
  outline: 2px solid var(--c-indigo-500, #6366f1); outline-offset: 1px;
}

/* ── "✦ Find it": the AI that picks the parent, pinned ABOVE the create row.
   Same shell as .tp-drop-new so the two pinned rows read as one block, in the
   violet that marks an AI action everywhere else in this app. It answers IN
   PLACE — the row becomes the verdict + its reason, and the list stays right
   underneath to overrule it. */
.tp-drop-find {
  display: flex; align-items: flex-start; gap: 8px; flex: 0 0 auto;
  margin: 6px 6px 0; padding: 9px 10px;
  border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 700;
  color: #6d28d9;
  background: linear-gradient(135deg, #faf5ff, #eef2ff);
  border: 1px solid #ddd6fe;
  transition: border-color .15s ease, background .15s ease;
}

.tp-drop-find:hover { border-color: #a78bfa; }

.tp-drop-find:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 1px; }

.tp-drop-find.is-off { opacity: .55; cursor: default; }

.tp-drop-find.is-off:hover { border-color: #ddd6fe; }

.tp-drop-find.is-busy { cursor: progress; }

.tp-drop-find.is-hit { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }

.tp-drop-find.is-none { color: var(--ink2, #475569); background: var(--bg-s, #f8fafc); border-color: var(--border-s, #e2e8f0); }

.tp-drop-find-spark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto;
  background: #ede9fe; color: #6d28d9;
}

.tp-drop-find.is-busy .tp-drop-find-spark svg { animation: tpFindSpin 1.1s linear infinite; }

@keyframes tpFindSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
.tp-drop-find.is-busy .tp-drop-find-spark svg { animation: none; }
}

/* A verdict is a sentence, not a label — let it wrap instead of ellipsing. */
.tp-drop-find .tp-drop-create-two { min-width: 0; }

.tp-drop-find .tp-drop-create-label { white-space: normal; }

.tp-drop-find .tp-drop-create-two small { color: inherit; opacity: .78; }

.tp-drop-create-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--c-indigo-100, #e0e7ff); color: var(--c-indigo-700, #4338ca);
  font-weight: 800; font-size: 15px; line-height: 1; flex: 0 0 auto;
}

.tp-drop-create-hint { margin-left: auto; font-size: 11px; font-weight: 600; opacity: .55; }

/* A create row that opens a REAL popup rather than creating inline says what
   will happen, on a second line — "create" and "opens a form you then fill in"
   are different promises. */
.tp-drop-create--deliv { align-items: flex-start; }

.tp-drop-create-two { display: flex; flex-direction: column; gap: 2px; }

.tp-drop-create-two small {
  font-size: 10.5px; font-weight: 600; line-height: 1.4;
  color: var(--ink4, #94a3b8); letter-spacing: 0;
}

/* What linking a deliverable actually MEANS, said once at the top of the picker
   instead of assumed. */
.tp-drop-note {
  padding: 9px 14px 10px; border-bottom: 1px solid var(--border-s, #f1f5f9);
  font-size: 11px; line-height: 1.5; color: var(--ink3, #64748b);
}

.tp-drop-note b { color: var(--ink, #161616); font-weight: 750; }

.tp-drop-empty { padding: 10px 12px; font-size: 11.5px; line-height: 1.5; color: var(--ink4, #94a3b8); }

/* Two-line picker rows: the name, then where it lives and what stage it's at. */
.tp-drop-two { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.tp-drop-t { font-size: 13px; font-weight: 600; }

.tp-drop-s { font-size: 10.5px; font-weight: 600; color: var(--ink4, #94a3b8); }

.tp-drop-item--deliv { align-items: flex-start; }

.tp-drop-item--deliv .tp-drop-check { margin-top: 3px; }

.tp-drop-item.is-active .tp-drop-s { color: inherit; opacity: .7; }

.tp-drop-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-blue-bg, #e0f2fe); color: var(--c-blue, #0284c7);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; flex-shrink: 0; text-transform: uppercase;
  overflow: hidden;
}

.tp-drop-avatar--img { background: transparent; }

.tp-drop-avatar--img img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}

.tp-drop-check {
  margin-left: auto; width: 16px; height: 16px; color: var(--c-blue, #0284c7);
  display: none; flex-shrink: 0;
}

.tp-drop-item.is-active .tp-drop-check { display: block; }

.tp-drop-prio-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}

/* ── Task tag editor (Tags chip popover) ── */
.tp-tag-editor { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 10px; }

.tp-tag-add-row { display: flex; gap: 6px; }

.tp-tag-input {
  flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 6px 8px;
  border: 1px solid var(--line, #e2e8f0); border-radius: 8px; outline: none;
}

.tp-tag-input:focus { border-color: var(--wt-theme-primary, #4f46e5); }

.tp-tag-add-btn {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 6px 12px;
  border: none; border-radius: 8px; cursor: pointer;
  background: var(--wt-theme-primary, #4f46e5); color: #fff;
}

.tp-tag-sub { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink4, #94a3b8); margin-bottom: 5px; }

.tp-tag-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.tp-tag-chip {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600;
  padding: 3px 4px 3px 8px; border-radius: 999px;
  background: var(--c-blue-bg, #e0f2fe); color: var(--c-blue, #0284c7);
}

.tp-tag-chip--auto { padding: 3px 8px; background: var(--wt-surface-2, #f1f5f9); color: var(--ink3, #64748b); }

.tp-tag-x {
  border: none; background: transparent; cursor: pointer; line-height: 1;
  font-size: 14px; color: currentColor; opacity: .6; padding: 0 2px;
}

.tp-tag-x:hover { opacity: 1; }

.tp-tag-empty { font-size: 11px; color: var(--ink4, #94a3b8); font-style: italic; }

/* ── Schedule summary line + the due-date editor's time-of-day picker ── */
.tp-sched-summary { padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: #0f172a; background: #f0fdf4; border-bottom: 1px solid #dcfce7; }

.tp-due-timerow { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-top: 1px solid #f1f5f9; }

.tp-due-timelbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }

.tp-tp { display: flex; gap: 8px; align-items: stretch; }

.tp-tp-col { flex: 1; max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scroll-snap-type: y proximity; border: 1px solid #eef2f7; border-radius: 9px; padding: 4px; scrollbar-width: thin; }

.tp-tp-col::-webkit-scrollbar { width: 6px; }

.tp-tp-col::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.tp-tp-opt { scroll-snap-align: center; padding: 7px 0; border: none; background: none; border-radius: 7px; font: 600 13px/1 inherit; color: #475569; cursor: pointer; transition: background .12s, color .12s; }

.tp-tp-opt:hover { background: #f1f5f9; }

.tp-tp-opt[data-sel="1"] { background: #10b981; color: #fff; }

.tp-tp-ampm { display: flex; flex-direction: column; gap: 6px; justify-content: center; flex: 0 0 auto; }

.tp-tp-ap { padding: 10px 14px; border: 1px solid #e2e8f0; background: #fff; border-radius: 9px; font: 700 12px/1 inherit; color: #64748b; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }

.tp-tp-ap[data-sel="1"] { background: #10b981; border-color: #10b981; color: #fff; }

/* ── Together / Separately: animated segmented control ── */
.tp-assign-mode { align-items: center; gap: 8px; margin: 2px 0 10px; padding: 0 2px; }

.tp-assign-mode-cap { font-size: 11px; font-weight: 600; color: #64748b; white-space: nowrap; }

.tp-seg { position: relative; display: inline-flex; flex: 1; background: #f1f5f9; border-radius: 9px; padding: 3px; overflow: hidden; }

.tp-seg-thumb { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); background: #fff; border-radius: 7px; box-shadow: 0 1px 3px rgba(15,23,42,.14); transition: transform .24s cubic-bezier(.4,0,.2,1); }

.tp-assign-mode[data-mode="separate"] .tp-seg-thumb { transform: translateX(100%); }

.tp-seg-btn { position: relative; z-index: 1; flex: 1; border: none; background: none; padding: 7px 10px; font: 600 12px/1 inherit; color: #64748b; cursor: pointer; transition: color .2s; }

.tp-seg-btn.is-on { color: #0f172a; }

.tp-assign-mode-hint { margin: -6px 0 10px; padding: 0 2px; font-size: 11px; line-height: 1.45; color: #64748b; }

.tp-assign-mode-hint b { font-weight: 600; color: #334155; }

/* ── WkPeoplePicker (shared bulk avatar picker) ── reuses tp-drop-* look,
   adds pinned "Assigned" group, live count, and a Clear/Done footer. */
.tp-edit-popover.wkpp { display: block; z-index: 1000060; }

.wkpp .wkpp-head {
  display: flex; align-items: center; gap: 8px;
}

.wkpp .wkpp-head-pill {
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  color: var(--c-blue, #0284c7); background: var(--c-blue-bg, #e0f2fe);
  padding: 2px 7px; border-radius: 999px; text-transform: none;
}

.wkpp .wkpp-count {
  margin-left: auto; font-size: 10px; font-weight: 700; color: var(--ink4, #94a3b8);
  text-transform: none; letter-spacing: 0;
}

.wkpp .wkpp-list { max-height: 264px; }

.wkpp .wkpp-name { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }

.wkpp .wkpp-name > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wkpp .wkpp-sub { font-weight: 600; opacity: .55; font-size: 11px; }

.wkpp .wkpp-partial {
  font-size: 9px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--c-amber-700, #b45309); background: var(--c-amber-50, #fffbeb);
  border: 1px solid var(--c-amber-200, #fde68a);
  padding: 1px 5px; border-radius: 5px; flex: 0 0 auto;
}

.wkpp .wkpp-group-label {
  padding: 8px 12px 4px; font-size: 9px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink4, #94a3b8);
}

.wkpp .wkpp-divider { height: 1px; background: var(--border-s, #f1f5f9); margin: 4px 8px; }

.wkpp .wkpp-empty { padding: 18px 14px; text-align: center; font-size: 12px; color: var(--ink4, #94a3b8); }

.wkpp .wkpp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-top: 1px solid var(--border, #e2e8f0);
  position: sticky; bottom: 0; background: var(--surf, #fff);
}

.wkpp .wkpp-clear {
  border: none; background: none; cursor: pointer; font-family: var(--f);
  font-size: 12px; font-weight: 600; color: var(--ink4, #94a3b8); padding: 6px 8px;
  border-radius: 7px; transition: background .12s, color .12s;
}

.wkpp .wkpp-clear:hover { background: var(--border-s, #f1f5f9); color: var(--ink, #161616); }

.wkpp .wkpp-done {
  border: none; cursor: pointer; font-family: var(--f); font-size: 12px; font-weight: 700;
  color: #fff; background: var(--c-blue, #0284c7); padding: 6px 16px; border-radius: 8px;
  transition: filter .12s;
}

.wkpp .wkpp-done:hover { filter: brightness(1.06); }

/* Custom calendar */
.tp-cal { padding: 12px; }

.tp-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}

.tp-cal-title { font-size: 13px; font-weight: 700; color: var(--ink, #161616); }

.tp-cal-nav {
  width: 28px; height: 28px; border-radius: 7px; display: flex;
  align-items: center; justify-content: center; border: none;
  background: none; cursor: pointer; color: var(--ink3); transition: all .12s;
}

.tp-cal-nav:hover { background: var(--border-s, #f1f5f9); color: var(--ink); }

.tp-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}

.tp-cal-dow {
  text-align: center; font-size: 9px; font-weight: 700;
  color: var(--ink4, #94a3b8); padding: 4px 0; text-transform: uppercase;
}

.tp-cal-day {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--ink, #161616);
  cursor: pointer; transition: all .12s; border: none; background: none;
  margin: 0 auto;
}

.tp-cal-day:hover { background: var(--border-s, #f1f5f9); }

.tp-cal-day.is-other { color: var(--ink4, #94a3b8); opacity: .5; }

.tp-cal-day.is-disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; pointer-events: none; }

.tp-cal-day.is-today { background: var(--c-blue-bg, #e0f2fe); color: var(--c-blue, #0284c7); font-weight: 800; }

.tp-cal-day.is-selected { background: var(--c-blue, #0284c7); color: #fff; font-weight: 800; }

.tp-cal-day.is-selected:hover { background: var(--c-blue, #0284c7); }

.tp-cal-actions {
  display: flex; justify-content: space-between; border-top: 1px solid var(--border, #e2e8f0);
  padding: 8px 12px; margin-top: 4px;
}

.tp-cal-clear {
  font-size: 11px; font-weight: 600; color: var(--c-red, #ef4444);
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; transition: background .12s;
}

.tp-cal-clear:hover { background: var(--c-red-bg, #fff1f1); }

.tp-cal-today-btn {
  font-size: 11px; font-weight: 600; color: var(--c-blue, #0284c7);
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; transition: background .12s;
}

.tp-cal-today-btn:hover { background: var(--c-blue-bg, #e0f2fe); }

/* ── Clickable task rows ── */
.wk-task-body { cursor: pointer; }

.wk-task-body:hover .wk-task-title { color: var(--c-blue); }

/* ── Submission Block ── */
/* ── Submission section (same visual weight as Description / Checklist) ── */
.tp-sub-wrap {
  margin-bottom: 24px;
  animation: tpFadeSlideIn .25s ease both;
}

/* Header row — icon + label + badge + type toggle */
.tp-sub-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-s, #f1f5f9);
}

.tp-sub-head-left {
  display: flex; align-items: center; gap: 6px;
}

.tp-sub-head-left > svg {
  color: var(--ink3, #8d8d8d); flex-shrink: 0;
}

.tp-sub-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink2, #525252);
}

.tp-sub-badge {
  font-size: 8px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; padding: 1px 6px; border-radius: 8px;
  display: inline-flex; line-height: 1.4;
}

.tp-sub-badge:empty { display: none; }

.tp-sub-badge[data-status="pending"]   { background: var(--c-yellow-bg, #fef9c3); color: var(--c-yellow, #ca8a04); }

.tp-sub-badge[data-status="submitted"] { background: var(--c-green-bg, #f0fdf4); color: var(--c-green, #16a34a); }

.tp-sub-badge[data-status="approved"]  { background: var(--c-blue-bg, #e0f2fe); color: var(--c-blue, #0284c7); }

.tp-sub-head-right { display: flex; align-items: center; }

/* Type toggle — ghost underline pills */
.tp-sub-type-toggle {
  display: flex; gap: 2px; border-radius: 6px;
  background: var(--border-s, #f1f5f9); padding: 2px;
}

.tp-sub-type-btn {
  padding: 3px 10px; border: none; border-radius: 5px;
  font-size: 10px; font-weight: 600; color: var(--ink3, #8d8d8d);
  background: transparent; cursor: pointer; font-family: var(--f);
  transition: all .18s cubic-bezier(.2,.8,.2,1); white-space: nowrap;
}

.tp-sub-type-btn:hover { color: var(--ink2, #525252); }

.tp-sub-type-btn.is-active {
  background: var(--surf, #fff); color: var(--ink, #161616);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Body (digital / in-person) */
.tp-sub-body { animation: tpFadeSlideIn .2s ease .04s both; }

/* Dropzone */
.tp-sub-dropzone {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 16px; border-radius: 10px;
  border: 1.5px dashed var(--border, #d0d5dd);
  color: var(--ink4, #94a3b8); font-size: 11px;
  cursor: pointer; transition: all .2s cubic-bezier(.2,.8,.2,1);
}

.tp-sub-dropzone:hover {
  border-color: var(--c-blue, #0284c7); color: var(--c-blue, #0284c7);
  background: rgba(2,132,199,.02);
}

.tp-sub-dropzone.is-dragover {
  border-color: var(--c-blue); background: rgba(2,132,199,.04); color: var(--c-blue);
}

.tp-sub-dropzone em {
  font-style: normal; color: var(--c-blue, #0284c7); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(2,132,199,.3);
  text-underline-offset: 2px;
}

/* File chips */
.tp-sub-files { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

.tp-sub-files:empty { display: none; }

.tp-sub-file-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 6px; border-radius: 6px;
  background: var(--border-s, #f1f5f9); font-size: 10px; color: var(--ink2, #525252);
  transition: background .12s;
}

.tp-sub-file-chip:hover { background: var(--border, #e2e8f0); }

.tp-sub-file-chip svg {
  width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0;
}

.tp-sub-file-rm {
  margin-left: 2px; background: none; border: none; cursor: pointer;
  color: var(--ink4, #94a3b8); padding: 0; line-height: 1;
  font-size: 12px; transition: color .12s;
}

.tp-sub-file-rm:hover { color: var(--c-red); }

/* Action row — right-aligned submit */
.tp-sub-action-row {
  display: flex; justify-content: flex-end; margin-top: 10px;
}

.tp-sub-submit-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 18px; border-radius: 8px; border: none;
  background: var(--c-blue, #0284c7); color: #fff;
  font-size: 11px; font-weight: 700; cursor: pointer;
  font-family: var(--f); transition: all .18s cubic-bezier(.2,.8,.2,1);
}

.tp-sub-submit-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(2,132,199,.2); }

.tp-sub-submit-btn--green { background: var(--c-green, #16a34a); }

.tp-sub-submit-btn--green:hover { box-shadow: 0 3px 10px rgba(22,163,74,.2); }

/* ── Confirmed state ── */
.tp-sub-done { animation: tpFadeSlideIn .25s ease both; }

.tp-sub-done-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0; font-size: 11px; margin-bottom: 4px;
}

.tp-sub-done-row > svg { color: var(--c-green, #16a34a); flex-shrink: 0; }

.tp-sub-done-row strong { color: var(--c-green, #16a34a); font-weight: 700; font-size: 11px; }

.tp-sub-done-row span { color: var(--ink4, #94a3b8); font-size: 10px; }

.tp-sub-undo {
  font-size: 10px; font-weight: 600; color: var(--c-red, #ef4444);
  background: none; border: none; cursor: pointer; padding: 2px 6px;
  border-radius: 5px; transition: background .12s; margin-left: auto;
  font-family: var(--f);
}

.tp-sub-undo:hover { background: var(--c-red-bg, #fff1f1); }

/* Submitted files review list */
.tp-sub-done-files { display: flex; flex-wrap: wrap; gap: 4px; }

.tp-sub-done-files:empty { display: none; }

.tp-sub-done-file {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 6px; border-radius: 6px;
  background: var(--c-green-bg, #f0fdf4); font-size: 10px;
  color: var(--c-green, #16a34a); font-weight: 500;
  border: 1px solid rgba(22,163,74,.1);
  transition: background .15s, box-shadow .15s;
}

.tp-sub-done-file--dl {
  cursor: pointer;
}

.tp-sub-done-file--dl:hover {
  background: rgba(22,163,74,.12); box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.tp-sub-done-file svg {
  width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0;
}

.tp-sub-dl-icon {
  width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2;
  margin-left: 2px; opacity: .6; flex-shrink: 0;
}

.tp-sub-done-file--dl:hover .tp-sub-dl-icon { opacity: 1; }

/* View-only overrides — assignees can still submit */
.tp-view-only .tp-sub-wrap { pointer-events: auto; }

/* ═══════════════════════════════════════════════
   EXPAND TO ASSIGNMENT — Toggle + Sections
   ═══════════════════════════════════════════════ */

/* Assignment block */
.tp-assignment-block { animation: tpAsgnSlide .3s ease; }

@keyframes tpAsgnSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tp-assignment-block .tp-block-head svg {
  color: var(--_head-c, var(--ink3));
}

/* Reuse step/deliverable/criteria lists — same as subtask pattern */
.tp-step-list { margin-bottom: 6px; }

.tp-step-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  transition: background .12s;
}

.tp-step-item:hover { background: var(--border-s); }

.tp-step-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-blue-bg); color: var(--c-blue);
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.tp-step-text {
  flex: 1; font-size: 13px; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}

.tp-step-rm {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--ink4); opacity: 0; transition: all .12s;
}

.tp-step-item:hover .tp-step-rm { opacity: 1; }

.tp-step-rm:hover { background: var(--c-red-bg); color: var(--c-red); }

.tp-step-rm svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── Deliverables (clickable) ── */
.tp-deliverable-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }

.tp-deliverable-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; transition: all .15s;
  border: 1px solid transparent;
}

.tp-deliverable-item:hover {
  background: var(--c-blue-bg, #e0f2fe);
  border-color: var(--c-blue, #0284c7);
}

.tp-deliverable-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-amber-bg, #fef3c7); color: var(--c-amber, #d97706);
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.tp-deliverable-text {
  flex: 1; font-size: 13px; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}

.tp-deliverable-arrow {
  width: 14px; height: 14px; color: var(--ink4);
  flex-shrink: 0; opacity: 0; transition: opacity .15s;
}

.tp-deliverable-item:hover .tp-deliverable-arrow { opacity: 1; }

.tp-deliverable-rm {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--ink4); opacity: 0; transition: all .12s;
}

.tp-deliverable-item:hover .tp-deliverable-rm { opacity: 1; }

.tp-deliverable-rm:hover { background: var(--c-red-bg); color: var(--c-red); }

.tp-deliverable-rm svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── Deliverable detail popup ── */
.tp-deliv-popup {
  display: none;
  position: absolute; inset: 0;
  background: rgba(0,0,0,.25);
  z-index: 12;
  align-items: center; justify-content: center;
  border-radius: 14px;
}

.tp-deliv-popup.is-open {
  display: flex;
}

.tp-deliv-popup-inner {
  width: 480px; max-width: 92%; max-height: 70vh;
  background: var(--surf, #fff);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.2);
  overflow: hidden;
  animation: tpPopIn .22s cubic-bezier(.2,.8,.2,1) both;
}

.tp-deliv-popup-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.tp-deliv-popup-head svg {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--c-amber, #d97706);
}

.tp-deliv-popup-title {
  flex: 1; font-size: 14px; font-weight: 700; color: var(--ink, #161616);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tp-deliv-popup-close {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--ink3); transition: all .15s;
}

.tp-deliv-popup-close:hover { background: #f4f4f4; color: var(--ink); }

.tp-deliv-popup-close svg { width: 16px; height: 16px; }

.tp-deliv-popup-body { padding: 16px 18px; overflow-y: auto; max-height: calc(70vh - 54px); }

.tp-deliv-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 8px;
  font-size: 11px; font-weight: 700;
  background: var(--c-blue-bg); color: var(--c-blue);
}

.tp-deliv-status.is-submitted { background: var(--c-green-bg); color: var(--c-green); }

.tp-deliv-notes {
  min-height: 100px;
}

@media (max-width: 780px) {
.tp-sidebar { display: none; }

.tp-pill { font-size: 11px; padding: 5px 12px; }

.tp-notes-split { flex-direction: column; }
}

/* Assignment settings grid */
.tp-asgn-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}

.tp-asgn-cell { display: flex; flex-direction: column; gap: 3px; }

.tp-asgn-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink3, #8d8d8d);
}

/* Custom settings triggers */
.tp-asgn-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 5px 8px; border-radius: 6px; width: 100%;
  border: 1px solid var(--border, #e2e8f0); font-size: 12px;
  color: var(--ink, #161616); background: var(--surf, #fff);
  font-family: var(--f); cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  text-align: left; outline: none; line-height: 1.3;
}

.tp-asgn-trigger:hover { border-color: var(--c-blue, #0284c7); background: rgba(2,132,199,.04); }

.tp-asgn-trigger svg { flex-shrink: 0; opacity: .4; width: 14px; height: 14px; }

.tp-asgn-trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Settings popover */
@keyframes tpPopIn {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tpFadeSlideIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tp-asgn-popover {
  position: absolute; z-index: 50;
  background: var(--surf, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12);
  max-height: 220px; overflow-y: auto; display: none;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 3px;
}

.tp-asgn-popover::-webkit-scrollbar { display: none; }

.tp-asgn-popover.is-open {
  display: block;
  animation: tpPopIn .18s cubic-bezier(.2,.8,.2,1) forwards;
}

.tp-asgn-popover .tp-drop-item {
  font-size: 12px; font-weight: 500; padding: 6px 8px; border-radius: 6px; gap: 8px;
}

/* Time estimate */
.tp-time-est {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--border, #e2e8f0); border-radius: 6px;
  overflow: hidden; background: var(--surf, #fff); transition: border-color .15s;
}

.tp-time-est:focus-within { border-color: var(--c-blue, #0284c7); }

.tp-time-est-num {
  border: none; outline: none; font-size: 12px; font-family: var(--f);
  padding: 5px 8px; width: 48px; color: var(--ink, #161616);
  background: transparent; -moz-appearance: textfield;
}

.tp-time-est-num::-webkit-inner-spin-button,
.tp-time-est-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.tp-time-est-unit {
  border: none; border-left: 1px solid var(--border, #e2e8f0);
  padding: 5px 8px; font-size: 10px; font-weight: 600;
  color: var(--c-blue, #0284c7); background: rgba(2,132,199,.05);
  cursor: pointer; font-family: var(--f); white-space: nowrap;
  transition: background .15s; letter-spacing: .02em;
}

.tp-time-est-unit:hover { background: rgba(2,132,199,.1); }

/* Assignee pills — stack vertically in the sidebar with name truncation
   so long names (or unresolved UUIDs) never push past the popup edge. */
.tp-assignee-pills {
  display: flex; flex-direction: column; gap: 4px;
  margin: 6px 0 4px; padding-left: 0;
  width: 100%; min-width: 0;
}

.tp-assignee-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 10px 3px 3px; border-radius: 999px;
  background: rgba(2,132,199,.08);
  border: 1px solid transparent;
  font-size: 11.5px; font-weight: 500; color: var(--ink, #161616);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
  font-family: inherit;
  line-height: 1;
  width: 100%; max-width: 100%; min-width: 0;
  box-sizing: border-box;
}

.tp-assignee-pill:hover {
  background: rgba(2,132,199,.14);
  border-color: rgba(2,132,199,.25);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(2,132,199,.18);
}

.tp-assignee-pill:active { transform: translateY(0); box-shadow: none; }

.tp-assignee-pill:focus-visible { outline: 2px solid rgba(2,132,199,.5); outline-offset: 2px; }

.tp-assignee-pill-av {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-blue, #0284c7); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  overflow: hidden;
  flex: 0 0 auto;
}

.tp-assignee-pill-av--img { background: #e5e7eb !important; }

.tp-assignee-pill-av img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
}

.tp-assignee-pill-name {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: left;
}

/* Delete confirm dialog */
.tp-delete-overlay {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(0,0,0,.32); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit;
  animation: tpFadeIn .18s ease both;
}

.tp-delete-dialog {
  background: var(--surf, #fff); border-radius: 12px; padding: 24px 28px;
  text-align: center; box-shadow: 0 10px 32px rgba(0,0,0,.16);
  max-width: 300px; width: 88%;
  animation: tpPopIn .2s cubic-bezier(.2,.8,.2,1) both;
}

.tp-delete-dialog-icon { margin-bottom: 10px; }

.tp-delete-dialog-title {
  font-size: 15px; font-weight: 700; color: var(--ink, #161616); margin: 0 0 4px;
}

.tp-delete-dialog-text {
  font-size: 12px; color: var(--ink3, #8d8d8d); margin: 0 0 18px;
}

.tp-delete-dialog-actions { display: flex; gap: 8px; justify-content: center; }

.tp-delete-dialog-cancel {
  padding: 7px 18px; border-radius: 7px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border, #e2e8f0); background: var(--surf, #fff);
  color: var(--ink, #161616); cursor: pointer; font-family: var(--f);
  transition: background .15s;
}

.tp-delete-dialog-cancel:hover { background: #f5f5f5; }

.tp-delete-dialog-confirm {
  padding: 7px 18px; border-radius: 7px; font-size: 12px; font-weight: 600;
  border: none; background: #ef4444; color: #fff; cursor: pointer;
  font-family: var(--f); transition: background .15s;
}

.tp-delete-dialog-confirm:hover { background: #dc2626; }

/* Recurring-series delete: scope picker */
.tp-series-dialog { max-width: 340px; text-align: center; }

.tp-series-choices { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 16px; text-align: left; }

.tp-series-choice {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 9px;
  border: 1px solid var(--border, #e2e8f0); background: var(--surf, #fff);
  cursor: pointer; font-family: var(--f); transition: border-color .15s, background .15s;
}

.tp-series-choice:hover { border-color: #4d7a41; background: rgba(77,122,65,.06); }

.tp-series-choice strong { font-size: 13px; font-weight: 700; color: var(--ink, #161616); }

.tp-series-choice span { font-size: 11px; color: var(--ink3, #8d8d8d); }

.tp-series-choice--danger:hover { border-color: #ef4444; background: rgba(239,68,68,.06); }

.tp-series-choice--danger strong { color: #dc2626; }

/* Search in dropdown */
.tp-drop-search-wrap {
  padding: 5px 6px; border-bottom: 1px solid var(--border, #e2e8f0);
  position: sticky; top: 0; background: var(--surf, #fff); z-index: 1;
}

.tp-drop-search {
  width: 100%; border: 1px solid var(--border, #e2e8f0); border-radius: 5px;
  padding: 5px 7px; font-size: 11px; font-family: var(--f); outline: none;
  color: var(--ink, #161616); background: var(--surf, #fff);
}

.tp-drop-search:focus { border-color: var(--c-blue, #0284c7); }

/* View-only overrides */
.tp-view-only .tp-asgn-trigger { pointer-events: none; opacity: .7; }

.tp-view-only .tp-time-est { pointer-events: none; opacity: .7; }

/* Scrollbar hiding */
.tp-main { scrollbar-width: none; -ms-overflow-style: none; }

.tp-main::-webkit-scrollbar { display: none; }

.tp-sidebar { scrollbar-width: none; -ms-overflow-style: none; }

.tp-sidebar::-webkit-scrollbar { display: none; }

/* Multi-line paste toast badge */
.mw-quick-add-toast {  position: absolute; top: -8px; right: 12px;
  font-size: 10px; font-weight: 700; color: #fff;
  background: var(--c-blue); padding: 2px 8px; border-radius: 10px;
  animation: mwToastPop .35s ease;
  pointer-events: none;
}

@keyframes mwToastPop {
  from { opacity: 0; transform: translateY(6px) scale(.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 700px) {
.tp-popup { width: 98vw; max-height: 94vh; border-radius: 12px; }

.tp-pill-bar { gap: 4px; }

.tp-pill { padding: 5px 10px; font-size: 11px; }

.tp-panel { padding: 16px; }

.tp-main { padding: 16px; }

.tp-asgn-grid { grid-template-columns: 1fr; }

.tp-notes-split { flex-direction: column; }
}

/* ================================================================
   REPORTS — Card-Only View (Flowgen template style)
   ================================================================ */
/* Hide view toggle in reports — card view only */
[data-wk-panel="reports"] .gl-view-toggle { display: none; }

/* Force reports panels into card grid layout */
/* reports panel: no max-height needed — natural scroll */
[data-wk-panel="reports"] #rpTaskList,
[data-wk-panel="reports"] #rpProjectList,
[data-wk-panel="reports"] #rpTeamGrid,
[data-wk-panel="reports"] #rpCompletedTasks,
[data-wk-panel="reports"] #rpMissedList,
[data-wk-panel="reports"] #rpForecastTimeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px;
}

@media(max-width:1100px) {
[data-wk-panel="reports"] #rpTaskList,
  [data-wk-panel="reports"] #rpProjectList,
  [data-wk-panel="reports"] #rpTeamGrid,
  [data-wk-panel="reports"] #rpCompletedTasks,
  [data-wk-panel="reports"] #rpMissedList,
  [data-wk-panel="reports"] #rpForecastTimeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:700px) {
[data-wk-panel="reports"] #rpTaskList,
  [data-wk-panel="reports"] #rpProjectList,
  [data-wk-panel="reports"] #rpTeamGrid,
  [data-wk-panel="reports"] #rpCompletedTasks,
  [data-wk-panel="reports"] #rpMissedList,
  [data-wk-panel="reports"] #rpForecastTimeline {
    grid-template-columns: 1fr;
  }
}

/* Report cards — Flowgen template style */
[data-wk-panel="reports"] .mw-task-card,
[data-wk-panel="reports"] .wk-focus-item,
[data-wk-panel="reports"] .gl-card,
[data-wk-panel="reports"] .wk-report-card {
  flex-direction: column;
  align-items: stretch;
  border-radius: 14px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--_pri, var(--_ac, #8b5cf6));
  background: var(--surf);
  padding: 0;
  overflow: hidden;
  transition: all .22s cubic-bezier(.22,1,.36,1);
}

[data-wk-panel="reports"] .mw-task-card::before,
[data-wk-panel="reports"] .wk-focus-item::before { display: none; }

[data-wk-panel="reports"] .mw-task-card:hover,
[data-wk-panel="reports"] .wk-focus-item:hover,
[data-wk-panel="reports"] .gl-card:hover,
[data-wk-panel="reports"] .wk-report-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  transform: translateY(-3px);
  border-color: var(--border);
}

[data-wk-panel="reports"] .mw-card-left {
  flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 16px 8px;
}

[data-wk-panel="reports"] .mw-card-left .wk-task-check { position: absolute; top: 10px; right: 10px; }

[data-wk-panel="reports"] .mw-task-card-title {
  font-size: 13px; font-weight: 700; white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-height: 1.4;
}

[data-wk-panel="reports"] .mw-card-desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; max-width: none; overflow: hidden;
}

[data-wk-panel="reports"] .mw-card-meta { flex-wrap: wrap; margin-top: 6px; }

[data-wk-panel="reports"] .mw-card-right {
  border-left: none; border-top: 1px solid var(--border-s);
  padding: 10px 16px; gap: 8px;
  flex-wrap: wrap; justify-content: flex-start;
}

[data-wk-panel="reports"] .mw-card-right::before { display: none; }

[data-wk-panel="reports"] .mw-card-chevron { display: none; }

/* Focus items in reports — template card style */
[data-wk-panel="reports"] .wk-focus-item {
  flex-direction: column; align-items: flex-start;
  padding: 16px; gap: 6px;
}

[data-wk-panel="reports"] .wk-fi-name {
  font-size: 13px; font-weight: 700; white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; line-height: 1.4;
}

[data-wk-panel="reports"] .wk-fi-reason {
  font-size: 11px; color: var(--ink4); margin-top: 2px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; overflow: hidden; line-height: 1.4;
}

[data-wk-panel="reports"] .wk-fi-pills { margin-top: 6px; }

/* ================================================================
   GOAL CARDS — Unified theme with unique elements
   ================================================================ */
.gl-card {
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.gl-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--_project-accent, var(--c-blue));
  border-radius: 14px 14px 0 0;
}

.gl-card-name {
  line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; white-space: normal;
}

.gl-card-pct {
  font-weight: 800; letter-spacing: -.02em;
}

/* Goal card health-based accent bars */
.gl-card--missed::before { background: var(--c-red); }

.gl-card--overdue::before { background: var(--c-red); }

.gl-card--risk::before { background: #f59e0b; }

.gl-card--done::before { background: var(--c-green); }

/* Enhanced goal card — richer layout with more info */
.gl-card {
  padding: 18px 20px; gap: 14px;
  transition: all .22s cubic-bezier(.22,1,.36,1);
}

.gl-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.7);
  transform: translateY(-2px);
}

.gl-card-avatar {
  width: 40px; height: 40px; font-size: 13px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  border: 2px solid rgba(255,255,255,.7);
}

.gl-card-name {
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
}

.gl-card-pct {
  font-size: 15px;
}

.gl-card-meta {
  font-size: 11px; gap: 10px; font-weight: 600;
  margin-bottom: 10px;
}

.gl-card-tasks {
  font-size: 11px; font-weight: 700;
  margin-top: 8px;
}

/* Goal progress bar — bolder inside goal cards */
.gl-card .wk-goal-progress-bar {
  height: 6px; margin-top: 8px;
  background: var(--border-s);
  border-radius: 4px; overflow: hidden;
}

.gl-card .wk-goal-progress-fill {
  height: 100%; border-radius: 4px;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}

/* Goal card pills row (health, deadline, department) */
.gl-card-pills {
  display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
  margin-top: 8px;
}

.gl-card-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 800; padding: 3px 9px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .3px; white-space: nowrap;
}

.gl-card-pill svg {
  width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0;
}

.gl-pill--on-track { background: var(--c-green-bg, #defbe6); color: var(--c-green, #198038); }

.gl-pill--at-risk { background: var(--c-yellow-bg, #fef3c7); color: var(--c-yellow, #b45309); }

.gl-pill--behind { background: var(--c-red-bg, #fff1f1); color: var(--c-red, #da1e28); }

.gl-pill--complete { background: var(--c-green-bg, #defbe6); color: var(--c-green, #198038); }

.gl-pill--missed { background: var(--c-red-bg, #fff1f1); color: var(--c-red, #da1e28); }

.gl-pill--dept { background: var(--c-purple-bg, #f5f3ff); color: var(--c-purple, #7c3aed); }

.gl-pill--deadline { background: var(--c-blue-bg, #edf5ff); color: var(--c-blue, #0f62fe); font-weight: 700; }

.gl-pill--deadline.is-overdue { background: var(--c-red-bg, #fff1f1); color: var(--c-red, #da1e28); }

.gl-pill--tasks { background: var(--border-s); color: var(--ink3); }

@media (min-width: 1101px) {
.wk-support-stack {
    position: sticky; top: 60px; align-self: start;
    max-height: calc(100vh - 80px); overflow-y: auto;
    scrollbar-width: none;
  }

.wk-support-stack::-webkit-scrollbar { display: none; }
}

/* Support modules — unified card style */
.wk-support-module {
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.wk-support-module::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--_sm-color, var(--c-green));
  border-radius: 14px 14px 0 0; z-index: 1;
}

/* Support module head — unified */
.wk-support-head {
  position: relative;
  padding-top: 6px;
}

@media(max-width:900px) {
[data-wk-panel="reports"] #rpOvList,
  [data-wk-panel="reports"] #rpTaskList,
  [data-wk-panel="reports"] #rpProjectList,
  [data-wk-panel="reports"] #rpTeamGrid,
  [data-wk-panel="reports"] #rpCompletedTasks,
  [data-wk-panel="reports"] #rpMissedList,
  [data-wk-panel="reports"] #rpForecastTimeline {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════
   UNIVERSAL COMMAND BAR — Home Tab
   ══════════════════════════════════════════════════════════ */
.os-command-bar {
  background: linear-gradient(135deg, var(--wt-theme-primary, #6366f1), var(--wt-theme-primary-dark, #4f46e5));
  border-radius: 14px; padding: 20px 24px; margin-bottom: 16px;
  color: #fff;
}

.os-command-prompt {
  font-size: 1.2rem; font-weight: 600; margin-bottom: 12px;
  opacity: 0.95;
}

.os-command-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.os-command-actions::-webkit-scrollbar { height: 4px; }

.os-command-actions::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }

.os-cmd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15); color: #fff; font-size: 0.8rem; font-weight: 500;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  flex-shrink: 0;
}

.os-cmd-btn:hover {
  background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.5);
}

.os-cmd-btn:active { transform: translateY(1px); }

.os-cmd-btn svg { flex-shrink: 0; }

/* ── Quick-Add Popup ── */
/* Overlay itself is scrollable so a tall popup never clips dropdowns; the
   centered popup sits inside via flex+margin auto. */
.wk-qa-overlay { position:fixed;inset:0;z-index:13100;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s ease;pointer-events:none;overflow-y:auto;padding:24px 16px; }

.wk-qa-overlay.is-open { opacity:1;pointer-events:auto; }

/* No overflow on the popup or body — typeahead menus must be able to extend
   below their input without being clipped. */
.wk-qa-popup { background:var(--card,#fff);border-radius:14px;width:min(420px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.25);transform:translateY(20px) scale(.97);transition:transform .25s ease;display:flex;flex-direction:column;margin:auto; }

.wk-qa-overlay.is-open .wk-qa-popup { transform:translateY(0) scale(1); }

.wk-qa-popup-head { display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border,#e5e7eb);flex-shrink:0; }

.wk-qa-popup-title { font-weight:700;font-size:15px; }

.wk-qa-popup-close { background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink3,#94a3b8);line-height:1;width:32px;height:32px;border-radius:8px;transition:background .15s,color .15s;display:flex;align-items:center;justify-content:center; }

.wk-qa-popup-close:hover { background:#f1f5f9;color:#0f172a; }

.wk-qa-popup-body { padding:18px 24px 20px;display:flex;flex-direction:column;gap:6px; }

.wk-qa-label { font-size:11.5px;font-weight:600;color:var(--ink2,#64748b);text-transform:uppercase;letter-spacing:.6px;line-height:1.3; }

/* Each label gets breathing room above it (separates the section from the
   previous one), except labels that sit inside a horizontal row column
   (those should hug their input). */
.wk-qa-popup-body .wk-qa-label { margin-top:14px; }

.wk-qa-popup-body > .wk-qa-label:first-of-type,
.wk-qa-popup-body .wk-qa-gated > .wk-qa-label:first-of-type,
.wk-qa-popup-body .wk-qa-row-col > .wk-qa-label { margin-top:0; }

.wk-qa-popup-body .wk-qa-gated > .wk-qa-row { margin-top:14px; }

.wk-qa-input, .wk-qa-select { padding:10px 12px;border:1px solid var(--border,#e5e7eb);border-radius:8px;font-size:13.5px;background:var(--bg,#f8fafc);outline:none;transition:border-color .15s,box-shadow .15s; }

.wk-qa-input:focus, .wk-qa-select:focus { border-color:var(--c-blue,#3b82f6);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-blue,#3b82f6) 15%, transparent); }

.wk-qa-input::placeholder, .wk-qa-popup textarea.wk-qa-input::placeholder { color:#94a3b8;font-size:13px; }

.wk-qa-popup-foot { display:flex;gap:10px;justify-content:flex-end;align-items:center;padding:14px 24px;border-top:1px solid var(--border,#e5e7eb); }

.wk-qa-foot-summary { flex:1;font-size:12px;color:var(--ink2,#64748b);font-variant-numeric:tabular-nums; }

.wk-qa-btn { padding:8px 18px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,transform .1s; }

.wk-qa-btn:active { transform:scale(.97); }

.wk-qa-btn--secondary { background:var(--bg,#f1f5f9);color:var(--ink2,#64748b); }

.wk-qa-btn--ghost { background:transparent;color:var(--ink2,#64748b);border:1px solid var(--border,#e5e7eb); }

.wk-qa-btn--ghost:hover { background:var(--bg,#f8fafc); }

.wk-qa-btn--primary { background:var(--c-blue,#3b82f6);color:#fff; }

.wk-qa-btn--primary:hover { background:#2563eb; }

/* Wider variant for multi-field forms */
.wk-qa-popup--wide { width:min(820px,96vw); }

/* textarea defaults to a 20-col fixed width, which made the Notes /
   Description boxes float at ~200px wide while their labels sat below.
   Force them to fill the popup row properly. */
.wk-qa-popup textarea.wk-qa-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 90px;
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink, #0f172a);
  padding: 10px 12px;
}

.wk-qa-popup-sub { font-size:12px;color:var(--ink2,#64748b);margin-bottom:4px;line-height:1.5; }

.wk-qa-label-soft { font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink3,#94a3b8); }

.wk-qa-row { display:flex;gap:10px; }

.wk-qa-row-col { flex:1;display:flex;flex-direction:column;gap:6px;min-width:0; }

.wk-qa-input--err { border-color:#ef4444 !important;animation:wkErrShake .35s ease; }

@keyframes wkErrShake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } }

/* ── Company chip (Log Time / Add Budget header pill) ── */
.wk-qa-company-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 4px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-blue, #3b82f6) 8%, #fff), #fff);
  border: 1px solid color-mix(in srgb, var(--c-blue, #3b82f6) 18%, #e5e7eb);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* The HTML `[hidden]` attribute defaults to display:none, but our display:flex
   above (same specificity) overrides it. Force it back on so JS can hide the
   chip with chip.hidden = true. */
.wk-qa-company-chip[hidden] { display: none !important; }

.wk-qa-company-chip:hover {
  border-color: color-mix(in srgb, var(--c-blue, #3b82f6) 35%, #cbd5e1);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15,23,42,.08);
}

.wk-qa-company-logo {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 12px; font-weight: 800; color: #475569;
}

.wk-qa-company-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; border-radius: 50%; }

.wk-qa-company-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.wk-qa-company-name { font-size: 13.5px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wk-qa-company-meta { font-size: 11.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wk-qa-company-icon { color: #94a3b8; flex-shrink: 0; transition: color .15s ease; }

.wk-qa-company-chip:hover .wk-qa-company-icon { color: #004b7c; }

/* ── Pill-group (Category in Add Budget) ── */
.wk-qa-pill-group { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; }

.wk-qa-pill {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}

.wk-qa-pill:hover { border-color: #cbd5e1; transform: translateY(-1px); }

.wk-qa-pill.is-active { background: var(--c-blue, #3b82f6); border-color: var(--c-blue, #3b82f6); color: #fff; }

/* ── Input with prefix ($) ── */
.wk-qa-input-prefix { position: relative; display: flex; align-items: stretch; }

.wk-qa-input-prefix-symbol { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 600; color: #94a3b8; pointer-events: none; }

.wk-qa-input--prefixed { padding-left: 24px; }

/* ── Typeahead inside quick-add popups ── */
.wk-qa-typeahead { position:relative; }

/* the field has to be as wide as the menu it opens, or the two read as
   unrelated controls */
.wk-qa-typeahead .wk-qa-ta-input { width:100%; box-sizing:border-box; }

.wk-qa-ta-menu {
  position:absolute;left:0;right:0;top:calc(100% + 4px);
  background:#fff;border:1px solid var(--border,#e5e7eb);border-radius:8px;
  box-shadow:0 12px 32px rgba(15,23,42,.18);
  max-height:280px;overflow-y:auto;z-index:9300;padding:4px;
}

.wk-qa-ta-item {
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;padding:8px 10px;border:0;background:transparent;
  border-radius:6px;cursor:pointer;text-align:left;font:inherit;
  transition:background .12s;
}

.wk-qa-ta-item:hover { background:#f1f5f9; }

.wk-qa-ta-name { font-size:13px;font-weight:600;color:#0f172a; }

.wk-qa-ta-meta { font-size:11px;color:#94a3b8; }

.wk-qa-ta-empty { padding:10px;font-size:12px;color:#94a3b8;text-align:center; }

/* ── rich rows: recognise a client or a project the way the day-log wizard
   lets you — by its mark, its people and what's on it, not a line of text ── */
.wk-qa-ta-menu { max-height:340px; padding:5px; border-radius:12px; }

.wk-qa-ta-item--rich { flex-direction:row; align-items:center; gap:10px; padding:8px 9px;
  border-radius:10px; }

.wk-qa-rowmark { flex-shrink:0; display:flex; }

.wk-qa-rowlogo { width:30px; height:30px; border-radius:8px; overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:#94a3b8; color:#fff;
  font-size:10.5px; font-weight:800; letter-spacing:.01em; }

.wk-qa-rowlogo img { width:100%; height:100%; object-fit:contain; background:#fff; }

.wk-qa-rowlogo--int { background:#64748b; font-size:14px; font-weight:600; }

.wk-qa-rowtxt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }

.wk-qa-rowname { font-size:13px; font-weight:700; color:#0f172a; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.wk-qa-rowsub { font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:#94a3b8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.wk-qa-rowmeta { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:2px;
  font-size:11px; color:#94a3b8; }

.wk-qa-rowmeta > span + span::before { content:'·'; margin-right:5px; color:#cbd5e1; }

.wk-qa-rowmeta > .wk-qa-rowpill + span::before { content:none; }

.wk-qa-rowpill { font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  border-radius:5px; padding:2px 6px; }

.wk-qa-rowpill--recent { background:#e6f3ff; color:#004b7c; }

/* "internal" reads as a category, not an alert — slate, so it never competes with
   the blue "recent" pill sitting a line below it. */
/* ⚠️ Internal is YELLOW, app-wide — see the note in work-mass-plan.css. */
.wk-qa-rowpill--internal { background:#fef3c7; color:#92400e; }

/* the name and what the company IS to us, on one line */
.wk-qa-rowname-line { display:flex; align-items:center; gap:6px; min-width:0; }

.wk-qa-rowname-line > .wk-qa-rowname { min-width:0; }

.wk-qa-rowname-line > .wk-qa-rowpill { flex:0 0 auto; }

/* ── Client field: us, then everybody else ──
   Our own company is pinned to the top of the menu and given a tinted, ringed
   card so the eye reads it as its own zone rather than the first client in a
   list. The section heading + rule below it do the rest of the separating. */
.wk-qa-ta-item--ours { background:#f4f7fb; box-shadow:inset 0 0 0 1px #dde5ef; }

.wk-qa-ta-item--ours:hover { background:#eaf0f8; box-shadow:inset 0 0 0 1px #c6d4e6; }

.wk-qa-ta-item--ours + .wk-qa-ta-item--ours { margin-top:3px; }

.wk-qa-ta-group { padding:8px 9px 4px; font-size:9.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:#94a3b8; }

.wk-qa-rowfaces { display:flex; align-items:center; flex-shrink:0; }

.wk-qa-rowface { width:22px; height:22px; border-radius:50%; overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; margin-left:-6px;
  background:#e2e8f0; color:#475569; font-size:9px; font-weight:800;
  border:2px solid #fff; box-sizing:border-box; }

.wk-qa-rowface:first-child { margin-left:0; }

.wk-qa-rowface img { width:100%; height:100%; object-fit:cover; }

/* ── Log Time: team trigger + dropdown (replaces typeahead) ── */
.wk-qa-team-select { position: relative; }

.wk-qa-team-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  background: var(--bg, #f8fafc); cursor: pointer; text-align: left; font: inherit;
  transition: border-color .15s, background .15s;
}

.wk-qa-team-trigger:hover { border-color: #cbd5e1; background: #fff; }

.wk-qa-team-trigger[aria-expanded="true"] { border-color: var(--c-blue, #3b82f6); background: #fff; }

.wk-qa-team-avatar {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}

.wk-qa-team-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }

.wk-qa-team-name { font-size: 13.5px; font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wk-qa-team-meta { font-size: 11px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wk-qa-team-you { display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; text-transform: uppercase; letter-spacing: .04em; }

.wk-qa-team-caret { color: #94a3b8; flex: 0 0 14px; transition: transform .15s ease; }

.wk-qa-team-trigger[aria-expanded="true"] .wk-qa-team-caret { transform: rotate(180deg); }

.wk-qa-team-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,23,42,.18);
  z-index: 9300; padding: 6px; max-height: 280px; overflow-y: auto;
}

.wk-qa-team-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; background: transparent; border-radius: 8px;
  cursor: pointer; text-align: left; font: inherit; transition: background .12s;
}

.wk-qa-team-item:hover { background: #f1f5f9; }

.wk-qa-team-item.is-selected { background: #eff6ff; }

.wk-qa-team-item.is-selected .wk-qa-team-name { color: #1d4ed8; }

/* ── Log Time: rate select sits inline with hours + date ── */
.wk-qa-rate-select { width: 100%; }

/* ── Log Time: gated fields (everything below Program is dim until a
   program is picked, so the user can't fill in stale context) ── */
.wk-qa-gated[data-gated] {
  opacity: 0.45;
  pointer-events: none;
  filter: saturate(0.6);
  transition: opacity .15s, filter .15s;
}

.wk-qa-gated:not([data-gated]) {
  opacity: 1;
  pointer-events: auto;
  filter: none;
}

/* ── Log Time: task picker trigger ── */
.wk-qa-task-select { position: relative; }

.wk-qa-task-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  background: var(--bg, #f8fafc); cursor: pointer; text-align: left; font: inherit;
  transition: border-color .15s, background .15s; min-height: 40px;
}

.wk-qa-task-trigger:hover { border-color: #cbd5e1; background: #fff; }

.wk-qa-task-text { flex: 1; min-width: 0; font-size: 13.5px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wk-qa-task-text.is-set { color: #0f172a; font-weight: 600; }

.wk-qa-task-clear {
  flex: 0 0 auto; padding: 0; border: 0; background: #f1f5f9; color: #64748b;
  width: 22px; height: 22px; border-radius: 50%; font-size: 16px; line-height: 18px;
  cursor: pointer; transition: background .12s, color .12s;
}

.wk-qa-task-clear:hover { background: #fee2e2; color: #b91c1c; }

.wk-qa-task-caret { color: #94a3b8; flex: 0 0 14px; }

/* ── Plan-style work-stream picker overlay ── */
.wk-qa-popup--plan { width: min(720px, 96vw); max-height: 86vh; }

.wk-qa-popup-body--scroll { overflow-y: auto; max-height: 60vh; padding: 12px 18px; }

.wk-qa-plan-list { display: flex; flex-direction: column; gap: 14px; }

.wk-qa-plan-list .wk-pg-phase-section { margin: 0; }

.wk-qa-plan-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  background: #fff; cursor: pointer; text-align: left; font: inherit;
  transition: background .12s, border-color .12s, transform .08s;
  margin-top: 6px;
}

.wk-qa-plan-row:hover { background: #f8fafc; border-color: #cbd5e1; transform: translateX(2px); }

.wk-qa-plan-row.is-selected { background: #eff6ff; border-color: var(--c-blue, #3b82f6); }

.wk-qa-plan-row.is-done { opacity: .65; }

.wk-qa-plan-row.is-done .wk-qa-plan-name { text-decoration: line-through; color: #64748b; }

.wk-qa-plan-check {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid #cbd5e1; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; font-weight: 700;
}

.wk-qa-plan-check.is-done { background: #22c55e; border-color: #22c55e; }

.wk-qa-plan-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wk-qa-plan-due { flex: 0 0 auto; font-size: 11px; color: #94a3b8; }

.wk-qa-plan-hrs { flex: 0 0 auto; font-size: 10.5px; color: #6366f1; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #eef2ff; }

/* ── Work-stream picker: checkbox + row, batch select ── */
.wk-qa-plan-rowwrap { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

.wk-qa-plan-rowwrap .wk-qa-plan-row { margin-top: 0; }

.wk-qa-plan-cb { flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--c-blue, #3b82f6); cursor: pointer; }

.wk-qa-plan-rowwrap.is-selected .wk-qa-plan-row { background: #eff6ff; border-color: var(--c-blue, #3b82f6); }

/* ── Photo avatars in the WHO picker (trigger + menu rows) ── */
.wk-qa-team-avatar--img { background: #e2e8f0; overflow: hidden; padding: 0; }

.wk-qa-team-avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── WHO picker: sticky search + scrollable list ── */
.wk-qa-team-search { position: sticky; top: -6px; background: #fff; padding: 2px 2px 8px; z-index: 2; }

.wk-qa-team-search input { width: 100%; border: 1px solid #cbd5e1; border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 13px; box-sizing: border-box; }

.wk-qa-team-list { display: block; }

/* ── Program typeahead: pinned "+ Create new project" row ── */
.wk-qa-ta-pinned { flex-direction: row; align-items: center; gap: 8px; }

.wk-qa-ta-pinned:hover { background: #eff6ff; }

.wk-qa-ta-pinned .wk-qa-ta-name { color: #1d4ed8; font-weight: 700; }

.wk-qa-ta-pinned-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px; background: #dbeafe; color: #1d4ed8;
  font-size: 15px; font-weight: 800; line-height: 1;
}

.wk-qa-ta-sep { height: 1px; background: #eef2f7; margin: 4px 6px; }

/* ── Inline composer wrap in the work-stream picker's head ──
   Sits above the scrollable list so its popovers can overflow downward. These
   rules used to be injected by the quick-add bar's style block, which only ran
   once that bar had wired — the picker's own composer was unstyled until then. */
.wk-qa-plan-new { padding: 12px 18px 4px; border-bottom: 1px solid var(--border, #e5e7eb); }

.wk-qa-plan-new[hidden] { display: none; }

.wk-qa-plan-new-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.wk-qa-plan-new-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #7c3aed; }

.wk-qa-plan-new-cancel { background: none; border: none; color: #94a3b8; font: inherit; font-size: 12px; cursor: pointer; padding: 2px 4px; }

.wk-qa-plan-new-cancel:hover { color: #475569; text-decoration: underline; }

/* ── Inline "+ New work stream" bar (in the work-stream picker) ── */
.wk-qa-ws-newbar { display: flex; gap: 8px; align-items: center; padding: 2px 0 4px; }

.wk-qa-ws-newbar .wk-qa-input { flex: 1; min-width: 0; }

.wk-qa-ws-newbar .wk-qa-btn { flex: 0 0 auto; }

/* ── Chosen-project chip (full name; the typeahead truncates) ── */
/* `.wk-qa-chosen` sets display:flex, which OUTRANKS the UA's [hidden]{display:none}
   — without this the empty chosen-project bar sat visible under the field with a
   lone "Change" link on it. Same trap as every other display-vs-[hidden] bug. */
.wk-qa-chosen[hidden] { display: none !important; }

.wk-qa-chosen {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid #c7d2fe; border-radius: 10px;
  background: #eef2ff; margin-bottom: 2px;
}

.wk-qa-chosen-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: #312e81; word-break: break-word; }

.wk-qa-chosen-change { flex: 0 0 auto; border: 0; background: transparent; color: #4f46e5; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.wk-qa-chosen-change:hover { color: #3730a3; }

/* ── Per-task hours split list ── */
.wk-qa-tasksplit { margin: 4px 0 2px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; background: #fbfdff; }

.wk-qa-tasksplit-hd { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin-bottom: 6px; }

.wk-qa-tasksplit-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }

.wk-qa-tasksplit-name { flex: 1; min-width: 0; font-size: 13px; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wk-qa-tasksplit-hrs { flex: 0 0 70px; width: 70px; border: 1px solid #d6deeb; border-radius: 7px; padding: 5px 7px; font-size: 13px; text-align: right; }

.wk-qa-tasksplit-x { flex: 0 0 auto; border: 0; background: transparent; color: #cbd5e1; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }

.wk-qa-tasksplit-x:hover { color: #ef4444; }

/* ── Log + mark complete checkbox ── */
.wk-qa-check { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; font-size: 13px; color: #334155; cursor: pointer; }

.wk-qa-check input[type=checkbox] { width: 16px; height: 16px; accent-color: #10b981; cursor: pointer; }

/* ── Smooth Transitions for Scorecard Filtering ── */
.wk-focus-group { transition:opacity .25s ease,transform .25s ease; }

.wk-focus-group.is-hidden { opacity:0;transform:translateY(-8px);pointer-events:none; }

.wk-focus-panel.is-single-filter .wk-focus-group:not(.is-hidden) { animation:wkFadeIn .3s ease; }

@keyframes wkFadeIn { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:translateY(0); } }

/* ── Smooth View Toggle Transitions ── */
.wk-focus-panel { transition:opacity .2s ease; }

.mw-kanban-wrap { animation:wkFadeIn .3s ease; }

/* ================================================================
   FINANCIALS — Time Entry Form
   ================================================================ */
.fin-time-entry { padding: 16px; }

.fin-te-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 10px; flex-wrap: wrap; }

.fin-te-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }

.fin-te-field--sm { flex: 0 0 auto; min-width: 100px; max-width: 130px; }

.fin-te-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink3); }

.fin-te-input, .fin-te-select {
  font-family: var(--f); font-size: 13px; font-weight: 500;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surf); color: var(--ink); transition: border-color .15s ease;
}

.fin-te-input:focus, .fin-te-select:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-bg); }

.fin-te-input::placeholder { color: var(--ink4); }

.fin-te-submit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; font-size: 12px; font-weight: 700; border-radius: 8px;
  background: var(--c-blue); color: #fff; border: none; cursor: pointer;
  transition: background .15s ease, transform .15s ease; white-space: nowrap;
}

.fin-te-submit:hover { filter: brightness(1.1); transform: translateY(-1px); }

@media (max-width: 700px) {
.fin-te-field--sm { min-width: 80px; max-width: none; flex: 1; }
}

[data-wk-panel="reports"] .wk-body { gap: 14px; }

[data-wk-panel="reports"] .wk-support-stack { gap: 10px; }

[data-wk-panel="reports"] .wk-support-module {
  border-radius: 12px; overflow: hidden;
}

[data-wk-panel="reports"] .wk-support-body .wk-empty {
  padding: 20px 16px; font-size: 12px; color: var(--ink4);
  text-align: center; font-style: italic;
}

/* Report focus panels: clean header */
[data-wk-panel="reports"] .wk-focus-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border-s);
}

/* ================================================================
   SETTINGS — Better form layouts
   ================================================================ */
[data-wk-panel="settings"] .wk-set-section { margin-bottom: 24px; }

[data-wk-panel="settings"] .wk-set-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink3); margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border-s);
}

[data-wk-panel="settings"] .wk-set-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border-s);
  font-size: 13px; color: var(--ink);
}

[data-wk-panel="settings"] .wk-set-row:last-child { border-bottom: none; }

[data-wk-panel="settings"] .wk-set-label { font-weight: 600; flex: 1; }

[data-wk-panel="settings"] .wk-set-desc { font-size: 11px; color: var(--ink4); margin-top: 2px; }

[data-wk-panel="settings"] .wk-set-control { flex-shrink: 0; }

/* Toggle switch */
.wk-toggle { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--ink4); cursor: pointer; transition: background .2s ease; border: none; }

.wk-toggle.is-on { background: var(--c-blue); }

.wk-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.2); }

.wk-toggle.is-on::after { transform: translateX(16px); }

/* ================================================================
   SETTINGS — Config Sections & Form Elements
   ================================================================ */
.wk-config-section {
  margin: 16px 18px 20px;
  background: #ffffff;
  border: 1px solid var(--border-s);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.wk-config-section:last-child { margin-bottom: 18px; }

.wk-config-section-head {
  font-size: 13px; font-weight: 700; text-transform: none;
  letter-spacing: 0; color: var(--ink);
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border-s);
  background: linear-gradient(180deg, #fafbfc, #f5f7f9);
}

.wk-config-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--border-s);
  font-size: 13px; color: var(--ink); transition: background .12s ease;
}

.wk-config-row:last-child { border-bottom: none; }

.wk-config-row:hover { background: rgba(99, 102, 241, 0.03); }

.wk-config-label { flex: 1; font-weight: 600; line-height: 1.4; max-width: 340px; }

.wk-config-label small {
  display: block; font-size: 12px; font-weight: 400; color: var(--ink4);
  margin-top: 3px; line-height: 1.45;
}

.wk-config-input {
  font-family: var(--f); font-size: 13px; font-weight: 500;
  padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--surf); color: var(--ink);
  min-width: 220px; max-width: 320px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.wk-config-input:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-bg); }

.wk-config-input::placeholder { color: var(--ink4); }

/* Config toggle (reuses .wk-toggle pattern) */
.wk-config-toggle {
  position: relative; width: 38px; height: 22px; border-radius: 11px;
  background: var(--ink4); cursor: pointer; transition: background .2s ease;
  flex-shrink: 0;
}

.wk-config-toggle.is-on { background: var(--c-blue); }

.wk-config-toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.wk-config-toggle.is-on::after { transform: translateX(16px); }

/* ================================================================
   SETTINGS — Action Row & Card Grid
   ================================================================ */
.wk-action-row {
  display: flex; align-items: center; gap: 12px;
  padding: 0 0 14px; margin-bottom: 14px;
}

.wk-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-size: 12px; font-weight: 600; font-family: var(--f);
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surf); color: var(--ink); cursor: pointer;
  transition: all .15s ease; white-space: nowrap;
}

.wk-action-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.wk-action-btn:hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-bg); }

.wk-action-btn--primary { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }

.wk-action-btn--primary:hover { filter: brightness(1.1); transform: translateY(-1px); }

.wk-action-btn--primary svg { stroke: #fff; }

/* Card Grid (integrations, templates) */
.wk-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px; padding: 16px;
}

.wk-panel-card {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 18px;
  transition: all .2s ease; cursor: pointer;
}

.wk-panel-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); transform: translateY(-2px); }

.wk-panel-card-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}

.wk-panel-card-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

.wk-panel-card-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }

.wk-panel-card-desc { font-size: 11px; color: var(--ink3); line-height: 1.4; }

.wk-panel-card-footer { margin-top: 12px; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* Status dots */
.wk-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.wk-status-dot--green { background: var(--c-green); }

.wk-status-dot--gray { background: var(--ink4); }

.wk-status-dot--red { background: var(--c-red); }

.wk-status-dot--yellow { background: var(--c-yellow); }

/* ================================================================
   SETTINGS — Data Table (shared)
   ================================================================ */
.wk-data-table { width: 100%; border-collapse: collapse; font-size: 12px; }

.wk-data-table thead th {
  text-align: left; padding: 10px 14px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink3);
  border-bottom: 1px solid var(--border); background: rgba(0,0,0,.01);
}

.wk-data-table tbody td {
  padding: 10px 14px; border-bottom: 1px solid var(--border-s);
  color: var(--ink); vertical-align: middle;
}

.wk-data-table tbody tr:last-child td { border-bottom: none; }

.wk-data-table tbody tr:hover td { background: rgba(0,0,0,.015); }

.wk-col-actions { width: 60px; text-align: right; }

/* Inline row "Convert" button used to promote an opportunity to an
   active program from the Pipeline table. */
.wk-row-convert-btn {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--c-green, #16a34a);
  background: #fff;
  color: var(--c-green, #16a34a);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, transform .1s;
}

.wk-row-convert-btn:hover { background: var(--c-green, #16a34a); color: #fff; }

.wk-row-convert-btn:active { transform: scale(0.96); }

/* ── Opportunity (quote) cards ──────────────────────────────────
   Opportunities reuse the program card chrome (.wk-dp-card--program)
   so they feel like programs-in-waiting, then layer in distinct
   "this is a quote, not live" styling: violet accent, dashed top
   edge, "Opportunity" chip, win-confidence bar, and a footer with
   follow-up date + Convert button. */
.wk-dp-card--opportunity {
  background: linear-gradient(180deg, #faf5ff 0%, #fff 35%);
  border-style: dashed;
}

.wk-dp-card--opportunity:hover {
  border-style: solid;
  box-shadow: 0 8px 24px rgba(139, 92, 246, .18);
}

.wk-prog-status-chip--opportunity {
  background: #ede9fe;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}

.wk-opp-stage-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  vertical-align: middle;
}

.wk-opp-stage-pill--prospect    { background: #f3f4f6; color: #4b5563; }

.wk-opp-stage-pill--qualifying  { background: #dbeafe; color: #1d4ed8; }

.wk-opp-stage-pill--proposal    { background: #fef9c3; color: #854d0e; }

.wk-opp-stage-pill--negotiation { background: #ffedd5; color: #c2410c; }

.wk-opp-stage-pill--committed   { background: #dcfce7; color: #15803d; }

.wk-opp-approval { font-size: 12px; }

.wk-opp-approval--ok     { color: #15803d; }

.wk-opp-approval--warn   { color: #b45309; }

.wk-opp-approval--danger { color: #b91c1c; }

.wk-opp-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wk-opp-card-footer .wk-prog-card-dates { flex: 1 1 auto; min-width: 0; }

.wk-opp-followup--overdue {
  color: #b91c1c !important;
  font-weight: 600;
}

.wk-opp-card-convert {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #8b5cf6;
  background: #fff;
  color: #6d28d9;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, transform .1s;
}

.wk-opp-card-convert:hover { background: #8b5cf6; color: #fff; }

.wk-opp-card-convert:active { transform: scale(0.96); }

/* Settings inputs */
[data-wk-panel="settings"] input[type="text"],
[data-wk-panel="settings"] input[type="number"],
[data-wk-panel="settings"] select {
  font-family: var(--f); font-size: 12px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surf);
  color: var(--ink); min-width: 120px;
}

[data-wk-panel="settings"] input:focus, [data-wk-panel="settings"] select:focus {
  outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 2px var(--c-blue-bg);
}

/* ================================================================
   PROGRAMS — Metric Row, Chip Bar, Kanban, Timeline
   ================================================================ */
.wk-metric-row {
  display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}

.wk-metric {
  flex: 1; min-width: 100px; text-align: center;
  padding: 14px 12px; background: var(--surf); border: 1px solid var(--border);
  border-radius: 12px;
}

.wk-metric-val { font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1.2; }

.wk-metric-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink3); margin-top: 4px; }

/* Chip bar (filter toggles) */
.wk-chip-bar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }

.wk-chip {
  padding: 6px 14px; border-radius: 20px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--border); background: var(--surf); color: var(--ink2);
  cursor: pointer; transition: all .15s ease; font-family: var(--f);
}

.wk-chip:hover { border-color: var(--c-blue); color: var(--c-blue); }

.wk-chip.is-active { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }

/* Kanban board */
.wk-kanban-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px; }

@media (max-width: 900px) {
.wk-kanban-board { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
.wk-kanban-board { grid-template-columns: 1fr; }
}

.wk-kanban-col {
  background: rgba(0,0,0,.02); border-radius: 12px; padding: 12px;
  min-height: 200px;
}

.wk-kanban-col-head {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink3); padding-bottom: 10px;
  border-bottom: 1px solid var(--border-s); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}

.wk-kanban-col-count {
  background: var(--border); border-radius: 10px; padding: 1px 7px;
  font-size: 10px; font-weight: 800;
}

/* Timeline nodes */
.wk-timeline { padding: 16px; }

.wk-tl-node { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border-s); position: relative; }

.wk-tl-node:last-child { border-bottom: none; }

.wk-tl-node::before {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink4); flex-shrink: 0; margin-top: 3px;
  border: 2px solid var(--surf); box-shadow: 0 0 0 2px var(--ink4);
}

.wk-tl-node.is-done::before { background: var(--c-green); box-shadow: 0 0 0 2px var(--c-green); }

.wk-tl-node.is-active::before { background: var(--c-blue); box-shadow: 0 0 0 2px var(--c-blue); }

.wk-tl-node.is-overdue::before { background: var(--c-red); box-shadow: 0 0 0 2px var(--c-red); }

.wk-tl-date { font-size: 11px; font-weight: 700; color: var(--ink2); }

.wk-tl-label { font-size: 12px; color: var(--ink3); margin-top: 2px; }

/* Empty state improvements */
.wk-empty {
  padding: 24px 16px; text-align: center;
  font-size: 12px; color: var(--ink4); font-style: italic;
}

/* ==========================================================================
   Grant Management tab — card hover + modal polish
   (Scoped with .gr- prefix; no other tabs affected)
   ========================================================================== */
.gr-card {
  --gr-accent: #64748b;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}

.gr-card:hover {
  border-color: var(--gr-accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* Quick Add Time modal inputs: consistent focus ring */
#grTimeModal input:focus,
#grTimeModal select:focus,
#grTimeModal textarea:focus {
  outline: none;
  border-color: var(--c-blue, #3A86FF) !important;
  box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.18);
}

#grTimeModal input:disabled,
#grTimeModal select:disabled,
#grTimeModal textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════
   PROGRAM CONTEXT BAR — persistent selector + lifecycle stepper
   pinned above every sub-panel in the Programs tab. Gives users
   an always-visible answer to "which program am I looking at
   and where is it in its lifecycle?"
   ═══════════════════════════════════════════════════════════ */
.wk-prog-ctx-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  position: sticky; top: 0; z-index: 20;
}

.wk-prog-ctx-flow {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; background: #f1f5f9; border-radius: 10px;
}

.wk-flow-step {
  padding: 6px 11px; border-radius: 8px; border: 0; background: transparent;
  font-size: 12px; font-weight: 700; color: var(--ink3, #64748b);
  cursor: pointer; transition: background .15s, color .15s, transform .15s;
  letter-spacing: .01em;
}

.wk-flow-step:hover { color: var(--ink, #0f172a); }

.wk-flow-step.is-active {
  background: #fff; color: var(--c-blue, #3A86FF);
  box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 0 0 1px rgba(59,130,246,.18);
}

.wk-flow-step[data-stage="pipeline"].is-active { color: #7c3aed; box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 0 0 1px rgba(124,58,237,.22); }

.wk-flow-step[data-stage="planning"].is-active { color: #6366f1; box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 0 0 1px rgba(99,102,241,.22); }

.wk-flow-step[data-stage="active"].is-active   { color: #16a34a; box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 0 0 1px rgba(22,163,74,.22); }

.wk-flow-step[data-stage="closing"].is-active  { color: #0d9488; box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 0 0 1px rgba(13,148,136,.22); }

.wk-flow-step[data-stage="closed"].is-active   { color: #64748b; box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 0 0 1px rgba(100,116,139,.22); }

.wk-flow-sep { color: #cbd5e1; font-size: 11px; user-select: none; }

.wk-prog-ctx-select { display: inline-flex; align-items: center; }

.wk-prog-ctx-meta {
  display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
  font-size: 12px; color: var(--ink3, #64748b);
}

.wk-prog-ctx-stage-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: #e2e8f0; color: #475569;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
}

.wk-prog-ctx-stage-pill[data-stage="pipeline"] { background: rgba(124,58,237,.12); color: #7c3aed; }

.wk-prog-ctx-stage-pill[data-stage="planning"] { background: rgba(99,102,241,.12); color: #6366f1; }

.wk-prog-ctx-stage-pill[data-stage="active"]   { background: rgba(22,163,74,.14);  color: #16a34a; }

.wk-prog-ctx-stage-pill[data-stage="closing"]  { background: rgba(13,148,136,.14); color: #0d9488; }

.wk-prog-ctx-stage-pill[data-stage="closed"]   { background: rgba(100,116,139,.18); color: #475569; }

.wk-prog-ctx-hint { font-style: italic; }

.wk-prog-ctx-bar.is-scoped .wk-prog-ctx-hint { display: none; }

/* ── Minimal .wt-dropdown port for Work Hub (subset of my-learning.css) ── */
.wt-dropdown { position: relative; display: inline-block; }

.wt-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; min-width: 180px;
  border-radius: 10px; border: 1px solid var(--border, #e2e8f0);
  background: #fff; font-size: 13px; font-weight: 600; color: #334155;
  cursor: pointer; white-space: nowrap;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}

.wt-dropdown-trigger:hover { border-color: var(--c-blue, #3A86FF); color: var(--c-blue, #3A86FF); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59,130,246,.10); }

.wt-dropdown.is-open .wt-dropdown-trigger { border-color: var(--c-blue, #3A86FF); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }

.wt-dropdown-trigger .wt-dd-chevron { margin-left: auto; transition: transform .2s; flex-shrink: 0; }

.wt-dropdown.is-open .wt-dd-chevron { transform: rotate(180deg); }

.wt-dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 240px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15,23,42,.14), 0 4px 12px rgba(15,23,42,.06);
  padding: 6px; z-index: 1000;
  opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none;
  transition: opacity .18s, transform .18s;
}

.wt-dropdown.is-open .wt-dropdown-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.wt-dropdown-search { padding: 4px 6px 6px; }

.wt-dropdown-search input {
  width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0); font-size: 12px; color: #334155;
}

.wt-dropdown-search input:focus { outline: none; border-color: var(--c-blue, #3A86FF); }

.wt-dropdown-list { max-height: 240px; overflow-y: auto; }

.wt-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 8px;
  font-size: 13px; color: #334155; cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.wt-dropdown-item:hover { background: rgba(59,130,246,.06); color: var(--c-blue, #3A86FF); }

.wt-dropdown-item.is-active { background: rgba(59,130,246,.10); color: var(--c-blue, #3A86FF); font-weight: 600; }

.wt-dd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.wt-dd-sub { font-size: 11px; color: #94a3b8; margin-left: 6px; font-weight: 500; }

/* Grouped list (the Projects tab's client scope): a small uppercase caption
   over a hairline, so "Internal" sits apart from "Clients" exactly like the
   company picker in the project popup. The separator lives INSIDE the group so
   hiding an empty group during a search takes its rule with it. */
.wt-dd-group {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: #94a3b8; padding: 10px 12px 4px;
}

.wt-dd-sep { height: 1px; background: #f1f5f9; margin: 4px 8px 6px; }

.wt-dd-tag {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: #b45309; background: #fef3c7; border: 1px solid #fde68a;
}

/* ── company mark on a picker row ──
   A company is recognised by its logo long before its name is read, so every
   row in the client scope carries one: stored logo → favicon → initials tile
   (work.js _progClientMark). "All clients" and "No company" get a glyph instead
   of a fake logo, but keep the same slot so no label sits out of line. */
/* ── THE company mark ─────────────────────────────────────────────────────
   Every place a client is shown wears this exact object: a white ground, a
   rounded square, the logo CONTAINED (never cropped), and — when there is no
   logo — the company's own colour on the LETTERS instead of flooding the tile.
   A client has to look like one thing whether it's in a dropdown row, on a
   project card, or in the corner of a report card. Only the SIZE changes with
   context (24px default · 38px in a picker row · 44px on a project card). */
.wt-dd-mark {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border-s, #eef2f7);
  font-size: 9.5px; font-weight: 800; letter-spacing: .02em; color: #334155;
}

.wt-dd-mark img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  padding: 1px; box-sizing: border-box;
}

/* Initials keep the same ground and ring; the tinted glyphs carry the identity,
   so a logo-less company still reads as the same component a logo sits in. */
.wt-dd-mark--ini { background: #fff; }

.wt-dd-mark--glyph { background: #f8fafc; color: #94a3b8; }

.wt-dd-mark--glyph svg { width: 14px; height: 14px; }

/* A row with a mark needs a touch more air than a plain text row. */
.wt-dropdown-item--co { padding: 7px 12px; }

/* Smaller in the closed trigger — a 24px tile there makes the control taller
   than every other picker on the row. */
.wt-dropdown-trigger .wt-dd-mark { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 5px; }

.wt-dropdown-trigger .wt-dd-mark--glyph svg { width: 12px; height: 12px; }

/* ── Interactive Closeout checklist ── */
.wk-checklist { display: flex; flex-direction: column; gap: 6px; }

.wk-check-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: #fff; border: 1px solid var(--border, #e2e8f0);
  font-size: 13px; color: var(--ink, #0f172a);
  cursor: pointer; text-align: left; width: 100%;
  transition: border-color .15s, background .15s, transform .15s;
}

.wk-check-row:hover { border-color: var(--c-blue, #3A86FF); background: #f8fafc; }

.wk-check-row:focus-visible { outline: 2px solid var(--c-blue, #3A86FF); outline-offset: 1px; }

.wk-check-box {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 6px; border: 2px solid #cbd5e1; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}

.wk-check-row.is-done .wk-check-box { background: #10b981; border-color: #10b981; }

.wk-check-row.is-done .wk-check-box::after {
  content: ''; display: block;
  width: 9px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.wk-check-row.is-done { background: #f0fdf4; border-color: #bbf7d0; }

.wk-check-row.is-done .wk-check-lbl { text-decoration: line-through; color: var(--ink3, #64748b); }

.wk-check-lbl { flex: 1; }

.wk-check-ts { font-size: 11px; color: var(--ink3, #64748b); font-style: italic; }

.wk-check-row.is-done .wk-check-ts { color: #16a34a; font-style: normal; font-weight: 600; }

.wk-checklist[data-closeout-engagement=""] .wk-check-row { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ── Chip-bar label prefix (Type / Severity) ── */
.wk-chip-label { display: inline-flex; align-items: center; }

/* ── Row-click affordance on scoped rows ── */
.wk-data-table tr[data-program-id],
.wk-data-table tr[data-risk-id],
.wk-data-table tr[data-cr-id] { cursor: pointer; transition: background .15s; }

.wk-data-table tr[data-program-id]:hover,
.wk-data-table tr[data-risk-id]:hover,
.wk-data-table tr[data-cr-id]:hover { background: #f8fafc; }

/* ── Inline per-row editor <select> — fits cleanly in a table cell ── */
.wk-inline-select {
  padding: 4px 24px 4px 10px;
  border-radius: 6px; border: 1px solid var(--border, #e2e8f0);
  background: #fff; font-size: 12px; font-weight: 600; color: var(--ink, #0f172a);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
  text-transform: capitalize;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 12px;
}

.wk-inline-select:hover  { border-color: var(--c-blue, #3A86FF); }

.wk-inline-select:focus  { outline: none; border-color: var(--c-blue, #3A86FF); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }

/* ── Inline CR approve/reject buttons ── */
.wk-cr-actions { display: inline-flex; gap: 6px; }

.wk-cr-btn {
  padding: 4px 10px; font-size: 11px; font-weight: 700; border-radius: 6px;
  border: 1px solid transparent; cursor: pointer; transition: all .15s;
  text-transform: uppercase; letter-spacing: .02em;
}

.wk-cr-btn--approve { background: rgba(16,185,129,.12); color: #059669; border-color: rgba(16,185,129,.25); }

.wk-cr-btn--approve:hover { background: #10b981; color: #fff; }

.wk-cr-btn--reject  { background: rgba(239,68,68,.12); color: #dc2626; border-color: rgba(239,68,68,.25); }

.wk-cr-btn--reject:hover { background: #ef4444; color: #fff; }

.wk-cr-btn[disabled] { opacity: .55; cursor: default; }

/* ─────────────────────────────────────────────────────────────────
   In-tab program picker (closeout, planning) — independent of the
   lifecycle bar so each tab has a self-contained selector.
   ───────────────────────────────────────────────────────────────── */
.wk-tab-picker {
  display: flex; align-items: center; gap: 12px;
  /* flex-wrap + a full-width card child is what lets WkProjectPicker drop a
     project card under the control without editing the eight pickers in
     Work.html — the row above stays exactly as it was. */
  flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.wk-tab-picker-label {
  font-size: 11px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}

.wk-tab-picker-dd { flex: 1 1 auto; min-width: 240px; max-width: 480px; }

.wk-tab-picker-dd .wt-dropdown-trigger {
  width: 100%; min-width: 0;
}

.wk-tab-picker-clear {
  font-size: 11px; font-weight: 600; color: #64748b;
  padding: 8px 12px; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}

.wk-tab-picker-clear:hover { background: #f1f5f9; color: #0f172a; border-color: #e2e8f0; }

/* ─────────────────────────────────────────────────────────────────
   WkProjectPicker — the project card under every in-tab project
   selector, and the taller card-shaped rows inside its dropdown.
   Tyler, 2026-07-28: "I expect to see the name and the context of
   who's a part of it… the client contacts and our contacts help us
   visually see better." Applies to every page that picks a project.
   ───────────────────────────────────────────────────────────────── */
.wk-pp-host { flex: 1 0 100%; min-width: 0; }

.wk-pp-card {
  margin-top: 12px; padding: 14px 16px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 11px;
  display: flex; flex-direction: column; gap: 12px;
}

.wk-pp-card--all { background: #fcfdff; }

.wk-pp-card-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }

.wk-pp-card-logo { flex: 0 0 auto; }

.wk-pp-card-logo .wt-dd-mark { width: 38px; height: 38px; border-radius: 9px; font-size: 13px; }

.wk-pp-card-id { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.wk-pp-card-name {
  font-size: 15px; font-weight: 800; color: #0f172a; line-height: 1.25;
  cursor: pointer; border-radius: 5px; text-decoration: none;
}

.wk-pp-card-name:hover { color: var(--c-blue, #3A86FF); text-decoration: underline; text-underline-offset: 2px; }

.wk-pp-card-name:focus-visible { outline: 2px solid var(--c-blue, #3A86FF); outline-offset: 2px; }

.wk-pp-card-name--plain { cursor: default; }

.wk-pp-card-name--plain:hover { color: #0f172a; text-decoration: none; }

.wk-pp-card-sub {
  font-size: 12px; color: #64748b; display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; line-height: 1.4;
}

.wk-pp-card-client { font-weight: 600; color: #475569; }

.wk-pp-dot { color: #cbd5e1; }

.wk-pp-card-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.wk-pp-chip {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid #e2e8f0; color: #64748b; background: #f8fafc; white-space: nowrap;
}

.wk-pp-chip--late { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }

.wk-pp-chip--soon { background: #fef3c7; color: #b45309; border-color: #fcd34d; }

.wk-pp-chip--risk { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

.wk-pp-card-open {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 11px; font-weight: 700; color: var(--c-blue, #3A86FF);
  padding: 6px 10px; border-radius: 8px; border: 1px solid #dbeafe;
  background: #f0f7ff; white-space: nowrap; margin-left: auto;
}

.wk-pp-card-open:hover { background: #e0efff; border-color: #bfdbfe; }

.wk-pp-card-open:focus-visible { outline: 2px solid var(--c-blue, #3A86FF); outline-offset: 2px; }

.wk-pp-burn { height: 5px; border-radius: 999px; background: #eef2f7; overflow: hidden; }

.wk-pp-burn-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }

.wk-pp-burn-fill--ok { background: #16a34a; }

.wk-pp-burn-fill--watch { background: #f59e0b; }

.wk-pp-burn-fill--over { background: #dc2626; }

.wk-pp-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.wk-pp-stat { display: flex; flex-direction: column; gap: 1px; min-width: 76px; }

.wk-pp-stat-lbl {
  font-size: 9.5px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .05em;
}

.wk-pp-stat-val { font-size: 14px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }

.wk-pp-stat-val--bad { color: #dc2626; }

.wk-pp-people { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #f1f5f9; padding-top: 11px; }

.wk-pp-prow { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }

.wk-pp-prow-label {
  flex: 0 0 104px; font-size: 9.5px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .05em; padding-top: 6px;
}

.wk-pp-prow-label em { font-style: normal; text-transform: none; letter-spacing: 0; color: #cbd5e1; font-weight: 600; }

.wk-pp-prow-people { flex: 1 1 240px; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

.wk-pp-person {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  border: 1px solid #e8edf3; background: #fbfdff; max-width: 100%;
}

.wk-pp-person:hover { border-color: #bfdbfe; background: #f0f7ff; }

.wk-pp-person:focus-visible { outline: 2px solid var(--c-blue, #3A86FF); outline-offset: 1px; }

.wk-pp-person--more { cursor: default; color: #64748b; font-size: 11px; font-weight: 700; padding: 6px 11px; }

.wk-pp-person--more:hover { border-color: #e8edf3; background: #fbfdff; }

.wk-pp-person-txt { display: flex; flex-direction: column; min-width: 0; }

.wk-pp-person-name {
  font-size: 12px; font-weight: 700; color: #1e293b; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}

.wk-pp-person-role {
  font-size: 10px; color: #94a3b8; line-height: 1.25; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}

.wk-pp-face {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; color: #fff; overflow: hidden;
  background: #94a3b8; box-shadow: 0 0 0 1.5px #fff;
}

.wk-pp-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wk-pp-face--more { background: #e2e8f0; color: #475569; }

.wk-pp-empty { font-size: 11.5px; color: #94a3b8; font-style: italic; padding-top: 6px; }

/* Dropdown rows — a short project card each, so twenty similarly-named
   projects are tellable apart by logo and faces. */
/* ONE SCROLLBAR, and it belongs to the list.
   `.wt-dropdown-menu` is itself `max-height:320px; overflow-y:auto`, so giving
   the list inside it a taller max-height produced TWO nested scrollbars — the
   menu scrolling its own overflowing child, and the child scrolling its rows.
   The menu now sizes to its content and never scrolls; the list is the single
   scroller, and `mount()` measures the trigger on open to run it to the bottom
   of the window (this is only a floor for the first paint). */
.wk-tab-picker-dd .wt-dropdown-menu { max-height: none; overflow: visible; display: flex; flex-direction: column; }

.wk-tab-picker-dd .wt-dropdown-search { flex: 0 0 auto; }

.wk-tab-picker-dd .wt-dropdown-list { max-height: 68vh; overflow-y: auto; }

/* The portfolio row is a different KIND of choice from "one project", so it gets
   a rule under it and its own breathing room rather than reading as row zero. */
.wk-tab-picker-dd .wk-pp-opt--all {
  margin-bottom: 6px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border-s, #eef2f7);
  border-radius: 8px 8px 0 0;
}

/* Company captions — what turns hundreds of rows into a list you can scan. The
   company is named ONCE with a count, and it STICKS to the top of the scroller so
   you always know whose projects you're looking at mid-scroll. */
.wk-pp-grp {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px 5px; margin-top: 2px;
  background: color-mix(in srgb, var(--surf, #fff) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-s, #eef2f7);
}

.wk-pp-grp:first-child { margin-top: 0; }

.wk-pp-grp-l {
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wk-pp-grp-n {
  flex: 0 0 auto; font-size: 9px; font-weight: 800; color: #94a3b8;
  background: var(--border-s, #eef2f7); border-radius: 999px; padding: 1px 6px;
}

/* Our own work, said once and unmistakably — the row is otherwise identical to
   a client row (same logo, same faces), which is the point. */
.wk-pp-badge {
  flex: 0 0 auto; margin-left: 7px; vertical-align: middle;
  font-size: 8.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: #4d7a40; background: #eef6ea; border: 1px solid #d7e7d0;
  border-radius: 999px; padding: 1px 6px;
}

.wk-pp-opt.is-active .wk-pp-badge { color: #cfe6c4; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }

.wk-pp-opt-nameline { display: flex; align-items: center; min-width: 0; }

.wk-pp-opt-nameline .wk-pp-opt-name { min-width: 0; }

.wt-dropdown-item.wk-pp-opt {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
}

/* A real logo, not a favicon-sized tile — this row is how you tell twenty
   similarly-named projects apart, so the company mark has to be legible. */
.wk-pp-opt > .wt-dd-mark { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; font-size: 12px; }

.wk-pp-opt > .wt-dd-mark--glyph svg { width: 18px; height: 18px; }

.wk-pp-opt-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.wk-pp-opt-name {
  font-size: 13px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Both rosters on one line, each captioned — "Ours" vs "Theirs" is the point;
   an undifferentiated row of faces can't tell you which side someone is on. */
.wk-pp-opt-people { display: flex; align-items: center; gap: 12px; margin-top: 3px; flex-wrap: wrap; }

.wk-pp-optgrp { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }

.wk-pp-optgrp-lbl {
  font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: #94a3b8; white-space: nowrap;
}

.wk-pp-opt.is-active .wk-pp-optgrp-lbl { color: #7dabf8; }

.wk-pp-optgrp-faces { display: inline-flex; align-items: center; }

/* -4px, not -6px: these are 22px tiles and most fall back to two initials, so a
   deeper overlap hides the second letter of every face but the last. */
.wk-pp-optgrp-faces .wk-pp-face { width: 22px; height: 22px; font-size: 8px; margin-left: -4px; box-shadow: 0 0 0 1.5px #fff; }

.wk-pp-optgrp-faces .wk-pp-face:first-child { margin-left: 0; }

.wk-pp-opt-meta {
  font-size: 10.5px; color: #94a3b8; line-height: 1.3; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wk-pp-opt.is-active .wk-pp-opt-meta { color: #7dabf8; }

.wk-pp-opt-faces { flex: 0 0 auto; display: flex; align-items: center; }

.wk-pp-opt-faces .wk-pp-face { margin-left: -6px; }

.wk-pp-opt-faces .wk-pp-face:first-child { margin-left: 0; }

@media (prefers-color-scheme: dark) {
.wk-pp-card { background: #161b26; border-color: #2a3140; }

.wk-pp-card--all { background: #141926; }

.wk-pp-card-name { color: #f3f4f6; }

.wk-pp-card-client { color: #cbd5e1; }

.wk-pp-stat-val { color: #f3f4f6; }

.wk-pp-people { border-top-color: #2a3140; }

.wk-pp-person { background: #1b2130; border-color: #2a3140; }

.wk-pp-person-name { color: #e5e7eb; }

.wk-pp-burn { background: #232a38; }
}

/* ─────────────────────────────────────────────────────────────────
   Planning Workspace shell — gives the panel proper breathing room
   and the SOW/quote feel the rest of the app already uses.
   ───────────────────────────────────────────────────────────────── */
.wk-plan-shell {
  display: flex; flex-direction: column; gap: 16px;
  padding: 4px 4px 24px;
}

.wk-plan-help {
  padding: 14px 18px;
  background: linear-gradient(135deg, #eef2ff 0%, #ede9fe 100%);
  color: #4338ca; border: 1px solid #c7d2fe; border-radius: 12px;
  font-size: 13px; line-height: 1.5;
}

.wk-plan-help strong { font-weight: 700; }

.wk-plan-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}

@media (max-width: 1100px) {
.wk-plan-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wk-plan-summary-card {
  padding: 16px 18px;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.wk-plan-summary-lbl {
  font-size: 11px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 6px;
}

.wk-plan-summary-val {
  font-size: 22px; font-weight: 700; color: #0f172a;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}

.wk-plan-card {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  overflow: hidden;
}

.wk-plan-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid #f1f5f9;
}

.wk-plan-card-title { font-size: 15px; font-weight: 700; color: #0f172a; }

.wk-plan-card-sub { margin-top: 4px; font-size: 12px; color: #64748b; line-height: 1.5; }

.wk-plan-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.wk-plan-card-body { padding: 4px 6px; }

.wk-plan-table-wrap { padding: 10px 16px; }

.wk-plan-table { width: 100%; }

.wk-plan-table thead th {
  background: #f8fafc; font-size: 11px; font-weight: 700; color: #475569;
  text-transform: uppercase; letter-spacing: .04em;
}

.wk-plan-phase-row td {
  padding: 0 !important; border-bottom: none !important; background: transparent !important;
}

.wk-plan-phase-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 12px 8px;
  margin-top: 6px;
  border-top: 2px solid #e2e8f0;
}

.wk-plan-phase-row:first-child .wk-plan-phase-head { border-top: none; margin-top: 0; padding-top: 6px; }

.wk-plan-phase-name {
  font-size: 12px; font-weight: 800; color: #0f172a;
  text-transform: uppercase; letter-spacing: .05em;
}

.wk-plan-phase-meta {
  font-size: 11px; font-weight: 600; color: #64748b;
  font-variant-numeric: tabular-nums;
}

.wk-plan-phase-tag {
  display: inline-block; padding: 2px 8px;
  background: #eef2ff; color: #4338ca;
  font-size: 10px; font-weight: 700; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}

.wk-plan-card-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 22px;
  background: #f8fafc; border-top: 1px solid #e2e8f0;
}

.wk-plan-card-foot .wk-action-btn { white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────────
   Delivery board: Filter button + popup
   ───────────────────────────────────────────────────────────────── */
.wk-hidden { display: none !important; }

.wk-filter-bar {
  position: relative;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}

.wk-filter-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #334155;
  cursor: pointer; transition: all .15s;
}

.wk-filter-btn:hover { border-color: #3b82f6; color: #1d4ed8; box-shadow: 0 4px 12px rgba(59,130,246,.10); }

.wk-filter-btn.has-active { border-color: #3b82f6; color: #1d4ed8; background: #eff6ff; }

.wk-filter-btn .wk-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #3b82f6; color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 999px;
}

.wk-filter-active { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }

.wk-filter-active-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 10px;
  background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
  font-size: 11px; font-weight: 600; border-radius: 999px;
  cursor: pointer; transition: all .15s;
}

.wk-filter-active-chip:hover { background: #dbeafe; }

.wk-filter-active-chip svg { opacity: .65; }

.wk-filter-clear {
  font-size: 11px; font-weight: 600; color: #64748b;
  padding: 6px 10px; border-radius: 6px;
  background: transparent; border: 1px solid transparent; cursor: pointer; transition: all .15s;
}

.wk-filter-clear:hover { background: #f1f5f9; color: #0f172a; }

.wk-filter-popup {
  position: absolute; top: calc(100% + 6px); left: 0;
  width: min(720px, 100%);
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,.12);
  z-index: 50;
  overflow: hidden;
}

.wk-filter-popup[hidden] { display: none; }

.wk-filter-popup-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 18px;
}

.wk-filter-popup-grid .wk-filter-section:first-child { grid-column: 1 / -1; }

.wk-filter-popup-grid .wk-filter-section[data-wide] { grid-column: 1 / -1; }

.wk-filter-section {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}

.wk-filter-section-lbl {
  font-size: 11px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .04em;
}

.wk-filter-search {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
}

.wk-filter-search svg { width: 14px; height: 14px; color: #94a3b8; flex-shrink: 0; }

.wk-filter-search input {
  flex: 1; min-width: 0; padding: 8px 0;
  background: transparent; border: none; outline: none;
  font-size: 13px; color: #0f172a;
}

.wk-filter-options {
  max-height: 180px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
}

.wk-filter-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: transparent; border: none; border-radius: 6px;
  font-size: 12px; color: #334155; text-align: left; cursor: pointer; transition: all .12s;
}

.wk-filter-opt:hover { background: #ffffff; }

.wk-filter-opt-check {
  width: 14px; height: 14px; border: 1.5px solid #cbd5e1; border-radius: 4px; flex-shrink: 0;
  background: #ffffff; transition: all .12s;
}

.wk-filter-opt.is-active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }

.wk-filter-opt.is-active .wk-filter-opt-check {
  background: #3b82f6; border-color: #3b82f6;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 10px; background-position: center; background-repeat: no-repeat;
}

.wk-filter-opt-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wk-filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }

.wk-filter-pill {
  padding: 5px 12px;
  background: #f1f5f9; border: 1px solid transparent; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: #475569;
  cursor: pointer; transition: all .12s;
}

.wk-filter-pill:hover { background: #e2e8f0; }

.wk-filter-pill.is-active { background: #3b82f6; color: #fff; }

.wk-filter-popup-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  background: #f8fafc; border-top: 1px solid #e2e8f0;
}

/* ─────────────────────────────────────────────────────────────────
   Upcoming Milestones (Programs Overview support module)
   ───────────────────────────────────────────────────────────────── */
.wk-support-module--wide { grid-column: 1 / -1; }

.wk-support-count {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 8px;
  background: var(--_sm-color, #4338ca); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 999px;
}

.wk-upcoming-ms { display: flex; flex-direction: column; gap: 6px; }

.wk-ums-row {
  display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px;
  cursor: pointer; transition: all .15s;
}

.wk-ums-row:hover { border-color: #c7d2fe; background: #f8fafc; box-shadow: 0 2px 8px rgba(67,56,202,.08); }

.wk-ums-date {
  font-size: 11px; font-weight: 700; color: #475569;
  font-variant-numeric: tabular-nums;
}

.wk-ums-mid { min-width: 0; }

.wk-ums-label {
  font-size: 13px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wk-ums-prog {
  font-size: 11px; color: #64748b; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wk-ums-days {
  padding: 3px 10px; border-radius: 999px;
  background: #f1f5f9; color: #475569;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}

.wk-ums-days.is-near { background: #fef3c7; color: #92400e; }

.wk-ums-days.is-soon { background: #fee2e2; color: #b91c1c; }

.wk-ums-days.is-overdue { background: #ef4444; color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   DESIGN PREVIEW — sample cards visible at top of Home tab
   Self-contained styles (do not depend on existing card classes) so
   the user can iterate on the look without touching real renderers.
   ════════════════════════════════════════════════════════════════════ */
.wk-design-preview {
  border: 1px dashed #cbd5e1;
  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
  border-radius: 14px;
  padding: 16px 18px 18px;
  margin: 0 0 16px;
}

.wk-dp-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.wk-dp-title { font-size: 13px; font-weight: 800; color: #0f172a; letter-spacing: .01em; }

.wk-dp-sub { font-size: 12px; color: #475569; margin-top: 2px; max-width: 720px; }

.wk-dp-close {
  margin-left: auto; width: 26px; height: 26px;
  border: 1px solid #e2e8f0; background: #fff; color: #64748b;
  border-radius: 8px; font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

.wk-dp-close:hover { color: #0f172a; border-color: #94a3b8; }

.wk-dp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.wk-dp-card {
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 14px 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.wk-dp-card-tag {
  position: absolute; top: -8px; left: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: #0f172a; color: #fff;
  padding: 3px 8px; border-radius: 999px;
}

/* Task card */
.wk-dp-task-row { display: flex; gap: 10px; align-items: flex-start; }

.wk-dp-check {
  width: 20px; height: 20px; border-radius: 6px; border: 2px solid #cbd5e1;
  color: #94a3b8; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.wk-dp-task-body { flex: 1; min-width: 0; }

.wk-dp-task-title { font-size: 13.5px; font-weight: 700; color: #0f172a; line-height: 1.3; }

.wk-dp-task-desc { font-size: 12px; color: #64748b; margin-top: 3px; line-height: 1.4; }

.wk-dp-pillrow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.wk-dp-pill {
  font-size: 10.5px; font-weight: 600; padding: 3px 8px;
  border-radius: 999px; border: 1px solid #e2e8f0; background: #f8fafc; color: #475569;
  white-space: nowrap;
}

.wk-dp-pill--prog { color: #1e40af; background: #dbeafe; border-color: #bfdbfe; }

.wk-dp-pill--due { color: #92400e; background: #fef3c7; border-color: #fde68a; }

.wk-dp-pill--time { color: #065f46; background: #d1fae5; border-color: #a7f3d0; }

.wk-dp-pill--tag { color: #6b21a8; background: #f3e8ff; border-color: #e9d5ff; }

.wk-dp-pri {
  font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 6px; flex-shrink: 0;
}

.wk-dp-pri--high { background: #fee2e2; color: #b91c1c; }

/* Project card */
.wk-dp-proj-head { display: flex; align-items: center; gap: 8px; }

.wk-dp-proj-title { font-size: 14px; font-weight: 700; color: #0f172a; flex: 1; }

.wk-dp-status {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}

.wk-dp-status--ontrack { background: #d1fae5; color: #065f46; }

.wk-dp-proj-meta {
  display: flex; flex-wrap: wrap; gap: 4px;
  font-size: 11.5px; color: #64748b; margin-top: 4px;
}

.wk-dp-progress {
  height: 6px; border-radius: 999px; background: #e2e8f0; margin-top: 10px; overflow: hidden;
}

.wk-dp-progress-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #2563eb); border-radius: 999px; }

.wk-dp-proj-footer {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: 11.5px; color: #475569; font-weight: 600;
}

.wk-dp-budget-ok { color: #047857; }

/* Program card */
.wk-dp-prog-row { display: flex; gap: 10px; align-items: center; }

.wk-dp-prog-logo {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.wk-dp-prog-body { flex: 1; min-width: 0; }

.wk-dp-prog-title { font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.25; }

.wk-dp-prog-meta { font-size: 11.5px; color: #64748b; margin-top: 2px; }

.wk-dp-health { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }

.wk-dp-health--green  { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }

.wk-dp-health--yellow { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }

.wk-dp-health--red    { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }

.wk-dp-prog-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #e2e8f0;
}

.wk-dp-prog-stats > div { display: flex; flex-direction: column; align-items: flex-start; }

.wk-dp-stat-val { font-size: 14px; font-weight: 800; color: #0f172a; line-height: 1; }

.wk-dp-stat-lbl { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }

/* Two-row scorecard stack for Programs overview */
.wk-prog-sc-stack { display: flex; flex-direction: column; gap: 0; }

/* ═══════════════════════════════════════════════════════════
   PROGRAMS TOOLBAR — replaces generic wk-focus-head
   ═══════════════════════════════════════════════════════════ */
.wk-prog-toolbar {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

/* Calendar/templates pattern: single row, sectioned-off left chip
   for the primary action (New Program) + divider + count, right
   side carries view-toggle/search/filters. */
.wk-prog-toolbar--cal {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.wk-prog-toolbar--cal .wkt-toolbar-left { flex: none; }

/* The scope label now names the client scope too ("All Projects · MRG Tool &
   Die"), and .wkt-toolbar-left doesn't flex — so without a cap a long company
   name would push the search box and view toggles off the row. */
.wk-prog-toolbar--cal .wkt-toolbar-label {
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wk-prog-toolbar--cal .wkt-toolbar-count { background: #6366f1; color: #fff; }

.wk-prog-toolbar-right {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 320px; min-width: 0; justify-content: flex-end;
}

.wk-prog-toolbar-right .wk-prog-search-bar { flex: 1 1 220px; max-width: 380px; }

.wk-prog-toolbar-row1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.wk-prog-toolbar-title-group { display: flex; align-items: center; gap: 8px; }

.wk-prog-toolbar-label { font-size: 15px; font-weight: 700; color: #0f172a; }

.wk-prog-toolbar-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: #6366f1; color: #fff; font-size: 11px; font-weight: 700;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
}

.wk-prog-toolbar-actions { display: flex; align-items: center; gap: 8px; }

.wk-prog-toolbar-row2 { display: flex; align-items: center; gap: 8px; }

.wk-prog-search-bar {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 0 12px; height: 36px; transition: border-color .15s, box-shadow .15s;
}

.wk-prog-search-bar:focus-within {
  border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.wk-prog-search-bar svg { color: #94a3b8; flex-shrink: 0; }

.wk-prog-search-bar input {
  border: none; background: transparent; outline: none;
  font-size: 13px; color: #0f172a; width: 100%;
}

.wk-prog-search-bar input::placeholder { color: #94a3b8; }

/* ═══════════════════════════════════════════════════════════
   PROGRAM CARDS — redesigned
   ═══════════════════════════════════════════════════════════ */
.wk-prog-card-section { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.wk-prog-card-grid {
  display: grid;
  /* Two-up: each card takes up half the row (the look Tyler prefers). */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
  align-content: start;
}

@media (max-width: 720px) {
.wk-prog-card-grid { grid-template-columns: 1fr; }
}

.wk-prog-card-grid .wk-empty { grid-column: 1 / -1; }

/* ══ SORT ROW ══════════════════════════════════════════════════════════
   Sits directly above every project card grid. Deliberately the same control
   as the Work Streams panel inside a project (.ep-deliv-sort / .ep-deliv-sortbtn
   in value-tracker.css) — same 11px uppercase label, same 4px-gap pill row,
   same ink-fill active state — so the two surfaces read as one system. Those
   rules live in a stylesheet the Projects tab doesn't load, hence the copy
   rather than a shared class; keep the two in step if either moves. */
.wk-prog-sortrow {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 0 16px 12px;
  margin-top: -2px;
}

.wk-prog-sort-lbl {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: #94a3b8;
  margin-right: 2px;
}

.wk-prog-sortbtn {
  padding: 4px 10px;
  font: inherit; font-size: 11px; font-weight: 600;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  border-radius: 6px;
  cursor: pointer;
  transition: all .12s ease;
}

.wk-prog-sortbtn:hover { background: #f8fafc; color: #0f172a; }

.wk-prog-sortbtn.is-active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

/* Pinned right, like the Work Streams toolbar's own count. */
.wk-prog-sort-count {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
}

@media (max-width: 640px) {
.wk-prog-sort-count { margin-left: 0; width: 100%; }
}

/* Card entry animation — runs on every grid render (innerHTML swap
   recreates the nodes, so scorecard clicks / search debounce no
   longer snap between states). */
@keyframes wkProgCardIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.wk-prog-card-grid > .wk-dp-card--program { animation: wkProgCardIn .26s cubic-bezier(.2,.8,.2,1) both; }

.wk-prog-card-grid > .wk-dp-card--program:nth-child(1)   { animation-delay: 0s; }

.wk-prog-card-grid > .wk-dp-card--program:nth-child(2)   { animation-delay: .025s; }

.wk-prog-card-grid > .wk-dp-card--program:nth-child(3)   { animation-delay: .05s; }

.wk-prog-card-grid > .wk-dp-card--program:nth-child(4)   { animation-delay: .075s; }

.wk-prog-card-grid > .wk-dp-card--program:nth-child(5)   { animation-delay: .10s; }

.wk-prog-card-grid > .wk-dp-card--program:nth-child(6)   { animation-delay: .125s; }

.wk-prog-card-grid > .wk-dp-card--program:nth-child(7)   { animation-delay: .15s; }

.wk-prog-card-grid > .wk-dp-card--program:nth-child(8)   { animation-delay: .175s; }

.wk-prog-card-grid > .wk-dp-card--program:nth-child(9)   { animation-delay: .20s; }

.wk-prog-card-grid > .wk-dp-card--program:nth-child(n+10){ animation-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
.wk-prog-card-grid > .wk-dp-card--program { animation: none !important; }
}

/* Base card */
.wk-dp-card--program {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  position: relative;
}

.wk-dp-card--program:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.1);
  transform: translateY(-3px);
  border-color: var(--prog-accent, #6366f1);
}

.wk-dp-card--program:focus-visible {
  outline: 2px solid var(--prog-accent, #6366f1); outline-offset: 2px;
}

/* Inner layout */
.wk-prog-card-inner { display: flex; flex-direction: column; height: 100%; }

/* Left accent bar */
.wk-prog-card-accent-bar {
  position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
  background: var(--prog-accent, #10b981);
  border-radius: 12px 0 0 12px;
}

/* Header */
.wk-prog-card-header {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 16px 10px 20px;
  /* Faint accent wash keyed to the project's identity color so each card's hue
     reads across the whole header cap, not just the 4px rail. Kept very light
     (top-down fade to transparent) so it never fights the company logo or the
     dark title text. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--prog-accent, #6366f1) 8%, #fff) 0%,
    #fff 100%);
}

/* THE company mark at project-card size — same white ground, same rounded
   square, same `contain`, same tinted initials as the dropdown row and the
   report-card chip (see the .wt-dd-mark block). It used to be a CIRCLE tinted
   with the project's accent, so one client looked like a different object here
   than in every list it appears in. */
.wk-prog-card-logo {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: #fff;
  color: #334155;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; letter-spacing: .02em;
  border: 1px solid var(--border-s, #eef2f7);
  overflow: hidden;
}

/* Company logos are arbitrary shapes (wide wordmarks, square marks, favicons).
   `contain` fits the WHOLE logo so it never zoom-crops into the center (a wide
   logo like the VisionOne wordmark cropped to its green eye). */
.wk-prog-card-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: #fff; padding: 2px; box-sizing: border-box; }

/* Initials fallback (no logo on file) — the LETTERS carry the company colour on
   the same white ground, so a logo-less client is the same object as one with a
   logo. It used to flood the tile with a company tint, which is what made these
   read as a different component from every other client mark. */
.wk-prog-card-logo--initials { background: #fff; }

.wk-prog-card-title-block { flex: 1; min-width: 0; }

.wk-prog-card-name {
  font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.3;
  /* Wrap to at most two lines so long project names are readable, then
     ellipsize the overflow instead of clipping to a single line. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis;
  word-break: break-word;
}

.wk-prog-card-client {
  font-size: 12px; color: #64748b; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Status chip */
.wk-prog-status-chip {
  flex-shrink: 0; display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px; margin-top: 2px;
}

.wk-prog-status-chip--ok     { background: #dcfce7; color: #15803d; }

.wk-prog-status-chip--warn   { background: #fef9c3; color: #854d0e; }

.wk-prog-status-chip--danger { background: #fee2e2; color: #b91c1c; }

/* Meta line */
.wk-prog-card-meta {
  font-size: 11.5px; color: #64748b;
  padding: 0 16px 10px 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Area of the business (wk-areas.js). Sits under the meta line and above the
   gauges — the chip's own colours come from wk-areas.js, which injects them,
   so this only has to place it. Negative top margin closes the gap the meta
   line's bottom padding leaves when both are present. */
.wk-prog-card-area { padding: 0 16px 10px 20px; margin-top: -4px; }

.gl-view-list .wk-prog-card-area,
.gl-view-heatmap .wk-prog-card-area { display: none; }

/* Progress bar */
.wk-prog-card-progress { padding: 0 16px 12px 20px; }

.wk-prog-bar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }

.wk-prog-bar-lbl { font-size: 10.5px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.wk-prog-bar-pct { font-size: 11px; font-weight: 700; color: #475569; }

.wk-prog-bar-track {
  height: 7px; background: #f1f5f9; border-radius: 10px; overflow: hidden;
}

.wk-prog-bar-fill {
  height: 100%; border-radius: 10px;
  transition: width .4s cubic-bezier(.22,1,.36,1);
}

.wk-prog-bar-fill--ok     { background: linear-gradient(90deg, #10b981, #34d399); }

.wk-prog-bar-fill--warn   { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

.wk-prog-bar-fill--danger { background: linear-gradient(90deg, #ef4444, #f87171); }

/* Over budget is not "very red danger" — it's a different fact, so it gets its
   own hatched fill that reads as "past the line" at a glance. */
.wk-prog-bar-fill--over {
  background: repeating-linear-gradient(135deg, #dc2626 0 6px, #b91c1c 6px 12px);
}

.wk-prog-bar-fill--idle { background: #e2e8f0; }

/* What the percentage is counting — "3 of 8 delivered", "$14k of $52k · $38k
   left". A bare 0% is unreadable: it can mean nothing is planned or nothing is
   done, and those need different answers from the person reading the card. */
.wk-prog-bar-sub { font-size: 10.5px; color: #64748b; margin-top: 5px; letter-spacing: .01em; }

.wk-prog-bar-sub--none { color: #b6c2d2; font-style: italic; }

.wk-prog-bar-pct--none, .wk-prog-bar-pct--idle { color: #b6c2d2; }

.wk-prog-bar-pct--warn   { color: #b45309; }

.wk-prog-bar-pct--danger { color: #dc2626; }

.wk-prog-bar-pct--over   { color: #b91c1c; font-weight: 800; }

/* Two gauges — budget burn above delivery progress. Burn is the number Tyler
   reads first, and delivery progress swings with how many deliverables happen to
   exist, so neither can stand in for the other. Tighter than a lone bar so the
   card doesn't grow a whole row taller for the second one. */
.wk-prog-card-bars { display: flex; flex-direction: column; gap: 10px; }

.wk-prog-card-bars .wk-prog-card-progress { padding-bottom: 0; }

.wk-prog-card-bars > .wk-prog-card-progress:last-child { padding-bottom: 12px; }

.wk-prog-card-bars .wk-prog-bar-sub { margin-top: 4px; }

/* Stats grid */
.wk-prog-card-stats {
  display: flex; gap: 0;
  padding: 10px 20px 10px 20px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
}

/* Each stat owns an equal third and its content sits CENTRED in it — the three
   numbers used to hug the left edge of their cell with the divider pressed up
   against the text, so the row read as three ragged columns instead of one band
   (Tyler, 2026-07-28: "the numbers on these cards, the 3 out of 5, all that, need
   to be more centered within their area and just look better"). Symmetric padding
   on every cell, so the dividers land midway between neighbours. `min-width:0`
   lets the sub-line ellipsis do its job instead of stretching the cell. */
.wk-prog-stat {
  flex: 1 1 0; min-width: 0;
  /* Two-line caption room reserved, so a wrapping caption doesn't make one card
     taller than its neighbour in the same row. */
  justify-content: flex-start;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 6px 10px;
  border-right: 1px solid #e2e8f0;
}

.wk-prog-stat:last-child { border-right: none; }

/* Tabular figures so "3/5" and "12/40" line up column to column. */
.wk-prog-stat-val {
  font-size: 16px; font-weight: 800; color: #0f172a; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.wk-prog-stat-val--empty { color: #cbd5e1; }

.wk-prog-stat-lbl { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }

.wk-prog-stat--overdue .wk-prog-stat-val { color: #ef4444; }

.wk-prog-stat--soon .wk-prog-stat-val { color: #b45309; }

/* Finished: the deadline is settled, so it reads calm and green — never the
   amber "act on me" of a live countdown. */
.wk-prog-stat--settled .wk-prog-stat-val { color: #15803d; }

.wk-prog-stat--settled .wk-prog-stat-sub { color: #64748b; }

/* Third line under a stat: what makes the headline number readable — the spend
   behind a budget, the date behind "42d left". */
/* The caption wraps to a second line rather than truncating. Centred in a third
   of the card there isn't room for "Nothing scheduled" on one line, and
   "Nothing schedu…" is worse than two short lines. Clamped at 2 so a long spend
   string can't push the cards out of alignment. */
.wk-prog-stat-sub {
  font-size: 10px; color: #64748b; margin-top: 3px; text-align: center;
  line-height: 1.3; letter-spacing: .01em;
  max-width: 100%; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.wk-prog-stat-sub--warn   { color: #b45309; font-weight: 600; }

.wk-prog-stat-sub--danger { color: #dc2626; font-weight: 700; }

/* An empty stat's own caption stays quiet — "Not set" is information, not an
   alarm, and it shouldn't compete with the numbers that are real. */
.wk-prog-stat-val--empty + .wk-prog-stat-lbl + .wk-prog-stat-sub { color: #b6c2d2; font-style: italic; }

/* Lifecycle quick-action (Start Planning / Activate / Resume) — inline promote
   buttons for non-active cards, rendered between the stats grid and the people
   band. Had NO styling, so the label rendered as bare text floating on the card;
   these give it a proper button. */
.wk-prog-card-lifecycle {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px 4px 20px;
}

.wk-prog-lc-btn {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px;
  font-size: 12.5px; font-weight: 700; font-family: inherit; line-height: 1;
  color: #334155; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.wk-prog-lc-btn:hover { background: #f8fafc; border-color: #cbd5e1; }

.wk-prog-lc-btn:active { transform: translateY(1px); }

.wk-prog-lc-btn:disabled { opacity: .6; cursor: default; }

/* ── Lifecycle button colour = the ACTION, not "this is the primary one" ──
   One green button per card meant Archive looked exactly as inviting as
   Activate. Now the hue carries the meaning: green GO, indigo PLAN, blue
   RESTORE, grey FILE. Tyler, 2026-07-28: "the colors of the 'Start Project' and
   'Start Planning' need to change based on what it is. 'Archive Project' would
   be gray." `--primary` is deliberately gone — a class that meant only
   "prominent" is what let a filing action wear the go colour. */
.wk-prog-lc-btn--primary,
.wk-prog-lc-btn--go {
  color: #fff; background: #16a34a; border-color: transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

.wk-prog-lc-btn--primary:hover,
.wk-prog-lc-btn--go:hover { background: #15803d; border-color: transparent; }

/* Planning is thinking, not shipping. */
.wk-prog-lc-btn--plan {
  color: #fff; background: #4f46e5; border-color: transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

.wk-prog-lc-btn--plan:hover { background: #4338ca; border-color: transparent; }

/* Bringing a project back out of the archive. */
.wk-prog-lc-btn--restore {
  color: #fff; background: #2563eb; border-color: transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

.wk-prog-lc-btn--restore:hover { background: #1d4ed8; border-color: transparent; }

/* Filing is housekeeping: grey, and quiet. Outlined when it sits beside another
   action, filled grey when it is the only thing to do so it still reads as a
   button rather than a disabled one. */
.wk-prog-lc-btn--file {
  color: #475569; background: #f1f5f9; border-color: #e2e8f0;
}

.wk-prog-lc-btn--file:hover { background: #e2e8f0; border-color: #cbd5e1; color: #334155; }

.wk-prog-lc-btn--file-solo {
  color: #fff; background: #64748b; border-color: transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

.wk-prog-lc-btn--file-solo:hover { background: #475569; border-color: transparent; color: #fff; }

/* People band — Team + Client groups, left-aligned so a lone group sits at the
   start instead of floating in the middle of the card. */
.wk-prog-card-people {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 18px; flex-wrap: wrap;
  padding: 10px 20px;
  border-top: 1px solid #f1f5f9;
}

/* Footer */
.wk-prog-card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 16px 10px 20px;
  border-top: 1px solid #f1f5f9;
}

.wk-prog-card-dates {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: #94a3b8;
}

.wk-prog-card-id {
  font-size: 10.5px; font-weight: 700; color: #94a3b8;
  font-family: ui-monospace, monospace;
  background: #f1f5f9; padding: 2px 7px; border-radius: 5px;
  letter-spacing: .04em;
}

/* Program card — List view */
.gl-view-list .wk-prog-card-grid { grid-template-columns: 1fr; gap: 6px; padding: 12px 16px; }

.gl-view-list .wk-dp-card--program:hover { transform: none; }

.gl-view-list .wk-prog-card-inner { flex-direction: row; align-items: center; min-height: 0; }

.gl-view-list .wk-prog-card-accent-bar { width: 3px; position: relative; align-self: stretch; border-radius: 4px; margin-right: 0; flex-shrink: 0; }

/* The name is what you scan a list by, so it gets a floor: without one, adding
   the progress column back squeezed it until it broke words mid-syllable
   ("Build er…"). Everything to its right is fixed-width, so the row absorbs the
   difference here. */
.gl-view-list .wk-prog-card-header { flex: 1 1 auto; min-width: 210px; padding: 10px 12px 10px 14px; }

.gl-view-list .wk-prog-card-name { word-break: normal; overflow-wrap: anywhere; }

.gl-view-list .wk-prog-card-logo { width: 34px; height: 34px; font-size: 11px; }

.gl-view-list .wk-prog-card-meta { display: none; }

/* List rows used to hide the progress block outright, so the one view built for
   scanning many projects at once was the one that never showed how far along any
   of them was. Keep both gauges, and keep their labels — in a row the label is
   the only thing telling burn from delivery. The sub-lines go: a row has to stay
   a row. Side by side the two gauges blew the row's width budget (two gauges +
   three stats + faces + footer overflowed at 1500px), so they stack inside ONE
   narrow column — both still there, burn still first, height unchanged. */
.gl-view-list .wk-prog-card-bars { gap: 5px; flex: 0 1 132px; min-width: 96px; }

.gl-view-list .wk-prog-card-progress,
.gl-view-list .wk-prog-card-bars > .wk-prog-card-progress:last-child {
  padding: 0 8px 0 0;
}

.gl-view-list .wk-prog-bar-lbl { font-size: 8px; letter-spacing: .02em; }

.gl-view-list .wk-prog-bar-header { margin-bottom: 2px; gap: 6px; }

.gl-view-list .wk-prog-bar-pct { font-size: 10px; }

.gl-view-list .wk-prog-bar-track { height: 5px; }

.gl-view-list .wk-prog-bar-sub { display: none; }

.gl-view-list .wk-prog-card-stats { background: transparent; border-top: none; padding: 0 12px; flex-shrink: 0; gap: 20px; }

.gl-view-list .wk-prog-stat { border-right: none; flex: 0 0 auto; align-items: flex-end; text-align: right; padding: 0; }

.gl-view-list .wk-prog-stat-sub { text-align: right; }

.gl-view-list .wk-prog-stat-lbl { margin-top: 3px; }

.gl-view-list .wk-prog-stat-sub { text-align: right; font-size: 9.5px; }

.gl-view-list .wk-prog-card-footer { border-top: none; padding: 0 12px 0 0; flex-shrink: 0; }

/* List view: card is a compact row — the people band inlines (no border/labels)
   so faces stay visible without breaking the row shape. */
.gl-view-list .wk-prog-card-people {
  border-top: none; padding: 0 8px; gap: 10px;
  justify-content: flex-end; flex-shrink: 0; flex-wrap: nowrap;
}

.gl-view-list .wk-prog-card-people .wk-goal-people-lbl { display: none; }

.gl-view-list .wk-prog-card-people .wk-goal-people-grp--client { padding-left: 8px; }

/* Program card — Heatmap ("grid") view: a DENSE grid of compact cards colored
   by health so at-risk/critical work jumps out. Deliberately distinct from Card
   view (tighter columns, trimmed body, strong health wash) so switching views is
   unmistakable. */
.gl-view-heatmap .wk-prog-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.gl-view-heatmap .wk-dp-card--program { border-width: 1px; }

/* Trim the card down to a health tile: header + status only. */
.gl-view-heatmap .wk-prog-card-bars,
.gl-view-heatmap .wk-prog-card-progress,
.gl-view-heatmap .wk-prog-card-stats,
.gl-view-heatmap .wk-prog-card-meta,
.gl-view-heatmap .wk-prog-card-footer,
.gl-view-heatmap .wk-prog-card-people,
.gl-view-heatmap .wk-prog-card-lc-action { display: none; }

.gl-view-heatmap .wk-prog-card-header { padding: 14px 14px 14px 18px; }

.gl-view-heatmap .wk-prog-card-accent-bar { width: 6px; }

.gl-view-heatmap .wk-dp-card--program.mw-hm--bad,
.gl-view-heatmap .wk-dp-card--program[style*="--prog-accent:#ef4444"] {
  background: color-mix(in srgb, #ef4444 14%, #fff);
  border-color: color-mix(in srgb, #ef4444 45%, #fff);
}

.gl-view-heatmap .wk-dp-card--program.mw-hm--warn,
.gl-view-heatmap .wk-dp-card--program[style*="--prog-accent:#f59e0b"] {
  background: color-mix(in srgb, #f59e0b 14%, #fff);
  border-color: color-mix(in srgb, #f59e0b 45%, #fff);
}

.gl-view-heatmap .wk-dp-card--program.mw-hm--good,
.gl-view-heatmap .wk-dp-card--program[style*="--prog-accent:#10b981"] {
  background: color-mix(in srgb, #10b981 12%, #fff);
  border-color: color-mix(in srgb, #10b981 40%, #fff);
}

/* Calendar example */
.wk-dp-cal {
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px;
  background: rgba(37,99,235,.06); box-shadow: inset 0 0 0 2px #2563eb;
}

.wk-dp-cal-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }

.wk-dp-cal-dow { font-size: 10px; font-weight: 800; color: #1e40af; letter-spacing: .06em; }

.wk-dp-cal-num { font-size: 22px; font-weight: 800; color: #1e40af; line-height: 1; }

.wk-dp-cal-events { display: flex; flex-direction: column; gap: 4px; }

.wk-dp-cal-evt {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #0f172a;
  padding: 4px 8px; border-radius: 6px; background: #fff;
  border: 1px solid #e2e8f0;
}

.wk-dp-cal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.wk-dp-cal-more { font-size: 10.5px; color: #64748b; padding-left: 13px; }

/* Right-side Upcoming card */
.wk-dp-upcoming-card {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 6px; border-bottom: 1px solid #f1f5f9;
}

.wk-dp-upcoming-card:last-child { border-bottom: none; }

.wk-dp-up-date {
  width: 38px; flex-shrink: 0; text-align: center;
  background: #f1f5f9; border-radius: 8px; padding: 4px 0;
}

.wk-dp-up-month { font-size: 9px; font-weight: 800; color: #64748b; letter-spacing: .05em; }

.wk-dp-up-day { font-size: 16px; font-weight: 800; color: #0f172a; line-height: 1; }

.wk-dp-up-name { font-size: 12.5px; font-weight: 600; color: #0f172a; line-height: 1.25; }

.wk-dp-up-meta { font-size: 11px; color: #64748b; margin-top: 2px; }

.wk-dp-up-type {
  font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  background: #ede9fe; color: #5b21b6; text-transform: uppercase; letter-spacing: .04em;
}

.wk-dp-up-type--ms { background: #fef3c7; color: #92400e; }

/* Container with example mini cards */
.wk-dp-container {
  background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
  border: 1px solid #fde68a; border-radius: 10px; padding: 10px;
}

.wk-dp-container-head {
  display: flex; align-items: center; gap: 6px; padding-bottom: 8px;
  border-bottom: 1px solid #fef3c7; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 700; color: #92400e;
}

.wk-dp-container-icon { font-size: 14px; }

.wk-dp-container-title { flex: 1; }

.wk-dp-container-count {
  background: #f59e0b; color: #fff; font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 999px;
}

.wk-dp-container-body { display: flex; flex-direction: column; gap: 6px; }

.wk-dp-mini-card {
  display: flex; gap: 8px; align-items: center; padding: 6px 8px;
  background: #fff; border: 1px solid #fef3c7; border-radius: 8px;
}

.wk-dp-mini-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.wk-dp-mini-body { flex: 1; min-width: 0; }

.wk-dp-mini-title { font-size: 12px; font-weight: 600; color: #0f172a; line-height: 1.2; }

.wk-dp-mini-meta { font-size: 10.5px; color: #64748b; margin-top: 1px; }

/* Hidden state */
.wk-design-preview.is-hidden { display: none !important; }

/* Global variant — sits above all tab content, full-bleed within the page frame */
.wk-design-preview--global { margin: 0 16px 14px; }

@media (min-width: 1200px) {
.wk-design-preview--global { margin: 0 24px 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   FLOATING + NEW TASK FAB — visible app-wide on the Work hub
   ════════════════════════════════════════════════════════════════════ */
#wkNewTaskFab {
  position: fixed; right: 24px; bottom: 24px;
  z-index: 9000;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 999px; border: none;
  background: var(--c-blue, #2563eb); color: #fff;
  font-size: 13px; font-weight: 700; font-family: inherit;
  box-shadow: 0 8px 24px rgba(37,99,235,.35), 0 2px 6px rgba(15,23,42,.12);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .18s ease, background .15s ease;
}

#wkNewTaskFab:hover { background: var(--c-blue-d, #1e40af); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(37,99,235,.42); }

#wkNewTaskFab:active { transform: scale(.97); }

#wkNewTaskFab svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; flex-shrink: 0; }

@media (max-width: 640px) {
#wkNewTaskFab { right: 14px; bottom: 14px; padding: 10px 14px; font-size: 12px; }
}

/* Programs Overview is the one of these that uses .wk-focus-group for
   category grouping. Flatten it: drop the per-group dot/label/count head
   so populated lists merge into a single card grid. */
.ph-sub[data-subpanel="prog-overview"] .wk-focus-group-head { display: none !important; }

.ph-sub[data-subpanel="prog-overview"] .wk-focus-group { padding: 0 !important; border: 0 !important; margin: 0 !important; }

.ph-sub[data-subpanel="prog-overview"] .wk-focus-list { display: flex; flex-direction: column; gap: 8px; }

/* ================================================================
   GLOBAL RIPPLE + SCORECARD CTX BAR (all tabs, not just grants)
   ================================================================ */

/* Ripple element injected by _wkRipple() */
.gr-ripple-el {
  position: absolute; pointer-events: none; border-radius: 50%;
  width: 80px; height: 80px; margin: -40px 0 0 -40px;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%);
  animation: gr-ripple .55s ease-out forwards;
  z-index: 10;
}

@keyframes gr-ripple {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(3.5); opacity: 0; }
}

/* Filter context bar injected dynamically after scorecard rows */
.gr-filter-ctx {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 8px; margin: -4px 0 8px;
  background: color-mix(in srgb, var(--_ac, var(--c-blue)) 8%, var(--surf));
  border: 1px solid color-mix(in srgb, var(--_ac, var(--c-blue)) 18%, var(--border));
  font-size: 11px; font-weight: 600; color: var(--ink2);
  animation: gr-ctx-in .2s var(--ease-spring, ease) both;
  transition: opacity .15s ease;
}

.gr-filter-ctx.is-hidden { display: none; }

@keyframes gr-ctx-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gr-filter-ctx-clear {
  margin-left: auto; padding: 2px 8px; border-radius: 5px; font-size: 10.5px; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--_ac, var(--c-blue)) 22%, var(--border));
  background: none; color: var(--ink3); cursor: pointer;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}

.gr-filter-ctx-clear:hover {
  background: color-mix(in srgb, var(--_ac, var(--c-blue)) 12%, var(--surf));
  color: var(--ink); border-color: color-mix(in srgb, var(--_ac, var(--c-blue)) 35%, var(--border));
}

/* Focus-group content fade for animated swap */
.wk-focus-panel, .wk-focus-body {
  transition: opacity .16s ease, transform .16s ease;
}

/* ════════════════════════════════════════════════════════════
   POLISHED PROJECT CARD — wk-pc-* (seeded examples + Work tab)
   Beautiful, modern card matching the Programs design language.
   ════════════════════════════════════════════════════════════ */
.wk-pc-card {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px 18px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s var(--ease-spring, ease);
}

.wk-pc-card:hover {
  border-color: var(--_a, #3b82f6);
  box-shadow: 0 10px 24px -10px rgba(15,23,42,.18),
              0 4px 10px -4px color-mix(in srgb, var(--_a, #3b82f6) 20%, transparent);
  transform: translateY(-2px);
}

.wk-pc-rail {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--_a, #3b82f6), color-mix(in srgb, var(--_a, #3b82f6) 55%, #fff));
  border-radius: 14px 14px 0 0;
}

.wk-pc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-top: 2px;
}

.wk-pc-title {
  font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.35;
  flex: 1; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.wk-pc-status {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}

.wk-pc-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.wk-pc-co {
  font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 5px;
  border-left: 2px solid;
}

.wk-pc-owner {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #64748b;
}

.wk-pc-owner svg { opacity: .7; }

.wk-pc-dot { color: #cbd5e1; font-size: 11px; }

.wk-pc-due { font-size: 11px; color: #64748b; }

.wk-pc-prog { display: flex; flex-direction: column; gap: 5px; }

.wk-pc-prog-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .06em;
}

.wk-pc-prog-pct { font-size: 12px; font-weight: 800; color: #0f172a; letter-spacing: 0; text-transform: none; }

.wk-pc-prog-track {
  height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden;
}

.wk-pc-prog-fill {
  height: 100%; border-radius: 999px;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}

.wk-pc-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px; border-top: 1px solid #f1f5f9;
  font-size: 11.5px;
}

.wk-pc-tasks {
  display: inline-flex; align-items: center; gap: 5px;
  color: #64748b; font-weight: 600;
}

.wk-pc-tasks svg { opacity: .7; }

.wk-pc-budget {
  font-weight: 700; color: #0f172a;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════
   POLISHED PROGRAM CARD — wk-gc-* (seeded examples + Work tab)
   ════════════════════════════════════════════════════════════ */
.wk-gc-card {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px 18px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s var(--ease-spring, ease);
}

.wk-gc-card:hover {
  border-color: var(--_a, #6366f1);
  box-shadow: 0 10px 24px -10px rgba(15,23,42,.18),
              0 4px 10px -4px color-mix(in srgb, var(--_a, #6366f1) 22%, transparent);
  transform: translateY(-2px);
}

.wk-gc-rail {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--_a, #6366f1), color-mix(in srgb, var(--_a, #6366f1) 55%, #fff));
  border-radius: 14px 14px 0 0;
}

.wk-gc-head {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 2px;
}

.wk-gc-logo {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}

.wk-gc-title-block { flex: 1; min-width: 0; }

.wk-gc-title {
  font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.wk-gc-meta {
  font-size: 11.5px; color: #64748b; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wk-gc-health {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}

.wk-gc-health-dot {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}

.wk-gc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 12px 0 2px;
  border-top: 1px solid #f1f5f9;
}

.wk-gc-stat {
  text-align: left; padding: 0 12px;
  border-right: 1px solid #f1f5f9;
  min-width: 0;
}

.wk-gc-stat:last-child { border-right: none; }

.wk-gc-stat--first { padding-left: 0; }

.wk-gc-stat-v {
  font-size: 14px; font-weight: 800; color: #0f172a;
  line-height: 1.15; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wk-gc-stat-l {
  font-size: 9.5px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .06em;
  margin-top: 3px;
}

/* Heatmap-aware variants for seeded cards (Overview/Programs/Projects heatmap layout) */
.gl-view-heatmap .wk-pc-card,
.gl-view-heatmap .wk-gc-card {
  margin-bottom: 0;
  opacity: 0;
  animation: wkHeatFadeUp .4s cubic-bezier(.22,1,.36,1) both;
}

.gl-view-heatmap .wk-pc-card { padding: 14px 14px 12px; gap: 8px; }

.gl-view-heatmap .wk-gc-card { padding: 14px 14px 12px; gap: 10px; }

.gl-view-heatmap .wk-gc-stats { grid-template-columns: repeat(2, 1fr); gap: 6px 12px; padding-top: 10px; }

.gl-view-heatmap .wk-pc-meta { font-size: 10.5px; }

/* List-view tightening for seeded cards */
.gl-view-list .wk-pc-card,
.gl-view-list .wk-gc-card { margin-bottom: 6px; padding: 12px 14px 10px; }

.gl-view-list .wk-gc-stats { grid-template-columns: repeat(4, 1fr); padding-top: 8px; }

/* ════════════════════════════════════════════════════════════
   ASSIGNEE AVATAR STACK — small overlapping circles
   Used on Project + Program cards (and elsewhere).
   ════════════════════════════════════════════════════════════ */
.wk-assignee-stack {
  display: inline-flex; align-items: center;
  isolation: isolate;
}

.wk-assignee-av {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff;
  letter-spacing: .03em;
  border: 2px solid #fff;
  margin-left: -6px;
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
  transition: transform .15s ease, z-index .15s;
}

.wk-assignee-av:first-child { margin-left: 0; }

.wk-assignee-av:hover { transform: translateY(-2px) scale(1.06); z-index: 5; }

.wk-assignee-av--more {
  background: #e2e8f0 !important; color: #475569 !important;
  font-weight: 700;
}

/* Project foot row — avatars + tasks summary */
.wk-goal-foot-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9;
}

.wk-goal-foot-row .wk-goal-task-summary {
  padding-top: 0; border-top: none; font-size: 11.5px;
}

/* Team vs Client people groups on a work-stream card — internal team and the
   client's people stay visually separate (labels only render when both exist). */
.wk-goal-people-grp { display: flex; align-items: center; gap: 6px; min-width: 0; }

.wk-goal-people-lbl {
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink3, #94a3b8); flex-shrink: 0;
}

.wk-goal-people-grp--client { padding-left: 10px; border-left: 1px solid #e2e8f0; }

.wk-goal-people-grp--client .wk-goal-people-lbl { color: #0369a1; }

/* Programs footer — assignee avatars sit at left of footer */
.wk-prog-card-footer .wk-assignee-stack { margin-right: auto; }

/* ──────────────────────────────────────────────────────────────────
   Project card as sub-program — borrows the prog-card visual family
   (accent rail + parent identity) while staying clearly secondary.
   ────────────────────────────────────────────────────────────────── */
.wk-goal-card--sub {
  position: relative;
  padding-top: 18px;
  overflow: hidden;
  border-radius: 14px;
}

.wk-goal-card--sub .wk-goal-rail {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--_project-accent, var(--c-blue)) 0%,
    color-mix(in srgb, var(--_project-accent, var(--c-blue)) 50%, transparent) 100%);
  border-radius: 14px 14px 0 0;
}

.wk-goal-card--sub .wk-goal-parent {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--surf-2, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  align-self: flex-start;
  max-width: 100%;
  margin-top: -2px;
}

.wk-goal-parent-logo {
  width: 22px; height: 22px; border-radius: 50%;
  background: #f3f4f6;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--border, #e5e7eb);
}

.wk-goal-parent-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.wk-goal-parent-logo--init {
  font-size: 9px; font-weight: 800; color: #374151; letter-spacing: .4px;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.wk-goal-parent-logo--muted {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  color: var(--ink3, #94a3b8);
}

.wk-goal-parent--unlinked { opacity: .85; }

.wk-goal-parent-meta {
  display: inline-flex; align-items: baseline; gap: 5px; min-width: 0;
}

.wk-goal-parent-label {
  font-size: 9px; font-weight: 800; color: var(--ink3, #94a3b8);
  text-transform: uppercase; letter-spacing: .6px;
}

.wk-goal-parent-name {
  font-size: 11.5px; font-weight: 700; color: var(--ink, #0f172a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px;
}

/* List view — keep the parent chip but cap chip width so wide cards
   don't stretch the chip across the row. */
.gl-view-list .wk-goal-card--sub .wk-goal-parent { max-width: 280px; }

/* Kanban (card) view — narrower columns. Make the chip flexible. */
.gl-view-card .wk-goal-card--sub .wk-goal-parent { max-width: 100%; }

.gl-view-card .wk-goal-card--sub .wk-goal-parent-name { max-width: 140px; }

/* ==================================================================
   WORK STREAM CARD - lineage, kind, people
   Tyler, 2026-08-10: a stream card has to say who is on it, which
   clients are on it, and that it is "part of THIS project for THIS
   company" - with the company logo. And a stream must be tellable
   apart from a project without reading it.
   ================================================================== */

/* Identity row: lineage chip left, kind glyph right. One line, so both
   facts arrive without the card growing. */
.wk-goal-idrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-width: 0;
}

.wk-goal-idrow .wk-goal-parent {
  margin-top: 0;
  min-width: 0; flex: 0 1 auto;
}

.wk-goal-idrow .wk-goal-kind { flex: 0 0 auto; }

.wk-goal-parent-meta { min-width: 0; }

.wk-goal-parent-name { flex: 0 1 auto; min-width: 42px; }

.wk-goal-parent-co { flex: 0 4 auto; min-width: 32px; }

/* The company the parent project is FOR, riding at the tail of the chip. */
.wk-goal-parent-co {
  font-size: 10.5px; font-weight: 600; color: var(--ink3, #64748b);
  padding-left: 8px; margin-left: 2px;
  border-left: 1px solid var(--border, #e5e7eb);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px; flex-shrink: 1;
}

/* Kind glyph. Teal = work stream, green = project: the same two hues the
   My Work scorecards use for those two words. */
.wk-goal-kind {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap;
}

.wk-goal-kind svg { flex-shrink: 0; }

.wk-goal-kind--stream  { background: #ccfbf1; color: #0f766e; border-color: #99f6e4; }

.wk-goal-kind--project { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }

/* Department, finally a chip of its own (it used to be printed as if it
   were the parent project's name). */
.wk-goal-dept {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 999px; font-size: 10.5px; font-weight: 600;
  background: var(--surf-2, #f1f5f9); color: var(--ink2, #475569);
  border: 1px solid var(--border, #e5e7eb);
  max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* People band: Team (us) and Client/For (them), each labelled and counted. */
.wk-goal-people-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  padding-top: 10px; margin-top: 2px;
  border-top: 1px solid #f1f5f9;
}

.wk-goal-people-n {
  font-size: 10px; font-weight: 700; color: var(--ink3, #94a3b8);
  font-variant-numeric: tabular-nums;
}

/* The band already draws the divider, so the foot row must not draw a
   second one directly beneath it. */
.wk-goal-people-row + .wk-goal-foot-row { border-top: none; padding-top: 4px; }

.wk-goal-card--sub .wk-goal-team-empty {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink3, #94a3b8);
}

/* Project card: kind glyph shares a subline with the company name. */
.wk-prog-card-subline {
  display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0;
}

.wk-prog-card-subline .wk-prog-card-client { margin-top: 0; min-width: 0; }

/* ==================================================================
   CARD VIEW for panels of RECORDS: exactly two per row.
   A deliberately SEPARATE class from .gl-view-card - that ruleset sets
   .wk-focus-group { display: none } to clear the way for the severity
   Kanban, so reusing it here would hide the cards instead of laying
   them out. Tyler: "rows of two each, so that each card can be bigger
   and match exactly what the project looks like".
   ================================================================== */
.gl-view-grid2 .wk-focus-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

/* A band divider is a heading for the rows under it - it spans the grid. */
.gl-view-grid2 .wk-focus-list > .mw-focus-band,
.gl-view-grid2 .wk-focus-list > .mw-focus-sub,
.gl-view-grid2 .wk-focus-list > .wk-empty { grid-column: 1 / -1; }

/* Bigger cards: the point of two-up is room, so spend it. */
.gl-view-grid2 .wk-goal-card--sub {
  padding: 18px 16px 14px;
  gap: 10px;
  height: 100%;
}

.gl-view-grid2 .wk-goal-card--sub .wk-goal-title { font-size: 15px; }

.gl-view-grid2 .wk-goal-card--sub .wk-goal-parent { max-width: 100%; }

.gl-view-grid2 .wk-goal-card--sub .wk-goal-parent-name { max-width: 100%; }

.gl-view-grid2 .wk-goal-kind > span { display: none; }

.gl-view-grid2 .wk-goal-kind { padding: 3px 5px; }

.gl-view-grid2 .wk-goal-parent-co { max-width: 92px; }

@media (max-width: 1180px) {
.gl-view-list .wk-goal-kind > span { display: none; }

.gl-view-list .wk-goal-kind { padding: 3px 5px; }
}

@media (max-width: 900px) {
.gl-view-grid2 .wk-focus-list { grid-template-columns: 1fr; }
}

/* Heatmap view — compact: drop the "Part of" label, shrink logo, keep
   the program name as a tiny breadcrumb above the title. */
.gl-view-heatmap .wk-goal-card--sub { padding-top: 14px; }

.gl-view-heatmap .wk-goal-card--sub .wk-goal-rail { height: 2px; }

.gl-view-heatmap .wk-goal-card--sub .wk-goal-parent {
  padding: 2px 8px 2px 2px; gap: 6px;
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(0, 0, 0, 0.06);
}

.gl-view-heatmap .wk-goal-parent-logo { width: 18px; height: 18px; }

.gl-view-heatmap .wk-goal-parent-logo--init { font-size: 8px; }

.gl-view-heatmap .wk-goal-parent-label { display: none; }

.gl-view-heatmap .wk-goal-parent-name { font-size: 10.5px; max-width: 150px; }

/* ────────────────────────────────────────────────────────────────
   Project card — people + meta pills (lead, priority, deadline, ...)
   ──────────────────────────────────────────────────────────────── */
.wk-goal-card--sub .wk-goal-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  margin-top: 2px;
}

.wk-goal-lead {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px 2px 2px; border-radius: 999px;
  background: var(--surf-2, #f1f5f9);
  border: 1px solid var(--border, #e5e7eb);
  font-size: 11px; font-weight: 600; color: var(--ink, #0f172a);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  max-width: 180px;
}

.wk-goal-lead:hover {
  background: var(--surf, #fff);
  border-color: var(--_project-accent, var(--c-blue, #3b82f6));
}

.wk-goal-lead-av {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .3px;
}

.wk-goal-lead-av--empty {
  border: 1px dashed var(--ink4, #cbd5e1);
  color: var(--ink4, #cbd5e1); background: transparent;
}

.wk-goal-lead-av--img { background: transparent !important; overflow: hidden; }

.wk-goal-lead-av--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wk-assignee-av--img { background: transparent !important; overflow: hidden; }

.wk-assignee-av--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wk-goal-lead-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 130px;
}

.wk-goal-prio,
.wk-goal-due,
.wk-goal-updated,
.wk-goal-budget-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.wk-goal-prio svg, .wk-goal-due svg { flex-shrink: 0; }

.wk-goal-prio--high     { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

.wk-goal-prio--medium   { color: #b45309; background: #fffbeb; border-color: #fde68a; }

.wk-goal-prio--low      { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }

.wk-goal-prio--critical { color: #7f1d1d; background: #fef2f2; border-color: #fca5a5; }

.wk-goal-due { color: var(--ink2, #475569); background: var(--surf-2, #f1f5f9); border-color: var(--border, #e5e7eb); }

.wk-goal-due--soon    { color: #b45309; background: #fffbeb; border-color: #fde68a; }

.wk-goal-due--overdue { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

.wk-goal-updated {
  color: var(--ink3, #94a3b8); background: transparent;
  border: 0; font-weight: 500;
}

.wk-goal-budget-badge { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

.wk-goal-card--sub .wk-goal-foot-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border, #e5e7eb) 70%, transparent);
}

.wk-goal-team-empty {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink4, #94a3b8); font-style: italic;
}

.wk-goal-team-empty svg { opacity: .65; }

.wk-goal-card--sub .wk-goal-task-summary {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--ink2, #475569); font-weight: 600;
  padding-top: 0; border-top: 0;
}

.wk-goal-alerts { display: inline-flex; gap: 4px; }

.wk-goal-alert {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 800;
  padding: 1px 7px; border-radius: 999px;
  letter-spacing: .02em;
}

.wk-goal-alert--overdue { color: #b91c1c; background: #fef2f2; }

.wk-goal-alert--blocked { color: #6b21a8; background: #f5f3ff; }

/* Heatmap view — strip the verbose stuff so compact tiles stay clean */
.gl-view-heatmap .wk-goal-updated,
.gl-view-heatmap .wk-goal-lead-name { display: none; }

.gl-view-heatmap .wk-goal-lead { padding: 2px 4px 2px 2px; }

.gl-view-heatmap .wk-goal-team-empty span { display: none; }

/* ════════════════════════════════════════════════════════════
   TASKS HEATMAP — rich, compact tile (title, due, avatar, priority)
   Hard cap at 4 columns; minmax(0, 1fr) prevents card content from
   forcing extra implicit columns. Anywhere a heatmap list lives, this
   is the final word on column count — overrides any earlier rule.
   ════════════════════════════════════════════════════════════ */
.gl-view-heatmap .wk-focus-list,
.gl-view-heatmap .mw-task-list,
.gl-view-heatmap .gl-all-list,
.gl-view-heatmap #wkDynamicTasks > .wk-focus-list,
.gl-view-heatmap #wkDynamicTasks > .mw-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow: row;
  grid-auto-rows: auto;
  gap: 12px;
  align-items: stretch;
}

@media(max-width:1100px) {
.gl-view-heatmap .wk-focus-list,
  .gl-view-heatmap .mw-task-list,
  .gl-view-heatmap .gl-all-list,
  .gl-view-heatmap #wkDynamicTasks > .wk-focus-list,
  .gl-view-heatmap #wkDynamicTasks > .mw-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media(max-width:760px) {
.gl-view-heatmap .wk-focus-list,
  .gl-view-heatmap .mw-task-list,
  .gl-view-heatmap .gl-all-list,
  .gl-view-heatmap #wkDynamicTasks > .wk-focus-list,
  .gl-view-heatmap #wkDynamicTasks > .mw-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width:480px) {
.gl-view-heatmap .wk-focus-list,
  .gl-view-heatmap .mw-task-list,
  .gl-view-heatmap .gl-all-list,
  .gl-view-heatmap #wkDynamicTasks > .wk-focus-list,
  .gl-view-heatmap #wkDynamicTasks > .mw-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Cards inside the heatmap grid: never let card content force a wider
   column or overflow the cell. Title/desc already clamp, but ensure the
   card itself is fluid. */
.gl-view-heatmap .wk-focus-list > *,
.gl-view-heatmap .mw-task-list > *,
.gl-view-heatmap .gl-all-list > *,
.gl-view-heatmap #wkDynamicTasks > .wk-focus-list > *,
.gl-view-heatmap #wkDynamicTasks > .mw-card-grid > * {
  min-width: 0;
  max-width: 100%;
}

.gl-view-heatmap .mw-task-card,
.gl-view-heatmap .wk-focus-item,
.gl-view-heatmap .gl-card {
  /* No height cap — show the full card, never clip metadata. */
  border-radius: 14px;
}

.gl-view-heatmap .mw-task-card .mw-card-left {
  padding: 14px 14px 8px; gap: 6px; flex: 1;
}

.gl-view-heatmap .mw-task-card-title {
  font-size: 13px; line-height: 1.32; font-weight: 700;
  -webkit-line-clamp: 2; padding-right: 28px;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}

.gl-view-heatmap .mw-task-card .mw-card-desc {
  -webkit-line-clamp: 2; font-size: 11px; line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}

.gl-view-heatmap .mw-task-card .mw-card-progress { display: none; }

.gl-view-heatmap .mw-card-right {
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-left: none;
  padding: 8px 14px 10px; gap: 8px;
  font-size: 10.5px;
  flex-direction: row; align-items: center;
  justify-content: space-between;
}

.gl-view-heatmap .mw-card-due { font-size: 10.5px; font-weight: 600; }

.gl-view-heatmap .mw-card-avatar { width: 22px; height: 22px; font-size: 9px; }

.gl-view-heatmap .mw-card-meta { gap: 5px; flex-wrap: wrap; }

.gl-view-heatmap .mw-task-card .mw-task-card-body { padding: 14px 14px 8px; }

.gl-view-heatmap .mw-task-card .mw-task-card-body .mw-task-card-title { -webkit-line-clamp: 2; font-size: 13px; font-weight: 700; }

.gl-view-heatmap .mw-task-card .mw-task-card-row { margin-top: 8px; gap: 5px; }

/* (responsive heatmap breakpoints handled above per-grid) */

/* ════════════════════════════════════════════════════════════
   HEATMAP COLOR MAPPING — wk-pc / wk-gc / wk-goal
   Tinted background + inset colored shadow by health/status.
   ════════════════════════════════════════════════════════════ */
.gl-view-heatmap .wk-pc-card.mw-hm--good,
.gl-view-heatmap .wk-gc-card.mw-hm--good,
.gl-view-heatmap .wk-goal-card[data-project-status="on-track"],
.gl-view-heatmap .wk-goal-card[data-project-status="complete"] {
  background: color-mix(in srgb, #10b981 5%, #fff);
  box-shadow: inset 4px 0 8px -4px #10b981;
}

.gl-view-heatmap .wk-pc-card.mw-hm--warn,
.gl-view-heatmap .wk-gc-card.mw-hm--warn,
.gl-view-heatmap .wk-goal-card[data-project-status="at-risk"] {
  background: color-mix(in srgb, #f59e0b 5%, #fff);
  box-shadow: inset 4px 0 8px -4px #f59e0b;
}

.gl-view-heatmap .wk-pc-card.mw-hm--bad,
.gl-view-heatmap .wk-gc-card.mw-hm--bad,
.gl-view-heatmap .wk-goal-card[data-project-status="behind"] {
  background: color-mix(in srgb, #ef4444 6%, #fff);
  box-shadow: inset 4px 0 8px -4px #ef4444;
}

/* PROJECTS heatmap — rich, compact tile */
.gl-view-heatmap .mw-projects-grid,
.gl-view-heatmap [data-subpanel="mw-projects"] .wk-focus-list,
.gl-view-heatmap [data-subpanel="tm-projects"] .wk-focus-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: minmax(196px, auto);
  gap: 12px; padding: 14px;
}

.gl-view-heatmap .wk-goal-card {
  padding: 14px 14px 12px;
  gap: 8px;
  border-radius: 14px;
  overflow: hidden;
}

.gl-view-heatmap .wk-goal-card::before { display: none; }

.gl-view-heatmap .wk-goal-title {
  font-size: 13px; -webkit-line-clamp: 2; line-height: 1.3;
}

.gl-view-heatmap .wk-goal-status { font-size: 9px; padding: 2px 8px; }

.gl-view-heatmap .wk-goal-meta {
  font-size: 10.5px; gap: 6px;
  white-space: nowrap; overflow: hidden;
}

.gl-view-heatmap .wk-goal-meta > span:nth-child(n+3) { display: none; }

.gl-view-heatmap .wk-goal-progress-bar { height: 5px; }

.gl-view-heatmap .wk-goal-foot-row {
  padding-top: 6px; border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  font-size: 11px;
}

.gl-view-heatmap .wk-goal-foot-row .wk-goal-task-summary { font-size: 10.5px; color: var(--ink3, #64748b); }

.gl-view-heatmap .wk-goal-card .wk-assignee-av { width: 20px; height: 20px; font-size: 8.5px; }

/* ══════════════════════════════════════════════════════════════
   Today's Check-in (Daily Progress)
   NOTE: prefix is `wk-checkin-` — the older `wk-dp-` prefix is
   already taken by the Design Preview demo cards on this page,
   which collide if both share the same namespace.
   ══════════════════════════════════════════════════════════════ */
.wk-checkin-module { position: relative; }

.wk-checkin-module .wk-support-head { gap: 8px; }

.wk-checkin-date {
  margin-left: auto; font-size: 10px; font-weight: 600;
  color: var(--ink3, #8d8d8d); text-transform: uppercase; letter-spacing: .35px;
}

/* ─── Greeting + suggestions + streak chip ─────────────── */
.wk-checkin-greeting-row {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 4px;
}

.wk-checkin-greeting {
  flex: 1;
  font-size: 13.5px; font-weight: 600; color: var(--ink, #161616);
  line-height: 1.35;
}

.wk-checkin-streak-chip {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e; letter-spacing: .15px;
  white-space: nowrap;
}

.wk-checkin-suggest {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 2px 0 6px;
}

.wk-checkin-suggest-lbl {
  width: 100%; font-size: 9.5px; font-weight: 700;
  color: var(--ink3, #8d8d8d); letter-spacing: .35px;
  text-transform: uppercase; margin-bottom: 2px;
}

.wk-checkin-suggest-pill {
  font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border, #e0e0e0);
  background: var(--surf, #fff); color: var(--ink2, #525252);
  max-width: 100%; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: all .14s ease;
}

.wk-checkin-suggest-pill:hover {
  border-color: var(--_sm-color, #0d9488);
  color: var(--_sm-color, #0d9488);
  background: var(--_sm-bg, #ecfdf5);
}

/* ─── Form (morning + EOD) ────────────────────────── */
.wk-checkin-form { display: flex; flex-direction: column; gap: 8px; }

.wk-checkin-lbl {
  font-size: 10.5px; font-weight: 600; color: var(--ink2, #525252);
  letter-spacing: .15px; margin-top: 2px;
}

.wk-checkin-opt { color: var(--ink4, #c6c6c6); font-weight: 500; }

.wk-checkin-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px; font-size: 12px; font-family: inherit;
  background: var(--surf, #fff); color: var(--ink, #161616);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.wk-checkin-input--lg {
  padding: 10px 12px; font-size: 13px; font-weight: 500;
}

.wk-checkin-input:focus {
  outline: none;
  border-color: var(--_sm-color, var(--c-teal, #0d9488));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_sm-color, #0d9488) 18%, transparent);
}

.wk-checkin-area { resize: vertical; min-height: 44px; line-height: 1.4; }

.wk-checkin-slider-row { display: flex; align-items: center; gap: 10px; }

.wk-checkin-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 999px;
  background: var(--border, #e0e0e0); outline: none;
}

.wk-checkin-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--_sm-color, var(--c-teal, #0d9488));
  cursor: pointer; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.wk-checkin-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--_sm-color, var(--c-teal, #0d9488));
  cursor: pointer; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.wk-checkin-slider-val {
  font-size: 12px; font-weight: 700; color: var(--ink, #161616);
  min-width: 28px; text-align: right; font-variant-numeric: tabular-nums;
}

.wk-checkin-radios { display: flex; gap: 6px; }

.wk-checkin-radio {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; border: 1px solid var(--border, #e0e0e0); border-radius: 8px;
  font-size: 11.5px; font-weight: 600; cursor: pointer; user-select: none;
  background: var(--surf, #fff); color: var(--ink2, #525252);
  transition: all .15s ease;
}

.wk-checkin-radio:hover { border-color: var(--_sm-color, #0d9488); color: var(--ink, #161616); }

.wk-checkin-radio input { margin: 0; accent-color: var(--_sm-color, #0d9488); }

.wk-checkin-radio input:checked + span { color: var(--_sm-color, #0d9488); }

.wk-checkin-radio:has(input:checked) {
  border-color: var(--_sm-color, #0d9488);
  background: var(--_sm-bg, #ecfdf5);
}

.wk-checkin-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }

.wk-checkin-actions--eod { margin-top: 12px; }

.wk-checkin-btn {
  padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}

.wk-checkin-btn--primary {
  background: var(--_sm-color, var(--c-teal, #0d9488)); color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.wk-checkin-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.12); }

.wk-checkin-btn--ghost {
  background: transparent; color: var(--ink2, #525252);
  border-color: var(--border, #e0e0e0);
}

.wk-checkin-btn--ghost:hover { background: var(--bg, #f8fafc); }

/* ─── Active state (ring + priority echo) ─────────── */
.wk-checkin-active {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 0 2px;
}

.wk-checkin-ringwrap { flex-shrink: 0; }

.wk-checkin-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.wk-checkin-pri-row { display: flex; align-items: center; gap: 6px; }

.wk-checkin-pri-lbl {
  font-size: 9.5px; font-weight: 700; letter-spacing: .35px;
  text-transform: uppercase; color: var(--_sm-color, #0d9488);
}

.wk-checkin-pri-lbl--yes  { color: #16a34a; }

.wk-checkin-pri-lbl--no   { color: #dc2626; }

.wk-checkin-pri-lbl--partial { color: #d97706; }

.wk-checkin-edit {
  width: 18px; height: 18px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--ink4, #c6c6c6); cursor: pointer;
  border-radius: 50%; transition: all .14s ease;
}

.wk-checkin-edit:hover {
  color: var(--_sm-color, #0d9488);
  background: var(--_sm-bg, #ecfdf5);
}

.wk-checkin-pri {
  font-size: 13px; font-weight: 600; color: var(--ink, #161616);
  line-height: 1.3; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  word-break: break-word;
}

.wk-checkin-sub {
  font-size: 10.5px; color: var(--ink3, #8d8d8d); margin-top: 2px;
}

.wk-checkin-sub--reflection {
  font-style: italic; color: var(--ink2, #525252); margin-top: 4px;
  border-left: 2px solid var(--border, #e0e0e0); padding-left: 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.wk-checkin-blocker {
  font-size: 10.5px; color: var(--ink2, #525252);
  margin-top: 6px; padding: 6px 8px;
  background: color-mix(in srgb, var(--c-amber, #d97706) 8%, transparent);
  border-radius: 6px; line-height: 1.35;
}

.wk-checkin-blocker-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--c-amber, #d97706);
  margin-right: 4px;
}

.wk-checkin-active--done .wk-checkin-pri { opacity: .92; }

/* Wrap-up celebration: brief glow on the ring after EOD submit. */
@keyframes wkCheckinCelebrate {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--_sm-color, #0d9488) 50%, transparent); }
  60%  { box-shadow: 0 0 0 12px color-mix(in srgb, var(--_sm-color, #0d9488) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--_sm-color, #0d9488) 0%, transparent); }
}

.wk-checkin-active--celebrate .wk-checkin-ringwrap .wk-ring {
  border-radius: 50%;
  animation: wkCheckinCelebrate 1.4s ease-out 1;
}

/* Carryover chip on wrapped state. */
.wk-checkin-carry-chip {
  display: inline-block; align-self: flex-start;
  margin-top: 4px; padding: 2px 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .25px;
  text-transform: uppercase;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-amber, #d97706) 12%, transparent);
  color: var(--c-amber, #d97706);
}

.wk-checkin-form--eod .wk-checkin-eod-pri {
  font-size: 11.5px; color: var(--ink2, #525252);
  margin-bottom: 4px; line-height: 1.4;
}

.wk-checkin-form--eod .wk-checkin-eod-pri strong { color: var(--ink, #161616); }

.wk-checkin-err {
  padding: 8px 10px; border-radius: 8px;
  background: var(--c-red-bg, #fef2f2); color: var(--c-red, #ef4444);
  font-size: 11px; line-height: 1.4;
  display: flex; flex-direction: column; gap: 6px;
}

.wk-checkin-retry {
  align-self: flex-start;
  padding: 4px 10px; border-radius: 6px;
  background: #fff; border: 1px solid var(--c-red, #ef4444);
  color: var(--c-red, #ef4444); font-size: 11px; font-weight: 600;
  cursor: pointer;
}

/* Setup-pending — table not provisioned yet. Shows once, doesn't loop. */
.wk-checkin-setup {
  padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-amber, #d97706) 8%, #fff) 0%, #fff 70%);
  border: 1px solid color-mix(in srgb, var(--c-amber, #d97706) 30%, var(--border, #e0e0e0));
  color: var(--ink2, #525252); font-size: 11.5px; line-height: 1.45;
}

.wk-checkin-setup-title {
  font-size: 12px; font-weight: 700; color: var(--ink, #161616);
  margin-bottom: 4px;
}

/* ─── Select (blocker category, carryover) ────────── */
.wk-checkin-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23525252' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 26px; cursor: pointer;
}

/* ─── Day-state pill (Phase 2 frozen score) ─────────── */
.wk-checkin-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--_pill, #64748b) 12%, transparent);
  color: var(--_pill, #64748b);
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  text-transform: uppercase;
}

.wk-checkin-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--_pill, #64748b);
}

.wk-checkin-pill-lbl { white-space: nowrap; }

.wk-checkin-pill-score {
  font-variant-numeric: tabular-nums;
  background: var(--_pill, #64748b); color: #fff;
  padding: 0 6px; border-radius: 999px;
  font-size: 10px; margin-left: 2px;
}

.wk-checkin-privacy-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; padding: 0; margin-left: 2px;
  border-radius: 50%; border: none; background: transparent;
  color: var(--_pill, #64748b); cursor: pointer;
  opacity: .35; transition: opacity .15s ease;
}

.wk-checkin-privacy-toggle:hover { opacity: 1; }

.wk-checkin-privacy-toggle:focus-visible {
  outline: 2px solid var(--_pill, #64748b); outline-offset: 1px;
}

.wk-checkin-privacy-toggle svg { display: block; }

/* ─── Coaching note (Haiku, only when populated) ───── */
.wk-checkin-coach {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 10px; padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--_sm-color, #0d9488) 8%, transparent);
  color: var(--ink2, #525252);
  font-size: 11.5px; line-height: 1.45;
}

.wk-checkin-coach-icon {
  flex-shrink: 0; width: 14px; height: 14px;
  color: var(--_sm-color, #0d9488); margin-top: 1px;
}

.wk-checkin-coach-txt { flex: 1; }

/* ─── 7-day mini bar chart ────────────────────────── */
.wk-checkin-trend {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border-s, #f0f0f0);
}

.wk-checkin-trend-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}

.wk-checkin-trend-lbl {
  font-size: 9.5px; font-weight: 700; color: var(--ink3, #8d8d8d);
  letter-spacing: .35px; text-transform: uppercase;
}

.wk-checkin-trend-avg {
  font-size: 10.5px; font-weight: 700; color: var(--ink2, #525252);
  font-variant-numeric: tabular-nums;
}

.wk-checkin-trend-bars {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; height: 56px; align-items: end;
}

.wk-checkin-trend-bar {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 2px;
  cursor: default;
}

.wk-checkin-trend-fill {
  width: 100%; min-height: 3px;
  border-radius: 3px 3px 0 0;
  transition: opacity .2s ease;
}

.wk-checkin-trend-bar:hover .wk-checkin-trend-fill { opacity: .85; }

.wk-checkin-trend-fill--ghost {
  height: 4px !important; background: transparent !important;
  border-top: 1px dashed var(--border, #e0e0e0);
  border-radius: 0;
}

.wk-checkin-trend-fill--pending {
  height: 8px !important;
  background: repeating-linear-gradient(45deg,
    var(--border, #e0e0e0), var(--border, #e0e0e0) 3px,
    var(--surf, #fff) 3px, var(--surf, #fff) 5px) !important;
}

.wk-checkin-trend-fill--today { box-shadow: 0 0 0 1.5px var(--surf, #fff) inset; }

.wk-checkin-trend-bar--today .wk-checkin-trend-day {
  color: var(--ink, #161616); font-weight: 700;
}

.wk-checkin-trend-day {
  font-size: 9px; color: var(--ink4, #c6c6c6);
  font-variant-numeric: tabular-nums;
}

.wk-checkin-trend-avg--quiet { color: var(--ink4, #c6c6c6) !important; font-weight: 500 !important; }

/* ─── Team Health (manager view) ──────────────────── */
.wk-checkin-team-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}

.wk-checkin-team-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; transition: background .12s ease;
}

.wk-checkin-team-row:hover { background: var(--bg, #f8fafc); }

.wk-checkin-team-pill {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}

.wk-checkin-team-meta { flex: 1; min-width: 0; }

.wk-checkin-team-name {
  font-size: 12px; font-weight: 600; color: var(--ink, #161616);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wk-checkin-team-line {
  font-size: 10.5px; color: var(--ink3, #8d8d8d);
  line-height: 1.3; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════
   Per-Program Daily Pulse (engagement-profile.js injection)
   Mirrors .ax-module: 16px radius, 3px top accent bar, gradient tint.
   ══════════════════════════════════════════════════════════════ */
.wk-ep-pulse {
  position: relative;
  margin: 0 0 18px;
  padding: 16px 18px 14px;
  border-radius: 16px;
  border: 1px solid var(--border, #e0e0e0);
  background: linear-gradient(180deg, color-mix(in srgb, #0d9488 5%, #fff) 0%, #fff 70%);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04));
  overflow: hidden;
}

.wk-ep-pulse::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0d9488, #0891b2);
  border-radius: 16px 16px 0 0;
}

.wk-ep-pulse-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}

.wk-ep-pulse-title {
  font-size: 12.5px; font-weight: 800; color: var(--ink, #161616);
  letter-spacing: .2px; text-transform: uppercase;
}

.wk-ep-pulse-prog { display: flex; align-items: baseline; gap: 6px; }

.wk-ep-pulse-prog-num {
  font-size: 14px; font-weight: 800; color: var(--c-teal, #0d9488);
  font-variant-numeric: tabular-nums;
}

.wk-ep-pulse-prog-lbl {
  font-size: 10.5px; color: var(--ink3, #8d8d8d);
  text-transform: uppercase; letter-spacing: .25px; font-weight: 600;
}

.wk-ep-pulse-prog-lbl--quiet { color: var(--ink4, #c6c6c6); }

.wk-ep-pulse-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px 12px;
}

.wk-ep-pulse-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px;
  transition: background .12s ease;
}

.wk-ep-pulse-row:hover { background: color-mix(in srgb, var(--c-teal, #0d9488) 4%, transparent); }

.wk-ep-pulse-pill {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

.wk-ep-pulse-meta { flex: 1; min-width: 0; }

.wk-ep-pulse-name {
  font-size: 12px; font-weight: 600; color: var(--ink, #161616);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wk-ep-pulse-line {
  font-size: 10.5px; color: var(--ink3, #8d8d8d);
  line-height: 1.3; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── New-item entrance animation ──────────────────────────────────────── */
.wk-item-enter {
  animation: wkCardIn .32s cubic-bezier(.2,.8,.2,1) both;
}

tr.wk-item-enter {
  animation: wkItemFadeIn .32s ease both;
}

@keyframes wkItemFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================
   GLOBAL SEARCH (Spotlight-style) — sits at the very top of the
   Work hub inside .ph-nav-wrap, above the pill tabs.
   Searches tasks, projects, clients, people, programs, grants.
   Dropdown uses position:fixed because .ph-nav-wrap has overflow:hidden.
   ================================================================ */
.wk-gs {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid #eef2f6;
  background: rgba(248, 250, 252, 0.55);
}

.wk-gs-icon { width: 16px; height: 16px; color: #64748b; flex-shrink: 0; }

.wk-gs input[type="text"] {
  flex: 1; min-width: 0;
  border: 1px solid transparent; border-radius: 10px;
  padding: 8px 12px; font-size: 13px; font-family: inherit;
  background: #fff; color: #0f172a; outline: none;
  box-shadow: 0 0 0 1px rgba(15,23,42,.06);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.wk-gs input[type="text"]:focus {
  border-color: var(--c-blue, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-blue, #6366f1) 18%, transparent);
}

.wk-gs input[type="text"]::placeholder { color: #94a3b8; }

.wk-gs-clear {
  background: transparent; border: 0; color: #94a3b8;
  cursor: pointer; padding: 4px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}

.wk-gs-clear svg { width: 14px; height: 14px; }

.wk-gs-clear:hover { color: #334155; background: rgba(15,23,42,.06); }

.wk-gs-kbd {
  display: inline-flex; gap: 3px; pointer-events: none;
}

.wk-gs-kbd kbd {
  font-family: inherit; background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 4px; padding: 1px 5px; min-width: 14px; text-align: center;
  font-size: 10px; color: #475569; font-weight: 600; line-height: 1.4;
}

/* Dropdown — position:fixed so it escapes ph-nav-wrap's overflow:hidden */
.wk-gs-results {
  position: fixed; z-index: 1200;
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 16px 48px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.08);
  max-height: 72vh; overflow-y: auto;
  font-family: inherit;
}

.wk-gs-results[hidden] { display: none; }

.wk-gs-group { padding: 6px 4px 6px; }

.wk-gs-group + .wk-gs-group { border-top: 1px solid #f1f5f9; }

.wk-gs-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #94a3b8; padding: 8px 12px 4px;
  display: flex; align-items: center; justify-content: space-between;
}

.wk-gs-group-count {
  font-size: 10px; font-weight: 700; color: #cbd5e1;
}

.wk-gs-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  cursor: pointer; border-radius: 8px; margin: 1px 4px;
  outline: none;
}

.wk-gs-row:hover, .wk-gs-row.is-active {
  background: color-mix(in srgb, var(--c-blue, #6366f1) 10%, transparent);
}

.wk-gs-row-icon {
  flex: 0 0 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}

.wk-gs-row-icon svg { width: 14px; height: 14px; stroke-width: 2; }

.wk-gs-row-body { flex: 1; min-width: 0; }

.wk-gs-row-title {
  font-size: 13px; font-weight: 600; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wk-gs-row-title mark {
  background: color-mix(in srgb, #facc15 60%, transparent);
  color: inherit; padding: 0 1px; border-radius: 2px;
}

.wk-gs-row-sub {
  font-size: 11px; color: #64748b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}

.wk-gs-row-meta {
  font-size: 10px; font-weight: 600; color: #475569;
  background: #f1f5f9; padding: 2px 7px; border-radius: 999px;
  flex-shrink: 0;
}

.wk-gs-row-meta.is-overdue { background: #fef2f2; color: #b91c1c; }

.wk-gs-row-meta.is-today { background: #fef3c7; color: #b45309; }

.wk-gs-row-meta.is-done { background: #dcfce7; color: #15803d; }

.wk-gs-empty {
  padding: 28px 16px; text-align: center; color: #94a3b8; font-size: 13px;
}

.wk-gs-hint {
  padding: 8px 12px; color: #94a3b8; font-size: 11px;
  border-top: 1px solid #f1f5f9; background: #f8fafc;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}

.wk-gs-hint b { color: #475569; font-weight: 600; }

@media (max-width: 700px) {
.wk-gs-kbd { display: none; }

.wk-gs { padding: 6px 10px; }
}

/* ══════════════════════════════════════════════════════════════════
   ACTIVITY FEED — bulletin-board cards (#homeActivityBody)
   Polished rows with actor avatar, verb, target, type tag, time.
   Clickable: card → task, avatar/name → person, project chip → project.
   ══════════════════════════════════════════════════════════════════ */
#homeActivityBody.wk-focus-group {
  display: flex; flex-direction: column; gap: 16px;
  background: transparent; border: 0; padding: 4px 0 16px;
}

.wk-act-day { display: flex; flex-direction: column; gap: 8px; }

.wk-act-day-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 2px;
}

.wk-act-day-label {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink3, #64748b);
}

.wk-act-day-count {
  font-size: 10.5px; font-weight: 800; color: var(--ink3, #94a3b8);
  background: var(--surf-2, #f1f5f9);
  padding: 1px 7px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.wk-act-day-list { display: flex; flex-direction: column; gap: 6px; }

.wk-act-card {
  position: relative; cursor: pointer;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px 12px 18px;
  background: var(--surf, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
  overflow: hidden;
}

.wk-act-card:hover {
  border-color: color-mix(in srgb, var(--_act-color, #6366f1) 35%, var(--border, #e5e7eb));
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .25);
  transform: translateY(-1px);
}

.wk-act-card .wk-act-rail {
  position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: var(--_act-color, #6366f1);
  border-radius: 12px 0 0 12px;
}

.wk-act-card .wk-act-actor {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .4px;
  cursor: pointer; user-select: none;
  box-shadow: 0 0 0 2px var(--surf, #fff);
}

.wk-act-card .wk-act-actor:hover { transform: scale(1.05); }

/* ── My Capacity (workload by week) ── */
.wk-cap-group { margin-bottom: 16px; }

.wk-cap-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

.wk-cap-group-title { font-weight: 700; font-size: 13px; color: var(--ink, #0f172a); }

.wk-cap-group-meta { font-size: 11.5px; font-weight: 600; color: var(--ink3, #64748b); }

.wk-cap-group--danger .wk-cap-group-title { color: #b91c1c; }

.wk-cap-bar { height: 6px; border-radius: 999px; background: #eef2f6; overflow: hidden; margin-bottom: 8px; }

.wk-cap-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 999px; transition: width .25s ease; }

.wk-cap-bar.is-over > span { background: linear-gradient(90deg, #f59e0b, #ef4444); }

.wk-cap-group-list { display: flex; flex-direction: column; gap: 5px; }

.wk-cap-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #eef2f6; border-radius: 10px; background: #fff; cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s; }

.wk-cap-row:hover { background: #f8fafc; border-color: #dbe3ec; box-shadow: 0 1px 4px rgba(15,23,42,.05); }

.wk-cap-row-name { flex: 1; min-width: 0; font-size: 13px; color: var(--ink, #0f172a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wk-cap-row-due { font-size: 11.5px; color: var(--ink3, #64748b); flex: 0 0 auto; }

.wk-cap-row-hrs { font-size: 12px; font-weight: 700; color: #4f46e5; min-width: 38px; text-align: right; flex: 0 0 auto; }

/* Capacity rows reused inside the right-side support modules: tighter, and
   non-task rows (e.g. overloaded weeks) shouldn't look clickable. */
.wk-support-body .wk-cap-row { padding: 7px 10px; gap: 8px; }

.wk-support-body .wk-cap-row:not([data-task-id]) { cursor: default; }

.wk-support-body .wk-cap-row:not([data-task-id]):hover { background: #fff; border-color: #eef2f6; box-shadow: none; }

.wk-cap-more { font-size: 11.5px; color: var(--ink3, #64748b); padding: 6px 10px 2px; }

/* Profile photo fills the avatar disc when the actor has one. */
.wk-act-card .wk-act-actor--img { overflow: hidden; }

.wk-act-card .wk-act-actor--img img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}

/* "via AI" badge — marks an action the AI performed for the named user. */
.wk-act-card .wk-act-ai-badge {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .2px;
  background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe;
  vertical-align: middle;
}

.wk-act-card .wk-act-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}

.wk-act-card .wk-act-headline {
  font-size: 13px; line-height: 1.45; color: var(--ink, #0f172a);
  word-break: break-word;
}

.wk-act-card .wk-act-actor-name {
  font-weight: 700; color: var(--ink, #0f172a);
  cursor: pointer;
}

.wk-act-card .wk-act-actor-name:hover {
  color: var(--_act-color, #4f46e5); text-decoration: underline;
}

.wk-act-card .wk-act-verb { color: var(--ink2, #64748b); font-weight: 500; }

.wk-act-card .wk-act-target {
  color: var(--ink, #0f172a); font-weight: 700;
}

.wk-act-card .wk-act-detail {
  font-size: 12px; color: var(--ink2, #475569); line-height: 1.5;
  padding: 6px 10px; background: var(--surf-2, #f8fafc);
  border-radius: 8px; border-left: 2px solid var(--_act-color, #6366f1);
}

.wk-act-card .wk-act-tags {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}

.wk-act-tag {
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid transparent;
  letter-spacing: .02em;
}

.wk-act-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  background: var(--surf-2, #f1f5f9);
  border: 1px solid var(--border, #e5e7eb);
  color: var(--ink2, #475569);
  cursor: pointer; transition: background .12s, border-color .12s;
}

.wk-act-chip:hover {
  background: var(--surf, #fff);
  border-color: var(--_act-color, #6366f1);
  color: var(--_act-color, #6366f1);
}

.wk-act-chip svg { flex-shrink: 0; }

/* Series marker — a label, not a link: it opens nothing, so it must not
   pretend to be clickable the way the project chip beside it does. */
.wk-act-chip--series { cursor: default; }

.wk-act-chip--series:hover {
  background: var(--surf-2, #f1f5f9);
  border-color: var(--border, #e5e7eb);
  color: var(--ink2, #475569);
}

.wk-act-card .wk-act-time {
  flex-shrink: 0; align-self: flex-start;
  font-size: 11px; color: var(--ink3, #94a3b8);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-top: 4px;
}

/* Empty state — friendlier than a bare "no items" string */
.wk-act-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 48px 20px; color: var(--ink3, #94a3b8);
  text-align: center;
}

.wk-act-empty svg { color: var(--ink4, #cbd5e1); }

.wk-act-empty-title {
  font-size: 14px; font-weight: 700; color: var(--ink2, #475569);
  margin-top: 4px;
}

.wk-act-empty-sub { font-size: 12px; max-width: 360px; line-height: 1.5; }

@media (max-width: 700px) {
.wk-act-card { padding: 10px 12px 10px 16px; gap: 10px; }

.wk-act-card .wk-act-actor { width: 28px; height: 28px; font-size: 10px; }

.wk-act-card .wk-act-headline { font-size: 12.5px; }

.wk-act-card .wk-act-time { font-size: 10.5px; }
}

/* ══════════════════════════════════════════════════════════════════
   Obvious mandatory create-title  (shared: work stream / task / goal / project)
   Applied ONLY in create mode to the entity's title element. Works on both
   contenteditable headers (#gdTitle, #tpTitle) and <input> titles (goal/project).
   Empty  → blue glow + placeholder, saying "name it here to create it".
   Filled → calm, no glow. The glow uses the same blue as the Create button.
   ══════════════════════════════════════════════════════════════════ */
.wk-ctitle {
  border-radius: 10px;
  transition: box-shadow .22s ease, background .22s ease;
  scroll-margin-top: 90px;
}

/* Contenteditable header titles (#gdTitle, #tpTitle) need breathing room so the
   glow ring doesn't clip the text. Native <input> titles keep their own padding. */
.wk-ctitle--head { padding: 4px 12px; }

.wk-ctitle:focus,
.wk-ctitle:focus-visible { outline: none; }

/* Empty / required — pulsing blue ring draws the eye to the title spot. */
.wk-ctitle.wk-ctitle--empty {
  background: rgba(37, 99, 235, .06);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .55), 0 0 16px 2px rgba(37, 99, 235, .28);
  animation: wkCtitleGlow 1.8s ease-in-out infinite;
}

@keyframes wkCtitleGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(37, 99, 235, .42), 0 0 10px 1px rgba(37, 99, 235, .18); }
  50%      { box-shadow: 0 0 0 2px rgba(37, 99, 235, .78), 0 0 20px 5px rgba(37, 99, 235, .38); }
}

/* Placeholder for contenteditable titles (native inputs keep their own). */
.wk-ctitle[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  font-weight: 600;
  pointer-events: none;
}

/* Filled — settle to a quiet outline, no glow, no animation. */
.wk-ctitle.wk-ctitle--filled {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .28);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
.wk-ctitle.wk-ctitle--empty { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   RECENTLY COMPLETED  ·  SUBMISSION NOTES  ·  VISIBLE SCROLLBARS
   ══════════════════════════════════════════════════════════════════ */

/* ── Recently Completed ──
   Checking a task off pulls it out of every active list. This group is the
   answer to "where did it go" — it sits at the bottom of the Overview and the
   Tasks list, always present even when empty, so there's a known place to
   look. Collapsible, and the state sticks. */
.wk-recent-done { border-top: 1px dashed var(--border, #e2e8f0); margin-top: 6px; padding-top: 6px; }

.wk-recent-done .wk-focus-group-head { cursor: pointer; user-select: none; }

.wk-recent-done .wk-focus-group-head:hover { background: color-mix(in srgb, var(--c-green, #16a34a) 6%, transparent); }

.wk-recent-hint {
  font-size: 10px; font-weight: 600; color: var(--ink4, #94a3b8);
  margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wk-recent-chev { margin-left: auto; flex-shrink: 0; opacity: .55; transition: transform .2s ease; }

.wk-recent-done.is-collapsed .wk-recent-chev { transform: rotate(-90deg); }

.wk-recent-done.is-collapsed .wk-focus-list { display: none; }

/* Completed cards read as banked, not as noise competing with live work. */
.wk-recent-done .mw-task-card { opacity: .78; }

.wk-recent-done .mw-task-card:hover { opacity: 1; }

.wk-recent-more {
  font-size: 11px; font-weight: 600; color: var(--ink4, #94a3b8);
  padding: 8px 4px 2px; text-align: center;
}

/* The card you just completed, when you follow "Where did it go?" */
@keyframes wkRecentFlash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-green, #16a34a) 55%, transparent); }
  35%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-green, #16a34a) 22%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-green, #16a34a) 0%, transparent); }
}

.mw-task-card.wk-recent-flash { animation: wkRecentFlash 1.6s ease-out; opacity: 1 !important; }

/* "Where did it go?" on the completion toast, next to Undo */
.wk-undo-jump {
  background: transparent; border: 1px solid rgba(255,255,255,.35); color: inherit;
  font: 700 11px/1 'Inter', system-ui, sans-serif; padding: 5px 9px;
  border-radius: 6px; cursor: pointer; margin-left: 8px; white-space: nowrap;
}

.wk-undo-jump:hover { background: rgba(255,255,255,.14); }

/* ── Submission notes on a finished task ── */
.tp-subnotes-block .tp-block-head { gap: 6px; }

.tp-subnotes-copy {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font: 700 10px/1 'Inter', system-ui, sans-serif; letter-spacing: .02em;
  padding: 4px 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border, #e2e8f0); background: var(--surf, #fff); color: var(--ink3, #64748b);
}

.tp-subnotes-copy:hover { background: #f8fafc; color: var(--ink, #0f172a); border-color: #cbd5e1; }

.tp-subnotes-block .tp-editor {
  white-space: pre-wrap;
  background: color-mix(in srgb, var(--c-green, #16a34a) 4%, var(--surf, #fff));
  border-color: color-mix(in srgb, var(--c-green, #16a34a) 22%, var(--border, #e2e8f0));
}

@media (prefers-color-scheme: dark) {
.tp-subnotes-copy { background: #1f2430; border-color: #333b4d; color: #cbd5e1; }

.tp-subnotes-copy:hover { background: #2a3140; color: #f3f4f6; }
}

/* ══════════════════════════════════════════════════════════════════
   FOCUS BANDS  ·  "what do I do first?"
   ══════════════════════════════════════════════════════════════════
   The active-task list used to be one undifferentiated scroll in store
   order, and the fields that could have ordered it — priority, due date —
   are blank on most rows, so every card looked exactly as urgent as every
   other one. wk-focus-rank.js ranks them from signals the task carries
   anyway and splits the list into Do now / Coming up / Suggested next /
   Backlog; these are the dividers it prints between the cards.

   They are DIVIDERS, not containers — the cards stay direct children of
   .wk-focus-list so dedupe, search, Kanban and the row tally keep working.
   The heading sticks to the top of the scroll so "which band am I in" stays
   answered 30 rows down. */
.mw-focus-band {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; margin: 8px 0 -2px;
  position: sticky; top: -8px; z-index: 3;
  background: var(--surf, #fff);
  border-bottom: 1px solid var(--border-s, #eef2f7);
  border-radius: 8px 8px 0 0;
}

.wk-focus-list > .mw-focus-band:first-child { margin-top: 0; }

.mw-fb-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.mw-fb-label {
  font-size: 10px; font-weight: 800; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0;
}

.mw-fb-count {
  font-size: 10px; font-weight: 800; color: var(--ink3);
  background: var(--border-s); border-radius: 6px;
  padding: 1px 7px; min-width: 18px; text-align: center; flex-shrink: 0;
}

.mw-fb-hint {
  flex: 1 1 auto; min-width: 0;
  font-size: 10px; font-weight: 600; color: var(--ink4, #94a3b8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The backlog folds away — it is the part of the list nothing is asking for
   today. The count stays on the heading so it reads as "put away", never as
   "missing", and the choice sticks across renders and reloads. */
.mw-focus-band.is-collapsible { cursor: pointer; user-select: none; border-radius: 8px; }

.mw-focus-band.is-collapsible:hover { background: color-mix(in srgb, var(--c-green, #16a34a) 6%, var(--surf, #fff)); }

.mw-focus-band.is-collapsible:focus-visible { outline: 2px solid var(--c-green, #16a34a); outline-offset: 1px; }

.mw-fb-toggle {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; color: var(--ink3);
}

.mw-fb-chev { opacity: .6; transition: transform .2s ease; }

.mw-focus-band.is-closed .mw-fb-chev { transform: rotate(-90deg); }

.wk-focus-list.is-backlog-closed .mw-task-card[data-band-of="later"] { display: none; }

/* Board view lays the list out in two columns — a divider spans both. */
.wk-focus-list.wk-view-board .mw-focus-band { grid-column: 1 / -1; }

/* Card (Kanban) and heat-map views rebuild the list into columns or tiles;
   dividers between siblings have nothing left to divide there. */
.gl-view-card .mw-focus-band,
.gl-view-heatmap .mw-focus-band { display: none !important; }

@media (max-width: 720px) {
.mw-fb-hint { display: none; }
}

/* ── Work-stream sub-headings inside the backlog band ──
   43 undated rows is a pile whichever way you sort it, and undated work has no
   time order to respect — so the backlog is split by work stream, which is the
   question you're actually asking of a list that size ("what's left on the
   course builder?"). Lighter than a band divider on purpose: it is a landmark
   inside a section, not a section of its own. */
.mw-focus-sub {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px 5px 14px; margin: 6px 0 -4px;
  position: sticky; top: 26px; z-index: 2;
  background: var(--surf, #fff);
}

.mw-focus-sub::before {
  content: ''; position: absolute; left: 4px; top: 50%;
  width: 5px; height: 1px; background: var(--border, #e2e8f0);
}

.mw-fs-label {
  font-size: 10.5px; font-weight: 700; color: var(--ink3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mw-fs-count { font-size: 9.5px; font-weight: 700; color: var(--ink4, #94a3b8); }

.wk-focus-list.is-backlog-closed .mw-focus-sub { display: none; }

.gl-view-card .mw-focus-sub,
.gl-view-heatmap .mw-focus-sub { display: none !important; }

.wk-focus-list.wk-view-board .mw-focus-sub { grid-column: 1 / -1; }

/* The native picker behind "Pick a date…" — present for showPicker(), never shown. */
.wk-due-pop .wk-due-native { position: absolute; left: 10px; bottom: 6px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════
   TEAMMATE PICKER  ·  you are choosing a PERSON, so lead with the face
   ══════════════════════════════════════════════════════════════════
   Replaces .wk-team-picker-menu (a stack of bare text buttons toggled with
   [hidden] — no faces, no motion, absolutely positioned inside a panel that
   scrolls). Body-appended and position:fixed like every other popup here,
   because .wk-focus-list scrolls and .mw-task-card is overflow:hidden. */
.wk-tmp-pop {
  position: fixed;
  z-index: 2147483000;              /* same tier as .wk-cs-pop — above every drawer */
  min-width: 236px; max-width: 340px; max-height: 340px;
  padding: 6px;
  background: var(--surf, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .06);
  overflow: hidden auto;
  scrollbar-width: thin;
  /* Entrance: settle down into place from the edge it's anchored to. The
     overshoot-free easing is the same curve the focus panels use. */
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  transform-origin: top left;
  transition: opacity .16s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.wk-tmp-pop.is-above { transform: translateY(6px) scale(.97); transform-origin: bottom left; }

.wk-tmp-pop.is-open { opacity: 1; transform: translateY(0) scale(1); }

.wk-tmp-pop.is-closing { opacity: 0; transform: translateY(-4px) scale(.98); transition-duration: .12s; }

.wk-tmp-pop.is-above.is-closing { transform: translateY(4px) scale(.98); }

.wk-tmp-list { display: flex; flex-direction: column; gap: 2px; }

.wk-tmp-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 9px;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--ink, #0f172a);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  transition: background .13s ease;
}

.wk-tmp-row:hover { background: var(--hover-bg, #f1f5f9); }

.wk-tmp-row:focus-visible { outline: 2px solid var(--c-green, #16a34a); outline-offset: -2px; }

.wk-tmp-row.is-selected { background: var(--c-green-bg, #defbe6); }

.wk-tmp-row.is-selected .wk-tmp-name { color: var(--c-green, #16a34a); font-weight: 700; }

.wk-tmp-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }

.wk-tmp-name { font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wk-tmp-meta {
  font-size: 10.5px; font-weight: 600; color: var(--ink4, #94a3b8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wk-tmp-check { flex: 0 0 auto; color: var(--c-green, #16a34a); }

/* Faces. A 404 photo degrades to a coloured monogram (the img's own onerror),
   never to a broken-image icon. */
.wk-tmp-face {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 10.5px; font-weight: 800; color: #fff; letter-spacing: .02em;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}

.wk-tmp-face--img { background: var(--border-s, #eef2f7); }

.wk-tmp-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wk-tmp-face--xs { width: 19px; height: 19px; font-size: 8px; box-shadow: 0 0 0 2px var(--surf, #fff); }

.wk-tmp-face--glyph { background: var(--border-s, #eef2f7); color: var(--ink3, #94a3b8); }

.wk-tmp-face--glyph svg { width: 15px; height: 15px; }

/* "All teammates" wears the team: the first three faces, overlapped. */
.wk-tmp-stack { flex: 0 0 auto; display: inline-flex; align-items: center; width: 28px; }

.wk-tmp-stack .wk-tmp-face--xs + .wk-tmp-face--xs { margin-left: -9px; }

/* The closed trigger wears the face of whoever you're scoped to. */
.wk-tmp-trigger-face {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; overflow: hidden;
  font-size: 8.5px; font-weight: 800; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
}

.wk-tmp-trigger-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wk-team-picker-btn { transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease; }

.wk-team-picker-btn svg:last-child { transition: transform .2s cubic-bezier(.22, 1, .36, 1); }

.wk-team-picker-btn.is-active svg:last-child { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
.wk-tmp-pop { transition: none; opacity: 1; transform: none; }

.wk-tmp-pop.is-closing { display: none; }

.wk-team-picker-btn svg:last-child { transition: none; }
}