/* =========================================================   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; }

/* ── Design tokens ── */
:root {
  --f: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wt-shell-width: 1480px;
  --ink: #161616; --ink2: #525252; --ink2-4: #6b7280; --ink3: #8d8d8d; --ink4: #c6c6c6;
  --wt-neutral-bg: #f4f4f4;
  --surf: #ffffff; --border: #e0e0e0; --border-s: #f4f4f4;
  --radius: 16px; --radius-sm: 10px;
  --c-green: #16a34a;  --c-green-bg: #defbe6;  --c-green-soft: #a7f0ba;
  --c-yellow: #f59e0b; --c-yellow-bg: #fef3c7; --c-yellow-soft: #fde68a;
  --c-red: #ef4444;    --c-red-bg: #fff1f1;    --c-red-soft: #fecdd3;
  --c-blue: var(--wt-theme-primary, #004b7c); --c-blue-bg: var(--wt-theme-primary-mist, #e6f3ff); --c-blue-soft: var(--wt-theme-primary-soft, #cbd5f5);
  --c-purple: #7c3aed; --c-purple-bg: #f5f3ff; --c-purple-soft: #c4b5fd;
  --c-teal: #0d9488;   --c-teal-bg: #f0fdfa;
  /* ── Vault-quality shadow scale ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md: 0 4px 14px rgba(0,0,0,.06), 0 1.5px 5px rgba(0,0,0,.03);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.04);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  /* ── Spring easing (consistent) ── */
  --ease-spring: cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--f); background: var(--wt-neutral-bg); color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
@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); } }

/* =========================================================   TOP PILL NAVIGATION  (.ph-nav-wrap / .ph-nav / .ph-nav-btn)
   Identical to Process Hub
   ================================================================ */
.ph-nav-wrap {
  width: 100%; max-width: none; margin: 0; padding: 0;
  position: sticky; top: 0; z-index: 800;
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248,250,252,0.95));
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden; margin-bottom: 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.ph-nav {
  display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; justify-content: center;
  background: transparent; border: none; padding: 8px 16px;
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.ph-nav::-webkit-scrollbar { height: 0; background: transparent; }
.ph-nav { scrollbar-width: none; }
.ph-nav-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 16px; font-size: 12.5px; font-weight: 600; color: #64748b;
  letter-spacing: .01em; cursor: pointer; background: none; border: none;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
  border-radius: 8px; white-space: nowrap; user-select: none; line-height: 1; font-family: var(--f);
}
.ph-nav-btn + .ph-nav-btn::before {
  content: ''; position: absolute; left: -3px; top: 50%;
  width: 1px; height: 14px; transform: translateY(-50%);
  background: #cbd5e1; opacity: .45;
}
.ph-nav-btn:hover { color: #1e293b; background: rgba(15,23,42,.045); }
.ph-nav-btn.is-active {
  color: var(--c-blue); background: color-mix(in srgb, var(--c-blue) 8%, transparent);
}
.ph-nav-btn.is-active:hover { background: color-mix(in srgb, var(--c-blue) 12%, transparent); }
.ph-nav-btn.is-active::before { display: none; }
.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; }
@media (max-width: 700px) {
  .ph-nav { justify-content: flex-start; padding: 6px 10px; }
  .ph-nav-btn { padding: 5px 12px; font-size: 11.5px; }
}

/* =========================================================   SIDEBAR  (.ph-hub / .ph-sidebar / .ph-sb-*)
   ================================================================ */
.ph-hub {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 16px; align-items: start; min-height: 500px;
}
@media (max-width: 900px) { .ph-hub { grid-template-columns: 1fr; } }

.ph-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 - 80px); overflow-y: auto; z-index: 2;
  scrollbar-width: none;
}
.ph-sidebar::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
  .ph-sidebar { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; }
}
.ph-sb-label {
  font-size: 10px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 6px 4px;
}
@media (max-width: 900px) { .ph-sb-label { display: none; } }

.ph-sb-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 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, box-shadow .15s ease, color .15s ease, transform .15s ease;
}
.ph-sb-item:hover { background: rgba(255,255,255,0.5); transform: translateY(-1px); }
.ph-sb-item.is-active { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); color: var(--c-blue); }
@media (max-width: 900px) { .ph-sb-item { padding: 6px 12px; font-size: 11.5px; border-radius: 8px; } }

.ph-sb-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; }
.ph-sb-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ph-sb-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;
}
.ph-sb-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; }

/* Quick Actions in sidebar */
.ph-sb-label.ph-qa-label { margin-top: 12px !important; padding-top: 10px !important; border-top: 1px solid var(--border) !important; }
.ph-sb-item.ph-qa-btn {
  background: transparent !important; color: var(--ink3) !important;
  border-radius: 6px !important; border: 1px solid var(--border) !important;
  font-weight: 600 !important; font-size: 10.5px !important;
  padding: 5px 8px !important; transition: all .15s ease !important;
}
.ph-sb-item.ph-qa-btn .ph-sb-icon svg { stroke: var(--ink4) !important; width: 13px !important; height: 13px !important; }
.ph-sb-item.ph-qa-btn:hover {
  background: var(--c-blue-bg) !important; color: var(--c-blue) !important;
  border-color: var(--c-blue) !important; transform: none !important;
}
.ph-sb-item.ph-qa-btn:hover .ph-sb-icon svg { stroke: var(--c-blue) !important; }
.ph-sb-item.ph-qa-btn + .ph-sb-item.ph-qa-btn { margin-top: 0 !important; }

/* Content panel — tight 18px right padding so scorecards and the right-rail
   support stack extend close to the fixed right-side widgets (Miles bubble +
   FAB stack), matching the Grants tab. The centered fitted lane keeps natural
   margin between content and the right-edge widgets, so a wide reserved lane
   isn't needed. (Grants overrides this with its own 18px padding in grants.css.) */
.ph-content { min-width: 0; padding-right: 18px; }
@media (max-width: 900px) { .ph-content { padding-right: 18px; } }
.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; }

/* =========================================================   SCORECARDS (.ax-cards-row / .ax-card)
   ================================================================ */
.ax-cards-row {
  display: flex; gap: 8px; margin-bottom: 18px;
  overflow-x: auto; overflow-y: visible; padding: 4px;
  scrollbar-width: none; position: relative; z-index: 2;
}
.ax-cards-row::-webkit-scrollbar { display: none; }
.ax-card {
  flex: 1; min-width: 100px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px 12px; border-radius: var(--radius, 16px);
  border: 1px solid var(--border-s, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--_ac, #64748b) 4%, var(--surf)), var(--surf));
  cursor: pointer;
  transition: all .35s var(--ease-spring); position: relative; overflow: hidden;
  font-family: inherit; text-align: center;
  box-shadow: var(--shadow-sm);
}
.ax-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5px;
  background: linear-gradient(90deg, var(--_ac, #64748b), color-mix(in srgb, var(--_ac, #64748b) 70%, #fff));
  border-radius: var(--radius) var(--radius) 0 0;
  transition: height .25s var(--ease-spring);
}
.ax-card:hover {
  box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--_ac, #64748b) 20%, var(--border));
  transform: translateY(-3px);
}
.ax-card:active { transform: scale(.96); transition-duration: .08s; }
.ax-card.is-active {
  border-color: color-mix(in srgb, var(--_ac) 30%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--_ac) 8%, var(--surf)), var(--surf));
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--_ac) 15%, transparent), var(--shadow-md);
}
.ax-card.is-active::before { height: 4px; }
.ax-card-body { flex: none; min-width: 0; text-align: center; max-width: 100%; }
.ax-card-val {
  font-size: clamp(16px, 2.4vw, 28px); font-weight: 900; line-height: 1; color: var(--_ac, var(--ink));
  letter-spacing: -.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
  transition: transform .3s var(--ease-spring);
}
.ax-card:hover .ax-card-val { transform: scale(1.06); }
.ax-card-lbl { font-size: 9px; font-weight: 800; color: var(--ink3); text-transform: uppercase; letter-spacing: .5px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Static display card (financial rollups — not a filter, same look as count cards) ── */
.ax-card--static {
  cursor: default !important;
  pointer-events: none;
}

/* ── ax-card-icon always hidden in Work app (use clean text-only design) ── */
.ax-card-icon,
.ax-card-icon svg { display: none !important; }

@media(max-width:1100px) { .ax-cards-row { flex-wrap: wrap; } }
@media(max-width:640px) { .ax-cards-row { flex-wrap: wrap; } .ax-card { min-width: calc(50% - 4px); } }

/* =========================================================   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 — muted appearance.
   When a scorecard reads 0/—/empty we wash out the accent color (--_ac) and
   render the whole card in neutral gray so a wall of zeros doesn't look like
   a wall of red/green/yellow alarms. */
.ax-card.is-zero { opacity: 0.6; pointer-events: auto; }
.ax-card.is-zero .ax-card-val { color: var(--ink4, #94a3b8) !important; }
.ax-card.is-zero .ax-card-lbl { color: var(--ink3, #9ca3af) !important; }
.ax-card.is-zero::before { background: var(--ink4, #94a3b8) !important; }
.ax-card.is-zero { background: var(--surf) !important; border-color: var(--border-s, var(--border)) !important; }
.ax-card.is-zero.is-active { border-color: var(--border); box-shadow: none; background: var(--surf) !important; }

/* Non-zero scorecards — restore the semantic accent color (--_ac).
   Green = good (Active, On Track), Red = bad (Critical, Overdue, Over Budget),
   Yellow = mediocre (At Risk, Understaffed). The accent comes from the inline
   --_ac CSS var on each card; these rules just make it actually visible. */
.ax-card:not(.is-zero) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--_ac, #64748b) 10%, var(--surf)), var(--surf));
  border-color: color-mix(in srgb, var(--_ac, #64748b) 25%, var(--border));
}
.ax-card:not(.is-zero)::before {
  height: 4px;
  background: var(--_ac, #64748b);
}
/* !important wins over the inline color="#94a3b8" that the global zero
   normalizer (work.js _normalizeZeroScoreCards) sometimes leaves behind
   when a card transitions 0 → non-zero without a stashed original color. */
.ax-card:not(.is-zero) .ax-card-val { color: var(--_ac, var(--ink)) !important; }
.ax-card:not(.is-zero).is-active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--_ac) 16%, var(--surf)), var(--surf));
  border-color: color-mix(in srgb, var(--_ac) 40%, var(--border));
}

/* 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); }

/* Scorecard tooltip (wider, richer) */
.ax-card[data-wk-tip]::after { max-width: 320px; text-align: left; }

/* 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;
}
.rp-drop.is-open .rp-drop-menu, body > .rp-drop-menu { display: block; }
@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; }

/* Responsive */
@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; }

/* =========================================================   MY WORK TAB — Execution Space  (3-column layout)
   ================================================================ */

/* Scorecard row tweaks */
.mw-scorecards .ax-card { cursor: pointer; }
.mw-scorecards .ax-card.is-active { border-color: var(--_ac); box-shadow: 0 0 0 2px var(--_ac), 0 0 12px rgba(0,0,0,.08); }

/* 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; }
/* One narrow lane on a phone / short window. The grid is the only thing that
   changes — every child already works in a single column (it is what shipped
   before), so nothing else needs a mobile variant. */
@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; }

/* Tight columns: keep the current stage readable, drop the rest of the labels */
@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; }
/* ══════════════════════════════════════════════════════════════════
   TEAM → CAPACITY — a grid of the Staffing person card
   The card chrome itself is `.prog-staff-*` in programs.css: this is
   deliberately the SAME card we show a consultant on in Projects →
   Staffing, not a lookalike. Everything below is either layout that
   file has no business knowing about, or the capacity-only accents.
   ⚠️ programs.css is loaded `media="print"` + onload-swap, so the grid
   and the padding here must stand on their own for the first frame.
   ══════════════════════════════════════════════════════════════════ */
/* ⚠️ ID-SCOPED ON PURPOSE. The element is also a `.wk-focus-list`, and at
   least four rules already claim that with two-class specificity —
   `.wk-focus-group > .wk-focus-list` (flex column, right here in this file),
   `.gl-view-list .wk-focus-list`, `.gl-view-card .wk-focus-list`. A plain
   `.wk-capacity-list { display:grid }` LOSES to every one of them: it was
   written that way first and the panel rendered as a single stacked column
   with the grid silently inert. An id puts this at (1,1,0) and it wins.
   ⚠️ Track width comes from work-views.css's `--wkv-card-min`, not a number
   typed here, so this grid and every other card grid stay the same width. */
#tmCapacityList.wk-capacity-list,
#tmClientCapacityList.wk-capacity-list,
#mwProgCapList.wk-capacity-list,
#tmProgCapList.wk-capacity-list,
#pgProgCapList.wk-capacity-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--wkv-card-min, 280px), 1fr));
  gap: 12px;
  /* Keep the tall bottom pad from .wk-focus-list — this is a scroll container
     and the last row needs room to clear the panel edge. */
  padding: 12px 12px 48px;
  /* stretch, not start: cards in a row end level with each other. Their
     content is the same shape on every card now, so this is a backstop
     rather than the mechanism — see the share/foot rules below. */
  align-items: stretch;
}
/* The empty state is a sentence, not a card — it gets the whole row. */
#tmCapacityList.wk-capacity-list > .wk-empty,
#tmClientCapacityList.wk-capacity-list > .wk-empty,
#mwProgCapList.wk-capacity-list > .wk-empty,
#tmProgCapList.wk-capacity-list > .wk-empty,
#pgProgCapList.wk-capacity-list > .wk-empty { grid-column: 1 / -1; }
/* ⚠️ `!important`, and not a debate. The Employees/Clients switch hides the pane
   that is off by setting [hidden], and BOTH panes carry a class that declares
   `display` at higher specificity than the UA's `[hidden]{display:none}` —
   `#id.wk-capacity-list` (grid) here, `.wk-support-stack` (flex) in the support
   rail. Without this the hidden grid stays on screen and the two views render
   stacked on top of each other. */
#tmCapacityList[hidden],
#tmClientCapacityList[hidden],
#mwProgCapList[hidden],
#tmProgCapList[hidden],
#pgProgCapList[hidden],
.wk-support-stack[hidden],
.ax-cards-row[hidden] { display: none !important; }
/* ⚠️ THE SAME TRAP, ONE PANEL OVER. Projects ⇄ Capacity hides the pane that is
   off with [hidden], and every one of these declares `display` at a
   specificity the UA's `[hidden]{display:none}` cannot reach:
   `.wk-focus-group > .wk-focus-list` and `.gl-view-list .wk-focus-list` for the
   project list, `.gl-view-toggle` for the List/Card tray. Without this the
   project cards stay painted UNDER the capacity band and the house view toggle
   sits there governing a grid that is not on screen — which is exactly what a
   browser screenshot caught the first time this shipped. */
#mwProgramsList[hidden],
#tmProgramsList[hidden],
.wk-focus-head .gl-view-toggle[hidden] { display: none !important; }
/* The card's own chrome, restated here so the grid never paints as a wall
   of unstyled text in the frame before programs.css swaps in. Identical
   values to `.prog-staff-card`; that file still owns everything inside. */
.wk-cap-staffcard {
  display: flex; flex-direction: column; gap: 9px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  background: var(--surf, #fff);
  text-align: left;
}
.wk-cap-staffcard.is-clickable { cursor: pointer; }
.wk-cap-staffcard:focus-visible { outline: 2px solid var(--c-blue, #0f62fe); outline-offset: 2px; }
/* Over / under is the whole point of this panel, so it reads on the card
   edge and the bar rather than only in a chip. */
.wk-cap-staffcard.is-over { border-color: color-mix(in srgb, var(--c-red, #ef4444) 40%, var(--border, #e2e8f0)); }
.wk-cap-staffcard.is-under { border-color: color-mix(in srgb, var(--c-blue, #0f62fe) 30%, var(--border, #e2e8f0)); }
.wk-cap-staffcard.is-over .prog-staff-bar-fill { background: var(--c-red, #ef4444); }
.wk-cap-staffcard.is-under .prog-staff-bar-fill {
  background: linear-gradient(90deg, var(--c-blue, #0f62fe), #38bdf8);
}
/* ── The one fact line ───────────────────────────────────────────────────
   In place of the share sentence and the four stat tiles that restated it.
   Numbers loud, labels quiet, a thin dot between them — one text row where
   the tiles cost a whole grid row.
   ⚠️ Inline flow, not flex, and ONE line: `text-overflow` needs a block box
   with inline children, and a fact line that wraps at a narrow track is a
   two-line card sitting beside a one-line one — the exact thing the equal-
   height pass above went to the trouble of removing.
   ⚠️ Scoped to the capacity card on purpose: `.prog-staff-stat*` still
   belongs to the Staffing panel, which wants its tiles. */
.wk-cap-facts {
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11.5px; font-weight: 650;
  color: var(--ink3, #64748b);
}
.wk-cap-facts span + span::before {
  content: '\00b7'; margin: 0 6px;
  color: var(--border, #cbd5e1); font-weight: 800;
}
.wk-cap-facts b {
  font-size: 13px; font-weight: 800;
  color: var(--ink, #0f172a);
  transition: color .12s ease;
}
.wk-cap-facts span.is-over b { color: var(--c-red, #ef4444); }
.wk-cap-facts span[data-cap-action] { cursor: pointer; transition: color .12s ease; }
.wk-cap-facts span[data-cap-action]:hover,
.wk-cap-facts span[data-cap-action]:hover b { color: var(--c-blue, #0f62fe); }
/* And the foot pins to the bottom, so if anything ever does grow a card,
   the row stretches around a chip that still lines up across the grid. */
.wk-cap-staffcard .prog-staff-foot,
.wk-cap-clientcard .prog-staff-foot { margin-top: auto; }

/* ══════════════════════════════════════════════════════════════════
   MINE → CAPACITY — the same card, mine, and it IS the panel
   ──────────────────────────────────────────────────────────────────
   `.wk-cap-mycard` is a `.wk-cap-staffcard` first: every rule above
   still applies, so the over/under border, the bar accents, the fact
   line and the foot are literally the Team card's and cannot drift
   from it. What changes is the SHAPE and the SCALE — this is the only
   thing in the centre column now, at ~820px rather than a 280px grid
   track, so the parts that stack in the Team grid lay out across a
   row instead and every figure on it is sized to be read at a glance
   rather than scanned in a grid of eight.
   ⚠️ GRID, not the flex column it inherits. The markup order is fixed
   by work.js (head → hero → bar → facts → foot) and is what the narrow
   Team card wants; here head and hero belong on ONE row and facts and
   foot on another. Named areas re-flow them without work.js having to
   emit two different card shapes.
   ⚠️ `.wk-cap-mycard-hero`, NOT `.prog-staff-hero`: the Team card's
   hero lives INSIDE its head row, and reusing the class would have
   meant unsetting size and alignment on a selector the Staffing panel
   also answers to.
   ══════════════════════════════════════════════════════════════════ */
.wk-cap-mycard-slot:empty { display: none; }
/* Bottom pad included: this is the last thing in the panel now, so it
   owns the gap to the panel edge that the task list used to hold. */
.wk-cap-mycard-slot { padding: 4px 16px 18px; }
/* ⚠️ TWO CLASSES, and not a style preference. `.prog-staff-card` declares
   `display:flex; flex-direction:column`, and programs.css is linked BELOW
   work.css in Work.html — so a one-class `.wk-cap-mycard{display:grid}` loses
   the cascade and every grid-area below goes inert. It rendered as a centred
   flex column with the bar collapsed to 0px wide, which reads exactly like the
   areas being mistyped. (0,2,0) beats (0,1,0) and the grid takes. */
.wk-cap-staffcard.wk-cap-mycard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'head  hero'
    'bar   bar'
    'facts foot';
  align-items: center;
  column-gap: 24px; row-gap: 22px;
  padding: 32px 34px;
  border-radius: 18px;
}
.wk-cap-mycard .prog-staff-card-head { grid-area: head; gap: 18px; }
.wk-cap-mycard .prog-staff-bar       { grid-area: bar; height: 12px; }
.wk-cap-mycard .wk-cap-facts         { grid-area: facts; }
.wk-cap-mycard .prog-staff-foot      { grid-area: foot; margin-top: 0; }
.wk-cap-mycard .prog-staff-avatar { width: 76px; height: 76px; font-size: 25px; }
.wk-cap-mycard .prog-staff-name { font-size: 24px; font-weight: 700; }
.wk-cap-mycard .prog-staff-role { font-size: 14px; margin-top: 3px; }
/* Baseline-aligned so the big number and its label sit on one line, and
   right-aligned against the head across the gap. */
.wk-cap-mycard-hero {
  grid-area: hero;
  display: flex; align-items: baseline; justify-content: flex-end; gap: 9px;
  line-height: 1; white-space: nowrap;
}
.wk-cap-mycard-hero-v {
  font-weight: 750; font-size: 68px; letter-spacing: -.035em;
  color: var(--ink, #0f172a);
  font-variant-numeric: tabular-nums;
}
.wk-cap-mycard-hero-l {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink3, #94a3b8);
}
.wk-cap-mycard.is-over .wk-cap-mycard-hero-v { color: var(--c-red, #ef4444); }
/* The one place this card is allowed to differ in KIND from the Team card:
   it has a whole row to itself, so the fact line may wrap rather than
   ellipsing the second fact away. (The Team grid clips on purpose — see the
   note on .wk-cap-facts — because a card that grows a line there breaks the
   grid's equal heights. There is no grid of these.) */
.wk-cap-mycard .wk-cap-facts {
  white-space: normal; overflow: visible; text-overflow: clip;
  font-size: 15px;
}
.wk-cap-mycard .wk-cap-facts b { font-size: 18px; }
.wk-cap-mycard .prog-staff-chip { font-size: 13px; padding: 6px 13px; }
/* Narrow centre column (or a phone): the two-column rows have nowhere to go,
   so fall back to the stacked order work.js already emits. */
@media (max-width: 720px) {
  .wk-cap-staffcard.wk-cap-mycard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'head' 'hero' 'bar' 'facts' 'foot';
    align-items: start;
    row-gap: 16px; padding: 22px 20px;
  }
  .wk-cap-mycard-hero { justify-content: flex-start; }
  .wk-cap-mycard-hero-v { font-size: 48px; }
  .wk-cap-mycard .prog-staff-avatar { width: 56px; height: 56px; font-size: 18px; }
  .wk-cap-mycard .prog-staff-name { font-size: 20px; }
}

/* ══════════════════════════════════════════════════════════════════
   TEAM → CAPACITY → CLIENTS — the demand side of the same week
   The staff card answers "can this person take more work". This one
   answers the mirror question: "how much work is on the books for
   this client, and how much of it still has nobody on it". Same box,
   same rows, same heights — one grid, read twice.
   ⚠️ It deliberately reuses `.prog-staff-*` for head / name / hero /
   foot rather than restyling them: the two cards sit in the SAME grid
   and any divergence in type or spacing reads as a bug. Only the two
   things that genuinely differ are new — a company MARK instead of a
   face, and a bar with TWO segments instead of one fill.
   ══════════════════════════════════════════════════════════════════ */
/* The Employees / Clients switch. `.gl-view-toggle` supplies the tray (grey
   inset, 2px pad, 7px radius); these rules only widen the buttons enough
   for a word, since the shared `.gl-vt-btn` is a 28px icon square. */
.wk-capseg .wk-capseg-btn,
.wk-pcseg .wk-pcseg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 11px;
  border: 0; border-radius: 5px;
  background: none; color: var(--ink3, #64748b);
  font: 700 11.5px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.wk-capseg .wk-capseg-btn:hover,
.wk-pcseg .wk-pcseg-btn:hover { color: var(--ink, #0f172a); }
.wk-capseg .wk-capseg-btn.is-active,
.wk-pcseg .wk-pcseg-btn.is-active {
  background: #fff; color: var(--c-blue, #0f62fe);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.wk-capseg .wk-capseg-btn:focus-visible,
.wk-pcseg .wk-pcseg-btn:focus-visible { outline: 2px solid var(--c-blue, #0f62fe); outline-offset: 1px; }

/* Card box — identical values to .wk-cap-staffcard so the two never drift. */
.wk-cap-clientcard {
  display: flex; flex-direction: column; gap: 9px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  background: var(--surf, #fff);
  text-align: left;
}
.wk-cap-clientcard.is-clickable { cursor: pointer; }
.wk-cap-clientcard:focus-visible { outline: 2px solid var(--c-blue, #0f62fe); outline-offset: 2px; }
/* Three states worth an edge, in order of how much they should worry you.
   is-over = this client's unowned hours exceed everything the whole team has
   left this week, i.e. we cannot deliver it as staffed. is-open = somebody
   still has to pick it up. is-idle = we have sold this client nothing for the
   week, which is a commercial problem rather than a delivery one — hence the
   quietest edge of the three, not a warning colour. */
.wk-cap-clientcard.is-over  { border-color: color-mix(in srgb, var(--c-red, #ef4444) 45%, var(--border, #e2e8f0)); }
.wk-cap-clientcard.is-open  { border-color: color-mix(in srgb, var(--c-amber, #f59e0b) 45%, var(--border, #e2e8f0)); }
.wk-cap-clientcard.is-idle  { border-style: dashed; border-color: var(--border, #cbd5e1); }
.wk-cap-clientcard.is-idle .wk-capcl-logo { opacity: .6; }

/* The company mark. Rounded square, not a circle — a logo is not a face, and
   the shape difference is what tells the two cards apart at a glance in one
   grid. Initials sit underneath; the <img> covers them when a real mark
   loads, and _wkImgFallback removes it again if every candidate URL dies. */
.wk-capcl-logo {
  position: relative;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px;
  display: grid; place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--_cl, #6366f1) 12%, #fff);
  color: var(--_cl, #6366f1);
  font: 800 11.5px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_cl, #6366f1) 22%, transparent);
}
.wk-capcl-logo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 3px;
}

/* ── The coverage bar ────────────────────────────────────────────────────
   TWO segments, because the whole point is watching one of them drain:
   the filled part is hours that have an owner, the striped part is hours
   that do not. Assign work to somebody and the stripes shrink — that IS
   the picture the panel exists to draw.
   A week with nothing scheduled draws an empty track rather than a full
   green bar: zero of zero is not "fully covered". */
.wk-capcl-bar {
  display: flex;
  height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--border-s, #eef2f7);
}
.wk-capcl-bar-own {
  background: var(--c-green, #16a34a);
  transition: width .28s cubic-bezier(.22, 1, .36, 1);
}
.wk-capcl-bar-open {
  background: repeating-linear-gradient(
    135deg,
    var(--c-amber, #f59e0b) 0 3px,
    color-mix(in srgb, var(--c-amber, #f59e0b) 45%, #fff) 3px 6px
  );
  transition: width .28s cubic-bezier(.22, 1, .36, 1);
}
.wk-cap-clientcard.is-over .wk-capcl-bar-open {
  background: repeating-linear-gradient(
    135deg,
    var(--c-red, #ef4444) 0 3px,
    color-mix(in srgb, var(--c-red, #ef4444) 45%, #fff) 3px 6px
  );
}
/* The fact line is the staff card's — same rules, same dot separators. */
.wk-cap-clientcard .wk-cap-facts span.is-open b { color: var(--c-amber, #d97706); }
.wk-cap-clientcard .wk-cap-facts span.is-over b { color: var(--c-red, #ef4444); }
/* "3 without estimates" — a caveat, not a fact. It has to be readable and it
   must not compete with the hours beside it. */
.wk-cap-facts span.wk-capcl-caveat,
.wk-cap-facts span.wk-capcl-caveat b {
  color: var(--ink3, #94a3b8); font-weight: 650; font-size: 11px;
}

/* ── Demand vs Capacity (support rail) ───────────────────────────────────
   The one place the two views are put side by side, because "too much
   scheduled" is a COMPARISON and a comparison is not a count — it has no
   honest home on a tile. */
.wk-capcl-bal { padding: 2px 0; }
.wk-capcl-bal-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 0;
}
.wk-capcl-bal-row + .wk-capcl-bal-row { border-top: 1px solid var(--border-s, #eef2f7); }
.wk-capcl-bal-lbl { font-size: 11.5px; font-weight: 650; color: var(--ink3, #64748b); }
.wk-capcl-bal-val { margin-left: auto; font-size: 14px; font-weight: 800; color: var(--ink, #0f172a); }
.wk-capcl-bal-row.is-open .wk-capcl-bal-val { color: var(--c-amber, #d97706); }
.wk-capcl-bal-row.is-free .wk-capcl-bal-val { color: var(--c-green, #16a34a); }
.wk-capcl-verdict {
  margin-top: 8px; padding: 8px 10px;
  border-radius: 8px;
  font-size: 11.5px; font-weight: 700; line-height: 1.45;
  background: color-mix(in srgb, var(--c-green, #16a34a) 9%, var(--surf, #fff));
  color: color-mix(in srgb, var(--c-green, #16a34a) 80%, var(--ink, #0f172a));
}
.wk-capcl-verdict.is-short {
  background: color-mix(in srgb, var(--c-red, #ef4444) 9%, var(--surf, #fff));
  color: color-mix(in srgb, var(--c-red, #ef4444) 78%, var(--ink, #0f172a));
}
.wk-capcl-verdict.is-tight {
  background: color-mix(in srgb, var(--c-amber, #f59e0b) 12%, var(--surf, #fff));
  color: color-mix(in srgb, var(--c-amber, #f59e0b) 82%, var(--ink, #0f172a));
}
/* Company mark in the support-rail mini rows — the circle-avatar rule beside
   it is for people, so this restates only the shape. */
.wk-cap-mini-av.is-company { border-radius: 7px; }
.wk-cap-mini-av.is-company img {
  width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 2px;
}

/* ── 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;
  overflow: hidden;
}
/* A real photo fills the circle edge to edge. .has-photo drops the initials
   background so a transparent PNG doesn't sit on a coloured disc; the JS
   onerror handler puts both back if the URL is dead. */
.wk-cap-mini-av.has-photo { background: var(--surf2, #f1f5f9); }
.wk-cap-mini-av img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
}
.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;
}

/* =========================================================   PAGE SHELL — wide layout, edges match dashboard-meta header
   ================================================================ */
.wt-page-shell { padding: 0 0 44px; min-height: 100vh; }
.wt-page-frame { max-width: none; margin: 0; padding: 20px 24px 60px 24px; width: 100%; box-sizing: border-box; }
/* base.css gives .wt-page-frame `overflow: hidden`, which silently makes it a
   scroll container and breaks position:sticky for every descendant on the page
   (left nav, right insight stack, etc.). overflow:clip preserves the corner
   clipping for the rounded frame without creating a scroll container. */
.wt-page-frame { overflow: clip; }
/* base.css also puts `overflow-x:hidden; overflow-y:auto` on BOTH <html> and
   <body> (assets/css/base.css ~L24-35). That makes <body> a scroll container
   even though body never actually scrolls (viewport scrolls via <html>) — and
   position:sticky anchors to its nearest scroll-container ancestor, so every
   sticky element on the page is silently neutralized. Switch body's vertical
   overflow back to visible so sticky descendants anchor to the viewport.
   overflow-x stays clipped to prevent rogue horizontal scrollbars.

   ⚠️ BODY ONLY — do NOT put `overflow-y: visible` back on <html>. It was on
   both until 2026-07-28, and on <html> it cancelled the viewport scroller:
   the page still scrolled with the wheel but reserved a 0px gutter, so the
   always-visible 16px page bar from base.css (~L24-37) never painted and
   there was nothing on the right to click-hold-drag. Measured headed:
   scrollHeight 1174 vs clientHeight 950 with gutter 0px. <html> being the
   scroll container is the normal case and does NOT break sticky — only a
   scroll-container <body> does, which is what this rule exists to undo. */
html {
  overflow-x: clip;
  overflow-y: scroll;
}
body {
  overflow-x: clip;
  overflow-y: visible;
}
/* 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; }

/* FAB stack — ensure FABs stay above the header bar on hub pages.
   Use descending z-index so higher-priority FABs stack above lower ones. */
body[data-page-id="work-hub"] .wt-ask-ai-fab     { z-index: 11065 !important; transition: opacity .2s ease; }
body[data-page-id="work-hub"] .wt-improve-fab     { z-index: 11064 !important; transition: opacity .2s ease; }
body[data-page-id="work-hub"] .wt-notes-fab       { z-index: 11063 !important; transition: opacity .2s ease; }
body[data-page-id="work-hub"] .wt-ideas-fab       { z-index: 11062 !important; transition: opacity .2s ease; }
body[data-page-id="work-hub"] .wt-voice-hist-fab  { z-index: 11061 !important; transition: opacity .2s ease; }
body[data-page-id="work-hub"] .wt-bookmark-fab    { z-index: 11060 !important; transition: opacity .2s ease; }

/* Hide bookmark "New tab" (+) FAB on the Reports tab — not applicable there */
body[data-wk-tab="reports"] .wt-bookmark-add-fab { display: none !important; }

/* Hide ALL floating buttons when task profile popup is open */
body.tp-popup-open .wt-ask-ai-fab,
body.tp-popup-open .wt-improve-fab,
body.tp-popup-open .wt-notes-fab,
body.tp-popup-open .wt-ideas-fab,
body.tp-popup-open .wt-voice-hist-fab,
body.tp-popup-open .wt-bookmark-fab,
body.tp-popup-open .wt-coach-fab,
body.tp-popup-open .wt-fab,
body.tp-popup-open .wt-fab-container,
body.tp-popup-open .wt-edit-fab-panel {
  opacity: 0 !important; pointer-events: none !important;
  transition: opacity .2s ease !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); }

/* Scorecard active highlights — all tabs */
.ax-card.is-active {
  border-color: var(--_ac, var(--c-green));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--_ac, var(--c-green)) 25%, transparent),
              0 0 16px color-mix(in srgb, var(--_ac, var(--c-green)) 12%, transparent);
  transform: translateY(-2px);
}
.ax-card { transition: all .22s ease; }

/* ── 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); } }
/* Status tint — keeps the colour signal but lets the card content show through */
/* Coloring for focus items (uniform size, set via JS class) */
/* Critical tiles — show reason */
/* Priority-based coloring — ALL cards same size, color indicates priority */
.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)));
}

/* Active sidebar item glow */
.ph-sidebar {
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.025);
}

/* 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; }
/* When a builder has locked the body, the engagement profile is lifted to 66000
   (goal-builder-drawer.css `body.wk-pbd-locked .gp-overlay`). A task opened from
   that profile (e.g. "+ Task" then click-to-edit in the goal→create-project flow)
   would otherwise open BEHIND it at 60000 and be unclickable. Lift it clear.
   !important beats the focus system's inline z-index. */
body.wk-pbd-locked .tp-overlay { z-index: 67000 !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;
}
/* Scorecards cascade in */
.wk-stagger .ax-card {
  opacity: 0;
  animation: wkScaleIn .32s cubic-bezier(.22,1,.36,1) both;
}
.wk-stagger .ax-card:nth-child(1) { animation-delay: .04s; }
.wk-stagger .ax-card:nth-child(2) { animation-delay: .08s; }
.wk-stagger .ax-card:nth-child(3) { animation-delay: .12s; }
.wk-stagger .ax-card:nth-child(4) { animation-delay: .16s; }
.wk-stagger .ax-card:nth-child(5) { animation-delay: .20s; }

/* 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; }

/* Sidebar items stagger on tab enter */
.wk-stagger .ph-sb-item {
  opacity: 0;
  animation: wkSlideIn .26s cubic-bezier(.22,1,.36,1) both;
}
.wk-stagger .ph-sb-item:nth-child(1)  { animation-delay: .04s; }
.wk-stagger .ph-sb-item:nth-child(2)  { animation-delay: .07s; }
.wk-stagger .ph-sb-item:nth-child(3)  { animation-delay: .10s; }
.wk-stagger .ph-sb-item:nth-child(4)  { animation-delay: .13s; }
.wk-stagger .ph-sb-item:nth-child(5)  { animation-delay: .16s; }
.wk-stagger .ph-sb-item:nth-child(6)  { animation-delay: .19s; }
.wk-stagger .ph-sb-item:nth-child(7)  { animation-delay: .22s; }
.wk-stagger .ph-sb-item:nth-child(8)  { animation-delay: .25s; }
.wk-stagger .ph-sb-item:nth-child(9)  { animation-delay: .28s; }
.wk-stagger .ph-sb-item:nth-child(10) { animation-delay: .31s; }

/* 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;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .wk-stagger .ax-card,
  .wk-stagger .gl-card,
  .wk-stagger .wk-container,
  .wk-stagger .wk-support-module,
  .wk-stagger .wk-focus-group,
  .wk-stagger .ph-sb-item,
  .wk-stagger .gl-health-row,
  .wk-stagger .gl-insight-note,
  .wk-stagger .wk-focus-head,
  .wk-stagger .wk-dist-bar,
  .wk-stagger .wk-goal-progress-fill,
  .wk-stagger .wk-member-bar,
  .wk-stagger .wk-workload-fill,
  .wk-tab-panel.wk-enter-left,
  .wk-tab-panel.wk-enter-right,
  .wk-tab-panel.wk-enter-up,
  .ph-sub.wk-enter-left,
  .ph-sub.wk-enter-right,
  .ph-sub.wk-enter-up {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* =========================================================   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;
}

/* Responsive: collapse sidebar on narrow screens */
@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); }
}

/* ══════════════════════════════════════════════════════════════
   PER-TAB SIDEBAR ACCENTS — Unique visual identity
   ══════════════════════════════════════════════════════════════ */

/* Each sidebar has a subtle top accent bar and unique active color */
.ph-sidebar {
  border-radius: 14px;
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

/* Sidebar active item — enhanced */
.ph-sb-item.is-active {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  border-radius: 10px;
  position: relative;
}
.ph-sb-item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--sb-accent, var(--c-blue));
}

/* Home sidebar */
#wkSidebarHome .ph-sb-item.is-active { color: #6366f1; }
#wkSidebarHome .ph-sb-item.is-active::before { background: #6366f1; }

/* My Work sidebar */
#wkSidebarMyWork .ph-sb-item.is-active { color: #3b82f6; }
#wkSidebarMyWork .ph-sb-item.is-active::before { background: #3b82f6; }

/* Team sidebar */
#wkSidebarTeam .ph-sb-item.is-active { color: #0891b2; }
#wkSidebarTeam .ph-sb-item.is-active::before { background: #0891b2; }

/* Goals sidebar */
#wkSidebarGoals .ph-sb-item.is-active { color: #059669; }
#wkSidebarGoals .ph-sb-item.is-active::before { background: #059669; }

/* Project Builder sidebar */
#wkSidebarProjectBuilder .ph-sb-item.is-active { color: #2563eb; }
#wkSidebarProjectBuilder .ph-sb-item.is-active::before { background: #2563eb; }

/* Reports sidebar */
#wkSidebarReports .ph-sb-item.is-active { color: #7c3aed; }
#wkSidebarReports .ph-sb-item.is-active::before { background: #7c3aed; }

/* Clients sidebar */
#wkSidebarClients .ph-sb-item.is-active { color: #6366f1; }
#wkSidebarClients .ph-sb-item.is-active::before { background: #6366f1; }

/* Programs sidebar */
#wkSidebarPrograms .ph-sb-item.is-active { color: #7c3aed; }
#wkSidebarPrograms .ph-sb-item.is-active::before { background: #7c3aed; }

/* Time sidebar */
#wkSidebarTime .ph-sb-item.is-active { color: #d97706; }
#wkSidebarTime .ph-sb-item.is-active::before { background: #d97706; }

/* Documents sidebar */
#wkSidebarDocuments .ph-sb-item.is-active { color: #0284c7; }
#wkSidebarDocuments .ph-sb-item.is-active::before { background: #0284c7; }

/* Outcomes sidebar */
#wkSidebarOutcomes .ph-sb-item.is-active { color: #059669; }
#wkSidebarOutcomes .ph-sb-item.is-active::before { background: #059669; }

/* Settings sidebar */
#wkSidebarSettings .ph-sb-item.is-active { color: #7c3aed; }
#wkSidebarSettings .ph-sb-item.is-active::before { background: #7c3aed; }

/* ── Sidebar section dividers ── */
.ph-sb-label {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--ink4, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 10px 6px 4px;
}

/* ── Sidebar item polish ── */
.ph-sb-item {
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 8px 10px;
  gap: 10px;
  transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}
.ph-sb-item:hover {
  background: rgba(255,255,255,0.6);
  transform: none;
}

/* ── Responsive ── */
@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); }

/* =========================================================   SIDEBAR & SUPPORT MODULES — Unified design language
   ================================================================ */
/* Sidebar — accent bar + consistent style
   NOTE: do NOT set position: relative here — it would override the
   position: sticky declared in the base .ph-sidebar rule and the
   sidebar would stop following the user as they scroll. */
.ph-sidebar {
  border-radius: 14px;
}
.ph-sidebar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--c-blue);
  border-radius: 14px 14px 0 0; z-index: 1;
}
/* Right-column support stack — follow user as they scroll, just like the left sidebar */
@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; }
}
.ph-sb-item.is-active {
  background: color-mix(in srgb, var(--c-blue) 8%, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  border-left: 3px solid var(--c-blue);
  padding-left: 7px;
}
/* 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;
}

/* =========================================================   HEATMAP — Responsive 3-column fallback
   ================================================================ */
@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,
/* ⚠️ Kept although `.wk-qa-said` is no longer the first block in the body —
   it is under the work stream now, and its label must still hug its box. */
.wk-qa-popup-body .wk-qa-said > .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); }
#wkQaTimeAgain { display:inline-flex;align-items:center;gap:7px; }
#wkQaTimeAgain[hidden] { display:none !important; }

/* WHAT IS ALREADY ON THIS DAY, FOR THIS WORK. A statement, not a control —
   it exists so that a second entry on one cell is a decision rather than a
   duplicate. See _refreshLogTimeExisting(). */
.wk-qa-already { margin:2px 0 14px;border:1px solid var(--border,#e5e7eb);border-radius:12px;overflow:hidden; }
.wk-qa-already[hidden] { display:none !important; }
.wk-qa-already-head { display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 12px;background:var(--bg,#f1f5f9);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink3,#94a3b8); }
.wk-qa-already-head b { font-size:12.5px;letter-spacing:0;color:var(--ink,#0f172a);
  font-variant-numeric:tabular-nums; }
.wk-qa-already-row { display:flex;align-items:center;gap:9px;padding:7px 12px;
  border-top:1px solid var(--border,#e5e7eb); }
.wk-qa-already-h { font-size:13px;font-weight:750;font-variant-numeric:tabular-nums;
  flex:0 0 auto;min-width:40px;color:var(--ink,#0f172a); }
.wk-qa-already-n { font-size:12px;color:var(--ink2,#64748b);flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.wk-qa-already-n em { color:var(--ink3,#94a3b8); }

/* Saved, and the popup stayed open on purpose. */
.wk-qa-kept { margin-top:12px;padding:10px 12px;border-radius:10px;font-size:12.5px;
  font-weight:600;line-height:1.45;background:var(--c-green-bg,#ecfdf5);
  border:1px solid var(--c-green-soft,#a7f3d0);color:var(--c-green,#059669); }
.wk-qa-kept[hidden] { display:none !important; }
.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); } }

/* ══ THE POPUP OPENED BY A DOOR THAT ALREADY SAID "one entry" ════════
   work.js stamps `data-single` when a caller passes `singleEntry` — My
   Timesheet's + on a cell is the one that does. work-day-log.js and
   bulk-time-launcher.js withdraw their own day-grain doors on the same flag;
   all this does is close the gap they leave, so the form starts at the top of
   the body instead of below the space where a hero used to be. */
#wkQaTimeOverlay[data-single] .wk-qa-popup-body > :first-child { margin-top: 0; }

/* ── 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; }
/* An AREA row's subtitle is a SENTENCE, not a client name. .wk-qa-rowsub is
   uppercase + nowrap because it was built to carry "ACME CORP" under a
   project; the area's blurb rendered through it came out shouting and cut off
   mid-word. Same slot, sentence case, allowed to wrap to two lines. */
.wk-qa-ta-item--area .wk-qa-rowsub { text-transform:none; letter-spacing:0;
  font-size:11.5px; font-weight:500; white-space:normal; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.wk-qa-rowlogo--area { display:inline-flex; align-items:center; justify-content:center;
  background:currentColor; border-radius:8px; }
.wk-qa-rowlogo--area svg { color:#fff; }
.wk-qa-rowpill--area { background:rgba(100,116,139,.12); color:#475569;
  border:1px solid rgba(100,116,139,.24); }
.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. */
/* Amber was a fifth colour on a popup that already had too many, and it read
   as a WARNING beside our own company. It is a quiet fact, so it looks like
   one. */
.wk-qa-rowpill--internal { background:transparent; color:#64748b; box-shadow:inset 0 0 0 1px #cbd5e1; }

/* 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: the identity badge in the popup head ──────────────────────
   The account chip Microsoft 365 and Google put in the top-right corner, in
   the same corner, doing the same job: it states who the app thinks you are.

   TWO STATES OFF ONE `data-fixed` ATTRIBUTE (set by _applyLogTimeIdentity):
     • absent  → admin / lead. A dropdown: bordered, hover, caret, cursor.
     • present → everybody else. A badge: no chrome, no caret, no pointer,
                 and nothing to click, because there is nothing to choose.
   Same markup either way, so the two can never drift into two controls. */
/* ── WHERE THE X GOES ────────────────────────────────────────────────────
   Troy, 2026-08-26: *"I want this to follow industry-standard web design for
   how the X is placed for closing the modal … the X is in the upper right and
   the other stuff is a bit lower on the page, but we don't want to waste
   space."*

   🚨 THE X WAS A FLEX SIBLING, AND THAT IS THE WHOLE BUG. Sat in the row with
   `align-items:center`, it centred against the TALLEST thing in the head — and
   once the identity chip moved up here that is a 40px chip, not a 20px title.
   So the X floated at the optical middle of a 76px header: right, but not
   upper-right. Nothing was wrong with the rule; it was centring against
   something that had just got taller.

   Pinned to the corner instead, which is what every modern dialog does —
   Radix/shadcn (`absolute right-4 top-4`), Fluent, Material, Bootstrap. The X
   is a property of the DIALOG's corner, not a cell in the header's row, and
   taking it out of flow is what makes that true regardless of how tall the
   row beside it grows.

   ⚠️ AND IT COSTS NO HEIGHT — the point of "don't waste space". Removing the
   32px button from the flex row means the row's height is the chip alone, so
   the padding can come in and the head gets SHORTER while the X moves UP:

              before                     after
     head height   18+40+18 = 76px      15+40+13 = 68px   (−8px)
     X centre y    38px  (middle)       23px  (corner)
     row centre y  38px                 35px
                   ↑ identical, hence   ↑ X now reads 12px above the row

   The 60px right padding is the clearance the absolute X no longer reserves
   for itself: it spans 11–39px in from the right edge, so the chip stops at
   60 and keeps a 21px gap. Without it the chip slides under the X. */
#wkQaTimeOverlay .wk-qa-popup-head {
  position: relative;
  gap: 12px;
  padding: 15px 60px 13px 24px;
}
/* Pushes the identity to the right edge, instead of space-between spreading
   two children across the head. */
#wkQaTimeOverlay .wk-qa-popup-title { margin-right: auto; }
#wkQaTimeOverlay .wk-qa-popup-close {
  position: absolute; top: 9px; right: 11px;
  width: 28px; height: 28px; font-size: 19px;
}

.wk-qa-identity { flex: 0 1 auto; min-width: 0; max-width: 60%; }
.wk-qa-identity-trigger {
  width: auto; max-width: 100%; gap: 9px; padding: 5px 10px 5px 6px;
  border-radius: 999px; background: transparent; border-color: transparent;
}
.wk-qa-identity-trigger:hover { background: var(--bg, #f1f5f9); border-color: var(--border, #e5e7eb); }
.wk-qa-identity-trigger[aria-expanded="true"] { background: #fff; border-color: var(--c-blue, #3b82f6); }
.wk-qa-identity .wk-qa-team-avatar { flex: 0 0 30px; width: 30px; height: 30px; font-size: 11px; }
.wk-qa-identity .wk-qa-team-text { gap: 0; text-align: right; align-items: flex-end; }
.wk-qa-identity .wk-qa-team-name { font-size: 12.5px; font-weight: 650; }
.wk-qa-identity .wk-qa-team-meta { font-size: 10.5px; }
/* Avatar last, name to its left — the Microsoft/Google order, and it keeps the
   round mark hard against the corner where the eye looks for it. */
.wk-qa-identity .wk-qa-team-avatar { order: 2; }
.wk-qa-identity .wk-qa-team-text { order: 1; }
.wk-qa-identity .wk-qa-team-caret { order: 3; margin-left: -2px; }
/* Right-aligned and content-width: an absolute menu stretched left:0/right:0
   across a pill this narrow would come out ~140px wide. */
.wk-qa-team-menu--id { left: auto; right: 0; width: 320px; max-width: min(320px, 78vw); }

/* ── The badge state ── */
.wk-qa-identity[data-fixed] .wk-qa-identity-trigger {
  cursor: default; background: transparent; border-color: transparent;
  padding-right: 4px;
}
.wk-qa-identity[data-fixed] .wk-qa-identity-trigger:hover { background: transparent; border-color: transparent; }
.wk-qa-identity[data-fixed] .wk-qa-team-caret { display: none; }
/* :disabled greys native controls out; this is a statement of fact, not a
   control that has been switched off, so it keeps full contrast. */
.wk-qa-identity[data-fixed] .wk-qa-identity-trigger:disabled { opacity: 1; color: inherit; }
.wk-qa-identity[data-fixed] .wk-qa-team-name { color: var(--ink, #0f172a); }

/* Under ~560px the head cannot hold a title, a name, an address and an X.
   The name is the part that has to survive, so the address drops out. */
@media (max-width: 560px) {
  #wkQaTimeOverlay .wk-qa-popup-title { font-size: 14px; }
  .wk-qa-identity .wk-qa-team-meta { display: none; }
  .wk-qa-identity { max-width: 48%; }
  /* Same corner, tighter inset — the head's own padding shrinks with it, so
     the X stays hard against it instead of drifting inward. */
  #wkQaTimeOverlay .wk-qa-popup-head { padding: 13px 44px 11px 16px; }
  #wkQaTimeOverlay .wk-qa-popup-close { top: 7px; right: 7px; }
}

/* ── 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;
}

/* ══ …EXCEPT A CONTROL THAT OPENS ITS OWN GATE ════════════════════════════
   Tyler, 2026-08-27, moved `.wk-qa-said` back to the top, so it is no longer a
   child of #wkQaTimeGated and no longer needs an exemption there — it sits
   between the two gated blocks, outside both. #wkQaTimeGated is back on the
   plain container rule above.

   🚨 THE EXEMPTION MOVED TO #wkQaTimeProjectRow INSTEAD, and for the identical
   reason: that row now carries a ✨ which PICKS THE COMPANY as well as the
   project (_AI_PROGRAM.apply writes both), and this row is gated on a company
   being picked. Dimming it dead would lock the only key to its own gate — the
   exact bug the sentence plate had.

   🚨 THE DIM HAS TO BE PER-CHILD TO ACHIEVE THAT. `opacity` and `filter` on a
   parent CANNOT be undone by a child — a child cannot be more opaque than the
   box it is drawn into — so the container stays fully lit and each direct child
   is dimmed on its own, with `.wk-qa-labrow` (the label + its ✨) left out. The
   children do not overlap, so it looks identical.

   ⚠️ THE WORK-STREAM ✨ IS DELIBERATELY *NOT* EXEMPT. It lives in
   #wkQaTimeGated and it genuinely cannot answer until a project or area is
   chosen — there is nothing under nothing. #wkQaBudgetGated and #wkPpGated hold
   no such control either and keep the plain container rule. */
#wkQaTimeProjectRow[data-gated] {
  opacity: 1;
  filter: none;
  pointer-events: none;
}
#wkQaTimeProjectRow[data-gated] > *:not(.wk-qa-labrow) {
  opacity: 0.45;
  filter: saturate(0.6);
  transition: opacity .15s, filter .15s;
}
#wkQaTimeProjectRow[data-gated] > .wk-qa-labrow { pointer-events: auto; }
/* The label itself still has to read as not-yet-available; only the ✨ is live. */
#wkQaTimeProjectRow[data-gated] > .wk-qa-labrow > .wk-qa-label { opacity: 0.5; }

/* ══ THE SENTENCE PLATE, NOW THE FIRST QUESTION ═══════════════════════════
   It sits directly under the company field and above the project row, so it
   needs air on both sides — the 6px body gap alone read as "attached to the
   field above". */
.wk-qa-said { margin: 10px 0; }

/* ══ ONE ✨ PER FIELD ═════════════════════════════════════════════════════
   A label and its own AI button on one line. The button is deliberately small
   and quiet: ✨ Find the work up top is the headline action, and three equally
   loud sparkles would compete with it for the same press. */
.wk-qa-labrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
.wk-qa-labrow > .wk-qa-label { margin-bottom: 0; }
.wk-qa-fieldai {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.28);
  background: rgba(124, 58, 237, 0.07); color: #7c3aed;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer; line-height: 1.6;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.wk-qa-fieldai:hover:not(:disabled) {
  background: rgba(124, 58, 237, 0.14); border-color: rgba(124, 58, 237, 0.5);
}
.wk-qa-fieldai:disabled { opacity: .55; cursor: default; }
.wk-qa-fieldai.is-busy svg { animation: wkQaAiSpin 1.1s linear infinite; }
@keyframes wkQaAiSpin { to { transform: rotate(360deg); } }

/* ══ WHAT A FIELD-LEVEL ✨ CHOSE, AND WHY ═════════════════════════════════
   Same contract as the big plate's #wkQaTimeFindOut: never silent, and it says
   out loud when it fell back to name matching so a guess cannot read as an
   answer. Smaller, because it annotates one field rather than the form. */
.wk-qa-ainote {
  margin-top: 6px; padding: 7px 10px; border-radius: 8px;
  font-size: 11.5px; line-height: 1.45;
  background: #f8fafc; border: 1px solid #e5e7eb; color: #475569;
}
.wk-qa-ainote > b { color: #0f172a; }
.wk-qa-ainote > span { display: block; margin-top: 2px; color: #64748b; }
.wk-qa-ainote.is-ok { background: rgba(22, 163, 74, 0.06); border-color: rgba(22, 163, 74, 0.3); }
.wk-qa-ainote.is-warn { background: rgba(217, 119, 6, 0.07); border-color: rgba(217, 119, 6, 0.32); color: #92400e; }

/* ── THE DERIVED AREA, UNDER A PICKED PROJECT ────────────────────────────────
   Deliberately NOT a field and not a chip: a project's area is a property of
   the project, so this states it and offers nothing to click. Quieter than
   .wk-qa-ainote (no box) because it is not news — it is the other half of the
   answer you already gave, which the sheet used to keep to itself. The dot
   carries the area's own colour, the same hue that area wears everywhere. */
.wk-qa-derived {
  display: flex; align-items: center; gap: 7px;
  margin-top: 6px; padding: 0 2px;
  font-size: 11.5px; line-height: 1.5; color: #64748b;
}
.wk-qa-derived-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--wk-qa-derived-c, #94a3b8);
}
.wk-qa-derived-nm { font-weight: 650; color: #334155; }
.wk-qa-ainote.is-warn > span { color: #b45309; }

/* ══ A CATEGORY ROW ═══════════════════════════════════════════════════════
   Tyler, 2026-08-27: *"make sure selecting a category has a better design …
   you have 2 checks … more colors, more personality … easy to read what goes
   into each."*

   THE CARD IS THE WRAPPER, not the row button. The tick has to sit INSIDE the
   card and a <button> may not contain another button (Chrome hoists it out of
   the DOM and the click lands on nothing), so the two are siblings and the
   wrapper wears the border, the ground and the hover.

   🚨 EVERY COLOUR ON THIS ROW COMES FROM `--wk-tone`, SET INLINE BY THE
   RENDERER from WkAreas.categoryTone(). One definition, in wk-areas.js — a
   second copy here is how a chip and a report bar came to disagree about a
   hue. `--wk-tone-rgb` is the same colour for the alpha washes, because
   color-mix is not safe to depend on for the STRUCTURAL tints (it is used only
   where a plain fallback reads fine). */
.wk-qa-catrows { display: flex; flex-direction: column; gap: 6px; }
.wk-qa-catrow {
  --wk-tone: #64748b;
  --wk-tone-rgb: 100,116,139;
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border, #e5e7eb); border-radius: 11px;
  background: #fff; overflow: hidden;
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.wk-qa-catrow:hover { border-color: rgba(var(--wk-tone-rgb), .45); background: rgba(var(--wk-tone-rgb), .035); }
.wk-qa-catrow.is-selected {
  border-color: rgba(var(--wk-tone-rgb), .72);
  background: rgba(var(--wk-tone-rgb), .07);
  box-shadow: 0 1px 0 rgba(var(--wk-tone-rgb), .10), inset 3px 0 0 var(--wk-tone);
}

/* ── The one tick. There is no second mark anywhere on this row. ── */
.wk-qa-catrow-tick {
  position: relative; flex: 0 0 auto; width: 42px; padding: 0; margin: 0;
  border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: transparent;
  transition: color .12s, background .12s;
}
/* The circle is a ::before rather than a border on the button itself, so the
   TARGET stays 42px wide (a 19px ring is a miss on a touch screen) while the
   mark reads at 19px. */
.wk-qa-catrow-tick::before {
  content: ''; position: absolute; width: 19px; height: 19px;
  border: 1.6px solid #cbd5e1; border-radius: 50%;
  background: #fff; transition: border-color .12s, background .12s;
}
.wk-qa-catrow-tick svg { position: relative; z-index: 1; }
.wk-qa-catrow-tick:hover::before { border-color: var(--wk-tone); }
.wk-qa-catrow-tick:hover { color: rgba(var(--wk-tone-rgb), .55); }
.wk-qa-catrow-tick:focus-visible { outline: 2px solid var(--wk-tone); outline-offset: -3px; }
.wk-qa-catrow.is-selected .wk-qa-catrow-tick { color: #fff; }
.wk-qa-catrow.is-selected .wk-qa-catrow-tick::before {
  border-color: var(--wk-tone); background: var(--wk-tone);
}

/* ── The row body: mark, name, character, and what goes in here ── */
.wk-qa-catrow-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px 9px 2px;
  border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer;
}
.wk-qa-catrow-main:focus-visible { outline: 2px solid var(--wk-tone); outline-offset: -3px; border-radius: 9px; }
.wk-qa-catmark {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; margin-top: 1px;
  color: var(--wk-tone);
  background: rgba(var(--wk-tone-rgb), .11);
  box-shadow: inset 0 0 0 1px rgba(var(--wk-tone-rgb), .16);
}
.wk-qa-catmark svg { display: block; }
.wk-qa-catrow-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.wk-qa-catrow .wk-qa-plan-name {
  font-size: 13px; font-weight: 640; color: #0f172a; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-qa-catrow.is-selected .wk-qa-plan-name { color: #0b1220; }
/* The line of character, in the category's own ink at low strength — colour
   with a job, not decoration: it is the fastest thing on the row to recognise. */
/* Coloured, but UNDER the name — Tyler asked for personality and for subtle in
   the same breath, and a second line as loud as the first is neither. */
.wk-qa-catvibe {
  font-size: 11px; line-height: 1.4; font-weight: 500;
  color: rgba(var(--wk-tone-rgb), .8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* WHAT GOES IN HERE — the catalog's own sentence, the same one the model
   reads. One line normally; the whole thing on hover, focus or when picked.
   ⚠️ Animate max-height, NOT display/height:auto — a display flip cannot
   transition and a hard height would clip the second line of a long sentence
   on a narrow sheet. */
.wk-qa-cathint {
  font-size: 11px; line-height: 1.45; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-height: 0; opacity: 0; margin-top: 0;
  transition: max-height .16s ease, opacity .16s ease, margin-top .16s ease;
}
.wk-qa-catrow:hover .wk-qa-cathint,
.wk-qa-catrow.is-selected .wk-qa-cathint,
.wk-qa-catrow-main:focus-visible .wk-qa-cathint {
  max-height: 3.2em; opacity: 1; margin-top: 2px; white-space: normal;
}
/* A one-word state on the right (only "new", only in the suggested band —
   everywhere else the BAND says it and ninety chips saying the same thing on
   every row is the noise this replaced). */
.wk-qa-cattag {
  flex: none; align-self: center; margin-left: auto;
  padding: 2px 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--wk-tone); background: rgba(var(--wk-tone-rgb), .10);
  border: 1px solid rgba(var(--wk-tone-rgb), .22); white-space: nowrap;
}

/* ── The bands. Three, in the order a person needs them. ── */
.wk-qa-catgrp {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 7px; padding: 0 2px;
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #94a3b8;
}
.wk-qa-catgrp:first-child { margin-top: 4px; }
.wk-qa-catgrp-t { flex: 0 0 auto; }
.wk-qa-catgrp-n {
  flex: none; padding: 1px 7px; border-radius: 999px;
  background: #f1f5f9; color: #64748b; font-size: 9.5px; letter-spacing: .03em;
}
.wk-qa-catgrp::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--border, #e8ecf1);
}
/* ⚠️ THE SUGGESTED BAND HAS NO COLOUR OF ITS OWN. Tyler, 2026-08-27: *"we have
   the small AI button, keep the same design."* The ✨ AI pill in the toolbar
   (.wk-qa-fieldai — the app's one definition) is what says AI here; a second
   accent on the heading below it would be two voices saying one thing, which is
   the repetition 9afc3ab spent a commit removing. Neutral, like the band under
   it. The count keeps a faint tint only so the eye finds the top band first. */
.wk-qa-catgrp--sug .wk-qa-catgrp-n { background: rgba(124,58,237,.10); color: #7c3aed; }
.wk-qa-catgrp--used { color: #0d9488; }
.wk-qa-catgrp--used .wk-qa-catgrp-n { background: rgba(13,148,136,.10); color: #0d9488; }
/* The catalog band stays NEUTRAL on purpose: every row in it is unused, and
   colouring the heading would compete with the ninety coloured marks under
   it — which are the thing you are actually scanning. */
.wk-qa-catgrp--new { color: #94a3b8; }

/* ── The toolbar and the empty state ── */
/* 🚨 THE STICKY OFFSET MUST SWALLOW THE SCROLLER'S OWN TOP PADDING.
   .wk-qa-popup-body--scroll has padding:12px 18px, so with `top:0` the toolbar
   pinned 12px BELOW the scrollport edge and every band heading scrolled up into
   that 12px window and painted above the search box. The negative top pins it
   into the gap; the matching margin/padding keep it looking where it was. */
.wk-qa-cattools {
  position: sticky; top: -12px; z-index: 3; background: #fff;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: -12px 0 0; padding: 14px 0 12px;
}
.wk-qa-catsearch {
  flex: 1 1 200px; min-width: 160px; box-sizing: border-box;
  border: 1px solid #cbd5e1; border-radius: 9px; padding: 9px 12px;
  font: inherit; font-size: 13px; color: #0f172a; background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.wk-qa-catsearch::placeholder { color: #a3aec0; }
.wk-qa-catsearch:focus {
  outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.14);
}
.wk-qa-catmake { padding: 9px 13px; white-space: nowrap; border-radius: 9px; }
/* 🚨 THE AI PILL IS BORROWED WHOLE, NOT RESTYLED. Tyler: *"keep the same
   design."* So nothing here touches its padding, its size, its ink or its
   shape — only where it sits in this row. The harness asserts its computed
   colour, wash, edge, radius and weight against a field-level pill, so a size
   tweak dressed up as "fitting the row" fails the build. */
.wk-qa-cattools .wk-qa-fieldai { align-self: center; }
#wkQaWsPickerAiOut { margin: 0 0 10px; }
.wk-qa-catempty {
  padding: 30px 20px; text-align: center; font-size: 13px; font-weight: 600; color: #64748b;
}
.wk-qa-catempty span { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 500; color: #94a3b8; }

/* ── The header sub-line: which area, how many, how to work it ── */
#wkQaWsPickerSub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wk-qa-catsub-chip { display: inline-flex; }
.wk-qa-catsub-n {
  font-size: 11px; font-weight: 700; color: #64748b;
  padding: 2px 8px; border-radius: 999px; background: #f1f5f9;
}
.wk-qa-catsub-how { font-size: 11.5px; color: #94a3b8; }
/* Cancel sits alone on the left; the two answers stay together on the right. */
.wk-qa-popup-foot--cat #wkQaWsPickerCancel { margin-right: auto; }

/* ── Dark ──────────────────────────────────────────────────────
   ⚠️ BOTH SELECTORS, because this app has both: work.css keys 13 other rules
   off [data-theme="dark"] (the in-app toggle) while the media query catches
   only the "system" setting. Either one on its own is half a theme.

   Every category colour is an alpha wash over the host's ground, so nothing
   here touches a hue — only the neutrals move, plus one lift on the character
   line, which is the only tone that has to survive a dark ground. */
@media (prefers-color-scheme: dark) {
  .wk-qa-cattools { background: #131a26; }
  .wk-qa-catvibe { filter: saturate(1.1) brightness(1.45); }
  .wk-qa-catrow { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.10); }
  .wk-qa-catrow .wk-qa-plan-name,
  .wk-qa-catrow.is-selected .wk-qa-plan-name { color: #e8edf5; }
  .wk-qa-catrow-tick::before { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.22); }
  .wk-qa-cathint { color: #94a3b8; }
  .wk-qa-catsearch { background: rgba(255,255,255,.04); color: #e8edf5; border-color: rgba(255,255,255,.16); }
  .wk-qa-catgrp-n { background: rgba(255,255,255,.07); color: #94a3b8; }
}
[data-theme="dark"] .wk-qa-cattools { background: #131a26; }
[data-theme="dark"] .wk-qa-catvibe { filter: saturate(1.1) brightness(1.45); }
[data-theme="dark"] .wk-qa-catrow { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.10); }
[data-theme="dark"] .wk-qa-catrow .wk-qa-plan-name,
[data-theme="dark"] .wk-qa-catrow.is-selected .wk-qa-plan-name { color: #e8edf5; }
[data-theme="dark"] .wk-qa-catrow-tick::before { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.22); }
[data-theme="dark"] .wk-qa-cathint { color: #94a3b8; }
[data-theme="dark"] .wk-qa-catsearch { background: rgba(255,255,255,.04); color: #e8edf5; border-color: rgba(255,255,255,.16); }
[data-theme="dark"] .wk-qa-catgrp-n { background: rgba(255,255,255,.07); color: #94a3b8; }

/* ══ TOO MUCH SCROLLING ═══════════════════════════════════════════════════
   Tyler, 2026-08-27: *"too much scrolling on this popup."* Measured before
   touching anything (~/_pwverify/_ltcompact.cjs, 1440×900, company + area +
   category answered): the popup stood 977px tall inside an 852px window, so
   125px of it was always below the fold — and Category and Rate, the two
   fields you came here to answer last, were the 125px.

   🚨 EVERY RULE HERE IS SCOPED TO #wkQaTimeOverlay. `.wk-qa-popup-body`,
   `.wk-qa-label` and `.wk-qa-input` dress ELEVEN other quick-add popups; the
   one that got too tall is this one, and tightening the shared rules to fix it
   would silently re-space all of them.

   ⚠️ NOTHING IS REMOVED — no field, no control, no sentence. This is spacing,
   one text row on the sentence box, and a label that an answered card already
   says out loud. */
#wkQaTimeOverlay .wk-qa-popup-body { padding: 14px 20px 15px; gap: 4px; }
#wkQaTimeOverlay .wk-qa-popup-body .wk-qa-label { margin-top: 9px; }
#wkQaTimeOverlay .wk-qa-popup-body .wk-qa-gated > .wk-qa-row { margin-top: 9px; }
#wkQaTimeOverlay .wk-qa-input,
#wkQaTimeOverlay .wk-qa-select { padding: 8px 11px; }
#wkQaTimeOverlay .wk-qa-said { padding: 10px 12px 11px; margin: 4px 0 2px; gap: 5px; }
#wkQaTimeOverlay .wk-qa-popup .wk-qa-said textarea.wk-qa-input { min-height: 52px; }
#wkQaTimeOverlay .wk-qa-chosen { padding: 7px 10px; gap: 9px; }
#wkQaTimeOverlay .wk-qa-chosen-mark .wk-qa-rowlogo { width: 24px; height: 24px; border-radius: 7px; }
/* ══ AN AREA'S MARK ON AN ANSWERED CHIP IS A WASH, NOT A SLAB ═════════════
   `.wk-qa-rowlogo--area` paints `background: currentColor` with a white glyph
   — right in the MENU, where it stands beside real company logos and has to
   read as their sibling. On the answered chip it stood beside the category's
   tinted mark one field below and read as a black tile: two treatments of the
   same idea, four pixels apart. Scoped to the chip, so the menu keeps its own.
   ⚠️ Only `color` is available (written inline by _qaMarkHtml), so the wash is
   mixed off currentColor with a plain fallback where color-mix is missing. */
#wkQaTimeOverlay .wk-qa-chosen-mark .wk-qa-rowlogo--area {
  background: rgba(100, 116, 139, .11);
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, .18);
}
#wkQaTimeOverlay .wk-qa-chosen-mark .wk-qa-rowlogo--area svg { color: inherit; }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  #wkQaTimeOverlay .wk-qa-chosen-mark .wk-qa-rowlogo--area {
    background: color-mix(in srgb, currentColor 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
  }
}
#wkQaTimeOverlay .wk-qa-ainote { margin-top: 5px; }
/* 🚨 AN ANSWERED FIELD DOES NOT NEED ITS FILTER. The Areas | Our own projects
   strip narrows a LIST — and once the chip is up that list is not on screen at
   all, so the strip is 40px of controls for a decision already made. It comes
   back with the search box (pressing the chip reopens it), and it is done in
   CSS off the chip's own [hidden] so `_refreshLogTimeAreaMode` keeps sole
   ownership of when the strip is allowed to exist at all.
   ⚠️ :has() only — where it is unsupported the strip simply stays, which is
   the old behaviour and not a broken one. */
#wkQaTimeProjectRow:has(#wkQaTimeProgramChosen:not([hidden])) .wk-qa-scope { display: none; }
#wkQaTimeOverlay .wk-qa-tasksplit { margin-top: 6px; }
/* THE DAY-GRAIN DOORS. work-day-log.css owns how they look; this sets only how
   much room they take INSIDE this popup, so the two files cannot fight and a
   peer editing the hero keeps its own design. 184px of the 977 was these
   three. */
#wkQaTimeOverlay .wkdl-launch { padding: 11px 13px 10px; gap: 11px; border-radius: 13px; }
#wkQaTimeOverlay .wkdl-launch-ic { width: 34px; height: 34px; border-radius: 10px; }
#wkQaTimeOverlay .wkdl-launch-t b { font-size: 15.5px; }
#wkQaTimeOverlay .wkdl-launch-s { margin-top: 2px; }
#wkQaTimeOverlay .wkdl-launch-bul { margin-top: 6px; }
#wkQaTimeOverlay .wkdl-launch-go { height: 32px; }
#wkQaTimeOverlay .wkdl-launch-or { margin: 9px 0 3px; }
#wkQaTimeOverlay .wk-qa-tasksplit { padding: 7px 9px; }
#wkQaTimeOverlay .wk-qa-tasksplit-hd { margin-bottom: 4px; }
#wkQaTimeOverlay .wk-qa-tasksplit-row { margin: 2px 0; }
#wkQaTimeOverlay .wk-qa-tasksplit-hrs { padding: 4px 7px; }
/* 🚫 AND NOT BY SCROLLING THE BODY. The obvious fix for a popup taller than the
   window is `max-height` + `overflow-y:auto` on the body — and the base rule
   says, in as many words, why not: every typeahead menu in here is absolutely
   positioned inside the body and a scroll container would CLIP it. A company
   list you cannot see the bottom of is a worse bug than a popup you scroll. So
   the height is won back by spacing, and on a genuinely short window the
   overlay still scrolls the whole card the way it always has. */
@media (max-height: 800px) {
  #wkQaTimeOverlay .wk-qa-popup-body { padding: 11px 18px 12px; gap: 3px; }
  #wkQaTimeOverlay .wk-qa-popup-body .wk-qa-label { margin-top: 7px; }
  #wkQaTimeOverlay .wk-qa-said { padding: 8px 11px 9px; }
  #wkQaTimeOverlay .wkdl-launch { padding: 9px 12px 9px; }
  #wkQaTimeOverlay .wkdl-launch-bul { display: 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; }
/* Room at the right end of the trigger for the CARET — and only the caret. The
   × that used to sit beside it is gone (Tyler, 2026-08-27: *"no x, things like
   that"*), so the field stops reserving 30px for a control that no longer
   exists. */
.wk-qa-task-trigger { padding-right: 34px; }
.wk-qa-task-text {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: #94a3b8; overflow: hidden; white-space: nowrap;
}
.wk-qa-task-text.is-set { color: #0f172a; font-weight: 600; }
.wk-qa-task-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ══ THE MARK, ON THE CLOSED FIELD ═══════════════════════════════════════
   Tyler, 2026-08-27: *"I want the icon when the category is selected."* Same
   glyph, same tone and the same plate treatment as the row in the sheet — one
   definition in wk-areas.js, written inline by _wsTriggerMarkHtml, so the
   thing you recognised while picking is the thing you see afterwards. */
.wk-qa-task-mark {
  --wk-tone: #64748b; --wk-tone-rgb: 100,116,139;
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px;
  color: var(--wk-tone);
  background: rgba(var(--wk-tone-rgb), .11);
  box-shadow: inset 0 0 0 1px rgba(var(--wk-tone-rgb), .16);
}
.wk-qa-task-mark svg { display: block; }
.wk-qa-task-mark:empty { display: none; }
/* pointer-events:none so the chevron is part of the field, not a dead target
   sitting on top of the button that opens it. */
.wk-qa-task-caret {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; pointer-events: none;
}

/* ── 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; }

/* (The work-stream picker's own rows are .wk-qa-catrow, above — the
   checkbox-beside-the-row markup these rules dressed is gone.) */

/* ── 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; }
/* ══ ONE COLOUR PER MEANING, AND AN ANSWER IS NOT AN ACTION ════════
   Tyler, 2026-08-27: *"the colors are toio repetative."* He was looking at a
   popup where the company chip, the sentence plate, both answered-field chips,
   the Areas/Projects strip and ✨ Find the work were ALL the same lavender — so
   the tint had stopped meaning anything and the one control it should have been
   pointing at was camouflaged by five things that merely sat there.

   The palette this popup keeps now:
     · NEUTRAL (white card, slate hairline, near-black ink) — structure, and
       every question you have already answered.
     · INDIGO — ✨ AI, and nothing else. ✨ Find the work and the per-field ✨
       pills are the only indigo above the fold, so they read as one family.
     · GREEN — the commit, in the foot. Unchanged.
     · VIOLET — "Log my whole day", which is a different GRAIN of thing and is
       only ever on screen where the whole day is actually on offer.
   Adding a sixth tinted box to this popup means taking one away.

   An answered field is a STATEMENT. It gets a white card with the company's
   real mark on it, not a coloured pill that competes with the thing you are
   supposed to press next. */
.wk-qa-chosen {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 10px; margin-bottom: 2px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--card, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
/* ══ PRESS THE CARD, NOT THE WORD ════════════════════════════════════════
   Tyler, 2026-08-27: *"you shouldn't have to press change, you should be able
   to just click the dropdown again."* So the whole card is the target and it
   has to LOOK like one: a pointer, a hover that lifts, and its "Change" pulling
   forward with it so the word reads as the card's own label rather than as the
   only live pixel on the row. */
.wk-qa-chosen.is-reopen { cursor: pointer; }
.wk-qa-chosen.is-reopen:hover {
  border-color: #c7d2fe; background: #fbfcff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 16px -10px rgba(67, 56, 202, .32);
}
.wk-qa-chosen.is-reopen:hover .wk-qa-chosen-change { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.wk-qa-chosen.is-reopen:active { box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.wk-qa-chosen.is-reopen:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
/* A card that appears where a search box was should arrive, not blink. */
.wk-qa-chosen:not([hidden]) { animation: wkQaChipIn .18s ease both; }
@keyframes wkQaChipIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
.wk-qa-chosen-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--ink, #0f172a); word-break: break-word; }
/* The company's real mark / the area's glyph, carried onto the chosen chip so
   picking is not the moment the logo disappears. Empty when there is nothing
   to show — :empty collapses it so the name does not sit behind a gap. */
.wk-qa-chosen-mark { flex: 0 0 auto; display: inline-flex; align-items: center; }
.wk-qa-chosen-mark:empty { display: none; }
.wk-qa-chosen-mark .wk-qa-rowlogo { width: 28px; height: 28px; border-radius: 8px; }
/* A real mark gets a white plate, a hairline and room to breathe; the initials
   fallback keeps its tinted tile. `_qaLogoHtml` writes no class to tell them
   apart — it swaps the CONTENTS — so the selector asks about the contents.
   `:has()` is already load-bearing in this file (see `.wk-qa-ta-all`). */
.wk-qa-chosen-mark .wk-qa-rowlogo:has(img) {
  background: #fff; box-shadow: inset 0 0 0 1px var(--border, #e2e8f0);
}
.wk-qa-chosen-mark .wk-qa-rowlogo img { padding: 2px; }
.wk-qa-chosen-open {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border, #e2e8f0); background: var(--card, #fff);
  color: var(--ink3, #94a3b8);
  transition: background .14s, color .14s, border-color .14s;
}
.wk-qa-chosen-open[hidden] { display: none !important; }
.wk-qa-chosen-open:hover { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
/* Quiet until you go looking for it. "Change" is the escape hatch from an
   answer that is already right — an underlined indigo link made the settled
   state look unsettled. */
.wk-qa-chosen-change { flex: 0 0 auto; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink2, #64748b); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; padding: 4px 9px; transition: background .14s, color .14s, border-color .14s; }
.wk-qa-chosen-change:hover { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }

/* ══ WHAT YOU WORKED ON — the plate at the top of Log Time ═══════════
   The sentence and the number are what a person actually carries to this
   form; the client / project / work-stream fields under them are routing.
   Tinted and boxed so the eye lands here first rather than on the Client
   typeahead, which is what it used to land on. */
/* It still has to be the first thing the eye lands on, but it earns that by
   being RAISED rather than by being tinted — a white card with a shadow reads
   as nearer than the flat body around it, and it does not spend the indigo that
   ✨ Find the work inside it needs. */
.wk-qa-said {
  display: flex; flex-direction: column; gap: 6px;
  padding: 13px 14px 14px; margin-bottom: 4px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 12px;
  background: var(--card, #fff);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05), 0 6px 18px -12px rgba(15, 23, 42, .18);
}
.wk-qa-said .wk-qa-label { margin-top: 0; }
/* ⚠ FIGURE AND GROUND SWAP INSIDE THE PLATE. On a tinted plate the white
   textarea was the bright thing; on a white one it has to be the recessed
   thing, or the biggest input in the popup has no edges at all. */
.wk-qa-popup .wk-qa-said textarea.wk-qa-input { min-height: 74px; background: var(--bg, #f8fafc); }
.wk-qa-popup .wk-qa-said textarea.wk-qa-input:focus { background: var(--card, #fff); }
.wk-qa-said-row { align-items: flex-end; gap: 10px; }
/* Hours and Date are numbers, not sentences — they must not each take a third
   of the row and push the ✨ button off the end on a narrow popup. */
.wk-qa-said-num { flex: 0 0 118px; max-width: 118px; }
/* Two controls now — the mic and ✨ Find the work, side by side. `wk-qa-row-col`
   is a COLUMN by default (label over input); this row has no label, so the two
   buttons share the width instead of stacking. */
.wk-qa-said-go { flex: 1 1 auto; flex-direction: row; gap: 8px; align-items: stretch; }

/* ══ THE MIC ═══════════════════════════════════════════════════════════
   Deliberately quieter than ✨ Find the work beside it and the same height, so
   the pair reads as "how the sentence gets in" then "what the sentence means".
   It is square: an icon-only control with a text-button's padding reads as a
   button whose label failed to load. */
.wk-qa-mic {
  flex: 0 0 auto; width: 42px; display: grid; place-items: center;
  border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border, #e5e7eb); background: var(--card, #fff);
  color: var(--ink2, #64748b);
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.wk-qa-mic[hidden] { display: none !important; }
.wk-qa-mic:hover { border-color: #a5b4fc; background: #eef2ff; color: #4338ca; }
.wk-qa-mic:active { transform: scale(.96); }
/* LIVE is not a hover state and must not look like one. While it is listening
   the button is red and it pulses, because the one thing a person needs to know
   about a microphone is whether it is on. */
.wk-qa-mic.is-live {
  border-color: #fca5a5; background: #fef2f2; color: #dc2626;
  animation: wkMicPulse 1.5s ease-in-out infinite;
}
@keyframes wkMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .28); }
  50%      { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}

.wk-qa-find {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 10px 14px; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 650; line-height: 1.1;
  border: 1px solid #c7d2fe; background: #eef2ff; color: #4338ca;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.wk-qa-find:hover { background: #e0e7ff; border-color: #a5b4fc; }
.wk-qa-find:active { transform: scale(.98); }
.wk-qa-find:disabled { cursor: default; opacity: .7; }
.wk-qa-find svg { flex: 0 0 auto; }
/* A ✨ that dead-ends is worse than no ✨ — while it reads, it says so. */
.wk-qa-find.is-busy svg { animation: wkFindSpin 1.1s linear infinite; }
@keyframes wkFindSpin { to { transform: rotate(360deg); } }

.wk-qa-findout {
  margin-top: 2px; padding: 9px 11px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.45;
  border: 1px solid var(--border, #e5e7eb); background: var(--bg, #f8fafc);
  color: var(--ink2, #64748b);
}
.wk-qa-findout[hidden] { display: none !important; }
.wk-qa-findout b { color: var(--ink, #0f172a); }
.wk-qa-findout i { font-style: normal; color: var(--ink3, #94a3b8); }
.wk-qa-findout span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink3, #94a3b8); }
.wk-qa-findout.is-ok { border-color: var(--c-green-soft, #a7f3d0); background: var(--c-green-bg, #ecfdf5); }
.wk-qa-findout.is-ok b { color: var(--c-green, #059669); }
.wk-qa-findout.is-warn { border-color: #fde68a; background: #fffbeb; color: #92400e; }

/* ══ PROJECTS / AREAS — a filter over one flat list ════════════════
   Not a tab strip and not a tree: Everything is the default and picking a
   side only narrows the same list. Hidden entirely on a client, where there
   is one kind of thing in it. */
/* ⚠ A SWITCH, DRAWN AS A SWITCH. Two indigo-when-on pills said "these are two
   buttons and one of them is lit"; a track with a raised knob says "this is one
   control with two positions", which is what it is. It also gets the strip out
   of the indigo budget — see the palette note above `.wk-qa-chosen`. */
.wk-qa-scope {
  display: inline-flex; gap: 2px; margin: 2px 0 8px; flex-wrap: wrap;
  padding: 3px; border-radius: 999px;
  background: var(--bg, #f1f5f9); border: 1px solid var(--border, #e2e8f0);
}
.wk-qa-scope[hidden] { display: none !important; }
.wk-qa-scope-b {
  padding: 4px 13px; border-radius: 999px; cursor: pointer;
  font-size: 11.5px; font-weight: 650; line-height: 1.4;
  border: 1px solid transparent; background: transparent;
  color: var(--ink2, #64748b);
  transition: background .14s, color .14s, box-shadow .14s;
}
.wk-qa-scope-b[hidden] { display: none !important; }
.wk-qa-scope-b:hover { color: var(--ink, #0f172a); }
.wk-qa-scope-b.is-on {
  background: var(--card, #fff); color: var(--ink, #0f172a);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .10);
}

/* The browse door. Focus filters by what is already typed, which is right
   while you type and wrong when you want to see everything. */
.wk-qa-ta-all {
  position: absolute; top: 0; right: 0; height: 100%; width: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink3, #94a3b8);
  cursor: pointer; border-radius: 0 8px 8px 0;
}
.wk-qa-ta-all:hover { color: #4338ca; }
.wk-qa-typeahead:has(.wk-qa-ta-all) .wk-qa-ta-input { padding-right: 36px; }

/* ── 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; }
/* Take-it-out, not close. Quiet until you go near it. */
.wk-qa-tasksplit-rm {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: #cbd5e1; cursor: pointer;
  transition: color .14s, background .14s;
}
.wk-qa-tasksplit-rm:hover { color: #dc2626; background: rgba(220, 38, 38, .09); }
.wk-qa-tasksplit-rm:focus-visible { outline: 2px solid #dc2626; outline-offset: -2px; }
.wk-qa-tasksplit-rm svg { display: block; }
/* The mark on a split row is smaller than the field's — it is a reminder of
   which row you are typing hours into, not the answer itself. */
.wk-qa-tasksplit-row .wk-qa-task-mark { width: 21px; height: 21px; border-radius: 6px; }
.wk-qa-tasksplit-row .wk-qa-task-mark svg { width: 12px; height: 12px; }

/* ── 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; } }

/* =========================================================   REPORTS — Better subpanel layouts
   ================================================================ */
/* Report sub-panels: consistent spacing */
[data-wk-panel="reports"] .ph-sub > .ax-cards-row { margin-bottom: 14px; }
[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;
}

/* Grants sidebar badge: dim when zero is hidden but keep a consistent colour when present */
#wkSidebarGrants .ph-sb-badge {
  background: color-mix(in srgb, var(--c-blue, #3A86FF) 18%, transparent);
  color: var(--c-blue, #3A86FF);
}

/* ═══════════════════════════════════════════════════════════
   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); }
/* ══ A COMPANY ROW ═════════════════════════════════════════
   Tyler, 2026-09-02: *"there should also be an option to select a company if I
   want to look at a company and see all of their projects for that company."*
   It is the SAME row component as a project — same logo, same two lines —
   because it is the same kind of press. What separates it is a left rule in the
   company's own accent and the caption above it, not a second design. */
.wt-dropdown-item.wk-pp-opt--co {
  border-left: 3px solid color-mix(in srgb, var(--c-blue, #0f62fe) 45%, transparent);
}
.wt-dropdown-item.wk-pp-opt--co .wk-pp-opt-name { font-weight: 700; }
.wt-dropdown-item.wk-pp-opt--co.is-active { border-left-color: currentColor; }
.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;
}

/* ─────────────────────────────────────────────────────────────────
   PROJECTS ▸ OVERVIEW right rail
   Three cards: Gone Quiet, Late & Due This Week, Open Work by Person.
   Every one of them hides itself when it has nothing to say, so the
   [hidden] partner below is load-bearing — without it a card with an
   empty body sits there wearing its accent bar and its own
   `.wk-support-body:empty::after { content: 'Loading…' }`.
   ───────────────────────────────────────────────────────────────── */
.wk-support-module--wide { grid-column: 1 / -1; }
.wk-support-module[hidden] { display: none !important; }
.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;
}
/* These three run to their own cap (10 / 8 / 6 rows) rather than into a
   nested 260px scroller — the rail itself is sticky and scrolls. */
#progDue, #progLoadByPerson, #progStalled { max-height: none; }

/* ── Deadlines Ahead ─────────────────────────────── */
.wk-upcoming-ms { display: flex; flex-direction: column; gap: 6px; }
.wk-ums-sect {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 2px 2px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border-s, #eef2f6);
}
.wk-upcoming-ms > .wk-ums-sect:first-child { margin-top: 0; }
.wk-ums-sect-t {
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #64748b;
}
.wk-ums-sect-n {
  font-size: 10px; font-weight: 700; color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
/* Two columns, not three. The old 90px date column printed the identical
   ISO string on every row and left ~140px for the milestone name. */
.wk-ums-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 9px 11px;
  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-mid { min-width: 0; }
.wk-ums-label {
  font-size: 13px; font-weight: 600; color: #0f172a; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* A blocked deliverable still carries a due date, so it lands in this list
   looking like any other row. The flag is the difference between "nobody has
   got to it" and "somebody cannot". */
.wk-ums-flag {
  flex-shrink: 0; padding: 1px 6px; border-radius: 999px;
  background: #fee2e2; color: #b91c1c;
  font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  align-self: center;
}
.wk-ums-prog {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; color: #64748b; margin-top: 3px; min-width: 0;
}
.wk-ums-date {
  font-weight: 700; color: #475569; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.wk-ums-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-ums-days {
  padding: 3px 9px; 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; }
.wk-ums-more {
  margin-top: 8px; text-align: center;
  font-size: 11px; color: #94a3b8;
}

/* ── Open Work by Person ─────────────────────────── */
.wk-pl-row {
  /* The value column is FIXED, not auto: an auto column is wider on the rows
     that carry a "3 late" pill, which shortens their track and makes the
     bars incomparable — a person with 9 open drew a SHORTER bar than one
     with 7. Same track on every row or the chart lies. */
  display: grid; grid-template-columns: 86px 1fr 66px; align-items: center; gap: 8px;
  padding: 5px 2px;
}
.wk-pl-name {
  font-size: 12px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-pl-track {
  height: 7px; border-radius: 999px; background: #eef2f6; overflow: hidden;
}
.wk-pl-fill { display: block; height: 100%; border-radius: 999px; transition: width .35s var(--ease-spring, ease); }
.wk-pl-val {
  display: flex; align-items: baseline; gap: 6px; justify-content: flex-end;
  font-size: 12px; font-weight: 700; color: #0f172a;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wk-pl-late {
  font-size: 10px; font-weight: 700; color: #b45309;
  background: #fef3c7; border-radius: 999px; padding: 1px 6px;
}
.wk-pl-row.is-unassigned .wk-pl-name { color: #64748b; font-style: italic; }

/* ── Gone Quiet ──────────────────────────────────── */
.wk-quiet-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 6px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  cursor: pointer; transition: all .15s;
}
.wk-quiet-row:last-child { margin-bottom: 0; }
.wk-quiet-row:hover { border-color: #fcd34d; background: #fffbeb; box-shadow: 0 2px 8px rgba(180,83,9,.08); }
.wk-quiet-mid { min-width: 0; }
.wk-quiet-name {
  font-size: 12px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-quiet-sub {
  font-size: 11px; color: #64748b; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-quiet-age {
  padding: 3px 9px; border-radius: 999px;
  background: #fef3c7; color: #92400e;
  font-size: 11px; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* ════════════════════════════════════════════════════════════════════
   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; }
.wk-prog-sc-stack .ax-cards-row { border-bottom: 1px solid #f1f5f9; }
.wk-prog-sc-stack .ax-cards-row:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════
   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;
}
/* Narrow: the count drops under the chips rather than squeezing them. */
@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 { 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; }
/* Trim the card down to a health tile: header + status only. */

/* 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; }
}

/* ════════════════════════════════════════════════════════════════════
   STRIP TOP SCORECARD ROWS on Programs/Projects/Tasks pages.
   Per the design direction these pages are moving to flat card grids;
   the top "by status" scorecards are noise. The icon-only filter button
   in each panel head still provides filtering.
   ════════════════════════════════════════════════════════════════════ */
.ph-sub[data-subpanel="prog-overview"] > .ax-cards-row {
  display: none !important;
}
/* 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));
}

/* =========================================================   ENHANCED SIDEBAR HOVER EFFECTS (left side view)
   ================================================================ */
.ph-sb-item {
  transition: background .18s ease, box-shadow .18s ease, color .18s ease,
              transform .18s var(--ease-spring, ease), border-color .18s ease;
}
.ph-sb-item:hover {
  background: color-mix(in srgb, var(--c-blue, #3b82f6) 6%, #fff);
  transform: translateX(2px);
  color: var(--c-blue, #3b82f6);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--c-blue, #3b82f6) 40%, transparent);
}
.ph-sb-item:hover .ph-sb-icon svg { stroke: var(--c-blue, #3b82f6); }
.ph-sb-icon svg { transition: stroke .18s ease, transform .18s var(--ease-spring, ease); }
.ph-sb-item:hover .ph-sb-icon svg { transform: scale(1.12); }
.ph-sb-item:active { transform: translateX(1px) scale(.97); transition-duration: .07s; }
.ph-sb-item.is-active {
  background: color-mix(in srgb, var(--c-blue, #3b82f6) 10%, #fff);
  box-shadow: inset 3px 0 0 var(--c-blue, #3b82f6), 0 2px 10px rgba(0,0,0,.05);
  color: var(--c-blue, #3b82f6);
}
.ph-sb-item.is-active .ph-sb-icon svg { stroke: var(--c-blue, #3b82f6); }

/* Top pill nav buttons — richer hover */
.ph-nav-btn {
  transition: background .15s ease, color .15s ease, transform .15s var(--ease-spring, ease);
}
.ph-nav-btn:hover { transform: translateY(-1px); }
.ph-nav-btn:active { transform: scale(.95); transition-duration: .07s; }

/* 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;
}

/* 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; }
/* Same squeeze once a list-view card gets narrow. */
@media (max-width: 1180px) {
  .gl-view-list .wk-goal-kind > span { display: none; }
  .gl-view-list .wk-goal-kind { padding: 3px 5px; }
}
/* One column once two would be narrower than the content needs. */
@media (max-width: 900px) {
  .gl-view-grid2 .wk-focus-list { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────
   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; }

/* ══════════════════════════════════════════════════════════════
   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) — the ONE search box in the Work hub.
   Lives inside the Home tab's "What are you trying to do?" command bar
   (.os-command-bar), NOT above the pill nav. It used to be a second, bigger
   bar pinned to the top of every tab; that one is gone.
   Searches tasks, projects, clients, people, programs, grants — and opens
   showing everything the moment you click it, before you type a character.

   🚨 THE CONTAINING-BLOCK TRAP, which is why the markup sits where it sits.
   .wk-gs-results is position:fixed. transform / filter / backdrop-filter /
   perspective / contain on ANY ancestor makes that ancestor the containing
   block for fixed descendants, so the panel would resolve against that box
   and — if the box also clips — never be seen at any z-index. That is
   exactly what .ph-nav-wrap (backdrop-filter + overflow:hidden) did, and it
   is why this was never nested there. .os-command-bar sets neither, and
   .os-cmd-btn's backdrop-filter is on a SIBLING. Assert it, don't assume it:
   walk the ancestors and check getComputedStyle().
   ================================================================ */
.wk-gs {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  /* Its own card, for any host that is not the command bar. Deliberately NO
     backdrop-filter (see above). */
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248,250,252,0.95));
  margin-bottom: 10px;
}

/* -- Home variant: a white pill sitting on the command bar's indigo
      gradient. The command bar is the card, so this drops its own shadow
      scale and the whole pill -- not the bare input -- takes the focus ring. */
.wk-gs--home {
  gap: 8px;
  padding: 5px 8px 5px 12px;
  border-color: rgba(255,255,255,.45);
  border-radius: 10px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 2px 8px rgba(15,23,42,.14);
  margin: 0 0 14px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.wk-gs--home:focus-within {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.30), 0 2px 10px rgba(15,23,42,.18);
}
/* The pill already reads as a field; a second bordered box inside it does
   not. Flatten the input and let the wrapper carry the chrome. */
.wk-gs--home input[type="text"] {
  background: transparent; box-shadow: none; border-color: transparent;
  padding: 7px 2px; font-size: 13.5px;
}
.wk-gs--home input[type="text"]:focus {
  border-color: transparent; box-shadow: none;
}
.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; }
/* 🚨 display:block on BOTH. They are <span>s, and on an inline box
   overflow/text-overflow are inert — so the ellipsis never truncated and the
   sub-line ran on straight after the title ("…Internal TeamVisionOne • active").
   Never visible before now because this panel had no markup to render into. */
.wk-gs-row-title {
  display: block;
  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 {
  display: block;
  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));
}

/* ── Scrollbars, everywhere ──
   Panels across this app hid their scrollbars (scrollbar-width:none /
   ::-webkit-scrollbar{display:none}), so a list that continued below the fold
   gave no hint it did. Every inner scroller in the Work app now shows a real,
   grabbable bar. Scoped to this page's body so the rule outranks the
   single-class hides without having to chase each one, and it can't leak into
   other apps that share these class names.
   Horizontal chip strips (the nav pills, the scorecard row) stay clean — a bar
   under a row of pills is noise, not information. */
/* !important is deliberate: this overrides roughly a dozen individual
   scrollbar-width:none / ::-webkit-scrollbar{display:none} rules spread across
   work.css and work-mobile.css, some of which load after this block. Beating
   them one selector at a time would rot the moment another one is added. */
/* Weight matches the page bar (base.css ~L33: 16px track, .4 thumb) so an
   inner panel reads as the same piece of hardware, one notch narrower. The
   first pass at this shipped 11px with an 8%-alpha track and a #b6c2d2 thumb
   inset 2px — about 7px of pale blue on near-white. It was a hairline you
   couldn't find, let alone grab, which is why it kept coming back as "there
   is still no scrollbar." Track alpha and thumb contrast are the whole point
   here; don't tune them back down. */
body[data-page-id="work-hub"] * { scrollbar-width: auto !important; scrollbar-color: rgba(15,23,42,.45) rgba(15,23,42,.07); }
body[data-page-id="work-hub"] ::-webkit-scrollbar {
  display: block !important; width: 14px !important; height: 14px !important; background: transparent;
}
body[data-page-id="work-hub"] ::-webkit-scrollbar-track {
  background: rgba(15,23,42,.07);
  border-radius: 999px;
}
body[data-page-id="work-hub"] ::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,.42); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
  min-height: 40px; min-width: 40px;
}
body[data-page-id="work-hub"] ::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.58); background-clip: content-box; }
body[data-page-id="work-hub"] ::-webkit-scrollbar-thumb:active { background: rgba(15,23,42,.72); background-clip: content-box; }
body[data-page-id="work-hub"] ::-webkit-scrollbar-corner { background: transparent; }
/* Keep the pill/chip rows bar-free — they scroll sideways by design, and a
   15px bar under a row of pills steals height from a fixed-height row.
   These have to be repeated from base.css's exemption list: the `body[…] *`
   rule above is (0,1,1) and outranks a bare `.ax-cards-row` (0,1,0), so
   base.css's copy loses inside this app. Vertical scrollers never go here. */
body[data-page-id="work-hub"] .ph-nav,
body[data-page-id="work-hub"] .ax-cards-row,
body[data-page-id="work-hub"] .wk-pm-tabs,
body[data-page-id="work-hub"] .prog-nav-tabs,
body[data-page-id="work-hub"] .pb-tabs,
body[data-page-id="work-hub"] .wdp-grant-tab-bar,
body[data-page-id="work-hub"] .bk-apply-bar,
body[data-page-id="work-hub"] .os-command-actions { scrollbar-width: none !important; }
body[data-page-id="work-hub"] .ph-nav::-webkit-scrollbar,
body[data-page-id="work-hub"] .ax-cards-row::-webkit-scrollbar,
body[data-page-id="work-hub"] .wk-pm-tabs::-webkit-scrollbar,
body[data-page-id="work-hub"] .prog-nav-tabs::-webkit-scrollbar,
body[data-page-id="work-hub"] .pb-tabs::-webkit-scrollbar,
body[data-page-id="work-hub"] .wdp-grant-tab-bar::-webkit-scrollbar,
body[data-page-id="work-hub"] .bk-apply-bar::-webkit-scrollbar,
body[data-page-id="work-hub"] .os-command-actions::-webkit-scrollbar { display: none !important; height: 0 !important; width: 0 !important; }
/* The left rail is vertical on desktop (it gets a bar) and a sideways pill
   strip only under 900px (work-mobile.css) — exempt at that width only. */
@media (max-width: 900px) {
  body[data-page-id="work-hub"] .ph-sidebar { scrollbar-width: none !important; }
  body[data-page-id="work-hub"] .ph-sidebar::-webkit-scrollbar { display: none !important; height: 0 !important; }
}

@media (prefers-color-scheme: dark) {
  body[data-page-id="work-hub"] * { scrollbar-color: rgba(226,232,240,.38) rgba(255,255,255,.08); }
  body[data-page-id="work-hub"] ::-webkit-scrollbar-track { background: rgba(255,255,255,.08); }
  body[data-page-id="work-hub"] ::-webkit-scrollbar-thumb { background: rgba(226,232,240,.34); background-clip: content-box; }
  body[data-page-id="work-hub"] ::-webkit-scrollbar-thumb:hover { background: rgba(226,232,240,.5); background-clip: content-box; }
  body[data-page-id="work-hub"] ::-webkit-scrollbar-thumb:active { background: rgba(226,232,240,.64); background-clip: content-box; }
  .tp-subnotes-copy { background: #1f2430; border-color: #333b4d; color: #cbd5e1; }
  .tp-subnotes-copy:hover { background: #2a3140; color: #f3f4f6; }
}
:root[data-theme="dark"] body[data-page-id="work-hub"] * { scrollbar-color: rgba(226,232,240,.38) rgba(255,255,255,.08); }
:root[data-theme="dark"] body[data-page-id="work-hub"] ::-webkit-scrollbar-track { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] body[data-page-id="work-hub"] ::-webkit-scrollbar-thumb { background: rgba(226,232,240,.34); background-clip: content-box; }
:root[data-theme="dark"] body[data-page-id="work-hub"] ::-webkit-scrollbar-thumb:hover { background: rgba(226,232,240,.5); background-clip: content-box; }
:root[data-theme="dark"] body[data-page-id="work-hub"] ::-webkit-scrollbar-thumb:active { background: rgba(226,232,240,.64); background-clip: content-box; }
:root[data-theme="dark"] .tp-subnotes-copy { background: #1f2430; border-color: #333b4d; color: #cbd5e1; }

/* ══════════════════════════════════════════════════════════════════
   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 { display: none !important; }
@media (max-width: 720px) { .mw-fb-hint { display: none; } }
:root[data-theme="dark"] .mw-focus-band { background: var(--surf, #161a22); border-bottom-color: #2a3140; }

/* ── 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 { display: none !important; }
.wk-focus-list.wk-view-board .mw-focus-sub { grid-column: 1 / -1; }
:root[data-theme="dark"] .mw-focus-sub { background: var(--surf, #161a22); }

/* ── The due chip is a control ──
   Every dateless row in this list is a row nothing can rank, and fixing that
   through the task popup meant one popup per task. Clicking the chip opens the
   date menu instead. It has to still LOOK like the chip it replaced — same
   size, same colors — so the list doesn't turn into a row of buttons. */
button.mw-card-due {
  border: 1px solid transparent; font: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; line-height: inherit;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease, color .15s ease;
}
button.mw-card-due:hover {
  background: var(--c-green-bg, #defbe6); color: var(--c-green, #16a34a);
  border-color: color-mix(in srgb, var(--c-green, #16a34a) 30%, transparent);
  opacity: 1; font-style: normal;
}
button.mw-card-due.is-overdue:hover { background: var(--c-red-bg, #fff1f1); color: var(--c-red, #ef4444); border-color: color-mix(in srgb, var(--c-red, #ef4444) 30%, transparent); }
button.mw-card-due:focus-visible { outline: 2px solid var(--c-green, #16a34a); outline-offset: 1px; }
/* 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; }
}
:root[data-theme="dark"] .wk-tmp-pop { background: #161a22; border-color: #2a3140; }
:root[data-theme="dark"] .wk-tmp-row:hover { background: #1f2430; }

/* =========================================================   CAPACITY HERO (.wk-cap-hero) — ONE scorecard for the whole band
   Replaces the six .ax-card tiles that used to sit above the Capacity grid.
   Both halves of one fact side by side (allocated | available) with the ratio
   DRAWN between them, and the counts that are NOT derivable from those hours
   as a quiet chip row on the eyebrow's line.

   ⚠️ The row keeps its `.ax-cards-row` class — the universal scorecard delegate
   resolves a card's row with `closest('.ax-cards-row')`, _wkUpdateScCtxBar()
   inserts the "Showing: …" bar as the row's next sibling, and
   `.ax-cards-row[hidden]{display:none!important}` above is what lets
   _wkCapApplyView() hide the row it is not showing. Drop the class and all
   three go silently dead. Everything the row-level flex layout would do to a
   single child is neutralised here.
   ================================================================ */
/* ⚠️ TWO COPIES, ONE PER BAND — see the SPLIT banner below. The wrapper's own
   geometry (the FAB gutter, the margin under the band) is design, not
   plumbing, so Employees and Clients each own theirs. */
/* ── supply: Team → Capacity → Employees, and Mine → Capacity ── */
.ax-cards-row.wk-cap-herorow:where(.wk-caps--supply) {
  display: block; overflow: visible; padding: 0; margin-bottom: 14px;
  /* The FAB column is only pinned to the viewport's edge while the layout is
     wide enough for this card to reach it; on phones the FABs move (see the
     max-width:768px rule in notes-todos.js) and the gutter is dead space. */
  --wk-cap-fab-gutter: 66px;
}
@media (max-width: 768px) { .ax-cards-row.wk-cap-herorow:where(.wk-caps--supply) { --wk-cap-fab-gutter: 18px; } }
/* ── demand: Team → Capacity → Clients ── */
.ax-cards-row.wk-cap-herorow:where(.wk-caps--demand) {
  display: block; overflow: visible; padding: 0; margin-bottom: 14px;
  --wk-cap-fab-gutter: 66px;
}
@media (max-width: 768px) { .ax-cards-row.wk-cap-herorow:where(.wk-caps--demand) { --wk-cap-fab-gutter: 18px; } }
.wk-cap-hero {
  position: relative; overflow: hidden;
  /* ⚠️ The right padding is a GUTTER, not styling. The app's FAB column
     (.wt-notes-fab and friends, forced to `position:fixed !important;
     right:8px` at z 9999 in base.css) is ~54px wide and runs down the viewport
     from y≈180 — and this card is the top element of the panel, so it sits in
     that band at almost every scroll position. The six tiles this replaced got
     away with it because their text was centre-aligned and never reached the
     tile's own edge; a right-aligned headline figure lands squarely under the
     buttons. Reserve the column's width here rather than moving the figure, so
     both hour numbers stay hard against the card's readable edges. */
  padding: 13px var(--wk-cap-fab-gutter, 18px) 14px 20px;
  border: 1px solid var(--border-s, var(--border, #e2e8f0));
  border-radius: var(--radius, 16px);
  background: var(--surf, #fff);
  box-shadow: var(--shadow-sm);
}
/* One hairline of accent for the whole card, where the tiles it replaced had
   six competing ones.
   ⚠️ ONE HUE ON THIS CARD, AND IT IS THE RING'S. Every colour in the top half
   used to be its own decision — an indigo→violet rail and bar, a green
   "available", an amber "unassigned", a fifth hue on each chip — five hues
   over a card whose data is ONE magnitude, sitting directly above a breakdown
   drawn in a single validated blue ramp. They are the same colours now:
   `--wkch-2` is the ramp's second step (see the block at .wk-capbd), so the
   headline figure, the bar and the ring read as one system.
   ⚠️ VIOLET IS DELIBERATELY ABSENT, not merely unused. Purple is reserved for
   AI surfaces across these apps (.wk-ai-*, the composer's AI chip), so a
   purple capacity bar reads as an AI feature to anybody who has learnt that
   rule elsewhere in the product.
   Red stays, because red is not a second brand colour here — it is the
   over-capacity STATE, it only ever paints something genuinely over, and it
   never travels alone (the chip, the caption and the card all say the word). */
.wk-cap-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--wkch-2, #004b7c);
}
.wk-cap-hero.is-over::before { background: var(--c-red, #ef4444); }

.wk-cap-hero-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.wk-cap-hero-eyebrow {
  font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink3, #64748b); white-space: nowrap;
}

/* ── figure — bar — figure. The bar takes the slack, so the two numbers sit
      hard against the card's outer edges at every width. ── */
.wk-cap-hero-split { display: flex; align-items: center; gap: 18px; }
.wk-cap-hero-fig { flex: 0 0 auto; display: flex; flex-direction: column; min-width: 74px; }
.wk-cap-hero-fig--free, .wk-cap-hero-fig--open { text-align: right; }
.wk-cap-hero-val {
  font-size: clamp(21px, 2.4vw, 30px); font-weight: 900; line-height: 1;
  letter-spacing: -1px; color: var(--ink, #0f172a);
}
/* ⚠️ ONE figure carries the accent — the one the card is about. The other is
   the same fact's remainder and wears muted ink. Green said "available is good
   news" and amber said "unassigned is a warning", which are verdicts, not
   readings: 36h free is healthy on Monday and alarming on Friday, and this
   card cannot tell which. The states that ARE verdicts (over capacity, demand
   past what the team has left) already have the red rules below. */
.wk-cap-hero-fig--used .wk-cap-hero-val { color: var(--wkch-2, #004b7c); }
.wk-cap-hero-fig--free .wk-cap-hero-val { color: var(--ink2, #525252); }
.wk-cap-hero-fig--open .wk-cap-hero-val { color: var(--ink2, #525252); }
/* ⚠️ The red state lands on a DIFFERENT half in each view, so both rules are
   scoped. On the Employees hero the allocated hours are what went over. On the
   Clients hero (--demand) the assigned hours are the healthy half and the
   UNASSIGNED pile is the alarm — painting "assigned" red there tells the reader
   the opposite of the truth. */
.wk-cap-hero.is-over:not(.wk-cap-hero--demand) .wk-cap-hero-fig--used .wk-cap-hero-val { color: var(--c-red, #ef4444); }
.wk-cap-hero--demand.is-over .wk-cap-hero-fig--open .wk-cap-hero-val { color: var(--c-red, #ef4444); }
/* Nothing free is not a green fact. */
.wk-cap-hero.is-over .wk-cap-hero-fig--free .wk-cap-hero-val { color: var(--ink4, #94a3b8); }
.wk-cap-hero-lbl {
  margin-top: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink3, #64748b);
}

.wk-cap-hero-meterwrap {
  flex: 1 1 auto; min-width: 60px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.wk-cap-hero-meter {
  width: 100%; height: 10px; border-radius: 999px;
  background: var(--surf2, #f1f5f9);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #e2e8f0) 70%, transparent);
  overflow: hidden;
}
.wk-cap-hero-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--wkch-2, #004b7c);
  transition: width .45s cubic-bezier(.22, 1, .36, 1), background .25s ease;
}
.wk-cap-hero.is-over .wk-cap-hero-fill { background: var(--c-red, #ef4444); }
.wk-cap-hero-note {
  font-size: 11px; font-weight: 600; color: var(--ink3, #64748b);
  text-align: center; line-height: 1.3;
}
.wk-cap-hero-note b { font-weight: 800; color: var(--ink, #0f172a); }
.wk-cap-hero.is-over .wk-cap-hero-note b { color: var(--c-red, #ef4444); }
/* The over-hours tail only exists when there ARE over-hours. */
.wk-cap-hero:not(.is-over) .wk-cap-hero-over { display: none; }

/* ── The chip row ──────────────────────────────────────────────────────
   These ARE `.ax-card`s (see the note in Work.html) so the shared filter
   delegate, the ripple and the is-active bookkeeping all keep working — which
   means every base .ax-card rule has to be undone here. Two-class selectors
   beat the single-class base rules; work-mobile.css's `!important` block is
   answered in that file, not this one. */
.wk-cap-hero-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ax-cards-row .wk-cap-chip {
  flex: 0 0 auto; min-width: 0; width: auto;
  flex-direction: row; align-items: baseline; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surf2, #f8fafc);
  border: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 75%, transparent);
  box-shadow: none; text-align: left;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.wk-cap-chip::before { display: none; }
.wk-cap-chip > b {
  font-size: 13px; font-weight: 900; line-height: 1; letter-spacing: -.3px;
  color: var(--_ac, var(--ink, #0f172a));
}
.ax-cards-row .wk-cap-chip .ax-card-lbl {
  margin-top: 0; font-size: 10px; font-weight: 700; letter-spacing: .1px;
  text-transform: none; color: var(--ink3, #64748b);
}
.ax-cards-row .wk-cap-chip:hover {
  transform: none;
  background: color-mix(in srgb, var(--_ac, #64748b) 8%, var(--surf, #fff));
  border-color: color-mix(in srgb, var(--_ac, #64748b) 28%, var(--border, #e2e8f0));
}
.ax-cards-row .wk-cap-chip:active { transform: scale(.97); }
.ax-cards-row .wk-cap-chip.is-active {
  background: color-mix(in srgb, var(--_ac, #64748b) 12%, var(--surf, #fff));
  border-color: color-mix(in srgb, var(--_ac, #64748b) 40%, var(--border, #e2e8f0));
  box-shadow: none;
}
.ax-cards-row .wk-cap-chip.is-active .ax-card-lbl { color: var(--ink, #0f172a); }
.ax-cards-row .wk-cap-chip.is-active::before { display: none; }
/* A count of zero is not worth a click — dim it, but leave it clickable so the
   row's width never jumps as the numbers move. */
.ax-cards-row .wk-cap-chip.is-zero { opacity: .5; }

/* ══════════════════════════════════════════════════════════════════════════
   TEAM → CAPACITY → THE SCORECARD ROW  (.wk-capsc)
   ──────────────────────────────────────────────────────────────────────────
   Five tiles inside the hero card, plus the three controls that govern the
   whole panel (which week, internal on/off, ring folded or open).

   ⚠️ THE TILES ARE THE APP'S ORDINARY `.ax-card`s, not a private card shape.
   They keep `.ax-card` + `.ax-card-val` + `.ax-card-lbl`, so the accent rail,
   the is-active ring, the is-zero dimming, the ripple and the universal filter
   delegate all work with nothing added — and, more importantly, a scorecard on
   this tab looks like a scorecard on every other tab. What is added here is
   only what the app's card does not have: a second line under the label, and a
   meter for the two tiles that carry a ratio.

   ⚠️ THE ROW IS A GRID, NOT THE `.ax-cards-row` FLEX. The wrapper is still an
   `.ax-cards-row` (the delegate, the context bar and the hide-on-switch all
   resolve through it — see the note at .wk-cap-herorow), but it is `display:
   block` there and this inner grid does the laying out. A flex row of five
   scrolled sideways on a laptop; a grid wraps to 3+2 and then 2+2+1.

   ⚠️ ONE HUE, still. `--_ac` is the ramp's second step on the hours tiles, red
   only on Over Capacity, neutral ink on Available — the same system as the
   ring below and for the same reason: this is one magnitude, not five
   categories. The pace tile is the ONE exception and it earns it, because
   "behind" is a verdict and verdicts get colour here.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══ THE SCORECARD BAND IS NOT A PANEL ═════════════════════════════════════
   🚨 `--sc` GIVES BACK EVERY BIT OF CHROME `.wk-cap-hero` ADDS. Tyler,
   2026-08-14: *"make the scorecards look like the normal scorecards on the
   other tabs."* On Home, Alerts and Priority a scorecard row is five bare
   `.ax-card`s sitting straight on the page background. Here they were nested
   inside a bordered, shadowed, accent-railed white panel — a card of cards —
   which is what made them read as a different component from every other tab's
   row, before a single tile rule was compared.
   So this strips the border, the ground, the shadow and the 3px accent rail,
   and leaves the head as a bare toolbar above a bare grid. The one thing it
   KEEPS is the right gutter: the app's FAB column is fixed at right:8px and
   runs down the viewport through this band at almost every scroll position, so
   the tiles still have to stop short of it (see the note at .wk-cap-hero).
   ⚠️ `overflow: visible` is load-bearing now. `.ax-card:hover` lifts 3px and
   throws a large shadow, and the inherited `overflow:hidden` clipped both — the
   tiles hovered like every other tab's and LOOKED different because the lift
   was being cut off at the panel's edge. ══════════════════════════════════ */
.wk-cap-hero.wk-cap-hero--sc {
  border: 0; background: none; box-shadow: none; overflow: visible;
  padding: 0 var(--wk-cap-fab-gutter, 18px) 0 0;
}
.wk-cap-hero.wk-cap-hero--sc::before { content: none; }
.wk-cap-hero--sc .wk-cap-hero-head { flex-wrap: wrap; row-gap: 8px; margin-bottom: 10px; }
.wk-cap-hero-eyebrow b { font-weight: 900; color: var(--ink2, #525252); }
.wk-cap-hero-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── The period picker: This week · This month · Custom ───────────────────
   Same segmented shape as the measure toggle, deliberately: two controls that
   both mean "change what these numbers are about" should not be two different
   widgets.

   🚨 THE SELECTION SLIDES, IT DOES NOT JUMP. `.wk-capwk-pill` is ONE
   absolutely-positioned element behind all three buttons, moved by
   `--wkwk-x` / `--wkwk-w` which work.js `_wkCapSlidePill` MEASURES off the live
   button. Painting a background on `.is-active` instead is what made this read
   as three separate controls flashing, and a hard-coded 33.3% step would land
   under the wrong label the moment the Custom pill widens to hold "Aug 1 –
   Aug 20".
   ⚠️ `is-ready` is added a frame after the first measure. Without it the pill
   transitions in from x=0 on first paint, which reads as a glitch. */
.wk-capwk {
  position: relative; display: inline-flex; padding: 2px; gap: 2px; flex: none;
  background: var(--wt-neutral-bg, #f4f4f4); border-radius: 9px;
  border: 1px solid var(--border-s, #f1f5f9);
}
.wk-capwk-pill {
  position: absolute; top: 2px; bottom: 2px; left: 0;
  width: var(--wkwk-w, 0); transform: translateX(var(--wkwk-x, 0));
  border-radius: 7px; background: var(--surf, #fff);
  box-shadow: var(--shadow-sm); pointer-events: none; opacity: 0;
}
.wk-capwk.is-ready .wk-capwk-pill {
  opacity: 1;
  transition: transform .34s var(--ease-spring, cubic-bezier(.22, 1, .36, 1)),
              width .34s var(--ease-spring, cubic-bezier(.22, 1, .36, 1)),
              opacity .18s ease;
}
.wk-capwk-btn {
  position: relative; z-index: 1;
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 10px; font-weight: 800; letter-spacing: .3px; white-space: nowrap;
  color: var(--ink3, #64748b); padding: 4.5px 11px; border-radius: 7px;
  transition: color .2s ease;
}
.wk-capwk-btn:hover { color: var(--ink2, #475569); }
.wk-capwk-btn.is-active { color: var(--ink, #0f172a); }
/* The Custom pill states the range it is holding, so it is the one button that
   changes width — which is exactly why the indicator is measured, not stepped. */
.wk-capwk-btn-t { display: inline-block; }

/* ── ‹ Today › — the period slides ────────────────────────────────────────
   Tyler, 2026-09-02: *"for week/month navigation, I would use a universal date
   selector at the top: ‹ Previous | Sep 7–13 | Next ›."*
   ⚠️ IT SITS BESIDE THE PILLS, NOT INSIDE THEM. The pills answer "what UNIT",
   this answers "WHICH one" — one control for two questions is the shape that
   makes a segmented control grow a scroll bar.
   ⚠️ The middle button carries the DATES once you leave today, so it changes
   width; nothing here may depend on a fixed one. */
.wk-capnav {
  display: inline-flex; align-items: center; gap: 1px; flex: none;
  padding: 2px; border-radius: 9px;
  background: var(--wt-neutral-bg, #f4f4f4);
  border: 1px solid var(--border-s, #f1f5f9);
}
.wk-capnav.is-off { opacity: .42; }
.wk-capnav-b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink3, #64748b); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.wk-capnav-b:hover:not(:disabled) { background: var(--surf, #fff); color: var(--ink, #0f172a); }
.wk-capnav-b:disabled { opacity: .4; cursor: default; }
.wk-capnav-now {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 10px; font-weight: 800; letter-spacing: .3px; white-space: nowrap;
  color: var(--ink3, #64748b); padding: 4.5px 10px; border-radius: 7px;
  transition: background .15s ease, color .15s ease;
}
.wk-capnav-now:disabled { cursor: default; }
/* Away from today, the button names the dates AND is the way back — so it is
   the one thing in the row that is painted like something to press. */
.wk-capnav-now.is-away {
  background: var(--surf, #fff); color: var(--ink, #0f172a);
  box-shadow: var(--shadow-sm);
}
.wk-capnav-now.is-away:hover { color: var(--c-purple, #7c3aed); }

/* ── Custom: the two-date sheet ───────────────────────────────────────────
   Appended to <body> and floated on top by _wkFloatOnTop — a static z-index
   cannot work on this page (see reference_work_zindex_tiers). It states the
   working days and the per-person hours the range comes to, because that is
   the number every tile behind it is about to divide by. */
.wk-capcust {
  position: fixed; width: 236px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px 14px 12px; border-radius: 14px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surf, #fff); box-shadow: var(--shadow-lg, 0 18px 40px rgba(15, 23, 42, .18));
  opacity: 0; transform: translateY(-6px) scale(.985);
  transition: opacity .16s ease, transform .2s var(--ease-spring, cubic-bezier(.22, 1, .36, 1));
}
.wk-capcust.is-in { opacity: 1; transform: none; }
.wk-capcust-t {
  font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink3, #64748b);
}
.wk-capcust-f { display: flex; align-items: center; gap: 8px; }
.wk-capcust-f > span {
  flex: none; width: 34px;
  font-size: 10px; font-weight: 800; color: var(--ink3, #64748b);
}
.wk-capcust-i {
  flex: 1 1 auto; min-width: 0; font-family: inherit;
  font-size: 11.5px; font-weight: 700; color: var(--ink, #0f172a);
  padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0); background: var(--surf, #fff);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.wk-capcust-i:focus {
  outline: none; border-color: var(--wkch-2, #004b7c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wkch-2, #004b7c) 14%, transparent);
}
.wk-capcust-note {
  font-size: 10px; font-weight: 700; color: var(--ink3, #64748b); line-height: 1.35;
}
.wk-capcust-act { display: flex; gap: 7px; justify-content: flex-end; margin-top: 1px; }
.wk-capcust-btn {
  font-family: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border, #e2e8f0); background: var(--surf2, #f8fafc);
  color: var(--ink2, #475569);
  transition: background .14s ease, border-color .14s ease, color .14s ease, filter .14s ease;
}
.wk-capcust-btn:hover { color: var(--ink, #0f172a); border-color: var(--ink4, #94a3b8); }
.wk-capcust-btn.is-go {
  background: var(--wkch-2, #004b7c); border-color: var(--wkch-2, #004b7c); color: #fff;
}
.wk-capcust-btn.is-go:hover { filter: brightness(1.16); color: #fff; border-color: var(--wkch-2, #004b7c); }

/* ══════════════════════════════════════════════════════════════════════════
   THE TIME-LOG SHEET   (.wk-caplog) — behind the "Logged So Far" tile
   ──────────────────────────────────────────────────────────────────────────
   Tyler, 2026-08-17: *"the logged so far to what we need, when you click them
   it should show the time logs."*

   A CENTRED MODAL, not the small anchored sheet the Custom range picker uses.
   That one holds two date fields; this one holds a real timesheet, and an
   anchored popover with an internal scroll region is the shape that ends up
   240px tall on a laptop and unreadable.

   ⚠️ `position: fixed` WITH NO z-index HERE. work.js hands every floating
   modal an inline z from 60000 up (_wkFloatOnTop) — a static z-index in the
   stylesheet is what opens a sheet underneath whatever is already on screen.
   ══════════════════════════════════════════════════════════════════════════ */
.wk-caplog { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.wk-caplog-scrim {
  position: absolute; inset: 0; background: rgba(15, 23, 42, .42);
  opacity: 0; transition: opacity .18s ease;
}
.wk-caplog.is-in .wk-caplog-scrim { opacity: 1; }
/* ⚠️ `min-height: 0` ON THE PANEL AND `overflow:auto` ON THE BODY, not on the
   panel. A flex column whose child scrolls needs the child to be the scroller;
   put the overflow on the panel and the sticky-ish head scrolls away with the
   rows while the footer floats off the bottom of a long timesheet. */
.wk-caplog-panel {
  position: relative; box-sizing: border-box;
  width: min(720px, calc(100vw - 32px)); max-height: min(82vh, 760px);
  display: flex; flex-direction: column; min-height: 0;
  border-radius: 18px; border: 1px solid var(--border, #e2e8f0);
  background: var(--surf, #fff);
  box-shadow: var(--shadow-lg, 0 26px 60px rgba(15, 23, 42, .26));
  opacity: 0; transform: translateY(8px) scale(.99);
  transition: opacity .18s ease, transform .22s var(--ease-spring, cubic-bezier(.22, 1, .36, 1));
}
.wk-caplog.is-in .wk-caplog-panel { opacity: 1; transform: none; }

.wk-caplog-head {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 16px 16px 13px 18px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.wk-caplog-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wk-caplog-t1 { font-size: 15px; font-weight: 900; color: var(--ink, #0f172a); letter-spacing: -.2px; }
.wk-caplog-t2 { font-size: 10.5px; font-weight: 700; color: var(--ink3, #64748b); }
.wk-caplog-tot { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.wk-caplog-tot-v { font-size: 24px; font-weight: 900; color: var(--wkch-2, #004b7c); letter-spacing: -.5px; line-height: 1; }
.wk-caplog-tot-l { font-size: 9.5px; font-weight: 700; color: var(--ink3, #64748b); }
.wk-caplog-x {
  flex: none; width: 30px; height: 30px; border-radius: 9px; font-size: 19px; line-height: 1;
  font-family: inherit; cursor: pointer; color: var(--ink3, #64748b);
  border: 1px solid var(--border, #e2e8f0); background: var(--surf, #fff);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.wk-caplog-x:hover { color: var(--ink, #0f172a); border-color: var(--ink4, #94a3b8); background: var(--surf2, #f8fafc); }

.wk-caplog-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 8px 10px; }
.wk-caplog-grp { padding: 8px 8px 4px; }
.wk-caplog-grp + .wk-caplog-grp { border-top: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 70%, transparent); }
/* The person line is the group's heading and its subtotal at once — a separate
   total row under each person would double the sheet's height for a figure the
   heading has room for. */
.wk-caplog-p { display: flex; align-items: center; gap: 9px; padding: 4px 6px 7px; }
.wk-caplog-av {
  flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 900; color: #fff; letter-spacing: .2px;
}
.wk-caplog-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-caplog-pn {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 800; color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-caplog-ph { flex: none; font-size: 12.5px; font-weight: 900; color: var(--ink, #0f172a); }

/* ⚠️ A THREE-TRACK GRID, and the middle one is `minmax(0, 1fr)`. A grid item's
   min-width defaults to its content, so one long note pushed the hours column
   off the right edge of the panel — the same trap `.wk-capsc` documents. */
.wk-caplog-row {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px; align-items: baseline;
  padding: 6px 6px; border-radius: 8px;
}
.wk-caplog-row:hover { background: var(--surf2, #f8fafc); }
.wk-caplog-d { font-size: 10.5px; font-weight: 800; color: var(--ink3, #64748b); white-space: nowrap; }
.wk-caplog-w { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wk-caplog-w1 {
  font-size: 11.5px; font-weight: 700; color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The note wraps to two lines and then stops: a paragraph somebody pasted into
   a time entry must not be able to set the height of every row above it. */
.wk-caplog-w2 {
  font-size: 10.5px; font-weight: 600; color: var(--ink3, #64748b); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wk-caplog-h { font-size: 11.5px; font-weight: 900; color: var(--ink, #0f172a); white-space: nowrap; }

.wk-caplog-empty { padding: 40px 24px; text-align: center; }
.wk-caplog-empty-t { font-size: 13px; font-weight: 800; color: var(--ink2, #525252); }
.wk-caplog-empty-s { margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--ink3, #64748b); line-height: 1.45; }

.wk-caplog-foot {
  flex: none; display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 16px; border-top: 1px solid var(--border, #e2e8f0);
}
.wk-caplog-btn {
  font-family: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
  padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--border, #e2e8f0); background: var(--surf, #fff); color: var(--ink2, #525252);
  transition: color .16s ease, border-color .16s ease, filter .16s ease;
}
.wk-caplog-btn:hover { color: var(--ink, #0f172a); border-color: var(--ink4, #94a3b8); }
.wk-caplog-btn.is-go {
  background: var(--wkch-2, #004b7c); border-color: var(--wkch-2, #004b7c); color: #fff;
}
.wk-caplog-btn.is-go:hover { filter: brightness(1.16); color: #fff; border-color: var(--wkch-2, #004b7c); }

@media (max-width: 560px) {
  .wk-caplog-panel { width: calc(100vw - 16px); max-height: 90vh; }
  .wk-caplog-head { padding: 13px 12px 11px 14px; gap: 10px; }
  .wk-caplog-tot-v { font-size: 20px; }
  .wk-caplog-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-caplog-scrim, .wk-caplog-panel { transition: none; }
  .wk-caplog-panel { transform: none; }
}

/* ── The two toggles ──────────────────────────────────────────────────────
   Pill-shaped like the chips they replaced, so the head still reads as one
   row of small controls. `is-off` / `is-open` carry the state; neither ever
   changes width, or the head reflows every time somebody clicks. */
.wk-captgl {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  border: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 75%, transparent);
  background: var(--surf2, #f8fafc); color: var(--ink2, #475569);
  border-radius: 999px; padding: 4px 11px; cursor: pointer; font-family: inherit;
  font-size: 10px; font-weight: 800; letter-spacing: .2px; white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.wk-captgl:hover { border-color: color-mix(in srgb, var(--wkch-2, #004b7c) 30%, var(--border, #e2e8f0)); color: var(--ink, #0f172a); }
.wk-captgl-box {
  width: 12px; height: 12px; border-radius: 4px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wkch-2, #004b7c); color: #fff;
}
.wk-captgl-box svg { width: 8px; height: 8px; }
/* Off is an EMPTY box, not a missing one — the control has to say what it will
   do when clicked, and a checkbox with no box reads as a label. */
.wk-captgl.is-off { color: var(--ink3, #64748b); }
.wk-captgl.is-off .wk-captgl-box { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border, #e2e8f0); }
.wk-captgl.is-off .wk-captgl-box svg { display: none; }
/* 🚫 `.wk-captgl--bd` (the "Where it is going" dropdown) and `.wk-captgl--alloc`
   ("Allocate the week") are GONE — Tyler deleted both on 2026-08-14. The chev
   rule stays because `.wk-captgl-chev` is still the class any future disclosure
   pill in this head would use; nothing on the page carries it today.
   The band's head is now only the controls that say WHAT THE NUMBERS ARE ABOUT.
   Allocation moved to the grid's own head, where the people are — see
   work.js `_injectNewButtons`, `data-wk-new="allocate"`. */
.wk-captgl-chev { width: 12px; height: 12px; transition: transform .2s ease; }

/* ── The row ──────────────────────────────────────────────────────────────
   `minmax(0, 1fr)` and not `1fr`: a grid item's min-width defaults to its
   content, so one long company name in a tooltip-free tile would push the row
   wider than the card and take the whole band into a horizontal scroll. */
/* ⚠️ `padding: 4px` MATCHES `.ax-cards-row`, and it is not decoration: the
   tiles lift 3px and cast a large shadow on hover, and a grid with no padding
   clips both against the panel above and below it. */
.wk-capsc {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px; align-items: stretch; padding: 4px;
}
/* ── The period swap ──────────────────────────────────────────────────────
   Every tile is rewritten synchronously when the period changes, so without
   this the whole band changes between two frames and the eye cannot tell which
   figures moved. Faded and nudged down while the numbers are replaced, then
   released — one surface answering a new question rather than five tiles
   blinking. work.js `_wkCapSwap` owns the class; the WRITE never waits on it. */
.wk-capsc, .wk-clcap-demand {
  transition: opacity .2s ease, transform .26s var(--ease-spring, cubic-bezier(.22, 1, .36, 1));
}
.wk-capsc.is-swapping, .wk-clcap-demand.is-swapping {
  opacity: .3; transform: translateY(5px); transition-duration: .1s, .1s;
}
/* ⚠️ THE CARD'S OWN GEOMETRY IS WRITTEN HERE, NOT INHERITED FROM `.ax-card` —
   because ONE of the five is not an `.ax-card`. The pace tile is a plain div
   (it must not enter the filter delegate), and on the first render it showed
   up as bare text on the page background with its figure and its label side by
   side, while the four beside it were cards. Everything that makes these read
   as one row lives on `.wk-capsc-card`; the `.ax-card` rules then layer their
   accent, hover and is-active on top of the four that are cards. */
/* 🚨 THIS IS `.ax-card`'s RECIPE, RE-TYPED — NOT A SECOND CARD DESIGN.
   Every value here is copied from the `.ax-card` / `.ax-card:not(.is-zero)`
   block at the top of this file: 16px radius, the 16px 12px box, the 10%
   accent gradient on a 25% accent border, the 4px flat accent rail, the same
   spring. It has to be re-typed because ONE of the five tiles is not an
   `.ax-card` — the pace tile is a plain div so it stays out of the filter
   delegate — and a tile that inherits nothing sat on the page as bare text
   beside four cards.
   ⚠️ IF `.ax-card` CHANGES, CHANGE THIS. That is the cost of the pace tile not
   being a button, and it is the trade the head note above already justifies.
   The ONLY deliberate differences are the things a scorecard on another tab
   does not have: a second line, a meter, and a footer. */
.wk-capsc-card {
  position: relative; overflow: hidden; box-sizing: border-box;
  /* 🚨 `center`, NOT `flex-start`. Tyler, 2026-09-02: *"all the scorecards
     should be centered with what they have."* These five tiles carry different
     numbers of rows — one has a meter and a foot, one has neither — and they
     all stretch to the tallest. Top-aligned, the short ones hung their content
     from the ceiling with a hand of dead space underneath; centred, a tile with
     two rows reads as a deliberately small tile instead of a broken tall one.
     ⚠️ AND THE MIN-HEIGHT IS NOT DECORATION. It is what makes the Employees
     band and the Clients band the same height, which is what keeps the
     Employees|Clients|Board switch under the cursor between presses. Change it
     and check `~/_pwverify/_cap3up.cjs` still passes. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: none; min-width: 0; width: auto; gap: 0;
  /* 🚨 118, AND IT IS A MEASURED NUMBER. The Employees lead tile carries a
     bar the Clients tiles do not, so its natural height is 115px against their
     112 — three pixels, and three pixels is enough to move the view switch
     under the cursor between presses. A min-height above BOTH natural heights
     makes the two bands identical by construction instead of by luck.
     `~/_pwverify/_cap3up.cjs` measures both bands and fails on >2px. */
  min-height: 118px;
  padding: 14px 12px; border-radius: var(--radius, 16px); text-align: center;
  font-family: inherit;
  border: 1px solid color-mix(in srgb, var(--_ac, #64748b) 25%, var(--border, #e2e8f0));
  background: linear-gradient(135deg, color-mix(in srgb, var(--_ac, #64748b) 10%, var(--surf, #fff)), var(--surf, #fff));
  box-shadow: var(--shadow-sm);
  transition: all .35s var(--ease-spring, cubic-bezier(.22, 1, .36, 1));
}
/* Only the pace tile needs the rail drawn by hand — `.ax-card::before` already
   draws it for the other four, in the same place and at the same 4px. */
.wk-capsc-card--pace::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--_ac, #64748b);
}
.wk-capsc-card--pace .ax-card-val { color: var(--_ac, var(--ink, #0f172a)); }
/* The same lift, shadow and border tint every other tab's cards get. It was
   -2px with no shadow change, which is the kind of one-value drift that makes
   two rows of "identical" cards feel different without anyone being able to
   say why. */
.ax-cards-row .wk-capsc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--_ac, #64748b) 40%, var(--border, #e2e8f0));
}
.ax-cards-row .wk-capsc-card:hover .ax-card-val { transform: scale(1.06); }
.ax-cards-row button.wk-capsc-card:active { transform: scale(.96); transition-duration: .08s; }
/* ⚠️ NO font-size OVERRIDE. The tiles carried a smaller headline (26px vs 28px)
   and a smaller label (8.5px vs 9px) than every other scorecard in the app —
   small enough to pass a glance and large enough to make this row read as a
   different component. They now take `.ax-card-val` / `.ax-card-lbl` verbatim. */
.wk-capsc-card .ax-card-val { transition: transform .3s var(--ease-spring, cubic-bezier(.22, 1, .36, 1)); }
.wk-capsc-card .ax-card-lbl { margin-top: 6px; }
/* The quiet second line. It is the only text on the tile that is allowed to
   wrap, and it is capped at two lines so one verbose company list cannot make
   its tile taller than the four beside it. */
.wk-capsc-sub {
  margin-top: 6px; font-size: 10px; font-weight: 600; line-height: 1.35;
  color: var(--ink3, #64748b);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 100%;
}
.wk-capsc-foot {
  margin-top: 7px; font-size: 9.5px; font-weight: 700; color: var(--ink3, #64748b);
  white-space: nowrap;
}
/* ⚠️ `hidden` HAS TO WIN HERE. work.js `_wkCapRow` hides the pace note on a
   week with no plan, and the UA's `[hidden]{display:none}` is the weakest rule
   in CSS — anything above that sets `display` on these classes beats it and
   leaves an empty row still holding its line-height and margin. */
.wk-capsc-foot[hidden], .wk-capsc-sub[hidden], .wk-capsc-open[hidden] {
  display: none !important;
}
.wk-capsc-foot b { font-weight: 900; color: var(--ink, #0f172a); }
.wk-capsc-meter {
  position: relative; display: block; width: 100%; margin-top: 9px;
  height: 6px; border-radius: 999px; background: var(--surf2, #f1f5f9);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #e2e8f0) 70%, transparent);
  overflow: hidden;
}
.wk-capsc-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--_ac, var(--wkch-2, #004b7c));
  transition: width .45s cubic-bezier(.22, 1, .36, 1), background .25s ease;
}
/* The pace meter is the only one that shows TWO things, so it alone is not
   clipped — the tick sits on the track's edge. */
.wk-capsc-meter--pace { overflow: visible; }
.wk-capsc-meter--pace .wk-capsc-fill { border-radius: 999px 0 0 999px; }
.wk-capsc-mark {
  position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px;
  background: var(--ink2, #525252); border-radius: 2px;
  transition: left .35s cubic-bezier(.22, 1, .36, 1);
}
.wk-capsc-mark::after {
  content: ''; position: absolute; inset: -6px -5px; /* a finger-sized hit area for the title */
}

/* ══════════════════════════════════════════════════════════════════════════
   THE SCORECARD   (.wk-sc)   — ONE DESIGN FOR EVERY CAPACITY SURFACE
   ──────────────────────────────────────────────────────────────────────────
   Tyler, 2026-08-17: *"I don't like how tall they are… it's kind of
   repetitive. It says 14.5 twice… it's hard to really know where we're at.
   The most important pieces need to be color-coded."*

   `.wk-capsc-card` above is CENTRED and STACKED: figure, then label, then a
   two-line sub, then a meter, then a nowrap foot — six rows of centred text,
   ~130px, and the reader's eye has to travel the full height of every tile to
   collect one reading. This one is LEFT-ALIGNED and pairs up, which is where
   the ~35px went:

     label ································· 62%   ← one row, not two
     14.5h  of 8.25h needed                        ← inline, not stacked
     [====================        ]  '
     one line of context

   ⚠️ EVERY ROW IS HEIGHT-FIXED — the sub is one clamped line, the label and
   the figure are nowrap, and a tile with no percentage draws `.wk-sc-nobar`
   (a spacer the exact height of the meter) rather than closing the gap. Five
   tiles in a row have to have identical heights or the row reads as broken;
   that is worth more than letting one tile use the space it happens to need.

   ⚠️ THE ACCENT IS THE VERDICT, not the brand. `--_ac` is set per tile from
   `WkCapCard.tone()` and drives the rail, the percentage chip, the meter fill
   and the border tint together — a tile that coloured only the bar states its
   condition solely in the part that happens to be filled, so a 4%-full green
   bar reads as an empty grey one.
   🚨 GREEN IS ALLOWED HERE AND IT IS THE POINT. See the reversal note in
   work.js above _WK_SC_AC before restoring navy-for-good.
   ══════════════════════════════════════════════════════════════════════════ */
.wk-scs {
  display: grid; gap: 8px; padding: 4px; align-items: stretch;
  grid-template-columns: repeat(var(--sc-n, 3), minmax(0, 1fr));
}
.wk-scs, .wk-scs.is-swapping { transition: opacity .2s ease, transform .26s var(--ease-spring, cubic-bezier(.22, 1, .36, 1)); }
.wk-scs.is-swapping { opacity: .3; transform: translateY(5px); transition-duration: .1s, .1s; }
/* 🚨 `.ax-card`'s SURFACE RECIPE, RE-TYPED — NOT A SECOND CARD DESIGN. Same
   16px radius, same 8-10% accent wash on a 25% accent border, same small
   shadow and the same spring as every other scorecard in this app. It cannot
   simply BE `.ax-card`: that class enters work.js's `[data-wk-filter]`
   delegate, and these are readings, not slices of a list.
   ⚠️ IF `.ax-card` CHANGES, CHANGE THIS AND `.wk-capsc-card`. */
.wk-sc {
  position: relative; overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch;
  min-width: 0; padding: 10px 12px 11px; text-align: left;
  border-radius: var(--radius, 16px); font-family: inherit;
  border: 1px solid color-mix(in srgb, var(--_ac, #94a3b8) 25%, var(--border, #e2e8f0));
  background: linear-gradient(135deg, color-mix(in srgb, var(--_ac, #94a3b8) 9%, var(--surf, #fff)), var(--surf, #fff));
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease-spring, cubic-bezier(.22, 1, .36, 1)),
              box-shadow .28s ease, border-color .28s ease;
}
.wk-sc::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--_ac, #94a3b8);
}
/* ── row 1: what it is, and where we are at ─────────────────────────────── */
.wk-sc-hd { display: flex; align-items: center; gap: 8px; min-height: 14px; }
.wk-sc-lbl {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 9px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  color: var(--ink3, #64748b);
}
/* 🚨 THE PERCENTAGE IS THE ANSWER TO "WHERE ARE WE AT", so it is a CHIP and not
   another grey number — it is the one thing on the tile that has to be findable
   without reading anything. It carries the tone as a tinted pill, which is what
   makes a row of five tiles scannable in one pass. */
.wk-sc-pct {
  flex: none; font-size: 11px; font-weight: 900; letter-spacing: -.2px; line-height: 1;
  padding: 3px 6px; border-radius: 999px; white-space: nowrap;
  color: var(--_ac, #64748b);
  background: color-mix(in srgb, var(--_ac, #94a3b8) 14%, var(--surf, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_ac, #94a3b8) 30%, transparent);
}
/* A tile with nothing to be a percentage OF can still have a word for its
   state ("no pace set", "not scheduled"). Quiet, and never in an accent. */
.wk-sc-pct.is-flat {
  color: var(--ink3, #64748b); background: var(--surf2, #f1f5f9);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #e2e8f0) 80%, transparent);
  font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
}
/* ── row 2: the figure, with its denominator BESIDE it ──────────────────── */
.wk-sc-fig { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; min-width: 0; }
.wk-sc-v {
  flex: none; font-size: 24px; font-weight: 900; line-height: 1.05; letter-spacing: -.7px;
  color: var(--ink, #0f172a);
}
/* ⚠️ THIS IS WHERE THE REPETITION WENT. "of 8.25h needed" used to be a centred
   line of its own, which pushed the sub into restating it a third way. Inline,
   it costs no height and the sub is free to say something new. */
.wk-sc-of {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; font-style: normal; color: var(--ink3, #64748b);
}
/* ── row 3: the meter ───────────────────────────────────────────────────── */
.wk-sc-meter {
  position: relative; display: block; width: 100%; margin-top: 7px; height: 5px;
  border-radius: 999px; background: color-mix(in srgb, var(--_ac, #94a3b8) 13%, var(--surf2, #f1f5f9));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #e2e8f0) 60%, transparent);
}
/* ⚠️ The TRACK is a light step of the SAME ramp, not neutral slate. A meter
   whose track is grey states its condition only in the filled part. */
.wk-sc-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--_ac, var(--wkch-2, #004b7c));
  transition: width .45s cubic-bezier(.22, 1, .36, 1), background .25s ease;
}
/* Where the period SHOULD be by now — the gap between this and the fill is the
   whole point of the pace tile. `overflow` stays visible so it can overhang. */
.wk-sc-mark {
  position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px;
  background: var(--ink2, #525252); border-radius: 2px; text-decoration: none;
  transition: left .35s cubic-bezier(.22, 1, .36, 1);
}
/* The spacer that keeps a percentage-less tile the same height as its row. */
.wk-sc-nobar { display: block; margin-top: 7px; height: 5px; }
/* ── row 4: one line of context ─────────────────────────────────────────── */
.wk-sc-sub {
  margin-top: 6px; min-height: 13px;
  font-size: 10px; font-weight: 650; line-height: 1.3; color: var(--ink3, #64748b);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-sc-sub b { font-weight: 900; color: var(--ink, #0f172a); }
.wk-sc.is-empty .wk-sc-v { color: var(--ink4, #94a3b8); }
/* ── the interactive tile ───────────────────────────────────────────────── */
/* ⚠️ IT MUST LOOK LIKE A CONTROL. Tyler: *"Everything needs to be
   interactive"* — and an openable tile that offers no affordance is a number
   people never discover they can open. The lift, the shadow and the cue only
   appear on tiles that actually go somewhere. */
.wk-sc--open { cursor: pointer; }
.wk-sc--open:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--_ac, #94a3b8) 45%, var(--border, #e2e8f0));
}
.wk-sc--open:active { transform: translateY(-1px) scale(.995); transition-duration: .08s; }
.wk-sc--open:focus-visible {
  outline: none; box-shadow: var(--shadow-lg), 0 0 0 2px var(--surf, #fff),
           0 0 0 4px color-mix(in srgb, var(--_ac, #94a3b8) 55%, transparent);
}
/* Bottom-right, over the sub's own trailing space, so it costs no height. */
.wk-sc-go {
  position: absolute; right: 10px; bottom: 9px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: .3px; white-space: nowrap;
  color: var(--_ac, #64748b);
  background: color-mix(in srgb, var(--_ac, #94a3b8) 13%, var(--surf, #fff));
  opacity: 0; transform: translateX(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.wk-sc-go::after { content: '\203A'; font-weight: 900; }
.wk-sc--open:hover .wk-sc-go,
.wk-sc--open:focus-visible .wk-sc-go { opacity: 1; transform: none; }
/* ⚠️ The cue OVERLAPS the sub, so the sub has to get out of its way or a long
   sentence runs underneath the pill. Reserved on hover only — reserving it
   always would truncate every sub for a cue that is not on screen. */
.wk-sc--open:hover .wk-sc-sub,
.wk-sc--open:focus-visible .wk-sc-sub { padding-right: 76px; }
@media (max-width: 1080px) { .wk-scs { grid-template-columns: repeat(min(var(--sc-n, 3), 3), minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .wk-scs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .wk-sc-v { font-size: 23px; }
  /* No hover on a touch screen, so the cue is simply always on. */
  .wk-sc-go { opacity: 1; transform: none; }
  .wk-sc--open .wk-sc-sub { padding-right: 76px; }
}
@media (max-width: 440px) { .wk-scs { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .wk-sc, .wk-sc-fill, .wk-sc-mark, .wk-sc-go, .wk-scs { transition: none; }
  .wk-sc--open:hover, .wk-sc--open:active { transform: none; }
  .wk-scs.is-swapping { transform: none; opacity: .55; }
}

/* ── The pace tile's three states ──────────────────────────────────────────
   ⚠️ RED IS "BEHIND", and it is the same red the Over Capacity tile uses —
   both are the panel saying the week is not going to plan. Ahead gets the
   ramp's own darker step rather than a green: green would make "ahead of pace"
   read as praise, when three days of somebody's logged time landing at once is
   just as likely. `is-idle` (a week with no plan, or one that hasn't started)
   drops the whole tile back to neutral — there is nothing to be behind on. */
.wk-capsc-card--pace { cursor: default; }
.wk-capsc-card--pace.is-behind { --_ac: var(--c-red, #ef4444); }
.wk-capsc-card--pace.is-behind .ax-card-val,
.wk-capsc-card--pace.is-behind .wk-capsc-foot { color: var(--c-red, #ef4444); }
.wk-capsc-card--pace.is-ahead { --_ac: var(--wkch-1, #00304f); }
.wk-capsc-card--pace.is-idle { --_ac: var(--ink4, #94a3b8); }
.wk-capsc-card--pace.is-idle .ax-card-val { color: var(--ink3, #64748b); }
/* It is not a filter, so it must not offer the affordances of one — no lift,
   no deepening shadow, no border tint, and the headline does not grow. */
.ax-cards-row .wk-capsc-card--pace:hover {
  transform: none; box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--_ac, #64748b) 25%, var(--border, #e2e8f0));
}
.ax-cards-row .wk-capsc-card--pace:hover .ax-card-val { transform: none; }
.ax-cards-row .wk-capsc-card--pace:active { transform: none; }

/* ══════════════════════════════════════════════════════════════════════════
   THE LEAD TILE AND THE QUIET FOUR   (.wk-capsc--lead)
   ──────────────────────────────────────────────────────────────────────────
   Tyler, 2026-08-17: *"i dont like these scorecards, needs to be simpler. i
   like what they are saying just not how they are designed."*

   The content was never the problem — the HIERARCHY was. Five tiles at equal
   weight means the reader has to compare five numbers to find the one that
   asks something of them, and on this band that number is the gap between
   what is booked and what has an owner. So: one tile at nearly double width
   carrying the two figures a week is planned from, four flatter cells behind
   it carrying the facts that explain them.

   ⚠️ THE QUIET FOUR ARE STILL FILTERS AND MUST STILL LOOK LIKE IT. They are
   dialled DOWN — flat surface instead of the accent wash, a smaller headline
   — never dialled OFF: the lift, the shadow and the accent rail on hover and
   on `.is-active` are the only thing telling a reader the tile is a control.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ `minmax(340px, …)` on the lead, `minmax(0, …)` on the four. The lead holds
   two figures SIDE BY SIDE, so its own width is really two half-columns; let it
   collapse and each of those goes under ~150px, which is where "STILL TO
   ALLOCATE THIS WEEK" wraps to a second line and takes 12px off the whole row
   (the four cells stretch to the lead, so the lead's wrap is everybody's
   height). The four take 0 so a long sub-line can never push the row into a
   horizontal scroll — the reason `.wk-capsc` uses it.
   🚨 THE LABEL MUST KEEP NAMING THE PERIOD. Shortening it to "Still To
   Allocate" would fit one line at any width and is the wrong fix: six
   assertions across _caplead.cjs and _capperiod.cjs pin all three wordings
   ("This Week" / "This Month" / "In Range") because a label reading "This Week"
   over a month's figures is the lie this band already told once. Widen the
   column, do not shorten the words. */
.wk-capsc--lead {
  grid-template-columns: minmax(340px, 2.1fr) repeat(4, minmax(0, 1fr));
}

/* ── THE LEAD ───────────────────────────────────────────────────────────── */
/* Left-aligned, and that is the point: every other tile on the band is
   centred, so the alignment alone says "this one is not one of those four". */
.wk-capsc-card.wk-capld {
  align-items: stretch; text-align: left;
  /* Tyler, 2026-08-17: *"I just don't like the height of those cards."* The
     lead was ~200px and the four cells STRETCH to match it, so every pixel
     saved here is saved five times over. */
  padding: 11px 14px 11px;
}
.wk-capld-figs {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px; align-items: start;
}
.wk-capld-fig { display: flex; flex-direction: column; min-width: 0; }
/* A hairline, not a second card. The two figures are one thought — how much of
   this period is not yet somebody's problem — and boxing them apart would make
   them read as two unrelated stats. */
.wk-capld-fig--roll { position: relative; padding-left: 13px; }
.wk-capld-fig--roll::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 1px;
  background: color-mix(in srgb, var(--border, #e2e8f0) 90%, transparent);
}
.wk-capsc-card .wk-capld-v { font-size: 24px; line-height: 1.05; letter-spacing: -.5px; }
/* ⚠️ THE LEAD'S LABELS WRAP. `.ax-card-lbl` is `nowrap` + ellipsis, which is
   right for a one-word tile label and wrong for "Still To Allocate This Month"
   in a half-width column — that ellipsised to "Still To Allo…" at every width
   below about 1500px. */
.wk-capld .ax-card-lbl {
  white-space: normal; overflow: visible; text-overflow: clip;
  margin-top: 3px; line-height: 1.25;
  /* ⚠️ ROOM RESERVED SO THE TWO SUB-LINES START ON THE SAME ROW. "Still To
     Allocate This Week" can wrap and "Rolled Over" cannot, and without a
     reservation the pair reads as two separate cards instead of one
     comparison. It was TWO lines; at 24px figures the lead is wide enough for
     one at every width the two-column layout survives, and the narrow
     breakpoint below (which stacks the figures) puts the second line back. */
  min-height: 1.25em;
}
/* ⚠️ ONE LINE HERE, two everywhere else. `.wk-capsc-sub`'s house clamp is 2
   lines, which on the lead's two half-width columns cost ~13px of the height
   Tyler called out for a second line that is almost always empty. */
.wk-capld .wk-capsc-sub {
  margin-top: 3px; text-align: left; -webkit-line-clamp: 1;
}
/* Roll-over earns its own colour only when there IS any. Grey at zero, because
   "0h rolled over" is the good outcome and should not draw the eye at all. */
.wk-capld-fig--roll .ax-card-val { color: var(--ink4, #94a3b8) !important; }
.wk-capld-fig--roll.is-some .ax-card-val { color: var(--wkch-3, #2e6b94) !important; }
/* ⚠️ RED ONLY WHEN THE ROLL-OVER IS WHAT BROKE THE WEEK — i.e. the team is
   past its capacity AND removing the rolled-in hours would put it back under.
   Red on every non-zero roll-over would make the normal state of a real team
   look like an emergency, which is how a warning colour stops meaning
   anything. work.js owns the test; this only paints it. */
.wk-capld-fig--roll.is-blame .ax-card-val { color: var(--c-red, #ef4444) !important; }

/* ── The one bar: allocated | to place | what is left ───────────────────── */
.wk-capld-bar {
  position: relative; display: flex; width: 100%; margin-top: 9px;
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--surf2, #f1f5f9);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #e2e8f0) 70%, transparent);
}
.wk-capld-seg {
  display: block; height: 100%; min-width: 0;
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.wk-capld-seg--alloc { background: var(--wkch-2, #004b7c); }
/* ⚠️ HATCHED, NOT A SECOND SOLID COLOUR. "To place" is not another category of
   work — it is the same hours in an unfinished state — and a solid second hue
   made the bar read as a two-client split. The stripes say "provisional"
   without spending a colour the band has to explain in a legend. */
.wk-capld-seg--place {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--wkch-2, #004b7c) 42%, var(--surf, #fff)) 0 5px,
    color-mix(in srgb, var(--wkch-2, #004b7c) 20%, var(--surf, #fff)) 5px 10px);
}
/* Past capacity the whole bar turns, not just the overflowing segment: the
   track is full, and which segment happened to be drawn last is an accident of
   ordering, not a fact about the week. */
.wk-capld.is-over .wk-capld-seg--alloc { background: var(--c-red, #ef4444); }
.wk-capld.is-over .wk-capld-seg--place {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--c-red, #ef4444) 42%, var(--surf, #fff)) 0 5px,
    color-mix(in srgb, var(--c-red, #ef4444) 20%, var(--surf, #fff)) 5px 10px);
}
/* ── The bar's legend ─────────────────────────────────────────────────────
   🚨 OWNED BY THE **PROJECTS** BAND NOW, NOT THE TEAM ONE. Team ▸ Capacity's
   lead had its legend markup DELETED on 2026-08-17 — Tyler: *"looks very
   repetitive in here"* + *"I just don't like the height of those cards"* —
   because there it captioned three figures that were all already on the same
   row (to-place was the lead's own headline, allocated was the Allocated cell,
   free was in the verdict sentence). See the comment where it used to be in
   Work.html.

   ⚠️ THESE RULES MUST STAY. `_wkPcBandHTML` (Projects ▸ Capacity) draws its own
   lead with the same classes plus a THIRD `--done` key, and its `--done`
   variants further down this file inherit their size and their `content` from
   `.wk-capld-key::before` here. Deleting this block left that band's legend as
   three unstyled words. If the Team lead ever wants one back, it is the MARKUP
   that returns, not these rules. */
.wk-capld-leg {
  display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 7px;
  font-size: 10px; font-weight: 600; color: var(--ink3, #64748b);
}
.wk-capld-key { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.wk-capld-key b { font-weight: 900; color: var(--ink, #0f172a); }
.wk-capld-key::before {
  content: ''; width: 8px; height: 8px; border-radius: 3px; flex: none;
  background: var(--surf2, #f1f5f9);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #e2e8f0) 80%, transparent);
}
.wk-capld-key--alloc::before { background: var(--wkch-2, #004b7c); box-shadow: none; }
.wk-capld-key--place::before {
  box-shadow: none;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--wkch-2, #004b7c) 42%, var(--surf, #fff)) 0 3px,
    color-mix(in srgb, var(--wkch-2, #004b7c) 20%, var(--surf, #fff)) 3px 6px);
}
.wk-capld.is-over .wk-capld-key--alloc::before { background: var(--c-red, #ef4444); }
.wk-capld.is-over .wk-capld-key--place::before {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--c-red, #ef4444) 42%, var(--surf, #fff)) 0 3px,
    color-mix(in srgb, var(--c-red, #ef4444) 20%, var(--surf, #fff)) 3px 6px);
}

/* ── The verdict ────────────────────────────────────────────────────────────
   ⚠️ NO GREEN, and this is the band's standing rule rather than a preference:
   green reads as praise, and "the week fits" is a fact about arithmetic, not a
   compliment. A fitting week gets the ramp's own blue; only a week that does
   NOT fit gets a colour that shouts. */
/* 🚨 `.wk-capld-verdict` IS GONE (2026-09-02) — THE SENTENCE LEFT THE TILE.
   Tyler: *"I don't like the description underneath 'Nothing is booked for this
   week yet' because it's making all the scorecards too tall."* It lived inside
   the lead, whose column is ~340px, so the sentence wrapped to two lines — and
   the four cells STRETCH to the lead, which made two lines of prose in one tile
   cost ~27px on all five. It is `.wk-capsc-verdict` below now: same words, same
   writer, the band's full width, one line.
   ⚠️ DO NOT PUT IT BACK INSIDE THE LEAD. Anything with prose in it belongs
   under the row, not in a column a fifth of the row wide.

   —— the strip ——
   A period with nothing booked at all is not "it fits" — there is nothing to
   fit. Tyler asked to be able to tell that state apart: *"we should be able to
   know as well if it has not been allocated yet."* Hence three looks, not two.
   ⚠️ NO GREEN, and this is the band's standing rule rather than a preference:
   green reads as praise, and "the week fits" is a fact about arithmetic, not a
   compliment. A fitting week gets the ramp's own blue; only a week that does
   NOT fit gets a colour that shouts. */
.wk-capsc-verdict {
  display: flex; align-items: baseline; gap: 6px;
  margin: 7px 4px 0; padding: 6px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--wkch-2, #004b7c) 5%, var(--surf, #fff));
  border: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 85%, transparent);
  font-size: 10.5px; font-weight: 700; line-height: 1.3;
  color: var(--ink2, #525252); text-align: left;
}
.wk-capsc-verdict::before {
  content: '\2713'; font-weight: 900; flex: none; color: var(--wkch-2, #004b7c);
}
/* ⚠️ ONE LINE, ENFORCED. The whole reason this element exists is that the
   sentence used to take two lines and push everything down; letting it wrap
   here would reintroduce the same bug one row lower. Long sentences ellipsise
   — the full text is on the lead tile's own tooltip. */
.wk-capsc-verdict-t {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-capsc-verdict.is-over {
  color: var(--c-red, #ef4444);
  background: color-mix(in srgb, var(--c-red, #ef4444) 6%, var(--surf, #fff));
  border-color: color-mix(in srgb, var(--c-red, #ef4444) 25%, var(--border, #e2e8f0));
}
.wk-capsc-verdict.is-over::before { content: '\26A0'; color: var(--c-red, #ef4444); }
.wk-capsc-verdict.is-empty {
  color: var(--ink3, #64748b);
  background: var(--surf, #fff);
}
.wk-capsc-verdict.is-empty::before { content: '\2014'; color: var(--ink4, #94a3b8); }

/* ══ A TILE WITH NOTHING BEHIND IT ═════════════════════════════
   Tyler, 2026-09-02: *"the scorecard should not be clickable… if there's
   nothing inside, it needs to say that more and just be more obvious."*
   work.js `_wkCapHollow` sets this whenever the drill behind a cell would land
   on no rows at all — which, on a week nobody has allocated yet, is three of
   the five tiles.
   🚨 IT HAS TO LOOK INERT, NOT MERELY BE INERT. The accent wash, the 4px
   rail, the hover lift and the pointer are the only things telling a reader
   these tiles are controls; a tile that keeps all four and then refuses the
   click reads as BROKEN rather than as empty, which is worse than the bug. All
   four go together, and the figure greys with them so the eye skips the tile
   instead of stopping on a zero. */
.ax-cards-row .wk-capsc-card.is-hollow {
  background: var(--surf, #fff);
  border-color: color-mix(in srgb, var(--border, #e2e8f0) 80%, transparent);
  box-shadow: none;
  cursor: default;
}
.wk-capsc-card.is-hollow::before { opacity: .22 !important; }
.wk-capsc-card.is-hollow .ax-card-val { color: var(--ink4, #94a3b8) !important; }
.wk-capsc-card.is-hollow .ax-card-lbl,
.wk-capsc-card.is-hollow .wk-capsc-foot { color: var(--ink4, #94a3b8); }
/* The second line is where the tile SAYS it — italic so the sentence reads as
   a state ("nobody is over") rather than as another statistic. */
.wk-capsc-card.is-hollow .wk-capsc-sub {
  color: var(--ink3, #64748b); font-style: italic;
}
.wk-capsc-card.is-hollow .wk-capsc-meter { opacity: .45; }
.ax-cards-row .wk-capsc-card.is-hollow:hover {
  transform: none; box-shadow: none;
  border-color: color-mix(in srgb, var(--border, #e2e8f0) 80%, transparent);
}
.ax-cards-row .wk-capsc-card.is-hollow:hover .ax-card-val { transform: none; }
.ax-cards-row button.wk-capsc-card.is-hollow:active { transform: none; }
/* The pace tile is not an `.ax-card`, so its three affordances are written
   separately — the same cost the head note on `.wk-capsc-card` already warns
   about. Its hover cue stays VISIBLE and goes grey: work.js has rewritten it to
   "No logs yet", and a cue that only appears on hover would hide the one thing
   this state needs to say. */
.ax-cards-row .wk-capsc-card--pace.is-hollow[data-wk-cap-logs] { cursor: default; }
.ax-cards-row .wk-capsc-card--pace.is-hollow[data-wk-cap-logs]:hover {
  transform: none; box-shadow: none;
}
.wk-capsc-card.is-hollow .wk-capsc-open {
  opacity: 1; transform: none; color: var(--ink4, #94a3b8);
}

/* ══ THE PLANNING BOARD, INSIDE THE TEAM PANEL ═══════════════════
   A HOLE, NOT A DESIGN. The board (wk-plan-board.css) brings its own card, head,
   search, grouping switch and Save all; every rule written here would be a
   second copy of one of them and a second place to forget. The slot exists only
   to give the borrowed element the panel's own gutter. */
.wk-cap-boardslot { padding: 10px 12px 14px; }

/* ══ THE CLIENTS BAND ════════════════════════════════════
   Five equal columns, against the Employees band's `2.1fr + 4`. The tiles are
   the same component at the same min-height, so the two rows measure the same
   — which is the entire point: the view switch lives underneath them and it
   must not move when you press it. */
.wk-capsc--cl { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1320px) { .wk-capsc--cl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .wk-capsc--cl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } }
/* The clients hero is now the same shape as the employees one: a head, a band,
   a verdict. Everything that made it a bespoke card — the pie, the rail, the
   three head totals — is deleted, so its wrapper only needs the gutter. */
.wk-clcap { display: block; }

/* ══ THE FLAG, FULL WIDTH, ABOVE THE GRID ══════════════════════
   What is left of the right-hand rail Tyler deleted on 2026-09-02. It keeps the
   old module's red because it is still the one thing on this panel that needs a
   decision today — see the markup note — but it is a band, not a column, and
   work.js hides it whenever it has no finding. */
.wk-capflag {
  margin: 10px 12px 0; padding: 10px 12px 11px;
  border: 1px solid color-mix(in srgb, var(--c-red, #ef4444) 28%, var(--border, #e2e8f0));
  border-left: 3px solid var(--c-red, #ef4444);
  border-radius: 12px;
  background: color-mix(in srgb, var(--c-red, #ef4444) 5%, var(--surf, #fff));
}
.wk-capflag[hidden] { display: none !important; }
.wk-capflag-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.wk-capflag-icon { display: inline-flex; color: var(--c-red, #ef4444); }
.wk-capflag-icon svg { width: 14px; height: 14px; }
.wk-capflag-t {
  font-size: 9.5px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase;
  color: var(--c-red, #ef4444);
}
/* wk-supply-watch.js writes `.wksw-row`s in here and styles them itself; this
   only lays them across the width the rail never had. */
.wk-capflag-body { display: grid; gap: 7px; }
@media (min-width: 1100px) {
  .wk-capflag-body { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}
/* 🚨 `hidden` ALONE DOES NOT HIDE THESE. The UA's `[hidden]{display:none}`
   is the weakest rule there is, and every one of these controls sets its own
   `display` on a class two lines up this file - so `n.hidden = true` on the
   panel search, its funnel and its count left all three sitting in the head
   over a board they cannot filter. Measured in Chromium, not reasoned about:
   the attribute was set and the boxes were still on screen. */
.wk-focus-search-wrap[hidden],
.wk-focus-filter-btn[hidden],
.wk-focus-new-btn[hidden],
.wk-focus-count[hidden] { display: none !important; }

/* ── THE QUIET FOUR ─────────────────────────────────────────────────────────
   `.wk-capsc-card` already gave them the house geometry; this only turns the
   volume down. The accent wash goes (flat surface), the headline drops from
   28px to 22px, and the label/sub tighten — so the row still reads as one
   family of cards, just with an obvious first among them. */
.wk-capsc-card.wk-capsc-cell {
  padding: 11px 10px 10px;
  background: var(--surf, #fff);
  border-color: color-mix(in srgb, var(--border, #e2e8f0) 100%, transparent);
}
.wk-capsc-card.wk-capsc-cell .ax-card-val { font-size: 21px; letter-spacing: -.3px; }
.wk-capsc-card.wk-capsc-cell .ax-card-lbl { margin-top: 4px; }
/* ⚠️ ONE LINE. The cells are a fifth of the row wide and their subs are short
   phrases ("nobody is over", "6 under-utilized of 6"); the house two-line
   clamp reserved a second line that is nearly always empty, on four cells at
   once. Part of the height Tyler called out on 2026-08-17. */
.wk-capsc-cell .wk-capsc-sub { margin-top: 3px; -webkit-line-clamp: 1; }
.wk-capsc-cell .wk-capsc-meter { margin-top: 7px; height: 5px; }
/* ⚠️ THE FOOT WRAPS IN A CELL. `.wk-capsc-foot` is `white-space: nowrap`, which
   was safe while a tile was a fifth of the row; a quiet cell is narrower than
   that, and "ahead of pace — 0% expected by Monday" ran out of both sides of
   the pace cell with the tile's own `overflow: hidden` slicing the words. The
   phone stylesheet already unset nowrap for exactly this reason at 390px —
   the lead tile brought the same squeeze to the desktop. */
.wk-capsc-cell .wk-capsc-foot { white-space: normal; line-height: 1.3; }
/* The rail only lights on hover or when the tile IS the drill — `.ax-card`
   draws a 2px rail at rest and 4px on `.is-active`, and at rest that rail was
   the loudest thing on a tile whose whole job is to be quiet. */
.ax-cards-row .ax-card.wk-capsc-cell::before { opacity: 0; transition: opacity .2s ease, height .2s ease; }
.ax-cards-row .ax-card.wk-capsc-cell:hover::before,
.ax-cards-row .ax-card.wk-capsc-cell.is-active::before { opacity: 1; }
.ax-cards-row .ax-card.wk-capsc-cell:hover,
.ax-cards-row .ax-card.wk-capsc-cell.is-active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--_ac, #64748b) 10%, var(--surf, #fff)), var(--surf, #fff));
  border-color: color-mix(in srgb, var(--_ac, #64748b) 30%, var(--border, #e2e8f0));
}
/* The pace cell keeps its rail at rest — it is the one cell that carries a
   STATE (behind / ahead / idle) rather than a slice, and the rail is how that
   state is visible without reading the words. */
.ax-cards-row .wk-capsc-cell.wk-capsc-card--pace::before { opacity: 1; }

/* ── "See the logs" ─────────────────────────────────────────────────────────
   The pace cell is now a control and nothing about a reading says so, so it
   says so in words — on hover and on keyboard focus, because a cue that only
   appears under a mouse is a cue half the keyboard users never get. */
.wk-capsc-card--pace[data-wk-cap-logs] { cursor: pointer; }
/* 🚨 OUT OF FLOW, so it costs the row NOTHING. It used to be a sixth
   stacked line on the pace tile, and because the four tiles beside it stretch
   to the tallest, one hover cue was making the whole band ~15px taller for a
   string that is invisible until you are already pointing at it. Pinned to the
   bottom of the tile instead: same cue, same reveal, zero height. */
.wk-capsc-open {
  position: absolute; left: 0; right: 0; bottom: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--_ac, var(--wkch-3, #2e6b94));
  opacity: 0; transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.wk-capsc-card--pace:hover .wk-capsc-open,
.wk-capsc-card--pace:focus-visible .wk-capsc-open { opacity: 1; transform: none; }
/* ⚠️ IT IS A CONTROL NOW, so it gets the affordances the old note forbade —
   that note existed because the tile was a pure reading. It still must not
   look like a FILTER (no border tint, the row's drill state is not changing),
   but a flat tile that opens a sheet with no lift at all reads as dead. */
.ax-cards-row .wk-capsc-card--pace[data-wk-cap-logs]:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-lg);
}
.ax-cards-row .wk-capsc-card--pace[data-wk-cap-logs]:active { transform: scale(.98); }
.wk-capsc-card--pace[data-wk-cap-logs]:focus-visible {
  outline: 2px solid var(--_ac, var(--wkch-3, #2e6b94)); outline-offset: 2px;
}

/* ── narrow ──
   The lead keeps its two figures far longer than the four keep their row: it
   is the tile the design exists for. So the four fold first (to a 4-across
   strip under a full-width lead), then to 2 + 2, and the lead's own two
   figures only stack at phone width. */
@media (max-width: 1320px) {
  .wk-capsc--lead { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wk-capsc--lead .wk-capld { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .wk-capsc--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .wk-capld-figs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wk-capld-fig--roll { padding-left: 0; padding-top: 11px; }
  .wk-capld-fig--roll::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .wk-capsc-card .wk-capld-v { font-size: 30px; }
  /* No hover on a touch screen, so the cue cannot hide behind one. */
  .wk-capsc-open { opacity: 1; transform: none; }
}

/* ── narrow ──
   3 + 2, then 2 + 2 + 1. Never one column: five stacked tiles is the tall band
   this design exists to get rid of.
   🚨 `:not(.wk-capsc--lead)` IS LOAD-BEARING. These rules sit AFTER the lead
   band's own breakpoints and carry the same specificity, so without the
   exclusion they win inside every narrow window and hand the lead tile one
   fifth of the row — the exact layout the redesign replaced. The lead band
   folds on its own schedule, one breakpoint higher up this file. */
@media (max-width: 1180px) {
  .wk-capsc:not(.wk-capsc--lead) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .wk-capsc:not(.wk-capsc--lead) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .wk-capsc-sub { -webkit-line-clamp: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-capsc-fill, .wk-capsc-mark, .wk-captgl-chev,
  .wk-capwk.is-ready .wk-capwk-pill, .wk-capcust,
  .wk-capsc, .wk-clcap-demand, .wk-capsc-card, .wk-capsc-card .ax-card-val { transition: none; }
  /* The swap must still HAPPEN — it is what stops the band changing invisibly —
     it just must not move. Opacity only, and barely. */
  .wk-capsc.is-swapping, .wk-clcap-demand.is-swapping { transform: none; opacity: .55; }
  .wk-capcust { opacity: 1; transform: none; }
}

/* Narrow-but-not-phone: give the bar its own line rather than squeezing it to
   a stub between the two figures. */
@media (max-width: 1000px) {
  .wk-cap-hero-head { flex-wrap: wrap; }
  .wk-cap-hero-chips { justify-content: flex-start; }
  .wk-cap-hero-split { flex-wrap: wrap; row-gap: 10px; }
  .wk-cap-hero-meterwrap { order: 3; flex-basis: 100%; }
  .wk-cap-hero-fig { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-cap-hero-fill { transition: none; }
}

/* ⚠️ NO `:root[data-theme="dark"]` block here, deliberately. The Work app is
   light-only: nothing in base.css or this file ever redefines --ink / --surf /
   --border for dark, and the handful of data-theme="dark" rules that do exist
   cover scrollbars and one popup with hard-coded colours. An earlier draft of
   this card painted itself #161a22 under that selector, which produced a single
   dark card on a fully light page — with the caption's <b> text still on --ink,
   i.e. near-black on near-black. The card follows the app's tokens instead, so
   it flips if and when the app ever gains a real dark theme. */

/* ══════════════════════════════════════════════════════════════════════════
   "WHERE IT IS GOING" IS TWO STYLESHEETS, NOT ONE. READ THIS FIRST.
   ──────────────────────────────────────────────────────────────────────────
   This block is the lower half of BOTH capacity bands, and it is written out
   twice so the two can be designed apart:

     :where(.wk-caps--supply)   Team → Capacity → EMPLOYEES  (.wk-cap-hero)
                                Mine → Capacity              (.wk-cap-hero)
     :where(.wk-caps--demand)   Team → Capacity → CLIENTS    (.wk-clcap)

   The scope rides the `.ax-cards-row` wrapper in Work.html. The bands' own
   shells already have separate namespaces; this was the last thing above the
   grid that a single edit could move on both screens at once.

   ⚠️ THE SCOPE IS `:where(…)`, NOT A PLAIN CLASS, AND THAT MATTERS. `:where()`
   weighs ZERO, so every rule keeps the exact specificity it had before the
   split — which is what makes the split provably inert rather than merely
   intended to be. Written as a plain class the block gains a weight step, and
   that flips ties elsewhere in the app: it is enough to start beating
   `.ax-card.is-zero.is-active { background: var(--surf) !important }`, which
   changed a zeroed, active chip on a phone from white to #f8fafc. If a scoped
   rule needs to win something, raise ITS weight — do not unwrap the
   `:where()`.

   ⚠️ EDITING ONE BAND MEANS EDITING ONE BLOCK. If you want the change on both,
   make it twice, on purpose. Hoisting a rule back out to an unscoped
   `.wk-capbd` welds the two designs together again, and the next divergent
   edit silently moves both screens.

   ⚠️ THE CLASS NAMES STAY SHARED because work.js writes them: the ring, the
   ranked rows and the tooltip are innerHTML from _renderWkCapBd(), which draws
   into whichever band is on screen and queries these by class. The wrapper's
   scope is what separates them — renaming the inner classes in one copy would
   just stop it matching.

   ⚠️ Two things stay GLOBAL and appear once, in the supply copy:
     • `:root { --wkch-* }` — the ramp tokens, which the `.wk-clcap` tiles read
       too. A band that wants its own ramp redefines them inside its own scope.
     • `.wk-capbd-tip*` — the tooltip is appended to <body> by the renderer, so
       it is outside both scopes and unreachable from either.

   The long design rationale (sequential ramp, five slices, no dark block) is
   written out once, on the supply copy. It applies to both.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   TEAM → CAPACITY → "WHERE IT IS GOING"  (.wk-capbd)
   ──────────────────────────────────────────────────────────────────────────
   The lower half of the capacity hero: a part-to-whole ring over the clients
   (or teammates) the committed hours belong to, and a ranked list beside it.
   The split above answers "how much of the week is spoken for"; this answers
   "by whom", which is the half you can act on.

   ⚠️ SEQUENTIAL RAMP, NOT CATEGORICAL HUES, and the two are not
   interchangeable here. Slice colour is assigned BY RANK — slot 1 is the
   biggest client — so a client's colour changes when its hours do. Under
   categorical (identity) hues that is a bug: colour must follow the entity,
   never its rank. One hue stepped light→dark encodes MAGNITUDE, which is
   exactly what rank is, so ranked assignment is correct rather than merely
   tolerated. Identity is carried by the swatch+name in the ranked list.
   Second reason: this panel has already spent red/amber/green on
   over-capacity / unassigned / covered — including on the card directly above
   this block — so a categorical slot landing on any of them would read as a
   verdict about that client rather than as its identity.

   ⚠️ THE STEPS ARE LITERAL HEX, NOT color-mix() OFF var(--c-blue). They are
   validated values — monotone lightness, every adjacent gap >= 0.06 L, the
   light end clearing 2:1 against the card, hue spread 10deg — and deriving
   them from a themeable primary would re-roll that validation against
   whatever a tenant set. The trade is deliberate: a custom theme primary does
   not tint the ring.

   ⚠️ FIVE STEPS, AND THE TAIL IS THE TRACK — there is no 6th "Other" colour.
   A residual bucket wants a neutral, but a low-chroma grey beside the palest
   ramp step cannot be separated: every candidate tested (#a8a29e, #9c9691,
   #b0aaa4, #9aa5b1, #b9c2cc) measured ΔE 3.6–9.4 against slot 5 for NORMAL
   colour vision, before considering protanopia — under the floor of 15, and a
   floor that neither texture nor direct labels excuses. So the tail is drawn
   in the TRACK colour: not a series at all, the visible absence of one. A
   ring that reads two-thirds full says "five clients are most of this week
   and the rest is spread thin", which is the true shape, and the ranked list
   carries the tail's own figures on a "+N more" row.

   ⚠️ NO DARK-THEME BLOCK, for the reason already documented on .wk-cap-hero:
   Work is light-only and nothing redefines --ink / --surf for dark, so a dark
   treatment here produces one dark patch on an otherwise light page.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --wkch-1: #00304f; --wkch-2: #004b7c; --wkch-3: #2e6b94;
  --wkch-4: #5285a6; --wkch-5: #759eb8;
  --wkch-track: #eceff3;
}

:where(.wk-caps--supply) .wk-capbd {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--border-s, #f1f5f9);
}
:where(.wk-caps--supply) .wk-capbd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
:where(.wk-caps--supply) .wk-capbd-t {
  flex: 1; min-width: 0;
  font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink3, #64748b); white-space: nowrap;
}
/* Own class names, own handler — `.gl-vt-btn` is claimed by the app-wide
   list/card/kanban delegate and would rewrite this row from under us, the same
   trap documented on .wk-capseg-btn. */
:where(.wk-caps--supply) .wk-capbd-seg {
  display: inline-flex; padding: 2px; gap: 2px; flex: none;
  background: var(--wt-neutral-bg, #f4f4f4); border-radius: 8px;
  border: 1px solid var(--border-s, #f1f5f9);
}
:where(.wk-caps--supply) .wk-capbd-seg-btn {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 10px; font-weight: 800; letter-spacing: .3px;
  color: var(--ink3, #64748b); padding: 4px 10px; border-radius: 6px;
  transition: background .18s ease, color .18s ease;
}
:where(.wk-caps--supply) .wk-capbd-seg-btn:hover { color: var(--ink2, #475569); }
:where(.wk-caps--supply) .wk-capbd-seg-btn.is-active {
  background: var(--surf, #fff); color: var(--ink, #0f172a); box-shadow: var(--shadow-sm);
}
/* `.wk-capbd-act` (the head's "Log time" button) is gone — Capacity is a
   planning surface and time gets logged from the home page. Nothing styles
   that class any more; do not re-add the rule without re-adding the button. */

/* Ring left, list right. The list is CAPPED rather than fractional: on a
   1480px shell a 1fr column came out 550px wide and every value ended up
   marooned a hand-span from the name it belongs to. */
/* Both columns capped and the pair CENTRED, rather than the list soaking up
   the slack. On a 1480px shell a fractional list came out 550px+ wide and
   every value ended up marooned a hand-span from the name it belongs to;
   leaving it capped but left-aligned just moved the hole to the card's right
   edge. Centred, the leftover becomes symmetric margin and reads as
   deliberate. */
:where(.wk-caps--supply) .wk-capbd-body {
  display: grid; grid-template-columns: 150px minmax(240px, 560px);
  justify-content: center;
  gap: 26px; align-items: center;
}
:where(.wk-caps--supply) .wk-capbd-chart { display: flex; align-items: center; justify-content: center; }
:where(.wk-caps--supply) .wk-capbd-ring { position: relative; width: 150px; height: 150px; }
:where(.wk-caps--supply) .wk-capbd-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
:where(.wk-caps--supply) .wk-capbd-arc {
  fill: none; stroke-linecap: butt; cursor: pointer;
  transition: opacity .18s ease, stroke-width .18s ease;
}
:where(.wk-caps--supply) .wk-capbd-arc:focus { outline: none; }
:where(.wk-caps--supply) .wk-capbd-arc:focus-visible { stroke-width: 20; }
/* Dim the rest rather than brighten the one — brightening would push a step
   off its validated lightness; dimming does not. */
:where(.wk-caps--supply) .wk-capbd-ring.has-hot .wk-capbd-arc { opacity: .32; }
:where(.wk-caps--supply) .wk-capbd-ring.has-hot .wk-capbd-arc.is-hot { opacity: 1; stroke-width: 20; }
:where(.wk-caps--supply) .wk-capbd-ring-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none; text-align: center;
}
:where(.wk-caps--supply) .wk-capbd-ring-v {
  font-size: 17px; font-weight: 900; line-height: 1.05; color: var(--ink, #0f172a);
  letter-spacing: -.4px; font-variant-numeric: tabular-nums;
}
:where(.wk-caps--supply) .wk-capbd-ring-l {
  margin-top: 3px; font-size: 8px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--ink3, #64748b); max-width: 92px; line-height: 1.25;
}

:where(.wk-caps--supply) .wk-capbd-rank { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:where(.wk-caps--supply) .wk-capbd-row {
  display: grid; grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center; gap: 9px; padding: 4px 7px; border-radius: 7px;
  cursor: pointer; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
:where(.wk-caps--supply) .wk-capbd-row:hover { background: var(--wt-neutral-bg, #f4f4f4); }
/* ── The Projects tab's copy of this block is READ-ONLY ──────────────────
   The drill handlers on `.wk-capbd-arc` / `.wk-capbd-row` key on
   `data-wkbd-key`, which is Team ▸ Capacity's selection state; the project
   ring deliberately carries no key, so those handlers bail and nothing
   happens on a click. A pointer cursor over an element that does nothing is
   a lie, so it does not get one — the hover tint stays, because the row
   still wants to be findable while the eye crosses from the ring to it. */
:where(.wk-caps--supply) .wk-capbd--static .wk-capbd-row,
:where(.wk-caps--supply) .wk-capbd--static .wk-capbd-arc { cursor: default; }
:where(.wk-caps--supply) .wk-capbd-row.is-hot { background: var(--c-blue-bg, #e6f3ff); border-color: var(--c-blue-soft, #cbd5f5); }
:where(.wk-caps--supply) .wk-capbd-sw { width: 9px; height: 9px; border-radius: 3px; }
/* The tail's swatch is an OUTLINE of the track, not a filled chip — it has to
   look like the empty part of the ring, because that is what it is. */
:where(.wk-caps--supply) .wk-capbd-sw.is-rest { background: var(--wkch-track); box-shadow: inset 0 0 0 1px var(--border, #e2e8f0); }
:where(.wk-caps--supply) .wk-capbd-row.is-rest { cursor: default; }
:where(.wk-caps--supply) .wk-capbd-row.is-rest:hover { background: transparent; }
:where(.wk-caps--supply) .wk-capbd-row.is-rest .wk-capbd-rname { color: var(--ink3, #64748b); }
:where(.wk-caps--supply) .wk-capbd-rn { min-width: 0; }
/* Name and its state note on one line, the note hard against the bar's right
   edge so the eye reads down a column of them. */
:where(.wk-caps--supply) .wk-capbd-rline { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
:where(.wk-caps--supply) .wk-capbd-rline .wk-capbd-rname { flex: 0 1 auto; }
/* ⚠️ Muted ink by default, and the ONLY colour it ever takes is the alarm.
   "17h free" is not good news or bad news — it is Monday-or-Friday dependent
   and this row cannot tell which — so painting it green would be a verdict the
   data does not support. Over capacity IS a verdict, and gets one. */
:where(.wk-caps--supply) .wk-capbd-rnote {
  flex: 0 0 auto; margin-left: auto;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1px;
  color: var(--ink2-4, #6b7280); white-space: nowrap;
}
:where(.wk-caps--supply) .wk-capbd-rnote.is-over { color: var(--c-red, #ef4444); }

/* ── The tail of the same question: who has NOTHING this week ────────────
   Not a series and never drawn as one — no swatch colour, no bar, no arc.
   They are separated by a hairline and a caption so the list cannot be
   misread as "these people have the smallest slices"; they have no slice at
   all, which is the entire point of listing them. */
:where(.wk-caps--supply) .wk-capbd-idle {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed var(--border, #e2e8f0);
}
:where(.wk-caps--supply) .wk-capbd-idle-cap {
  display: block; margin: 0 0 3px 7px;
  font-size: 8.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink3, #8d8d8d);
}
:where(.wk-caps--supply) .wk-capbd-row--idle .wk-capbd-rname { color: var(--ink2, #525252); font-weight: 600; }
/* An outline where a filled swatch would be: the same "absence of a slice"
   the tail row's swatch already says. */
:where(.wk-caps--supply) .wk-capbd-sw.is-idle {
  background: transparent; box-shadow: inset 0 0 0 1px var(--border, #e2e8f0);
}
:where(.wk-caps--supply) .wk-capbd-row--idle .wk-capbd-rv small { margin-top: 0; }
/* Text wears text tokens; the swatch beside it carries the colour. A name
   painted in its own slice colour would put the paler steps at 2.1:1. */
:where(.wk-caps--supply) .wk-capbd-rname {
  display: block;
  font-size: 11.5px; font-weight: 700; color: var(--ink, #0f172a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ⚠️ `display: block` IS LOAD-BEARING on both of these. They are <span>s, and
   .wk-capbd-rn is a grid item (so the browser blockifies IT) while its
   children are not — as inlines they ignored `height` outright and every bar
   rendered its full width by ZERO pixels tall. The list looked like names and
   numbers with the comparison simply missing, and nothing in the markup, the
   data or the colour was wrong. */
:where(.wk-caps--supply) .wk-capbd-rbar {
  display: block;
  margin-top: 5px; height: 5px; border-radius: 3px;
  background: var(--wkch-track); overflow: hidden;
}
:where(.wk-caps--supply) .wk-capbd-rbar > span { display: block; height: 100%; border-radius: 3px; min-width: 2px; }
:where(.wk-caps--supply) .wk-capbd-rv {
  text-align: right; font-size: 11.5px; font-weight: 800; color: var(--ink, #0f172a);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
:where(.wk-caps--supply) .wk-capbd-rv small {
  display: block; font-size: 9px; font-weight: 700; color: var(--ink3, #64748b);
  letter-spacing: .2px; margin-top: 2px;
}
:where(.wk-caps--supply) .wk-capbd-rank .wk-empty { padding: 12px 4px; font-size: 11.5px; }
/* The unpriced caveat. Never merged into the total above it — a value figure
   that did not say what it left out would be the one number on this panel that
   cannot be reconciled against an invoice. */
:where(.wk-caps--supply) .wk-capbd-caveat {
  margin-top: 9px; font-size: 10.5px; line-height: 1.45; color: #b45309;
  grid-column: 1 / -1;
}
:where(.wk-caps--supply) .wk-capbd-caveat b { font-weight: 800; }

/* Tooltip — appended to <body> by the renderer, so it is not clipped by the
   card's `overflow: hidden`, and pointer-events:none so it cannot steal the
   hover that spawned it. */
.wk-capbd-tip {
  position: fixed; z-index: 9998; pointer-events: none;
  background: #161616; color: #fff; padding: 7px 10px; border-radius: 8px;
  font-size: 11px; line-height: 1.5; font-weight: 600; max-width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.wk-capbd-tip b { font-weight: 800; font-variant-numeric: tabular-nums; }
.wk-capbd-tip-n { display: block; font-weight: 800; margin-bottom: 2px; }

/* ── narrow ──
   The ring goes first, not the ranked list. At this width the ring is the
   decorative half; the bars are what get read. */
@media (max-width: 1080px) {
  :where(.wk-caps--supply) .wk-capbd-body { grid-template-columns: minmax(220px, 1fr); }
  :where(.wk-caps--supply) .wk-capbd-chart { display: none; }
}
@media (max-width: 620px) {
  :where(.wk-caps--supply) .wk-capbd-head { flex-wrap: wrap; }
  :where(.wk-caps--supply) .wk-capbd-t { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.wk-caps--supply) .wk-capbd-arc, :where(.wk-caps--supply) .wk-capbd-row, :where(.wk-caps--supply) .wk-capbd-seg-btn { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   "WHERE IT IS GOING" — CLIENTS / DEMAND  (:where(.wk-caps--demand))
   ──────────────────────────────────────────────────────────────────────────
   The demand-side twin of the block above: same markup, same renderer, its own
   rules. Change this copy and only Team → Capacity → Clients moves. It ships
   as a copy of the supply block, so the split changed nothing on screen the
   day it landed; everything after that is free to diverge.
   ══════════════════════════════════════════════════════════════════════════ */


:where(.wk-caps--demand) .wk-capbd {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--border-s, #f1f5f9);
}
:where(.wk-caps--demand) .wk-capbd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
:where(.wk-caps--demand) .wk-capbd-t {
  flex: 1; min-width: 0;
  font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink3, #64748b); white-space: nowrap;
}

:where(.wk-caps--demand) .wk-capbd-seg {
  display: inline-flex; padding: 2px; gap: 2px; flex: none;
  background: var(--wt-neutral-bg, #f4f4f4); border-radius: 8px;
  border: 1px solid var(--border-s, #f1f5f9);
}
:where(.wk-caps--demand) .wk-capbd-seg-btn {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 10px; font-weight: 800; letter-spacing: .3px;
  color: var(--ink3, #64748b); padding: 4px 10px; border-radius: 6px;
  transition: background .18s ease, color .18s ease;
}
:where(.wk-caps--demand) .wk-capbd-seg-btn:hover { color: var(--ink2, #475569); }
:where(.wk-caps--demand) .wk-capbd-seg-btn.is-active {
  background: var(--surf, #fff); color: var(--ink, #0f172a); box-shadow: var(--shadow-sm);
}

:where(.wk-caps--demand) .wk-capbd-body {
  display: grid; grid-template-columns: 150px minmax(240px, 560px);
  justify-content: center;
  gap: 26px; align-items: center;
}
/* ── This copy is the LIST ON ITS OWN ──────────────────────────────────
   The two rules above are inherited from the day this block was split off the
   supply copy, and the geometry they describe — ring left, capped list right,
   the pair centred — is no longer what the demand side draws. Its ring moved
   up into `.wk-clcap-pie`, which took over the slot the "All Clients" tile
   held, so what is left here is the ranked list, sitting beside that pie as
   its legend. Full width of the column it now lives in.
   ⚠️ Kept as an override rather than an edit to the two rules above, because
   `:where()` weighs nothing: `.wk-capbd--legend .wk-capbd-body` is (0,2,0)
   against their (0,1,0), so this wins wherever it sits in the file — and the
   supply copy above stays a readable diff against this one. */
:where(.wk-caps--demand) .wk-capbd--legend {
  /* Beside the pie now rather than under the whole card, so the block's top
     border reads as a divider between the tiles and their legend — which is
     exactly what it is. */
  margin-top: 12px; padding-top: 11px;
}
.wk-capbd--legend .wk-capbd-body {
  /* minmax(0, …) rather than a floor: this out-specifies the narrow-width rule
     below, so a 240px minimum here would survive to phone widths and overflow
     the column. */
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  align-items: start;
}
:where(.wk-caps--demand) .wk-capbd-chart { display: flex; align-items: center; justify-content: center; }
:where(.wk-caps--demand) .wk-capbd-ring { position: relative; width: 150px; height: 150px; }
:where(.wk-caps--demand) .wk-capbd-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
:where(.wk-caps--demand) .wk-capbd-arc {
  fill: none; stroke-linecap: butt; cursor: pointer;
  transition: opacity .18s ease, stroke-width .18s ease;
}
:where(.wk-caps--demand) .wk-capbd-arc:focus { outline: none; }
:where(.wk-caps--demand) .wk-capbd-arc:focus-visible { stroke-width: 20; }

:where(.wk-caps--demand) .wk-capbd-ring.has-hot .wk-capbd-arc { opacity: .32; }
:where(.wk-caps--demand) .wk-capbd-ring.has-hot .wk-capbd-arc.is-hot { opacity: 1; stroke-width: 20; }
:where(.wk-caps--demand) .wk-capbd-ring-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none; text-align: center;
}
:where(.wk-caps--demand) .wk-capbd-ring-v {
  font-size: 17px; font-weight: 900; line-height: 1.05; color: var(--ink, #0f172a);
  letter-spacing: -.4px; font-variant-numeric: tabular-nums;
}
:where(.wk-caps--demand) .wk-capbd-ring-l {
  margin-top: 3px; font-size: 8px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--ink3, #64748b); max-width: 92px; line-height: 1.25;
}

:where(.wk-caps--demand) .wk-capbd-rank { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:where(.wk-caps--demand) .wk-capbd-row {
  display: grid; grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center; gap: 9px; padding: 4px 7px; border-radius: 7px;
  cursor: pointer; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
:where(.wk-caps--demand) .wk-capbd-row:hover { background: var(--wt-neutral-bg, #f4f4f4); }
:where(.wk-caps--demand) .wk-capbd-row.is-hot { background: var(--c-blue-bg, #e6f3ff); border-color: var(--c-blue-soft, #cbd5f5); }
:where(.wk-caps--demand) .wk-capbd-sw { width: 9px; height: 9px; border-radius: 3px; }

:where(.wk-caps--demand) .wk-capbd-sw.is-rest { background: var(--wkch-track); box-shadow: inset 0 0 0 1px var(--border, #e2e8f0); }
:where(.wk-caps--demand) .wk-capbd-row.is-rest { cursor: default; }
:where(.wk-caps--demand) .wk-capbd-row.is-rest:hover { background: transparent; }
:where(.wk-caps--demand) .wk-capbd-row.is-rest .wk-capbd-rname { color: var(--ink3, #64748b); }
:where(.wk-caps--demand) .wk-capbd-rn { min-width: 0; }

:where(.wk-caps--demand) .wk-capbd-rline { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
:where(.wk-caps--demand) .wk-capbd-rline .wk-capbd-rname { flex: 0 1 auto; }

:where(.wk-caps--demand) .wk-capbd-rnote {
  flex: 0 0 auto; margin-left: auto;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1px;
  color: var(--ink2-4, #6b7280); white-space: nowrap;
}
:where(.wk-caps--demand) .wk-capbd-rnote.is-over { color: var(--c-red, #ef4444); }

:where(.wk-caps--demand) .wk-capbd-idle {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed var(--border, #e2e8f0);
}
:where(.wk-caps--demand) .wk-capbd-idle-cap {
  display: block; margin: 0 0 3px 7px;
  font-size: 8.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink3, #8d8d8d);
}
:where(.wk-caps--demand) .wk-capbd-row--idle .wk-capbd-rname { color: var(--ink2, #525252); font-weight: 600; }

:where(.wk-caps--demand) .wk-capbd-sw.is-idle {
  background: transparent; box-shadow: inset 0 0 0 1px var(--border, #e2e8f0);
}
:where(.wk-caps--demand) .wk-capbd-row--idle .wk-capbd-rv small { margin-top: 0; }

:where(.wk-caps--demand) .wk-capbd-rname {
  display: block;
  font-size: 11.5px; font-weight: 700; color: var(--ink, #0f172a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

:where(.wk-caps--demand) .wk-capbd-rbar {
  display: block;
  margin-top: 5px; height: 5px; border-radius: 3px;
  background: var(--wkch-track); overflow: hidden;
}
:where(.wk-caps--demand) .wk-capbd-rbar > span { display: block; height: 100%; border-radius: 3px; min-width: 2px; }
:where(.wk-caps--demand) .wk-capbd-rv {
  text-align: right; font-size: 11.5px; font-weight: 800; color: var(--ink, #0f172a);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
:where(.wk-caps--demand) .wk-capbd-rv small {
  display: block; font-size: 9px; font-weight: 700; color: var(--ink3, #64748b);
  letter-spacing: .2px; margin-top: 2px;
}
:where(.wk-caps--demand) .wk-capbd-rank .wk-empty { padding: 12px 4px; font-size: 11.5px; }

:where(.wk-caps--demand) .wk-capbd-caveat {
  margin-top: 9px; font-size: 10.5px; line-height: 1.45; color: #b45309;
  grid-column: 1 / -1;
}
:where(.wk-caps--demand) .wk-capbd-caveat b { font-weight: 800; }

@media (max-width: 1080px) {
  :where(.wk-caps--demand) .wk-capbd-body { grid-template-columns: minmax(220px, 1fr); }
  /* ⚠️ THIS NO LONGER HIDES ANYTHING ON THE DEMAND SIDE, and it must not start
     to. The only `.wk-capbd-chart` left in this band is the one inside the pie
     card, where the ring is not the decorative half beside a list — it IS the
     card. `.wk-clcap-pie .wk-capbd-chart` (0,2,0) beats this (0,1,0) and keeps
     it visible; the rule stays so the two copies remain a readable diff. */
  :where(.wk-caps--demand) .wk-capbd-chart { display: none; }
}
@media (max-width: 620px) {
  :where(.wk-caps--demand) .wk-capbd-head { flex-wrap: wrap; }
  :where(.wk-caps--demand) .wk-capbd-t { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.wk-caps--demand) .wk-capbd-arc, :where(.wk-caps--demand) .wk-capbd-row, :where(.wk-caps--demand) .wk-capbd-seg-btn { transition: none; }
}
/* =========================================================   CLIENT CAPACITY BAND (.wk-clcap) — ONE TILE PER CLIENT
   The Clients half of the Capacity panel. Replaces the single aggregate hero
   that used to sit here: a sum across accounts ("38h scheduled, 22h assigned")
   answers a question nobody asks, because staffing decisions are always about
   one account. The head keeps the three totals; the rail below it gives every
   client its own scorecard — hours on this week's calendar, how much of that
   has an owner — and each tile is a real `.ax-card[data-wk-filter]`, so a click
   drills the grid to that client through the shared scorecard delegate.

   ⚠️ ONE HUE + RED + GREY, the same system as the hero above: the ramp's blue
   for an ordinary tile, red for a client whose unassigned pile is past what the
   team has left, grey for one with nothing on the calendar at all. No purple
   anywhere (purple is reserved app-wide for AI surfaces) and no green/amber
   pair either — those read as verdicts on a figure that has none. The client's
   own brand colour is confined to its monogram (`--_cl`).

   ⚠️ The row keeps `.ax-cards-row.wk-cap-herorow` — see the note on that class
   above for the three behaviours (hidden, ctx bar, block layout) that die with
   it. Everything the row's flex layout would do to a single child is
   neutralised there; only the tiles need their own geometry.
   ================================================================ */
.wk-clcap {
  position: relative; overflow: hidden;
  /* Same FAB gutter as the hero above — this card is the top element of the
     panel and the fixed FAB column runs down its right edge. */
  padding: 12px var(--wk-cap-fab-gutter, 18px) 13px 18px;
  border: 1px solid var(--border-s, var(--border, #e2e8f0));
  border-radius: var(--radius, 16px);
  background: var(--surf, #fff);
  box-shadow: var(--shadow-sm);
}
.wk-clcap::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--wkch-2, #004b7c);
}
.wk-clcap.is-short::before { background: linear-gradient(90deg, #f59e0b, #ef4444); }

.wk-clcap-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.wk-clcap-headl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wk-clcap-eyebrow {
  font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink3, #8d8d8d);
}
.wk-clcap-state { font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--ink2, #525252); }
.wk-clcap-state.is-ok    { color: var(--ink2, #525252); }
.wk-clcap-state.is-tight { color: #b45309; }
.wk-clcap-state.is-short { color: var(--c-red, #ef4444); }

/* The totals. Right-aligned columns so the three figures line up as a strip
   the eye can read across, rather than three labelled boxes. */
.wk-clcap-tot { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.wk-clcap-tot-i { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.wk-clcap-tot-i > b {
  font-size: 21px; font-weight: 900; line-height: 1; letter-spacing: -.7px;
  color: var(--ink, #161616);
}
.wk-clcap-tot-i > i {
  font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink3, #8d8d8d);
}
/* ⚠️ ONE HUE, and it is the ramp's — see the long note on .wk-cap-hero above.
   An earlier draft of this band painted "assigned" teal and "unassigned"
   amber, which are verdicts rather than readings (12h unassigned is healthy on
   Monday and alarming on Friday, and this card cannot tell which). The states
   that ARE verdicts keep red, and red only. */
.wk-clcap-tot-i.is-own > b  { color: var(--wkch-2, #004b7c); }
.wk-clcap-tot-i.is-open > b { color: var(--ink2, #525252); }
.wk-clcap.is-short .wk-clcap-tot-i.is-open > b { color: var(--c-red, #ef4444); }
/* Nothing booked anywhere: three zeros, and none of them is news. */
.wk-clcap.is-empty .wk-clcap-tot-i > b { color: var(--ink4, #c6c6c6); }

/* ── Pie beside rail ───────────────────────────────────────────────────
   The pie holds the slot the "All clients" tile used to, and it is roughly
   two tiles wide because that is what a readable two-ring chart needs. Fixed
   left column, not a fraction: the ring has one legible size and letting it
   grow with the card would leave a 300px hole beside three clients.
   ⚠️ Order is load-bearing — see the note in Work.html. The pie is the row's
   first `.ax-card`, which is what two separate reset paths activate. */
.wk-clcap-demand {
  display: grid; grid-template-columns: 292px minmax(0, 1fr);
  gap: 14px; align-items: start;
}
/* The tiles, then their ranked legend, in one column beside the pie. */
.wk-clcap-right { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 1180px) { .wk-clcap-demand { grid-template-columns: 250px minmax(0, 1fr); } }
/* Below this the rail's tiles hit their 150px floor and the pie starts eating
   the row it is supposed to explain. Stack, pie first. */
@media (max-width: 900px) {
  .wk-clcap-demand { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ── The pie card ──────────────────────────────────────────────────────
   An `.ax-card` (that is what the shared filter delegate keys off, and being
   one is how clicking the chart's background clears a drill), so the base
   tile geometry — centred column, 30px value, uppercase label — is undone the
   same way the tiles below undo it. */
.wk-clcap-demand .wk-clcap-pie {
  flex: none; min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 8px; padding: 11px 13px 13px; text-align: left;
  border-radius: 13px;
}
.wk-clcap-demand .wk-clcap-pie::before { border-radius: 13px 13px 0 0; }
/* ⚠️ NO HOVER LIFT. The tiles get one because a tile is a button you press;
   this card is a chart you point AT — every arc inside it has its own hover
   state and its own tooltip, and a card sliding 3px under the cursor while a
   tooltip is anchored to an arc inside it drags the tooltip off its target. */
.wk-clcap-demand .wk-clcap-pie:hover { transform: none; }
.wk-clcap-pie-eb {
  display: flex; align-items: baseline; gap: 6px; min-height: 22px;
}
.ax-cards-row .wk-clcap-pie-eb .ax-card-lbl {
  margin-top: 0; font-size: 12px; font-weight: 800; letter-spacing: -.1px;
  text-transform: none; color: var(--ink, #161616);
}
.wk-clcap-pie-eb small {
  font-size: 8.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink3, #8d8d8d);
}
/* The chart hook is `display:none` under 1080px for the Employees ring — that
   rule is right there and wrong here, because on this card the ring is not the
   decorative half beside a list, it IS the card. Two classes beat one, so this
   wins wherever it lands in the cascade. */
.wk-clcap-pie .wk-capbd-chart {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 10px; min-width: 0;
}
.wk-clcap-pie .wk-clcap-ring { width: 100%; max-width: 236px; height: auto; aspect-ratio: 1 / 1; }
/* ⚠️ The shared hot/focus rules widen an arc to a FIXED 20px, which is thinner
   than this ring's 25 — the highlighted slice would shrink. Restated in the
   pie's own terms. */
.wk-clcap-ring .wk-capbd-arc:focus-visible { stroke-width: 29; }
.wk-capbd-ring.wk-clcap-ring.has-hot .wk-capbd-arc.is-hot { stroke-width: 29; }
/* The inner ring is a reading, not a control: no pointer, no click target, and
   its own <title> for the hover. Dimming with the outer arcs would be wrong —
   selecting a client does not change how much of the WEEK is delivered. */
.wk-capbd-arc2 { fill: none; stroke-linecap: butt; pointer-events: auto; }
/* How far through the working week we are. A hairline in the channel between
   the two rings — see the pace note in work.js for why it sits there and why
   it is never a target. */
.wk-capbd-pace {
  stroke: var(--ink3, #8d8d8d); stroke-width: 2.4; stroke-linecap: round;
}
.wk-clcap-ring .wk-capbd-ring-v { font-size: 30px; letter-spacing: -1px; }
.wk-clcap-ring .wk-capbd-ring-l { margin-top: 1px; font-size: 8.5px; max-width: 108px; }
/* ⚠️ The cap is the INNER RING'S HOLE, not a typographic choice. At r=56 with
   a 14 stroke the clear circle is ~98 units across, ~100px at the ring's
   rendered size — and a money week reads "$5,580 of $17,280", which at any
   width that fits on one line runs out over the arcs. Narrow enough to wrap,
   with the size to match. */
.wk-clcap-ring-s {
  margin-top: 5px; font-size: 10px; font-weight: 700; line-height: 1.25;
  color: var(--ink2, #525252); font-variant-numeric: tabular-nums; max-width: 92px;
}

/* ── The key ───────────────────────────────────────────────────────────
   Named swatches for the INNER ring only. The outer ring's identities are
   carried by the ranked list under the card — five ramp steps in a 292px strip
   would be five labels nobody can read, and the list already does that job. */
.wk-clcap-pie-key {
  display: flex; flex-wrap: wrap; gap: 4px 12px; width: 100%;
  font-size: 10.5px; font-weight: 600; color: var(--ink3, #8d8d8d);
}
.wk-clcap-pie-k { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.wk-clcap-pie-k > i {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px; background: var(--wkch-track);
}
.wk-clcap-pie-k > b { font-weight: 900; color: var(--ink, #161616); font-variant-numeric: tabular-nums; }
.wk-clcap-pie-k.is-done  > i { background: var(--wkch-1, #00304f); }
.wk-clcap-pie-k.is-own   > i { background: var(--wkch-4, #5285a6); }
/* The tail's swatch trick, for the same reason: the unassigned arc IS the
   track, so its chip has to look like the empty part of the ring. */
.wk-clcap-pie-k.is-open  > i { background: var(--wkch-track); box-shadow: inset 0 0 0 1px var(--border, #e2e8f0); }
.wk-clcap-pie-k.is-short > i { background: var(--c-red, #ef4444); }
.wk-clcap-pie-k.is-short > b { color: var(--c-red, #ef4444); }
.wk-clcap-pie-foot {
  width: 100%; font-size: 9.5px; font-weight: 600; line-height: 1.45;
  color: var(--ink3, #8d8d8d);
}

/* ── The rail ──────────────────────────────────────────────────────────
   ⚠️ auto-fit + WRAP, never a sideways scroller. An earlier draft ran the
   tiles as one non-wrapping row that scrolled horizontally — which at 1180px
   put the fourth client half off the right edge behind no affordance at all,
   and a band whose whole job is "every client at a glance" cannot hide one.
   Wrapping costs a second row at narrow widths; hiding costs the feature. */
.wk-clcap-rail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  /* Room for the tiles' hover lift and focus ring, taken back off the card. */
  padding: 4px; margin: -4px;
}
.wk-clcap-empty {
  padding: 14px 4px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--ink3, #8d8d8d);
}

/* ── A tile ────────────────────────────────────────────────────────────
   These ARE `.ax-card`s (the shared filter delegate keys off that class), so
   the base tile geometry — centred, one big value, uppercase label — has to be
   undone. Two-class selectors beat the single-class base rules;
   work-mobile.css's `!important` block is answered in that file. */
.wk-clcap-rail .wk-clcap-tile {
  flex: none; min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 9px; padding: 11px 12px 12px; text-align: left;
  border-radius: 13px;
}
.wk-clcap-rail .wk-clcap-tile::before { border-radius: 13px 13px 0 0; }
.wk-clcap-rail .wk-clcap-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.wk-clcap-rail .wk-clcap-tile:active { transform: scale(.985); }

/* min-height = the monogram's height, so a tile whose mark fails to load still
   holds the same head depth as its neighbours and the headline figures stay on
   one line across the rail. */
.wk-clcap-t-head { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 22px; }
.wk-clcap-t-logo {
  position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 8.5px; font-weight: 900; letter-spacing: .2px;
  background: color-mix(in srgb, var(--_cl, #64748b) 14%, #fff);
  color: var(--_cl, #64748b);
}
.wk-clcap-t-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-clcap-t-logo.is-mark svg { display: block; }
/* The name doubles as the tile's `.ax-card-lbl` — that is what the shared
   delegate reads for the "Showing: …" bar — so it has to be that class and
   still read as a name, not as a 9px uppercase caption. */
.ax-cards-row .wk-clcap-t-nm {
  margin-top: 0; font-size: 12px; font-weight: 800; letter-spacing: -.1px;
  text-transform: none; color: var(--ink, #161616);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-clcap-t-fig { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.wk-clcap-t-fig > b {
  font-size: 22px; font-weight: 900; line-height: 1; letter-spacing: -.9px;
  color: var(--ink, #161616);
}
.wk-clcap-t-fig > i {
  font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--ink3, #8d8d8d);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Nothing booked is not a headline number. */
.wk-clcap-tile.is-idle .wk-clcap-t-fig > b { color: var(--ink4, #c6c6c6); }

.wk-clcap-t-bar {
  display: block; height: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--border, #e0e0e0) 65%, #fff);
}
.wk-clcap-t-bar > i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--wkch-2, #004b7c);
  transition: width .45s var(--ease-spring);
}
.wk-clcap-t-split {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 10px; font-weight: 600; color: var(--ink3, #8d8d8d);
  white-space: nowrap; min-width: 0;
}
.wk-clcap-t-split > span { overflow: hidden; text-overflow: ellipsis; }
.wk-clcap-t-split b { font-weight: 900; color: var(--ink2, #525252); }
.wk-clcap-t-split .is-own b  { color: var(--wkch-2, #004b7c); }
.wk-clcap-t-split .is-open b { color: var(--ink2, #525252); }
.wk-clcap-tile.is-over .wk-clcap-t-split .is-open b { color: var(--c-red, #ef4444); }
.wk-clcap-tile.is-idle .wk-clcap-t-split b { color: var(--ink4, #c6c6c6); }

/* Narrow desktop: the tracks reach their 150px floor, so the two caption lines
   have to give up a point rather than ellipsise their own numbers away. */
@media (max-width: 1280px) {
  .wk-clcap-t-split { font-size: 9.5px; }
  .wk-clcap-t-fig > i { font-size: 8px; }
}
@media (max-width: 1000px) {
  .wk-clcap-head { gap: 10px; }
  .wk-clcap-tot { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-clcap-t-bar > i { transition: none; }
  .wk-clcap-rail .wk-clcap-tile:hover { transform: none; }
}
/* ⚠️ No `:root[data-theme="dark"]` block here either — same reason as the
   hero above: this app is light-only and a dark block paints one dark card on
   a light page. */

/* ══════════════════════════════════════════════════════════════════════════
   PROJECT CAPACITY — THE COMPOSITION LEAD, THE CARD, THE COMPANY RING
   ──────────────────────────────────────────────────────────────────────────
   Tyler, 2026-08-17: *"i expect to see the company logo actually showing up,
   and then i want an actual good-looking project card. it needs to be easy to
   see the capacity versus what's been done, not just what's been assigned ...
   same with the scorecards: copy the same better design that we're having ...
   i want there to be that chart where you have the donut chart that shows all
   the different companies."*

   Everything in this block is the THREE-COLOUR STORY, drawn at three sizes —
   the lead tile's 9px bar, a grid card's 7px bar, a list row's 4px bar:

     ▓ GREEN  delivered   — finished, stamped with the day it got done
     ▓ BLUE   assigned    — somebody is carrying it and has not finished it
     ▒ AMBER  to place    — on the calendar with nobody on it   (hatched)

   ⚠️ ONE MEANING PER COLOUR, ACROSS ALL THREE SIZES. The pre-existing
   `.wk-capcl-bar-own` is GREEN and used to mean "has an owner" on this very
   card — which is now the blue segment's job, because green had to be freed up
   for the thing the reader actually asked to see. `.wk-pcap-bar` re-points it
   rather than the markup emitting a fourth class name; the Clients band's card
   keeps the original two-segment meaning and is untouched.
   ⚠️ AMBER IS HATCHED WHEREVER IT APPEARS, and hatching is not decoration: an
   unowned hour is provisional, and the Clients card already says so this way.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The lead: a COMPOSITION bar, not a capacity meter ─────────────────────
   Three segments over the period's book, so they ALWAYS fill the track. That
   is the opposite of the Team band's lead, where a full bar means "no room
   left" — so this modifier has to opt out of every fill-driven recolour that
   block sets up, or a busy week paints itself red for being busy. `.is-over`
   still lands on this tile, but work.js only sets it when a project is past a
   plan somebody actually wrote (see _renderProjCapacity). */
.wk-capld--comp .wk-capld-seg--done { background: var(--c-green, #16a34a); }
.wk-capld--comp .wk-capld-key--done::before { background: var(--c-green, #16a34a); box-shadow: none; }
.wk-capld--comp .wk-capld-seg--place,
.wk-capld--comp.is-over .wk-capld-seg--place {
  background: repeating-linear-gradient(135deg,
    var(--c-amber, #f59e0b) 0 5px,
    color-mix(in srgb, var(--c-amber, #f59e0b) 45%, var(--surf, #fff)) 5px 10px);
}
.wk-capld--comp .wk-capld-key--place::before,
.wk-capld--comp.is-over .wk-capld-key--place::before {
  box-shadow: none;
  background: repeating-linear-gradient(135deg,
    var(--c-amber, #f59e0b) 0 3px,
    color-mix(in srgb, var(--c-amber, #f59e0b) 45%, var(--surf, #fff)) 3px 6px);
}
/* ⚠️ THE SEGMENTS KEEP THEIR COLOUR WHEN A PROJECT IS OVER PLAN. `.is-over`
   here means "a plan somewhere in this list is blown", which is a fact about
   one project and says nothing about the mix of the portfolio's hours — so it
   colours the VERDICT (the base block already does) and leaves the bar alone. */
.wk-capld--comp.is-over .wk-capld-seg--alloc { background: var(--wkch-2, #004b7c); }
.wk-capld--comp.is-over .wk-capld-key--alloc::before { background: var(--wkch-2, #004b7c); }
/* The second figure is Delivered here, not Rolled Over, and it wants the same
   hairline separation — one thought, two numbers — without inheriting the
   roll-over tile's grey-at-zero / red-on-blame colour states. */
.wk-capld-fig--done { position: relative; padding-left: 13px; }
.wk-capld-fig--done::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 1px;
  background: color-mix(in srgb, var(--border, #e2e8f0) 90%, transparent);
}
/* Grey at zero: "0h delivered" on a Monday is the expected state and should not
   draw the eye. Green only once there is something to report. */
.wk-capld-fig--done .ax-card-val { color: var(--ink4, #94a3b8); }
.wk-capld-fig--done.is-some .ax-card-val { color: var(--c-green, #15803d); }
/* ⚠️ 720px, matching `.wk-capld-fig--roll` — NOT an earlier breakpoint of its
   own. The lead goes full-width at 1320px, so between 720 and 1320 it has more
   room for its two figures than it had at desktop, and stacking them there is
   premature. Read the twin rule in the `max-width: 720px` block. */
@media (max-width: 720px) {
  .wk-capld-fig--done { padding-left: 0; padding-top: 11px; }
  .wk-capld-fig--done::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
}

/* ── THE PROJECT CARD ──────────────────────────────────────────────────────
   `.wk-pcap-card` is a `.wk-cap-clientcard` first: the box, the state edges,
   the company mark, the fact line and the foot are all inherited, so the two
   cards cannot drift. What is added is the third bar segment and the two rows
   that turn a bar into figures you can allocate against. */
.wk-pcap-bar { height: 7px; }
/* Re-pointed, not renamed — see the block note. */
.wk-pcap-bar .wk-capcl-bar-own { background: var(--wkch-2, #004b7c); }
.wk-pcap-bar-done {
  background: var(--c-green, #16a34a);
  transition: width .28s cubic-bezier(.22, 1, .36, 1);
}
/* An over-plan card keeps the green and the blue: the hatch is the only segment
   the alarm belongs on, because unplaced hours are what a blown plan costs. */
.wk-pcap-card.is-over .wk-pcap-bar-done { background: var(--c-green, #16a34a); }

/* The three figures, in a fixed order on every card. `space-between` rather
   than a gap: the eye reads DOWN the "to place" column across a grid of these
   looking for the period's work, and that only works if the third key starts at
   the same x on every card. */
.wk-pcap-leg {
  display: flex; justify-content: space-between; gap: 4px;
  margin-top: -1px;
  font-size: 10px; font-weight: 650; color: var(--ink3, #64748b);
}
.wk-pcap-key {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  white-space: nowrap;
}
.wk-pcap-key b { font-weight: 850; font-size: 11.5px; color: var(--ink2, #475569); }
.wk-pcap-key::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 2px;
  background: var(--surf2, #f1f5f9);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #e2e8f0) 80%, transparent);
}
.wk-pcap-key--done::before { background: var(--c-green, #16a34a); box-shadow: none; }
.wk-pcap-key--done b { color: var(--c-green, #15803d); }
.wk-pcap-key--own::before { background: var(--wkch-2, #004b7c); box-shadow: none; }
.wk-pcap-key--own b { color: var(--ink, #0f172a); }
.wk-pcap-key--open::before {
  box-shadow: none;
  background: repeating-linear-gradient(135deg,
    var(--c-amber, #f59e0b) 0 3px,
    color-mix(in srgb, var(--c-amber, #f59e0b) 45%, var(--surf, #fff)) 3px 6px);
}
/* ⚠️ ZERO IS QUIET, not absent. The key stays on the card so the row keeps its
   shape; it just stops competing with the two figures that have hours in them.
   Dropping it would give the grid a ragged fourth row. */
.wk-pcap-key--open::before { opacity: .45; }
.wk-pcap-key--open.is-some::before { opacity: 1; }
.wk-pcap-key--open b { color: var(--ink4, #94a3b8); }
.wk-pcap-key--open.is-some b { color: var(--c-amber, #b45309); }

/* ── Whose hours these are ─────────────────────────────────────────────────
   One line, three names, ellipsised. `min-width: 0` on the flex items is what
   lets the LINE truncate instead of the row overflowing its 280px track. */
.wk-pcap-who {
  display: flex; align-items: center; gap: 4px 9px;
  min-width: 0; overflow: hidden;
  font-size: 10.5px; font-weight: 600; color: var(--ink3, #64748b);
}
.wk-pcap-who > span {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-pcap-who b { font-weight: 850; color: var(--ink2, #475569); }
.wk-pcap-who i {
  flex: none; display: grid; place-items: center;
  width: 16px; height: 16px; border-radius: 999px;
  font: 800 8px/1 'Inter', system-ui, sans-serif; font-style: normal;
  letter-spacing: .02em;
  background: color-mix(in srgb, var(--_cl, #6366f1) 15%, #fff);
  color: var(--_cl, #6366f1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_cl, #6366f1) 24%, transparent);
}
.wk-pcap-who-more { color: var(--ink4, #94a3b8); font-weight: 750; }

/* ── "Plan the week" ───────────────────────────────────────────────────────
   The card opens Plan ▸ Capacity, so it says so rather than leaving the reader
   to discover it. It rides in the foot beside the verdict chips and is pushed
   right, so it reads as the card's action rather than as a fourth chip.
   ⚠️ A <span aria-hidden>, not a button: the whole card is the control (a
   `div[role=button]`), and a real <button> nested in it would both steal the
   click and pick up dashboard-meta.js's runtime radius patch. */
.wk-pcap-go {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 7px;
  font-size: 10px; font-weight: 800; letter-spacing: .2px;
  color: var(--wkch-2, #004b7c);
  background: color-mix(in srgb, var(--wkch-2, #004b7c) 8%, transparent);
  opacity: 0; transform: translateX(-3px);
  transition: opacity .16s ease, transform .16s ease;
}
.wk-pcap-go::after { content: '\2192'; font-weight: 900; }
.wk-pcap-card:hover .wk-pcap-go,
.wk-pcap-card:focus-visible .wk-pcap-go { opacity: 1; transform: none; }
/* The foot is `.prog-staff-foot` — programs.css owns it and does not promise a
   flex row, so the auto margin above needs one stated here. */
.wk-pcap-card .prog-staff-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   WHERE THE PERIOD IS GOING — BY COMPANY   (.wk-pcbd)
   ──────────────────────────────────────────────────────────────────────────
   The ring and its geometry are Team ▸ Capacity's, borrowed class for class
   (`.wk-capbd-ring` / `-arc` / `-mid` / `-sw` / `-rn` / `-rbar` / `-rv`) so the
   two are the same object at two sizes of data. What is new is the GROUPING:
   companies own the arcs, and each company's projects hang under its row —
   because an arc is a share and a project is the thing you can go and plan.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ `align-items: start`, overriding the shared `center`. Grouped, this list is
   routinely three times the ring's height, and centring pushed the ring into the
   middle of a scroller with its own caption off screen. */
:where(.wk-caps--supply) .wk-pcbd .wk-capbd-body {
  align-items: start; gap: 26px;
  /* Wider than the flat list's 560px cap and still capped: these rows carry a
     logo, a name, a state note, a bar, an hour figure AND a share, plus a
     nested project list — 560px ellipsised every project name. Still CENTRED
     rather than fractional, for the reason the shared rule states: the leftover
     becomes symmetric margin and reads as deliberate, where a 1fr list on a
     1480px shell marooned every value a hand-span from its name. */
  grid-template-columns: 150px minmax(280px, 820px);
}
/* Sticky so the total and the hovered company's name stay put while the reader
   scrolls the groups beside them — the ring's middle IS the tooltip here. */
:where(.wk-caps--supply) .wk-pcbd .wk-capbd-chart { position: sticky; top: 4px; }
:where(.wk-caps--supply) .wk-pcbd .wk-capbd-rank {
  gap: 7px; max-height: 356px; overflow-y: auto; overflow-x: hidden;
  padding-right: 4px; scrollbar-width: thin;
  /* ⚠️ THE FADE IS THE SCROLL CUE. Capped, this list routinely cuts a company's
     project row in half at the bottom edge, and a half-drawn row with a hard
     edge above it reads as a rendering fault rather than as "there is more".
     A mask is the only way to say it without stealing a row's height for a
     gradient element — and it lifts once the list is scrolled to the end.
     The `to bottom, black … transparent` pair keeps the top fully opaque. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}
/* No cap, no cut, no mask — an unscrollable list must not look faded out. */
:where(.wk-caps--supply) .wk-pcbd .wk-capbd-rank.is-whole {
  -webkit-mask-image: none; mask-image: none;
}
/* The ring's caption when a company is hovered. Two lines of room reserved so
   the total does not jump as a long company name wraps in and out. */
:where(.wk-caps--supply) .wk-pcbd .wk-capbd-ring-l {
  max-width: 104px; min-height: calc(2 * 1.25em);
  display: flex; align-items: center; justify-content: center;
}
:where(.wk-caps--supply) .wk-pcbd .wk-capbd-ring-l.is-name {
  text-transform: none; letter-spacing: 0; font-size: 9.5px;
  color: var(--ink, #0f172a);
}

/* ── One company ──────────────────────────────────────────────────────────── */
.wk-pcbd-grp {
  border: 1px solid var(--border-s, #f1f5f9); border-radius: 10px;
  background: var(--surf, #fff);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wk-pcbd-grp.is-hot {
  border-color: var(--c-blue-soft, #cbd5f5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-blue, #0f62fe) 8%, transparent);
}
/* The header is the Team band's ranked row plus a logo column. Same grid, one
   extra track — so the swatch, the bar and the value all still line up down the
   list exactly as they do over there. */
:where(.wk-caps--supply) .wk-pcbd-co {
  display: grid; grid-template-columns: 9px 26px minmax(0, 1fr) auto;
  align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 9px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease;
}
:where(.wk-caps--supply) .wk-pcbd-co:hover { background: var(--wt-neutral-bg, #f4f4f4); }
:where(.wk-caps--supply) .wk-pcbd-co:focus-visible {
  outline: 2px solid var(--c-blue, #0f62fe); outline-offset: -1px;
}
:where(.wk-caps--supply) .wk-pcbd-co.is-hot { background: var(--c-blue-bg, #e6f3ff); }
/* The tail companies have no arc, so their name is not painted as a series
   member — the same rule the `.is-rest` swatch states. */
:where(.wk-caps--supply) .wk-pcbd-co.is-tail .wk-capbd-rname { color: var(--ink2, #525252); }

/* The company mark. Rounded square, not a circle — a logo is not a face, the
   same distinction `.wk-capcl-logo` draws one screen over. Initials sit
   underneath; the <img> covers them when a real mark loads, and _wkImgFallback
   removes it again if every candidate URL dies. */
.wk-pcbd-mark {
  position: relative; flex: none;
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--_cl, #6366f1) 12%, #fff);
  color: var(--_cl, #6366f1);
  font: 800 9px/1 'Inter', system-ui, sans-serif; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_cl, #6366f1) 22%, transparent);
}
.wk-pcbd-mark img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff; padding: 2px;
}
/* The support rail wants the same mark at the size that rail's avatars are. */
.wk-pcbd-mark--mini { width: 28px; height: 28px; border-radius: 8px; font-size: 9.5px; }

/* ── That company's projects ──────────────────────────────────────────────── */
.wk-pcbd-pjs {
  padding: 0 9px 8px 44px;   /* aligned under the company NAME, not its swatch */
  display: flex; flex-direction: column; gap: 1px;
}
.wk-pcbd-pj {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  padding: 5px 7px; border-radius: 7px;
  border-left: 2px solid var(--border, #e2e8f0);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.wk-pcbd-pj:hover { background: var(--wt-neutral-bg, #f4f4f4); border-left-color: var(--wkch-2, #004b7c); }
.wk-pcbd-pj:focus-visible { outline: 2px solid var(--c-blue, #0f62fe); outline-offset: -1px; }
.wk-pcbd-pj.is-over { border-left-color: var(--c-amber, #f59e0b); }
/* "3 more projects" / "2 with nothing scheduled" are COUNTS, not rows you can
   open — so they lose the pointer and the hover. A pointer over something that
   does nothing is a lie (the `.wk-capbd--static` note states the same rule). */
.wk-pcbd-pj.is-more,
.wk-pcbd-pj.is-idle { cursor: default; border-left-style: dashed; }
.wk-pcbd-pj.is-more:hover,
.wk-pcbd-pj.is-idle:hover { background: transparent; border-left-color: var(--border, #e2e8f0); }
.wk-pcbd-pj.is-more .wk-pcbd-pj-name,
.wk-pcbd-pj.is-idle .wk-pcbd-pj-name { color: var(--ink3, #64748b); font-weight: 650; }

.wk-pcbd-pj-main { min-width: 0; display: block; }
.wk-pcbd-pj-name {
  display: block; font-size: 11px; font-weight: 750; color: var(--ink, #0f172a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ⚠️ `display: flex` IS LOAD-BEARING — these are <span>s inside a grid item, so
   the browser blockifies the ITEM but not its children, and as inlines they
   ignore `height` outright and render every bar zero pixels tall. That failure
   looks exactly like a data bug and is not one; the twin note lives on
   `.wk-capbd-rbar`. */
.wk-pcbd-pj-bar {
  display: flex; margin-top: 4px; height: 4px; border-radius: 3px;
  overflow: hidden; background: var(--wkch-track, #eceff3);
}
.wk-pcbd-pj-bar > span { display: block; height: 100%; min-width: 2px; }
.wk-pcbd-pj-bar > .is-done { background: var(--c-green, #16a34a); }
.wk-pcbd-pj-bar > .is-own { background: var(--wkch-2, #004b7c); }
.wk-pcbd-pj-bar > .is-open {
  background: repeating-linear-gradient(135deg,
    var(--c-amber, #f59e0b) 0 3px,
    color-mix(in srgb, var(--c-amber, #f59e0b) 45%, var(--surf, #fff)) 3px 6px);
}
.wk-pcbd-pj-who {
  display: block; margin-top: 4px;
  font-size: 9.5px; font-weight: 600; color: var(--ink3, #64748b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-pcbd-pj-who b { font-weight: 850; color: var(--ink2, #475569); }
.wk-pcbd-pj-who i { font-style: italic; color: var(--ink4, #94a3b8); }
.wk-pcbd-pj-v {
  text-align: right; font-size: 11px; font-weight: 800; color: var(--ink, #0f172a);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wk-pcbd-pj-v small {
  display: block; margin-top: 2px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .2px; color: var(--ink3, #64748b);
}
/* The row's own affordance, revealed on hover exactly as the grid card's is —
   one vocabulary for "this opens the plan" wherever it appears on the panel. */
.wk-pcbd-pj-go {
  flex: none; padding: 2px 7px; border-radius: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  color: var(--wkch-2, #004b7c);
  background: color-mix(in srgb, var(--wkch-2, #004b7c) 9%, transparent);
  opacity: 0; transition: opacity .14s ease;
}
.wk-pcbd-pj:hover .wk-pcbd-pj-go,
.wk-pcbd-pj:focus-visible .wk-pcbd-pj-go { opacity: 1; }

/* ⚠️ Narrow: the two columns STACK rather than the list being squeezed under a
   150px ring. `.wk-capbd-body`'s shared rule is a two-column grid at every
   width, and at 900px that left the project rows about 190px wide — every name
   an ellipsis and every people line gone. */
@media (max-width: 1080px) {
  :where(.wk-caps--supply) .wk-pcbd .wk-capbd-body {
    grid-template-columns: minmax(0, 1fr); justify-content: stretch;
  }
  :where(.wk-caps--supply) .wk-pcbd .wk-capbd-chart { position: static; }
  :where(.wk-caps--supply) .wk-pcbd .wk-capbd-rank { max-height: none; }
}
@media (max-width: 560px) {
  .wk-pcbd-pjs { padding-left: 14px; }
  :where(.wk-caps--supply) .wk-pcbd-co { grid-template-columns: 9px 24px minmax(0, 1fr) auto; gap: 7px; }
  /* The reveal-on-hover affordances are dead weight on a touch screen — there is
     no hover to reveal them with, so they are simply always on. */
  .wk-pcap-go, .wk-pcbd-pj-go { opacity: 1; transform: none; }
  .wk-pcap-leg { flex-wrap: wrap; justify-content: flex-start; gap: 3px 10px; }
}
/* The line with nobody on it. Italic and quiet — it is a statement about an
   absence, not a name, and it must not read as a person called "nobody". */
.wk-pcap-who.is-none > span { font-style: italic; color: var(--ink4, #94a3b8); font-weight: 600; }
/* ⚠️ THE ROW IS THE AVATAR'S HEIGHT WHETHER OR NOT IT HAS ONE. A 16px initials
   chip sets this line's box on a card that can name somebody; a card that
   cannot drew a 13px text line instead and came out 5px shorter than its
   neighbours in the grid, which puts every chip and legend below it off the
   shared baseline. The whole reason the legend and this row are unconditional
   is that the grid must be scannable straight down a column. */
.wk-pcap-who { min-height: 16px; }

/* ⚠️ THE RING BLOCK CARRIES ITS OWN SURFACE. `.wk-capbd`'s shared rule is a
   hairline and a top margin — right when the block sits INSIDE a card, which is
   where Team ▸ Capacity's lives. This band's host is `.wk-cap-hero--sc`, whose
   whole job is to give the hero's chrome BACK to the individual scorecards, so a
   borrowed hairline left the ring and its companies floating on the page
   background under a row of cards. A browser screenshot is what caught it. */
:where(.wk-caps--supply) .wk-pcbd {
  margin-top: 12px; padding: 14px 16px 15px;
  border: 1px solid var(--border, #e2e8f0); border-top: 1px solid var(--border, #e2e8f0);
  border-radius: 14px; background: var(--surf, #fff);
  box-shadow: var(--shadow-sm);
}
/* The list is never shorter than the ring beside it — a 150px ring against three
   40px rows reads as a chart somebody forgot to finish. */
:where(.wk-caps--supply) .wk-pcbd .wk-capbd-rank { min-height: 150px; }
@media (max-width: 1080px) {
  :where(.wk-caps--supply) .wk-pcbd .wk-capbd-rank { min-height: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE ALLOCATION QUEUE  —  Projects ▸ Capacity, and the Mine ⁄ Team twins
   ──────────────────────────────────────────────────────────────────────────
   Tyler, 2026-08-17: *"it needs to be easier to see what areas we still need
   to allocate towards. This is super confusing … I need to be able to see
   everything a whole lot easier."* Asked how far to collapse the panel, he
   chose *"one queue, cut the rest"* — so the by-company donut, the grid of
   project cards and the three-module support rail all left, and this is what
   stands in their place. The markup is in work.js (`_wkPcQueueHTML`).

   The rules that shape every block below:
     · ONE COLUMN. The old grid put four cards across, which is a good shape
       for browsing and a bad one for a worklist — a column of shortfalls
       cannot be read down when the column is four abreast.
     · THE SHORTFALL IS RIGHT-ALIGNED AND ALWAYS IN THE SAME PLACE, on the
       company header and on every project row, so the eye runs down one x.
       A settled row keeps the slot and empties it rather than closing it up.
     · GREEN IS ALLOWED (the app-wide reversal of 2026-08-17), but only where
       "nothing waiting" is genuinely the good outcome. Being OVER an
       allocation is not painted red anywhere here — Tyler: *"it's not the end
       of the world if we go under or over."*
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ SPANS THE CARD GRID. The three hosts are still declared
   `grid-template-columns: repeat(auto-fill, …)` for the card grid this
   replaced, and a queue dropped into one track would render as a column of
   280px rows down the left of the panel. */
.wk-pcq { grid-column: 1 / -1; min-width: 0; display: block; }

.wk-pcq-sec { margin: 0 0 14px; }
.wk-pcq-sech {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline; gap: 10px;
  padding: 0 2px 7px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  margin-bottom: 9px;
}
.wk-pcq-sect {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink, #0f172a);
}
.wk-pcq-secn { font-size: 11px; color: var(--ink3, #64748b); font-weight: 600; }
.wk-pcq-secv {
  font-size: 15px; font-weight: 800; color: var(--ink, #0f172a);
  font-variant-numeric: tabular-nums;
}
.wk-pcq-sec.is-wait .wk-pcq-sect,
.wk-pcq-sec.is-wait .wk-pcq-secv { color: var(--c-red, #ef4444); }

/* The settled companies. A `<details>` so click-outside and the keyboard come
   free, and shut by default — they are not what the screen is for, but they
   are still where you go to move an hour off somebody. */
.wk-pcq-rest > summary { cursor: pointer; list-style: none; }
.wk-pcq-rest > summary::-webkit-details-marker { display: none; }
.wk-pcq-rest > summary::after {
  content: "\203A"; font-size: 15px; color: var(--ink3, #64748b);
  transition: transform .16s ease; display: inline-block;
}
.wk-pcq-rest[open] > summary::after { transform: rotate(90deg); }
.wk-pcq-rest > summary { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.wk-pcq-rest > summary:hover .wk-pcq-sect { color: var(--wkch-2, #004b7c); }

.wk-pcq-clear {
  padding: 14px; margin: 0 0 14px;
  border: 1px solid color-mix(in srgb, var(--c-green, #16a34a) 26%, var(--surf, #fff));
  background: color-mix(in srgb, var(--c-green, #16a34a) 7%, var(--surf, #fff));
  border-radius: 10px; font-size: 12.5px; color: var(--ink2, #334155);
}
.wk-pcq-clear b { color: var(--ink, #0f172a); }

/* ── A company ──────────────────────────────────────────────────────────── */
.wk-pcq-co {
  border: 1px solid var(--border, #e2e8f0); border-radius: 11px;
  background: var(--surf, #fff); overflow: hidden; margin: 0 0 9px;
}
.wk-pcq-co.is-wait {
  border-color: color-mix(in srgb, var(--c-red, #ef4444) 30%, var(--border, #e2e8f0));
}
.wk-pcq-cohead {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--wt-neutral-bg, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.wk-pcq-conm {
  min-width: 0; font-size: 13px; font-weight: 800; color: var(--ink, #0f172a);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-pcq-conm small {
  display: block; font-size: 10.5px; font-weight: 600; color: var(--ink3, #64748b);
  margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-pcq-coshort {
  text-align: right; font-size: 15px; font-weight: 800; line-height: 1.1;
  color: var(--c-red, #ef4444); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wk-pcq-coshort small {
  display: block; font-size: 9.5px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink3, #64748b); margin-top: 1px;
}
.wk-pcq-coshort.is-ok { color: var(--c-green, #16a34a); font-size: 12px; }

/* ── A project ──────────────────────────────────────────────────────────── */
.wk-pcq-pj {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  border-top: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 60%, transparent);
}
.wk-pcq-co > .wk-pcq-pj:first-of-type { border-top: 0; }
.wk-pcq-pj.is-open { background: color-mix(in srgb, var(--wkch-2, #004b7c) 4%, var(--surf, #fff)); }

.wk-pcq-pjhead {
  min-width: 0; display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 96px auto 62px;
  align-items: center; gap: 10px;
  padding: 9px 4px 9px 10px; cursor: pointer;
  transition: background .14s ease;
}
.wk-pcq-pjhead:hover { background: color-mix(in srgb, var(--wkch-2, #004b7c) 5%, transparent); }
.wk-pcq-pjhead:focus-visible { outline: 2px solid var(--c-blue, #0f62fe); outline-offset: -2px; }
.wk-pcq-chev { display: flex; align-items: center; color: var(--ink3, #64748b); }
.wk-pcq-chev svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .16s cubic-bezier(.22, 1, .36, 1);
}
.wk-pcq-pj.is-open .wk-pcq-chev svg { transform: rotate(90deg); }

.wk-pcq-pjmain { min-width: 0; }
.wk-pcq-pjname {
  display: block; font-size: 12.5px; font-weight: 750; color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-pcq-pjnote {
  display: block; font-size: 10.5px; font-weight: 600; color: var(--ink3, #64748b);
  margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-pcq-pj.is-wait .wk-pcq-pjnote {
  color: color-mix(in srgb, var(--c-red, #ef4444) 82%, var(--ink3, #64748b));
}

/* The same three-segment composition the lead tile draws, at list size.
   ⚠️ `display:flex` IS LOAD-BEARING — these are spans inside a grid item, and
   as inlines they ignore `height` outright and render zero pixels tall. The
   twin note on `.wk-pcbd-pj-bar` learned that the hard way. */
.wk-pcq-bar {
  display: flex; height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--wkch-track, #e2e8f0);
}
.wk-pcq-bar > span { display: block; height: 100%; transition: width .28s cubic-bezier(.22, 1, .36, 1); }
.wk-pcq-bar .is-done { background: var(--c-green, #16a34a); }
.wk-pcq-bar .is-own { background: var(--wkch-2, #004b7c); }
.wk-pcq-bar .is-open {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--c-red, #ef4444) 40%, var(--surf, #fff)) 0 3px,
    color-mix(in srgb, var(--c-red, #ef4444) 18%, var(--surf, #fff)) 3px 6px);
}

.wk-pcq-nums {
  display: flex; align-items: baseline; gap: 4px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wk-pcq-nums b { font-size: 13px; font-weight: 800; color: var(--ink, #0f172a); }
.wk-pcq-nums i { font-style: normal; font-size: 10.5px; font-weight: 650; color: var(--ink3, #64748b); }
/* ⚠️ A project nobody has set a weekly figure for SAYS SO, in words, and is not
   scored. Printing "of 0h" would paint every money-paced project as infinitely
   over its target — see _wkPcWantFor for why the figure is null, not zero. */
.wk-pcq-nums i.is-noneset { font-style: italic; opacity: .75; }

.wk-pcq-short {
  text-align: right; font-size: 13px; font-weight: 800; white-space: nowrap;
  color: var(--c-red, #ef4444); font-variant-numeric: tabular-nums;
}
/* ⚠️ THE SLOT STAYS, EMPTY. Collapsing it on a settled row would shift every
   figure on that row left and destroy the single x the eye runs down. */
.wk-pcq-short.is-ok { color: transparent; }

.wk-pcq-alloc {
  display: inline-flex; align-items: center; gap: 5px; align-self: center;
  margin: 0 10px 0 4px; padding: 6px 11px;
  font-size: 11px; font-weight: 750; white-space: nowrap;
  border-radius: 8px; cursor: pointer;
  border: 1px solid color-mix(in srgb, #15803d 34%, var(--border, #e2e8f0));
  background: color-mix(in srgb, #15803d 8%, var(--surf, #fff));
  color: #15803d;
  transition: background .14s ease, border-color .14s ease, transform .1s ease;
}
.wk-pcq-alloc svg {
  width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round;
}
.wk-pcq-alloc:hover { background: #15803d; border-color: #15803d; color: #fff; }
.wk-pcq-alloc:active { transform: translateY(1px); }
.wk-pcq-alloc:focus-visible { outline: 2px solid var(--c-blue, #0f62fe); outline-offset: 1px; }

/* ── The expanded body ──────────────────────────────────────────────────── */
.wk-pcq-body {
  grid-column: 1 / -1;
  padding: 4px 12px 12px 36px;
  border-top: 1px dashed var(--border, #e2e8f0);
}

/* Which week is being edited. Drawn only when the period spans more than one —
   a plan row is stored whole under a Monday, so over a month "change
   Michelle's hours" is meaningless until a week is named. */
.wk-pcq-weeks { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 10px; }
.wk-pcq-week {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 54px; padding: 4px 8px; cursor: pointer;
  border: 1px solid var(--border, #e2e8f0); border-radius: 7px;
  background: var(--surf, #fff);
  font-size: 9.5px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink3, #64748b);
  transition: border-color .14s ease, background .14s ease;
}
.wk-pcq-week b {
  font-size: 12px; font-weight: 800; color: var(--ink, #0f172a);
  letter-spacing: 0; text-transform: none;
}
.wk-pcq-week:hover { border-color: var(--wkch-2, #004b7c); }
.wk-pcq-week.is-active {
  border-color: var(--wkch-2, #004b7c);
  background: color-mix(in srgb, var(--wkch-2, #004b7c) 9%, var(--surf, #fff));
  color: var(--wkch-2, #004b7c);
}
.wk-pcq-week.is-short b { color: var(--c-red, #ef4444); }
/* An off week for a fortnightly or monthly project. Dashed and dimmed, NEVER
   hidden — somebody still logs an email hour in one. */
.wk-pcq-week.is-off { border-style: dashed; opacity: .55; }

/* ── One person ─────────────────────────────────────────────────────────── */
.wk-pcq-plist { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; }
.wk-pcq-p {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 8px;
  background: var(--surf, #fff); border: 1px solid var(--border, #e2e8f0);
}
.wk-pcq-p.is-empty { opacity: .72; }
/* ⚠️ IT HOLDS A PHOTO NOW — see `_wkPcFace` in work.js. `position:relative`
   + `overflow:hidden` are what let the <img> cover the tint, and the initials
   sit UNDER it rather than beside it, so an image that 404s (it removes
   itself) leaves the coloured circle intact instead of a hole. */
.wk-pcq-pav {
  position: relative; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  overflow: hidden;
  font-size: 9px; font-weight: 800; font-style: normal; color: #fff;
  background: var(--_cl, #64748b);
}
.wk-pcq-pav img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.wk-pcq-pnm {
  min-width: 0; font-size: 12px; font-weight: 700; color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The stepper. ONE control for both directions — Tyler asked for the second
   himself (*"or even the other way around when people need more time than
   expected"*), and two separate buttons would make one direction the normal
   case and the other an exception. */
.wk-pcq-step {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--border, #e2e8f0); border-radius: 7px; overflow: hidden;
  background: var(--surf, #fff);
}
.wk-pcq-stepb {
  width: 24px; height: 26px; display: grid; place-items: center; cursor: pointer;
  border: 0; background: var(--wt-neutral-bg, #f8fafc);
  font-size: 14px; font-weight: 800; line-height: 1; color: var(--ink2, #334155);
  transition: background .12s ease, color .12s ease;
}
.wk-pcq-stepb:hover:not(:disabled) { background: var(--wkch-2, #004b7c); color: #fff; }
.wk-pcq-stepb:disabled { opacity: .4; cursor: default; }
.wk-pcq-hin {
  width: 42px; height: 26px; border: 0; text-align: right; padding: 0 1px 0 4px;
  font-size: 12px; font-weight: 800; color: var(--ink, #0f172a);
  background: transparent; font-variant-numeric: tabular-nums;
}
.wk-pcq-hin:focus { outline: 0; background: color-mix(in srgb, var(--c-blue, #0f62fe) 8%, transparent); }
.wk-pcq-hu { font-size: 10.5px; font-weight: 700; color: var(--ink3, #64748b); padding-right: 6px; }

/* ⚠️ LOGGED IS A FACT, NOT A VERDICT. It carries no red, no amber and no icon.
   Tyler, on what this half of the screen is for: *"it's not the end of the
   world if we go under or over — just reallocate, and it helps visualize our
   track and availability."* A colour here would turn a flexible tool into a
   compliance report, which is the opposite of what was asked for. */
.wk-pcq-plog {
  font-size: 10.5px; font-weight: 600; color: var(--ink3, #64748b); white-space: nowrap;
  min-width: 76px; text-align: right; font-variant-numeric: tabular-nums;
}
.wk-pcq-plog b { font-weight: 800; color: var(--ink2, #334155); }
.wk-pcq-plog.is-none { font-style: italic; opacity: .8; }

.wk-pcq-give {
  padding: 4px 9px; border-radius: 7px; cursor: pointer; white-space: nowrap;
  font-size: 10.5px; font-weight: 750;
  border: 1px dashed color-mix(in srgb, var(--wkch-2, #004b7c) 40%, var(--border, #e2e8f0));
  background: transparent; color: var(--wkch-2, #004b7c);
  transition: background .14s ease, border-style .14s ease;
}
.wk-pcq-give:hover {
  background: color-mix(in srgb, var(--wkch-2, #004b7c) 10%, transparent);
  border-style: solid;
}
.wk-pcq-give:focus-visible { outline: 2px solid var(--c-blue, #0f62fe); outline-offset: 1px; }
/* The slot is held open on a row with nothing to give back, for the same reason
   the shortfall slot is: the buttons above and below must not move. */
.wk-pcq-give.is-off { border: 0; background: none; pointer-events: none; min-width: 96px; }

.wk-pcq-pnone {
  margin: 9px 0 0; padding: 9px 11px; border-radius: 8px;
  background: var(--wt-neutral-bg, #f8fafc);
  font-size: 11.5px; color: var(--ink2, #334155); line-height: 1.45;
}

.wk-pcq-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 10px 0 0; padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 70%, transparent);
}
.wk-pcq-footv {
  flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--ink3, #64748b);
  font-variant-numeric: tabular-nums;
}
.wk-pcq-footv b { font-weight: 800; color: var(--ink, #0f172a); }
.wk-pcq-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px;
  border-radius: 8px; cursor: pointer; white-space: nowrap;
  font-size: 11px; font-weight: 750;
  border: 1px solid var(--border, #e2e8f0); background: var(--surf, #fff);
  color: var(--ink2, #334155);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.wk-pcq-btn:hover { border-color: var(--wkch-2, #004b7c); color: var(--wkch-2, #004b7c); }
.wk-pcq-btn svg {
  width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round;
}
.wk-pcq-btn.is-go { border-color: #15803d; background: #15803d; color: #fff; }
.wk-pcq-btn.is-go:hover { background: #166534; border-color: #166534; color: #fff; }

/* ── The band's own Allocate button ─────────────────────────────────────────
   🚨 THERE WAS NO ALLOCATE BUTTON ON THIS SCREEN AT ALL before 2026-08-17 —
   every route to allocating anything went through opening a project first.
   Tyler: *"there needs to be the allocate button, and I can easily allocate
   time."* Green with a plus, the same treatment the project panel's single
   Allocate button wears, because it is the same act. */
.wk-capalloc-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-size: 11.5px; font-weight: 750;
  border: 1px solid #15803d; background: #15803d; color: #fff;
  transition: background .14s ease, transform .1s ease;
}
.wk-capalloc-btn svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round;
}
.wk-capalloc-btn:hover { background: #166534; border-color: #166534; }
.wk-capalloc-btn:active { transform: translateY(1px); }
.wk-capalloc-btn:focus-visible { outline: 2px solid var(--c-blue, #0f62fe); outline-offset: 2px; }

/* The lead's second figure. Green when there is room; it goes QUIET, not red,
   when there is none — see the room clause in _wkPcVerdict for the same rule
   stated in prose. */
.wk-capld-fig--room .wk-capld-v { color: var(--c-green, #16a34a); }
.wk-capld-fig--room.is-over .wk-capld-v { color: var(--ink2, #334155); }

/* ── Narrow ─────────────────────────────────────────────────────────────────
   The bar and the target pair go first: they are context for the shortfall,
   and the shortfall plus the name is the whole row at 480px. */
@media (max-width: 1080px) {
  .wk-pcq-pjhead { grid-template-columns: 16px minmax(0, 1fr) 72px auto 56px; gap: 8px; }
  .wk-pcq-p { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
  .wk-pcq-p .wk-pcq-plog { grid-column: 2 / 3; grid-row: 2; text-align: left; min-width: 0; }
}
@media (max-width: 720px) {
  .wk-pcq-pjhead { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .wk-pcq-bar, .wk-pcq-nums { display: none; }
  .wk-pcq-alloc { margin: 0 8px; padding: 6px 9px; }
  .wk-pcq-body { padding-left: 14px; }
  .wk-pcq-give.is-off { display: none; }
}

/* The capacity view has no support rail — see the note in _wkPcApplyView. */
.wk-body--wide { grid-template-columns: 1fr; }

/* ══════════════════════════════════════════════════════════════════════════
   "THEY WANT TO DOUBLE THEIR RATE — CAN WE?"
   ──────────────────────────────────────────────────────────────────────────
   Tyler, 2026-08-17: *"if a client says 'we want to double our rate', we're able
   to tell them we have the capacity or we do not have the capacity to do that. I
   should be able to just look right on the system and see if we are able to do
   that or not."* Markup in work.js (`_wkPcWhatIfHTML`).

   It sits INSIDE the expanded project row, below the people, because that is
   where the current figure it is being compared against already is. Styled as a
   quiet inset rather than a card: it is a question being asked of the row, not a
   second panel, and nothing it does is written anywhere.
   ══════════════════════════════════════════════════════════════════════════ */
.wk-pcq-wi {
  margin: 10px 0 0; padding: 9px 11px 10px;
  border-radius: 9px;
  border: 1px dashed color-mix(in srgb, var(--wkch-2, #004b7c) 26%, var(--border, #e2e8f0));
  background: color-mix(in srgb, var(--wkch-2, #004b7c) 3%, var(--surf, #fff));
}
.wk-pcq-wi-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin-bottom: 7px;
}
.wk-pcq-wi-t {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wkch-2, #004b7c);
}
.wk-pcq-wi-now { font-size: 10.5px; color: var(--ink3, #64748b); font-weight: 600; }
.wk-pcq-wi-now b { font-weight: 800; color: var(--ink2, #334155); }

.wk-pcq-wi-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wk-pcq-wi-b {
  min-width: 38px; padding: 4px 9px; cursor: pointer;
  border: 1px solid var(--border, #e2e8f0); border-radius: 7px;
  background: var(--surf, #fff);
  font-size: 11.5px; font-weight: 750; color: var(--ink2, #334155);
  font-variant-numeric: tabular-nums;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.wk-pcq-wi-b:hover { border-color: var(--wkch-2, #004b7c); color: var(--wkch-2, #004b7c); }
.wk-pcq-wi-b.is-active {
  background: var(--wkch-2, #004b7c); border-color: var(--wkch-2, #004b7c); color: #fff;
}
.wk-pcq-wi-b:focus-visible { outline: 2px solid var(--c-blue, #0f62fe); outline-offset: 1px; }

.wk-pcq-wi-in {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 7px;
  background: var(--surf, #fff); padding: 0 7px 0 8px;
}
.wk-pcq-wi-in > span { font-size: 11px; font-weight: 800; color: var(--ink3, #64748b); }
.wk-pcq-wi-in input {
  width: 74px; height: 26px; border: 0; background: transparent;
  font-size: 12px; font-weight: 800; color: var(--ink, #0f172a);
  font-variant-numeric: tabular-nums; padding: 0 2px;
}
.wk-pcq-wi-in input:focus { outline: 0; }
.wk-pcq-wi-in small { font-size: 10px; font-weight: 650; color: var(--ink3, #64748b); }
.wk-pcq-wi-clr {
  padding: 4px 8px; cursor: pointer; border: 0; background: none;
  font-size: 10.5px; font-weight: 700; color: var(--ink3, #64748b);
  text-decoration: underline; text-underline-offset: 2px;
}
.wk-pcq-wi-clr:hover { color: var(--ink, #0f172a); }

/* ── The answer ─────────────────────────────────────────────────────────────
   🚨 GREEN FOR YES, AMBER FOR NOT-AS-IT-STANDS — and amber, NOT red. This is
   the one place on the queue a colour is a verdict, and it is a verdict about a
   HYPOTHETICAL: being unable to absorb a doubling today is a fact about this
   week's book, not a failure. Red is reserved on this screen for the real
   shortfall figures, which are work somebody actually has to place. */
.wk-pcq-wi-out {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline; gap: 10px;
  margin-top: 9px; padding: 8px 10px; border-radius: 8px;
  background: var(--surf, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-left: 3px solid var(--ink4, #94a3b8);
}
.wk-pcq-wi-out.is-yes {
  border-left-color: var(--c-green, #16a34a);
  background: color-mix(in srgb, var(--c-green, #16a34a) 5%, var(--surf, #fff));
}
.wk-pcq-wi-out.is-no {
  border-left-color: var(--c-amber, #d97706);
  background: color-mix(in srgb, var(--c-amber, #d97706) 6%, var(--surf, #fff));
}
.wk-pcq-wi-out.is-none { grid-template-columns: 1fr; font-size: 11.5px; color: var(--ink2, #334155); }
.wk-pcq-wi-ask {
  font-size: 12.5px; font-weight: 800; color: var(--ink, #0f172a); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wk-pcq-wi-line {
  font-size: 11.5px; line-height: 1.45; color: var(--ink2, #334155); min-width: 0;
}
.wk-pcq-wi-line b { font-weight: 800; color: var(--ink, #0f172a); }
.wk-pcq-wi-out.is-yes .wk-pcq-wi-line b:first-child { color: var(--c-green, #15803d); }
.wk-pcq-wi-out.is-no .wk-pcq-wi-line b:first-child { color: var(--c-amber, #b45309); }

/* The "off week" / "no target set" note in a row's figure pair carries a
   tooltip naming the blocker — see the note in _wkPcProjectRow. Dotted underline
   so it reads as explicable rather than as a dead label. */
.wk-pcq-nums i.is-noneset {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}

@media (max-width: 720px) {
  .wk-pcq-wi-out { grid-template-columns: 1fr; gap: 3px; }
  .wk-pcq-wi-in input { width: 62px; }
}

/* An hours-paced project types hours, not dollars — see _wkPcWiIsMoney. */
.wk-pcq-wi-in.is-hours input { width: 56px; text-align: right; }

/* ── Two platform overlays claimed the top of the universe ──────────────────
   .wt-settings-overlay (assets/js/settings-modals.js) and the topnav's Send
   Feedback backdrop both ship at z-index 2147483646 — ABOVE
   window._wkToastFloor, the band this app reserves for confirmations. Nothing
   opened from inside them could ever climb over: _wkFloatOnTop refuses to
   cross 2000400, so the SharePoint picker, a task popup, Log time and the
   widget catalog all rendered fully and invisibly BEHIND them. Park them just
   under that ceiling and let wk-stack-guard.js decide the order — whatever
   opened last wins, which is what these two want anyway.
   !important because topnav.js writes its value inline. */
.wt-settings-overlay,
[data-wt-feedback-backdrop] { z-index: 2000100 !important; }


/* ══════════════════════════════════════════════════════════════════════════
   PROJECTS ▸ CAPACITY — THE ALLOCATION SCREEN                (2026-08-25)
   ──────────────────────────────────────────────────────────────────────────
   Tyler, on the screen this replaces: *"None of the projects have their hours
   allocated so that's just wrong but it needs to look good. I want to be able
   to see every single project and see the allocation if it's been allocated or
   not. Track it all … all the stuff on the top needs to help me know overall,
   just everything, so I don't have to go look at every card."*

   Two families, and the whole design is making them impossible to confuse:

     PLAN   how much of the period has been HANDED OUT. The lead, the Not
            Allocated cell, the No Target cell, and the top bar on every card.
            Flat surfaces, the band's own blue, and never a pace colour —
            allocating is a decision, and colouring an un-allocated week red
            would call the reader's own to-do list a failure.
     DO     how much of what was handed out has been WORKED. One tinted cell
            with a permanently lit accent rail, and the second bar on every
            card. Green or red off `_wkPcWorkTone`, because this half IS a race
            against the calendar. Tyler: *"it's got to be obvious that it's
            separate from the allocation so it's not confusing."*

   🚨 ZERO IS A CHECKMARK ON BOTH SIDES. *"Okay, everything's allocated with a
   green checkmark, not just 0, but a checkmark."* `is-ok` is the state, and it
   is the only green this band draws — the standing "no green, green reads as
   praise" rule was written for a VERDICT sentence, and a tick is not praise, it
   is the answer to a yes/no question.

   🚨 AND THERE IS NO OVER-PLAN TILE. *"If we go over, we don't need another
   scorecard for over plan. It's just going to show a plus."*
   ══════════════════════════════════════════════════════════════════════════ */

/* ── THREE CELLS HERE, FOUR ON THE TEAM BAND ────────────────────────────────
   🚨 `.wk-capsc--lead` IS SHARED with Team ▸ Capacity, which still has four
   cells, so its grid may not be touched — this is a two-class override and it
   therefore also has to be repeated inside the two narrow breakpoints, which
   declare the shared rule at ONE class and would otherwise be outranked at
   every width. (The mirror image of the `:not(.wk-capsc--lead)` trap the
   generic narrow rules carry.) */
.wk-capsc--lead.wk-capsc--pc {
  grid-template-columns: minmax(340px, 2.1fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 1320px) {
  .wk-capsc--lead.wk-capsc--pc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .wk-capsc--lead.wk-capsc--pc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .wk-capsc--pc .wk-capsc-cell { padding: 9px 6px 8px; }
  .wk-capsc--pc .wk-capsc-cell .ax-card-val { font-size: 18px; }
  /* ⚠️ THE CELL LABELS WRAP AT PHONE WIDTH. A third of 390px is ~118px and
     `.ax-card-lbl` is nowrap + ellipsis; three cells is the right count and
     "Not Allocated" is the right label, so the wrap is what gives. */
  .wk-capsc--pc .wk-capsc-cell .ax-card-lbl {
    white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2;
  }
  /* ⚠️ THE THIRD CELL TAKES THE ROW. work-mobile.css forces this band two-up
     with a rule of its own (the same rule the lead needs `grid-column:1/-1` to
     escape), so three cells leave the last one sitting beside an empty half —
     measured 164x72 against two 164x100 neighbours. Scoped to phone width on
     purpose: between 721 and 1320 the three fit one row and must stay there. */
  .wk-capsc--pc .wk-capsc-cell:last-child { grid-column: 1 / -1; }
}

/* ── THE CHECKMARK STATE ────────────────────────────────────────────────────
   ⚠️ THREE CLASSES ON THE CELL RULE, DELIBERATELY. `.wk-capsc-card.wk-capsc-cell
   .ax-card-val` sets 21px at two classes; a two-class override would win only
   because it is later in the file, which is the kind of tie that breaks the next
   time somebody appends a block. */
/* 🚨 `--_ac` IS THE PROPER LEVER, and `!important` on the CELL is not optional.
   `.ax-card:not(.is-zero) .ax-card-val` is `color: var(--_ac) !important` — the
   house rule this whole row is built on — so a plain colour here loses. Setting
   the accent instead turns the rail, the hover tint and the meter green with the
   figure, which is what "a green checkmark" actually means on this component.
   ⚠️ The CELL carries `--_ac` INLINE (the tile's own accent), and an inline
   custom property beats a class rule, so that one needs the flag; the LEAD's
   inline `--_ac` is on the button and this is a descendant, which wins on its
   own. The two `.wk-capld-fig--roll` rules a few hundred lines up hit the same
   `!important` wall and solved it the same way. */
.wk-capld-fig.is-ok { --_ac: var(--c-green, #16a34a); }
.wk-capsc-card.wk-capsc-cell.is-ok { --_ac: var(--c-green, #16a34a) !important; }
.wk-capld-fig.is-ok .wk-capld-v,
.wk-capsc-card.wk-capsc-cell.is-ok .wk-capsc-v {
  color: var(--c-green, #16a34a) !important;
  font-size: 30px; line-height: 1;
}
.wk-capld-fig.is-ok .ax-card-lbl,
.wk-capsc-cell.is-ok .ax-card-lbl { color: var(--c-green, #16a34a); }
.wk-capld-fig.is-ok .wk-capsc-sub,
.wk-capsc-cell.is-ok .wk-capsc-sub {
  color: color-mix(in srgb, var(--c-green, #16a34a) 72%, var(--ink3, #64748b));
  font-weight: 700;
}

/* ── THE "DO" FAMILY: ONE TINTED CELL ──────────────────────────────────────
   ⚠️ IT IS NOT AN `.ax-card`, so nothing draws its accent rail for us — and it
   must not be one, because the `data-wk-filter` drill delegate claims every
   `.ax-card` in the row and this tile swaps the whole list instead of filtering
   it. Nor a `<button>`: dashboard-meta's runtime patcher capsules any button
   this size. So: `<div role="button">`, and the rail by hand. */
.wk-capsc-card.wk-capsc-cell--work {
  cursor: pointer;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--_ac, #16a34a) 13%, var(--surf, #fff)),
    color-mix(in srgb, var(--_ac, #16a34a) 4%, var(--surf, #fff)));
  border-color: color-mix(in srgb, var(--_ac, #16a34a) 34%, var(--border, #e2e8f0));
}
/* ⚠️ ALWAYS DRAWN, unlike `.wk-capsc-cell::before` which is `opacity: 0` until
   hover. That is right for a quiet filter and wrong for the one tile on the row
   belonging to a different family — the rail IS the separation. */
.wk-capsc-card.wk-capsc-cell--work::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--_ac, #16a34a); opacity: 1;
}
.wk-capsc-cell--work .wk-capsc-v { color: var(--_ac, #16a34a); }
.wk-capsc-cell--work .wk-capsc-fill { background: var(--_ac, #16a34a); }
.wk-capsc-cell--work .wk-capsc-foot { color: var(--_ac, #16a34a); font-weight: 800; }
/* The state, and only ONE of the four is red. `is-ahead` takes the band's blue
   rather than a warning colour: being ahead of an allocation is explicitly fine
   here (*"just reallocate"*), and it is the thing that replaced the Over Plan
   tile — never the thing that inherits its amber. */
.wk-capsc-cell--work.is-behind { --_ac: var(--c-red, #ef4444); }
.wk-capsc-cell--work.is-ahead { --_ac: var(--wkch-2, #004b7c); }
.wk-capsc-cell--work.is-idle { --_ac: var(--ink4, #94a3b8); }
.wk-capsc-cell--work.is-idle .wk-capsc-v { color: var(--ink3, #64748b); }
.wk-capsc-cell--work:focus-visible { outline: 2px solid var(--_ac, #16a34a); outline-offset: 2px; }
.wk-capsc-cell--work.is-active {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--_ac, #16a34a) 24%, var(--surf, #fff)),
    color-mix(in srgb, var(--_ac, #16a34a) 9%, var(--surf, #fff)));
  border-color: color-mix(in srgb, var(--_ac, #16a34a) 58%, var(--border, #e2e8f0));
}
.ax-cards-row .wk-capsc-cell--work:active { transform: scale(.97); transition-duration: .08s; }

/* ══ THE CARD GRID ════════════════════════════════════════════════════════
   ⚠️ THE WRAPPER IS THE GRID CHILD, NOT THE CARD. It carries `data-filter-tag`
   (so a tile's drill hides the whole card rather than a strip inside it),
   `data-pcq-pj` (so a stepper can find which Monday it is editing) and the
   expanded people panel underneath. The house card's markup is `_buildProgCard`'s
   and is not ours to hang attributes on.
   ⚠️ ID-SCOPED for the same reason the grid itself is — see the note on
   `#pgProgCapList.wk-capacity-list`. */
#pgProgCapList .wk-pcc,
#mwProgCapList .wk-pcc,
#tmProgCapList .wk-pcc { display: flex; flex-direction: column; min-width: 0; }
#pgProgCapList .wk-pcc > .wk-dp-card,
#mwProgCapList .wk-pcc > .wk-dp-card,
#tmProgCapList .wk-pcc > .wk-dp-card { flex: 1 1 auto; }
/* An OPEN card takes the whole row. The people rows carry a stepper, a text box,
   a week chooser and the what-if — that is a form, and a form in a 280px track
   is unusable. */
#pgProgCapList .wk-pcc.is-open,
#mwProgCapList .wk-pcc.is-open,
#tmProgCapList .wk-pcc.is-open { grid-column: 1 / -1; }

/* ── TWO TO A ROW ───────────────────────────────────────────────────────────
   🚨 Tyler, 2026-08-26, superseding the three below: *"These cards still just
   don't look good … we would just clean up the cards and make them bigger. Full
   name should show, so maybe you should just do two cards per row."*
   Two is not a taste call here — it is what the card now CONTAINS. Each one
   carries two gauges, three stat tiles and a right-hand people container with a
   stepper per person; that does not fit in a third of the width, and the project
   name (“AI Enablement, Process Optimization, and Workflow Automation”) does not
   read in one either. The clamp on `.wk-prog-card-name` comes off further down
   for the same sentence.
   ── the note from 2026-08-25, kept because it is still what this rule is ──
   Tyler: *"there should be three project cards per row."*
   The shared card grid is `auto-fill` off `--wkv-card-min`, which lands on FOUR
   at 1440 and five on a wide monitor. These cards are the lean allocation ones
   — their two bars, their badge and their chips all read ACROSS — so three is
   the width he wants to read them at, and it is stated as a count rather than
   as a bigger `minmax()` floor, which would go back to four the moment the
   window grew.
   ⚠️ SAME `#id.class` SPECIFICITY (1,1,0) AS THE BASE RULE, so this wins only
   because it is later in the file. Do not "tidy" it up to the block at
   `#pgProgCapList.wk-capacity-list` — that one is shared with Team ▸ Capacity's
   person grid and the Clients grid, which both still want auto-fill.
   ⚠️ THE THREE HOSTS ARE THE PROJECT-CARD GRIDS ONLY. `#tmCapacityList` (people)
   and `#tmClientCapacityList` (companies) are deliberately absent.
   Everything that must span the row already says so for itself — `.wk-pcc-sec`,
   `.wk-pcc.is-open`, `.wk-pcl` and `.wk-empty` all carry `grid-column: 1 / -1`. */
#mwProgCapList.wk-capacity-list,
#tmProgCapList.wk-capacity-list,
#pgProgCapList.wk-capacity-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* One below a laptop width: two of these cards side by side put the people
   container under 200px, which is where the stepper stops fitting on one line. */
@media (max-width: 1240px) {
  #mwProgCapList.wk-capacity-list,
  #tmProgCapList.wk-capacity-list,
  #pgProgCapList.wk-capacity-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  #mwProgCapList.wk-capacity-list,
  #tmProgCapList.wk-capacity-list,
  #pgProgCapList.wk-capacity-list { grid-template-columns: minmax(0, 1fr); }
}

/* ── THE BAND: three `.wk-sc` tiles where the lead and its cells were ───────
   🚨 Tyler, 2026-08-25: *"the scorecards are way too big … we literally just
   need it to show the same exact scorecards you see when you click inside the
   project."* So there is no band chrome here at all — `.wk-scs` and `.wk-sc`
   are the shared component (see their block further up this file) and this is
   only the two things the hero has to say about where they sit.
   ⚠️ The 4px of padding is `.wk-scs`'s own and it is a HOVER GUTTER: an open
   tile lifts 3px and throws a large shadow, and the hero clips nothing
   (`overflow: visible`) precisely so that lift is not cut off. */
.wk-cap-hero--sc > .wk-pc-scs { padding: 4px 4px 0; }
/* Lit while its own drill is on screen — the time log takes the grid below and
   the tile that opened it has to keep saying so. Same treatment a drilled
   `.ax-card` gets, in this component's own vocabulary. */
.wk-sc.is-active {
  border-color: color-mix(in srgb, var(--_ac, #94a3b8) 55%, var(--border, #e2e8f0));
  box-shadow: var(--shadow-md, var(--shadow-sm)),
              inset 0 0 0 1px color-mix(in srgb, var(--_ac, #94a3b8) 28%, transparent);
}
/* The one thing that is not a tile: work.js's own "reload the page". */
.wk-pc-scwarn {
  padding: 12px 14px; border-radius: var(--radius, 16px);
  border: 1px dashed var(--border, #e2e8f0); background: var(--surf2, #f8fafc);
  font-size: 11.5px; font-weight: 700; color: var(--ink3, #64748b);
}

/* ── THE TWO SECTION HEADS ──────────────────────────────────────────────────
   🚨 THEY SORT THE GRID, THEY DO NOT FOLD IT. The queue this replaced put every
   settled company inside a shut `<details>`; Tyler asked for the opposite —
   *"I want to be able to see every single project."* */
.wk-pcc-sec {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  margin: 8px 2px 0; padding: 0 0 7px; min-width: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 85%, transparent);
}
.wk-pcc-sec:first-child { margin-top: 0; }
.wk-pcc-sect {
  flex: none; font-size: 11px; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink, #0f172a);
}
.wk-pcc-secn {
  min-width: 0; font-size: 11px; font-weight: 600; color: var(--ink3, #64748b);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-pcc-secv {
  margin-left: auto; flex: none; font-size: 14px; font-weight: 900;
  color: var(--ink, #0f172a);
}
.wk-pcc-sec.is-wait .wk-pcc-sect, .wk-pcc-sec.is-wait .wk-pcc-secv { color: var(--c-red, #ef4444); }
.wk-pcc-sec.is-clear .wk-pcc-sect, .wk-pcc-sec.is-clear .wk-pcc-secn { color: var(--c-green, #16a34a); }
.wk-pcc-sec.is-clear .wk-pcc-sect::before,
.wk-pcc-sec.is-ok .wk-pcc-sect::before { content: '\2713\00a0'; font-weight: 900; }
.wk-pcc-sec.is-ok .wk-pcc-sect::before { color: var(--c-green, #16a34a); }

/* ══ THE ALLOCATION BLOCK ON THE CARD ═════════════════════════════════════
   It sits inside `_buildProgCard`'s own inner, below the three stats, and it is
   the ONLY thing this panel adds to the house card — Tyler: *"looking exactly
   like the project cards that we've already designed, but then adding
   allocation data or something."* */
.wk-pcc-alloc {
  margin: 10px 0 0; padding: 9px 10px 10px; border-radius: 12px;
  background: var(--surf2, #f8fafc);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #e2e8f0) 80%, transparent);
  display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: left;
}
.wk-pcc-ahead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wk-pcc-eyebrow {
  min-width: 0; font-size: 9px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink3, #64748b);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── THE CHECK, AND THE THREE THINGS THAT ARE NOT ONE ────────────────────── */
.wk-pcc-badge {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 800;
  background: var(--surf, #fff); color: var(--ink2, #525252);
  border: 1px solid var(--border, #e2e8f0);
}
.wk-pcc-alloc.is-ok .wk-pcc-badge { background: #dcfce7; color: #15803d; border-color: #86efac; }
.wk-pcc-alloc.is-ok .wk-pcc-badge::before { content: '\2713'; font-weight: 900; }
/* ⚠️ AN EMPTY RING, NOT A CROSS. Nothing allocated is a thing still to do, not a
   thing that went wrong, and a red ✕ on twelve cards reads as twelve errors. */
.wk-pcc-alloc.is-none .wk-pcc-badge { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.wk-pcc-alloc.is-none .wk-pcc-badge::before { content: '\25CB'; font-weight: 900; }
.wk-pcc-alloc.is-short .wk-pcc-badge { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
.wk-pcc-alloc.is-over .wk-pcc-badge { background: #e0f2fe; color: #075985; border-color: #7dd3fc; }

/* ── THE TWO BARS ───────────────────────────────────────────────────────── */
/* ⚠️ 66px, MEASURED. At 52px the word "ALLOCATED" (9 uppercase characters at
   9.5px/800 plus tracking) was wider than its own track and ran straight into
   the bar with no gap at all — visible on a screenshot at 1440px, so it was not
   a narrow-window problem. The two labels have to share ONE column width or the
   bars do not line up, and "ALLOCATED" is the longer of the two. */
.wk-pcc-line {
  display: grid; grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
}
.wk-pcc-lbl {
  font-size: 9.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink3, #64748b); white-space: nowrap;
}
.wk-pcc-track {
  position: relative; display: block; height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--surf, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #e2e8f0) 75%, transparent);
}
.wk-pcc-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--wkch-2, #004b7c);
  transition: width .45s cubic-bezier(.22, 1, .36, 1), background .25s ease;
}
.wk-pcc-v { font-size: 11px; font-weight: 900; color: var(--ink, #0f172a); white-space: nowrap; }
.wk-pcc-v i {
  margin-left: 4px; font-style: normal; font-weight: 700; font-size: 10px;
  color: var(--ink3, #64748b);
}
.wk-pcc-v i.is-noneset {
  color: var(--ink4, #94a3b8); font-weight: 600; cursor: help;
  text-decoration: underline dotted;
}
/* 🚨 ONLY THE WORK BAR TAKES A PACE COLOUR. `_wkPcWorkTone` owns the state; this
   only paints it. The allocation bar above stays the band's blue at every
   value, because "nobody has handed this week out" is the reader's own to-do
   list and not a failure to alarm them about. */
.wk-pcc-w-ontrack .wk-pcc-line--work .wk-pcc-fill { background: var(--c-green, #16a34a); }
.wk-pcc-w-behind .wk-pcc-line--work .wk-pcc-fill { background: var(--c-red, #ef4444); }
.wk-pcc-w-ahead .wk-pcc-line--work .wk-pcc-fill { background: var(--wkch-2, #004b7c); }
.wk-pcc-w-early .wk-pcc-line--work .wk-pcc-fill,
.wk-pcc-w-none .wk-pcc-line--work .wk-pcc-fill { background: var(--ink4, #94a3b8); }
.wk-pcc-w-behind .wk-pcc-line--work .wk-pcc-v b { color: var(--c-red, #ef4444); }
.wk-pcc-w-ahead .wk-pcc-line--work .wk-pcc-v b { color: var(--wkch-2, #004b7c); }
.wk-pcc-w-ontrack .wk-pcc-line--work .wk-pcc-v b { color: var(--c-green, #16a34a); }

.wk-pcc-note {
  font-size: 10.5px; font-weight: 600; line-height: 1.35; color: var(--ink2, #525252);
}
.wk-pcc-note b { font-weight: 900; color: var(--ink, #0f172a); }
.wk-pcc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
/* ⚠️ `min-width: 0` AND a block-level box. `text-overflow: ellipsis` is inert on
   an inline span, and a wrapping flex box grows instead of shrinking without the
   zero floor — both traps this file already documents twice. */
.wk-pcc-people {
  flex: 1 1 60px; min-width: 0; display: block;
  font-size: 10px; font-weight: 700; color: var(--ink3, #64748b);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-pcc-btn {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 10.5px; font-weight: 800; line-height: 1;
  background: var(--surf, #fff); color: var(--ink2, #525252);
  border: 1px solid var(--border, #e2e8f0);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.wk-pcc-btn:hover { background: var(--surf2, #f1f5f9); color: var(--ink, #0f172a); }
.wk-pcc-btn svg { width: 12px; height: 12px; flex: none; stroke: currentColor; stroke-width: 3; fill: none; }
/* The same green + plus the band's own Allocate button wears — it is the same
   act, and a second visual language for it would read as a second feature. */
.wk-pcc-btn.is-go { background: #15803d; color: #fff; border-color: #15803d; }
.wk-pcc-btn.is-go:hover { background: #166534; color: #fff; }
.wk-pcc-chev { display: inline-flex; transition: transform .2s ease; }
.wk-pcc.is-open .wk-pcc-chev { transform: rotate(90deg); }
/* The expanded people panel, which is `_wkPcProjectBody` verbatim — the steppers,
   the week chooser and the what-if all still work exactly as they did in the
   queue, which is the reason that function was kept rather than rewritten. */
.wk-pcc-body {
  margin-top: 8px; padding: 10px 12px 12px; border-radius: 14px;
  background: var(--surf, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border, #e2e8f0) 85%, transparent),
              var(--shadow-sm);
}

/* ══ THE LEAN CARD ════════════════════════════════════════════════════════
   Tyler, once the full house card was on this screen: *"there's too much data
   that the normal projects have. These cards are specifically more allocation
   related."* `extra.lean` (work.js) drops the seven blocks; this makes what is
   left read as ONE card rather than a header with a boxed panel floating under
   it. The allocation block is the card's BODY here, so it loses its own inset
   frame and takes a divider instead. */
.wk-pcc--lean .wk-prog-card-header { padding: 13px 14px 10px 18px; }
.wk-pcc--lean .wk-pcc-alloc {
  margin: 0; border-radius: 0; background: transparent; box-shadow: none;
  padding: 10px 14px 12px 18px;
  border-top: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 85%, transparent);
}
/* The track needs a ground now that the block has none of its own. */
.wk-pcc--lean .wk-pcc-track { background: var(--surf2, #f1f5f9); }
/* ⚠️ `margin-top: auto` ON THE BLOCK, so cards in a row line their Allocate
   buttons up even when one name wraps to two lines and its neighbour does not.
   `.wk-prog-card-inner` is already a full-height flex column. */
.wk-pcc--lean .wk-pcc-alloc { margin-top: auto; }

/* ══ THE ALLOCATION CARD ══════════════════════════════════════════════════
   Tyler, 2026-08-26: *"Really just make a match design of how the cards look in
   the overview, pretty much exactly. Just make it the data about the allocations
   instead … clean up the cards and make them bigger. Full name should show …
   The goal is we're going to be able to look here and easily see who's been
   allocated and who hasn't been allocated. You can even do right-side containers
   to easily show us that."*

   So the card is the Overview project card — same header, same logo, same status
   chip, same `.wk-prog-card-bars` and `.wk-prog-card-stats` components — split
   into TWO columns below the header: the figures on the left, and WHO on the
   right. Nothing here restyles the shared components; it only places them. */
.wk-pcc--alloc { position: relative; }

/* 🚨 THE FULL NAME, WHICH IS HALF THE REASON THERE ARE ONLY TWO PER ROW.
   `.wk-prog-card-name` is clamped to two lines and ellipsized app-wide, which is
   right in a 280px track and wrong here: this is the screen where you decide
   which project to hand hours to, and "AI Enablement, Process Optimizatio…" is
   two projects for one client that read identically. */
.wk-pcc--alloc .wk-prog-card-name {
  display: block; -webkit-line-clamp: none; overflow: visible;
  text-overflow: clip; white-space: normal;
  font-size: 15px; line-height: 1.28;
}
.wk-pcc--alloc .wk-prog-card-client { white-space: normal; overflow: visible; }
.wk-pcc--alloc .wk-prog-card-header { padding: 15px 44px 11px 18px; }

/* ── THE TICK-BOX ─────────────────────────────────────────────────────────
   Tyler: *"then just select the projects that aren't allocated yet."* It sits on
   the WRAPPER, over the header's top-right corner — `_buildProgCard`'s markup
   belongs to the whole app and is not this panel's to hang controls on.
   ⚠️ THE HEADER'S RIGHT PADDING ABOVE IS WHAT KEEPS IT OFF THE STATUS CHIP.
   Overlapping it would be a control you cannot press on exactly the cards that
   carry a Late chip. */
.wk-pcc-pick {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: grid; place-items: center; cursor: pointer;
  width: 24px; height: 24px;
}
.wk-pcc-pick input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.wk-pcc-pick-box {
  width: 19px; height: 19px; border-radius: 6px; display: grid; place-items: center;
  background: var(--surf, #fff);
  border: 1.5px solid color-mix(in srgb, var(--border, #e2e8f0) 100%, transparent);
  transition: background .14s ease, border-color .14s ease;
}
.wk-pcc-pick-box svg {
  width: 12px; height: 12px; stroke: #fff; stroke-width: 3.4; fill: none;
  opacity: 0; transition: opacity .12s ease;
}
.wk-pcc-pick:hover .wk-pcc-pick-box { border-color: var(--wkch-2, #004b7c); }
.wk-pcc-pick.is-on .wk-pcc-pick-box { background: #15803d; border-color: #15803d; }
.wk-pcc-pick.is-on .wk-pcc-pick-box svg { opacity: 1; }
.wk-pcc-pick input:focus-visible + .wk-pcc-pick-box {
  outline: 2px solid var(--c-blue, #0f62fe); outline-offset: 2px;
}
/* A ticked card says so from across the screen — the whole point of ticking
   several is that you can see which several. */
.wk-pcc--alloc.is-picked > .wk-dp-card {
  box-shadow: 0 0 0 2px #15803d, var(--shadow-md, var(--shadow-sm));
}

/* ── THE TWO COLUMNS ──────────────────────────────────────────────────────
   ⚠️ `align-items: stretch` and `flex: 1 1 auto` on the split, so the people
   container is full height and cards in a row line up whatever their name did.
   `.wk-prog-card-inner` is already a full-height flex column. */
.wk-pcc--alloc .wk-pcc-split {
  flex: 1 1 auto; display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(214px, 272px);
  grid-template-areas: 'main side' 'stats stats';
  gap: 0; min-width: 0;
  border-top: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 85%, transparent);
}
.wk-pcc-main {
  grid-area: main; min-width: 0;
  display: flex; flex-direction: column; padding: 12px 0 12px;
}
.wk-pcc-side { grid-area: side; }
/* 🚨 THE THREE FIGURES GO ACROSS THE WHOLE CARD, not down the left column.
   Beside a people container each tile was ~110px wide and "NEEDS THIS WEEK"
   wrapped to three lines over a two-character figure — three ragged columns
   instead of one band, which is the exact complaint `.wk-prog-stat`'s own note
   records from 2026-07-28. Full width they are ~185px each at the narrowest
   two-per-row layout. */
.wk-pcc-statsrow { grid-area: stats; min-width: 0; }
.wk-pcc--alloc .wk-pcc-bars { padding-top: 0; }
.wk-pcc--alloc .wk-prog-card-progress { padding: 0 14px 11px 18px; }
.wk-pcc--alloc .wk-pcc-stats { border-top: 1px solid var(--border, #e2e8f0); }
.wk-pcc--alloc .wk-prog-stat-lbl { white-space: nowrap; }
.wk-pcc--alloc .wk-pcc-work { padding: 9px 14px 2px 18px; margin-top: auto; }

/* The work bar is the only coloured one — see the note on `_wkPcAllocBody`.
   ⚠️ THE TONE CLASS IS ON THE BAR ITSELF (`wk-pcc-bar--work wk-pcc-w-ontrack`),
   so these are COMPOUND selectors, not descendant ones. Written as
   `.wk-pcc-w-ontrack .wk-pcc-bar--work` they matched nothing and every work bar
   drew a fill of the right width with no background at all, which reads as an
   empty track. Measured, not eyeballed: `getComputedStyle(fill).backgroundColor`
   was `rgba(0, 0, 0, 0)`. */
.wk-pcc-bar--work .wk-prog-bar-fill { background: var(--ink4, #94a3b8); }
.wk-pcc-bar--work.wk-pcc-w-ontrack .wk-prog-bar-fill { background: var(--c-green, #16a34a); }
.wk-pcc-bar--work.wk-pcc-w-behind  .wk-prog-bar-fill { background: var(--c-red, #ef4444); }
.wk-pcc-bar--work.wk-pcc-w-ahead   .wk-prog-bar-fill { background: var(--wkch-2, #004b7c); }
.wk-pcc-bar--work.wk-pcc-w-behind  .wk-prog-bar-pct { color: var(--c-red, #ef4444); }
.wk-pcc-bar--work.wk-pcc-w-ahead   .wk-prog-bar-pct { color: var(--wkch-2, #004b7c); }
.wk-pcc-bar--work.wk-pcc-w-ontrack .wk-prog-bar-pct { color: var(--c-green, #16a34a); }
/* The Worked TILE turns with it — same fact, same colour, two grains. */
.wk-prog-stat.wk-pcc-w-behind .wk-prog-stat-sub { color: var(--c-red, #ef4444); font-weight: 750; }
.wk-prog-stat.wk-pcc-w-ahead  .wk-prog-stat-sub { color: var(--wkch-2, #004b7c); font-weight: 750; }

/* 🚨 THE TILE THIS REBUILD WAS CALLED IN FOR. *"To be allocated this week, it
   needs to also tell me how much we need allocated."* It reads first, so it is
   the only one with a ground. */
.wk-pcc-stat--need {
  background: color-mix(in srgb, var(--wkch-2, #004b7c) 6%, transparent);
  border-radius: 10px;
}
.wk-pcc-stat--need .wk-prog-stat-val { color: var(--wkch-2, #004b7c); }
/* ⚠️ TWO LINES, NOT ONE. This sub-line is the only place the card says WHERE
   the target came from — or, when there isn't one, WHICH FIELD IS MISSING. One
   ellipsized line turned "No funded amount on this project yet" into "No funded
   amount on this pr…", which is a tooltip pretending to be an answer on the one
   screen whose job is to get every project allocated. Clamped at two so a long
   blocker list still cannot make one card taller than its neighbour. */
.wk-pcc--alloc .wk-prog-stat-sub {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; line-height: 1.3;
}

/* ══ THE RIGHT-HAND CONTAINER ═════════════════════════════════════════════
   *"You can even do right-side containers to easily show us that."* Its own
   ground and its own left border, because it answers a different question from
   the column beside it: not how much, but WHO. */
.wk-pcc-side {
  min-width: 0; display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px 12px 13px;
  border-left: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 85%, transparent);
  background: color-mix(in srgb, var(--surf2, #f8fafc) 65%, transparent);
}
.wk-pcc-side-h {
  display: flex; align-items: baseline; gap: 7px; min-width: 0; flex-wrap: wrap;
}
.wk-pcc-side-t {
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink3, #64748b);
}
.wk-pcc-side-n {
  margin-left: auto; font-size: 10px; font-weight: 800; white-space: nowrap;
  color: var(--c-green, #16a34a);
}
.wk-pcc-side-n.is-none { color: var(--c-red, #ef4444); }
.wk-pcc-side-list { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wk-pcc-weeks { margin: 0 0 2px; }

/* ── ONE PERSON, TWO LINES ────────────────────────────────────────────────
   ⚠️ TWO LINES ON PURPOSE. `.wk-pcq-p`'s five-track single row needs ~480px; this
   column is ~260px, and squeezing it puts the ellipsis exactly through the name
   — the one thing on the row Tyler asked to be able to read. */
.wk-pcc-prow {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 6px 8px 7px; border-radius: 9px;
  background: var(--surf, #fff);
  border: 1px solid var(--border, #e2e8f0);
}
.wk-pcc-prow.is-empty { border-style: dashed; background: transparent; }
.wk-pcc-prow.is-short { border-color: color-mix(in srgb, var(--c-amber, #f59e0b) 45%, var(--border, #e2e8f0)); }
.wk-pcc-prow.is-ok::before { content: none; }
.wk-pcc-prow-id { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wk-pcc-prow-id .wk-pcq-pnm { flex: 1 1 auto; }
.wk-pcc-prow-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.wk-pcc-prow-ctl .wk-pcq-plog { min-width: 0; text-align: left; }
.wk-pcc-prow-ctl .wk-pcq-give { padding: 3px 7px; font-size: 10px; }

/* What this person is WORTH this period, off the same `ask().split` the project
   total comes from. Amber only when they are short of it — never red: handing
   hours out is the thing this screen is FOR, so an unfilled row is a to-do, not
   a failure. */
.wk-pcc-need {
  flex: none; font-size: 10px; font-weight: 750; white-space: nowrap;
  color: var(--ink3, #64748b);
}
.wk-pcc-need b { font-weight: 850; color: var(--ink2, #334155); }
.wk-pcc-need.is-short, .wk-pcc-need.is-short b { color: #b45309; }
.wk-pcc-need.is-none { display: none; }

.wk-pcc-side-none {
  padding: 9px 10px; border-radius: 9px;
  border: 1px dashed var(--border, #e2e8f0);
  font-size: 11px; font-weight: 650; line-height: 1.4; color: var(--ink3, #64748b);
}
.wk-pcc-side-f {
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 75%, transparent);
  font-size: 11px; font-weight: 700; color: var(--ink3, #64748b);
}
.wk-pcc-side-f b { font-weight: 900; }
.wk-pcc-side-f.is-short, .wk-pcc-side-f.is-short b { color: #b45309; }
.wk-pcc-side-f.is-none, .wk-pcc-side-f.is-none b { color: var(--c-red, #ef4444); }
.wk-pcc-side-f.is-over, .wk-pcc-side-f.is-over b { color: var(--wkch-2, #004b7c); }
.wk-pcc-side-f.is-ok { color: var(--c-green, #16a34a); }
.wk-pcc-side-f.is-ok::before { content: '\2713\00a0'; font-weight: 900; }

/* ── SELECT ALL, ON THE SECTION HEAD ──────────────────────────────────────
   It stands over the projects the head is counting and nothing else — see the
   note on `_wkPcSecHead`. */
.wk-pcc-secpick {
  flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 4px 10px 4px 7px; border-radius: 999px;
  font: inherit; font-size: 10.5px; font-weight: 800; line-height: 1;
  background: var(--surf, #fff); color: var(--ink2, #334155);
  border: 1px solid var(--border, #e2e8f0);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.wk-pcc-secpick:hover { border-color: var(--wkch-2, #004b7c); color: var(--wkch-2, #004b7c); }
.wk-pcc-secpick .wk-pcc-pick-box { width: 15px; height: 15px; border-radius: 5px; }
.wk-pcc-secpick .wk-pcc-pick-box svg { width: 10px; height: 10px; }
.wk-pcc-secpick.is-on { background: #15803d; border-color: #15803d; color: #fff; }
.wk-pcc-secpick.is-on .wk-pcc-pick-box { background: #fff; border-color: #fff; }
.wk-pcc-secpick.is-on .wk-pcc-pick-box svg { opacity: 1; stroke: #15803d; }

/* The band's Allocate button, once something is ticked. Same green, a count in
   the label — the button and the ticks have to read as one gesture. */
.wk-capalloc-btn.is-picked { box-shadow: 0 0 0 2px color-mix(in srgb, #15803d 35%, transparent); }

/* Work with nobody on it is a reason to allocate, so it is a chip like the
   others rather than a warning. */
.wk-pcc-chip.is-open { background: #fef3c7; color: #b45309; box-shadow: none; }

/* One column below a laptop width — the people container goes UNDER the figures
   rather than beside them, keeping its own ground so it still reads as a
   container. */
@media (max-width: 1240px) {
  .wk-pcc--alloc .wk-pcc-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'main' 'side' 'stats';
  }
  .wk-pcc-side {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 85%, transparent);
  }
}

/* ── WHAT THERE IS TO ALLOCATE ───────────────────────────────────────────
   The chips that replaced the Budget / Next Due / Deadline tiles. Each is drawn
   only when it is non-zero — a row of three "—" is the emptiness those tiles
   were printing on a brand-new project. */
.wk-pcc-work { display: flex; flex-wrap: wrap; gap: 4px 5px; }
.wk-pcc-chip {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
  background: var(--surf2, #f1f5f9); color: var(--ink2, #525252);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #e2e8f0) 70%, transparent);
}
.wk-pcc-chip.is-late { background: #fee2e2; color: #b91c1c; box-shadow: none; }
.wk-pcc-chip.is-done { background: #dcfce7; color: #15803d; box-shadow: none; }

/* ══ THE TIME LOG, IN PLACE OF THE CARDS ══════════════════════════════════
   Tyler: *"If you click it, it should show all the time logs underneath. You
   click that scorecard, and then you can click back easily to see all the
   projects."* Same container, not a popup — so the band above never moves and
   the way back is the first thing on the screen. */
.wk-pcl { grid-column: 1 / -1; min-width: 0; display: block; }
.wk-pcl-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0;
  padding: 0 2px 9px; margin-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 85%, transparent);
}
.wk-pcl-back {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px 6px 8px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 800; line-height: 1;
  background: var(--surf, #fff); color: var(--ink, #0f172a);
  border: 1px solid var(--border, #e2e8f0);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.wk-pcl-back:hover {
  background: var(--surf2, #f1f5f9);
  border-color: color-mix(in srgb, var(--wkch-2, #004b7c) 35%, var(--border, #e2e8f0));
  transform: translateX(-2px);
}
.wk-pcl-back svg { width: 14px; height: 14px; flex: none; stroke: currentColor; stroke-width: 3; fill: none; }
.wk-pcl-title {
  min-width: 0; display: flex; align-items: baseline; gap: 7px;
  font-size: 13px; font-weight: 900; color: var(--ink, #0f172a);
}
.wk-pcl-title small { font-size: 10px; font-weight: 700; color: var(--ink3, #64748b); }
.wk-pcl-tot {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink2, #525252);
}
.wk-pcl-tot b { font-weight: 900; color: var(--ink, #0f172a); }
.wk-pcl-day { display: flex; align-items: center; gap: 8px; margin: 12px 2px 5px; }
.wk-pcl-dayd {
  font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink3, #64748b);
}
.wk-pcl-dayv { margin-left: auto; font-size: 11px; font-weight: 900; color: var(--ink, #0f172a); }
.wk-pcl-row {
  display: grid; grid-template-columns: minmax(80px, .8fr) minmax(110px, 1.2fr) minmax(0, 2fr) 52px;
  align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: var(--surf, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #e2e8f0) 75%, transparent);
  transition: background .18s ease;
}
.wk-pcl-row + .wk-pcl-row { margin-top: 4px; }
.wk-pcl-row:hover { background: var(--surf2, #f8fafc); }
.wk-pcl-row:focus-visible { outline: 2px solid var(--wkch-3, #2e6b94); outline-offset: 1px; }
.wk-pcl-who {
  font-size: 11.5px; font-weight: 800; color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-pcl-pj {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  font-size: 11px; font-weight: 700; color: var(--ink2, #525252);
}
.wk-pcl-pj > small { font-size: 9.5px; font-weight: 600; color: var(--ink3, #64748b); }
.wk-pcl-note {
  font-size: 11px; color: var(--ink3, #64748b);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-pcl-note i { color: var(--ink4, #94a3b8); }
.wk-pcl-h { text-align: right; font-size: 12px; font-weight: 900; color: var(--ink, #0f172a); }
.wk-pcl-empty {
  padding: 26px 12px; text-align: center; font-size: 12px; font-weight: 600;
  color: var(--ink3, #64748b);
}
/* ⚠️ FLEX, NOT A NARROWER GRID, at phone width — and the hours are re-ORDERED
   onto the first line rather than left to auto-place, which with three
   explicitly-placed items lands them in whichever cell happens to be free. */
@media (max-width: 760px) {
  .wk-pcl-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 3px; }
  .wk-pcl-who { flex: 1 1 60px; order: 0; }
  .wk-pcl-h { flex: none; order: 1; }
  .wk-pcl-pj { flex: 1 1 100%; order: 2; }
  .wk-pcl-note { flex: 1 1 100%; order: 3; white-space: normal; text-overflow: clip; }
  .wk-pcl-tot { margin-left: 0; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-pcc-fill, .wk-pcc-chev, .wk-pcl-back, .wk-pcl-row { transition: none; }
}
/* ══ THE PROJECT FILTER PANEL ═══════════════════════════════════════════════
   Body-portaled and position:fixed, because the toolbar it hangs off lives
   inside a panel that scrolls — an absolutely-positioned panel there is one
   `overflow` away from being clipped in half.
   ⚠️ The tier is just BELOW .wk-cs-pop (2147483000) on purpose: a coded
   dropdown opened from inside this panel has to land on top of it. */
.wk-pf-pop {
  position: fixed; z-index: 2147482000;
  width: 340px; max-width: calc(100vw - 16px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surf, #fff);
  border: 1px solid var(--border, #cbd5e1); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.08);
  font-size: 12.5px; color: var(--ink, #0f172a);
}
.wk-pf-head {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 11px 10px 10px 14px;
  border-bottom: 1px solid var(--border-s, #f1f5f9);
}
.wk-pf-t {
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink3, #64748b);
}
/* The live count of what survives, next to the word Filters — the panel's
   own preview, and the reason there is no Apply button to press. */
.wk-pf-n { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ink3, #64748b); }
.wk-pf-x {
  flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 6px; cursor: pointer;
  color: var(--ink3, #64748b);
}
.wk-pf-x svg { width: 14px; height: 14px; }
.wk-pf-x:hover { background: var(--border-s, #f1f5f9); color: var(--ink, #0f172a); }
.wk-pf-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0 6px; }
.wk-pf-sec { padding: 8px 12px 4px; }
.wk-pf-sec + .wk-pf-sec { border-top: 1px solid var(--border-s, #f1f5f9); }
.wk-pf-sec-h {
  font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--ink3, #64748b); margin-bottom: 7px;
}
.wk-pf-sec-l {
  display: block; margin-top: 2px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink4, #94a3b8);
}
.wk-pf-vals { display: flex; flex-direction: column; gap: 2px; }
.wk-pf-val {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 1px solid transparent; border-radius: 8px;
  background: none; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink, #0f172a); line-height: 1.3;
}
.wk-pf-val:hover { background: var(--border-s, #f1f5f9); }
.wk-pf-val.is-on {
  background: color-mix(in srgb, var(--c-blue, #2563eb) 9%, var(--surf, #fff));
  border-color: color-mix(in srgb, var(--c-blue, #2563eb) 32%, transparent);
  color: var(--c-blue, #2563eb); font-weight: 700;
}
/* An ellipsis needs a BLOCK, and a flex child grows rather than shrinking —
   min-width:0 is what actually lets a long project owner's name clamp. */
.wk-pf-val-l { flex: 1 1 auto; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-pf-val-n {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--ink4, #94a3b8);
  font-variant-numeric: tabular-nums;
}
.wk-pf-val.is-on .wk-pf-val-n { color: inherit; opacity: .8; }
.wk-pf-mk { flex: 0 0 auto; display: inline-flex; align-items: center; }
.wk-pf-mk svg { width: 13px; height: 13px; }
.wk-pf-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.wk-pf-ini {
  width: 18px; height: 18px; border-radius: 50%; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 800; letter-spacing: .02em;
}
.wk-pf-empty { padding: 18px 14px; color: var(--ink4, #94a3b8); text-align: center; }
.wk-pf-foot { flex: 0 0 auto; padding: 8px 12px 11px; }
.wk-pf-foot:has(> [hidden]) { display: none; }
.wk-pf-reset {
  width: 100%; padding: 7px 10px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--ink2, #334155);
  background: var(--border-s, #f1f5f9); border: 1px solid var(--border, #cbd5e1);
}
.wk-pf-reset:hover { background: var(--surf, #fff); border-color: var(--ink4, #94a3b8); }
.wk-pf-reset[hidden] { display: none; }

/* The empty grid's own controls — the ONLY filter affordance on screen when
   the board has been filtered to nothing (the popover is not in the DOM). */
.wk-empty--filt { gap: 10px; font-style: normal; }
.wk-empty-t { font-size: 13px; font-weight: 700; color: var(--ink2, #334155); }
.wk-empty-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.wk-pf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; font-style: normal;
  color: var(--c-blue, #2563eb);
  background: color-mix(in srgb, var(--c-blue, #2563eb) 10%, var(--surf, #fff));
  border: 1px solid color-mix(in srgb, var(--c-blue, #2563eb) 30%, transparent);
}
.wk-pf-chip:hover { background: color-mix(in srgb, var(--c-blue, #2563eb) 18%, var(--surf, #fff)); }
.wk-pf-chip-g { font-weight: 600; opacity: .65; }
.wk-pf-chip-x { font-size: 13px; line-height: 1; opacity: .7; }
.wk-pf-clear-all {
  font: inherit; font-size: 11.5px; font-weight: 700; font-style: normal;
  color: var(--ink3, #64748b); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}