/* ================================================================
   Engagement Profile v1 — Popup styles
   Reuses .gp-* shell from project-profile.css for overlay/popup/topbar/tabs.
   .ep-* classes are engagement-specific content styles.
   ================================================================ */

/* ── Topbar icon override ── */
.ep-topbar-icon {
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
}

/* ── Topbar Edit button (subtle, sits next to Close) ── */
.ep-topbar-edit {
  width: auto !important;
  padding: 6px 12px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #475569 !important;
  background: #f1f5f9 !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  cursor: pointer;
  margin-right: 6px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ep-topbar-edit:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}
.ep-topbar-edit svg {
  width: 14px;
  height: 14px;
}

/* ── Panel wrapper ── */
.ep-panel {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
/* Opt a panel out of being a scrollport so `position: sticky` children pin to
   the popup body (#epBody), which is what actually scrolls. See the comment at
   the _renderBody call site. */
.ep-panel--sticky-ok { overflow: visible; }

/* ── KPI Row ── */
.ep-kpi-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ep-kpi-card {
  flex: 1;
  min-width: 100px;
  padding: 12px 14px;
  background: var(--surf-raised, #f9fafb);
  border: 1px solid var(--border-s, #f3f4f6);
  border-radius: 12px;
  text-align: center;
}
button.ep-kpi-card-clickable {
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
button.ep-kpi-card-clickable:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.10);
}
button.ep-kpi-card-clickable:active {
  transform: translateY(0);
}

/* Documents-tab category scorecards — same KPI shell, but the active card is
   outlined in its own type color so users can see which filter is engaged. */
.ep-doc-cat-row { margin-bottom: 16px; }
button.ep-doc-cat {
  border: 1px solid var(--border-s, #f3f4f6);
}
button.ep-doc-cat.is-active {
  border-color: var(--_cat-color, #6366f1);
  box-shadow: inset 0 0 0 1px var(--_cat-color, #6366f1), 0 4px 12px rgba(99,102,241,0.12);
  background: #ffffff;
}
/* Team-tab filter tiles share the clickable KPI shell — the engaged one gets
   the same outlined-active treatment as the document category cards. */
button.ep-kpi-card-clickable.is-active {
  border-color: #6366f1;
  box-shadow: inset 0 0 0 1px #6366f1, 0 4px 12px rgba(99, 102, 241, 0.12);
  background: #ffffff;
}
button.ep-kpi-card-clickable[disabled] {
  cursor: default;
  opacity: 0.85;
}
.ep-kpi-value {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}
.ep-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink2, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}
.ep-kpi-sub {
  font-size: 11px;
  color: var(--ink3, #9ca3af);
  margin-top: 1px;
}

/* ── Section ── */
.ep-section {
  margin-bottom: 20px;
}
.ep-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #111);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Detail Grid ── */
.ep-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
}
.ep-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-s, #f5f5f5);
}
.ep-detail-label {
  font-size: 12px;
  color: var(--ink3, #9ca3af);
  font-weight: 500;
}
.ep-detail-value {
  font-size: 12px;
  color: var(--ink, #111);
  font-weight: 600;
}
.ep-detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* ── Buttons ── */
.ep-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surf, #fff);
  color: var(--ink, #111);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ep-btn:hover {
  background: var(--surf-raised, #f9fafb);
  border-color: var(--ink3, #9ca3af);
}
.ep-btn-sm { padding: 4px 10px; font-size: 11px; }
.ep-btn-xs { padding: 3px 8px; font-size: 10px; }
.ep-btn-primary {
  background: var(--c-blue, #3b82f6);
  color: #fff;
  border-color: var(--c-blue, #3b82f6);
}
.ep-btn-primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}
.ep-btn-danger {
  color: #ef4444;
  border-color: #fecaca;
}
.ep-btn-danger:hover {
  background: #fef2f2;
  border-color: #ef4444;
}

/* ── Health Bar ── */
.ep-health-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ep-health-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surf-raised, #f9fafb);
  border: 1px solid var(--border-s, #f3f4f6);
  border-radius: 10px;
  min-width: 100px;
}
.ep-health-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ep-health-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink3, #9ca3af);
  text-transform: uppercase;
}
.ep-health-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #111);
}

/* ── Tables ── */
.ep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ep-table thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink3, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1.5px solid var(--border, #e5e7eb);
}
.ep-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-s, #f5f5f5);
  color: var(--ink, #111);
}
.ep-table tbody tr:hover {
  background: var(--c-blue-bg, #eff6ff);
}
.ep-task-row {
  cursor: pointer;
}

/* ── Phases ── */
.ep-phases {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ep-phase-card {
  padding: 10px 14px;
  background: var(--surf-raised, #f9fafb);
  border: 1px solid var(--border-s, #f3f4f6);
  border-radius: 10px;
  min-width: 110px;
}
.ep-phase-card strong {
  display: block;
  font-size: 12px;
  color: var(--ink, #111);
  margin-bottom: 4px;
}
.ep-phase-meta {
  font-size: 11px;
  color: var(--ink3, #9ca3af);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ep-phase-active {
  border-color: #3b82f6;
  background: #eff6ff;
}
.ep-phase-overdue {
  border-color: #ef4444;
  background: #fef2f2;
}

/* ── Initiative Cards ── */
.ep-initiatives {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.ep-init-card {
  padding: 14px 16px;
  background: var(--surf, #fff);
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ep-init-card:hover {
  border-color: var(--c-blue, #3b82f6);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}
.ep-init-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ep-init-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #111);
}
.ep-init-stats {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--ink3, #9ca3af);
  margin-bottom: 8px;
}

/* ── Team Grid ──
   Rich rolodex-style member cards: large photo, name+role+contact,
   stat tiles (tasks/done/overdue/logged), per-person completion bar
   and the projects this person works in surfaced as colored chips.
   Mirrors the look of the Client View contact rows. */
.ep-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.ep-team-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 14px;
  background: var(--surf, #fff);
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.ep-team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .10);
  border-color: var(--c-blue, #3b82f6);
}
.ep-team-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ep-team-avatar-wrap {
  flex-shrink: 0;
}
.ep-team-avatar-wrap .ep-circle {
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
.ep-team-info { flex: 1; min-width: 0; }
.ep-team-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #111);
  line-height: 1.2;
}
.ep-team-role {
  font-size: 12px;
  color: var(--ink2, #6b7280);
  margin-top: 2px;
}
.ep-team-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink3, #9ca3af);
}
.ep-team-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-team-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px 4px;
  border-top: 1px solid var(--border-s, #f3f4f6);
  border-bottom: 1px solid var(--border-s, #f3f4f6);
}
.ep-team-stat {
  text-align: center;
}
.ep-team-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #111);
  line-height: 1.1;
}
.ep-team-stat-val--red { color: var(--c-red, #ef4444); }
.ep-team-stat-lbl {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink3, #9ca3af);
  font-weight: 600;
  margin-top: 2px;
}
.ep-team-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink2, #6b7280);
  font-weight: 600;
}
.ep-team-bar {
  flex: 1;
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}
.ep-team-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
  /* Neutral, unranked fill — the bar shows relative load without singling
     anyone out (no gold/silver/bronze rank coloring). */
  background: #94a3b8;
}
.ep-team-bar-pct { white-space: nowrap; }
.ep-team-util { font-weight: 700; }
.ep-team-projects {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ep-team-projects-lbl {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink3, #9ca3af);
  font-weight: 600;
}
.ep-team-projects-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ep-team-proj-chip {
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border: 0;
  border-radius: 4px;
  background: #f3f4f6;
  color: #475569;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: filter 120ms ease, box-shadow 120ms ease;
}
.ep-team-proj-chip:hover {
  filter: brightness(.97);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}
.ep-team-proj-chip--more { background: #e5e7eb; color: #475569; border-left: 0 !important; }

/* ── Stat tile hover list — turns each workload count into an inspectable,
   clickable list of the actual deliverables / work streams behind it. ── */
.ep-team-stat--pop { position: relative; cursor: pointer; border-radius: 8px; }
.ep-team-stat--pop:hover { background: var(--border-s, #f3f4f6); }
.ep-team-stat--pop .ep-team-stat-val { text-decoration: underline dotted rgba(100, 116, 139, .5); text-underline-offset: 3px; }
.ep-team-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 220px;
  max-width: 300px;
  background: var(--surf, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 130ms ease, transform 130ms ease;
  text-align: left;
}
.ep-team-stat--pop:hover .ep-team-pop,
.ep-team-stat--pop:focus-within .ep-team-pop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.ep-team-pop-hd {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink3, #9ca3af);
  padding: 4px 8px 6px;
}
.ep-team-pop-body { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.ep-team-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink, #111);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  transition: background 110ms ease;
}
.ep-team-pop-item:hover { background: var(--border-s, #f3f4f6); }
.ep-team-pop-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-team-pop-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
}
.ep-team-pop-badge.is-done { background: rgba(16, 185, 129, .14); color: #047857; }
.ep-team-pop-badge.is-overdue { background: rgba(239, 68, 68, .14); color: #b91c1c; }

/* ── "Carrying the load" headline banner ── */
.ep-team-lead-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(245, 158, 11, .12), rgba(139, 92, 246, .10));
  border: 1.5px solid rgba(245, 158, 11, .35);
}
.ep-team-lead-av { flex-shrink: 0; }
.ep-team-lead-av .ep-circle { border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(15,23,42,.10); }
.ep-team-lead-txt { flex: 1; min-width: 0; }
.ep-team-lead-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #b45309;
}
.ep-team-lead-name { font-size: 17px; font-weight: 800; color: var(--ink, #111); line-height: 1.15; }
.ep-team-lead-breakdown { font-size: 12px; color: var(--ink2, #6b7280); margin-top: 2px; }
.ep-team-lead-score {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 26px;
  font-weight: 800;
  color: #b45309;
  line-height: 1;
}
.ep-team-lead-score span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink3, #9ca3af);
  margin-top: 3px;
}

/* ── Load rank badge + lead accent on the card ── */
.ep-team-card { position: relative; }
.ep-team-card.is-lead { border-left: 3px solid #8b5cf6; }
.ep-team-rank {
  position: absolute;
  top: -8px;
  left: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
}
.ep-team-auto-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink3, #9ca3af);
  background: var(--border-s, #f3f4f6);
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: middle;
}
.ep-team-load-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink3, #9ca3af);
}
.ep-team-bar-pct { white-space: nowrap; font-weight: 800; color: var(--ink, #111); }
.ep-team-donenote {
  font-size: 11.5px;
  color: var(--ink2, #6b7280);
  font-weight: 600;
}
.ep-team-donenote.has-overdue { color: var(--ink, #111); }
.ep-team-overdue {
  color: var(--c-red, #ef4444);
  font-weight: 800;
}
.ep-team-metaline {
  font-size: 11px;
  color: var(--ink3, #9ca3af);
  font-weight: 600;
}

/* ══ Team tab — compact, impact-ranked cards (ep-tc) ══ */
/* Every member card is the SAME size — a card is a person, not a scoreboard, so
   a teammate with less tracked work must not render as a visibly smaller box.
   stretch + grid-auto-rows:1fr equalizes across rows as well as within one. */
.ep-team-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.ep-tc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;
  background: var(--surf, #fff);
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 14px;
  transition: box-shadow 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.ep-tc:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.ep-tc-head { display: flex; align-items: center; gap: 10px; }
.ep-tc-av {
  flex-shrink: 0; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%; line-height: 0;
}
.ep-tc-av .ep-circle { border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15,23,42,.10); }
.ep-tc-av:hover .ep-circle { box-shadow: 0 0 0 2px var(--c-blue, #3b82f6); }
.ep-tc-id { flex: 1; min-width: 0; }
.ep-tc-name {
  display: inline; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink, #111);
  line-height: 1.15; text-align: left; max-width: 100%;
}
.ep-tc-name:hover { color: var(--c-blue, #3b82f6); text-decoration: underline; }
.ep-tc-role { font-size: 11.5px; color: var(--ink2, #6b7280); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Last active" — recency of real logged work. A muted chip; a green dot when
   the person worked this week (are they actually on it right now?). */
.ep-tc-active {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; color: var(--ink3, #9ca3af);
  white-space: nowrap;
}
.ep-tc-active-dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; }
.ep-tc-active.is-recent { color: #047857; }
.ep-tc-active.is-recent .ep-tc-active-dot { background: #10b981; }

.ep-tc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 8px 2px; border-top: 1px solid var(--border-s, #f3f4f6); border-bottom: 1px solid var(--border-s, #f3f4f6);
}
.ep-tc-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 2px; border: 0; background: none; border-radius: 8px; text-align: center;
}
.ep-tc-stat--btn { cursor: pointer; transition: background 110ms ease; }
.ep-tc-stat--btn:hover { background: var(--border-s, #f3f4f6); }
.ep-tc-stat-v { font-size: 15px; font-weight: 800; color: var(--ink, #111); line-height: 1.05; white-space: nowrap; }
.ep-tc-stat-l { font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink3, #9ca3af); display: inline-flex; align-items: center; gap: 2px; }
.ep-tc-stat-l em { font-style: normal; font-size: 8px; color: var(--c-blue, #3b82f6); }

.ep-tc-prog { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ep-tc-prog-bar { flex: 1; height: 7px; border-radius: 4px; background: #f1f5f9; overflow: hidden; }
.ep-tc-prog-bar > i { display: block; height: 100%; border-radius: 4px; transition: width .4s ease; }
.ep-tc-prog-pct { font-size: 12px; font-weight: 800; white-space: nowrap; }

.ep-tc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; }
.ep-tc-note { font-size: 11.5px; font-weight: 600; color: var(--ink2, #6b7280); flex: 1; min-width: 0; }
.ep-tc-flag { flex-shrink: 0; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; }
.ep-tc-flag--overdue { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.ep-tc-flag--due { background: rgba(245, 158, 11, .12); color: #b45309; }

/* Floating click-popover (deliverables / work streams) — fixed, scrollable, never clipped */
/* Column flex so a max-height set on the popover shrinks the BODY (which
   scrolls) instead of clipping it under a header that keeps its full size.
   The JS used to cap the body alone, which meant header + capped body +
   footer could still add up to more room than there was. */
.ep-teampop {
  position: fixed; z-index: 1000060;
  display: flex; flex-direction: column;
  background: var(--surf, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(15, 23, 42, .22);
  overflow: hidden; animation: epTeampopIn 120ms ease;
  box-sizing: border-box;
}
.ep-teampop-hd, .ep-teampop-ft { flex-shrink: 0; }
@keyframes epTeampopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ep-teampop-hd {
  font-size: 11px; font-weight: 700; color: var(--ink, #111);
  padding: 10px 12px; border-bottom: 1px solid var(--border-s, #f3f4f6);
  display: flex; align-items: center; gap: 6px;
}
.ep-teampop-count { margin-left: auto; font-size: 10px; font-weight: 800; color: var(--ink3, #9ca3af); background: var(--border-s, #f3f4f6); padding: 1px 7px; border-radius: 999px; }
.ep-teampop-body {
  overflow-y: auto; padding: 6px;
  flex: 1 1 auto; min-height: 0;
  overscroll-behavior: contain;
}
.ep-teampop-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink, #111);
  text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 9px; cursor: pointer;
  transition: background 110ms ease;
}
.ep-teampop-item:hover { background: var(--border-s, #f3f4f6); }
.ep-teampop-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-teampop-go { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--c-blue, #3b82f6); opacity: 0; }
.ep-teampop-item:hover .ep-teampop-go { opacity: 1; }
.ep-teampop-badge { flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; }
.ep-teampop-badge.is-done { background: rgba(16, 185, 129, .14); color: #047857; }
.ep-teampop-badge.is-overdue { background: rgba(239, 68, 68, .14); color: #b91c1c; }
.ep-teampop-badge.is-open { background: var(--border-s, #f3f4f6); color: #64748b; }
.ep-team-typetag {
  font-size: 10px;
  font-weight: 700;
  color: #7c3aed;
  background: rgba(139, 92, 246, .12);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ── Projects sub-tab grid ─ uses .wk-goal-card markup from work.css ── */
.ep-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.ep-project-card {
  background: var(--surf, #fff);
}
/* Colored top stripe on each work-stream card — driven by --_project-accent
   (set inline per card from its status), so the color tracks the same signal
   as the progress bar and the cards separate at a glance. Higher specificity
   than the base .wk-goal-card::before so it wins regardless of load order. */
.ep-projects-grid .ep-project-card { position: relative; overflow: hidden; }
.ep-projects-grid .ep-project-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--_project-accent, var(--c-blue, #3b82f6));
  border-radius: 14px 14px 0 0; z-index: 2;
}

/* ── Work-stream cards: tuned for SCANNING ──
   A dozen near-identical cards in a grid is soup: the title, the status
   pill, the priority chip, the percentage and the deliverable count all
   render at roughly the same weight, so finding one stream means READING
   every card instead of spotting it. The scorecard filters and sort above
   narrow the set; these rules make whatever survives the filter scannable.
   Three moves, no new markup — the title becomes the only loud thing on
   the card, every card in a row shares one internal rhythm, and rows that
   can only restate what's already said get removed rather than shrunk. */

/* 1 ─ The title is the scan target; everything else is supporting text. */
.ep-projects-grid .wk-goal-title {
  font-size: 15.5px;
  font-weight: 750;
  letter-spacing: -.011em;
  line-height: 1.3;
  /* Two-line well: a one-line title reserves the same height as a wrapped
     one, so the meta, progress and footer rows land on the same baseline
     straight across the row instead of stair-stepping card to card. */
  min-height: calc(2 * 1.3em);
}
.ep-projects-grid .wk-goal-status { font-size: 9.5px; padding: 2.5px 8px; opacity: .9; }
.ep-projects-grid .wk-goal-progress-pct { font-size: 11px; font-weight: 700; color: var(--ink2, #475569); }
/* Out-specifies work.css's `.wk-goal-foot-row .wk-goal-task-summary` (equal
   weight there, so a tie would leave this at the mercy of link order). */
.ep-projects-grid .wk-goal-foot-row .wk-goal-task-summary { font-size: 10.5px; color: var(--ink3, #94a3b8); }

/* 2 ─ Drop the progress row when it can only echo the status pill. A "Not
   started" stream spends a whole row on an empty track, a 0%, and a "0 of
   N" count — three elements, one fact — and Complete is the same story at
   the other end. The card is a flex column, so the row's gap goes with it.
   What's left: the genuinely in-flight streams are the only ones wearing a
   progress bar, which is usually exactly what you came here to find. */
.ep-projects-grid .ep-project-card[data-project-status="planning"] .wk-goal-progress-wrap,
.ep-projects-grid .ep-project-card[data-project-status="complete"] .wk-goal-progress-wrap {
  display: none;
}

/* 2b ─ Pin the footer to the bottom of the card. Grid rows already stretch
   every card to a common height, so once the progress row can vanish from
   some cards and not others the avatar/count strips stop lining up. Pinning
   them means the footer is a straight rule across the whole row and the
   slack absorbs into the middle of the card instead. */
.ep-projects-grid .wk-goal-foot-row { margin-top: auto; }

/* 3 ─ Finished work recedes. You rarely scan for a stream that's already
   done, so Complete sits back at rest and comes fully forward on hover —
   still legible when the Complete scorecard is filtered to the whole view.
   Keyed off data-project-status, which _syncWorkStreamCards rewrites on an
   in-place refresh, so a stream that flips status re-styles without a
   re-render. */
.ep-projects-grid .ep-project-card[data-project-status="complete"] { opacity: .72; }
.ep-projects-grid .ep-project-card[data-project-status="complete"]:hover,
.ep-projects-grid .ep-project-card[data-project-status="complete"]:focus-within { opacity: 1; }

.ep-assignee-empty .wk-assignee-av--empty {
  background: #e5e7eb;
  color: #9ca3af;
  font-weight: 700;
}

/* ── Plan sub-tab: project groups ──
   Each project group has a colored rail running down the left so it's
   immediately clear which task cards belong to which project. The body
   in view-only mode hides destructive controls (delete, check-toggle)
   so non-admins can browse without accidentally mutating shared scope. */
.ep-plan-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}
.ep-plan-group {
  --_proj-accent: #6366f1;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 14px;
  background: var(--surf, #fff);
  overflow: hidden;
}

/* ── Drag-to-reorder (Plan tab) ─────────────────────────────────────── */
.ep-plan-dragwrap {
  /* Grip handle on the left + the task card filling the rest. The FLIP
     animation drives `transform`; this transition makes non-dragged cards
     glide to their new spots when one is dropped in. */
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform .2s cubic-bezier(.22,1,.36,1), opacity .15s ease;
  will-change: transform;
}
/* The task card (second child) takes the remaining width. */
.ep-plan-dragwrap > :last-child { flex: 1 1 auto; min-width: 0; }
/* Grip handle — the obvious drag affordance (edit mode only; not rendered otherwise). */
.ep-plan-drag-handle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 0 2px;
  color: #cbd5e1;
  cursor: grab;
  border-radius: 5px;
  transition: color .12s ease, background .12s ease;
  touch-action: none;
}
.ep-plan-drag-handle svg { display: block; fill: currentColor; }
.ep-plan-drag-handle:hover { color: #64748b; background: rgba(100,116,139,.10); }
.ep-plan-drag-handle:active { cursor: grabbing; color: #475569; }
.ep-plan-dragwrap.ep-plan-dragging {
  opacity: .5;
  transform: scale(.98);
}
.ep-plan-dragwrap.ep-plan-dragging .ep-plan-drag-handle { cursor: grabbing; }
/* Highlight the work-stream a task is being dragged into. */
.ep-plan-group-body.ep-plan-drop-into {
  background: color-mix(in srgb, var(--_proj-accent, #6366f1) 7%, transparent);
  outline: 2px dashed color-mix(in srgb, var(--_proj-accent, #6366f1) 55%, transparent);
  outline-offset: -4px;
  border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .ep-plan-dragwrap { transition: none; }
}
.ep-plan-group-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 22px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--_proj-accent) 8%, #fff), #fff 80%);
  cursor: pointer;
  border-bottom: 1px solid var(--border-s, #f3f4f6);
}
.ep-plan-group-head:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--_proj-accent) 14%, #fff), #fff 80%);
}
.ep-plan-group-rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--_proj-accent);
}
.ep-plan-group-info { flex: 1; min-width: 0; }
.ep-plan-group-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #111);
}
.ep-plan-group-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink2, #6b7280);
  margin-top: 2px;
}
.ep-plan-group-dot { color: #cbd5e1; }
.ep-plan-group-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}
.ep-plan-group-progress-bar {
  flex: 1;
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}
.ep-plan-group-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .35s ease;
}
.ep-plan-group-progress-pct {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink2, #6b7280);
  min-width: 32px;
  text-align: right;
}
.ep-plan-group-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.ep-plan-group-body::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--_proj-accent) 35%, transparent), transparent);
  pointer-events: none;
}
.ep-plan-group-empty {
  padding: 14px;
  text-align: center;
  color: var(--ink3, #9ca3af);
  font-size: 12.5px;
  font-style: italic;
}
.ep-plan-card-fallback {
  padding: 10px 12px;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink2, #6b7280);
}
/* View-only: hide write affordances inside task cards so listed-but-
   not-privileged users can browse the plan without nudging shared
   scope. The task profile popup keeps its own can-edit gate. */
.ep-plan-group-body.ep-view-only .mw-card-del,
.ep-plan-group-body.ep-view-only .wk-task-check {
  pointer-events: none;
  opacity: .55;
}
.ep-plan-group-body.ep-view-only .mw-card-del { display: none; }
/* Compact tweaks for popup-embedded mw-task-card so it fits the
   narrower space the engagement-profile popup gives us. */
.ep-plan-group-body .mw-task-card { width: 100%; }

/* ── Empty States ── */
.ep-empty {
  padding: 16px;
  text-align: center;
  color: var(--ink3, #9ca3af);
  font-size: 13px;
}
.ep-empty-state {
  padding: 40px 20px;
  text-align: center;
}
.ep-empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
}
.ep-empty-state h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #111);
  margin: 0 0 6px;
}
.ep-empty-state p {
  font-size: 13px;
  color: var(--ink3, #9ca3af);
  margin: 0;
}

/* ── Burn Bar ── */
.ep-burn-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.ep-burn-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.ep-burn-label {
  font-size: 11px;
  color: var(--ink3, #9ca3af);
  text-align: center;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .ep-kpi-row { gap: 8px; }
  .ep-kpi-card { min-width: 80px; padding: 8px 10px; }
  .ep-kpi-value { font-size: 16px; }
  .ep-detail-grid { grid-template-columns: 1fr; }
  .ep-initiatives { grid-template-columns: 1fr; }
  .ep-team-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Big Plan Page — timeline view (v2)
   ================================================================ */
.ep-plan-header {
  position: sticky;
  top: 0;
  margin: 0 -24px 16px;
  padding: 12px 24px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0.95) 100%);
  border-bottom: 1px solid #e5e7eb;
  z-index: 5;
}
.ep-plan-header-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}
.ep-plan-mini-kpis {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 12px;
  color: #475569;
}
.ep-plan-mini-kpi strong {
  color: #0f172a;
  font-weight: 700;
  font-size: 14px;
  margin-right: 4px;
}
.ep-plan-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  align-items: center;
}
/* Plan-tab action buttons — uniform pill height + clear hover state.
   Bigger than ep-btn-xs so they read as real CTAs (the user kept missing
   them because they were 10px / 3px-padded and lost in the header). */
.ep-plan-actions .ep-btn {
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 9px;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
/* Outline (non-primary) plan-action buttons. Scoped to :not(.ep-btn-primary)
   so we don't fight the primary's white-on-color treatment. */
.ep-plan-actions .ep-plan-action-btn:not(.ep-btn-primary) {
  border-color: #cbd5e1;
  color: #1e293b;
  background: #fff;
}
.ep-plan-actions .ep-plan-action-btn:not(.ep-btn-primary):hover {
  border-color: #4f46e5;
  color: #4f46e5;
  background: #eef2ff;
  transform: translateY(-1px);
}
/* Primary (filled) plan-action button — keep white font on the colored fill. */
.ep-plan-actions .ep-btn-primary {
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(59, 130, 246, 0.25);
}
.ep-plan-actions .ep-btn-primary:hover {
  color: #fff !important;
  box-shadow: 0 4px 12px -3px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}
.ep-plan-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ep-plan-filter-pill {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid transparent;
  cursor: pointer;
}
.ep-plan-filter-pill.is-active {
  background: #6366f118;
  color: #6366f1;
  border-color: #6366f1;
}
.ep-plan-filter-pill[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ep-plan-banner {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: 4px;
}
.ep-plan-banner-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ep-plan-banner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #334155;
}
.ep-plan-banner-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.ep-plan-banner-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ep-plan-spine {
  position: relative;
}
.ep-plan-empty {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
}
.ep-plan-empty .ep-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.ep-plan-empty h3 {
  margin: 4px 0;
  font-size: 16px;
  color: #0f172a;
}
.ep-plan-empty p {
  margin: 4px 0 16px;
  font-size: 13px;
}

.ep-plan-milestone {
  position: relative;
  margin-bottom: 16px;
  padding: 14px 16px 14px 18px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  border-left-width: 4px;
  border-left-color: #cbd5e1;
}
.ep-plan-milestone-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.ep-plan-milestone-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.ep-plan-milestone-info {
  flex: 1;
  min-width: 0;
}
.ep-plan-milestone-name {
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
}
.ep-plan-milestone-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 11px;
  color: #475569;
  align-items: center;
}
.ep-plan-meta-chip {
  padding: 2px 6px;
  background: #f1f5f9;
  border-radius: 4px;
}
.ep-plan-milestone-actions {
  flex-shrink: 0;
}
.ep-plan-milestone-progress {
  margin: 6px 0 12px;
  padding-left: 22px;
}
.ep-plan-milestone-empty {
  padding: 10px 22px;
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}
.ep-plan-milestone-empty .ep-link {
  color: #6366f1;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  margin-left: 6px;
  text-decoration: underline;
}

.ep-plan-project-row {
  margin-left: 22px;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}
.ep-plan-project-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ep-plan-project-name {
  font-weight: 600;
  font-size: 13px;
  color: #0f172a;
  cursor: pointer;
  flex-shrink: 0;
}
.ep-plan-project-name:hover {
  color: #6366f1;
  text-decoration: underline;
}
.ep-plan-project-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #475569;
  flex: 1;
  align-items: center;
}
.ep-plan-project-actions {
  flex-shrink: 0;
}
.ep-plan-project-progress {
  margin: 6px 0;
}
.ep-plan-project-empty {
  padding: 6px 8px;
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

.ep-plan-task-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin: 2px 0;
  background: #ffffff;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid transparent;
}
.ep-plan-task-row:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
}
.ep-plan-task-name {
  flex: 1;
  min-width: 0;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-plan-task-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.ep-plan-task-meta-chip {
  padding: 1px 6px;
  font-size: 10px;
  background: #f1f5f9;
  border-radius: 3px;
  color: #475569;
}
.ep-plan-task-flag {
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  border-radius: 3px;
  text-transform: uppercase;
}
.ep-plan-show-more {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 11px;
  color: #6366f1;
  background: none;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}
.ep-plan-show-more:hover {
  background: #f8fafc;
  border-color: #6366f1;
}
.ep-plan-orphan-tasks {
  background: #fefce8;
  border-color: #fde68a;
}

.ep-plan-unscheduled {
  margin-top: 24px;
  padding: 14px 16px;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 8px;
}
.ep-plan-unscheduled-head {
  margin-bottom: 8px;
}
.ep-plan-unscheduled-section {
  margin-top: 10px;
}

/* ══════════════════════════════════════════════════════════
   CIRCULAR AVATARS / LOGOS — mirrors CRM look
   ══════════════════════════════════════════════════════════ */
.ep-circle {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ep-circle-img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}
.ep-circle-img {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.ep-circle-fallback {
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   COMPANY + CONTACTS HERO
   ══════════════════════════════════════════════════════════ */
.ep-company-hero {
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  animation: epHeroIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes epHeroIn {
  from { transform: translateY(-6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.ep-company-side {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-shrink: 0;
}
.ep-company-logo-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ep-company-logo-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.ep-company-logo-btn:hover .ep-circle {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
/* Display-only variants — read-mode hero must not look interactive */
.ep-company-logo-static {
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  cursor: default;
}
.ep-company-name-static {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink, #111);
  line-height: 1.15;
  letter-spacing: -0.3px;
  cursor: default;
}
.ep-hero-person-static {
  cursor: default !important;
  background: rgba(255, 255, 255, 0.6) !important;
}
.ep-hero-person-static:hover {
  transform: none !important;
  border-color: var(--border, #e5e7eb) !important;
  background: rgba(255, 255, 255, 0.6) !important;
  box-shadow: none !important;
}
.ep-company-side-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ep-company-name-link {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink, #111);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  line-height: 1.15;
  letter-spacing: -0.3px;
  position: relative;
  transition: color 0.15s ease;
}
.ep-company-name-link:hover {
  color: var(--c-blue, #3b82f6);
}
.ep-company-name-link:hover::after {
  content: '↗';
  position: absolute;
  right: -18px;
  top: 0;
  font-size: 14px;
  color: var(--c-blue, #3b82f6);
  font-weight: 600;
}
.ep-company-name-empty {
  font-size: 18px;
  font-weight: 700;
  color: #92400e;
}
.ep-company-tagline {
  font-size: 12px;
  color: var(--ink3, #9ca3af);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ep-company-change {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-blue, #3b82f6);
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 5px;
  padding: 2px 7px;
  cursor: pointer;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
  transition: background 0.15s ease;
}
.ep-company-change:hover {
  background: rgba(59, 130, 246, 0.18);
}

/* Vertical divider between company and people */
.ep-hero-divider {
  width: 1px;
  background: var(--border, #e5e7eb);
  align-self: stretch;
  margin: 4px 6px;
}

/* People row inside the hero */
.ep-hero-people {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ep-hero-people-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ep-hero-people-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink3, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.ep-hero-people-pick {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-blue, #3b82f6);
  background: transparent;
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ep-hero-people-pick:hover {
  background: rgba(59, 130, 246, 0.08);
}
.ep-hero-people-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ep-hero-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ep-hero-person:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.4);
  background: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
}
.ep-hero-person-info {
  min-width: 0;
}
.ep-hero-person-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #111);
  white-space: nowrap;
}
.ep-hero-person-role {
  font-size: 10px;
  color: var(--ink3, #9ca3af);
  white-space: nowrap;
}
.ep-hero-people-empty {
  font-size: 12px;
  color: var(--ink3, #9ca3af);
  font-style: italic;
  padding: 8px 0;
}

/* ── Initiative card contacts ── */
.ep-init-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 10px 0 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border-s, #f3f4f6);
}
.ep-init-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  background: #f9fafb;
  border: 1px solid var(--border-s, #f3f4f6);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ep-init-contact:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.4);
  background: #fff;
}
.ep-init-contact-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink2, #6b7280);
  white-space: nowrap;
}
.ep-init-contact-empty {
  font-size: 11px;
  color: var(--ink3, #9ca3af);
  font-style: italic;
}
.ep-init-contact-pick {
  font-size: 10px !important;
  padding: 2px 8px !important;
}

/* ══════════════════════════════════════════════════════════
   ANIMATIONS / SMOOTH TRANSITIONS
   ══════════════════════════════════════════════════════════ */
.ep-fade-in {
  animation: epFadeIn 0.22s ease;
}
@keyframes epFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* KPI cards now lift on hover */
.ep-kpi-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ep-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* Initiative card lift */
.ep-init-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ep-init-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.10);
}

/* Tab switching pills */
.gp-tabs [data-ep-tab] {
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.gp-tabs [data-ep-tab]:hover {
  transform: translateY(-1px);
}

/* program-profile tabs — flex-fill with tighter geometry; collapse to
   icon-only at narrow widths (tooltips kept via title attribute). */
#epTabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
#epTabs::-webkit-scrollbar { height: 4px; }
#epTabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
#epTabs [data-ep-tab] {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  padding: 8px 8px;
  gap: 5px;
  font-size: 0.74rem;
}
#epTabs [data-ep-tab] span:not(.gp-tab-badge) {
  overflow: hidden;
  text-overflow: ellipsis;
}
#epTabs [data-ep-tab] svg { flex-shrink: 0; }
@media (max-width: 1100px) {
  #epTabs [data-ep-tab] { padding: 8px 6px; gap: 0; }
  #epTabs [data-ep-tab] span:not(.gp-tab-badge) { display: none; }
}

/* ── Segmented sub-toggle pill — used by Overview, Work, Risks, Financials ── */
.ep-overview-toggle, .ep-subtab-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px; margin-bottom: 14px;
}
.ep-ov-tog {
  padding: 6px 18px; border-radius: 7px; border: none; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; font-family: inherit;
  color: #64748b; background: transparent;
  transition: background .2s, color .2s, box-shadow .2s;
  white-space: nowrap;
}
.ep-ov-tog.is-active {
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.ep-ov-tog:not(.is-active):hover { color: #1e293b; }

/* Picker rows */
.ep-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.12s ease;
}
.ep-picker-row:hover {
  background: #f9fafb;
}
.ep-picker-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #6366f1;
  flex-shrink: 0;
}
.ep-picker-row-info {
  min-width: 0;
}
.ep-picker-row-name {
  font-size: 13px;
  font-weight: 600;
  color: #111;
}
.ep-picker-row-sub {
  font-size: 11px;
  color: #6b7280;
  margin-top: 1px;
}
.ep-picker-row-sub-faint {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 1px;
}

/* ── Subtle blank/unlinked state (no big yellow CTA) ── */
.ep-company-hero-blank {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-style: dashed;
  border-color: #e5e7eb;
}
.ep-company-logo-blank {
  background: none !important;
  border: none !important;
  cursor: pointer;
}
.ep-company-logo-blank:hover .ep-circle {
  border-color: #6366f1 !important;
  color: #6366f1 !important;
}
.ep-company-name-blank {
  font-size: 17px;
  font-weight: 700;
  color: #94a3b8;
  font-style: italic;
}
.ep-hero-people-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px dashed #cbd5e1;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ep-hero-people-empty-btn:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.04);
}

/* ══════════════════════════════════════════════════════════
   SEARCHABLE CLIENT PICKER
   ══════════════════════════════════════════════════════════ */
.ep-client-picker-overlay {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}
.ep-client-picker {
  width: 540px;
  max-width: 92vw;
  max-height: 70vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: epPickerIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes epPickerIn {
  from { transform: translateY(-12px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.ep-client-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
}
.ep-client-picker-title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
}
.ep-client-picker-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ep-client-picker-close:hover {
  background: #f3f4f6;
  color: #111;
}
.ep-client-picker-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
  color: #6b7280;
}
.ep-client-picker-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #111;
  background: transparent;
  font-family: inherit;
}
.ep-client-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  min-height: 200px;
}
.ep-client-picker-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
}
.ep-client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  margin-bottom: 2px;
  transition: background 0.12s, border-color 0.12s;
}
.ep-client-row:hover {
  background: #f9fafb;
  border-color: #e5e7eb;
}
.ep-client-row.is-current {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.3);
}
.ep-client-row-logo,
.ep-client-row-logo-fb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}
.ep-client-row-logo {
  object-fit: contain;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.ep-client-row-logo-fb {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.ep-client-row-info {
  flex: 1;
  min-width: 0;
}
.ep-client-row-name {
  font-size: 13px;
  font-weight: 600;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-client-row-sub {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 1px;
}
.ep-client-row-current {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-blue, #3b82f6);
  background: rgba(59, 130, 246, 0.12);
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ep-client-picker-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #f1f5f9;
}

/* ══════════════════════════════════════════════════════════
   COMPREHENSIVE EDIT MODAL — every program field in one place
   ══════════════════════════════════════════════════════════ */
.ep-edit-overlay {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
}
.ep-edit-modal,
.ep-new-contact {
  width: 640px;
  max-width: 96vw;
  max-height: 88vh;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: epPickerIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Inline mode — render the edit form INSIDE the engagement profile body
   instead of as a second overlay. The edit form now lives in a centered,
   comfortable-width column (.ep-edit-canvas) with each section presented as
   a clean white card — mirroring the polished read-only Overview instead of
   stretching inputs edge-to-edge across the full popup width. */
.ep-edit-modal--inline {
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  animation: epEditInlineFade 0.18s ease;
}
@keyframes epEditInlineFade { from { opacity: 0; } to { opacity: 1; } }
/* Soft canvas behind the edit cards so they read as distinct panels. */
#engagementProfileOverlay.ep-is-editing #epBody {
  background: #f8fafc;
}
/* Full-width edit surface with comfortable padding (matches the read-only
   Overview's .ep-panel insets) so the form fills the popup instead of
   sitting in a narrow centered column. */
.ep-edit-canvas {
  max-width: none;
  margin: 0;
  padding: 20px 24px 44px;
}
/* Body no longer scrolls independently (the popup body #epBody does) and
   contributes no padding of its own — the canvas owns the spacing. */
.ep-edit-modal--inline .ep-edit-body {
  padding: 0;
  overflow: visible;
}
/* Each section is a card: white surface, hairline border, generous padding
   — the same visual language as the Overview hero / KPI cards. */
.ep-edit-modal--inline .ep-edit-section {
  background: #fff;
  border: 1px solid #e9eef5;
  border-radius: 16px;
  padding: 18px 20px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}
.ep-edit-modal--inline .ep-edit-section:last-child {
  margin-bottom: 0;
}
/* Edit mode subtly highlights the tab strip but keeps it fully clickable —
   the user navigates between tabs to add/edit on each one. Save/Cancel in
   the form persist the identity edit; adds on other tabs commit on click. */
.ep-is-editing #epTabs {
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
  border-bottom: 1px solid #fdba74;
  transition: background 0.15s ease;
}

/* Pulsing "EDITING" badge in the header — identical to the Work Stream
   (#pdpEditBanner), Task (#tpEditBanner) and Goal (#wkEdEditBanner) popups so
   all four detail popups signal Edit mode the same way. Sits where the top
   Edit button was (that button hides in edit mode). */
#engagementProfileOverlay #epEditBanner { display: none; }
#engagementProfileOverlay.ep-is-editing #epEditBanner {
  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: epEditBannerIn .25s ease;
}
@keyframes epEditBannerIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* In edit mode the top-right button stays visible and flips to "Done" (JS),
   turning green to mirror the Task / Work Stream popups. The green is driven
   by the .ep-is-editing overlay class so it clears automatically on exit — no
   per-button cleanup needed. (Create mode hides the button inline via JS.) */
#engagementProfileOverlay.ep-is-editing .ep-topbar-edit {
  background: #16a34a !important;
  color: #fff !important;
  border-color: #16a34a !important;
}
#engagementProfileOverlay.ep-is-editing .ep-topbar-edit:hover {
  background: #15803d !important;
  color: #fff !important;
  border-color: #15803d !important;
}

/* Hide the "Open in Planning Workspace" deep-link button while editing —
   leaving the popup mid-edit drops uncommitted form state. */
#engagementProfileOverlay.ep-is-editing [data-ep-action="open-planning-workspace"] { display: none; }

/* Compact contacts display when the picker is collapsed — shows the
   already-selected contacts as small chips so the user can see who's on
   the program at a glance without the full searchable picker exploding
   into view every time they click Edit. */
/* Clickable contacts shell — collapsed state is the entire box, click
   anywhere to expand into the picker. Smooth height/opacity transition
   on swap. The shell wraps both states so the section feels continuous. */
.ep-edit-contacts-shell {
  position: relative;
  margin-top: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 12px;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  animation: epContactsShellIn 220ms ease;
}
@keyframes epContactsShellIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ep-edit-contacts-shell--collapsed {
  cursor: pointer;
  padding: 12px 40px 12px 14px;
}
.ep-edit-contacts-shell--collapsed:hover,
.ep-edit-contacts-shell--collapsed:focus-visible {
  border-color: #6366f1;
  background: #f8fafc;
  box-shadow: 0 1px 0 rgba(99, 102, 241, 0.08);
  outline: none;
}
.ep-edit-contacts-shell--expanded {
  padding: 12px 14px;
}
.ep-edit-contacts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ep-edit-contacts-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ep-edit-contacts-done {
  flex-shrink: 0;
}
.ep-edit-contacts-empty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
}
.ep-edit-contacts-shell--collapsed:hover .ep-edit-contacts-empty,
.ep-edit-contacts-shell--collapsed:focus-visible .ep-edit-contacts-empty {
  color: #4338ca;
}
.ep-edit-contacts-hint {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  display: flex;
  align-items: center;
  pointer-events: none;
  transition: transform 180ms ease, color 180ms ease;
}
.ep-edit-contacts-shell--collapsed:hover .ep-edit-contacts-hint {
  color: #6366f1;
  transform: translateY(-50%) translateY(2px);
}

.ep-edit-contacts-collapsed {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ep-edit-contacts-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  max-width: 280px;
}
.ep-edit-contacts-chip-info {
  min-width: 0;
}
.ep-edit-contacts-chip-name {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-edit-contacts-chip-role {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 1px;
}

/* Permission gating — every mutating button (add/edit/delete) hides in
   view mode. Only the Edit button itself (#epEdit / data-ep-action=
   "edit-program") stays visible so users can enter edit mode. */
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-edit-only],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action^="add-"],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action^="delete-"],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action="edit-risk"],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action="close-risk"],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action="reopen-risk"],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action="edit-decision"],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action="edit-change-order"],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action="ai-suggest-deliverables"],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action="deliv-quick-add"],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action="deliv-mark-done"],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action="log-time"],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action="manage-contacts"],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action="manage-project-contacts"],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action="change-client"],
#engagementProfileOverlay:not(.ep-is-editing) [data-ep-action="pick-client"],
/* Deliverable detail modal affordances — Save/Delete inside the modal */
#engagementProfileOverlay:not(.ep-is-editing) [data-deliv-modal-act="save"],
#engagementProfileOverlay:not(.ep-is-editing) [data-deliv-modal-act="delete"],
#engagementProfileOverlay:not(.ep-is-editing) [data-deliv-modal-act="ai-enhance"],
/* Plan-grid mutators — hide add/log/menu/delete but KEEP the expand
   button visible so read-only users can still open task profiles. */
#engagementProfileOverlay:not(.ep-is-editing) .wk-pg-phase-add,
#engagementProfileOverlay:not(.ep-is-editing) .wk-pg-log-time,
#engagementProfileOverlay:not(.ep-is-editing) .wk-pg-row-menu,
#engagementProfileOverlay:not(.ep-is-editing) .wk-pg-row-del,
/* Empty value-tracker chips ("+ Add value") are pure mutators. Filled
   chips ("$X/yr · Yh") are read-useful — keep visible but non-clickable
   in view mode so they don't open the popover. */
#engagementProfileOverlay:not(.ep-is-editing) .wk-vt-chip--empty {
  display: none !important;
}
#engagementProfileOverlay:not(.ep-is-editing) .wk-vt-chip--filled {
  pointer-events: none;
  cursor: default;
}
/* Deliverable detail modal in view mode — grey out the form so read-only
   intent is obvious.
   ⚠️ This used to key off `body:not([data-ep-mode="editing"])` AND set
   `pointer-events:none`. That was wrong twice over. The modal has its own
   Edit/Done toggle and its own `canEdit` state, and it opens from places
   that never set body[data-ep-mode] (work-stream popup, plan grid,
   dashboards) — so a field you were actively editing still matched the
   selector and was pointer-dead: you could not place the caret by
   clicking, could not drag-select, and every keystroke landed at
   position 0 (the only reason typing worked at all was the
   <label for> forwarding focus to the field). Style the real read-only
   state instead: render() already sets `disabled` on every field when
   !canEdit, and a disabled control is non-interactive on its own — no
   pointer-events needed. */
.ep-deliv-modal input:disabled,
.ep-deliv-modal select:disabled,
.ep-deliv-modal textarea:disabled {
  background: #f8fafc !important;
  color: #475569 !important;
}
/* Hide the in-form header (close-X + "Edit Program" title) since the
   engagement profile already has its own header above. */
.ep-edit-modal--inline .ep-edit-head {
  display: none;
}
.ep-new-contact {
  width: 480px;
}
.ep-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}
.ep-edit-title {
  font-size: 17px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.2px;
}
.ep-edit-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
  border-radius: 6px;
  display: flex;
}
.ep-edit-close:hover {
  background: #f3f4f6;
  color: #111;
}
.ep-edit-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 22px 22px;
}
.ep-edit-section {
  margin-bottom: 22px;
}
.ep-edit-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}
.ep-edit-section-add {
  font-size: 11px;
  font-weight: 700;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.15s;
}
.ep-edit-section-add:hover {
  background: rgba(99, 102, 241, 0.16);
}
.ep-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.ep-edit-field > span {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}
.ep-edit-field input,
.ep-edit-field select,
.ep-edit-field textarea {
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #111;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ep-edit-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.ep-edit-field input:focus,
.ep-edit-field select:focus,
.ep-edit-field textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.ep-edit-field textarea {
  resize: vertical;
  min-height: 56px;
}
.ep-edit-row {
  display: flex;
  gap: 10px;
}
.ep-edit-half { flex: 1; }
.ep-edit-third { flex: 1; }
.ep-edit-two-thirds { flex: 2; }

/* Company card + picker state */
.ep-edit-company-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #ffffff, #f9fafb);
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
}
/* Populated company card doubles as the "change" button — click anywhere on it
   to reopen the picker. Hover reveals the intent + the Clear action. */
.ep-edit-company-card--pick {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ep-edit-company-card--pick:hover,
.ep-edit-company-card--pick:focus-visible {
  border-color: #6366f1;
  background: linear-gradient(135deg, #ffffff, #f5f5ff);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  outline: none;
}
.ep-edit-company-change-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #6366f1;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  white-space: nowrap;
}
.ep-edit-company-card--pick:hover .ep-edit-company-change-hint,
.ep-edit-company-card--pick:focus-visible .ep-edit-company-change-hint {
  opacity: 1;
  transform: translateX(0);
}
/* Clear stays out of the way until you hover the card. */
.ep-edit-company-clear {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ep-edit-company-card--pick:hover .ep-edit-company-clear,
.ep-edit-company-card--pick:focus-within .ep-edit-company-clear {
  opacity: 1;
}
.ep-edit-company-info {
  flex: 1;
  min-width: 0;
}
.ep-edit-company-name {
  font-size: 15px;
  font-weight: 700;
  color: #111;
}
.ep-edit-company-sub {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}
.ep-edit-company-actions {
  display: flex;
  gap: 6px;
}
.ep-edit-pick-company {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: rgba(99, 102, 241, 0.04);
  border: 2px dashed rgba(99, 102, 241, 0.4);
  border-radius: 12px;
  color: #6366f1;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ep-edit-pick-company:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
}

/* Contacts grid (multi-select tiles) */
.ep-edit-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.ep-edit-contact input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #6366f1;
  flex-shrink: 0;
}
.ep-edit-contact-info {
  flex: 1;
  min-width: 0;
}
.ep-edit-contact-name {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-edit-contact-sub {
  font-size: 11px;
  color: #6b7280;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-edit-contact-faint {
  font-size: 10px;
  color: #9ca3af;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-edit-empty-soft {
  font-size: 12px;
  color: #6b7280;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
  padding: 12px 14px;
  font-style: italic;
}
/* "New contact" — the way out of an empty or incomplete contact list. Opens
   the CRM's own Add-Contact popup with this company pinned, so a missing
   person is never a dead end you have to leave the project to fix. */
.ep-edit-new-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: #4338ca;
  border-color: #c7d2fe;
  background: #eef2ff;
}
.ep-edit-new-contact:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
}
.ep-edit-new-contact svg { flex-shrink: 0; }
.ep-edit-empty-soft + .ep-edit-new-contact { margin-top: 10px; }
.ep-edit-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 14px 22px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
}

/* Popup-level edit footer — sticky bottom bar visible on every tab while
   the engagement profile is in edit mode. Driven entirely by the
   .ep-is-editing class on #engagementProfileOverlay. */
.ep-popup-foot {
  display: none;
  gap: 10px;
  align-items: center;
  padding: 14px 22px;
  border-top: 1px solid #e5e7eb;
  background: #fafbfc;
  flex-shrink: 0;
  z-index: 25;
  border-radius: 0 0 20px 20px;
}

/* Clip the popup so the body and edit footer follow the popup's rounded
   corners instead of bleeding flat to the bottom edge. The shared .gp-popup
   shell uses overflow:visible to let popovers escape; we scope the clip to
   the engagement profile so its bottom corners stay rounded. */
#engagementProfileOverlay .gp-popup {
  overflow: hidden;
}
#engagementProfileOverlay.ep-is-editing .ep-popup-foot {
  display: flex;
}
.ep-popup-foot-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #111;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ep-popup-foot-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}
.ep-popup-foot-btn--primary {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}
.ep-popup-foot-btn--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}
.ep-popup-foot-btn--primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.ep-popup-foot-btn--danger {
  background: #fff;
  color: #ef4444;
  border-color: #fecaca;
}
.ep-popup-foot-btn--danger:hover {
  background: #fef2f2;
  border-color: #ef4444;
}
/* ⚠️ DELETE PROJECT IS NOT A FOOTER BUTTON. It lives in the ⋯ menu, where
   the other whole-record actions (Export, Run report, Save as template)
   already are — a permanent red button an inch from Save Changes is an
   accident waiting for a mis-click.
   The element STAYS IN THE DOM and stays hidden rather than being deleted:
   the ⋯ item calls #epEditDelete.click(), because that button owns the
   confirm dialog, the optimistic card removal and the deleteEngagement
   cascade, and there must be exactly one of those. .click() fires on a
   display:none button, so the menu path is unaffected. */
#epEditDelete { display: none !important; }

/* ══════════════════════════════════════════════════════════
   POLISHED EMPTY STATES — overview without projects/activity
   ══════════════════════════════════════════════════════════ */
.ep-empty,
.ep-empty-state {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  border: 1.5px dashed #e5e7eb;
  border-radius: 12px;
  padding: 32px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}
.ep-empty-state h3 {
  font-size: 15px;
  font-weight: 700;
  color: #475569;
  margin: 8px 0 4px;
}
.ep-empty-state p {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 12px;
}
.ep-empty-state .ep-empty-icon {
  font-size: 32px;
  opacity: 0.5;
  margin-bottom: 6px;
}
/* SVGs in empty states have no intrinsic size — without this they balloon to
   fill the panel. Constrain them to a normal icon footprint. */
.ep-empty-icon svg {
  width: 44px;
  height: 44px;
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #94a3b8;
}

/* Section header more polished */
.ep-section {
  margin-bottom: 22px;
  animation: epFadeIn 0.32s ease both;
  animation-delay: 0.05s;
}
.ep-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}

/* KPI cards a touch nicer */
.ep-kpi-card {
  position: relative;
  overflow: hidden;
}
.ep-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.ep-kpi-card:hover::before {
  opacity: 0.4;
}

/* ══════════════════════════════════════════════════════════
   RISKS PANEL
   ══════════════════════════════════════════════════════════ */
.ep-risk-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.ep-risk-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.ep-risk-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
.ep-risk-card.is-resolved {
  background: #f8fafc;
  opacity: 0.72;
}
.ep-risk-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ep-risk-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.ep-risk-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  flex: 1;
  min-width: 0;
}
.ep-risk-card.is-resolved .ep-risk-title {
  text-decoration: line-through;
  color: #64748b;
}
.ep-risk-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 6px;
  white-space: nowrap;
}
.ep-risk-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.ep-risk-desc {
  font-size: 13px;
  color: #475569;
  margin: 4px 0 8px;
  line-height: 1.5;
}
.ep-risk-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ep-risk-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 6px;
}
.ep-risk-meta-chip strong {
  color: #0f172a;
  font-weight: 600;
}
.ep-risk-mit {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: #1e293b;
  background: #f0f9ff;
  border-left: 3px solid #0ea5e9;
  border-radius: 4px;
  line-height: 1.5;
}
.ep-risk-mit strong {
  color: #0369a1;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   DOCUMENTS PANEL
   ══════════════════════════════════════════════════════════ */
.ep-doc-group {
  margin-bottom: 18px;
}
.ep-doc-group-title {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}
.ep-doc-group-count {
  color: #94a3b8;
  font-weight: 500;
}
.ep-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.ep-doc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  cursor: pointer;
}
.ep-doc-card:hover {
  border-color: #6366f1;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12);
  transform: translateY(-1px);
}
.ep-doc-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  border-radius: 8px;
  background: #6b7280;
}
.ep-doc-icon-pdf { background: #dc2626; }
.ep-doc-icon-doc { background: #2563eb; }
.ep-doc-icon-xls { background: #16a34a; }
.ep-doc-icon-ppt { background: #ea580c; }
.ep-doc-icon-img { background: #db2777; }
.ep-doc-info {
  min-width: 0;
  flex: 1;
}
.ep-doc-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-doc-sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   STAKEHOLDER ROLE CHIPS (overview hero)
   ══════════════════════════════════════════════════════════ */
.ep-stakeholder-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  background: #e0e7ff;
  color: #4338ca;
}
.ep-stakeholder-sponsor { background: #fef3c7; color: #92400e; }
.ep-stakeholder-decision-maker { background: #dbeafe; color: #1e40af; }
.ep-stakeholder-champion { background: #dcfce7; color: #166534; }
.ep-stakeholder-day-to-day { background: #e0e7ff; color: #4338ca; }
.ep-stakeholder-influencer { background: #ede9fe; color: #5b21b6; }
.ep-stakeholder-end-user { background: #f1f5f9; color: #475569; }
.ep-stakeholder-detractor { background: #fee2e2; color: #991b1b; }

/* ══════════════════════════════════════════════════════════
   EDIT MODAL — contact + role row
   ══════════════════════════════════════════════════════════ */
.ep-edit-section-help {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   AREA OF THE BUSINESS — the seven buckets (wk-areas.js).
   Two faces: a PICKER on our own work, a STATEMENT on a
   client's (the company already decided it). The chip itself
   is styled by wk-areas.js, which injects its own scoped CSS
   so any surface can render one without importing anything.
   ══════════════════════════════════════════════════════════ */
/* ⚠️ SMALL, NOT FULL-WIDTH. Tyler, 2026-08-10: "it doesn't have to make up the
   whole width, it's just a small area." Picking one of seven words is a minor
   field; stretched edge to edge it read like the most important one on the
   form. Capped here rather than in the markup so the stated card, the picker
   and the description all shrink to the same measure and the section reads as
   one small block. `inline-flex` on the stated card means it hugs its chip
   instead of drawing a full-width box around a 100px pill. */
.ep-area-stated {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  max-width: 100%;
}
.ep-area-stated-sub {
  font-size: 11.5px;
  color: #94a3b8;
}
/* The stated face inside IDENTITY (2026-08-11 — the area replaced Engagement
   Type there). `.ep-edit-field` is a column flex, so without an explicit
   flex-start the inline-flex card is stretched back to full width by the
   default `stretch` and the whole point of the inline-flex is lost. */
.ep-area-field-stated { align-items: flex-start; }
.ep-area-field-stated .ep-area-stated { margin-top: 1px; }
/* "Pick a company and this becomes Client Delivery" — a footnote to the picker
   above it, not a section header, so it sits tight under the description and
   shares the description's measure. */
.ep-area-note {
  margin-top: -2px;
  margin-bottom: 12px;
  max-width: 520px;
  font-size: 11.5px;
}
/* The picker itself. 300px fits "Business Development" — the longest label —
   with room for the ✨ beside it, and stops well short of the form's edge. */
.ep-area-field {
  max-width: 300px;
}
/* The AI chip sits BESIDE the control, not under it, and does not stretch. */
.ep-area-field .wk-aifill-fieldwrap { align-items: center; }
.ep-area-field .wk-aifill-field { flex: 0 0 auto; align-self: center; }
/* The one-line description of the selected area. Empty until something is
   picked — it has no padding of its own so an empty node takes no space. */
.ep-area-blurb:not(:empty) {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  line-height: 1.5;
  /* Wider than the picker (a sentence needs the room) but still nowhere near
     the full form — it belongs to the small block above it. `border-box` so
     the cap is the cap: without it the 10px padding rides on top and the box
     measures 540. */
  box-sizing: border-box;
  max-width: 520px;
}
.ep-area-blurb svg { flex: 0 0 auto; margin-top: 1px; opacity: .7; }
/* Hero: stated under the project name, so the area reads at a glance. */
.ep-company-area { margin-top: 6px; }
/* A project with no area is a hole in every by-area report. Say so where it
   gets fixed rather than rendering nothing. */
.ep-area-missing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px dashed #f59e0b;
  background: rgba(245, 158, 11, .08);
  color: #b45309;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.ep-area-missing:hover { background: rgba(245, 158, 11, .16); }
.ep-edit-contact-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  margin: 0 0 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ep-edit-contact-search:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.ep-edit-contact-search svg {
  color: #94a3b8;
  flex-shrink: 0;
}
.ep-edit-contact-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  padding: 9px 0;
  font: inherit;
  font-size: 13px;
  color: #0f172a;
}
.ep-edit-contact-search input::placeholder {
  color: #94a3b8;
}
.ep-edit-contact-search-clear {
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}
.ep-edit-contact-search-clear:hover {
  background: #f1f5f9;
  color: #475569;
}
.ep-edit-contact-meta {
  font-size: 11px;
  color: #94a3b8;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}
.ep-edit-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.ep-edit-contact:hover { border-color: #cbd5e1; }
.ep-edit-contact.is-checked {
  border-color: #6366f1;
  background: #f5f3ff;
}
.ep-edit-contact-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
}
.ep-edit-contact-role {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 6px 28px 6px 10px;
  font-size: 12px;
  font-family: inherit;
  color: #0f172a;
  background-color: #fff;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.ep-edit-contact-role:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* ══════════════════════════════════════════════════════════
   RENEWAL ALERT (overview)
   ══════════════════════════════════════════════════════════ */
.ep-renewal-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.ep-renewal-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.ep-renewal-warn { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.ep-renewal-critical { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.ep-renewal-overdue { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.ep-renewal-icon { flex-shrink: 0; opacity: 0.85; }
.ep-renewal-body { flex: 1; min-width: 0; }
.ep-renewal-title { font-size: 14px; font-weight: 700; }
.ep-renewal-sub { font-size: 12px; opacity: 0.85; margin-top: 2px; }

/* ══════════════════════════════════════════════════════════
   CONTRACT VALUE / CHANGE ORDERS (budget tab)
   ══════════════════════════════════════════════════════════ */
.ep-contract-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.ep-contract-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.ep-contract-co { background: #fafafa; }
.ep-contract-co.is-pending { background: #fef3c7; border-color: #fcd34d; }
.ep-contract-co.is-rejected { background: #f3f4f6; opacity: 0.6; text-decoration: line-through; }
.ep-contract-total {
  background: #ecfdf5;
  border-color: #6ee7b7;
  font-weight: 700;
}
.ep-contract-label {
  font-size: 13px;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ep-contract-co-title { font-weight: 600; color: #0f172a; }
.ep-contract-co-date { font-size: 11px; color: #94a3b8; }
.ep-contract-value {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.ep-contract-co-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ══════════════════════════════════════════════════════════
   DECISIONS PANEL
   ══════════════════════════════════════════════════════════ */
.ep-decision-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.ep-decision-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.ep-decision-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
.ep-decision-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ep-decision-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.ep-decision-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  background: #e0e7ff;
  color: #4338ca;
  border-radius: 6px;
}
.ep-decision-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  flex: 1;
  min-width: 0;
}
.ep-decision-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.ep-decision-block { margin: 6px 0; }
.ep-decision-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.ep-decision-text {
  font-size: 13px;
  color: #1e293b;
  line-height: 1.5;
}
.ep-decision-decision .ep-decision-text {
  background: #f5f3ff;
  padding: 8px 10px;
  border-left: 3px solid #6366f1;
  border-radius: 4px;
}
.ep-decision-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* ══════════════════════════════════════════════════════════
   ACTIVITY FEED
   ══════════════════════════════════════════════════════════ */
.ep-activity-feed {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 10px;
}
.ep-activity-feed::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, #e5e7eb, #f1f5f9);
}
.ep-activity-item {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  position: relative;
}
.ep-activity-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
  margin-left: 6px;
  box-shadow: 0 0 0 3px #fff;
  z-index: 1;
}
.ep-activity-body {
  flex: 1;
  min-width: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #f1f5f9;
}
.ep-activity-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.ep-activity-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ep-activity-when {
  font-size: 11px;
  color: #94a3b8;
}
.ep-activity-text {
  font-size: 13px;
  color: #1e293b;
  line-height: 1.5;
}
.ep-activity-actor {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   REPORTS PANEL
   ══════════════════════════════════════════════════════════ */
.ep-report-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ep-report-range {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 28px 6px 10px;
  font-size: 12px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.ep-report {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 28px 32px;
  margin-top: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.ep-report-header {
  border-bottom: 2px solid #f1f5f9;
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.ep-report-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
}
.ep-report-sub {
  font-size: 14px;
  color: #475569;
  margin-top: 2px;
}
.ep-report-period {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}
.ep-report-headline {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 16px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}
.ep-report-headline-stat {
  display: flex;
  flex-direction: column;
}
.ep-report-stat-num {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
}
.ep-report-stat-label {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.ep-report-section {
  margin-top: 18px;
}
.ep-report-section h3 {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 6px;
}
.ep-report-section ul {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: #1e293b;
  line-height: 1.6;
}
.ep-report-section li { margin-bottom: 4px; }
.ep-report-section p {
  margin: 6px 0;
  font-size: 13px;
  color: #1e293b;
  line-height: 1.6;
}
.ep-report-meta {
  font-size: 11px;
  color: #64748b;
}
.ep-report-empty {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════
   COST RATE EDITOR (edit modal)
   ══════════════════════════════════════════════════════════ */
.ep-cost-rate-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ep-cost-rate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.ep-cost-rate-info { flex: 1; min-width: 0; }
.ep-cost-rate-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-cost-rate-sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 1px;
}
.ep-cost-rate-input {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0 10px;
  flex-shrink: 0;
}
.ep-cost-rate-input:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.ep-cost-rate-input input {
  width: 80px;
  border: none;
  background: transparent;
  padding: 7px 0;
  font-size: 13px;
  color: #0f172a;
  text-align: right;
  outline: none;
}
.ep-cost-rate-prefix,
.ep-cost-rate-suffix {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   MINI-CARD POPUP — company / person quick view, opens
   inside Work without navigating to CRM.
   ══════════════════════════════════════════════════════════ */
.ep-mini-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 70000;
  opacity: 0;
  transition: opacity 0.18s ease;
  backdrop-filter: blur(2px);
}
.ep-mini-overlay.is-open {
  display: flex;
  opacity: 1;
}
.ep-mini-modal {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(8px);
  transition: transform 0.2s ease;
}
.ep-mini-overlay.is-open .ep-mini-modal { transform: translateY(0); }

.ep-mini-head {
  padding: 18px 18px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #f1f5f9;
}
.ep-mini-head-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.ep-mini-head-info { min-width: 0; }
.ep-mini-name {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  letter-spacing: -0.2px;
}
.ep-mini-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
}
.ep-mini-close {
  width: 30px;
  height: 30px;
  border: 0;
  background: #f1f5f9;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: #475569;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.ep-mini-close:hover { background: #e2e8f0; color: #0f172a; }

.ep-mini-body {
  padding: 14px 18px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ep-mini-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 16px;
}
.ep-mini-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ep-mini-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ep-mini-val {
  font-size: 13px;
  color: #0f172a;
  word-break: break-word;
}
.ep-mini-val a {
  color: #3b82f6;
  text-decoration: none;
}
.ep-mini-val a:hover { text-decoration: underline; }
.ep-mini-link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: #3b82f6;
  cursor: pointer;
  text-align: left;
}
.ep-mini-link:hover { text-decoration: underline; }

.ep-mini-section {
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
}
.ep-mini-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.ep-mini-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ep-mini-list-item {
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #f1f5f9;
}
.ep-mini-list-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.ep-mini-list-sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}
.ep-mini-people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ep-mini-person-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: #0f172a;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ep-mini-person-chip:hover {
  background: #fff;
  border-color: #3b82f6;
}
.ep-mini-chip-name { line-height: 1; }
.ep-mini-chip-role {
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.4;
}

.ep-mini-foot {
  border-top: 1px solid #f1f5f9;
  padding: 12px 18px;
  display: flex;
  justify-content: flex-end;
}
.ep-mini-cta {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.ep-mini-cta:hover { filter: brightness(1.08); }

/* Section help — explanatory subtitle on Risks/Decisions etc. */
.ep-section-help {
  font-size: 12px;
  color: #64748b;
  line-height: 1.55;
  background: #f8fafc;
  border-left: 3px solid #cbd5e1;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  margin: 0 0 12px;
}
.ep-section-help em { color: #475569; font-style: normal; font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   TIME TAB — Quick-Log inline form, person scorecards, table
   ════════════════════════════════════════════════════════════ */

.ep-section-meta {
  font-weight: 500;
  font-size: 11px;
  color: #94a3b8;
  margin-left: 6px;
}

/* Quick Log inline form */
.ep-quicklog-section { padding: 0; }
.ep-quicklog {
  background: linear-gradient(180deg, #fafbff 0%, #f1f5fc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.ep-quicklog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ep-quicklog-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ep-quicklog-icon {
  font-size: 16px;
  filter: saturate(1.2);
}
.ep-quicklog-hint {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}
.ep-quicklog-grid {
  display: grid;
  /* Person · Hours · Date · Rate · Work Stream · Submit — no Task column: time
     is logged against a work stream (or the project), never against a task. */
  grid-template-columns: 1.5fr 0.7fr 1.1fr 1.2fr 1.8fr 0.9fr;
  gap: 8px 8px;
  align-items: end;
}
.ep-ql-field-notes {
  grid-column: 1 / -1;
  margin-top: 6px;
}
/* ── Quick Log meta row: quick-hour chips + billable toggle ── */
.ep-ql-metarow {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 16px;
  margin-top: 10px;
}
.ep-ql-quickhrs, .ep-ql-billwrap { display: flex; align-items: center; gap: 6px; }
.ep-ql-meta-lbl {
  font-size: 10px; font-weight: 600; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .3px; margin-right: 2px;
}
.ep-ql-hrchip {
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 999px;
  background: #fff; color: #475569; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.ep-ql-hrchip:hover { border-color: #c7cdd6; background: #f8fafc; }
.ep-ql-hrchip.is-active {
  background: #eef2ff; border-color: #c7d2fe; color: #4338ca;
}
.ep-ql-billtoggle {
  display: inline-flex; padding: 2px; gap: 2px;
  background: #f1f5f9; border-radius: 8px;
}
.ep-ql-billbtn {
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  padding: 6px 12px; border: 0; border-radius: 6px;
  background: transparent; color: #64748b; cursor: pointer;
  transition: background .14s, color .14s, box-shadow .14s;
}
.ep-ql-billbtn:hover { color: #0f172a; }
.ep-ql-billbtn.is-active {
  background: #fff; color: #0f172a;
  box-shadow: 0 1px 2px rgba(15,23,42,.12);
}
.ep-ql-billbtn[data-ql-bill="1"].is-active { color: #047857; }
.ep-ql-billbtn[data-ql-bill="0"].is-active { color: #b45309; }
.ep-ql-label-opt {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #94a3b8;
  margin-left: 6px;
  font-size: 10px;
}
.ep-ql-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ep-ql-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.ep-ql-input {
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #0f172a;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.ep-ql-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.ep-ql-input-num { text-align: right; font-variant-numeric: tabular-nums; }
.ep-ql-date-trigger {
  text-align: left;
  cursor: pointer;
  font-weight: 500;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-ql-date-trigger:hover { border-color: #94a3b8; }

/* Person typeahead — body-portaled at z-index 200000 so it floats above
   the engagement profile overlay (which lives at z-index ~12000) */
.ep-ql-person-wrap { position: relative; }
.ep-ql-suggest-portal {
  position: fixed;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
  z-index: 200000;
  min-width: 200px;
}
.ep-ql-suggest-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 13px;
}
.ep-ql-suggest-row:hover { background: #f1f5f9; }
.ep-ql-suggest-row > span:not(.ep-ql-suggest-role) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: #0f172a;
  flex: 1;
  min-width: 0;
}
.ep-ql-suggest-role { font-size: 11px; color: #94a3b8; flex-shrink: 0; }

/* Task picker trigger button (replaces the old <select>) */

/* Self-contained calendar popover (body-portaled, z-index 200000) */
.ep-ql-cal-portal {
  position: fixed;
  width: 280px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.08);
  padding: 12px;
  font: inherit;
  z-index: 200000;
}
.ep-ql-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ep-ql-cal-month {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
.ep-ql-cal-nav {
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  transition: background 0.12s, border-color 0.12s;
}
.ep-ql-cal-nav:hover { background: #f1f5f9; border-color: #cbd5e1; }
.ep-ql-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.ep-ql-cal-dow span {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.5px;
}
.ep-ql-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ep-ql-cal-day {
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
  transition: background 0.1s;
}
.ep-ql-cal-day:hover:not(.is-empty):not(:disabled) { background: #eef2ff; color: #4f46e5; }
.ep-ql-cal-day.is-empty { cursor: default; }
.ep-ql-cal-day.is-today {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 700;
}
.ep-ql-cal-day.is-selected {
  background: #6366f1 !important;
  color: #fff !important;
  font-weight: 700;
}
.ep-ql-cal-foot {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}
.ep-ql-cal-quick {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ep-ql-cal-quick:hover { background: #fff; border-color: #6366f1; color: #4f46e5; }

/* ════════════════════════════════════════════════════════════
   TASK PICKER — multi-select task-card popup modal
   ════════════════════════════════════════════════════════════ */
.ep-task-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ep-task-picker {
  background: #fff;
  border-radius: 14px;
  width: min(960px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32), 0 8px 16px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}
.ep-task-picker-head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);
}
.ep-task-picker-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ep-task-picker-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.ep-task-picker-sub {
  font-size: 12px;
  color: #64748b;
  flex: 1;
}
.ep-task-picker-sub strong { color: #6366f1; font-weight: 700; }
.ep-task-picker-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #64748b;
  display: flex;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.ep-task-picker-close:hover { background: #f1f5f9; color: #0f172a; }
.ep-task-picker-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.ep-task-picker-search {
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  flex: 1;
  min-width: 200px;
  background: #fff;
}
.ep-task-picker-search:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.ep-task-picker-phases {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ep-task-picker-phase {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ep-task-picker-phase:hover { border-color: #6366f1; color: #4f46e5; }
.ep-task-picker-phase.is-active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}
.ep-task-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  background: #f8fafc;
}
.ep-task-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.ep-task-picker-empty {
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
}
.ep-task-picker-empty h3 {
  font-size: 14px;
  margin: 8px 0 4px;
  color: #0f172a;
}
.ep-task-picker-empty p { font-size: 12px; margin: 0; }

/* Task card — selectable, looks like the existing task aesthetic */
.ep-task-card {
  position: relative;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px 12px 36px;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
  display: flex;
  gap: 10px;
}
.ep-task-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
  transform: translateY(-1px);
}
.ep-task-card.is-selected {
  border-color: #6366f1;
  background: linear-gradient(180deg, #fafbff 0%, #f3f4ff 100%);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(99, 102, 241, 0.15);
}
.ep-task-card-check {
  position: absolute;
  top: 12px;
  left: 10px;
  width: 18px;
  height: 18px;
  border: 2px solid #cbd5e1;
  border-radius: 5px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ep-task-card.is-selected .ep-task-card-check {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}
.ep-task-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ep-task-card-phase {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ep-task-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}
.ep-task-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.ep-task-card-prio {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: capitalize;
  background: #f1f5f9;
  color: #64748b;
}
.ep-task-card-prio.is-high { background: #fee2e2; color: #b91c1c; }
.ep-task-card-prio.is-critical { background: #fecaca; color: #991b1b; }
.ep-task-card-prio.is-medium { background: #fef3c7; color: #b45309; }
.ep-task-card-prio.is-low { background: #d1fae5; color: #065f46; }
.ep-task-card-due, .ep-task-card-est {
  font-size: 11px;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
}
.ep-task-card-assignee {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}
.ep-task-picker-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

/* Submit button + live total */
.ep-ql-submit {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #6366f1, #4f46e5);
  border: 0;
  border-radius: 7px;
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: filter 0.12s ease, transform 0.12s ease;
  white-space: nowrap;
}
.ep-ql-submit:hover { filter: brightness(1.06); }
.ep-ql-submit:active { transform: translateY(1px); }
.ep-ql-submit:disabled, .ep-ql-submit.is-saving { opacity: 0.7; cursor: progress; }
.ep-ql-total {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  .ep-quicklog-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .ep-ql-field-stream { grid-column: 1 / -1; }
  .ep-ql-field-submit { grid-column: 1 / -1; }
  .ep-ql-submit { width: 100%; }
}

/* Person scorecards (Time tab) */
.ep-time-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.ep-time-person-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.ep-time-person-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
  transform: translateY(-1px);
}
.ep-time-person-head {
  display: flex;
  gap: 10px;
  align-items: center;
}
.ep-time-person-meta { min-width: 0; flex: 1; }
.ep-time-person-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Logged time against somebody who isn't in Settings → Users. Amber because it
   is a record to fix, not a state to live with. */
.ep-time-notuser {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #92400e; background: #fef3c7; border-radius: 5px; padding: 1px 5px;
}
.ep-time-person-sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 1px;
}
.ep-time-person-stats {
  display: flex;
  gap: 12px;
  border-top: 1px solid #f1f5f9;
  padding-top: 8px;
}
.ep-time-stat { display: flex; flex-direction: column; }
.ep-time-stat-val {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.ep-time-stat-lbl {
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 1px;
}
.ep-time-person-bar {
  height: 4px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.ep-time-person-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.ep-time-person-pct {
  font-size: 11px;
  font-weight: 600;
  color: #6366f1;
}

/* Time table — search + period filter row */
.ep-time-filters {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ep-time-search {
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  width: 200px;
}
.ep-time-search:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); }
.ep-time-period {
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
}

/* Shared search box for the Work → Plan and Work Streams sub-tabs. */
.ep-search-row {
  position: relative;
  display: flex;
  align-items: center;
  margin: 8px 0 14px;
  max-width: 340px;
}
.ep-search-icon {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  color: #94a3b8;
  pointer-events: none;
}
.ep-search-input {
  font: inherit;
  font-size: 13px;
  width: 100%;
  padding: 7px 12px 7px 32px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
}
.ep-search-input::placeholder { color: #94a3b8; }
.ep-search-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.ep-search-noresults {
  padding: 24px 12px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
}

/* Time entry row — person cell with avatar */
.ep-time-person-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.ep-time-person-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.ep-time-row { transition: background 0.1s; }
.ep-time-row:hover { background: #f8fafc; }
.ep-time-row.is-clickable { cursor: pointer; }
/* Edit / Delete stay hidden until you hover (or focus into) the row. */
.ep-time-rowacts { opacity: 0; transition: opacity 0.12s; }
.ep-time-row:hover .ep-time-rowacts,
.ep-time-row:focus-within .ep-time-rowacts { opacity: 1; }
.ep-time-row-arrow { color: #cbd5e1; opacity: 0; transition: opacity 0.12s; }
.ep-time-row:hover .ep-time-row-arrow { opacity: 1; }
.ep-time-you {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.ep-time-notes-cell {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #475569;
  font-size: 12.5px;
}
.ep-time-notes-empty { color: #cbd5e1; font-weight: 500; }
.ep-time-notes-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════
   FINANCIALS TAB — funding sources, expenses, bucket burn
   ════════════════════════════════════════════════════════════ */

.ep-cell-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.ep-cell-muted { color: #64748b; }

.ep-funding-type-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
/* A source the engine derived from a grant linked to this project — it already
   pays for logged hours; opening it writes it down with whatever caps you set. */
.ep-funding-auto-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #0369a1;
  background: #e0f2fe;
  border: 1px dashed #7dd3fc;
}
.ep-funding-grant-link,
.ep-funding-client-link,
.ep-funding-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #475569;
  font-weight: 500;
}
.ep-funding-grant-link { color: #059669; }
.ep-funding-client-link { color: #0891b2; }
.ep-funding-contact { color: #475569; }
.ep-funding-table tr:hover,
.ep-expense-table tr:hover { background: #f8fafc; }
.ep-funding-total-row {
  background: #f8fafc !important;
  border-top: 2px solid #cbd5e1;
}
.ep-funding-total-row td { padding-top: 10px !important; padding-bottom: 10px !important; }

/* Funding source cards — replaces the table layout. Click card to edit;
   the × delete fades in only on hover/focus so the cards stay clean. */
.ep-funding-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.ep-funding-card {
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  outline: none;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.ep-funding-card:hover {
  border-color: var(--fs-accent, #cbd5e1);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.ep-funding-card:focus-visible {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.ep-funding-card:active { transform: translateY(1px); }
.ep-funding-card-accent {
  flex: 0 0 44px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14px;
  color: #fff;
}
.ep-funding-card-body {
  flex: 1;
  min-width: 0;
  padding: 14px 14px 12px;
  position: relative;
}
/* Grant-rich variant takes more visual real estate. */
.ep-funding-card--grant-rich { grid-column: span 2; }
@media (max-width: 720px) { .ep-funding-card--grant-rich { grid-column: span 1; } }
.ep-funding-card-grant-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0 8px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.ep-funding-card-stat { text-align: left; }
.ep-funding-card-stat-v {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ep-funding-card-stat-l {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #94a3b8;
  margin-top: 2px;
}
.ep-funding-card-burn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
}
.ep-funding-card-burn-bar {
  flex: 1;
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}
.ep-funding-card-burn-fill { height: 100%; transition: width .2s ease; }
.ep-funding-card-grant-meta {
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 6px;
}
/* What the draw window means TODAY. Three tones because the three answers carry
   different urgency: money you can still draw, money you can't draw yet, and
   money you can no longer draw at all — the last one is the one that costs real
   dollars if it goes unnoticed. */
.ep-funding-card-when {
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  margin-bottom: 6px;
  padding: 5px 8px;
  border-radius: 7px;
}
.ep-funding-card-when--ok   { color: #0f766e; background: rgba(13, 148, 136, .09); }
.ep-funding-card-when--wait { color: #b45309; background: rgba(245, 158, 11, .12); }
.ep-funding-card-when--bad  { color: #b91c1c; background: rgba(239, 68, 68, .11); }
/* The state line is a sentence in a span — no action button any more: a grant
   is live the moment it's attached, so there is nothing here to click. */
.ep-funding-card-when { display: flex; align-items: flex-start; }
.ep-funding-card-when > span { flex: 1; min-width: 0; }
.ep-funding-card-alloc {
  font-size: 11px;
  color: #475569;
  background: #fffbeb;
  border: 1px dashed #fde68a;
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 6px;
}
.ep-funding-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ep-funding-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  line-height: 1.3;
  word-break: break-word;
}
.ep-funding-card-amt {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.ep-funding-card-freq {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin-left: 4px;
}
/* Term line under the headline total — how the money arrives. */
.ep-funding-card-term {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  margin: -4px 0 7px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
/* Next / overdue payment callout. */
.ep-funding-card-due {
  font-size: 11.5px;
  font-weight: 600;
  color: #0f766e;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 7px;
  padding: 5px 8px;
  margin-bottom: 7px;
  line-height: 1.35;
}
.ep-funding-card-due--late {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}
.ep-funding-card-linked {
  font-size: 12px;
  margin-bottom: 6px;
}
.ep-funding-card-notes {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
  border-top: 1px dashed #e2e8f0;
  padding-top: 6px;
  margin-top: 4px;
}
.ep-funding-card-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
  padding: 0;
}
.ep-funding-card:hover .ep-funding-card-del,
.ep-funding-card:focus-within .ep-funding-card-del {
  opacity: 1;
}
.ep-funding-card-del:hover {
  background: #ef4444;
  color: #fff;
}
.ep-funding-card-total {
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
  border-color: #bbf7d0;
  cursor: default;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 14px 12px;
}
.ep-funding-card-total:hover { box-shadow: none; border-color: #bbf7d0; }
.ep-funding-card-total-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #047857;
  margin-bottom: 6px;
}
.ep-funding-card-total-amt {
  font-size: 24px;
  font-weight: 800;
  color: #047857;
  font-variant-numeric: tabular-nums;
}

/* Money input (used by funding-source Amount) — $ prefix + comma-formatted text */
.ep-money-input {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ep-money-input:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.ep-money-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: #f8fafc;
  color: #64748b;
  font-weight: 700;
  font-size: 14px;
  border-right: 1px solid #e2e8f0;
}
.ep-money-input input {
  flex: 1;
  border: none;
  outline: none;
  padding: 8px 10px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  background: transparent;
  width: 100%;
  min-width: 0;
}

.ep-bucket-burn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 100px;
}
.ep-bucket-burn-bar {
  flex: 1;
  height: 5px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  min-width: 50px;
}
.ep-bucket-burn-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.ep-bucket-burn span {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

/* Expense category chips */
.ep-expense-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.ep-expense-cat-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.ep-expense-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}
.ep-yes {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  background: #d1fae5;
  padding: 2px 8px;
  border-radius: 6px;
}
.ep-no {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 6px;
}

/* Expense + funding empty states */
.ep-empty-funding,
.ep-empty-expense,
.ep-empty-time {
  text-align: center;
  padding: 32px 24px;
  background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);
  border: 1px dashed #e2e8f0;
  border-radius: 12px;
}
.ep-empty-funding h3,
.ep-empty-expense h3,
.ep-empty-time h3 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 8px 0 4px;
}
.ep-empty-funding p,
.ep-empty-expense p,
.ep-empty-time p {
  font-size: 12px;
  color: #64748b;
  max-width: 480px;
  margin: 0 auto 12px;
  line-height: 1.55;
}
.ep-empty-funding .ep-empty-icon,
.ep-empty-expense .ep-empty-icon,
.ep-empty-time .ep-empty-icon,
.ep-empty-fin .ep-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: #6366f1;
  margin: 0 auto 10px;
  font-size: 32px; /* fallback if any consumer still passes an emoji */
  opacity: 1;
}
.ep-empty-fin .ep-empty-icon svg {
  width: 30px;
  height: 30px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Edit modal — checkbox row helper */
.ep-edit-checkbox {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
.ep-edit-checkbox input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.ep-edit-checkbox > span {
  margin-bottom: 0 !important;
  font-size: 12px !important;
  color: #475569 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}

/* ── Financials: unified empty-state for Funding / Buckets / Expenses ── */
.ep-empty-fin {
  text-align: center;
  padding: 32px 24px;
  background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);
  border: 1px dashed #e2e8f0;
  border-radius: 12px;
}
.ep-empty-fin .ep-empty-icon { font-size: 32px; opacity: 0.85; margin-bottom: 4px; }
.ep-empty-fin h3 { font-size: 14px; font-weight: 700; color: #0f172a; margin: 8px 0 4px; }
.ep-empty-fin p {
  font-size: 12px; color: #64748b;
  max-width: 480px; margin: 0 auto 12px; line-height: 1.55;
}

/* ── Allocation summary above the bucket table ── */
.ep-alloc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  margin: 0 0 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  color: #475569;
}

/* ── Project / virtual bucket markers ── */
.ep-bucket-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #6366f1;
  background: #eef2ff;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
/* Secondary qualifier riding alongside a number — "/ mo", "to date", the
   margin %. It was used by the Buckets table with no rule behind it at all,
   so it rendered at full weight and read as part of the figure. */
.ep-bucket-freq {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
}
.ep-bucket-virtual { background: #fafbff; }
.ep-bucket-virtual td { color: #475569; }

/* ── Modal field hint ── */
.ep-edit-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.ep-edit-meta {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 6px;
}

/* ── Coded UI dropdown (replaces native <select> in fin modals) ── */
.ep-cs {
  position: relative;
  width: 100%;
}
.ep-cs-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ep-cs-btn:hover { border-color: #94a3b8; }
.ep-cs-btn:focus,
.ep-cs.is-open > .ep-cs-btn {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.ep-cs-btn-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-cs-btn-caret {
  width: 12px; height: 12px;
  color: #94a3b8;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.ep-cs.is-open .ep-cs-btn-caret { transform: rotate(180deg); }
.ep-cs-menu {
  position: absolute;
  box-sizing: border-box;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 70000;
  max-height: 300px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
  padding: 4px;
  display: none;
  flex-direction: column;
}
/* Column layout so the search box and any pinned action row hold their
   place at the top and only the option list scrolls. */
.ep-cs.is-open .ep-cs-menu { display: flex; }
.ep-cs-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 6px 6px 0 0;
  flex-shrink: 0;
}
.ep-cs-search svg { color: #94a3b8; flex-shrink: 0; }
.ep-cs-search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 13px;
  color: #0f172a;
  padding: 4px 0;
}
.ep-cs-search-input::placeholder { color: #94a3b8; }
/* Pinned "create new" block — top of the popover, separated by a rule,
   never filtered by the search box. */
.ep-cs-pinned {
  flex-shrink: 0;
  padding: 4px 0;
  border-bottom: 1px solid #e2e8f0;
}
.ep-cs-add {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4f46e5;
  border-radius: 6px;
  cursor: pointer;
}
.ep-cs-add:hover { background: #eef2ff; }
.ep-cs-add.is-busy { opacity: 0.55; cursor: wait; }
.ep-cs-list {
  padding: 4px 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  /* Keep the wheel in the list. Without this it chains out to whatever
     scrolls behind the popover — which then moves the anchor button and
     re-places the menu out from under the pointer mid-scroll. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ep-cs-opt {
  padding: 9px 10px;
  font-size: 13px;
  color: #0f172a;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.35;
}
.ep-cs-opt:hover,
.ep-cs-opt.is-active { background: #f1f5f9; }
.ep-cs-opt[aria-selected="true"] {
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 600;
}
/* A row is [check?][lead?][label over sub][meta?]. The description used to
   sit on the label's line, shoved right by `margin-left:auto`, which is what
   made a five-option picker read as a wall of ragged text. */
.ep-cs-opt-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ep-cs-opt-main {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-cs-opt-sub {
  font-size: 11.5px;
  color: #94a3b8;
  margin-left: auto;
}
/* ⚠️ Cancel the auto-margin inside the column — there it right-aligns. */
.ep-cs-opt-body .ep-cs-opt-sub {
  margin-left: 0;
  text-align: left;
  white-space: normal;
  font-weight: 400;
}
.ep-cs-empty {
  padding: 10px;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
}

/* ── Bucket modal: extra width for scope + map ── */
.ep-bb-modal { width: min(720px, 96vw); }

/* ── Bucket modal: live allocation map ── */
.ep-bb-map {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.ep-bb-map-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #475569;
  gap: 12px;
}
.ep-bb-map-row + .ep-bb-map-row { margin-top: 8px; }
.ep-bb-map-totals { font-variant-numeric: tabular-nums; }
.ep-bb-map-bar {
  display: flex;
  height: 10px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0;
}
.ep-bb-map-seg { height: 100%; transition: width 0.2s; }
.ep-bb-map-used  { background: #cbd5e1; }
.ep-bb-map-scope { color: #64748b; }
.ep-bb-map-headroom { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Bucket modal: scope picker ── */
.ep-bb-scope {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0;
  background: #fff;
}
.ep-bb-scope-head {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.ep-bb-scope-tabs {
  display: flex;
  gap: 6px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 3px;
}
.ep-bb-scope-tab {
  flex: 1;
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ep-bb-scope-tab:hover { color: #0f172a; }
.ep-bb-scope-tab.is-active {
  background: #fff;
  color: #4f46e5;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.ep-bb-scope-body { margin-top: 10px; }
.ep-bb-scope-pane { display: none; font-size: 12px; color: #64748b; }
.ep-bb-scope-pane.is-active { display: block; }

/* Task multi-select inside scope picker */
.ep-bb-task-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.ep-bb-task-search {
  flex: 1;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}
.ep-bb-task-search:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.ep-bb-task-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px;
}
.ep-bb-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #0f172a;
}
.ep-bb-task-row:hover { background: #f1f5f9; }
.ep-bb-task-row input[type="checkbox"] { width: 15px; height: 15px; margin: 0; }
.ep-bb-task-name { flex: 1; }
.ep-bb-task-sub { font-size: 11px; color: #94a3b8; margin-left: auto; }
.ep-bb-task-empty {
  padding: 14px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
}

/* ── Bucket modal: quick-allocation chips ── */
.ep-bb-quick {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.ep-bb-quick-btn {
  padding: 4px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #4f46e5;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ep-bb-quick-btn:hover { background: #c7d2fe; color: #312e81; }

/* ── Expense modal: receipt scanner ── */
.ep-receipt-scan {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  margin-bottom: 12px;
}
.ep-receipt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #4f46e5;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.ep-receipt-btn:hover { background: #4338ca; }
.ep-receipt-status {
  flex: 1;
  font-size: 12px;
  color: #475569;
}
.ep-receipt-preview {
  margin-bottom: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
  text-align: center;
}
.ep-receipt-preview img {
  max-width: 100%;
  max-height: 240px;
  display: block;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════
   IN-UI CONFIRM DIALOG — replaces window.confirm() so the
   destructive prompts feel native to the popup chain.
   ══════════════════════════════════════════════════════════ */
.ep-confirm-overlay {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ep-confirm {
  width: 420px;
  max-width: 96vw;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.32);
  overflow: hidden;
  animation: epConfirmIn 140ms ease-out;
}
@keyframes epConfirmIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.ep-confirm-head {
  padding: 18px 22px 6px;
}
.ep-confirm-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.ep-confirm-body {
  padding: 4px 22px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: #475569;
}
.ep-confirm-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
}

/* ══════════════════════════════════════════════════════════
   CLIENT PICKER — Internal group, divider, tag chip
   ══════════════════════════════════════════════════════════ */
.ep-client-picker-group {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  padding: 10px 12px 4px;
}
.ep-client-picker-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 4px 8px 6px;
}
.ep-client-row--internal {
  background: linear-gradient(180deg, #fefce8 0%, #fffbeb 100%);
  border: 1px solid #fde68a;
}
.ep-client-row--internal:hover {
  background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%);
}
.ep-client-row-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #b45309;
  background: #fef3c7;
  border-radius: 6px;
  vertical-align: middle;
}

/* ── Quick Log: Person chip-style trigger + 3-staff dropdown ── */
.ep-ql-person-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  padding: 5px 10px;
  min-height: 34px;
}
.ep-ql-person-trigger:hover { border-color: #94a3b8; background: #fff; }
.ep-ql-person-trigger[aria-expanded="true"] {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.ep-ql-person-avatar {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ep-ql-person-text { flex: 1; min-width: 0; }
.ep-ql-person-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-ql-person-you {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.ep-ql-person-chev {
  flex: 0 0 14px;
  color: #94a3b8;
  transition: transform 0.15s ease;
}
.ep-ql-person-trigger[aria-expanded="true"] .ep-ql-person-chev { transform: rotate(180deg); }

.ep-ql-team-menu {
  position: fixed;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22), 0 4px 8px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  padding: 6px;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
}
.ep-ql-team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.ep-ql-team-row:hover { background: #f1f5f9; }
.ep-ql-team-row.is-selected { background: #eef2ff; }
.ep-ql-team-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.ep-ql-person-avatar img,
.ep-ql-team-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.ep-ql-team-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.ep-ql-team-name { font-size: 13px; font-weight: 600; color: #0f172a; }
.ep-ql-team-meta { font-size: 11px; color: #94a3b8; }
.ep-ql-team-empty { padding: 14px; font-size: 12px; color: #94a3b8; text-align: center; }

/* ── Quick Log: face stacks (Work Stream + Task pickers) ── */
.ep-ql-faces, .ep-ql-stream-faces { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ep-ql-face {
  width: 20px; height: 20px; border-radius: 50%;
  margin-left: -6px; border: 2px solid #fff; box-sizing: border-box;
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
  font-size: 8.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; flex: 0 0 auto;
}
.ep-ql-faces .ep-ql-face:first-child, .ep-ql-stream-faces .ep-ql-face:first-child { margin-left: 0; }
.ep-ql-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ep-ql-face--more { background: #e2e8f0; color: #475569; }

/* ── Quick Log: Work Stream faces-picker (trigger + menu) ── */
.ep-ql-stream-trigger { justify-content: space-between; }
.ep-ql-stream-main { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.ep-ql-stream-name {
  font-size: 13px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* `.ep-ql-stream-menu` / `-row` / `-row-name` / `-row-sub` are DELETED — that was
   the anchored 260px dropdown this field used before it became the searchable
   `.ep-stream-picker` popup. The trigger's own `.ep-ql-stream-*` styles above
   stay; only the menu went. */

/* ── Quick Log: Rate dropdown — "+ Add new rate…" lives as the last option ── */
.ep-ql-rate-select { width: 100%; min-width: 0; }
.ep-ql-rate-select option.ep-ql-rate-add-opt,
.ep-ql-rate-select option[value="__add__"] {
  font-weight: 700;
  color: #6366f1;
  background: #eef2ff;
}

/* ── Inline rate creator modal ── */
.ep-ql-rate-modal {
  background: #fff;
  border-radius: 12px;
  width: min(420px, 92vw);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32);
  overflow: hidden;
}
.ep-ql-rate-head {
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.ep-ql-rate-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.ep-ql-rate-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-top: 6px;
}
.ep-ql-rate-input {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
}
.ep-ql-rate-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.ep-ql-rate-default {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
}
.ep-ql-rate-foot {
  padding: 12px 18px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

/* ── Plan-style task picker ── */
.ep-task-picker--plan { width: min(820px, 96vw); }
.ep-task-picker-overlay--plan .ep-task-picker-body { padding: 12px 18px; }

/* ── Work-stream picker ──
   Deliberately the SAME shell as the task picker (`.ep-task-picker*`), because
   Quick Log's Work Stream and Task fields ask the same kind of question and used
   to answer it two different ways — a 260px anchored list with no search, versus
   a searchable popup. Only the bits that differ live here. */
.ep-stream-picker { width: min(720px, 96vw); }
.ep-stream-picker-overlay .ep-task-picker-body { padding: 10px 18px 14px; }
.ep-stream-picker .ep-tp-plan-spine { gap: 4px; }
.ep-sp-group {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 14px 0 2px; padding: 0 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #94a3b8;
}
.ep-sp-group:first-child { margin-top: 4px; }
.ep-sp-group-sub {
  font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #cbd5e1;
}
/* "Whole project" is the catch-all, so it reads as a choice rather than a row
   in a list. */
.ep-sp-row--whole { background: #f8fafc; border: 1px dashed #e2e8f0; }
.ep-sp-row--whole.is-selected { border-style: solid; }
/* A stream this person isn't on: dimmed so the ones that are theirs read first,
   but fully pickable — hiding it is what made streams "go missing". */
.ep-sp-row--other { opacity: .72; }
.ep-sp-row--other:hover { opacity: 1; }
.ep-task-picker-subtitle {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.4;
}
.ep-tp-plan-spine { display: flex; flex-direction: column; gap: 16px; }
.ep-tp-plan-spine .ep-plan-milestone { margin: 0; }
.ep-tp-task-row {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  border-radius: 8px;
  padding-left: 8px;
}
.ep-tp-task-row:hover { background: #f8fafc; }
.ep-tp-task-row.is-selected {
  background: #eef2ff;
  outline: 1px solid #6366f1;
}
.ep-tp-task-row.is-done .ep-plan-task-name {
  text-decoration: line-through;
  color: #64748b;
}
.ep-tp-task-row.is-done { opacity: 0.72; }
.ep-tp-check {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  color: #fff;
  transition: background 0.12s, border-color 0.12s;
}
.ep-tp-check.is-on {
  background: #6366f1;
  border-color: #6366f1;
}
.ep-tp-check.is-done:not(.is-on) {
  background: #d1fae5;
  border-color: #10b981;
  color: #10b981;
}
.ep-tp-project {
  padding: 8px 10px;
  border-left: 2px solid #e2e8f0;
  margin: 8px 0 8px 12px;
  background: #fcfcfd;
  border-radius: 0 8px 8px 0;
}
.ep-tp-project .ep-plan-project-head { padding: 0 0 6px; border-bottom: 0; }
.ep-tp-unscheduled {
  background: #fefce8;
  border: 1px dashed #eab308;
  padding: 12px;
  border-radius: 10px;
}

/* ── KPI scorecards: gray when value is zero/empty ──────────────
   Applies on every tab via _kpiCard's is-zero class. The card body, value,
   label, and sub all collapse to a neutral gray so the row reads as
   inactive instead of leaning on the per-card hue. */
.ep-kpi-card.is-zero {
  background: #f8fafc;
  border-color: #e2e8f0;
  opacity: 0.85;
}
.ep-kpi-card.is-zero .ep-kpi-value { color: #94a3b8 !important; }
.ep-kpi-card.is-zero .ep-kpi-label { color: #94a3b8; }
.ep-kpi-card.is-zero .ep-kpi-sub { color: #cbd5e1; }
button.ep-kpi-card-clickable.is-zero:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

/* ════════════════════════════════════════════════════════════
   CLIENT VIEW PANEL — uses .ep-panel + .ep-section base
   ════════════════════════════════════════════════════════════ */
.ep-client-view-panel {
  /* inherits padding + overflow from .ep-panel; no width clamp */
}

.ep-cv-header {
  margin-bottom: 20px;
}
.ep-cv-h-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}
.ep-cv-h-sub {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

.ep-cv-empty {
  padding: 32px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.ep-cv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ep-cv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.ep-cv-row:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.ep-cv-row-info {
  flex: 1;
  min-width: 0;
}
.ep-cv-row-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-cv-row-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #64748b;
}

.ep-cv-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #475569;
  font-weight: 500;
  text-transform: capitalize;
}
.ep-cv-status[data-status="done"],
.ep-cv-status[data-status="completed"] {
  background: #d1f3e6;
  color: #065f46;
}
.ep-cv-status[data-status="in_progress"],
.ep-cv-status[data-status="in-progress"] {
  background: #dbeafe;
  color: #1e40af;
}
.ep-cv-status[data-status="new"],
.ep-cv-status[data-status="pending"] {
  background: #fef3c7;
  color: #92400e;
}

.ep-cv-due {
  color: #64748b;
}

.ep-cv-category {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 500;
}

.ep-cv-assignee, .ep-cv-project {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #eef2ff;
  color: #4338ca;
  font-weight: 500;
  font-size: 11px;
}
.ep-cv-project {
  background: #ecfdf5;
  color: #047857;
}

.ep-cv-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  flex-shrink: 0;
}

.ep-cv-audience {
  padding: 6px 10px;
  font-size: 11px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.ep-cv-audience:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.ep-cv-btn {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.ep-cv-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}
.ep-cv-btn--sm {
  padding: 5px 10px;
  font-size: 10px;
}
.ep-cv-btn--convert {
  border-color: #10b981;
  color: #10b981;
}
.ep-cv-btn--convert:hover {
  background: #d1f3e6;
  border-color: #059669;
}
.ep-cv-btn--primary {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}
.ep-cv-btn--primary:hover {
  background: #4338ca;
  border-color: #4338ca;
  color: #fff;
}
.ep-cv-btn--danger {
  border-color: #ef4444;
  color: #ef4444;
  padding: 5px 8px;
}
.ep-cv-btn--danger:hover {
  background: #fee2e2;
  border-color: #dc2626;
}

/* Header layout */
.ep-cv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.ep-cv-header-text {
  flex: 1;
  min-width: 0;
}
.ep-cv-header-actions {
  flex-shrink: 0;
}

/* Stats bar */
.ep-cv-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.ep-cv-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s;
  font: inherit;
}
.ep-cv-stat:hover {
  border-color: #94a3b8;
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.05);
}
.ep-cv-stat.is-active {
  border-color: #4f46e5;
  background: #eef2ff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.ep-cv-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ep-cv-stat-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ep-cv-stat--danger .ep-cv-stat-val { color: #ef4444; }
.ep-cv-stat--danger.is-active { background: #fee2e2; border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }
.ep-cv-stat--warn .ep-cv-stat-val { color: #f59e0b; }
.ep-cv-stat--warn.is-active { background: #fef3c7; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); }
.ep-cv-stat--info .ep-cv-stat-val { color: #3b82f6; }
.ep-cv-stat--info.is-active { background: #dbeafe; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

/* Section head improvements */
.ep-cv-section-head {
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ep-cv-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  text-transform: none;
  letter-spacing: 0;
}
.ep-cv-section-hint {
  font-size: 11px;
  color: #64748b;
  font-weight: 400;
}

/* Owner badges */
.ep-cv-owner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.ep-cv-owner--client {
  background: #fef3c7;
  color: #92400e;
}
.ep-cv-owner--vo {
  background: #dbeafe;
  color: #1e40af;
}
.ep-cv-owner--shared {
  background: #ede9fe;
  color: #5b21b6;
}
.ep-cv-owner--internal {
  background: #f1f5f9;
  color: #64748b;
}
.ep-cv-owner--done {
  background: #d1f3e6;
  color: #065f46;
}

/* Priority badges */
.ep-cv-priority {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ep-cv-priority--high { background: #fee2e2; color: #991b1b; }
.ep-cv-priority--medium { background: #fef3c7; color: #92400e; }
.ep-cv-priority--low { background: #f1f5f9; color: #475569; }

/* Due date variants */
.ep-cv-due--overdue {
  color: #dc2626;
  font-weight: 700;
}
.ep-cv-due--today {
  color: #d97706;
  font-weight: 700;
}
.ep-cv-due--soon {
  color: #d97706;
  font-weight: 600;
}

/* Row variants */
.ep-cv-row.is-overdue {
  background: linear-gradient(to right, #fef2f2 0%, transparent 100%);
  border-left: 3px solid #ef4444;
}
.ep-cv-row--internal {
  background: #f8fafc;
}
.ep-cv-row--internal .ep-cv-row-name {
  color: #475569;
}

.ep-cv-row-instructions {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  padding-left: 4px;
  border-left: 2px solid #e2e8f0;
  padding-left: 8px;
}

/* ── Deliverable rows in Client View (auto-surfaced, clickable) ── */
.ep-cv-row--deliv { cursor: pointer; }
.ep-cv-row--deliv.is-delivered { background: linear-gradient(to right, #f0fdf9 0%, transparent 60%); }
.ep-cv-row--deliv .ep-cv-row-arrow { color: #cbd5e1; transition: transform 0.12s, color 0.12s; }
.ep-cv-row--deliv:hover .ep-cv-row-arrow { color: #6366f1; transform: translateX(2px); }
.ep-cv-delivprog { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ep-cv-delivprog-bar { flex: 1; height: 6px; max-width: 240px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.ep-cv-delivprog-bar > span { display: block; height: 100%; background: #6366f1; border-radius: 999px; transition: width 0.3s ease; }
.ep-cv-delivprog-bar.is-done > span { background: #10b981; }
.ep-cv-delivprog-lbl { font-size: 11px; color: #64748b; font-weight: 600; white-space: nowrap; }

/* ── Client lead progress cards (live per-person rollup) ── */
.ep-cv-leads-section { margin-bottom: 18px; }
.ep-cv-leads { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 10px; }
.ep-cv-lead { display: block; width: 100%; text-align: left; padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s; }
.ep-cv-lead:hover { border-color: #c7d2fe; box-shadow: 0 4px 12px -4px rgba(99, 102, 241, 0.25); transform: translateY(-1px); }
.ep-cv-lead-head { display: flex; align-items: center; gap: 10px; }
.ep-cv-lead-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ep-cv-lead-av--initials { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-weight: 700; font-size: 14px; }
.ep-cv-lead-id { flex: 1; min-width: 0; }
.ep-cv-lead-name { font-size: 13px; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-cv-lead-role { font-size: 11px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-cv-lead-waiting { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 10px; font-weight: 700; }
.ep-cv-lead-clear { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: #d1f3e6; color: #065f46; font-size: 10px; font-weight: 700; }
.ep-cv-lead-bar { height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
.ep-cv-lead-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #10b981); border-radius: 999px; transition: width 0.3s ease; }
.ep-cv-lead-stats { display: flex; gap: 14px; font-size: 11px; color: #475569; }
.ep-cv-lead-stats strong { color: #0f172a; }
.ep-cv-lead-stats--empty { color: #94a3b8; font-style: italic; }

/* Empty state with CTA */
.ep-cv-empty {
  padding: 24px 16px;
  text-align: center;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.ep-cv-empty-msg {
  color: #94a3b8;
  font-size: 12px;
}

/* Internal section (collapsed) */
.ep-cv-section--collapsed {
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
}
.ep-cv-collapsed-btn {
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  text-align: center;
  font-weight: 500;
  transition: background 0.12s;
}
.ep-cv-collapsed-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.ep-cv-section--internal {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.ep-cv-section--internal .ep-cv-section-head {
  background: #e2e8f0;
}

/* Responsive: stack stats on small screens */
@media (max-width: 720px) {
  .ep-cv-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .ep-cv-header {
    flex-direction: column;
  }
  .ep-cv-row {
    flex-direction: column;
    align-items: stretch;
  }
  .ep-cv-row-actions {
    margin-left: 0;
    margin-top: 10px;
  }
}

/* ── Pull Order panel (funding allocation) ─────────────────────
   Lives under the funding source cards. A vertical flow of source
   cards — #1 pulls first, joined by "then" connectors down to the
   fallback — with live month-vs-cap numbers and the program-level
   pull-mode / fallback segmented controls. */
.ep-pull-order { margin-top: 20px; }

/* Toolbar: two labeled segmented controls */
.ep-pull-controls {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.ep-pull-control { display: flex; flex-direction: column; gap: 7px; }
.ep-pull-control-div { width: 1px; background: #e2e8f0; align-self: stretch; }
.ep-pull-control-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ep-pull-control-hint { font-size: 11px; color: #94a3b8; }
.ep-pull-control-hint--warn { color: #b45309; font-weight: 600; }

/* Roll-up strip above the controls — the numbers you'd otherwise add up */
.ep-pull-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ep-pull-sum {
  flex: 1 1 160px;
  min-width: 150px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 9px 13px;
}
.ep-pull-sum-l {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ep-pull-sum-v { font-size: 17px; font-weight: 800; color: #0f172a; margin-top: 1px; line-height: 1.2; }
.ep-pull-sum-s { font-size: 11px; color: #94a3b8; margin-top: 1px; }

/* Money that would die unspent with its draw window */
.ep-pull-alerts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ep-pull-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 9px;
  padding: 8px 12px;
}
.ep-pull-alert svg { flex: 0 0 auto; margin-top: 2px; }
.ep-pull-alert strong { font-weight: 800; }
/* Already gone, not merely at risk */
.ep-pull-alert--past {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fecaca;
  border-left-color: #ef4444;
}

.ep-pull-seg {
  display: inline-flex;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  width: fit-content;
}
.ep-pull-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  padding: 6px 13px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: background .13s ease, color .13s ease, box-shadow .13s ease;
}
.ep-pull-seg-btn:hover { color: #0f172a; background: #f1f5f9; }
.ep-pull-seg-btn--on {
  background: #0f172a;
  color: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}
.ep-pull-seg-btn--on:hover { background: #0f172a; color: #fff; }

/* Flow of source cards joined by "then" connectors */
.ep-pull-rows { display: flex; flex-direction: column; }

/* Each source is a draggable item that carries its own trailing connector,
   so reordering the DOM can never orphan an arrow. The last item's
   connector is hidden — the fallback block renders its own. */
.ep-pull-list { display: flex; flex-direction: column; }
.ep-pull-item { display: flex; flex-direction: column; }
.ep-pull-item:last-child > .ep-pull-then { display: none; }
.ep-pull-item.ep-pull-dragging { opacity: 0.45; }
.ep-pull-item.ep-pull-dragging .ep-pull-row {
  border-color: #6366f1;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}
.ep-pull-list--dragging .ep-pull-row { cursor: grabbing; }
.ep-pull-list--dragging .ep-pull-row:hover { box-shadow: none; }
.ep-pull-then {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  margin-left: 27px; /* centers on the rail column */
  width: 120px;
}
.ep-pull-then-line { width: 1.5px; height: 10px; background: #cbd5e1; margin: 0 auto; }
.ep-pull-then { flex-direction: column; gap: 1px; }
.ep-pull-then-tag {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 1px 9px;
}

.ep-pull-row {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  outline: none;
}
.ep-pull-row:hover {
  border-color: var(--fs-accent, #cbd5e1);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.ep-pull-row:focus-visible { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); }
.ep-pull-row:active { transform: translateY(1px); }
.ep-pull-row--fallback { cursor: default; background: #f8fafc; border-style: dashed; }
.ep-pull-row--fallback:hover { border-color: #e2e8f0; box-shadow: none; }
.ep-pull-row--fallback:active { transform: none; }

/* Colored rail: big order number + type icon (mirrors the funding cards) */
.ep-pull-rail {
  flex: 0 0 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  padding: 12px 0;
}
.ep-pull-rail-num { font-size: 17px; font-weight: 800; line-height: 1; }
.ep-pull-rail-icon { opacity: 0.9; display: flex; }
.ep-pull-rail-icon svg { width: 18px; height: 18px; }
.ep-pull-rail--fallback { background: #94a3b8; }

/* The rail doubles as the drag grip — grab dots sit above the number.
   user-select:none so grabbing it doesn't smear a text selection across
   the panel on the way up. */
.ep-pull-rail { user-select: none; -webkit-user-select: none; }
.ep-pull-rail--grip { cursor: grab; }
.ep-pull-rail--grip:active { cursor: grabbing; }
.ep-pull-grip { display: flex; opacity: 0.62; transition: opacity .13s ease; }
.ep-pull-row:hover .ep-pull-grip { opacity: 1; }
.ep-pull-list--dragging { user-select: none; -webkit-user-select: none; }

.ep-pull-main { flex: 1; min-width: 0; padding: 12px 14px 12px 16px; }
.ep-pull-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ep-pull-namewrap { display: flex; flex-direction: column; min-width: 0; }
.ep-pull-name { font-size: 14px; font-weight: 700; color: #0f172a; }
/* Who the money is really from — grant funder, client, or VisionOne */
.ep-pull-face { display: flex; flex: 0 0 auto; }
.ep-pull-face .ep-circle { box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.07); }
.ep-pull-org { font-size: 11.5px; color: #94a3b8; line-height: 1.3; }

/* Inline % share — the whole rule in percent mode, editable in place */
.ep-pull-pct {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0891b2;
  background: rgba(6, 182, 212, 0.09);
  border: 1px solid rgba(6, 182, 212, 0.28);
  border-radius: 999px;
  padding: 1px 9px 1px 5px;
  cursor: text;
}
.ep-pull-pct input {
  width: 34px;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: right;
  padding: 2px 0;
  outline: none;
  -moz-appearance: textfield;
}
.ep-pull-pct input::-webkit-outer-spin-button,
.ep-pull-pct input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ep-pull-pct:focus-within {
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.16);
}

/* Sources that can't pull today read quieter than the ones that can */
.ep-pull-row--idle { background: #fcfdfe; }
.ep-pull-row--idle .ep-pull-rail { filter: grayscale(0.7); opacity: 0.8; }
.ep-pull-row--idle .ep-pull-name { color: #475569; }
.ep-pull-row--idle .ep-pull-stat-v { color: #64748b; }
.ep-pull-share {
  font-size: 11px;
  font-weight: 700;
  color: #06b6d4;
  background: rgba(6, 182, 212, 0.09);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 999px;
  padding: 2px 9px;
}
.ep-pull-head-spacer { flex: 1; }
.ep-pull-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ep-pull-state-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  animation: ep-pull-pulse 1.6s ease-in-out infinite;
}
@keyframes ep-pull-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Aligned stat columns */
.ep-pull-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin-top: 9px;
}
.ep-pull-stat { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.ep-pull-stat-l {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ep-pull-stat-v { font-size: 13px; font-weight: 700; color: #0f172a; }
.ep-pull-stat-v em { font-style: normal; font-weight: 500; color: #94a3b8; font-size: 11.5px; }

/* Burn bar */
.ep-pull-barrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ep-pull-bar {
  flex: 1;
  max-width: 340px;
  height: 6px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}
.ep-pull-bar-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.ep-pull-bar-pct { font-size: 11px; font-weight: 600; white-space: nowrap; }

/* Dry run — watch a hypothetical dollar move through the rules above */
.ep-pull-sim {
  margin-top: 14px;
  padding: 12px 15px 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.ep-pull-sim-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 800;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ep-pull-sim-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: none;
  letter-spacing: 0;
}
.ep-pull-sim-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #475569;
  margin-top: 9px;
}
.ep-pull-sim-field {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 3px 10px;
  font-weight: 700;
  color: #0f172a;
}
.ep-pull-sim-field:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.ep-pull-sim-field input {
  width: 80px;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
  -moz-appearance: textfield;
}
.ep-pull-sim-field input::-webkit-outer-spin-button,
.ep-pull-sim-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ep-pull-sim-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
  margin-top: 11px;
}
.ep-pull-sim-bar span { height: 100%; transition: width .25s ease; }
.ep-pull-sim-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ep-pull-sim-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px 11px 3px 9px;
}
.ep-pull-sim-chip-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--c, #64748b); }
.ep-pull-sim-chip strong { color: #0f172a; font-weight: 800; }
.ep-pull-sim-chip em { font-style: normal; color: #94a3b8; font-size: 11px; }
.ep-pull-sim-empty { display: inline-block; font-size: 12px; color: #94a3b8; margin-top: 9px; }

.ep-pull-fallback-note { font-size: 12px; color: #64748b; margin-top: 5px; }
.ep-pull-footnote {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 12px;
}
.ep-fin-pullrules {
  border-top: 1px dashed #e2e8f0;
  padding-top: 12px;
  margin-top: 4px;
}

/* ── Funding term block ──────────────────────────────────────
   The payment schedule reads as one grouped decision, not four loose
   fields, so the derived total under it is obviously a consequence of
   what was typed above. */
.ep-fin-term {
  background: #f8fafc;
  border: 1px solid #e8edf3;
  border-radius: 10px;
  padding: 12px 12px 10px;
}
.ep-fin-term > .ep-fin-row { margin-bottom: 0; }
/* .ep-fin-check (the boxed checkbox row) is already defined with the rest of
   the funding-modal styles — don't restate it here. It only needs one fix:
   as a direct child of .ep-fin-field it inherits the uppercase field-label
   treatment, which a sentence-case checkbox row must not have. */
.ep-fin-term > label.ep-fin-check {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
}
/* Live derived total — per-payment × count = total, plus the real dates. */
.ep-fin-term-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 10px;
  padding: 9px 11px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  font-size: 12.5px;
  color: #3730a3;
  font-variant-numeric: tabular-nums;
}
.ep-fin-term-sum-math { font-weight: 600; }
.ep-fin-term-sum-eq { opacity: 0.5; font-weight: 700; }
.ep-fin-term-sum-total { font-size: 15px; font-weight: 800; color: #312e81; }
.ep-fin-term-sum-note {
  width: 100%;
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0.75;
}
@media (max-width: 640px) {
  .ep-fin-term { padding: 10px; }
}
@media (max-width: 640px) {
  .ep-pull-controls { flex-direction: column; gap: 12px; }
  .ep-pull-control-div { display: none; }
  .ep-pull-stats { gap: 6px 18px; }
  .ep-pull-summary { gap: 8px; }
  .ep-pull-sum { flex: 1 1 100%; }
  .ep-pull-sim-field input { width: 68px; }
}

/* ══════════════════════════════════════════════════════════════════
   WORK-STREAM SELECTION — the quick (view-mode) toolbar, the selection
   rail and the hover task peek. The rail sits at 60010 — just above the
   engagement popup (.gp-overlay, 60002) so it isn't painted over, and far
   below the task-profile stacked tier (.tp-front, 2000200) that a task
   opened FROM the rail is raised to.
   ══════════════════════════════════════════════════════════════════ */
.ep-ws-bulkbar--quick { background: #f8fafc; border-color: #e2e8f0; }
.ep-ws-bulkbar--quick .ep-ws-bulkbar-count { color: #0f172a; }
.ep-ws-quick-hint { font-size: 11.5px; color: #64748b; }
.ep-ws-quick-complete { border-color: #86efac; background: #f0fdf4; color: #15803d; font-weight: 700; }
.ep-ws-quick-complete:hover:not([disabled]) { background: #dcfce7; }
.ep-ws-bulkbar--quick .ep-btn[disabled] { opacity: .45; pointer-events: none; }
.ep-ws-peek { cursor: help; text-decoration: underline dotted rgba(100, 116, 139, .5); text-underline-offset: 3px; }

/* The selection tick sits top-right of each card — give the status pill room
   so the two don't collide while selecting. */
.ep-projects-grid.ep-ws-selecting .wk-goal-header { padding-right: 26px; }
/* ── Work Streams split ────────────────────────────────────────────────
   The head / bulk bar / scorecards / toolbar sit ABOVE this and keep the
   popup's full width. Only the card grid narrows: while a selection is live
   it becomes the left column and the selection rail takes the right one.
   No `overflow` anywhere on this wrapper — that would kill the rail's
   position:sticky against the popup body's scrollport. */
.ep-ws-split { display: flex; align-items: flex-start; gap: 14px; }
.ep-ws-split-main { flex: 1 1 auto; min-width: 0; }
/* Two cards across in the narrowed column — held explicitly so the layout is
   the same shape at every popup width instead of reflowing 3/2/1 under you.
   The grid's own auto-fill takes over again when nothing is selected. */
.ep-ws-split.is-split .ep-projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .ep-ws-split.is-split .ep-projects-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ══ VIEW SWITCH — cards vs. list ═════════════════════════════════════
   A segmented control sitting hard right on the sort line. Borrows the
   sort pills' palette so the whole toolbar reads as one row of controls. */
.ep-ws-viewtoggle {
  margin-left: auto;          /* the toolbar is flex — this pins it right */
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  flex: none;
}
.ep-ws-viewbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.ep-ws-viewbtn svg { width: 13px; height: 13px; flex: none; }
.ep-ws-viewbtn:hover { color: #0f172a; }
.ep-ws-viewbtn.is-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .10);
}
/* Under ~1000px the words are noise next to two obvious icons. */
@media (max-width: 1000px) {
  .ep-ws-viewbtn span { display: none; }
  .ep-ws-viewbtn { padding: 5px 8px; }
}

/* ══ LIST VIEW ════════════════════════════════════════════════════════
   One stream per full-width row. Two classes beats `.ep-projects-grid`'s
   own `display:grid`, and switching to flex makes the split rule's
   `grid-template-columns` a no-op — so a live selection can't drag the
   list back into two columns.

   Deliberately NO `overflow`/`max-height` here: the popup body is already
   the scrollport, and a nested one would break the selection rail's
   position:sticky (see the note on .ep-ws-split above). The list scrolls
   with the popup, which is what makes it feel like a list. */
.ep-projects-grid.ep-ws-view--list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Each child is pinned to an explicit column, so a row whose progress bar
   is hidden (Not started / Complete, per rule 2 above) leaves that column
   empty instead of letting the footer slide left and knock every row out
   of vertical alignment. */
.ep-projects-grid.ep-ws-view--list .ep-project-card {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.7fr) minmax(130px, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding: 11px 16px 11px 20px;
}
.ep-projects-grid.ep-ws-view--list .wk-goal-header { grid-column: 1; margin-bottom: 0; }
.ep-projects-grid.ep-ws-view--list .wk-goal-meta { grid-column: 2; }
.ep-projects-grid.ep-ws-view--list .wk-goal-progress-wrap { grid-column: 3; margin: 0; }
.ep-projects-grid.ep-ws-view--list .wk-goal-foot-row { grid-column: 4; margin-top: 0; border-top: 0; padding-top: 0; }
/* The two-line title well exists to keep grid cards on a shared baseline;
   on a single row it just adds dead height. One line, ellipsis. */
.ep-projects-grid.ep-ws-view--list .wk-goal-title {
  min-height: 0;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Accent moves from a top stripe to a left edge — reads better on a wide,
   short row and keeps the status colour visible while scanning down. */
.ep-projects-grid.ep-ws-view--list .ep-project-card::before {
  top: 0; bottom: 0; left: 0; right: auto;
  width: 4px; height: auto;
  border-radius: 14px 0 0 14px;
}
/* No lift on hover in list view: a row nudging up 2px while the ones above
   and below hold still makes a tight stack visibly jitter. */
.ep-projects-grid.ep-ws-view--list .ep-project-card:hover { transform: none; }

/* ── FOLD HEADER: reserve the tail's strip inside the card ──
   The Deliverables tab reuses this row as the <summary> of each per-stream
   group (opts.fold), with the group's deliverable count and its "Open ›" button
   laid over the card's right end so the header still spans the full width of the
   rows hanging under it. That overlay needs the card's own content to stop short.

   ⚠️ IT HAS TO LIVE HERE. The rule it must beat is the `padding` SHORTHAND three
   rules up, at equal weight — declaring this from value-tracker.css (where the
   rest of the group-header shell lives) lost the cascade on load order, the
   reserve did nothing, and the count badge printed on top of "0/4 deliverables
   delivered". Same file, later line, no !important needed.

   ⚠️ EVERY PIXEL OF THIS RESERVE IS TAKEN OFF THE TITLE. It comes out of the
   card's fr columns, so an over-generous value ellipsises work-stream names that
   this very row shows in full on the Work Streams tab. Four wrong values on the
   way here, each caught by measurement and none by looking:
     168 — a spelled-out count ("7 · 4 done"); wrapped one row's meta onto a
           second line AND truncated "CRM Data Foundation and Contact …"
     128 — under by 3px, so the badge clipped the footer text again
     152 — stopped the clipping, kept the truncation
     104 — flat rate; over-reserved by 64px on the common row, where the badge is
           suppressed and the tail is just the 24px button
   So it is not a constant. --_fold-tail is set per row by _panelDeliverables from
   what that row's tail actually contains, and inherits down to the card from the
   host. The fallback is the no-badge case. Re-measure with `_delivgrp.cjs` — it
   prints the tail width and holds the title column against the reference row. */
.ep-projects-grid.ep-ws-view--list .ep-ws-foldcard { padding-right: var(--_fold-tail, 48px); }
@media (max-width: 760px) {
  /* Tail back in flow (see value-tracker.css) ⇒ nothing to reserve. */
  .ep-projects-grid.ep-ws-view--list .ep-ws-foldcard { padding-right: 16px; }
}
@media (max-width: 900px) {
  .ep-projects-grid.ep-ws-view--list .ep-project-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ep-projects-grid.ep-ws-view--list .wk-goal-header { grid-column: 1 / -1; }
  .ep-projects-grid.ep-ws-view--list .wk-goal-meta { grid-column: 1; }
  .ep-projects-grid.ep-ws-view--list .wk-goal-progress-wrap { grid-column: 2; }
  .ep-projects-grid.ep-ws-view--list .wk-goal-foot-row { grid-column: 1 / -1; }
}

/* ══ TOOLTIP CLIPPING ═════════════════════════════════════════════════
   `data-wk-tip` renders as an ::after on the hovered element, positioned
   above it — so the card's own `overflow: hidden` (set just below the
   accent-stripe rule) was CUTTING THE TOOLTIP OFF. It read as "the popup
   is behind the cards"; it was really being clipped by its own card, and
   no z-index could fix that.

   Released on hover only, so the resting card still clips its stripe
   exactly as before. `z-index` comes along because the hover state sets
   `transform`, which makes the card a stacking context — without it the
   escaped tooltip would paint under the cards later in the grid. */
.ep-projects-grid .ep-project-card:hover { overflow: visible; z-index: 60; }
/* The stripe was relying on the clip for its bottom corners; now that the
   card can overflow, it rounds itself. */
.ep-projects-grid .ep-project-card::before { border-radius: 14px 14px 0 0; }

.ep-wsrail {
  flex: 0 0 336px; align-self: flex-start;
  position: sticky; top: 8px; z-index: 5;
  max-height: calc(100vh - 220px);
  display: flex; flex-direction: column;
  background: var(--surf, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .10);
  overflow: hidden; animation: epWsRailIn 140ms ease;
}
.ep-wsrail[hidden] { display: none; }
@keyframes epWsRailIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.ep-wsrail-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; border-bottom: 1px solid var(--border-s, #f3f4f6);
  background: #f0fdf4;
}
.ep-wsrail-ttl { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #15803d; }
.ep-wsrail-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: #16a34a; color: #fff; font-size: 11px; font-weight: 800;
}
.ep-wsrail-x {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: #64748b; padding: 0 2px;
}
.ep-wsrail-x:hover { color: #0f172a; }
.ep-wsrail-sub { padding: 8px 12px; font-size: 11.5px; color: #64748b; border-bottom: 1px solid var(--border-s, #f3f4f6); }
.ep-wsrail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.ep-wsrail-grp { padding: 4px 0 8px; }
.ep-wsrail-grp + .ep-wsrail-grp { border-top: 1px solid var(--border-s, #f3f4f6); }
.ep-wsrail-grphd { display: flex; align-items: center; gap: 6px; padding: 4px 6px 6px; }
.ep-wsrail-grpname {
  flex: 1; min-width: 0; text-align: left; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0;
}
.ep-wsrail-grpname:hover { color: #15803d; text-decoration: underline; }
.ep-wsrail-grpn { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; color: #64748b; background: var(--border-s, #f3f4f6); border-radius: 999px; padding: 1px 7px; }
.ep-wsrail-drop { flex: 0 0 auto; border: 0; background: none; cursor: pointer; color: #cbd5e1; font-size: 15px; line-height: 1; padding: 0 2px; }
.ep-wsrail-drop:hover { color: #dc2626; }
.ep-wsrail-empty { padding: 2px 8px 4px; font-size: 11.5px; color: #94a3b8; font-style: italic; }
.ep-wsrail-task { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 8px; }
.ep-wsrail-task:hover { background: var(--border-s, #f8fafc); }
/* A task that's mine gets a quiet left marker — that's the set I can act on. */
.ep-wsrail-task.is-mine { box-shadow: inset 2px 0 0 #16a34a; }
.ep-wsrail-chk {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 5px; cursor: pointer;
  border: 2px solid #cbd5e1; background: #fff; padding: 0;
}
button.ep-wsrail-chk:hover { border-color: #16a34a; background: #f0fdf4; }
/* Finished rows render a static ✓ box, not a control — don't offer a pointer. */
span.ep-wsrail-chk { cursor: default; }
.ep-wsrail-chk.is-done {
  border-color: #16a34a; background: #16a34a;
  box-shadow: inset 0 0 0 2px #fff;
}
/* Already finished ≠ ticked-to-finish. Green is reserved for the decision
   you're making now; work that was done before this selection reads slate so
   the two never look like the same state. */
span.ep-wsrail-chk.is-done { border-color: #cbd5e1; background: #cbd5e1; }
.ep-wsrail-chk.is-locked { cursor: default; opacity: .4; border-style: dashed; }
.ep-wsrail-chk.is-locked:hover { border-color: #cbd5e1; background: #fff; }
/* The pick box means "this closes when you mark complete" — ticked by default
   for everything still open, so it reads as a list you PRUNE, not one you
   build. Unticked is a hollow box; the row also fades so the two states are
   distinguishable at a glance without reading the boxes. */
.ep-wsrail-chk.is-pick.is-on {
  border-color: #16a34a; background: #16a34a;
  box-shadow: inset 0 0 0 2px #fff;
}
.ep-wsrail-chk.is-pick:not(.is-on) { border-color: #cbd5e1; background: #fff; }
.ep-wsrail-task:has(.ep-wsrail-chk.is-pick:not(.is-on)) .ep-wsrail-tname { color: #94a3b8; }
.ep-wsrail-reopen {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer; padding: 0 2px;
  color: #cbd5e1; font-size: 13px; line-height: 1;
}
.ep-wsrail-task:hover .ep-wsrail-reopen { color: #64748b; }
.ep-wsrail-reopen:hover { color: #15803d; }
/* "All / None" — the escape hatch for "complete the stream but leave the work
   open", stated as a control instead of making you untick ten rows. */
.ep-wsrail-picks { float: right; display: inline-flex; gap: 4px; }
.ep-wsrail-pickall {
  border: 1px solid var(--border, #e5e7eb); background: #fff; border-radius: 999px;
  font: inherit; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #64748b; padding: 1px 7px; cursor: pointer;
}
.ep-wsrail-pickall:hover { border-color: #86efac; background: #f0fdf4; color: #15803d; }
/* Front cover on a deliverable's list row — the card's picture at row scale.
   Clicking it opens the image (WkCoverView), not the record. */
.ep-wsrail-cover {
  flex: 0 0 auto; width: 30px; height: 22px; padding: 0; cursor: zoom-in;
  border: 1px solid #cbd5e1; border-radius: 4px; overflow: hidden; background: #f1f5f9;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ep-wsrail-cover:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(15, 23, 42, .2); }
.ep-wsrail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-wsrail-task.is-done .ep-wsrail-cover { opacity: .5; }

.ep-wsrail-tname {
  flex: 1; min-width: 0; text-align: left; border: 0; background: none; cursor: pointer; padding: 4px 0;
  font: inherit; font-size: 12.5px; color: var(--ink, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ep-wsrail-tname:hover { color: #15803d; }
.ep-wsrail-task.is-done .ep-wsrail-tname { color: #94a3b8; text-decoration: line-through; }
.ep-wsrail-due { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: #94a3b8; }
.ep-wsrail-due.is-late { color: #dc2626; }
.ep-wsrail-dellbl { padding: 8px 6px 2px; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #94a3b8; }
.ep-wsrail-lblN { font-weight: 800; color: #cbd5e1; }
.ep-wsrail-stage { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #64748b; background: var(--border-s, #f3f4f6); border-radius: 999px; padding: 1px 6px; }
.ep-wsrail-stage.is-done { color: #0f766e; background: #ccfbf1; }
.ep-wsrail-foot { padding: 10px 12px; border-top: 1px solid var(--border-s, #f3f4f6); background: #fafafa; }
/* Spell out both halves of the action right above the button — the status
   change AND the cascade — so "Mark complete" is never a guess. */
.ep-wsrail-footnote { font-size: 11px; color: #64748b; margin-bottom: 7px; line-height: 1.35; }
.ep-wsrail-complete { width: 100%; justify-content: center; border-color: #86efac; background: #f0fdf4; color: #15803d; font-weight: 700; }
.ep-wsrail-complete:hover { background: #dcfce7; }
.ep-teampop-item.is-done .ep-teampop-name { color: #94a3b8; text-decoration: line-through; }

@media (max-width: 900px) {
  /* Narrow screens: stack. The rail goes ABOVE the cards (it's what you're
     acting on) and drops sticky — one scroll for the whole panel. */
  .ep-ws-split { flex-direction: column; }
  .ep-wsrail {
    order: -1; position: static; flex: 1 1 auto; width: 100%;
    max-height: 46vh !important; margin-bottom: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECT PROFILE → TIME TAB (2026-07-28)
   Coded people/work-stream pickers with faces, custom date range, work-stream
   column, and select mode + bulk bar — parity with Financials → Time & Billing.
   Namespace checked: .ep-tpick-* / .ep-time-check|bulkbar|ws|range|selbtn are new.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Coded picker (person / work stream) ── */
.ep-tpick { position: relative; }
.ep-tpick-trigger { display: inline-flex; align-items: center; gap: 7px; max-width: 230px; padding: 6px 10px;
  border: 1px solid var(--ep-border, #e2e8f0); border-radius: 9px; background: #fff; font: inherit; font-size: 12.5px;
  font-weight: 600; color: #0f172a; cursor: pointer; }
.ep-tpick-trigger:hover { border-color: #cbd5e1; }
.ep-tpick-trigger[aria-expanded="true"] { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.12); }
.ep-tpick-face { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.ep-tpick-face .ep-avatar-circle, .ep-tpick-face .ep-circle { flex: 0 0 auto; width: 20px !important; height: 20px !important; font-size: 8px !important; }
.ep-tpick-face .ep-tpick-name, .ep-tpick-face .ep-tpick-all { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-tpick-caret { flex: 0 0 auto; width: 13px; height: 13px; color: #94a3b8; }
.ep-tpick-trigger[aria-expanded="true"] .ep-tpick-caret { transform: rotate(180deg); }
.ep-tpick-panel { position: absolute; right: 0; top: calc(100% + 5px); z-index: 40; width: 300px; max-height: min(340px, 46vh);
  overflow-y: auto; background: #fff; border: 1px solid var(--ep-border, #e2e8f0); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15,23,42,.16); padding: 4px; }
.ep-tpick-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0;
  background: transparent; font: inherit; padding: 7px 9px; border-radius: 9px; cursor: pointer; }
.ep-tpick-row:hover { background: #f8fafc; }
.ep-tpick-row.is-sel { background: #f5f3ff; }
.ep-tpick-row .ep-avatar-circle, .ep-tpick-row .ep-circle { flex: 0 0 auto; }
.ep-tpick-txt { display: flex; flex-direction: column; min-width: 0; }
.ep-tpick-name { font-size: 12.5px; font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-tpick-meta { font-size: 10.5px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-tpick-all { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.ep-tpick-glyph { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; background: #f1f5f9; color: #64748b; }

/* ── Custom date range ── */
.ep-time-range { display: inline-flex; align-items: center; gap: 5px; }
.ep-time-range input[type="date"] { padding: 6px 8px; border: 1px solid var(--ep-border, #e2e8f0); border-radius: 8px;
  font: inherit; font-size: 12px; color: #0f172a; background: #fff; }
.ep-time-range input[type="date"]:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.12); }
.ep-time-range-sep { font-size: 11px; font-weight: 700; color: #94a3b8; }

/* ── Work-stream cell ── */
.ep-time-ws { border: 0; background: #f5f3ff; color: #6d28d9; font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; cursor: pointer; max-width: 190px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ep-time-ws:hover { background: #ede9fe; }
.ep-time-ws-none { color: #cbd5e1; }

/* ── Select mode ── */
.ep-time-selbtn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--ep-border, #e2e8f0);
  border-radius: 9px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: #0f172a; cursor: pointer; }
.ep-time-selbtn:hover { border-color: #cbd5e1; }
.ep-time-selbtn.is-active { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
/* The column is always rendered (filtering here never re-renders) and hidden
   until the table is in select mode. */
.ep-time-table .ep-time-check-cell { display: none; width: 32px; }
.ep-time-table.is-selecting .ep-time-check-cell { display: table-cell; }
.ep-time-check { display: inline-block; width: 16px; height: 16px; border: 1.8px solid #cbd5e1; border-radius: 5px;
  background: #fff; cursor: pointer; vertical-align: middle; position: relative; }
.ep-time-check:hover { border-color: #8b5cf6; }
.ep-time-check.is-on { background: #8b5cf6; border-color: #8b5cf6; }
.ep-time-check.is-on::after { content: ""; position: absolute; left: 4px; top: 0.5px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ep-time-check.is-part { background: #8b5cf6; border-color: #8b5cf6; }
.ep-time-check.is-part::after { content: ""; position: absolute; left: 2.5px; top: 6px; width: 9px; height: 2px; background: #fff; }
.ep-time-row.is-picked { background: #f5f3ff; }

/* ── Bulk bar ──
   Same nine actions as Financials → Time & Billing, so it gets the same guard:
   `margin-left: auto` on a flex item that will not shrink PUSHES the row past the
   right edge instead of wrapping it. `flex: 1 1 auto` + `min-width: 0` +
   `justify-content: flex-end` right-aligns while there is room and wraps when
   there is not. See the matching note in fin-rollups.css. */
.ep-time-bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 11px;
  min-width: 0; border: 1px solid #ddd6fe; background: #f5f3ff; border-radius: 11px; }
.ep-time-bulk-count { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #6d28d9; }
.ep-time-bulk-acts { display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }

/* [hidden] loses to an explicit `display` rule — these are toggled via .hidden,
   so they need the guard or they are permanently visible. */
.ep-time-range[hidden] { display: none !important; }
.ep-time-bulkbar[hidden] { display: none !important; }
.ep-tpick-panel[hidden] { display: none !important; }

/* Someone else's time entry: a lock where the checkbox would be. The rule
   itself lives in wk-time-own.js so this tab, Time & Billing and the entry
   popup cannot disagree about whose entry it is. */
.ep-time-check.is-locked {
  cursor: not-allowed; border-style: dashed; background: #f8fafc; opacity: .7;
  position: relative;
}
.ep-time-check.is-locked::after {
  content: ''; position: absolute; left: 50%; top: 2px; width: 7px; height: 5px;
  margin-left: -3.5px;
  border: 1.5px solid #cbd5e1; border-bottom: 0; border-radius: 3px 3px 0 0;
}

/* ══════════════════════════════════════════════════════════════
   MATCH OBLIGATIONS — see wk-match.js
   A match is NOT budget, and the styling carries that: no green "available"
   treatment, a progress bar rather than a burn-down, and a standing note
   saying whose money it is. Amber/red is "still owed", green only when met.
   ══════════════════════════════════════════════════════════════ */
.ep-match-why {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 14px; padding: 10px 12px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
  font-size: 12.5px; line-height: 1.5; color: #78350f;
}
.ep-match-why svg { flex: 0 0 auto; margin-top: 1px; color: #b45309; }
/* auto-FIT, not auto-fill: most projects have exactly ONE obligation, and
   auto-fill keeps the empty tracks so that lone card sat at 340px in a 1,300px
   panel — which reads as a failed render rather than a deliberate single card.
   Capped so two cards still sit side by side and one doesn't sprawl. */
.ep-match-cards {
  display: grid; gap: 12px; max-width: 1100px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.ep-match-card {
  position: relative; padding: 14px; border-radius: 12px; cursor: pointer;
  background: #fff; border: 1px solid #e2e8f0;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ep-match-card:hover { border-color: #cbd5e1; box-shadow: 0 2px 10px rgba(15, 23, 42, .06); }
.ep-match-card:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
.ep-match-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ep-match-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .01em; }
.ep-match-ratio { font-size: 11px; font-weight: 600; color: #64748b; }
/* Hover-only delete, like the funding cards — no always-visible chrome. */
.ep-match-del {
  margin-left: auto; opacity: 0; border: 0; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; color: #94a3b8; padding: 0 2px;
  transition: opacity .12s ease, color .12s ease;
}
.ep-match-card:hover .ep-match-del { opacity: 1; }
.ep-match-del:hover { color: #ef4444; }
.ep-match-name { font-weight: 650; font-size: 14px; color: #1e293b; }
.ep-match-sentence { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: #64748b; }
/* Required · Documented · Still owed. Three equal columns so no single figure
   reads as the headline — the point is the relationship between them. */
.ep-match-figs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 12px 0 8px; padding: 10px 0; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9;
}
.ep-match-figs > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ep-match-fig { font-size: 15px; font-weight: 700; color: #1e293b; }
.ep-match-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; }
.ep-match-bar { height: 6px; border-radius: 999px; background: #f1f5f9; overflow: hidden; }
.ep-match-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .2s ease; }
.ep-match-note { margin-top: 9px; font-size: 12px; line-height: 1.5; color: #64748b; }
.ep-match-note strong { color: #475569; }
.ep-match-hours {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px;
  font-size: 12px; color: #475569;
}
.ep-match-hours strong { color: #1e293b; }
.ep-match-counts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ep-match-chip {
  font-size: 11px; padding: 2px 8px; border-radius: 6px;
  background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
}
.ep-match-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1f5f9;
  font-size: 11.5px; color: #94a3b8;
}
.ep-match-add { font-weight: 650; color: #4f46e5; cursor: pointer; }
.ep-match-add:hover { text-decoration: underline; }

/* ── AWARD + MATCH = TOTAL PROJECT COST ────────────────────────────────
   The grant popup's Funding tab now carries the match, so the two halves
   have to visibly reconcile. Neutral by default; amber only when the three
   stated figures genuinely do not add up, because a warning that is always
   on is a warning nobody reads. */
.gp-recon {
  margin: 14px 0 4px; padding: 12px 14px; max-width: 1100px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
}
.gp-recon.is-off { background: #fffbeb; border-color: #fde68a; }
.gp-recon-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
}
.gp-recon-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gp-recon-val { font-size: 16px; font-weight: 700; color: #334155; }
.gp-recon-val.is-total { color: #0f172a; }
.gp-recon-lbl {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: #94a3b8;
}
.gp-recon-op { font-size: 15px; font-weight: 600; color: #cbd5e1; align-self: center; }
.gp-recon.is-off .gp-recon-op { color: #d6ba7a; }
.gp-recon-note {
  margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: #78350f;
}
.gp-recon-note.is-quiet { color: #94a3b8; }

/* The standing "this is not our money" line, said once at the top of the
   match section now that match and funding share a screen. */
.gp-match-intro {
  margin: 0 0 14px; max-width: 1100px;
  font-size: 12.5px; line-height: 1.55; color: #64748b;
}
.gp-match-intro strong { color: #475569; font-weight: 650; }

/* Tick-list inside an ep-edit modal (match: what may be counted). Rows, not a
   grid — every label is a sentence, and a two-column grid puts the hint on a
   line of its own where it reads as a separate option. */
.ep-edit-checks { display: flex; flex-direction: column; gap: 2px; }
.ep-edit-check {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; line-height: 1.45; color: #64748b;
  transition: background .12s ease;
}
.ep-edit-check:hover { background: #f8fafc; }
.ep-edit-check input { flex: 0 0 auto; margin-top: 2px; accent-color: #4f46e5; }
.ep-edit-check strong { color: #1e293b; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   WORK ▸ CAPACITY
   The rail, the week board, the bill rates and the person × work
   stream × rate rows.

   ⚠️ NO KPI PILLS HERE, deliberately. This panel used to open on five
   floating scorecards (Needs / Planned / Logged / Weeks left /
   Remaining), and three of them were about the PROJECT rather than the
   week you had selected — "Weeks left" above all. Every number now
   either belongs to the selected Monday–Sunday or sits in grey as the
   footnote it always was. Colours borrow the panel's own tokens so it
   reads as part of the project card, not a bolted-on screen.
   ══════════════════════════════════════════════════════════════ */

.ep-cap { display: flex; flex-direction: column; gap: 16px; }

/* ── the rail: ONE MONTH, ALL OF ITS WEEKS ────────────────────
   Tyler, 2026-08-14: "in the capacity you should be able to see the full
   month, all of them across, by weeks. The scorecards are saying the total
   for the month so we don't need the extra card for the month."

   So the month CARD is gone — no header, no planned/logged sentence, no
   dollar figure, no progress bar; those moved into the scorecards' foot
   line. What is left is a month NAME with a stepper either side, over the
   month's own weeks as one segmented control.

   ⚠️ The weeks are a GRID, not a scrolling flex row. A month is four to
   six weeks and they must all be on screen at once — that is the whole
   request. `minmax(0,1fr)` and not `1fr` because a grid item's min-width
   defaults to its content, and "This week" is wider than "Aug 3". */
.ep-cap-rail {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 7px 7px; border: 1px solid var(--ep-border, #e2e8f0);
  border-radius: 14px; background: #f8fafc;
}
.ep-cap-mnav {
  display: flex; align-items: center; gap: 4px; padding: 1px 3px 0;
}
.ep-cap-mnav-t {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #4338ca; min-width: 104px; text-align: center;
}
.ep-cap-mstep {
  width: 22px; height: 22px; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  color: #94a3b8; font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ep-cap-mstep:hover { background: #fff; border-color: #c7d2fe; color: #4338ca; }
/* Only rendered when the rail is parked away from this month, so it is
   always the way BACK and never a no-op sitting there being ignored. */
.ep-cap-mnow {
  margin-left: auto; padding: 3px 10px; border: 1px solid #c7d2fe; border-radius: 999px;
  background: #fff; color: #4338ca; font: inherit; font-size: 10.5px; font-weight: 800;
  letter-spacing: .03em; cursor: pointer;
}
.ep-cap-mnow:hover { background: #eef2ff; }
.ep-cap-weeks {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 2px; min-width: 0;
}
/* A connected segmented control, not five floating pills — the weeks of a
   month are one axis, and drawing them as separate cards made picking a
   week look like picking between five unrelated things. */
/* ⚠️ CENTRED, unlike the old six-week strip. Five equal columns across the
   width of the card give each tab ~200px for two short lines, and left
   aligned that reads as five labels stranded on the left of a lot of empty
   card rather than as one control. */
.ep-cap-week {
  min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 9px; border: 0; border-radius: 9px; background: transparent;
  cursor: pointer; text-align: center; transition: background .12s ease;
}
.ep-cap-week:hover { background: #eef2f7; }
.ep-cap-week.is-past .ep-cap-week-lbl,
.ep-cap-week.is-past .ep-cap-week-h { color: #94a3b8; }
.ep-cap-week.is-active {
  background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 0 0 1px #c7d2fe;
}
.ep-cap-week-lbl {
  font-size: 11.5px; font-weight: 600; color: #64748b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-cap-week-h {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 14px; font-weight: 700; color: #334155;
}
.ep-cap-week.is-active .ep-cap-week-lbl { color: #4338ca; }
.ep-cap-week.is-active .ep-cap-week-h { color: #312e81; }
.ep-cap-week.is-now:not(.is-active) .ep-cap-week-lbl { color: #4f46e5; }
/* Logged, beside planned, on the tab itself. Emerald once the week has
   been worked to its plan; otherwise quiet — a week logging 4h of 20h
   should not wear a success colour. ⚠️ Hours logged against NO plan still
   render: that is the 18h the old rail drew as a bare dash. */
.ep-cap-week-lg {
  font-style: normal; font-size: 11px; font-weight: 700; color: #94a3b8;
}
.ep-cap-week-lg.is-ok { color: #059669; }
.ep-cap-week.is-active .ep-cap-week-lg { color: #6366f1; }
.ep-cap-week.is-active .ep-cap-week-lg.is-ok { color: #047857; }

/* ── find + filter, on the team section's head ────────────────
   Tyler: "the search bar can be in the box where the team members are."
   So these sit in `.ep-cap-sec-head`, not on the week rail — and they are
   sized to a section head (32px, not the rail's 40px) so the heading they
   share a line with stays the tallest thing on it. */
.ep-cap-tools { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ep-cap-find {
  flex: 0 1 224px; display: flex; align-items: center; gap: 7px;
  padding: 0 10px; border: 1px solid var(--ep-border, #e2e8f0);
  border-radius: 9px; background: #fff; color: #94a3b8;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ep-cap-find:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px #e0e7ff; color: #4f46e5; }
.ep-cap-find svg { flex: 0 0 auto; }
.ep-cap-find input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 12.5px; color: #0f172a; padding: 7px 0;
}
.ep-cap-find input::placeholder { color: #94a3b8; }
.ep-cap-find input::-webkit-search-cancel-button { cursor: pointer; }

/* The filter is a <details>, so click-outside and Escape close it without
   a line of JS — this panel has paid for hand-rolled popovers before. */
.ep-cap-filter { position: relative; flex: 0 0 auto; }
.ep-cap-filter > summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none;
  padding: 7px 11px; border: 1px solid var(--ep-border, #e2e8f0); border-radius: 9px;
  background: #fff; color: #475569; font-size: 12.5px; font-weight: 650;
  cursor: pointer; white-space: nowrap;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.ep-cap-filter > summary::-webkit-details-marker { display: none; }
.ep-cap-filter > summary:hover { border-color: #c7d2fe; color: #4338ca; }
.ep-cap-filter.is-on > summary { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }
.ep-cap-filter[open] > summary { border-color: #6366f1; box-shadow: 0 0 0 3px #e0e7ff; }
/* ⚠️ RIGHT-ANCHORED. The head is a flex row that ends at the panel's right
   edge, so a menu anchored left would open off-screen on a narrow card. */
.ep-cap-filter-m {
  position: absolute; z-index: 40; top: calc(100% + 5px); right: 0;
  min-width: 190px; display: flex; flex-direction: column; gap: 1px;
  padding: 5px; border: 1px solid var(--ep-border, #e2e8f0); border-radius: 11px;
  background: #fff; box-shadow: 0 10px 28px rgba(15,23,42,.14);
}
.ep-cap-filter-o {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 600; color: #334155; cursor: pointer;
  white-space: nowrap;
}
.ep-cap-filter-o:hover { background: #f1f5f9; }
.ep-cap-filter-o.is-on { background: #eef2ff; color: #4338ca; font-weight: 750; }
.ep-cap-hidden { display: none !important; }
.ep-cap-nomatch { font-size: 12.5px; color: #94a3b8; padding: 12px 2px; }
/* A total over rows you cannot see is a wrong number. */
.ep-cap.is-filtered .ep-cap-total { display: none; }

/* ── what is still missing ──────────────────────────────────── */
/* One quiet strip, not a yellow box. The two blockers you can act on
   from here (no rate card, somebody with no rate) moved into the rate
   picker itself, where the fix IS the control. */
.ep-cap-setup {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 12px;
  background: #fffbeb; border: 1px solid #fde68a;
}
.ep-cap-setup-l {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #b45309; flex: 0 0 auto;
}
.ep-cap-fix {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 11px;
  border: 1px solid #fcd34d; border-radius: 999px; background: #fff;
  cursor: pointer; font: inherit; font-size: 12.5px; color: #78350f;
  transition: border-color .12s ease, background .12s ease;
}
.ep-cap-fix:hover { background: #fffbeb; border-color: #f59e0b; }
.ep-cap-fix-a {
  padding: 2px 9px; border-radius: 999px; background: #fef3c7;
  font-size: 11.5px; font-weight: 700; color: #92400e; white-space: nowrap;
}

/* ── 🚩 money with no deadline ───────────────────────────────────
   Tyler, 2026-08-17: *"the things where there's no deadline need to flag,
   because for grants there has to be a deadline… Make sure it flags, and
   then it's obvious if there's no deadline."*

   Louder than `.ep-cap-setup` beside it, on purpose. That strip lists
   things not set up yet; this one names money that is quietly buying no
   hours at all, which is a worse state than an unfinished setup and used
   to be one grey sentence at the bottom of a shut fold.
   ⚠️ Red only when a GRANT is missing its date — that award expires
   whether or not anybody schedules it. Everything else is amber, because
   "$3,500 a month, ongoing" is a complete answer and nagging for a
   deadline that does not exist is how a flag gets ignored. */
.ep-cap-nodate {
  margin: 10px 0 0; padding: 10px 12px 4px; border-radius: 12px;
  background: #fffbeb; border: 1px solid #fde68a;
}
.ep-cap-nodate.is-grant { background: #fef2f2; border-color: #fecaca; }
.ep-cap-nodate-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ep-cap-nodate-ic { color: #b45309; align-self: center; display: flex; }
.ep-cap-nodate.is-grant .ep-cap-nodate-ic { color: #b91c1c; }
.ep-cap-nodate-t {
  font-size: 12.5px; font-weight: 700; color: #92400e;
}
.ep-cap-nodate.is-grant .ep-cap-nodate-t { color: #991b1b; }
.ep-cap-nodate-s { font-size: 12px; color: #b45309; }
.ep-cap-nodate.is-grant .ep-cap-nodate-s { color: #b91c1c; }
.ep-cap-nodate-s b { font-weight: 700; }
.ep-cap-nodate-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px dashed #fde68a; margin-top: 8px;
}
.ep-cap-nodate.is-grant .ep-cap-nodate-row { border-top-color: #fecaca; }
.ep-cap-nodate-row:last-child { margin-bottom: 6px; }
.ep-cap-nodate-n { font-size: 12.5px; font-weight: 600; color: #0f172a; }
.ep-cap-nodate-v {
  font-size: 12.5px; font-weight: 700; color: #92400e;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ep-cap-nodate-row.is-grant .ep-cap-nodate-v { color: #b91c1c; }
.ep-cap-nodate-w { flex: 1 1 260px; font-size: 11.5px; color: #78350f; line-height: 1.45; }
.ep-cap-nodate.is-grant .ep-cap-nodate-w { color: #7f1d1d; }
.ep-cap-nodate-go {
  font: inherit; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  border: 1px solid #fca5a5; background: #fff; color: #b91c1c; cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.ep-cap-nodate-go:hover { background: #fef2f2; border-color: #ef4444; }
/* An assumed deadline is not a warning — it is a fact about where the date
   came from, and it must not wear the same red as a missing one. */
.ep-cap-nodate-row.is-assumed { border-top-style: solid; border-top-color: #e2e8f0; }
.ep-cap-nodate-row.is-assumed .ep-cap-nodate-v,
.ep-cap-nodate-row.is-assumed .ep-cap-nodate-w { color: #64748b; }
.ep-cap-nodate-go.is-quiet { border-color: #cbd5e1; color: #475569; }
.ep-cap-nodate-go.is-quiet:hover { background: #f8fafc; border-color: #94a3b8; }

/* ── the week board ─────────────────────────────────────────── */
.ep-cap-board {
  border: 1px solid var(--ep-border, #e2e8f0); border-radius: 14px;
  background: #fff; overflow: hidden;
}
.ep-cap-board-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--ep-border, #e2e8f0);
  background: #fbfcfe;
}
.ep-cap-board-t { font-size: 14.5px; font-weight: 700; color: #0f172a; }
.ep-cap-board-t span {
  display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: #94a3b8;
}
.ep-cap-board-a { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.ep-cap-btn {
  padding: 6px 12px; border: 1px solid var(--ep-border, #e2e8f0); border-radius: 8px;
  background: #fff; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  color: #475569; transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.ep-cap-btn:hover { border-color: #cbd5e1; background: #f8fafc; color: #1e293b; }
.ep-cap-btn.is-primary { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.ep-cap-btn.is-primary:hover { background: #4338ca; border-color: #4338ca; color: #fff; }
.ep-cap-btn.is-danger { color: #b91c1c; }
.ep-cap-btn.is-danger:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
/* 🚨 ALLOCATE IS GREEN, AND IT IS wk-allocate's GREEN. #15803d is
   `.wkal-btn--go` out of wk-allocate.css — the primary on the popup this
   button opens — so the colour is borrowed from the flow rather than
   invented here. If that popup’s green ever moves, this is the second
   place to change.
   ⚠️ It no longer sits beside anything. Assign was taken off this row on
   2026-08-17 and Clear followed it the same day (Tyler: *"there should
   not be a clear option… just have the allocate button, make it green,
   and have it do a plus little icon"*), so this is the ONE button in the
   row and green is the only colour in it. `.is-primary` (indigo) is kept
   below for the other panels that still use it. */
.ep-cap-btn.is-go { background: #15803d; border-color: #15803d; color: #fff; }
.ep-cap-btn.is-go:hover { background: #166534; border-color: #166534; color: #fff; }
/* The plus. ⚠️ `flex` on the button, not `inline-block` on the svg — a
   bare text node beside an inline svg wraps as its own flex item the
   moment the row narrows, which is how "Allocate" once ended up on a
   second line under its own icon. */
.ep-cap-btn.has-ic { display: inline-flex; align-items: center; gap: 6px; }
.ep-cap-btn.has-ic svg { width: 13px; height: 13px; flex: none; }

/* ══ THE SCORECARDS ════════════════════════════════════════════════════
   🚨 THE TILE ITSELF IS `.wk-sc` IN work.css — ONE COMPONENT, EVERY
   CAPACITY SURFACE. Tyler, 2026-08-17: *"for all the capacity areas inside
   the project, I need them to have the same scorecards… make it so that the
   scorecards are 1."*

   What used to live here — `.ep-cap-metric`, then `.ep-capsc` on top of
   `.wk-capsc-card`, plus `.ep-cap-spark` and `.ep-cap-vico` — is GONE. It
   was a third and fourth lookalike: two hand-built shells (`_capMetric` and
   `_capVerdictTile`) sharing a class with the band below them, each with its
   own accent rules, its own empty state and its own foot discipline, all of
   which had to be kept in step by hand and were not.

   THIS BLOCK NOW ONLY SAYS WHERE THE TILES SIT. Anything about how a tile
   LOOKS belongs in work.css beside `.wk-sc`, or the drift starts again.
   ⚠️ work.css MUST BE LOADED for this panel — it always is on every host
   that draws it, but without it the tiles render as bare text on the page.
   ══════════════════════════════════════════════════════════════════════ */
.ep-cap-scs { padding: 12px 16px 12px; }
/* 🚪 THE DENOMINATOR IS ITS OWN CONTROL. Tyler, 2026-08-17: *"I expect to
   click on that number box and see it."* The tile opens onto the ROWS — the
   breakdown of the figure to the LEFT of "of". This is the figure to the
   right of it, and it opens the derivation instead: not "who has these
   hours" but "why is it nine".
   ⚠️ It inherits `.wk-sc-of`'s type wholesale and adds only the underline
   that says it is pressable. Restating the font here is how the inline
   number starts drifting from the figure beside it the next time work.css
   touches the tile. */
.ep-cap-needbtn {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  transition: color .12s ease;
}
.ep-cap-needbtn:hover { color: var(--_ac, #004b7c); text-decoration-style: solid; }
.ep-cap-needbtn:focus-visible {
  outline: 2px solid var(--_ac, #004b7c); outline-offset: 2px; border-radius: 3px;
}
/* The same door on the tile's SUB line, where the month is stated. Quieter,
   because `.wk-sc-sub` is quieter — it must not out-shout the "of Nh needed"
   figure above it, which is the tile's actual denominator. */
.ep-cap-needbtn.is-quiet { text-decoration-color: #cbd5e1; }
.ep-cap-needbtn.is-quiet:hover { text-decoration-color: currentColor; }
/* If work.js has not loaded, the panel says so rather than drawing nothing —
   an empty strip where three numbers belong reads as "this project has no
   data", which is a different and much worse claim. */
.ep-cap-scwarn {
  margin: 12px 16px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid #fde68a; background: #fffbeb;
  font-size: 11.5px; font-weight: 700; color: #b45309;
}

/* ══ THE CROSS-PROJECT FACT, AS A SENTENCE ══════════════════════════════
   🚨 THIS REPLACES A WHOLE SCORECARD ROW. `.ep-cap-teamband` /
   `.ep-cap-teameb` / `.ep-cap-teamsc` are DELETED. Tyler, 2026-08-17:
   *"looks very repetitive in here. The 'Allocated this week', the 'Log so
   far', all of it needs to just be one row of scorecards… That's it, really,
   just those three scorecards."*

   The row it replaces printed "Allocated" and "Logged so far" a SECOND time,
   two rows under the first pair, with different numbers — and needed its own
   eyebrow paragraph to stop that reading as a contradiction. A row that has to
   explain itself should not be a row.

   What survives is the one thing the person cards below genuinely cannot say:
   these people also work on OTHER projects, so the hours you are about to
   place have to fit around that. That is a sentence, not a scorecard — it
   needs no figure of its own, no meter and no colour to be useful, and as one
   line it costs ~20px instead of ~130px. */
.ep-cap-teamline {
  margin: 0 16px 10px; padding: 7px 11px; border-radius: 9px;
  font-size: 11px; font-weight: 600; line-height: 1.4; color: var(--ink3, #64748b);
  background: color-mix(in srgb, var(--wkch-2, #004b7c) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--wkch-2, #004b7c) 12%, transparent);
}
.ep-cap-teamline b { font-weight: 900; color: var(--ink, #0f172a); }
/* Somebody being past their own week is the one state here worth a colour —
   it is the reason a plan will not land, and it is stated in words as well. */
.ep-cap-teamline.is-over {
  color: #b45309; background: #fffbeb; border-color: #fde68a;
}
.ep-cap-teamline.is-over b { color: #92400e; }
@media (max-width: 720px) { .ep-cap-teamline { margin: 0 10px 9px; } }

/* ── the flash the Allocated tile leaves on the rows it explains ────────
   `cap-plan` scrolls the plan table into view, and a scroll on its own is
   invisible on a screen that was already near it — so the destination says
   it was arrived at.
   🚨 NO `animation-fill-mode: both`. A finished fill:both animation leaves a
   PERMANENT stacking context on the node, and this table hosts the rate and
   tier popovers; that is exactly how they ended up trapped underneath it
   once before. Plain forwards-less animation, class removed on a timer.
   See reference_fill_both_leaves_a_permanent_stacking_context. */
.ep-cap-table.is-flash, .ep-table-wrap.is-flash { animation: epCapFlash 1.3s ease-out; }
@keyframes epCapFlash {
  0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wkch-2, #004b7c) 45%, transparent); }
  70%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wkch-2, #004b7c) 22%, transparent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .ep-cap-table.is-flash, .ep-table-wrap.is-flash { animation: none; outline: 2px solid var(--wkch-2, #004b7c); }
}

/* ── the pace strip ─────────────────────────────────────────────
   Where the week's number came from — and the control that changes it,
   because for an open-ended retainer the answer is a budget rather than
   an end date the client will never give us. */
.ep-cap-pace {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--ep-border, #e2e8f0);
  background: #f8fafc; font-size: 12.5px; color: #64748b;
}
.ep-cap-pace-l {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #94a3b8; flex: 0 0 auto;
}
/* 🚨 `.ep-cap-pace-sel` / `.ep-cap-pace-amt` ARE GONE — the strip stopped
   being a control on 2026-08-17 and every pacing select moved to
   Financials ▸ Allocation (`.ep-fmw-set`). Tyler: *"the confusing part
   is all of these settings that we have way too far underneath."* The rules
   are kept out of this file entirely rather than left dangling: a stylesheet
   that still dresses a control nobody renders is how the control gets
   rebuilt here by accident. */
.ep-cap-pace-go { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
/* 🚨 THE TWO WAYS DEEPER ARE BUTTONS, NOT WORDS. `.ep-cap-pace-link` is gone.
   It styled them as two dotted-underlined words inside a grey sentence, on
   the strength of "the strip is a sentence" — which was true of the prose and
   wrong about the doors: these are the panel's two most-used controls and they
   had a 12px text hit target that read as emphasis. Tyler, 2026-08-17: *"where
   it says the math, we need better buttons to click. In fact, you can even
   just make it an icon."*
   ⚠️ Icon AND label. Icon-only is what he offered, but "the maths" and "the
   rules" are not glyphs anybody recognises cold, and the strip has the width.
   ⚠️ `border-radius` is stated here and dashboard-meta.js overrides it on
   every real <button> at runtime — which is fine and deliberate: these are
   supposed to look like the rest of the app's buttons, unlike the scorecards
   (see the note on .prog-staff-card). */
.ep-cap-pace-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 700; color: #4338ca;
  background: #fff; border: 1px solid #c7d2fe; border-radius: 8px;
  padding: 5px 10px 5px 8px; cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.ep-cap-pace-btn .ep-ic { flex: 0 0 auto; opacity: .85; }
.ep-cap-pace-btn:hover { background: #eef2ff; border-color: #a5b4fc; color: #3730a3; }
.ep-cap-pace-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
/* What stands where "Change it" would be, out of Edit mode. It has to name
   the destination — a row that just loses its button reads as the setting
   having been removed rather than as needing Edit mode. */
.ep-cap-pace-ro {
  font-size: 11.5px; font-weight: 600; color: #94a3b8; white-space: nowrap;
  border: 1px dashed #e2e8f0; border-radius: 8px; padding: 5px 9px; cursor: help;
}
.ep-cap-pace-src { color: #64748b; line-height: 1.4; }
.ep-cap-pace-src b { color: #334155; font-weight: 700; }
.ep-cap-pace-r { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ep-cap-paceb {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--ep-border, #e2e8f0); background: #fff;
  font-size: 11.5px; color: #64748b; white-space: nowrap;
}
.ep-cap-paceb b { color: #0f172a; font-weight: 700; }
.ep-cap-paceb.is-warn { background: #fffbeb; border-color: #fde68a; color: #b45309; }

@media (max-width: 780px) {
  /* ⚠️ The scorecard row's own breakpoints live on `.wk-scs` in work.css and
     are shared by every capacity surface. A second column rule here is how
     one screen ends up two-up while the identical row elsewhere is three. */
  .ep-cap-pace-r { margin-left: 0; }
}

/* ── sections (rates, the plan) ─────────────────────────────── */
.ep-cap-sec {
  border: 1px solid var(--ep-border, #e2e8f0); border-radius: 14px;
  background: #fff; padding: 14px 16px 16px;
}
.ep-cap-sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.ep-cap-sec-t { font-size: 14px; font-weight: 700; color: #0f172a; }
.ep-cap-sec-t span { margin-left: 8px; font-size: 12px; font-weight: 500; color: #94a3b8; }
/* The team head is now heading · count · find+filter · (Edit-only) rate
   card button. `.ep-cap-sec-count` claims `margin-left:auto`, which would
   shove the tools to the right edge and leave the count orphaned mid-row;
   the tools take the auto margin instead, so the count stays beside the
   heading it is about. */
.ep-cap-rates .ep-cap-sec-count { margin-left: 0; margin-right: 0; }
.ep-cap-rates .ep-cap-tools { margin-left: auto; }
/* The headcount the "Who has it" scorecard used to carry — said beside
   the faces it is about, where it costs a line instead of a third of
   the board. */
.ep-cap-sec-count {
  margin-left: auto; margin-right: 8px; padding: 3px 10px; border-radius: 999px;
  background: #eef2ff; border: 1px solid #c7d2fe; color: #4338ca;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.ep-cap-sec-count b { font-weight: 800; }
.ep-cap-sec-count.is-none { background: #f8fafc; border-color: var(--ep-border, #e2e8f0); color: #94a3b8; }
.ep-cap-none { font-size: 12.5px; color: #94a3b8; padding: 6px 2px; }
.ep-cap-none--big {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px 18px; border: 1px dashed var(--ep-border, #e2e8f0); border-radius: 12px;
  background: #fbfcfe; text-align: center;
}
.ep-cap-none--big strong { font-size: 14px; color: #334155; font-weight: 700; }
.ep-cap-none--big span { font-size: 12.5px; color: #94a3b8; max-width: 460px; line-height: 1.5; }
.ep-cap-none--big .ep-cap-btn { margin-top: 4px; }
/* Two ways to plan an empty week — by hand, or let Assign spread it. They
   sit side by side rather than stacking, so neither reads as the only one. */
.ep-cap-none-a { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* ── bill rates ─────────────────────────────────────────────── */
/* The card is shown as tiers, then every person gets ONE picker over
   it. That is the whole ask: see the rates the project has, put a
   person on one without leaving the screen. */
.ep-cap-card { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ep-cap-tierchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--ep-border, #e2e8f0); border-radius: 999px;
  background: #f8fafc; font-size: 12px; color: #475569;
}
.ep-cap-tierchip b { font-weight: 700; color: #0f172a; }
.ep-cap-tierchip.is-def { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }
.ep-cap-tierchip.is-def b { color: #312e81; }
.ep-cap-card-none {
  font-size: 12.5px; color: #94a3b8; line-height: 1.5; margin-bottom: 12px;
  padding: 10px 12px; border-radius: 10px; background: #f8fafc;
}
/* ⚠️ These are the Team ▸ Capacity cards, not a lookalike. The markup comes
   from work.js (`WkCapCard.cardHTML`) and the chrome from work.css
   (.wk-cap-staffcard) + programs.css (.prog-staff-*). The only thing owed
   here is the GRID they sit in, because work.css scopes its copy of that to
   #tmCapacityList. Same columns, same gap, same stretch — cards in a row end
   level with each other. */
.ep-cap-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--wkv-card-min, 280px), 1fr));
  gap: 12px;
  align-items: stretch;
}
.ep-cap-person { display: flex; }
.ep-cap-person > * { flex: 1; min-width: 0; }
/* ── ONE colour system on this panel ─────────────────────────────
   Tyler, 2026-08-13: *"make sure the colors of everything match."*
   The card arrives from the company-wide grid wearing that grid's
   palette — a teal→green gradient bar, a blue "under" edge, a red
   "over" edge — none of which is any of the four ramps the scorecards
   above it use. Three greens and two blues on one screen reads as five
   unrelated states rather than one scale, so the card is re-toned HERE
   (scoped to this panel; the Team grid keeps its own) onto the same
   indigo / emerald / amber / red the tiles use.
   ⚠️ Fill AND track together, same as the scorecard meters — see the
   note there on why a neutral track under a toned fill goes unread. */
.ep-cap-people .prog-staff-bar { background: #e0e7ff; height: 6px; }
.ep-cap-people .prog-staff-bar-fill { background: #4f46e5; }
.ep-cap-people .wk-cap-staffcard.is-under { border-color: var(--ep-border, #e2e8f0); }
.ep-cap-people .wk-cap-staffcard.is-under .prog-staff-bar-fill { background: #a5b4fc; }
.ep-cap-people .wk-cap-staffcard.is-over { border-color: #fca5a5; }
.ep-cap-people .wk-cap-staffcard.is-over .prog-staff-bar { background: #fee2e2; }
.ep-cap-people .wk-cap-staffcard.is-over .prog-staff-bar-fill { background: #dc2626; }
.ep-cap-people .wk-cap-staffcard.is-over .prog-staff-hero-v { color: #b91c1c; }
.ep-cap-people .wk-cap-staffcard:hover { border-color: #c7d2fe; }
/* The line under the name — their week on THIS project, in place of the
   permission role the shared card defaults to. */
.ep-cap-people .prog-staff-role { color: #64748b; font-size: 11.5px; }
.ep-cap-people .prog-staff-role b { color: #4338ca; font-weight: 700; }

/* ══ THE TEAM, AS A RESOURCE-ALLOCATION GRID ═══════════════════════
   Tyler, 2026-08-25: *"people on the left and the info smartly organized so I
   can see all of the info for more people at once."* The card grid above puts
   one person in ~280×210px; a row here is ~44px tall and full width, so a
   team of twelve is one screen instead of four.

   ⚠️ THE COLUMN TEMPLATE IS DECLARED ONCE, on --epcg, and used by BOTH the
   header and every row. They are separate grid containers — a single grid with
   `display:contents` rows loses the row box the hover, the over/under tint and
   `.ep-cap-hidden` all need — so the only thing keeping the columns lined up is
   that both read the same variable. Change one number and every row and its
   header move together; hard-code either and they part company at the first
   long name.

   ⚠️ MIN-WIDTHS, NOT PERCENTAGES, on the two control columns. The rate picker
   and the budget field are real inputs at a fixed comfortable size, and a
   fractional column would shrink them to unusable below a ~1200px popup. The
   wrapper scrolls sideways instead, with the person column pinned. */
.ep-cap-gwrap {
  --epcg:
    minmax(168px, 1.5fr)   /* person   */
    96px                   /* capacity */
    /* ⚠️ 104px is not padding. This column prints the card's THREE KINDS OF
       NOTHING — "Nothing committed" is the widest — and at 88px it ellipsed to
       "Nothing comm…", which is the one state it exists to distinguish. */
    104px                  /* allocated */
    92px                   /* free/over */
    96px                   /* this project */
    82px                   /* logged   */
    /* ⚠️ Sized for TWO chips ("2 overdue" + "3 unestimated"), not one. The
       second chip is the whole reason this column is not just a badge: a
       comfortable percentage on somebody with overdue work is the case the
       card put a chip row on the bottom for. */
    minmax(150px, 1fr)     /* flags    */
    minmax(142px, 1fr)     /* bill rate */
    minmax(196px, 1.4fr);  /* budget   */
  overflow-x: auto;
  overflow-y: hidden;
}
/* In Cards mode the wrapper is inert — it exists only so `.ep-cap-nomatch`
   stays the sibling of `.ep-cap-people` that _capApplyFilter looks for. */
.ep-cap-gwrap.is-cards { overflow: visible; }

/* 🚨 UNDOES THE CARD GRID for the same class. `.ep-cap-people` is a
   `repeat(auto-fill, minmax(280px,1fr))` card grid, and the filter finds its
   rows by that class, so the grid view has to wear it and then take the
   template back. Ordered after the card rule for exactly this reason. */
.ep-cap-people.is-grid {
  display: block;
  min-width: 1210px;
  border: 1px solid var(--ep-border, #e2e8f0);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  gap: 0;
}

/* ── the header ───────────────────────────────────────────────────
   Every cell is a control (role="button"), so it gets the cursor and the
   focus ring rather than looking like a label that happens to react. */
.ep-cap-ghead {
  display: grid;
  grid-template-columns: var(--epcg);
  gap: 0 8px;
  align-items: center;
  min-width: 1210px;
  padding: 0 10px;
  background: #f8fafc;
  border: 1px solid var(--ep-border, #e2e8f0);
  border-radius: 10px 10px 0 0;
  position: relative;
  z-index: 2;
}
.ep-cg-h {
  display: flex; align-items: center; gap: 4px;
  min-width: 0; padding: 9px 0; cursor: pointer;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #64748b;
  user-select: none; white-space: nowrap;
}
.ep-cg-h > span { overflow: hidden; text-overflow: ellipsis; }
.ep-cg-h:hover { color: #4338ca; }
.ep-cg-h:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; border-radius: 6px; }
/* Numeric headers sit over right-aligned figures, so they right-align too —
   a header floating left of its own column reads as a different column. */
.ep-cg-h.is-num, .ep-cg-h.is-cap { justify-content: flex-end; }
/* The caret only exists on the sorted column. A row of nine grey arrows
   turns "which one is this sorted by" back into a hunt. */
.ep-cg-h::after {
  content: ''; width: 0; height: 0; flex: 0 0 auto; opacity: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-bottom: 4.5px solid currentColor;
}
.ep-cg-h.is-sorted { color: #4338ca; }
.ep-cg-h.is-sorted::after { opacity: 1; }
.ep-cg-h.is-sorted.is-desc::after {
  border-bottom: 0; border-top: 4.5px solid currentColor;
}
/* Pinned so "people on the left" survives a sideways scroll — the whole point
   of a resource grid is reading a figure back to a name. */
.ep-cap-people.is-grid .ep-cg-c.is-who,
.ep-cap-ghead .ep-cg-h.is-who {
  position: sticky; left: 0; z-index: 1;
  padding-left: 10px; margin-left: -10px;
}
.ep-cap-ghead .ep-cg-h.is-who { background: #f8fafc; }

/* ── one person, one row ──────────────────────────────────────────
   ⚠️ `.ep-cap-person` KEEPS ITS CLASS AND ITS TWO DATA ATTRIBUTES.
   _capApplyFilter walks `[data-cap-search]` inside `.ep-cap-people` and hides
   with `.ep-cap-hidden`; _capApplySort reorders these same nodes. Rename
   either and the find box and the six facets go quiet without erroring. */
.ep-cap-person.ep-cap-grow {
  display: grid;
  grid-template-columns: var(--epcg);
  gap: 0 8px;
  align-items: center;
  padding: 0 10px;
  border-top: 1px solid #f1f5f9;
  background: #fff;
  transition: background .12s;
}
.ep-cap-people.is-grid .ep-cap-person:first-child { border-top: 0; }
.ep-cap-person.ep-cap-grow:hover { background: #f8fafc; }
.ep-cap-person.ep-cap-grow:hover .ep-cg-c.is-who { background: #f8fafc; }
.ep-cap-people.is-grid .ep-cg-c.is-who { background: #fff; }
/* Over their week is a LEFT EDGE, not a red row. The figure that says so is
   already red two columns over, and tinting the whole row would fight the
   budget strip's own amber for the same eye. */
/* ⚠️ ON THE PINNED CELL, NOT THE ROW. An inset shadow on the row is painted
   over by the person cell, which is sticky and therefore has to carry its own
   opaque background — the edge showed as two slivers above and below it. Drawn
   on the cell instead it is whole, and it travels with the pinned column when
   the grid is scrolled sideways, which is where you most need to know whose
   row you are reading. */
.ep-cap-person.ep-cap-grow.is-over .ep-cg-c.is-who { box-shadow: inset 3px 0 0 #dc2626; }
.ep-cap-person.ep-cap-grow.is-over:hover { background: #fef7f7; }
.ep-cap-person.ep-cap-grow.is-over:hover .ep-cg-c.is-who { background: #fef7f7; }

.ep-cg-c {
  min-width: 0; padding: 7px 0;
  font-size: 12.5px; color: #334155; line-height: 1.3;
}
.ep-cg-c[role="button"] { cursor: pointer; }
.ep-cg-c[role="button"]:focus-visible {
  outline: 2px solid #6366f1; outline-offset: -2px; border-radius: 6px;
}
/* Figures line up down the column — the whole reason this is a grid and not
   nine cards in a row. */
.ep-cg-c.is-num, .ep-cg-c.is-cap {
  text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-cg-c b { font-weight: 700; color: #0f172a; }
/* A stated nothing, greyed rather than dropped: "Nothing this week" and
   "Nothing committed" are the card's own three-kinds-of-nothing wording and
   they are the reading, not an empty cell. */
.ep-cg-c.is-quiet { color: #94a3b8; font-size: 11px; }
.ep-cg-c.is-nil { color: #cbd5e1; }
.ep-cg-c.is-over, .ep-cg-c.is-over b { color: #b91c1c; }

/* Person */
.ep-cg-c.is-who { display: flex; align-items: center; gap: 8px; }
.ep-cg-c.is-who .ep-circle { flex: 0 0 auto; }
.ep-cg-nm { display: flex; flex-direction: column; min-width: 0; }
.ep-cg-nm b {
  font-size: 13px; font-weight: 600; color: #1e293b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ep-cg-nm i {
  font-style: normal; font-size: 10.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Capacity — the card's hero and bar, folded onto one line. Same indigo /
   red the panel's scorecards use, not the company grid's teal (see the
   re-tone note on .ep-cap-people above — one colour system per screen). */
.ep-cg-c.is-cap { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.ep-cg-pct { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.ep-cg-bar {
  flex: 0 0 34px; height: 5px; border-radius: 999px;
  background: #e0e7ff; overflow: hidden;
}
.ep-cg-bar i { display: block; height: 100%; background: #4f46e5; border-radius: 999px; }
.ep-cap-person.is-under .ep-cg-bar i { background: #a5b4fc; }
.ep-cap-person.is-under .ep-cg-pct { color: #64748b; }
.ep-cap-person.is-over .ep-cg-bar { background: #fee2e2; }
.ep-cap-person.is-over .ep-cg-bar i { background: #dc2626; }
.ep-cap-person.is-over .ep-cg-pct { color: #b91c1c; }

/* On this project — hours over the money they come to. */
.ep-cg-c.is-num i {
  display: block; font-style: normal; font-size: 10.5px;
  font-weight: 600; color: #94a3b8;
}

/* Flags — the card's foot chips, wrapping suppressed so a person with two
   never makes a taller row than a person with one. */
.ep-cg-c.is-flag {
  display: flex; align-items: center; gap: 4px;
  overflow: hidden; white-space: nowrap;
}
.ep-cg-c.is-flag .prog-staff-chip {
  flex: 0 0 auto; font-size: 10.5px; padding: 2px 7px;
}

/* ── the two control columns ──────────────────────────────────────
   🚨 THE MARKUP IS THE CARD'S, UNCHANGED — _capRateFootHtml and
   _capBudgetFootHtml render both, so a rate set here is the same write as a
   rate set on a card. What is undone is only the card CHROME: those strips
   are built to sit in a card foot, with negative margins pulling them to the
   card's 14px padding, a top border dividing them from the facts above and
   the bottom radius closing the card. In a row they are cells, so all of it
   comes off. Restyling the controls themselves would be the second copy this
   whole panel is built to avoid. */
.ep-cg-c.is-rate .ep-cap-prate,
.ep-cg-c.is-bud .ep-cap-pbudget {
  margin: 0; padding: 0; border: 0; background: none; border-radius: 0;
  flex-wrap: nowrap;
}
.ep-cg-c.is-rate .ep-cap-pick { font-size: 11.5px; padding: 4px 7px; }
.ep-cg-c.is-rate .ep-cap-more { width: 24px; height: 24px; font-size: 13px; }
.ep-cg-c.is-rate .ep-cap-tiers { display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.ep-cg-c.is-bud .ep-cap-bbox { padding: 3px 7px; }
.ep-cg-c.is-bud .ep-cap-binput { width: 58px; font-size: 12px; }
/* The "$1,500 left ≈ 6h at $250" sentence is the reason the budget column is
   the widest one. It clamps to two lines rather than ellipsing to one — the
   hours-left half is the part somebody acts on, and it is at the end. */
.ep-cg-c.is-bud .ep-cap-bsum {
  font-size: 10.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ep-cg-c.is-bud .ep-cap-bnone { font-size: 10.5px; }
/* Over budget stays AMBER and stays a statement — same rule as the card, just
   without the strip's background: on a row the tint would read as a row state
   and collide with the red over-capacity edge. */
.ep-cg-c.is-bud .ep-cap-pbudget.is-over .ep-cap-bsum { color: #92400e; }

/* The view switch borrows .ep-ws-viewtoggle wholesale; it only needs to stop
   the tools row from stretching it. */
.ep-cap-viewtoggle { flex: 0 0 auto; }
.ep-cap-nohere { color: #94a3b8; }
.ep-cap-offroster {
  font-style: normal; font-weight: 600; color: #b45309;
}
.ep-cap-person-flat {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--ep-border, #e2e8f0); border-radius: 12px;
}
/* The one project-specific control on an otherwise company-wide card. It sits
   below the foot row and divided from it, so it reads as "and on THIS project
   they bill…" rather than as another capacity fact. The negative margins pull
   it to the card's own edges — .prog-staff-card pads 14px/12px. */
.ep-cap-prate {
  display: flex; align-items: center; gap: 5px; margin: 10px -14px 0;
  padding: 9px 14px; border-top: 1px solid var(--ep-border, #e2e8f0);
  background: #fbfcfe;
}
.ep-cap-prate .ep-cap-pick { flex: 1; min-width: 0; }
/* ── the budget box ──────────────────────────────────────────────
   Directly under the rate it is spent at, because the sentence it
   states is the two of them multiplied: "$1,500 left ≈ 6h at $250".
   It closes the card, so it owns the bottom radius and the negative
   bottom margin that .ep-cap-prate used to carry. */
.ep-cap-pbudget {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 -14px -12px; padding: 8px 14px 9px;
  border-top: 1px dashed var(--ep-border, #e2e8f0);
  background: #fbfcfe; border-radius: 0 0 11px 11px;
}
.ep-cap-bbox {
  display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto;
  padding: 4px 8px; border: 1px solid var(--ep-border, #e2e8f0);
  border-radius: 8px; background: #fff;
}
.ep-cap-bbox:focus-within { border-color: #6366f1; box-shadow: 0 0 0 2px #e0e7ff; }
/* Out of Edit mode the same box states the figure instead of taking one.
   Same footprint, so the strip does not jump when Edit is turned on. */
.ep-cap-bbox.is-ro {
  background: #f8fafc; color: #334155; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ep-cap-bcur { font-size: 12px; font-weight: 700; color: #94a3b8; }
.ep-cap-binput {
  width: 66px; padding: 0; border: 0; background: none; font: inherit;
  font-size: 12.5px; font-weight: 700; color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.ep-cap-binput:focus { outline: none; }
/* Hide the spinners — the figure is typed, not nudged, and the arrows
   eat a third of a 66px field. */
.ep-cap-binput::-webkit-outer-spin-button,
.ep-cap-binput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ep-cap-binput { -moz-appearance: textfield; appearance: textfield; }
.ep-cap-bsum {
  font-size: 11.5px; color: #64748b; line-height: 1.35; min-width: 0;
}
.ep-cap-bsum b { color: #4338ca; font-weight: 700; }
.ep-cap-bnone { font-size: 11.5px; color: #94a3b8; line-height: 1.35; }
/* Over budget is AMBER and stated, never a refusal — the plan is intent
   and the hard stop lives on the time entry. */
.ep-cap-pbudget.is-over { background: #fffbeb; border-top-color: #fcd34d; }
.ep-cap-pbudget.is-over .ep-cap-bsum { color: #92400e; }
.ep-cap-pbudget.is-over .ep-cap-bsum b { color: #b45309; }
/* ⚠️ NO over/free chip on the CARD. WkCapCard already states both — "46.5h
   allocated · 7h over", a red bar and a 116% headline — so a second one under
   the name ellipsed this project's own ask and printed a differently-rounded
   copy of the card's number. The warning lives on the plan table instead
   (.ep-cap-grp-over), which has no capacity indicator of its own. */
.ep-cap-rrow-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ep-cap-rrow-id { display: flex; flex-direction: column; min-width: 0; }
.ep-cap-rrow-id b {
  font-size: 13px; font-weight: 600; color: #1e293b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ep-cap-rrow-id i {
  font-style: normal; font-size: 11.5px; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ep-cap-rrow-rate { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.ep-cap-pick {
  min-width: 0; padding: 6px 9px; font: inherit; font-size: 12px;
  font-weight: 600; color: #1e293b; border: 1px solid var(--ep-border, #e2e8f0);
  border-radius: 8px; background: #fff; cursor: pointer;
}
.ep-cap-pick:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 2px #e0e7ff; }
/* The missing-rate state IS the old "1 on the team has no bill rate"
   warning — said where it can be answered instead of at the top of the
   panel where it could not. */
.ep-cap-pick.is-missing { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.ep-cap-more {
  width: 28px; height: 28px; border: 1px solid var(--ep-border, #e2e8f0); border-radius: 8px;
  background: #fff; cursor: pointer; color: #94a3b8; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.ep-cap-more:hover { border-color: #cbd5e1; color: #475569; background: #f8fafc; }
.ep-cap-ownrate { font-size: 12.5px; font-weight: 600; color: #475569; }
.ep-cap-ownrate i { font-style: normal; font-weight: 500; color: #94a3b8; }

/* ── the plan rows ──────────────────────────────────────────── */
.ep-cap-table td { vertical-align: middle; }
/* Numbers in COLUMNS line up — the opposite call from the scorecard
   headline above, and for the opposite reason. */
.ep-cap-table td[style*="right"], .ep-cap-table th[style*="right"] {
  font-variant-numeric: tabular-nums;
}
/* ── grouped by person ──────────────────────────────────────────
   The heading row IS the person's week: one number, before the rows
   that add up to it. Flat, this table said a name four times and their
   total never once. */
.ep-cap-grp > td {
  background: #f8fafc; border-top: 1px solid var(--ep-border, #e2e8f0);
  padding-top: 9px; padding-bottom: 9px;
}
.ep-cap-table tbody tr.ep-cap-grp:first-child > td { border-top: 0; }
.ep-cap-grp > td b { font-size: 13.5px; font-weight: 700; color: #0f172a; }
.ep-cap-grp-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ep-cap-grp-who i {
  font-style: normal; font-size: 11px; font-weight: 600; color: #94a3b8;
  padding: 1px 7px; border-radius: 999px; background: #eef2f7;
}
/* The person's BUDGET, said on the heading that owns their whole week —
   two rows at two rates spend ONE pot, so the money belongs to the person
   and the mix belongs to the rows below. */
.ep-cap-grp-bud {
  font-style: normal; font-size: 11px; font-weight: 600; color: #64748b;
  padding: 1px 8px; border-radius: 999px; background: #eef2ff;
  white-space: nowrap;
}
.ep-cap-grp-bud b { font-size: 11px; font-weight: 700; color: #4338ca; }
.ep-cap-grp-bud.is-over { background: #fef3c7; color: #92400e; }
.ep-cap-grp-bud.is-over b { color: #b45309; }
.ep-cap-grp-over {
  font-style: normal; font-size: 11px; font-weight: 700; color: #b45309;
  padding: 1px 8px; border-radius: 999px; background: #fef3c7;
  white-space: nowrap;
}
/* ── ASSIGN, on the person's own heading ────────────────────────
   Tyler, 2026-08-14: "there needs to be an assign button in the editing
   mode, which will bring you to that pop-up… you could be assigning one
   time and then assigning deliverables based on those work streams."
   It opens the allocate popup on the aims step with only this person
   picked. Quiet until hovered — one per person is a lot of buttons, and
   they must not compete with the numbers they sit beside. */
.ep-cap-rowassign {
  margin-left: 4px; padding: 2px 10px; font: inherit; font-size: 11px; font-weight: 700;
  color: #4338ca; background: #fff; border: 1px solid #dbe2fe; border-radius: 999px;
  cursor: pointer; white-space: nowrap; opacity: .7;
  transition: opacity .12s ease, background .12s ease, border-color .12s ease;
}
.ep-cap-grp:hover .ep-cap-rowassign { opacity: 1; }
.ep-cap-rowassign:hover { background: #eef2ff; border-color: #6366f1; }
/* The same green as the board's Assign — one act, one colour. Still quiet
   until the row is hovered: one of these per person is a lot of buttons. */
.ep-cap-rowassign { color: #15803d; border-color: #bbe7cc; }
.ep-cap-rowassign:hover { background: #f0fdf4; border-color: #15803d; color: #15803d; }
/* ⚠️ Focus must NOT depend on the row hover — a keyboard user never
   triggers it, so without this the button is invisible while focused. */
.ep-cap-rowassign:focus-visible {
  opacity: 1; outline: none; box-shadow: 0 0 0 3px #e0e7ff; border-color: #6366f1;
}

/* ── WHAT A ROW IS AIMED AT ─────────────────────────────────────
   The deliverables and the outcome, set in the allocate popup and read
   back here under the work stream they belong to. A row with none says
   nothing extra: planning at work-stream level is a legitimate week, and
   an "unaimed" badge on every row would be noise on most of them. */
.ep-cap-aims {
  display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px;
}
.ep-cap-aim {
  font-style: normal; font-size: 10.5px; font-weight: 650; color: #3730a3;
  background: #eef2ff; border-radius: 5px; padding: 1px 6px;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ep-cap-outcome {
  display: block; margin-top: 3px; font-size: 10.5px; color: #64748b;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ep-cap-outcome::before { content: '→ '; color: #94a3b8; }
/* ── do the slices add up? ──────────────────────────────────────
   One grey line under the pace strip, and only once somebody has a
   slice. Same weight as the pace: context for the board, not a tile. */
.ep-cap-bstrip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 6px; padding: 7px 12px; border-radius: 10px;
  background: #f8fafc; border: 1px solid var(--ep-border, #e2e8f0);
  font-size: 12px;
}
.ep-cap-bstrip-l {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #94a3b8;
}
.ep-cap-bstrip-v { color: #475569; }
.ep-cap-bstrip-v b { color: #1e293b; font-weight: 700; }
.ep-cap-bstrip-s { color: #94a3b8; }
.ep-cap-bstrip-w { font-weight: 700; color: #b45309; }
.ep-cap-bstrip.is-over { background: #fffbeb; border-color: #fcd34d; }
/* The breakdown sits UNDER its heading — indented, quieter, and with no
   rule between siblings, so a person's rows read as one block. */
.ep-cap-sub > td:first-child { padding-left: 34px; }
.ep-cap-sub > td { border-top: 0; }
.ep-cap-subwho { display: inline-flex; align-items: center; }
.ep-cap-subwho .ep-cap-tier { margin-left: 0; }
.ep-cap-subdash { font-size: 12px; color: #94a3b8; }
.ep-cap-tier {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  background: #eef2ff; color: #4338ca; font-size: 11px; font-weight: 600;
}
.ep-cap-sel {
  width: 100%; max-width: 240px; padding: 5px 8px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--ep-border, #e2e8f0); border-radius: 8px; background: #fff;
}
.ep-cap-sel--rate { max-width: 190px; font-weight: 600; }
.ep-cap-sel--rate.is-missing { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
/* Right-aligned so the column reads as a number column, and wide enough
   that "10.25" is not clipped by the spinner. */
.ep-cap-hrs {
  width: 74px; padding: 5px 7px; font: inherit; font-size: 13px; font-weight: 600;
  text-align: right; border: 1px solid var(--ep-border, #e2e8f0); border-radius: 8px;
}
.ep-cap-hrs:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 2px #e0e7ff; }
.ep-cap-del {
  width: 26px; height: 26px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: #cbd5e1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ep-cap-del:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.ep-cap-unaimed, .ep-cap-norate { color: #94a3b8; font-style: italic; font-size: 12.5px; }
.ep-cap-ok { color: #059669; font-weight: 600; }
.ep-cap-short { color: #d97706; font-weight: 600; }
.ep-cap-ahead { color: #2563eb; font-weight: 600; }
.ep-cap-total td { border-top: 2px solid var(--ep-border, #e2e8f0); background: #f8fafc; }

/* ── coverage ───────────────────────────────────────────────── */
/* Folded shut. This was a wall of amber chips — twelve of them on a
   real project, louder than the week board above it and saying nothing
   until you had read every name. The COUNT is the signal; the names are
   what you open when the count looks wrong. */
.ep-cap-cover {
  border: 1px solid var(--ep-border, #e2e8f0); border-radius: 12px;
  background: #fff; padding: 11px 14px;
}
.ep-cap-cover.is-ok { background: #f8fafc; }
.ep-cap-cover-sum { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #059669; }
.ep-cap-cover summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12.5px; color: #475569; list-style: none;
}
.ep-cap-cover summary::-webkit-details-marker { display: none; }
.ep-cap-cover summary b { font-weight: 700; color: #b45309; }
.ep-cap-cover-more {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: #6366f1;
}
.ep-cap-cover details[open] .ep-cap-cover-more { color: #94a3b8; }
/* Scoped to details[open] on purpose. Author `display` on a child of a shut
   <details> is the same family of trap as `display` beating the hidden
   attribute, and scoping it costs nothing.
   ⚠️ When measuring the fold, measure the <details>, NOT the list: the shut
   content keeps a getBoundingClientRect box (content-visibility: hidden is
   not display: none), so the list rect reads ~26px tall while the details
   itself is exactly as tall as its summary. */
.ep-cap-cover details[open] .ep-cap-cover-list {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px;
}
.ep-cap-cold {
  padding: 4px 11px; border: 1px solid var(--ep-border, #e2e8f0); border-radius: 999px;
  background: #fff; color: #64748b; font: inherit; font-size: 12px; cursor: pointer;
}
.ep-cap-cold:hover { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }

@media (max-width: 640px) {
  .ep-cap-find { flex: 1 1 100%; }
  .ep-cap-sel, .ep-cap-pick { max-width: 100%; }
  .ep-cap-rrow { flex-wrap: wrap; }
}
/* ══ EVERY RATE A PERSON BILLS AT HERE ═══════════════════════════════════
   Tyler, 2026-08-17: *"It can say both rates, but don't only give them one."*
   The team card used to print the default tier alone, so a two-rate
   consultant's second rate existed only inside the ⋯ popover. */
.ep-cap-tiers { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.ep-cap-tiers em {
  font-style: normal; font-size: 11px; font-weight: 650; color: #475569;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 100px;
  padding: 2px 8px; white-space: nowrap;
}
.ep-cap-tiers em b { font-weight: 800; color: #0f172a; }
/* The pre-filling one, so the card says which rate Log Time starts on. */
.ep-cap-tiers em.is-def { background: #eef3ff; border-color: #c7d7fe; color: #1d4ed8; }
.ep-cap-tiers em.is-def b { color: #1d4ed8; }

/* ★ inside a tier row — "pre-fill THIS one". Only drawn once a person holds
   more than one tier, because with one there is nothing to choose. It is a
   span with role=button INSIDE a <button>: nesting real buttons is invalid
   HTML and the outer click handler skips anything inside [data-def]. */
.ep-rate-one-star {
  margin-left: 6px; font-size: 13px; line-height: 1; color: #cbd5e1;
  cursor: pointer; user-select: none;
}
.ep-rate-one-star:hover { color: #f59e0b; }
.ep-rate-one-star.is-on { color: #f59e0b; }
.ep-rate-one.is-def { box-shadow: inset 2px 0 0 #f59e0b; }
/* == THE ROW DETAIL, FOLDED UNDER THE SPREADSHEET =====================
   The plan is drawn by wk-plan-sheet.js now (people down the left, work
   streams across the top). This table is what a grid cell has no room for
   -- what a row BILLS AT and which deliverable it is aimed at -- so it is
   kept and shut rather than deleted with the capability inside it.
   See the tombstone beside `.ep-cap-none--big` in engagement-profile.js. */
.ep-cap-rowfold { margin-top: 12px; }
.ep-cap-rowfold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  padding: 9px 13px; border: 1px solid var(--ep-border, #e2e8f0); border-radius: 10px;
  background: #f8fafc; font-size: 12px; color: #64748b;
  transition: border-color .14s, color .14s;
}
.ep-cap-rowfold > summary::-webkit-details-marker { display: none; }
.ep-cap-rowfold > summary::before {
  content: ''; width: 0; height: 0; flex: 0 0 auto; margin-right: 2px;
  border: 4px solid transparent; border-left-color: #94a3b8;
  transition: transform .16s;
}
.ep-cap-rowfold[open] > summary::before { transform: rotate(90deg) translateX(-1px); }
.ep-cap-rowfold > summary:hover { border-color: #93c5fd; color: #2563eb; }
.ep-cap-rowfold > summary b { font-weight: 800; color: #0f172a; }
.ep-cap-rowfold[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ep-cap-rowfold .ep-table-wrap { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }