:root {
  --cp-bg: linear-gradient(180deg, rgba(7, 17, 32, 0.96), rgba(11, 24, 43, 0.92));
  --cp-panel-bg: rgba(8, 16, 30, 0.78);
  --cp-panel-border: rgba(125, 152, 187, 0.18);
  --cp-text: var(--cp-sky-100);
  --cp-muted: var(--cp-slate-cool-400);
  --cp-accent: var(--cp-sky-500);
  --cp-accent-2: var(--cp-warning-450);
  --cp-success: var(--cp-success-500);
  --cp-warning: var(--cp-warning-500);
  --cp-danger: var(--cp-danger-500);
  --cp-violet: var(--chart-color-4);
  --cp-sky: var(--color-teal-300);
  --cp-shadow: 0 24px 80px rgba(3, 8, 18, 0.42);
}

body.control-plane-shell {
  color: var(--cp-text);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

body.control-plane-shell .btn {
  border-radius: 999px;
}

body.control-plane-shell .btn-outline-secondary,
body.control-plane-shell .btn-outline-primary,
#cp-main-content .btn-outline-secondary,
#cp-main-content .btn-outline-primary {
  color: var(--text-primary);
  border-color: var(--hairline, rgba(157, 181, 214, 0.32));
}

body.control-plane-shell .btn-outline-secondary:hover,
body.control-plane-shell .btn-outline-primary:hover,
#cp-main-content .btn-outline-secondary:hover,
#cp-main-content .btn-outline-primary:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06); /* off-token-allow: white-overlay */
  border-color: var(--text-secondary);
}

.cp-hero {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  border: 1px solid rgba(151, 177, 214, 0.16); /* off-token-allow: rgba-decorative */
  border-radius: 1.75rem;
  background:
    radial-gradient(circle at top right, rgba(94, 234, 212, 0.18), transparent 32%),
    radial-gradient(circle at left bottom, rgba(167, 139, 250, 0.12), transparent 34%),
    var(--cp-bg);
  box-shadow: var(--cp-shadow);
}

.cp-hero-compact {
  padding: 1.75rem;
}

.cp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
  gap: 1.5rem;
  align-items: center;
}

.cp-eyebrow,
.cp-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--type-size-micro);
  color: var(--cp-sky-300);
  margin-bottom: 0.55rem;
}

.cp-hero-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.8rem, 2.2vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.cp-hero-copy {
  max-width: 62rem;
  color: var(--cp-muted);
  margin-bottom: 1rem;
}

.cp-chip-row,
.cp-badge-row,
.cp-pill-stack,
.cp-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.cp-chip,
.cp-next-action,
.cp-pill,
.cp-risk-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  border: 1px solid rgba(157, 181, 214, 0.18); /* off-token-allow: rgba-decorative */
  background: rgba(255, 255, 255, 0.05); /* off-token-allow: white-overlay */
  color: var(--cp-text);
  font-size: var(--type-size-caption);
  text-decoration: none;
}

a.cp-chip:hover {
  opacity: 0.95;
  filter: brightness(1.05);
}
.cp-chip-healthy,
.cp-chip-success {
  border-color: rgba(49, 196, 141, 0.35); /* off-token-allow: rgba-decorative */
  color: var(--cp-success-350);
}

.cp-chip-warning {
  border-color: rgba(255, 191, 71, 0.35); /* off-token-allow: rgba-decorative */
  color: var(--cp-warning-350);
}

.cp-chip-critical,
.cp-chip-danger {
  border-color: rgba(255, 107, 107, 0.35); /* off-token-allow: rgba-decorative */
  color: var(--cp-danger-350);
}

.cp-hero-actions {
  display: flex;
  justify-content: flex-end;
}

.cp-action-stack {
  width: min(100%, 21rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.cp-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cp-primary-action {
  background: linear-gradient(135deg, var(--cp-sky-450), var(--cp-sky-400));
  color: var(--cp-ink-action);
  border: none;
  font-weight: 700;
}

.cp-hero-stat {
  padding: 1rem 1.15rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(181, 203, 235, 0.18); /* off-token-allow: rgba-decorative */
  background: rgba(255, 255, 255, 0.06); /* off-token-allow: white-overlay */
  margin-bottom: 0.75rem;
}

.cp-hero-stat-label,
.cp-overview-label,
.cp-overview-meta,
.cp-health-label,
.cp-health-meta,
.cp-readiness-label,
.cp-readiness-meta,
.cp-workstream-title,
.cp-workstream-meta,
.cp-mini-heading,
.cp-school-meta,
.cp-cell-meta,
.cp-list-meta {
  color: var(--cp-muted);
}

.cp-hero-stat-value {
  display: block;
  font-size: var(--type-size-headline-l);
  line-height: 1.05;
  margin: 0.3rem 0;
}

.cp-hero-stat-subtitle {
  font-size: var(--type-size-caption);
  color: var(--cp-slate-cool-200);
}

.cp-overview-grid,
.cp-workstream-grid,
.cp-readiness-grid,
.cp-health-grid,
.cp-footprint-metrics {
  display: grid;
  gap: 1rem;
}

.cp-overview-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  margin-top: 1.6rem;
}

.cp-overview-card,
.cp-panel,
.cp-workstream-card,
.cp-readiness-card,
.cp-health-card,
.cp-footprint-card,
.cp-table-card,
.cp-stack-card,
.cp-queue-card {
  border: 1px solid var(--cp-panel-border);
  background: var(--cp-panel-bg);
  box-shadow: var(--cp-shadow);
}

.cp-overview-card,
.cp-readiness-card,
.cp-health-card,
.cp-footprint-card {
  border-radius: 1.25rem;
  padding: 1rem 1.05rem;
}

.cp-overview-value,
.cp-readiness-value,
.cp-health-value,
.cp-workstream-metric {
  display: block;
  font-size: var(--type-size-headline-m);
  margin: 0.35rem 0;
  line-height: 1.05;
}

.cp-overview-card-blue {
  background: linear-gradient(180deg, rgba(31, 78, 121, 0.32), rgba(8, 16, 30, 0.82)); /* off-token-allow: decorative-gradient */
}

.cp-overview-card-emerald {
  background: linear-gradient(180deg, rgba(27, 94, 76, 0.36), rgba(8, 16, 30, 0.82)); /* off-token-allow: decorative-gradient */
}

.cp-overview-card-crimson {
  background: linear-gradient(180deg, rgba(118, 34, 44, 0.34), rgba(8, 16, 30, 0.82)); /* off-token-allow: decorative-gradient */
}

.cp-overview-card-amber {
  background: linear-gradient(180deg, rgba(112, 78, 14, 0.34), rgba(8, 16, 30, 0.82)); /* off-token-allow: decorative-gradient */
}

.cp-overview-card-violet {
  background: linear-gradient(180deg, rgba(77, 54, 128, 0.34), rgba(8, 16, 30, 0.82)); /* off-token-allow: decorative-gradient */
}

.cp-overview-card-sky {
  background: linear-gradient(180deg, rgba(15, 88, 111, 0.34), rgba(8, 16, 30, 0.82)); /* off-token-allow: decorative-gradient */
}

.cp-overview-card-slate {
  background: linear-gradient(180deg, rgba(51, 67, 94, 0.34), rgba(8, 16, 30, 0.82)); /* off-token-allow: decorative-gradient */
}

.cp-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cp-section-link {
  color: var(--cp-sky-200);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.18rem;
}

.cp-section-link:hover {
  border-color: currentColor;
}

.cp-panel,
.cp-table-card,
.cp-stack-card,
.cp-queue-card {
  border-radius: 1.45rem;
  padding: 1.1rem;
}

.cp-panel-header,
.cp-queue-card-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.cp-panel-title {
  margin: 0;
  font-size: var(--type-size-headline-m);
  letter-spacing: -0.02em;
}

.cp-panel-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.cp-panel-stat {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); /* off-token-allow: white-overlay */
  color: var(--cp-sky-175);
  font-size: var(--type-size-eyebrow);
}
a.cp-panel-stat:hover {
  color: var(--cp-sky-175);
  background: rgba(255, 255, 255, 0.1); /* off-token-allow: white-overlay */
}

.cp-queue-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.cp-queue-card-header h3 {
  font-size: var(--type-size-body);
  margin: 0;
}
a.cp-queue-card-header {
  color: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}
a.cp-queue-card-header:hover {
  opacity: 0.9;
  color: inherit;
}

.cp-list,
.cp-action-column,
.cp-queue-split,
.cp-mini-table {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cp-list-row,
.cp-mini-row,
.cp-mini-table-row,
.cp-stack-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.cp-list-row {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(154, 180, 214, 0.12);
}

.cp-mini-row {
  color: var(--cp-muted);
}

.cp-list-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cp-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* Inline POST form wrapper (e.g. a single action button in an actions row / table
   cell) — sits inline instead of the default block form, no stray margin. */
.cp-inline-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.cp-subtle-link,
.cp-workstream-card {
  color: var(--cp-sky-150);
  text-decoration: none;
}

.cp-subtle-link:hover,
.cp-workstream-card:hover {
  color: white;
}

.cp-empty-state,
.cp-empty-inline {
  color: var(--cp-muted);
  font-size: var(--type-size-body);
}

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

.cp-health-card-danger,
.cp-readiness-card-warning {
  border-color: rgba(255, 107, 107, 0.25); /* off-token-allow: rgba-decorative */
}

.cp-health-card-warning,
.cp-readiness-card-neutral {
  border-color: rgba(255, 191, 71, 0.25); /* off-token-allow: rgba-decorative */
}

.cp-health-card-success,
.cp-readiness-card-success {
  border-color: rgba(49, 196, 141, 0.25); /* off-token-allow: rgba-decorative */
}

.cp-stack-card {
  min-height: 100%;
}

.cp-stack-metric {
  font-size: var(--type-size-body);
  margin-bottom: 0.45rem;
}

.cp-stack-detail {
  color: var(--cp-muted);
  font-size: var(--type-size-caption);
  margin-top: 0.8rem;
}

.cp-footprint-metrics {
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.cp-footprint-card strong {
  display: block;
  font-size: var(--type-size-headline-m);
  margin: 0.32rem 0;
}

.cp-table,
.cp-table th,
.cp-table td,
.cp-table code {
  color: var(--cp-text);
}

.cp-table thead th {
  color: var(--cp-slate-cool-300);
  font-size: var(--type-size-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom-color: rgba(154, 180, 214, 0.16); /* off-token-allow: rgba-decorative */
}

.cp-table tbody td {
  border-bottom-color: rgba(154, 180, 214, 0.1); /* off-token-allow: rgba-decorative */
  vertical-align: top;
}

.cp-table-wrap {
  border-radius: 1rem;
  overflow: hidden;
}

.cp-registry-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  padding-block: 0.5rem;
  margin-bottom: 0.5rem;
  background: var(--cp-panel-bg);
  border-bottom: 1px solid var(--hairline, rgba(154, 180, 214, 0.14));
}

.cp-registry-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

.cp-registry-table {
  table-layout: fixed;
  min-width: 76rem;
}

.cp-registry-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--cp-panel-bg);
}

.cp-registry-table :is(th, td) {
  padding-block: 0.58rem;
}

.cp-registry-table th:nth-child(1) { width: 18%; }
.cp-registry-table th:nth-child(2) { width: 10%; }
.cp-registry-table th:nth-child(3) { width: 14%; }
.cp-registry-table th:nth-child(4) { width: 14%; }
.cp-registry-table th:nth-child(5) { width: 12%; }
.cp-registry-table th:nth-child(6) { width: 18%; }
.cp-registry-table th:nth-child(7) { width: 14%; }

.cp-registry-table :is(.cp-cell-meta, code) {
  overflow-wrap: anywhere;
}

.cp-registry-table .cp-badge-row,
.cp-registry-table .cp-risk-list {
  gap: 0.28rem;
}

.cp-registry-actions-cell {
  min-width: 10rem;
}

.cp-registry-actions {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.cp-registry-actions .btn {
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-impersonation-disclosure {
  position: relative;
}

.cp-impersonation-disclosure > summary {
  list-style: none;
  cursor: pointer;
}

.cp-impersonation-disclosure > summary::-webkit-details-marker {
  display: none;
}

.cp-impersonation-disclosure[open] {
  width: min(22rem, 72vw);
}

.cp-impersonation-form {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding: 0.7rem;
  border: 1px solid rgba(154, 180, 214, 0.18); /* off-token-allow: rgba-decorative */
  border-radius: 0.75rem;
  background: rgba(8, 16, 30, 0.96); /* off-token-allow: rgba-decorative */
  box-shadow: var(--cp-shadow);
}

.cp-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(180px, 0.7fr) auto;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 1rem;
}

.cp-toolbar-summary {
  color: var(--cp-muted);
  font-size: var(--type-size-caption);
  text-align: right;
}

.cp-school-name {
  font-weight: 700;
}

.cp-risk-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-bottom: 0.4rem;
}

.cp-risk-pill {
  padding: 0.28rem 0.55rem;
  background: rgba(255, 191, 71, 0.12); /* off-token-allow: rgba-decorative */
  border-color: rgba(255, 191, 71, 0.22); /* off-token-allow: rgba-decorative */
  color: var(--cp-warning-350);
}

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

.cp-workstream-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem;
  border-radius: 1.2rem;
  transition: transform 120ms ease, border-color 120ms ease;
}

.cp-workstream-card:hover {
  transform: translateY(-2px);
  border-color: rgba(122, 198, 255, 0.4); /* off-token-allow: rgba-decorative */
}

.cp-workstream-cta {
  color: var(--cp-sky-350);
  font-size: var(--type-size-caption);
}

.cp-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5rem;
  padding: 0.28rem 0.64rem;
  border-radius: 999px;
  font-size: var(--type-size-eyebrow);
  font-weight: 700;
  border: 1px solid rgba(171, 190, 216, 0.18); /* off-token-allow: rgba-decorative */
  background: rgba(255, 255, 255, 0.06); /* off-token-allow: white-overlay */
}

.cp-status-badge-success,
.cp-status-badge-active,
.cp-status-badge-resolved,
.cp-status-badge-healthy {
  color: var(--cp-success-300);
  border-color: rgba(49, 196, 141, 0.28); /* off-token-allow: rgba-decorative */
  background: rgba(49, 196, 141, 0.12); /* off-token-allow: rgba-decorative */
}

.cp-status-badge-warning,
.cp-status-badge-pending,
.cp-status-badge-acknowledged,
.cp-status-badge-mitigated,
.cp-status-badge-attention,
.cp-status-badge-trialing {
  color: var(--cp-warning-300);
  border-color: rgba(255, 191, 71, 0.28); /* off-token-allow: rgba-decorative */
  background: rgba(255, 191, 71, 0.12); /* off-token-allow: rgba-decorative */
}

.cp-status-badge-danger,
.cp-status-badge-open,
.cp-status-badge-past_due,
.cp-status-badge-suspended,
.cp-status-badge-inactive {
  color: var(--cp-danger-300);
  border-color: rgba(255, 107, 107, 0.28); /* off-token-allow: rgba-decorative */
  background: rgba(255, 107, 107, 0.12); /* off-token-allow: rgba-decorative */
}

.cp-status-badge-neutral,
.cp-status-badge-unseeded {
  color: var(--cp-sky-185);
}

.cp-school-row.is-hidden {
  display: none;
}

.cp-month-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cp-month-form label {
  margin: 0;
  color: var(--cp-muted);
  font-size: var(--type-size-caption);
}

@media (max-width: 1600px) {
  .cp-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .cp-hero-grid,
  .cp-queue-grid,
  .cp-workstream-grid,
  .cp-footprint-metrics {
    grid-template-columns: 1fr;
  }

  .cp-toolbar {
    grid-template-columns: 1fr;
  }

  .cp-toolbar-summary {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .cp-hero,
  .cp-panel,
  .cp-workstream-card,
  .cp-footprint-card,
  .cp-overview-card {
    padding: 1rem;
  }

  .cp-health-grid,
  .cp-readiness-grid,
  .cp-overview-grid {
    grid-template-columns: 1fr;
  }

  .cp-panel-header,
  .cp-queue-card-header,
  .cp-list-row,
  .cp-mini-table-row,
  .cp-stack-row {
    flex-direction: column;
  }

  .cp-inline-actions,
  .cp-action-column {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .cp-hero-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Closed off-canvas-end drawers (Bootstrap .offcanvas.offcanvas-end) sit at
   transform: translateX(100%) off the right viewport edge while hidden. Because
   they are position:fixed they escape ancestor overflow-x:clip, so their full
   width (e.g. 400px) is still counted in document/body scrollWidth — manifesting
   as a phantom horizontal overflow on every page that mounts one (row-detail and
   activity drawers on the marketplace governance console, portal row-detail, …).
   Collapse the *fully closed* drawer to zero width so translateX(100%) resolves
   to 0px and it contributes nothing to scrollWidth. The :not(.showing):not(.hiding)
   guard keeps the slide-in / slide-out animation intact (Bootstrap restores the
   real width the instant either transition class is present). */
.offcanvas.offcanvas-end:not(.show):not(.showing):not(.hiding) {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
/* Mobile/tablet: contain horizontal overflow (E2E viewport 390px and up to 991px) */
@media (max-width: 991px) {
  body.control-plane-shell { overflow-x: clip; max-width: 100vw; }
  body.control-plane-shell .cp-shell-content,
  body.control-plane-shell .cp-layout {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }
  #cp-main-content {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  #cp-main-content .control-plane-shell,
  #cp-main-content .container-fluid,
  #cp-main-content > .d-flex {
    max-width: 100%;
    min-width: 0;
  }
  .cp-hero-grid,
  .cp-overview-grid { min-width: 0; }
  .cp-hero-grid > *,
  .cp-chip-row { min-width: 0; }
}
@media (max-width: 480px) {
  body.control-plane-shell { overflow-x: clip; }
  .cp-shell-content, .cp-layout { max-width: 100%; min-width: 0; overflow-x: hidden; }
  #cp-main-content {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  #cp-main-content .control-plane-shell,
  #cp-main-content .container-fluid {
    max-width: 100%;
    min-width: 0;
  }
  .cp-hero-grid,
  .cp-overview-grid {
    min-width: 0;
  }
  .cp-hero-grid > *,
  .cp-chip-row {
    min-width: 0;
  }
}

/* ========== Layout: document scroll + sticky sidebar (v3.42.7) ========== */
/* Natural page height — footer follows content; no black void above footer when
   main column content is shorter than the viewport. Sidebar sticks while body scrolls.
   Manager /admin/ uses data-rmc-cp-scroll="document" (see admin-cp-parity.css; main mode is rollback only):
   viewport-trapped .admin-cp-unified-page with overflow in #cp-main-content. */
body.control-plane-shell[data-rmc-cp-scroll="document"] {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: auto;
  max-height: none;
  overflow-x: clip;
  overflow-y: auto;
  max-width: 100vw;
}
body.control-plane-shell .cp-shell-content,
body.control-plane-shell .cp-layout {
  max-width: 100%;
  overflow-x: clip;
}
/* Skip link: out of flow so flex layout has one growing child (cp-shell-content) */
body.control-plane-shell .skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  margin: -1px;
  padding: 0;
}
body.control-plane-shell[data-rmc-cp-scroll="document"] .cp-shell-content {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
body.control-plane-shell .cp-navbar {
  flex-shrink: 0;
  z-index: 1030;
}
body.control-plane-shell[data-rmc-cp-scroll="document"] .cp-layout {
  flex: 1 1 auto;
  min-height: auto;
  overflow: visible;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
body.control-plane-shell[data-rmc-cp-scroll="document"] .cp-layout > .row,
body.control-plane-shell[data-rmc-cp-scroll="document"] .portal-layout-row {
  flex: 1 1 auto;
  min-height: auto;
  overflow: visible;
  /* v3.43.2: per-column align-self — sidebar column stretches the full row
     (dark rail fills long pages); main column stays content-height so the
     canvas does not grow a white void when the nav is taller than the page. */
  align-items: flex-start;
  flex-wrap: nowrap;
}
/* Sidebar: visible at lg+ desktop only; on mobile, d-none keeps it hidden so main can take full width */
.cp-sidebar-col {
  min-width: 0;
  flex-shrink: 0;
  align-self: stretch;
}
@media (min-width: 992px) {
  .cp-sidebar-col {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  /* Sticky rail + inner scroll: rmc-platform-chrome-layout.css (do not override here). */
  body.control-plane-shell[data-rmc-cp-scroll="document"] .cp-sidebar-col {
    background: var(--cp-ink-sidebar, rgba(8, 16, 30, 0.92));
  }
}
.cp-sidebar-col .cp-sidebar-inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
/* Scrollbar paint removed 2026-09-18 — static/css/rmc-scrollbar.css owns it.
   This file painted the operator sidebar/main thumb with literal white
   overlays (off-token-allow: white-overlay); it was one of six files colouring
   .cp-sidebar-inner (audit/scrollbars_pass1.md §1.6 finding 1, §9 row 5).
   Layout and overflow declarations here are unchanged. */
/* Main column grows with content; document/body scrolls (no trapped viewport void).
   Login landings use #cp-main-content for skip-link parity but are NOT .cp-main-col —
   align-self:flex-start there shrinks the column to content width and pins it left. */
body.control-plane-shell[data-rmc-cp-scroll="document"] .cp-main-col,
body.control-plane-shell[data-rmc-cp-scroll="document"] #cp-main-content.cp-main-col,
body.control-plane-shell[data-rmc-cp-scroll="document"] .portal-main-col {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: auto !important;
  align-self: flex-start !important;
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: hidden;
  overflow-wrap: break-word;
  padding-bottom: 2.5rem; /* breathing room so last section is not flush */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Manager portal bridge (portal_base on manager host): release trapped viewport
   scroll from portal-layout-professional so document scroll + sticky inner nav apply. */
body.control-plane-shell.manager-portal-bridge.portal-body-with-layout[data-rmc-cp-scroll="document"] {
  overflow-y: auto !important;
}
body.control-plane-shell.manager-portal-bridge[data-rmc-cp-scroll="document"] .portal-layout-wrap {
  flex: 1 1 auto;
  min-height: auto;
  overflow: visible;
  display: block;
}
body.control-plane-shell.manager-portal-bridge[data-rmc-cp-scroll="document"] .portal-layout-wrap .portal-layout-row {
  min-height: auto;
  overflow: visible;
}
body.control-plane-shell.manager-portal-bridge[data-rmc-cp-scroll="document"] .portal-layout-wrap .portal-main-col,
body.control-plane-shell.manager-portal-bridge[data-rmc-cp-scroll="document"] .portal-layout-wrap #main-content {
  overflow-y: visible !important;
  min-height: auto !important;
  max-height: none !important;
}

@media (min-width: 992px) {
  body.control-plane-shell.manager-portal-bridge[data-rmc-cp-scroll="document"] .portal-layout-wrap .portal-layout-row {
    display: grid;
    grid-template-columns: var(--portal-sidebar-width, var(--rmc-nav-sidebar-default-w, 280px)) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }

  body.control-plane-shell.manager-portal-bridge[data-rmc-cp-scroll="document"] .portal-layout-wrap .cp-sidebar-col,
  body.control-plane-shell.manager-portal-bridge[data-rmc-cp-scroll="document"] .portal-layout-wrap .portal-main-col {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    min-width: 0 !important;
  }

  body.control-plane-shell.manager-portal-bridge[data-rmc-cp-scroll="document"] .portal-layout-wrap .page-wrap {
    min-width: 0;
  }
}

body.control-plane-shell.manager-portal-bridge .portal-main-col .breadcrumb,
body.control-plane-shell.manager-portal-bridge .portal-main-col [data-shell-chrome-breadcrumb-row] {
  min-width: 0;
  overflow-wrap: normal;
}
/* Inner wrappers must not force main to grow; allow main to be the scroll container */
#cp-main-content > .container-fluid,
#cp-main-content > .control-plane-shell,
#cp-main-content > .d-flex {
  min-height: 0;
}

/* Long-page end rhythm — every control-plane child page (control_plane_base wrapper). */
#cp-main-content .cp-page-body {
  min-width: 0;
  padding-bottom: clamp(1.5rem, 3vh, 2.75rem);
}
#cp-main-content .cp-page-body > .container-fluid:last-child,
#cp-main-content .cp-page-body > section:last-child,
#cp-main-content .operator-siteconfig-cp-body {
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .cp-main-col,
  #cp-main-content,
  .cp-sidebar-col .cp-sidebar-inner,
  .cp-sidebar-offcanvas .offcanvas-body {
    scroll-behavior: auto;
  }
}
#cp-main-content:focus,
.cp-main-col:focus-within {
  scroll-margin-top: 1rem;
}
@media (max-width: 991.98px) {
  .cp-sidebar-col {
    max-height: none;
  }
  .cp-sidebar-col .cp-sidebar-inner {
    max-height: none;
    position: static;
  }
}

/* Mobile offcanvas: scrollable sidebar nav */
.cp-sidebar-offcanvas .offcanvas-body {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ========== Navbar: responsive brand and actions ========== */
.cp-navbar .navbar-brand {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
}
@media (max-width: 991.98px) {
  .cp-navbar .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media (max-width: 575.98px) {
  .cp-navbar .navbar-brand span {
    font-size: var(--type-size-body);
  }
}

/* ========== Search results dropdown: clickable items ========== */
#cpSearchResults.dropdown-menu .dropdown-item {
  padding: 0.75rem 1rem;
  white-space: normal;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#cpSearchResults.dropdown-menu .dropdown-item:last-child {
  border-bottom: none;
}
#cpSearchResults.dropdown-menu .dropdown-item:hover,
#cpSearchResults.dropdown-menu .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.1); /* off-token-allow: white-overlay */
}

/* ========== Control plane sidebar: section collapse + compact mode ========== */
.cp-nav-group-toggle[aria-expanded="false"] .cp-nav-group-chevron {
  transform: rotate(-90deg);
}
.cp-nav-group-chevron {
  transition: transform 0.2s ease;
}

/* v2.63 (Wave B2, 2026-05-15): defensive collapse-state enforcement.
   Bootstrap's .collapse rules hide non-.show collapses, but if Bootstrap
   CSS load order shifts (or a higher-specificity rule wins by accident)
   every group renders expanded, multiplying the sidebar height. The user
   reported this exact symptom in the v2.62 retro: "BLUEPRINTS & POLICIES"
   appearing repeated dozens of times in screenshots. This rule pins the
   collapse contract regardless of CSS loading order. */
.cp-sidebar-nav .nav-item.collapse:not(.show) {
  display: none !important;
}
/* Also enforce compact width for the nav so even if all groups did
   somehow expand, the sidebar can't push past the 280px column. The
   nav becomes its own scroll container instead of the page. */
/* Sidebar column height/scroll: rmc-sidebar-rail-contract.css (do not cap height here). */
.cp-sidebar-nav {
  /* Tighter row height + smaller chevron padding so the full 15-group
     header list is visible at once on a 1080p viewport without scrolling
     past the topbar. */
  font-size: var(--type-size-xs, 0.8125rem);
}
.cp-sidebar-nav .cp-nav-group-toggle {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.cp-sidebar-nav .nav-link {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.cp-sidebar-compact-toggle {
  color: var(--cp-muted);
  border-color: var(--cp-panel-border);
}
.cp-sidebar-compact-toggle:hover {
  color: var(--cp-text);
  border-color: var(--cp-muted);
}
/* Compact mode: hide labels, show only icons */
.cp-sidebar-nav.cp-sidebar-compact .cp-nav-label {
  display: none;
}
.cp-sidebar-nav.cp-sidebar-compact .nav-link {
  justify-content: center;
}
.cp-sidebar-nav.cp-sidebar-compact .cp-nav-icon {
  margin-right: 0 !important;
}
.cp-sidebar-col.cp-sidebar-compact {
  max-width: 4rem;
}

/* ========== Phase 2: control_plane_base.html — tokenized surfaces (was inline style=) ========== */
body.control-plane-shell .cp-navbar.cp-navbar--surface {
  background: var(--cp-bg, var(--platform-navy, var(--color-base-900)));
  border-bottom: 1px solid rgba(125, 152, 187, 0.18);
}
.cp-header-search.cp-topbar-search-wrap {
  min-width: min(100%, 220px);
  max-width: 100%;
}
.cp-topbar-search-input {
  min-width: 0;
}
#cpSearchResults.cp-search-results-panel--sized,
#cpSearchResultsAdmin.cp-search-results-panel--sized,
.cp-search-results-panel.cp-search-results-panel--sized {
  /* Anchored under the search field — never a near-fullscreen sheet. */
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  inset: auto auto auto 0;
  min-width: min(100%, 280px);
  width: max(100%, min(360px, calc(100vw - 2rem)));
  max-width: min(420px, calc(100vw - 1.5rem));
  max-height: min(360px, 45vh);
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 0.25rem;
  padding: 0.35rem 0 !important;
  z-index: 2020;
}

.cp-search-results-panel .cp-search-result-item.is-active,
.cp-search-results-panel .dropdown-item.is-active {
  background: rgba(255, 255, 255, 0.1); /* off-token-allow: white-overlay */
}
.cp-sidebar-inner.cp-sidebar-inner--surface {
  background: var(--cp-panel-bg, rgba(8, 16, 30, 0.78));
  border: 1px solid var(--cp-panel-border);
}
.cp-sidebar-offcanvas.cp-sidebar-offcanvas--surface {
  background: var(--cp-panel-bg, rgba(8, 16, 30, 0.98));
  border-right: 1px solid var(--cp-panel-border);
}
.cp-navbar-brand-img {
  object-fit: contain;
}

/* Keyboard shortcuts overlay (control_plane_base + admin manager footer script) */
.cp-keyboard-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7); /* off-token-allow: black-overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.cp-keyboard-help-panel {
  min-width: 280px;
  max-width: 400px;
}

/* Tour FAB above Bootstrap offcanvas/backdrop where needed */
.cp-tour-fab {
  z-index: 1035;
}

/* Manager admin nav bridge (components/admin_nav_bridge.html) */
.admin-cp-navbar-unified .cp-header-search .cp-topbar-search-input {
  min-width: min(100%, 220px);
}

/* ========== Manager platform header — control-row alignment (v3.42.6) ========== */
/* Wins over rmc-cool-apple-polish for [data-rmc-platform-header="manager"]. */

/* v4.01.08: .cp-topbar-theme-toggle selectors removed — toggle hoisted to
   templates/components/header_theme_chip.html SOT in v4.01.07.  .cp-topbar-bell
   rules preserved (real element still rendered by manager_operator_topbar.html). */
[data-rmc-platform-header="manager"] .cp-topbar-bell {
  background: rgba(255, 255, 255, 0.06); /* off-token-allow: white-overlay */
  border: 1px solid rgba(255, 255, 255, 0.10); /* off-token-allow: white-overlay */
  color: rgba(255, 255, 255, 0.92); /* off-token-allow: white-overlay */
}

[data-rmc-platform-header="manager"] .cp-topbar-bell:hover,
[data-rmc-platform-header="manager"] .cp-topbar-bell:focus-visible {
  background: rgba(255, 255, 255, 0.10); /* off-token-allow: white-overlay */
  color: #ffffff; /* off-token-allow: hex-literal-decorative */
}

[data-rmc-platform-header="manager"] .rmc-platform-header__toolbar .btn-outline-light {
  height: var(--rmc-header-control-height, 2.375rem);
  min-height: var(--rmc-header-control-height, 2.375rem);
  display: inline-flex;
  align-items: center;
  border-radius: var(--rmc-header-control-radius, 999px);
}

[data-rmc-platform-header="manager"] .cp-topbar-search-wrap .cp-search-kbd[data-rmc-hide-when-focused] {
  transition: opacity 120ms var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}

/* Studio OS on manager: drop fixed viewport traps under document-scroll shell. */
body.control-plane-shell[data-rmc-cp-scroll="document"] #cp-main-content .studio-os-cp-wrap,
body.control-plane-shell[data-rmc-cp-scroll="document"] #cp-main-content .studio-os-cp-wrap > .rmc-shell-content-grid {
  min-height: auto !important;
}

body.control-plane-shell[data-rmc-cp-scroll="document"] #cp-main-content .studio-os[data-studio-density="control-compact"] {
  min-height: auto !important;
  max-height: none !important;
}

body.control-plane-shell[data-rmc-cp-scroll="document"] #cp-main-content .studio-os[data-studio-density="control-compact"] .studio-os__control-in-shell {
  max-height: none !important;
}

/* Dark manager shell: Bootstrap .card must not force white surfaces. */
html[data-surface="control-plane"][data-resolved-theme="dark"] #cp-main-content .card:not(.bg-transparent),
html[data-surface="control-plane"][data-bs-theme="dark"] #cp-main-content .card:not(.bg-transparent),
body.control-plane-shell.cp-surface[data-bs-theme="dark"] #cp-main-content .card:not(.bg-transparent) {
  background-color: color-mix(
    in oklab,
    var(--surface-elevated, var(--color-base-900)) 88%,
    transparent
  ) !important;
  border-color: var(--hairline, rgba(255, 255, 255, 0.12)) !important;
  color: var(--text-primary) !important;
}

html[data-surface="control-plane"][data-resolved-theme="dark"] #cp-main-content .card .text-muted,
html[data-surface="control-plane"][data-bs-theme="dark"] #cp-main-content .card .text-muted,
body.control-plane-shell.cp-surface[data-bs-theme="dark"] #cp-main-content .card .text-muted {
  color: var(--text-secondary) !important;
}

html[data-surface="control-plane"][data-resolved-theme="dark"] #cp-main-content .card .text-primary,
html[data-surface="control-plane"][data-bs-theme="dark"] #cp-main-content .card .text-primary,
body.control-plane-shell.cp-surface[data-bs-theme="dark"] #cp-main-content .card .text-primary {
  /* Brand-tinted, never brand-only: a deep school colour as text on the dark card fell far
     below 4.5:1. Mixed into the readable text colour it keeps the hue and the contrast. */
  color: color-mix(in oklab, var(--school-primary, var(--school-accent)) 35%, var(--text-primary, #f5eedd)) !important; /* theme-locked-allow: decorative-tint-mix */
}

/* Super dashboard layout modal: keyboard + pointer reorder controls.
   Handle and move buttons are >=44px targets (WCAG 2.5.8 needs 24px). */
#cp-layout-modal .cp-layout-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#cp-layout-modal .cp-layout-label {
  flex: 1 1 auto;
  min-width: 0;
}
#cp-layout-modal .cp-layout-handle,
#cp-layout-modal .cp-layout-move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  line-height: 1;
}
#cp-layout-modal .cp-layout-handle {
  cursor: grab;
  touch-action: none;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 0.375rem;
}
#cp-layout-modal .cp-layout-handle:active {
  cursor: grabbing;
}
#cp-layout-modal .cp-layout-handle:focus-visible,
#cp-layout-modal .cp-layout-move:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}
#cp-layout-modal .cp-layout-moves {
  display: inline-flex;
  gap: 0.25rem;
}