/* ============================================================
   Comply Manage — design system
   Mirrors Comply Wallet's brand tokens (Geist + teal on slate)
   so the Wallet and Manager portals read as one product.
   ============================================================ */
:root { --nav-w:220px; }

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font); color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:15px; line-height:1.5;
  min-height:100vh;
  overflow-x:hidden;
}
h1,h2,h3,h4 { color:var(--fg-strong); font-weight:700; letter-spacing:-.02em; margin:0; }
p { margin:0; }
a { color:var(--link); text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
table { font-family:inherit; }
:focus-visible { outline:2px solid var(--teal-500); outline-offset:2px; border-radius:var(--r-xs); }
h1:focus, h1:focus-visible { outline:none; }

/* ---- boot / loading ---- */
.boot {
  position:fixed; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:18px; background:var(--bg);
  font-family:var(--font); font-size:15px; color:var(--fg-muted); font-weight:600;
  letter-spacing:-.01em;
}
.boot-mark { font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--fg-strong); }
/* The Comply mark sits inside the wordmark lockups. Sized in em so it tracks whatever
   font-size the surrounding lockup already sets, and spaced with a margin rather than a
   gap so the two-tone wordmark beside it keeps its existing tight pairing. */
.brand-glyph { width:1.3em; height:1.3em; flex:none; margin-right:.3em; vertical-align:-.2em; }
.boot-mark, .brand { display:inline-flex; align-items:center; }
.boot-mark span { color:var(--teal-500); }
.boot-bar { width:150px; height:5px; border-radius:var(--r-full); background:var(--slate-200); overflow:hidden; }
.boot-bar span { display:block; width:40%; height:100%; border-radius:var(--r-full); background:var(--teal-500); animation:boot 1.1s var(--ease) infinite; }
@keyframes boot { 0%{transform:translateX(-110%)} 100%{transform:translateX(360%)} }

#blazor-error-ui {
  display:none; position:fixed; bottom:0; left:0; right:0; padding:14px 20px;
  background:var(--slate-900); color:#fff; z-index:100; font-size:14px;
  box-shadow:0 -6px 20px #00000030;
}
#blazor-error-ui .reload { color:var(--teal-300); font-weight:600; margin-left:6px; }
#blazor-error-ui .dismiss { float:right; cursor:pointer; opacity:.75; }
#blazor-error-ui .dismiss:hover { opacity:1; }

/* ============================================================
   Density and numerals
   ============================================================ */
/* The portal design is compact and reads numbers as data: tabular figures in a monospace face, so
   a column of amounts lines up on the decimal instead of drifting. Set through the shell's own
   variables and the classes it already renders - no new layout, just the weight of the type. */
.ce-app {
  font-feature-settings:"cv11","ss01";
  font-variant-numeric:tabular-nums;
}

/* A page title in the design is a heading, not a banner. The default is nearer a banner. */
.ce-app .ce-page-title { font-size:1.6rem; letter-spacing:-.025em; }

/* Counts, totals and anything the eye scans down a column. */
.ce-app .ce-stat-value,
.ce-app .queue-count,
.ce-app td.numeric { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* ============================================================
   Header extras
   ============================================================ */
/* The reminders count, mounted in the shell's HeaderRight slot. .ce-header-btn does the sizing
   and hover; this only adds the badge, which the shell has no equivalent for. */
.reminders-bell { position:relative; }
.reminders-bell-count {
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--ce-danger); color:#fff;
  font-size:10px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
}

/* The search box is the widest thing in the header and the design gives it room. */
.ce-header .ce-search { flex:1; max-width:460px; }

/* ============================================================
   The brand block
   ============================================================ */
/* .ce-logo-text is color:white and .ce-header is --ce-bg-primary, which is white in light mode.
   The text-only logo fallback - what every host without a logo image gets - is therefore white on
   white, and the top-left corner of the portal renders empty. Raised upstream; corrected here so
   the product has a name on screen. */
.ce-header .ce-logo-text { color:var(--ce-text-primary); font-size:1.0625rem; letter-spacing:-.03em; }

/* The lockup sits over the sidebar's width, as it does in the portal design, so the rail and the
   brand share one left edge instead of drifting apart. */
.ce-header .ce-logo { min-width:calc(var(--sidebar-width) - var(--ce-space-6)); }

/* ============================================================
   The light rail
   ============================================================ */
/* The shell's sidebar defaults to the Credentry navy. The portal design we are working to puts
   the navigation on white, with the page as the darkest thing on screen rather than the lightest.

   This is a THEME, not a fork: the SDK exposes --ce-sidebar-bg / -text / -hover precisely so a
   host can do this, and --brand-bg-sidebar above them so a tenant can. Nothing here redefines a
   shell rule except the hover below, which has to change because the default is a white wash and
   white on white is nothing at all. */
:root {
  --ce-sidebar-bg: #ffffff;
  --ce-sidebar-text: #4a5663;
  --ce-sidebar-hover: #121923;
}

/* The shell's own hover is rgba(255,255,255,.05) — invisible on white. Same weight of wash, in
   the other direction. */
.ce-sidebar .ce-nav-item:hover { background:#1219230a; }

/* The rail needs an edge once it is the same colour as the header above it. */
.ce-sidebar { border-right:1px solid var(--ce-border-primary); }

/* Section headings were pale grey at 60% on navy. On white that is barely ink. */
.ce-sidebar .ce-nav-section-title { opacity:1; color:#8b96a8; }

/* ============================================================
   The reading column
   ============================================================ */
/* .ce-content is flex:1 with padding and NO max-width - right for a dashboard, wrong for pages
   made of sentences and forms. Without this a page description runs the full width of a desktop
   monitor as one line, and a list of cards becomes a column of near-empty strips.

   Bounded but LEFT-ALIGNED, which is what the portal design does: the content hugs the rail and
   runs out towards the right, rather than floating in the middle. Centring it looked fine at
   1440px and marooned on the 3413px screen this was checked on, with a thousand pixels of nothing
   down each side.

   1500px, not the old shell's 1040: a bound exists to stop a layout sprawling, and the thing that
   actually needs a short line is prose, which .ce-page-subtitle caps separately. A page that
   genuinely wants the full width opts out with .full-bleed. */
.ce-content > *:not(.full-bleed) { max-width:1500px; margin-inline:0 auto; }
.ce-content > .full-bleed { max-width:none; }

/* Prose wants a shorter line than a layout does. A page description set to the full 1100px
   reads as a wall; around 80 characters is where the eye still finds the next line. */
.ce-page-subtitle { max-width:80ch; }

/* A form is not a layout. .ui-form is this host's form hook and carried no rules at all, so every
   form on every page inherited the 1500px reading column: a "Reason" textarea a metre wide, date
   pickers with a kilometre of nothing beside them, and labels so far from their fields the pair
   stopped reading as one thing. A form is read one field at a time down a single column, so it
   gets a width the eye can run down. Pages that need a wide form opt out with .full-bleed. */
.ce-content .ui-form:not(.full-bleed) { max-width:44rem; }

/* ── Record tables on a phone ─────────────────────────────────────────────────
   The shared table scrolls sideways inside .ce-table-container when it does not fit, which keeps
   the page intact but makes a phone reader drag a table around to read a row. A roster is read on
   site, on a phone, so the supporting column gives way instead: name, status and the action stay,
   which is exactly what the hand-written phone list used to show before this page had one table.

   Column, not content — the cell is removed from the layout, not truncated, so nothing is half
   readable. Anything a reader still needs is on the row's own page. */
@media (max-width:640px) {
  .roster-table .ce-table th:nth-child(2),
  .roster-table .ce-table td:nth-child(2) { display:none; }
}

/* ============================================================
   Sidebar extras — what the Credentry shell does not carry
   ============================================================ */
/* The shell (PortalLayout), its header, sidebar, nav and content column are the SDK's, styled by
   credentry-ui.css. Everything the old hand-rolled shell needed - .shell, .topbar, .nav-menu, the
   tenant switcher, the sign-out menu, .bottom-nav - went with it.

   What remains is pinning, which the SDK has no equivalent for. It mounts in the sidebar's
   SidebarBelowTenant slot and borrows the SDK's own variables so it reads as part of the sidebar
   rather than as something bolted onto it. */
.nav-pinned { display:flex; flex-direction:column; gap:2px; padding:4px 8px 8px; }
/* A collapsed sidebar is a 72px icon rail, and the shell hides its own section titles,
   tenant switcher and footer there. Pinning has labels and no icons, so left visible it is
   a column of clipped text beside a tidy rail. */
.ce-sidebar.collapsed .nav-pinned { display:none; }
.nav-pinned-head { display:flex; align-items:center; justify-content:space-between; }
.nav-pinned-row { display:flex; align-items:center; gap:4px; }
.nav-pinned-row .ce-nav-item { flex:1; min-width:0; }
.nav-pinned-edit, .nav-pinned-add, .nav-pinned-remove, .nav-pinned-picker-item {
  background:none; border:0; cursor:pointer; font:inherit; color:var(--ce-text-muted);
}
.nav-pinned-edit { font-size:11px; font-weight:600; padding:2px 4px; }
.nav-pinned-edit:hover, .nav-pinned-remove:hover, .nav-pinned-add:hover,
.nav-pinned-picker-item:hover { color:var(--ce-text-primary); }
.nav-pinned-add { font-size:12px; font-weight:600; text-align:left; padding:6px 10px; border-radius:var(--ce-radius-sm, 6px); }
.nav-pinned-remove { font-size:14px; line-height:1; padding:2px 6px; border-radius:var(--ce-radius-sm, 6px); }
.nav-pinned-picker { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.nav-pinned-picker-item { font-size:12.5px; text-align:left; width:100%; padding:6px 10px; border-radius:var(--ce-radius-sm, 6px); }

/* ============================================================
   Focused layout — Login
   ============================================================ */
.focus {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:24px;
}

/* FocusedLayout wraps its page in .ce-app so the design system applies to it, and .ce-app is the
   shell's flex row — sidebar beside main. A focused page has neither, so .focus became a flex item
   and shrank to its content: the organisation picker sat in a 382px column against the left edge
   of a 2327px screen, with its own centring rules doing nothing inside it. It is the only child,
   so give it the row. */
.ce-app > .focus { flex:1; min-width:0; }
.focus-card {
  width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:36px 32px;
}
.focus-card .brand { font-size:21px; font-weight:800; letter-spacing:-.03em; color:var(--fg-strong); margin-bottom:6px; }
.focus-card .brand span { color:var(--teal-500); }
.focus-card h1 { font-size:23px; margin:2px 0 22px; }

.tenant-switching { font-size:14px; font-weight:600; color:var(--teal-500); }
.tenant-problem { font-size:13.5px; line-height:1.45; color:#94551a; background:var(--amber-bg); padding:10px 12px; border-radius:var(--r-md); }
.tenant-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }

/* ============================================================
   Forms — shared by Login (.field) and Invite (.ce-form-group)
   ============================================================ */
form { display:flex; flex-direction:column; }

/* ============================================================
   Buttons
   ============================================================ */

/* ============================================================
   Page shell — Review / Workers / Invite
   ============================================================ */

.card h3 { font-size:17px; margin-bottom:6px; }
.card p { color:var(--fg-muted); font-size:14px; }

.chip.default { background:var(--teal-100); color:var(--teal-700); }

/* ============================================================
` rule used to live here. It made every
   page's intro paragraph a flex container, so any intro containing inline markup
   (e.g. a bolded word) was laid out as side-by-side columns instead of a
   sentence — visible on Requirement sets. No page-head paragraph needs flex:
   they are all plain sentences. Removed rather than scoped. */

.queue-cards {
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; align-items:start;
}

.status-dot {
  display:inline-block; width:9px; height:9px; border-radius:var(--r-full); flex:0 0 auto;
}
.status-dot.red { background:var(--red); }
.status-dot.blue { background:var(--blue); }
.status-dot.amber { background:var(--amber); }
.status-dot.green { background:var(--green); }

.queue-card { padding:18px 18px 20px; display:flex; flex-direction:column; gap:14px; }
.queue-card-head { display:flex; align-items:center; gap:10px; }
.queue-card-head h3 { flex:1; font-size:16px; margin:0; }
.queue-count {
  display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px;
  padding:0 9px; border-radius:var(--r-full); font-size:13px; font-weight:700;
  background:var(--slate-100); color:var(--fg-strong);
}
.queue-count.red { background:var(--red-bg); color:var(--red); }
.queue-count.blue { background:var(--blue-bg); color:var(--link); }
.queue-count.amber { background:var(--amber-bg); color:#94551a; }

.queue-rows { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.queue-row {
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-md);
  background:var(--slate-50);
}
.queue-row.blocked { background:var(--red-bg); }

.avatar-initials {
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:32px; height:32px; border-radius:var(--r-full); font-size:12px; font-weight:700;
  background:var(--teal-100); color:var(--teal-700);
}
.queue-row.blocked .avatar-initials { background:#fff; color:var(--red); }

.queue-row-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.queue-row-title { font-size:14px; font-weight:600; color:var(--fg-strong); }
.queue-row-detail { font-size:12.5px; color:var(--fg-muted); }

.queue-row-action { font-size:13px; font-weight:600; color:var(--red); white-space:nowrap; }
.queue-row-action:hover { text-decoration:underline; }

.pill {
  display:inline-flex; align-items:center; flex:0 0 auto; padding:3px 10px; border-radius:var(--r-full);
  font-size:11.5px; font-weight:700; letter-spacing:.01em;
}
.pill.green { background:var(--green-bg); color:#2c6e2f; }
.pill.red { background:var(--red-bg); color:#a3201d; }

.queue-cta { width:100%; }

.queue-card-footnote { font-size:12.5px; color:var(--fg-subtle); margin:0; line-height:1.5; }

@media (max-width:900px) {
  .queue-cards { grid-template-columns:1fr; }
}

/* ============================================================
   Phone companion — #317 A4
   Hidden on desktop; the 519px breakpoint reveals them.
   ============================================================ */
.phone-head,
.phone-queues,
.at-the-gate { display:none; }

.phone-queues { flex-direction:column; gap:10px; }
.phone-queue {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line);
  color:inherit; box-shadow:var(--sh-1);
}
.phone-queue.blocked { background:var(--red-bg); border-color:transparent; }
.phone-queue.expiring { border-color:var(--amber); }
.phone-queue-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.phone-queue-title { font-weight:700; color:var(--fg-strong); font-size:15px; }
.phone-queue-detail { font-size:13px; color:var(--fg-muted); }
.phone-queue-go { color:var(--fg-subtle); font-size:18px; flex:0 0 auto; }

.at-the-gate { margin-top:28px; }
.at-the-gate-kicker {
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-subtle); margin-bottom:12px;
}
.lookup-cta { width:100%; }
.at-the-gate-hint { font-size:13px; color:var(--fg-muted); margin-top:10px; }
.roster-filter { display:flex; gap:10px; align-items:center; margin:0 0 14px; }
.roster-filter-chip {
  display:inline-flex; align-items:center; padding:4px 10px; border-radius:var(--r-full);
  background:var(--teal-50); color:var(--teal-800); font-size:13px; font-weight:600;
}
.filter-clear { background:none; border:0; color:var(--link); cursor:pointer; font:inherit; padding:0; }
tr.highlighted td { background:var(--teal-50); }

/* ---- requirement sets (the old Positions page is this list filtered by kind) ---- */
.kind-filter { display:flex; gap:10px; align-items:center; margin:18px 0 0; }
.kind-filter label { font-size:13px; color:var(--fg-muted); }
.kind-filter-select { padding:6px 10px; border:1px solid var(--line-strong); border-radius:var(--r-sm); font:inherit; }
.chip.kind { background:var(--slate-100); color:var(--fg-muted); }
.requirement-set-editor { padding:18px; margin:14px 0; }
.requirement-set-leaf-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.requirement-set-optional { display:inline-flex; align-items:center; gap:6px; margin:0; white-space:nowrap; font-weight:500; }
.requirement-set-optional input { width:auto; }
.requirement-set-editor-actions { display:flex; gap:10px; margin-top:12px; }
.exemption-form { display:grid; gap:12px; max-width:520px; margin-bottom:28px; }
.me-card { padding:24px; display:flex; flex-direction:column; gap:8px; max-width:420px; }
.me-name { font-size:20px; font-weight:700; color:var(--fg-strong); }
.me-tenant, .me-role { color:var(--fg-muted); }
.me-card .sign-out {
  align-self:flex-start; margin-top:12px;
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--fg-strong);
  font-size:14px; font-weight:600; padding:10px 18px; border-radius:var(--r-full);
}
.me-card .sign-out:hover { background:var(--slate-50); }

/* ============================================================
   Responsive — page content only. The sidebar's own behaviour at
   every width is the SDK shell's, driven by portal-shell.js.
   ============================================================ */
@media (max-width:860px) and (min-width:520px) {
  /* The measure is the whole width here; only the gutters need tightening. */
  .ce-content { padding:20px 16px 48px; }
}
@media (max-width: 519px) {
  .ce-content { padding:18px 16px 96px; }
  .desk-head { display:none; }
  .phone-head { display:block; }
  .phone-head .ce-page-title { font-size:28px; }
  .queue-cards { display:none; }
  .phone-queues { display:flex; }
  .at-the-gate { display:block; }
  .phone-collapse .review-queue-desc,
  .phone-collapse .review-queue-chips,
  .phone-collapse .review-queue-age,
  .phone-collapse .reviewer-avatar { display:none; }
  .review-item-row.phone-collapse .review-item-detail { display:none; }
}
@media (max-width:480px) {
  .focus-card { padding:28px 20px; }
}

/* ============================================================
   Review hub — grouped, collapsible queues (#317 A2)
   ============================================================ */
.review-stats {
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-bottom:20px;
}
.stat-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:16px 18px; display:flex; flex-direction:column; gap:4px;
}
.stat-label {
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-subtle);
}
.stat-value { font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--fg-strong); }
.stat-sub { font-size:12.5px; color:var(--fg-muted); }
.stat-card.breaching { border-color:#f19f4f66; }
.stat-card.breaching .stat-value { color:var(--amber); }

.review-filter-row {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:18px;
}
.filter-chip {
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--fg);
  font-size:13px; font-weight:600; padding:7px 15px; border-radius:var(--r-full);
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter-chip:hover { background:var(--slate-50); }
.filter-chip.active {
  background:var(--slate-900); color:#fff; border-color:var(--slate-900);
}
.filter-chip.breaching.active { background:var(--amber); border-color:var(--amber); color:#fff; }
.filter-row-spacer { flex:1; }
.collapse-all-btn {
  border:none; background:transparent; color:var(--link); font-size:13px; font-weight:600;
  padding:7px 4px;
}
.collapse-all-btn:hover { text-decoration:underline; }
.sort-label { font-size:13px; color:var(--fg-muted); }
.sort-label strong { color:var(--fg); }

.review-groups { display:flex; flex-direction:column; gap:22px; }
.review-group { display:flex; flex-direction:column; gap:0; }
.review-group-head {
  display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:none;
  padding:6px 4px; text-align:left;
}
.review-group-toggle { color:var(--fg-subtle); font-size:11px; width:12px; flex:0 0 auto; }
.review-group-name {
  font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--fg-muted);
}
.review-group-count {
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px;
  padding:0 7px; border-radius:var(--r-full); font-size:12px; font-weight:700;
  background:var(--teal-100); color:var(--teal-700);
}
.review-group-scope { margin-left:auto; font-size:12px; color:var(--fg-subtle); }

.review-group-body {
  display:flex; flex-direction:column; gap:10px; margin-top:8px;
}

.review-queue {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden;
}
.review-queue.empty {
  padding:12px 16px; border-style:dashed;
}
.review-queue.empty p {
  display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--fg-muted); margin:0;
}

.review-queue-head {
  display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer;
  transition:background var(--t-fast);
}
.review-queue-head:hover { background:var(--slate-50); }

.review-queue-info { display:flex; flex-direction:column; gap:2px; min-width:160px; }
.review-queue-name { font-size:14.5px; font-weight:700; color:var(--fg-strong); }
.review-queue-desc { font-size:12.5px; color:var(--fg-muted); }

.review-queue-chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip {
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:var(--r-full);
  font-size:11.5px; font-weight:600; background:var(--slate-100); color:var(--fg);
  white-space:nowrap;
}

.review-queue-age {
  margin-left:auto; font-size:13px; font-weight:600; color:var(--fg-muted); white-space:nowrap;
}
.review-queue-age.amber { color:#94551a; }
.review-queue-age.red { color:var(--red); }

.reviewer-avatar {
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:28px; height:28px; border-radius:var(--r-full); font-size:11px; font-weight:700;
  background:var(--teal-100); color:var(--teal-700);
}
.reviewer-avatar.unclaimed { background:var(--slate-100); color:var(--fg-subtle); }

.review-queue-count {
  display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px;
  padding:0 9px; border-radius:var(--r-full); font-size:13px; font-weight:700;
  background:var(--slate-100); color:var(--fg-strong);
}

/* ============================================================
   A3 reviewer (#317) — split document + fields on WizardShell
   ============================================================ */
.reviewer-layout {
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.9fr); gap:22px;
  height:100%; min-height:0; flex:1;
}
.reviewer-doc, .reviewer-fields {
  display:flex; flex-direction:column; min-height:0;
}
.reviewer-doc-head {
  display:flex; justify-content:space-between; gap:12px; margin-bottom:10px;
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-subtle);
}
.reviewer-stage {
  flex:1; min-height:280px; display:flex; align-items:center; justify-content:center;
  overflow:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--slate-50);
  background-image:repeating-linear-gradient(-45deg, var(--slate-50), var(--slate-50) 12px, var(--slate-100) 12px, var(--slate-100) 24px);
}
.reviewer-image {
  max-width:100%; max-height:100%; transform-origin:center center;
  transition:transform var(--t);
}
.reviewer-pdf { width:100%; height:100%; min-height:360px; border:none; }
.reviewer-no-preview, .reviewer-placeholder { text-align:center; color:var(--fg-muted); padding:24px; }
.reviewer-filename { font-weight:700; color:var(--fg-strong); margin:0 0 6px; }
.reviewer-doc-tools { display:flex; justify-content:flex-end; margin-top:10px; }

.reviewer-holder { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.reviewer-avatar-lg {
  width:44px; height:44px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center;
  background:var(--teal-100); color:var(--teal-700); font-weight:800; font-size:14px; flex:0 0 auto;
}
.holder-name { font-size:18px; font-weight:800; color:var(--fg-strong); letter-spacing:-.02em; }

.reviewer-field-kicker {
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-subtle); margin-bottom:8px;
}
.reviewer-field-list {
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface);
}
.reviewer-field-row {
  display:flex; justify-content:space-between; gap:12px; padding:12px 15px;
  font-size:14px; border-bottom:1px solid var(--line);
}
.reviewer-field-row:last-child { border-bottom:none; }
.reviewer-field-row span { color:var(--fg-muted); }
.reviewer-field-row b { color:var(--fg-strong); font-weight:600; text-align:right; }

.fix-dialog {
  margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
}
.fix-dialog h3 { font-size:16px; margin-bottom:6px; }
.fix-dialog p { color:var(--fg-muted); font-size:13.5px; margin-bottom:10px; }
.fix-reason {
  width:100%; min-height:88px; padding:10px 12px; border:1.5px solid var(--line-strong);
  border-radius:var(--r-md); font-family:inherit; font-size:14px; color:var(--fg-strong); resize:vertical;
}
.fix-reason:focus { outline:none; border-color:var(--teal-500); }
.fix-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }

@media (max-width:900px) {
  .reviewer-layout { grid-template-columns:1fr; }
}

.review-queue-items { list-style:none; margin:0; padding:0 16px 10px; display:flex; flex-direction:column; gap:1px; }
.review-item-row {
  display:flex; align-items:center; gap:12px; padding:9px 4px; border-top:1px solid var(--line);
  font-size:13.5px;
}
.review-item-holder { font-weight:600; color:var(--fg-strong); min-width:140px; }
.review-item-detail { color:var(--fg-muted); flex:1; }
.review-item-detail .submission-kind { margin-left:6px; }
.review-item-relevance { display:block; font-size:12px; color:var(--fg-muted); }
.review-item-age { color:var(--fg-subtle); font-size:12.5px; }
.reviewer-link { color:var(--link); font-size:12.5px; font-weight:600; white-space:nowrap; cursor:default; }
button.reviewer-link {
  background:none; border:none; padding:0; font:inherit; color:var(--link);
  font-size:12.5px; font-weight:600; cursor:pointer;
}
button.reviewer-link:hover { text-decoration:underline; }

.review-queue-footnote {
  font-size:12.5px; color:var(--fg-subtle); padding:0 16px 12px; display:flex; justify-content:space-between; gap:10px;
}

@media (max-width:900px) {
  .review-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .review-queue-head { flex-wrap:wrap; }
  .review-queue-age { margin-left:0; }
}
.chip.override { background:var(--amber-bg); color:#94551a; }
.profile-editor { margin-top:16px; display:flex; flex-direction:column; gap:16px; }
.perm-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px 12px;
}
.perm-item {
  display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--fg);
  cursor:pointer; padding:4px 0;
}
.perm-item input { margin-top:3px; accent-color:var(--teal-500); }
.perm-item span { word-break:break-word; }
.profile-editor-actions { display:flex; gap:10px; flex-wrap:wrap; }

.queue-empty { min-height:200px; }
.queue-empty-link { margin-top:auto; font-weight:600; }
.review-queue-toggle { display:flex; align-items:center; gap:12px; flex:1; min-width:0; min-height:44px; text-align:left; border:0; background:transparent; color:inherit; padding:0; font:inherit; cursor:pointer; }
@media (max-width:760px) { .review-queue-toggle { flex-wrap:wrap; } }
.at-the-gate .lookup-cta + .lookup-cta { margin-top:var(--space-3); }
.ce-alert + .btn { margin-bottom:var(--space-4); }
/* What you have already picked, inside the assign form — a removable list of choices, not a list
   of records. It borrowed .forms-row's name back when the page below it was a card list, and kept
   it after that became a table, which left the retired-idiom check pointing at a false positive.
   Its own name now, because it is its own thing. */
.chosen-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-width: 0; flex-wrap: wrap; }
.chosen-row > span { min-width: 0; flex: 1 1 16rem; overflow-wrap: anywhere; }
.form-answer { white-space: pre-wrap; overflow-wrap: anywhere; }

.forms-detail-summary { padding: var(--space-4); margin-block: var(--space-4); }
.foundation-options { list-style: none; padding: 0; display: grid; gap: .75rem; }
.foundation-options li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; overflow-wrap: anywhere; }
.foundation-options li > span { flex: 1 1 12rem; min-width: 0; }

.foundation-check { display: flex; align-items: flex-start; gap: .75rem; margin-block: .75rem; overflow-wrap: anywhere; }
.foundation-check input { flex: 0 0 auto; width: auto; }

.foundation-fields { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1rem; }

/* Why a reminder is here, as a stripe down the row: overdue is a problem, expiring is notice.
   Unscoped on purpose — the rows belong to CeDataTable, so a scoped rule never reaches them. */
.reminders-table .ce-table tbody tr { border-left: 4px solid transparent; }
.reminders-table .ce-table tbody tr.overdue { border-left-color: var(--red); }
.reminders-table .ce-table tbody tr.expiring { border-left-color: var(--amber); }