/* ══════════════════════════════════════════════════════════════
   WK PLAN BOARD — the allocation surface on Projects ▸ Capacity
   ──────────────────────────────────────────────────────────────
   🚨 THE FIRST BUILD WAS 30px ROWS OF 12.5px TEXT AND TYLER'S WORD
   FOR IT WAS "really, really bad… everything is way too thin." The
   density here is deliberate and it is the whole point of this file:

     company band   56px    project row  54px    person row  48px
     name text      14px/700           numbers  14px/750
     an hours box   36px, BORDERED — a bare number in a table cell
                    reads as text, not as something you can type in

   Change a height and change the one beside it, or the bands stop
   reading as a hierarchy and it goes back to looking like a log file.

   ⚠️ IT IS A REAL <table>. A spreadsheet needs a sticky header row AND
   a sticky first column at once, and position:sticky on <th> inside a
   scroll container is the only thing that gets both without a second
   shadow table drifting a pixel per row.
   ⚠️ THE SCROLLER IS THE TABLE'S OWN WRAPPER. The page body must never
   scroll sideways because a twelve-week month is on screen.
   ══════════════════════════════════════════════════════════════ */

.wkpb {
  background: var(--surf, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,.06));
  margin: 0 0 20px;
  overflow: hidden;
  --wkpb-row: 48px;
  --wkpb-pad: 20px;
}

/* ── head ─────────────────────────────────────────────────────── */
.wkpb-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px var(--wkpb-pad) 14px;
}
.wkpb-title { flex: 1 1 auto; min-width: 0; }
.wkpb-title h3 {
  margin: 0 0 3px; font-size: 17px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink, #161616);
}
.wkpb-title p {
  margin: 0; font-size: 12.5px; font-weight: 500; line-height: 1.4;
  color: var(--ink3, #8d8d8d);
}
.wkpb-act {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--border, #e0e0e0); background: #fff;
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--ink2, #525252);
  cursor: pointer; transition: background .14s, border-color .14s, color .14s;
}
.wkpb-act:hover { background: var(--c-purple-bg, #f5f3ff); border-color: var(--c-purple-soft, #c4b5fd); color: var(--c-purple, #7c3aed); }
.wkpb-act:active { transform: translateY(1px); }

/* ── control bar ──────────────────────────────────────────────── */
.wkpb-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 0 var(--wkpb-pad) 14px;
  border-bottom: 1px solid var(--border-s, #f4f4f4);
}
.wkpb-bar-l, .wkpb-bar-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wkpb-bar-r { margin-left: auto; }

/* The period, stated not offered — the picker lives at the top of the page. */
.wkpb-period {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 5px 13px 5px 0; margin-right: 2px;
  border-right: 1px solid var(--border, #e0e0e0);
}
.wkpb-period b { font-size: 13px; font-weight: 800; color: var(--ink, #161616); letter-spacing: -.01em; }
.wkpb-period span { font-size: 11.5px; font-weight: 600; color: var(--ink3, #8d8d8d); }

.wkpb-seg {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--wt-neutral-bg, #f4f4f4); border-radius: 10px;
}
.wkpb-seg-b {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--ink2, #525252);
  padding: 7px 14px; border-radius: 8px;
  transition: background .14s, color .14s, box-shadow .14s;
}
.wkpb-seg-b:hover { color: var(--ink, #161616); }
.wkpb-seg-b.is-on { background: #fff; color: var(--ink, #161616); box-shadow: 0 1px 3px rgba(0,0,0,.10); }

.wkpb-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px; border-radius: 10px;
  border: 1px dashed var(--border, #e0e0e0); background: #fff;
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--ink3, #8d8d8d);
  cursor: pointer; transition: background .14s, border-color .14s, color .14s;
}
.wkpb-chip b {
  font-size: 11px; font-weight: 800; min-width: 20px; text-align: center;
  padding: 2px 7px; border-radius: 6px;
  background: var(--wt-neutral-bg, #f4f4f4); color: var(--ink2, #525252);
}
.wkpb-chip:hover { border-color: var(--ink4, #c6c6c6); color: var(--ink, #161616); }
.wkpb-chip.is-on {
  border-style: solid; border-color: var(--c-blue, #004b7c);
  background: var(--c-blue-bg, #e6f3ff); color: var(--c-blue, #004b7c);
}
.wkpb-chip.is-on b { background: var(--c-blue, #004b7c); color: #fff; }

.wkpb-search {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border, #e0e0e0); border-radius: 10px;
  padding: 0 12px; height: 34px; background: #fff; color: var(--ink3, #8d8d8d);
  transition: border-color .14s, box-shadow .14s;
}
.wkpb-search:focus-within { border-color: var(--c-blue, #004b7c); box-shadow: 0 0 0 3px var(--c-blue-bg, #e6f3ff); }
.wkpb-search input {
  border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px;
  width: 190px; color: var(--ink, #161616);
}

/* ── THE SAVE PAIR ────────────────────────────────────────────────
   🚨 ONE CLASS, ONE GEOMETRY. Tyler: "the discard and save all buttons
   need to be the exact same." Same height, padding, radius, weight and
   min-width — colour is the only thing that separates them. Change one
   of these rules and change both. */
.wkpb-acts { display: inline-flex; align-items: center; gap: 10px; }
.wkpb-dirty { font-size: 12px; font-weight: 600; color: var(--ink3, #8d8d8d); white-space: nowrap; }
.wkpb-acts.is-dirty .wkpb-dirty { color: var(--c-yellow, #f59e0b); font-weight: 700; }
.wkpb-btn {
  /* the shared geometry — see the banner */
  height: 34px; min-width: 104px; padding: 0 18px;
  border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: -.005em;
  cursor: pointer; display: inline-grid; place-items: center;
  transition: background .14s, border-color .14s, color .14s, opacity .14s;
}
.wkpb-btn:disabled { opacity: .4; cursor: default; }
.wkpb-btn--ghost { background: #fff; border-color: var(--c-red-soft, #fecdd3); color: var(--c-red, #ef4444); }
.wkpb-btn--ghost:hover:not(:disabled) { background: var(--c-red-bg, #fff1f1); border-color: var(--c-red, #ef4444); }
.wkpb-btn--go { background: var(--c-green, #16a34a); border-color: var(--c-green, #16a34a); color: #fff; }
.wkpb-btn--go:hover:not(:disabled) { background: #12813b; border-color: #12813b; }
.wkpb-acts.is-busy .wkpb-btn { opacity: .5; pointer-events: none; }

/* ── the bulk bar ─────────────────────────────────────────────── */
.wkpb-bulk {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px var(--wkpb-pad);
  background: var(--c-blue-bg, #e6f3ff);
  border-bottom: 1px solid var(--c-blue-soft, #cbd5f5);
}
.wkpb-bulk-n { font-size: 13px; font-weight: 700; color: var(--c-blue, #004b7c); }
.wkpb-bulk-n b { font-size: 15px; }
.wkpb-bulk-sep { width: 1px; height: 20px; background: var(--c-blue-soft, #cbd5f5); }
.wkpb-bulk-set {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 650; color: var(--c-blue, #004b7c);
}
.wkpb-bulk-set input {
  width: 62px; height: 32px; text-align: right; padding: 0 9px;
  border: 1px solid var(--c-blue-soft, #cbd5f5); border-radius: 8px;
  background: #fff; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--ink, #161616); font-variant-numeric: tabular-nums;
}
.wkpb-bulk-set input:focus { outline: 0; border-color: var(--c-blue, #004b7c); }
.wkpb-bulk-b {
  height: 32px; padding: 0 13px; border-radius: 8px;
  border: 1px solid var(--c-blue, #004b7c); background: var(--c-blue, #004b7c); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  transition: filter .14s, background .14s;
}
.wkpb-bulk-b:hover { filter: brightness(1.15); }
.wkpb-bulk-b.is-quiet { background: #fff; color: var(--c-blue, #004b7c); }
.wkpb-bulk-b.is-quiet:hover { background: #fff; filter: none; border-color: var(--ink, #161616); color: var(--ink, #161616); }
.wkpb-bulk-note { font-size: 11.5px; font-style: italic; color: var(--c-blue, #004b7c); opacity: .72; }

/* ── the sheet ────────────────────────────────────────────────── */
.wkpb-scroll { overflow: auto; max-height: min(70vh, 780px); overscroll-behavior-x: contain; }
.wkpb-tbl {
  border-collapse: separate; border-spacing: 0;
  width: 100%; min-width: 880px;
  font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.wkpb-tbl.is-week { min-width: 1000px; }
.wkpb-tbl th, .wkpb-tbl td {
  border-bottom: 1px solid var(--border-s, #f4f4f4);
  padding: 0; text-align: right; white-space: nowrap; vertical-align: middle;
}

/* header row — sticky top */
.wkpb-tbl thead th {
  position: sticky; top: 0; z-index: 3;
  background: #fff;
  border-bottom: 2px solid var(--border, #e0e0e0);
  padding: 11px 14px;
  font-size: 11px; font-weight: 800; color: var(--ink3, #8d8d8d);
  letter-spacing: .06em; text-transform: uppercase;
}
.wkpb-hn { min-width: 92px; }
.wkpb-hn span { display: block; font-size: 9.5px; letter-spacing: .05em; color: var(--c-blue, #004b7c); }
.wkpb-hn.is-now { background: var(--c-blue-bg, #e6f3ff); color: var(--c-blue, #004b7c); }
.wkpb-hn.is-past { color: var(--ink4, #c6c6c6); }
.wkpb-hn.is-edit { color: var(--c-green, #16a34a); }
.wkpb-hn--tot { min-width: 80px; }
.wkpb-hw { min-width: 300px; width: 40%; text-align: left !important; }

/* first column — sticky left */
.wkpb-name {
  position: sticky; left: 0; z-index: 2;
  background: var(--surf, #fff);
  text-align: left; font-weight: 600;
  min-width: 320px; max-width: 460px;
  padding: 8px 14px;
  box-shadow: 1px 0 0 var(--border-s, #f4f4f4);
}
/* ⚠️ `text-align:left` HAS TO BE RESTATED. `.wkpb-tbl th` sets every header
   right (the columns are numbers) and it outranks the bare `.wkpb-name` rule
   by one element, so the corner label floated in the middle of the column. */
.wkpb-tbl thead .wkpb-corner {
  z-index: 4; text-align: left;
  box-shadow: 1px 0 0 var(--border, #e0e0e0);
}

/* ── company band ─────────────────────────────────────────────── */
.wkpb-r--co > * { background: #f7f8fa; height: 56px; }
.wkpb-r--co .wkpb-name { background: #f7f8fa; }
.wkpb-r--co + .wkpb-r--co > * { border-top: 0; }
.wkpb-name--co { display: flex; align-items: center; gap: 11px; }
.wkpb-nm-t {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; font-weight: 650; color: var(--ink, #161616);
}
.wkpb-nm-t.is-co { font-weight: 800; font-size: 14.5px; letter-spacing: -.015em; }
.wkpb-nm-t.is-proj { font-weight: 700; font-size: 14px; cursor: pointer; letter-spacing: -.01em; }
.wkpb-nm-t.is-proj:hover { color: var(--c-blue, #004b7c); text-decoration: underline; }
/* 🚨 IF IT OPENS SOMETHING IT HAS TO LOOK LIKE IT DOES. Tyler: *"you should be
   able to click on everything."* A name that navigates and a name that does not
   cannot look identical — the underline on hover is the whole affordance. */
.wkpb-nm-t.is-open { cursor: pointer; }
.wkpb-nm-t.is-open:hover { color: var(--c-purple, #7c3aed); text-decoration: underline; text-underline-offset: 2px; }
.wkpb-nm-t.is-open:focus-visible { outline: 2px solid var(--c-purple, #7c3aed); outline-offset: 2px; border-radius: 3px; }
.wkpb-conum {
  margin-left: auto; flex: 0 0 auto;
  font-size: 11px; font-weight: 700; color: var(--ink3, #8d8d8d);
  background: #fff; border: 1px solid var(--border, #e0e0e0);
  padding: 3px 8px; border-radius: 7px;
}

/* ── project row ──────────────────────────────────────────────── */
.wkpb-r--proj > * { background: #fff; height: 54px; }
.wkpb-name--proj { display: flex; align-items: center; gap: 8px; padding-left: 26px; }
/* WARNING: align-items:flex-start. Without it the flex column centres its
   children on the widest one, so a project whose only sub-line is the long
   "Nobody on it" button drew its NAME centred while the project beside it,
   with a short face row, drew it left. A column of names that do not share a
   left edge reads as broken before it reads as anything else. */
.wkpb-pj { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; max-width: 100%; }
.wkpb-pj-sub { display: flex; align-items: center; gap: 9px; }
.wkpb-pj-n { font-size: 11px; font-weight: 650; color: var(--ink3, #8d8d8d); }
.wkpb-nobody {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--c-yellow, #f59e0b);
  text-decoration: underline; text-underline-offset: 2px;
}
.wkpb-nobody:hover { color: #b45309; }
.wkpb-fill {
  border: 1px solid var(--c-purple-soft, #c4b5fd); background: var(--c-purple-bg, #f5f3ff);
  color: var(--c-purple, #7c3aed); cursor: pointer;
  font: inherit; font-size: 10.5px; font-weight: 750;
  padding: 3px 8px; border-radius: 6px;
}
.wkpb-fill:hover { background: var(--c-purple, #7c3aed); color: #fff; border-color: var(--c-purple, #7c3aed); }

.wkpb-fold {
  flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer; color: var(--ink3, #8d8d8d);
  border-radius: 6px; transition: transform .16s var(--ease-spring, ease), background .14s;
}
.wkpb-fold:hover { background: var(--wt-neutral-bg, #f4f4f4); color: var(--ink, #161616); }
.wkpb-fold[aria-expanded="false"] { transform: rotate(-90deg); }

/* ── person row ───────────────────────────────────────────────── */
.wkpb-r--person > * { background: #fff; height: var(--wkpb-row); }
.wkpb-r--person:hover > * { background: #fbfcfd; }
.wkpb-r--person.is-sel > * { background: var(--c-blue-bg, #e6f3ff); }
.wkpb-name--person { display: flex; align-items: center; gap: 10px; padding-left: 26px; }
.wkpb-tick { flex: 0 0 auto; display: grid; place-items: center; width: 18px; }
.wkpb-tick input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--c-blue, #004b7c); }

/* ── add-a-person row ─────────────────────────────────────────── */
.wkpb-r--add > * { background: #fff; height: 38px; }
.wkpb-name--add { padding-left: 52px; }
.wkpb-addp {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 650; color: var(--ink3, #8d8d8d);
  padding: 5px 9px; border-radius: 7px;
}
.wkpb-addp:hover { background: var(--c-blue-bg, #e6f3ff); color: var(--c-blue, #004b7c); }

/* ── numbers ──────────────────────────────────────────────────── */
.wkpb-num { padding: 6px 14px; font-size: 13.5px; font-weight: 700; color: var(--ink, #161616); }
.wkpb-num i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink3, #8d8d8d); margin-left: 1px; }
.wkpb-num b { font-weight: 750; }
.wkpb-dash { color: var(--ink4, #c6c6c6); font-weight: 600; }
.wkpb-num--co { font-weight: 800; }
.wkpb-num--left b { color: var(--c-blue, #004b7c); }
.wkpb-num--set { min-width: 84px; }
.wkpb-set {
  display: inline-block; font-size: 12px; font-weight: 750;
  color: var(--c-purple, #7c3aed); background: var(--c-purple-bg, #f5f3ff);
  padding: 4px 9px; border-radius: 7px;
}
.wkpb-set i { font-style: normal; font-size: 10px; opacity: .7; color: inherit; }
.wkpb-set.is-none { background: transparent; color: var(--ink4, #c6c6c6); padding: 0; }
.wkpb-set.is-proj { background: transparent; color: var(--ink2, #525252); padding: 0; font-size: 13px; }

/* placed / target, with a fill bar under it */
.wkpb-num--meter { min-width: 104px; }
.wkpb-meter { position: relative; display: inline-block; padding-bottom: 6px; }
.wkpb-meter b { font-size: 14px; font-weight: 800; }
.wkpb-meter i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink3, #8d8d8d); }
.wkpb-meter u {
  position: absolute; right: 0; bottom: 0; height: 3px; border-radius: 2px;
  text-decoration: none; background: currentColor; opacity: .5; max-width: 100%;
}
.wkpb-meter.is-short { color: var(--c-yellow, #f59e0b); }
.wkpb-meter.is-ok { color: var(--c-green, #16a34a); }
.wkpb-meter.is-past { color: var(--c-blue, #004b7c); }
.wkpb-meter.is-plain { color: var(--ink, #161616); }
.wkpb-meter.is-none, .wkpb-meter.is-off { color: var(--ink4, #c6c6c6); }

/* a person's week against their ceiling, in the By-person grouping */
.wkpb-num--cap { position: relative; min-width: 96px; }
.wkpb-num--cap b { font-size: 14px; font-weight: 800; }
.wkpb-num--cap u {
  position: absolute; right: 14px; bottom: 9px; height: 3px; border-radius: 2px;
  text-decoration: none; background: var(--c-green, #16a34a); max-width: calc(100% - 28px);
}
.wkpb-num--cap.is-over b { color: var(--c-red, #ef4444); }
.wkpb-num--cap.is-over u { background: var(--c-red, #ef4444); }

/* ── AN HOURS BOX LOOKS LIKE ONE ──────────────────────────────────
   🚨 The first build made the input transparent and borderless, so an
   editable cell was indistinguishable from a printed number and the
   whole sheet read as static. It has a border now. */
/* WARNING: A COLUMN RULE, NOT DECORATION. Two adjacent filled cells are both
   green and 8px apart, and on the first screenshot Tyler'''s 17h and 7h read as
   ONE box spanning two weeks. The hairline is what makes a week a week. */
.wkpb-cell { padding: 6px 9px; border-left: 1px solid var(--border-s, #f4f4f4); }
.wkpb-tbl:not(.is-week) .wkpb-hn:not(.wkpb-hn--tot),
.wkpb-tbl:not(.is-week) .wkpb-num--meter,
.wkpb-tbl:not(.is-week) .wkpb-num--cap,
.wkpb-tbl:not(.is-week) tfoot td[data-week] { border-left: 1px solid var(--border-s, #f4f4f4); }
.wkpb-in {
  width: 100%; min-width: 62px; height: 36px;
  border: 1px solid var(--border, #e0e0e0); border-radius: 9px;
  background: #fff; outline: 0;
  font: inherit; font-size: 14px; font-weight: 700;
  text-align: right; padding: 0 11px;
  color: var(--ink, #161616); font-variant-numeric: tabular-nums;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.wkpb-cell:hover .wkpb-in { border-color: var(--ink4, #c6c6c6); }
.wkpb-cell.has-h .wkpb-in {
  background: var(--c-green-bg, #defbe6); border-color: var(--c-green-soft, #a7f0ba);
  color: #0f7a37;
}
.wkpb-cell.is-off .wkpb-in { background: #fafafa; color: var(--ink4, #c6c6c6); border-style: dashed; }
.wkpb-cell.is-off.has-h .wkpb-in { background: var(--c-green-bg, #defbe6); color: #0f7a37; border-style: solid; }
/* 🚨 OVER IS ABOUT THE PERSON'S WHOLE WEEK, not this cell. One project can look
   small and still be the hour that pushed somebody past their Shift ceiling, so
   the mark goes on every cell in that person's column. */
.wkpb-cell.is-over .wkpb-in {
  background: var(--c-red-bg, #fff1f1); border-color: var(--c-red, #ef4444); color: var(--c-red, #ef4444);
}
.wkpb-cell.is-dirty .wkpb-in { border-color: var(--c-yellow, #f59e0b); box-shadow: 0 0 0 3px var(--c-yellow-bg, #fef3c7); }
.wkpb-in:focus { border-color: var(--c-blue, #004b7c); box-shadow: 0 0 0 3px var(--c-blue-bg, #e6f3ff); }

/* ── "working on": the deliverable chips ──────────────────────── */
.wkpb-work { text-align: left !important; padding: 6px 14px; white-space: normal; }
.wkpb-dvs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wkpb-dv {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 230px;
  background: var(--c-teal-bg, #f0fdfa); border: 1px solid #99f6e4;
  color: var(--c-teal, #0d9488);
  font-size: 11.5px; font-weight: 650;
  padding: 4px 4px 4px 9px; border-radius: 7px;
}
.wkpb-dv b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The name half opens the deliverable; the × takes it off this person. Two
   targets in one chip, so each has to look pressable on its own. */
.wkpb-dv-o {
  border: 0; background: transparent; padding: 1px 3px; margin: -1px -1px -1px -3px;
  cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 650; color: inherit;
  max-width: 178px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left;
}
.wkpb-dv-o:hover { background: rgba(13,148,136,.16); text-decoration: underline; }
.wkpb-dv-x {
  flex: 0 0 auto; width: 16px; height: 16px; display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer; border-radius: 4px;
  color: inherit; font-size: 14px; line-height: 1; opacity: .55;
}
.wkpb-dv-x:hover { opacity: 1; background: rgba(13,148,136,.14); }
.wkpb-dv-add {
  border: 1px dashed var(--border, #e0e0e0); background: transparent;
  color: var(--ink3, #8d8d8d); cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 650;
  padding: 4px 9px; border-radius: 7px;
}
.wkpb-dv-add:hover { border-color: var(--c-teal, #0d9488); color: var(--c-teal, #0d9488); background: var(--c-teal-bg, #f0fdfa); }

/* ── row totals ───────────────────────────────────────────────── */
.wkpb-tot {
  padding: 6px 14px; font-size: 13.5px; font-weight: 750; color: var(--ink2, #525252);
  background: #fcfcfd; border-left: 1px solid var(--border-s, #f4f4f4);
}
.wkpb-tot.is-proj, .wkpb-tot.is-co { font-weight: 850; color: var(--ink, #161616); }

/* ── the foot ─────────────────────────────────────────────────── */
.wkpb-tbl tfoot th, .wkpb-tbl tfoot td {
  position: sticky; bottom: 0; z-index: 3;
  background: #f7f8fa; border-top: 2px solid var(--border, #e0e0e0); border-bottom: 0;
  padding: 12px 14px; font-weight: 800; font-size: 13.5px; color: var(--ink, #161616);
  height: 46px;
}
.wkpb-tbl tfoot .wkpb-name { z-index: 4; text-align: left; box-shadow: 1px 0 0 var(--border, #e0e0e0); }
.wkpb-f--free th, .wkpb-f--free td { color: var(--c-green, #16a34a); font-weight: 750; }
/* 🚨 TWO STICKY ROWS CANNOT BOTH SIT AT bottom:0 — they stack, and "Allocated"
   spent this whole build hidden underneath "Still free". The upper band is
   offset by the lower band's own height; change one and change the other.
   🚨 AND THE OFFSET BELONGS TO THE ROW'S POSITION, NOT TO ITS NAME. Written as
   a plain `.wkpb-f--tot` rule it also hit the FORECAST, whose foot is a single
   Team row — sticky then dragged that row 46px UP, straight over the last
   person on the board. Three people rendered, two were visible, and the team
   total still counted all three. Every rect measured correct; only a
   screenshot caught it. So the 46px is scoped to a foot that HAS a second row
   under it. */
.wkpb-tbl tfoot .wkpb-f--tot:not(:last-child) th,
.wkpb-tbl tfoot .wkpb-f--tot:not(:last-child) td {
  bottom: 46px;
  border-bottom: 1px solid var(--border-s, #f4f4f4);
}

.wkpb-empty, .wkpb-empty-td {
  padding: 46px 22px; text-align: center;
  font-size: 13.5px; line-height: 1.55; color: var(--ink3, #8d8d8d);
}
.wkpb-empty b { color: var(--ink, #161616); }

/* ── faces ────────────────────────────────────────────────────── */
.wkpb-face, .wkpb-comark {
  position: relative; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--_cl, #64748b) 15%, #fff);
  color: var(--_cl, #64748b);
  font-size: 10.5px; font-weight: 800; font-style: normal; letter-spacing: -.02em;
}
.wkpb-comark { border-radius: 8px; width: 30px; height: 30px; }
.wkpb-face.is-lg { width: 32px; height: 32px; font-size: 12px; }
.wkpb-face img, .wkpb-comark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wkpb-comark img { object-fit: contain; background: #fff; }
.wkpb-faces { display: inline-flex; align-items: center; }
.wkpb-face.is-stack {
  width: 22px; height: 22px; font-size: 8.5px;
  border: 2px solid #fff; margin-right: -7px;
  background: var(--_cl, #64748b); color: #fff;
}
.wkpb-face.is-stack:last-child { margin-right: 0; }
.wkpb-face.is-more { background: var(--wt-neutral-bg, #f4f4f4); color: var(--ink2, #525252); }
.wkpb-r--person .wkpb-name--person .wkpb-comark { width: 24px; height: 24px; border-radius: 6px; }

/* ── foot legend ──────────────────────────────────────────────── */
.wkpb-foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px var(--wkpb-pad); border-top: 1px solid var(--border-s, #f4f4f4);
  font-size: 11.5px; color: var(--ink3, #8d8d8d);
}
.wkpb-legend { display: inline-flex; align-items: center; gap: 7px; }
.wkpb-lg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.wkpb-lg.is-short { background: var(--c-yellow, #f59e0b); }
.wkpb-lg.is-ok { background: var(--c-green, #16a34a); }
.wkpb-lg.is-pastt { background: var(--c-blue, #004b7c); }
.wkpb-lg.is-over { background: var(--c-red, #ef4444); }
.wkpb-legend--note { margin-left: auto; }
.wkpb-legend--note b { color: var(--ink, #161616); }

/* ── popovers ─────────────────────────────────────────────────── */
/* ⚠️ FIXED, not absolute. It is appended to <body> normally and to the HOST
   when the board is natively full screen (only the fullscreen element paints),
   and absolute + scrollY is wrong in the second case. */
.wkpb-pop {
  position: fixed; z-index: 60050;
  width: 300px; max-height: 340px; overflow: auto;
  background: #fff; border: 1px solid var(--border, #e0e0e0);
  border-radius: 13px; box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,.09));
  padding: 7px;
}
.wkpb-pop-h {
  padding: 7px 9px 9px; font-size: 11px; font-weight: 800; color: var(--ink3, #8d8d8d);
  letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-s, #f4f4f4); margin-bottom: 5px;
}
.wkpb-pop-r {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink, #161616);
  padding: 8px 9px; border-radius: 9px;
}
.wkpb-pop-r:hover { background: var(--c-blue-bg, #e6f3ff); }
.wkpb-pop-r.is-dv.is-on { background: var(--c-teal-bg, #f0fdfa); color: var(--c-teal, #0d9488); }
.wkpb-pop-tick {
  flex: 0 0 auto; width: 18px; height: 18px; display: grid; place-items: center;
  border: 1.5px solid var(--border, #e0e0e0); border-radius: 5px;
  font-size: 12px; font-weight: 900; color: var(--c-teal, #0d9488);
}
.wkpb-pop-r.is-on .wkpb-pop-tick { border-color: var(--c-teal, #0d9488); background: var(--c-teal-bg, #f0fdfa); }
.wkpb-pop-dv { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wkpb-pop-dv b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkpb-pop-dv i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink3, #8d8d8d); }
.wkpb-pop-e { padding: 12px 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink3, #8d8d8d); }

/* ── dark ─────────────────────────────────────────────────────── */
:root[data-theme="dark"] .wkpb { background: #161a22; border-color: #2a3140; }
:root[data-theme="dark"] .wkpb-title h3 { color: #e2e8f0; }
:root[data-theme="dark"] .wkpb-act,
:root[data-theme="dark"] .wkpb-search,
:root[data-theme="dark"] .wkpb-chip { background: #1f2430; border-color: #333b4d; color: #cbd5e1; }
:root[data-theme="dark"] .wkpb-search input { color: #e2e8f0; }
:root[data-theme="dark"] .wkpb-seg { background: #1f2430; }
:root[data-theme="dark"] .wkpb-seg-b { color: #94a3b8; }
:root[data-theme="dark"] .wkpb-seg-b.is-on { background: #2a3140; color: #e2e8f0; }
:root[data-theme="dark"] .wkpb-period b { color: #e2e8f0; }
:root[data-theme="dark"] .wkpb-tbl thead th { background: #161a22; color: #94a3b8; border-bottom-color: #333b4d; }
:root[data-theme="dark"] .wkpb-tbl tfoot th,
:root[data-theme="dark"] .wkpb-tbl tfoot td { background: #1b202a; color: #e2e8f0; border-top-color: #333b4d; }
:root[data-theme="dark"] .wkpb-tbl th,
:root[data-theme="dark"] .wkpb-tbl td { border-bottom-color: #262c38; }
:root[data-theme="dark"] .wkpb-name,
:root[data-theme="dark"] .wkpb-r--proj > *,
:root[data-theme="dark"] .wkpb-r--person > *,
:root[data-theme="dark"] .wkpb-r--add > * { background: #161a22; }
:root[data-theme="dark"] .wkpb-r--person:hover > * { background: #1b202a; }
:root[data-theme="dark"] .wkpb-r--co > *,
:root[data-theme="dark"] .wkpb-r--co .wkpb-name { background: #1b202a; }
:root[data-theme="dark"] .wkpb-nm-t,
:root[data-theme="dark"] .wkpb-num,
:root[data-theme="dark"] .wkpb-meter.is-plain { color: #e2e8f0; }
:root[data-theme="dark"] .wkpb-conum { background: #1f2430; border-color: #333b4d; color: #94a3b8; }
:root[data-theme="dark"] .wkpb-tot { background: #1b202a; color: #cbd5e1; border-left-color: #262c38; }
:root[data-theme="dark"] .wkpb-in { background: #1f2430; border-color: #333b4d; color: #e2e8f0; }
:root[data-theme="dark"] .wkpb-cell.has-h .wkpb-in { background: rgba(22,163,74,.18); border-color: rgba(22,163,74,.5); color: #6ee7a2; }
:root[data-theme="dark"] .wkpb-cell.is-off .wkpb-in { background: #171c24; color: #64748b; }
:root[data-theme="dark"] .wkpb-cell.is-over .wkpb-in { background: rgba(239,68,68,.18); color: #fca5a5; }
:root[data-theme="dark"] .wkpb-pop { background: #161a22; border-color: #2a3140; }
:root[data-theme="dark"] .wkpb-pop-r { color: #e2e8f0; }
:root[data-theme="dark"] .wkpb-pop-r:hover { background: #1f2430; }
:root[data-theme="dark"] .wkpb-bulk { background: #16283a; border-bottom-color: #24405c; }

/* ── narrow ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .wkpb-hw { min-width: 220px; }
  .wkpb-name { min-width: 260px; }
}
@media (max-width: 860px) {
  .wkpb { --wkpb-pad: 14px; }
  .wkpb-bar-r { margin-left: 0; width: 100%; }
  .wkpb-search { flex: 1 1 auto; }
  .wkpb-search input { width: 100%; }
  .wkpb-legend--note { display: none; }
  .wkpb-period { border-right: 0; }
}


/* ══════════════════════════════════════════════════════════════
   THE 2026-09-02 BUILD — four views, the capacity chain, the
   flags, the sheets, and full screen.
   ⚠️ ONE DENSITY LADDER, STILL. Everything added here sits inside
   the row heights the head of this file states; a card list is
   allowed its own rhythm, a TABLE ROW is not.
   ══════════════════════════════════════════════════════════════ */

/* ── head actions ─────────────────────────────────────────────── */
.wkpb-headacts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
.wkpb-act.is-go {
  background: var(--c-green-bg, #ecfdf5); border-color: var(--c-green-soft, #a7f3d0);
  color: var(--c-green-ink, #047857);
}
.wkpb-act.is-go:hover { background: var(--c-green, #10b981); border-color: var(--c-green, #10b981); color: #fff; }
/* The full-screen toggle states which way it goes — pressed means you are
   IN it and this is the way out. */
.wkpb-act[aria-pressed="true"] {
  background: var(--ink, #161616); border-color: var(--ink, #161616); color: #fff;
}
.wkpb-act[aria-pressed="true"]:hover {
  background: var(--ink2, #3a3a3a); border-color: var(--ink2, #3a3a3a); color: #fff;
}

/* ── the strip: one line, every figure a door ─────────────────── */
.wkpb-strip {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  padding: 0 var(--wkpb-pad) 14px;
}
.wkpb-strip-sep { width: 1px; align-self: center; height: 26px; background: var(--border, #e0e0e0); margin: 0 8px; }
.wkpb-fig {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  padding: 7px 14px 7px 12px; border: 0; background: transparent; cursor: pointer;
  border-radius: 10px; font: inherit; text-align: left;
  transition: background .14s ease;
}
.wkpb-fig:hover { background: var(--wt-neutral-bg, #f4f4f4); }
.wkpb-fig[data-fig=""] { cursor: default; }
.wkpb-fig[data-fig=""]:hover { background: transparent; }
/* 🚨 A COUNT OF ZERO IS FLATTENED, the same is-hollow rule the capacity
   scorecards live by — a figure the reader can press and get nothing from is
   how a whole strip stops being trusted. */
.wkpb-fig.is-hollow { cursor: default; opacity: .5; }
.wkpb-fig.is-hollow:hover { background: transparent; }
.wkpb-fig.is-hollow b, .wkpb-fig.is-hollow b i { color: var(--ink3, #8d8d8d); }
/* An inline way back out of a filter that emptied the board. */
.wkpb-inlink {
  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
  font-size: inherit; font-weight: 750; color: var(--c-purple, #7c3aed);
  text-decoration: underline; text-underline-offset: 2px;
}
.wkpb-fig b {
  font-size: 19px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  color: var(--ink, #161616); font-variant-numeric: tabular-nums;
}
.wkpb-fig b i { font-style: normal; font-size: 12px; font-weight: 700; margin-left: 1px; color: var(--ink3, #8d8d8d); }
.wkpb-fig span { font-size: 10.5px; font-weight: 750; letter-spacing: .02em; color: var(--ink3, #8d8d8d); }
.wkpb-fig.is-bad b, .wkpb-fig.is-bad b i { color: var(--c-red, #dc2626); }
.wkpb-fig.is-warn b, .wkpb-fig.is-warn b i { color: var(--c-amber-ink, #b45309); }
.wkpb-fig.is-ok b, .wkpb-fig.is-ok b i { color: var(--c-green-ink, #047857); }
.wkpb-fig.is-cool b, .wkpb-fig.is-cool b i { color: var(--c-blue, #2563eb); }
.wkpb-fig.is-on { background: var(--ink, #161616); }
.wkpb-fig.is-on b, .wkpb-fig.is-on b i, .wkpb-fig.is-on span { color: #fff; }

/* ── the four view tabs ───────────────────────────────────────── */
.wkpb-seg-b b {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 5px;
  font-size: 10px; font-weight: 800; background: var(--c-amber-bg, #fffbeb);
  color: var(--c-amber-ink, #b45309);
}
.wkpb-seg-b.is-on b { background: rgba(0,0,0,.08); color: inherit; }

/* ── flag chips ───────────────────────────────────────────────── */
.wkpb-flagbar { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wkpb-flags { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.wkpb-flag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 10.5px; font-weight: 750; letter-spacing: .01em;
  border: 1px solid transparent; white-space: nowrap;
  transition: filter .14s ease, box-shadow .14s ease;
}
.wkpb-flag b { font-weight: 850; opacity: .72; }
.wkpb-flag:hover { filter: brightness(.96); }
.wkpb-flag.is-bad  { background: var(--c-red-bg, #fef2f2);   color: var(--c-red, #dc2626);        border-color: var(--c-red-soft, #fecaca); }
.wkpb-flag.is-warn { background: var(--c-amber-bg, #fffbeb); color: var(--c-amber-ink, #b45309);  border-color: var(--c-amber-soft, #fde68a); }
.wkpb-flag.is-cool { background: var(--c-blue-bg, #eff6ff);  color: var(--c-blue, #2563eb);       border-color: var(--c-blue-soft, #bfdbfe); }
.wkpb-flag.is-on { box-shadow: inset 0 0 0 1.5px currentColor; }
.wkpb-flagclr {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px;
  border-radius: 6px; border: 1px solid var(--border, #e0e0e0); background: var(--ink, #161616);
  color: #fff; font: inherit; font-size: 10.5px; font-weight: 750; cursor: pointer;
}

/* ── the reserve chip and the remaining readout ───────────────── */
/* 🚨 align-items:flex-start, FOR THE THIRD TIME IN THIS FILE. A flex column
   defaults to `stretch`, so each child becomes as wide as the widest one — and
   the name then centres itself over a sub-row of chips that is twice its
   length. `.wkpb-pj` carries the same rule and the same warning; a column of
   names that do not share a left edge reads as broken before it reads as
   anything else. */
.wkpb-pgnm, .wkpb-fcnm {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; min-width: 0; text-align: left;
}
.wkpb-pgsub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wkpb-resv {
  display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 7px;
  border-radius: 6px; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 700;
  border: 1px dashed var(--border, #e0e0e0); background: transparent; color: var(--ink3, #8d8d8d);
}
.wkpb-resv:hover { border-style: solid; color: var(--c-purple, #7c3aed); border-color: var(--c-purple-soft, #c4b5fd); }
.wkpb-resv.is-set {
  border-style: solid; background: var(--c-purple-bg, #f5f3ff);
  border-color: var(--c-purple-soft, #c4b5fd); color: var(--c-purple, #7c3aed);
}
.wkpb-resv.is-set.is-default { opacity: .78; }
.wkpb-remain { font-size: 11px; font-weight: 750; color: var(--ink3, #8d8d8d); }
.wkpb-remain.is-free { color: var(--c-green-ink, #047857); }
.wkpb-remain.is-over { color: var(--c-red, #dc2626); }
.wkpb-pgadd {
  border: 0; background: transparent; cursor: pointer; padding: 0 2px;
  font: inherit; font-size: 11px; font-weight: 750; color: var(--c-purple, #7c3aed);
}
.wkpb-pgadd:hover { text-decoration: underline; }
.wkpb-set u { font-style: normal; text-decoration: none; opacity: .5; margin-left: 1px; }

/* ── forecast ─────────────────────────────────────────────────── */
/* 🚨 THE ROW NEEDS ITS OWN HEIGHT, and this is the third time this file has
   learned it. A `<th>` set to display:flex stops being a table-cell — the
   browser wraps it in an anonymous cell and the ROW is then sized by the other
   cells, which here are short numeric ones. The flex box simply overflows: the
   forecast drew three people in the space of two and the third was UNDERNEATH
   the second, invisible, while the team foot still summed all three. Caught by
   a screenshot; every height assertion passed. Same reason `.wkpb-r--co > *`
   carries an explicit 56px, and the two must move together. */
.wkpb-r--fc > * { height: 56px; background: #fff; }
.wkpb-r--fc:hover > * { background: var(--wt-neutral-bg, #fafafa); }
.wkpb-tbl--fc .wkpb-name--fc { display: flex; align-items: center; gap: 10px; }
.wkpb-fc {
  position: relative; text-align: center; vertical-align: middle;
  padding: 4px 8px 8px; cursor: pointer; white-space: nowrap;
  font-variant-numeric: tabular-nums; transition: background .12s ease;
}
.wkpb-fc:hover { background: var(--wt-neutral-bg, #f4f4f4); }
.wkpb-fc b { font-size: 13.5px; font-weight: 800; color: var(--ink, #161616); }
.wkpb-fc i { font-style: normal; font-size: 11px; font-weight: 650; color: var(--ink3, #8d8d8d); }
.wkpb-fc u {
  position: absolute; left: 10px; right: 10px; bottom: 4px; height: 3px;
  display: block; border-radius: 2px; background: var(--c-green, #10b981);
  box-shadow: inset -1px 0 0 rgba(0,0,0,.05); text-decoration: none;
  transition: width .18s ease;
}
/* ⚠️ THE TRACK IS DRAWN BY THE CELL, not by a second element — a 0% bar with no
   track behind it reads as a rendering fault rather than as an empty week. */
.wkpb-fc::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 3px;
  border-radius: 2px; background: var(--border-s, #f4f4f4); z-index: 0;
}
.wkpb-fc u { z-index: 1; }
.wkpb-fc.is-empty b { color: var(--ink3, #8d8d8d); }
.wkpb-fc.is-under u { background: var(--c-blue, #3b82f6); }
.wkpb-fc.is-over { background: var(--c-red-bg, #fef2f2); }
.wkpb-fc.is-over b { color: var(--c-red, #dc2626); }
.wkpb-fc.is-over u { background: var(--c-red, #dc2626); }
.wkpb-fc-x {
  position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-red, #dc2626);
}
.wkpb-f--tot .is-over { color: var(--c-red, #dc2626); }

/* ── unassigned work ──────────────────────────────────────────── */
.wkpb-un { display: flex; flex-direction: column; padding: 4px 0 0; }
.wkpb-unc {
  display: flex; align-items: center; gap: 16px;
  padding: 12px var(--wkpb-pad); border-bottom: 1px solid var(--border-s, #f4f4f4);
  transition: background .12s ease;
}
.wkpb-unc:hover { background: var(--wt-neutral-bg, #fafafa); }
.wkpb-unc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wkpb-unc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wkpb-stage {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
  border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .02em;
  color: var(--_cl, #6366f1); background: color-mix(in srgb, var(--_cl, #6366f1) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--_cl, #6366f1) 28%, transparent);
}
.wkpb-unc-nm {
  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 750; letter-spacing: -.01em; color: var(--ink, #161616);
  text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wkpb-unc-nm:hover { color: var(--c-purple, #7c3aed); text-decoration: underline; }
.wkpb-unc-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wkpb-unc-pj {
  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 650; color: var(--ink3, #8d8d8d);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wkpb-unc-pj:hover { color: var(--ink, #161616); text-decoration: underline; }
.wkpb-unc-st {
  font-size: 10.5px; font-weight: 700; color: var(--ink3, #8d8d8d);
  padding: 1px 6px; border-radius: 5px; background: var(--wt-neutral-bg, #f4f4f4);
}
.wkpb-unc-nums { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; }
.wkpb-unc-n { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; min-width: 52px; }
.wkpb-unc-n b { font-size: 13px; font-weight: 800; color: var(--ink, #161616); font-variant-numeric: tabular-nums; }
.wkpb-unc-n span { font-size: 10px; font-weight: 700; color: var(--ink3, #8d8d8d); }
.wkpb-unc-n.is-soon b { color: var(--c-amber-ink, #b45309); }
.wkpb-unc-n.is-late b { color: var(--c-red, #dc2626); }
.wkpb-unc-n.is-zero b { color: var(--c-amber-ink, #b45309); }
.wkpb-unc-who { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.wkpb-unc-none { font-size: 11.5px; font-weight: 700; color: var(--c-amber-ink, #b45309); }
.wkpb-unc-named { font-size: 11.5px; font-weight: 650; color: var(--ink3, #8d8d8d); }
.wkpb-unc-go { height: 30px; padding: 0 13px; font-size: 12px; }

/* ── the empty state that offers a way out ────────────────────── */
.wkpb-empty--ask { text-align: center; }
.wkpb-empty--ask b { display: block; font-size: 14.5px; color: var(--ink, #161616); margin-bottom: 5px; }
.wkpb-empty--ask p { margin: 0 auto 14px; max-width: 460px; line-height: 1.55; }
.wkpb-empty-acts { display: flex; gap: 8px; justify-content: center; }

/* ══ THE SHEET ═════════════════════════════════════════════════
   🚨 A REAL DIALOG, NOT AN ANCHORED MENU. The thing being chosen
   is a person with a week on them or a deliverable with a stage, a
   date and an estimate — none of that fits in a 240px dropdown,
   which is exactly why the dropdowns were replaced.
   ⚠️ The BODY scrolls, never the sheet: a footer that scrolls away
   is a Save button the reader cannot find. */
.wkpb-sheet-wrap { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; }
.wkpb-sheet-scrim { position: absolute; inset: 0; background: rgba(15,23,42,.42); backdrop-filter: blur(2px); }
.wkpb-sheet {
  position: relative; display: flex; flex-direction: column;
  width: min(720px, 100%); max-height: min(760px, 90vh);
  background: var(--surf, #fff); border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28); overflow: hidden;
}
.wkpb-sheet-wrap.is-assign .wkpb-sheet { width: min(640px, 100%); }
.wkpb-sheet-h {
  flex: 0 0 auto; display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border-s, #f4f4f4);
}
.wkpb-sheet-h h4 { margin: 0 0 3px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #161616); }
.wkpb-sheet-h p { margin: 0; font-size: 12.5px; font-weight: 550; line-height: 1.45; color: var(--ink3, #8d8d8d); }
.wkpb-sheet-h p b { font-weight: 750; color: var(--ink2, #525252); }
.wkpb-sheet-h > div { flex: 1 1 auto; min-width: 0; }
.wkpb-sheet-x {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--border, #e0e0e0); border-radius: 9px; background: #fff;
  color: var(--ink3, #8d8d8d); cursor: pointer;
}
.wkpb-sheet-x:hover { background: var(--wt-neutral-bg, #f4f4f4); color: var(--ink, #161616); }
.wkpb-sheet-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 20px 16px; }
.wkpb-sheet-f {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
  padding: 13px 20px; border-top: 1px solid var(--border-s, #f4f4f4);
  background: var(--wt-neutral-bg, #fafafa);
}
.wkpb-sh-n { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 650; color: var(--ink3, #8d8d8d); }
.wkpb-sh-search {
  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 13px;
  border: 1px solid var(--border, #e0e0e0); border-radius: 11px;
  background: var(--wt-neutral-bg, #fafafa); color: var(--ink3, #8d8d8d);
}
.wkpb-sh-search:focus-within { border-color: var(--c-purple-soft, #c4b5fd); background: #fff; }
.wkpb-sh-search input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: 0;
  font: inherit; font-size: 13.5px; font-weight: 550; color: var(--ink, #161616);
}
.wkpb-sh-bands { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.wkpb-sh-band {
  height: 26px; padding: 0 11px; border-radius: 7px; cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 700; border: 1px solid var(--border, #e0e0e0);
  background: #fff; color: var(--ink2, #525252);
}
.wkpb-sh-band:hover { border-color: var(--ink3, #8d8d8d); }
.wkpb-sh-band.is-on { background: var(--ink, #161616); border-color: var(--ink, #161616); color: #fff; }
.wkpb-sh-list { margin-top: 10px; }
.wkpb-sh-empty { padding: 26px 8px; text-align: center; font-size: 13px; font-weight: 550; color: var(--ink3, #8d8d8d); }

/* ── the cards ────────────────────────────────────────────────── */
.wkpb-cards { display: flex; flex-direction: column; gap: 6px; }
.wkpb-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--border, #e0e0e0); border-radius: 12px;
  background: #fff; cursor: pointer; font: inherit;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.wkpb-card:hover { border-color: var(--c-purple-soft, #c4b5fd); background: var(--c-purple-bg, #faf9ff); }
.wkpb-card.is-pick {
  border-color: var(--c-purple, #7c3aed); background: var(--c-purple-bg, #f5f3ff);
  box-shadow: inset 0 0 0 1px var(--c-purple, #7c3aed);
}
.wkpb-card-tick {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 6px;
  border: 1.6px solid var(--border, #d4d4d4); display: grid; place-items: center;
  transition: background .14s, border-color .14s;
}
.wkpb-card.is-pick .wkpb-card-tick { background: var(--c-purple, #7c3aed); border-color: var(--c-purple, #7c3aed); }
.wkpb-card.is-pick .wkpb-card-tick::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.wkpb-card-m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wkpb-card-m b {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 13.5px; font-weight: 750; color: var(--ink, #161616);
}
.wkpb-card-m b em {
  font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 5px;
  background: var(--c-teal-bg, #f0fdfa); color: var(--c-teal, #0d9488);
}
.wkpb-card-m i {
  font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ink3, #8d8d8d);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wkpb-card-m u {
  text-decoration: none; font-size: 11.5px; font-weight: 500; line-height: 1.45;
  color: var(--ink3, #9a9a9a); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.wkpb-card-load {
  flex: 0 0 auto; position: relative; width: 112px; display: flex; flex-direction: column;
  gap: 1px; padding-bottom: 6px;
}
.wkpb-card-load b { font-size: 13px; font-weight: 800; color: var(--ink, #161616); font-variant-numeric: tabular-nums; }
.wkpb-card-load b span { font-size: 11px; font-weight: 650; color: var(--ink3, #8d8d8d); }
.wkpb-card-load i { font-style: normal; font-size: 10.5px; font-weight: 700; }
.wkpb-card-load::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  border-radius: 2px; background: var(--border-s, #f1f1f1);
}
.wkpb-card-load u {
  position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 2px;
  text-decoration: none; background: var(--c-green, #10b981); z-index: 1;
}
.wkpb-card-load.is-free i { color: var(--c-green-ink, #047857); }
.wkpb-card-load.is-full i { color: var(--ink3, #8d8d8d); }
.wkpb-card-load.is-over i { color: var(--c-red, #dc2626); }
.wkpb-card-load.is-over u { background: var(--c-red, #dc2626); }
.wkpb-card-who { flex: 0 0 auto; display: flex; align-items: center; }
.wkpb-card.is-have { border-style: dashed; }

/* ── assign ───────────────────────────────────────────────────── */
.wkpb-asg-row { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-s, #f4f4f4); }
.wkpb-asg-row:last-of-type { border-bottom: 0; }
.wkpb-asg-n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wt-neutral-bg, #f4f4f4); color: var(--ink3, #8d8d8d);
  font-size: 11px; font-weight: 850; margin-top: 1px;
}
.wkpb-asg-f { flex: 1 1 auto; min-width: 0; }
.wkpb-asg-f > label {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 7px;
  font-size: 12.5px; font-weight: 750; color: var(--ink, #161616);
}
.wkpb-asg-f > label i { font-style: normal; font-size: 11px; font-weight: 550; color: var(--ink3, #8d8d8d); }
.wkpb-asg-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wkpb-asg-cur { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.wkpb-asg-pjn { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.wkpb-asg-pjn b { font-size: 12.5px; font-weight: 750; color: var(--ink, #161616); }
.wkpb-asg-pjn i { font-style: normal; font-size: 10.5px; font-weight: 650; color: var(--ink3, #8d8d8d); }
.wkpb-asg-ph { font-size: 12px; font-weight: 600; color: var(--ink3, #9a9a9a); }
.wkpb-asg-sel {
  height: 32px; padding: 0 9px; border-radius: 9px; border: 1px solid var(--border, #e0e0e0);
  background: #fff; font: inherit; font-size: 12.5px; font-weight: 650; color: var(--ink, #161616);
  cursor: pointer; max-width: 210px;
}
.wkpb-asg-chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 7px; }
.wkpb-asg-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 5px 0 9px;
  border-radius: 7px; font-size: 11.5px; font-weight: 700;
  background: var(--c-purple-bg, #f5f3ff); color: var(--c-purple, #7c3aed);
  border: 1px solid var(--c-purple-soft, #ddd6fe);
}
.wkpb-asg-chip.is-dv { background: var(--c-teal-bg, #f0fdfa); color: var(--c-teal, #0d9488); border-color: #99f6e4; }
.wkpb-asg-chip button {
  border: 0; background: transparent; cursor: pointer; color: inherit;
  font-size: 14px; line-height: 1; padding: 0 3px; opacity: .6;
}
.wkpb-asg-chip button:hover { opacity: 1; }
.wkpb-asg-add {
  height: 28px; padding: 0 11px; border-radius: 8px; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 700; border: 1px dashed var(--border, #d4d4d4);
  background: #fff; color: var(--ink2, #525252);
}
.wkpb-asg-add:hover { border-style: solid; border-color: var(--c-purple-soft, #c4b5fd); color: var(--c-purple, #7c3aed); }
.wkpb-asg-hrs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wkpb-asg-hrs input {
  width: 68px; height: 34px; padding: 0 10px; border-radius: 9px; text-align: right;
  border: 1.5px solid var(--border, #d4d4d4); background: #fff; font: inherit;
  font-size: 15px; font-weight: 800; color: var(--ink, #161616); font-variant-numeric: tabular-nums;
}
.wkpb-asg-hrs input:focus { outline: 0; border-color: var(--c-purple, #7c3aed); }
.wkpb-asg-hrs > span { font-size: 12.5px; font-weight: 700; color: var(--ink3, #8d8d8d); margin-right: 6px; }
.wkpb-asg-q {
  height: 26px; padding: 0 9px; border-radius: 7px; cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 700; border: 1px solid var(--border, #e0e0e0);
  background: var(--wt-neutral-bg, #fafafa); color: var(--ink2, #525252);
}
.wkpb-asg-q:hover { background: var(--ink, #161616); border-color: var(--ink, #161616); color: #fff; }
.wkpb-asg-wks { display: flex; gap: 5px; flex-wrap: wrap; }
.wkpb-asg-wk {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px;
  border-radius: 8px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700;
  border: 1px solid var(--border, #e0e0e0); background: #fff; color: var(--ink2, #525252);
}
.wkpb-asg-wk i { font-style: normal; font-size: 9.5px; font-weight: 800; opacity: .6; }
.wkpb-asg-wk.is-past { color: var(--ink3, #9a9a9a); }
.wkpb-asg-wk.is-on { background: var(--c-purple, #7c3aed); border-color: var(--c-purple, #7c3aed); color: #fff; }
/* ⚠️ THE IMPACT PANEL IS THE WARNING TYLER ASKED FOR, and it is above the
   button rather than in a toast after the press. */
.wkpb-asg-impact {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border, #e0e0e0); background: var(--wt-neutral-bg, #fafafa);
}
.wkpb-asg-impact.is-idle { font-size: 12px; font-weight: 600; color: var(--ink3, #9a9a9a); }
.wkpb-asg-impact.is-ok { border-color: var(--c-green-soft, #a7f3d0); background: var(--c-green-bg, #f0fdf6); }
.wkpb-asg-impact.is-over { border-color: var(--c-red-soft, #fecaca); background: var(--c-red-bg, #fef2f2); }
.wkpb-asg-lines { display: flex; flex-direction: column; gap: 3px; }
.wkpb-asg-line { font-size: 12px; font-weight: 600; color: var(--ink2, #525252); }
.wkpb-asg-line b { font-weight: 800; color: var(--ink, #161616); }
.wkpb-asg-line u { text-decoration: none; font-weight: 800; color: var(--c-red, #dc2626); }
.wkpb-asg-line.is-more { color: var(--ink3, #9a9a9a); }
.wkpb-asg-warn { margin: 9px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--c-red, #b91c1c); }
.wkpb-asg-fine { margin: 9px 0 0; font-size: 12.5px; font-weight: 650; color: var(--c-green-ink, #047857); }
.wkpb-btn.is-warn { background: var(--c-red, #dc2626); border-color: var(--c-red, #dc2626); }

/* ── the reserve menu ─────────────────────────────────────────── */
.wkpb-pop-note { padding: 2px 10px 8px; font-size: 11.5px; font-weight: 550; line-height: 1.5; color: var(--ink3, #8d8d8d); }
.wkpb-pop-note.is-quiet { padding-top: 8px; }
.wkpb-pop-rv { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 10px 8px; }
.wkpb-pop-rvb {
  height: 27px; min-width: 34px; padding: 0 8px; border-radius: 7px; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 750; border: 1px solid var(--border, #e0e0e0);
  background: #fff; color: var(--ink2, #525252);
}
.wkpb-pop-rvb:hover { border-color: var(--c-purple-soft, #c4b5fd); color: var(--c-purple, #7c3aed); }
.wkpb-pop-rvb.is-on { background: var(--c-purple, #7c3aed); border-color: var(--c-purple, #7c3aed); color: #fff; }
.wkpb-pop-rvrow { display: flex; gap: 5px; padding: 0 10px 8px; }
.wkpb-pop-rvrow input {
  flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 9px; border-radius: 8px;
  border: 1px solid var(--border, #e0e0e0); font: inherit; font-size: 12.5px; font-weight: 700;
}
.wkpb-pop-rvgo {
  height: 30px; padding: 0 12px; border-radius: 8px; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 750; border: 0; background: var(--ink, #161616); color: #fff;
}
.wkpb-pop-rvdef, .wkpb-pop-rvall {
  display: block; width: calc(100% - 20px); margin: 0 10px 8px; height: 28px;
  border-radius: 8px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700;
  border: 1px solid var(--border, #e0e0e0); background: #fff; color: var(--ink2, #525252);
}
.wkpb-pop-rvdef:hover, .wkpb-pop-rvall:hover { background: var(--wt-neutral-bg, #f4f4f4); color: var(--ink, #161616); }

/* ══ FULL SCREEN ═══════════════════════════════════════════════
   🚨 THE HOST GOES FIXED — it is never re-parented, because work.js
   MOVES this element between Projects ▸ Capacity and Work ▸ Capacity
   and a portal to <body> would break the move. See render().
   ⚠️ z 59000: under the app's floating layers (60000+), so a sheet
   opened from the board still lands on top of it. */
/* 🚨 THE NATIVE FULLSCREEN ELEMENT IS THE REAL ANSWER. `position:fixed` is
   positioned against the nearest ancestor with a transform / filter /
   will-change, NOT against the viewport — and this host has one above it, which
   is why the first build left the app's left rail on screen beside a board that
   measured 1560×1000 in the harness. The top layer has no such ancestor. */
/* ⚠️ A CLASS, NOT `:fullscreen`. The pseudo-class did NOT match in headless
   Chromium even with `document.fullscreenElement` pointing straight at this
   element — so `.is-full:not(:fullscreen)` was true and the fallback's
   `position:fixed` won inside the top layer. wk-plan-board.js sets
   `is-fsnative` off the `fullscreenchange` event, which is the state the
   browser actually reports. */
#wkPlanBoardHost.is-fsnative {
  padding: 16px; margin: 0; overflow: auto;
  background: var(--bg, #f4f4f4);
  -webkit-overflow-scrolling: touch;
}
/* ⚠️ THE FALLBACK, for a refused request. Worse — an ancestor containing block
   can still trap it — but a dead button is worse still. */
body.wkpb-full-open { overflow: hidden; }
#wkPlanBoardHost.is-full:not(.is-fsnative) {
  position: fixed; inset: 0; z-index: 59000;
  padding: 16px; margin: 0; overflow: auto;
  background: var(--bg, #f4f4f4);
  -webkit-overflow-scrolling: touch;
}
#wkPlanBoardHost.is-full .wkpb {
  margin: 0 auto; max-width: 1800px; min-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
}
/* The scroller takes the leftover height so the sheet fills the screen instead
   of the page behind it doing the scrolling — the whole point of the button. */
#wkPlanBoardHost.is-full .wkpb-scroll,
#wkPlanBoardHost.is-full .wkpb-un { flex: 1 1 auto; min-height: 0; }
#wkPlanBoardHost.is-full .wkpb-foot { margin-top: auto; }

/* ── dark ─────────────────────────────────────────────────────── */
:root[data-theme="dark"] .wkpb-fig:hover { background: #1f2430; }
:root[data-theme="dark"] .wkpb-fig b { color: #e2e8f0; }
:root[data-theme="dark"] .wkpb-fig.is-on { background: #e2e8f0; }
:root[data-theme="dark"] .wkpb-fig.is-on b,
:root[data-theme="dark"] .wkpb-fig.is-on b i,
:root[data-theme="dark"] .wkpb-fig.is-on span { color: #0f172a; }
:root[data-theme="dark"] .wkpb-strip-sep { background: #2a3140; }
:root[data-theme="dark"] .wkpb-sheet { background: #161a22; }
:root[data-theme="dark"] .wkpb-sheet-h { border-bottom-color: #262c38; }
:root[data-theme="dark"] .wkpb-sheet-h h4 { color: #e2e8f0; }
:root[data-theme="dark"] .wkpb-sheet-f { background: #1b202a; border-top-color: #262c38; }
:root[data-theme="dark"] .wkpb-sheet-x,
:root[data-theme="dark"] .wkpb-sh-search,
:root[data-theme="dark"] .wkpb-sh-band,
:root[data-theme="dark"] .wkpb-card,
:root[data-theme="dark"] .wkpb-asg-sel,
:root[data-theme="dark"] .wkpb-asg-add,
:root[data-theme="dark"] .wkpb-asg-wk,
:root[data-theme="dark"] .wkpb-asg-hrs input,
:root[data-theme="dark"] .wkpb-asg-q,
:root[data-theme="dark"] .wkpb-pop-rvb,
:root[data-theme="dark"] .wkpb-pop-rvrow input,
:root[data-theme="dark"] .wkpb-pop-rvdef,
:root[data-theme="dark"] .wkpb-pop-rvall { background: #1f2430; border-color: #333b4d; color: #cbd5e1; }
:root[data-theme="dark"] .wkpb-sh-search input,
:root[data-theme="dark"] .wkpb-card-m b,
:root[data-theme="dark"] .wkpb-card-load b,
:root[data-theme="dark"] .wkpb-asg-pjn b,
:root[data-theme="dark"] .wkpb-unc-nm,
:root[data-theme="dark"] .wkpb-unc-n b,
:root[data-theme="dark"] .wkpb-fc b { color: #e2e8f0; }
:root[data-theme="dark"] .wkpb-card:hover { background: #1f2430; border-color: #4c1d95; }
:root[data-theme="dark"] .wkpb-card.is-pick { background: #241b3d; }
:root[data-theme="dark"] .wkpb-unc { border-bottom-color: #262c38; }
:root[data-theme="dark"] .wkpb-unc:hover { background: #1b202a; }
:root[data-theme="dark"] .wkpb-fc:hover { background: #1b202a; }
:root[data-theme="dark"] .wkpb-r--fc > * { background: #161a22; }
:root[data-theme="dark"] .wkpb-r--fc:hover > * { background: #1b202a; }
:root[data-theme="dark"] .wkpb-fc::after { background: #262c38; }
:root[data-theme="dark"] .wkpb-fc.is-over { background: rgba(239,68,68,.14); }
:root[data-theme="dark"] .wkpb-asg-impact { background: #1b202a; border-color: #262c38; }
:root[data-theme="dark"] .wkpb-asg-row { border-bottom-color: #262c38; }
:root[data-theme="dark"] .wkpb-asg-n { background: #1f2430; color: #94a3b8; }
:root[data-theme="dark"] #wkPlanBoardHost.is-full { background: #0f131a; }

/* ── narrow ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .wkpb-strip { gap: 2px; }
  .wkpb-fig { padding: 6px 10px; }
  .wkpb-fig b { font-size: 16px; }
  .wkpb-unc { flex-wrap: wrap; gap: 10px; }
  .wkpb-unc-main { flex: 1 1 100%; }
  .wkpb-unc-nums { gap: 14px; }
  .wkpb-unc-who { margin-left: auto; }
  .wkpb-sheet-wrap { padding: 0; }
  .wkpb-sheet { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .wkpb-card-load { width: 92px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ANTI-PILL — the runtime rule, counter-stated.
   ───────────────────────────────────────────────────────────────────────────
   🚨 EVERY `border-radius` ABOVE IS A SUGGESTION. `assets/js/dashboard-meta.js`
   injects, AFTER every <link> in the head:

     .wt-ask-ai-fab, button:not(.ax-card):not(.tcd-view-btn):not(.tcd-filter-btn)
       :not(.tcd-ai-btn):not(.tmbp-add-btn){border-radius:var(--wt-theme-btn-radius,12px)!important}

   Nearly everything this board draws is a <button>, so on the LIVE page every
   chip, tab, tile and card became a capsule. Tyler, 2026-09-02: *"I do not want
   this pill effect anywhere."* He has said it about the report type picker, the
   staffing cards and the delivery board (`wk-delivery-board.css`, same trap,
   same week).

   The selector scores (0,5,1) and carries !important. MEASURED ladder: one
   class loses, one class + !important loses, TWO classes + !important loses.
   Only `#id .class` + `!important` wins. Hence this block.

   🚨 THREE IDS, BECAUSE THIS BOARD PAINTS IN THREE PLACES. `#wkPlanBoardHost`
   is the sheet itself; `#wkpbSheet` and `#wkpbPop` are appended OUTSIDE it (to
   <body>, or to the host when it is natively full screen) and would otherwise
   be the last lozenges on screen.

   🚨 WHEN YOU ADD A BUTTON TO THIS BOARD, ADD IT HERE IN THE SAME COMMIT. Its
   own border-radius up there looks right and does nothing.
   🚫 Never "fix" this by adding a `:not()` to dashboard-meta's selector — that
   file is cached by every client that has ever loaded it.
   ═══════════════════════════════════════════════════════════════════════════ */
#wkPlanBoardHost .wkpb-act        { border-radius: 9px  !important; }
#wkPlanBoardHost .wkpb-fig        { border-radius: 9px  !important; }
#wkPlanBoardHost .wkpb-seg-b      { border-radius: 7px  !important; }
#wkPlanBoardHost .wkpb-chip       { border-radius: 8px  !important; }
#wkPlanBoardHost .wkpb-flag       { border-radius: 6px  !important; }
#wkPlanBoardHost .wkpb-flagclr    { border-radius: 6px  !important; }
#wkPlanBoardHost .wkpb-btn        { border-radius: 9px  !important; }
#wkPlanBoardHost .wkpb-fold       { border-radius: 6px  !important; }
#wkPlanBoardHost .wkpb-fill       { border-radius: 6px  !important; }
#wkPlanBoardHost .wkpb-nobody     { border-radius: 6px  !important; }
#wkPlanBoardHost .wkpb-addp       { border-radius: 7px  !important; }
#wkPlanBoardHost .wkpb-dv-o       { border-radius: 6px 0 0 6px !important; }
#wkPlanBoardHost .wkpb-dv-x       { border-radius: 0 6px 6px 0 !important; }
#wkPlanBoardHost .wkpb-dv-add     { border-radius: 6px  !important; }
#wkPlanBoardHost .wkpb-resv       { border-radius: 6px  !important; }
#wkPlanBoardHost .wkpb-pgadd      { border-radius: 5px  !important; }
#wkPlanBoardHost .wkpb-bulk-b     { border-radius: 8px  !important; }
#wkPlanBoardHost .wkpb-unc-nm     { border-radius: 5px  !important; }
#wkPlanBoardHost .wkpb-unc-pj     { border-radius: 5px  !important; }
#wkPlanBoardHost .wkpb-inlink     { border-radius: 4px  !important; }
#wkPlanBoardHost .wkpb-in         { border-radius: 8px  !important; }
/* The two sheets, wherever they are appended. */
#wkpbSheet .wkpb-btn              { border-radius: 9px  !important; }
#wkpbSheet .wkpb-card             { border-radius: 10px !important; }
#wkpbSheet .wkpb-sh-band          { border-radius: 7px  !important; }
#wkpbSheet .wkpb-sheet-x          { border-radius: 8px  !important; }
#wkpbSheet .wkpb-asg-add          { border-radius: 8px  !important; }
#wkpbSheet .wkpb-asg-q            { border-radius: 6px  !important; }
#wkpbSheet .wkpb-asg-wk           { border-radius: 7px  !important; }
#wkpbSheet .wkpb-asg-sel          { border-radius: 8px  !important; }
#wkpbSheet .wkpb-asg-chip button  { border-radius: 4px  !important; }
#wkpbSheet .wkpb-sh-search input  { border-radius: 0    !important; }
#wkpbPop button                   { border-radius: 7px  !important; }
#wkpbPop .wkpb-pop-r              { border-radius: 8px  !important; }
/* ⚠️ The AVATARS stay round, and the progress bars stay 2px. Neither is what
   "pill" meant — he asked for the profile picture, not against a circle. */
#wkPlanBoardHost .wkpb-face,
#wkpbSheet .wkpb-face             { border-radius: 50% !important; }
#wkPlanBoardHost .wkpb-comark,
#wkpbSheet .wkpb-comark           { border-radius: 8px !important; }