/* ══════════════════════════════════════════════════════════════
   WORK HUB — Universal Detail Popup System
   ══════════════════════════════════════════════════════════════
   Prefix: wdp-  (work-detail-popup)
   ══════════════════════════════════════════════════════════════ */

/* ── Back-navigation button (injected when nav stack has history) ── */
.wdp-nav-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07);
  color: #94a3b8; cursor: pointer; margin-right: 6px;
  transition: background .12s, color .12s, border-color .12s;
}
.wdp-nav-back:hover { background: rgba(255,255,255,.14); color: #e2e8f0; border-color: rgba(255,255,255,.3); }
.wdp-nav-back svg { width: 16px; height: 16px; }

/* Light-header popups (program, client, etc.) */
.wdp-header .wdp-nav-back {
  border-color: #e2e8f0; background: #f8fafc; color: #64748b;
}
.wdp-header .wdp-nav-back:hover { background: #eff6ff; color: #3A86FF; border-color: #3A86FF; }

/* ── Overlay Backdrop ────────────────────────────────────── */
.wdp-overlay {
  position: fixed; inset: 0; z-index: 55000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .3s cubic-bezier(.2,.8,.2,1), visibility 0s .3s;
}
/* The tint + blur live on a ::before layer, NOT on .wdp-overlay itself.
   The popup (.wdp-popup) is a DOM child of .wdp-overlay. If the backdrop-filter
   sat on the overlay, Chromium folds the popup's own content into that blur on
   first composite — the popup opens blurry and only snaps sharp on a second
   click (a fresh repaint). Painting the blur on a sibling ::before (source-
   ordered before .wdp-popup, so it paints underneath) keeps the popup out of
   the filtered layer entirely and it renders crisp on the first open. */
.wdp-overlay::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.wdp-overlay.is-open {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity .3s cubic-bezier(.2,.8,.2,1), visibility 0s 0s;
}

/* Stacked layer — universal compact vCard for any name/company click.
   Light backdrop so the underlying popup (if any) stays visible. */
.wdp-overlay--stacked::before {
  background: rgba(15,23,42,.22);
  backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
}
/* Doubled-up class selector raises specificity above the base .wdp-popup
   rule (declared later in the file), which otherwise re-imposed its
   width:94vw / height:90vh / max-width:1360px and blew the stacked
   vCard out to nearly fullscreen. */
.wdp-popup.wdp-popup--stacked {
  width: 92vw; max-width: 540px;
  height: auto; max-height: 86vh;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(15,23,42,.32), 0 0 0 1px rgba(15,23,42,.06);
  background: #fff;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  /* Slide + fade only — no scale. Animating scale on a text-bearing element
     rasterizes the glyphs at the scaled-down size, so the popup reads blurry
     for the duration of the entrance. translateY is GPU-cheap and crisp. */
  transform: translateY(10px);
  opacity: 0;
  transition:
    transform .26s cubic-bezier(.22, 1, .36, 1),
    opacity   .2s cubic-bezier(.22, 1, .36, 1);
  transform-origin: center center;
}
.wdp-overlay--stacked.is-open .wdp-popup.wdp-popup--stacked {
  transform: none; /* see note above — avoid scale(1) so content stays crisp */
  opacity: 1;
}
.wdp-popup.wdp-popup--stacked:has(.wdp-vcard.is-staff) {
  max-width: 900px;
  min-height: min(80vh, 800px); max-height: 94vh;
}

/* vCard — compact identity card rendered into the stacked popup.
   Header band has a subtle tinted backdrop derived from the avatar color
   (set via --vc-tint inline) so each person/company feels distinct without
   shouting. Action chips sit under the name; a 4-up stat strip anchors the
   middle; then collapsible sections list real linked work below. */
.wdp-vcard { display: flex; flex-direction: column; min-height: 0; }
.wdp-vcard-close {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,.85); color: #475569; border: 0;
  font-size: 16px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  backdrop-filter: blur(4px);
  transition: background .14s ease, color .14s ease, transform .14s ease;
  z-index: 2;
}
.wdp-vcard-close:hover { background: #fee2e2; color: #dc2626; transform: rotate(90deg); }

.wdp-vcard-head {
  position: relative;
  padding: 20px 48px 16px 22px;
  background: linear-gradient(180deg, var(--vc-tint, #f1f5f9) 0%, #ffffff 100%);
  border-bottom: 1px solid #eef2f7;
}
.wdp-vcard-id-row { display: flex; align-items: center; gap: 12px; }
.wdp-vcard-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center;
  color: #fff; font-size: 18px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(15,23,42,.18), 0 0 0 3px rgba(255,255,255,.7);
}
.wdp-vcard-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wdp-vcard-avatar.is-fallback img { display: none; }
.wdp-vcard-id { flex: 1; min-width: 0; }
.wdp-vcard-name {
  font-size: 16px; font-weight: 700; color: #0f172a;
  letter-spacing: -.01em; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wdp-vcard-sub {
  margin-top: 2px; font-size: 12px; color: #475569; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wdp-vcard-badge {
  display: inline-block; margin-top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: #1d4ed8; background: rgba(29,78,216,.10);
  padding: 2px 7px; border-radius: 100px; text-transform: uppercase;
}

/* Action chip row — small icon buttons for primary contact channels. */
.wdp-vcard-actions {
  display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap;
}
.wdp-vcard-act {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 650; color: #1e293b;
  background: rgba(255,255,255,.95); border: 1px solid #e2e8f0;
  padding: 7px 13px; border-radius: 100px; cursor: pointer;
  text-decoration: none; user-select: none;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .12s ease, box-shadow .14s ease;
}
.wdp-vcard-act:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.wdp-vcard-act:hover {
  background: #1d4ed8; color: #fff; border-color: #1d4ed8;
  transform: translateY(-1px); box-shadow: 0 6px 14px rgba(29,78,216,.22);
}
.wdp-vcard-act svg { width: 13px; height: 13px; }
.wdp-vcard-act.is-disabled {
  opacity: .42; pointer-events: none;
}

/* Stat strip — 4 mini-tiles, click-through where applicable. */
.wdp-vcard-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 12px 14px;
  background: #fbfcfe;
  border-bottom: 1px solid #eef2f7;
}
.wdp-vcard-stat {
  text-align: center;
  padding: 6px 4px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #eef2f7;
  cursor: default;
  transition: background .14s ease, border-color .14s ease, transform .12s ease;
}
.wdp-vcard-stat.is-clickable { cursor: pointer; }
.wdp-vcard-stat.is-clickable:hover {
  background: #eff6ff; border-color: #bfdbfe; transform: translateY(-1px);
}
.wdp-vcard-stat-val {
  display: block; font-size: 16px; font-weight: 800; color: #0f172a;
  letter-spacing: -.02em; line-height: 1.15;
}
.wdp-vcard-stat-val.is-warn { color: #d97706; }
.wdp-vcard-stat-val.is-crit { color: #dc2626; }
.wdp-vcard-stat-val.is-ok   { color: #16a34a; }
.wdp-vcard-stat-lbl {
  display: block; font-size: 9.5px; font-weight: 700;
  color: #94a3b8; letter-spacing: .05em; text-transform: uppercase;
  margin-top: 2px;
}

/* Body — scrollable list of compact sections. */
.wdp-vcard-body {
  padding: 0;
  display: flex; flex-direction: column;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
.wdp-vcard-section { border-bottom: 1px solid #f1f5f9; }
.wdp-vcard-section:last-child { border-bottom: 0; }
.wdp-vcard-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  font-size: 10.5px; font-weight: 800; color: #475569;
  letter-spacing: .06em; text-transform: uppercase;
  background: #f8fafc; cursor: pointer; user-select: none;
  transition: background .14s ease, color .14s ease;
}
.wdp-vcard-section-head:hover { background: #f1f5f9; color: #0f172a; }
.wdp-vcard-section-head .wdp-vcard-section-count {
  font-size: 10px; font-weight: 800; color: #fff; background: #94a3b8;
  padding: 1px 7px; border-radius: 100px; letter-spacing: 0;
}
.wdp-vcard-section-head .wdp-vcard-section-caret {
  margin-left: auto; transition: transform .18s ease; color: #94a3b8;
}
.wdp-vcard-section.is-collapsed .wdp-vcard-section-caret { transform: rotate(-90deg); }
.wdp-vcard-section.is-collapsed .wdp-vcard-section-body { display: none; }

.wdp-vcard-section-body { padding: 5px 16px 10px; }
.wdp-vcard-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px; color: #0f172a;
  cursor: pointer;
  transition: background .12s ease;
}
.wdp-vcard-item:hover { background: #eff6ff; }
.wdp-vcard-item-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #94a3b8; flex-shrink: 0;
}
.wdp-vcard-item-dot.is-red    { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.16); }
.wdp-vcard-item-dot.is-amber  { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.16); }
.wdp-vcard-item-dot.is-green  { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.16); }
.wdp-vcard-item-dot.is-blue   { background: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.16); }
.wdp-vcard-item-main {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.wdp-vcard-item-meta {
  font-size: 10.5px; color: #64748b; font-weight: 600;
  flex-shrink: 0;
}
.wdp-vcard-item-meta.is-overdue { color: #dc2626; }

/* ══ THE WEEK ══════════════════════════════════════════════════════════
   The body of a staff card: a capacity block (headline hours + one segmented
   bar + the two numbers the bar's fill and remainder stand for), then the plan
   grouped by project, then the deliverables. Bar segment, plan row and
   deliverable row share one color per project, so the bar needs no legend. */
.wdp-vcard-cap { padding: 16px 22px 18px; }

/* A section head can carry one action chip (the Plan button). It takes the
   right edge, so the caret gives up its auto margin when one is present. */
.wdp-vcard-section-act {
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid #dbeafe; border-radius: 999px;
  background: #eff6ff;
  font-family: inherit; font-size: 10px; font-weight: 800;
  color: #1d4ed8; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.wdp-vcard-section-act:hover { background: #dbeafe; border-color: #93c5fd; }
.wdp-vcard-section-head:has(.wdp-vcard-section-act) .wdp-vcard-section-caret { margin-left: 6px; }

.wdp-vcard-wk-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 9px;
}
.wdp-vcard-wk-title {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  font-size: 13px; font-weight: 800; color: #0f172a; letter-spacing: -.01em;
}
.wdp-vcard-wk-range {
  font-size: 10.5px; font-weight: 700; color: #94a3b8;
  letter-spacing: .02em; text-transform: uppercase;
}
.wdp-vcard-wk-hero {
  display: flex; align-items: baseline; gap: 4px; flex-shrink: 0;
}
.wdp-vcard-wk-hero-v { font-size: 21px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.wdp-vcard-wk-hero-l { font-size: 11px; font-weight: 700; color: #94a3b8; }
.wdp-vcard-wk-hero.is-ok   .wdp-vcard-wk-hero-v { color: #16a34a; }
.wdp-vcard-wk-hero.is-over .wdp-vcard-wk-hero-v { color: #dc2626; }
.wdp-vcard-wk-hero.is-none .wdp-vcard-wk-hero-v { color: #cbd5e1; }

.wdp-vcard-wk-bar {
  display: flex; gap: 2px;
  height: 9px; border-radius: 999px; overflow: hidden;
  background: #e2e8f0;
}
.wdp-vcard-wk-seg { display: block; height: 100%; min-width: 2px; }
.wdp-vcard-wk-seg.is-free { background: #e2e8f0; }
/* An overflowing week rescales to fit, so the bar looks full rather than
   overrun — the ring is what says "past capacity" at bar level, since the
   segment widths no longer can. */
.wdp-vcard-wk-bar.is-over { box-shadow: 0 0 0 2px rgba(220, 38, 38, .30); }

/* Allocated and open, one number each. The bar above shows the split; these
   say what the two halves of it are worth, which a bar can't. */
.wdp-vcard-cap-nums {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin-top: 10px;
}
.wdp-vcard-cap-num { display: flex; flex-direction: column; gap: 1px; }
.wdp-vcard-cap-num b {
  font-size: 15px; font-weight: 800; color: #0f172a;
  line-height: 1.1; letter-spacing: -.02em;
}
.wdp-vcard-cap-num span {
  font-size: 9.5px; font-weight: 700; color: #94a3b8;
  letter-spacing: .05em; text-transform: uppercase;
}
.wdp-vcard-cap-num.is-free b { color: #16a34a; }
.wdp-vcard-cap-num.is-over b,
.wdp-vcard-cap-num.is-over span { color: #dc2626; }
.wdp-vcard-wk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 6px;
  margin: 0 -6px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s ease;
}
.wdp-vcard-wk-row + .wdp-vcard-wk-row { border-top: 1px solid #f1f5f9; }
.wdp-vcard-wk-row:hover { background: #f8fafc; }
.wdp-vcard-wk-row.is-static { cursor: default; }
.wdp-vcard-wk-row.is-static:hover { background: transparent; }
.wdp-vcard-wk-swatch {
  width: 4px; align-self: stretch; min-height: 30px;
  border-radius: 999px; flex-shrink: 0;
}
.wdp-vcard-wk-main { flex: 1; min-width: 0; }
.wdp-vcard-wk-name {
  display: block;
  font-size: 12.5px; font-weight: 700; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wdp-vcard-wk-sub {
  display: flex; align-items: center; gap: 5px;
  margin-top: 3px; min-width: 0;
  font-size: 10.5px; font-weight: 600; color: #94a3b8;
}
.wdp-vcard-wk-where {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wdp-vcard-wk-due { flex-shrink: 0; }
.wdp-vcard-wk-due.is-overdue { color: #dc2626; font-weight: 700; }
.wdp-vcard-wk-dot { color: #cbd5e1; flex-shrink: 0; }
.wdp-vcard-wk-hrs {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  flex-shrink: 0; text-align: right;
}
.wdp-vcard-wk-hrs b { font-size: 13px; font-weight: 800; color: #0f172a; }
.wdp-vcard-wk-hrs span { font-size: 9.5px; font-weight: 700; color: #94a3b8; }
.wdp-vcard-wk-hrs.is-unset b { color: #cbd5e1; }

.wdp-vcard-wk-empty {
  display: flex; flex-direction: column; gap: 3px;
  padding: 18px 4px; text-align: center;
}
.wdp-vcard-wk-empty b    { font-size: 12.5px; font-weight: 700; color: #64748b; }
.wdp-vcard-wk-empty span { font-size: 11px; font-weight: 600; color: #94a3b8; }

.wdp-vcard-wk-foot {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px; font-weight: 700; color: #1d4ed8;
  cursor: pointer;
}
.wdp-vcard-wk-foot:hover { text-decoration: underline; }

.wdp-vcard-pri {
  flex-shrink: 0;
  padding: 2px 6px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: #f1f5f9; color: #64748b;
}
.wdp-vcard-pri.is-crit { background: #fee2e2; color: #b91c1c; }
.wdp-vcard-pri.is-high { background: #ffedd5; color: #c2410c; }
.wdp-vcard-pri.is-med  { background: #dbeafe; color: #1d4ed8; }
.wdp-vcard-pri.is-low  { background: #f1f5f9; color: #64748b; }
.wdp-vcard-pri.is-none { background: #f8fafc; color: #94a3b8; }

.wdp-vcard-detail-row {
  display: grid; grid-template-columns: 70px 1fr;
  gap: 10px; align-items: baseline;
  padding: 6px 16px;
  font-size: 12.5px;
}
.wdp-vcard-detail-row + .wdp-vcard-detail-row {
  border-top: 1px solid #f5f7fa;
}
.wdp-vcard-detail-row .wdp-vcard-lbl {
  font-size: 10px; font-weight: 700; color: #94a3b8;
  letter-spacing: .04em; text-transform: uppercase;
}
.wdp-vcard-val { color: #0f172a; word-break: break-word; line-height: 1.35; }
.wdp-vcard-val--link {
  color: #1d4ed8; text-decoration: none;
}
.wdp-vcard-val--link:hover { text-decoration: underline; }

/* Company chip button — logo + name + go-chevron, reads as a tappable card
   rather than a link. Opens the company vCard on top. */
.wdp-vcard-cobtn {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  padding: 5px 9px 5px 5px;
  border: 1px solid #e2e8f0; border-radius: 100px;
  background: #fff; cursor: pointer;
  font: inherit; color: #0f172a; text-align: left;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .12s ease;
}
.wdp-vcard-cobtn:hover {
  background: #f8fafc; border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15,23,42,.10);
  transform: translateY(-1px);
}
.wdp-vcard-cobtn:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.wdp-vcard-cobtn-logo {
  width: 24px; height: 24px; border-radius: 50%;
  flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center;
  background: #fff; border: 1px solid #eef2f7;
  font-size: 9px; font-weight: 800; color: #fff; line-height: 1;
}
.wdp-vcard-cobtn-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wdp-vcard-cobtn-logo.is-fallback { background: #64748b; border-color: transparent; }
.wdp-vcard-cobtn-logo.is-fallback img { display: none; }
.wdp-vcard-cobtn-name {
  font-size: 12.5px; font-weight: 650; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wdp-vcard-cobtn-go {
  width: 13px; height: 13px; flex-shrink: 0; margin-left: 2px;
  color: #94a3b8; transition: transform .14s ease, color .14s ease;
}
.wdp-vcard-cobtn:hover .wdp-vcard-cobtn-go { color: #1d4ed8; transform: translateX(2px); }

.wdp-vcard-section-empty {
  padding: 12px 16px;
  font-size: 12px; color: #94a3b8; font-style: italic;
}

/* Footer — primary action only. Continue to CRM hand-off. */
.wdp-vcard-foot {
  padding: 12px 20px;
  display: flex; justify-content: space-between; gap: 8px;
  border-top: 1px solid #eef2f7;
  background: #fbfcfe;
}
.wdp-vcard-foot .wdp-btn { transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.wdp-vcard-foot .wdp-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(29,78,216,.22); }
.wdp-vcard-foot-link {
  font-size: 11.5px; font-weight: 600; color: #64748b;
  background: transparent; border: 0; cursor: pointer;
  align-self: center; padding: 0 6px;
  transition: color .14s ease;
}
.wdp-vcard-foot-link:hover { color: #1d4ed8; }

.wdp-vcard-empty {
  padding: 28px 20px; text-align: center;
  font-size: 13px; color: #94a3b8;
}

@media (prefers-reduced-motion: reduce) {
  .wdp-popup.wdp-popup--stacked,
  .wdp-vcard-close,
  .wdp-vcard-item,
  .wdp-vcard-act,
  .wdp-vcard-stat,
  .wdp-vcard-section-caret,
  .wdp-vcard-foot .wdp-btn { transition: none !important; }
}

/* ── Client / contact avatar (used inside grant Overview & People) ──
   The avatar div previously had no size — when the source logo was a
   600px+ company image it took the full card width. Constrain to a
   clean profile-card disc. */
.ep-team-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(15,23,42,.12);
}
.ep-team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-team-avatar--lg { width: 64px; height: 64px; font-size: 19px; }

/* ── Main Popup Panel ────────────────────────────────────── */
.wdp-popup {
  position: relative;
  width: 94vw; max-width: 1360px;
  height: 90vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
  overflow: hidden;
  /* Slide + fade only — no scale (see stacked-popup note): scaling text
     rasterizes it blurry for the whole entrance animation. */
  transform: translateY(24px);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.wdp-overlay.is-open .wdp-popup {
  /* `transform: none` (not scale(1)) drops the GPU compositing layer so the
     content re-rasterizes crisp — scale(1) leaves it rasterized at the
     pre-animation size and the popup reads blurry until a later repaint. */
  transform: none;
  opacity: 1;
}

/* ── Header ──────────────────────────────────────────────── */
.wdp-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  background: #fafbfc;
}
.wdp-header-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.wdp-header-info { flex: 1; min-width: 0; }
.wdp-header-title {
  font-size: 17px; font-weight: 650; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wdp-header-sub {
  font-size: 12px; color: #64748b; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wdp-status-pill {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 10px; border-radius: 20px;
  background: #f1f5f9; color: #475569;
}
.wdp-status-pill.is-active { background: #dcfce7; color: #15803d; }
.wdp-status-pill.is-risk { background: #fef9c3; color: #a16207; }
.wdp-status-pill.is-critical { background: #fee2e2; color: #b91c1c; }
.wdp-status-pill.is-completed { background: #e0e7ff; color: #4338ca; }

.wdp-close {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: transparent; color: #94a3b8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.wdp-close:hover { background: #f1f5f9; color: #475569; }
.wdp-close svg { width: 18px; height: 18px; }

/* ── KPI Strip ───────────────────────────────────────────── */
.wdp-kpi-strip {
  display: flex; gap: 1px; background: #e2e8f0;
  border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
}
.wdp-kpi {
  flex: 1; padding: 12px 16px; background: #fff;
  text-align: center; min-width: 0;
}
.wdp-kpi-val {
  font-size: 18px; font-weight: 700; color: #0f172a;
  line-height: 1.1;
}
.wdp-kpi-lbl {
  font-size: 11px; color: #94a3b8; font-weight: 500;
  margin-top: 2px; text-transform: uppercase; letter-spacing: .3px;
}
.wdp-kpi-sub {
  font-size: 10px; color: #94a3b8; margin-top: 1px;
}

/* ── Tab Bar ─────────────────────────────────────────────── */
.wdp-tab-bar {
  display: flex; gap: 0; padding: 0 24px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0; background: #fff;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.wdp-tab {
  padding: 10px 16px; font-size: 13px; font-weight: 500;
  color: #64748b; border: none; background: none;
  cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.wdp-tab:hover { color: #334155; }
.wdp-tab.is-active {
  color: #6366f1; border-bottom-color: #6366f1; font-weight: 600;
}
.wdp-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; border-radius: 8px;
  background: #e0e7ff; color: #6366f1; font-size: 10px; font-weight: 700;
  padding: 0 4px; margin-left: 5px;
}

/* ── Body ────────────────────────────────────────────────── */
.wdp-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 0;
}
.wdp-panel {
  display: none; padding: 24px;
  animation: wdpFadeIn .2s ease;
}
.wdp-panel.is-active { display: block; }
@keyframes wdpFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Section headers inside panels ───────────────────────── */
.wdp-section { margin-bottom: 24px; }
.wdp-section-head {
  font-size: 13px; font-weight: 650; color: #334155;
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}

/* ── Scope / Statement of Work: polished document look ─────── */
.wdp-plan-panel { color: #1e293b; }
.wdp-plan-panel .wdp-section { margin-bottom: 22px; }
.wdp-plan-panel .wdp-section-head {
  position: relative; padding-left: 12px;
  color: #0f172a; border-bottom-color: #eef2f7;
}
.wdp-plan-panel .wdp-section-head::before {
  content: ''; position: absolute; left: 0; top: 1px; bottom: 7px;
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
}
.wdp-plan-panel .wdp-plan-prose { color: #334155; }

/* Connected clickable rows (Deliverables / Milestones / Team) */
.wdp-scope-linklist { list-style: none; margin: 4px 0 0; padding: 0; }
.wdp-scope-linkrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.wdp-scope-linkrow + .wdp-scope-linkrow { margin-top: 2px; }
/* Front cover on a deliverable's scope row. Only deliverables have one, so the
   row keeps its normal shape when it's absent. */
.wdp-scope-linkrow__cover {
  flex: 0 0 auto; width: 32px; height: 24px; padding: 0; cursor: zoom-in;
  border: 1px solid #cbd5e1; border-radius: 4px; overflow: hidden; background: #f1f5f9;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wdp-scope-linkrow__cover:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(15, 23, 42, .2); }
.wdp-scope-linkrow__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The row is space-between; without this the name would strand itself in the
   middle once a cover makes it a THREE-child row. Growing the name keeps the
   meta pinned right and is a no-op on the two-child rows. */
/* Name, plus an optional description line beneath it. The DESCRIPTION CANNOT GO
   IN `__meta` — that is flex-shrink: 0 for the status pill, so prose in there is
   unshrinkable, steals the row, and squeezes the name down to a one-word-per-line
   column that the meta then overlaps. It lives here, in the growing column. */
.wdp-scope-linkrow__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wdp-scope-linkrow__name { font-weight: 550; color: #1e293b; font-size: 14px; }
.wdp-scope-linkrow__sub { font-size: 12.5px; font-weight: 400; color: #64748b; line-height: 1.45; }
.wdp-scope-linkrow__meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wdp-scope-linkrow__chev {
  color: #cbd5e1; font-size: 18px; line-height: 1; font-weight: 700;
  transition: transform .12s ease, color .12s ease;
}
.wdp-scope-linkrow.is-clickable { cursor: pointer; }
.wdp-scope-linkrow.is-clickable:hover { background: #f8fafc; border-color: #e5e9f0; }
.wdp-scope-linkrow.is-clickable:hover .wdp-scope-linkrow__name { color: #4f46e5; }
.wdp-scope-linkrow.is-clickable:hover .wdp-scope-linkrow__chev { color: #6366f1; transform: translateX(3px); }
.wdp-scope-linkrow.is-clickable:active { transform: scale(.997); }
.wdp-scope-linkrow.is-clickable:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
/* Print: strip interactive affordances */
body.wdp-print-mode .wdp-scope-linkrow__chev { display: none; }
body.wdp-print-mode .wdp-scope-linkrow { padding: 6px 2px; border-radius: 0; border-bottom: 1px solid #eef2f7; }

/* Deliverables grouped by work stream — collapsed <details> blocks */
.wdp-scope-groups { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
.wdp-scope-group { border: 1px solid #eef1f6; border-radius: 10px; overflow: hidden; background: #fff; }
.wdp-scope-group[open] { border-color: #e5e9f0; }
.wdp-scope-group__summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 12px; list-style: none; user-select: none;
  background: #fafbfc; transition: background .12s ease;
}
.wdp-scope-group__summary::-webkit-details-marker { display: none; }
.wdp-scope-group__summary:hover { background: #f4f6fa; }
.wdp-scope-group[open] > .wdp-scope-group__summary { border-bottom: 1px solid #eef1f6; }
.wdp-scope-group__chev {
  color: #94a3b8; font-size: 13px; line-height: 1; font-weight: 700;
  transition: transform .12s ease; flex-shrink: 0;
}
.wdp-scope-group[open] > .wdp-scope-group__summary .wdp-scope-group__chev { transform: rotate(90deg); }
.wdp-scope-group__name { font-weight: 650; color: #1e293b; font-size: 13.5px; flex: 1; }
.wdp-scope-group__count {
  font-size: 12px; font-weight: 600; color: #64748b;
  background: #eef2f7; border-radius: 999px; padding: 2px 9px; flex-shrink: 0;
}
.wdp-scope-group .wdp-scope-linklist { margin: 0; padding: 6px 8px; }
/* Print: expand every group and drop the affordances */
body.wdp-print-mode .wdp-scope-group { border: none; }
body.wdp-print-mode .wdp-scope-group > .wdp-scope-linklist { display: block !important; }
body.wdp-print-mode .wdp-scope-group__chev,
body.wdp-print-mode .wdp-scope-group__count { display: none; }
body.wdp-print-mode .wdp-scope-group__summary { background: none; padding: 8px 2px 2px; font-weight: 700; }

/* ── Detail Grid (two-column key-value) ──────────────────── */
.wdp-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.wdp-detail-row {
  display: flex; gap: 8px; align-items: baseline;
  padding: 4px 0;
}
.wdp-detail-label {
  font-size: 12px; color: #94a3b8; font-weight: 500;
  min-width: 100px; flex-shrink: 0;
}
.wdp-detail-value {
  font-size: 13px; color: #0f172a; font-weight: 500;
}

/* ── Data Tables inside popup ────────────────────────────── */
.wdp-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px;
}
.wdp-table thead th {
  text-align: left; font-size: 11px; font-weight: 600;
  color: #94a3b8; text-transform: uppercase; letter-spacing: .4px;
  padding: 8px 12px; border-bottom: 1px solid #e2e8f0;
  background: #fafbfc; position: sticky; top: 0; z-index: 1;
}
.wdp-table tbody tr {
  transition: background .12s;
}
.wdp-table tbody tr:hover { background: #f8fafc; }
.wdp-table tbody td {
  padding: 10px 12px; border-bottom: 1px solid #f1f5f9;
  color: #334155; vertical-align: middle;
}
.wdp-table tbody tr:last-child td { border-bottom: none; }
.wdp-table .wdp-cell-primary { font-weight: 600; color: #0f172a; }
.wdp-table .wdp-cell-accent { color: #6366f1; font-weight: 600; }
.wdp-table .wdp-cell-muted { color: #94a3b8; font-size: 12px; }

/* ── Clickable rows ──────────────────────────────────────── */
.wdp-table tbody tr[data-row-id] { cursor: pointer; }
.wdp-table tbody tr[data-row-id]:active { background: #eef2ff; }

/* ── Progress Bar ────────────────────────────────────────── */
.wdp-progress { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.wdp-progress-fill { height: 100%; border-radius: 3px; transition: width .4s cubic-bezier(.2,.8,.2,1); }

/* ── Health Chip Row ─────────────────────────────────────── */
.wdp-health-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.wdp-health-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 500; background: #f1f5f9; color: #475569;
}
.wdp-health-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.wdp-health-chip.is-green .wdp-health-dot { background: #22c55e; }
.wdp-health-chip.is-yellow .wdp-health-dot { background: #f59e0b; }
.wdp-health-chip.is-red .wdp-health-dot { background: #ef4444; }
.wdp-health-chip.is-gray .wdp-health-dot { background: #94a3b8; }

/* ── Stat Cards Row — visual parity with .time-sc / .fin-kpi
   (Time & Financials pages). White surface, 12px radius, hover lift. */
.wdp-stat-row {
  display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap;
}
.wdp-stat-card {
  flex: 1 1 140px; min-width: 130px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 4px;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.wdp-stat-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}
.wdp-stat-val {
  font-size: 22px; font-weight: 700; color: #0f172a;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.wdp-stat-lbl {
  font-size: 11px; color: #64748b; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.wdp-stat-sub {
  font-size: 11.5px; color: #475569;
  font-variant-numeric: tabular-nums;
}

/* ── Person Avatar Rows ──────────────────────────────────── */
.wdp-person-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
}
.wdp-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e0e7ff; color: #6366f1;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.wdp-person-name { font-size: 13px; font-weight: 600; color: #0f172a; }
.wdp-person-meta { font-size: 12px; color: #64748b; }

/* ── Empty State ─────────────────────────────────────────── */
.wdp-empty {
  text-align: center; padding: 40px 20px;
  color: #94a3b8; font-size: 13px;
}
.wdp-empty-icon { font-size: 28px; margin-bottom: 8px; opacity: .6; }

/* ── Action Bar (bottom of popup) ────────────────────────── */
.wdp-actions {
  display: flex; gap: 8px; padding: 12px 24px;
  border-top: 1px solid #e2e8f0; flex-shrink: 0;
  background: #fafbfc;
}
/* Someone else's time entry: the footer states WHY there is nothing to press,
   instead of showing a disabled Edit or an empty bar. */
.wdp-actions--locked { align-items: center; }
.wdp-locknote {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: #64748b;
}
.wdp-locknote::before {
  content: ''; width: 12px; height: 9px; flex-shrink: 0;
  border: 1.6px solid #94a3b8; border-radius: 2px 2px 3px 3px;
  box-shadow: inset 0 -2px 0 -1px #94a3b8;
  position: relative; top: 1px;
}
.wdp-btn {
  padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 1px solid #e2e8f0; background: #fff; color: #334155;
  cursor: pointer; transition: all .12s;
}
.wdp-btn:hover { background: #f1f5f9; }
.wdp-btn--primary { background: #6366f1; color: #fff; border-color: #6366f1; }
.wdp-btn--primary:hover { background: #4f46e5; border-color: #4f46e5; }
.wdp-btn--danger { color: #ef4444; border-color: #fecaca; }
.wdp-btn--danger:hover { background: #fef2f2; }

/* ── Timeline items ──────────────────────────────────────── */
.wdp-timeline { padding-left: 20px; border-left: 2px solid #e2e8f0; }
.wdp-timeline-item { position: relative; padding: 0 0 16px 16px; }
.wdp-timeline-dot {
  position: absolute; left: -25px; top: 2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #6366f1; border: 2px solid #fff;
}
.wdp-timeline-date { font-size: 11px; color: #94a3b8; margin-bottom: 2px; }
.wdp-timeline-text { font-size: 13px; color: #334155; }

/* ── Task card list inside popup (matches home-page Overview cards) ── */
.wdp-popup .wdp-task-cards { padding: 4px 0 8px; gap: 8px; max-height: none; overflow: visible; }
.wdp-popup .wdp-task-cards .mw-task-card { width: 100%; box-sizing: border-box; }
/* Hide the row delete button inside popup — popup is read-through, edits happen in task profile */
.wdp-popup .wdp-task-cards .mw-card-del { display: none; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .wdp-popup { width: 100vw; height: 100vh; border-radius: 0; }
  .wdp-detail-grid { grid-template-columns: 1fr; }
  .wdp-kpi-strip { flex-wrap: wrap; }
  .wdp-kpi { min-width: 80px; }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wdp-overlay, .wdp-popup, .wdp-panel { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   PLAN TAB — SOW / Quote print stylesheet
   When body has class wdp-print-mode, hide all chrome and
   render the Plan panel as a clean printable document.
   ══════════════════════════════════════════════════════════ */
.wdp-plan-panel .wdp-section { page-break-inside: avoid; margin-bottom: 18px; }
.wdp-plan-panel .wdp-section-head { font-size: 1.05rem; font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; margin-bottom: 10px; }
.wdp-plan-panel .wdp-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.wdp-plan-panel .wdp-table th { text-align: left; padding: 8px 10px; background: #f8fafc; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; border-bottom: 1px solid #e2e8f0; }
.wdp-plan-panel .wdp-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }

@media print {
  /* Hide everything by default when in print-mode */
  body.wdp-print-mode > *:not(#wdpOverlay):not(.wt-print-keep) { display: none !important; }

  /* If printing the program detail page (no popup open), keep the plan host */
  body.wdp-print-mode .prog-plan-host { display: block !important; }
  body.wdp-print-mode .prog-plan-host ~ * { display: none !important; }

  /* Show overlay flat (no fixed positioning) */
  body.wdp-print-mode #wdpOverlay {
    position: static !important; background: transparent !important;
    width: auto !important; height: auto !important; display: block !important;
  }
  body.wdp-print-mode .wdp-popup {
    position: static !important; box-shadow: none !important; border: none !important;
    width: 100% !important; max-width: none !important; max-height: none !important;
    height: auto !important; display: block !important;
  }
  body.wdp-print-mode .wdp-header,
  body.wdp-print-mode .wdp-actions,
  body.wdp-print-mode .wdp-tabs,
  body.wdp-print-mode .wdp-health-row,
  body.wdp-print-mode .wdp-close,
  body.wdp-print-mode [data-wdp-plan-edit],
  body.wdp-print-mode [data-wdp-action="plan-print"],
  body.wdp-print-mode [data-wdp-action="plan-to-budget"],
  body.wdp-print-mode .wdp-plan-panel > div:nth-child(2)  /* the toolbar row */ {
    display: none !important;
  }
  body.wdp-print-mode .wdp-body { padding: 0 !important; overflow: visible !important; }
  body.wdp-print-mode .wdp-panel { padding: 0 !important; }

  /* When printing from the program detail page, also hide its chrome */
  body.wdp-print-mode .prog-sub-tabs,
  body.wdp-print-mode .prog-quick-actions,
  body.wdp-print-mode .prog-intel,
  body.wdp-print-mode .prog-header-actions,
  body.wdp-print-mode .prog-detail-toolbar,
  body.wdp-print-mode .prog-sidebar,
  body.wdp-print-mode .topnav,
  body.wdp-print-mode .wt-page-shell-header,
  body.wdp-print-mode .wt-launchpad,
  body.wdp-print-mode .wt-page-tabs { display: none !important; }

  /* Header for printed SOW */
  body.wdp-print-mode .wdp-plan-header { display: flex !important; border-bottom: 2px solid #0f172a !important; padding-bottom: 12px !important; margin-bottom: 18px !important; }
  body.wdp-print-mode .wdp-plan-signature { display: grid !important; }

  /* Print colors / sizing */
  body.wdp-print-mode { background: #fff !important; color: #0f172a !important; font-size: 11pt; }
  body.wdp-print-mode .wdp-section { page-break-inside: avoid; margin-bottom: 14pt; }
  body.wdp-print-mode .wdp-section-head { font-size: 13pt; }
  @page { margin: 0.6in 0.55in; }
}

/* ══════════════════════════════════════════════════════════════
   GRANT POPUP — topbar + icon tabs + inline forms + doc cards
   ══════════════════════════════════════════════════════════════ */

/* ── Grant topbar ── */
.wdp-grant-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 24px; border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0; background: #fff;
}
.wdp-grant-topbar-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #10b981, #059669);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 4px 12px rgba(16,185,129,.28);
}
.wdp-grant-topbar-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; }
.wdp-grant-topbar-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wdp-grant-topbar-title {
  font-size: 17px; font-weight: 800; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wdp-grant-topbar-sub {
  font-size: 12px; font-weight: 500; color: #94a3b8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wdp-grant-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
  border: 1px solid; flex-shrink: 0; white-space: nowrap;
}
.wdp-grant-edit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid #e2e8f0; background: #f8fafc;
  color: #334155; font-size: 13px; font-weight: 600;
  cursor: pointer; flex-shrink: 0; transition: all .12s;
}
.wdp-grant-edit-btn:hover { border-color: #3A86FF; color: #3A86FF; background: #eff6ff; }
.wdp-grant-edit-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.wdp-grant-topbar-close {
  width: 34px; height: 34px; border-radius: 10px; border: none;
  background: transparent; color: #94a3b8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.wdp-grant-topbar-close:hover { background: #fee2e2; color: #ef4444; }
.wdp-grant-topbar-close svg { width: 17px; height: 17px; }

/* ── Grant icon tab bar ── */
.wdp-grant-tab-bar {
  display: flex; gap: 4px; padding: 8px 16px;
  background: #f9fafb; border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0; overflow-x: auto; scrollbar-width: none;
}
.wdp-grant-tab-bar::-webkit-scrollbar { display: none; }
.wdp-grant-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 12px; border-radius: 10px; border: none;
  background: transparent; cursor: pointer;
  font-size: 11px; font-weight: 600; color: #94a3b8;
  transition: all .18s ease; white-space: nowrap; flex-shrink: 0;
  position: relative;
}
.wdp-grant-tab:hover { color: #374151; background: rgba(255,255,255,.8); }
.wdp-grant-tab.is-active {
  color: #3A86FF; background: #fff; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.07), 0 0 0 1px rgba(58,134,255,.12);
}
.wdp-grant-tab svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; }
.wdp-grant-tab-badge {
  position: absolute; top: 4px; right: 6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #e2e8f0; color: #64748b;
  border-radius: 999px; font-size: 9px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.wdp-grant-tab.is-active .wdp-grant-tab-badge { background: rgba(58,134,255,.15); color: #3A86FF; }

/* ── Tab section header (title + add button) ── */
.wdp-tab-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.wdp-tab-section-head-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.wdp-tab-add-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid #3A86FF; background: transparent;
  color: #3A86FF; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .12s;
}
.wdp-tab-add-btn:hover { background: #3A86FF; color: #fff; }
.wdp-tab-add-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; flex-shrink: 0; }

/* ── Inline add form (PO, deliverable, award, person) ── */
.wdp-inline-form {
  max-height: 0; overflow: hidden; opacity: 0;
  margin-bottom: 0;
  border-radius: 12px;
  border: 1px solid transparent; background: #f8fafc;
  transition: max-height .38s cubic-bezier(.4,0,.2,1),
              opacity .25s ease,
              margin-bottom .25s ease,
              border-color .2s ease,
              padding .25s ease;
  padding: 0 16px;
}
.wdp-inline-form.is-open {
  max-height: 700px; opacity: 1;
  margin-bottom: 14px;
  border-color: #e2e8f0;
  padding: 16px;
}
.wdp-inline-form-title { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 12px; }
.wdp-inline-form-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px;
}
.wdp-inline-form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.wdp-inline-form-field { display: flex; flex-direction: column; gap: 4px; }
.wdp-inline-form-field.full { grid-column: 1 / -1; }
.wdp-inline-form-label {
  font-size: 11px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .04em;
}
.wdp-inline-form-input {
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid #e2e8f0; background: #fff;
  font-size: 13px; color: #0f172a; font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.wdp-inline-form-input:focus {
  outline: none; border-color: #3A86FF;
  box-shadow: 0 0 0 3px rgba(58,134,255,.12);
}
.wdp-inline-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.wdp-inline-form-save {
  padding: 7px 16px; border-radius: 8px;
  border: none; background: #3A86FF; color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .12s;
}
.wdp-inline-form-save:hover { background: #2563eb; }
.wdp-inline-form-cancel {
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid #e2e8f0; background: #fff; color: #64748b;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .12s;
}
.wdp-inline-form-cancel:hover { background: #f1f5f9; }
@media (max-width: 600px) {
  .wdp-inline-form-grid, .wdp-inline-form-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ── Document cards (doc tab) ── */
.wdp-doc-card-list { display: flex; flex-direction: column; gap: 8px; }
.wdp-doc-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid #e2e8f0; background: #fff;
  cursor: pointer; transition: all .15s;
}
.wdp-doc-card:hover {
  border-color: #3A86FF;
  box-shadow: 0 4px 12px rgba(58,134,255,.1);
  transform: translateY(-1px);
}
.wdp-doc-card-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: linear-gradient(135deg, #3A86FF, #6366f1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wdp-doc-card-icon svg { width: 18px; height: 18px; stroke: #fff; fill: none; }
.wdp-doc-card-body { flex: 1; min-width: 0; }
.wdp-doc-card-title {
  font-size: 13px; font-weight: 700; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wdp-doc-card-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.wdp-doc-card-source {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700;
  background: #f1f5f9; color: #475569; flex-shrink: 0;
}
.wdp-doc-card-open {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 7px;
  border: 1px solid #e2e8f0; background: #f8fafc;
  color: #3A86FF; font-size: 12px; font-weight: 600;
  text-decoration: none; flex-shrink: 0; transition: all .12s;
}
.wdp-doc-card-open:hover { background: #3A86FF; color: #fff; border-color: #3A86FF; }

/* ── Funding award cards ── */
.wdp-award-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.wdp-award-card {
  border-radius: 12px; border: 1px solid #e2e8f0; background: #fff;
  overflow: hidden; transition: box-shadow .15s, border-color .15s, transform .12s;
}
.wdp-award-card:hover { border-color: #10b981; box-shadow: 0 4px 14px rgba(16,185,129,.1); }
.wdp-award-card.is-editable { cursor: pointer; }
.wdp-award-card.is-editable:hover { border-color: #3A86FF; box-shadow: 0 6px 18px rgba(58,134,255,.18); transform: translateY(-1px); }
.wdp-award-card.is-editable:focus-visible { outline: 2px solid #3A86FF; outline-offset: 2px; }
.wdp-award-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
}
.wdp-award-card-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, #10b981, #059669);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wdp-award-card-icon svg { width: 17px; height: 17px; stroke: #fff; fill: none; }
.wdp-award-card-name { flex: 1; font-size: 14px; font-weight: 700; color: #0f172a; }
.wdp-award-card-primary-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(16,185,129,.12); color: #059669; border: 1px solid rgba(16,185,129,.25);
  text-transform: uppercase; letter-spacing: .04em;
}
.wdp-award-card-edit-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 7px;
  border: 1px solid #e2e8f0; background: #fff;
  color: #64748b; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all .12s; flex-shrink: 0;
}
.wdp-award-card-edit-btn:hover { border-color: #3A86FF; color: #3A86FF; background: #eff6ff; }
.wdp-award-card-edit-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
.wdp-award-card-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; padding: 0;
}
.wdp-award-card-stat {
  padding: 12px 16px; border-right: 1px solid #f1f5f9; text-align: left;
}
.wdp-award-card-stat:last-child { border-right: none; }
.wdp-award-card-stat-v { font-size: 16px; font-weight: 800; color: #0f172a; }
.wdp-award-card-stat-l {
  font-size: 10px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .04em; margin-top: 2px;
}
.wdp-award-card-footer {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; border-top: 1px solid #f1f5f9; background: #fafbfc;
}
.wdp-award-card-bar-wrap { flex: 1; min-width: 120px; }
.wdp-award-card-bar-row {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.wdp-award-bar {
  height: 5px; background: #e2e8f0; border-radius: 999px; overflow: hidden;
}
.wdp-award-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.wdp-award-card-chip {
  font-size: 11px; font-weight: 600; color: #64748b;
  padding: 3px 8px; border-radius: 6px; background: #f1f5f9;
  white-space: nowrap;
}
/* Inline edit form inside a card */
.wdp-award-edit-form {
  max-height: 0; overflow: hidden; opacity: 0;
  border-top: 1px solid transparent; background: #f8fafc;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .22s ease, border-color .2s ease, padding .22s ease;
  padding: 0 16px;
}
.wdp-award-edit-form.is-open {
  max-height: 600px; opacity: 1;
  border-top-color: #e2e8f0;
  padding: 14px 16px;
}

/* ── Read-only tab notice ── */
.wdp-readonly-notice {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  background: #f0f9ff; border: 1px solid #bae6fd;
  color: #0369a1; font-size: 12px; font-weight: 500;
  margin-bottom: 14px;
}
.wdp-readonly-notice svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex-shrink: 0; }

/* ── People tab ── */
.wdp-people-section-label {
  font-size: 11px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px;
}
.wdp-people-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; margin-top: 20px;
}
.wdp-people-section-head:first-child { margin-top: 0; }
.wdp-member-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px; margin-top: 4px;
}
.wdp-member-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid #e2e8f0; background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.wdp-member-card:hover {
  border-color: #3A86FF; box-shadow: 0 4px 12px rgba(58,134,255,.1);
  transform: translateY(-1px);
}
.wdp-member-card--funder {
  background: #f8fafc; margin-bottom: 4px;
  grid-column: 1 / -1;
}
.wdp-member-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
  flex-shrink: 0; letter-spacing: .03em;
}
.wdp-member-info { flex: 1; min-width: 0; }
.wdp-member-name { font-size: 14px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdp-member-role { font-size: 12px; color: #64748b; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdp-member-hours {
  text-align: center; padding: 4px 10px; border-radius: 8px;
  background: #f1f5f9; flex-shrink: 0;
}
.wdp-member-hours-v { font-size: 15px; font-weight: 800; color: #0f172a; line-height: 1.2; }
.wdp-member-hours-l { font-size: 10px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.wdp-member-action {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e2e8f0; color: #64748b; flex-shrink: 0;
  transition: all .12s; text-decoration: none;
}
.wdp-member-action:hover { border-color: #3A86FF; color: #3A86FF; background: #eff6ff; }
.wdp-member-action svg { width: 14px; height: 14px; }
.wdp-member-avatar--lg {
  width: 56px; height: 56px; font-size: 20px; font-weight: 800;
}

/* ── Member drill-in view ── */
.wdp-member-drill { padding: 0; }
.wdp-member-drill-back {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px 5px 6px; border-radius: 8px;
  border: 1px solid #e2e8f0; background: #f8fafc;
  font-size: 12px; font-weight: 600; color: #64748b;
  cursor: pointer; margin-bottom: 16px;
  transition: all .12s;
}
.wdp-member-drill-back:hover { border-color: #3A86FF; color: #3A86FF; background: #eff6ff; }
.wdp-member-drill-back svg { width: 14px; height: 14px; }
.wdp-member-drill-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.wdp-member-drill-name { font-size: 18px; font-weight: 800; color: #0f172a; line-height: 1.2; }
.wdp-member-drill-role { font-size: 13px; color: #64748b; margin-top: 2px; }
.wdp-member-drill-section {
  font-size: 11px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .06em;
  margin: 20px 0 8px;
}

/* ── Team member selector (chip list) ── */
.wdp-member-selector {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.wdp-member-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 6px; border-radius: 20px;
  border: 1px solid #e2e8f0; background: #f8fafc;
  cursor: pointer; transition: all .12s; font-size: 12px;
}
.wdp-member-chip:hover { border-color: #3A86FF; background: #eff6ff; }
.wdp-member-chip.is-selected { border-color: #3A86FF; background: #eff6ff; color: #3A86FF; font-weight: 600; }
.wdp-member-chip-av {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.wdp-member-chip-name { font-weight: 600; color: #0f172a; }
.wdp-member-chip.is-selected .wdp-member-chip-name { color: #3A86FF; }
.wdp-member-chip-role { font-size: 11px; color: #94a3b8; }
@media (max-width: 600px) {
  .wdp-member-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   SMOOTH TRANSITIONS — all interactive popup elements
   ══════════════════════════════════════════════════════════ */

/* Clickable table rows */
.wdp-table tr[data-row-id] { cursor: pointer; }
.wdp-table tr[data-row-id] td { transition: background .12s ease, color .12s ease; }
.wdp-table tr[data-row-id]:hover td { background: rgba(58,134,255,.05); }
.wdp-table tr[data-row-id]:active td { background: rgba(58,134,255,.09); }

/* Member cards */
.wdp-member-card { transition: border-color .15s, box-shadow .15s, transform .15s cubic-bezier(.2,.8,.2,1); }
.wdp-member-card:hover { transform: translateY(-2px); }

/* Drill-in member cards */
.wdp-member-drill .wdp-table tr td { transition: background .12s; }
.wdp-member-drill .wdp-table tr:hover td { background: rgba(58,134,255,.04); }

/* Award cards */
.wdp-award-card { transition: box-shadow .15s, border-color .15s; }
.wdp-award-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.1); }

/* All popup buttons */
.wdp-tab-add-btn,
.wdp-inline-form-save,
.wdp-inline-form-cancel,
.wdp-award-card-edit-btn,
.wk-btn { transition: background .12s, border-color .12s, color .12s, box-shadow .12s; }

/* Grant-action buttons */
.wdp-grant-edit-btn,
.wdp-grant-topbar-close { transition: background .12s, opacity .12s; }

/* Tab nav buttons */
.wdp-grant-tab-btn { transition: background .12s, border-color .12s, color .12s; }

/* Readonly notice */
.wdp-readonly-notice { transition: opacity .2s; }

/* Nav back button */
.wdp-nav-back { transition: background .12s, color .12s, border-color .12s; }

/* Overlay fade (already handled by opacity, but ensure smooth) */
.wdp-overlay { transition: opacity .3s cubic-bezier(.2,.8,.2,1), visibility 0s .3s; }
.wdp-overlay.is-open { transition: opacity .3s cubic-bezier(.2,.8,.2,1), visibility 0s 0s; }

/* Inline forms slide open */
.wdp-inline-form { transition: max-height .25s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.wdp-award-edit-form { transition: max-height .25s cubic-bezier(.2,.8,.2,1), opacity .2s; }

/* ══════════════════════════════════════════════════════════
   GRANT DETAIL POPUP — visual parity with the Program popup
   Scope: .wdp-popup.wdp-grant-popup
   ══════════════════════════════════════════════════════════ */

.wdp-popup.wdp-grant-popup {
  border-radius: 20px;
}

/* Topbar — mirror gp-topbar */
.wdp-grant-popup .wdp-grant-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 24px; border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0; background: #fff; cursor: default;
  position: relative; z-index: 20;
}
.wdp-grant-popup .wdp-grant-topbar .gp-topbar-icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wdp-grant-popup .wdp-grant-topbar .gp-topbar-icon svg { width: 20px; height: 20px; color: #fff; stroke: #fff; fill: none; }
.wdp-grant-popup .wdp-grant-topbar .gp-topbar-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wdp-grant-popup .wdp-grant-topbar .gp-topbar-title {
  font-size: 16px; font-weight: 800; color: #111; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wdp-grant-popup .wdp-grant-topbar .gp-topbar-subtitle {
  font-size: 11px; font-weight: 500; color: #9ca3af; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wdp-grant-popup .wdp-grant-topbar .wdp-status-pill { margin-right: 4px; }
.wdp-grant-popup .wdp-grant-topbar .gp-topbar-btn {
  width: 34px; height: 34px; border-radius: 10px; border: none;
  background: transparent; color: #9ca3af; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 0; transition: background .15s, color .15s;
}
.wdp-grant-popup .wdp-grant-topbar .wdp-grant-edit-btn {
  width: auto; padding: 0 12px; gap: 6px;
  border: 1.5px solid #e5e7eb; color: #111; font-weight: 700; font-size: 13px;
  background: #fff;
}
.wdp-grant-popup .wdp-grant-topbar .wdp-grant-edit-btn:hover {
  border-color: #3b82f6; color: #3b82f6; background: #eff6ff;
}
.wdp-grant-popup .wdp-grant-topbar .wdp-grant-edit-btn svg { width: 14px; height: 14px; }
.wdp-grant-popup .wdp-grant-topbar .wdp-close { color: #9ca3af; }
.wdp-grant-popup .wdp-grant-topbar .wdp-close:hover { background: #fee2e2; color: #ef4444; }

/* Tabs — pill style like gp-tabs */
.wdp-grant-popup .wdp-tab-bar {
  display: flex; gap: 4px; padding: 10px 24px;
  background: #f9fafb; border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0; overflow-x: auto;
}
.wdp-grant-popup .wdp-tab {
  flex: 1; min-width: 84px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px; border-radius: 10px; border: none;
  background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #9ca3af;
  transition: all .2s ease; position: relative;
  border-bottom: none; white-space: nowrap;
}
.wdp-grant-popup .wdp-tab:hover { color: #374151; background: rgba(255,255,255,.6); }
.wdp-grant-popup .wdp-tab.is-active {
  color: #3b82f6; background: #fff; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(59,130,246,.12);
  border-bottom: none;
}
.wdp-grant-popup .wdp-tab-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; font-size: 10px; font-weight: 800;
  background: #f3f4f6; color: #9ca3af; margin-left: 0;
}
.wdp-grant-popup .wdp-tab.is-active .wdp-tab-badge { background: #eff6ff; color: #3b82f6; }

/* In-body KPI strip — mirrors ep-kpi-row styling */
.wdp-grant-popup .wdp-body .wdp-kpi-strip {
  display: flex; gap: 12px; margin: 0 0 16px;
  flex-wrap: wrap; background: transparent; border-bottom: none; padding: 0;
}
.wdp-grant-popup .wdp-body .wdp-kpi {
  flex: 1; min-width: 110px; padding: 12px 14px;
  background: #f9fafb; border: 1px solid #f3f4f6; border-radius: 12px;
  text-align: center;
}
.wdp-grant-popup .wdp-body .wdp-kpi-val { font-size: 20px; font-weight: 800; line-height: 1.2; }
.wdp-grant-popup .wdp-body .wdp-kpi-lbl {
  font-size: 11px; font-weight: 600; color: #6b7280;
  margin-top: 2px; text-transform: uppercase; letter-spacing: .3px;
}
.wdp-grant-popup .wdp-body .wdp-kpi-sub { font-size: 11px; color: #9ca3af; margin-top: 1px; }

/* Health row — small chips below scorecards in Overview */
.wdp-grant-popup .wdp-body .wdp-health-row {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0 !important;
  margin-bottom: 18px;
}

/* Hide all editing affordances inside tabs unless popup is in edit mode */
.wdp-grant-popup .wdp-tab-add-btn,
.wdp-grant-popup .wdp-award-card-edit-btn,
.wdp-grant-popup .wdp-grant-attach-btn {
  display: none !important;
}
.wdp-grant-popup.is-editing .wdp-tab-add-btn,
.wdp-grant-popup.is-editing .wdp-award-card-edit-btn,
.wdp-grant-popup.is-editing .wdp-grant-attach-btn {
  display: inline-flex !important;
}

/* Hide bottom action bar (legacy) on grant popup */
.wdp-grant-popup > .wdp-actions { display: none !important; }

/* Edit-mode footer — mirrors ep-popup-foot */
.wdp-grant-edit-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;
}
.wdp-grant-popup.is-editing .wdp-grant-edit-foot { display: flex; }
.wdp-grant-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 .15s, border-color .15s, color .15s;
}
.wdp-grant-foot-btn:hover { background: #f9fafb; border-color: #9ca3af; }
.wdp-grant-foot-btn--primary { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.wdp-grant-foot-btn--primary:hover { background: #2563eb; border-color: #2563eb; }
.wdp-grant-foot-btn--danger { background: #fff; color: #ef4444; border-color: #fecaca; }
.wdp-grant-foot-btn--danger:hover { background: #fef2f2; border-color: #ef4444; }

/* Edit-mode visual cue: the "Done" button turns green when active, matching
   the Task / Work Stream / Project popups. */
.wdp-grant-popup.is-editing .wdp-grant-edit-btn {
  background: #16a34a; border-color: #16a34a; color: #fff;
}
.wdp-grant-popup.is-editing .wdp-grant-edit-btn:hover {
  background: #15803d; border-color: #15803d; color: #fff;
}

/* Inline Overview edit form (replaces read-only Overview body in edit mode) */
.wdp-grant-edit-form {
  margin-top: 4px;
}
.wdp-grant-edit-section-title {
  font-size: 14px; font-weight: 700; color: #111;
  margin: 6px 0 14px;
}
.wdp-grant-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.wdp-grant-edit-field {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.wdp-grant-edit-field--full { grid-column: 1 / -1; }
.wdp-grant-edit-label {
  font-size: 11px; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: .3px;
}
.wdp-grant-edit-input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #e5e7eb; border-radius: 8px;
  background: #fff; font-size: 13px; color: #111;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.wdp-grant-edit-input:focus {
  outline: none; border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
textarea.wdp-grant-edit-input { resize: vertical; min-height: 70px; }

@media (max-width: 720px) {
  .wdp-grant-edit-grid { grid-template-columns: 1fr; }
}

/* ── Wizard-quality grant edit form ────────────────────────
   Reuses the New-Grant-drawer CSS (.wk-gbd-*) but tightens
   field spacing so the form fits comfortably inside the popup. */
.wdp-grant-edit-form--wizard { margin-top: 8px; padding-bottom: 8px; }
.wdp-grant-edit-form--wizard .wk-gbd-field { margin-bottom: 16px; }
.wdp-grant-edit-form--wizard .wk-gbd-grid-2 { margin-bottom: 16px; }
.wdp-grant-edit-form--wizard .wk-gbd-grid-2 .wk-gbd-field { margin-bottom: 0; }

/* Native <select> styled to match .wk-gbd-input — replaces the previous
   "type the words yourself" plain text inputs with a coded dropdown. */
.wdp-grant-edit-form--wizard select.wk-gbd-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}
.wdp-grant-edit-form--wizard select.wk-gbd-select:focus {
  border-color: #3A86FF;
  box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.14);
}

/* Match the wizard's smaller grant-type chip grid width inside the popup
   (popup is narrower than the drawer, so 3 columns is right). */
.wdp-grant-edit-form--wizard .wk-gbd-chips {
  grid-template-columns: repeat(3, 1fr);
}

/* Calendar popover detached to <body> — already absolute via wizard CSS,
   but enforce a high z-index so it floats above the popup chrome. */
.wk-gbd-date-pop[hidden] { display: none; }

/* ── Wizard-quality Funding Source modal ─────────────────── */
.wdp-fund-modal { display: flex; flex-direction: column; }
.wdp-fund-modal .wdp-header {
  flex: 0 0 auto;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.wdp-fund-modal .wdp-header-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(135deg, #3A86FF 0%, #4ECCFD 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wdp-fund-modal .wdp-header-icon svg { width: 18px; height: 18px; }
.wdp-fund-modal .wdp-header-title {
  font-size: 15px; font-weight: 700; color: #0f172a;
}
.wdp-fund-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 22px 8px;
}
.wdp-fund-modal .wdp-actions {
  flex: 0 0 auto;
  padding: 12px 20px;
  border-top: 1px solid #e2e8f0;
  display: flex; align-items: center; gap: 8px;
  background: #f8fafc;
  border-radius: 0 0 12px 12px;
}
.wdp-fund-modal .wdp-btn {
  padding: 9px 16px; border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid #e2e8f0; background: #fff; color: #0f172a;
  cursor: pointer; transition: all .15s;
}
.wdp-fund-modal .wdp-btn:hover { border-color: #cbd5e1; }
.wdp-fund-modal .wdp-btn--primary {
  background: #3A86FF; border-color: #3A86FF; color: #fff;
}
.wdp-fund-modal .wdp-btn--primary:hover { background: #2563eb; border-color: #2563eb; }

/* ── Confirm modal (replaces window.confirm) ─────────────── */
.wdp-confirm-overlay {
  display: flex; align-items: center; justify-content: center;
}
.wdp-confirm-popup {
  width: 460px; max-width: 92vw;
  background: #fff; border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,.30), 0 0 0 1px rgba(0,0,0,.05);
  overflow: hidden;
  animation: wdpConfirmIn .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes wdpConfirmIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.wdp-confirm-head {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 22px 22px 18px;
}
.wdp-confirm-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wdp-confirm-text { flex: 1; min-width: 0; padding-top: 2px; }
.wdp-confirm-title {
  font-size: 16px; font-weight: 800; color: #111;
  line-height: 1.3; margin-bottom: 6px;
}
.wdp-confirm-message {
  font-size: 13px; color: #4b5563; line-height: 1.55;
}
.wdp-confirm-foot {
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  padding: 14px 22px;
  border-top: 1px solid #e5e7eb;
  background: #fafbfc;
}
.wdp-grant-foot-btn--danger-solid {
  background: #ef4444; border-color: #ef4444; color: #fff;
}
.wdp-grant-foot-btn--danger-solid:hover {
  background: #dc2626; border-color: #dc2626;
}

/* Projects tab inside the grant popup.

   The card itself is work.js WkCards.project — the SAME card the Projects tab
   renders, team faces and client marks and all. Nothing here restyles it; a
   card that looks different in two places is two cards, which is the mistake
   this replaced. All that is scoped here is the GRID it sits in.

   The Projects tab is a fixed two-up (.wk-prog-card-grid). A grant funds a
   handful of projects — often exactly one — so a fixed two-up would either
   half-width a lone card or, on a narrow popup, squeeze both. auto-fit at 460px
   gives one across when there is one, two when there is room, and the 760px cap
   stops a single project stretching into a banner.

   ⚠️ No padding of its own: the popup panel already provides the gutter, and
   .wk-prog-card-grid ships a 16px padding that double-indented the first card
   away from every other panel on the grant. */
.wdp-grant-popup .wdp-grant-prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  gap: 18px;
  padding: 0;
  align-content: start;
}
.wdp-grant-popup .wdp-grant-prog-grid > .wk-dp-card--program { max-width: 760px; }
@media (max-width: 900px) {
  .wdp-grant-popup .wdp-grant-prog-grid { grid-template-columns: 1fr; }
}
/* Last-resort row, drawn only if work.js never published WkCards.project. */
.wdp-grant-prog-plain {
  padding: 16px 18px; border: 1px solid var(--border, #e5e7eb); border-radius: 14px;
  background: var(--surf, #fff);
}
.wdp-grant-prog-plain-name { font-size: 15px; font-weight: 700; color: var(--ink, #0f172a); }
.wdp-grant-prog-plain-sub  { font-size: 12px; color: var(--ink3, #9ca3af); margin-top: 3px; text-transform: capitalize; }

/* ══════════════════════════════════════════════════════════════
   KPI BREAKDOWN POPUP  — matches grant popup visual language
   Scope: .wdp-popup.wdp-kpi-popup
   ══════════════════════════════════════════════════════════════ */

/* Scope topbar the same way grant popup does */
/* Size to the content, not to 90vh. These breakdowns are short — a fixed
   height left two thirds of the sheet as empty white below the numbers. */
.wdp-popup.wdp-kpi-popup {
  border-radius: 20px;
  height: auto; max-height: 90vh; max-width: 1180px;
}
.wdp-kpi-popup .wdp-body { flex: 0 1 auto; }
.wdp-kpi-popup .wdp-panel { padding: 0; }
.wdp-kpi-popup .wdp-grant-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 24px; border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0; background: #fff;
}
.wdp-kpi-popup .gp-topbar-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wdp-kpi-popup .gp-topbar-icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.wdp-kpi-popup .gp-topbar-label { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wdp-kpi-popup .gp-topbar-title { font-size: 16px; font-weight: 800; color: #111; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdp-kpi-popup .gp-topbar-subtitle { font-size: 11.5px; color: #9ca3af; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdp-kpi-popup .gp-topbar-btn {
  width: 34px; height: 34px; border-radius: 10px; border: none; background: transparent;
  color: #9ca3af; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s, color .15s;
}
.wdp-kpi-popup .gp-topbar-btn svg { width: 18px; height: 18px; }
.wdp-kpi-popup .gp-topbar-btn:hover { background: #fee2e2; color: #ef4444; }

/* Hero KPI strip — card tiles inside the body (matches grant in-body style) */
.kpid-hero-strip {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 16px 20px 0;
}
.kpid-kpi {
  flex: 1; min-width: 110px;
  padding: 12px 14px; border-radius: 12px;
  background: #f9fafb; border: 1px solid #f3f4f6;
  text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
/* A tile that jumps to another breakdown has to look like it does. */
.kpid-kpi.is-drillable { cursor: pointer; }
.kpid-kpi.is-drillable:hover {
  border-color: #6366f1; background: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,.12);
  transform: translateY(-1px);
}
.kpid-kpi.is-drillable::after {
  content: '›'; position: absolute; top: 6px; right: 10px;
  font-size: 14px; line-height: 1; color: #cbd5e1;
}
.kpid-kpi.is-drillable { position: relative; }
.kpid-kpi.is-drillable:hover::after { color: #6366f1; }
.kpid-kpi-val {
  font-size: 20px; font-weight: 800; line-height: 1.2;
  font-variant-numeric: tabular-nums; color: #0f172a;
}
.kpid-kpi-lbl {
  font-size: 10.5px; font-weight: 700; color: #9ca3af;
  margin-top: 3px; text-transform: uppercase; letter-spacing: 0.04em;
}
.kpid-kpi-sub { font-size: 11px; color: #94a3b8; margin-top: 1px; }

/* Body wrapper */
.kpid-body {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 20px 20px;
}

/* Section heading shared by flow / meter / table blocks */
.kpid-sec-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #64748b; margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.kpid-sec-count {
  font-size: 10.5px; font-weight: 600; text-transform: none;
  letter-spacing: 0; color: #94a3b8;
}

/* ── Money flow: in − out = net, read left to right ── */
.kpid-flow {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 14px 16px;
}
.kpid-flow-row {
  display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
}
.kpid-flow-step {
  flex: 1; min-width: 120px;
  padding: 12px 14px; border-radius: 10px;
  background: #f8fafc; border: 1px solid #eef2f6;
}
.kpid-flow-step--out { background: #fffbeb; border-color: #fde68a; }
.kpid-flow-step--net { background: #f0fdf4; border-color: #bbf7d0; }
.kpid-flow-val {
  font-size: 19px; font-weight: 800; color: #0f172a;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.kpid-flow-step--out .kpid-flow-val { color: #b45309; }
.kpid-flow-step--net .kpid-flow-val { color: #15803d; }
.kpid-flow-lbl {
  font-size: 11px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .04em; margin-top: 4px;
}
.kpid-flow-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.kpid-flow-op {
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #cbd5e1; width: 14px; flex: 0 0 14px;
}
.kpid-flow-note {
  font-size: 11.5px; color: #94a3b8; margin-top: 10px; line-height: 1.45;
}
@media (max-width: 640px) {
  .kpid-flow-row { flex-direction: column; }
  .kpid-flow-op { width: auto; height: 14px; }
}

/* ── Split meter: one bar, labelled parts ── */
.kpid-meter {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 14px 16px;
}
.kpid-meter-bar {
  display: flex; height: 14px; border-radius: 999px;
  overflow: hidden; background: #f1f5f9;
}
.kpid-meter-seg { height: 100%; transition: width .45s ease; }
.kpid-meter-seg + .kpid-meter-seg { box-shadow: inset 1px 0 0 rgba(255,255,255,.7); }
.kpid-meter-keys {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px;
}
.kpid-meter-key { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.kpid-meter-dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; flex-shrink: 0; }
.kpid-meter-key-l { color: #475569; font-weight: 600; }
.kpid-meter-key-v { color: #0f172a; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpid-meter-key-s { color: #94a3b8; font-size: 11px; }

/* Genuinely-empty breakdown — tell the user what would fill it */
.kpid-blank {
  text-align: center; padding: 34px 20px 40px;
  background: #f8fafc; border: 1px dashed #e2e8f0; border-radius: 12px;
}
.kpid-blank-icon { font-size: 30px; line-height: 1; margin-bottom: 10px; opacity: .55; }
.kpid-blank-title { font-size: 14px; font-weight: 800; color: #475569; }
.kpid-blank-sub {
  font-size: 12.5px; color: #94a3b8; margin-top: 6px;
  max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.5;
}

/* Closing note — the assumptions, said out loud */
.kpid-note {
  font-size: 11.5px; line-height: 1.5; color: #94a3b8;
  padding: 2px 2px 0; border-top: 1px dashed #e2e8f0; padding-top: 12px;
}

/* Insight columns */
.kpid-insights {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.kpid-insights.is-single { grid-template-columns: 1fr; }
@media (max-width: 640px) { .kpid-insights { grid-template-columns: 1fr; } }

.kpid-col {
  border-radius: 12px; padding: 14px 14px 10px;
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid #e2e8f0;
}
.kpid-col-title {
  font-size: 12.5px; font-weight: 800;
  margin-bottom: 2px; letter-spacing: 0.01em;
}
.kpid-col-sub {
  font-size: 11px; color: #64748b; margin-bottom: 8px;
}
.kpid-col-empty {
  font-size: 12px; color: #94a3b8; padding: 8px 0 2px; font-style: italic;
}

/* Item cards inside insight columns — mirrors wdp-member-card */
.kpid-item-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px;
  background: #fff; border: 1px solid #e2e8f0;
  margin-top: 6px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kpid-item-card.is-drillable { cursor: pointer; }
.kpid-item-card.is-drillable:hover {
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99,102,241,.10);
  transform: translateY(-1px);
}
.kpid-item-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.kpid-item-info { flex: 1; min-width: 0; }
.kpid-item-name {
  font-size: 13px; font-weight: 700; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpid-item-sub {
  font-size: 11px; color: #64748b; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpid-item-val {
  font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  flex-shrink: 0;
}
.kpid-item-arrow {
  font-size: 13px; color: #94a3b8; flex-shrink: 0;
  transition: color .15s, transform .15s;
}
.kpid-item-card.is-drillable:hover .kpid-item-arrow {
  color: #6366f1; transform: translateX(2px);
}

/* Bar chart section */
.kpid-bars {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 14px 16px;
}
.kpid-bars-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #64748b; margin-bottom: 12px;
}
.kpid-bar-row { margin-bottom: 10px; }
.kpid-bar-row:last-child { margin-bottom: 0; }
.kpid-bar-row.is-drillable { cursor: pointer; }
.kpid-bar-label-row {
  display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px;
}
.kpid-bar-label-row span:first-child {
  color: #0f172a; font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kpid-bar-label-row span:last-child { font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.kpid-bar-track { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.kpid-bar-fill  { height: 100%; border-radius: 999px; transition: width 0.45s ease; }

/* Full breakdown table — always visible, rows open the record */
.kpid-table-sec { display: flex; flex-direction: column; }
.kpid-details-table-wrap {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 10px; overflow: auto; max-height: 420px;
}
.kpid-details-table-wrap .fin-breakdown { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kpid-details-table-wrap .fin-breakdown thead th {
  position: sticky; top: 0; z-index: 1;
  background: #f8fafc; border-bottom: 1px solid #e2e8f0;
  padding: 9px 12px; text-align: left; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .04em;
}
.kpid-details-table-wrap .fin-breakdown td {
  padding: 9px 12px; border-bottom: 1px solid #f1f5f9; color: #0f172a;
}
.kpid-details-table-wrap .fin-breakdown td.num,
.kpid-details-table-wrap .fin-breakdown th.num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kpid-details-table-wrap .fin-breakdown tbody tr:nth-child(even) { background: #fcfdfe; }
.kpid-details-table-wrap .fin-breakdown tbody tr.is-clickable { cursor: pointer; }
.kpid-details-table-wrap .fin-breakdown tbody tr.is-clickable:hover { background: #eef2ff; }
.kpid-details-table-wrap .fin-breakdown tbody tr:last-child td { border-bottom: none; }
.kpid-details-table-wrap .fin-breakdown tfoot td {
  position: sticky; bottom: 0; background: #f8fafc;
  border-top: 1px solid #e2e8f0; padding: 9px 12px;
  font-weight: 800; color: #0f172a;
}
.kpid-chev-col {
  width: 22px; text-align: right; color: #cbd5e1;
  font-size: 15px; line-height: 1; padding-left: 0 !important;
}
.fin-breakdown tbody tr.is-clickable:hover .kpid-chev-col { color: #6366f1; }
/* ══════════════════════════════════════════════════════════════
   DOCUMENT POPUP HERO — mirrors the Training Materials popup hero
   (materials-browser MaterialCard illustration + doc-type gradient,
   real thumbnail layered on top, and a hover-revealed "Open in
   <source>" action on a fully clickable banner).
   ══════════════════════════════════════════════════════════════ */
.wdp-doc-hero {
  position: relative; overflow: hidden; padding: 0;
  border-radius: 16px 16px 0 0; min-height: 200px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.wdp-doc-hero--link { cursor: pointer; }
.wdp-doc-hero-illustration {
  position: relative; z-index: 1; opacity: .6; transform: scale(1.15);
  display: flex; align-items: center; justify-content: center;
}
.wdp-doc-hero-illustration svg { width: 84px; height: 104px; }
.wdp-doc-hero-thumb {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: brightness(.92);
}
.wdp-doc-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 100%);
}
.wdp-doc-hero-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 20px 24px 18px; transition: opacity .18s ease; pointer-events: none;
}
.wdp-doc-hero-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; opacity: .9; margin-bottom: 4px;
}
.wdp-doc-hero-title {
  font-size: 1.35rem; font-weight: 800; line-height: 1.25;
  word-break: break-word; text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.wdp-doc-hero-sub { margin-top: 6px; font-size: .85rem; opacity: .92; }
.wdp-doc-hero-action {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 22px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .3px;
  background: linear-gradient(0deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.4) 60%, transparent 100%);
  transform: translateY(100%); opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
.wdp-doc-hero-action svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2; }
.wdp-doc-hero--link:hover .wdp-doc-hero-action { transform: translateY(0); opacity: 1; }
.wdp-doc-hero--link:hover .wdp-doc-hero-meta { opacity: 0; }
/* Hero-scoped close button — override the base .wdp-close to sit over the art. */
.wdp-doc-hero .wdp-close {
  position: absolute; top: 14px; right: 14px; z-index: 6;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.wdp-doc-hero .wdp-close:hover { background: rgba(0,0,0,.6); color: #fff; }

/* ── Time Entry popup: person chip, linked values, inline editor ── */
.wdp-te-person-wrap { display: flex; }
/* 14px, not 999px — it stands beside three chips that are rounded rectangles,
   and one capsule in a row of cards reads as a different KIND of thing. */
.wdp-te-person {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px; border: 1px solid #e2e8f0; border-radius: 14px;
  background: #f8fafc; cursor: pointer; font: inherit;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.wdp-te-person:hover { background: #eef2ff; border-color: #c7d2fe; box-shadow: 0 1px 5px rgba(79,70,229,.16); }
.wdp-te-person.is-unassigned { cursor: default; background: #f8fafc; }
.wdp-te-person .wdp-vcard-avatar { width: 34px; height: 34px; border-radius: 50%; font-size: 12px; flex: 0 0 auto; }
.wdp-te-person-name { font-weight: 700; color: #0f172a; }
.wdp-te-person-arrow { width: 14px; height: 14px; opacity: .5; flex: 0 0 auto; }
.wdp-te-person:hover .wdp-te-person-arrow { opacity: 1; }

.wdp-linkval {
  font: inherit; font-weight: 600; color: #4f46e5; background: none; border: none;
  padding: 0; cursor: pointer; text-decoration: none;
}
.wdp-linkval:hover { text-decoration: underline; }

/* A time entry holds a few facts, so the card sizes to them instead of the
   shared 90vh that left a screenful of dead space beneath a short description.
   Still capped, so a very long description scrolls rather than overflowing. */
.wdp-popup--fit { height: auto; max-height: 90vh; }

/* ── The Client › Project › Work Stream › Task trail ──
   Each chip states its own kind, so the trail reads without a label column and
   the three stay visibly part of one chain instead of scattered grid rows. */
.wdp-te-trail { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; }
.wdp-te-trail-sep {
  display: flex; align-items: center;
  color: #cbd5e1; font-size: 18px; font-weight: 700; line-height: 1;
  user-select: none;
}
.wdp-te-chip {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 0; max-width: 100%;
  padding: 9px 13px;
  font: inherit; text-align: left;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .12s;
}
.wdp-te-chip:hover {
  background: #eef2ff; border-color: #c7d2fe;
  box-shadow: 0 2px 8px rgba(79,70,229,.14);
  transform: translateY(-1px);
}
/* The read-only trail is still ONE line per chip — it is a path there, not a
   set of controls — so its caption sits beside the value rather than above. */
.wdp-te-chip.is-static > .wdp-te-chip-k,
.wdp-te-chip[data-te-open] > .wdp-te-chip-k { align-self: center; }
.wdp-te-chip.is-static { cursor: default; }
.wdp-te-chip.is-static:hover { background: #f8fafc; border-color: #e2e8f0; box-shadow: none; transform: none; }
/* Tyler, 2026-08-21: *"there should be no pill-shaped things."* The kind used
   to be a grey capsule sitting INSIDE a capsule, which is two borders and two
   radii around two words. It is a caption now — above the value, in the same
   micro-type the rest of this popup labels things with. */
.wdp-te-chip-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wdp-te-chip-k {
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #94a3b8; line-height: 1.2;
}
.wdp-te-chip-v {
  font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.3;
  overflow-wrap: anywhere;
}
/* The mark and the faces ride the chip, so the trail answers "which client,
   and who is on it" without opening anything. */
.wdp-te-chip .wdp-pick-logo { width: 26px; height: 26px; border-radius: 7px; font-size: 9.5px; }
.wdp-te-chip .wdp-pick-people { margin-left: 2px; }
.wdp-te-chip .wdp-pick-face { width: 22px; height: 22px; font-size: 8px; }
.wdp-te-chip-go { width: 13px; height: 13px; flex: 0 0 auto; opacity: .45; }
.wdp-te-chip:hover .wdp-te-chip-go { opacity: 1; }
.wdp-te-none { color: #94a3b8; font-size: 13.5px; }

/* Three short facts, side by side — a grid of label/value rows was more
   structure than "VisionOne, a date, and Work" ever needed. */
.wdp-te-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.wdp-te-fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wdp-te-fact > b {
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #94a3b8;
}
.wdp-te-fact > span { font-size: 14px; font-weight: 650; color: #0f172a; }
/* Non-billable is only ever stated when it's TRUE (billable is the default and
   gets no row), so this fact is always the exceptional one — amber, because it
   is a deliberate answer rather than a fault. */
.wdp-te-fact.is-nonbill > span { color: #b45309; font-weight: 750; }

/* The description is what someone reads a month later — full width, its own
   surface, and no height cap to fight a long one. */
.wdp-te-desc {
  font-size: 14px; line-height: 1.65; color: #1e2a3a;
  background: #f8fafc; border: 1px solid #e8edf3; border-left: 3px solid #8b5cf6;
  border-radius: 12px; padding: 14px 16px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.wdp-te-desc.is-empty { color: #94a3b8; border-left-color: #e2e8f0; font-style: italic; }

/* 🚨 THE ONE LINE THAT KEEPS THE TWO SECTIONS APART. Description and "What
   changed in the code" sit next to each other and look alike; the difference —
   one is typed by a person and can be retyped, the other is written from the
   repositories and cannot — is the entire point, so it is said out loud rather
   than left to be inferred from a heading. The card under it is wk-code-log's
   own `.wkcl-*` markup, dressed by wk-code-log.css (a plain <link> in
   Work.html's head), so nothing about it is restyled here. */
.wdp-te-codenote {
  margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: #64748b;
}
#wdpTeCode .wkcl-card { margin: 0; }

.wdp-te-form { display: flex; flex-direction: column; gap: 12px; }
.wdp-te-fieldrow { display: flex; flex-direction: column; gap: 5px; }
.wdp-te-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.wdp-te-input {
  font: inherit; font-size: 14px; padding: 9px 11px;
  border: 1px solid #e2e8f0; border-radius: 9px; background: #fff; color: #0f172a; width: 100%; box-sizing: border-box;
}
.wdp-te-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
textarea.wdp-te-input { resize: vertical; min-height: 68px; }

/* ══════════════════════════════════════════════════════════
   TIME ENTRY — CAPTURE MODE
   The same popup as a saved entry, with the numbers and the words editable in
   place. Everything here is an override on the shapes above, never a second set
   of them, so the two surfaces cannot drift apart.
   ══════════════════════════════════════════════════════════ */

/* ⚠️ The host (the day-log wizard) sits above the 60000+ inline stack work.js
   writes onto tracked modals, so a 55000 overlay opens perfectly and invisibly
   BEHIND it. The host sets --wkdl-z; this rides it. */
body.wdp-capture-up .wdp-overlay { z-index: calc(var(--wkdl-z, 13300) + 400); }

.wdp-popup--tecap .wdp-status-pill.is-draft {
  background: #f3e8ff; color: #7c3aed;
}
/* Hours and Bill Rate ARE the KPI tiles — you type into the number you read,
   rather than reading it up here and editing it in a form down there. */
.wdp-te-kpi-in {
  font: inherit; font-size: 25px; font-weight: 800; line-height: 1.15;
  width: 100%; max-width: 128px; text-align: center;
  color: inherit; background: transparent;
  border: 1px solid transparent; border-radius: 10px; padding: 1px 4px;
  -moz-appearance: textfield;
}
.wdp-te-kpi-in::-webkit-outer-spin-button,
.wdp-te-kpi-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wdp-te-kpi-in:hover { border-color: #e2e8f0; background: #fff; }
.wdp-te-kpi-in:focus { outline: none; border-color: #8b5cf6; background: #fff; box-shadow: 0 0 0 3px rgba(139,92,246,.16); }

/* The title is the headline of the entry, so it is typed at headline size. */
textarea.wdp-te-title-in {
  font-size: 18px; font-weight: 750; line-height: 1.35; color: #0f172a;
  min-height: 0; resize: none; overflow: hidden;
}
/* The write-up keeps the read surface's violet rail — it is the same block of
   words, before and after saving. */
textarea.wdp-te-desc-in {
  font-size: 14px; line-height: 1.65;
  background: #f8fafc; border-left: 3px solid #8b5cf6; border-radius: 12px;
  min-height: 132px;
}
/* The ✦ chip rides _section's own aiChip slot, so it lands where every other AI
   field in the app puts it. Only the busy state needs saying here. */
.wdp-popup--tecap .wdp-section-head .is-busy { opacity: .55; pointer-events: none; }

/* A currency glyph the input cannot hold itself. */
.wdp-te-kpi-wrap { display: inline-flex; align-items: baseline; justify-content: center; gap: 1px; }
.wdp-te-kpi-pre { font-size: 17px; font-weight: 800; opacity: .5; }
.wdp-te-kpi-in--money { max-width: 104px; text-align: left; padding-left: 1px; }

/* Two short fields side by side, and anything marked wide spanning both. A form
   this wide reads as half-empty in one column. */
.wdp-popup--tecap .wdp-te-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.wdp-popup--tecap .wdp-te-fieldrow.is-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .wdp-popup--tecap .wdp-te-form { grid-template-columns: 1fr; } }

.wdp-te-chip--edit { border-style: dashed; }
.wdp-te-chip--edit:hover { border-style: solid; }

/* ══ THE PICKER MENU ══════════════════════════════════════════════════
   Anchored, above the popup, below nothing. A row is a small CARD — the
   client's real logo, the name, the one fact that tells two of them apart,
   and the faces of who is on it — because these three controls are how an
   hour gets re-filed and a list of bare names is not enough to re-file it
   safely. Tyler, 2026-08-21: *"The dropdowns need to be beautiful… I expect
   to see profile pictures next to it and the client logo, like the actual
   client logo… There is a search bar."*

   Built by _tePickMenu in work-detail-popups.js. position:fixed and portaled
   to <body>, so it can never be clipped by the popup's own scroller. */
.wdp-pick {
  position: fixed; z-index: 2000600;
  display: flex; flex-direction: column;
  box-sizing: border-box; width: 340px;
  background: #fff; border: 1px solid #e4e9f0; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15,23,42,.24), 0 2px 6px rgba(15,23,42,.06);
  padding: 6px; overflow: hidden;
  animation: wdpPickIn .13s cubic-bezier(.22,1,.36,1);
}
@keyframes wdpPickIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.wdp-pick-hd {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #94a3b8; padding: 9px 11px 7px;
}
/* The search box. Auto-shown from four rows up — under that it is furniture. */
.wdp-pick-search {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  margin: 0 4px 6px; padding: 0 10px;
  background: #f6f8fb; border: 1px solid #e6ebf2; border-radius: 10px;
}
.wdp-pick-search:focus-within { background: #fff; border-color: #c7d2fe; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.wdp-pick-search > svg { width: 14px; height: 14px; flex: 0 0 auto; color: #94a3b8; }
.wdp-pick-q {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: #0f172a;
  padding: 9px 0;
}
.wdp-pick-q::placeholder { color: #a3aec0; font-weight: 600; }
.wdp-pick-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* ⚠️ [hidden] loses to an author display rule — the filtered-out rows stayed
   on screen the first time this was written as a plain `b.hidden = true`. */
.wdp-pick-opt[hidden] { display: none !important; }
.wdp-pick-opt {
  display: flex; align-items: center; gap: 11px;
  width: 100%; box-sizing: border-box; text-align: left;
  font-family: inherit; font-size: 13.5px;
  color: #0f172a; background: transparent; border: 0; border-radius: 11px;
  padding: 8px 10px; cursor: pointer;
  transition: background .1s;
}
.wdp-pick-opt:hover, .wdp-pick-opt.is-active { background: #f2f5fa; }
.wdp-pick-opt.is-on { background: #eef2ff; }
.wdp-pick-opt.is-on.is-active, .wdp-pick-opt.is-on:hover { background: #e6eaff; }
.wdp-pick-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wdp-pick-main {
  font-size: 13.5px; font-weight: 700; color: #0f172a; line-height: 1.3;
  /* Two work streams on one project can share the first six words. Wrap to two
     lines rather than ellipsising both to the same string. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wdp-pick-opt.is-on .wdp-pick-main { color: #3730a3; }
.wdp-pick-sub {
  font-size: 11.5px; font-weight: 600; color: #94a3b8; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wdp-pick-opt--none { color: #64748b; }
.wdp-pick-opt--none .wdp-pick-main { font-weight: 650; color: #64748b; }
.wdp-pick-tick { width: 15px; height: 15px; flex: 0 0 auto; color: #6366f1; opacity: 0; }
.wdp-pick-opt.is-on .wdp-pick-tick { opacity: 1; }
.wdp-pick-empty { padding: 14px 11px; font-size: 13px; color: #94a3b8; }
.wdp-pick-empty[hidden] { display: none !important; }

/* The mark. A real logo where the CRM has one; the favicon chain, then the
   initials, where it does not — _companyLogo owns that order. */
.wdp-pick-logo {
  flex: 0 0 auto; position: relative; overflow: hidden;
  width: 32px; height: 32px; border-radius: 8px;
  background: #fff; border: 1px solid #e8edf4;
  display: flex; align-items: center; justify-content: center;
}
.wdp-pick-logo > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wdp-pick-logo.is-fallback {
  background: #eef2ff; color: #4338ca; border-color: #dfe4fb;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
}

/* WHO IS ON IT — ours, a hair rule, theirs. Two stacks, never one. */
.wdp-pick-people { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.wdp-pick-people-sep { width: 1px; height: 16px; background: #e2e8f0; flex: 0 0 auto; }
.wdp-pick-stack { display: inline-flex; align-items: center; }
.wdp-pick-stack > * + * { margin-left: -7px; }
.wdp-pick-face {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: #fff; background: #94a3b8;
  border: 2px solid #fff; box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(15,23,42,.14);
  flex: 0 0 auto;
}
.wdp-pick-face--more { background: #e2e8f0; color: #475569; }

/* ══════════════════════════════════════════════════════════════════════════
   STAFF vCARD — the five tabs

   The identity header keeps its own styles above; everything here is the
   tabbed body underneath it: a strip, and one scrolling pane per tab.

   ⚠️ Do NOT write `font: … inherit` on anything in here. The shorthand with
   an `inherit` component is invalid CSS and browsers drop the WHOLE
   declaration — several rules elsewhere in this app are silently dead that
   way. Set `font-family: inherit` on its own line instead.
   ══════════════════════════════════════════════════════════════════════════ */

/* ONE height for all five tabs. Sized by content, the dialog grew and shrank
   under the cursor every time you changed tab — the strip you were aiming at
   moved between the mousedown and the next click. So the staff card is a
   fixed frame and the panes scroll inside it. */
.wdp-popup.wdp-popup--stacked:has(.wdp-vcard.is-staff) { height: min(92vh, 880px); }
.wdp-vcard.is-staff { flex: 1; min-height: 0; }

/* The tabbed body doesn't scroll — the active pane does, so the strip stays
   anchored under the header and each tab keeps its own scroll position. */
.wdp-vcard-body.is-tabbed { overflow: hidden; }

/* The "N more due later" footnote is a direct child of the Work pane now,
   not of a padded section body, so it carries its own gutter. */
.wdp-vcp > .wdp-vcard-wk-foot { padding-left: 22px; padding-right: 22px; }

.wdp-vct-strip {
  display: flex; gap: 2px; flex-shrink: 0;
  padding: 8px 14px 0;
  background: #fbfcfe;
  border-bottom: 1px solid #e6ecf4;
  overflow-x: auto; scrollbar-width: none;
}
.wdp-vct-strip::-webkit-scrollbar { display: none; }
.wdp-vct {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
  font-size: 13px; font-weight: 650; color: #64748b;
  background: transparent; border: 0;
  padding: 9px 14px 10px; border-radius: 9px 9px 0 0;
  cursor: pointer; white-space: nowrap;
  transition: color .14s ease, background .14s ease;
}
.wdp-vct:hover { color: #0f172a; background: #f1f5f9; }
.wdp-vct:focus-visible { outline: 2px solid #1d4ed8; outline-offset: -2px; }
.wdp-vct.is-active { color: #1d4ed8; background: #fff; font-weight: 750; }
/* The underline sits ON the strip's border, so the active tab reads as part
   of the pane below it rather than a floating pill. */
.wdp-vct.is-active::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; background: #1d4ed8; border-radius: 2px 2px 0 0;
}
.wdp-vct-count {
  font-size: 10.5px; font-weight: 800; color: #64748b;
  background: #e8eef7; border-radius: 100px; padding: 1px 6px;
}
.wdp-vct.is-active .wdp-vct-count { color: #1d4ed8; background: #dbeafe; }

.wdp-vcp-wrap { flex: 1; min-height: 0; display: flex; }
.wdp-vcp { display: none; flex: 1; min-height: 0; overflow-y: auto; }
.wdp-vcp.is-active { display: block; animation: wdpVcFade .2s ease both; }
@keyframes wdpVcFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Pane header — what this tab answers, plus its one action. */
.wdp-vcp-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 22px 10px;
  border-bottom: 1px solid #f1f5f9;
}
.wdp-vcp-title {
  flex: 1; min-width: 0;
  font-size: 13.5px; font-weight: 750; color: #0f172a; letter-spacing: -.01em;
}
.wdp-vcp-sub {
  display: block; margin-top: 3px;
  font-size: 11.5px; font-weight: 500; color: #64748b; letter-spacing: 0;
}
.wdp-vcp-body { padding: 4px 0 18px; }
.wdp-vcp-sec { padding: 12px 22px 6px; }
.wdp-vcp-sec + .wdp-vcp-sec { border-top: 1px solid #f1f5f9; margin-top: 6px; }
.wdp-vcp-sec-h {
  font-size: 10.5px; font-weight: 800; color: #64748b;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px;
}

/* ── PLAN: the three buckets ─────────────────────────────────────────── */
.wdp-vcb { padding: 12px 22px 14px; }
.wdp-vcb + .wdp-vcb { border-top: 1px solid #f1f5f9; }
.wdp-vcb-head { display: flex; align-items: center; gap: 8px; }
.wdp-vcb-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.wdp-vcb-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 750; color: #0f172a; }
.wdp-vcb-hrs { text-align: right; flex-shrink: 0; }
.wdp-vcb-hrs b { display: block; font-size: 14px; font-weight: 800; color: #0f172a; letter-spacing: -.02em; }
.wdp-vcb-hrs span { display: block; font-size: 10px; font-weight: 650; color: #94a3b8; }
.wdp-vcb-hrs.is-unset b { color: #cbd5e1; }
.wdp-vcb-track {
  margin: 8px 0 4px; height: 6px; border-radius: 100px;
  background: #eef2f7; overflow: hidden;
}
.wdp-vcb-track span { display: block; height: 100%; border-radius: 100px; transition: width .3s ease; }
.wdp-vcb-rows { margin-top: 2px; }
.wdp-vcb-empty {
  margin-top: 6px; font-size: 11.5px; color: #94a3b8; font-weight: 500;
  padding: 8px 10px; background: #f8fafc; border-radius: 9px;
}

/* ── OVERVIEW: available, current work, pace, goals ──────────────────── */
/* AVAILABLE CAPACITY is the hero, and it is deliberately the biggest thing on
   the whole card: the reason somebody opens a person's scorecard is to find
   out what room is left in their week. Everything under it — the bar, the
   three stats, the alert strip — is the supporting split.
   ⚠️ These are `wdp-vcov-*`, NOT the `wdp-vcard-wk-hero` rules further up.
   That hero is shared with the Time, Plan and budget panes, so it stayed at
   21px; restyling it to 42px for this pane would have blown up four others. */
.wdp-vcov-week b {
  display: block;
  font-size: 12.5px; font-weight: 800; color: #0f172a; letter-spacing: -.01em;
}
.wdp-vcov-week span {
  display: block; margin-top: 2px;
  font-size: 10px; font-weight: 700; color: #94a3b8;
  letter-spacing: .05em; text-transform: uppercase;
}

.wdp-vcov-hero { display: flex; align-items: baseline; gap: 8px; margin: 9px 0 13px; }
.wdp-vcov-hero-v {
  font-size: 42px; font-weight: 800; line-height: .9;
  letter-spacing: -.04em; color: #16a34a;
  font-variant-numeric: tabular-nums;
}
.wdp-vcov-hero-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-bottom: 3px; }
.wdp-vcov-hero-l b { font-size: 12.5px; font-weight: 800; color: #334155; letter-spacing: .01em; }
.wdp-vcov-hero-l span { font-size: 10.5px; font-weight: 600; color: #94a3b8; letter-spacing: 0; }
/* Fully booked is orange, not green — nothing is wrong yet, but there is no
   room either, and green would read as "go ahead and assign more". */
.wdp-vcov-hero.is-full .wdp-vcov-hero-v { color: #ea580c; }
.wdp-vcov-hero.is-over .wdp-vcov-hero-v { color: #dc2626; }

/* ── WHERE THE DENOMINATOR CAME FROM ─────────────────────────────────────
   One line under the hero, naming Shift and saying what it actually
   states. It exists because the number above it moved: Ryan's card read
   40h when Shift has him at a maximum of 8h, and a card that silently
   drops somebody by five times has to be able to explain itself or the
   fix reads as a new bug.

   ⚠️ Deliberately small and quiet in its GOOD state — this is provenance,
   not an alert, and it sits directly under the biggest type on the pane.
   The two states that are NOT good (nobody has stated hours; we could not
   ask Shift) get the amber, because in both of those the number above is
   Work's own default and is not about this person at all. */
.wdp-vcsup {
  display: flex; align-items: flex-start; gap: 7px;
  margin: -6px 0 13px; padding: 6px 9px;
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px;
  font-size: 10.5px; line-height: 1.45; font-weight: 550; color: #64748b;
}
.wdp-vcsup-src {
  flex: none; font-size: 8.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: #94a3b8;
  border-radius: 4px; padding: 2px 5px; margin-top: 1px;
}
.wdp-vcsup-t { min-width: 0; }
.wdp-vcsup.is-set .wdp-vcsup-src   { background: #16a34a; }
.wdp-vcsup.is-guess .wdp-vcsup-src { background: #d97706; }
.wdp-vcsup.is-unset,
.wdp-vcsup.is-unchecked {
  background: #fffaf0; border-color: #f4e0b6; color: #7c4a02;
}
.wdp-vcsup.is-unset .wdp-vcsup-src,
.wdp-vcsup.is-unchecked .wdp-vcsup-src { background: #b45309; }
/* The rename warning. Its own line inside the sentence, because it is a
   different KIND of statement — not "here is where the number came from"
   but "another app is still pointing at a dead address for this person",
   which is the only place in the fleet that fact is visible. */
.wdp-vcsup-warn {
  display: block; margin-top: 3px;
  font-weight: 700; color: #9a3412;
}

/* ── The alert strip: only what somebody should act on ────────────────────
   Chips, never rows — a warning that needs a heading above it is not urgent.
   Red is already late or over-committed, amber lands today or tomorrow,
   violet is time off, green is the all-clear (and there is only ever one of
   those, alone). */
.wdp-vcov-alerts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.wdp-vcov-alert {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 750; letter-spacing: -.005em; line-height: 1.35;
  color: #475569; background: #f8fafc; border: 1px solid #eef2f7;
}
.wdp-vcov-alert i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.wdp-vcov-alert.is-bad  { color: #b91c1c; background: #fef2f2; border-color: #fee2e2; }
.wdp-vcov-alert.is-warn { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.wdp-vcov-alert.is-info { color: #6d28d9; background: #f5f3ff; border-color: #ede9fe; }
.wdp-vcov-alert.is-good { color: #15803d; background: #f0fdf4; border-color: #dcfce7; }

/* ⚠️ `.wdp-vcp-grp` used to live here — a two-column grid that paired Pace
   with Delivery. Both are gone: Delivery was deleted, and Pace is full width
   under Current work now (see the order note in _vcOverviewPaneHtml). The
   sections on this pane are plain stacked `.wdp-vcp-sec` siblings again, which
   is what `.wdp-vcp-sec + .wdp-vcp-sec` above already draws dividers for. */

/* A section heading can carry its own count, so "Current work" does not need
   a sentence under it to say how much of it there is — and Pace uses the same
   slot to name the client it is currently scored on. */
.wdp-vcp-sec-h em {
  font-style: normal; margin-left: 7px;
  font-size: 10px; font-weight: 750; color: #94a3b8; letter-spacing: .04em;
  text-transform: none;
}

/* ── Pace's filter: whose work the verdict is scored on ───────────────────
   Buttons rather than a dropdown because each one carries its client's share
   of the week — that turns the control into the breakdown it filters by, and
   the options are readable without being opened. Sorted biggest share first.
   ⚠️ Deliberately NOT `.wdp-acseg`: that is a segmented switch between two or
   three fixed readings of one total. This is an open-ended list.
   ⚠️ WRAPS, and must keep wrapping. It was one sideways-scrolling row, which
   held Pace to a fixed height and hid the fourth client mid-word at the edge —
   a half-drawn chip reads as a broken layout, not as "scroll for more", and a
   filter nobody can see the options of is not offering them. A person spread
   across eight clients costs three short lines here; the pane scrolls. */
.wdp-vcov-filter { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 11px; min-width: 0; }
.wdp-vcov-filter-l {
  flex-shrink: 0; padding-top: 5px;         /* sits on the first row's text */
  font-size: 9.5px; font-weight: 800; color: #94a3b8;
  letter-spacing: .06em; text-transform: uppercase;
}
.wdp-vcov-fscroll { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.wdp-vcov-fbtn {
  flex-shrink: 0; max-width: 100%;
  display: inline-flex; align-items: baseline; gap: 5px;
  font-family: inherit;
  font-size: 11px; font-weight: 750; color: #475569; letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 999px;
  padding: 4px 10px; cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.wdp-vcov-fbtn i {
  font-style: normal; flex-shrink: 0;
  font-size: 9.5px; font-weight: 800; color: #a8b3c4;
  font-variant-numeric: tabular-nums;
}
.wdp-vcov-fbtn:hover { color: #0f172a; border-color: #dbe3ee; }
.wdp-vcov-fbtn:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }
.wdp-vcov-fbtn.is-active {
  color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe;
}
.wdp-vcov-fbtn.is-active i { color: #60a5fa; }

/* The pace block is one argument in three parts — a verdict you can read at
   a glance, the bar that justifies it, and the number behind it. The three
   never disagree because all three read the same two figures. The chip is the
   verdict, so the line below carries only the number: it used to restate
   "ahead"/"behind" in a sentence directly under a chip already saying it. */
.wdp-vcov-pace { padding: 0; }
.wdp-vcov-pace-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.wdp-vcov-chip {
  font-size: 11px; font-weight: 800; letter-spacing: .01em;
  padding: 3px 10px; border-radius: 999px;
  color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0;
}
.wdp-vcov-pace-n {
  font-size: 10.5px; font-weight: 700; color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
.wdp-vcov-pace-line { margin-top: 9px; font-size: 11.5px; font-weight: 550; color: #64748b; line-height: 1.45; }
.wdp-vcov-pace-line b { font-weight: 800; color: #0f172a; }

.wdp-vcov-pace.is-ahead  .wdp-vcov-chip { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
.wdp-vcov-pace.is-on     .wdp-vcov-chip { color: #1d4ed8; background: #dbeafe; border-color: #bfdbfe; }
.wdp-vcov-pace.is-behind .wdp-vcov-chip { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.wdp-vcov-pace.is-none   .wdp-vcov-chip { color: #94a3b8; }

/* The fill is work closed; the tick is how much of the working week is gone.
   Fill past the tick reads as ahead, fill short of it as behind — which is
   why the tick is drawn ON TOP of the fill rather than beside it.
   ⚠️ NO `overflow: hidden` on the track: the tick deliberately overhangs top
   and bottom so it stays findable against a same-length fill, and clipping
   the track would eat both the overhang and the tick itself on a 100% week. */
.wdp-vcov-track {
  position: relative; height: 9px; border-radius: 999px;
  background: #eef2f7;
}
.wdp-vcov-track i {
  display: block; height: 100%; border-radius: 999px;
  background: #94a3b8; transition: width .3s ease;
}
.wdp-vcov-pace.is-ahead  .wdp-vcov-track i { background: #16a34a; }
.wdp-vcov-pace.is-on     .wdp-vcov-track i { background: #3b82f6; }
.wdp-vcov-pace.is-behind .wdp-vcov-track i { background: #ef4444; }
.wdp-vcov-track u {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  margin-left: -1px; background: #0f172a; border-radius: 2px;
  text-decoration: none;   /* it is a marker, not an underline */
}

/* ⚠️ The `.wdp-vcov-tile(s)` rules that were here belonged to the deleted
   Delivery section and went with it — nothing else in the app used them.
   If Delivery ever comes back, it comes back with its own markup and a
   reliable close date behind the on-time number, not by reviving these. */

/* ── Goals: a section with nothing in it yet, and honest about that ───────
   Dashed, quiet, and NOT a card — the pane's other blocks are all filled with
   real numbers, and a solid tile here would read as one more of them at a
   glance. It says what will land here rather than "coming soon", so the empty
   state still tells a reader what the section is for. Grey, deliberately:
   violet is reserved for AI in this app, and there is nothing AI about a
   target somebody typed in. */
.wdp-vcov-goals {
  padding: 14px 16px; border-radius: 11px;
  background: #fbfcfe; border: 1px dashed #dbe3ee;
}
.wdp-vcov-goals b {
  display: block;
  font-size: 12.5px; font-weight: 750; color: #64748b; letter-spacing: -.01em;
}
.wdp-vcov-goals span {
  display: block; margin-top: 3px;
  font-size: 11.5px; font-weight: 500; color: #94a3b8; line-height: 1.45;
}

/* ── SCHEDULE: an Outlook-shaped week ────────────────────────────────── */
.wdp-vcs { --vcs-gut: 58px; padding: 0 0 20px; }
.wdp-vcs-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px 10px;
}
.wdp-vcs-when { flex: 1; min-width: 0; }
.wdp-vcs-when b { display: block; font-size: 14px; font-weight: 750; color: #0f172a; letter-spacing: -.01em; }
.wdp-vcs-when span { display: block; font-size: 11.5px; color: #64748b; font-weight: 500; }
.wdp-vcs-nav { display: flex; gap: 2px; align-items: center; }
.wdp-vcs-nav button {
  font-family: inherit;
  font-size: 12.5px; font-weight: 650; color: #334155;
  background: #fff; border: 1px solid #e2e8f0;
  height: 28px; min-width: 28px; padding: 0 10px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.wdp-vcs-nav button:first-child { border-radius: 8px 0 0 8px; }
.wdp-vcs-nav button:last-child  { border-radius: 0 8px 8px 0; }
.wdp-vcs-nav button + button { margin-left: -1px; }
.wdp-vcs-nav button:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; z-index: 1; }
.wdp-vcs-nav button.is-current { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.wdp-vcs-connect {
  font-family: inherit;
  font-size: 12px; font-weight: 700; color: #0f6cbd;
  background: #eff6fc; border: 1px solid #cfe3f5;
  padding: 6px 12px; border-radius: 100px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.wdp-vcs-connect:hover { background: #dceaf7; border-color: #a9cdea; }
.wdp-vcs-note {
  margin: 0 22px 10px; padding: 8px 11px;
  font-size: 11.5px; line-height: 1.5; color: #475569; font-weight: 500;
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 9px;
}
.wdp-vcs-note b { font-weight: 750; color: #0f172a; }

/* The four tones of the Shift sentence. `set` is the ordinary good state
   and stays neutral; the other three each need to be visibly not that.
   ⚠️ `gap` is amber, not red: an unscheduled week for somebody who works
   to a rota is a thing to fix, not a fault in the app. `unchecked` is
   amber too and for the same reason — it is "we could not ask", which a
   reader must not mistake for "nothing on". */
.wdp-vcs-note.is-set     { background: #f0f9f4; border-color: #cfe9db; color: #22543d; }
.wdp-vcs-note.is-gap,
.wdp-vcs-note.is-unchecked { background: #fffaf0; border-color: #f4e0b6; color: #7c4a02; }
.wdp-vcs-note.is-gap b, .wdp-vcs-note.is-unchecked b { color: #7c4a02; }
.wdp-vcs-note.is-set b   { color: #14532d; }

/* One column template shared by the header, the Shift row, the all-day band
   and the grid — they must line up to the pixel or the whole thing stops
   reading as a calendar. */
.wdp-vcs-head, .wdp-vcs-rota, .wdp-vcs-all, .wdp-vcs-grid {
  display: grid; grid-template-columns: var(--vcs-gut) repeat(7, minmax(0, 1fr));
  margin: 0 22px;
}
.wdp-vcs-head { border-bottom: 1px solid #e6ecf4; }
.wdp-vcs-day {
  text-align: center; padding: 7px 2px 8px;
  border-left: 1px solid #f1f5f9;
}
.wdp-vcs-dow {
  display: block; font-size: 10px; font-weight: 750; color: #94a3b8;
  letter-spacing: .05em; text-transform: uppercase;
}
.wdp-vcs-num { display: block; font-size: 16px; font-weight: 700; color: #334155; line-height: 1.25; }
.wdp-vcs-day.is-today .wdp-vcs-dow { color: #0f6cbd; }
.wdp-vcs-day.is-today .wdp-vcs-num {
  color: #fff; background: #0f6cbd; border-radius: 50%;
  width: 24px; height: 24px; line-height: 24px; margin: 1px auto 0; font-size: 13px;
}
.wdp-vcs-day.is-weekend { background: #fbfcfe; }
.wdp-vcs-corner {
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 7px;
  font-size: 9.5px; font-weight: 700; color: #94a3b8;
  letter-spacing: .04em; text-transform: uppercase;
}
/* ── THE SHIFT ROW ────────────────────────────────────────────────────────
   Sits between the day headers and Work's own all-day band, because it is
   the row that answers "is this person even meant to be here today" and
   everything under it is only meaningful inside that answer.
   Tinted so it reads as another system's data rather than more of Work's. */
.wdp-vcs-rota {
  border-bottom: 1px solid #e6ecf4; min-height: 34px;
  background: #fafcff;
}
.wdp-vcs-rotacell {
  border-left: 1px solid #f1f5f9; padding: 4px 3px;
  display: flex; align-items: center; justify-content: center; min-width: 0;
}
.wdp-vcs-rotacell.is-weekend { background: #f6f9fd; }
.wdp-vcs-rotacell.is-today   { background: #eef6fd; }
/* Hours PROMISED for this day. Green, and the same green the done segment
   of the week bar uses — a commitment kept is the same idea. */
.wdp-vcs-shift {
  width: 100%; min-width: 0; text-align: center;
  background: #eaf7ef; border: 1px solid #c7e8d5; border-radius: 6px;
  padding: 2px 4px; line-height: 1.25;
}
.wdp-vcs-shift-h { display: block; font-size: 11.5px; font-weight: 750; color: #15803d; }
.wdp-vcs-shift-w {
  display: block; font-size: 9px; font-weight: 600; color: #4b7f61;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A day they are NOT there. Three kinds, and the difference is worth a
   colour: booked time off is settled, an absence that already happened is
   not yet settled, and a day kept clear was never leave at all. */
.wdp-vcs-off {
  width: 100%; min-width: 0; text-align: center;
  border-radius: 6px; padding: 3px 4px;
  font-size: 10px; font-weight: 700; line-height: 1.2;
  overflow: hidden;
}
.wdp-vcs-off span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wdp-vcs-off.is-leave       { background: #eef2ff; border: 1px solid #cdd7fb; color: #3730a3; }
.wdp-vcs-off.is-absence     { background: #fff1f2; border: 1px solid #fbcfd4; color: #9f1239; }
.wdp-vcs-off.is-unavailable { background: #f4f4f5; border: 1px dashed #d4d4d8; color: #52525b; }
/* A weekday with no shift, for somebody who is TOLD when to work. Quiet on
   purpose: seven loud cells would read as seven errors. */
.wdp-vcs-gap { font-size: 13px; font-weight: 700; color: #cbd5e1; }

.wdp-vcs-all { border-bottom: 1px solid #e6ecf4; min-height: 30px; }
.wdp-vcs-allcell {
  border-left: 1px solid #f1f5f9; padding: 4px 3px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.wdp-vcs-allcell.is-weekend { background: #fbfcfe; }
.wdp-vcs-allcell.is-today { background: #f2f8fd; }
.wdp-vcs-chip {
  font-size: 10.5px; font-weight: 650; color: #0f172a;
  background: color-mix(in srgb, var(--ev) 12%, #fff);
  border-left: 3px solid var(--ev);
  border-radius: 3px; padding: 2px 5px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wdp-vcs-chip:hover { background: color-mix(in srgb, var(--ev) 22%, #fff); }
.wdp-vcs-more { font-size: 10px; font-weight: 700; color: #64748b; padding-left: 4px; }

.wdp-vcs-gutter { border-right: 1px solid #e6ecf4; }
.wdp-vcs-hour {
  height: 40px; position: relative;
  text-align: right; padding-right: 7px;
}
.wdp-vcs-hour span {
  position: relative; top: -6px;
  font-size: 10px; font-weight: 650; color: #94a3b8;
}
/* Hour lines are painted, not stacked — a background gradient can't be
   knocked out of alignment by an event block the way sibling rows can. */
.wdp-vcs-col {
  position: relative;
  height: 400px;
  border-left: 1px solid #f1f5f9;
  background-image: repeating-linear-gradient(
    to bottom, #eef2f7 0 1px, transparent 1px 40px
  );
}
.wdp-vcs-col.is-weekend { background-color: #fbfcfe; }
.wdp-vcs-col.is-today   { background-color: #f2f8fd; }
.wdp-vcs-ev {
  position: absolute; left: 2px; right: 2px;
  background: color-mix(in srgb, var(--ev) 14%, #fff);
  border-left: 3px solid var(--ev);
  border-radius: 4px; padding: 2px 5px;
  overflow: hidden; cursor: default;
}
.wdp-vcs-ev-t { display: block; font-size: 9.5px; font-weight: 700; color: var(--ev); }
.wdp-vcs-ev-n {
  display: block; font-size: 10.5px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wdp-vcs-spill {
  position: absolute; left: 2px; right: 2px; bottom: 2px;
  font-size: 9.5px; font-weight: 700; color: #b45309;
  background: #fef3c7; border-radius: 4px; padding: 1px 4px; text-align: center;
}

/* ── TIME: logged vs planned ─────────────────────────────────────────── */
.wdp-vctd-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; }
.wdp-vctd { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wdp-vctd-val { font-size: 11px; font-weight: 800; color: #0f172a; height: 14px; }
.wdp-vctd-bar {
  width: 100%; height: 68px; border-radius: 6px 6px 3px 3px;
  background: #f1f5f9; display: flex; align-items: flex-end; overflow: hidden;
}
.wdp-vctd-bar i {
  display: block; width: 100%; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  transition: height .3s ease;
}
.wdp-vctd.is-today .wdp-vctd-bar { box-shadow: 0 0 0 2px #bfdbfe; }
.wdp-vctd.is-today .wdp-vctd-lbl { color: #1d4ed8; }
.wdp-vctd-lbl { font-size: 10px; font-weight: 750; color: #94a3b8; }

.wdp-vctc { padding: 8px 0 10px; }
.wdp-vctc + .wdp-vctc { border-top: 1px solid #f1f5f9; }
.wdp-vctc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wdp-vctc-label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: #0f172a; }
.wdp-vctc-gap { font-size: 11px; font-weight: 750; color: #94a3b8; }
.wdp-vctc-gap.is-up   { color: #b45309; }
.wdp-vctc-gap.is-down { color: #2563eb; }
.wdp-vctc-pair { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.wdp-vctc-k { width: 52px; flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: #94a3b8; }
.wdp-vctc-track { flex: 1; height: 8px; border-radius: 100px; background: #f1f5f9; overflow: hidden; }
.wdp-vctc-track i { display: block; height: 100%; border-radius: 100px; transition: width .3s ease; }
.wdp-vctc-v { width: 42px; flex-shrink: 0; text-align: right; font-size: 11.5px; font-weight: 750; color: #334155; }

/* ── TIME OFF ────────────────────────────────────────────────────────── */
.wdp-vco-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 12px; }
.wdp-vco-day {
  text-align: center; padding: 7px 2px 8px; border-radius: 9px;
  background: #f8fafc; border: 1px solid #eef2f7;
}
.wdp-vco-day.is-weekend { opacity: .6; }
.wdp-vco-day.is-today { border-color: #bfdbfe; box-shadow: 0 0 0 1px #bfdbfe; }
.wdp-vco-day.is-off { background: #fffbeb; border-color: #fde68a; }
.wdp-vco-dow { display: block; font-size: 9.5px; font-weight: 750; color: #94a3b8; letter-spacing: .04em; text-transform: uppercase; }
.wdp-vco-num { display: block; font-size: 15px; font-weight: 700; color: #334155; line-height: 1.2; }
.wdp-vco-state { display: block; font-size: 9.5px; font-weight: 700; color: #94a3b8; margin-top: 1px; }
.wdp-vco-day.is-off .wdp-vco-state { color: #b45309; }
.wdp-vco-day.is-off .wdp-vco-num { color: #92400e; }
.wdp-vco-note {
  margin: 10px 22px 0; padding: 9px 11px;
  font-size: 11.5px; line-height: 1.55; color: #475569; font-weight: 500;
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 9px;
}
.wdp-vco-note b { font-weight: 750; color: #0f172a; }

/* Narrow: the calendar is the one thing that cannot compress to a phone
   width and stay a calendar, so it scrolls sideways inside the pane rather
   than squeezing seven columns into 320px. */
@media (max-width: 700px) {
  .wdp-vcs { overflow-x: auto; }
  .wdp-vcs-head, .wdp-vcs-rota, .wdp-vcs-all, .wdp-vcs-grid { min-width: 620px; }
  .wdp-vcp-head { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE COMPANY CARD — the same tabbed frame as the employee card
   A client card in Team → Capacity opens a company card with four tabs
   (Projects / Work Streams / Hours / Budget), so it inherits the staff card's
   fixed frame: the dialog is one height for every tab and the panes scroll
   inside it, because a dialog that resizes under the cursor moves the tab you
   were aiming at between the mousedown and the click.

   ⚠️ Do NOT write `font: … inherit` on anything in here. The shorthand with an
   `inherit` component is invalid CSS and browsers drop the WHOLE declaration.
   Set `font-family: inherit` on its own line instead.
   ══════════════════════════════════════════════════════════════════════════ */
.wdp-popup.wdp-popup--stacked:has(.wdp-vcard.is-account) {
  max-width: 900px;
  min-height: min(80vh, 800px); max-height: 94vh;
  height: min(92vh, 880px);
}
.wdp-vcard.is-account { flex: 1; min-height: 0; }

/* The one-line summary under the company name: why this company is on screen. */
.wdp-acline { margin-top: 4px; font-weight: 650; color: #475569; }
.wdp-acline span { color: #cbd5e1; margin: 0 2px; }
.wdp-acline b.is-bad { color: #dc2626; font-weight: 800; }

/* A row plus the thin bar that belongs to it. The bar is indented to clear the
   row's colour spine so the two read as one object. */
.wdp-acg { padding-bottom: 2px; }
.wdp-acg + .wdp-acg { border-top: 1px solid #f1f5f9; }
.wdp-acg .wdp-vcard-wk-row + .wdp-vcard-wk-row,
.wdp-acg .wdp-vcard-wk-row { border-top: 0; }
/* Flex, because the week lens splits a row's track into an owned segment and
   an unowned one — two <i>s that have to sit side by side rather than stack.
   A single-segment track is unaffected. */
.wdp-acg-track {
  display: flex;
  height: 3px; border-radius: 100px; background: #f1f5f9;
  overflow: hidden; margin: 0 2px 9px 14px;
}
.wdp-acg-track i { display: block; flex: 0 0 auto; height: 100%; border-radius: 100px; transition: width .3s ease; }

/* The fact line under a row name. Wraps rather than truncating — every item on
   it is a number somebody came here to read, so hiding the fourth one behind an
   ellipsis defeats the row. */
.wdp-acsub { flex-wrap: wrap; row-gap: 2px; }
.wdp-acx { flex-shrink: 0; }
.wdp-acx.is-bad { color: #dc2626; font-weight: 700; }
.wdp-acx.is-quiet { color: #cbd5e1; }

/* A section head that carries a right-hand chip: a project name over its
   streams, or "Where the hours went" over the by-project/by-stream switch. */
.wdp-acsec {
  display: flex; align-items: center; gap: 10px;
  text-transform: none; letter-spacing: 0;
}
.wdp-acsec-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 800; color: #0f172a; letter-spacing: -.01em;
  cursor: pointer;
}
.wdp-acsec-name:hover { color: #1d4ed8; }
.wdp-acsec-name.is-static { cursor: default; color: #64748b; }
.wdp-acsec-name.is-static:hover { color: #64748b; }
.wdp-acsec-n {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700; color: #94a3b8;
  letter-spacing: .04em; text-transform: uppercase;
}

/* By project ⇄ by work stream. Two readings of one total, so it is a switch
   and not two tabs — the number above it does not change either way. */
.wdp-acseg {
  display: inline-flex; flex-shrink: 0; gap: 2px;
  padding: 2px; border-radius: 9px;
  background: #f1f5f9; border: 1px solid #e6ecf4;
}
.wdp-acseg-btn {
  font-family: inherit;
  font-size: 10.5px; font-weight: 750; color: #64748b;
  letter-spacing: .01em; text-transform: none;
  background: transparent; border: 0; border-radius: 7px;
  padding: 4px 9px; cursor: pointer; white-space: nowrap;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.wdp-acseg-btn:hover { color: #0f172a; }
.wdp-acseg-btn:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }
.wdp-acseg-btn.is-active {
  color: #1d4ed8; background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
}

/* Budget buckets, nested under the project they fund. Deliberately quiet — the
   row above already carries the verdict; this is the receipt. */
.wdp-acbk {
  margin: 0 2px 8px 14px; padding: 6px 10px;
  background: #f8fafc; border-radius: 8px;
}
.wdp-acbk-row {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 10.5px; font-weight: 650; color: #64748b;
}
.wdp-acbk-row + .wdp-acbk-row { margin-top: 4px; }
.wdp-acbk-n {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wdp-acbk-n i { font-style: normal; color: #a8b3c4; }
.wdp-acbk-v { flex-shrink: 0; font-weight: 800; color: #334155; }
.wdp-acbk-v.is-bad { color: #dc2626; }

/* Where a pane says what its numbers do NOT cover. Never decorative: it exists
   so a total is never read as complete when something contributed nothing. */
.wdp-acnote {
  margin-top: 11px; padding: 8px 11px;
  font-size: 11px; font-weight: 550; line-height: 1.45; color: #64748b;
  background: #f8fafc; border-radius: 9px;
  border-left: 3px solid #e2e8f0;
}
.wdp-acnote.is-warn {
  color: #92400e; background: #fffbeb; border-left-color: #f59e0b;
}

/* ══ THE RANGE BAR ═══════════════════════════════════════════════════════
   Above the tab strip, because it governs every pane behind it — a control
   sitting inside one tab reads as scoped to that tab, and this is not.
   Tyler, 2026-08-17: *"I'm able to change my range and stuff like that."*
   ⚠️ flex-shrink:0 — the body is a flex column whose LAST child (the pane
   wrap) is the only thing allowed to scroll. Without it a long custom range
   squeezes the bar to nothing instead of the pane scrolling. */
.wdp-vcr {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  flex-shrink: 0;
  padding: 10px 14px 9px;
  background: #fff;
  border-bottom: 1px solid #eef2f8;
}
.wdp-vcr-pills { display: flex; gap: 3px; flex-wrap: wrap; }
.wdp-vcrp {
  font-family: inherit; font-size: 12px; font-weight: 650; color: #475569;
  background: #f4f7fb; border: 1px solid transparent; border-radius: 100px;
  padding: 5px 11px; cursor: pointer; white-space: nowrap;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.wdp-vcrp:hover { background: #e8eef7; color: #0f172a; }
.wdp-vcrp:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }
.wdp-vcrp.is-active {
  background: #eaf0ff; color: #1d4ed8; border-color: #c7d7fe; font-weight: 750;
}
/* The two date inputs are hidden until Custom is asked for — four controls for
   a question 90% of opens answer with one pill is noise. */
.wdp-vcr-when { display: none; align-items: center; gap: 8px; }
.wdp-vcr.is-custom .wdp-vcr-when { display: flex; }
.wdp-vcr-when label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 650; color: #94a3b8; text-transform: uppercase;
  letter-spacing: .04em;
}
.wdp-vcr-when input[type="date"] {
  font-family: inherit; font-size: 12px; font-weight: 600; color: #0f172a;
  background: #fff; border: 1px solid #dbe3ee; border-radius: 8px;
  padding: 4px 7px; text-transform: none; letter-spacing: 0;
}
.wdp-vcr-when input[type="date"]:focus-visible { outline: 2px solid #1d4ed8; outline-offset: -1px; }
/* The window in words, last and right-aligned — it is a READING of the pills,
   so it must never look like another control. */
.wdp-vcr-lbl {
  margin-left: auto; text-align: right;
  display: flex; flex-direction: column; line-height: 1.25;
  font-size: 12.5px; font-weight: 700; color: #0f172a; white-space: nowrap;
}
.wdp-vcr-lbl span { font-size: 10.5px; font-weight: 650; color: #94a3b8; }

/* ══ THE PLAN TAB'S ROWS ═════════════════════════════════════════════════
   One row per stored capacityPlan row, in the same columns the project's own
   plan table uses: what it is aimed at · the rate · the hours · what landed.
   Deliberately NOT a <table> — the popup is 620px and a five-column table
   either scrolls sideways or crushes the names; a grid row wraps its own
   sub-line instead. */
.wdp-vcpl-sum {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 22px 12px; padding: 10px 13px;
  background: #f6f9fd; border: 1px solid #e6ecf4; border-radius: 11px;
  font-size: 12.5px; font-weight: 620; color: #475569;
}
.wdp-vcpl-sum b { font-size: 16px; font-weight: 800; color: #0f172a; }
.wdp-vcpl-sum.is-over { background: #fef4f4; border-color: #fbd9d9; }
.wdp-vcpl-sum em {
  margin-left: auto; font-style: normal; font-weight: 750; color: #b91c1c;
}
.wdp-vcpl-note {
  margin: -4px 22px 12px; font-size: 11.5px; font-weight: 600; color: #94a3b8;
}
.wdp-vcpl-grp { margin: 0 22px 12px; border: 1px solid #e9eef6; border-radius: 12px; overflow: hidden; }
.wdp-vcpl-grp-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; background: #fbfcfe; border-bottom: 1px solid #eef2f8;
}
.wdp-vcpl-grp-head[data-vc-program] { cursor: pointer; }
.wdp-vcpl-grp-head[data-vc-program]:hover { background: #f1f5fb; }
.wdp-vcpl-grp-name {
  font-size: 13px; font-weight: 750; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wdp-vcpl-grp-h { margin-left: auto; text-align: right; display: flex; align-items: baseline; gap: 7px; }
.wdp-vcpl-grp-h b { font-size: 13.5px; font-weight: 800; color: #0f172a; }
.wdp-vcpl-grp-h span { font-size: 11px; font-weight: 650; color: #94a3b8; }

.wdp-vcpl-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 13px; border-top: 1px solid #f2f6fb;
}
.wdp-vcpl-row:first-of-type { border-top: 0; }
.wdp-vcpl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wdp-vcpl-stream {
  font-size: 12.5px; font-weight: 700; color: #0f172a;
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
.wdp-vcpl-stream em { font-style: normal; font-weight: 600; color: #94a3b8; }
.wdp-vcpl-wk {
  font-size: 10px; font-weight: 700; color: #64748b; letter-spacing: .02em;
  background: #eef2f8; border-radius: 100px; padding: 1px 7px;
}
/* The deliverables the row is AIMED at. Chips, because a row routinely names
   two or three and a comma list reads as one long title. */
.wdp-vcpl-aims { display: flex; flex-wrap: wrap; gap: 4px; }
.wdp-vcpl-aims em {
  font-style: normal; font-size: 11px; font-weight: 650; color: #1d4ed8;
  background: #eef3ff; border-radius: 6px; padding: 2px 7px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wdp-vcpl-outcome { font-size: 11.5px; font-weight: 600; color: #64748b; }
.wdp-vcpl-rate, .wdp-vcpl-hrs, .wdp-vcpl-log {
  display: flex; flex-direction: column; align-items: flex-end;
  flex-shrink: 0; line-height: 1.3; text-align: right;
}
.wdp-vcpl-rate { font-size: 11.5px; font-weight: 700; color: #475569; min-width: 74px; }
.wdp-vcpl-rate em { font-style: normal; font-weight: 650; color: #cbd5e1; }
.wdp-vcpl-rate span { font-size: 10.5px; font-weight: 650; color: #94a3b8; }
.wdp-vcpl-hrs { min-width: 56px; }
.wdp-vcpl-hrs b { font-size: 13.5px; font-weight: 800; color: #0f172a; }
.wdp-vcpl-hrs span { font-size: 10.5px; font-weight: 650; color: #94a3b8; }
.wdp-vcpl-log { min-width: 52px; }
.wdp-vcpl-log b { font-size: 12.5px; font-weight: 750; }
.wdp-vcpl-log span { font-size: 9.5px; font-weight: 700; color: #cbd5e1; text-transform: uppercase; letter-spacing: .05em; }
.wdp-vcpl-log.is-ok b   { color: #15803d; }
.wdp-vcpl-log.is-part b { color: #b45309; }
.wdp-vcpl-log.is-none b { color: #cbd5e1; }

/* ── TIME ENTRY — EDIT MODE ────────────────────────────────
   Same two-up grid the capture form already used. Tyler, 2026-08-21: *"a lot
   of this stuff doesn't need to take up so much space. You can put them side
   by side so the description box can just naturally be bigger."* */
.wdp-popup--teedit .wdp-te-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.wdp-popup--teedit .wdp-te-fieldrow.is-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .wdp-popup--teedit .wdp-te-form { grid-template-columns: 1fr; } }
/* Under a control, not beside it — a hint that shares the row competes with
   the value for the same eye. */
.wdp-te-hint { font-size: 11.5px; line-height: 1.4; color: #94a3b8; }
/* Who logged it and what it went to, on ONE band: two stacked sections pushed
   the description off the bottom, which is the thing this pass was fixing. */
.wdp-te-idrow { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.wdp-te-idrow .wdp-te-trail { flex: 1 1 260px; }
/* The only field anyone reads back later. It gets the room. */
textarea.wdp-te-desc-in--tall { min-height: 190px; line-height: 1.6; }
.wdp-te-savenote { align-self: center; font-size: 12px; color: #94a3b8; }
select.wdp-te-input { cursor: pointer; }
/* The unit, so an editable figure still reads as hours. */
.wdp-te-kpi-suf { font-size: 17px; font-weight: 800; opacity: .5; }
.wdp-popup--teedit .wdp-te-kpi-wrap .wdp-te-kpi-in { max-width: 92px; text-align: right; }

/* Edit, on the title row. Tyler, 2026-08-21: *"your edit button is still on
   the bottom right, which I wish it was at the top, just like all the other
   ones."* Delete stays in the footer — the irreversible one does not belong a
   pixel from the one you press every time. */
.wdp-hdr-act { flex: 0 0 auto; margin-right: 4px; }
/* ── the house Edit affordance ───────────────────────────────────────
   Tyler, 2026-08-21: *"in edit mode, I don't like the emoji pencil. Use the
   same edit details as it is in work streams."* Same shape and the same amber
   badge as #gdEdit / #pdpEditBanner on the Work Stream popup — and the same on
   Program, Task and Goal. An emoji is drawn by whichever font the OS picked,
   at a weight nothing else on the row is wearing. */
.wdp-hdr-act--edit {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
}
.wdp-hdr-act--edit .wdp-hdr-act-ic { width: 14px; height: 14px; flex: 0 0 auto; }
.wdp-hdr-act--edit .wdp-hdr-act-lbl { line-height: 1; }
.wdp-hdr-editing {
  flex: 0 0 auto;
  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: wdpEditBadgeIn .25s ease;
}
.wdp-hdr-editing svg { width: 11px; height: 11px; }
@keyframes wdpEditBadgeIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
/* The whole header warms while you are editing — the fourth copy of the signal
   the other detail popups already give. */
.wdp-popup--teedit .wdp-header {
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
  border-bottom: 1px solid #fdba74;
}

/* The trail is three PICKERS in edit mode. A dashed chip reads as “this can
   change”; is-warn is the one you have to answer before Save will go. */
.wdp-te-chip--edit.is-warn { border-style: solid; border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.wdp-te-chip--edit.is-warn .wdp-te-chip-k { color: #b45309; }
.wdp-te-movewarn { margin-top: 10px; font-size: 12px; line-height: 1.5; color: #92400e;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 9px 11px; }
.wdp-te-savenote.is-warn { color: #b45309; font-weight: 700; }
/* A locked control still has to look readable rather than broken — “Internal”
   is an answer, not a disabled field waiting for one. */
.wdp-te-input:disabled { background: #f8fafc; color: #475569; cursor: default; opacity: 1; }