/* Next action strip — calm premium chrome (8px rhythm, 180ms motion) */
.rmc-next-action-strip {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--token-radius-lg, 16px);
  border: 1px solid rgba(168, 160, 146, 0.35); /* off-token-allow: warm-neutral-overlay */
  background: linear-gradient(
    135deg,
    rgba(248, 250, 252, 0.96),
    rgba(241, 245, 249, 0.92)
  ); /* off-token-allow: decorative-gradient */
  box-shadow: 0 8px 28px rgba(26, 22, 18, 0.06);
}

[data-bs-theme="dark"] .rmc-next-action-strip {
  border-color: rgba(168, 160, 146, 0.22);
  background: linear-gradient(
    135deg,
    rgba(36, 30, 24, 0.55),
    rgba(26, 22, 18, 0.65)
  );
}

.rmc-nas-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rmc-nas-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
}

.rmc-nas-kicker {
  font-size: var(--type-size-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, var(--bs-secondary-color, #857c70));
}

.rmc-nas-hint {
  font-size: var(--type-size-caption);
}

.rmc-nas-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rmc-nas-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--token-radius-md, 12px);
  border: 1px solid rgba(37, 99, 235, 0.22); /* off-token-allow: rgba-decorative */
  background: rgba(255, 255, 255, 0.86); /* off-token-allow: white-overlay */
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(26, 22, 18, 0.04);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

[data-bs-theme="dark"] .rmc-nas-chip {
  background: rgba(26, 22, 18, 0.5);
  border-color: rgba(96, 165, 250, 0.25);
}

.rmc-nas-chip:hover {
  border-color: rgba(37, 99, 235, 0.45); /* off-token-allow: rgba-decorative */
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
  color: inherit;
}

.rmc-nas-chip:focus-visible {
  outline: 2px solid var(--school-primary, #c47f1c);
  outline-offset: 2px;
}

.rmc-nas-chip-title {
  font-size: var(--type-size-body);
  font-weight: 650;
  line-height: 1.25;
}

.rmc-nas-chip-desc {
  font-size: var(--type-size-eyebrow);
  line-height: 1.35;
  display: block;
  max-width: 42ch;
}

/* ── Cockpit item A: sticky command header on the Admin Home ─────────────────────
   Pin the page's command/context band (the "Flow Thread" explain strip, which hosts
   the primary next-action) so it stays reachable while the dashboard scrolls. SCOPED
   to the backend landing only (body.dashboard-page-backend) — zero effect on the ~90
   other portal surfaces that render the same strip in normal flow.

   The strip is a direct child of .page-wrap, which sits inside the inner scroll column
   (#main-content / .portal-main-col, overflow-y:auto — the tp-v3 canvas scroll surface).
   One thing blocked the pin, fixed here for THIS landing only:
     .page-wrap is a FLEX ITEM in the flex-column .portal-main-col. The shell already
        sets `height:auto` on it, but its default `flex-shrink:1` shrinks the box back to
        the ~574px scroll-column viewport while its content overflows visibly to ~2259px.
        position:sticky is bounded by its containing block's BOX, so it released after ~one
        screen. `flex-shrink:0` lets the box keep its full content height, so the pin spans
        the whole inner scroll. (Selector specificity intentionally beats the shell's
        `html[tp-v3] body[canvas] .portal-main-col > .page-wrap` rule.)
   The lingering `pageEnter` transform that used to break the pin as well is gone
   platform-wide: design-tokens.css now fills that animation backwards only. */

html[data-rmc-tp-v3-shell="1"]
  body[data-rmc-cp-scroll="canvas"].dashboard-page-backend
  .portal-main-col
  > .page-wrap {
  flex-shrink: 0;
}

body.dashboard-page-backend .rmc-page-explain-strip {
  position: sticky;
  top: 0;
  z-index: 6;
  /* Opaque enough that scrolled cards do not bleed through the pinned bar. */
  background: color-mix(in oklab, var(--surface-canvas, var(--surface-bg)) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.08) blur(10px);
  backdrop-filter: saturate(1.08) blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--hairline) 65%, transparent);
  /* Small breathing room so the blurred bar reads as a distinct pinned surface. */
  padding-block: 0.4rem;
  margin-bottom: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  body.dashboard-page-backend .rmc-page-explain-strip {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface-canvas, var(--surface-bg));
  }
}