`` so it survives * panel switches between platform-dashboard, mainWorkspace, etc. * That means it ignores the sidebar offset baked into the parent * layout — we apply the same ``margin-left: var(--left-nav-width)`` * the topbar uses (styles.css:1379) so the leading characters * don't get clipped under the sidebar (2026-05-11 layout fix). */ .email-confirm-banner{ display:flex; align-items:center; gap:12px; padding:10px 14px; margin:12px 12px 12px calc(var(--left-nav-width) + 12px); /* UI polish 2026-05-12 — softened from 5% primary tint + 20% * primary border to a near-flat surface with a standard hairline * so the strip stops competing with the page H2. The primary- * coloured ``✉`` icon + Resend button stay as the single accents * — that's enough to read as a calm nudge. */ background:var(--surface-2); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:0.85rem; width:calc(100% - var(--left-nav-width) - 24px); box-sizing:border-box; flex-shrink:0; } @media (max-width: 1100px) { /* Mobile / collapsed sidebar — left-nav goes away in the * hamburger flow, so the banner can occupy the full width * like the subscription-expired-banner does inside main. */ .email-confirm-banner{ margin:12px; width:calc(100% - 24px); } } .email-confirm-banner__icon{font-size:1.2rem;flex-shrink:0;color:var(--primary);} .email-confirm-banner__text{flex:1;} .email-confirm-banner__actions{ display:flex; align-items:center; gap:8px; } .email-confirm-banner__status{ font-size:0.8rem; color:var(--text-soft); min-width:0; } .email-confirm-banner__dismiss{ background:none; border:0; color:var(--text-soft); font-size:1.3rem; line-height:1; cursor:pointer; padding:2px 6px; border-radius:6px; } .email-confirm-banner__dismiss:hover{ background:color-mix(in srgb, var(--primary) 8%, transparent); color:var(--text); } .status-badge--warning{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;padding:2px 8px;border-radius:4px;font-size:0.75rem;} .status-badge--danger{background:#fff1f2;color:#be123c;border:1px solid #fecdd3;padding:2px 8px;border-radius:4px;font-size:0.75rem;} .create-user-form .success{ padding:10px 12px; border-radius:12px; background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; } .account-settings-checkbox{ display:flex; align-items:center; gap:8px; cursor:pointer; font-size:0.95rem; color:#334155; } .account-settings-checkbox input[type=checkbox]{ width:16px; height:16px; cursor:pointer; } /* ------------------------------------------------------------------------- * Care home dashboard header card — two-column layout at the top of the * main workspace when a care home is in scope. * ------------------------------------------------------------------------- */ .care-home-header-card{ /* Compact two-column layout. Split kept left-of-centre so the CQC widget has enough native width to render without clipping, but the widget itself is visually down-scaled below (transform: scale) so it takes less on-screen real-estate overall. */ /* Care Home Dashboard polish (M16) — flat 6px tile, plain white surface. The card sits above the readiness hero as a thin identity-reference strip; flat surface keeps the hierarchy reading "identity (quiet) → readiness (loud)". */ display:grid; grid-template-columns:minmax(0, 1fr) minmax(260px, 0.85fr); gap:14px; align-items:start; padding:10px 14px; margin:8px 0; background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow-xs); } .care-home-header-card.hidden{display:none;} .care-home-header-card__details{ min-width:0; display:flex; flex-direction:column; gap:4px; } .care-home-header-card__ratings{ min-width:0; display:flex; flex-direction:column; /* Stretch children horizontally — prior `flex-start` was letting the CQC widget sit at its natural small width; now it fills the column. */ align-items:stretch; gap:6px; padding-left:14px; border-left:1px solid var(--line); } .care-home-header-card__name{ font-size:1.05rem; font-weight:700; color:var(--text); margin:0; /* Allow the subscription status-badge to sit inline with the name and wrap to a new line on narrow columns rather than overflowing. */ display:flex; flex-wrap:wrap; align-items:center; gap:8px; line-height:1.2; } .care-home-header-card__tier-badge{ /* Align the badge's optical baseline with the heading text and keep it compact — uses the shared .status-badge palette already. */ font-size:0.78rem; vertical-align:middle; } .care-home-header-card__meta{ /* Stack pills vertically so each (CQC ID, Phone, Email, Home Manager, Subscription) sits on its own line. Previously they were horizontal flex which ran long values off the side and made the column feel cramped. */ display:flex; flex-direction:column; gap:2px; font-size:0.82rem; color:var(--text); line-height:1.35; } .care-home-header-card__meta-item{ display:flex; align-items:baseline; gap:10px; min-width:0; /* Long values (email, address) wrap instead of overflowing the column. */ overflow-wrap:anywhere; word-break:break-word; } .care-home-header-card__meta-label{ flex:0 0 auto; font-weight:600; color:var(--text-soft); text-transform:uppercase; letter-spacing:0.04em; font-size:0.72rem; min-width:92px; } .care-home-header-card__address{ font-size:0.82rem; color:var(--text-soft); line-height:1.35; } .care-home-header-card__ratings-title{ font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-soft); } .care-home-header-card__rating-overall{ display:flex; align-items:baseline; gap:10px; } .care-home-header-card__rating-overall-value{ font-size:1.3rem; font-weight:700; } .care-home-header-card__rating-meta{ font-size:0.78rem; color:var(--text-soft); } .care-home-header-card__rating-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; font-size:0.82rem; } .care-home-header-card__rating-row{ display:flex; justify-content:space-between; gap:8px; } .care-home-header-card__rating-row-label{ color:var(--text-soft); } .care-home-header-card__rating-row-value{ font-weight:600; } /* CQC rating palette — maps each known rating to a badge background/text. */ .cqc-rating-badge{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:0.78rem; font-weight:600; white-space:nowrap; } /* CQC widget is injected as a sandboxed iframe (see _injectCqcWidget in * app.js). We use CSS `zoom` on the iframe to shrink the rendered widget * while also shrinking its layout box — a plain transform:scale() leaves * the original box behind and creates awkward blank space. `zoom` is * supported in all evergreen browsers (Chrome/Safari always, Firefox 126+). */ .care-home-header-card__cqc-widget{ display:block; width:100%; align-self:stretch; /* Clip any residual overflow from the third-party widget's own CSS. */ overflow:hidden; } .care-home-header-card__cqc-widget iframe{ /* Height is set by the postMessage handler in _injectCqcWidget (app.js) once the widget paints and reports its content size. `zoom` applies after that and scales both the visible render AND the layout height — so a 400px reported iframe height becomes ~320px of actual on-screen space at zoom 0.8. The JS clamp reads this `zoom` value via getComputedStyle so the iframe's max layout height auto-adapts: changing this factor here keeps the on-screen ceiling consistent without needing a parallel JS edit. */ display:block; width:100%; border:0; overflow:hidden; zoom:0.8; } .cqc-rating-badge--outstanding{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;} .cqc-rating-badge--good{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;} .cqc-rating-badge--requires-improvement{background:#fef3c7;color:#92400e;border:1px solid #fde68a;} .cqc-rating-badge--inadequate{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;} .cqc-rating-badge--unknown{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;} .care-home-header-card__rating-empty{ font-size:0.85rem; color:var(--text-soft); font-style:italic; } @media (max-width: 720px){ .care-home-header-card{grid-template-columns:1fr;} .care-home-header-card__ratings{ border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:14px; } } .care-home-assignments{ display:flex; flex-direction:column; gap:8px; border:1px solid var(--line); border-radius:8px; padding:8px; } .care-home-assignment-row{ display:flex; align-items:center; gap:12px; padding:6px 8px; border-radius:6px; transition:background 0.15s; } .care-home-assignment-row:hover{background:#f8fafc;} .care-home-assignment-row__check{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-weight:500;} .care-home-assignment-row__check input[type=checkbox]{width:16px;height:16px;cursor:pointer;} .care-home-assignment-row__name{flex:1 1 auto;font-weight:500;color:#334155;} .care-home-assignment-row__role{flex:0 0 260px;} .care-home-assignment-row__role select{width:100%;cursor:pointer;} .care-home-assignment-row--unassigned .care-home-assignment-row__role select{opacity:0.5;} @media (max-width: 720px) { .care-home-assignment-row{flex-direction:column;align-items:flex-start;} .care-home-assignment-row__role{flex:1 1 100%;width:100%;} } /* Admin-mode Edit User — editable multi-provider assignment blocks. Each block renders a provider header, a provider-wide-role dropdown, and the same .care-home-assignment-row rows the tenant renderer uses. */ .edit-user-admin-block{ margin:0 0 16px 0; padding:12px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; } .edit-user-admin-block:last-child{margin-bottom:0;} .edit-user-admin-block__header{margin-bottom:8px;} .edit-user-admin-block__title{font-weight:600;color:#111827;font-size:14px;} .edit-user-admin-block__provider-row{ display:flex;align-items:center;gap:12px;margin:6px 0 10px; padding:6px 8px;background:#fff;border:1px solid #eef2f6;border-radius:6px; } .edit-user-admin-block__label{flex:0 0 160px;font-weight:500;color:#334155;font-size:13px;} .edit-user-admin-block__provider-row select{flex:1 1 auto;} .edit-user-admin-block__homes-label{ font-size:12px;color:#64748b;margin:4px 0 4px;text-transform:uppercase;letter-spacing:0.04em; } .edit-user-admin-block__homes{display:flex;flex-direction:column;gap:2px;} /* ========================================================= 7) BASIC FORM CONTROLS ========================================================= */ .input{ width:100%; min-width:0; height:var(--input-h); padding:0 14px; border-radius:14px; border:1px solid var(--line); background:linear-gradient(180deg, #ffffff, #fbfdff); color:var(--text); outline:none; box-shadow:inset 0 1px 0 rgba(255,255,255,0.96); transition:border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } textarea.input{ min-height:120px; height:auto; padding:13px 14px; resize:vertical; line-height:1.5; } .input::placeholder{ color:#94a3b8; } .input:hover{ border-color:#b9cbe2; } .input:focus{ border-color:#83aae6; box-shadow:0 0 0 4px var(--primary-soft); } /* Non-editable form fields — single source of truth for the * "greyed out + X cursor" treatment that the user expects across * every panel (Care Home Settings, Provider Settings, Audit * detail views, supervision sessions, anywhere a field is * locked). Covers all four states a form control can be locked in: * - .input.is-readonly — explicit class some panels add * - .input[readonly] — ,

*   - .input[disabled]    — <input>, <select>, <textarea> (attr form)
 *   - .input:disabled     — :disabled pseudo (attr or property)
 * <select> doesn't honour ``readonly``, so the disabled selectors
 * are what light it up. Hover cursor is set on the field itself
 * so the X appears even on Safari/iOS where `cursor` propagation
 * is finicky. The body prefix matches the specificity of the
 * flat-design override at ``body:not(.landing-page):not(.auth-page) .input``
 * (background:#ffffff) — without it that rule wins on specificity
 * and the locked greyed-out background never paints. */
body:not(.landing-page):not(.auth-page) .input.is-readonly,
body:not(.landing-page):not(.auth-page) .input[readonly],
body:not(.landing-page):not(.auth-page) .input[disabled],
body:not(.landing-page):not(.auth-page) .input:disabled{
  background:#f3f5f8;
  color:#4a5568;
  cursor:not-allowed;
}

/* =========================================================
   8) BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #ffffff, #fbfdff);
  color:var(--text);
  cursor:pointer;
  transition:transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
  box-shadow:var(--shadow-xs);
  font-weight:600;
  /* Buttons must never wrap their label across two lines — that
     produced the "+ New / template" overflow on Settings → HR
     Documents (image #124 2026-05-07). Use ``flex-shrink:0`` on
     the surrounding action wrapper if the button still gets
     squeezed; this rule alone keeps the label intact. */
  white-space:nowrap;
}

.btn:hover{
  transform:translateY(-1px);
  border-color:#c6d4e6;
  background:#ffffff;
  box-shadow:var(--shadow-sm);
}

.btn:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--primary-soft-12);
}

.btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
  transform:none;
}

.btn-primary{
  background:linear-gradient(180deg, var(--primary), var(--primary-2));
  border-color:var(--primary);
  color:#ffffff;
  box-shadow:0 10px 22px var(--primary-soft-20);
}

.btn-primary:hover{
  background:var(--primary-2);
  border-color:var(--primary-2);
}

.btn-secondary{
  background:#eff6ff;
  border-color:#cfe0ff;
  color:#1d4ed8;
}

.btn-secondary:hover{
  background:#e3efff;
  border-color:#bfd6ff;
}

.btn-danger{
  background:#ffffff;
  border-color:#fecaca;
  color:#dc2626;
}

.btn-danger:hover{
  background:#fff5f5;
  border-color:#fca5a5;
}

/* Outlined-green affirmative variant — the restorative counterpart to
   .btn-danger (e.g. "Mark applicable" returning a control to the
   readiness score). Mirrors .btn-danger's outlined treatment. */
.btn-success{
  background:#ffffff;
  border-color:#bbf7d0;
  color:#16a34a;
}
.btn-success:hover{
  background:#f0fdf4;
  border-color:#86efac;
}

/* Ghost / tertiary — transparent, sits beside primary/secondary in
   per-card header action rows. Used for low-emphasis utility actions
   like "Restore defaults" or "Manage sections" where placing a fresh
   coloured button next to the primary CTA would over-compete. Focus
   ring inherits from .btn:focus; hover lifts via .btn:hover transform. */
.btn-ghost{
  background:transparent;
  border-color:transparent;
  color:var(--text-soft);
  box-shadow:none;
}

.btn-ghost:hover{
  background:var(--surface-2);
  border-color:var(--line);
  color:var(--text);
}

.app-pill{
  background:linear-gradient(180deg, #eff5ff, #e7f0ff);
  border-color:#cadeff;
  box-shadow:var(--shadow-xs);
}

.btn-sm{
  min-height:34px;
  padding:6px 10px;
  line-height:1;
}

.table-actions,
.table-evidence-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.table-actions{
  justify-content:flex-end;
}

.table-evidence-actions{
  /* Tightened — the cell is more vertical-density-sensitive than
     the row-actions column, so 4px instead of 8px above the
     buttons keeps the cell compact. */
  margin-top:4px;
}

.table-action-btn{
  min-height:36px;
  padding:0 12px;
  border-radius:6px;
}

/* Change 3 (feature/action-register-ui) — the Actions column's "⋮"
   overflow button + its dropdown menu. The menu is a popover pinned to
   the toggle by JS (same model as the Evidence detail popover) so it
   floats above the table; role="menu" / role="menuitem" + arrow-key
   navigation are wired in app.js. */
.table-action-overflow{
  min-height:36px;
  min-width:36px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#ffffff;
  color:var(--text-soft);
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
}
.table-action-overflow:hover{
  background:#f1f5f9;
}
.table-action-overflow:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:1px;
}
.table-actions-menu{
  position:fixed;
  top:0;
  left:0;
  z-index:1200;
  min-width:168px;
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:4px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:6px;
  box-shadow:0 10px 28px rgba(15,23,42,0.18);
}
.table-actions-menu[hidden]{
  display:none;
}
.table-actions-menu-item{
  display:block;
  width:100%;
  padding:8px 10px;
  border:0;
  border-radius:6px;
  background:none;
  font:inherit;
  font-size:0.85rem;
  text-align:left;
  color:var(--text);
  cursor:pointer;
}
.table-actions-menu-item:hover,
.table-actions-menu-item:focus-visible{
  background:#f1f5f9;
  outline:none;
}
.table-actions-menu-item.is-danger{
  color:#b91c1c;
}
.table-actions-menu-item.is-positive{
  color:#15803d;
}
.table-actions-menu-item:disabled{
  color:var(--text-muted);
  cursor:not-allowed;
}

.table-action-btn[data-history],
.table-action-btn[data-view]{
  background:#ffffff;
  border-color:var(--line);
  color:var(--text-soft);
}

.table-action-btn[data-upload],
.table-action-btn[data-edit]{
  background:#ffffff;
  border-color:var(--line);
  color:var(--text-soft);
}

.table-row-title{
  font-weight:600;
}

button.table-row-title{
  all:unset;
  font-weight:600;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-color:transparent;
}
button.table-row-title:hover,
button.table-row-title:focus-visible{
  text-decoration-color:var(--text-soft);
}

/* =========================================================
   9) ROWS / WIDTH HELPERS / SPACING
   ========================================================= */
.row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.row-space{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.row-space > .row{
  flex-wrap:wrap;
  justify-content:flex-end;
}

.w60{ width:60px; }
.w90{ width:90px; }
.w120{ width:120px; }
.w140{ width:140px; }
.w160{ width:160px; }
.w180{ width:180px; }
.w220{ width:220px; }

.grow{ flex:1 1 auto; min-width:0; }

/* Vertical-rhythm utilities. Standard tokens: 0 / 4 / 6 / 8 /
   10 / 12 / 16 / 20 / 24 px. Used app-wide for stacking
   spacing between sibling blocks inside a card or panel. The
   12px step is the default gap between distinct sub-blocks
   (e.g. a panel of figures and the table that follows). The
   16px step is reserved for a clearer visual break between
   semantically distinct sections. See docs/project_context.md
   for the full convention. */
.mt0{ margin-top:0; }
.mt4{ margin-top:4px; }
.mt6{ margin-top:6px; }
.mt8{ margin-top:8px; }
.mt10{ margin-top:10px; }
.mt12{ margin-top:12px; }
.mt16{ margin-top:16px; }
.mt20{ margin-top:20px; }
.mt24{ margin-top:24px; }
.mb0{ margin-bottom:0; }
.mb4{ margin-bottom:4px; }
.mb8{ margin-bottom:8px; }
.mb12{ margin-bottom:12px; }
.mr10{ margin-right:10px; }
.padx{ padding:0 8px; }

/* =========================================================
   10) API KEY / PILLS
   ========================================================= */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid #dbeafe;
  color:#1d4ed8;
  font-weight:700;
  letter-spacing:-0.01em;
}

/* =========================================================
   11) CREATE ACTION AREA
   ========================================================= */
.create-actions-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
}

/* =========================================================
   12) KPI CARDS
   ========================================================= */
.kpi-grid{
  display:grid;
  /* auto-fit keeps every tile on one row when there's room, wrapping
     only when tiles would get narrower than ~150px. Previously a hard
     4-column grid forced the 5th KPI (e.g. Compliance overdue, Current)
     onto a lonely second line. */
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:16px;
  margin-top:16px;
}

.kpi-card{
  position:relative;
  overflow:hidden;
  padding:18px 18px 20px;
  border-radius:20px;
  background:
    radial-gradient(circle at top right, var(--primary-soft), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  border:1px solid rgba(205,219,236,0.95);
  box-shadow:var(--shadow-sm);
}

.kpi-card-actionable{
  width:100%;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  appearance:none;
}

.kpi-card-actionable:hover{
  transform: translateY(-1px);
  /* Hover reads as "this card is interactive" — brand-tinted border
     + a faint brand wash so the manager sees the affordance even
     before clicking. Distinct from the active state's heavier
     fill (which uses ~0.20 opacity). */
  border-color: var(--primary);
  background: rgba(18, 10, 143, 0.07);
  box-shadow: 0 0 0 2px var(--primary-soft), var(--shadow-md);
}

.kpi-card-actionable:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--primary-soft-strong), var(--shadow-md);
}

/* Active filter card — clearly shaded so the active card reads
   filled-in across the room. Solid ``#c8c5e8`` is a desaturated
   brand tint (~ rgba 18,10,143,0.30 over white) — deeper than the
   earlier 0.20 wash which was too subtle. Solid value (no
   opacity) so the final colour is predictable regardless of the
   ``.kpi-card`` base gradient backplate. */
.kpi-card-actionable.is-active,
.kpi-card-actionable.is-active:hover{
  transform: none;
  border-color: var(--primary);
  background: #c8c5e8;
  box-shadow:
    inset 0 0 0 1px var(--primary),
    0 0 0 3px var(--primary-soft),
    var(--shadow-md);
}
.kpi-card-actionable.is-active::before{
  height: 6px;
}
.kpi-card-actionable.is-active .kpi-label{
  color: var(--primary);
  font-weight: 700;
}
.kpi-card-actionable.is-active .kpi-value{
  color: var(--primary);
}

.kpi-filter-bar{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid rgba(205,219,236,0.95);
  border-radius:18px;
  background:linear-gradient(180deg, #fbfdff, #f5f9ff);
}

.kpi-filter-kicker{
  font-size:0.76rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}

/* M16.45 — inline evidence-health error banner. Reuses the shared
   .error palette (same as the gaps panel error) and lays the message
   + Reload button out on one row. */
.kpi-health-error{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* ── M16.47 Evidence-tab redesign (Phase 2) ───────────────────────── */
.evidence-header-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.evidence-summary-band{ align-items:stretch; }
.evidence-health-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.evidence-health-gauge{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.evidence-gauge{ position:relative; width:170px; max-width:100%; }
.evidence-gauge-svg{ width:100%; height:auto; display:block; }
.evidence-gauge-center{
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.evidence-gauge-pct{ font-size:1.9rem; font-weight:800; line-height:1; color:var(--text); }
.evidence-gauge-sub{ font-size:0.85rem; text-align:center; }
.evidence-gauge-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:18px 6px;
}
.evidence-gauge-empty .evidence-gauge-pct{ color:var(--text-muted); }
.kpi-grid--evidence{
  /* Three equal columns that share one row + stretch to equal height so
     the KPI block reads as a tidy set beside the gauge (was auto-fit +
     align-content:start → uneven columns and short, un-aligned cards). */
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:stretch;
  grid-auto-rows:1fr;
}
.kpi-grid--evidence .kpi-card{
  /* Flat 6px card matching every other Evidence box — solid surface +
     single light shadow (base .kpi-card keeps its gradient + heavier
     shadow-sm + 20px for the Provider dashboard). */
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:6px;
  background:var(--surface);
  box-shadow:var(--shadow-xs);
}
@media (max-width:720px){
  .kpi-grid--evidence{ grid-template-columns:1fr; }
}
.evidence-missing-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface-2);
}
.evidence-missing-link:empty{ display:none; }
.evidence-missing-link__text{ color:var(--text-soft); font-size:0.9rem; }
.evidence-system-tools .panel-header-collapsible{ align-items:flex-start; }

/* System tools (super-admin only) reads as a secondary maintenance zone:
   muted surface + flat nested cards (one radius, no stacked shadows) so it
   doesn't compete with the manager-facing panels (was mixed 14/16/22px
   radii + per-card shadows → a busy "3D" block). */
.evidence-system-tools{
  background:var(--surface-2);
  box-shadow:var(--shadow-xs);
}
.evidence-system-tools .panel{
  background:var(--surface);
  box-shadow:none;
  border-radius:6px;
}
/* Every System-tools sub-box shares ONE flat 6px chrome — was a mix of
   14/16px radii + gradient fills + per-card shadows (status rows, stat
   tiles, warning + feedback banners). Semantic colours (success/error/
   warning/hint) are kept; only the shape + gradient/shadow are unified. */
.evidence-system-tools .expiry-automation-stat,
.evidence-system-tools .expiry-automation-status-row,
.evidence-system-tools .expiry-automation-warning,
.evidence-system-tools .expiry-automation-feedback,
.evidence-system-tools .expiry-automation-history-row{
  border-radius:6px;
}
.evidence-system-tools .expiry-automation-stat,
.evidence-system-tools .expiry-automation-status-row{
  background:var(--surface);
  box-shadow:none;
}

.kpi-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  /* Solid brand strip — was a gradient to a sky-blue (#6aa3ff)
     that no longer harmonised once the brand primary moved to a
     deeper navy. */
  background: var(--primary);
}

.kpi-label{
  color:var(--text-muted);
  font-size:0.85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.kpi-value{
  margin-top:12px;
  font-size:2.15rem;
  font-weight:800;
  letter-spacing:-0.05em;
  color:var(--text);
}

.kpi-filter-text{
  margin-top:4px;
  font-weight:700;
  color:var(--text);
}

.kpi-sub{
  font-size:0.78rem;
}

/* =========================================================
   Care Home Dashboard polish (M16) — KPI scope overrides
   =========================================================
   The base ``.kpi-card`` carries a dual-gradient backplate +
   brand-top 4px strip + ``--shadow-sm`` drop shadow that fits the
   marketing surfaces but reads loud on the operational dashboard.
   The lock target (``docs/design-system.md``) is 6px radii, flat
   surface, single brand colour through interactive states only.
   Tightening the BASE ``.kpi-card`` would also restyle Provider
   and Platform Dashboards which are out of scope for this branch
   (memory: ``feedback_narrow_branch_scope``), so we scope the
   tighten via:

- ``.kpi-grid--compact`` modifier (Band 2 trimmed counts strip)
     - ``.kpi-card--compact`` modifier (Band 3b Required care time
       mini-tile)

Provider / Platform polish branches will copy these values to
   their own scoped wrappers (or promote the rule to the base
   class once all surfaces are aligned). */
.kpi-grid--compact{
  /* Trimmed strip: 2 tiles. Cap tile width so the row doesn't
     stretch wide on a 1440px desktop. Falls back to single-column
     stack at narrow viewports via ``minmax(180px, …)``. */
  grid-template-columns:repeat(auto-fit, minmax(180px, 280px));
  gap:12px;
}

.kpi-grid--compact .kpi-card{
  border-radius:6px;
  background:var(--surface);
  box-shadow:var(--shadow-xs);
  padding:14px 16px 16px;
}

.kpi-grid--compact .kpi-card::before{
  /* Drop the brand-top 4px strip in the compact strip — the brand
     colour belongs on interactive states (hover/focus/active),
     not as a permanent rule on every count. */
  display:none;
}

.kpi-card.kpi-card--compact{
  /* Required care time mini-tile in Band 3b. Uses the compact
     KPI styling (flat, 6px) at a smaller scale so it sits as a
     reference card alongside the identity strip rather than
     competing with the operational counts in Band 2. */
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  width:auto;
  min-width:200px;
  max-width:280px;
  padding:12px 14px 14px;
  border-radius:6px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-xs);
}

.kpi-card--compact::before{
  display:none;
}

.kpi-card--compact .kpi-value{
  margin-top:6px;
  font-size:1.6rem;
}

/* =========================================================
   Care Home Dashboard polish (M16) — Panel scope overrides
   =========================================================
   Dashboard-scoped only: ``.panel[data-care-home-panel="dashboard"]``
   matches the Needs attention / Recent activity / finance summary
   panels on the Care Home Dashboard, leaving Provider and Platform
   panels untouched. Same flat-6px treatment as the readiness /
   domain / kpi card overrides above. */
.panel[data-care-home-panel="dashboard"]{
  border-radius:6px;
  background:var(--surface);
  box-shadow:var(--shadow-xs);
  border-color:var(--line);
}

/* =========================================================
   Care Home Dashboard polish (M16) — Phase 3 typography
   =========================================================
   - Readiness hero: 3rem → 2.5rem on the score and 600 weight
     (was 800). The flat surface no longer competes with the score
     so a slightly smaller, less heavy figure reads cleaner — and
     scaling back lets the gap pills and module-source chips share
     the visual budget.
   - Section kicker (eyebrow): scoped to the dashboard panel,
     inherits the brand colour from the global ``.section-kicker``
     rule. Adds a tiny bottom margin so it lifts off the section
     title.
   - KPI label / value: only the trimmed strip variant; base ``.kpi-card``
     untouched (other dashboards use it). Lighter font-weight on
     the value (700 → 600) reduces visual weight in the operational
     band so the readiness hero stays the headline. */
.readiness-card.readiness-card--hero .readiness-score{
  font-size:2.5rem;
  font-weight:600;
  letter-spacing:-0.04em;
}

.kpi-grid--compact .kpi-value,
.kpi-card--compact .kpi-value{
  font-weight:600;
}

[data-care-home-panel="dashboard"] .section-kicker{
  margin-bottom:2px;
}

/* =========================================================
   Care Home Dashboard layout v2 (M16) — split band + compliance grid
   =========================================================
   Left/right structured grid for the headline band. LEFT column is the
   primary command area: identity strip (calm, compact) above the
   readiness hero (loud, dominant). RIGHT column is a 2×2 compliance
   summary grid — Audit · Supervision & Appraisal · Training · HR.

Equal-height columns: ``align-items: stretch`` on the split + the
   compliance grid claiming ``height: 100%`` keeps the 2×2 grid's
   bottom edge aligned with the readiness hero's bottom edge.

Scoped to the dashboard via the wrapper class
   (``.dashboard-band--split``). Provider / Platform polish branches
   will reuse this pattern under their own wrappers. */
.dashboard-band--split{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:16px;
  align-items:stretch;
  margin-top:16px;
}
.dashboard-band__left,
.dashboard-band__right{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.compliance-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  /* M16.18 — was ``1fr`` which forced tiles into an equal-share
     of parent height. When the parent column was shorter than the
     tile's natural content, the tile body overflowed visibly past
     the card border (visible on Care Hours after the 2-line
     "Possibly X hours understaffed / Effective from DD/MM/YYYY"
     change — the card border ended at the 1fr cell bottom but
     the text spilled below into the drill-down panel zone).
     ``minmax(min-content, 1fr)`` keeps the equal-share behaviour
     when there's room and lets rows grow when content needs more,
     so the card border always wraps its content. */
  grid-auto-rows:minmax(min-content, 1fr);
  gap:12px;
  height:100%;
}

/* M16.1 — sub-grouping wrappers. Each group is a single .compliance-grid
   plus its eyebrow; two groups stack vertically inside .dashboard-band__right.
   No card chrome / no border / no shadow — the eyebrow + 16px breathing room
   alone carry the grouping signal. The 16px gap matches the ``mt16`` spacing
   token used dashboard-wide for "clear separator between two semantically
   distinct sections" (see project_context.md vertical-rhythm convention). */
.compliance-grid-group + .compliance-grid-group{
  margin-top:16px;
}
.compliance-grid-kicker{
  margin-bottom:8px;
}

/* M16.18 — collapse the care-home eyebrow when its identity card is
   hidden (no scope yet, scope-resolution in flight, or empty/errored
   care-home context). Without this the kicker reads as a stranded
   "Care home" label with no content underneath on initial paint.
   ``:has()`` keeps the markup decoupled from JS — every site that
   adds/removes the ``hidden`` class on ``#careHomeHeaderCard``
   automatically updates the kicker visibility. Codex P2 (M16.18). */
.compliance-grid-group--care-home-id:has(> #careHomeHeaderCard.hidden){
  display:none;
}

/* Single compliance tile — flat, calm, equal-weight. The status pill
   (top-right) carries readiness state; we deliberately do NOT use the
   inherited ``.kpi-card-actionable.is-active`` heavy fill, which is
   too loud for a tile group meant to read at-a-glance.
   M16.15 — dropped the box-shadow to none so the right-column tiles
   read as visually subordinate to the readiness hero (which keeps its
   shadow). The 1px border alone now carries the tile edge — calmer
   on a fresh home where many tiles render in the neutral
   "Setup needed" state side-by-side. */
.kpi-card--compliance{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  text-align:left;
  padding:14px 16px 16px;
  border-radius:6px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:none;
  min-width:0;
  transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.kpi-card--compliance::before{ display:none; }
.kpi-card--compliance .kpi-value{
  font-weight:600;
  font-size:1.6rem;
  letter-spacing:-0.02em;
  line-height:1.1;
  margin-top:0;
}
.kpi-card--compliance .kpi-sub{
  font-size:0.82rem;
  color:var(--text-soft);
  overflow-wrap:anywhere;
  /* Allow multi-line subtitles (e.g. Supervision & Appraisal's
     per-module breakdown) to render with explicit ``\n`` line
     breaks via ``textContent``. ``pre-line`` collapses runs of
     spaces but preserves newlines, so the JS can pass a single
     string instead of innerHTML. */
  white-space:pre-line;
  line-height:1.4;
}
.kpi-card--compliance__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.kpi-card--compliance__head .kpi-label{
  min-width:0;
  flex:1 1 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Hover / focus — quieter than the base ``.kpi-card-actionable`` rule.
   We override only inside the compliance grid so other dashboards
   (Provider / Platform) keep the existing behaviour. */
.compliance-grid .kpi-card-actionable:hover{
  transform:translateY(-1px);
  border-color:var(--primary-soft-strong);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.compliance-grid .kpi-card-actionable:focus{ outline:none; }
.compliance-grid .kpi-card-actionable:focus-visible{
  outline:2px solid var(--primary-soft-strong);
  outline-offset:2px;
}
.compliance-grid .kpi-card-actionable:disabled,
.compliance-grid .kpi-card-actionable[disabled]{
  cursor:default;
  opacity:0.85;
}
.compliance-grid .kpi-card-actionable:disabled:hover,
.compliance-grid .kpi-card-actionable[disabled]:hover{
  transform:none;
  border-color:var(--line);
  box-shadow:var(--shadow-xs);
}

/* Small status pill — geometry-only modifier on the existing
   ``.readiness-badge`` palette (good / watch / at-risk colours come
   from the base class). New ``.is-disabled`` variant for "Not
   configured" tiles. */
/* M16.10 — Unified pill style. The full-size ``.readiness-badge``
 * (padding 9x13, uppercase, font-weight 700) is reserved for the
 * top-level Compliance dashboard hero strip. Every other surface —
 * HR Documents settings, staff matrix, candidate portal, audit
 * library, supervision templates, etc — uses ``.readiness-badge--sm``,
 * which visually matches ``.count-pill`` (sentence-case, 2x8 padding,
 * normal weight). Single-source-of-truth pill spec in
 * ``docs/pill-style-guide.md``.
 *
 * Selector chains both classes (``.readiness-badge.readiness-badge--sm``)
 * so it wins specificity against the base ``.readiness-badge`` rule
 * defined later in this file — without that, ``.readiness-badge`` 's
 * ``padding:9px 13px`` overrode the small pill's intended 2x8. */
.readiness-badge.readiness-badge--sm{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  font-size:0.78rem;
  font-weight:600;
  line-height:1.3;
  letter-spacing:0;
  text-transform:none;
  box-shadow:none;
  flex:0 0 auto;
  white-space:nowrap;
}
.readiness-badge.is-disabled,
.readiness-badge--sm.is-disabled{
  background:#f1f5f9;
  color:#64748b;
}

/* Responsive — stack to single column at tablet widths, then stack
   the compliance grid itself at narrow phones so no card clips. */
@media (max-width: 1100px){
  .dashboard-band--split{
    grid-template-columns:minmax(0, 1fr);
  }
}
@media (max-width: 700px){
  .compliance-grid{
    grid-template-columns:minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce){
  .compliance-grid .kpi-card-actionable:hover{ transform:none; }
}

/* Identity card at half-width — compress the ratings column so the
   CQC widget doesn't push the details column into clipping territory.
   Only fires inside the dashboard split wrapper so the provider /
   platform views (full-width identity card) are untouched.
   The base ``.care-home-header-card`` rule sets ``margin: 8px 0``
   for breathing-room when the card sits standalone above the
   dashboard. Inside the band split, that margin pushes the card's
   top down 8px below the right-column compliance tiles' top. Zero
   it out so both columns start at the same y. */
.dashboard-band--split .care-home-header-card{
  grid-template-columns:minmax(0, 1fr) minmax(180px, 0.7fr);
  margin:0;
}

/* Left column lays out three stacked items: identity strip, readiness
   hero, and the new clickable attention summary. ``auto 1fr auto``
   gives identity + attention their natural heights and lets readiness
   absorb the remainder so the column fills the band height set by
   ``align-items: stretch``. The right column's 6 compliance tiles
   continue to share the same total height via ``grid-auto-rows: 1fr``,
   so the band's bottom edges line up regardless of how tall the
   readiness hero ends up rendering. */
.dashboard-band--split .dashboard-band__left{
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:12px;
}

/* M12.30 — Resident Dependency markup helpers. Centralised so the
   feature's HTML can stay free of inline visual styles. */
.dep-meta-sm{
  font-size:0.78rem;
}
.dep-meta-md{
  font-size:0.85rem;
}
.dep-status-meta{
  margin-left:auto;
  font-size:0.85rem;
}
.dep-stat-figure{
  font-size:1.2rem;
  font-weight:600;
}
.dep-stat-figure--lg{
  font-size:1.6rem;
  font-weight:700;
}
.dep-rubric-legend{
  font-size:0.78rem;
  margin-bottom:8px;
}

.tenant-scope-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-radius:20px;
  border:1px solid rgba(200,215,235,0.95);
  background:
    radial-gradient(circle at top right, var(--primary-soft), transparent 28%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow:var(--shadow-sm);
}

.tenant-scope-copy{
  min-width:0;
}

.tenant-scope-eyebrow{
  color:var(--text-muted);
  font-size:0.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.12em;
}

.tenant-scope-title{
  margin-top:4px;
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--text);
}

.tenant-scope-meta{
  margin-top:4px;
  color:var(--text-muted);
}

.tenant-scope-pill{
  flex:0 0 auto;
  padding:9px 14px;
  border-radius:999px;
  background:var(--primary-soft-strong);
  color:var(--primary-2);
  font-size:0.82rem;
  font-weight:700;
}

.readiness-card{
  /* Care Home Dashboard polish (M16) — locked design system: 6px radii,
     flat surface, minimal shadow, single brand colour through
     ``var(--primary)`` only. The previous styling layered a green radial
     gradient + a soft sky-blue linear gradient + a heavy ``--shadow-md``
     drop shadow, which read as "marketing card" rather than the calm
     operational headline a manager opens every morning. */
  padding:20px 22px 18px;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow-xs);
}

/* Hero modifier — applied to the readiness card when it sits at the
   top of the Care Home Dashboard as Band 1. Adds a 4px brand-tinted
   left rule to anchor the eye on the readiness score and a touch
   extra vertical padding so the score number reads larger relative
   to its container without changing the score's own font size. */
.readiness-card.readiness-card--hero{
  padding:24px 24px 22px 28px;
  border-left:4px solid var(--primary);
}
/* M16.23 — Provider Overview re-themes the hero accent from the
   brand ``--primary`` navy to the provider-mode green so the card's
   left rule matches the scope card's left rule in the sidebar
   (which uses ``--mode-company`` via ``.scope-card--company``).
   Care Home Dashboard's readiness hero is unchanged — it stays
   on ``--primary`` because care-home scope is the brand-anchor
   surface. Scoped to ``#companyDashboard`` so the rule fires only
   on the Provider Overview and leaves every other readiness-hero
   surface untouched. */
#companyDashboard .readiness-card.readiness-card--hero{
  border-left-color:var(--mode-company);
}

.readiness-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.readiness-eyebrow{
  color:var(--text-muted);
  font-size:0.82rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.12em;
}

.readiness-score{
  margin-top:10px;
  font-size:3rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-0.06em;
  color:var(--text);
}

.readiness-badge{
  flex:0 0 auto;
  padding:9px 13px;
  border-radius:999px;
  font-size:0.82rem;
  font-weight:700;
  white-space:nowrap;
  box-shadow:var(--shadow-xs);
}

.readiness-badge.good{
  background:#ecfdf3;
  color:#166534;
}

.readiness-badge.watch{
  background:#fff7ed;
  color:#b45309;
}

.readiness-badge.at-risk{
  background:#fef2f2;
  color:#b91c1c;
}

/* Staff V2 / M16.5 polish — two more pill modifiers used by the
   HR Documents Active staff list + matrix legend. ``neutral`` is the
   soft-grey "no signal" colour for not-started / no-data slots that
   used to render as transparent text. ``info`` is the calm-blue
   awaiting-review colour (previously bucketed with ``watch`` amber,
   which over-implied urgency for documents that just need a
   manager click). */
.readiness-badge.neutral{
  background:#f1f5f9;
  color:#475569;
}
.readiness-badge.info{
  background:#eff6ff;
  color:#1e3a8a;
}

/* Change 2 (feature/action-register-ui) — leading status dot for the
   merged "State" pill in the Action register. Colour tracks the
   .readiness-badge tone via currentColor; border-radius 6px clamps to
   a circle at this size, honouring the flat-design 6px rule. */
.readiness-badge .state-dot{
  flex:0 0 auto;
  width:7px;
  height:7px;
  margin-right:6px;
  border-radius:6px;
  background:currentColor;
}

.readiness-summary{
  margin-top:12px;
  color:var(--text-soft);
  line-height:1.5;
}

/* M16.3 — readiness summary stacked-groups layout. Two groups
   (Readiness summary + Coverage) sit side-by-side via flex-wrap
   when the card has room and stack vertically when it doesn't.
   Tabular-nums on the value column keep the right edge aligned
   without per-row width gymnastics. No new colour token; uses
   existing --text / --text-soft / --text-muted vars. */
.readiness-summary-block{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
}
.readiness-summary-group{
  flex:1 1 200px;
  min-width:0;
}
.readiness-summary-group-label{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:6px;
}
.readiness-summary-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  padding:2px 0;
  font-size:0.9rem;
  line-height:1.4;
}
.readiness-summary-key{
  color:var(--text-soft);
}
.readiness-summary-val{
  color:var(--text);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.readiness-gaps{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

/* Provider Overview operational-first restructure (M16.16). Needs-
   attention strip sits above the readiness band when there's
   provider-level work to act on; the homes-needing-attention list is
   the boxed RIGHT-column tile in the .dashboard-band--split. Both
   reuse existing pill / settings-card chrome — no new colour tokens. */
.company-needs-attention-strip{
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:6px;
  padding:12px 14px;
}
.company-needs-attention-strip .section-kicker{
  margin-bottom:8px;
  color:#b45309;
}
.company-needs-attention-strip .readiness-gaps{
  margin-top:0;
}

.company-attention-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}
.company-attention-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border-radius:6px;
  background:var(--surface-2);
  min-width:0;
}
/* M16.20 — shared "active" state across every actionable summary
   surface on Provider Overview (Readiness-gap pills, Needs-attention
   buttons, Open-work tiles). Same primary-coloured 2px border + tint
   treatment as the care-home dashboard's ``.domain-card.is-active``
   so the visual vocabulary stays consistent across surfaces. The
   modifier is composable: a pill picks up its severity background
   from the existing ``.readiness-gap-pill.at-risk`` etc. and the
   selected-state border on top. */
.readiness-gap-pill.is-selected,
.kpi-card--compliance.is-selected{
  border-color:var(--primary);
  border-width:2px;
  box-shadow:0 0 0 3px rgba(15,91,216,0.12);
  background:rgba(15,91,216,0.06);
}
.kpi-card--compliance.is-selected .kpi-label,
.readiness-gap-pill.is-selected strong{
  color:var(--primary);
}

/* Actionable variant of ``.kpi-card--compliance`` — only the live
   tiles (Overdue actions / Open actions in M16.20) wear this. The
   demoted variant below mutes the tile when the per-home payload
   isn't there yet, so users don't get a fake-control affordance. */
.kpi-card-actionable{
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.kpi-card-actionable:hover,
.kpi-card-actionable:focus-visible{
  border-color:var(--primary);
  outline:none;
}
.kpi-card-actionable:focus-visible{
  box-shadow:0 0 0 3px rgba(15,91,216,0.18);
}

/* Demoted operational tile — value is 0 OR no per-home payload to
   sort by yet. Visually muted so users read it as informational
   rather than interactive. */
.kpi-card--compliance--demoted{
  opacity:0.72;
  cursor:default;
}
.kpi-card--compliance--demoted .kpi-value{
  color:var(--text-muted);
}

/* Demoted Needs-attention pill — same severity colour but ``cursor:
   default`` and a subtle dashed border so it reads as an
   informational signal rather than a button. Used today only for
   ``X expired evidence`` until per-home payload lands. */
.readiness-gap-pill--demoted{
  cursor:default;
  border-style:dashed;
  opacity:0.85;
}

/* Calm trend placeholder — 1px-bordered neutral panel with muted
   one-line copy. Used pre-M16.21 when the trend section was a
   tail-of-page block; M16.21 moves the trend into a proper
   ``.settings-card`` (band 2 LEFT) so the placeholder is no
   longer in the canonical render path, but the rule is kept in
   place for any other surface that might still emit it. */
.company-trend-placeholder{
  margin-top:10px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface-2);
  font-size:0.9rem;
  line-height:1.4;
}

/* M16.21 — Provider Overview band 2 LEFT trend card. Lives inside
   a ``.settings-card`` so the band reads as paired siblings (the
   shortlist on the RIGHT uses the same chrome). Two body modes:
   ``__chart`` (sparkline render, used for both real-data and
   flat-data branches — a flat line is information, not a
   placeholder); ``__sparse`` (large latest-score number + muted
   subhead, used when fewer than 4 weeks of data are available).

The big-number sparse layout has the same vertical weight as the
   sparkline so band 2 LEFT and RIGHT visually balance regardless
   of data state. */
.company-trend-card__chart{
  /* Sparkline ``<svg>`` already has its own dimensions; this just
     gives the chart a consistent inner gutter. */
  margin-top:6px;
}
.company-trend-card__sparse{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  margin-top:18px;
}
.company-trend-card__score{
  font-size:2.4rem;
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1;
  color:var(--text);
}
.company-trend-card__score-label{
  font-size:0.85rem;
}

/* M16.22 — readiness summary list inside the Provider Overview
   readiness card. Mirrors the Care Home Dashboard's hero pattern
   (eyebrow + score + pill + ``READINESS SUMMARY`` label + vertical
   label/value rows). Replaces the previous single dot-separated
   muted line so each fact has its own visual weight and the band
   1 LEFT column balances the 4-tile right side. */
.readiness-summary-list{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.readiness-summary-list__label{
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:8px;
}
.readiness-summary-list__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:4px 0;
  font-size:0.9rem;
  color:var(--text-soft);
  font-variant-numeric:tabular-nums;
}
/* M16.23 — inter-row border-top removed so the list reads flat,
   matching the Care Home Dashboard's hero summary which has no
   per-row separators. The list-level top border above the whole
   block (on ``.readiness-summary-list``) still separates the list
   from the readiness sublines above. */
.readiness-summary-list__row-label{
  color:var(--text-soft);
}
.readiness-summary-list__row-value{
  color:var(--text);
  font-weight:600;
}

/* M16.22 — readiness distribution bar inside the Provider Overview
   readiness card. Horizontal stacked bar showing the count of
   homes in each readiness band, plus a small legend. Reuses the
   existing ``.readiness-badge`` colour vocabulary (good / watch /
   at-risk / neutral) — no new colour tokens. The bar replaces the
   pre-existing fixed sub-summary line ("X care homes · Y high-risk")
   as the main "shape of the score" cue; the textual line stays
   above for the absolute counts. */
.readiness-distribution-bar{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.readiness-distribution-bar__track{
  display:flex;
  width:100%;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:var(--surface-2);
}
.readiness-distribution-bar__seg{
  display:block;
  height:100%;
}
.readiness-distribution-bar__seg--good   { background:#3da76b; }
.readiness-distribution-bar__seg--watch  { background:#d99231; }
.readiness-distribution-bar__seg--at-risk{ background:#cf2f36; }
.readiness-distribution-bar__seg--neutral{ background:#94a3b8; }
.readiness-distribution-bar__legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  margin-top:8px;
  font-size:0.82rem;
  color:var(--text-soft);
  font-variant-numeric:tabular-nums;
}
.readiness-distribution-bar__legend-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.readiness-distribution-bar__swatch{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:2px;
}
.readiness-distribution-bar__swatch--good   { background:#3da76b; }
.readiness-distribution-bar__swatch--watch  { background:#d99231; }
.readiness-distribution-bar__swatch--at-risk{ background:#cf2f36; }
.readiness-distribution-bar__swatch--neutral{ background:#94a3b8; }
.readiness-distribution-bar__legend-label{
  color:var(--text-soft);
}
.readiness-distribution-bar__legend-item strong{
  color:var(--text);
  font-weight:600;
}

/* M16.21 — info-tile variant for the ``Care homes`` count tile in
   band 1 RIGHT. Same shape as ``.kpi-card-actionable`` but renders
   as an ``<a>`` (navigation, not in-page sort). The pill-less
   header reads as informational rather than as a metric badge. */
.kpi-card--info{
  text-decoration:none;
  color:var(--text);
}
.kpi-card--info:hover,
.kpi-card--info:focus-visible{
  color:var(--text);
  text-decoration:none;
}
.kpi-card--info .kpi-card--compliance__head{
  /* Without a status pill, the head row is just the label —
     consistent height with the sibling tiles via the ``.kpi-value``
     below (matches grid-auto-rows:1fr layout). */
  align-items:center;
}

/* Clear-sort link rendered inside the shortlist's description when
   ``state._companyGapSort`` is active. Reuses ``.btn``-free anchor
   styling — a plain underlined primary-coloured affordance that
   inherits the muted-text rhythm of its parent ``.settings-card__
   desc`` line. */
.company-gap-clear-link{
  background:transparent;
  border:0;
  padding:0;
  font:inherit;
  color:var(--primary);
  cursor:pointer;
  text-decoration:underline;
}
.company-gap-clear-link:hover,
.company-gap-clear-link:focus-visible{
  color:var(--primary-2);
  outline:none;
}

/* M16.19 — clickable triage row: opens the care home's dashboard.
   Hover lift + chevron tint match the existing ``.company-care-home
   -card`` hover so muscle memory carries from the deleted bottom
   grid into the new shortlist. The chevron sits flush right; meta
   sits between name and chevron. */
.company-attention-row--clickable{
  cursor:pointer;
  transition:background 0.12s ease, border-color 0.12s ease;
}
.company-attention-row--clickable:hover,
.company-attention-row--clickable:focus-visible{
  background:var(--surface-3);
  outline:none;
}
.company-attention-row--clickable:focus-visible{
  box-shadow:0 0 0 3px rgba(15,91,216,0.12);
}
.company-attention-row--clickable .company-care-home-card__chevron{
  position:static;
  flex:0 0 auto;
  margin-left:4px;
  font-size:1.1rem;
  color:var(--text-muted);
}
.company-attention-row--clickable:hover .company-care-home-card__chevron{
  color:var(--primary);
}

/* M16.19 — secondary subline inside the readiness card carrying the
   ``data.delta_summary`` "what changed / why at risk" entries.
   Slightly tighter type than the primary ``.readiness-summary``
   line, with a thin top divider so the two sublines read as
   distinct signals rather than one wrapping sentence. */
.readiness-summary--delta{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid var(--line);
  font-size:0.82rem;
  line-height:1.4;
}
.company-attention-row__name{
  font-weight:600;
  font-size:0.9rem;
  color:var(--text);
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.company-attention-row__meta{
  display:flex;
  gap:6px;
  flex:0 0 auto;
}

/* Provider Settings → Finance visibility access-title role pickers
   (M16.16). 2-column grid of checkbox + label rows. Mirrors the
   ``settings-form-grid`` rhythm used by the per-care-home selects
   above so the three cards on this pane read as siblings. */
.access-titles-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 16px;
}
.access-titles-grid .access-titles-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.9rem;
  color:var(--text);
}
.access-titles-grid .access-titles-row input[type="checkbox"]{
  flex:0 0 auto;
}
/* Admin floor — Company Owner is always ticked + disabled. The row
   keeps the same layout as siblings so the column rhythm doesn't
   jump; only the colour shifts so the user reads "this one's
   locked" without a tooltip. */
.access-titles-grid .access-titles-row--locked{
  color:var(--text-muted);
  cursor:not-allowed;
}
.access-titles-grid .access-titles-row--locked input[type="checkbox"]{
  cursor:not-allowed;
}
@media (max-width: 700px){
  .access-titles-grid{
    grid-template-columns:minmax(0, 1fr);
  }
}

/* M16.17 layout refinement — Provider Finances headline anchor.
   MRR sits in the LEFT half of a ``.dashboard-band--split`` paired
   with the income-by-source breakdown on the right. Bigger value
   typography + generous vertical centring differentiates it from
   the supporting cards/tiles. ``.settings-card`` chrome stays for
   consistency with the rest of the dashboard surfaces; only the
   value scale is bumped.

Flex-column so the headline value sits above and the rate strip
   gets pushed to the bottom (``margin-top:auto``), letting the card
   stretch to match the 4-tile income-by-source grid on the right. */
.company-finances-headline{
  padding:24px 24px 22px;
  display:flex;
  flex-direction:column;
}
.company-finances-headline__value{
  font-size:3rem;
  font-weight:600;
  letter-spacing:-0.04em;
  line-height:1;
  margin-top:14px;
  color:var(--text);
}

/* Provider Finances row alignment — when the LEFT and RIGHT halves
   carry different content shapes (single MRR card vs 2x2 grid;
   donut card vs trend chart), the columns auto-stretch via the
   parent grid's ``align-items: stretch`` BUT each column's child
   keeps its natural content height, leaving misaligned bottom
   edges. Stretch the immediate children to ``height: 100%`` so the
   card/group bottom edges match. Scoped to ``.dashboard-band--
   finances`` so other dashboards using ``.dashboard-band--split``
   keep their existing per-side flex behaviour. Both halves now
   lead with a ``.section-kicker`` so card TOP edges align too
   (otherwise a header-less LEFT half starts higher than the
   eyebrow-led RIGHT half — visible via misaligned card tops). */
/* Promote the column wrappers themselves to CSS Grid (single 1fr
   row) so their lone child .compliance-grid-group fills the column
   via grid-item stretch — no percentage-height-on-flex which has
   been unreliable here. Inside the group, ``auto 1fr`` rows give
   the kicker its content height and the second child everything
   else. Combined, the LEFT card / RIGHT 4-tile grid / Income trend
   slot all reach the same column bottom regardless of intrinsic
   content. */
.dashboard-band--finances .dashboard-band__left,
.dashboard-band--finances .dashboard-band__right{
  display:grid;
  grid-template-rows:1fr;
}
.dashboard-band--finances .compliance-grid-group{
  display:grid;
  grid-template-rows:auto 1fr;
  /* No height:100% — grid-item stretch from the parent grid above
     already fills the column; an explicit percentage can fight with
     align-self in some browsers. */
}
.dashboard-band--finances .compliance-grid-group .compliance-grid,
.dashboard-band--finances .compliance-grid-group .settings-card,
.dashboard-band--finances .compliance-grid-group #companyFinancesIncomeTrendSlot{
  min-height:0;
}
/* Drop the subtle ``.settings-card`` shadow inside the Provider
   Finances band so the LEFT cards (Revenue, Composition) read as
   visually flat alongside the RIGHT-side ``.kpi-card--compliance``
   tiles + Income trend card, both of which are explicitly
   shadow-less. Keeps the row reading as one unified surface
   instead of left-with-shadow / right-without. */
.dashboard-band--finances .settings-card{
  box-shadow:none;
}
/* Income trend (Row 2 RIGHT) — card chrome stretches to fill the
   column so its bottom edge matches the Composition card on the
   LEFT. The chart inside keeps its natural aspect-ratio size; any
   leftover space sits below the chart. We deliberately DO NOT
   grow the body / drop the SVG max-height: that pushed the chart
   to the bottom of the card with a tall empty zone above it,
   which was worse than having a small empty zone below. */
.dashboard-band--finances .income-trend-card{
  height:100%;
}

/* Provider Finances care-home table — modernised look (M16.17 v3).
   Wrapped in ``.settings-card`` chrome to match the other dashboard
   surfaces. Numeric columns right-aligned with ``tabular-nums``
   font-feature so digit columns stay vertically aligned. Inline
   share-of-MRR mini-bar under each MRR value gives a quick visual
   sense of which home contributes most without the user having to
   compare numbers cell-by-cell. Subtle row hover for clickable
   feedback. */
.company-finances-table-card{
  padding:0;
  overflow:hidden;
}
.company-finances-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.9rem;
}
.company-finances-table thead th{
  text-align:left;
  padding:14px 16px;
  font-size:0.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-muted);
  background:#f8fafc;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.company-finances-table tbody td{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  color:var(--text);
}
.company-finances-table tbody tr:last-child td{
  border-bottom:none;
}
.company-finances-table tbody tr{
  transition:background 0.12s ease;
}
.company-finances-table tbody tr:hover{
  background:#f8fafc;
}
.company-finances-table__num{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* feature/provider-finance-home-filter — care-home subset filter that
   sits above the rest of the Provider Finances panel. Renders only when
   there's a choice to make (≥2 authorised homes); selecting / clearing
   subsets the displayed totals + per-home table + by-source tiles +
   payer-mix donut (income trend stays provider-wide and is labelled). */
.company-finances-filter{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#f8fafc;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.company-finances-filter.hidden{ display:none; }
.company-finances-filter__row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}
.company-finances-filter__label{
  font-size:0.85rem;
  font-weight:600;
  color:var(--text-soft);
  padding-top:4px;
}
.company-finances-filter__chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex:1 1 auto;
  min-width:0;
}
.company-finances-filter__chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#ffffff;
  color:var(--text);
  font-size:0.85rem;
  cursor:pointer;
  white-space:nowrap;
}
.company-finances-filter__chip:hover{
  border-color:var(--primary);
}
.company-finances-filter__chip.is-on{
  background:var(--primary);
  color:#ffffff;
  border-color:var(--primary);
}
.company-finances-filter__check{
  font-weight:700;
}
.company-finances-filter__meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:0.82rem;
  color:var(--text-soft);
}
.company-finances-filter__meta .btn-ghost{
  padding:2px 8px;
}
.company-finances-filter__sep{
  color:var(--line);
}
.company-finances-filter__trend-note{
  font-size:0.78rem;
}
.company-finances-table__name{
  font-weight:600;
}
.company-finances-table__mrr-value{
  font-weight:600;
}

/* M16.17 — vertical strip of supporting MRR figures (× 12 annualised,
   Last 12 months, This financial year, Year to date). Each row is
   label LEFT, value RIGHT in tabular-nums so digits column-align.
   ``margin-top:auto`` pushes the strip to the bottom of the
   stretched headline card so it bottom-aligns with the 4-tile
   income-by-source grid on the right. The dotted top border
   separates the strip from the headline value without competing
   visually with the card chrome below. */
.company-finances-headline__rates{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:auto;
  padding-top:18px;
  font-size:0.9rem;
  color:var(--text-soft);
  font-variant-numeric:tabular-nums;
}
.company-finances-headline__rate{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
}
.company-finances-headline__rate strong{
  color:var(--text);
  font-weight:600;
}
/* "Not set" hint row — renders as a thin sublabel below the
   "This financial year" line when the provider hasn't picked their
   accounting year start month yet. ``a`` is the call-to-action link
   to Provider Settings → Defaults; the muted span tells the user
   which month the rolling fallback is currently using. */
.company-finances-headline__rate--hint{
  font-size:0.8rem;
  margin-top:-4px;
}
.company-finances-headline__rate--hint a{
  color:var(--primary);
  text-decoration:none;
  font-weight:500;
}
.company-finances-headline__rate--hint a:hover{
  text-decoration:underline;
}

.readiness-gap-pill{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text-soft);
  font-size:0.88rem;
  line-height:1.4;
}

.readiness-gap-pill strong{
  color:var(--text);
  font-size:0.82rem;
}

.readiness-gap-pill.good{
  background:#f8fdf9;
  border-color:#d9f2df;
}

.readiness-gap-pill.watch{
  background:#fffdf8;
  border-color:#f6dfbf;
}

.readiness-gap-pill.at-risk{
  background:#fffafa;
  border-color:#f3d0d0;
}

/* Readiness-source chip — surfaces "external evidence" or
   "disabled" next to the readiness score so users understand why
   a module's pills aren't appearing. Visually muted vs gap pills
   (this is metadata, not an alert). Rendered before the gap-pill
   row in the same flex container. */
.readiness-source-chip{
  display:inline-flex;
  flex-direction:column;
  gap:2px;
  padding:8px 12px;
  border:1px dashed #cfd8e3;
  border-radius:999px;
  background:#f6f8fb;
  color:#475569;
  font-size:0.78rem;
  line-height:1.2;
}
.readiness-source-chip strong{
  color:#334155;
  font-weight:600;
  letter-spacing:0.02em;
}
.readiness-source-chip span{
  color:#64748b;
  text-transform:lowercase;
  font-size:0.72rem;
}

/* Company dashboard gap-pill sort state — when a user clicks a
   pill to sort the care-home grid by that metric, the pill needs
   a clear "active" indicator so they can see which sort is on AND
   click it again to toggle off. Subtle inset ring + stronger
   border; severity colour is already carried by the existing
   class modifier. Scoped to company-level pills via the
   ``data-company-gap-sort`` attribute so it doesn't bleed onto
   the care-home drilldown pills. */
.readiness-gap-pill[data-company-gap-sort]{
  cursor:pointer;
}
.readiness-gap-pill[data-company-gap-sort]:hover{
  filter:brightness(0.98);
}
.readiness-gap-pill[data-company-gap-sort][aria-pressed="true"]{
  box-shadow:inset 0 0 0 2px rgba(15, 23, 42, 0.18);
  border-color:rgba(15, 23, 42, 0.35);
}

.expiry-automation-panel{
  overflow:hidden;
}

.expiry-automation-header{
  align-items:flex-start;
  gap:16px;
}

.expiry-automation-caption{
  margin-top:4px;
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--primary-2);
}

.expiry-automation-subtitle{
  margin-top:6px;
}

.expiry-automation-feedback{
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  border:1px dashed var(--line-strong);
  background:var(--surface-2);
  color:var(--text-soft);
}

.expiry-automation-feedback.loading{
  border-style:solid;
  background:#f7fbff;
}

.expiry-automation-feedback.success{
  border-style:solid;
  border-color:#cfead9;
  background:var(--success-soft);
  color:#166534;
}

.expiry-automation-feedback.error{
  border-style:solid;
  border-color:#f1c7cb;
  background:var(--danger-soft);
  color:#991b1b;
}

.expiry-automation-result{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
  margin-top:14px;
}

.expiry-automation-stat{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(216,226,239,0.95);
  background:linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow:var(--shadow-xs);
}

.expiry-automation-stat strong{
  display:block;
  font-size:1.15rem;
  letter-spacing:-0.03em;
  color:var(--text);
}

.expiry-automation-stat span{
  display:block;
  margin-top:4px;
  color:var(--text-muted);
  font-size:0.82rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.expiry-automation-meta{
  margin-top:10px;
  color:var(--text-muted);
  font-size:0.88rem;
}

.expiry-automation-status{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.expiry-automation-status-row{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(216,226,239,0.95);
  background:linear-gradient(180deg, #ffffff, #f8fbff);
}

.expiry-automation-status-label{
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.expiry-automation-status-value{
  margin-top:4px;
  font-weight:700;
  color:var(--text);
}

.expiry-automation-status-copy{
  margin-top:4px;
  color:var(--text-muted);
  font-size:0.9rem;
}

.expiry-automation-warning{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #f6dfbf;
  background:#fffdf8;
  color:#b45309;
  font-weight:700;
}

.expiry-automation-history{
  display:grid;
  gap:12px;
}

.expiry-automation-history-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(216,226,239,0.95);
  background:linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow:var(--shadow-xs);
}

.expiry-automation-history-main{
  min-width:0;
  flex:1 1 auto;
}

.expiry-automation-history-top{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.expiry-automation-history-status,
.expiry-automation-history-scope,
.expiry-automation-history-job{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:0.78rem;
  font-weight:700;
}

.expiry-automation-history-status.success{
  background:#ecfdf3;
  color:#166534;
}

.expiry-automation-history-status.failed{
  background:#fef2f2;
  color:#b91c1c;
}

.expiry-automation-history-status.running{
  background:#fff7ed;
  color:#b45309;
}

.expiry-automation-history-scope,
.expiry-automation-history-job{
  background:var(--surface-3);
  color:var(--text-soft);
}

.expiry-automation-history-stale{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:0.78rem;
  font-weight:700;
  background:#fff7ed;
  color:#b45309;
}

.expiry-automation-history-meta,
.expiry-automation-history-error{
  margin-top:8px;
  color:var(--text-muted);
  font-size:0.9rem;
}

.expiry-automation-history-error{
  color:#991b1b;
}

.expiry-automation-history-stats{
  display:grid;
  gap:6px;
  min-width:160px;
  color:var(--text-soft);
  font-size:0.88rem;
  text-align:right;
}

.care-home-drilldown-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.care-home-drilldown-label{
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.care-home-drilldown-title{
  margin-top:4px;
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
}

.care-home-comparison{
  min-height:32px;
}

.care-home-comparison .muted{
  padding:16px 18px;
  border:1px dashed var(--line-strong);
  border-radius:16px;
  background:var(--surface-2);
}

.care-home-comparison-table{
  display:grid;
  gap:10px;
}

.care-home-comparison-head,
.care-home-comparison-row{
  display:grid;
  grid-template-columns:minmax(180px, 2fr) minmax(170px, 1.4fr) repeat(4, minmax(90px, 1fr));
  gap:12px;
  align-items:center;
}

.care-home-comparison-head{
  padding:0 16px;
  color:var(--text-muted);
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.care-home-comparison-row{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(216,226,239,0.95);
  background:linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow:var(--shadow-xs);
  text-align:left;
  cursor:pointer;
}

.care-home-comparison-row.at-risk{
  border-color:#f3d0d0;
  background:linear-gradient(180deg, #fffefe, #fff7f7);
}

.care-home-comparison-row.watch{
  border-color:#f6dfbf;
  background:linear-gradient(180deg, #fffefd, #fffaf2);
}

.care-home-comparison-row.good{
  border-color:#d9f2df;
  background:linear-gradient(180deg, #fdfffd, #f7fdf8);
}

.care-home-comparison-row:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

.care-home-comparison-row:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--primary-soft), var(--shadow-sm);
}

.care-home-comparison-name{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.care-home-comparison-name strong{
  color:var(--text);
}

.care-home-comparison-name span{
  color:var(--text-muted);
  font-size:0.84rem;
}

.care-home-comparison-readiness{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.care-home-comparison-score{
  font-size:1.05rem;
  font-weight:800;
  color:var(--text);
  letter-spacing:-0.03em;
}

.hint.success{
  color:#166534;
}

.care-home-management-list{
  display:grid;
  gap:16px;
}

.care-home-management-section{
  display:grid;
  gap:10px;
}

.care-home-management-heading{
  font-size:0.82rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  /* Was var(--text-muted) — too light against the pale panel, failed contrast. */
  color:var(--text-soft);
}

.care-home-management-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow:var(--shadow-xs);
}

.care-home-management-row.archived{
  background:var(--surface-2);
}

.care-home-management-copy,
.care-home-management-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.care-home-management-copy span,
.care-home-management-note{
  color:var(--text-muted);
  font-size:0.92rem;
}

.care-home-management-actions{
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
}

/* Care Home Dashboard tail tidy-up (M16 follow-up): the inline
   ``careHomeScopeBanner`` + ``care-home-management-scope-note``
   placeholder were both removed from the dashboard. The page-level
   ``#scopeContextLine`` at the top of the workspace is the single
   scope indicator now, and the management panel just stays hidden
   when it has nothing actionable to offer. Their CSS rules are
   intentionally dropped — no other surface used these classes. */

#careHomeManagementStatus{
  min-height:1.2rem;
}

#careHomeTransferFields.hidden{
  display:none;
}

.archived-care-home-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.archived-care-home-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  gap:16px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-2);
}

.archived-care-home-name,
.archived-care-home-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.archived-care-home-name span,
.archived-care-home-meta span{ color:var(--text-muted); }

@media (max-width: 760px){
  .care-home-management-row,
  .archived-care-home-row{
    flex-direction:column;
  }

.care-home-management-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}

/* Required-field marker — place an inline
   ``<span class="required-star" aria-hidden="true">*</span>``
   right after the label text so the asterisk sits next to the
   title even when the label wraps its input. Pair with
   ``aria-required="true"`` on the control so assistive tech picks
   up the constraint. Full convention in ``docs/required-fields.md``. */
.required-star {
  color: var(--danger);
  font-weight: 600;
  margin-left: 2px;
}

/* ---- City search typeahead ---- */
.city-search-wrap{
  position:relative;
  overflow:visible;
}
/* Allow city dropdown to overflow the modal (toggled by JS for cross-browser support) */
.modal.city-dropdown-open {
  overflow:visible;
}
.city-search-results{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:2100;
  max-height:220px;
  overflow-y:auto;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  margin-top:2px;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.city-search-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  padding:10px 12px;
  text-align:left;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  font-size:0.875rem;
}
.city-search-item:last-child{ border-bottom:none; }
.city-search-item:hover{ background:#f5f8fc; }
.city-search-item--not-listed{
  color:var(--text-muted);
  font-style:italic;
}
.city-search-item .region-tag{
  display:inline-block;
  padding:2px 8px;
  font-size:0.7rem;
  font-weight:600;
  color:var(--primary);
  background:rgba(37,99,235,.08);
  border-radius:999px;
  white-space:nowrap;
}
.city-search-empty{
  padding:12px;
  color:var(--text-muted);
  text-align:center;
}

.transfer-search-results{
  position:relative;
  max-height:200px;
  overflow-y:auto;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  margin-top:6px;
}

.transfer-search-result{
  display:flex;
  flex-direction:column;
  gap:2px;
  width:100%;
  padding:10px 12px;
  text-align:left;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  cursor:pointer;
}

.transfer-search-result:last-child{ border-bottom:none; }
.transfer-search-result:hover{ background:#f5f8fc; }

.transfer-search-empty{
  padding:12px;
  color:var(--text-muted);
  text-align:center;
}

.transfer-selected-company{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f5f8fc;
  margin-top:6px;
}

.domain-grid{
  display:grid;
  /* M16.13 — wrap to a 2nd row when columns get tighter than the
     longest domain name ("RESPONSIVE" / "WELL-LED") instead of
     overflowing the card. ``auto-fit`` keeps all 5 on one row at
     full desktop width and reflows to 3+2 / 2+2+1 on narrower
     viewports.
     M16.18 — drop minmax min from 150px → 118px so the 5 cards
     stay on one row at 125% browser zoom (where the LEFT column
     shrinks by ~20%). 118 × 5 + 4 × 8px gap = 622px — fits inside
     the LEFT column down to ~640px. Card content is 1-word
     domain name + 2 short meta lines so it stays legible at the
     narrower width without overflow. */
  grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));
  gap:8px;
}

.domain-card{
  /* Care Home Dashboard polish (M16) — flat 6px tile to match the
     locked design system. Status-tinted variants below
     (``.good`` / ``.watch`` / ``.at-risk``) keep their
     functional pastel fills since they encode the per-domain
     readiness signal.
     M16.18 — padding 14 → 12 horizontal so "WELL-LED" /
     "RESPONSIVE" don't push the card content past the card
     edge at narrow widths (5 cards in one row at 125% zoom). */
  width:100%;
  border:1px solid var(--line);
  border-radius:6px;
  padding:12px 12px;
  background:var(--surface);
  box-shadow:var(--shadow-xs);
  text-align:left;
  cursor:pointer;
  color:var(--text);
  transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.domain-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

.domain-card.good{
  background:#f8fdf9;
  border-color:#d9f2df;
}

.domain-card.watch{
  background:#fffdf8;
  border-color:#f6dfbf;
}

.domain-card.at-risk{
  background:#fffafa;
  border-color:#f3d0d0;
}

.domain-card-name{
  letter-spacing:0.08em;
  font-size:0.79rem;
  /* M16.13 — let "WELL-LED" / "RESPONSIVE" break/wrap inside the
     card instead of running over the right edge when the column
     is tight. ``overflow-wrap: anywhere`` covers the no-space
     hyphen-only case ("WELL-LED" can split on the hyphen). */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.domain-card:hover{
  border-color:#c9d8ea;
}

.domain-card.good:hover{
  background:#f8fdf9;
  border-color:#d9f2df;
}

.domain-card.watch:hover{
  background:#fffdf8;
  border-color:#f6dfbf;
}

.domain-card.at-risk:hover{
  background:#fffafa;
  border-color:#f3d0d0;
}

.domain-card:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(37,99,235,0.10);
}

/* M16.18 — strengthen the active-tab cue. The card row acts as
   a tab trigger row for the drill-down panel below. The active
   card gets a 2px primary-coloured bottom border that visually
   merges into the matching 2px top border on
   ``.domain-detail-panel.is-open`` so the user can see at a
   glance which domain owns the content area below. The shadow
   ring is kept as a secondary cue for keyboard focus parity. */
.domain-card.is-active{
  border-color:var(--primary);
  border-bottom-width:2px;
  padding-bottom:11px;        /* compensate for the +1px border */
  box-shadow:0 0 0 3px rgba(15,91,216,0.12), var(--shadow-sm);
}
.domain-card.is-active .domain-card-name{
  color:var(--primary);
}

.domain-card-name{
  font-size:0.84rem;
  font-weight:800;
  letter-spacing:0.08em;
  color:var(--text-soft);
}

.domain-card-meta{
  margin-top:6px;
  font-size:0.92rem;
  color:var(--text-muted);
  /* M16.18 — single fact per line + ``nowrap`` so every card has
     the same row count regardless of digit count. With 3 metric
     lines (open / overdue / % evidence), every card stacks
     identically and the row of 5 cards reads as a clean grid
     instead of jagged height variants. ``ellipsis`` falls back
     gracefully if the column ever gets tighter than the
     longest single fact. */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.domain-status{
  display:inline-flex;
  margin-top:10px;
  padding:6px 10px;
  border-radius:999px;
  font-size:0.82rem;
  font-weight:700;
}

.domain-status.good{
  background:#ecfdf3;
  color:#166534;
}

.domain-status.watch{
  background:#fff7ed;
  color:#b45309;
}

.domain-status.at-risk{
  background:#fef2f2;
  color:#b91c1c;
}

/* M16.18 — drill-down panel restyle.
   Treat the 5 domain cards as a tab trigger row and the panel
   below as their content area. The panel uses a calm grey shell
   (no gradient, no status-tinted fills) so each interior section
   can paint its own white card. A 2px primary-coloured top border
   merges with the active card's matching 2px bottom border to
   visually connect them. Switching tabs swaps content in place
   without re-running the open/close transition (see the
   ``.is-loading`` overlay below). */
.domain-detail-panel{
  margin-top:0;
  padding:0 18px;
  border-radius:6px;
  border:1px solid var(--line);
  border-top-width:0;
  border-bottom-width:0;
  background:var(--surface-2);
  box-shadow:none;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:
    max-height 0.28s ease-out,
    opacity 0.2s ease 0.05s,
    margin-top 0.28s ease-out,
    padding-top 0.28s ease-out,
    padding-bottom 0.28s ease-out,
    border-top-width 0.28s ease-out,
    border-bottom-width 0.28s ease-out;
  position:relative;
}

.domain-detail-panel.is-open{
  max-height:none;             /* let content size itself; tab-switch
                                  swaps innerHTML in-place without
                                  shrink/grow scroll jumps */
  opacity:1;
  margin-top:28px;             /* generous breathing room so the
                                  right column's bottom tiles (HR /
                                  Care hours) are clearly separated
                                  from the panel — the active card's
                                  primary-coloured bottom border +
                                  panel's primary top border carry
                                  the visual "this is open" cue
                                  across the gap, no proximity needed */
  padding-top:18px;
  padding-bottom:18px;
  border-top-width:2px;
  border-bottom-width:1px;
  border-top-color:var(--primary);
}

.domain-detail-panel.hidden{
  display:none;
}

@media (prefers-reduced-motion: reduce){
  .domain-detail-panel{ transition:none; }
}

/* Status-tinted full-panel backgrounds removed (M16.18). Each
   interior section paints its own white card on the calm grey
   shell, so a global tint would muddy the section separation
   the boxed sub-cards are designed to provide. The active
   domain status is still readable via the pill in the header
   row + the active-card border colour above. */

/* Subtle loading overlay so a tab switch doesn't blank the panel.
   The previous content stays visible (dimmed) while the new
   payload fetches; once it lands the inner HTML is swapped and
   the overlay clears. No max-height collapse → no scroll jump. */
.domain-detail-panel.is-loading > *{
  opacity:0.55;
  pointer-events:none;
}
.domain-detail-panel.is-loading::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    var(--primary) 35%,
    var(--primary) 65%,
    transparent 100%
  );
  background-size:200% 100%;
  animation:domainDetailLoading 1.1s linear infinite;
}
@keyframes domainDetailLoading{
  0%   { background-position:  100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce){
  .domain-detail-panel.is-loading::after{ animation:none; }
}

.domain-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.domain-detail-eyebrow{
  color:var(--text-muted);
  font-size:0.82rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.domain-detail-title{
  margin-top:4px;
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--text);
}

/* M16.18 — boxed sub-card chrome.
   Each major section of the drill-down (metrics row, columns row,
   regulation risk levels, missing evidence) renders inside its own
   ``.domain-detail-card``. White surface, 1px line border, 6px
   radius — same vocabulary as ``.settings-card`` so the panel
   reads as a stack of distinct sections rather than one long
   list. ``+`` adjacency rule supplies the inter-card rhythm.

Tab-switch entry animation: each card fades + slides in from
   below on every render. The panel re-creates ``.domain-detail-
   card`` elements when innerHTML swaps (first-open AND tab-switch),
   so the animation fires on every domain change — a clear "the
   content is different now" cue without needing a full
   max-height collapse. Stagger via ``nth-child`` so the cards
   appear sequentially top-to-bottom. */
.domain-detail-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
  padding:16px;
  box-shadow:0 1px 3px rgba(15,23,42,0.03);
  animation:domainDetailCardEnter 0.28s ease-out both;
}
/* Stagger: direct children of the panel cascade top-to-bottom in
   40ms steps. The DOM order is:
     position 1 — head + metrics card     (.domain-detail-card)
     position 2 — columns wrapper          (.domain-detail-columns,
                                            NOT a .domain-detail-card)
     position 3 — regulation risk card     (.domain-detail-card)
     position 4 — missing evidence card    (.domain-detail-card)
   Use ``:nth-child`` (position-based) instead of ``:nth-of-type``
   (element-tag-based). ``:nth-of-type(N)`` counted ``<div>``
   siblings and required the matched element to ALSO be
   ``.domain-detail-card`` — which dropped position 2 silently and
   shifted positions 3/4's delays out of sync (Codex P3, M16.18). */
.domain-detail-panel > .domain-detail-card:nth-child(3){ animation-delay:0.08s; }
.domain-detail-panel > .domain-detail-card:nth-child(4){ animation-delay:0.12s; }
.domain-detail-columns{ animation:domainDetailCardEnter 0.28s ease-out both; animation-delay:0.04s; }
.domain-detail-columns .domain-detail-card{ animation:none; }
@keyframes domainDetailCardEnter{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .domain-detail-card,
  .domain-detail-columns{ animation:none; }
}
.domain-detail-card + .domain-detail-card{
  margin-top:12px;
}
.domain-detail-card__title{
  font-size:0.92rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:12px;
}

/* Tighten the metrics row inside its boxed sub-card — no inner
   tile borders since the parent card already provides chrome. */
.domain-detail-metrics{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}

.domain-detail-metric{
  padding:10px 12px;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--surface-2);
  display:flex;
  flex-direction:column;
  gap:2px;
}

.domain-detail-metric strong{
  font-size:1.1rem;
  color:var(--text);
}

.domain-detail-metric span{
  font-size:0.86rem;
  color:var(--text-muted);
}

/* Two-column split — high-risk regulations LEFT, priority items
   RIGHT. Each column is its own ``.domain-detail-card``. */
.domain-detail-columns{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.domain-detail-columns .domain-detail-card{
  margin-top:0;
  display:flex;
  flex-direction:column;
}

.domain-detail-section{
  min-width:0;
}

.domain-detail-section-title{
  margin-bottom:8px;
  font-size:0.92rem;
  font-weight:700;
  color:var(--text-soft);
}

.domain-detail-row{
  padding:10px 12px;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--surface-2);
}

.domain-detail-row + .domain-detail-row{
  margin-top:8px;
}

.domain-detail-row-title{
  font-weight:700;
  color:var(--text);
}

.domain-detail-row-meta{
  margin-top:4px;
  font-size:0.9rem;
  color:var(--text-muted);
}

.domain-priority-list{
  margin:0;
  padding-left:18px;
  color:var(--text-soft);
}

.domain-priority-list li + li{
  margin-top:8px;
}

.domain-heatmap-row{
  padding:10px 12px;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--surface-2);
}

.domain-heatmap-row + .domain-heatmap-row{
  margin-top:8px;
}

.domain-heatmap-topline{
  display:flex;
  align-items:center;
  gap:10px;
}

.domain-heatmap-name{
  flex:0 0 220px;
  min-width:0;
  font-weight:700;
  color:var(--text);
}

.domain-heatmap-bar{
  /* Capped width — at full-page widths the bar previously stretched
     to ~1500px which reads as visual clutter rather than a metric.
     Bound it to a sensible 320px so the row's right side has air for
     the High / Medium / Low label without the bar dominating the
     horizontal space. ``flex: 0 1 320px`` keeps the bar at 320px on
     wide layouts and lets it shrink on narrow ones. */
  flex:0 1 320px;
  min-width:0;
  height:8px;
  border-radius:999px;
  background:#edf2f7;
  overflow:hidden;
  margin-right:auto;
}

.domain-heatmap-fill{
  display:block;
  height:100%;
  border-radius:999px;
}

.domain-heatmap-fill.high{
  background:#f0a8a1;
}

.domain-heatmap-fill.medium{
  background:#f4cf86;
}

.domain-heatmap-fill.low{
  background:#9fd7ae;
}

.domain-heatmap-label{
  flex:0 0 auto;
  text-align:right;
  font-size:0.82rem;
  font-weight:700;
}

.domain-heatmap-label.high{
  color:#b54a42;
}

.domain-heatmap-label.medium{
  color:#a06a00;
}

.domain-heatmap-label.low{
  color:#2e7d4f;
}

.domain-heatmap-meta{
  margin-top:6px;
  font-size:0.86rem;
  color:var(--text-muted);
}

.domain-missing-evidence-row{
  padding:10px 12px;
  border-radius:6px;
  border:1px solid #f0d9b8;
  background:#fffaf1;
}

.domain-missing-evidence-row + .domain-missing-evidence-row{
  margin-top:8px;
}

/* M16.18 — long-list containment. The first ``data-show-limit``
   rows render eagerly; the rest live inside ``.is-collapsed``
   and stay hidden until the toggle button flips it off. The
   button text stays in the row flow + has its own muted chrome
   so it reads as a row-action, not a primary CTA. */
.domain-missing-evidence-rest{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.domain-missing-evidence-rest.is-collapsed{
  display:none;
}
.domain-missing-evidence-toggle{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:6px;
  padding:6px 12px;
  font-size:0.85rem;
  font-weight:600;
  color:var(--text-soft);
  cursor:pointer;
}
.domain-missing-evidence-toggle:hover{
  background:var(--surface-2);
  color:var(--text);
}

.domain-missing-evidence-regulation{
  font-weight:700;
  color:var(--text);
}

.domain-missing-evidence-control{
  margin-top:4px;
  color:var(--text-soft);
}

.domain-missing-evidence-reason{
  margin-top:4px;
  font-size:0.86rem;
  font-weight:600;
  color:#a06a00;
}

.domain-missing-evidence-footer{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.domain-missing-evidence-btn{
  flex:0 0 auto;
}

.domain-missing-evidence-btn:disabled{
  opacity:0.65;
}

/* =========================================================
   13) DASHBOARD LIST ROWS
   ========================================================= */
.attention-list,
#categoryBreakdown,
#domainBreakdown,
#regulationBreakdown,
#regulationRisk,
#evidenceCoverage,
#evidenceExpiry{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:32px;
}

.attention-list .muted,
#categoryBreakdown .muted,
#domainBreakdown .muted,
#regulationBreakdown .muted,
#regulationRisk .muted,
#evidenceCoverage .muted,
#evidenceExpiry .muted{
  padding:16px 18px;
  border:1px dashed var(--line-strong);
  border-radius:16px;
  background:var(--surface-2);
}

.attention-row-btn,
.category-row-btn{
  width:100%;
  border:none;
  background:linear-gradient(180deg, #ffffff, #f9fbfe);
  color:inherit;
  border-radius:16px;
  border:1px solid rgba(216,226,239,0.95);
  padding:14px 16px;
  cursor:pointer;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font:inherit;
}

/* Non-interactive variant — sits inside the
   ``careHomeAttentionSummaryBtn`` wrapper as static rows so the
   parent's click (open modal) is the single interaction. Same shape
   as ``.attention-row-btn`` but no hover/focus/cursor affordances. */
.attention-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  color:inherit;
}
.attention-row:last-child{ border-bottom:0; }

.attention-row-btn:hover,
.category-row-btn:hover{
  background:#ffffff;
  border-color:#bcd0e7;
  box-shadow:var(--shadow-xs);
}

.attention-row-btn:focus,
.category-row-btn:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--primary-soft);
}

.attention-main,
.category-main{
  min-width:0;
  flex:1 1 auto;
}

.attention-title,
.category-title{
  font-weight:700;
  color:var(--text);
  min-width:0;
}

.attention-meta,
.category-meta{
  margin-top:4px;
  color:var(--text-muted);
  font-size:0.9rem;
}

.attention-side{
  flex:0 0 auto;
  font-weight:700;
  padding:8px 10px;
  border-radius:999px;
  font-size:0.85rem;
  white-space:nowrap;
}

.attention-side.overdue{
  background:#fee2e2;
  color:#b91c1c;
}

.attention-side.due-soon{
  background:#ffedd5;
  color:#b45309;
}

/* Tail tidy-up follow-up: "Not started" pill — open actions with
   no due date set (typically auto-created expected-evidence
   actions). Greyer than overdue/due-soon since these aren't time-
   pressing yet, but the row still surfaces in the Needs-attention
   list because someone has to pick them up. */
.attention-side.not-started{
  background:#f1f5f9;
  color:#475569;
}

.category-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.category-badge{
  flex:0 0 auto;
  padding:8px 10px;
  border-radius:999px;
  font-size:0.84rem;
  font-weight:700;
  white-space:nowrap;
}

.category-badge.open{
  background:#eff6ff;
  color:#1d4ed8;
}

.category-badge.overdue{
  background:#fef2f2;
  color:#b91c1c;
}

/* Static rows for Needs attention + Coverage + Reports' Regulation
   readiness. Same shape as .category-row-btn but no cursor/hover/focus
   affordance — the old whole-row click fired an invisible Actions-table
   filter. Needs attention carries an explicit "View in register" button
   instead. */
.evidence-attention-row,
.evidence-coverage-row,
.report-readiness-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  color:inherit;
}
.evidence-attention-row + .evidence-attention-row,
.evidence-coverage-row + .evidence-coverage-row,
.report-readiness-row + .report-readiness-row{
  margin-top:8px;
}
/* Left urgency accent on Needs-attention rows. */
.evidence-attention-row.expired{ border-left:3px solid #dc2626; }
.evidence-attention-row.due-soon{ border-left:3px solid #ea580c; }

.evidence-attention-view{
  flex:0 0 auto;
  white-space:nowrap;
}

.evidence-showall-btn{
  margin-top:10px;
}

.evidence-register-showmore{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}
.evidence-register-showmore:empty{ display:none; }
.evidence-register-showmore .evidence-showall-btn{ margin-top:0; }
.evidence-register-showmore-note{
  color:var(--text-muted);
  font-size:0.88rem;
}

.evidence-expiry-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:0.78rem;
  font-weight:700;
  white-space:nowrap;
}

.evidence-expiry-badge.valid{
  background:#ecfdf3;
  color:#166534;
}

.evidence-expiry-badge.due-soon{
  background:#fff7ed;
  color:#b45309;
}

.evidence-expiry-badge.expired{
  background:#fef2f2;
  color:#b91c1c;
}

.table-evidence-status{
  /* Now sits inline (right-aligned) inside ``.table-evidence-line``
     via the parent's ``space-between``. The earlier ``margin-top``
     was for a stacked layout that's been retired; flex-row owns the
     spacing now so the rule is just an empty-state hide. */
  flex:0 0 auto;
}
.table-evidence-status:empty{ display:none; }

/* =========================================================
   14) COLLAPSIBLE PANELS
   ========================================================= */
.panel-toggle-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  /* Flat 6px + solid surface to match the app's flat-design rule (was a
     10px radius + gradient — out of step with every other box/button). */
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  font-size:0.92rem;
  font-weight:700;
}

.panel-toggle-btn:hover{
  border-color:#c7d6e8;
  background:#f8fafc;
}

.panel-toggle-icon{
  transition:transform 0.22s ease;
}

.panel-toggle-btn[aria-expanded="true"] .panel-toggle-icon{
  transform:rotate(180deg);
}

.panel-collapsible{
  overflow:hidden;
  max-height:1400px;
  opacity:1;
  transform:translateY(0);
  transition:
    max-height 0.28s ease,
    opacity 0.22s ease,
    transform 0.22s ease,
    margin-top 0.22s ease,
    padding-top 0.22s ease,
    padding-bottom 0.22s ease;
  will-change:max-height, opacity, transform;
}

.panel-collapsible.is-collapsed{
  max-height:0;
  opacity:0;
  transform:translateY(-4px);
  margin-top:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  pointer-events:none;
}

/* Evidence collapsibles can exceed the 1400px max-height cap (long
   coverage / register / automation-history lists), which clipped the
   last rows. Drop the cap when open so content is never cut off
   (mirrors domain-detail-panel.is-open); accept a slightly less smooth
   close. Top-N defaults keep the expanded heights reasonable. */
#evidenceCoverage:not(.is-collapsed),
#evidenceRegisterList:not(.is-collapsed),
#evidenceSystemToolsBody:not(.is-collapsed),
#expiryAutomationHistory:not(.is-collapsed){
  max-height:none;
  overflow:visible;
}

/* =========================================================
   15) FILTER GRID
   ========================================================= */
.filters-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:16px;
  align-items:end;
  padding:18px;
  border-radius:6px;
  border:1px solid var(--line);
  background:#ffffff;
  box-shadow:var(--shadow-xs);
}

.filter-span-2{
  grid-column:span 2;
}

/* "More filters" disclosure — sits below the always-visible primary
   row. ``<details>``-driven so it works without JS; the summary is
   styled as a small text toggle to keep the visual weight light.
   Inner ``.filters-grid`` reuses the same chrome so the disclosed
   block matches the primary row's styling. */
.filters-more{
  border-radius:6px;
}
.filters-more__summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:6px;
  font-size:0.85rem;
  font-weight:600;
  color:var(--text-soft);
  user-select:none;
}
.filters-more__summary::-webkit-details-marker{ display:none; }
.filters-more__summary::before{
  content:"▸";
  font-size:0.7rem;
  color:var(--text-muted);
  transition:transform 0.15s ease;
  display:inline-block;
}
.filters-more[open] > .filters-more__summary::before{
  transform:rotate(90deg);
}
.filters-more__summary:hover{
  background:var(--surface-2);
  color:var(--text);
}

.filter-actions-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.filter-actions-row .row{
  flex-wrap:wrap;
}

/* =========================================================
   15a) ACTIONS FILTER BAR — Pro-Max polish (2026-05-03)
   ---------------------------------------------------------
   Scoped to ``.filters-grid.filters-grid--actions`` so the rest
   of the app keeps the legacy 6-col layout. Search is the primary
   axis: wider span, magnifier prefix, white-on-tint chrome. The
   five-track grid (5fr search · 2fr×3 dropdowns · auto buttons)
   gives search ≈42% of the bar without crowding the supporting
   cells, and lets the buttons cell auto-fit its content so a
   wider label can't clip the chrome.
   ========================================================= */
.filters-grid.filters-grid--actions{
  /* 5fr search + 2fr×5 secondary cells (Status / Due / Owner /
     Origin / My-actions) + auto buttons. ``auto`` on the last
     track means the Reset + Evidence-Register buttons auto-size
     to their content (so a wider button label can't get clipped)
     while the data-entry cells share the remaining width
     proportionally. Track count MUST match the cell count in the
     markup — the same off-by-one regressed twice already (M16.37
     added "My actions only" without widening; this branch adds
     "Owner" without widening). The 6th 2fr track fixes it. */
  grid-template-columns:5fr 2fr 2fr 2fr 2fr 2fr auto;
  /* Subtle slate tint on the container so the white search
     input reads as elevated. Same #f8fafc we use for table
     headers, so the surface vocabulary stays consistent. */
  background:#f8fafc;
  /* Slightly bigger horizontal gap so search and the
     dropdown cluster don't read as a single dense row. */
  column-gap:18px;
}
.filters-grid.filters-grid--actions .filter-actions-row{
  justify-self:end;
}

/* M16.37 — "My actions only" filter toggle (a checkbox sized to sit
   in the filter grid alongside the supporting selects). */
.actions-mine-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  height:var(--input-h);
  font-size:0.875rem;
  cursor:pointer;
}
.actions-mine-toggle input{
  cursor:pointer;
}

/* M16.37 multi-owner picker — Create / Edit action modals. Chosen
   owners render as flat chips above an "add owner" select. */
.owners-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.owners-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  min-height:22px;
}
.owners-empty{
  font-size:0.85rem;
}
.owner-chip{
  display:inline-flex;
  align-items:center;
  gap:2px;
  background:#f1f5f9;
  color:#334155;
  border:1px solid #e2e8f0;
  border-radius:6px;
  padding:2px 4px 2px 8px;
  font-size:0.8rem;
  line-height:1.4;
}
.owner-chip__remove{
  border:none;
  background:transparent;
  color:#64748b;
  cursor:pointer;
  font-size:0.95rem;
  line-height:1;
  padding:0 4px;
  border-radius:6px;
}
.owner-chip__remove:hover{
  background:#e2e8f0;
  color:#334155;
}

/* Search input — magnifier prefix, slightly taller than
   the supporting selects (44px vs 40px), primary-colored
   focus outline. No glow, no gradient — calm enterprise
   restraint. The input is white against the container's
   tinted background so it lifts visually without color. */
.search-prefix{
  position:relative;
  display:block;
}
.search-prefix__icon{
  position:absolute;
  left:12px;
  top:50%;
  width:16px;
  height:16px;
  transform:translateY(-50%);
  color:#94a3b8;
  pointer-events:none;
}
.filters-grid.filters-grid--actions .search-prefix .input{
  height:44px;
  padding-left:36px;
  background:#ffffff;
  border:1px solid var(--line);
}
.filters-grid.filters-grid--actions .search-prefix .input::placeholder{
  color:#94a3b8;
}
.filters-grid.filters-grid--actions .search-prefix .input:focus-visible{
  outline:2px solid var(--primary, #120A8F);
  outline-offset:-1px;
  border-color:var(--primary, #120A8F);
}
.filters-grid.filters-grid--actions .search-prefix:focus-within .search-prefix__icon{
  color:var(--primary, #120A8F);
}

/* Responsive — collapse the 5-col grid in two steps so
   search keeps full width on narrow viewports while the
   supporting cells reflow. Mirrors the legacy ``.filters-grid``
   breakpoints (1180 / 700 px). */
@media (max-width: 1180px){
  .filters-grid.filters-grid--actions{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .filters-grid.filters-grid--actions .filters-search{
    grid-column:1 / -1;
  }
  .filters-grid.filters-grid--actions .filter-actions-row{
    grid-column:1 / -1;
    justify-self:stretch;
  }
  .filters-grid.filters-grid--actions .filter-actions-row .row{
    justify-content:flex-end;
  }
}
@media (max-width: 700px){
  .filters-grid.filters-grid--actions{
    grid-template-columns:1fr;
  }
  .filters-grid.filters-grid--actions .filters-search,
  .filters-grid.filters-grid--actions .filters-secondary,
  .filters-grid.filters-grid--actions .filter-actions-row{
    grid-column:1 / -1;
  }
}

/* "More filters" disclosed grid inherits the same slate tint as the
   primary bar so the two regions read as one cohesive surface
   (otherwise the disclosed block reads pure-white and breaks the
   visual rhythm). Scoped to the actions panel so other ``.filters-more``
   instances elsewhere in the app aren't affected. */
.filters-more[data-care-home-panel="actions"] .filters-grid{
  background:#f8fafc;
}

/* Care hours log modal — tab strip. Active tab gets the brand
   primary fill; inactive tabs are quiet ghost buttons. Calm
   enterprise aesthetic, no gradients. The app-shell rule at
   line ~9897 (``body:not(...) .btn:not(.btn-primary)``) shares
   specificity (0,4,1) with our ``body:not(...) .care-hours-tab``
   selector and is declared LATER in source, so it wins ties for
   ``background`` and forces white. ``!important`` on background
   + color is the bluntest fix that doesn't require restructuring
   the body override; without it the active tab read white-on-white. */
.care-hours-tab{
  border-radius:6px;
  font-weight:600;
}
body:not(.landing-page):not(.auth-page) .care-hours-tab.is-active,
.care-hours-tab.is-active{
  background:var(--primary, #120A8F) !important;
  color:#ffffff !important;
  border-color:var(--primary, #120A8F) !important;
}
body:not(.landing-page):not(.auth-page) .care-hours-tab.is-active:hover,
.care-hours-tab.is-active:hover{
  background:var(--primary-2, #0d066b) !important;
  color:#ffffff !important;
}

/* Upload button in the table Evidence cell — when count=0 the button
   renders ``btn btn-primary table-action-btn[data-upload]``. The
   data-upload rule (line ~2450) intentionally quiets the count>0
   "Add" button to white/soft, but it bleeds through here for ``color``
   while the app-shell ``body:not(...) .btn-primary`` rule (line ~9903)
   wins for ``background`` — net result was a navy fill with
   nearly-invisible dark text. This override re-asserts white text +
   solid primary background for the count=0 case only. Specificity
   beats both contributing rules. */
body:not(.landing-page):not(.auth-page) .table-action-btn[data-upload].btn-primary,
.table-action-btn[data-upload].btn-primary{
  background:var(--primary);
  color:#ffffff;
  border-color:var(--primary);
}
body:not(.landing-page):not(.auth-page) .table-action-btn[data-upload].btn-primary:hover{
  background:var(--primary-2);
  border-color:var(--primary-2);
  color:#ffffff;
}

/* =========================================================
   16) TABLE
   ========================================================= */
.table-wrap{
  min-width:0;
  overflow:auto;
  border-radius:6px;
  border:1px solid var(--line);
  background:#ffffff;
  box-shadow:var(--shadow-sm);
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

/* feature/interview-forms-soft-launch-polish — right-align the View/Edit/
   Delete buttons in the candidate Interviews table's last column. */
.interview-actions-cell{
  justify-content:flex-end;
  flex-wrap:nowrap;
}

.table th,
.table td{
  padding:16px 14px;
  vertical-align:top;
  border-bottom:1px solid #e9eff6;
  color:var(--text);
}

.table th{
  position:sticky;
  top:0;
  background:#f7fbff;
  color:var(--text-soft);
  text-align:left;
  font-size:0.82rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  z-index:2;
}

.table tbody tr:hover{
  background:#fbfdff;
}

/* Sortable table headers — convention for data tables.
   Clicking a ``th.sortable-th`` cycles asc → desc → off; the active
   column gets ``is-sorted`` (and ``is-sorted-desc`` for direction).
   The ``.sortable-th__arrow`` span inside receives the ▲/▼ glyph
   from the renderer. Use this pattern on every user-facing data
   table — see docs/ui_conventions.md (Sortable tables). */
.table th.sortable-th{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  /* M16.32 follow-up — keep "Pass rate ↕" / "Completed by ↕"
   * on one line. The ↕ indicator added to make sortability
   * discoverable was wrapping multi-word headers onto two
   * lines on narrow columns; nowrap lets the column auto-
   * expand to fit instead. */
  white-space:nowrap;
}
.table th.sortable-th:hover{
  background:#eef5fb;
}
.table th.sortable-th.is-sorted{
  color:var(--text);
  background:#e6eef9;
}
.sortable-th__arrow{
  display:inline-block;
  margin-left:4px;
  font-size:0.7rem;
  color:var(--text-soft);
  /* M16.32 follow-up — visible at-rest sort hint so the user
   * sees the column is sortable without having to click it
   * first. Replaced when active by ▲/▼ via the renderer; the
   * pseudo-element only shows when the span itself is empty
   * (i.e. inactive). */
  opacity:0.55;
}
.table th.sortable-th .sortable-th__arrow:empty::before{
  content: "↕";
  opacity:0.7;
}
.table th.sortable-th:hover .sortable-th__arrow{
  opacity:1;
}
.table th.sortable-th.is-sorted .sortable-th__arrow{
  color:var(--primary, #120A8F);
  opacity:1;
}

.table tbody tr.overdue{
  background:#fff9f9;
}

.table tbody tr.due-soon{
  background:#fffbf5;
}

.actions-table tbody tr.automation-row{
  background-image:linear-gradient(90deg, var(--primary-soft-04), rgba(18,10,143,0));
}

/* Readiness exclusions — a control marked "not applicable" is set
   aside (out of the readiness score). The row reads as not-in-use:
   muted grey background + dimmed text. Declared after the overdue /
   due-soon tints so an excluded row stays grey regardless of due
   state. */
.actions-table tbody tr.excluded-row,
.table tbody tr.excluded-row{
  background:#f6f7f9;
}
.actions-table tbody tr.excluded-row td,
.table tbody tr.excluded-row td{
  color:var(--text-muted);
}

.actions-table td:first-child,
.actions-table th:first-child{
  padding-left:18px;
}

.actions-table td:last-child,
.actions-table th:last-child{
  padding-right:18px;
}

.table-id-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  padding:7px 10px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-soft);
  font-weight:800;
  font-size:0.82rem;
}

.table-id-chip.automation{
  background:#eef6ff;
  color:var(--primary-2);
}

.table-row-title{
  font-weight:700;
  font-size:0.98rem;
  letter-spacing:-0.02em;
}

.table-row-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:6px;
}

/* Change 4 (feature/action-register-ui) — the category / domain /
   regulation tags are demoted from loud .table-meta-pill chips to one
   quiet muted line below the title, so the title stays the hero. */
.table-row-meta-text{
  font-size:0.78rem;
  line-height:1.45;
  color:var(--text-muted);
}

.table-row-description{
  margin-top:10px;
  max-width:560px;
  line-height:1.5;
}

.table-row-note{
  margin-top:8px;
  color:var(--primary-2);
  font-size:0.84rem;
  font-weight:700;
}

.table-value-stack{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.table-value-primary{
  font-weight:700;
  color:var(--text);
}

.table-value-secondary{
  font-size:0.84rem;
  color:var(--text-muted);
}

/* feature/action-owner-reassignment — the Owner cell rendered as an
   inline edit affordance on system-control rows (manager only). A
   borderless button that fills the cell; the pencil fades in on
   hover / keyboard focus. */
.table-owner-edit{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  padding:4px 6px;
  margin:-4px -6px;
  background:none;
  border:0;
  border-radius:6px;
  cursor:pointer;
  font:inherit;
  color:inherit;
  text-align:left;
}
.table-owner-edit:hover{
  background:#f1f5f9;
}
.table-owner-edit:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:1px;
}
.table-owner-edit-icon{
  flex:0 0 auto;
  font-size:0.8rem;
  color:var(--text-muted);
  opacity:0;
  transition:opacity 0.12s ease;
}
.table-owner-edit:hover .table-owner-edit-icon,
.table-owner-edit:focus-visible .table-owner-edit-icon{
  opacity:1;
}

/* feature/action-owner-reassignment — the Change-owner modal. Width +
   context-label styling kept here rather than inline on the markup. */
#changeOwnerModal .reg-modal-card{
  max-width:480px;
}
#changeOwnerContext{
  margin-top:0;
  font-weight:600;
  color:var(--text);
}

.status-chip,
.due-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  font-size:0.8rem;
  font-weight:800;
  white-space:nowrap;
}

.status-chip.good{
  background:#ecfdf3;
  color:#166534;
}

.status-chip.watch{
  background:#fff7ed;
  color:#b45309;
}

.status-chip.danger{
  background:#fef2f2;
  color:#b91c1c;
}

.status-chip.neutral{
  background:#eef4fb;
  color:#35506d;
}

.table-due-cell{
  display:flex;
  align-items:flex-start;
}

.due-chip.overdue{
  background:#fef2f2;
  color:#b91c1c;
}

.due-chip.due-soon{
  background:#fff7ed;
  color:#b45309;
}

.due-chip.scheduled{
  background:#eff6ff;
  color:#1d4ed8;
}

.due-chip.none{
  background:var(--surface-3);
  color:var(--text-muted);
}

/* Compact Evidence cell — single inline line with count + label.
   The legacy ``.table-evidence-card`` (gradient pill + 14px radius)
   was removed; the inline-count block fits the row's natural
   typographic rhythm without a card-within-card. */
/* Change 1 (feature/action-register-ui) — the Register's Evidence
   column collapses to a compact summary by default. The toggle is a
   borderless inline button (NOT a chunky .btn) carrying a rotating
   chevron + the "{missing} of {total}" summary text; the file line,
   cue, chips and Provide/Upload buttons live in .table-evidence-detail,
   shown on expand as a popover pinned to the toggle (see below). */
.table-evidence-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 4px;
  margin:-2px -4px;
  background:none;
  border:0;
  border-radius:6px;
  cursor:pointer;
  font:inherit;
  font-size:0.85rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  text-align:left;
}
.table-evidence-toggle:hover{
  background:#f1f5f9;
}
.table-evidence-toggle:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:1px;
}
.table-evidence-chevron{
  flex:0 0 auto;
  width:0;
  height:0;
  border-style:solid;
  border-width:4px 0 4px 5px;
  border-color:transparent transparent transparent var(--text-muted);
  transition:transform 0.12s ease;
}
.table-evidence-toggle[aria-expanded="true"] .table-evidence-chevron{
  transform:rotate(90deg);
}
/* The detail is a popover: pinned to the toggle via JS (position
   computed from getBoundingClientRect) so expanding floats above the
   table and never reflows the rows. Closes on Esc / click-outside /
   scroll. It stays a DOM descendant of its <td> so setEvidenceSummary
   can still reach it via closest("tr"). */
.table-evidence-detail{
  position:fixed;
  top:0;
  left:0;
  z-index:1200;
  width:280px;
  max-height:340px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:6px;
  box-shadow:0 10px 28px rgba(15,23,42,0.18);
}
.table-evidence-detail[hidden]{
  display:none;
}

.table-evidence-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:0.85rem;
  line-height:1.3;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--text);
}
.table-evidence-label{
  min-width:0;
  flex:1 1 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Cue pill (``.table-evidence-cue``) is hidden by default — the
   status badge above already encodes urgency, so showing both
   reads as duplication. The element stays in the DOM (the JS
   render path still toggles it via the ``hidden`` class); the
   visibility default is ``display: none``. Easy to bring back if
   the badge ever needs a complement. */
.table-evidence-cue{
  display:none;
}

/* M16.34 Phase B Slice 3 — per-evidence-type chips inside the
   Register row's Evidence cell. Reuses the Gaps panel's
   ``.gaps-row-chip*`` vocabulary; this rule just dials the
   density down for a table cell (smaller font, tighter padding,
   no top margin since the cue line absorbed it). */
.table-evidence-chips.gaps-row-chips{
  margin-top:0;
  flex-direction:column;
  gap:6px;
}
/* M16.34 Phase B Slice 13 — cold-cache "Checking…" chip. Neutral
   grey so it doesn't read as a status (missing / expired etc.)
   while the per-action evidence list is being fetched. */
.gaps-row-chip.is-loading{
  background:#f1f5f9;
  border-color:#e2e8f0;
  color:var(--text-muted);
}
.gaps-row-chip.is-loading .gaps-row-chip-state{
  opacity:0.7;
}
/* feature/action-register-ui — inside the Evidence popover each
   expected-type chip renders as a flat 6px card (not the Gaps panel's
   999px pill): the type name takes its own line, the status badge +
   Provide/Open button flow on the line below with the button
   right-aligned. Scoped to .table-evidence-chips so the Evidence-gaps
   panel's own chips are untouched. */
.table-evidence-chips .gaps-row-chip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  width:100%;
  gap:6px 8px;
  padding:8px 10px;
  border-radius:6px;
  font-size:0.76rem;
}
.table-evidence-chips .gaps-row-chip-type{
  flex:1 1 100%;
  font-weight:600;
  line-height:1.35;
}
.table-evidence-chips .gaps-row-chip-state{
  font-size:0.64rem;
}
.table-evidence-chips .gaps-row-action,
.table-evidence-chips .gaps-row-tracked-link{
  margin-left:auto;
  padding:2px 10px;
  font-size:0.72rem;
  min-height:0;
  line-height:1.4;
}

.table-empty-state{
  padding:28px 24px;
  text-align:center;
}

.table-empty-state.loading{
  background:linear-gradient(180deg, #fbfdff, #f7fafe);
}

.table-empty-title{
  font-size:1rem;
  font-weight:800;
  color:var(--text);
  letter-spacing:-0.02em;
}

.table-empty-copy{
  margin-top:6px;
  color:var(--text-muted);
  line-height:1.5;
}

.evidence-register-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.evidence-register-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.evidence-register-summary{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.evidence-register-stat{
  min-width:140px;
  padding:12px 14px;
  border:1px solid #d7e2ef;
  border-radius:16px;
  background:linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow:var(--shadow-sm);
}

.evidence-register-stat-value{
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--text);
}

.evidence-register-stat-label{
  margin-top:4px;
  font-size:0.84rem;
  color:var(--text-muted);
}

.evidence-register-search{
  flex:1 1 320px;
  max-width:440px;
}

.evidence-register-controls{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.evidence-register-filter{
  flex:0 0 220px;
}

.evidence-register-regulation-chip{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  font-size:0.78rem;
  font-weight:600;
  color:var(--primary);
  background:rgba(37,99,235,0.1);
  border:1px solid rgba(37,99,235,0.25);
  border-radius:999px;
  cursor:pointer;
}
.evidence-register-regulation-chip:hover{
  background:rgba(37,99,235,0.2);
}

.evidence-register-expiry-cell{
  min-width:170px;
}

.evidence-register-table-wrap{
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  box-shadow:var(--shadow-xs);
  /* feature/soft-launch-browser-qa-notes — declare the ``overflow-x:auto``
   * the comment below has always promised. Without it, the inner table's
   * ``min-width:760px`` pushes the 7-column register beyond the card and
   * forces a page-level horizontal scrollbar on every phone (<760px). */
  overflow-x:auto;
}

/* Keep the 7-column register readable on narrow screens: hold a min-width
   so the wrap's overflow-x:auto scrolls the table inside its card instead
   of crushing columns (or forcing a page-level horizontal scroll). */
.evidence-register-table{
  min-width:760px;
}

.evidence-register-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f8fbff;
}

.evidence-register-file-cell{
  min-width:220px;
}

.evidence-register-file-name{
  font-weight:700;
  color:var(--text);
}

.evidence-register-file-meta{
  margin-top:4px;
  font-size:0.84rem;
  color:var(--text-muted);
}

.evidence-register-expiry-note{
  margin-top:4px;
  font-size:0.82rem;
  color:var(--text-muted);
}

.evidence-register-empty,
.evidence-register-loading{
  padding:20px;
  border:1px dashed var(--line-strong);
  border-radius:16px;
  background:var(--surface-2);
}

.evidence-register-empty-title{
  margin-bottom:6px;
  font-weight:700;
  color:var(--text);
}

.evidence-register-loading{
  color:var(--text-muted);
}

/* =========================================================
   17) MODALS
   ========================================================= */
.modal-overlay,
.reg-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,23,42,0.32);
  z-index:2000;
}

.reg-modal.hidden{
  display:none;
}

.modal,
.reg-modal-card{
  width:min(760px, 95vw);
  max-height:85vh;
  overflow:auto;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  padding:20px;
}

/* Download-form modal has two searchable dropdowns whose menus need to
   escape the card. The card's default overflow:auto clips them; we let
   this specific card overflow visible so the dropdown menus render on
   top (z-index already handles stacking). Content is always small
   enough to fit without scrolling. */
#supervisionDownloadFormModal .reg-modal-card,
#trainingAccessAddModal .reg-modal-card,
#tenantReviewAssignModal .reg-modal-card{
  overflow:visible;
}

/* Supervision / Appraisal matrix overlay — the matrix has six columns
   (Staff / Role / Supervision / Last-next / Appraisal / Last-next) which
   were cramped (and the last column clipped) inside the default
   ``width:min(760px,95vw)`` card. Widen the desktop card so the columns
   breathe; ``min(...,96vw)`` keeps it inside the viewport on smaller
   screens and the card's existing ``overflow:auto`` scrolls the matrix
   horizontally there. The ≤560px ``.reg-modal-card{width:100%}`` rule
   still applies on phones (lower specificity only matters within that
   query — see note: this id rule would otherwise win, so it is bounded
   to ≥561px). */
@media (min-width: 561px){
  #supervisionMatrixOverlay .reg-modal-card{
    width:min(1200px, 96vw);
    max-width:1200px;
  }
}

/* Residents → Period view report table. 13 columns (resident / room /
   from / to / days / funding / FNC / rates / revenue) crammed into the
   panel width and wrapped cells. Give the table a comfortable min-width
   and keep cells on one line; the wrapper (#residentsPeriodTableWrap)
   already has overflow-x:auto so it scrolls horizontally below this
   width instead of squashing. */
#residentsPeriodTable{
  min-width:1080px;
}
#residentsPeriodTable th,
#residentsPeriodTable td{
  white-space:nowrap;
}

.modal-head,
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.modal-body{
  min-width:0;
}

.modal-foot,
.modal-footer{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.reg-control-item{
  padding:10px 12px;
  border-bottom:1px solid #edf2f7;
  color:var(--text-soft);
}

/* Care Home audit log modal — filter row + paginated table.
   Scoped via the modal id so these helpers don't leak into other
   reg-modals. */
#careHomeAuditLogModal .modal-footer{ justify-content:space-between; align-items:center; }
.audit-log-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}
.audit-log-filter{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:160px;
}
.audit-log-filter > span{
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.audit-log-filter .input{
  min-width:0;
}
.audit-log-table-wrap{
  border:1px solid var(--line);
  border-radius:6px;
  overflow:auto;
  max-height:55vh;
}
.audit-log-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.88rem;
}
.audit-log-table thead th{
  background:#f8fafc;
  text-align:left;
  padding:10px 12px;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
}
.audit-log-table tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.audit-log-table tbody tr:last-child td{ border-bottom:0; }
.audit-log-table .audit-log-when{
  white-space:nowrap;
  color:var(--text-soft);
  font-variant-numeric:tabular-nums;
}
.audit-log-table .audit-log-event{
  color:var(--text);
  font-weight:500;
  white-space:nowrap;
}
.audit-log-empty{
  padding:24px;
  text-align:center;
  color:var(--text-muted);
}

/* =========================================================
   18) HISTORY TIMELINE
   ========================================================= */
.history-entry{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.history-rail{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:16px;
  flex:0 0 16px;
}

.history-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--primary);
  box-shadow:0 0 0 4px rgba(37,99,235,0.10);
  margin-top:4px;
}

.history-line{
  width:2px;
  flex:1 1 auto;
  min-height:24px;
  background:#e2e8f0;
  margin-top:6px;
}

.history-body{
  flex:1 1 auto;
  min-width:0;
  padding-bottom:10px;
}

.history-message{
  font-weight:600;
  color:var(--text);
}

.history-meta{
  margin-top:4px;
  color:var(--text-muted);
  font-size:0.9rem;
}

/* =========================================================
   19) CUSTOM SELECTS
   ========================================================= */
.selectx{
  position:relative;
  display:inline-block;
  width:100%;
  max-width:100%;
}

.selectx-btn{
  width:100%;
  height:var(--input-h);
  min-height:var(--input-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
  border-radius:14px;
  background:linear-gradient(180deg, #ffffff, #fbfdff);
  border:1px solid var(--line);
  color:var(--text);
  cursor:pointer;
  user-select:none;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.95);
}

.selectx-btn:hover{
  border-color:#c8d6e8;
  background:#ffffff;
}

.selectx-btn:focus{
  outline:none;
  border-color:#93b4e8;
  box-shadow:0 0 0 4px rgba(37,99,235,0.10);
}

/* Locked / disabled state — a select that can't be changed reads as
   a read-only FIELD, not a dropdown and not bare text. Drop the
   dropdown arrow (so it isn't mistaken for editable) but keep the
   field box — a subtle grey fill + faint border + slightly-bolder
   value — so the locked value still has presence and sits in the
   form's field rhythm. Mirrors the native <select>'s disabled
   attribute (synced by refreshEnhancedSelect). Used by the evidence
   upload modal's Document type when uploading for a specific
   expected-evidence type, the compliance-document flow, and the
   auto-derived Domain field on the Create / Edit action modals.
   User-flagged 2026-05-16. */
.selectx-btn:disabled{
  background:#f8fafc;
  border-color:var(--line);
  box-shadow:none;
  cursor:default;
  color:var(--text);
  font-weight:500;
}
.selectx-btn:disabled:hover{
  background:#f8fafc;
  border-color:var(--line);
}
.selectx-btn:disabled .selectx-arrow{
  display:none;
}

.selectx-btn span:first-child{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}

.selectx-arrow{
  flex:0 0 auto;
  opacity:0.7;
  margin-left:6px;
}

.selectx-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:max-content;
  min-width:100%;
  max-width:min(460px, calc(100vw - 32px));
  box-sizing:border-box;
  z-index:9999;
  border-radius:14px;
  background:linear-gradient(180deg, #ffffff, #fbfdff);
  border:1px solid #d7e2ef;
  box-shadow:var(--shadow-md);
  display:none;
  overflow:hidden;
}

.selectx.open .selectx-menu{
  display:block;
  max-height:min(320px, 60vh);
  overflow:auto;
}

/* When the button is near the bottom of a clipping ancestor (modal scroll
   container, dense form in viewport), the menu flips to open above so the
   options stay visible instead of being cut off. */
.selectx.selectx--flip-up .selectx-menu{
  top:auto;
  bottom:calc(100% + 8px);
}

.selectx-search-wrap{
  padding:8px;
  border-bottom:1px solid #edf2f7;
  background:linear-gradient(180deg, #ffffff, #fbfdff);
  position:sticky;
  top:0;
  z-index:2;
}

.selectx-search{
  width:100%;
  height:36px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#ffffff;
  color:var(--text);
  outline:none;
}

.selectx-search:focus{
  border-color:#93b4e8;
  box-shadow:0 0 0 4px rgba(37,99,235,0.10);
}

.selectx-items{
  max-height:240px;
  overflow-y:auto;
}

.selectx-item{
  padding:10px 12px;
  cursor:pointer;
  color:var(--text);
  background:transparent;
  line-height:1.35;
  word-break:break-word;
}

.selectx-item:hover{
  background:#eff6ff;
}

.selectx-item[aria-selected="true"]{
  background:#dbeafe;
}

.selectx-item.is-hidden{
  display:none;
}

/* Disabled options (e.g. RIP when departure date is in the future)
   render greyed out with the not-allowed cursor. The click handler
   short-circuits when ``opt.disabled`` is true, so visual hint +
   behavioural block stay in lockstep. */
.selectx-item.is-disabled{
  color:#9ca3af;
  cursor:not-allowed;
  opacity:0.6;
}
.selectx-item.is-disabled:hover{
  background:transparent;
}

/* M16.26 — selectx group label (renders <optgroup>/@label as a
 * sticky-ish header above the group's options). Visually distinct
 * (smaller, bold, muted) so the manager scans the menu by group. */
.selectx-group-label{
  padding:8px 12px 4px;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft, #4b5563);
  background:#f8fafc;
  border-top:1px solid var(--line, #e5e7eb);
  pointer-events:none;
}
.selectx-group-label:first-child{
  border-top:0;
}
.selectx-group-label.is-hidden{
  display:none;
}

select.selectx-native{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  height:0 !important;
  width:0 !important;
}

/* =========================================================
   20) DATE MASK / DATE INPUTS
   ========================================================= */
.date-mask-input{
  font-variant-numeric:tabular-nums;
  cursor:text;
}

.date-mask-empty{
  color:transparent;
  text-shadow:0 0 0 rgba(100,116,139,0.65);
}

.date-mask-partial{
  color:transparent;
  text-shadow:0 0 0 rgba(15,23,42,0.92);
}

.date-mask-full{
  color:var(--text);
  text-shadow:none;
}

.date-input-wrap{
  position:relative;
}

.native-date-proxy{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  width:100%;
  height:100%;
}

/* =========================================================
   21) RESPONSIVE
   ========================================================= */
@media (max-width: 1400px){
  .filters-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

.filter-span-2{
    grid-column:span 2;
  }
}

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

.workspace-topbar,
  .section-title-row{
    flex-direction:column;
    align-items:flex-start;
  }

.domain-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

.domain-detail-metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

.kpi-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

.kpi-filter-bar{
    flex-direction:column;
    align-items:flex-start;
  }

.care-home-comparison-head,
  .care-home-comparison-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

.care-home-drilldown-bar{
    flex-direction:column;
    align-items:flex-start;
  }

.readiness-card-head{
    flex-direction:column;
    align-items:flex-start;
  }

.row-space{
    flex-direction:column;
    align-items:stretch;
  }

.row-space > .row{
    justify-content:flex-start;
  }
}

@media (max-width: 840px){
  .page{
    padding:20px 16px 40px;
  }

.dashboard-summary-card{
    padding:18px;
  }

.dashboard-summary-card .table{
    min-width:640px;
  }

.company-care-home-cards{
    grid-template-columns:1fr;
  }

.header{
    flex-direction:column;
  }

.filters-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

.filter-span-2{
    grid-column:span 2;
  }

.kpi-grid{
    grid-template-columns:1fr;
  }

.tenant-scope-banner{
    flex-direction:column;
    align-items:flex-start;
  }

.create-actions-row{
    flex-direction:column;
  }

.create-actions-row .btn{
    width:100%;
  }

.domain-detail-columns{
    grid-template-columns:1fr;
  }

.care-home-comparison-head,
  .care-home-comparison-row{
    grid-template-columns:1fr;
  }
}

@media (max-width: 700px){
  .top-bar__center .mode-breadcrumb{
    max-width:200px;
  }

.domain-grid{
    grid-template-columns:1fr;
  }

.domain-detail-metrics{
    grid-template-columns:1fr;
  }

.expiry-automation-result{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

.expiry-automation-history-row{
    flex-direction:column;
  }

.expiry-automation-history-stats{
    min-width:0;
    width:100%;
    text-align:left;
  }
}

@media (max-width: 560px){
  .filters-grid{
    grid-template-columns:1fr;
    padding:14px;
  }

.filter-span-2{
    grid-column:span 1;
  }

.modal,
  .reg-modal-card{
    width:100%;
    max-height:90vh;
    padding:16px;
  }

.panel,
  .card{
    padding:14px;
  }

.header h1{
    font-size:1.9rem;
  }

.domain-grid{
    grid-template-columns:1fr;
  }

.evidence-register-toolbar{
    flex-direction:column;
    align-items:stretch;
  }

.evidence-register-summary{
    width:100%;
  }

.evidence-register-stat{
    flex:1 1 0;
    min-width:0;
  }

.expiry-automation-result{
    grid-template-columns:1fr;
  }

.expiry-automation-history-row{
    flex-direction:column;
  }

.expiry-automation-history-stats{
    min-width:0;
    width:100%;
    text-align:left;
  }

.evidence-register-search{
    max-width:none;
    width:100%;
  }

.evidence-register-filter{
    flex:1 1 180px;
  }

.top-bar__center .mode-breadcrumb{
    max-width:140px;
  }
}

/* Evidence upload modal — uses the shared ``.reg-modal-card``
   defaults (max-height + overflow auto) for the card itself.
   Per-modal tweaks live in ``.evidence-upload-mode-hint``,
   ``.evidence-upload-body``, ``.evidence-upload-footer`` (the
   only three ``.evidence-upload-*`` classes still applied to
   markup). Labels keep their default ``.label`` styling —
   spacing between groups is utility-margin driven, matching
   the HR / Training document upload modals. */

.evidence-upload-mode-hint{
  margin-top:6px;
}

.evidence-upload-body{
  padding:4px 4px 0;
}

/* M16.34 Phase B Slice 21 — small secondary line under the
   file-drop pane showing the picked file's type + last-modified
   date. Replaces the inline ``style="font-size:0.8rem"`` Codex
   flagged on ``#evidenceUploadFileMeta`` (2026-05-15). */
#evidenceUploadFileMeta{
  font-size:0.8rem;
}

/* M16.34 Phase B Slice 22 — Document date / Expiry date side-by-
   side row in the Evidence upload modal. Replaces the inline
   ``style="gap:14px; flex-wrap:wrap;"`` Codex flagged
   (2026-05-15). The ``.row`` utility already provides flex; this
   class layers the gap + wrap behaviour. */
.evidence-upload-dates-row{
  gap:14px;
  flex-wrap:wrap;
}

.evidence-upload-footer{
  padding:14px 4px 4px;
}

/* M16.34 Phase B Slice 4 — "How is this filed?" pills. Two
   pill-shaped buttons sitting in a single row at the top of the
   upload modal. Active state mirrors the brand-primary fill from
   the rest of the app's segmented controls. Hint under the pills
   carries a one-liner explaining what each mode means. */
.evidence-upload-mode{
  margin-bottom:6px;
}
.evidence-upload-mode-pills{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:4px;
}
.evidence-upload-mode-pill{
  flex:0 0 auto;
  padding:6px 14px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid var(--line);
  color:var(--text-soft);
  font-weight:500;
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
}
.evidence-upload-mode-pill:hover{
  border-color:#bcd2ee;
  background:#f8fbff;
}
/* Active pill — the competing app-shell rule
   ``body:not(...) .btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger)
   { background:#fff }`` at styles.css:11989 has specificity 0,6,1
   (1 element + 6 classes counting each :not's argument). Match it
   here with two ``:not()``s, AND use ``!important`` on background +
   color as a defensive belt-and-braces — the previous fix
   (specificity 0,4,1 only) lost the cascade and rendered white text
   on a white background (user-flagged twice, images #53 + #55). */
body:not(.landing-page):not(.auth-page) .evidence-upload-mode-pill:not(.btn-primary):not(.btn-secondary).is-active{
  background:var(--primary) !important;
  border-color:var(--primary) !important;
  color:#ffffff !important;
}
body:not(.landing-page):not(.auth-page) .evidence-upload-mode-pill:not(.btn-primary):not(.btn-secondary).is-active:hover{
  background:var(--primary-2, var(--primary)) !important;
  border-color:var(--primary-2, var(--primary)) !important;
  color:#ffffff !important;
}
.evidence-upload-mode .hint{
  margin-top:6px;
  font-size:0.78rem;
}

@media (max-width: 560px){
  .evidence-upload-card .modal-header,
  .evidence-upload-body,
  .evidence-upload-footer{
    padding-left:18px;
    padding-right:18px;
  }

.evidence-upload-footer #saveEvidenceUploadBtn{
    width:100%;
  }

#saveSystemControlBtn{
    width:100%;
  }
}

/* --- Confirmation Modal --- */
#confirmModal:not([open]){
  display:none;
}
/* Strip default <dialog> user-agent styles so only the inner card is visible */
#confirmModal{
  border:none;
  padding:0;
  background:transparent;
  max-width:none;
  max-height:none;
  color:inherit;
}

.confirm-modal-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:0 20px 50px rgba(15,23,42,0.25), 0 4px 12px rgba(15,23,42,0.1);
  padding:24px;
  max-width:480px;
  width:90vw;
}

.confirm-modal-title{
  font-size:1.125rem;
  font-weight:600;
  color:var(--text);
  margin:0 0 12px;
}

.confirm-modal-body{
  font-size:0.9rem;
  color:var(--text-soft);
  line-height:1.55;
  margin-bottom:20px;
}

.confirm-modal-body ul{
  margin:12px 0 0;
  padding-left:20px;
}

.confirm-modal-body li{
  margin-bottom:6px;
}

.reset-warning{
  border-left:3px solid var(--danger);
  background:rgba(207,47,54,0.06);
  padding:12px 14px;
  border-radius:6px;
}
.reset-warning strong{
  color:var(--danger);
}

.typed-confirm-wrap{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.typed-confirm-label{
  display:block;
  font-size:0.82rem;
  color:var(--text-muted);
  margin-bottom:6px;
}
.typed-confirm-input{
  width:100%;
}

/* Unified-dialog input slot (uiPrompt). Shares the confirm-modal card
   with uiConfirm/uiAlert; hidden by default, shown via the [hidden]
   attribute toggle in _openUiDialog. */
.confirm-modal-input-wrap{
  margin-top:4px;
  margin-bottom:18px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.confirm-modal-input-wrap[hidden]{
  display:none;
}
.confirm-modal-input-label{
  font-size:0.82rem;
  color:var(--text-muted);
}
.confirm-modal-input{
  width:100%;
}
.confirm-modal-input-error{
  min-height:1em;
  font-size:0.8rem;
  color:var(--danger);
}
.confirm-modal-input-error:empty{
  display:none;
}

.confirm-modal-footer{
  display:flex;
  gap:12px;
  justify-content:flex-end;
}

.confirm-modal-footer .btn-danger{
  background:var(--danger);
  color:#fff;
  border:none;
}

.confirm-modal-footer .btn-danger:hover{
  background:#b82a30;
}

.confirm-modal-footer .btn-danger:disabled{
  background:var(--text-muted);
  cursor:not-allowed;
}

/* --- Toast Notifications --- */
.toast-container{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:11000;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}

.toast{
  background:var(--surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  padding:12px 16px;
  font-size:0.875rem;
  color:var(--text);
  pointer-events:auto;
  animation:toast-in 0.25s ease-out;
  border-left:4px solid var(--text-muted);
}

.toast--success{
  border-left-color:var(--success);
}

.toast--error{
  border-left-color:var(--danger);
}

@keyframes toast-in{
  from{
    opacity:0;
    transform:translateX(20px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

#evidenceLocation,
#systemControlEvidenceLocation{
  min-height:50px;
  padding:0 16px;
}

.system-control-evidence-summary{
  margin:10px 0 14px;
  padding:12px 14px;
  border:1px solid #d8e0ea;
  border-radius:12px;
  background:#f8fafc;
  color:#435066;
  font-size:13px;
}

.system-control-evidence-title{
  font-weight:600;
  color:#243246;
}

.system-control-evidence-list{
  margin-top:8px;
  display:grid;
  gap:6px;
}

.system-control-evidence-item{
  padding:8px 10px;
  border-radius:10px;
  background:#ffffff;
  border:1px solid #e3e8ef;
}

.reg-control-meta{
  margin-top:4px;
  font-size:12px;
  color:#6b7280;
}

/* M16.34 Phase B Slice 5 — Manage evidence modal styling. The
   floating popover container retired; the modal uses the shared
   ``.reg-modal``/``.reg-modal-card`` shell + a tabular file list.
   A subset of the legacy ``.evidence-popover-*`` classes is
   intentionally kept below because the action drawer
   (``renderDrawerEvidenceFiles``) still uses ``.evidence-popover-row``
   / ``-link`` / ``-meta`` / ``-list`` for its own evidence file list.
   Migrating the drawer to dedicated classes is a follow-up. */
.evidence-popover-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.evidence-popover-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 0;
  border-bottom:1px solid #edf2f7;
}
.evidence-popover-row:last-child{
  border-bottom:none;
  padding-bottom:0;
}
.evidence-popover-link{
  display:block;
  min-width:0;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.evidence-popover-link:hover{
  background:#f8fbff;
  border-color:#c9d8ea;
}
.evidence-popover-meta{
  color:var(--text-muted);
  font-size:0.9rem;
  line-height:1.4;
}
.evidence-popover-close{
  background:#ffffff;
  border-color:#d7e2ef;
  color:var(--text-soft);
}

.evidence-manage-card{
  width:min(1400px, 98vw);
  max-height:min(86vh, 800px);
  display:flex;
  flex-direction:column;
}
/* M16.34 Phase B Slice 17 — hrDocsViewerModal lives upstream in
   DOM order, so the evidenceManageModal naturally paints over it
   when both are open. Bumping the viewer's z-index above the
   default ``.reg-modal`` (2000) keeps the viewer on top when
   launched from the Manage modal's View button (user-flagged
   2026-05-15). */
#hrDocsViewerModal{
  z-index:2100;
}
/* M16.35 Phase 7A.2 — Evidence versions (history) modal stacks at the
   same z-index as the inline viewer (both opened from the Manage
   modal). ``_topmostOpenModal`` picks the visible-topmost by computed
   z-index so Esc / backdrop close the History modal first if the
   viewer happens to be open on top later. */
#evidenceVersionsModal{
  z-index:2100;
}

/* M16.36 / Phase 7B — Evidence legal hold capture modal. Stacked
   between Manage (2000) and Versions (2100) so a hold initiated from
   either surface paints on top. ``_topmostOpenModal`` picks by
   computed z-index so Esc closes the legal-hold popup first when
   it's open. */
#evidenceLegalHoldModal{
  z-index:2050;
}
.evidence-legal-hold-card{
  width:min(520px, 96vw);
  display:flex;
  flex-direction:column;
}
.evidence-legal-hold-filename{
  margin-bottom:10px;
  font-size:0.9rem;
  display:flex;
  gap:6px;
  align-items:baseline;
}
.evidence-legal-hold-label{
  display:block;
  margin-top:8px;
  margin-bottom:4px;
  font-weight:600;
  font-size:0.85rem;
}
.evidence-legal-hold-textarea{
  width:100%;
  font-family:inherit;
  font-size:0.92rem;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  box-sizing:border-box;
}
.evidence-legal-hold-hint{
  margin-top:6px;
  font-size:0.78rem;
}

/* Lock pill on the Manage modal row's status column when held.
   Sits with the expiry badge + uploaded line under the file name.
   ``.readiness-badge--sm`` base styling applies; this rule only
   adds the muted-amber tone + the small icon spacing. */
.evidence-manage-hold-pill{
  margin-top:4px;
  background:#fef3c7;
  color:#92400e;
  border:1px solid #fcd34d;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.evidence-version-hold-pill{
  background:#fef3c7;
  color:#92400e;
  border:1px solid #fcd34d;
}

/* M16.36 / Phase 7B — Retention dry-run panel + candidates modal.
   The panel mirrors the expiry-automation card styling; the modal
   sits in the stacked-modal hierarchy at the same level as Manage
   (z-index 2000) because it's opened from a sibling panel, not from
   Manage itself. */
.evidence-retention-panel .panel-title{
  display:flex;
  align-items:center;
  gap:8px;
}
.evidence-retention-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
/* Retention mode badge — dry-run (neutral) vs active deletion (danger). */
.retention-mode-badge{
  display:inline-block;
  font-size:0.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:2px 8px;
  border-radius:6px;
  vertical-align:middle;
}
.retention-mode-badge--dryrun{
  background:#f1f5f9;
  color:#475569;
}
.retention-mode-badge--active{
  background:#fee2e2;
  color:#b91c1c;
}
#evidenceRetentionRunsModal{
  z-index:2000;
}
.evidence-retention-runs-card{
  width:min(1400px, 98vw);
  max-height:min(86vh, 800px);
  display:flex;
  flex-direction:column;
}
.evidence-retention-runs-card .modal-body{
  flex:1 1 auto;
  overflow-y:auto;
}
.evidence-retention-runs-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.evidence-retention-runs-controls{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
}
.evidence-retention-runs-select{
  flex:1 1 auto;
  font-family:inherit;
  font-size:0.9rem;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
}
.evidence-retention-runs-header-actions{
  display:flex;
  gap:6px;
}
.evidence-retention-candidates-table{
  width:100%;
  border-collapse:collapse;
}
.evidence-retention-candidates-table th,
.evidence-retention-candidates-table td{
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid var(--line);
  font-size:0.88rem;
}
.evidence-retention-candidates-table thead th{
  background:#f8fafc;
  font-weight:600;
}
.evidence-versions-card{
  /* M16.35 Phase 7A.3 follow-up (2026-05-15) — widened to match the
     Manage modal (1400px) since the Restore button on non-current
     rows + Download made the action column overflow at 1100px
     (user-flagged 2026-05-15 — table too narrow). */
  width:min(1400px, 98vw);
  max-height:min(86vh, 800px);
  display:flex;
  flex-direction:column;
}
.evidence-versions-card .modal-body{
  flex:1 1 auto;
  overflow-y:auto;
}
.evidence-versions-subtitle{
  margin-top:4px;
  font-size:0.85rem;
}
.evidence-versions-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.evidence-versions-empty{
  padding:18px 16px;
  border:1px dashed var(--line);
  border-radius:8px;
  background:#fafbfc;
  text-align:center;
}
.evidence-versions-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.875rem;
}
.evidence-versions-table thead th{
  text-align:left;
  font-size:0.72rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-soft);
  background:#f8fafc;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  font-weight:600;
}
.evidence-versions-table tbody td{
  padding:12px;
  border-bottom:1px solid #edf2f7;
  vertical-align:top;
}
.evidence-versions-table tbody tr:last-child td{
  border-bottom:none;
}
.evidence-version-row--current{
  background:#f0fdf4;
}
.evidence-version-cell-version{
  min-width:96px;
}
.evidence-version-cell-name{
  min-width:220px;
}
.evidence-version-cell-primary{
  font-weight:500;
  color:var(--text);
  word-break:break-word;
}
.evidence-version-cell-secondary{
  margin-top:3px;
  font-size:0.78rem;
}
.evidence-version-cell-notes{
  margin-top:6px;
  font-size:0.8rem;
  line-height:1.4;
}
.evidence-version-cell-actions{
  /* M16.35 Phase 7A.3 follow-up — switched from nowrap to flex-wrap
     so Download + Restore wrap onto a 2nd line if the actions
     column gets squeezed instead of overflowing the modal. Same
     pattern as the Manage modal's actions cell. */
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.evidence-versions-actions-col{
  /* Reserve a stable column footprint big enough for Download +
     Restore inline on a single row. */
  width:200px;
  text-align:right;
}
.evidence-manage-card .modal-body{
  flex:1 1 auto;
  overflow-y:auto;
}
.evidence-manage-subtitle{
  margin-top:4px;
  font-size:0.85rem;
}
.evidence-manage-body{
  display:flex;
  flex-direction:column;
  gap:16px;
}
/* M16.34 Phase B Slice 20 — Expected evidence summary rows.
   Previously the renderer emitted ``.evidence-expected-row`` /
   ``-name`` / ``-state`` / ``-list`` / ``-panel`` / ``-header`` /
   ``-title`` markup with NO CSS, so each row stacked vertically
   as a plain block with the state text rendering as bold inline
   text (user-flagged 2026-05-15 — pill background invisible).
   Provide explicit row layout + lock the pill onto the right
   edge alongside the type name. */
.evidence-expected-panel{
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f8fafc;
}
.evidence-expected-header{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-bottom:10px;
}
.evidence-expected-title{
  font-size:0.9rem;
  font-weight:600;
  color:var(--text);
}
.evidence-expected-header .hint{
  font-size:0.78rem;
}
.evidence-expected-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.evidence-expected-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 10px;
  border-radius:6px;
  background:#ffffff;
  border:1px solid #edf2f7;
  font-size:0.86rem;
}
.evidence-expected-name{
  font-weight:500;
  color:var(--text);
  flex:1 1 auto;
  min-width:0;
  word-break:break-word;
}
.evidence-expected-state{
  flex:0 0 auto;
}
.evidence-expected-state .readiness-badge{
  /* Don't let the global ``.readiness-badge`` font-weight (700)
     bleed shadow / heavy paint; keep it tidy on a list row. */
  box-shadow:none;
}
.evidence-manage-expected:empty{
  display:none;
}
.evidence-manage-empty{
  padding:18px 16px;
  border:1px dashed var(--line);
  border-radius:8px;
  background:#fafbfc;
  text-align:center;
}
.evidence-manage-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.875rem;
}
.evidence-manage-table thead th{
  text-align:left;
  font-size:0.72rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-soft);
  background:#f8fafc;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  font-weight:600;
}
.evidence-manage-table tbody td{
  padding:12px;
  border-bottom:1px solid #edf2f7;
  vertical-align:top;
}
.evidence-manage-table tbody tr:last-child td{
  border-bottom:none;
}
.evidence-manage-cell-name{
  min-width:200px;
}
.evidence-manage-filename{
  font-weight:600;
  color:var(--primary);
  text-decoration:none;
  word-break:break-word;
}
.evidence-manage-filename:hover{
  text-decoration:underline;
}
/* M16.34 Phase B Slice 14 — location-only record pill. Replaces
   the filename link for records persisted as a location reference
   (synthetic ``evidence-reference-*.txt`` placeholder) so the user
   doesn't see a confusing internal filename and isn't tempted to
   download the placeholder. */
.evidence-manage-location-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:#eef2ff;
  border:1px solid #c7d2fe;
  color:#3730a3;
  font-weight:600;
  font-size:0.8rem;
}
.evidence-manage-row--location-only .evidence-manage-cell-secondary:first-of-type{
  margin-top:6px;
}
/* Missing expected-evidence placeholder row in the Manage modal's
   file table. Subtly de-emphasised against real uploaded-file rows
   so the operator reads it as "still to do", not an attached file. */
.evidence-manage-row--missing{
  background:#fef2f2;
}
.evidence-manage-missing-placeholder{
  font-style:italic;
}
.evidence-manage-cell-secondary{
  margin-top:3px;
  color:var(--text-muted);
  font-size:0.78rem;
}
.evidence-manage-cell-notes{
  margin-top:6px;
  font-size:0.8rem;
  line-height:1.4;
}
.evidence-manage-cell-status{
  white-space:nowrap;
}
.evidence-manage-cell-actions{
  /* M16.35 Phase 7A.3 follow-up (2026-05-15) — actions split into
     TWO explicit rows for visual consistency across files
     (user-flagged: History + Delete should always be on the second
     row). Top row: primary actions (View / Replace / Edit). Bottom
     row: lifecycle actions (History (N) / Delete). Each child
     ``.evidence-manage-actions-row`` is itself a flex-wrap so a
     single button row still wraps gracefully on very narrow
     viewports. */
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.evidence-manage-actions-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.evidence-manage-actions-col{
  /* Reserve a stable column footprint so the file/type/status
     columns stay predictable; 3 buttons + padding fits at ~260px. */
  width:260px;
  text-align:right;
}
.evidence-manage-cell-actions .btn{
  margin:0;
}

@media (max-width: 640px){
  .evidence-manage-table thead{
    display:none;
  }
  .evidence-manage-table tbody td{
    display:block;
    padding:8px 0;
    border-bottom:none;
  }
  .evidence-manage-table tbody tr{
    display:block;
    padding:12px 0;
    border-bottom:1px solid #edf2f7;
  }
  .evidence-manage-actions-col{
    width:auto;
  }
  .evidence-manage-cell-actions{
    align-items:flex-start;
  }
  .evidence-manage-actions-row{
    justify-content:flex-start;
  }
}

.history-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.5), rgba(255,255,255,0) 34%),
    rgba(15,23,42,0.22);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.history-card{
  width:min(720px, 95vw);
  max-height:85vh;
  overflow:auto;
  background:linear-gradient(180deg, #ffffff, #fafcff);
  border:1px solid #d7e2ef;
  border-radius:24px;
  box-shadow:var(--shadow-lg);
  padding:22px 24px 24px;
}

.history-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid #edf2f7;
  gap:12px;
}

.history-title{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-0.02em;
}

.history-close{
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  background:#ffffff;
  border-color:#d7e2ef;
  color:var(--text-soft);
}

.history-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.history-entry:last-child .history-line{
  display:none;
}

@media (max-width: 1100px){
  .pricing-grid,
  .trust-grid,
  .public-cta-card,
  .feature-grid{
    grid-template-columns:1fr 1fr;
  }

.steps-grid{
    grid-template-columns:1fr;
  }

.public-cta-card{
    align-items:flex-start;
    flex-direction:column;
  }

.public-menu{
    display:none;
  }

.public-mobile-account{
    flex-direction:column;
    align-items:stretch;
  }

.public-nav-toggle{
    display:inline-flex;
  }

.public-nav{
    align-items:center;
    flex-wrap:nowrap;
  }

.public-mobile-menu.open{
    margin:0 0 18px;
  }
}

@media (max-width: 900px){
  .feature-grid,
  .pricing-grid,
  .trust-grid,
  .steps-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 840px){
  .public-shell,
  .auth-shell,
  .auth-brand-row{
    padding-left:18px;
    padding-right:18px;
  }

.public-title{
    font-size:2.2rem;
    max-width:none;
  }

.public-hero-copy{
    padding:28px 22px;
  }

.public-nav{
    padding-left:0;
    padding-right:0;
    gap:12px;
  }

.public-brand{
    margin-right:auto;
  }

.account-actions{
    flex-direction:column;
    align-items:stretch;
  }

.public-trust-bar{
    gap:18px;
  }

.public-footer{
    flex-direction:column;
  }
}

/* =========================================================
   ACTION DETAIL DRAWER
   ========================================================= */
.action-drawer-overlay{
  position:fixed;
  inset:0;
  z-index:9000;
  background:rgba(15,23,42,0.22);
  opacity:0;
  transition:opacity 0.2s ease;
}
.action-drawer-overlay.is-open{
  opacity:1;
}

.action-drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:9001;
  width:min(480px, 92vw);
  background:#ffffff;
  border-left:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform 0.25s ease;
}
.action-drawer.is-open{
  transform:translateX(0);
}

.action-drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 20px 14px;
  border-bottom:1px solid var(--line);
}

.action-drawer-title{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-0.02em;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.action-drawer-body{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.action-drawer-section-title{
  font-size:0.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--text-muted);
  margin-bottom:6px;
}

.action-drawer-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.92rem;
  color:var(--text);
}
.action-drawer-meta .muted{
  color:var(--text-muted);
}

.drawer-expected-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.drawer-expected-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
  border-bottom:1px solid #edf2f7;
}
.drawer-expected-row:last-child{
  border-bottom:none;
}
.drawer-expected-label{
  flex:1 1 auto;
  min-width:0;
  font-size:0.92rem;
  color:var(--text);
}
/* Per-item upload affordance on actionable Expected-evidence rows.
   Compact so the label keeps the row's growing space; sits after
   the status chip. */
.drawer-expected-provide{
  flex:0 0 auto;
  white-space:nowrap;
}

.action-drawer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

.drawer-gap-summary{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.upload-feedback-toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(12px);
  z-index:11000;
  padding:10px 14px;
  border-radius:8px;
  background:#1f2937;
  color:#ffffff;
  font-size:0.85rem;
  font-weight:600;
  box-shadow:var(--shadow-md);
  opacity:0;
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.upload-feedback-toast.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.drawer-next-step{
  font-size:0.82rem;
  font-weight:600;
  padding:8px 12px;
  border-radius:6px;
  border-left:3px solid;
}
.drawer-next-step.danger{
  background:#fce4ec;color:#c62828;border-color:#c62828;
}
.drawer-next-step.watch{
  background:#fff8e1;color:#f57f17;border-color:#f57f17;
}

.active-filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}
.active-filter-chips.hidden{
  display:none;
}
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #d8e2ef;
  background:#f0f4fa;
  color:#334155;
  font-size:0.78rem;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
}
.filter-chip:hover{
  background:#e2e8f0;
  border-color:#bcd0e7;
}
.filter-chip-x{
  font-size:0.9rem;
  line-height:1;
  color:#94a3b8;
}

.batch-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  background:#eef2ff;
  border:1px solid #c7d2fe;
  border-radius:10px 10px 0 0;
  font-size:0.84rem;
  font-weight:600;
  color:#3730a3;
}
.batch-bar.hidden{
  display:none;
}
.w40{
  width:40px;
}
.action-select{
  cursor:pointer;
}

/* ---- dashboard mode gating ---- */
.mode-breadcrumb{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 0;
  flex-wrap:wrap;
  font-size:0.875rem;
  color:#6b7280;
  min-height:28px;
}
/* UI polish 2026-05-12 — separator dropped 0.1rem + muted further
 * so the crumb segments dominate, not the punctuation. Same glyph
 * (›) so the markup doesn't have to change. */
.breadcrumb-sep{
  color:var(--text-muted);
  font-size:0.78rem;
  opacity:0.7;
}
.breadcrumb-link{
  color:var(--primary);
  text-decoration:none;
  cursor:pointer;
  transition:color 0.15s;
}
.breadcrumb-link:hover{
  text-decoration:underline;
}
.breadcrumb-current{
  font-weight:600;
  color:var(--text);
}
.breadcrumb-context{
  color:var(--text-muted);
}

/* ---- platform dashboard ---- */
.platform-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
}
.dashboard-summary-card{
  min-width:0;
  overflow:hidden;
}
.dashboard-summary-card .table-wrap{
  width:100%;
  max-width:100%;
}
.dashboard-summary-card .table{
  min-width:760px;
}
.platform-companies-table tr{
  cursor:pointer;
}
.platform-companies-table tr:hover td{
  background:#f9fafb;
}
.kpi-value-danger{
  color:#dc2626;
}
.kpi-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---- KPI strip (Operational / Financial groupings) ---- */
.kpi-strip {
  margin-bottom: 18px;
}
.kpi-strip__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.kpi-card--placeholder {
  opacity: 0.55;
  pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 8px,
    rgba(148, 163, 184, 0.06) 8px,
    rgba(148, 163, 184, 0.06) 16px
  );
}
.kpi-card--placeholder .kpi-value {
  color: var(--text-muted);
}
.kpi-card--placeholder .kpi-sub {
  font-style: italic;
}

/* ---- Platform hotspots table ---- */
.platform-hotspots-wrap {
  margin-top: 20px;
}
.platform-hotspots-wrap__title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

/* Header row for the Risk Hotspots section — title on the left,
   "View full audit log" button on the right. The title margin is
   suppressed inside the header so the row aligns cleanly. */
.platform-hotspots-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.platform-hotspots-header .platform-hotspots-wrap__title {
  margin: 0;
}
.platform-hotspots-table tbody tr {
  cursor: pointer;
}
.platform-hotspots-table tbody tr:hover {
  background: var(--surface-2);
}
.platform-hotspots-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.platform-hotspots-table th,
.platform-hotspots-table td {
  padding: 8px 12px;
  text-align: left;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.platform-hotspots-table th {
  background: #f9fafb;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.platform-hotspots-table tbody tr:last-child td {
  border-bottom: none;
}
.platform-hotspots-table tbody tr {
  cursor: pointer;
}
.platform-hotspots-table tbody tr:hover td {
  background: #f9fafb;
}
.platform-hotspots-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.platform-hotspots-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 6px;
}

/* ---- Company meta summary (readiness/care-home/high-risk above sparkline) ---- */
.company-meta-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 4px 0 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.company-meta-summary strong {
  color: var(--text);
  font-weight: 600;
}

/* ---- Platform activity card ---- */
.platform-activity-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
}
.platform-activity-card__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
.platform-activity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.platform-activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.platform-activity-meta {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
}
.platform-activity-name {
  font-weight: 600;
}
.platform-activity-time {
  font-size: 0.78rem;
  white-space: nowrap;
}

/* ---- Care Home panel split (Dashboard / Evidence / Reports / Settings) ----
   Only one [data-care-home-panel] section is visible at a time when the app
   is in care_home mode. Elements without the attribute (scope banners,
   company-only panels, etc.) keep their normal visibility logic. */
body[data-dashboard-mode="care_home"] #mainWorkspace [data-care-home-panel]:not(.is-active){
  display:none !important;
}

.carehome-super-admin-banner{
  padding:10px 14px;
  border-left:3px solid var(--primary, #2563eb);
  background:#eef5ff;
  color:var(--text);
  font-size:0.85rem;
  border-radius:6px;
  margin-bottom:12px;
}
.carehome-settings-form{
  /* Vertical stack of grouped settings-cards. Each card contains
     its own internal ``.settings-form-grid`` so fields still flow
     into responsive columns inside the card. The form itself is no
     longer a grid — that pushed every field into the same surface
     and made the page read as one big block. */
  display:flex;
  flex-direction:column;
}
/* Settings "Save changes" / action rows sit a consistent 20px below their
   field grid. Covers the care-home settings form AND the Readiness pane's
   standalone cards (Readiness sources / Fallback staff / Bulk owner
   assignment) — the latter live outside the form, so without this their
   single-field cards rendered the button flush against the dropdown while
   the multi-field cards only *looked* spaced via uneven column heights. */
.carehome-settings-form .account-settings-actions,
.settings-pane[data-settings-section="readiness"] .account-settings-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}
.carehome-settings-readonly-note{
  font-size:0.78rem;
  color:var(--text-muted);
  margin-top:4px;
}
.carehome-settings-readiness-intro{
  margin-bottom:8px;
}

/* Edit User — derived access-level hint shown under job-title
   selects. Part of the Phase 4 single-source-of-truth change:
   ``job_title`` is the only input; ``access_level`` is display-
   only (derived server-side on save). */
.edit-user-access-level-hint{
  font-size:12px;
  margin-top:4px;
}
.edit-user-access-level-hint [data-access-level-value]{
  font-weight:600;
}

/* ---- System audit log admin panel (M5) ---- */
.admin-audit-log-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
}
.admin-audit-log-filter-row .label{
  /* Reset the global ``.label`` margin (12px 0 6px). Flex
     ``align-items:flex-end`` aligns margin boxes, so that 6px
     bottom margin would push the action-cell buttons 6px below
     the input line — visible as a misaligned "Apply/Clear" row.
     The outer ``.admin-audit-log-filter-row`` flex-gap already
     handles inter-cell spacing. */
  margin:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:140px;
}
.admin-audit-log-filter-actions{
  /* Mirror the ``.label`` column layout so the buttons baseline with
     the inputs on their left — an invisible placeholder span above
     matches the label text line; the button row sits at the input
     position. Without this, flex-end align puts buttons' bottoms
     level with inputs' bottoms but the visible label gap pushes
     the inputs down and the buttons end up above the baseline. */
  display:flex;
  flex-direction:column;
  gap:4px;
}
.admin-audit-log-filter-actions-spacer{
  /* Same line-box as the ``.label > span`` text above the inputs —
     the global ``.label`` sets font-size 0.9rem + font-weight 600,
     so match those to get identical vertical space. `` `` keeps
     the line height without rendering visible text. */
  display:block;
  font-size:0.9rem;
  font-weight:600;
  visibility:hidden;
}
.admin-audit-log-filter-actions-row{
  display:flex;
  gap:6px;
}
.admin-audit-log-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.88rem;
}
.admin-audit-log-table thead th{
  text-align:left;
  padding:8px 10px;
  border-bottom:1px solid var(--border, #d3d8e3);
  background:var(--surface, #f5f7fb);
  font-weight:600;
}
.admin-audit-log-table tbody td{
  padding:8px 10px;
  border-bottom:1px solid var(--border, #eef1f7);
  vertical-align:top;
}
.admin-audit-log-row.has-snapshot{
  cursor:pointer;
}
.admin-audit-log-row.has-snapshot:hover{
  background:var(--surface-hover, #eef1f7);
}
.admin-audit-log-time{
  white-space:nowrap;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:0.82rem;
}
.admin-audit-log-snapshot-row.hidden{
  display:none;
}
/* Quick diagnostic links (actor / provider / care home) — link-styled
 * buttons that filter the log in place. */
.audit-link{
  appearance:none;
  border:0;
  background:none;
  padding:0;
  margin:0;
  font:inherit;
  text-align:left;
  color:var(--primary, #120A8F);
  cursor:pointer;
  border-radius:4px;
}
.audit-link:hover{
  text-decoration:underline;
}
.audit-link:focus-visible{
  outline:2px solid var(--primary, #120A8F);
  outline-offset:2px;
}
.audit-detail-hint{
  font-size:0.74rem;
  white-space:nowrap;
}
/* Readable before→after detail (replaces the raw JSON dump). */
.audit-detail{
  padding:10px 12px;
  background:var(--surface, #f5f7fb);
  border:1px solid var(--border, #e2e8f0);
  border-radius:6px;
}
.audit-detail-meta{
  font-size:0.78rem;
  margin-bottom:8px;
}
.audit-detail-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.82rem;
  background:var(--surface-1, #fff);
  border-radius:6px;
  overflow:hidden;
}
.audit-detail-table thead th{
  text-align:left;
  padding:6px 10px;
  background:#f8fafc;
  border-bottom:1px solid var(--border, #e2e8f0);
  font-weight:600;
}
.audit-detail-table tbody td{
  padding:6px 10px;
  border-bottom:1px solid var(--border, #eef1f7);
  vertical-align:top;
  word-break:break-word;
}
.audit-detail-key{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:0.78rem;
  white-space:nowrap;
}
.audit-detail-table tbody tr.audit-detail-changed{
  background:rgba(18, 10, 143, 0.05);
}
.audit-detail-note{
  font-size:0.74rem;
  margin-top:8px;
}
.workspace-topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.admin-audit-log-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---- feature/help-manual-v1 — Help / Manual panel ---- */
.help-manual{
  display:flex;
  gap:20px;
  align-items:flex-start;
  margin-top:16px;
}
.help-manual__rail{
  flex:0 0 240px;
  max-width:240px;
  position:sticky;
  top:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.help-manual__search .input{ width:100%; }
.help-manual__topics{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.help-manual__topic{
  appearance:none;
  border:0;
  background:none;
  text-align:left;
  font:inherit;
  color:var(--text-soft, #314257);
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;
}
.help-manual__topic:hover{
  background:var(--surface-2, #f7fafe);
  color:var(--text, #0b1324);
}
.help-manual__topic.is-active{
  background:var(--primary-soft, rgba(18,10,143,0.10));
  color:var(--primary, #120A8F);
  font-weight:600;
}
.help-manual__topic:focus-visible{
  outline:2px solid var(--primary, #120A8F);
  outline-offset:2px;
}
.help-manual__empty{
  padding:8px 10px;
  font-size:0.85rem;
}
.help-manual__article{
  flex:1 1 auto;
  min-width:0;
  border:1px solid var(--line, #d8e2ef);
  border-radius:6px;
  background:var(--surface, #fff);
  padding:20px 22px;
}
.help-manual__title{
  margin:0 0 6px;
  font-size:1.1rem;
  color:var(--text, #0b1324);
}
.help-manual__title:focus{ outline:none; }
.help-manual__title:focus-visible{
  outline:2px solid var(--primary, #120A8F);
  outline-offset:3px;
  border-radius:4px;
}
.help-manual__body{
  font-size:0.9rem;
  color:var(--text-soft, #314257);
  line-height:1.55;
}
.help-manual__body h4{
  margin:18px 0 6px;
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--primary, #120A8F);
  font-weight:700;
}
.help-manual__body p{ margin:0 0 10px; }
.help-manual__body ol,
.help-manual__body ul{ margin:0 0 10px; padding-left:20px; }
.help-manual__body li{ margin:0 0 4px; }
.help-manual__tip{
  background:var(--surface-2, #f7fafe);
  border:1px solid var(--line, #d8e2ef);
  border-radius:6px;
  padding:10px 12px;
  font-size:0.85rem;
}
.help-manual__links{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line, #eef1f7);
}
.help-manual__open-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.help-manual__scope-note{
  margin:8px 0 0;
  font-size:0.82rem;
}
@media (max-width:1100px){
  .help-manual{ flex-direction:column; }
  .help-manual__rail{
    flex:1 1 auto;
    max-width:none;
    width:100%;
    position:static;
  }
}

/* ---- feature/staff-create-by-manager — Add-staff invite result ---- */
.hr-docs-invite-result{
  background:var(--surface-2, #f7fafe);
  border:1px solid var(--line, #d8e2ef);
  border-radius:6px;
  padding:10px 12px;
  font-size:0.85rem;
}
.hr-docs-invite-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.hr-docs-invite-row .input{
  flex:1 1 auto;
  min-width:0;
}

/* ---- Evidence Gaps panel (M3) ---- */
.gaps-source-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.gaps-summary-strip [data-gaps-severity].is-active{
  outline:2px solid var(--accent, #2f4fae);
  outline-offset:-2px;
}
.gaps-module-filter{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.gaps-module-tab{
  border:1px solid var(--border, #d3d8e3);
  background:var(--card-bg, #fff);
  color:var(--text, #222);
  padding:6px 12px;
  border-radius:999px;
  font-size:0.82rem;
  cursor:pointer;
}
.gaps-module-tab:hover{
  background:var(--surface-hover, #eef1f7);
}
.gaps-module-tab.is-active{
  background:var(--accent, #2f4fae);
  color:#fff;
  border-color:var(--accent, #2f4fae);
}
.gaps-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.gaps-row{
  border:1px solid var(--border, #d3d8e3);
  border-radius:10px;
  padding:12px 14px;
  background:var(--card-bg, #fff);
}
.gaps-row-header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.gaps-row-title{
  font-size:0.95rem;
  line-height:1.35;
}
.gaps-row-meta{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:0.82rem;
}
.gaps-row-reg{
  font-size:0.78rem;
  margin-top:4px;
}
.gaps-row-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.gaps-row-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  /* feature/action-register-ui — flat 6px card, not a 999px pill, so
     the Evidence-gaps panel chips match the Register's evidence
     popover chips. */
  border-radius:6px;
  font-size:0.8rem;
  background:var(--surface, #f5f7fb);
  border:1px solid var(--border, #d3d8e3);
}
.gaps-row-chip.danger{
  background:#fdecec;
  border-color:#f0a5a5;
}
.gaps-row-chip.watch{
  background:#fff5e0;
  border-color:#e8c170;
}
.gaps-row-chip.good{
  background:#e7f5ec;
  border-color:#98c9ad;
}
.gaps-row-chip-type{
  font-weight:500;
}
.gaps-row-chip-state{
  font-size:0.72rem;
  opacity:0.85;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.gaps-row-action{
  margin-left:4px;
}
.carehome-export-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}
.carehome-export-grid .btn[disabled]{
  opacity:0.55;
  cursor:not-allowed;
}

/* M16.31 Phase A — Reports library card. Borrows the
 * carehome-export-grid layout (responsive auto-fit) so a future
 * fourth or fifth card lands without rework. Card itself is a
 * <button> for keyboard-nav + a11y, styled as a content card. */
/* M16.32 follow-up — History library cards adopt the flat tile
 * treatment that the Care Home Dashboard's Open Work & People
 * strip uses (the ``.kpi-grid--compact .kpi-card`` variant): 6px
 * radius, plain surface, no brand top-strip, no gradient. Brand
 * tinting only appears on hover/focus so the card reads as a
 * calm content surface at rest and as clearly interactive on
 * pointer-over. */
.reports-library-card{
  position:relative;
  width:100%;
  padding:14px 16px 16px;
  border-radius:6px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-xs);
  /* button-as-card resets */
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  appearance:none;
  /* content layout */
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:96px;
  transition: border-color 120ms ease, box-shadow 160ms ease;
}

/* Hover / focus — subtle brand-edge + slightly deeper shadow. No
 * lift, no gradient, no brand wash; the flat tile family signals
 * interactivity through the border + shadow shift alone. */
.reports-library-card:hover{
  border-color:var(--primary);
  box-shadow:var(--shadow-sm);
}
.reports-library-card:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

/* Content slots. Title is the headline string in the card body
 * (analogue of the dashboard ``.kpi-label`` headline + sub). No
 * eyebrow — surrounding panel header already establishes History
 * context. */
.reports-library-card__title{
  font-weight:600;
  color:var(--text);
  font-size:1rem;
  line-height:1.3;
}
.reports-library-card__desc{
  font-size:0.85rem;
  color:var(--text-muted, var(--text-soft));
  line-height:1.45;
  flex:1;
}
.reports-library-card__open{
  /* Legacy slot kept for backwards-compat with any in-flight
   * markup references; current shelves don't render it. */
  display:none;
}
.carehome-evidence-upload-row{
  display:flex;
  align-items:center;
}

/* =========================================================
   Readiness shared shell (M16.34 Phase B, 2026-05-14,
   feature/readiness-shared-shell)
   =========================================================
   The shared chrome for the Readiness top-level menu —
   heading, sub-nav strip, and action row — all marked with
   TWO gating axes:

1. ``data-readiness-shell`` + ``.is-active`` (this rule) —
      toggled by ``setActiveCareHomePanel`` only when the
      active care-home sub-panel is "actions" or "gaps". This
      governs visibility WITHIN care_home mode.

2. ``data-mode="care_home"`` — toggled by
      ``applyDashboardMode`` via the existing ``[data-mode]``
      iterator (.hidden class on dashboard-mode mismatch).
      This governs visibility ACROSS modes — a user clicking
      Provider Overview from care_home view triggers
      applyDashboardMode("company"), which adds .hidden to
      anything not in "company,care_home". Codex P1
      2026-05-14: without this second axis the shell could
      leak into provider view because ``setActiveCareHomePanel``
      doesn't run during mode transitions.

Both axes must say "visible" for the shell to show. */
[data-readiness-shell]:not(.is-active){
  display:none !important;
}

/* =========================================================
   Readiness sub-nav strip (M16.34 Phase A, updated Phase B
   to live in the shared shell)
   =========================================================
   Single shared strip inside the Readiness shell (Phase B);
   was previously two strips, one per panel (Phase A). Active
   tab tracked via ``data-readiness-active`` attribute.

Permission-aware: the JS render path can hide either tab via
   the ``.hidden`` class when the user lacks access to that
   sub-view (no greyed-out / dead-tab anti-pattern). When only
   one tab remains visible, the strip still renders so the user
   has a visual anchor for "what page am I on". */
.readiness-subnav{
  display:flex;
  gap:4px;
  margin:0 0 12px;
  padding:4px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:8px;
  width:fit-content;
}
.readiness-subnav__tab{
  appearance:none;
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  padding:7px 14px;
  font:inherit;
  font-size:0.875rem;
  font-weight:500;
  color:var(--text-soft);
  cursor:pointer;
  white-space:nowrap;
  transition:background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.readiness-subnav__tab:hover{
  background:var(--surface);
  color:var(--text);
}
.readiness-subnav__tab:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.readiness-subnav__tab[data-readiness-active="true"],
.readiness-subnav__tab[data-readiness-active]{
  background:var(--surface);
  color:var(--text);
  border-color:var(--line);
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
/* Mobile / narrow viewports — keep the strip touch-target sized
   but allow it to shrink and wrap if the labels grow. */
@media (max-width: 700px){
  .readiness-subnav{
    width:100%;
  }
  .readiness-subnav__tab{
    flex:1 1 auto;
    text-align:center;
  }
}

/* ---- company dashboard ---- */
.company-kpi-grid{
  display:grid;
  /* 160px (was 140px) — the financial strip on the provider dashboard
     packs up to 8 cards in one row (5 funding-source £, FNC, +2
     billing placeholders). At 140px the larger MRR/per-source values
     ran out of the card. 160px gives the headline values breathing
     room and still wraps cleanly on narrower viewports. */
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
}
/* Headline KPI numbers should never bleed past the card. The card
   already has overflow:hidden, but without min-width:0 on the grid
   item the value can force the whole track wider than the minmax
   minimum, then get clipped by the parent. */
.company-kpi-grid .kpi-card,
.platform-kpi-grid .kpi-card { min-width: 0; }
.company-kpi-grid .kpi-value,
.platform-kpi-grid .kpi-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.company-care-home-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}
.company-care-home-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px;
  cursor:pointer;
  position:relative;
  transition:box-shadow 0.18s,border-color 0.18s,transform 0.18s;
}
.company-care-home-card.view-only{
  cursor:default;
  opacity:0.7;
  position:relative;
}
.view-only-badge{
  display:inline-block;
  margin-top:0.5rem;
  padding:0.15rem 0.5rem;
  font-size:0.7rem;
  font-weight:600;
  color:var(--muted-color,#888);
  border:1px solid var(--muted-color,#ccc);
  border-radius:4px;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.company-care-home-card__chevron{
  position:absolute;
  top:14px;
  right:16px;
  font-size:1.35rem;
  line-height:1;
  color:#cbd5e1;
  font-weight:600;
  transition:color 0.18s, transform 0.18s;
  pointer-events:none;
}
.company-care-home-card:hover{
  border-color:#6366f1;
  box-shadow:0 6px 18px rgba(79,70,229,0.14);
  transform:translateY(-1px);
}
.company-care-home-card:hover .company-care-home-card__chevron{
  color:#6366f1;
  transform:translateX(2px);
}
.company-care-home-card:focus-visible{
  outline:none;
  border-color:#6366f1;
  box-shadow:0 0 0 3px rgba(99,102,241,0.25), 0 6px 18px rgba(79,70,229,0.14);
}
.company-care-home-card.view-only .company-care-home-card__chevron{display:none;}
.company-care-home-card.view-only:hover{
  box-shadow:none;
  transform:none;
}
.company-care-home-name{
  font-weight:600;
  font-size:0.95rem;
  margin-bottom:4px;
}
.company-care-home-stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:0.8rem;
  color:#6b7280;
  margin-top:6px;
}

/* --- Admin Section --- */
.left-nav__section--admin {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* --- User Management combined panel with tabs --- */
.user-management-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--line);
  margin-top: 16px;
}
/* User Management role filter — plain native <select>, NOT enhanced via selectx */
.user-management-select {
  height: var(--input-h);
  min-height: var(--input-h);
  padding: 0 32px 0 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  min-width: 180px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.user-management-select:hover {
  border-color: #c8d6e8;
}
.user-management-select:focus {
  outline: none;
  border-color: #93b4e8;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}
/* Search input in user management toolbar */
#userManagementPanel #platformUsersSearch,
#userManagementPanel #adminUsersSearch {
  flex: 1 1 240px;
  min-width: 200px;
}
.user-management-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.user-management-tab:hover {
  color: var(--text);
}
.user-management-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.user-management-tab-panels {
  margin-top: 16px;
}
.user-management-tab-panel.hidden {
  display: none;
}
/* Clickable user rows */
.admin-users-table tbody tr,
#platformUsersList table tbody tr {
  cursor: pointer;
}
.admin-users-table tbody tr:hover td,
#platformUsersList table tbody tr:hover td {
  background: var(--surface-2);
}

/* Edit user modal form */
.edit-user-form {
  max-width: none;
}
.edit-user-note {
  font-size: 0.82rem;
}

/* --- Admin Users Panel --- */
.admin-users-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 16px;
}

.admin-users-search {
  width: 100%;
  max-width: 320px;
}

.admin-users-list {
  overflow-x: auto;
}

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-users-table th,
.admin-users-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.admin-users-table th {
  font-weight: 600;
  color: var(--text-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-users-table tr:hover {
  background: var(--bg-1);
}

.admin-user-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.admin-user-status.active {
  background: rgba(31, 143, 86, 0.12);
  color: var(--success);
}

.admin-user-status.inactive {
  background: rgba(207, 47, 54, 0.12);
  color: var(--danger);
}

.scope-primary {
  font-size: 0.82rem;
}
.scope-more-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 999px;
  cursor: help;
}

/* --- Admin Companies Panel --- */
.admin-companies-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 0 16px;
}

.admin-companies-status-tabs {
  display: flex;
  gap: 4px;
}

body:not(.landing-page):not(.auth-page) .admin-companies-status-tabs .btn.is-active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.admin-companies-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-companies-search {
  width: 220px;
  max-width: 320px;
}

.admin-companies-page-size {
  width: auto;
  min-width: 90px;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.875rem;
  line-height: 1;
}

.pagination-select {
  width: auto;
  min-width: 90px;
  min-height: 30px;
  padding: 4px 10px;
  font-size: 0.8125rem;
  line-height: 1;
  border-radius: 6px;
}

.admin-companies-list {
  overflow-x: auto;
}

.admin-companies-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-companies-table th,
.admin-companies-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.admin-companies-table th {
  font-weight: 600;
  color: var(--text-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-companies-table tr:hover {
  background: var(--bg-1);
}

.admin-company-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.admin-company-status.active {
  background: rgba(31, 143, 86, 0.12);
  color: var(--success);
}

.admin-company-status.inactive {
  background: rgba(207, 47, 54, 0.12);
  color: var(--danger);
}

/* --- Admin Company Users Panel --- */
.admin-company-users-controls {
  padding: 0 0 16px;
}

.admin-company-users-search {
  width: 100%;
  max-width: 320px;
}

.admin-company-users-list {
  overflow-x: auto;
}

.admin-company-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-company-users-table th,
.admin-company-users-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.admin-company-users-table th {
  font-weight: 600;
  color: var(--text-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-company-users-table tr:hover {
  background: var(--bg-1);
}

.admin-company-user-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.admin-company-user-status.active {
  background: rgba(31, 143, 86, 0.12);
  color: var(--success);
}

.admin-company-user-status.inactive {
  background: rgba(207, 47, 54, 0.12);
  color: var(--danger);
}

/* --- Account Settings Panel --- */
.account-settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
}

.account-settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-settings-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-soft);
}

.account-settings-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-settings-status {
  font-size: 0.85rem;
}

.account-settings-status.saving {
  color: var(--text-muted);
}

.account-settings-status.success {
  color: var(--success);
}

.account-settings-status.error {
  color: var(--danger);
}

.account-settings-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.account-settings-section:last-child {
  border-bottom: none;
}
.account-settings-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.account-settings-info {
  margin-bottom: 16px;
}
.account-info-row {
  display: flex;
  gap: 12px;
  padding: 4px 0;
  font-size: 0.85rem;
}
.account-info-row .muted {
  min-width: 100px;
}

/* M16.27 Phase B — Active sessions panel (Account Settings). One
 * row per non-revoked refresh-token; flat 6px-radius surfaces, the
 * current device gets a subtle primary tint so it never accidentally
 * gets signed-out by a tired user clicking down a list. */
.account-sessions-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 14px;
}
/* M16.28 Phase 1 — Backups & Restore evidence tiles on Platform
 * Settings. Three columns wide on desktop, single column on narrow
 * screens. Each tile mirrors the existing ``.account-session-row``
 * spacing language so nothing on Platform Settings looks bespoke. */
.platform-backups-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .platform-backups-grid {
    grid-template-columns: 1fr;
  }
}
.platform-backup-tile {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.platform-backup-tile__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}
.platform-backup-tile__value {
  font-weight: 600;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.platform-backup-retention-input {
  width: 90px;
}

/* feature/platform-settings-control-centre — variant grid used inside
 * the half-width Backups & Restore card. Two tiles side-by-side (last
 * backup + last verified restore), then the retention row beneath. */
.platform-backups-grid--half {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .platform-backups-grid--half {
    grid-template-columns: 1fr;
  }
}
.platform-backup-retention-row {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.platform-backup-retention-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* feature/platform-settings-control-centre — shared half-card chrome
 * applied to every card paired inside a `.settings-card-row.platform-pair`.
 * Reuses the existing `.settings-card` base; this rule only equalises
 * internal rhythm so two cards sitting side-by-side don't visually
 * diverge in padding or vertical breathing room. */
.platform-pair > .platform-half-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.platform-pair > .platform-half-card > .settings-card__header {
  margin-bottom: 0;
}

/* Card-level toolbar — neutral surface, used by Email delivery
 * "Reload" + the test-send footer. Replaces the older
 * `.commercial-summary-toolbar` reuse so Platform-Settings styling
 * doesn't piggyback on a Commercial-page class. */
.platform-card-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.platform-card-toolbar--footer {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: auto;
}
.platform-card-body {
  flex: 1 1 auto;
}

/* feature/platform-settings-control-centre — Self-serve billing card. */
.platform-billing-config-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.platform-billing-config-detail {
  flex: 0 1 auto;
}
.platform-billing-config-missing {
  flex-basis: 100%;
  margin: 0;
  padding-left: 18px;
  color: var(--text-soft);
  font-size: 0.85rem;
}
.platform-billing-config-missing li {
  margin: 2px 0;
}
.platform-billing-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.platform-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}
.platform-billing-toggle input[disabled] + .platform-billing-toggle__label {
  color: var(--text-soft);
  cursor: not-allowed;
}
.platform-billing-toggle input[disabled] {
  cursor: not-allowed;
}

/* feature/platform-settings-control-centre — Stripe price IDs grid.
 * Side-by-side on desktop; stacks under 720px so each input stays
 * comfortably wide on narrow viewports. */
.platform-prices-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .platform-prices-grid {
    grid-template-columns: 1fr;
  }
}

/* feature/platform-settings-control-centre — "Not yet on this surface"
 * card. Visually quieter than the other cards (muted title, lighter
 * background) so it reads as documentation, not a control. */
.platform-deferred-card {
  background: var(--surface-2, #fafbfc);
}

/* -----------------------------------------------------------------
 * feature/platform-settings-control-centre — visual polish pass.
 * All rules scoped to #platformSettingsPanel so they do NOT bleed
 * into other Settings surfaces (Care Home Settings, Provider
 * Settings, Account, etc). Flat + 6px radius rule preserved
 * throughout; brand primary (#120A8F → `var(--primary)`) is the
 * single accent colour.
 * --------------------------------------------------------------- */

/* Card title hierarchy — slightly heavier + larger inside this panel
 * so the page's information architecture (title > description > body)
 * is clearer than the global ``.settings-card__title`` default. */
#platformSettingsPanel .settings-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
#platformSettingsPanel .settings-card__desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}
#platformSettingsPanel .settings-card__header {
  margin-bottom: 14px;
}

/* Slightly richer card chrome — adds breathing room without
 * introducing any shadow (flat-design rule). The 1px brand-tinted
 * top accent gives the card a quiet "official surface" feel. */
#platformSettingsPanel .settings-card {
  padding: 18px 20px;
  position: relative;
}
#platformSettingsPanel .settings-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--primary-soft-20) 0%,
    var(--primary-soft-06) 100%
  );
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
/* The compliance posture hero already uses status-coloured left
 * bars on its tiles; suppress the brand top-accent on the
 * "Not yet on this surface" deferred card so it reads as
 * documentation, not an active control. */
#platformSettingsPanel .platform-deferred-card::before {
  background: color-mix(in srgb, var(--text-soft) 18%, transparent);
}

/* Backup tile freshness accent — the freshness pill (Within retention
 * / Drill overdue / Not recorded) is already in the markup. The tile
 * picks up the same status as a 3px top bar so the tile carries its
 * status before the operator reads any text. The render JS sets
 * ``.platform-backup-tile--ok / --warn / --neutral`` based on the
 * computed freshness. */
.platform-backup-tile {
  position: relative;
  /* Existing border-radius 6px from base rule; the accent below sits
   * INSIDE the tile (not above it) so corners stay crisp. */
}
.platform-backup-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--border);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.platform-backup-tile--ok::before {
  background: #16a34a;
}
.platform-backup-tile--warn::before {
  background: #d97706;
}
.platform-backup-tile--neutral::before {
  background: var(--text-soft);
}
.platform-backup-tile__value {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}

/* Retention row — tinted surface so it reads as the actionable
 * control below the read-only status tiles, not as a third tile. */
.platform-backup-retention-row {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--primary) 10%, var(--border));
}
.platform-backup-retention-row .platform-backup-tile__label {
  color: var(--text-soft);
}

/* Email delivery — structured key-value grid replacing the prior
 * row-prose. Labels are uppercase muted (tight tracking); values
 * are full-contrast. A faint divider line between rows produces a
 * scannable rhythm without adding any chrome. */
.platform-status-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}
.platform-status-grid__label,
.platform-status-grid__value {
  padding: 9px 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.platform-status-grid > :nth-child(1),
.platform-status-grid > :nth-child(2) {
  border-top: 0;
}
.platform-status-grid__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  background: var(--surface-2);
  font-weight: 600;
  white-space: nowrap;
}
.platform-status-grid__value {
  color: var(--text);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

/* Access review empty state + last-ack pill — quieter than the
 * surrounding card but still readable. */
#platformAccessReviewCard .platform-access-review-last-ack {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-soft);
  border: 1px solid var(--border);
}
#platformAccessReviewCard .platform-access-review-table-wrap > .muted {
  padding: 24px 16px;
  text-align: center;
  background: var(--surface-2);
  border-radius: 6px;
  border: 1px dashed var(--border);
  margin: 0;
}

/* Billing self-serve card — give the toggle row a tint background so
 * it reads as the actionable surface, and promote the "Live / Off /
 * Config incomplete" pill so it's the loudest thing in the head. */
#platformBillingSelfServeCard .platform-billing-toggle-row {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--primary) 10%, var(--border));
}
#platformBillingSelfServeCard #platformBillingLivePill {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Stripe price IDs — tighter field rhythm + monospace value so an
 * operator pasting ``price_1Ta…`` visually verifies the prefix. */
#platformBillingPricesCard input.input {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem;
}

/* Compliance posture hero — only minor breathing-room tweak; the
 * status-coloured left bars on the tiles are already the strongest
 * visual element on the page and we keep them untouched. */
#platformCompliancePostureCard .compliance-posture-toolbar {
  padding: 8px 0 10px;
}

/* M16.28 Phase 3 — Access reviews pane on Platform Settings. */
.platform-access-review-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 10px;
}
.platform-access-review-toolbar select.input {
  min-width: 240px;
  max-width: 360px;
}
.platform-access-review-last-ack {
  margin-bottom: 8px;
}
.platform-access-review-table-wrap {
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.platform-access-review-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.platform-access-review-table-wrap thead th {
  background: #f8fafc;
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.platform-access-review-table-wrap tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.platform-access-review-table-wrap tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 3%, transparent);
}
.platform-access-review-cell-muted {
  color: var(--text-soft);
}

/* M16.28 Phase 4 — Incidents pane on Platform Settings. Mirrors
 * the access-review layout language so the two cards read as a
 * pair. */
.platform-incidents-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 10px;
}
.platform-incidents-toolbar select.input {
  min-width: 140px;
}
.platform-incidents-table-wrap {
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.platform-incidents-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.platform-incidents-table-wrap thead th {
  background: #f8fafc;
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.platform-incidents-table-wrap tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.platform-incidents-table-wrap tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 3%, transparent);
}
.platform-incident-severity {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.platform-incident-severity[data-severity="critical"] {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.platform-incident-severity[data-severity="high"] {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
}
.platform-incident-severity[data-severity="medium"] {
  background: #fefce8;
  color: #854d0e;
  border: 1px solid #fde68a;
}
.platform-incident-severity[data-severity="low"] {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.platform-incident-status[data-status="open"] {
  font-weight: 600;
  color: var(--text);
}
.platform-incident-status[data-status="resolved"],
.platform-incident-status[data-status="closed"] {
  color: var(--text-soft);
}
.incident-modal-card {
  max-width: 560px;
}
.incident-summary-textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}
.incident-modal-row {
  display: flex;
  gap: 14px;
  margin-top: 4px;
}
.incident-modal-col {
  flex: 1;
  min-width: 0;
}

/* M16.28 Phase 5 — Suppliers pane on Platform Settings. Mirrors
 * incidents-pane layout so the two cards read as a pair. */
.platform-suppliers-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 10px;
}
.platform-suppliers-toolbar select.input {
  min-width: 140px;
}
.platform-suppliers-table-wrap {
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.platform-suppliers-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.platform-suppliers-table-wrap thead th {
  background: #f8fafc;
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.platform-suppliers-table-wrap tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.platform-suppliers-table-wrap tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 3%, transparent);
}
.platform-supplier-category {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}
.platform-supplier-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.platform-supplier-status[data-status="active"] {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.platform-supplier-status[data-status="archived"] {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
}
.platform-supplier-data-shared {
  color: var(--text-soft);
  font-size: 0.85rem;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.supplier-modal-card {
  max-width: 560px;
}
.supplier-modal-textarea {
  resize: vertical;
  min-height: 70px;
  font-family: inherit;
}
.supplier-modal-row {
  display: flex;
  gap: 14px;
  margin-top: 4px;
}
.supplier-modal-col {
  flex: 1;
  min-width: 0;
}

/* M16.28 Phase 6 — Compliance posture hero card.
 * Sits at the top of Platform Settings as the one-glance trust-
 * posture summary. Six tiles in a responsive grid; pills are
 * colour-coded by status. Uses the brand --primary for the
 * card border accent so it visually anchors the pane. */
.compliance-posture-card {
  border-left: 4px solid var(--primary);
}
.compliance-posture-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.compliance-posture-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
}
.compliance-posture-tiles {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
/* M16.28 follow-up — ownership-group sub-strip inside the
 * posture rollup. Each group (Automatic checks / Periodic
 * reviews / Registers) gets its own kicker eyebrow + a tile
 * grid below. The kicker stays muted so it labels rather than
 * competes with the status pills inside each tile. */
.compliance-posture-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compliance-posture-group__kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.compliance-posture-group__tiles {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.compliance-posture-tile {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
}
.compliance-posture-tile--good {
  border-left: 3px solid #16a34a;
}
.compliance-posture-tile--warn {
  border-left: 3px solid #d97706;
}
.compliance-posture-tile--bad {
  border-left: 3px solid #b91c1c;
}
.compliance-posture-tile--unknown {
  border-left: 3px solid var(--text-soft);
}
.compliance-posture-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.compliance-posture-tile__label {
  font-weight: 600;
  color: var(--text);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.compliance-posture-tile__headline {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.compliance-posture-tile__detail {
  font-size: 0.85rem;
  color: var(--text-soft);
  flex: 1;
}
.compliance-posture-tile__footer {
  font-size: 0.75rem;
  color: var(--text-soft);
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 4px;
}
.compliance-posture-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.compliance-posture-pill--good {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}
.compliance-posture-pill--warn {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}
.compliance-posture-pill--bad {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}
.compliance-posture-pill--unknown {
  background: #f3f4f6;
  color: #4b5563;
  border-color: #d1d5db;
}

/* ===================================================================
 * Shared utility classes (originally M16.30 Phase F commercial card).
 * The provider-pooled "Commercial & billing" card itself was removed
 * in the provider-billing runtime decoupling (Stage 2); these two
 * class names survive because other surfaces reuse them:
 *   - .commercial-summary-toolbar  → the Email delivery card toolbar
 *     (feature/email-delivery-enablement) on Platform Settings.
 *   - .commercial-summary-table__actions → the Care hours history
 *     table's right-aligned actions cell.
 * The card-specific rules (totals tiles, table chrome) were dropped.
 * =================================================================== */
.commercial-summary-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
}
.commercial-summary-table__actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* M16.28 follow-up — Page-level trust-ops kickers separate the
 * card clusters (Periodic reviews / Registers / Platform
 * configuration). Subtle eyebrow style only; does NOT introduce
 * a competing visual layer. */
/* feature/platform-settings-control-centre — Section kicker now reads
 * as a real anchor: 3px primary accent bar on the left + larger
 * letter-spacing + more vertical breathing room. Replaces the prior
 * hair-line under-rule (it bled into surrounding chrome). */
.trust-ops-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 6px 0 6px 12px;
  border-left: 3px solid var(--primary);
  border-bottom: 0;
  margin-bottom: 4px;
}
.trust-ops-kicker--secondary {
  /* "Platform configuration" — same anchor pattern but neutral so
   * it visually says "different scope" (not trust-ops). */
  color: var(--text-soft);
  border-left-color: var(--text-soft);
}

/* Per-card ownership label. Promoted from "annotation hair-rule"
 * to a tinted chip so the card head reads at a glance as
 * <title> + <chip>. Kept small + low-contrast so it never out-
 * shouts the card title or the status pills inside the body. */
.trust-ops-ownership {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-soft-08);
  margin-left: 10px;
  padding: 3px 8px;
  vertical-align: middle;
  border-radius: 6px;
  border-left: 0;
}
.trust-ops-ownership--periodic {
  /* Periodic = primary tint (matches the kicker anchor colour). */
  color: var(--primary);
  background: var(--primary-soft-08);
}
.trust-ops-ownership--register {
  /* Register = neutral tint so the page doesn't feel "all blue". */
  color: var(--text-soft);
  background: color-mix(in srgb, var(--text-soft) 12%, transparent);
}

.account-sessions-list {
  display: grid;
  gap: 10px;
}
.account-session-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: start;
}
.account-session-row.is-current {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}
.account-session-row__title {
  font-weight: 600;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.account-session-row__meta {
  font-size: 0.85rem;
  color: var(--text-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
}
.account-session-row__actions {
  align-self: center;
  display: flex;
  gap: 6px;
}
.account-session-row__action-note {
  font-size: 0.85rem;
  color: var(--text-soft);
}
.account-sessions-empty {
  color: var(--text-soft);
  padding: 8px 0;
}
/* M16.27 Phase F — Two-factor authentication card on Account Settings. */
.account-tfa-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
#accountTfaCard[data-tfa-state="disabled"] #accountTfaStatusBadge {
  background: color-mix(in srgb, var(--text-soft) 12%, var(--surface));
  color: var(--text-soft);
}
.tfa-modal-card {
  max-width: 520px;
}
.tfa-qr-wrap {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}
.tfa-qr-wrap svg {
  width: 200px;
  height: 200px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  background: #fff;
}
.tfa-secret-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
}
.tfa-secret {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  user-select: all;
}
.tfa-recovery-codes {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.tfa-recovery-codes li {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.95rem;
  user-select: all;
}
.tfa-recovery-toggle {
  margin: 6px 0;
}
.tfa-recovery-toggle summary {
  cursor: pointer;
  color: var(--text-soft);
  font-size: 0.85rem;
  padding: 4px 0;
}

/* M16.27 Phase B (Codex P2 2026-05-19) — Advisory shown when the
 * caller's access token pre-dates Phase B (no ``rti`` claim). The
 * sessions list still renders so the user sees their device history,
 * but every destructive action is locked. */
.account-sessions-advisory {
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  color: var(--text);
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}
/* M16.27 Phase B — Hint under the login "Remember me" checkbox. */
.auth-remember-hint {
  font-size: 0.8rem;
  color: var(--text-soft, #6b7280);
  margin: 4px 0 0 24px;
}

/* --- Settings layout (Company Settings) --- */
.settings-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.status-badge--active {
  color: var(--success);
  background: rgba(33, 172, 108, 0.12);
  border-color: rgba(33, 172, 108, 0.3);
}

.status-badge--inactive {
  color: var(--danger);
  background: rgba(207, 47, 54, 0.12);
  border-color: rgba(207, 47, 54, 0.3);
}

.status-badge--tier {
  color: var(--primary);
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.2);
}

.status-badge--tier-pro {
  color: #0f766e;
  background: rgba(13, 148, 136, 0.12);
  border-color: rgba(13, 148, 136, 0.25);
}

.status-badge--tier-enterprise {
  color: #b45309;
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.25);
}

/* M16.41 — feature/provider-enterprise-entitlement. Care-home pills
   render this when the parent provider is Enterprise. Deep-purple
   palette distinct from --tier (brand blue) + --tier-pro (teal) +
   --tier-enterprise (amber, used only on the legacy provider-tier
   stub elsewhere). Pairs with the matching .readiness-badge--sm
   .enterprise modifier used in the All Care Homes table + the
   Subscriptions-Expiring report. */
.status-badge--enterprise {
  color: #5b21b6;
  background: rgba(109, 40, 217, 0.12);
  border-color: rgba(109, 40, 217, 0.25);
}
.readiness-badge--sm.enterprise {
  color: #5b21b6;
  background: rgba(109, 40, 217, 0.12);
  border-color: rgba(109, 40, 217, 0.25);
}

/* M15 — Platform Settings Overview pane tiles. Six-tile responsive
   strip rendered above the editable Provider profile card. Pure
   read-only summary; the underlying values come from the cached
   /admin/companies/{id} detail response. */
.cs-overview-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.cs-overview-tile {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff;
}
.cs-overview-tile__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
  margin-bottom: 4px;
}
.cs-overview-tile__value {
  font-size: 15px;
  font-weight: 600;
}
.cs-overview-tile__sub {
  font-size: 12px;
  margin-top: 2px;
}
.cs-status-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.cs-status-pill--ok {
  color: #166534;
  background: rgba(22, 163, 74, 0.10);
  border-color: rgba(22, 163, 74, 0.25);
}
.cs-status-pill--warn {
  color: #92400e;
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.25);
}
.cs-status-pill--danger {
  color: #991b1b;
  background: rgba(220, 38, 38, 0.10);
  border-color: rgba(220, 38, 38, 0.25);
}
.cs-status-pill--info {
  color: #1e3a8a;
  background: rgba(18, 10, 143, 0.08);
  border-color: rgba(18, 10, 143, 0.20);
}
.cs-status-pill--muted {
  color: var(--muted, #6b7280);
  background: rgba(107, 114, 128, 0.08);
  border-color: rgba(107, 114, 128, 0.20);
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
  max-width: 960px;
}

.settings-main,
.settings-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* Stacked settings cards inside a pane — give each card real
   breathing room so the page reads as discrete sections rather than
   a single block of dense form rows. ``.mt12`` (12px) was too tight
   once the section count grew; bump to 20px adjacency on every card
   that follows another inside a settings pane. */
.settings-pane .settings-card + .settings-card,
.cha-settings-tab-pane .settings-card + .settings-card {
  margin-top: 20px;
}

/* feature/readiness-reference-management — two settings cards side by
   side to narrow the boxes. Stacks to a single column on narrow screens.
   Neutralises the stacking margin between the paired cards (the grid gap
   handles spacing) and keeps spacing above/below the row. */
.settings-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
  margin-top: 20px;
}
.settings-card-row > .settings-card + .settings-card {
  margin-top: 0;
}
.settings-pane .settings-card-row + .settings-card,
.settings-pane .settings-card-row + .settings-card-row {
  margin-top: 20px;
}
@media (max-width: 900px) {
  .settings-card-row {
    grid-template-columns: 1fr;
  }
}

/* Custom categories / evidence types management cards. */
.custom-ref-add {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.custom-ref-add > .input {
  flex: 1 1 140px;
  min-width: 0;
}
.custom-ref-add .custom-ref-add__scope {
  flex: 0 0 auto;
  max-width: 170px;
}
.custom-ref-add .btn {
  flex: 0 0 auto;
}
.custom-ref-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.custom-ref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}
.custom-ref-row__main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.custom-ref-row__name {
  font-size: 0.86rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-ref-empty {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.custom-ref-row__actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
/* Inline edit mode — the row becomes a name input (+ scope select for
   admins) and Save / Cancel, laid out in one wrapping flex line. */
.custom-ref-row--editing {
  display: block;
}
.custom-ref-edit {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.custom-ref-edit > .input[data-edit-name] {
  flex: 1 1 140px;
  min-width: 0;
}
.custom-ref-edit .custom-ref-add__scope {
  flex: 0 0 auto;
  max-width: 170px;
}

.settings-card__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.settings-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  /* Allow ``.settings-card__title`` on heading elements (h3 / h4) so
     screen readers can use heading-navigation between cards. The
     reset nukes the user-agent default margin that would otherwise
     fight the .settings-card__header gap rule. */
  margin: 0;
  line-height: 1.3;
}

.settings-card__desc {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Account → Notifications email-preference toggle. A brand-accented native
   checkbox (not a pill switch) to honour the flat-design rule — 6px radius,
   no 50%/round controls except spinners. */
.account-notif-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  cursor: pointer;
}
.account-notif-toggle__input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--primary, #120A8F);
  cursor: pointer;
}
.account-notif-toggle__label {
  display: block;
  font-weight: 600;
  color: var(--text, #0f172a);
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-width: none;
}

/* Address fields stack vertically inside a full-row block, instead
 * of competing with name / CQC ID / phone / email for column space.
 * Spanning every grid column (``1 / -1``) takes the block out of
 * the auto-fit flow and gives the address its own readable column —
 * matches how postal addresses naturally read top-to-bottom. */
.settings-form-grid .address-block {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
}

/* 2026-05-29 feature/carehome-audit-readiness-source-selector —
   force a 2-row × 3-column layout for the Readiness sources card
   so the six selectors sit at a comfortable width instead of being
   squeezed into a single 6-column row at wide viewports. Scoped
   via the existing ``data-settings-section="readiness"`` attribute
   so other ``.settings-form-grid`` instances (Care home profile,
   Provider Settings, etc.) keep their existing ``auto-fit``
   behaviour untouched. Mobile/tablet breakpoints collapse to 2
   cols then 1 col. */
[data-settings-section="readiness"] .settings-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  [data-settings-section="readiness"] .settings-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  [data-settings-section="readiness"] .settings-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Reserve 2-line vertical space for every selector label so the
   dropdowns below sit at the SAME horizontal level whether the
   label fits on 1 line (e.g. "Training readiness source") or 2
   lines (e.g. "Care Home Audit Tool readiness source (active)").
   ``align-items: flex-end`` anchors the label's baseline to the
   bottom of the reserved space — the dropdown directly under it
   then sits at a predictable vertical position regardless of how
   many lines its label wrapped to. Browser-QA finding (2026-05-29):
   the mixed 1-line / 2-line labels in the new 6-selector card
   left the dropdowns visibly misaligned. */
[data-settings-section="readiness"] .account-settings-label {
  min-height: 2.6em;
  display: flex;
  align-items: flex-end;
}

.settings-card .account-settings-form {
  max-width: none;
}

.settings-owners {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-owner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-owner__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.08);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.settings-owner__name {
  font-size: 0.85rem;
  font-weight: 600;
  /* Long names / emails would otherwise force the flex parent to
     overflow its rail-card width. min-width:0 lets the text wrap;
     overflow-wrap:anywhere allows breaks inside long single tokens
     like "kyu@longprovider.example" so the email stays inside the
     Owners card. */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.settings-owner__email {
  font-size: 0.78rem;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* The owner's name + email column has to be allowed to shrink below
   its content width inside the rail's flex layout, otherwise the
   email's natural width forces overflow even with break-word set on
   the leaf elements. */
.settings-owner__meta {
  min-width: 0;
  flex: 1 1 auto;
}

/* Subscription pane (M15) — Tier / Expires / Lifecycle must read
   as one row of identical-looking controls. Tier and Lifecycle are
   .selectx-wrapped <select> elements (rounded 14px, gradient bg,
   1px var(--line) border, var(--input-h) tall); the date picker
   trigger is overridden here to match exactly so the row looks
   uniform regardless of which control type sits in each column.

This is a deliberate scoped exception to the cross-app date-picker
   look — the trigger keeps its canonical chrome on every other surface
   (Meetings toolbar, Resident Move / Adjustment / End-stay, etc.).

Wrapper-level fixes: ``display: block`` so width:100% takes effect
   (default is inline-block); ``margin-top: 0`` removes the global 6px
   drop that misaligned the trigger with the row baseline. */
#companySettingsPanel .settings-pane[data-platform-settings-section="subscription"] .datetime-picker {
  display: block;
  width: 100%;
  margin-top: 0;
}
#companySettingsPanel .settings-pane[data-platform-settings-section="subscription"] .datetime-picker__trigger {
  display: flex;
  width: 100%;
  min-width: 0;
  height: var(--input-h);
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
  font-size: 0.95rem;
  font-weight: 500;
}

/* M15 — Provider admin notes list. Each row is a read-only plain
   block with body + meta + edit pencil floated right. The pencil
   stays visually unobtrusive until hover so the page reads as a
   list of plain notes, not a list of editable forms. */
.cs-notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-note-row {
  position: relative;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 12px 44px 10px 14px;
  background: #fff;
}
.cs-note-row__body {
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text, #0f172a);
  white-space: pre-wrap;
  word-break: break-word;
}
.cs-note-row__meta {
  font-size: 11px;
  color: var(--muted, #6b7280);
  margin-top: 6px;
}
.cs-note-row__edit {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--muted, #6b7280);
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.cs-note-row:hover .cs-note-row__edit,
.cs-note-row__edit:focus {
  color: var(--text, #0f172a);
  background: #f8fafc;
  border-color: var(--line, #e5e7eb);
}
.cs-note-row__editor {
  width: 100%;
  resize: vertical;
}
.cs-notes-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.settings-action-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
}

.settings-savebar {
  position: sticky;
  bottom: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 16px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.settings-card .settings-savebar {
  position: static;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 0 0;
  box-shadow: none;
  background: transparent;
}

.settings-card .settings-savebar--inline {
  border-top: 0;
  padding-top: 12px;
}

@media (max-width: 1100px) {
  .settings-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

.settings-grid {
    grid-template-columns: 1fr;
  }

.settings-savebar {
    position: static;
  }
}

/* =========================================================
   LANDING PAGE REDESIGN v2 — scoped to body.landing-page
   Appended at end of file. All selectors use body.landing-page
   prefix for specificity override. No existing rules modified.
   ========================================================= */

/* --- Sticky nav --- */
body.landing-page .public-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: block;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(216,226,239,0.5);
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
  padding: 0;
}

body.landing-page .public-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 28px;
}

/* --- Larger logo --- */
body.landing-page .public-logo {
  height: 50px;
}

/* --- Typography (Figtree headings) --- */
body.landing-page h1,
body.landing-page h2,
body.landing-page h3 {
  font-family: "Figtree", "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* --- Flat buttons on landing --- */
body.landing-page .btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: none;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
body.landing-page .btn-primary:hover {
  background: var(--primary-2);
  border-color: var(--primary-2);
  box-shadow: 0 4px 12px var(--primary-soft-strong);
  transform: translateY(-1px);
}
body.landing-page .btn {
  border-radius: 10px;
}

/* --- Full-width sections --- */
body.landing-page .section {
  width: 100%;
}

body.landing-page .section-inner {
  margin: 0 auto;
  padding: 96px 32px;
}

@media (max-width: 1280px) {
  body.landing-page .section-inner { padding-top: 88px; padding-bottom: 88px; }
}
@media (max-width: 1100px) {
  body.landing-page .section-inner { padding-top: 72px; padding-bottom: 72px; }
}
@media (max-width: 900px) {
  body.landing-page .section-inner { padding-top: 56px; padding-bottom: 56px; }
}
@media (max-width: 640px) {
  body.landing-page .section-inner { padding-top: 40px; padding-bottom: 40px; padding-left: 18px; padding-right: 18px; }
}

/* --- Anchor offset for sticky nav --- */
body.landing-page .section[id] {
  scroll-margin-top: 130px;
}

/* --- Hero section --- */
body.landing-page .section--hero {
  background:
    radial-gradient(circle at top left, var(--primary-soft-06), transparent 28%),
    radial-gradient(circle at bottom right, rgba(31,143,86,0.04), transparent 26%),
    linear-gradient(180deg, #f4f7fc, #fafbfe 48%, #ffffff 100%);
}

body.landing-page .section-inner--hero {
  padding-top: 48px;
  padding-bottom: 56px;
}

body.landing-page .public-hero-copy {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(216,226,239,0.95);
  border-radius: 28px;
  box-shadow: var(--shadow-md);
  padding: 48px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

body.landing-page .public-title {
  margin: 14px 0 0;
  font-size: 3.2rem;
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

body.landing-page .public-subtitle {
  margin: 18px auto 0;
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 62ch;
}

body.landing-page .public-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  justify-content: center;
}

/* --- Trust bar --- */
body.landing-page .public-trust-bar {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 24px 0 0;
  margin-top: 8px;
}

body.landing-page .public-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.01em;
}

body.landing-page .public-trust-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

/* --- Section backgrounds --- */
body.landing-page .section--white {
  background: #ffffff;
}

body.landing-page .section--tint {
  background: #f4f7fc;
}

body.landing-page .section--dark {
  background: #0f172a;
  color: #ffffff;
}

body.landing-page .section--cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #ffffff;
}

body.landing-page .section--footer {
  background: #0f172a;
  color: #94a3b8;
}

/* --- Dark section overrides --- */
body.landing-page .section--dark .public-kicker {
  color: #60a5fa;
}

body.landing-page .section--dark .public-section-head h2 {
  color: #ffffff;
}

body.landing-page .section--dark .trust-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  box-shadow: none;
}

body.landing-page .section--dark .trust-card h3 {
  color: #ffffff;
}

body.landing-page .section--dark .trust-card p {
  color: rgba(255,255,255,0.7);
}

/* --- CTA section overrides --- */
body.landing-page .section--cta .public-kicker {
  color: rgba(255,255,255,0.7);
}

body.landing-page .section--cta h2 {
  color: #ffffff;
}

body.landing-page .section--cta .public-subtitle {
  color: rgba(255,255,255,0.8);
}

body.landing-page .section-inner--cta {
  text-align: center;
  max-width: 720px;
}

body.landing-page .section--cta .btn {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: #ffffff;
}

body.landing-page .section--cta .btn:hover {
  background: rgba(255,255,255,0.25);
}

body.landing-page .section--cta .btn-primary {
  background: #ffffff;
  color: var(--primary);
  border-color: #ffffff;
}

body.landing-page .section--cta .btn-primary:hover {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 4px 16px rgba(255,255,255,0.3);
}

/* --- Footer overrides --- */
body.landing-page .section--footer .public-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

body.landing-page .section--footer .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 24px;
}

body.landing-page .section--footer .public-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.landing-page .section--footer .public-logo-small {
  width: 40px;
  height: 40px;
}

body.landing-page .section--footer .public-footer-desc {
  color: #94a3b8;
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 340px;
}

body.landing-page .section--footer .public-footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

body.landing-page .section--footer .public-footer-links a {
  color: #94a3b8;
  text-decoration: none;
}

body.landing-page .section--footer .public-footer-links a:hover {
  color: #ffffff;
}

body.landing-page .section--footer .public-footer-copy {
  width: 100%;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: #64748b;
  font-size: 0.82rem;
}

/* --- Section head --- */
body.landing-page .public-section-head {
  max-width: 720px;
  margin-bottom: 28px;
}

body.landing-page .public-section-head h2 {
  margin: 10px 0 0;
  font-size: 2.2rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* --- Suppress old .public-section padding in new layout --- */
body.landing-page .public-section {
  padding: 0;
}

/* --- Card styles --- */
body.landing-page .feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.landing-page .feature-card,
body.landing-page .pricing-card,
body.landing-page .trust-card {
  border-radius: 20px;
  box-shadow: var(--shadow-xs);
}

/* --- Steps --- */
body.landing-page .steps-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.landing-page .step-card {
  border-radius: 20px;
  box-shadow: var(--shadow-xs);
}

body.landing-page .step-number {
  font-family: "Figtree", "Inter", sans-serif;
}

/* --- FAQ --- */
body.landing-page .faq-grid {
  max-width: 720px;
}

body.landing-page .faq-question {
  font-family: "Figtree", "Inter", sans-serif;
}

/* --- Scroll reveal animations --- */
body.landing-page [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

body.landing-page [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered card delays */
body.landing-page [data-reveal-delay="1"] { transition-delay: 0.08s; }
body.landing-page [data-reveal-delay="2"] { transition-delay: 0.16s; }
body.landing-page [data-reveal-delay="3"] { transition-delay: 0.24s; }
body.landing-page [data-reveal-delay="4"] { transition-delay: 0.32s; }
body.landing-page [data-reveal-delay="5"] { transition-delay: 0.40s; }
body.landing-page [data-reveal-delay="6"] { transition-delay: 0.48s; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  body.landing-page [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.landing-page .btn,
  body.landing-page .btn-primary {
    transition: none;
    transform: none;
  }
}

/* --- Mobile menu fix --- */
body.landing-page .public-mobile-menu {
  position: relative;
  z-index: 90;
  border-radius: 0;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
body.landing-page .public-mobile-menu.open {
  border-radius: 0;
  margin: 0;
  padding: 18px 28px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.10);
}

body.landing-page .public-mobile-menu .public-mobile-menu-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
  padding-left: 28px;
  padding-right: 28px;
  padding-top: 0;
  padding-bottom: 0;
}

body.landing-page .public-mobile-menu .public-mobile-link,
body.landing-page .public-mobile-menu .public-mobile-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  margin: 8px auto 0;
  max-width: 280px;
  width: 100%;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  body.landing-page .feature-grid,
  body.landing-page .pricing-grid,
  body.landing-page .trust-grid {
    grid-template-columns: 1fr 1fr;
  }
  body.landing-page .steps-grid {
    grid-template-columns: 1fr;
  }
  body.landing-page .public-menu {
    display: none !important;
  }
  body.landing-page .public-nav-toggle {
    display: inline-flex !important;
    margin-left: auto;
    order: 99;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
}

@media (max-width: 900px) {
  body.landing-page .feature-grid,
  body.landing-page .pricing-grid,
  body.landing-page .trust-grid,
  body.landing-page .steps-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 840px) {
  body.landing-page .section-inner {
    padding-left: 18px;
    padding-right: 18px;
  }
  body.landing-page .public-title {
    font-size: 2.2rem;
    max-width: none;
  }
  body.landing-page .public-hero-copy {
    padding: 28px 22px;
  }
  body.landing-page .public-trust-bar {
    gap: 18px;
  }
  body.landing-page .section--footer .public-footer {
    flex-direction: column;
  }
  body.landing-page .public-nav-inner {
    padding-left: 18px;
    padding-right: 18px;
  }
  body.landing-page .public-mobile-menu .public-mobile-menu-inner {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* =========================================================
   LANDING PAGE v3 VISUAL REVISION — appended overrides
   All selectors scoped to body.landing-page for specificity.
   ========================================================= */

/* --- v3: Reduced roundness globally --- */
body.landing-page .btn,
body.landing-page .btn-primary {
  border-radius: 8px;
}

body.landing-page .feature-card,
body.landing-page .pricing-card,
body.landing-page .trust-card,
body.landing-page .step-card {
  border-radius: 12px;
}

body.landing-page .public-hero-copy {
  border-radius: 16px;
}

body.landing-page .step-number {
  border-radius: 8px;
}

body.landing-page .faq-item {
  border-radius: 10px;
}

body.landing-page .pricing-badge {
  border-radius: var(--radius-sm-mkt);
}

/* --- Premium pricing presentation --- */
body.landing-page .pricing-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line);
  transition: border-color 0.16s ease-out, box-shadow 0.16s ease-out, transform 0.16s ease-out;
}

body.landing-page .pricing-card.featured {
  border: 2px solid var(--primary);
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -12px var(--primary-soft-20);
  background: linear-gradient(180deg, var(--primary-soft-04) 0%, #ffffff 60%);
}

body.landing-page .pricing-unit {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}

body.landing-page .pricing-custom-note {
  margin: 4px 0 0 !important;
  min-height: 0 !important;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-muted);
}

body.landing-page .pricing-soon {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-muted);
}

body.landing-page .pricing-list {
  list-style: none;
  padding-left: 0;
  margin: 18px 0 24px;
}

body.landing-page .pricing-list li {
  position: relative;
  padding-left: 26px;
  margin-top: 8px;
  color: var(--text-soft);
  line-height: 1.55;
  font-size: 0.92rem;
}

body.landing-page .pricing-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}

body.landing-page .pricing-list li strong {
  color: var(--text);
  font-weight: 600;
}

body.landing-page .pricing-card .btn,
body.landing-page .pricing-card .btn-primary {
  margin-top: auto;
  width: 100%;
}

body.landing-page .pricing-included,
body.landing-page .pricing-vat {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}

body.landing-page .pricing-included {
  margin-top: 32px;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-soft);
}

body.landing-page .pricing-vat {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

@media (max-width: 1100px) {
  body.landing-page .pricing-card.featured {
    transform: none;
  }
}

/* --- v3: Darker primary CTA --- */
body.landing-page .btn-primary {
  background: var(--primary-2);
  border-color: var(--primary-2);
}

body.landing-page .btn-primary:hover {
  background: #083d91;
  border-color: #083d91;
  box-shadow: 0 4px 14px rgba(8,61,145,0.22);
}

/* --- v3: Nav width matches body --- */
body.landing-page .public-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 28px;
  justify-content: space-between;
  flex-wrap: nowrap;
}

/* --- Scroll-shrink nav --- */
body.landing-page .public-nav.is-scrolled .public-nav-inner {
  padding-top: 6px;
  padding-bottom: 6px;
  transition: padding 0.25s ease;
}

/* --- v3: Mobile menu inner matches body width --- */
body.landing-page .public-mobile-menu .public-mobile-menu-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- v3: Targeted readable-width constraints --- */
body.landing-page .faq-grid {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

body.landing-page .section-inner--cta {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

body.landing-page .public-section-head {
  max-width: 720px;
}

body.landing-page .pricing-grid {
  max-width: 1200px;
}

body.landing-page .feature-grid {
  max-width: 1200px;
}

body.landing-page .steps-grid {
  max-width: 1200px;
}

body.landing-page .trust-grid {
  max-width: 1200px;
}

/* --- v3: Hero full width, no card wrapper --- */
body.landing-page .section--hero {
  position: relative;
  overflow: hidden;
}

body.landing-page .hero-grid-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

body.landing-page .section-inner--hero {
  position: relative;
  z-index: 1;
  padding-top: 56px;
  padding-bottom: 64px;
}

body.landing-page .hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 56px;
  align-items: center;
  max-width: 1200px;
}

body.landing-page .hero-content {
  text-align: left;
}

body.landing-page .hero-content .public-title {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

body.landing-page .hero-content .public-subtitle {
  margin-left: 0;
  margin-right: 0;
}

body.landing-page .hero-content .public-actions {
  justify-content: flex-start;
}

/* Reassurance microcopy under the primary CTAs (hero + closing
   CTA). Carries the no-credit-card / 14-day-trial / time-to-value
   triple so a buyer doesn't have to scroll to the FAQ to see them.
   Muted but readable; sits flush under the button row. */
body.landing-page .public-reassure {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
  line-height: 1.5;
}
body.landing-page .public-reassure--cta {
  /* Closing-CTA section centres its content; align the
     reassurance line with the buttons above it. */
  text-align: center;
}

/* --- Hero product mockup (inline SVG/CSS dashboard preview) --- */
body.landing-page .hero-mockup {
  width: 100%;
  max-width: 520px;
  justify-self: end;
}

body.landing-page .hero-mockup-frame {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg-mkt);
  box-shadow: 0 30px 60px -20px var(--primary-soft-20),
              0 12px 24px -10px rgba(15,23,42,0.08);
  overflow: hidden;
  transform: rotate(-1deg);
  transform-origin: center;
}

body.landing-page .hero-mockup-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}

body.landing-page .hero-mockup-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
}

body.landing-page .hero-mockup-body {
  display: grid;
  grid-template-columns: 132px 1fr;
  min-height: 280px;
}

body.landing-page .hero-mockup-sidebar {
  background: #fafbfd;
  border-right: 1px solid var(--line);
  padding: 14px 10px;
}

body.landing-page .hero-mockup-brand {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.01em;
  padding: 0 8px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

body.landing-page .hero-mockup-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.landing-page .hero-mockup-nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-soft);
  border-radius: var(--radius-sm-mkt);
  border-left: 2px solid transparent;
}

body.landing-page .hero-mockup-nav-row svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

body.landing-page .hero-mockup-nav-row--active {
  background: var(--primary-soft-12);
  color: var(--primary);
  font-weight: 600;
  border-left-color: var(--primary);
}

body.landing-page .hero-mockup-nav-row--active svg {
  color: var(--primary);
}

body.landing-page .hero-mockup-main {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.landing-page .hero-mockup-scope {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.landing-page .hero-mockup-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

body.landing-page .hero-mockup-stat {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md-mkt);
  padding: 10px 10px 12px;
}

body.landing-page .hero-mockup-stat-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

body.landing-page .hero-mockup-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}

body.landing-page .hero-mockup-stat-value--warn {
  color: var(--warning);
}

body.landing-page .hero-mockup-stat-bar {
  height: 4px;
  background: var(--primary-soft-08);
  border-radius: 2px;
  overflow: hidden;
}

body.landing-page .hero-mockup-stat-fill {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
}

body.landing-page .hero-mockup-stat-fill--success {
  background: var(--success);
}

body.landing-page .hero-mockup-stat-fill--w87 { width: 87%; }
body.landing-page .hero-mockup-stat-fill--w94 { width: 94%; }

body.landing-page .hero-mockup-mini-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 18px;
}

body.landing-page .hero-mockup-mini {
  flex: 1;
  background: var(--warning);
  opacity: 0.55;
  border-radius: 1px 1px 0 0;
}

body.landing-page .hero-mockup-mini--60 { height: 60%; }
body.landing-page .hero-mockup-mini--40 { height: 40%; }
body.landing-page .hero-mockup-mini--80 { height: 80%; }
body.landing-page .hero-mockup-mini--30 { height: 30%; }
body.landing-page .hero-mockup-mini--55 { height: 55%; }

body.landing-page .hero-mockup-activity {
  background: #fafbfd;
  border: 1px solid var(--line);
  border-radius: var(--radius-md-mkt);
  padding: 10px 12px 12px;
}

body.landing-page .hero-mockup-activity-head {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

body.landing-page .hero-mockup-activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

body.landing-page .hero-mockup-activity-row + .hero-mockup-activity-row {
  border-top: 1px solid var(--line);
}

body.landing-page .hero-mockup-status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

body.landing-page .hero-mockup-status--success { background: var(--success); }
body.landing-page .hero-mockup-status--warn { background: var(--warning); }
body.landing-page .hero-mockup-status--primary { background: var(--primary); }

body.landing-page .hero-mockup-row-bar {
  display: block;
  height: 7px;
  background: var(--line);
  border-radius: 2px;
}

body.landing-page .hero-mockup-row-bar--w70 { width: 70%; }
body.landing-page .hero-mockup-row-bar--w55 { width: 55%; }
body.landing-page .hero-mockup-row-bar--w80 { width: 80%; }
body.landing-page .hero-mockup-row-bar--w45 { width: 45%; }

/* --- Closing CTA section (deep navy gradient, brand-aligned) --- */
body.landing-page .section--cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  margin-bottom: 0;
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}

body.landing-page .section--cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

body.landing-page .section--cta > .section-inner {
  position: relative;
  z-index: 1;
  padding-bottom: 72px;
}

body.landing-page .section--cta .btn-primary {
  background: #ffffff;
  color: var(--primary);
  border-color: #ffffff;
}

body.landing-page .section--cta .btn-primary:hover {
  background: rgba(255,255,255,0.92);
  color: var(--primary-2);
  box-shadow: 0 4px 16px rgba(255,255,255,0.2);
}

body.landing-page .section--cta .btn {
  border-color: rgba(255,255,255,0.25);
}

/* --- v3: No seam between CTA and footer (both selectors) --- */
body.landing-page .section--footer {
  margin-top: 0;
  border-top: none;
}

body.landing-page .section--footer .public-footer {
  margin-top: 0;
  border-top: none;
}

body.landing-page .section--footer .public-footer-copy {
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* --- v3: Larger footer logo --- */
body.landing-page .public-footer-logo {
  width: auto;
  height: 55px;
}

/* --- v3: FAQ centered/balanced --- */
body.landing-page .public-section-head--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* --- v3: Tint section ambient pattern --- */
body.landing-page .section--tint {
  position: relative;
}

body.landing-page .section--tint::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--primary-soft-04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

body.landing-page .section--tint > .section-inner {
  position: relative;
  z-index: 1;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  body.landing-page .hero-layout {
    grid-template-columns: 1fr;
  }
  body.landing-page .hero-mockup {
    justify-self: center;
    margin: 24px auto 0;
    max-width: 560px;
  }
  body.landing-page .hero-content {
    text-align: center;
  }
  body.landing-page .hero-content .public-actions {
    justify-content: center;
  }
  body.landing-page .hero-content .public-title {
    margin-left: auto;
    margin-right: auto;
    max-width: 22ch;
  }
  body.landing-page .hero-content .public-subtitle {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  body.landing-page .hero-mockup-frame {
    transform: none;
  }
  body.landing-page .hero-mockup-body {
    grid-template-columns: 100px 1fr;
    min-height: 240px;
  }
  body.landing-page .hero-mockup-stats {
    grid-template-columns: 1fr 1fr;
  }
  body.landing-page .hero-mockup-stat:last-child {
    grid-column: 1 / -1;
  }
  body.landing-page .hero-grid-overlay {
    opacity: 0.5;
  }
}

@media (max-width: 840px) {
  body.landing-page .public-nav-inner {
    padding-left: 18px;
    padding-right: 18px;
  }
  body.landing-page .section-inner {
    padding-left: 18px;
    padding-right: 18px;
  }
  body.landing-page .public-mobile-menu .public-mobile-menu-inner {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* --- Reduced motion for new elements --- */
@media (prefers-reduced-motion: reduce) {
  body.landing-page .hero-mockup-frame {
    transform: none;
  }
  body.landing-page .hero-grid-overlay {
    display: none;
  }
  body.landing-page .section--tint::before {
    display: none;
  }
}

/* =========================================================
   LANDING PAGE v4 REFINEMENT — appended overrides
   All selectors scoped to body.landing-page.
   ========================================================= */

/* --- v4: Desktop nav 3-zone layout (logo | center nav | right auth) --- */
body.landing-page .public-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

body.landing-page .public-menu {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

body.landing-page .public-nav-center {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: flex-end;
  flex: 1;
}

body.landing-page .public-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* --- v4: Hero centered (override v3 left-align) --- */
body.landing-page .hero-content {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

body.landing-page .hero-content .public-title {
  margin-left: auto;
  margin-right: auto;
  max-width: 22ch;
}

body.landing-page .hero-content .public-subtitle {
  margin-left: auto;
  margin-right: auto;
}

body.landing-page .hero-content .public-actions {
  justify-content: center;
}

/* --- v4: Center-align all section heads --- */
body.landing-page .public-section-head--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* --- v4: Center grids within sections --- */
body.landing-page .steps-grid,
body.landing-page .feature-grid,
body.landing-page .trust-grid,
body.landing-page .pricing-grid {
  margin-left: auto;
  margin-right: auto;
}

/* --- v4: Footer centered/balanced --- */
body.landing-page .public-footer--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

body.landing-page .public-footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

body.landing-page .public-footer--centered .public-footer-desc {
  max-width: 420px;
  text-align: center;
}

body.landing-page .public-footer--centered .public-footer-links {
  justify-content: center;
}

body.landing-page .public-footer--centered .public-footer-copy {
  text-align: center;
}

/* --- Compliance & security pill grid --- */
body.landing-page .compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

body.landing-page .compliance-pill {
  background: var(--primary-soft-04);
  border: 1px solid var(--line);
  border-radius: var(--radius-md-mkt);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease-out, background 0.15s ease-out;
}

body.landing-page .compliance-pill:hover {
  border-color: var(--primary-soft-20);
  background: #ffffff;
}

body.landing-page .compliance-pill-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm-mkt);
  background: var(--primary-soft-08);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

body.landing-page .compliance-pill-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}

body.landing-page .compliance-pill-caption {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-soft);
}

body.landing-page .compliance-disclaimer {
  margin: 24px auto 0;
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-muted);
  max-width: 680px;
}

/* --- Responsive overrides for landing nav and grids --- */
@media (max-width: 1100px) {
  body.landing-page .public-nav-center,
  body.landing-page .public-nav-right {
    display: none;
  }
  body.landing-page .public-menu {
    display: none;
  }
  body.landing-page .compliance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
  }
}

@media (max-width: 840px) {
  body.landing-page .public-footer-top {
    gap: 10px;
  }
}

@media (max-width: 640px) {
  body.landing-page .compliance-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

/* =========================================================
   LANDING PAGE v5 TARGETED FIXES — appended overrides
   All selectors scoped to body.landing-page.
   ========================================================= */

/* --- v5: Nav — logo/auth at screen edges, links centered between --- */
body.landing-page .public-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 28px;
}

body.landing-page .public-menu {
  margin-left: auto;
  gap: 20px;
}

body.landing-page .public-nav-center {
  justify-content: flex-end;
  width: auto;
}

body.landing-page .public-nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 0;
  flex-shrink: 0;
}
body.landing-page .public-link {
  font-size: 0.875rem;
}
body.landing-page .public-nav-cta {
  font-size: 0.875rem;
  min-height: 34px;
  padding: 0 14px;
}
body.landing-page .public-nav-center {
  gap: 20px;
}
body.landing-page .public-account {
  gap: 8px;
}

/* --- v5: Hero layout centered on desktop --- */
body.landing-page .hero-layout {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* --- v5: Footer balanced (logo/desc left, links right, centered container) --- */
body.landing-page .public-footer--balanced {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

body.landing-page .public-footer-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

body.landing-page .public-footer--balanced .public-footer-desc {
  max-width: 360px;
  text-align: left;
}

body.landing-page .public-footer--balanced .public-footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding-top: 4px;
}

@media (max-width: 1100px) {
  body.landing-page .public-footer--balanced {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }
  body.landing-page .public-footer--balanced .public-footer-left {
    max-width: 100%;
  }
  body.landing-page .public-footer--balanced .public-footer-desc {
    max-width: 100% !important;
  }
  body.landing-page .public-footer--balanced .public-footer-links {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    padding-left: 16px;
  }
}
body.landing-page .public-footer-bottom {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

body.landing-page .public-footer-bottom .public-footer-copy {
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 20px;
  margin-top: 20px;
}

/* --- v5: Responsive --- */
@media (max-width: 840px) {
  body.landing-page .public-footer--balanced {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  body.landing-page .public-footer--balanced .public-footer-desc {
    text-align: center;
  }
  body.landing-page .public-footer--balanced .public-footer-links {
    justify-content: center;
  }
  body.landing-page .public-nav-inner {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* --- Landing page mobile nav fix (final override) --- */
@media (max-width: 1100px) {
  body.landing-page .public-nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  body.landing-page .public-brand {
    order: 1;
    flex-shrink: 0;
  }
  body.landing-page .public-menu {
    display: none !important;
  }
  body.landing-page .public-nav-toggle {
    display: inline-flex !important;
    order: 2;
    margin-left: auto;
  }
}

/* ---- Legal pages (privacy, terms) ---- */
.legal-page-inner {
  max-width: 800px !important;
  margin: 0 auto;
  padding: 48px 28px 72px;
}
.legal-page-inner h1 {
  font-family: "Figtree", "Inter", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.legal-page-inner h2 {
  margin-top: 32px;
  margin-bottom: 8px;
}
.legal-page-inner h3 {
  margin-top: 20px;
  margin-bottom: 6px;
}
.legal-page-inner p,
.legal-page-inner ul {
  line-height: 1.65;
}
.legal-page-inner table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.legal-page-inner th,
.legal-page-inner td {
  padding: 8px 12px;
  text-align: left;
}
.legal-page-inner thead tr {
  border-bottom: 2px solid var(--line);
}
.legal-page-inner tbody tr {
  border-bottom: 1px solid var(--line);
}
.legal-updated {
  margin-bottom: 32px;
}

/* ---- Cookie consent banner ---- */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #ffffff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(15,23,42,0.08);
}
.cookie-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 28px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1;
  min-width: 280px;
}
.cookie-banner-text strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.cookie-banner-text p {
  font-size: 0.84rem;
  color: var(--text-soft);
  margin: 0 0 6px;
  line-height: 1.5;
}
.cookie-banner-link {
  font-size: 0.8rem;
  color: var(--primary);
  text-decoration: none;
}
.cookie-banner-link:hover {
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: wrap;
}
.cookie-btn {
  font-size: 0.84rem;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  white-space: nowrap;
}
.cookie-btn--outline {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-soft);
}
.cookie-btn--outline:hover {
  background: var(--surface-2);
}
.cookie-customise {
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.cookie-customise-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 28px;
}
.cookie-category {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.cookie-category:last-of-type {
  border-bottom: none;
}
.cookie-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.cookie-category-head strong {
  font-size: 0.88rem;
}
.cookie-category p {
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.5;
}
.cookie-badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
}
.cookie-badge--required {
  background: var(--surface-3);
  color: var(--text-muted);
}
/* Toggle switch */
.cookie-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  cursor: pointer;
}
.cookie-toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cookie-toggle-slider {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  background: #cbd5e1;
  border-radius: 11px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.cookie-toggle-slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.cookie-toggle:checked + .cookie-toggle-slider {
  background: var(--primary);
}
.cookie-toggle:checked + .cookie-toggle-slider::after {
  transform: translateX(18px);
}
.cookie-customise-actions {
  padding-top: 16px;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 600px) {
  .cookie-banner-inner {
    flex-direction: column;
    padding: 16px 18px;
  }
  .cookie-banner-actions {
    width: 100%;
  }
  .cookie-btn {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
}

/* =========================================================
   PHASE 5.1 — KPI filter-responsive states
   ========================================================= */
.kpi-loading {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.kpi-card-actionable.kpi-filtered .kpi-label::after {
  content: " (filtered)";
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.55;
}

/* =========================================================
   PHASE 5.2 — Domain/regulation drilldown consistency
   ========================================================= */
.domain-detail-loading {
  padding: 24px;
  text-align: center;
}

.domain-heatmap-row[data-drilldown-regulation] {
  cursor: pointer;
}

.domain-heatmap-row[data-drilldown-regulation]:hover {
  background: var(--primary-soft-04);
  border-radius: 8px;
}

.domain-detail-retry {
  margin-left: 8px;
}

/* =========================================================
   PHASE 5.3 — Provider-wide action clarity in company summary
   ========================================================= */
.company-reconciliation {
  font-size: 0.82rem;
  margin-top: 8px;
}

.company-shared-section {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.company-shared-section .section-title {
  margin-bottom: 6px;
}

.company-shared-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-soft);
  margin-top: 8px;
}

.company-legacy-note {
  font-size: 0.78rem;
}

/* =========================================================
   PHASE 5.4A/B/C — Scope context line + breadcrumb labels
   ========================================================= */
.scope-context-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  font-size: 0.86rem;
  color: var(--text-soft);
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.scope-context-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-muted);
}

.scope-context-label {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---- Phase 5.4D: Actions scope context ---- */
.actions-scope-context {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 6px 0 2px;
}
.actions-scope-context:empty {
  display: none;
}

/* ---- Phase 5.4E: Mobile breadcrumb ---- */
.breadcrumb-back {
  display: none;
}

@media (max-width: 560px) {
  .top-bar__center .mode-breadcrumb .breadcrumb-link,
  .top-bar__center .mode-breadcrumb .breadcrumb-sep {
    display: none;
  }
  .top-bar__center .mode-breadcrumb .breadcrumb-back {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    color: var(--primary);
    text-decoration: none;
    font-size: 1rem;
    flex-shrink: 0;
  }
  .top-bar__center .mode-breadcrumb {
    max-width: none;
  }
}

/* ---- Phase 5.5C: Actionable readiness gap pills ---- */
.readiness-gap-pill--actionable {
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.readiness-gap-pill--actionable:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

/* ---- Sparkline + delta panel ---- */
.company-trend-section {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}
.sparkline-svg {
  width: 100%;
  height: auto;
  max-height: 140px;
}
.company-delta-section {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}
.company-delta-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.company-delta-list li {
  padding: 6px 0;
  font-size: 0.8125rem;
  color: var(--text-soft);
  border-bottom: 1px solid var(--line);
}
.company-delta-list li:last-child {
  border-bottom: none;
}
.company-delta-list li::before {
  content: "\2022";
  color: var(--mode-accent, var(--primary));
  margin-right: 8px;
}
.company-care-home-readiness {
  margin-bottom: 8px;
}

/* ---- Bug-fix batch: company dashboard care-home management ---- */
.company-dashboard-management {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* ---- Mode accent: per-dashboard-mode colour ---- */
body[data-dashboard-mode="platform"] { --mode-accent: var(--mode-platform); }
body[data-dashboard-mode="company"] { --mode-accent: var(--mode-company); }
body[data-dashboard-mode="care_home"] { --mode-accent: var(--mode-care-home); }

/* =========================================================
   DASHBOARD SHELL REDESIGN — Visual System Refresh
   Scoped to authenticated app shell only.
   Additive overrides — no existing rules deleted.
   ========================================================= */

/* --- Design tokens: radii, shadows, input height --- */
body:not(.landing-page):not(.auth-page) {
  --radius-2xl: 14px;
  --radius-xl: 12px;
  --radius-lg: 10px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --shadow-lg: 0 8px 24px rgba(15,23,42,0.08);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.06);
  --shadow-sm: 0 2px 6px rgba(15,23,42,0.04);
  --shadow-xs: 0 1px 3px rgba(15,23,42,0.03);
  --input-h: 40px;
}

/* --- Body: flat background, tighter base font --- */
body:not(.landing-page):not(.auth-page) {
  background: #f5f7fa;
  font-size: 14px;
}

/* --- Top bar: flat white, no shadow --- */
body:not(.landing-page):not(.auth-page) .top-bar {
  box-shadow: none;
  border-bottom: 1px solid #e2e8f0;
}

/* --- Buttons: flat, smaller radius, no hover lift --- */
body:not(.landing-page):not(.auth-page) .btn {
  border-radius: 6px;
  box-shadow: none;
  min-height: 36px;
  font-weight: 500;
  font-size: 0.875rem;
}
body:not(.landing-page):not(.auth-page) .btn:hover {
  transform: none;
  border-color: #c1cfe0;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
body:not(.landing-page):not(.auth-page) .btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-success) {
  background: #ffffff;
}
body:not(.landing-page):not(.auth-page) .btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-success):hover {
  background: #fafbfc;
}
body:not(.landing-page):not(.auth-page) .btn-primary {
  background: var(--primary);
  box-shadow: none;
}
body:not(.landing-page):not(.auth-page) .btn-primary:hover {
  background: var(--primary-2);
}
body:not(.landing-page):not(.auth-page) .btn-secondary,
body:not(.landing-page):not(.auth-page) .btn-danger {
  box-shadow: none;
}
body:not(.landing-page):not(.auth-page) .btn-sm {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 0.8125rem;
}
body:not(.landing-page):not(.auth-page) .app-pill {
  background: #f0f5ff;
  box-shadow: none;
}

/* --- Inputs and selects: flat, smaller radius --- */
body:not(.landing-page):not(.auth-page) .input {
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
  font-size: 0.875rem;
}
body:not(.landing-page):not(.auth-page) .selectx-btn {
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
  min-height: 40px;
  height: 40px;
  font-size: 0.875rem;
}
body:not(.landing-page):not(.auth-page) .selectx-menu {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.10);
}

/* --- Cards and panels: flat white, minimal shadow --- */
body:not(.landing-page):not(.auth-page) .card,
body:not(.landing-page):not(.auth-page) .panel,
body:not(.landing-page):not(.auth-page) .compact-card {
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15,23,42,0.03);
}
body:not(.landing-page):not(.auth-page) .panel {
  background: #ffffff;
}
body:not(.landing-page):not(.auth-page) .workspace.workspace-card {
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15,23,42,0.03);
}

/* --- KPI cards: compact, less decorative --- */
body:not(.landing-page):not(.auth-page) .kpi-card {
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15,23,42,0.03);
  padding: 16px;
}
body:not(.landing-page):not(.auth-page) .kpi-card::before {
  height: 3px;
  background: var(--mode-accent, var(--primary));
}
body:not(.landing-page):not(.auth-page) .kpi-value {
  font-size: 1.75rem;
  margin-top: 8px;
}
body:not(.landing-page):not(.auth-page) .kpi-label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
body:not(.landing-page):not(.auth-page) .kpi-filter-bar {
  border-radius: 6px;
  padding: 10px 14px;
}
/* Hover + active styles for filter-cards in the in-app body. The
   body-scope selector above sets ``.kpi-card { background: #fff }``
   (specificity 0,3,1), which silently outranks the lower-scope
   ``.kpi-card-actionable:hover`` / ``.is-active`` rules at line
   2424 / 2446. Replicating those rules here under the same body
   scope so they actually win the cascade. */
body:not(.landing-page):not(.auth-page) .kpi-card-actionable:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  background: rgba(18, 10, 143, 0.07);
  /* No outer halo — keep the emphasis inside the card border. The
     drop shadow is the only effect that extends below the box, and
     it's tight enough not to read as a glow. */
  box-shadow: 0 2px 6px rgba(15,23,42,0.10);
}
body:not(.landing-page):not(.auth-page) .kpi-card-actionable.is-active,
body:not(.landing-page):not(.auth-page) .kpi-card-actionable.is-active:hover {
  transform: none;
  border-color: var(--primary);
  background: #c8c5e8;
  /* Inset ring fakes a 2px outline without a real ``border-width:
     2px`` (which would shift content by 1px). No outer halo — the
     active card's heft comes from the fill + outline + bold text,
     not a glow. */
  box-shadow:
    inset 0 0 0 1px var(--primary),
    0 2px 6px rgba(15,23,42,0.10);
}
body:not(.landing-page):not(.auth-page) .kpi-card-actionable.is-active::before {
  height: 5px;
}
body:not(.landing-page):not(.auth-page) .kpi-card-actionable.is-active .kpi-label {
  color: var(--primary);
  font-weight: 700;
}
body:not(.landing-page):not(.auth-page) .kpi-card-actionable.is-active .kpi-value {
  color: var(--primary);
}

/* --- Left-nav elements --- */
body:not(.landing-page):not(.auth-page) .nav-item {
  border-radius: 6px;
  font-size: 0.8125rem;
}
body:not(.landing-page):not(.auth-page) .scope-card {
  border-radius: 6px;
}

/* --- Left-nav groups (collapsible) --- */
.left-nav__group {
  margin-bottom: 2px;
}
.left-nav__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 12px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* M16.17 — Provider sub-group labels (Monitor / Manage). Static
   labels (no collapse), smaller + more muted than the top-level
   ``.left-nav__group-title`` so they read as a sub-divider not a
   second collapsible header. Sit inside the existing
   ``.left-nav__group-items`` wrapper so the parent group's
   collapse behaviour hides them automatically. The
   ``.is-hidden-empty`` modifier is toggled by JS in
   ``updateNavGroupScopes`` when every child item is hidden by
   capability gates. */
.left-nav__subgroup-title {
  padding: 8px 12px 4px;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #475569;
  user-select: none;
}
.left-nav__subgroup-title.is-hidden-empty {
  display: none;
}
.left-nav__group-title:hover {
  color: #94a3b8;
}
.left-nav__group-title:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #475569;
  border-radius: 4px;
}
.left-nav__group-arrow {
  font-size: 0.7rem;
  transition: transform 0.25s ease;
}
.left-nav__group-items {
  overflow: hidden;
  max-height: 1000px;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}
.left-nav__group.is-collapsed .left-nav__group-items {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.left-nav__group.is-collapsed .left-nav__group-arrow {
  transform: rotate(-90deg);
}
.left-nav__group + .left-nav__group {
  border-top: 1px solid #334155;
  padding-top: 4px;
}
body:not(.landing-page):not(.auth-page) .nav-item--scope-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* --- Readiness card --- */
body:not(.landing-page):not(.auth-page) .readiness-card {
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15,23,42,0.03);
}
body:not(.landing-page):not(.auth-page) .readiness-gap-pill {
  border-radius: 6px;
}

/* --- Domain panels --- */
body:not(.landing-page):not(.auth-page) .domain-detail-panel {
  border-radius: 6px;
}
body:not(.landing-page):not(.auth-page) .domain-detail-metric {
  border-radius: 6px;
}
body:not(.landing-page):not(.auth-page) .domain-heatmap-row {
  border-radius: 6px;
}
body:not(.landing-page):not(.auth-page) .domain-card {
  border-radius: 6px;
}

/* --- Modals --- */
body:not(.landing-page):not(.auth-page) .modal {
  border-radius: 6px;
}
body:not(.landing-page):not(.auth-page) .reg-modal-card {
  border-radius: 6px;
}
body:not(.landing-page):not(.auth-page) .confirm-modal-card {
  border-radius: 6px;
}

/* --- Action drawer --- */
body:not(.landing-page):not(.auth-page) .action-drawer {
  box-shadow: -4px 0 16px rgba(15,23,42,0.08);
}

/* --- Misc elements --- */
body:not(.landing-page):not(.auth-page) .care-home-comparison-row {
  border-radius: 6px;
}
body:not(.landing-page):not(.auth-page) .attention-row-btn {
  border-radius: 6px;
}
body:not(.landing-page):not(.auth-page) .category-row-btn {
  border-radius: 6px;
}
body:not(.landing-page):not(.auth-page) .active-filter-chip {
  border-radius: 6px;
}
body:not(.landing-page):not(.auth-page) .toast {
  border-radius: 6px;
}

/* ---- Dashboard shell redesign: top-bar dropdowns ---- */
body:not(.landing-page):not(.auth-page) .top-bar__legacy-control {
  display: none;
}
body:not(.landing-page):not(.auth-page) .top-bar__dropdown-wrap {
  position: relative;
}
body:not(.landing-page):not(.auth-page) .top-bar__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  user-select: none;
  transition: background 0.15s;
}
body:not(.landing-page):not(.auth-page) .top-bar__dropdown-trigger:hover {
  background: var(--surface-2);
}
/* Shell polish 2026-05-12 (Phase B) — the user trigger now leads
 * with a 24px identity chip; tighten left padding so the chip + the
 * label balance the chevron on the right. Company trigger keeps its
 * default padding but gains a leading 8px mode-dot inside (handled
 * by the renderer, no extra rule needed here). Wider gap so the
 * chip + name read as separate tokens, not a single chip-with-label
 * cluster. */
body:not(.landing-page):not(.auth-page) .top-bar__dropdown-trigger--user {
  padding-left: 6px;
  gap: 8px;
}
/* Mode-dot ahead of the company-trigger label — slightly more gap
 * than the default 4px so the dot reads as a leading anchor, not as
 * punctuation glued to the label. */
body:not(.landing-page):not(.auth-page) .top-bar__dropdown-trigger .mode-dot {
  margin-right: 2px;
}
body:not(.landing-page):not(.auth-page) .top-bar__dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-width: 320px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.10);
  z-index: 200;
  padding: 6px 0;
}
.top-bar__dropdown-header {
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
/* Shell polish 2026-05-12 (Phase B) — identity chip primitive.
 * Compact monogram tile carrying the user's initials. 6px-rounded
 * square (not a circle — flat-design rule keeps the shell calm
 * and on-brand). Two sizes: `--sm` 24px for the closed trigger,
 * `--md` 32px for the opened-dropdown identity block. Same
 * ``var(--primary)`` fill / white text in both — single visual
 * vocabulary for "this is you" across closed + opened state.
 * Decorative; never receives a click handler. */
.identity-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  flex-shrink: 0;
  user-select: none;
  font-family: inherit;
}
.identity-chip--sm {
  width: 24px;
  height: 24px;
  font-size: 0.7rem;
}
.identity-chip--md {
  width: 32px;
  height: 32px;
  font-size: 0.82rem;
}

/* Shell polish 2026-05-12 (Phase B) — scope mode-dot.
 * Small coloured square ahead of the company trigger label (and,
 * very subtly, ahead of the breadcrumb's first segment) that
 * signals which scope is active. Reuses the existing
 * ``--mode-platform`` / ``--mode-company`` / ``--mode-care-home``
 * tokens already used by ``.scope-card--*`` on the left rail —
 * the shell and the rail now share one colour anchor for scope.
 * Kept deliberately tiny (8px) so it reads as a marker, not as a
 * pill or status chip. 2px radius keeps it within the flat-design
 * rule (no 50% / circle). */
.mode-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--text-muted);
  flex-shrink: 0;
}
.mode-dot--platform { background: var(--mode-platform); }
.mode-dot--company { background: var(--mode-company); }
.mode-dot--care-home { background: var(--mode-care-home); }
.mode-dot--xs {
  /* Even smaller variant for the breadcrumb leading anchor — per
   * the user's "extremely subtle" guidance, the breadcrumb anchor
   * sits at 6px with reduced opacity so it telegraphs scope
   * without competing with the segment text. */
  width: 6px;
  height: 6px;
  opacity: 0.85;
}
/* User dropdown identity block — 3-line stack (name / email / role
 * · 2FA). Reuses the dropdown-header slot but turns off uppercase /
 * letter-spacing so the lines read as a proper identity card, not
 * a section label. Kept compact: tight line-height + small text
 * ramp so the menu stays under ~150px tall. */
.top-bar__dropdown-identity {
  text-transform: none;
  letter-spacing: 0;
  /* Phase B — two-column row: 32px chip on the left + text stack
   * on the right. The text stack still owns the column layout
   * via ``__text``. When the chip is absent (no initials resolved)
   * the row collapses cleanly without changing line geometry. */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 8px;
}
.top-bar__dropdown-identity__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;  /* allow flex children to ellipsis-truncate */
  flex: 1 1 auto;
}
.top-bar__dropdown-identity__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-bar__dropdown-identity__email {
  font-size: 0.78rem;
  color: var(--text-soft);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-bar__dropdown-identity__meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-bar__dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.8125rem;
  cursor: pointer;
  color: var(--text-soft);
  transition: background 0.12s, color 0.12s;
}
.top-bar__dropdown-item:hover {
  background: var(--surface-2);
  color: var(--text);
}
.top-bar__dropdown-item--active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.top-bar__dropdown-item--danger {
  color: var(--danger);
}
.top-bar__dropdown-item--danger:hover {
  background: var(--danger-soft);
}
.top-bar__dropdown-sep {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 4px 0;
}
.top-bar__dropdown-empty {
  padding: 8px 16px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.top-bar__dropdown-label {
  padding: 8px 16px 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.top-bar__dropdown-item--indent {
  padding-left: 28px;
}

/* M15 — "Default" pill next to a care-home item in the company
   dropdown when that home is the provider's configured default
   landing target. Visual hint only; pure CSS, no behavioural
   coupling. Same .selectx-item visual register as the rest of
   the dropdown. */
.top-bar__dropdown-default-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 999px;
  vertical-align: middle;
}
.company-owner-line {
  font-size: 0.8125rem;
}
/* --- Mobile hamburger + menu (≤1100px) --- */
body:not(.landing-page):not(.auth-page) .top-bar__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}
body:not(.landing-page):not(.auth-page) .top-bar__hamburger:hover {
  background: var(--surface-2);
}

body:not(.landing-page):not(.auth-page) .top-bar__mobile-panel {
  position: fixed;
  top: var(--top-bar-height);
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  z-index: 150;
  max-height: calc(100vh - var(--top-bar-height));
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(15,23,42,0.10);
  padding: 8px 0;
  animation: mobileMenuSlideDown 0.2s ease-out;
}
@keyframes mobileMenuSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.landing-page):not(.auth-page) .top-bar__mobile-panel {
    animation: none;
  }
}

body:not(.landing-page):not(.auth-page) .top-bar__mobile-backdrop {
  position: fixed;
  inset: 0;
  top: var(--top-bar-height);
  background: rgba(0,0,0,0.15);
  z-index: 149;
}
body:not(.landing-page):not(.auth-page) .top-bar__mobile-backdrop.is-leftnav {
  z-index: 99;
}

body:not(.landing-page):not(.auth-page) .top-bar__mobile-section {
  padding: 4px 0;
}
.top-bar__dropdown-item--primary {
  color: var(--primary);
  font-weight: 600;
}
button.top-bar__dropdown-item {
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
button.top-bar__dropdown-item--primary:hover {
  color: var(--primary);
}

@media (max-width: 1100px) {
  .top-bar__dropdown-wrap {
    display: none;
  }
  body:not(.landing-page):not(.auth-page) #createActionBtn {
    display: none !important;
  }
  body:not(.landing-page):not(.auth-page) .top-bar__legacy-control {
    display: none;
  }
  body:not(.landing-page):not(.auth-page) .top-bar__hamburger {
    display: flex;
  }
  body:not(.landing-page):not(.auth-page) .left-nav {
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body:not(.landing-page):not(.auth-page) .left-nav.is-mobile-open {
    transform: translateX(0);
  }
  /* Narrow viewport (≤1100px): the left-nav slides off-screen via
   * ``transform: translateX(-100%)`` (rule above), so every
   * top-level sibling needs ``margin-left: 0`` to fill the space
   * the rail used to occupy. Class-based selector covers every
   * existing + future workspace-card panel; explicit non-workspace
   * siblings (top-bar, onboardingHint, mainWorkspace) stay listed
   * because they don't share the workspace-card class. The
   * ``.left-nav.is-collapsed ~ ...`` chunk that used to follow
   * here is now covered by the same class selector — at narrow
   * widths the sidebar is off-screen regardless of is-collapsed
   * state, so no separate handling is needed. */
  body:not(.landing-page):not(.auth-page) .top-bar,
  body:not(.landing-page):not(.auth-page) #onboardingHint,
  body:not(.landing-page):not(.auth-page) #mainWorkspace,
  body:not(.landing-page):not(.auth-page) .page > .workspace-card {
    margin-left: 0;
  }
  body:not(.landing-page):not(.auth-page) .breadcrumb-sep,
  body:not(.landing-page):not(.auth-page) .breadcrumb-link {
    display: none;
  }
  body:not(.landing-page):not(.auth-page) .breadcrumb-current {
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--surface-2);
  }
}

/* ---- Dashboard shell redesign: left-nav collapse + sections ---- */
body:not(.landing-page):not(.auth-page) .left-nav {
  transition: width 0.2s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  body:not(.landing-page):not(.auth-page) .left-nav {
    transition: none;
  }
}
body:not(.landing-page):not(.auth-page) .left-nav__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: #475569 #1e293b;
  /* Stop scroll chaining when the wheel hits the top/bottom of
     the inner nav scroll — same fix as ``.left-nav`` itself; the
     two scroll containers are nested and either one reaching its
     edge would otherwise propagate to the main body. */
  overscroll-behavior:contain;
}
body:not(.landing-page):not(.auth-page) .left-nav__scroll::-webkit-scrollbar {
  width: 6px;
}
body:not(.landing-page):not(.auth-page) .left-nav__scroll::-webkit-scrollbar-track {
  background: #1e293b;
}
body:not(.landing-page):not(.auth-page) .left-nav__scroll::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 3px;
}
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed {
  width: var(--left-nav-collapsed);
  padding: 12px 6px;
}
/* Hide BOTH scrollbars while the rail is collapsed — outer
 * ``.left-nav`` and inner ``.left-nav__scroll``. Hovering re-expands
 * to full width and the scrollbars come back, so collapsed state is
 * a pure icon strip with no chrome. Without this, the 64px column
 * shows two stacked 6px scrollbars (~25% of the visible width). */
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed,
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed .left-nav__scroll {
  overflow: hidden;
  scrollbar-width: none;
}
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed::-webkit-scrollbar,
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed .left-nav__scroll::-webkit-scrollbar {
  display: none;
  width: 0;
}
/* Hover restores scrolling on the inner container so the user can
 * reach overflow items once the rail expands. The outer ``.left-nav``
 * stays non-scrolling — the inner scroll handles the long list. */
@media (hover: hover) {
  body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed:hover .left-nav__scroll {
    overflow-y: auto;
    scrollbar-width: thin;
  }
  body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed:hover .left-nav__scroll::-webkit-scrollbar {
    display: block;
    width: 6px;
  }
}
/* When the user has clicked the collapse button the left-nav shrinks
 * to ``var(--left-nav-collapsed)`` (64px icon-only strip). Every
 * top-level sibling of the rail needs its margin-left reduced to
 * match. The class selector covers every workspace-card panel +
 * the explicit non-workspace siblings (top-bar, onboardingHint,
 * mainWorkspace) — replacing what used to be a manually-maintained
 * ID list that broke whenever a new panel was added. */
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed ~ .top-bar,
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed ~ #onboardingHint,
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed ~ #mainWorkspace,
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed ~ .workspace-card {
  margin-left: var(--left-nav-collapsed);
}
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed .left-nav__logo {
  display: none;
}
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed .left-nav__favicon {
  display: flex;
}
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed .nav-item__badge,
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed .scope-card__content {
  display: none;
}
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed .nav-item__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed .left-nav__section-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed .nav-item {
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 40px;
  height: 40px;
  margin: 2px auto;
  border-radius: 6px;
}
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed .left-nav__group-title {
  display: none;
}
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed .left-nav__group + .left-nav__group {
  border-top: 1px solid #334155;
  padding-top: 6px;
  margin-top: 6px;
}
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed .scope-card {
  justify-content: center;
  padding: 8px 0;
  margin: 0 auto;
}
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed .left-nav__collapse-btn svg,
body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed ~ .top-bar .left-nav__collapse-btn svg {
  transform: rotate(180deg);
}
@media (min-width: 1101px) {
  body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed:hover {
    width: var(--left-nav-width);
    padding: 0 12px 16px;
  }
  body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed:hover .left-nav__logo {
    display: flex;
  }
  body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed:hover .left-nav__favicon {
    display: none;
  }
  body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed:hover .nav-item__label,
  body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed:hover .left-nav__section-title {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }
  body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed:hover .nav-item__badge,
  body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed:hover .scope-card__content {
    display: flex;
  }
  body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed:hover .nav-item {
    justify-content: flex-start;
    padding: 10px 12px;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 6px;
  }
  body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed:hover .left-nav__group-title {
    display: flex;
  }
  body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed:hover .left-nav__group + .left-nav__group {
    border-top: 1px solid #334155;
    padding-top: 4px;
  }
  body:not(.landing-page):not(.auth-page) .left-nav.is-collapsed:hover .scope-card {
    justify-content: flex-start;
    padding: 12px;
  }
}
body:not(.landing-page):not(.auth-page) .left-nav__section--sections {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #334155;
}
/* .nav-item--section rules removed — the "On this page" sub-nav was
   retired once the care-home view split into discrete sub-panels. */

/* ---- Dashboard shell redesign: batch review navigation ---- */
.action-drawer-batch-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
}
.action-drawer-batch-pos {
  font-size: 0.75rem;
  white-space: nowrap;
}

/* ---- Evidence upload UX fixes (Bugs #22–23) ---- */
/* ``.evidence-upload-card`` is dead — the modal uses the default
   ``.reg-modal-card`` (max-height: 85vh; overflow: auto). The
   .evidence-upload-body + footer keep flex-shrink:0 so the
   Upload button stays pinned to the bottom even when the body
   scrolls. */
body:not(.landing-page):not(.auth-page) .evidence-upload-footer {
  flex-shrink: 0;
}
/* Shared actions in care-home drilldown: visually/interaction disabled, but keep tooltip via title. */
.table-action-btn[data-shared-disabled="1"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: auto;
}
.table-action-btn[data-shared-disabled="1"]:hover,
.table-action-btn[data-shared-disabled="1"]:focus {
  filter: saturate(0.7);
}

/* Confirm modal backdrop — semi-transparent dim so the modal stands out */
#confirmModal::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

/* ---- Admin companies: pagination ---- */
.admin-companies-pagination {
  padding: 12px 0 4px;
}
.admin-companies-pagination-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ---- Admin companies: badges ---- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.badge-success {
  background: rgba(31, 143, 86, 0.12);
  color: var(--success);
}
.badge-muted {
  background: var(--surface-2);
  color: var(--text-muted);
}
.badge-danger {
  background: rgba(207, 47, 54, 0.12);
  color: var(--danger);
}
.badge-warning {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}
.badge-info {
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
}

/* ---- Admin companies: table row states ---- */
.admin-companies-table tr.is-inactive td {
  opacity: 0.6;
}
.admin-companies-table tr[data-company-id] {
  cursor: pointer;
}
.admin-companies-table tr[data-company-id]:hover td,
.admin-all-care-homes-table tr[data-cch-navigate]:not(.is-inactive):hover td,
.admin-all-care-homes-table tr[data-ach-navigate]:not(.is-inactive):hover td,
.admin-company-users-table tr[data-membership-id]:hover td {
  background: var(--surface-2);
}
.admin-companies-table .sortable-header:hover {
  color: var(--text);
}

/* ---- Admin All Care Homes Panel ---- */
.admin-all-care-homes-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 0 16px;
}
.admin-all-care-homes-status-tabs {
  display: flex;
  gap: 4px;
}
body:not(.landing-page):not(.auth-page) .admin-all-care-homes-status-tabs .btn.is-active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.admin-all-care-homes-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-all-care-homes-search {
  width: 220px;
  max-width: 320px;
}
.admin-all-care-homes-page-size {
  width: auto;
  min-width: 100px;
}
.admin-all-care-homes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-all-care-homes-table th,
.admin-all-care-homes-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.admin-all-care-homes-table th {
  font-weight: 600;
  color: var(--text-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.admin-all-care-homes-table tr:hover {
  background: var(--bg-1);
}
.admin-all-care-homes-table tr.is-inactive td {
  opacity: 0.6;
}
.admin-all-care-homes-table .sortable-header:hover {
  color: var(--text);
}
.admin-all-care-homes-pagination {
  padding: 12px 0 4px;
}
.admin-all-care-homes-pagination-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ---- Admin companies: export dropdown ---- */
.admin-companies-export-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 100;
  min-width: 240px;
  margin-top: 4px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.admin-companies-export-dropdown-inner {
  padding: 14px;
}
.export-btn-wrap {
  position: relative;
}
.export-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.export-label {
  font-size: 12px;
  display: block;
}
.export-field {
  margin-bottom: 8px;
}
.export-checkbox {
  display: block;
  font-size: 12px;
}
.export-actions {
  display: flex;
  gap: 8px;
}

/* ---- Scope card inactive badge ---- */
.scope-card {
  position: relative;
}
.scope-card__exit {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.scope-card__exit:hover {
  background: rgba(255, 255, 255, 0.3);
}
.scope-card__inactive-badge {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 6px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--danger);
  background: rgba(207, 47, 54, 0.1);
  border: 1px solid rgba(207, 47, 54, 0.25);
  border-radius: 999px;
}

/* ---- User management create flows: full-page forms ---- */
.create-user-panel .workspace-topbar {
  align-items: flex-start;
  gap: 12px;
}
.create-user-panel .workspace-heading {
  flex: 1;
}
.back-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--primary);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.back-button:hover {
  background: rgba(37, 99, 235, 0.06);
  border-color: var(--primary);
}
.create-user-form {
  /* 720px was the old single-column limit. The Edit User page now
     wraps the form in ``.settings-layout`` (220px sub-nav + 1fr
     content) — 720px leaves the right pane looking half-empty on
     modern viewports. 1080px gives the content column room to
     breathe while staying narrower than the full workspace card.
     Form pages that don't use the sub-nav (create-user wizards) can
     still cap their own cards internally. */
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.create-user-form .settings-card {
  margin: 0;
}
.create-user-form .settings-form-grid {
  max-width: none;
}
.create-user-form .account-settings-form {
  max-width: none;
}
.create-user-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.create-user-form .form-row.hidden {
  display: none;
}
.create-user-form .label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-soft);
}
.create-user-form .input {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  font-size: 0.9rem;
}
/* Scope the readonly styling to <input> / <textarea> only. The :read-only
 * pseudo-class also matches <select> in most browsers (select has no
 * `readonly` attribute), which incorrectly greyed out every dropdown and
 * showed a not-allowed cursor. */
.create-user-form input.input:read-only,
.create-user-form textarea.input:read-only {
  background: #f4f6fa;
  color: var(--text-muted);
  cursor: not-allowed;
}
.create-user-form .form-row-pair,
.edit-user-name-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .create-user-form .form-row-pair,
  .edit-user-name-pair {
    grid-template-columns: 1fr;
  }
}
.create-user-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.email-exists-banner {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.25);
  color: #0f3a8a;
  font-size: 0.85rem;
  line-height: 1.4;
}
.email-exists-banner strong { color: #0c2d6b; }
.email-exists-banner.hidden { display: none; }

/* Scope toggle (Company / Care Home) inside create tenant user form */
.scope-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
}
.scope-toggle-btn {
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  background: #ffffff;
  border: none;
  border-right: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.scope-toggle-btn:last-child { border-right: none; }
.scope-toggle-btn:hover { background: #f5f8fc; }
.scope-toggle-btn.is-active {
  background: var(--primary);
  color: #ffffff;
}

/* Care home multi-select checklist */
.care-home-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}
.care-home-checklist__search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.85rem;
}
.care-home-checklist__list {
  max-height: 240px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.care-home-checklist__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s;
}
.care-home-checklist__row:hover {
  background: #f5f8fc;
}
.care-home-checklist__row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.care-home-checklist__row.is-disabled {
  cursor: not-allowed;
  color: var(--text-muted);
}
.care-home-checklist__row.is-disabled .care-home-checklist__row-label {
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.2);
}
.care-home-checklist__row-label {
  flex: 1;
  font-weight: 500;
}
.care-home-checklist__row-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.care-home-checklist__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-soft);
}
.care-home-checklist__count {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary);
  font-weight: 600;
}
.care-home-checklist__clear-btn {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
}
.care-home-checklist__empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  padding: 12px 0;
}

/* ---- Audits panel (Phase E) ---- */
/* Submenu tab bar — above the KPI summary strip. Visually distinct from
   the status filter chips (larger, underline-active style) so users can
   tell the two filtering axes apart: tabs scope the dataset, chips then
   scope that dataset by status. */
.audits-submenu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--line);
}
.audits-submenu-tab {
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* overlap the parent border-bottom so active state reads as a seamless underline */
}
.audits-submenu-tab:hover {
  color: var(--text);
}
.audits-submenu-tab.is-active {
  color: var(--primary, #2563eb);
  border-bottom-color: var(--primary, #2563eb);
}

.audits-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.audits-filter-chip {
  display: inline-block;
  /* Vertical padding bumped from 4px to 7px so the chip text has
     real breathing room — was reading too cramped, especially when
     stacked above a table header with no gap. Pairs with the chip-
     row margin rule further down so the whole filter strip
     ``inhales`` instead of being flush against neighbours. */
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  user-select: none;
}
.audits-filter-chip:hover {
  border-color: var(--primary, #2563eb);
  color: var(--text);
}
.audits-filter-chip.is-active {
  background: var(--primary, #2563eb);
  color: #fff;
  border-color: var(--primary, #2563eb);
}
.audits-list .table {
  width: 100%;
  border-collapse: collapse;
}
.audits-list .table th,
.audits-list .table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 0.88rem;
}
.audits-list .table th {
  background: #f9fafb;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.audits-list .small {
  font-size: 0.78rem;
}

/* Audits panel header — the three-button action row (Add custom /
   Re-seed / Export CSV) overflows the panel's right edge on
   narrower viewports because ``.panel-header`` is flex with no
   wrap. Scoped override lets the title + action row wrap onto a
   second line when the viewport can't fit both side-by-side.
   Button cluster keeps its own small gap and stays right-aligned
   inside whichever row it ends up on. */
#careHomeAuditsPanel > .panel-header {
  flex-wrap: wrap;
  row-gap: 8px;
}
#careHomeAuditsPanel > .panel-header > .row {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 6px;
}

/* ==== M8 audit-workflow-expansion =====================================
   Structured Mark-Complete form (template-driven questions with
   pass/fail/n/a + per-question notes), the per-completion answer
   cards in the history drawer, the pass-rate sparkline, and the
   template-library drawer + editor.
   All rules scoped to explicit ``.audit-*`` class names so they
   don't leak into other surfaces. Everything in this block lives
   inside the Compliance panel or its sibling modals, so no
   sidebar-offset updates are needed. */

.audit-complete-template-strip {
  padding: 8px 10px;
  background: #eef2ff;
  border: 1px solid #c7d4ef;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}
.audit-complete-questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.audit-question {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}
.audit-question-prompt {
  font-size: 0.92rem;
  line-height: 1.4;
}
.audit-question-help {
  margin-top: 3px;
}
.audit-question-radios {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  font-size: 0.9rem;
}
.audit-question-radios label {
  cursor: pointer;
}
.audit-question-text,
.audit-question-notes {
  margin-top: 6px;
  width: 100%;
}
.audit-complete-summary {
  margin: 4px 0 10px;
  padding: 6px 10px;
  background: #f3f5f8;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #475062;
}

/* Per-completion answer breakdown inside the history drawer. One
   card per answered question, small response pill on the left. */
.audit-completion-drawer-trend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.audit-trend-sparkline {
  display: inline-block;
  vertical-align: middle;
}
.audit-completion-drawer-answers-row td {
  padding: 0 8px 8px !important;
  background: #fbfcfd;
}
.audit-completion-drawer-answers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--line);
}
.audit-completion-drawer-answer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
}
.audit-completion-drawer-answer-body {
  flex: 1;
}
.audit-answer-pill {
  flex: 0 0 auto;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  min-width: 44px;
  text-align: center;
  border: 1px solid transparent;
}
.audit-answer-pill-pass {
  background: #e6f7ed;
  color: #116932;
  border-color: #bfe6ce;
}
.audit-answer-pill-fail {
  background: #fde4e4;
  color: #a1221a;
  border-color: #f4b3af;
}
.audit-answer-pill-na {
  background: #eef0f3;
  color: #475062;
  border-color: #d6dae2;
}
.audit-answer-pill-text {
  background: #eef2ff;
  color: #3a4fa0;
  border-color: #c7d4ef;
}

/* Template-library slide-over drawer. Fixed-position right-anchored
   panel — closeable, filterable, row-grouped by audit type. */
.audit-template-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(880px, 95vw);
  background: #ffffff;
  box-shadow: -4px 0 18px rgba(15, 23, 42, 0.18);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.audit-template-drawer.hidden {
  display: none;
}
.audit-template-drawer-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 22px;
  overflow: hidden;
}
.audit-template-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.audit-template-drawer-filterbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.audit-template-drawer-filterbar .input {
  min-width: 200px;
}
.audit-template-archived-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.audit-template-list {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
}
.audit-template-group {
  margin-bottom: 14px;
}
.audit-template-group-header {
  padding: 6px 0;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.audit-template-row {
  display: flex;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 6px;
  background: #fbfcfd;
}
.audit-template-row-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.audit-template-row-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  flex: 0 0 auto;
}
.audit-template-row-archived {
  opacity: 0.6;
}
.audit-template-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  margin-right: 4px;
}
.audit-template-pill-system {
  background: #fef3c7;
  color: #8a5a00;
  border-color: #f3d98a;
}
.audit-template-pill-default {
  background: #e6f7ed;
  color: #116932;
  border-color: #bfe6ce;
}
.audit-template-pill-archived {
  background: #eef0f3;
  color: #475062;
  border-color: #d6dae2;
}
.audit-template-pill-scope {
  background: #eef2ff;
  color: #3a4fa0;
  border-color: #c7d4ef;
}

/* Template editor modal — wider than the default modal so a long
   question list doesn't cramp the column. */
.audit-template-editor-card {
  max-width: 780px;
  width: 95vw;
}
.audit-template-editor-questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.audit-template-editor-question {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}
.audit-template-editor-question-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.88rem;
}
.audit-template-editor-question-row .input {
  max-width: 180px;
}
.audit-template-editor-question-row .audit-tq-key {
  max-width: 140px;
}

/* M7 type-filter chips (Documents / Audits / All). Renders above the
   management-themed submenu row. Visual weight deliberately lighter
   than the submenu tabs so the primary navigation axis stays the
   submenu — the type filter is a cross-cut. */
.audits-type-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.audit-type-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f6f8fb;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
}
.audit-type-chip:hover {
  background: #eef2f8;
}
.audit-type-chip.is-active {
  background: #1f3a8a;
  border-color: #1f3a8a;
  color: #ffffff;
}

/* Small per-row type badge — renders in the Type column so the user
   sees at a glance which rows are documents vs audits even when the
   type filter is "All". */
.audit-type-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.audit-type-pill-document {
  background: #eef2ff;
  color: #3a4fa0;
  border-color: #c7d4ef;
}
.audit-type-pill-audit {
  background: #f1ecff;
  color: #5a3aa0;
  border-color: #d5c7f0;
}

/* Subtle row tint so documents and audits read distinctly in a mixed
   "All" view without screaming. Border-left accent is enough; don't
   tint the whole row background or the status-badge colours fight
   for attention. */
.audits-list .audit-row-document {
  border-left: 3px solid #c7d4ef;
}
.audits-list .audit-row-audit {
  border-left: 3px solid #d5c7f0;
}
.audits-list td.audit-col-check-disabled {
  /* Empty checkbox cell for documents — same width as the audit
     checkbox cell so columns line up across mixed rows. */
}

/* Add-custom modal type radio row. Stack vertically so the longer
   descriptive copy stays readable. */
.audit-create-type-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.audit-create-type-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.4;
}
.audit-create-type-option input[type="radio"] {
  margin-top: 3px;
}
.audit-create-type-option:has(input:checked) {
  border-color: #1f3a8a;
  background: #eef2ff;
}

/* Audit status badges (audit-expansion M6).
   Colour-coded urgency: red overdue / amber due-soon / muted
   never-done / green current. Never-done is deliberately muted rather
   than red — a freshly-seeded check that's "never done" yet isn't a
   compliance failure, just an outstanding TODO. Overdue is the only
   danger tone. Designed to match the training matrix cell palette so
   the two panels read the same at a glance. */
.audit-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
.audit-status-current {
  background: #e6f7ed;
  color: #116932;
  border-color: #bfe6ce;
}
.audit-status-due-soon {
  background: #fff4d9;
  color: #8a5a00;
  border-color: #f3d98a;
}
.audit-status-overdue {
  background: #fde4e4;
  color: #a1221a;
  border-color: #f4b3af;
}
.audit-status-never-done {
  background: #eef0f3;
  color: #475062;
  border-color: #d6dae2;
}
/* Reserved status for document rows (M7). Communicates "this row's
   freshness isn't measured by the attestation cadence" visually so
   operators don't read it as a compliance failure. */
.audit-status-not-applicable {
  background: #eef2ff;
  color: #3a4fa0;
  border-color: #c7d4ef;
  font-style: italic;
}

/* Audit completion-detail drawer (audit-expansion M6).
   Nested inside #careHomeAuditsPanel — does NOT need to participate
   in the top-level sidebar-offset selector groups because the parent
   panel already sits clear of the sidebar. Opens when a row body is
   clicked (Mark-Complete button still catches its own click via
   stopPropagation). */
.audit-completion-drawer {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfd;
  padding: 12px 14px;
}
.audit-completion-drawer.hidden {
  display: none;
}
.audit-completion-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.audit-completion-drawer-title {
  font-weight: 600;
  font-size: 0.95rem;
}
.audit-completion-drawer-subtitle {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 2px;
}
.audit-completion-drawer-body {
  font-size: 0.85rem;
}
.audit-completion-drawer-body table {
  width: 100%;
  border-collapse: collapse;
}
.audit-completion-drawer-body th,
.audit-completion-drawer-body td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.audit-completion-drawer-body th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f3f5f8;
}
.audit-completion-drawer-empty,
.audit-completion-drawer-error {
  color: var(--text-muted);
  padding: 8px 0;
}
/* Row becomes clickable to open the drawer. Keep the Mark-Complete
   button visually unchanged; only the non-button row area gets the
   hover affordance. */
.audits-list .audit-row-clickable {
  cursor: pointer;
}
.audits-list .audit-row-clickable:hover {
  background: #f6f8fb;
}
.audits-list .audit-row-clickable.is-open {
  background: #eef4ff;
}
/* Short-lived highlight when the row is focused via the gap → audit
   cross-link. The ``audit-row-focus-flash`` class is added by
   ``_focusAuditItemFromGap`` and auto-removed after ~1.5s. Soft
   yellow fade so screen-readers still announce the row normally
   without colour-dependent context. */
.audits-list .audit-row-clickable.audit-row-focus-flash {
  animation: audit-row-focus-flash 1.4s ease-out 1;
}
@keyframes audit-row-focus-flash {
  0%   { background: #fff4c9; }
  100% { background: transparent; }
}

/* Same flash, but for <tr> rows in the generic Actions table —
   reused when the Care Home Audit Tool deep-links to an Action
   via the "Action #N" link on a finding. Wider selector than the
   audits variant above because the Actions table cells set their
   own backgrounds; the keyframe paints the whole row. */
tr.action-row-focus-flash {
  animation: action-row-focus-flash 1.4s ease-out 1;
}
@keyframes action-row-focus-flash {
  0%   { background: #fff4c9; }
  100% { background: transparent; }
}

/* Bulk-action footer bar for the audits panel (audit-expansion M6).
   Sticky at the bottom of the panel so it stays visible when the user
   scrolls a long list. Hidden by default; the JS flips .hidden when
   at least one row is selected. */
.audits-bulk-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 14px;
  background: #eef4ff;
  border: 1px solid #c7d4ef;
  border-radius: 10px;
  position: sticky;
  bottom: 8px;
  z-index: 2;
}
.audits-bulk-bar.hidden {
  display: none;
}
.audits-bulk-bar-text {
  font-size: 0.9rem;
  color: #2a3c6d;
}
.audits-bulk-bar-actions {
  display: flex;
  gap: 8px;
}
/* Narrow column for the row checkboxes — enough for the tick but no
   more, so it doesn't steal width from the Name column. */
.audits-list .table th.audit-col-check,
.audits-list .table td.audit-col-check {
  width: 28px;
  padding-right: 0;
}
.audits-list .audit-row-check {
  margin: 0;
  cursor: pointer;
}

/* Gap → audit cross-link button. Small, outline-style button inside
   the gap row chip. Sits beside the Upload action button.
   ``.gaps-row-tracked-link`` (in-app readiness linking) reuses the
   same outline treatment so the "Open in Training" deep-link reads as
   a sibling of "View audit". */
.gaps-row-audit-link,
.gaps-row-register-link,
.gaps-row-tracked-link {
  background: transparent;
  border: 1px solid #5d7bd2;
  color: #3a4fa0;
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: 999px;
  font-weight: 600;
}
.gaps-row-audit-link:hover,
.gaps-row-register-link:hover,
.gaps-row-tracked-link:hover {
  background: #eef2ff;
}
/* In-app readiness linking — small inline tag on a gap chip whose
   evidence type is tracked inside an in-app module (readiness source
   "platform"). Explains why the chip offers a module deep-link rather
   than an upload affordance. */
.gaps-row-chip-tracked {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--primary, #120A8F);
}
/* M16.34 Phase B — "Open in Register" cross-link sits on the
   right of the gaps-row header alongside the muted counts
   summary. Small gap to separate it from the count copy. */
.gaps-row-register-link {
  margin-left: 8px;
}

/* ---- Training panel (Phase 3) ----
   Filter chips mirror the audits filter-chip pattern so the two panels
   feel consistent. The matrix is a separate component — fixed-label
   first column, compact cells, colour-coded by status. */
.training-filter-bar {
  display: flex;
  flex-wrap: wrap;
  /* Bumped gap from 6px → 8px so adjacent chips have a touch more
     breathing room horizontally too (matches the new vertical
     breathing room from the chip-padding bump). */
  gap: 8px;
}

/* Vertical breathing room around any filter-chip bar. Was flush
   against table headers / KPI strips; managers reported the chip
   strip "had no space above and below". Single rule for every chip
   bar in the app — supervision (#supervisionFilterBar uses the
   ``training-filter-bar`` class), training, audits, residents.
   ``.audits-type-filter`` is the older audits "type" toggle row; it
   gets the same spacing for parity. */
.training-filter-bar,
.audits-type-filter,
.audits-filter-bar {
  margin-top: 12px;
  margin-bottom: 14px;
}
.training-filter-chip {
  display: inline-block;
  /* Same vertical padding bump as ``.audits-filter-chip`` — keep
     these two pixel-identical (training filter bar reuses the
     audits-style rules). */
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  user-select: none;
}
.training-filter-chip:hover {
  border-color: var(--primary, #2563eb);
  color: var(--text);
}
.training-filter-chip.is-active {
  background: var(--primary, #2563eb);
  color: #fff;
  border-color: var(--primary, #2563eb);
}

/* Phase 4 — deep-link training-type focus chip ("Focused: …"). Sits in
   the training filter bar; an outlined-primary treatment marks it as
   distinct from the grey / solid status chips so an active focus is
   obvious while the KPI strip stays whole-module. */
.training-focus-chip-host:empty { display: none; }
.training-focus-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--primary, #2563eb);
  background: #fff;
  color: var(--primary, #2563eb);
  font-size: 0.78rem;
  font-weight: 600;
}
.training-focus-chip-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.training-focus-chip-clear:hover { background: var(--line); }

/* feature/readiness-exclusions, Slice 4 — the "Not-applicable items"
   review list rows in Care Home Settings -> Readiness. */
.readiness-exclusion-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.readiness-exclusion-row:first-child { border-top: 0; }
.readiness-exclusion-row__main { min-width: 0; }
.readiness-exclusion-row__title { font-weight: 600; font-size: 0.88rem; }
.readiness-exclusion-row__sub { font-size: 0.78rem; }
.readiness-exclusion-row__reason { font-size: 0.83rem; margin: 3px 0; }

/* Matrix: staff × types grid. Staff names in first column (sticky on
   horizontal scroll for wide catalogues); every other cell is the
   latest record for that (staff, type) pair with a colour-coded dot. */
.training-matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.training-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.training-matrix th,
.training-matrix td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.training-matrix th {
  background: #f9fafb;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.training-matrix th:first-child,
.training-matrix td:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
  font-weight: 500;
}
.training-matrix th:first-child {
  background: #f9fafb;
  z-index: 2;
}
.training-matrix-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
}
.training-matrix-cell .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #9ca3af;
}
.training-matrix-cell--current .dot   { background: #16a34a; }
.training-matrix-cell--expiring .dot  { background: #f59e0b; }
.training-matrix-cell--expired .dot   { background: #dc2626; }
.training-matrix-cell--no_expiry .dot { background: #64748b; }
.training-matrix-cell--missing .dot   { background: transparent; border: 1px dashed #9ca3af; width: 6px; height: 6px; }
.training-matrix-cell--missing        { color: var(--text-muted); }

/* Types-manager modal: row layout for per-type edit. */
.training-types-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 110px 90px auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.training-types-row input[type="number"] {
  width: 100%;
}
.training-types-row .muted-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* ---- Phase B: staff-list / staff-detail split view ---- */
.training-workspace {
  display: grid;
  /* Left column: flex between ~280px and 440px proportional to the
     container, then cap at 520px on very wide viewports. min-content
     shrinks further when the viewport is zoomed-in / narrow so the
     right detail pane doesn't get squashed into oblivion. */
  grid-template-columns: minmax(min(280px, 40%), clamp(320px, 32%, 520px)) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .training-workspace { grid-template-columns: 1fr; }
}
.training-staff-list {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  /* Scroll horizontally rather than clip when the 5-column table can't
     fit (e.g. the workspace collapses to one narrow column below 900px).
     The sortable headers stay nowrap (arrow on one line) but the table no
     longer loses its rightmost count columns under overflow:hidden.
     overflow-y stays hidden so the rounded corners still clip cleanly. */
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
}
.training-staff-list table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.training-staff-list thead th {
  text-align: left;
  padding: 10px 12px;
  background: #f8fafc;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.training-staff-list thead th.sortable {
  cursor: pointer;
  user-select: none;
  /* Keep the header label + sort arrow on a single line — with the
     extra "Awaiting" column the narrow count headers were wrapping the
     injected .sort-indicator glyph to a second row. */
  white-space: nowrap;
}
.training-staff-list thead th.sortable:hover { color: var(--text, #0f172a); }
.training-staff-list thead th .sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.7rem;
  opacity: 0.45;
}
.training-staff-list thead th .sort-indicator.is-active { opacity: 1; color: #2563eb; }
.training-staff-list tbody tr {
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
  transition: background 0.1s;
}
.training-staff-list tbody tr:last-child { border-bottom: 0; }
.training-staff-list tbody tr:hover { background: #f8fafc; }
.training-staff-list tbody tr.is-selected { background: #eff6ff; }
.training-staff-list td {
  padding: 10px 12px;
  vertical-align: middle;
}
.training-staff-list .staff-name {
  font-weight: 600;
  color: var(--text, #0f172a);
}
.training-staff-list .staff-role {
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}
.training-staff-list .staff-counts {
  /* Intentionally NOT display:flex — that would take the <td> out of
     table-row flow and stack the count pills in a single vertical
     column instead of their own cells. text-align keeps the pill
     alignment right without breaking the table. */
  text-align: right;
  white-space: nowrap;
}
.training-staff-list .count-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 22px;
  justify-content: center;
}
.count-pill--danger  { background: #fee2e2; color: #991b1b; }
.count-pill--warn    { background: #fef3c7; color: #92400e; }
.count-pill--good    { background: #dcfce7; color: #166534; }
.count-pill--neutral { background: #f1f5f9; color: #475569; }
.count-pill--info    { background: #dbeafe; color: #1e40af; }

.training-staff-detail {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  min-height: 320px;
  /* Grid items default to min-width: auto (= content min size), so
     a wide per-staff detail table + row-action buttons push this
     column beyond its allocated width and the right-hand content
     overflows the card. Force 0 so the grid can shrink us, and
     fall back to horizontal scroll inside the card. */
  min-width: 0;
  overflow-x: auto;
}
.training-staff-detail .detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
}
.training-staff-detail h4 { margin: 0 0 4px 0; font-size: 1.05rem; }
.training-staff-detail table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.training-staff-detail th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.training-staff-detail td {
  padding: 10px;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
  vertical-align: middle;
}
.training-staff-detail tr:last-child td { border-bottom: 0; }
.training-staff-detail .row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* ---- Phase C: settings modal ---- */
.reg-modal-card--wide { max-width: 820px; width: 92vw; }
.training-types-grid { display: flex; flex-direction: column; gap: 8px; }
.training-type-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: #fff;
}
.training-type-row .type-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.training-type-row .type-controls > button { white-space: nowrap; }
/* ---- Training matrix modal ---- */
.reg-modal-card--xwide { max-width: 96vw; width: 96vw; }
.training-matrix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0.72rem;
}
.training-matrix-legend .legend-cell {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border, #e5e7eb);
  font-weight: 600;
}
.training-matrix-legend .legend-cell--current   { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.training-matrix-legend .legend-cell--expiring  { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.training-matrix-legend .legend-cell--expired   { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.training-matrix-legend .legend-cell--not_started { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.training-matrix-legend .legend-cell--no_expiry { background:#eff6ff; color:#1e3a8a; border-color:#bfdbfe; }
.training-matrix-legend .legend-cell--missing   { background:#0f172a; color:#cbd5e1; border-color:#0f172a; }
.training-matrix-legend .legend-cell--awaiting_review { background:#eff6ff; color:#1e3a8a; border-color:#bfdbfe; }
.training-matrix-legend .legend-cell--rejected { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
/* M16.5 / Codex P2 — chip must mirror ``matrix-cell--not_required`` so
   the HR Documents legend reads correctly. The Training matrix doesn't
   emit this status today, but the rule is harmless there. */
.training-matrix-legend .legend-cell--not_required { background:#f8fafc; color:#94a3b8; border-color:#e2e8f0; }

/* M16.5 / Codex P3 — toolbar row above the HR Documents Active staff
   list (search + spacer + View-matrix button). Replaces the inline
   styles that were on the row + search input; keeps the vocabulary
   consistent with other tab toolbars in the same panel. */
.hr-docs-toolbar {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.hr-docs-search-input { max-width: 320px; }

/* M16.5 polish (post-feedback) — Profile-tab card supporting classes.
   The Profile tab now uses the standard ``.settings-card`` chrome +
   ``.settings-form-grid`` (auto-fit, minmax 220px) so input widths
   match the Provider Users / Account Settings forms instead of
   stretching the full drawer column. These three small classes fill
   the gaps left by the removed staff-card chrome. */
.staff-account-flags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 18px;
}
.staff-account-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.staff-card-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.staff-exit-banner {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 6px;
  padding: 8px 12px;
}

.training-matrix-scroll {
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
}
.training-matrix-tbl {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.78rem;
  width: max-content;
}
.training-matrix-tbl th,
.training-matrix-tbl td {
  padding: 6px 8px;
  border-right: 1px solid var(--border-soft, #f1f5f9);
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
  white-space: nowrap;
}
.training-matrix-tbl thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f8fafc;
  font-weight: 600;
  color: #334155;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
}
/* The leftmost staff column stays fixed during horizontal scroll. */
.training-matrix-tbl thead th.col-staff,
.training-matrix-tbl tbody td.col-staff {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  border-right: 2px solid var(--border, #e5e7eb);
  font-weight: 600;
  color: #0f172a;
}
.training-matrix-tbl thead th.col-staff { z-index: 4; background: #f8fafc; }
.training-matrix-tbl .matrix-cell {
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.training-matrix-tbl .matrix-cell--current   { background:#dcfce7; color:#166534; }
.training-matrix-tbl .matrix-cell--expiring  { background:#fef3c7; color:#92400e; }
.training-matrix-tbl .matrix-cell--expired   { background:#fee2e2; color:#991b1b; }
.training-matrix-tbl .matrix-cell--not_started { background:#fff7ed; color:#9a3412; }
.training-matrix-tbl .matrix-cell--no_expiry { background:#eff6ff; color:#1e3a8a; }
.training-matrix-tbl .matrix-cell--missing   { background:#0f172a; color:#0f172a; }
.training-matrix-tbl .matrix-cell--awaiting_review { background:#eff6ff; color:#1e3a8a; }
.training-matrix-tbl .matrix-cell--rejected  { background:#fee2e2; color:#991b1b; }
.training-matrix-tbl .matrix-cell--not_required { background:#f8fafc; color:#94a3b8; }

/* ---- Active / Inactive status tabs above user-management lists ---- */
.user-status-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  margin-bottom: 12px;
}
.user-status-tab {
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted, #64748b);
  font-weight: 500;
  cursor: pointer;
  font-size: 0.875rem;
  transition: color 0.1s, border-color 0.1s;
}
.user-status-tab:hover { color: var(--text, #0f172a); }
.user-status-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* Read-only date inputs (e.g. auto-derived expiry on the upload modal)
   should look obviously non-editable. The browser's default leaves
   them looking identical to editable inputs, which is misleading. */
input[type="date"][readonly] {
  background: #f1f5f9;
  color: #475569;
  cursor: not-allowed;
}

/* Dirty-form pattern: subtle left border highlights rows with pending,
   unsaved edits. Matches the pattern documented in docs/dirty-form-
   pattern.md so the same visual rule can be reused for any editable
   row UI. */
.training-type-row.is-dirty {
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
}

/* Inline per-module count pills on the Training modules tab.
   Compact enough to sit alongside the View / Allocate buttons without
   pushing them to a second row. */
.module-counts {
  display: inline-flex;
  gap: 4px;
  align-items: stretch;
  margin-right: 4px;
}
.module-count-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 3px 6px;
  border-radius: 6px;
  line-height: 1.1;
}
.module-count-pill .label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.72;
}
.module-count-pill .n {
  font-size: 0.85rem;
  font-weight: 700;
}
.module-count-pill.count-pill--neutral { background: #f1f5f9; color: #334155; }
.module-count-pill.count-pill--danger  { background: #fee2e2; color: #991b1b; }
.module-count-pill.count-pill--warn    { background: #fef3c7; color: #92400e; }
.module-count-pill.count-pill--good    { background: #dcfce7; color: #166534; }

.training-settings-filter {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.training-settings-filter label.label { margin: 0; }
.training-settings-filter select { max-width: 260px; }

/* Inline tags (Mandatory, etc.) sitting next to a training name.
   Slightly louder than the muted-badge so it reads as a label, not as
   ambient metadata. */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6;
  vertical-align: 1px;
}
.tag--mandatory {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* ---- Inline "Roles" editor slide-down / slide-up ---- */
.training-type-role-editor {
  overflow: hidden;
  transition: height 0.22s ease, opacity 0.18s ease;
  margin: -4px 0 8px 0;
  will-change: height;
}
.training-type-role-editor-inner {
  padding: 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: #f8fafc;
}
@media (prefers-reduced-motion: reduce) {
  .training-type-role-editor { transition: none; }
}
.training-type-row .type-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.training-type-row .type-name { font-weight: 600; }
.training-type-row .type-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.training-type-row .role-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.72rem;
}
.training-type-row .role-chip--all { background: #f1f5f9; color: #475569; }
/* "Manual allocation only" — distinct from "All roles" so managers
   can spot at a glance that a module opts out of auto-allocation. */
.training-type-row .role-chip--none { background: #fef2f2; color: #991b1b; border: 1px dashed #fecaca; }
.training-type-row .type-meta { font-size: 0.75rem; color: var(--text-muted, #64748b); }
.training-type-row .expiry-input { width: 70px; }
.expiry-input-group {
  display: inline-flex;
  gap: 6px;
  align-items: stretch;
  flex-wrap: nowrap;
}
.expiry-input-group > input {
  width: 70px;
  flex: 0 0 70px;
  min-width: 0;
  padding-left: 10px;
  padding-right: 6px;
}
.expiry-input-group > select {
  width: auto;
  flex: 0 0 auto;
  min-width: 86px;
  padding-right: 26px;
}
.expiry-input-group--sm > input { width: 56px; flex: 0 0 56px; }
.expiry-input-group--sm > select { min-width: 76px; }
.training-create-grid {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.training-job-title-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: #f8fafc;
}
.training-job-title-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.training-allocate-list {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: #fff;
}
.training-allocate-list .allocate-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
}
.training-allocate-list .allocate-row:last-child { border-bottom: 0; }
.training-allocate-list .allocate-row.is-already-allocated { opacity: 0.55; }
.btn.btn-icon {
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Training module view modal ---- */
.training-view-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.training-view-pill {
  display: flex;
  flex-direction: column;
  /* Equal-width tiles: each pill grows from a 0 basis to share the row
     evenly, so a longer label ("Awaiting review") can't make its tile
     wider than the rest. min-width keeps a sensible floor before the
     flex row wraps on narrow screens. */
  flex: 1 1 0;
  padding: 10px 14px;
  border-radius: 8px;
  min-width: 110px;
  background: #f8fafc;
  border: 1px solid var(--border, #e5e7eb);
}
.training-view-pill .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  font-weight: 600;
}
.training-view-pill .value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
  margin-top: 2px;
}
.training-view-pill--total   { background: #eff6ff; border-color: #bfdbfe; }
.training-view-pill--danger  { background: #fef2f2; border-color: #fecaca; }
.training-view-pill--danger .value { color: #991b1b; }
.training-view-pill--warn    { background: #fffbeb; border-color: #fde68a; }
.training-view-pill--warn .value { color: #92400e; }
/* "Not started" — orange to match the row-tint (training-view-row--not_started).
   Distinct from expired's red so the manager sees "needs action" vs
   "lapsed" at a glance. */
.training-view-pill--amber   { background: #fff7ed; border-color: #fed7aa; }
.training-view-pill--amber .value { color: #9a3412; }
.training-view-pill--good    { background: #f0fdf4; border-color: #bbf7d0; }
.training-view-pill--good .value { color: #166534; }
/* "Awaiting review" — neutral blue. Distinct from "not started"
   amber (staff hasn't done it yet) and from "rejected" red
   (manager said no) so the reviewer can scan at a glance. */
.training-view-pill--info    { background: #eff6ff; border-color: #bfdbfe; }
.training-view-pill--info .value { color: #1e40af; }

.training-view-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.training-view-table thead th {
  text-align: left;
  padding: 10px 12px;
  background: #f8fafc;
  font-weight: 600;
  color: #64748b;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.training-view-table thead th.sortable { cursor: pointer; user-select: none; }
.training-view-table thead th.sortable:hover { color: #0f172a; }
.training-view-table thead th .sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.7rem;
  opacity: 0.45;
}
.training-view-table thead th .sort-indicator.is-active { opacity: 1; color: #2563eb; }

/* ---- Staff drawer: left rail + right content ----
   M16.5 polish — mirrors the Care Home Settings shell pattern below
   so the drawer's six tabs (Profile / Documents / Training /
   Supervision / Leave / Access) stack vertically as a sub-nav rail
   instead of a horizontal button strip. The same narrow-viewport
   collapse rule applies (≤900px stacks the rail above the content).
   ``.staff-drawer-rail-tab`` mirrors ``.settings-subnav-item`` so
   hover / active / focus states stay consistent across the two
   sub-nav surfaces. */
.staff-drawer-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}
.staff-drawer-shell > * { min-width: 0; }
@media (max-width: 900px) {
  .staff-drawer-shell { grid-template-columns: 1fr; }
}
.staff-drawer-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  position: sticky;
  top: 16px;
}
.staff-drawer-rail-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text, #0f172a);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s;
}
.staff-drawer-rail-tab:hover { background: #f1f5f9; }
.staff-drawer-rail-tab.is-active {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}
.staff-drawer-rail-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
}
/* Mobile: collapse the vertical section rail to the SAME accordion
   pattern as ``.settings-subnav`` (Care Home / Platform / Provider
   Settings + Edit User) for cross-surface consistency — only the active
   item shows (with a ▾ chevron); tapping it expands the full list. The
   shared ``_wireSubnavMobileCollapse`` handler in app.js toggles
   ``.is-expanded`` on ``.staff-drawer-rail`` too. MUST come AFTER the
   base ``.staff-drawer-rail`` rules above (media queries don't add
   specificity). Desktop (≥901px) keeps the full left vertical rail. */
@media (max-width: 900px) {
  .staff-drawer-rail:not(.is-expanded) .staff-drawer-rail-tab:not(.is-active) {
    display: none;
  }
  .staff-drawer-rail .staff-drawer-rail-tab.is-active::after {
    content: "▾";
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--muted, #64748b);
    transition: transform 0.15s;
  }
  .staff-drawer-rail.is-expanded .staff-drawer-rail-tab.is-active::after {
    transform: rotate(180deg);
  }
}
/* Drawer panes — only the active one is in the flow. The previous
   horizontal-tabs scheme used the ``.hidden`` utility to toggle
   visibility; that still works here, but we make the active pane
   span the full content column with consistent vertical rhythm. */
.staff-drawer-content { min-width: 0; }
.staff-drawer-content .staff-drawer-pane:not(.hidden) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* M16.7 — Cap the Profile tab card width so the box doesn't stretch
   into a wide blank rectangle on large viewports. Each card's
   internal ``staff-profile-grid`` is already 760px max; matching the
   card itself keeps the chrome and content visually consistent
   instead of leaving a large empty area to the right of the inputs. */
.staff-drawer-pane[data-staff-drawer-pane="profile"] .settings-card {
  max-width: 800px;
}

/* M16.7 — Shared two-column grid for the staff-drawer Profile tab.
   Personal details / Login options / Audit / Employment record all
   use this so the four cards read with the same visual rhythm —
   pairs of fields on each row, optional ``__full`` modifier for
   single-cell rows (e.g. Email, Send-reset-link, Notes). Keeps the
   inputs "short" (~180-360px) instead of stretching across the
   whole drawer width. Stacks to single column at narrow widths.
   Renamed from ``staff-personal-grid`` to ``staff-profile-grid``
   so the same rules apply to every Profile tab card. The legacy
   ``staff-personal-grid`` class stays as an alias for back-compat
   with any in-flight branch markup. */
.staff-profile-grid,
.staff-personal-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
  gap: 16px 20px;
  max-width: 760px;
}
/* ``__full`` spans both columns — used for the Notes textarea
   where a wide single field reads better than a narrow boxed one. */
.staff-profile-grid__full {
  grid-column: 1 / -1;
}
/* ``__half`` (and the legacy Email alias) locks a cell to column 1
   only so single-field rows (Email, Send-reset-link button)
   keep the same "short" width as the paired fields above them. */
.staff-profile-grid__half,
.staff-personal-grid__email {
  grid-column: 1 / 2;
}
@media (max-width: 720px) {
  .staff-profile-grid,
  .staff-personal-grid { grid-template-columns: 1fr; }
  .staff-profile-grid__half,
  .staff-profile-grid__full,
  .staff-personal-grid__email { grid-column: 1 / -1; }
}

/* ---- Staff drawer cards — explicit head / body / foot zones so
   each section reads as one named surface rather than a stack of
   unlabelled inputs. Visually echoes ``.settings-card`` but with
   tighter internal rhythm appropriate for the in-drawer context. */
.staff-card {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.staff-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
}
.staff-card__head > div:first-child { flex: 1; min-width: 0; }
.staff-card__title {
  margin: 0 0 2px 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #0f172a);
}
.staff-card__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.staff-card__foot {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border-soft, #f1f5f9);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.staff-card__sub {
  border-top: 1px dashed var(--border-soft, #e2e8f0);
  padding-top: 12px;
}

/* feature/staff-communication-notes — Communication tab styles.
 *
 * Two distinct vertical sections inside the staff drawer card:
 *
 *   1. ``.staff-comm-note-form`` (compose)  — fields + Add note button,
 *      with a bottom border + spacing that visually closes the form
 *      before the records section begins.
 *
 *   2. ``.staff-comm-note-records`` (browse) — a single bordered card
 *      containing the tinted toolbar header (search + filter + count)
 *      and the table beneath. Toolbar and table-wrap share ONE outer
 *      border and ONE 6px radius so they read as one data-card with
 *      a header row, not as two unconnected blocks.
 *
 * Flat-design + 6px-radius rule preserved; brand primary tints the
 * category chip + the expand-row highlight only. */

.staff-comm-note-form {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.staff-comm-note-textarea {
  width: 100%;
  resize: vertical;
  min-height: 88px;
  font-family: inherit;
}
.staff-comm-note-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
}
.staff-comm-note-form__category {
  flex: 1 1 200px;
  min-width: 0;
}
.staff-comm-note-form__category .input {
  width: 100%;
}
.staff-comm-note-form__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Section divider — small uppercase header on a horizontal rule,
 * sits between the form (above) and the records card (below). Gives
 * the records section a clear identity so the form's "Add note"
 * row no longer flows visually into the search box. */
.staff-comm-note-section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 12px;
}
.staff-comm-note-section-divider::before,
.staff-comm-note-section-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}
.staff-comm-note-section-divider__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  flex: 0 0 auto;
}

/* Records card — one border + one radius around the toolbar + the
 * table-wrap. Children lose their own borders/radii and inherit
 * this shared frame so the eye reads them as a single data card. */
.staff-comm-note-records {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}

/* Toolbar — tinted header strip at the top of the records card.
 * Soft ``--surface-2`` background + a 1px bottom border visually
 * separates it from the rows below; padding makes it feel like the
 * "table's controls", not a floating filter bar. */
.staff-comm-note-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.staff-comm-note-toolbar__search {
  flex: 1 1 200px;
  min-width: 0;
}
.staff-comm-note-toolbar__filter {
  flex: 0 1 180px;
  min-width: 0;
}
.staff-comm-note-toolbar__count {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Table container — sits inside ``.staff-comm-note-records`` so it
 * NO LONGER carries its own border/radius (parent has them). Keeps
 * ``overflow-x:auto`` so the 520px-min-width table scrolls inside
 * the card on narrow phones rather than pushing the drawer wider
 * than the viewport. */
.staff-comm-note-table-wrap {
  background: var(--surface);
  overflow-x: auto;
}

/* feature/staff-communication-notes-edit — inline edit affordance.
 * The expand-row's body block sits above an action band carrying
 * the Edit button; in edit mode, the same expand-row is replaced
 * with the inline form. The "(edited)" subject-column tag is muted
 * so it doesn't compete with the subject text. */
.staff-comm-note-row__detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 12px 12px 12px;
  margin-top: 8px;
}
.staff-comm-note-row__edit-form {
  padding: 14px 14px 16px 14px;
  margin: 0 12px 0 12px;
  background: var(--surface);
  border-left: 3px solid var(--primary);
  border-radius: 0 6px 6px 0;
}
.staff-comm-note-row__edit-form .input {
  width: 100%;
}
.staff-comm-note-row__edited {
  margin-left: 6px;
  font-weight: 400;
  color: var(--text-soft);
  font-style: italic;
}

/* Pagination footer — Load-more button + "N more matches" hint at
 * the bottom of the records card. Mirrors the toolbar's tinted
 * --surface-2 chrome at the top so the card reads as a complete
 * "data card with header + body + footer" sandwich. Empty when
 * matched <= visible; in that case ``.staff-comm-note-footer:empty``
 * collapses to zero height so there's no orphan border line. */
.staff-comm-note-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.staff-comm-note-footer:not(:empty) {
  padding: 10px 12px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.staff-comm-note-footer__hint {
  flex: 0 0 auto;
}
.staff-comm-note-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.staff-comm-note-table thead th {
  background: #f8fafc;
  text-align: left;
  font-weight: 600;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.staff-comm-note-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  vertical-align: top;
}
.staff-comm-note-table__col-date {
  width: 22%;
  white-space: nowrap;
}
.staff-comm-note-table__col-cat {
  width: 14%;
  white-space: nowrap;
}
.staff-comm-note-table__col-subject {
  width: 44%;
  /* Subjects stay one line (truncated by the column itself if very
   * long); click-to-expand reveals the full body underneath. */
  overflow-wrap: anywhere;
}
.staff-comm-note-table__col-author {
  width: 20%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Row chrome — clickable; hover hints; expanded variant uses a
 * brand-tinted left bar so the eye reads the active row at a glance. */
.staff-comm-note-row {
  cursor: pointer;
}
.staff-comm-note-row:hover {
  background: color-mix(in srgb, var(--primary) 3%, transparent);
}
.staff-comm-note-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.staff-comm-note-row.is-expanded {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--primary);
}
.staff-comm-note-row__cat {
  color: var(--primary);
  background: var(--primary-soft-08);
  border: 0;
}

/* Inline expand-row — sits beneath the clicked row and shows the
 * full body. ``white-space: pre-wrap`` preserves the hard newlines a
 * manager types. */
.staff-comm-note-row__detail td {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: 0 0 12px 0;
}
.staff-comm-note-row__body {
  padding: 12px 14px;
  border-left: 3px solid var(--primary);
  margin: 0 12px 0 12px;
  background: var(--surface);
  border-radius: 0 6px 6px 0;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Small helper for the loading / empty-state cells inside the wrap. */
.staff-comm-note-table-wrap > .p12 {
  padding: 14px 16px;
}

@media (max-width: 560px) {
  .staff-comm-note-form__row {
    flex-direction: column;
    align-items: stretch;
  }
  .staff-comm-note-form__actions {
    justify-content: flex-end;
  }
  .staff-comm-note-toolbar__count {
    /* on phones the count drops below the controls instead of being
     * squeezed to the right and clipped. */
    margin-left: 0;
    width: 100%;
  }
}
.staff-card__subhead {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  margin-bottom: 8px;
}
/* Form grid helpers — explicit column count instead of relying on
   flex-grow rounding. ``--3`` for User details (First / Last /
   Email), ``--4`` for Employment (Start date / FTE / Contract /
   Notice). Both collapse to single column at narrow widths. */
.staff-form-grid {
  display: grid;
  gap: 14px;
}
.staff-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.staff-form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .staff-form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .staff-form-grid--3,
  .staff-form-grid--4 { grid-template-columns: 1fr; }
}

/* ---- Care Home Settings: left sub-nav + right content ---- */
.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}
.settings-layout > * {
  min-width: 0;
}
@media (max-width: 900px) {
  .settings-layout { grid-template-columns: 1fr; }
}
.settings-subnav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  position: sticky;
  top: 16px;
}

/* Narrow-viewport collapse — at ≤900px the .settings-layout grid
   already collapses to a single column, so the sub-nav stacks
   above the content. Without this rule the full vertical list
   eats most of the visible viewport before the user gets to any
   actual content; the collapsed default keeps only the active
   pane visible with a chevron affordance for tap-to-expand.
   ``.is-expanded`` is toggled by the global click handler in
   app.js (one site, applies to all four sub-nav surfaces:
   Care Home Settings, Platform Settings, Provider Settings,
   Edit User). */
@media (max-width: 900px) {
  .settings-subnav:not(.is-expanded) .settings-subnav-item:not(.is-active) {
    display: none;
  }
  .settings-subnav .settings-subnav-item.is-active::after {
    content: "▾";
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--muted, #64748b);
    transition: transform 0.15s;
  }
  .settings-subnav.is-expanded .settings-subnav-item.is-active::after {
    transform: rotate(180deg);
  }
}
.settings-subnav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text, #0f172a);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s;
}
.settings-subnav-item:hover { background: #f1f5f9; }
.settings-subnav-item.is-active {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}
.settings-subnav-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
}
.settings-pane {
  display: none;
  min-width: 0;
}
.settings-pane.is-active { display: block; }

/* M12.30 — Inner tab strip + panes for the Residents settings group.
   Hosts Finance + Dependency under a single sidebar entry. Mirrors
   the visual posture of the existing resident-profile sub-tabs so
   the manager mentally maps it to the same "tabs inside a panel"
   pattern. */
.settings-residents-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 16px;
}
.settings-residents-tab {
  appearance: none;
  background: transparent;
  border: none;
  padding: 10px 14px;
  margin-bottom: -1px;
  font-weight: 600;
  font-size: 0.92rem;
  color: #475569;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
}
.settings-residents-tab:hover {
  color: var(--text);
  background: #f8fafc;
}
.settings-residents-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.settings-residents-pane {
  display: none;
  min-width: 0;
}
.settings-residents-pane.is-active { display: block; }

/* Edit User → Access tab.
   Split into two visually distinct halves so the "inherited from
   role" vs "direct grants" distinction is unmistakable — common
   user question otherwise is "I unticked a grant but they still
   have access, why?" The divider + contrasting chip vs checkbox
   presentation answers that without reading help text. */
.edit-user-access-section { padding: 4px 0 8px; }
.edit-user-access-heading {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 6px 0;
}
.edit-user-access-divider {
  border: 0;
  border-top: 1px dashed #cbd5e1;
  margin: 16px 0;
}
.edit-user-access-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.edit-user-access-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  font-size: 0.82rem;
  cursor: default;
}
.edit-user-access-chip--inherited {
  background: #eef2f7;
  color: #475569;
}
.edit-user-access-row-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: #ffffff;
}
.edit-user-access-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 6px;
}
.edit-user-access-row:hover { background: #f8fafc; }
.edit-user-access-row input[type="checkbox"] { margin-top: 3px; }
.edit-user-access-row.is-redundant { opacity: 0.85; }
.edit-user-access-row.is-inherited {
  background: #f8fafc;
  cursor: not-allowed;
}
.edit-user-access-row.is-inherited:hover { background: #f1f5f9; }
.edit-user-access-row.is-inherited input[type="checkbox"] {
  cursor: not-allowed;
}
.edit-user-access-via {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e0e7ef;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 500;
}
.edit-user-access-via--direct {
  background: #dcfce7;
  color: #166534;
}
.edit-user-access-via--muted {
  background: transparent;
  color: #94a3b8;
  padding-left: 0;
  padding-right: 0;
}
.edit-user-access-nested {
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: #fbfdff;
}
.edit-user-access-nested summary {
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
}

/* Edit User settings-layout tweaks — the existing grid assumes a
   narrow sub-nav and a flexible content area; the Edit User panel
   inherits the layout but its cards want a bit more breathing room. */
.edit-user-layout {
  margin-top: 12px;
}

/* M16.18 — Provider Settings panel width parity with Edit User.
   ``.create-user-form`` (which wraps Edit User's settings-layout)
   already caps the form at 1080px so the right-pane cards don't
   stretch into a "lost in space" wide column on large viewports.
   Provider Settings inherits the same ``.settings-layout`` inside
   a bare ``.workspace-card`` with no equivalent cap, so its cards
   were rendering at full panel width. Match the 1080px cap so
   both panels read consistently. */
#organisationSettingsPanel .settings-layout {
  max-width: 1080px;
}

/* Menu access matrix (Care Home Settings → Menu access).
   A classic role × menu checkbox grid. Manager rows are styled
   disabled-grey so the read-only nature is visually obvious; the
   divider row between managers and editable staff rows carries a
   small muted-text label ("Staff roles — editable") to make the
   section break legible. */
.menu-access-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: #fff;
}
.menu-access-table {
  width: 100%;
  border-collapse: collapse;
}
.menu-access-table th,
.menu-access-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
  text-align: left;
  vertical-align: middle;
}
.menu-access-table thead th {
  background: #f8fafc;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  white-space: nowrap;
}
.menu-access-col,
.menu-access-cell {
  text-align: center !important;
  min-width: 96px;
}
.menu-access-role-label {
  font-weight: 600;
  white-space: nowrap;
}
.menu-access-row-manager {
  background: #f1f5f9;
  color: #64748b;
}
.menu-access-row-manager input[type="checkbox"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.menu-access-divider-row td {
  padding: 10px;
  background: #eef2f7;
  font-size: 0.82rem;
}
.menu-access-default-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e0e7ef;
  color: #475569;
  font-size: 0.7rem;
  font-weight: 500;
}
.menu-access-reset-btn {
  margin-left: 6px;
  font-size: 0.75rem;
  padding: 2px 6px;
}
.training-view-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
  vertical-align: middle;
}
.training-view-table tr:last-child td { border-bottom: 0; }
.training-view-row--expired     { background: #fef2f2; }
.training-view-row--not_started { background: #fff7ed; }
.training-view-row--expiring    { background: #fffbeb; }
.training-view-row--current     { background: #f0fdf4; }
.training-view-row--no_expiry   { background: #eff6ff; }
.training-view-row--awaiting_review { background: #eff6ff; }
.training-view-table .staff-name { font-weight: 600; color: #0f172a; }
.training-view-table .staff-role { font-size: 0.75rem; color: #64748b; margin-top: 2px; }

/* ---- Modern file-input drop zone ---- */
.file-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 16px;
  border: 1.5px dashed var(--border, #cbd5e1);
  border-radius: 10px;
  background: #f8fafc;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.file-drop:hover,
.file-drop.is-dragover {
  background: #eff6ff;
  border-color: #3b82f6;
}
.file-drop.has-file {
  background: #ecfdf5;
  border-color: #10b981;
  border-style: solid;
}
.file-drop-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-drop-icon {
  color: #64748b;
}
.file-drop.has-file .file-drop-icon { color: #059669; }
.file-drop-primary {
  font-size: 0.9rem;
  font-weight: 500;
  color: #0f172a;
  word-break: break-all;
}
.file-drop-secondary {
  font-size: 0.75rem;
  color: #64748b;
}

/* ---- Supervision form (unauth'd, /ui/supervision/form/<token>) ----
   This page has no app chrome — a standalone card-on-background view
   the supervisee reaches via a copy-paste link. Tokens in var(...)
   cascade through from the main styles.css above; where absent we
   fall back to literal values so the page renders correctly if only
   this file is loaded. */
body.supervision-form-page { background: #f5f7fa; }
.supervision-form-wrap {
  max-width: 680px;
  margin: 40px auto;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.supervision-form-wrap h1 { margin-top: 0; font-size: 1.4rem; }
.supervision-form-wrap .meta { color: var(--text-muted, #6b7280); font-size: 0.88rem; }
.supervision-form-question { margin-top: 18px; }
.supervision-form-question label { display: block; font-weight: 500; margin-bottom: 6px; }
.supervision-form-question textarea,
.supervision-form-question input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  font: inherit;
}
.supervision-form-question textarea { min-height: 80px; }
.supervision-form-submit {
  margin-top: 22px;
  padding: 10px 20px;
  background: var(--primary, #2563eb);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
}
.supervision-form-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.supervision-form-status {
  margin-top: 12px;
  padding: 10px;
  border-radius: 6px;
}
.supervision-form-status.success { background: #d1fae5; color: #065f46; }
.supervision-form-status.error { background: #fee2e2; color: #991b1b; }
.supervision-form-banner {
  padding: 12px 14px;
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 0.88rem;
}

/* =========================================================
 * Supervision & Appraisal module
 * Re-uses training's .count-pill--* tokens for status
 * parity. Layout: three tabs, split-pane staff rail + detail.
 * ========================================================= */
.sup-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #e2e8f0;
}
.sup-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
}
.sup-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.sup-tab:hover { color: #0f172a; }

.sup-tab-body { min-height: 200px; }

.sup-split {
  display: grid;
  /* Same responsive shape as .training-workspace — both rails
     shrink together when the viewport narrows instead of pinning
     the left at 400px and crushing the right. */
  grid-template-columns: minmax(min(280px, 40%), clamp(320px, 32%, 520px)) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  /* Match Training: at narrow viewports stack rail above detail
     rather than sharing a single row and compressing both. */
  .sup-split { grid-template-columns: 1fr; }
}
.sup-rail {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}
.sup-rail-list { display: flex; flex-direction: column; }
.sup-rail-row {
  display: block;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  padding: 10px 12px;
  cursor: pointer;
  width: 100%;
}
.sup-rail-row:hover { background: #f8fafc; }
.sup-rail-row.is-selected { background: #eff6ff; }
.sup-rail-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.sup-rail-name { font-weight: 600; color: #0f172a; }
.sup-rail-meta { font-size: 0.82rem; }

.sup-detail {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
  min-height: 300px;
  /* Grid items default to min-width: auto (= content min size), so a
     wide session-history table (Date/Supervisor/Status/Group/Actions
     + several buttons per row) pushes this column beyond its allocated
     width and overflows the viewport. Force 0 so the grid can shrink
     us. Horizontal overflow is now scoped to ``.sup-history-scroll``
     (the table wrapper) so scrolling the history right doesn't drag
     the static header (with the Record-new button) out of view. */
  min-width: 0;
  overflow-x: clip;
}
.sup-history-scroll {
  min-width: 0;
  overflow-x: auto;
}
.sup-detail-audit-footer {
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  color: #334155;
  font-size: 0.9rem;
}
.sup-detail-audit-footer > div {
  margin: 2px 0;
}

/* Training doc rejection banner — shown at the top of the
   View-document modal when a doc has review_status='rejected'.
   Meant to be loud so a staff member opening their own rejected
   cert can't miss the reason. Same visual language as the
   Supervision change-request banner. */
.training-doc-reject-banner {
  border: 1px solid #fecaca;
  background: #fef2f2;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  color: #7f1d1d;
}
.training-doc-reject-banner__title {
  font-weight: 600;
  margin-bottom: 4px;
  color: #991b1b;
}
.training-doc-reject-banner__reason {
  white-space: pre-wrap;
  color: #7f1d1d;
}

/* Training doc notes banner — same shape as the reject banner but
   neutral-blue so it reads as informational rather than alarming.
   Surfaces date-edit notes and original upload notes for anyone
   who opens the doc later. */
.training-doc-notes-banner {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  color: #1e3a8a;
}
.training-doc-notes-banner__title {
  font-weight: 600;
  margin-bottom: 4px;
  color: #1e40af;
}
.training-doc-notes-banner__body {
  white-space: pre-wrap;
  color: #1e3a8a;
}

.sup-detail-cr-banner {
  border: 1px solid #fecaca;
  background: #fef2f2;
  border-radius: 6px;
  padding: 10px 12px;
  color: #7f1d1d;
}
.sup-detail-cr-entry {
  padding: 6px 0;
}
.sup-detail-cr-entry + .sup-detail-cr-entry {
  border-top: 1px dashed #fecaca;
  margin-top: 6px;
  padding-top: 10px;
}
.sup-detail-cr-banner__title {
  font-weight: 600;
  margin-bottom: 4px;
  color: #991b1b;
  display: flex;
  align-items: center;
}
.sup-detail-cr-banner__reason {
  white-space: pre-wrap;
  color: #7f1d1d;
}
.sup-detail-cr-banner__meta {
  color: #9f1239;
  font-size: 0.82rem;
  margin-top: 4px;
}

.sup-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.sup-settings-card {
  padding: 16px;
  min-width: 0;
  overflow-x: hidden;
}
.sup-cadence-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.sup-cadence-input {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sup-cadence-input .input { width: 120px; }

#supervisionTemplatesList,
#supervisionAllocationsList {
  min-width: 0;
  overflow-x: auto;
}

#supervisionTemplatesList .table,
#supervisionAllocationsList .table {
  /* M16.10 — Switched from table-layout:fixed to auto so the
     actions column auto-sizes to the WIDEST row (the "(copy)"
     rows carry View/Duplicate/Allocate/Set as default/Edit/
     Archive — wider than the seeded 3-button rows). With auto
     layout, the column's right edge is the same for every row,
     so Archive on (copy) rows aligns vertically with Allocate
     on non-copy rows — both hug the column's right edge. The
     parent's overflow-x:auto handles horizontal overflow. */
  width: auto;
  table-layout: auto;
  min-width: 100%;
}

#supervisionTemplatesList .table td,
#supervisionAllocationsList .table td,
#supervisionTemplatesList .table th,
#supervisionAllocationsList .table th {
  vertical-align: top;
}

#supervisionTemplatesList .row,
#supervisionAllocationsList .row {
  flex-wrap: wrap;
  min-width: 0;
}

#supervisionTemplatesList strong,
#supervisionAllocationsList strong {
  overflow-wrap: anywhere;
}

.sup-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px;
}
.sup-staff-pick {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 6px;
  border-radius: 4px;
}
.sup-staff-pick:hover { background: #f8fafc; }
.sup-staff-pick .muted { font-size: 0.82rem; margin-left: auto; }

.sup-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sup-role-pick {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border-radius: 4px;
}
.sup-role-pick:hover { background: #f8fafc; }

.sup-tpl-q-row {
  display: grid;
  grid-template-columns: 28px 28px 2fr 80px auto;
  gap: 8px;
  margin-bottom: 6px;
  align-items: center;
}
.sup-tpl-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: #94a3b8;
  cursor: grab;
  user-select: none;
}
.sup-tpl-drag-handle:hover { background: #f1f5f9; color: #334155; }
/* M16.10 — .is-dragging style is now defined globally in the
   "Drag-drop visual feedback" block (search for that comment).
   Legacy opacity-based rules removed for consistency. */
.sup-tpl-row-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  color: #64748b;
}
.sup-tpl-row-actions {
  display: inline-flex;
  gap: 4px;
}

.sup-record-mode {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: #f8fafc;
  border-radius: 6px;
}

/* Sortable table header (Training + Supervision matrices).
 * Click indicator via a small ↕ arrow; active column darkens the
 * arrow to ↑ / ↓. Cursor hints interactivity. */
.sortable-th {
  cursor: pointer;
  user-select: none;
}
.sortable-th:hover { background: #f1f5f9; }
.sort-arrow {
  color: #94a3b8;
  font-size: 0.8em;
  margin-left: 4px;
}
.sort-arrow.is-active { color: #2563eb; }

.sup-tpl-q-head {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 2px 4px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 6px;
}

/* Supervision staff-rail: sortable header (chips now use Training's
 * .training-filter-bar / .training-filter-chip between KPI + table) */
.sup-rail-header {
  display: flex;
  justify-content: space-between;
  /* Match the training table thead style (slate-50 background, same
     padding) so supervision and training read as the same component
     family — was a flat white row that looked inconsistent next to
     training's tinted header. */
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  font-weight: 600;
}
.sup-rail-header .sortable-th { cursor: pointer; }
.sup-rail-header .sortable-th:hover { color: #0f172a; }

/* KPI percentage badge (smaller, faded next to the main number) */
.kpi-pct { font-size: 0.7em; font-weight: 400; }

/* Training + Supervision solo mode: a non-manager only sees their
 * own row, so the left list column collapses and the detail pane
 * fills the workspace. */
.training-workspace--solo { grid-template-columns: 1fr; }
.training-workspace--solo .training-staff-list { display: none; }

.sup-split--solo { grid-template-columns: 1fr; }
.sup-split--solo .sup-rail { display: none; }

/* Back-to-provider button inline on the scope-context line. Pushes
 * right so the label (Care Home: X) stays left-aligned next to the
 * icon and the action sits flush right. */
.scope-context-back { margin-left: auto; white-space: nowrap; }

/* Locked supervision session detail: grey tint + "not allowed"
 * cursor on every input so staff feel the form is read-only. */
.sup-detail-readonly .input[disabled],
.sup-detail-readonly textarea[disabled],
.sup-detail-readonly input[disabled],
.sup-detail-readonly select[disabled] {
  background: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}
.sup-detail-readonly [disabled]:hover { cursor: not-allowed; }

/* Staff banner: "This form has been amended since your last
 * submission. Please review and acknowledge again." */
.sup-amend-banner {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  color: #92400e;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.88rem;
}

/* Manager-side change-request card in the staff detail pane. */
.sup-change-requests {
  border: 1px solid #fbbf24;
  background: #fffbeb;
  border-radius: 6px;
  padding: 10px 12px;
}
.sup-change-requests__title {
  font-weight: 600;
  color: #92400e;
  margin-bottom: 6px;
}
.sup-change-request + .sup-change-request {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #fcd34d;
}
.sup-change-request__meta { font-size: 0.8rem; }
.sup-change-request__reason {
  white-space: pre-wrap;
  color: #1f2937;
  margin-top: 4px;
}

/* Allocation rules table: role/user chips wrap neatly inside cells.
   The flex layout lives on an inner wrapper, not on the <td> itself —
   ``display: flex`` on a <td> takes it out of the table-row flow and
   adjacent cells stack vertically instead of sitting side-by-side,
   which previously made "Individual users" appear to collapse into
   the "Roles covered" column. */
.sup-alloc-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  overflow-wrap: anywhere;
}

/* Count-pill base shape, applied globally so allocation-table chips
   render as proper pills (the Training Staff list variant was the
   only place the base shape applied before). */
.count-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* Keep the Supervision template + allocation action buttons on a
   single right-aligned row so the last button lines up with the
   right edge of the table — restored to pre-M16.10 behaviour. The
   parent list container's existing horizontal-scroll mechanism
   handles the wider "(copy)" rows when the viewport is narrow. */
#supervisionTemplatesList .table td.sup-actions-cell,
#supervisionAllocationsList .table td.sup-actions-cell {
  white-space: nowrap;
  text-align: right;
}
#supervisionTemplatesList .table td.sup-actions-cell .btn,
#supervisionAllocationsList .table td.sup-actions-cell .btn {
  margin-left: 4px;
}

/* The list containers scroll horizontally on narrow viewports so a
   long action-button row can't squash the chip columns. */
#supervisionTemplatesList,
#supervisionAllocationsList {
  overflow-x: auto;
}

@media (max-width: 1100px) {
  .sup-cadence-row {
    grid-template-columns: 1fr;
  }
  #supervisionTemplatesList .table,
  #supervisionAllocationsList .table {
    table-layout: auto;
  }
  #supervisionTemplatesList .table td:last-child,
  #supervisionAllocationsList .table td:last-child {
    width: auto;
  }
}

/* Training access control — grant list rows + section headers in the
   Training settings pane. Shape intentionally echoes
   supervisionTemplatesList so managers scanning both panes get the
   same visual rhythm. */
.training-access-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.training-access-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.training-access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--surface, #fff);
}
.training-access-row .tag {
  background: #eef2ff;
  color: #3730a3;
  border-color: #c7d2fe;
}

/* ----- M9 compliance-documents (feature/compliance-documents) ---------
 * Reuses the M8 audit-template slide-over chrome for the history
 * drawer, so only the document-row-specific surfaces need their own
 * rules here (micro-card in the name cell, versions-list empty state,
 * action-column layout for Upload + History buttons side-by-side). */

/* Per-row micro-card — renders under the name cell for document
 * rows with a current_document payload. Uses a muted surface so
 * it reads as metadata rather than competing with the name.
 * Block-level so the card always sits below the name+type line
 * instead of flowing inline (the previous ``inline-block`` broke
 * into the Cadence column on wider rows). */
.compliance-document-card {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--surface-muted, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  font-size: 0.8rem;
  line-height: 1.3;
}
.compliance-document-card__filename {
  font-weight: 600;
  color: var(--text, #111827);
  word-break: break-all;
}
.compliance-document-card__loc {
  font-style: italic;
}

/* Document-row action cell. Replace + History sit side-by-side when
 * there's room, otherwise wrap. Wrapper div avoids the
 * ``display: flex`` on a <td> breaking table-cell semantics in some
 * browsers. */
.compliance-document-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Versions drawer body — styled to match the audit-completion drawer
 * table cadence so both drawers feel like siblings. Empty state
 * centers the message + keeps the panel from collapsing when the
 * list is still loading. */
.compliance-document-versions-empty {
  color: var(--muted-text, #6b7280);
  padding: 24px 16px;
  text-align: center;
}
.compliance-document-versions-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

/* Compliance-document history drawer shell. Widened from the original
 * 640px to 760px (feature/document-expiry-defaults-settings-and-compliance-upload-polish)
 * because the 5-col table (Version / File / Uploaded / Expiry / Actions)
 * with both Download + Restore buttons in the action cell was clipping
 * "Restore" past the right edge at 640px on real filenames. Explicit
 * backdrop so clicking off the panel closes it. */
.compliance-document-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.compliance-document-drawer.hidden {
  display: none;
}
.compliance-document-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
}
.compliance-document-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(760px, 95vw);
  background: #ffffff;
  box-shadow: -4px 0 18px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  padding: 18px 22px;
  overflow: hidden;
}
/* Long filenames (e.g. ``inspection-pack-20260522-194536.docx``) used to
   push the actions column off-screen. Wrap on word/grapheme boundaries
   inside the versions table — keeps Download + Restore on one row at
   the right without the body needing a horizontal scrollbar. */
.compliance-document-drawer-body table td {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.compliance-document-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.compliance-document-drawer-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text, #111827);
}
.compliance-document-drawer-subtitle {
  font-size: 0.85rem;
  color: var(--muted-text, #6b7280);
  margin-top: 2px;
}
.compliance-document-drawer-body {
  flex: 1 1 auto;
  overflow: auto;
}

/* Downloadable filename in the per-row micro-card — visually a link
 * so users understand the filename itself triggers a download. */
.compliance-document-card__filename.is-downloadable {
  color: var(--link, #2563eb);
  cursor: pointer;
  text-decoration: underline;
}
.compliance-document-card__filename.is-downloadable:hover {
  text-decoration: none;
}

/* Sortable-table contract (documented in docs/frontend-guidelines.md).
 * Matches the existing Training / Supervision convention: a muted ↕
 * glyph for an inactive column, a bold ↑ / ↓ (in accent blue) for the
 * active sort. ``makeTableSortable`` in app.js injects the
 * ``.sort-indicator`` span into sortable <th>s and updates its
 * text + is-active class on sort changes. */
.table th[data-sort-key] {
  cursor: pointer;
  user-select: none;
  /* Keep the injected ``.sort-indicator`` arrow on the same line as a
     multi-word header (e.g. "Last completed", "Next due" on the Audit
     table). Without nowrap the arrow wrapped onto a second line and
     made the header row tall. Mirrors the ``.admin-table`` +
     ``.sortable-th`` headers, which already nowrap. */
  white-space: nowrap;
}
.table th[data-sort-key]:hover {
  color: var(--text, #0f172a);
}
/* Platform Reports uses .admin-table (not .table); give its sortable
   headers the same click affordance. The .sort-indicator glyph is
   already styled globally below. */
.admin-table th[data-sort-key] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.admin-table th[data-sort-key]:hover {
  color: var(--text, #0f172a);
}
.sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.7rem;
  opacity: 0.45;
  color: var(--muted-text, #6b7280);
}
.sort-indicator.is-active {
  opacity: 1;
  color: #2563eb;
}

/* ---- Nav auth-flash gate --------------------------------------------
 * Prevents flash-of-unauthorized nav items on page refresh before
 * ``updateNavGroupScopes`` has had a chance to resolve role + scope.
 *
 * Three separate flash surfaces are covered:
 *
 *  1. Care Home group — all nav items inside default to visible in
 *     the markup; staff users shouldn't see Dashboard / Actions /
 *     etc. Scope to .nav-item so the "Care Home" header itself stays
 *     visible (the group is always shown; only items are role-gated).
 *
 *  2. Provider group — the ``Provider ▾`` header + the two items
 *     authored without ``hidden`` (company-overview, company-care-
 *     homes) flash for non-provider users. Hide the whole group so
 *     the header doesn't flicker either.
 *
 *  3. Platform group — mirrors the provider case for non-super-
 *     admin users.
 *
 * ``updateNavGroupScopes`` removes the ``nav-pending`` body class on
 * its first successful run (tail of the function), so this gate only
 * applies to the pre-auth window. ``visibility: hidden`` (not
 * ``display: none``) preserves the sidebar width so it doesn't
 * collapse + re-inflate. */
body.nav-pending #leftNavCareHomeGroup .nav-item[data-nav-section] {
  visibility: hidden;
}
body.nav-pending #leftNavPlatformGroup,
body.nav-pending #leftNavCompanyGroup {
  visibility: hidden;
}

/* ---- M10 system-UX / panel-state vocabulary ------------------------
 * Shared chrome for loading / empty / error states across every
 * panel. Retrofitting the existing bespoke ``_setXxxError`` helpers
 * to this vocabulary is Phase-4 work; the base classes are defined
 * here in Phase 1 so the retrofit PRs are pure call-site changes.
 *
 * DOM shape:
 *   <div class="panel-state panel-state--<kind>">
 *     <div class="panel-state__icon">...</div>
 *     <div class="panel-state__title">...</div>
 *     <div class="panel-state__body">...</div>
 *     <div class="panel-state__ctas">...</div>
 *   </div>
 */
.panel-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  gap: 10px;
  border-radius: 6px;
  border: 1px solid var(--line, #d8e2ef);
  background: var(--surface, #ffffff);
  color: var(--text, #0b1324);
}
.panel-state__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--surface-2, #f7fafe);
  color: var(--text-muted, #6b7d92);
  font-size: 18px;
  margin-bottom: 2px;
}
.panel-state__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text, #0b1324);
}
.panel-state__body {
  font-size: 0.85rem;
  color: var(--text-muted, #6b7d92);
  max-width: 420px;
  line-height: 1.45;
}
.panel-state__detail {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7d92);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--surface-2, #f7fafe);
  border: 1px solid var(--line, #d8e2ef);
  border-radius: 6px;
  padding: 6px 10px;
  max-width: 520px;
  word-break: break-all;
  margin-top: 2px;
}
.panel-state__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.panel-state--loading {
  color: var(--text-muted, #6b7d92);
}
.panel-state--loading .panel-state__icon {
  animation: panel-state-spin 1.1s linear infinite;
  border: 2px solid var(--line, #d8e2ef);
  border-top-color: var(--primary, #120A8F);
  background: transparent;
  /* Spinner is the one place a circle is correct — a rotating square
   * wouldn't read as a loading indicator. */
  border-radius: 50%;
}
.panel-state--loading .panel-state__icon::before { content: ""; }
@keyframes panel-state-spin {
  to { transform: rotate(360deg); }
}
.panel-state--empty .panel-state__icon {
  background: var(--surface-2, #f7fafe);
  color: var(--text-muted, #6b7d92);
}
.panel-state--error {
  border-color: #f1c7cb;
  background: var(--danger-soft, #fff1f2);
}
.panel-state--error .panel-state__icon {
  background: #fce5e7;
  color: var(--danger, #cf2f36);
}
.panel-state--error .panel-state__title {
  color: var(--danger, #cf2f36);
}

/* Thin top-bar banner surfaced when ``window`` goes offline. Paired
 * with ``panel-state--error`` cards inside every panel so the user
 * gets both a global "we lost the server" signal and a local
 * retry anchor. */
.sys-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--danger, #cf2f36);
  color: #ffffff;
  padding: 8px 16px;
  font-size: 0.85rem;
  text-align: center;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}
.sys-offline-banner.hidden { display: none; }

/* Full-page error shells (/ui/error/<code>/) — the static pages
 * reuse the auth-card chrome but swap the form for a panel-state
 * card. ``.error-page-shell`` widens the card slightly, drops the
 * form-specific left-aligned padding, and lets the inner
 * ``.panel-state`` chrome handle centering + CTAs. */
.error-page-shell {
  padding: 32px 24px;
  min-width: min(420px, 92vw);
  max-width: 520px;
}
.error-page-shell .panel-state {
  border: 0;
  background: transparent;
  padding: 16px 0 0;
}
.auth-page--error .auth-card-head {
  margin-bottom: 0;
}

/* Meetings module — settings tables.
   - ``vertical-align: middle`` on cells so rows whose actions wrap to
     multiple lines don't push the Name cell to the top.
   - ``.meetings-row-actions`` keeps all action buttons on a single
     flex row with consistent spacing; wraps cleanly on narrow viewports
     rather than breaking row alignment. */
.meetings-settings-table td,
.meetings-settings-table th {
  vertical-align: middle;
}
.meetings-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.meetings-row-actions .btn {
  white-space: nowrap;
}

/* Active templates: one table per meeting type. Pin the column
   widths via ``table-layout: fixed`` so every per-type table
   renders identical column widths regardless of its row content
   (2-button rows vs 5-button rows, short vs long template names
   etc.) — otherwise each table auto-sized independently and the
   columns staggered down the page. */
.meetings-tpl-table--active {
  table-layout: fixed;
  width: 100%;
}
.meetings-tpl-table--active th:nth-child(1),
.meetings-tpl-table--active td:nth-child(1) {
  width: auto;
}
.meetings-tpl-table--active th:nth-child(2),
.meetings-tpl-table--active td:nth-child(2) {
  width: 160px;
}
.meetings-tpl-table--active th:nth-child(3),
.meetings-tpl-table--active td:nth-child(3) {
  width: 360px;
}

/* Archived templates: flat table, Type column added. Pin widths
   so the extra column doesn't shove the Actions cell around. */
.meetings-tpl-table--archived {
  table-layout: fixed;
  width: 100%;
}
.meetings-tpl-table--archived th:nth-child(1),
.meetings-tpl-table--archived td:nth-child(1) {
  width: auto;
}
.meetings-tpl-table--archived th:nth-child(2),
.meetings-tpl-table--archived td:nth-child(2) {
  width: 200px;
}
.meetings-tpl-table--archived th:nth-child(3),
.meetings-tpl-table--archived td:nth-child(3) {
  width: 160px;
}
.meetings-tpl-table--archived th:nth-child(4),
.meetings-tpl-table--archived td:nth-child(4) {
  width: 260px;
}

/* Meetings module — attachments list in the record modal.
   One row per file: filename (flex-grow), size hint (muted),
   View / Delete buttons. Matches the row-actions pattern used in
   the templates table so button spacing stays consistent. */
.meetings-attachments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}
.meetings-attachment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.meetings-attachment-row:last-child { border-bottom: none; }
.meetings-attachment-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meetings-attachment-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Meetings module — history link in the record modal footer.
   Muted to avoid competing with the Save / Approve buttons;
   underlined on hover. */
.meetings-history-link {
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
}
.meetings-history-link:hover {
  color: #0f172a;
}

/* Meetings module — attachment previewer modal. Uses a wider card
   + tall body so PDFs / rendered DOCX HTML have space to read.
   ``iframe`` fills the body; mammoth-converted HTML renders inside
   a scrollable wrapper with sensible text defaults. */
.meetings-doc-viewer-card {
  width: min(960px, 96vw);
  max-height: 92vh;
}
.meetings-doc-viewer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.meetings-doc-viewer-body {
  height: 76vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.meetings-doc-viewer-body > iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #f8fafc;
}
.meetings-doc-viewer-body > .meetings-doc-viewer-html {
  flex: 1 1 auto;
  overflow: auto;
  /* docx-preview renders each page as a white "sheet" at the
     original page size. Put those sheets on a grey backdrop so
     the page boundaries read like a print preview. */
  padding: 20px 0;
  background: #e5e7eb;
  color: #0f172a;
}
.meetings-doc-viewer-body > .muted {
  padding: 24px 28px;
}
/* docx-preview's own wrapper — centre the page columns and add
   breathing room between pages. ``docx-wrapper`` is the class the
   library puts on its root when ``inWrapper: true``; each ``section``
   inside is one rendered page. */
.meetings-doc-viewer-html .docx-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
}
.meetings-doc-viewer-html .docx-wrapper > section.docx {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15,23,42,0.1), 0 1px 2px rgba(15,23,42,0.06);
}

/* Meetings module — required-question highlight. Painted when an
   Approve-and-sign attempt fails because a required answer is
   blank; cleared on the next keystroke inside the same wrapper. */
.meetings-required-missing {
  border: 1px solid #be123c;
  border-radius: 6px;
  padding: 6px 8px;
  background: #fff1f2;
}
.meetings-required-missing > .label { font-weight: 600; }

/* Meetings module — auto-save indicator. Sits inline in the
   modal header (between title and Close) so the user can glance
   at save state without taking their eyes off the form. Muted
   by default; ``--error`` variant turns red to flag a failed
   save attempt. */
.meetings-autosave-status {
  margin-left: auto;
  margin-right: 10px;
  font-size: 0.85rem;
  color: var(--muted, #64748b);
  white-space: nowrap;
}
.meetings-autosave-status--error {
  color: #be123c;
}

/* Meetings module — cards grid override. The shared ``.kpi-grid``
   uses ``minmax(150px, 1fr)`` which stretches a lone card across
   the full viewport width. Staff-only users see exactly one card
   (Staff), so cap each tile at 260px and left-align the row. */
#meetingsCardsGrid.kpi-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 260px));
  justify-content: start;
}

/* Meetings module — attendee multi-select picker (Staff meetings).
   Inline expand/collapse to avoid the modal overflow clipping that
   a positioned menu would hit. Flat-design 6px radius to match the
   app-shell rule. */
.meetings-attendee-picker { margin-top: 4px; }
.meetings-attendee-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  width: 100%;
  font: inherit;
}
.meetings-attendee-btn:hover { background: #f8fafc; }
.meetings-attendee-menu {
  display: none;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 6px 10px;
  max-height: 240px;
  overflow: auto;
}
.meetings-attendee-picker.expanded .meetings-attendee-menu { display: block; }
.meetings-attendee-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 0.95rem;
}
.meetings-attendee-summary { margin-top: 6px; }
.meetings-attendee-names {
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
}
.meetings-attendee-picker.locked .meetings-attendee-btn {
  background: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}

/* ============================================================
   M11 — Care Home Audit Tool
   Category tab strip, audit-list table action pills, inline
   trend + pie charts, finding rows, checklist editor grid.
   Flat-design convention (6px radius; muted palette).
   ============================================================ */

.cha-audit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
}
.cha-audit-tab {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cha-audit-tab:hover { background: #e2e8f0; }
.cha-audit-tab.is-active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}
.cha-audit-tab__count {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-size: 0.75rem;
  padding: 1px 7px;
}
.cha-audit-tab:not(.is-active) .cha-audit-tab__count {
  background: #cbd5e1;
  color: #475569;
}

.cha-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: capitalize;
}
.cha-pill--overdue     { background: #fee2e2; color: #b91c1c; }
.cha-pill--due-soon    { background: #fef3c7; color: #92400e; }
.cha-pill--never       { background: #e2e8f0; color: #475569; }
.cha-pill--current     { background: #d1fae5; color: #065f46; }
/* Soft-superseded allocation history rows (residents_10) wear
   this pill so the operator can spot the original-vs-replacement
   chain at a glance. Tooltip on the pill shows when + why. */
.cha-pill--muted       { background: #e2e8f0; color: #475569; }
.cha-pill--finding     { background: #fef3c7; color: #92400e; }
/* Coverage pills sit next to --finding on the audit list row and
   show how many of the latest run's open findings already have at
   least one active audit-action. Full = all covered (green);
   partial = some findings still need a remediation task (neutral
   amber). */
.cha-pill--coverage-full    { background: #d1fae5; color: #065f46; }
.cha-pill--coverage-partial { background: #fef3c7; color: #92400e; }
.cha-pill--draft       { background: #e2e8f0; color: #475569; }
.cha-pill--completed   { background: #d1fae5; color: #065f46; }
.cha-pill--cancelled   { background: #fee2e2; color: #b91c1c; }
.cha-pill--open                { background: #fef3c7; color: #92400e; }
.cha-pill--in-progress         { background: #dbeafe; color: #1d4ed8; }
.cha-pill--closed              { background: #d1fae5; color: #065f46; }
.cha-pill--re-audited-passed   { background: #d1fae5; color: #065f46; }
.cha-pill--re-audited-failed   { background: #fee2e2; color: #b91c1c; }
.cha-pill--severity-low    { background: #e2e8f0; color: #475569; }
.cha-pill--severity-medium { background: #fef3c7; color: #92400e; }
.cha-pill--severity-high   { background: #fee2e2; color: #b91c1c; }

.cha-score {
  font-weight: 600;
  font-size: 1.05rem;
  color: #0f172a;
}

/* Audit-list rows are clickable (open the detail page). Signal it
   with a pointer cursor + visible hover lift + a right-aligned
   chevron on the name cell. Action-column buttons keep their own
   cursor / click handling via ``e.stopPropagation`` in the JS. */
#chaAuditTable tbody tr[data-cha-row] {
  cursor: pointer;
  transition: background 0.12s;
}
#chaAuditTable tbody tr[data-cha-row]:hover {
  background: #eff6ff;
}
#chaAuditTable tbody tr[data-cha-row]:hover td:first-child strong {
  color: #2563eb;
}
#chaAuditTable tbody tr[data-cha-row] td:first-child strong::after {
  content: " ›";
  color: #94a3b8;
  font-weight: 400;
  margin-left: 4px;
  transition: color 0.12s, transform 0.12s;
  display: inline-block;
}
#chaAuditTable tbody tr[data-cha-row]:hover td:first-child strong::after {
  color: #2563eb;
  transform: translateX(2px);
}
.cha-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cha-detail-accordion {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 16px;
  background: #ffffff;
}
.cha-detail-accordion summary {
  cursor: pointer;
  font-weight: 600;
  color: #0f172a;
}
.cha-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cha-chart-row {
  display: grid;
  /* Trend (left) narrower, pie (right) gets the extra space so the
     segments are large enough to read at a glance. */
  grid-template-columns: 3fr 4fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .cha-chart-row { grid-template-columns: 1fr; }
  .cha-detail-grid { grid-template-columns: 1fr; }
}
.cha-chart-card {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
  background: #ffffff;
}
.cha-chart-frame { min-height: 200px; }
.cha-trend-svg { width: 100%; height: auto; display: block; }
.cha-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 6px 8px 0;
  font-size: 0.8rem;
  color: #475569;
}
.cha-trend-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cha-trend-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}
/* Next-audit-due nudge — radio list inside the "bring forward"
   modal. Each option reads as a single row so the admin can click
   anywhere on the row to pick it (the native radio + label
   behaviour handles the hit target). */
.cha-next-due-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cha-next-due-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  background: #ffffff;
  transition: background 0.12s;
}
.cha-next-due-option:hover { background: #f8fafc; }
.cha-next-due-option input[type="radio"] { margin: 0; }

/* Amber "this action is logged in the audit trail" banner — shown
   inside Edit-finding (and future audit-sensitive modals) so the
   user can't miss that their changes are tamper-evident. */
.cha-audit-warning-banner {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 12px;
}
.cha-audit-warning-banner strong { color: #78350f; }

/* Action-plan page: per-run collapsible sections. Latest run is
   expanded by default, historic runs collapse beneath so the admin
   can skim every run's remaining work on one page without jumping
   between per-run views. */
.cha-action-plan-run {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 10px;
  background: #fff;
}
.cha-action-plan-run-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.92rem;
}
.cha-action-plan-run-summary::-webkit-details-marker { display: none; }
.cha-action-plan-run-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.cha-action-plan-run[open] > .cha-action-plan-run-summary::before {
  transform: rotate(90deg);
}
.cha-action-plan-run-title { display: flex; align-items: center; }
.cha-action-plan-run-meta {
  font-size: 0.82rem;
  font-weight: 400;
}
.cha-action-plan-run-body {
  border-top: 1px solid var(--line);
  padding: 8px 14px 12px;
}
.cha-action-plan-run-body > * + * { margin-top: 8px; }

/* "Assign to me" shortcut shown under the team-member select on
   the specific-person assignee tab in the audit-action modal.
   Hidden when the current user isn't a roster member of the home. */
.cha-assign-to-me-wrap {
  margin-top: 6px;
  display: flex;
  justify-content: flex-start;
}

/* Recent-staff quick-pick row above the team-member dropdown in
   the audit-action modal. Stores the last 5 assignees per care
   home in localStorage so common picks are one click away.
   Hidden when there's nothing to show (first use, or every
   recent has since left the home). */
.cha-recent-staff {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Findings panel header on the audit-tool detail page. Lays the
   "Findings from the latest audit" label and the "Show closed"
   tickbox out as a flex row so the toggle docks to the right
   without needing a margin hack. */
.cha-detail-findings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cha-detail-findings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  color: var(--text-muted, #4b5563);
}
.cha-detail-findings-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.cha-recent-staff-chip {
  border: 1px solid var(--border, #d0d5dd);
  background: var(--bg-subtle, #f6f7f9);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  line-height: 1.2;
}
.cha-recent-staff-chip:hover {
  background: var(--bg-hover, #eaeef3);
}
.cha-recent-staff-chip.is-selected {
  background: var(--brand-bg, #e6f0ff);
  border-color: var(--brand, #2563eb);
}

/* Quick-pick chips under the Due-by date in the audit-action modal.
   Visual: small pill row beneath the date input. Clicking a chip
   stamps the input to today + N days and triggers the next-audit-due
   validation. */
.cha-due-quickpicks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 4px;
}
.cha-due-quickpicks .btn {
  padding: 4px 10px;
  font-size: 0.8rem;
  border-radius: 999px;
}

/* Soft-red inline warning shown under the date row when the chosen
   due date lands after the audit's next_audit_due — fires on chip
   click or manual date change. Non-blocking (user can still save)
   but highly visible so they see the conflict before submit. */
.cha-audit-action-due-warning {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.82rem;
  line-height: 1.4;
  margin-top: 8px;
  margin-bottom: 4px;
}

.cha-trend-legend-swatch--dashed {
  background: repeating-linear-gradient(
    to right,
    #2563eb 0 4px,
    transparent 4px 7px
  ) !important;
}
.cha-pie-wrap { display: flex; gap: 20px; align-items: center; }
.cha-pie-svg { width: 240px; height: 240px; flex: 0 0 240px; max-width: 100%; }
.cha-pie-legend { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.cha-pie-legend-row { display: flex; align-items: center; gap: 6px; }
.cha-pie-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.cha-findings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Audit matrix table — sticky header, RAG-tinted cells. Border colour
   stays neutral so the per-cell background does the work. */
.cha-audit-matrix-wrap {
  overflow-x: auto;
  max-height: 70vh;
}
table.cha-audit-matrix {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
}
table.cha-audit-matrix th,
table.cha-audit-matrix td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}
table.cha-audit-matrix thead th {
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 2;
}
table.cha-audit-matrix .cha-matrix-th-name,
table.cha-audit-matrix .cha-matrix-name {
  text-align: left;
  min-width: 220px;
}
table.cha-audit-matrix .cha-matrix-section td {
  background: #eef2ff;
  font-weight: 700;
  text-align: left;
  color: #1e1b4b;
}
table.cha-audit-matrix .cha-matrix-cell {
  min-width: 70px;
}
table.cha-audit-matrix .cha-matrix-empty {
  background: #fafafa;
  color: #999;
}
.cha-audit-matrix .cha-matrix-cell:hover {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.cha-audit-export-row:last-child {
  border-bottom: none !important;
}
.cha-finding-row {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.cha-finding-row > div:first-child { flex: 1; }
.cha-finding-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cha-finding-title { font-weight: 600; color: #0f172a; }

.cha-checklist-section {
  border-top: 1px solid #e2e8f0;
  padding-top: 8px;
  margin-top: 8px;
}
/* M16.10 — Scope :first-child to the audit-RUN view only. The
   editor variant uses a different chrome (each section gets its
   own card with border + padding via the editor-specific rule
   below at line ~15007), and the :first-child override was
   stripping the top border + padding off the first card on every
   open. ``:not([data-cha-section])`` excludes the editor markup. */
.cha-checklist-section:not([data-cha-section]):first-child { border-top: none; margin-top: 0; padding-top: 0; }
.cha-checklist-section-title {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.cha-checklist-row {
  display: grid;
  grid-template-columns: 2fr auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}

/* Allocate-modal role / staff picker row. Mirrors the lightweight
   list pattern in the Meetings access editor — tick-box + name +
   muted job-title hint. No heavy framing; modal body already
   encloses. */
.cha-allocate-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
}
.cha-allocate-row:last-child { border-bottom: none; }
.cha-allocate-row input[type="checkbox"] { margin: 0; }

/* Draft-in-progress note under the audit name in the main table.
   Amber, compact, single-line — signals "you need to resolve the
   draft first" without shouting. Matches the pill colour family
   used by cha-pill--draft + cha-pill--finding. */
.cha-draft-warning {
  margin-top: 4px;
  font-size: 0.8rem;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-block;
}

/* Transient flash applied to a required field that failed the
   Mark-complete validator. Inputs get a red outline; RAG rows get
   a left-bar tint. The class is auto-removed after ~2s so the
   form returns to neutral once the user's eye has caught it. */
.cha-field-invalid {
  outline: 2px solid #dc2626 !important;
  outline-offset: 2px;
  border-radius: 6px;
  transition: outline 0.15s ease-out;
}
.cha-field-invalid.cha-checklist-row {
  outline: none !important;
  background: rgba(220, 38, 38, 0.06);
  box-shadow: inset 3px 0 0 0 #dc2626;
}
.cha-checklist-prompt {
  font-size: 0.9rem;
  color: #0f172a;
  line-height: 1.4;
}
.cha-item-code {
  display: inline-block;
  background: #e2e8f0;
  color: #475569;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-right: 4px;
}
.cha-rag-group { display: flex; gap: 4px; }
.cha-rag-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.cha-rag-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cha-rag-opt--green.is-on { background: #10b981; color: #ffffff; border-color: #059669; }
.cha-rag-opt--amber.is-on { background: #f59e0b; color: #ffffff; border-color: #d97706; }
.cha-rag-opt--red.is-on   { background: #dc2626; color: #ffffff; border-color: #b91c1c; }
.cha-rag-opt--na.is-on    { background: #64748b; color: #ffffff; border-color: #475569; }
.cha-checklist-comments {
  font-size: 0.85rem;
  padding: 4px 6px;
  min-height: 32px;
}

.cha-settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
}
.cha-settings-row:last-child { border-bottom: none; }

/* Category-grouped settings layout (M11 Audit Tool).
   Each category is a card; inside, audit rows sit in a 4-column
   grid (include+name / cadence / status / actions). Header row uses
   the same columns so labels line up above the inputs. */
.cha-settings-category {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  margin-bottom: 12px;
  overflow: hidden;
}
.cha-settings-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.cha-settings-category-title {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.95rem;
}
.cha-settings-category-body { padding: 6px 14px 12px; }

.cha-settings-type-row {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) minmax(110px, 140px) minmax(90px, 130px) minmax(140px, auto);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}
.cha-settings-type-row:last-child { border-bottom: none; }
.cha-settings-type-row--head {
  padding: 6px 0;
  border-bottom: 1px solid #e2e8f0;
}

.cha-settings-type-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cha-settings-type-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.cha-settings-type-name {
  font-weight: 500;
  color: #0f172a;
  overflow-wrap: anywhere;
}
.cha-settings-type-cadence {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cha-settings-cadence-input {
  width: 80px;
  padding: 4px 6px;
  font-size: 0.9rem;
  text-align: right;
}
.cha-settings-cadence-unit { font-size: 0.8rem; }

/* Live period hint beside the day-based cadence input in the audit-type
   editor modal (e.g. "= every 3 months"). */
.cha-audit-type-cadence-hint { font-size: 12px; }

/* Settings pane section headings — visually separate Your audits
   from System audit library. */
.cha-settings-section-heading {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  margin: 4px 0 4px;
}
.cha-settings-section-heading.mt16 { margin-top: 20px; }

/* Library rows are read-only previews; tone down the row + show
   description under the audit name. */
.cha-library-row {
  background: #f8fafc;
}
.cha-library-desc {
  font-size: 0.8rem;
  margin-top: 2px;
  line-height: 1.3;
}

/* Settings tab strip inside the Audit settings pane — visually
   separates Your audits from System library so they're not just
   stacked sections. */
.cha-settings-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 4px;
}
.cha-settings-tab {
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font-size: 0.9rem;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cha-settings-tab:hover { color: #0f172a; }
.cha-settings-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.cha-settings-tab__count {
  background: #e2e8f0;
  color: #475569;
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 0.75rem;
  font-weight: 500;
}
.cha-settings-tab.is-active .cha-settings-tab__count {
  background: rgba(18, 10, 143, 0.12);
  color: var(--primary);
}
.cha-settings-tab-pane { display: none; }
.cha-settings-tab-pane.is-active { display: block; }

/* KLOE domain chip on audit rows + detail header.
   Mapped to CQC Single Assessment Framework 2025 primary domain
   (safe / effective / caring / responsive / well-led).
   Subtle colour-coding — distinct enough to scan, muted enough
   to not compete with the row's score / status pills. */
.cha-kloe-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  vertical-align: middle;
  margin-left: 6px;
  border: 1px solid transparent;
}
.cha-kloe-chip--safe        { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.cha-kloe-chip--effective   { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.cha-kloe-chip--caring      { background: #fce7f3; color: #9d174d; border-color: #fbcfe8; }
.cha-kloe-chip--responsive  { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.cha-kloe-chip--well_led    { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }

/* "System" badge for library-enrolled rows in Your Audits.
   Signals non-editable / duplicate-to-customise semantics without
   blocking the row's primary affordances (Mark as completed etc.). */
.cha-system-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 500;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  vertical-align: middle;
  margin-left: 6px;
}

/* Run modal footer — audit-trail style history strip.
   Mirrors the Meetings "Last saved …" pattern: a single line of
   small muted timestamps (Created / Last saved / Completed).
   Sits just above the modal footer's action buttons. */
.cha-run-history-strip {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.cha-run-history-strip__item { white-space: nowrap; }
.cha-run-history-strip__label { font-weight: 500; color: #475569; }

/* Library batch toolbar — sticky-ish row above the category list. */
.cha-settings-library-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 10px;
}
.cha-library-select-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}

/* Library row checkbox — wraps the name so the whole label is
   clickable. Keeps the existing 4-column grid from cha-settings-type-row. */
.cha-library-pick {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  width: 100%;
}
.cha-library-pick-input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.cha-settings-type-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .cha-settings-type-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .cha-settings-type-row--head { display: none; }
  .cha-settings-type-actions { justify-content: flex-start; }
}
.cha-checklist-editor-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.cha-checklist-editor-row .input { font-size: 0.85rem; }

/* Section-grouped checklist editor — one ``<section>`` per audit
   section, with its questions nested underneath. The section
   header doubles as a rename row; up/down arrows reorder within
   the current scope (section in the outer list, question inside
   its section). Item codes render as read-only labels so the
   user doesn't maintain numbering by hand. */
.cha-checklist-section {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fafafa;
}
.cha-checklist-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cha-checklist-section-code {
  font-weight: 600;
  color: #334155;
  flex: 0 0 auto;
  min-width: 24px;
}
.cha-checklist-section-header .input { flex: 1 1 auto; font-weight: 500; }
.cha-checklist-questions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.cha-checklist-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cha-checklist-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: #94a3b8;
  cursor: grab;
  user-select: none;
  flex: 0 0 auto;
}
.cha-checklist-drag-handle:hover { background: #f1f5f9; color: #334155; }
/* M16.10 — .is-dragging style is now defined globally in the
   "Drag-drop visual feedback" block (search for that comment).
   Legacy opacity-only + drop-target dashed-outline rules removed
   so every drag surface in the app shares the same look. */
/* Boundary-disabled arrows: visual feedback so first ↑ / last ↓
   read as "this is as far as you can go" rather than broken. */
.cha-checklist-row-actions button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.cha-checklist-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  flex: 0 0 auto;
  min-width: 40px;
  text-align: right;
}
.cha-checklist-row .input { flex: 1 1 auto; font-size: 0.85rem; }
.cha-checklist-row-actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.cha-checklist-add-q {
  align-self: flex-start;
}

/* ---- M12.1 — Resident profile page ----
   Two-column card grid for identity + current state at the top, then
   the allocation history table and change-log timeline beneath. The
   cards inherit ``.settings-card`` so they pick up the same border /
   header styling used everywhere else; the only new pieces are the
   key-value definition list and the change-log timeline rows. */
.resident-profile-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  /* ``align-items: stretch`` (the grid default) keeps both cards at
     the same height regardless of content length. Identity has fewer
     fields than Current state — letting them stretch produces a
     clean rectangle pair, where letting them auto-size produced an
     uneven jaw with Identity ending well above Current state. */
  align-items: stretch;
}

/* The pane-wide adjacency rule
   ``.cha-settings-tab-pane .settings-card + .settings-card { margin-top: 20px }``
   matches across grid children too — it was pushing the Current state
   card 20px down relative to Identity, so their top borders didn't
   line up. Override it for the 2-up grid: the grid's own ``gap``
   already handles horizontal spacing, and there is no vertical stack
   inside the grid. */
.resident-profile-cards .settings-card + .settings-card {
  margin-top: 0;
}

/* Allocation-history + change-log panes also stack their inner
   sections with consistent breathing room (mirrors the profile pane
   rule above). Scoped to ``.is-active`` so the inactive pane stays
   ``display: none`` (otherwise the attribute selector ties on
   specificity with ``.cha-settings-tab-pane { display: none }`` and
   source-order makes inactive panes visible). */
[data-resident-profile-pane="allocations"].is-active,
[data-resident-profile-pane="changelog"].is-active {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Stack the resident profile sections (Identity + Current state row,
   Custom fields, Allocation history, 1:1 care) with consistent
   breathing room. The previous adjacency rule
   (``.cha-settings-tab-pane .settings-card + .settings-card``) only
   matched when both siblings were settings-cards — it skipped the
   gap before "Custom fields" (the predecessor is the
   .resident-profile-cards wrapper, not a card) and after the
   transient edit-modal markup. Switching the pane to a flex
   column with ``gap`` handles every sibling regardless of class
   or modal interleaving, and modals (.cha-modal — fixed-position)
   don't participate in the flow.

IMPORTANT: scope to ``.is-active`` so an inactive pane stays
   ``display: none`` (the .cha-settings-tab-pane base rule wins on
   specificity tie when this rule doesn't match). Without
   ``.is-active`` the attribute selector and the base rule have
   equal specificity and source order would render every pane stacked
   simultaneously. */
[data-resident-profile-pane="profile"].is-active {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* M12.9 — Funding-mix donut on the dashboard finance strip.
   Donut + legend, flex row on wide screens, stacks below on narrow.
   Sits inside the existing ``.kpi-strip`` beneath the per-source £
   cards so the strip reads "absolute → ratio". */
.residents-funding-donut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.residents-funding-donut__chart {
  flex: 0 0 160px;
}
.residents-funding-donut__svg {
  width: 160px;
  height: 160px;
  display: block;
}
.residents-funding-donut__legend {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}
.residents-funding-donut__legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}
.residents-funding-donut__swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}
.residents-funding-donut__pct {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.residents-funding-donut__amt {
  font-variant-numeric: tabular-nums;
  min-width: 90px;
  text-align: right;
}
.residents-funding-donut__empty {
  margin-top: 12px;
  padding: 14px;
  text-align: center;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 6px;
}

/* M12.14 — donut + income-trend share the resident-finance row
   50/50. Stacks on narrow viewports. Each half is a self-contained
   card so the donut keeps its existing inner styles untouched. */
.resident-finance-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  align-items: stretch;
}
.resident-finance-row__half {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Donut already has its own border / background; reset its top
   margin so it sits flush inside the flex half. */
.resident-finance-row__half .residents-funding-donut {
  margin-top: 0;
  flex: 1 1 auto;
}

.income-trend-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
.income-trend-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.income-trend-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.income-trend-chips {
  display: inline-flex;
  gap: 4px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 2px;
}
.income-trend-chip {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.income-trend-chip:hover {
  color: var(--text);
}
.income-trend-chip.is-active {
  background: var(--primary, #120A8F);
  color: #fff;
}
.income-trend-card__body {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.income-trend-svg {
  width: 100%;
  height: auto;
  max-height: 240px;
  display: block;
}
.income-trend-card__empty {
  width: 100%;
  text-align: center;
  padding: 24px 12px;
}

/* M12.8 — KPI strip on the Residents tab. Reuses the existing
   ``.kpi-card`` palette but lays out as a 4-column grid that
   collapses on narrow screens. */
#residentsKpiStrip.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

/* M12.5 — FNC visibility gate. When the care home is residential
   (FNC isn't applicable), every FNC table column collapses out and
   the Finance pane's FNC default card hides. The residents
   module's JS toggles ``data-residents-fnc-hidden`` on <body> based
   on the saved home_type. Single source of truth for hiding —
   beats sprinkling display:none into every render path. */
body[data-residents-fnc-hidden] [data-resident-col="fnc"] { display: none; }
body[data-residents-fnc-hidden] #financePaneFncCard { display: none; }

/* M12.2 — Rooms tab column-visibility menu. Per-user localStorage
   drives which columns render; toggling a checkbox writes a
   ``data-hide-col-<key>`` attribute on the table, then a single CSS
   rule per column hides every cell with the matching ``data-room-col``.
   No DOM rebuild on toggle. */
.rooms-columns-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  /* Sidebar (.left-nav) lives at z-index:101. The earlier z-index:20
     here meant the View-on-date popover rendered beneath the
     sidebar whenever the trigger button was near the left edge.
     200 puts the menu safely above the sidebar without competing
     with modal-tier surfaces (.reg-modal at 2000) or the
     date-picker calendar nested inside it (.datetime-picker__popover
     at 1100). */
  z-index: 200;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
}
.rooms-columns-menu__title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted, #64748b);
  margin-bottom: 6px;
}
.rooms-columns-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  padding: 4px 0;
  cursor: pointer;
}
#residentsRoomsTable[data-hide-col-floor] [data-room-col="floor"] { display: none; }
#residentsRoomsTable[data-hide-col-shared] [data-room-col="shared"] { display: none; }
#residentsRoomsTable[data-hide-col-en_suite] [data-room-col="en_suite"] { display: none; }
#residentsRoomsTable[data-hide-col-occupant] [data-room-col="occupant"] { display: none; }
#residentsRoomsTable[data-hide-col-active] [data-room-col="active"] { display: none; }
/* Room numbers fit in 2-3 chars on every realistic home; the column
   was burning ~12% of table width for "1". Fix it to a tight max so
   the wider columns (Currently occupied by — which carries
   Departing / TCI sub-rows) get the breathing room they need. */
#residentsRoomsTable [data-room-col="number"] {
  width: 170px;
  max-width: 170px;
  white-space: nowrap;
}
/* Meetings list — Source column. Distinguishes a templated-form
   meeting from a Quick-Attach (file-only) meeting at a glance.
   Two muted accent colours so the column reads as metadata, not
   as a status the manager has to act on. */
.meetings-source-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}
.meetings-source-pill--form {
  background: #eef2ff;
  color: #3730a3;
}
.meetings-source-pill--file {
  background: #ecfdf5;
  color: #047857;
}
/* Empty-bed phantom rows on the Residents tab — synthesised
   client-side so a vacant room still appears in the list rather
   than silently dropping out when its occupant ends their stay.
   Slightly de-emphasised so real residents draw the eye first. */
.resident-phantom-row td {
  background: #fafbfc;
  color: var(--text-muted, #64748b);
}
.resident-phantom-row td:first-child {
  font-weight: 600;
  color: var(--text, #0f172a);
}
/* Quick-Attach edit modal — the file row sits inside a soft
   panel so View / Replace are visually grouped under "Attached
   file" instead of floating on the page. */
.meetings-attachment-edit-filebox {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  padding: 10px 12px;
  background: #f8fafc;
  margin-top: 4px;
}

/* Move-conflict modal — full-width card buttons. The previous
   inline-styled buttons were dense and the colour overrides
   fought the rest of the form vocabulary. Cards keep title +
   description on separate lines, give every option the same
   visual weight, and lift accent/danger options via a left border
   only — the body stays neutral so the modal doesn't read as
   four loud blocks of colour. */
.resident-move-conflict-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.resident-conflict-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms;
}
.resident-conflict-card:hover {
  background: #f8fafc;
  border-color: var(--accent-300, #93c5fd);
}
.resident-conflict-card:focus-visible {
  outline: 2px solid var(--accent-500, #3b82f6);
  outline-offset: 2px;
}
.resident-conflict-card__title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text, #0f172a);
}
.resident-conflict-card__desc {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
  margin-top: 4px;
}
.resident-conflict-card--primary {
  border-left: 3px solid var(--accent-500, #3b82f6);
}
.resident-conflict-card--primary:hover {
  border-left-color: var(--accent-600, #2563eb);
}
.resident-conflict-card--danger {
  border-left: 3px solid #dc2626;
}
.resident-conflict-card--danger:hover {
  border-left-color: #b91c1c;
}
/* Room-picker modal — 3-column grid so a 100-bed home doesn't
   render as one ungovernable scrolling list. ``auto-fit`` collapses
   to 2 columns on a narrow viewport and 1 when the modal is at its
   absolute minimum width. ``max-height`` keeps the grid scrollable
   inside the modal body without pushing the footer offscreen. */
.room-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 12px;
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  padding: 6px 8px;
}
.room-picker-grid > label {
  margin: 0;
  min-width: 0;
}
.room-picker-grid > label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .room-picker-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .room-picker-grid { grid-template-columns: 1fr; }
}
/* Residents-table column toggles. Same pattern as rooms — actions
   are always on (no toggle); every other column is togglable. All
   columns ship on by default; users can opt out via the Columns
   menu. Preferences are stored per care-home AND per status filter
   (active / departed / archived / all), so each chip can carry its
   own column set. */
/* M16.62 follow-up (2026-05-28) — keep the Actions column wide enough
 * for the widest action set so the Name / Room columns don't visibly
 * shift when a TCI row gains a third button (View / Re-allocate /
 * Cancel allocation) over the bedless variant (View / Allocate). Two
 * defences: a stable ``min-width`` on the cell + ``white-space: nowrap``
 * so the buttons themselves can't wrap and pump the row height. */
#residentsTable th[data-resident-col="actions"],
#residentsTable td[data-resident-col="actions"] {
  min-width: 320px;
  white-space: nowrap;
}

#residentsTable[data-hide-col-name] [data-resident-col="name"] { display: none; }
#residentsTable[data-hide-col-room] [data-resident-col="room"] { display: none; }
#residentsTable[data-hide-col-admission] [data-resident-col="admission"] { display: none; }
#residentsTable[data-hide-col-departure] [data-resident-col="departure"] { display: none; }
#residentsTable[data-hide-col-rate] [data-resident-col="rate"] { display: none; }
#residentsTable[data-hide-col-funding] [data-resident-col="funding"] { display: none; }
#residentsTable[data-hide-col-fnc] [data-resident-col="fnc"] { display: none; }
#residentsTable[data-hide-col-client_contribution] [data-resident-col="client_contribution"] { display: none; }
#residentsTable[data-hide-col-top_up] [data-resident-col="top_up"] { display: none; }
#residentsTable[data-hide-col-total_weekly] [data-resident-col="total_weekly"] { display: none; }
#residentsTable[data-hide-col-one_to_one] [data-resident-col="one_to_one"] { display: none; }
/* Right-anchored variant of the rooms-columns popover (used on the
   Residents tab where the Columns button sits at the far right of
   the search/filter row — left-anchored would overflow off-canvas). */
.rooms-columns-menu--right { left: auto; right: 0; }
/* The allocation-history table has 8 columns (From / To / Room /
   Weekly rate / Funding / FNC / End reason / Actions). Default
   ``.audits-table`` cell padding is tight (designed for narrow KPI
   tables); on the profile page the dates were running into each
   other. Add horizontal breathing room and a sane minimum so it
   stays readable even on narrower viewports. The wrapper scrolls
   horizontally inside the card when the viewport is too narrow
   (or the page is zoomed in) — without ``max-width: 100%`` +
   ``overflow-x: auto`` here, the table escaped the card on zoom. */
#residentProfilePanel .audits-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}
#residentProfileAllocationsTable th,
#residentProfileAllocationsTable td {
  padding: 8px 14px;
  white-space: nowrap;
}
#residentProfileAllocationsTable {
  min-width: 880px;
}
.resident-profile-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 6px;
  margin: 0;
}
.resident-profile-kv dt {
  color: var(--muted, #64748b);
  font-size: 0.85rem;
  font-weight: 500;
}
.resident-profile-kv dd {
  margin: 0;
  font-size: 0.9rem;
}
.resident-profile-changelog {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.resident-profile-changelog__item {
  border-left: 3px solid var(--primary, #2563eb);
  padding: 6px 12px;
  background: #f8fafc;
  border-radius: 6px;
}
.resident-profile-changelog__head {
  font-size: 0.85rem;
}
.resident-profile-changelog__summary {
  margin-top: 2px;
  font-size: 0.9rem;
}
.resident-profile-changelog__diff {
  list-style: none;
  margin: 4px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.resident-profile-changelog__diff-line {
  font-size: 0.85rem;
  color: var(--text, #0f172a);
  padding-left: 12px;
  position: relative;
}
.resident-profile-changelog__diff-line::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--muted, #64748b);
}

/* Generic date / datetime / month picker. Replaces native
   ``<input type="date|datetime-local|month">`` across the app. Flat
   6px radius, restrained shadows. The popover is 320px wide to fit
   a 7-column day grid + 6 rows; in month / year zoom levels the same
   grid collapses to 3-column via ``.is-zoom`` (cells become
   ``.datetime-picker__zoom-cell``). */
.datetime-picker {
  position: relative;
  display: inline-block;
  margin-top: 6px;
}

/* Meetings toolbar — search input + date pickers + clear button.
   The default ``.datetime-picker { margin-top: 6px }`` was pushing
   the date trigger down by 6px so the row's flex ``align-items:
   center`` couldn't compensate (the picker's bounding box drifted
   down too). Inside this toolbar drop the margin-top and shrink the
   trigger to match ``.input`` so search + pickers + button all sit
   on the same baseline. */
.meetings-toolbar-row .datetime-picker {
  margin-top: 0;
  display: inline-flex;
}
.meetings-toolbar-row .datetime-picker__trigger {
  padding: 6px 10px;
  font-size: 0.85rem;
  min-width: 160px;
  min-height: 34px;
}

/* Resident Move/Allocate modal — date picker sits next to a "Today"
   shortcut button on the same row. The default ``.datetime-picker``
   carries ``margin-top: 6px`` which would push the trigger 6px below
   the Today button's baseline; drop it here so the two align. The
   trigger also flexes to fill the row (width minus the Today button)
   instead of hugging its own text. */
#residentMoveDateLabel .datetime-picker,
#residentAdjustmentDateLabel .datetime-picker,
#residentEndDateLabel .datetime-picker {
  margin-top: 0;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
#residentMoveDateLabel .datetime-picker__trigger,
#residentAdjustmentDateLabel .datetime-picker__trigger,
#residentEndDateLabel .datetime-picker__trigger {
  width: 100%;
  justify-content: space-between;
}
.datetime-picker__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 240px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text, #0f172a);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.datetime-picker__trigger:hover { border-color: #94a3b8; }
.datetime-picker__trigger:focus {
  outline: none;
  border-color: var(--primary, #120A8F);
  box-shadow: 0 0 0 3px rgba(15, 91, 216, 0.12);
}
.datetime-picker__chevron {
  color: var(--text-muted, #64748b);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.datetime-picker__trigger[aria-expanded="true"] .datetime-picker__chevron {
  transform: rotate(180deg);
}
.datetime-picker__popover {
  /* ``position: fixed`` (not absolute) so the popover escapes any
     ancestor's overflow / clipping. The Move / Adjustment / End-stay
     modals use ``.reg-modal-card { overflow: auto }`` for tall forms,
     and an absolutely-positioned popover gets clipped when it extends
     past the card. JS sets ``top`` / ``left`` on open from the
     trigger's ``getBoundingClientRect()`` so it lines up beneath the
     button, regardless of the trigger's containing block. */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  width: 320px;
}
.datetime-picker__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 8px;
}
.datetime-picker__nav-btn {
  appearance: none;
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-muted, #64748b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.datetime-picker__nav-btn:hover {
  background: #f1f5f9;
  color: var(--text, #0f172a);
}
.datetime-picker__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.datetime-picker__nav-label {
  appearance: none;
  background: transparent;
  border: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text, #0f172a);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.datetime-picker__nav-label:hover {
  background: #f1f5f9;
}
.datetime-picker__nav-label:disabled {
  cursor: default;
  background: transparent;
  /* Top zoom level — visually unchanged but no longer clickable. */
}
.datetime-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 4px 0 6px;
}
.datetime-picker__weekdays span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
}
.datetime-picker__day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
/* When zoomed out (month grid / year grid) the same container becomes
   a 3-column layout. Cells in this mode use ``.datetime-picker__zoom-cell``. */
.datetime-picker__day-grid.is-zoom {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px 0;
}
.datetime-picker__zoom-cell {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text, #0f172a);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 14px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.datetime-picker__zoom-cell:hover { background: #f1f5f9; }
.datetime-picker__zoom-cell.is-active {
  background: var(--primary, #120A8F);
  color: #ffffff;
  border-color: var(--primary, #120A8F);
}
.datetime-picker__zoom-cell.is-active:hover { background: var(--primary, #120A8F); }
.datetime-picker__zoom-cell.is-today { border-color: var(--primary, #120A8F); }
.datetime-picker__zoom-cell.is-other-decade {
  color: var(--text-muted, #64748b);
  opacity: 0.55;
}
.datetime-picker__zoom-cell:disabled,
.datetime-picker__zoom-cell.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.datetime-picker__day {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text, #0f172a);
  font-size: 0.85rem;
  font-weight: 500;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.datetime-picker__day:hover { background: #f1f5f9; }
.datetime-picker__day.is-active {
  background: var(--primary, #120A8F);
  color: #ffffff;
  border-color: var(--primary, #120A8F);
}
.datetime-picker__day.is-active:hover { background: var(--primary, #120A8F); }
.datetime-picker__day.is-today { border-color: var(--primary, #120A8F); }
.datetime-picker__day.is-other-month { color: var(--text-muted, #64748b); opacity: 0.55; }
.datetime-picker__day:disabled,
.datetime-picker__day.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.datetime-picker__time-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
.datetime-picker__time-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}
.datetime-picker__time-select {
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text, #0f172a);
  min-width: 64px;
  cursor: pointer;
}
.datetime-picker__time-select:focus {
  outline: none;
  border-color: var(--primary, #120A8F);
  box-shadow: 0 0 0 3px rgba(15, 91, 216, 0.12);
}
.datetime-picker__time-sep {
  font-weight: 700;
  color: var(--text-muted, #64748b);
}
.datetime-picker__time-now {
  appearance: none;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text, #0f172a);
  cursor: pointer;
  margin-left: auto;
  transition: background 0.12s, border-color 0.12s;
}
.datetime-picker__time-now:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* =============================================================
   M12.30 — Resident Dependency Tool
   Five level-pills (I/L/M/H/C) + one overall dependency-badge,
   plus the home-wide matrix's colour-coded cells.
   ============================================================= */
.dep-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.dep-pill--I { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.dep-pill--L { background: #d1fae5; color: #047857; border-color: #6ee7b7; }
.dep-pill--M { background: #fef3c7; color: #92400e; border-color: #fbbf24; }
.dep-pill--H { background: #ffedd5; color: #9a3412; border-color: #fb923c; }
.dep-pill--C { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

.dep-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.dep-badge--independent { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.dep-badge--low         { background: #d1fae5; color: #047857; border-color: #6ee7b7; }
.dep-badge--moderate    { background: #fef3c7; color: #92400e; border-color: #fbbf24; }
.dep-badge--high        { background: #ffedd5; color: #9a3412; border-color: #fb923c; }
.dep-badge--complex     { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.dep-badge--unassessed  { background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; }

/* Matrix row styling: fixed-width category cells so the colour
 * pills line up neatly across rows. Stale and Not-assessed rows
 * subtly muted so the manager's eye lands on the assessed-but-
 * heavy ones first. */
#residentsDependencyMatrixTable td.dep-cell {
  text-align: center;
  padding: 6px 4px;
}
#residentsDependencyMatrixTable tr.dep-row--stale {
  background: #fef9c3;
}
#residentsDependencyMatrixTable tr.dep-row--unassessed td {
  color: #94a3b8;
}
/* M12.30+ — Date-ranged absence row. Distinct from stale (yellow)
   and unassessed (grey) so the manager can spot residents who are
   intentionally not contributing today. */
#residentsDependencyMatrixTable tr.dep-row--absent {
  background: #fee2e2;
}
#residentsDependencyMatrixTable tr.dep-row--absent td {
  color: #7f1d1d;
}
#residentsDependencyMatrixTable tr.dep-row-clickable.dep-row--absent:hover td {
  background: #fecaca;
}
.dep-badge.dep-badge--absent {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* Residents list — "Absent" overlay pill on rows whose active
   dependency absence covers today. Display-only signal: finance
   figures (occupancy / weekly revenue / forecast) ignore it. */
.cha-pill.resident-absent-pill {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* Settings → Dependency → Minutes lookup table.
   Compact, editable inputs sized to fit two numbers per cell on
   nursing homes (HCA + RN); residential homes show only one
   input. The "Amended" pill flags system rows whose values
   diverge from the platform default. */
.dep-lookup-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
input.dep-lookup-input {
  width: 60px;
  padding: 4px 6px;
  text-align: right;
  font-size: 0.85rem;
}
#careHomeDependencyLookupTable td[data-dep-lookup-amended="1"] input.dep-lookup-input {
  border-color: #fbbf24;
  background: #fef3c7;
}
.dep-amended-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 999px;
}

/* Governance advisory shown at the top of every dependency
   surface that exposes hours-per-day figures. Soft amber so it
   reads as a steering note rather than an error, but visible
   enough that staffing-rota decisions don't get made from the
   numbers in isolation. */
.dep-advisory {
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: #78350f;
  line-height: 1.45;
}

/* M12.30 — Whole-row click target. The toolbar copy promises
   "Click a row to open that resident's profile…" so every cell
   in the matrix is clickable; this gives the visual affordance. */
#residentsDependencyMatrixTable tr.dep-row-clickable {
  cursor: pointer;
}
#residentsDependencyMatrixTable tr.dep-row-clickable:hover td {
  background: #f8fafc;
}
#residentsDependencyMatrixTable tr.dep-row-clickable.dep-row--stale:hover td {
  background: #fde68a;
}

/* Filter-chip strip for the matrix view — matches the existing
 * filter-chip + thead conventions used elsewhere in the app
 * (12/14px vertical margin, 7×12 chip padding). */
.dep-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  color: var(--text-soft);
}
.dep-filter-chip:hover { border-color: #94a3b8; }
.dep-filter-chip.is-active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

/* Assessment modal — radio rubric per category. Five buttons in a
 * row, each labelled with the level code; the active one picks up
 * the level-pill colours so the reader maps button → minutes
 * intuitively. */
.dep-rubric {
  display: inline-flex;
  gap: 6px;
}
.dep-rubric input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.dep-rubric label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.78rem;
  border: 1px solid var(--line);
  background: #ffffff;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.dep-rubric input[type="radio"]:checked + label.dep-rubric-opt--I { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.dep-rubric input[type="radio"]:checked + label.dep-rubric-opt--L { background: #d1fae5; color: #047857; border-color: #6ee7b7; }
.dep-rubric input[type="radio"]:checked + label.dep-rubric-opt--M { background: #fef3c7; color: #92400e; border-color: #fbbf24; }
.dep-rubric input[type="radio"]:checked + label.dep-rubric-opt--H { background: #ffedd5; color: #9a3412; border-color: #fb923c; }
.dep-rubric input[type="radio"]:checked + label.dep-rubric-opt--C { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.dep-rubric input[type="radio"]:focus-visible + label {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* ---- Dependency aggregate stat strip ----
 * Distinct from the main ``.kpi-grid`` of full-width occupancy /
 * revenue tiles — these are *secondary* sub-stats specific to the
 * Dependency view, so they need their own visual register so
 * managers don't read them as a continuation of the top KPI row.
 * Five compact tiles in a horizontal row, each with a leading
 * accent stripe in the brand colour, label uppercase + smaller,
 * value sized down a step. Wraps at narrow widths. */
.dep-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.dep-stat-tile {
  flex: 1 1 160px;
  min-width: 140px;
  position: relative;
  padding: 10px 12px 10px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.dep-stat-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--primary, #120A8F);
}
.dep-stat-tile__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  margin-bottom: 4px;
}
.dep-stat-tile__value {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text, #0f172a);
  line-height: 1.2;
}
.dep-stat-tile__sub {
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
  font-weight: 500;
  margin-left: 4px;
}

/* ---- Modern resident-name link in the dependency matrix ----
 * Other tables in the app use plain-text names + a separate "View"
 * button; here the row is high-density so the name itself is the
 * action. Subtle brand-coloured text, no default underline,
 * underline-on-hover for affordance, focus-visible ring for
 * keyboard nav. */
.dep-resident-link {
  color: var(--primary, #120A8F);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.dep-resident-link:hover {
  color: var(--primary, #120A8F);
  border-bottom-color: var(--primary, #120A8F);
}
.dep-resident-link:focus-visible {
  outline: 2px solid var(--primary, #120A8F);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Settings → Dependency: 4×3 category grid ----
 * Twelve seeded categories (or up to 16 when the home adds
 * customs) sit in a responsive grid that gives 4 columns at the
 * normal Settings card width and collapses to 2 / 1 columns on
 * narrower viewports. Each tile is a self-contained card with a
 * checkbox + name + utility actions (Examples, Delete for custom
 * rows). Subtle hover state confirms the whole tile is clickable. */
.dep-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1100px) {
  .dep-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .dep-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .dep-cat-grid { grid-template-columns: 1fr; }
}
.dep-cat-tile {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
  background: #ffffff;
  transition: border-color 0.12s ease, background 0.12s ease;
  position: relative;
}
.dep-cat-tile:hover { border-color: #cbd5e1; background: #f8fafc; }
.dep-cat-tile input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.dep-cat-tile__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dep-cat-tile__name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text, #0f172a);
  word-break: break-word;
}
.dep-cat-tile__custom-pill {
  display: inline-block;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dep-cat-tile__actions {
  display: flex;
  gap: 4px;
}
.dep-cat-tile__action-btn {
  background: transparent;
  border: none;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
  border-radius: 3px;
}
.dep-cat-tile__action-btn:hover {
  background: #f1f5f9;
  color: var(--text, #0f172a);
}

/* M12.30 — Inline category name + i-button row inside the
   per-resident assessment modal. Mirrors the Settings → Dependency
   tile's icon affordance — same .dep-cat-tile__action-btn class,
   no override, so the two surfaces look identical. */
.dep-modal-cat-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Stacking — the examples popup is opened on top of the
   assessment modal. Both share .reg-modal's z-index:2000, so DOM
   order would put the (earlier) examples modal behind the
   (later) assessment one. Bump the examples z-index so a click
   on the row's "i" surfaces the popup above the form. */
#depCategoryExamplesModal {
  z-index: 2100;
}

/* Resident profile → Dependency tab ratings table. Uses the same
   Category | Level | Notes columns as the assessment modal, so
   give it the same generous padding + sensible column widths
   instead of the cramped default audits-table layout. */
#residentDependencyRatingsTable th,
#residentDependencyRatingsTable td {
  padding: 10px 16px;
  vertical-align: middle;
}
#residentDependencyRatingsTable th:nth-child(1),
#residentDependencyRatingsTable td:nth-child(1) {
  width: 32%;
}
#residentDependencyRatingsTable th:nth-child(2),
#residentDependencyRatingsTable td:nth-child(2) {
  width: 26%;
  white-space: nowrap;
}
#residentDependencyRatingsTable th:nth-child(3),
#residentDependencyRatingsTable td:nth-child(3) {
  width: 42%;
  /* The Level pill is short relative to its column width, so the
     Notes text was visually butting up against the pill. Push the
     Notes content over with a left padding override. */
  padding-left: 28px;
}

/* Wider, less-cramped cells inside the assessment modal so the
   Category column fits long names ("Psychological & Cognitive")
   alongside the new info button, the Level column has breathing
   room around the 5 radio pills, and the Notes input doesn't sit
   right against the level cell. */
#residentDependencyAssessmentModal .audits-table th,
#residentDependencyAssessmentModal .audits-table td {
  padding: 8px 12px;
  vertical-align: middle;
}
#residentDependencyAssessmentModal .audits-table th:nth-child(1),
#residentDependencyAssessmentModal .audits-table td:nth-child(1) {
  width: 28%;
}
#residentDependencyAssessmentModal .audits-table th:nth-child(2),
#residentDependencyAssessmentModal .audits-table td:nth-child(2) {
  width: 32%;
}
#residentDependencyAssessmentModal .audits-table th:nth-child(3),
#residentDependencyAssessmentModal .audits-table td:nth-child(3) {
  width: 40%;
}
#residentDependencyAssessmentModal .dep-rubric {
  gap: 10px;
}
.dep-cat-tile__action-btn--danger:hover {
  background: #fee2e2;
  color: #991b1b;
}

/* Examples list inside the popover modal */
.dep-example-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line, #e2e8f0);
}
.dep-example-row:first-child { border-top: 0; }
.dep-example-row__pill {
  flex-shrink: 0;
  width: 50px;
  text-align: center;
}
.dep-example-row__body {
  flex: 1;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text, #0f172a);
}
.dep-example-row__body--muted {
  color: var(--text-muted, #64748b);
  font-style: italic;
}

/* Residents page — read-only mode for matrix-granted non-managers.
 * The frontend ``_residentsApplyManagerScope`` toggles this class
 * on ``#careHomeResidentsPanel`` whenever the user isn't a care-home
 * manager / admin. The header buttons (+ Add resident, Undo,
 * Settings cog, + Add room) are hidden inline by the same helper;
 * the rules below cover everything else.
 *
 * Read-only audience never sees:
 *   - Row-level action buttons (Move / End / Edit / Allocate / View
 *     / Mark departed / etc.) — every operation either 404s on the
 *     backend or opens the resident profile (which surfaces finance
 *     fields).
 *   - The Actions column header itself.
 *   - Finance columns on the residents table (rate / FNC /
 *     contributions / top-up / total weekly / 1:1) — keeping only
 *     Room / Name / Admission / Funding / Departure visible.
 *   - The Period view + Dependency sub-tabs (Period view rolls up
 *     finance aggregates; Dependency is a separate manager-only
 *     workflow).
 *   - The Columns toggle button (write affordance over column
 *     visibility prefs) — read-only audience can't influence the
 *     locked-down view. */
.residents-readonly [data-resident-action] {
  display: none !important;
}
.residents-readonly [data-room-action] {
  display: none !important;
}
.residents-readonly [data-resident-col="rate"],
.residents-readonly [data-resident-col="fnc"],
.residents-readonly [data-resident-col="client_contribution"],
.residents-readonly [data-resident-col="top_up"],
.residents-readonly [data-resident-col="total_weekly"],
.residents-readonly [data-resident-col="one_to_one"],
.residents-readonly [data-resident-col="actions"] {
  display: none !important;
}
.residents-readonly [data-residents-subview="period"],
.residents-readonly [data-residents-subview="dependency"] {
  display: none !important;
}
.residents-readonly #residentsTableColumnsBtn {
  display: none !important;
}

/* =====================================================================
   HR Documents settings (H2). Catalogue grid grouped by category.
   Reuses the standard 6px / flat / var(--shadow-xs) panel chrome.
   ===================================================================== */
.hr-docs-defaults {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}
.hr-docs-category-block + .hr-docs-category-block {
  margin-top: 16px;
}
.hr-docs-category-head {
  font-size: 0.95rem;
  margin-bottom: 8px;
  color: var(--text);
}
.hr-docs-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hr-docs-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}
.hr-docs-row-main {
  flex: 1 1 auto;
  min-width: 0;
}
.hr-docs-row-name {
  font-weight: 600;
}
/* M16.10 — Header line: name + pills inline. Pills sit beside the
   name on the same line per user request, so the row reads
   "Passport [MANDATORY] [SYSTEM]" rather than putting pills below
   on the meta line. */
.hr-docs-row-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.hr-docs-row-meta {
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
/* M16.10 — row-template lived in the row body and added a third
   line of vertical real estate. The Upload form / Replace / Remove
   buttons are now part of .hr-docs-row-actions; this rule stays as
   a no-op for any legacy renderers. */
.hr-docs-row-template {
  display: none;
}
.hr-docs-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.hr-docs-template-link {
  /* Render the form download link as a button-shaped chip rather
     than blue text so it sits naturally beside Replace / Remove. */
  text-decoration: none;
  color: var(--ink, #111827);
}

/* M16.11 — Get-template chip-button (manager-side staff drawer +
   candidate drawer + self-service "My Documents"). Mirrors the
   candidate-portal ``cp-template-btn`` so the same affordance reads
   identically on both surfaces (image #136 2026-05-07). */
.hr-docs-template-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary, #120A8F);
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  border-radius: 6px;
  text-decoration: none;
  line-height: 1.3;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.hr-docs-template-chip:hover,
.hr-docs-template-chip:focus {
  background: #e0e7ff;
  border-color: #c7d2fe;
  text-decoration: none;
}
.hr-docs-template-chip svg {
  flex: 0 0 auto;
  opacity: 0.85;
}

/* M16.11 — Phase 4: read-only manager view of a candidate's
   submitted form. Renders inside the existing #hrDocsViewerBody so
   the chrome (header / footer / Download) is reused. Section
   headers split the form into the same buckets the candidate saw;
   each field shows label + answer pair. Empty answers print
   "— No answer" in muted text. */
.hr-docs-form-answers {
  max-width: 720px;
  margin: 0 auto;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text, #0f172a);
}
.hr-docs-form-answers__section {
  margin: 18px 0 8px;
  padding-bottom: 6px;
  font-size: 1rem;
  font-weight: 700;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.hr-docs-form-answers__section:first-child {
  margin-top: 0;
}
.hr-docs-form-answers__field {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line, #e5e7eb);
}
.hr-docs-form-answers__field:last-of-type {
  border-bottom: none;
}
.hr-docs-form-answers__label {
  font-weight: 600;
  color: var(--text-muted, #475569);
}
.hr-docs-form-answers__label .required-star {
  color: #b91c1c;
}
.hr-docs-form-answers__value {
  word-break: break-word;
}
.hr-docs-form-answers__textarea {
  white-space: pre-wrap;
  background: #f8fafc;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 8px 10px;
}
.hr-docs-form-answers__bool.is-yes {
  color: #166534;
  font-weight: 600;
}
.hr-docs-form-answers__bool.is-no {
  color: var(--text-muted, #475569);
}
.hr-docs-form-answers__empty {
  padding: 36px 24px;
  text-align: center;
}
@media (max-width: 540px) {
  .hr-docs-form-answers__field {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* M16.10 — Tighter pills inside catalogue rows. The default
   readiness-badge--sm spec (3px 8px padding, 0.72rem font, full
   uppercase + 0.06em tracking) reads as too loud when there are 3
   pills sitting on the same line as the document type name. */
.hr-docs-row-header .readiness-badge--sm,
.hr-docs-row-meta .readiness-badge--sm {
  padding: 1px 6px;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
/* M16.7 — multi-file slot list. One row per uploaded version
   (passport front, passport back, etc). Compact layout — filename
   on the left, status pill + action buttons on the right. Wraps
   on narrow viewports.
   M16.8 — restructured to put the "Add document" button as a
   sibling of the file list inside ``.hr-docs-files-section`` so
   the dotted divider between rows ends at the Delete button's
   right edge instead of running under the Add slot. Per-row
   action order: Approve · Reject · View · Delete; non-awaiting
   rows use a fixed-width spacer in the Approve+Reject slot so
   View / Delete columns align across rows. */
.hr-docs-files-section {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
}
.hr-docs-files-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.hr-docs-files-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  padding: 6px 0;
}
.hr-docs-files-list__item + .hr-docs-files-list__item {
  border-top: 1px dashed var(--line, #e5e7eb);
}
.hr-docs-files-list__actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
/* Approve+Reject placeholder for rows that aren't awaiting review.
   ~150px matches the combined width of Approve (≈74px) + Reject
   (≈68px) + 4px gap at btn-sm geometry, so View on the
   Approved/Rejected row starts at the same x as View on the
   Awaiting row. */
.hr-docs-files-list__btn-spacer {
  display: inline-block;
  width: 150px;
  height: 1px;
  visibility: hidden;
}
.hr-docs-files-add {
  flex: 0 0 auto;
  align-self: flex-start;
  /* Drop the button by the file row's vertical padding so it
     visually aligns with the first file row's buttons. */
  margin-top: 6px;
}
.btn.btn-xs {
  padding: 2px 8px;
  font-size: 0.78rem;
  min-height: 24px;
  border-radius: 6px;
}

/* Staff panel sub-nav ("submenu"): Active staff / Candidates / Waiting
   to join / Unsuccessful / Leavers. Desktop keeps the wrap behaviour the
   inline style used to provide. */
.hr-docs-tab-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  border-bottom:1px solid var(--line);
  padding-bottom:0;
}
/* Mobile: collapse the wrapped multi-row tab block into a single
   horizontally-scrollable strip so it doesn't sprawl down the screen.
   Desktop wrap behaviour is untouched. */
@media (max-width: 700px){
  .hr-docs-tab-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .hr-docs-tab-row .hr-docs-tab{
    flex:0 0 auto;
    white-space:nowrap;
  }
}
.hr-docs-tab.is-active,
body:not(.landing-page):not(.auth-page) .hr-docs-tab.is-active {
  background: var(--primary, #120A8F) !important;
  color: #ffffff !important;
  border-color: var(--primary, #120A8F) !important;
}
.hr-docs-section-block + .hr-docs-section-block {
  margin-top: 16px;
}
.hr-docs-section-head {
  margin-bottom: 8px;
  font-size: 0.95rem;
}

/* H4 — candidate drawer identity card. Light-grey panel that frames
   the candidate's metadata block above the interview list. */
.hr-docs-candidate-card {
  background: #f8fafc;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 0.92rem;
}
.hr-docs-candidate-card > div + div {
  margin-top: 4px;
}
.hr-docs-section {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #ffffff;
}
.hr-docs-section-title {
  margin: 0 0 8px 0;
  font-size: 0.92rem;
  color: var(--ink, #111827);
}

/* M16.9 — HR Documents form-template library
   ------------------------------------------- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* M16.10 — Candidate rejection banner. Shown on the candidate
   drawer when the candidate is in unsuccessful state; surfaces the
   rejection reason as its own coloured panel rather than burying
   it in the muted identity metadata. Soft red so the reader sees
   "this is a rejection" at a glance. */
.hr-docs-candidate-reject-banner {
  margin-top: 14px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid #dc2626;
  border-radius: 6px;
}
.hr-docs-candidate-reject-banner__title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #991b1b;
  margin-bottom: 4px;
}
.hr-docs-candidate-reject-banner__body {
  font-size: 0.9rem;
  color: var(--ink, #111827);
  white-space: pre-wrap;
}

/* M16.10 — Candidate activity timeline. Three-column layout per
   row: timestamp on the left, event-type pill + summary in the
   middle, actor on the right. Most-recent first. */
.hr-docs-candidate-history {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hr-docs-history-row {
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  background: #fff;
  align-items: center;
}
.hr-docs-history-row__when {
  white-space: nowrap;
}
.hr-docs-history-row__body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.hr-docs-history-row__pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  background: #eef2ff;
  color: var(--primary, #120A8F);
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.hr-docs-history-row__summary {
  font-size: 0.88rem;
  color: var(--ink, #111827);
  word-break: break-word;
}
.hr-docs-history-row__actor {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .hr-docs-history-row {
    grid-template-columns: 1fr;
  }
  .hr-docs-history-row__actor {
    text-align: left;
  }
}

/* M16.10 — HR Documents (Staff) panel header layout. Pulled out
   of inline ``style="..."`` attributes per the project rule
   against inlining CSS into HTML. Lede column flexes to fill,
   settings gear sits on the right at fixed width. */
.hr-docs-panel-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.hr-docs-panel-header__lede {
  flex: 1 1 auto;
  min-width: 0;
}
.hr-docs-settings-gear {
  flex: 0 0 auto;
  /* M16.24 follow-up — grey-by-default, primary on hover. Mirrors
   * the left-nav icon convention where unselected items inherit
   * muted text colour and only the active / hovered item lifts
   * to primary. Keeps the panel-header gear visually consistent
   * with every other settings affordance in the app. */
  color: var(--text-soft, #64748b);
}
.hr-docs-settings-gear:hover,
.hr-docs-settings-gear:focus-visible {
  color: var(--primary);
}
.hr-docs-settings-gear__label {
  margin-left: 6px;
}

.hr-form-templates-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hr-form-tpl-group {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 8px 12px 10px;
  background: #fff;
}
.hr-form-tpl-group__head {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink, #111827);
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line, #e5e7eb);
  margin-bottom: 8px;
}
/* M16.26 — interview-template editor target-roles grid. Compact
 * checkbox list driven from JOB_TITLE_META; renders as wrapping
 * rows of label+checkbox pairs so a manager scans the role list
 * without a long single column. */
.hr-itv-target-roles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 4px;
}
.hr-itv-target-roles-grid__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  cursor: pointer;
  padding: 2px 0;
}
.hr-itv-target-roles-grid__opt input[type="checkbox"] {
  margin: 0;
}

/* M16.26 — interview template question rendering: section heading
 * + per-question comment textarea (compact). Each question gets
 * a card-style border so the rating + comment + prompt visually
 * cohere as a single unit (Codex feedback — comment felt detached
 * because there was no border holding the trio together). */
.interview-template-section { margin-top: 14px; }
.interview-template-section + .interview-template-section { margin-top: 18px; }
/* M16.26 — Section header now carries a running-total slot to the
 * right of the heading. Updates live as the manager scores; empty
 * until the section has at least one asked rating. Mirrors the
 * server-side ``compute_score_summary`` aggregation rules. */
.interview-template-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px 0;
  border-bottom: 1px solid var(--line, #e5e7eb);
  padding-bottom: 4px;
}
.interview-template-section__heading {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink, #111827);
}
.interview-template-section__total {
  font-variant-numeric: tabular-nums;
}
.interview-template-question {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
}
/* M16.26 — Question card head row carries the prompt label + the
 * per-question "Not asked" skip toggle. Toggle is right-aligned so
 * the prompt remains the visual anchor. */
.interview-template-question__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.interview-template-question__prompt {
  font-weight: 600;
  margin-bottom: 4px;
  flex: 1;
}
.hr-iv-q-skip-toggle {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--ink-soft, #6b7280);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hr-iv-q-skip-toggle:hover {
  color: var(--primary, #120A8F);
}
.hr-iv-q-skip-toggle:focus-visible {
  outline: 2px solid var(--primary, #120A8F);
  outline-offset: 2px;
  border-radius: 4px;
}
/* M16.26 — Skipped-state styling. Card greys out + inputs disabled-
 * looking; the manager can still click "Mark asked" to bring it
 * back. Inputs aren't disabled at the DOM level so the dirty-close
 * snapshot stays simple, but they're pointer-events:none so the
 * skipped state is the source of truth. */
.interview-template-question[data-iv-q-skipped="1"] {
  background: #f8fafc;
  opacity: 0.65;
}
.interview-template-question[data-iv-q-skipped="1"] .interview-template-question__prompt,
.interview-template-question[data-iv-q-skipped="1"] .interview-template-question__help {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-soft, #9ca3af);
}
.interview-template-question[data-iv-q-skipped="1"] .interview-rating-scale,
.interview-template-question[data-iv-q-skipped="1"] .interview-template-question__textarea,
.interview-template-question[data-iv-q-skipped="1"] .interview-template-question__numeric,
.interview-template-question[data-iv-q-skipped="1"] .interview-template-question__comment-wrap {
  pointer-events: none;
  filter: grayscale(0.4);
}
.interview-template-question[data-iv-q-skipped="1"] .hr-iv-q-skip-toggle {
  color: var(--primary, #120A8F);
  font-weight: 600;
}
.interview-template-question__help {
  margin-bottom: 8px;
}
.interview-template-question__comment-wrap { margin-top: 8px; }
.interview-template-question__comment-label {
  font-size: 0.8rem;
  margin-bottom: 2px;
  color: var(--ink-soft, #4b5563);
}
.interview-template-question__comment {
  min-height: 38px;
  resize: vertical;
}
.interview-template-question__textarea {
  min-height: 38px;
  resize: vertical;
}
.interview-template-question__numeric {
  max-width: 200px;
}

/* M16.26 — Overall score input + Edit/Reset toggle button.
 * Auto-prefilled from the rating-question average; readonly until
 * the manager hits Edit (then they can override; Reset to auto
 * locks back). */
.hr-docs-interview-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hr-docs-interview-score-row .input {
  flex: 1 1 auto;
}
.hr-docs-interview-score-row .input[readonly] {
  background: #f8fafc;
  color: var(--ink-soft, #4b5563);
  cursor: not-allowed;
}

/* M16.26 — Interview-template editor: section + question CRUD.
 * Sections render as bordered cards; questions inside each
 * section are inline rows with prompt textarea + meta row
 * (kind picker + per-question flags). ↑/↓/× buttons handle
 * reorder + remove. */
.hr-itv-editor-sections .hr-itv-editor-section {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 14px;
  background: #fff;
}
.hr-itv-editor-section__head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.hr-itv-editor-section__label {
  flex: 1 1 auto;
  font-weight: 600;
}
.hr-itv-editor-section__actions {
  display: flex;
  gap: 4px;
}
.hr-itv-editor-section__questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hr-itv-editor-question {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 10px 12px;
  background: #f8fafc;
}
.hr-itv-editor-question__row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.hr-itv-editor-question__prompt {
  flex: 1 1 auto;
  min-height: 38px;
  resize: vertical;
}
.hr-itv-editor-question__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.hr-itv-editor-question__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  align-items: center;
}
.hr-itv-editor-question__meta-field {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.82rem;
  color: var(--ink-soft, #4b5563);
}
.hr-itv-editor-question__meta-field .input {
  min-width: 200px;
}
.hr-itv-editor-question__meta-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  cursor: pointer;
}
.hr-itv-editor-question__meta-toggle input[type="checkbox"]:disabled {
  cursor: not-allowed;
}
.hr-itv-editor-question__meta-toggle:has(input[type="checkbox"]:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* M16.26 — multi-interviewer panel picker. Chip-based multi-pick
 * with searchable suggestions + recent-5 list. Replaces the
 * M16.25 single-input datalist (which couldn't carry a panel). */
.hr-docs-interviewer-picker {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 8px;
  background: #fff;
}
.hr-docs-interviewer-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 24px;
  align-items: center;
}
.hr-docs-interviewer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 14px;
  background: #eff6ff;
  color: var(--primary, #120A8F);
  font-size: 0.88rem;
  font-weight: 500;
}
.hr-docs-interviewer-chip__remove {
  background: transparent;
  border: 0;
  color: var(--primary, #120A8F);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
}
.hr-docs-interviewer-chip__remove:hover {
  color: #b91c1c;
}
.hr-docs-interviewer-picker__input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.hr-docs-interviewer-picker__search {
  flex: 1 1 auto;
}
.hr-docs-interviewer-picker__suggestions {
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  background: #fff;
}
.hr-docs-interviewer-picker__suggestions.hidden {
  display: none;
}
.hr-docs-interviewer-picker__group-label {
  padding: 6px 10px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #4b5563);
  background: #f8fafc;
  border-top: 1px solid var(--line, #e5e7eb);
}
.hr-docs-interviewer-picker__group-label:first-child {
  border-top: 0;
}
.hr-docs-interviewer-picker__sug {
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.hr-docs-interviewer-picker__sug:hover {
  background: #eff6ff;
}

/* M16.26 — Candidate drawer per-section card chrome. Used by the
 * Interviews / (and future) sections to give each block a clear
 * visual boundary on the candidate drawer. */
.hr-docs-candidate-drawer-card {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 14px;
  background: #fff;
  margin-bottom: 14px;
}

/* M16.26 — Interview-template viewer form preview. Disabled inputs
 * already render at reduced contrast via the browser default;
 * pointer-events: none is belt-and-braces so the manager can't
 * stumble into focusing a disabled control. */
.hr-itv-tpl-viewer-form {
  pointer-events: none;
  opacity: 0.85;
}
.hr-itv-tpl-viewer-form .interview-template-question {
  background: #f8fafc;
}
.hr-itv-tpl-viewer-form .input,
.hr-itv-tpl-viewer-form textarea,
.hr-itv-tpl-viewer-form .interview-rating-scale__option {
  background: #fff;
}

.hr-form-tpl-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}
.hr-form-tpl-row + .hr-form-tpl-row {
  border-top: 1px dashed var(--line, #e5e7eb);
}
.hr-form-tpl-row__main {
  flex: 1 1 auto;
  min-width: 0;
}
.hr-form-tpl-row__actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.hr-form-tpl-banner {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.hr-form-tpl-fields {
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 4px;
}

.hr-form-tpl-viewer-field {
  padding: 6px 0;
}
.hr-form-tpl-viewer-field + .hr-form-tpl-viewer-field {
  border-top: 1px dashed var(--line, #e5e7eb);
}

/* M16.10 — Audit-style tab strip (Your templates / System library) */
/* M16.26 — HR Documents settings sub-tabs (Form templates /
 * Candidate portal / Interview templates). Visually the same
 * pattern as ``.hr-form-tpl-tabs`` (inner per-card tabs) — kept
 * as a distinct class so we can evolve the outer surface
 * independently of the inner ones, and so future readers don't
 * confuse the two layers when reading the markup.
 *
 * Behaviour gated by JS: clicking a tab toggles ``.is-active``
 * on the tab + flips ``.is-active`` / ``.hidden`` on the
 * ``[data-hr-docs-section-panel]`` wrappers below. Two wrappers
 * with the same ``data-hr-docs-section`` attribute are treated
 * as one group (used for the Candidate portal section, which
 * spans two parts of the original markup). */
.hr-docs-section-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  margin: 16px 0 4px;
  align-items: center;
}
.hr-docs-section-tab {
  background: transparent;
  border: 0;
  padding: 10px 0 12px;
  cursor: pointer;
  font-weight: 500;
  color: var(--ink-soft, #4b5563);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 1rem;
}
.hr-docs-section-tab:hover {
  color: var(--ink, #111827);
}
.hr-docs-section-tab.is-active {
  color: var(--primary, #120A8F);
  border-bottom-color: var(--primary, #120A8F);
  font-weight: 600;
}
.hr-docs-section-panel {
  display: none;
}
.hr-docs-section-panel.is-active {
  display: block;
}

.hr-form-tpl-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  align-items: center;
}
.hr-form-tpl-tab {
  background: transparent;
  border: 0;
  padding: 8px 0 10px;
  cursor: pointer;
  font-weight: 500;
  color: var(--ink-soft, #4b5563);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}
.hr-form-tpl-tab:hover {
  color: var(--ink, #111827);
}
.hr-form-tpl-tab.is-active {
  color: var(--primary, #120A8F);
  border-bottom-color: var(--primary, #120A8F);
}
.hr-form-tpl-count {
  display: inline-block;
  background: #eef2ff;
  color: var(--primary, #120A8F);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.hr-form-tpl-tab.is-active .hr-form-tpl-count {
  background: var(--primary, #120A8F);
  color: #fff;
}

/* M16.10 — Supervision-style row editor (CSS Grid).
   The fields editor uses a Grid container per row instead of an
   HTML <table>. ``grid-template-columns`` declares column widths
   exactly once and every row honours them — far more reliable than
   a <table> + table-layout:fixed combo, which kept collapsing the
   label column whenever the modal narrowed on a smaller viewport. */
.hr-form-tpl-grid {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  overflow-y: auto;
  overflow-x: auto;
  max-height: 55vh;
  font-size: 0.9rem;
}
.hr-form-tpl-grid__head,
.hr-form-tpl-grid__row {
  display: grid;
  grid-template-columns: 32px 36px minmax(180px, 1fr) 180px 80px 110px;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
}
.hr-form-tpl-grid__head {
  background: #f8fafc;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #4b5563);
  border-bottom: 1px solid var(--line, #e5e7eb);
  position: sticky;
  top: 0;
  z-index: 1;
  padding-top: 8px;
  padding-bottom: 8px;
}
.hr-form-tpl-grid__row {
  border-bottom: 1px solid var(--line-soft, #f1f5f9);
}
.hr-form-tpl-grid__row:last-child {
  border-bottom: 0;
}
.hr-form-tpl-grid__row--section {
  background: #f8fafc;
}
.hr-form-tpl-grid__row--section .hr-form-tpl-cell-label input {
  font-weight: 600;
  background: transparent;
  border-color: transparent;
}
.hr-form-tpl-grid__row--section .hr-form-tpl-cell-label input:focus {
  background: #fff;
  border-color: var(--line, #e5e7eb);
}
.hr-form-tpl-grid .hr-form-tpl-cell-handle {
  text-align: center;
  color: #cbd5e1;
}
.hr-form-tpl-grid .hr-form-tpl-cell-num {
  text-align: center;
  color: var(--ink-soft, #4b5563);
  font-weight: 500;
}
.hr-form-tpl-grid .hr-form-tpl-cell-required {
  text-align: center;
}
.hr-form-tpl-grid .hr-form-tpl-cell-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.hr-form-tpl-cell-label input,
.hr-form-tpl-format {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.9rem;
  padding: 6px 8px;
}
.hr-form-tpl-format {
  padding: 4px 8px;
  font-size: 0.85rem;
}
.hr-form-tpl-handle {
  cursor: grab;
  user-select: none;
}
.hr-form-tpl-section-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #e0e7ff;
  color: var(--primary, #120A8F);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Inline options block for multiple-choice rows. Indents past the
   handle + # columns so it visually hangs off the field row above. */
.hr-form-tpl-grid__options {
  background: #fafbfd;
  padding: 0 12px 10px 76px;
  border-bottom: 1px solid var(--line-soft, #f1f5f9);
}
.btn.btn-xs {
  padding: 2px 6px;
  font-size: 0.85rem;
  min-width: 28px;
}

/* M16.10 — Shared drag-handle icon. Two horizontal lines, used
   on every reorderable surface across the app (HR Docs catalogue
   rows, form-template fields editor, Manage Sections modal). The
   handle is the only draggable element on a row. */
.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  cursor: grab;
  color: #94a3b8;
  user-select: none;
  border-radius: 4px;
}
.drag-handle:hover {
  color: var(--ink, #111827);
  background: #eef2ff;
}
.drag-handle:active {
  cursor: grabbing;
}
.drag-handle__svg {
  display: block;
  pointer-events: none;
}

/* M16.10 — Save toast (bottom-right, ephemeral). Used to confirm
   any persisted change without modal-blocking the user. */
.save-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #16a34a;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  z-index: 9999;
  transform: translateY(8px);
  opacity: 0;
  animation: save-toast-in 0.18s ease forwards;
  pointer-events: none;
}
@keyframes save-toast-in {
  to { opacity: 1; transform: translateY(0); }
}
.save-toast.save-toast--leaving {
  animation: save-toast-out 0.22s ease forwards;
}
@keyframes save-toast-out {
  to { opacity: 0; transform: translateY(8px); }
}

/* M16.10 — Drag-drop slot indicators. ``is-dragover-before`` draws
   a primary-coloured line ABOVE a row (drop here = insert above),
   ``is-dragover-after`` draws one BELOW (drop here = append after).
   Replaces the previous ``is-dragover`` outline approach which
   only signalled "this row is the target", not "this gap is the
   drop slot" — important for distinguishing direction. */
.hr-docs-row.is-dragover-before {
  box-shadow: 0 -2px 0 0 var(--primary, #120A8F);
}
.hr-docs-row.is-dragover-after {
  box-shadow: 0 2px 0 0 var(--primary, #120A8F);
}

/* M16.10 — Drag-drop visual feedback (universal). The card itself
   MOVES in the DOM during drag (live reorder via insertBefore on
   pointermove), so the user sees exactly where the row lands as
   they drag. The .is-dragging style highlights the active source
   so it stays visually distinct from neighbours while in motion.

Applied to ANY ``.is-dragging`` element so every drag-drop
   surface in the app shares one look — HR Docs catalogue rows,
   form-template fields editor, Manage Sections modal, supervision
   template question rows, audit checklist rows + sections, meeting
   template question rows, and any future surface. The reference
   pattern is the HR Documents catalogue row (per the user's
   "highlight the whole item and move up and down" rule). */
.is-dragging {
  background: #eef2ff !important;
  border-color: var(--primary, #120A8F) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
  cursor: grabbing;
}
.hr-form-tpl-grid__row.is-dragover,
.hr-docs-row.is-dragover,
.hr-docs-section-row.is-dragover {
  outline: 2px dashed var(--primary, #120A8F);
  outline-offset: -2px;
  background: #eef2ff;
}
.hr-docs-row[draggable="true"] {
  cursor: grab;
}
.hr-docs-row[draggable="true"]:active {
  cursor: grabbing;
}
.hr-docs-row-handle {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: #cbd5e1;
  user-select: none;
  font-size: 0.95rem;
}

/* Manage Sections modal list rows */
.hr-docs-sections-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.hr-docs-section-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid transparent;
}
.hr-docs-section-row:hover {
  background: #f8fafc;
  border-color: var(--line, #e5e7eb);
}
/* Every input takes the same flex-grown width so all section
   rows look like a single column of fields. The action buttons
   are flex:0 with explicit widths so they line up on the right. */
.hr-docs-section-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
}
.hr-docs-section-row .btn-xs {
  flex: 0 0 auto;
}
.hr-docs-sections-list {
  /* Already declared above; reinforce overflow constraints so the
     modal card doesn't overflow horizontally when section labels
     are long. */
  overflow-x: hidden;
}

/* Applicant-preview frame inside the viewer modal */
.hr-form-tpl-preview-frame {
  background: #f8fafc;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 18px 20px;
  max-height: 60vh;
  overflow-y: auto;
}
.hr-form-tpl-preview {
  background: #fff;
  border-radius: 6px;
  padding: 16px 18px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.hr-form-tpl-preview-section {
  margin: 18px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  font-size: 1.02rem;
  color: var(--ink, #111827);
}
.hr-form-tpl-preview-section:first-child {
  margin-top: 0;
}
.hr-form-tpl-preview-field {
  margin-bottom: 12px;
}
.hr-form-tpl-preview-label {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink, #111827);
  margin-bottom: 4px;
}
.hr-form-tpl-preview .input[disabled] {
  background: #f8fafc;
  color: var(--ink-soft, #4b5563);
  cursor: not-allowed;
}
.hr-form-tpl-preview-radios {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* M16.10 — Submission-mode radio cards on the HR doc Type modal */
.hr-docs-submission-mode-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.hr-docs-submission-mode-opt {
  flex: 1 1 200px;
  min-width: 180px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fff;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.hr-docs-submission-mode-opt:hover {
  border-color: var(--primary, #120A8F);
}
.hr-docs-submission-mode-opt:has(input:checked) {
  border-color: var(--primary, #120A8F);
  background: #eef2ff;
}
.hr-docs-submission-mode-opt input {
  margin-top: 3px;
  flex: 0 0 auto;
}
.hr-docs-submission-mode-opt__title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink, #111827);
}

/* M16.13 — Care home logo upload card. Two-column layout: square
   preview tile on the left, file-drop + actions on the right.
   Mirrors the modern upload chrome the rest of the app uses
   (.file-drop primitive + chip-button actions). The compact
   variant shrinks the file-drop padding so the right column
   doesn't tower over the preview. */
.cha-logo-uploader {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: start;
}
.cha-logo-uploader__preview {
  width: 140px;
  height: 140px;
  border-radius: 10px;
  border: 1px solid var(--line, #e5e7eb);
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cha-logo-uploader__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}
.cha-logo-uploader__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #475569);
}
.cha-logo-uploader__actions {
  min-width: 0;
}
.file-drop.file-drop--compact {
  padding: 14px 14px;
  gap: 6px;
}
.file-drop.file-drop--compact .file-drop-primary {
  font-size: 0.88rem;
}
.file-drop.file-drop--compact .file-drop-secondary {
  font-size: 0.78rem;
}
@media (max-width: 540px) {
  .cha-logo-uploader {
    grid-template-columns: 1fr;
  }
  .cha-logo-uploader__preview {
    width: 120px;
    height: 120px;
    margin: 0 auto;
  }
}

/* ----------------------------------------------------------------
 * M16.24 Phase D — candidate readiness strip
 * Renders between identity card and Interviews row in the candidate
 * drawer. Stepper + summary line + blockers list. Promote modal
 * also reuses .candidate-readiness-blockers for the in-modal block.
 * ---------------------------------------------------------------- */

.candidate-readiness-strip {
  margin: 14px 0 6px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.candidate-readiness-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.candidate-readiness-stepper__node {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-soft, #64748b);
}

.candidate-readiness-stepper__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface-2, #e2e8f0);
  border: 2px solid var(--surface-2, #e2e8f0);
  flex-shrink: 0;
}

.candidate-readiness-stepper__node--completed .candidate-readiness-stepper__dot,
.candidate-readiness-stepper__node--active .candidate-readiness-stepper__dot {
  background: var(--primary);
  border-color: var(--primary);
}

.candidate-readiness-stepper__node--active .candidate-readiness-stepper__label {
  color: var(--text);
  font-weight: 600;
}

.candidate-readiness-stepper__node--completed .candidate-readiness-stepper__label {
  color: var(--text);
}

.candidate-readiness-stepper__line {
  flex: 1;
  min-width: 14px;
  max-width: 36px;
  height: 2px;
  background: var(--surface-2, #e2e8f0);
}

.candidate-readiness-stepper__line--completed {
  background: var(--primary);
}

/* M16.24 follow-up — "Interviewed" node skipped state.
 * The lifecycle can advance to offer_accepted/promoted without an
 * interview ever being logged; render that node amber + dashed
 * to make the gap visible at a glance. */
.candidate-readiness-stepper__node--skipped .candidate-readiness-stepper__dot {
  background: #fbbf24;
  border-color: #f59e0b;
  border-style: dashed;
}
.candidate-readiness-stepper__node--skipped .candidate-readiness-stepper__label {
  color: #92400e;
  font-weight: 600;
}
.candidate-readiness-stepper__line--skipped {
  background: repeating-linear-gradient(
    to right,
    #f59e0b 0,
    #f59e0b 4px,
    transparent 4px,
    transparent 7px
  );
}

.candidate-readiness-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.candidate-readiness-terminal {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.candidate-readiness-blockers {
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 6px;
  padding: 12px 14px;
}

.candidate-readiness-blockers__title {
  font-weight: 600;
  color: #9a3412;
  margin-bottom: 6px;
}

.candidate-readiness-blockers__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.candidate-readiness-blockers__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--text);
}

.candidate-readiness-blockers__detail {
  display: block;
}

/* Override acknowledgement input on the promote modal. The label
 * + input + small hint stack vertically; visually paired with the
 * blockers block above it. */
.promote-override-ack .input {
  width: 100%;
  max-width: 240px;
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------
 * M16.24 Phase E — interview templates UI
 * Modal: question list rendered below the template-select. Each
 * question is a label + (rating-radio | textarea) pair.
 * Drawer: per-row "View answers" disclosure expanding to the
 * compact answer list.
 * ---------------------------------------------------------------- */

.interview-template-questions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  padding: 12px 14px;
}

.interview-template-question {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.interview-template-question__prompt {
  margin: 0;
  font-weight: 600;
}

.interview-template-question__help {
  margin-bottom: 2px;
}

.interview-template-question__textarea {
  resize: vertical;
}

.interview-rating-scale {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.interview-rating-scale__option {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  background: #fff;
}

.interview-rating-scale__option input[type="radio"] {
  margin: 0;
}

/* Belt-and-braces: split into TWO sibling rules with identical
 * bodies so each stands on its own. A combined comma list would
 * be discarded entirely by browsers that fail to parse ``:has()``
 * (top-level selector lists are NOT forgiving — only ``:is()`` /
 * ``:where()`` introduce that), which would defeat the whole
 * point of the JS-managed fallback below.
 *  - ``:has()`` rule — modern, declarative path (Chrome 105+,
 *    Safari 15.4+, Firefox 121+). Repaints on radio click without
 *    JS involvement.
 *  - ``.is-checked`` rule — JS-managed fallback. ``app.js``'s
 *    rating-scale onchange handler toggles the class so older
 *    enterprise-locked browsers (Firefox <121) still get the
 *    highlighted-option treatment. */
.interview-rating-scale__option:has(input:checked) {
  border-color: var(--primary);
  background: #eff6ff;
}
.interview-rating-scale__option.is-checked {
  border-color: var(--primary);
  background: #eff6ff;
}

.interview-rating-scale__option:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Drawer answer-list disclosure. Compact two-column rows below
 * the matching interview row in the table. */
.interview-answers-disclosure-row td {
  padding: 0 0 8px;
  background: #f8fafc;
}

.interview-answers-disclosure {
  margin: 0 14px 6px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
}

.interview-answers-disclosure summary {
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--text-soft, #64748b);
}

.interview-answers-disclosure[open] summary {
  margin-bottom: 8px;
}

.interview-answers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.interview-answer-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
}

.interview-answer-row__label {
  font-weight: 600;
  color: var(--text);
}

.interview-answer-row__value {
  color: var(--text);
}

/* M16.26 — Per-answer comment surfaced below the value when the
 * template question had ``comment_enabled=true``. Smaller font +
 * muted lede label so it visually attaches to its value without
 * competing with the answer itself. */
.interview-answer-row__comment {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-soft);
  white-space: pre-wrap;
}

.interview-answer-rating {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--primary);
}

.interview-answer-text {
  white-space: pre-wrap;
}

/* M16.24 follow-up — interview-row attachment chip. Compact
 * paperclip-icon + filename pair under the Notes column. */
.interview-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--primary);
}
.interview-attachment-chip a {
  color: var(--primary);
  text-decoration: none;
}
.interview-attachment-chip a:hover {
  text-decoration: underline;
}

/* M16.26 follow-up — Read-only Interview view modal. Renders the
 * full interview (branded header + facts strip + score breakdown +
 * section-grouped answer list + attachment). Designed to flow
 * cleanly across multiple A4 pages — small atomic blocks use
 * page-break-inside:avoid but the answer list as a whole is allowed
 * to break between question cards, so a long template doesn't leave
 * giant blank gaps on intermediate pages. */
.hr-iv-view {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--ink, #111827);
}

/* Branded header: care-home logo (or Trine wordmark fallback) on
 * the left, document title + candidate identity on the right. */
.hr-iv-view__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--primary, #120A8F);
  page-break-inside: avoid;
}
.hr-iv-view__brand-logo {
  /* Explicit height + width (not "auto") because SVGs without
   * intrinsic dimensions can resolve to 0×0 under ``width: auto``
   * in some browsers, especially during print. height drives the
   * visible size; width gets capped so wide wordmarks don't push
   * the title block off-screen. */
  height: 44px;
  width: auto;
  max-width: 180px;
  min-width: 44px;
  object-fit: contain;
  flex: 0 0 auto;
}
/* Text-name fallback when no care-home logo is set. Brand-primary
 * coloured wordmark so it reads as the document's letterhead, not
 * just a paragraph. */
.hr-iv-view__brand-name {
  flex: 0 0 auto;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--primary, #120A8F);
  max-width: 240px;
  word-wrap: break-word;
}
.hr-iv-view__brand-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hr-iv-view__brand-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink, #111827);
}
.hr-iv-view__brand-subtitle {
  font-size: 0.85rem;
  color: var(--text-soft, #6b7280);
}

/* Facts strip — 2 columns; "Template" gets full width since names
 * can be long. */
.hr-iv-view__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
  margin: 0;
  page-break-inside: avoid;
}
.hr-iv-view__facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hr-iv-view__facts-span {
  grid-column: 1 / -1;
}
.hr-iv-view__facts dt {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft, #6b7280);
}
.hr-iv-view__facts dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink, #111827);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Generic section heading shared by Notes / Score / Attachment.
 * ``--keep`` modifier requests page-break-inside:avoid for small
 * sections that fit on one page; the Answers section deliberately
 * omits it so its contents can flow naturally. */
.hr-iv-view__section h4 {
  margin: 0 0 8px 0;
  font-size: 0.95rem;
  font-weight: 700;
  border-bottom: 1px solid var(--line, #e5e7eb);
  padding-bottom: 4px;
  color: var(--ink, #111827);
}
.hr-iv-view__section--keep {
  page-break-inside: avoid;
}
.hr-iv-view__notes {
  white-space: pre-wrap;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.hr-iv-view__section-totals {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hr-iv-view__section-totals li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.9rem;
  border-bottom: 1px dashed var(--line, #e5e7eb);
}
.hr-iv-view__section-totals li:last-child {
  border-bottom: none;
}

/* Section-grouped answers — each section is a sub-heading; each Q+A
 * is an atomic page-break-inside:avoid card so a question never
 * splits across pages. Card chrome is minimal (no border by default)
 * so print stays light on ink — a dashed bottom rule separates
 * adjacent QAs within the same section. */
.hr-iv-view__answers-section {
  margin-top: 12px;
}
.hr-iv-view__answers-section-title {
  margin: 0 0 8px 0;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary, #120A8F);
  page-break-after: avoid;
}
.hr-iv-view__qa {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line, #e5e7eb);
  page-break-inside: avoid;
  align-items: baseline;
}
.hr-iv-view__qa:last-child {
  border-bottom: none;
}
.hr-iv-view__qa-prompt {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink, #111827);
  line-height: 1.4;
}
.hr-iv-view__qa-value {
  font-size: 0.95rem;
  text-align: right;
  white-space: pre-wrap;
}
.hr-iv-view__qa-comment {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--text-soft, #6b7280);
  line-height: 1.4;
  white-space: pre-wrap;
}
.hr-iv-view__qa-comment-label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--text-soft, #6b7280);
  margin-right: 4px;
}

/* M16.26 follow-up — Print stylesheet scoped via the
 * ``.printing-interview`` body class. The print path clones the
 * modal's rendered content into ``#hrDocsInterviewPrintWrap``
 * appended to the document body, then hides every other top-level
 * body child for the duration of the print. This sidesteps the
 * modal's fixed-overlay layout which clipped the top of the
 * content in earlier attempts. */
@media print {
  body.printing-interview { background: white !important; }
  body.printing-interview > * {
    display: none !important;
  }
  body.printing-interview > #hrDocsInterviewPrintWrap {
    display: block !important;
    position: static !important;
    background: white !important;
    padding: 16px !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
}
/* The print wrap also lives in normal flow when ``.printing-interview``
 * is set — hide it on screen entirely. (It only exists during the
 * print round-trip; the JS removes it on ``afterprint``.) */
#hrDocsInterviewPrintWrap {
  display: none;
}
@media print {
  #hrDocsInterviewPrintWrap {
    display: block;
  }
}

/* M16.26 — Structured error block inside the interview modal. The
 * backend's required-coverage error returns a flat semicolon-joined
 * list; the JS renderer turns that into a bulleted list. CSS keeps
 * the block readable inside the modal: padded, bordered, max-height
 * with internal scroll so an interview template with 16 missing
 * answers doesn't push the modal footer off-screen. */
.interview-modal-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #991b1b;
  padding: 12px 14px;
  font-size: 0.85rem;
  line-height: 1.4;
  max-height: 220px;
  overflow-y: auto;
}
.interview-modal-error__lede {
  font-weight: 600;
  margin-bottom: 8px;
  color: #7f1d1d;
}
.interview-modal-error__list {
  margin: 0;
  padding-left: 20px;
}
.interview-modal-error__list li {
  margin-bottom: 4px;
}
.interview-modal-error__list li:last-child {
  margin-bottom: 0;
}

/* M16.26 — Draft interview row treatment. Drafts haven't been
 * finalised; they shouldn't visually compete with completed
 * interviews. Faint amber wash + 3px left edge echoes the
 * "this is in progress" signal that the Draft pill carries. The pill
 * itself (``.readiness-badge--sm.watch``) provides the strong cue.
 * Wins specificity against ``.table tbody tr:hover`` so the draft
 * tint persists on hover. */
.table tbody tr.interview-row--draft td,
.interview-row--draft td {
  background: #fffbeb;
}
.table tbody tr.interview-row--draft:hover td,
.interview-row--draft:hover td {
  background: #fef3c7;
}
.interview-row--draft td:first-child {
  box-shadow: inset 3px 0 0 #b45309;
}

/* M16.24 follow-up — capture-method radio group inside the
 * interview modal. Three pill-like radio chips that visually
 * communicate the XOR (Free-form / Template / Attachment). */
.interview-mode-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.interview-mode-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  background: #fff;
  user-select: none;
}

.interview-mode-option input[type="radio"] {
  margin: 0;
}

.interview-mode-option:has(input:checked),
.interview-mode-option.is-checked {
  border-color: var(--primary);
  background: #eff6ff;
  color: var(--primary);
  font-weight: 600;
}

/* Codex P1 — capture-method is locked when editing an existing
 * interview (backend ``InterviewPatchIn`` doesn't carry
 * ``template_id`` so a mode swap mid-edit would silently lose
 * answers OR 409 on the attachment upload). The chips render at
 * reduced contrast and ``cursor: not-allowed`` so the lock is
 * obvious; the active mode keeps its primary-blue fill so the
 * manager can still see which mode the row is in.
 *
 * Two rules per the modal-dropdown-pattern memory: a ``:has()``
 * variant for modern browsers + an ``.is-locked`` fallback class
 * the JS sets explicitly. Combined into one selector list, the
 * whole rule would be dropped on browsers without ``:has()``. */
.interview-mode-option:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}
.interview-mode-option.is-locked {
  cursor: not-allowed;
  opacity: 0.55;
}
.interview-mode-option:has(input:disabled:checked),
.interview-mode-option.is-locked.is-checked {
  opacity: 0.85;
}

/* ----------------------------------------------------------------
 * M16.24 follow-up — candidate-drawer History disclosure
 * Collapsed by default. Native <details>/<summary> drives the
 * toggle; custom chevron + label styling match the surrounding
 * <h4> typography so the section header feels like every other
 * panel heading.
 * ---------------------------------------------------------------- */

.hr-docs-candidate-history-wrap > summary {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  list-style: none;
}

.hr-docs-candidate-history-wrap > summary::-webkit-details-marker {
  display: none;
}

.hr-docs-candidate-history-wrap > summary::before {
  content: '▸';
  display: inline-block;
  font-size: 12px;
  color: var(--text-soft, #64748b);
  transition: transform 0.15s ease;
}

.hr-docs-candidate-history-wrap[open] > summary::before {
  transform: rotate(90deg);
}

.hr-docs-candidate-history-wrap > summary:hover .hr-docs-candidate-history-summary__label {
  color: var(--primary);
}

.hr-docs-candidate-history-summary__label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.hr-docs-history-more {
  display: flex;
  justify-content: center;
}

/* ============================================================
   feature/my-actions-v1 — user-centric triage panel.
   Reuses ``.readiness-badge--sm`` for state + evidence pills
   (per the pill-style-guide); 6px radius matches the flat-design
   rule. Urgency tints stay calm — left-border accent only, no
   filled-row tints — so the page reads as a compliance triage
   list, not a noisy dashboard.
   ============================================================ */
.my-actions-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.my-actions-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: #f1f5f9;
  color: var(--text-2, #475569);
  font-size: 0.8125rem;
  font-weight: 500;
}
/* The UA stylesheet's ``[hidden] { display: none }`` ties on
   specificity with ``.my-actions-scope-chip``/``.my-actions-scope-dropdown``
   (both (0,1,0)), and author CSS wins on cascade order — so the
   ``element.hidden = true`` assignment in JS did NOT actually hide
   the element. These rules raise specificity to (0,2,0) and force
   display:none when the attribute is set. Surfaced when an only-
   inactive-home user landed on the prompt path and the dropdown
   wrap kept rendering empty alongside the prompt. */
.my-actions-scope-chip[hidden] {
  display: none;
}
/* feature/my-actions-cross-home-scope-dropdown — compact label +
   select pair sitting in the panel header. Wraps below the H1 on
   narrow viewports. */
.my-actions-scope-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-2, #475569);
}
.my-actions-scope-dropdown__label {
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* See ``.my-actions-scope-chip[hidden]`` comment above — same
   specificity-override fix for the dropdown wrap so ``hidden=true``
   from JS actually takes effect. */
.my-actions-scope-dropdown[hidden] {
  display: none;
}
.my-actions-scope-dropdown .input {
  /* Explicit width — the global ``.input`` rule sets width:100%,
     which inside an inline-flex container with min-width:200px is
     under-constrained and can balloon to push horizontal layout.
     Fixed width keeps the trigger predictable and the page-level
     overflow at zero on desktop. */
  width: 220px;
  height: var(--input-h);
  font-size: 0.875rem;
  padding: 0 10px;
}
@media (max-width: 700px) {
  .my-actions-meta {
    flex-wrap: wrap;
    margin-top: 8px;
  }
  .my-actions-scope-dropdown {
    flex: 1 1 auto;
  }
  .my-actions-scope-dropdown .input {
    width: 100%;
  }
}
.my-actions-prompt {
  margin-top: 16px;
  padding: 24px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  text-align: center;
}
.my-actions-prompt__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1, #0f172a);
  margin-bottom: 6px;
}
.my-actions-prompt__body {
  font-size: 0.875rem;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.45;
}
.my-actions-body {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.my-actions-empty {
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  text-align: center;
}
.my-actions-empty__title {
  font-weight: 600;
  color: var(--text-1, #0f172a);
  margin-bottom: 4px;
}
.my-actions-empty__body {
  font-size: 0.875rem;
}
.my-actions-empty__body .link-button,
.my-actions-empty .link-button {
  /* Inline text-as-button — used for the "Try All my work →" CTA
     in the whole-page empty state. Reset the native <button> chrome
     and underline like a link so the empty state reads as a sentence
     with one actionable phrase. margin-left puts a small gap after
     the hint sentence when both are rendered. */
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--primary, #120A8F);
  text-decoration: underline;
  cursor: pointer;
  margin-left: 6px;
}
.my-actions-empty__body .link-button:hover,
.my-actions-empty .link-button:hover {
  text-decoration: none;
}
/* My Actions source-filter tab strip (M16.40 polish). Sits above the
   three urgency sections (Overdue / Due soon / Open). Tabs filter the
   feed by `_source` (audit / readiness). Count pill flips amber when
   the tab's source has overdue items, giving an at-a-glance workload
   read without opening the tab. */
.my-actions-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  padding: 0 0 0 2px;
}
.my-actions-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 12px;
  margin-bottom: -1px;
  border-radius: 6px 6px 0 0;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.my-actions-tab:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.03);
}
.my-actions-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: transparent;
}
.my-actions-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #eef0f4;
  color: #4b5563;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}
.my-actions-tab.is-active .my-actions-tab__count {
  background: var(--primary);
  color: #fff;
}
/* Amber when the source has overdue items — toggles per-tab from JS. */
.my-actions-tab__count.my-actions-tab__count--overdue {
  background: #fef3c7;
  color: #92400e;
}
.my-actions-tab.is-active .my-actions-tab__count.my-actions-tab__count--overdue {
  background: #f59e0b;
  color: #fff;
}

.my-actions-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.my-actions-section__title {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-2, #475569);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.my-actions-section__count {
  font-weight: 500;
  color: var(--text-3, #94a3b8);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
}
.my-actions-section__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.my-actions-section__empty {
  font-size: 0.8125rem;
  font-style: italic;
  padding: 8px 12px;
}
.my-actions-row {
  /* Button reset — the whole row is clickable so it deserves
     button semantics + keyboard focus. */
  appearance: none;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.my-actions-row:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.my-actions-row:focus-visible {
  outline: 2px solid var(--primary, #120A8F);
  outline-offset: 1px;
}
.my-actions-row--overdue {
  border-left-color: #dc2626;
}
.my-actions-row--due_soon {
  border-left-color: #d97706;
}
.my-actions-row--later {
  border-left-color: #cbd5e1;
}
.my-actions-row__main {
  min-width: 0;
}
.my-actions-row__title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-1, #0f172a);
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}
.my-actions-row__meta {
  font-size: 0.8125rem;
  color: var(--text-3, #94a3b8);
}
.my-actions-row__pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* feature/my-actions-cross-home-scope-dropdown — per-row scope chip
   in aggregate (All my work) mode. Sits under the meta line so the
   title + category stay the primary reading order. */
.my-actions-row__scope-row {
  margin-top: 4px;
}
.my-actions-row__scope-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: #eef2f7;
  color: var(--text-2, #475569);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.my-actions-row__scope-chip--provider {
  background: #ede9fe;
  color: var(--primary, #120A8F);
}
/* feature/my-actions-audit-integration — source chip ("Readiness" /
   "Audit") on every row. Shares the chip footprint with the scope
   chip; rendered in the new ``.my-actions-row__chips-row`` flex
   strip so source + scope chips wrap together on narrow viewports.
   Audit gets a slightly different tint (calm amber-grey) so the two
   sources are visually distinguishable at a glance without shouting. */
.my-actions-row__chips-row {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.my-actions-row__source-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.my-actions-row__source-chip--readiness {
  background: #e0e7ff;
  color: var(--primary, #120A8F);
}
.my-actions-row__source-chip--audit {
  background: #fef3c7;
  color: #92400e;
}
.my-actions-row__owner-hint {
  font-size: 0.75rem;
  color: var(--text-3, #94a3b8);
  padding: 2px 6px;
  border-radius: 6px;
  background: #f1f5f9;
}
.my-actions-row__due {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2, #475569);
  white-space: nowrap;
}
.my-actions-row--overdue .my-actions-row__due {
  color: #dc2626;
}
.my-actions-row--due_soon .my-actions-row__due {
  color: #d97706;
}

/* Mobile — stack the row into a column so nothing scrolls
   horizontally. The pills wrap under the title and the due
   label sits at the bottom. */
@media (max-width: 700px) {
  .my-actions-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .my-actions-row__pills {
    justify-content: flex-start;
  }
}

/* ============================================================
   Evidence tab — unified flat boxes (6px corners, solid surface,
   single light shadow). Overrides the global radius-xl/gradient
   panels so every box on the Evidence surface shares one card
   chrome. Scoped to Evidence so the rest of the app is untouched.
   Pills/badges keep their pill radius.
   ============================================================ */
.evidence-health-card,
.panel[data-care-home-panel="evidence"]{
  border-radius:6px;
  background:var(--surface);
  box-shadow:var(--shadow-xs);
}
/* System-tools wrapper keeps its muted secondary surface; nested
   panels stay flat (no shadow). Specificity beats the panel rule. */
.panel.evidence-system-tools{
  background:var(--surface-2);
}
.evidence-system-tools .panel{
  box-shadow:none;
}
/* KPI cards stay interactive — restore flat hover/active fills that the
   solid-surface base above would otherwise flatten on interaction. */
.kpi-grid--evidence .kpi-card-actionable:hover{
  border-color:var(--primary);
  background:rgba(18,10,143,0.06);
  box-shadow:0 0 0 2px var(--primary-soft);
}
.kpi-grid--evidence .kpi-card-actionable.is-active,
.kpi-grid--evidence .kpi-card-actionable.is-active:hover{
  border-color:var(--primary);
  background:#c8c5e8;
  box-shadow:inset 0 0 0 1px var(--primary), 0 0 0 3px var(--primary-soft);
}

/* ============================================================
   M16.52 — Report Builder Lite (catalogue → builder → preview).
   Flat 6px chrome consistent with the Evidence redesign.
   ============================================================ */
.reports-catalogue__group + .reports-catalogue__group{ margin-top:18px; }
.reports-catalogue__group-title{
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:10px;
}
.reports-catalogue__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:12px;
}
.report-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  box-shadow:var(--shadow-xs);
  cursor:pointer;
  font:inherit;
  color:inherit;
}
.report-card:hover{ border-color:var(--primary); background:rgba(18,10,143,0.04); }
.report-card:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--primary-soft); }
.report-card__title{ font-weight:700; color:var(--text); }
.report-card__desc{ color:var(--text-muted); font-size:0.9rem; flex:1 1 auto; }
.report-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
.report-card__formats{ display:flex; gap:6px; flex-wrap:wrap; }
.report-format-badge{
  font-size:0.72rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-soft);
  border:1px solid var(--line);
}
.report-card__cta{ font-size:0.85rem; font-weight:700; color:var(--primary); white-space:nowrap; }

.report-builder-head{ display:flex; flex-direction:column; gap:8px; }
.report-builder-back{ align-self:flex-start; }
.report-builder-controls{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.report-ctl{ display:flex; flex-direction:column; gap:4px; min-width:180px; }
.report-ctl__label{ font-size:0.8rem; font-weight:700; color:var(--text-muted); }
.report-builder-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }
.report-export-buttons{ display:inline-flex; gap:8px; flex-wrap:wrap; }
.report-preview__meta{ font-size:0.85rem; margin-bottom:8px; }
/* feature/soft-launch-browser-qa-notes — wrap was missing ``overflow-x:auto``
 * while the inner ``.report-table`` sets ``min-width:720px``, which on any
 * phone <720px pushed the table beyond the viewport and forced a page-
 * level horizontal scrollbar. The wrap now scrolls internally, matching
 * the pattern used elsewhere (.audit-log-table-wrap, .menu-access-table-wrap). */
.report-table-wrap{ border:1px solid var(--line); border-radius:6px; background:var(--surface); box-shadow:var(--shadow-xs); overflow-x:auto; }
.report-table{ min-width:720px; }
.report-table thead th{ position:sticky; top:0; z-index:1; background:#f8fafc; }
.report-section__title{ font-weight:700; color:var(--text); margin-bottom:8px; }

/* Inspection Readiness in-page summary band (M16.52). */
.report-stat-band{ display:flex; gap:12px; flex-wrap:wrap; }
.report-stat{
  flex:1 1 140px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  box-shadow:var(--shadow-xs);
  padding:14px 16px;
  text-align:center;
}
.report-stat__num{ font-size:1.6rem; font-weight:800; color:var(--primary); line-height:1.1; }
.report-stat__lbl{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); margin-top:4px; }
.report-table td.report-num, .report-table th.report-num{ text-align:right; }

/* feature/email-delivery-enablement — platform Email-delivery card. */
.email-test-recipient{ max-width:280px; }
.email-status-problems{ margin:4px 0 0 18px; }

/* ============================================================================
 * Phase 5 — per-care-home Billing / Subscription dashboard
 * (feature/per-home-billing-dashboard-ui). Light, flat B2B SaaS; 6px radius;
 * brand resolves through var(--primary); status uses shared .readiness-badge
 * pills. Every surface is scoped to ONE care home.
 * ========================================================================== */
.chbilling-pane .panel-header{ margin-bottom:6px; }
.chbilling-scope-note{
  background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid var(--primary); border-radius:6px;
  padding:10px 14px; margin:0 0 16px; color:var(--text-soft); font-size:13px;
}
.chbilling-body{ display:block; }
.chbilling-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px; margin-bottom:16px;
}
@media (max-width:820px){ .chbilling-grid{ grid-template-columns:1fr; } }

.chbilling-card{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  box-shadow:var(--shadow-xs); padding:18px 18px 16px; display:flex;
  flex-direction:column; min-width:0;
}
.chbilling-card--full{ margin-bottom:16px; }
.chbilling-card__title{
  font-size:13px; font-weight:600; color:var(--text-soft);
  margin:0 0 12px; letter-spacing:.01em;
}
.chbilling-card__eyebrow{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); margin-bottom:8px;
}
.chbilling-card__body{ display:block; }
.chbilling-card__cta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chbilling-muted{ color:var(--text-muted); }
.chbilling-muted.small, .chbilling-card .small{ font-size:12px; }
.chbilling-scope-inline{ margin-top:8px; }

/* Status hero */
.chbilling-hero{ background:var(--surface-2); }
.chbilling-hero__row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.chbilling-hero__plan{ font-size:22px; font-weight:700; color:var(--text); }
.chbilling-hero__explain{ margin:10px 0 0; color:var(--text-soft); font-size:13px; line-height:1.5; }

/* Key-value rows */
.chbilling-kv-grid{ display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:14px; }
.chbilling-kv{ display:flex; flex-direction:column; gap:1px; }
.chbilling-kv__k{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
.chbilling-kv__v{ font-size:14px; font-weight:600; color:var(--text); }
.chbilling-kv--total .chbilling-kv__v{ color:var(--primary); }

/* Plan card */
.chbilling-plan-name{ font-size:17px; font-weight:700; color:var(--text); margin-bottom:6px; }
.chbilling-price{ display:flex; align-items:baseline; gap:2px; }
.chbilling-price__amt{ font-size:24px; font-weight:700; color:var(--text); }
.chbilling-price__per{ font-size:13px; color:var(--text-muted); }
.chbilling-features{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:6px; }
.chbilling-features li{ position:relative; padding-left:20px; font-size:13px; color:var(--text-soft); }
.chbilling-features li::before{
  content:""; position:absolute; left:2px; top:6px; width:8px; height:5px;
  border-left:2px solid var(--success); border-bottom:2px solid var(--success);
  transform:rotate(-45deg);
}

/* Payment method rows */
.chbilling-card-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.chbilling-card-row:last-of-type{ border-bottom:none; }
.chbilling-card-brand{ font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.chbilling-link-danger{ color:var(--danger); }

/* Config-off banner */
.chbilling-configoff{
  background:var(--warning-soft); border:1px solid var(--line);
  border-left:3px solid var(--warning); border-radius:6px;
  padding:12px 14px; margin-bottom:16px; font-size:13px; color:var(--text-soft);
}
.chbilling-configoff a{ color:var(--primary); }

/* Invoice table */
.chbilling-table-wrap{ overflow-x:auto; }
.chbilling-invoice-table{ width:100%; }
.chbilling-invoice-table td{ vertical-align:top; }

/* Documents & agreements */
.chbilling-docs{ list-style:none; margin:12px 0 0; padding:0; }
.chbilling-doc-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; color:var(--text);
}
.chbilling-doc-row:last-child{ border-bottom:none; }

/* Plan comparison (modal) + start-subscription confirm */
.chbilling-compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:8px 0; }
@media (max-width:560px){ .chbilling-compare{ grid-template-columns:1fr; } }
.chbilling-compare-col{ background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:12px 14px; }
.chbilling-compare-col__name{ font-weight:700; color:var(--text); margin-bottom:8px; }
.chbilling-compare-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.chbilling-compare-col li{ position:relative; padding-left:18px; font-size:13px; color:var(--text-soft); }
.chbilling-compare-col li::before{
  content:""; position:absolute; left:2px; top:6px; width:7px; height:4px;
  border-left:2px solid var(--success); border-bottom:2px solid var(--success); transform:rotate(-45deg);
}
.chbilling-confirm{ background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:12px 14px; display:grid; gap:8px 24px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.chbilling-confirm .chbilling-kv--total{ grid-column:1 / -1; border-top:1px solid var(--line); padding-top:8px; }

/* States */
.chbilling-state{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:28px 24px; text-align:center; box-shadow:var(--shadow-xs);
}
.chbilling-state--error{ border-left:3px solid var(--danger); text-align:left; }
.chbilling-state--at-risk{ border-left:3px solid var(--danger); }
.chbilling-state__title{ font-weight:700; color:var(--text); margin-bottom:6px; }
.chbilling-state__desc{ color:var(--text-muted); font-size:13px; margin-bottom:14px; }

/* Loading skeleton */
.chbilling-skel{ min-height:120px; }
.chbilling-skel__line{ height:12px; border-radius:6px; background:var(--surface-3); margin-bottom:10px; animation:chbilling-pulse 1.3s ease-in-out infinite; }
.chbilling-skel__line.short{ width:55%; }
@keyframes chbilling-pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* Provider Enterprise card (Provider Settings) */
.chbilling-enterprise-card{ margin-top:8px; }
.chbilling-enterprise-points{ margin:4px 0 14px; padding-left:18px; display:grid; gap:6px; color:var(--text-soft); font-size:13px; line-height:1.5; }

/* Focus states (accessibility) */
.chbilling-body .btn:focus-visible,
.chbilling-invoice-table th.sortable-th:focus-visible,
.chbilling-body a:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* Per-home billing — commercial agreement (feature/per-home-billing-agreements) */
.chbilling-agree-docs{ margin:10px 0 6px; color:var(--text-soft); }
.chbilling-agree-docs a{ color:var(--primary); }
.chbilling-agree-check{
  display:flex; align-items:flex-start; gap:9px; margin-top:10px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:6px;
  padding:11px 13px; font-size:13px; color:var(--text); cursor:pointer;
}
.chbilling-agree-check input[type="checkbox"]{ margin-top:2px; flex:0 0 auto; }
.chbilling-agree-status{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  margin:6px 0 12px; padding:9px 12px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--line);
}
.chbilling-agree-status--ok{ border-left:3px solid var(--success); }

/* Per-home billing — plan selection / change (feature/per-home-billing-plan-changes) */
.universal-modal.universal-modal--large{ max-width:760px; }
.chbilling-plan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:620px){ .chbilling-plan-grid{ grid-template-columns:1fr; } }
.chbilling-plan-card{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:14px 15px; display:flex; flex-direction:column;
}
.chbilling-plan-card.is-current{ border-color:var(--primary); background:var(--primary-soft-04); }
.chbilling-plan-card__name{ font-weight:700; color:var(--text); font-size:15px; margin-bottom:4px; }
.chbilling-plan-card__price{ font-size:20px; font-weight:700; color:var(--text); margin-bottom:4px; }
.chbilling-plan-card .chbilling-features{ margin-top:8px; flex:1 1 auto; }
.chbilling-plan-card__cta{ margin-top:12px; }
.chbilling-plan-card__cta .btn{ width:100%; justify-content:center; }
.chbilling-plan-note{ margin-top:12px; }

/* M16.62 — Resident enquiry editor modal (feature/resident-enquiry-list).
 * Two-column grid layout for paired fields; collapses to single column
 * under 720px. ``.enquiry-form-full`` lets a single child (full name +
 * textareas + error rows) span both columns. The flex-wrap layout we
 * tried first produced uneven left/right widths because the right cell
 * carries a date-picker trigger button with a different intrinsic width
 * than a regular ``<input>``; a CSS grid guarantees 50/50 regardless
 * of cell content. */
.enquiry-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
  align-items:start;
}
.enquiry-form-grid > .label{
  /* Reset any inline ``flex:`` overrides — they no longer apply once
   * the parent is a grid. The label uses the codebase-wide stacked
   * label-on-top-of-input layout (set by the existing ``.label`` rule
   * elsewhere in this file). */
  flex:none;
}
.enquiry-form-grid > .enquiry-form-full{
  grid-column:1 / -1;
}
@media (max-width: 720px){
  .enquiry-form-grid{ grid-template-columns:1fr; }
  .enquiry-form-grid > .enquiry-form-full{ grid-column:1 / -1; }
}

/* DOB hybrid row — DD/MM/YYYY text input + compact calendar picker.
 *
 * Layout uses CSS grid (``1fr auto``) so the text input claims every
 * pixel the picker doesn't need, regardless of column width. The
 * picker trigger button is collapsed to an ICON-ONLY variant inside
 * this row: its label span is hidden (it would normally render the
 * verbose "Pick date" empty-state, or the formatted picked date —
 * either of which would squeeze the text input down to a few
 * characters in a narrow grid cell), and a calendar glyph is added
 * via ``::before`` so the button still reads as a date-picker.
 *
 * The chevron stays — it signals "click to open a dropdown" which
 * matches the actual behaviour. Text input remains the primary
 * control; the picker is a shortcut for callers who'd rather scroll
 * a calendar than type the date.
 */
.enquiry-dob-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:6px;
  align-items:stretch;
}
.enquiry-dob-text{
  min-width:0;
}
.enquiry-dob-row .datetime-picker__label{
  /* Hide the verbose empty-state / formatted-date label inside the
   * DOB cell — keeps the trigger narrow whether or not a date has
   * been picked. The text input carries the human-readable value. */
  display:none;
}
.enquiry-dob-row .datetime-picker__chevron{
  /* The calendar emoji + the field's "Date of birth" label already
   * signal what the button does — the chevron just added visual
   * weight that pushed the trigger past the text input. Drop it for
   * this compact variant. */
  display:none;
}
.enquiry-dob-row .datetime-picker__trigger{
  /* Override the shared rule's ``min-width: 240px`` + ``padding:
   * 10px 14px`` — that was the real culprit behind the DOB column
   * being 70% picker / 30% text-input. With the label and chevron
   * removed there's nothing inside the button except the calendar
   * glyph below, so 36-40px total width is the right footprint. */
  min-width:0;
  padding:7px 9px;
  gap:0;
}
.enquiry-dob-row .datetime-picker__trigger::before{
  content:"📅";
  font-size:15px;
  line-height:1;
  /* Strip emoji colour rendering on platforms that support it
   * (Chrome on Linux paints the cartoon yellow calendar by
   * default); the trigger lives inside a neutral-bordered button
   * and the cooler monochrome glyph reads more consistently with
   * the rest of the modal chrome. */
  font-variant-emoji:text;
}
.enquiry-dob-error{
  display:block;
  margin-top:4px;
  color:var(--danger, #b91c1c);
  font-size:0.78rem;
  line-height:1.3;
}
/* Auto-calculated age helper under the DOB row. Muted green hint so it
 * reads as a positive parse-succeeded signal without competing with
 * the red error hint that occupies the same slot when the date fails
 * to parse. */
.enquiry-dob-age{
  display:block;
  margin-top:4px;
  color:var(--success-text, #166534);
  font-size:0.78rem;
  line-height:1.3;
}

/* feature/multi-home-care-home-picker — Care Homes picker (cards).
   Shown to a pure care-home staff member who belongs to 2+ homes;
   clicking a card switches into that home's workspace. Flat design,
   6px radius, single soft shadow (matches the app-shell card rules). */
.provider-home-picker__grid{
  margin-top:8px;
}
.provider-home-picker__provider-label{
  font-size:0.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--text-muted);
  margin:18px 0 8px;
}
.provider-home-picker__provider-label:first-child{
  margin-top:2px;
}
.provider-home-picker__cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
}
.provider-home-picker__card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
  width:100%;
  padding:16px 16px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:var(--shadow-xs);
  cursor:pointer;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.provider-home-picker__card:hover{
  border-color:var(--line-strong);
  box-shadow:0 4px 14px rgba(15,23,42,0.08);
  transform:translateY(-1px);
}
.provider-home-picker__card:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.provider-home-picker__card--current{
  border-color:var(--primary);
  box-shadow:0 0 0 1px var(--primary-soft);
}
.provider-home-picker__name{
  font-size:1rem;
  font-weight:600;
  color:var(--text);
  line-height:1.25;
}
.provider-home-picker__row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:0.82rem;
}
.provider-home-picker__label{
  color:var(--text-muted);
}
.provider-home-picker__value{
  color:var(--text);
  font-weight:500;
  text-align:right;
}
.provider-home-picker__current-badge{
  position:absolute;
  top:12px;
  right:12px;
  font-size:0.68rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--primary);
  background:var(--primary-soft);
  padding:2px 8px;
  border-radius:6px;
}
@media (max-width:640px){
  .provider-home-picker__cards{ grid-template-columns:1fr; }
}