/* ==================================================================
   Threshold — Admin (People & Permissions)

   Hand-rolled from the design handoff's role-manager.css + the minimal
   um-modal* subset the Role Manager's delete dialog needs, per the
   People & Permissions implementation spec §5 and COMPONENTS.md §19–25.

   Token discipline (ADR-0035): the handoff CSS uses the canon's
   unprefixed token names (--paper, --advant, --r-3, --t-14, --f-mono).
   The live Threshold substrate prefixes every token --th-* (PR 51), so
   every reference below is mapped to its live name (same VALUE — no
   appearance change, no token redeclaration):
     --paper*  -> --th-paper*      --r-N  -> --th-radius-N
     --ink*    -> --th-ink*        --t-N  -> --th-size-N
     --line*   -> --th-line*       --f-X  -> --th-f-X
     --advant* -> --th-advant*     --marigold* -> --th-marigold*
     --risk*/--warn* -> --th-risk*/--th-warn*
   Raw oklch() values are reproduced verbatim from the handoff where the
   canon itself uses literals (hover tints) — those are not tokens.

   Reuses existing chrome atoms from threshold-chrome.css: .cc-btn (+
   .is-primary/.is-ghost/.is-danger), .cc-page-head, .cc-pill. Adds the
   .cc-cb checkbox primitive (COMPONENTS §9) which is absent from
   threshold-chrome.css today — hand-rolled here for the permission grid
   and reusable by the User Manager (Step 4) / User Assignments (Step 5);
   FLAG: promote to threshold-chrome.css when those surfaces land.

   Loaded via a <link> in index.html — the established house pattern
   for shared, non-scoped feature CSS in this
   Blazor WASM project (Features/** holds only *.razor.css scoped CSS;
   the rm-*/um-*/cc-* canon classes are global by design). The spec's
   literal "Features/Admin/admin.css" path is unservable as a plain .css
   under Features/; this is the only mechanism that works (FLAG).
   ================================================================== */

/* ------------------------------------------------------------------
   Checkbox primitive (COMPONENTS §9) — absent from chrome today.
   ------------------------------------------------------------------ */
.cc-cb {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; flex: 0 0 auto; margin: 0;
  border: 1px solid var(--th-line-2); border-radius: var(--th-radius-2);
  background: var(--th-paper); cursor: pointer;
  display: inline-grid; place-content: center;
  transition: background .1s, border-color .1s;
}
.cc-cb:checked {
  background: var(--th-advant-deep); border-color: var(--th-advant-deep);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.4 5.7 10 11 4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
/* :indeterminate is a DOM property Blazor can't set declaratively; the .is-indeterminate
   class drives the identical dash visual from Razor class-binding (canon sets el.indeterminate
   via a ref — same appearance, different mechanism). */
.cc-cb:indeterminate,
.cc-cb.is-indeterminate {
  background: var(--th-advant-deep); border-color: var(--th-advant-deep);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><rect x='3' y='6' width='8' height='2' rx='1' fill='white'/></svg>");
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.cc-cb:disabled { opacity: 0.55; cursor: not-allowed; }
.cc-cb:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 1px; }

/* ==================================================================
   Role Manager (rm-*) — master-detail: role list + permission editor.
   ================================================================== */
.rm-page { position: relative; }

/* ---- master-detail frame ---------------------------------------- */
.rm-split {
  margin: 4px 24px 24px;
  border: 1px solid var(--th-line);
  border-radius: var(--th-radius-5);
  background: var(--th-paper-sunk);
  overflow: hidden;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: stretch;
  min-height: 520px;
}

/* ---- role list (left) ------------------------------------------- */
.rm-list {
  border-right: 1px solid var(--th-line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--th-paper-3);
}
.rm-list__hd {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px 10px 16px;
  border-bottom: 1px solid var(--th-line);
}
.rm-list__hd .t {
  font-family: var(--th-f-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--th-ink-4);
}
.rm-list__scroll { flex: 1 1 auto; overflow-y: auto; padding: 8px; }
.rm-group-label {
  font-family: var(--th-f-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--th-ink-4);
  padding: 12px 8px 5px;
}
.rm-group-label:first-child { padding-top: 4px; }
.rm-group-empty { padding: 4px 8px 8px; font-size: 12px; color: var(--th-ink-4); font-style: italic; }

.rm-role {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 10px; border: 1px solid transparent; border-radius: var(--th-radius-3);
  background: transparent; cursor: pointer; margin-bottom: 2px;
  font-family: var(--th-f-sans);
}
.rm-role:hover { background: oklch(89% 0.006 80); }
[data-theme="dark"] .rm-role:hover { background: oklch(24% 0.012 60); }
.rm-role.is-active {
  background: var(--th-paper-sunk);
  border-color: var(--th-line);
  box-shadow: inset 2px 0 var(--th-advant);
}
.rm-role__dot {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto;
}
.rm-role__dot.is-system { background: var(--th-advant); }
.rm-role__dot.is-custom { background: var(--th-marigold-deep); }
.rm-role__main { min-width: 0; flex: 1; }
.rm-role__name {
  font-size: var(--th-size-14); font-weight: 500; color: var(--th-ink);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-role__name svg { color: var(--th-ink-4); flex: 0 0 auto; }
.rm-role.is-active .rm-role__name { font-weight: 600; }
.rm-role__meta {
  font-family: var(--th-f-mono); font-size: 10.5px; color: var(--th-ink-3);
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
.rm-role__dirty {
  width: 6px; height: 6px; border-radius: 50%; background: var(--th-marigold-deep);
  margin-top: 6px; flex: 0 0 auto;
}

.rm-list__ft { border-top: 1px solid var(--th-line); padding: 10px; }
.rm-newbtn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px; border-radius: var(--th-radius-3);
  border: 1px dashed var(--th-line-2); background: transparent;
  color: var(--th-ink-2); font-family: var(--th-f-sans); font-size: var(--th-size-13); font-weight: 500;
  cursor: pointer;
}
.rm-newbtn:hover { border-color: var(--th-advant); color: var(--th-advant-deep); background: var(--th-advant-soft); border-style: solid; }

/* ---- editor (right) --------------------------------------------- */
.rm-editor { display: flex; flex-direction: column; min-width: 0; background: var(--th-paper-sunk); }
.rm-editor__scroll { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px 24px; min-height: 0; }

.rm-editor__hd { display: flex; align-items: flex-start; gap: 14px; row-gap: 12px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--th-line); }
.rm-editor__crest {
  width: 40px; height: 40px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center;
}
.rm-editor__crest.is-system { background: var(--th-advant-soft); color: var(--th-advant-deep); }
.rm-editor__crest.is-custom { background: var(--th-marigold-soft); color: var(--th-marigold-deep); }
.rm-editor__titlewrap { flex: 1 1 220px; min-width: 200px; }
.rm-editor__title {
  font-family: var(--th-f-serif); font-size: var(--th-size-24); font-weight: 500;
  letter-spacing: -0.012em; color: var(--th-ink); margin: 0; line-height: 1.18;
}
.rm-editor__title .rm-tag { margin-left: 10px; vertical-align: middle; }
.rm-editor__title-input {
  font-family: var(--th-f-serif); font-size: var(--th-size-24); font-weight: 500;
  letter-spacing: -0.012em; color: var(--th-ink);
  border: 1px solid transparent; border-radius: var(--th-radius-3);
  background: transparent; padding: 1px 6px; margin-left: -6px; width: 100%; max-width: 460px; outline: none;
}
.rm-editor__title-input:hover { border-color: var(--th-line-2); }
.rm-editor__title-input:focus { border-color: var(--th-advant); box-shadow: 0 0 0 3px var(--th-advant-soft); background: var(--th-paper); }
.rm-editor__desc {
  font-size: var(--th-size-14); color: var(--th-ink-2); margin-top: 5px; line-height: 1.5;
  border: 1px solid transparent; border-radius: var(--th-radius-3);
  background: transparent; padding: 2px 6px; margin-left: -6px; width: 100%; max-width: 620px; outline: none;
  font-family: var(--th-f-sans); resize: none;
}
.rm-editor__desc:hover:not(:disabled) { border-color: var(--th-line-2); }
.rm-editor__desc:focus { border-color: var(--th-advant); box-shadow: 0 0 0 3px var(--th-advant-soft); background: var(--th-paper); }
.rm-editor__desc:disabled { color: var(--th-ink-2); }

.rm-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--th-f-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--th-radius-pill); border: 1px solid var(--th-line-2);
  color: var(--th-ink-3); background: var(--th-paper-2); white-space: nowrap;
}
.rm-tag.is-system { color: var(--th-advant-deep); background: var(--th-advant-soft); border-color: transparent; }

.rm-editor__hd-actions { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }

/* read-only banner for system roles */
.rm-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 4px; padding: 10px 14px;
  border: 1px solid var(--th-line); border-radius: var(--th-radius-3);
  background: var(--th-paper-2); color: var(--th-ink-2); font-size: 12.5px;
}
.rm-banner svg { color: var(--th-ink-3); flex: 0 0 auto; }
.rm-banner b { color: var(--th-ink); font-weight: 600; }

/* permissions section rule */
.rm-perm-head {
  display: flex; align-items: center; gap: 14px; margin: 22px 0 12px;
}
.rm-perm-head .label { font-family: var(--th-f-serif); font-style: italic; font-size: var(--th-size-17); font-weight: 500; color: var(--th-marigold-deep); }
.rm-perm-head .rule { flex: 1; height: 1px; background: var(--th-line); }
.rm-perm-head .count { font-family: var(--th-f-mono); font-size: 11px; color: var(--th-ink-3); font-variant-numeric: tabular-nums; }
.rm-perm-head .selectall {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; color: var(--th-ink-2); background: none; border: 0; font-family: var(--th-f-sans);
}
.rm-perm-head .selectall:hover { color: var(--th-advant-deep); }

/* permission grid */
.rm-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
[data-cols="3"] .rm-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.rm-card { border: 1px solid var(--th-line); border-radius: var(--th-radius-5); background: var(--th-paper); overflow: hidden; }
.rm-card__hd {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--th-line); background: var(--th-paper-2);
}
.rm-card__title { font-size: 12px; font-weight: 600; color: var(--th-ink); flex: 1; }
.rm-card__count { font-family: var(--th-f-mono); font-size: 10.5px; color: var(--th-ink-3); }
.rm-card__body { padding: 4px 6px 6px; }

.rm-perm {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 8px; border-radius: var(--th-radius-3); cursor: pointer;
}
.rm-perm:hover { background: var(--th-paper-2); }
.rm-perm.is-locked { cursor: default; }
.rm-perm.is-locked:hover { background: transparent; }
.rm-perm input { margin-top: 1px; flex: 0 0 auto; }
.rm-perm__main { min-width: 0; flex: 1; }
.rm-perm__label { font-size: 12.5px; color: var(--th-ink); font-weight: 500; }
.rm-perm.is-off .rm-perm__label { color: var(--th-ink-2); font-weight: 400; }
.rm-perm__key { font-family: var(--th-f-mono); font-size: 10.5px; color: var(--th-ink-4); margin-top: 1px; }
.rm-perm__desc { font-size: 11.5px; color: var(--th-ink-3); margin-top: 2px; line-height: 1.4; }
[data-desc="off"] .rm-perm__desc { display: none; }

/* read-only permission indicator (system roles) */
.rm-ro { width: 16px; flex: 0 0 auto; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; }
.rm-card__hd .rm-ro { margin-top: 0; }
.rm-ro__yes { color: var(--th-advant-deep); display: inline-flex; }
.rm-ro__yes svg { width: 13px; height: 13px; }
.rm-ro__no { color: var(--th-ink-4); font-weight: 700; line-height: 1; }

/* sticky save bar */
.rm-savebar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px; border-top: 1px solid var(--th-line);
  background: var(--th-paper); flex: 0 0 auto;
}
.rm-savebar__meta { font-size: 12px; color: var(--th-ink-3); display: flex; align-items: center; gap: 8px; }
.rm-savebar__meta b { color: var(--th-ink); }
.rm-savebar__spacer { flex: 1; }
.rm-savebar.is-clean .rm-savebar__meta .dirty { display: none; }

/* used-by footer for system roles */
.rm-usedby { font-size: 12px; color: var(--th-ink-3); display: inline-flex; align-items: center; gap: 7px; }
.rm-usedby b { color: var(--th-ink); font-variant-numeric: tabular-nums; }

/* affected-users list in delete modal */
.rm-affected {
  margin-top: 12px; padding: 9px 11px; background: var(--th-paper-2);
  border: 1px solid var(--th-line); border-radius: var(--th-radius-3);
  font-size: 12px; color: var(--th-ink-2); display: flex; align-items: center; gap: 8px;
}
.rm-affected b { color: var(--th-ink); }

/* inline editor error (e.g. duplicate-name 409) */
.rm-editor__error {
  margin: 12px 0 0; padding: 9px 12px;
  border: 1px solid color-mix(in oklab, var(--th-risk) 30%, transparent);
  background: var(--th-risk-soft); border-radius: var(--th-radius-3);
  color: var(--th-risk); font-size: 12.5px;
}

@media (max-width: 1180px) {
  [data-cols="3"] .rm-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 920px) {
  .rm-split { grid-template-columns: 240px minmax(0,1fr); }
  .rm-grid, [data-cols="3"] .rm-grid { grid-template-columns: 1fr; }
}

/* ---- density tweak ---------------------------------------------- */
[data-density="compact"] .rm-perm { padding-top: 4px; padding-bottom: 4px; }
[data-density="compact"] .rm-role { padding-top: 6px; padding-bottom: 6px; }
[data-density="compact"] .rm-card__body { padding-bottom: 4px; }

/* ==================================================================
   Confirm modal (um-modal*) — MINIMAL subset for the Role Manager's
   delete-role dialog. The full um-modal* family (warn variant, impact
   strip, drawers, bulk bar) lands with the User Manager (Step 4); this
   is only the danger-variant confirm the delete flow needs. FLAG:
   Step 4 extends this block. Lifted from the handoff's user-manager.css.
   .cc-btn.is-danger already exists in threshold-chrome.css — not redeclared.
   ================================================================== */
.um-modal-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: oklch(20% 0.02 255 / 0.40);
  display: grid; place-items: center; padding: 32px;
}
@media (prefers-reduced-motion: no-preference) {
  .um-modal-scrim { animation: um-fade 130ms ease-out; }
  .um-modal { animation: um-pop 180ms cubic-bezier(.2,.8,.3,1); }
}
@keyframes um-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes um-pop { from { opacity: 0; transform: translateY(8px) scale(.985) } to { opacity: 1; transform: none } }
.um-modal {
  width: min(440px, 100%);
  background: var(--th-paper-sunk);
  border: 1px solid var(--th-line-2);
  border-radius: var(--th-radius-8);
  box-shadow: 0 24px 70px oklch(15% 0.02 255 / 0.32);
  overflow: hidden;
}
.um-modal__body { padding: 22px 22px 18px; display: flex; gap: 14px; }
.um-modal__glyph {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
}
.um-modal__glyph.is-danger { background: var(--th-risk-soft); color: var(--th-risk); }
/* Step 4b: warn variant + impact strip — the rest of the canon um-modal family the
   Role Manager's danger-only subset didn't need. */
.um-modal__glyph.is-warn { background: var(--th-warn-soft); color: oklch(45% 0.13 65); }
.um-modal__title { font-family: var(--th-f-serif); font-size: var(--th-size-20); font-weight: 500; color: var(--th-ink); letter-spacing: -0.01em; margin: 2px 0 0; }
.um-modal__text { font-size: 13px; color: var(--th-ink-2); line-height: 1.55; margin: 8px 0 0; }
.um-modal__text b { color: var(--th-ink); font-weight: 600; }
.um-modal__impact {
  margin-top: 12px; padding: 9px 11px;
  background: var(--th-paper-2); border: 1px solid var(--th-line);
  border-radius: var(--th-radius-3);
  font-family: var(--th-f-mono); font-size: 11.5px; color: var(--th-ink-2);
  display: flex; align-items: center; gap: 8px;
}
.um-modal__ft {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--th-line); background: var(--th-paper);
}

/* ==================================================================
   User Manager directory (um-*) — Step 4a READ surface. Lifted from the
   design handoff's user-manager.css (COMPONENTS §11–18), token-mapped to
   the live --th-* substrate (same VALUES; see the header note for the
   map). 4b additions (invite-drawer form atoms, bulk bar, drawer--wide,
   confirm-modal warn/impact variants) are intentionally NOT here yet.
   @keyframes um-fade and the .um-modal* base already exist above (Step 3)
   and are not redeclared; only @keyframes um-slide is new.
   ================================================================== */

.um-page { position: relative; }
.um-head-actions { display: flex; gap: 8px; align-items: center; }

/* Pending-invite kicker pill in the subtitle */
.um-sub-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--th-f-mono); font-size: 11px;
  color: oklch(42% 0.13 65); background: var(--th-warn-soft);
  border-radius: var(--th-radius-pill); padding: 1px 8px; margin-left: 8px;
}

/* ---- Directory table -------------------------------------------- */
.um-tablewrap { margin: 0 24px; }

/* Identity cell */
.um-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.um-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  color: var(--th-paper); flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em;
  font-family: var(--th-f-sans);
}
.um-id__main { min-width: 0; display: flex; flex-direction: column; }
.um-id__name {
  font-weight: 500; color: var(--th-ink); font-size: var(--th-size-14);
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.um-id__name button.um-namebtn {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.um-id__name button.um-namebtn:hover { color: var(--th-advant-deep); }
.um-id__you {
  font-family: var(--th-f-mono); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--th-ink-4);
  border: 1px solid var(--th-line-2); border-radius: var(--th-radius-2);
  padding: 0 4px; line-height: 1.5;
}
.um-id__email { font-family: var(--th-f-mono); font-size: 11.5px; color: var(--th-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* deactivated rows read as dimmed */
.um-row.is-deactivated .um-id__name,
.um-row.is-deactivated .um-avatar { opacity: 0.62; }
.um-row.is-deactivated td { color: var(--th-ink-3); }

/* Access cell */
.um-access { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.um-rolechip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 1px 9px 1px 7px; border-radius: var(--th-radius-pill);
  font-size: 11.5px; font-weight: 500; line-height: 1.6;
  border: 1px solid transparent; white-space: nowrap;
}
.um-rolechip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.um-rolechip.is-advant { background: var(--th-advant-soft); color: var(--th-advant-deep); }
.um-rolechip.is-copper { background: var(--th-marigold-soft); color: var(--th-marigold-deep); }
.um-rolechip.is-ghost {
  background: transparent; color: var(--th-ink-3);
  border: 1px dashed var(--th-line-2);
}
.um-access__more { font-family: var(--th-f-mono); font-size: 11px; color: var(--th-ink-3); }
.um-access__scopes {
  font-family: var(--th-f-mono); font-size: 11px; color: var(--th-ink-4);
  display: inline-flex; align-items: center; gap: 4px;
}
.um-access__none { font-size: 12px; color: var(--th-ink-4); font-style: italic; }

td.um-time { font-family: var(--th-f-mono); font-variant-numeric: tabular-nums; color: var(--th-ink-2); font-size: 12px; white-space: nowrap; }
td.um-time .dim { color: var(--th-ink-4); }

/* last cell — menu trigger lives here */
td.um-actions { width: 36px; text-align: right; position: relative; overflow: visible; }
.cc-table td.um-actions { padding-right: 14px; }

/* selected row tint */
.um-row.is-selected td { background: var(--th-advant-soft); }
.um-row.is-selected:hover td { background: color-mix(in oklab, var(--th-advant-soft) 70%, var(--th-paper)); }

/* ---- Density tweak ---------------------------------------------- */
/* Scoped under .um-page (data-density/data-sep live on that element). The canon
   ships these unscoped because user-manager.css is page-bundled; admin.css is
   loaded app-wide, so we scope to avoid bleeding onto other cc-tables. */
.um-page .cc-table tbody td { transition: padding 90ms ease; }
.um-page[data-density="comfortable"] .cc-table tbody td { padding-top: 11px; padding-bottom: 11px; }
.um-page[data-density="compact"] .cc-table tbody td { padding-top: 5px; padding-bottom: 5px; }
.um-page[data-density="compact"] .um-avatar { width: 24px; height: 24px; font-size: 10px; }

/* ---- Separation tweak ------------------------------------------- */
.um-page[data-sep="zebra"] .cc-table tbody td { border-bottom: none; }
.um-page[data-sep="zebra"] .cc-table tbody tr:nth-child(even) td { background: var(--th-paper-2); }
.um-page[data-sep="zebra"] .cc-table tbody tr.um-row:hover td { background: var(--th-paper-3); }
.um-page[data-sep="zebra"] .um-row.is-selected td,
.um-page[data-sep="zebra"] .um-row.is-selected:nth-child(even) td { background: var(--th-advant-soft); }

/* ---- Row menu (popover) ----------------------------------------- */
.um-menu-shroud { position: fixed; inset: 0; z-index: 70; }
.um-menu {
  position: absolute; top: calc(100% - 2px); right: 8px; z-index: 71;
  width: 224px; padding: 5px;
  background: var(--th-paper-sunk);
  border: 1px solid var(--th-line-2);
  border-radius: var(--th-radius-5);
  box-shadow: 0 12px 32px oklch(20% 0.01 255 / 0.16);
  text-align: left;
}
.um-menu__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: var(--th-radius-3);
  background: transparent; cursor: pointer;
  font-family: var(--th-f-sans); font-size: var(--th-size-13); color: var(--th-ink);
  text-align: left; line-height: 1.3; text-decoration: none;
}
.um-menu__item svg,
.um-menu__item i { color: var(--th-ink-3); flex: 0 0 auto; }
.um-menu__item:hover { background: var(--th-paper-2); }
.um-menu__item:hover svg,
.um-menu__item:hover i { color: var(--th-ink); }
.um-menu__item.is-danger { color: var(--th-risk); }
.um-menu__item.is-danger svg,
.um-menu__item.is-danger i { color: var(--th-risk); }
.um-menu__item.is-danger:hover { background: var(--th-risk-soft); }
.um-menu__sep { height: 1px; background: var(--th-line); margin: 5px 4px; }
.um-menu__shortcut { margin-left: auto; font-family: var(--th-f-mono); font-size: 10.5px; color: var(--th-ink-4); }

/* ---- Drawer (peek) ---------------------------------------------- */
.um-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: oklch(20% 0.02 255 / 0.30);
  display: flex; justify-content: flex-end;
}
@media (prefers-reduced-motion: no-preference) {
  .um-scrim { animation: um-fade 140ms ease-out; }
  .um-drawer { animation: um-slide 200ms cubic-bezier(.2,.8,.25,1); }
}
@keyframes um-slide { from { transform: translateX(24px); opacity: 0.4 } to { transform: none; opacity: 1 } }

.um-drawer {
  width: 440px; max-width: 92vw; height: 100%;
  background: var(--th-paper-sunk);
  border-left: 1px solid var(--th-line-2);
  box-shadow: -16px 0 40px oklch(20% 0.01 255 / 0.10);
  display: flex; flex-direction: column; min-height: 0;
}
.um-drawer__hd {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 18px 14px 22px;
  border-bottom: 1px solid var(--th-line);
}
.um-drawer__eyebrow {
  font-family: var(--th-f-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--th-ink-4);
}
.um-drawer__title {
  font-family: var(--th-f-serif); font-size: var(--th-size-20); font-weight: 500;
  letter-spacing: -0.01em; color: var(--th-ink); margin: 3px 0 0;
}
.um-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px 8px; min-height: 0; }

/* ==================================================================
   Invite drawer (Step 4b) — the wide drawer variant, its footer, and the
   form atoms (field/label/select/textarea, email-chip input, scope radio
   cards, invite summary). Lifted from the handoff's user-manager.css,
   token-mapped to --th-*. .um-scrim / .um-drawer base + @keyframes already
   exist above (peek drawer). .um-invite-error is a brief-required submit-
   failure surface the canon mock has no element for (its Send doesn't POST).
   ================================================================== */
.um-drawer--wide { width: 480px; }
.um-drawer__ft {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--th-line);
  background: var(--th-paper); flex: 0 0 auto;
}
.um-drawer__ft .spacer { flex: 1; }

.um-field { margin-bottom: 16px; }
.um-label {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--th-ink-2);
  margin-bottom: 6px; letter-spacing: 0.01em;
}
.um-label .opt { color: var(--th-ink-4); font-weight: 400; margin-left: 5px; }
.um-input, .um-select, .um-textarea {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--th-line-2); border-radius: var(--th-radius-3);
  background: var(--th-paper); color: var(--th-ink);
  font-family: var(--th-f-sans); font-size: var(--th-size-14); line-height: 1.5;
  outline: none; transition: border-color .12s, box-shadow .12s;
}
.um-textarea { resize: vertical; min-height: 64px; }
.um-input:focus, .um-select:focus, .um-textarea:focus {
  border-color: var(--th-advant); box-shadow: 0 0 0 3px var(--th-advant-soft);
}
.um-help { font-size: 11.5px; color: var(--th-ink-3); margin-top: 6px; line-height: 1.45; }

/* Email chip input */
.um-emails {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 78px; align-content: flex-start;
  padding: 8px; border: 1px solid var(--th-line-2); border-radius: var(--th-radius-3);
  background: var(--th-paper); cursor: text;
}
.um-emails:focus-within { border-color: var(--th-advant); box-shadow: 0 0 0 3px var(--th-advant-soft); }
.um-emailchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 9px; border-radius: var(--th-radius-pill);
  background: var(--th-paper-2); border: 1px solid var(--th-line);
  font-family: var(--th-f-mono); font-size: 11.5px; color: var(--th-ink);
}
.um-emailchip.is-bad { background: var(--th-risk-soft); border-color: color-mix(in oklab, var(--th-risk) 30%, transparent); color: var(--th-risk); }
.um-emailchip button {
  border: 0; background: none; cursor: pointer; color: var(--th-ink-4);
  font-size: 13px; line-height: 1; padding: 0 1px;
}
.um-emailchip button:hover { color: var(--th-risk); }
.um-emails input {
  flex: 1 1 90px; min-width: 90px; border: 0; outline: none; background: none;
  font-family: var(--th-f-sans); font-size: var(--th-size-14); color: var(--th-ink); padding: 4px 2px;
}

/* Radio cards (scope choice) */
.um-radio { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border: 1.5px solid var(--th-line-2); border-radius: var(--th-radius-3); cursor: pointer; transition: border-color .12s, background .12s; margin-bottom: 8px; }
.um-radio:last-child { margin-bottom: 0; }
.um-radio.is-on { border-color: var(--th-advant); background: var(--th-advant-soft); }
.um-radio input { margin-top: 2px; accent-color: var(--th-advant); }
.um-radio__main strong { display: block; font-size: 13px; font-weight: 600; color: var(--th-ink); }
.um-radio__main span { font-size: 11.5px; color: var(--th-ink-2); }

/* Invite review line + submit-failure banner */
.um-invite-summary { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--th-ink-2); }
.um-invite-summary b { color: var(--th-ink); }
.um-invite-error {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px;
  padding: 10px 12px; border-radius: var(--th-radius-3);
  background: var(--th-risk-soft); border: 1px solid color-mix(in oklab, var(--th-risk) 30%, transparent);
  color: var(--th-risk); font-size: 12.5px; line-height: 1.45;
}

/* ---- Peek content ----------------------------------------------- */
.um-peek-id { display: flex; align-items: center; gap: 13px; }
.um-peek-id .um-avatar { width: 44px; height: 44px; font-size: 15px; }
.um-peek-id__name { font-family: var(--th-f-serif); font-size: var(--th-size-20); font-weight: 500; color: var(--th-ink); letter-spacing: -0.01em; }
.um-peek-id__email { font-family: var(--th-f-mono); font-size: 12px; color: var(--th-ink-3); margin-top: 1px; }

.um-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--th-line); border: 1px solid var(--th-line); border-radius: var(--th-radius-5); overflow: hidden; margin: 18px 0; }
.um-fact { background: var(--th-paper); padding: 10px 12px; }
.um-fact__k { font-family: var(--th-f-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--th-ink-4); }
.um-fact__v { font-size: 13px; color: var(--th-ink); margin-top: 3px; font-variant-numeric: tabular-nums; }

.um-peek-scope { border: 1px solid var(--th-line); border-radius: var(--th-radius-5); padding: 12px 14px; margin-bottom: 10px; background: var(--th-paper); }
.um-peek-scope__hd { display: flex; align-items: center; gap: 9px; }
.um-peek-scope__hd > div { min-width: 0; flex: 1; }
.um-peek-scope__name { font-size: 13px; font-weight: 600; color: var(--th-ink); line-height: 1.3; }
.um-peek-scope__path { font-size: 11px; color: var(--th-ink-3); margin-top: 2px; line-height: 1.3; }
.um-peek-scope__roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.um-peek-icon { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--th-paper-2); border: 1px solid var(--th-line); color: var(--th-ink-3); flex: 0 0 auto; }

/* ---- Split layout ----------------------------------------------- */
.um-split { display: grid; grid-template-columns: 1fr; }
[data-layout="split"] .um-split { grid-template-columns: minmax(0,1fr) 372px; }
[data-layout="split"] .um-tablewrap { margin-right: 16px; }
.um-detail {
  display: none;
  border-left: 1px solid var(--th-line);
  background: var(--th-paper-sunk);
  min-height: 0;
}
[data-layout="split"] .um-detail { display: block; }
.um-detail__inner { position: sticky; top: 0; padding: 20px 20px 28px; }
.um-detail__empty {
  display: grid; place-items: center; text-align: center;
  height: 320px; color: var(--th-ink-4); font-size: 13px; padding: 24px;
}

/* ---- Empty state ------------------------------------------------- */
.um-empty {
  margin: 8px 24px; padding: 64px 24px; text-align: center;
  border: 1px dashed var(--th-line-2); border-radius: var(--th-radius-8);
  background: var(--th-paper-sunk);
}
.um-empty__glyph {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: var(--th-radius-8);
  display: grid; place-items: center; color: var(--th-ink-3);
  background: var(--th-paper-2); border: 1px solid var(--th-line);
}
.um-empty__title { font-family: var(--th-f-serif); font-size: 24px; font-weight: 500; color: var(--th-ink); letter-spacing: -0.012em; margin: 0; }
.um-empty__text { font-size: 13.5px; color: var(--th-ink-2); margin: 8px auto 18px; max-width: 42ch; line-height: 1.55; }

/* ---- Header checkbox alignment, sortable hint ------------------- */
.cc-table thead th.um-th-check { width: 36px; padding-left: 24px; }
.cc-table tbody td.um-td-check { padding-left: 24px; }
.cc-table thead th.um-th-sort { cursor: pointer; }
.cc-table thead th.um-th-sort:hover { color: var(--th-ink); }
.um-sortcaret { display: inline-flex; vertical-align: middle; margin-left: 3px; color: var(--th-ink-4); }

/* keep pager aligned with the page gutter */
.um-page .cc-pager { padding-left: 24px; padding-right: 24px; }

/* ==================================================================
   Bulk action bar (Step 4b) — floats sticky at the page bottom when rows
   are selected. Lifted from the handoff's user-manager.css, token-mapped.
   ================================================================== */
.um-bulkbar {
  position: sticky; bottom: 18px; z-index: 40;
  margin: 16px auto 24px; width: max-content; max-width: calc(100% - 48px);
  display: flex; align-items: center; gap: 14px;
  padding: 9px 10px 9px 16px;
  background: var(--th-ink); color: var(--th-paper);
  border-radius: var(--th-radius-pill);
  box-shadow: 0 14px 36px oklch(20% 0.02 255 / 0.28);
}
[data-theme="dark"] .um-bulkbar { background: var(--th-paper-sunk); color: var(--th-ink); border: 1px solid var(--th-line-2); }
.um-bulkbar__count { font-size: 13px; font-weight: 500; }
.um-bulkbar__count b { font-variant-numeric: tabular-nums; }
.um-bulkbar__sep { width: 1px; height: 18px; background: oklch(100% 0 0 / 0.22); }
[data-theme="dark"] .um-bulkbar__sep { background: var(--th-line-2); }
.um-bulkbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--th-radius-pill);
  background: oklch(100% 0 0 / 0.10); color: inherit;
  border: 0; cursor: pointer; font-family: var(--th-f-sans); font-size: 12.5px; font-weight: 500;
}
.um-bulkbtn:hover { background: oklch(100% 0 0 / 0.18); }
[data-theme="dark"] .um-bulkbtn { background: var(--th-paper-2); }
[data-theme="dark"] .um-bulkbtn:hover { background: var(--th-paper-3); }
.um-bulkbtn.is-danger { color: oklch(80% 0.12 25); }
.um-bulkbtn__close { background: none; border: 0; color: inherit; opacity: 0.7; cursor: pointer; padding: 4px; display: grid; place-items: center; }
.um-bulkbtn__close:hover { opacity: 1; }