/* =====================================================================
   ScenariGO suite design system: the one authoritative foundation.

   Ticket: agent-reviews/Open/2026-10-12-entire-application-coherent-ui-rebuild.md
   Benchmark: agent-reviews/mockups/scenarigo-suite-design/ (approved 2026-10-13).

   OWNERSHIP. This file owns every suite token and the appearance of every
   shared component: buttons, fields, dropdowns, chips, badges, cards, panels,
   tables, menus, modals, notices, states, avatars, progress, the application
   rail and the page header. Page-family stylesheets own composition only
   (where things sit) and must consume these tokens and classes. They must not
   restyle a component defined here. See the ownership register in the ticket
   and tests/suite-architecture-contract.test.js.

   NAMING. Tokens are --su-*, components are .su-*. The prefix keeps this layer
   from colliding with legacy selectors while pages migrate; legacy definitions
   are deleted as their consumers move, never layered over.

   PERSONALITY (fixed, Steve 2026-10-13): soft corners, underlined fields,
   pill buttons, coral primary action with midnight text, ScenariGO blue only
   for the mark, links and selected information.
   ===================================================================== */

@font-face {
  font-family: "SG Inter";
  src: url("fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Suite palette (shared with the Switch website and AI Creative Studio) */
  --su-coral: #ff5a5f;
  /* Chat bubbles read like a real phone conversation, not the brand: sent is a messaging blue with white
     text, received is a light grey with dark text. */
  --su-chat-sent: #1f78f0;
  --su-chat-sent-ink: var(--su-white);
  --su-chat-received: #e8e9ed;
  --su-chat-received-ink: var(--su-midnight);
  --su-coral-ink: #d6393e;
  --su-coral-press: #b92f33;
  --su-midnight: #0f172a;
  --su-slate: #334155;
  --su-muted: #5b6577;
  --su-grey: #e5e7eb;
  --su-grey-soft: #f1f2f4;
  --su-grey-strong: var(--su-muted);
  --su-page: #fafafa;
  --su-surface: #ffffff;
  --su-deep: #070b14;

  /* The conversation-room shell: one fixed dark appearance, never toggled. */
  --su-room-shell: var(--su-deep);
  --su-room-surface: #0e1424;
  --su-room-border: rgba(229, 231, 235, 0.14);
  --su-room-text: var(--su-page);
  --su-room-muted: var(--su-on-dark-dim);
  --su-room-mint: #6ee7b7;
  --su-room-violet: #7c68e0;
  --su-room-danger: #e5565b;

  /* Product identity and semantic roles */
  --su-mint: #0f7a51;
  --su-mint-soft: #e4f6ee;
  --su-mint-live: var(--su-room-mint);
  --su-amber: #a15c07;
  --su-amber-soft: #fdf1dc;
  --su-violet: #5a45b8;
  --su-violet-soft: #eeebfb;
  --su-red: #c62828;
  --su-red-soft: #fdecec;

  /* Neutrals on dark grounds (rooms, the immersive journey, the rail). */
  --su-white: var(--su-surface);
  --su-on-dark-soft: #d4dae3;
  --su-on-dark-muted: #cbd2dc;
  --su-on-dark-dim: #aab3c2;
  --su-disabled: #8a93a3;

  /* Semantic edges, inks and presses. */
  --su-mint-edge: #bfe6d3;
  --su-amber-edge: #f0d8a8;
  --su-red-edge: #f5c2c2;
  --su-red-ink: #7f1d1d;
  --su-red-press: #9f1d1d;
  --su-amber-live: #fbbf24;
  /* The insight role: a warm champagne gold, neutral enough for any organisation's branding (Steve, 2026-10-17). */
  --su-insight: #e3b95a;

  /* Type */
  --su-font: "SG Inter", "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --su-fs-display: clamp(3rem, 5.6vw, 5rem);
  --su-fs-h1: 2.5rem;
  --su-fs-h2: 1.625rem;
  --su-fs-h3: 1.1875rem;
  --su-fs-body: 1rem;
  --su-fs-small: 0.875rem;
  --su-fs-micro: 0.75rem;

  /* Space (4/8 rhythm) */
  --su-s1: 4px; --su-s2: 8px; --su-s3: 12px; --su-s4: 16px; --su-s5: 24px; --su-s6: 32px; --su-s7: 48px; --su-s8: 64px;

  /* Shape: soft */
  --su-r-card: 16px;
  --su-r-field: 12px;
  --su-r-menu: 14px;
  --su-r-pill: 999px;
  --su-r-compact: 8px;

  /* Elevation: cards rest flat; overlays rise */
  --su-shadow-float: 0 18px 40px rgba(15, 23, 42, 0.14);
  --su-shadow-hover: 0 10px 28px rgba(15, 23, 42, 0.08);

  --su-ease: 160ms cubic-bezier(0.2, 0, 0, 1);
  --su-ring: 0 0 0 3px rgba(255, 90, 95, 0.35);
}

/* Base: applied to any page that opts in with class="su-scope" on <body>. */
body.su-scope { margin: 0; background: var(--su-page); color: var(--su-midnight); font-family: var(--su-font); font-size: var(--su-fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.su-scope *, .su-scope *::before, .su-scope *::after { box-sizing: border-box; }
.su-scope h1, .su-scope h2, .su-scope h3, .su-scope h4, .su-scope p, .su-scope dl, .su-scope dd { margin: 0; }
.su-scope button, .su-scope input, .su-scope select, .su-scope textarea { font-family: var(--su-font); }
:where(.su-scope) a { color: inherit; }

/* The hidden attribute always wins over a component display rule. */
.su-scope [hidden] { display: none; }

/* ---------------------------------------------------------------------
   Focus: one restrained treatment. No browser outline box on mouse use;
   keyboard focus shows the coral ring. Components override nothing.
   --------------------------------------------------------------------- */
.su-scope :focus { outline: none; }
.su-scope :focus-visible { outline: 2px solid var(--su-coral); outline-offset: 3px; }
/* A focus box is a keyboard affordance: after a mouse, touch or pen interaction (shared-public/input-modality.js)
   nothing draws an outline or a ring on a focused control, whatever the browser's :focus-visible heuristic says. */
html[data-sg-input="pointer"] :focus-visible { outline: none; box-shadow: none; }
/* Text-entry fields match :focus-visible on every focus, pointer included, so they take the local coral border
   and never an external outline (Steve, 2026-10-15). Zero-specificity :where so a component's own border wins. */
:where(.su-scope, .su-fields) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="color"]), textarea, select):focus-visible { outline: none; }
:where(.su-scope, .su-fields) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="color"]), textarea, select):where(:focus-visible) { border-color: var(--su-coral); }

.su-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.su-icon--sm { width: 16px; height: 16px; }
.su-icon--lg { width: 24px; height: 24px; }

/* Type roles */
.su-on-dark .su-eyebrow { color: var(--su-on-dark-muted); }
.su-on-dark .su-display { color: var(--su-white); }
.su-display { font-size: var(--su-fs-display); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; }
.su-display--xl { font-size: 3rem; }
.su-h1 { font-size: var(--su-fs-h1); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.su-h2 { font-size: var(--su-fs-h2); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.su-h3 { font-size: var(--su-fs-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.su-lede { font-size: 1.125rem; color: var(--su-slate); line-height: 1.6; max-width: 40rem; }
.su-small { font-size: var(--su-fs-small); }
.su-muted { color: var(--su-muted); }
.su-accent { color: var(--su-coral); }
.su-eyebrow { font-size: var(--su-fs-micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--su-muted); }
.su-tnum { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Buttons: pill, one height scale, white text on coral
   --------------------------------------------------------------------- */
.su-btn {
  --btn-bg: var(--su-coral); --btn-fg: var(--su-white); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 24px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  border-radius: var(--su-r-pill);
  font-family: var(--su-font); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--su-ease), color var(--su-ease), border-color var(--su-ease), box-shadow var(--su-ease), transform var(--su-ease);
}
.su-btn:hover { --btn-bg: var(--su-coral-ink); --btn-fg: var(--su-white); }
.su-btn:active { --btn-bg: var(--su-coral-press); --btn-fg: var(--su-white); transform: translateY(1px); }
.su-btn:focus-visible { outline: none; box-shadow: var(--su-ring), 0 0 0 1px var(--su-coral) inset; }
.su-btn--sm { min-height: 36px; padding: 0 16px; font-size: 0.8125rem; }
/* Semantic marker for a page-level Back control (tests/back-navigation-markup.test.js); the appearance is the .su-btn family it is combined with. */
.sg-back-button { gap: 8px; }
.su-btn--lg { min-height: 52px; padding: 0 32px; font-size: 1rem; }
.su-btn--block { width: 100%; }
.su-btn--secondary { --btn-bg: transparent; --btn-fg: var(--su-midnight); --btn-bd: var(--su-midnight); }
.su-btn--secondary:hover { --btn-bg: var(--su-midnight); --btn-fg: var(--su-white); --btn-bd: var(--su-midnight); }
.su-btn--secondary:active { --btn-bg: var(--su-slate); }
.su-btn--quiet { --btn-bg: var(--su-grey); --btn-fg: var(--su-midnight); }
.su-btn--quiet:hover { --btn-bg: var(--su-midnight); --btn-fg: var(--su-white); }
.su-btn--danger { --btn-bg: var(--su-red); --btn-fg: var(--su-white); }
.su-btn--danger:hover { --btn-bg: var(--su-red-press); }
.su-btn--danger-ghost { --btn-bg: transparent; --btn-fg: var(--su-red); --btn-bd: var(--su-red); }
.su-btn--danger-ghost:hover { --btn-bg: var(--su-red); --btn-fg: var(--su-white); }
.su-btn--on-dark { --btn-bg: transparent; --btn-fg: var(--su-white); --btn-bd: rgba(229, 231, 235, 0.5); }
.su-btn--on-dark:hover { --btn-bg: var(--su-white); --btn-fg: var(--su-midnight); --btn-bd: var(--su-white); }
.su-btn[disabled], .su-btn.is-disabled { --btn-bg: var(--su-grey); --btn-fg: var(--su-disabled); --btn-bd: transparent; cursor: not-allowed; transform: none; }
.su-btn.is-loading { pointer-events: none; --btn-bg: var(--su-coral); --btn-fg: var(--su-white); }
.su-btn.is-loading::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: var(--su-white); animation: su-spin 0.7s linear infinite; }
@keyframes su-spin { to { transform: rotate(360deg); } }
.su-btn-icon {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--su-slate); cursor: pointer;
  transition: background var(--su-ease), color var(--su-ease);
}
.su-btn-icon:hover { background: var(--su-grey); color: var(--su-midnight); }
.su-btn-icon svg { width: 18px; height: 18px; flex: none; }
.su-btn-icon:focus-visible { outline: 2px solid var(--su-coral); outline-offset: 2px; }
.su-link { color: var(--su-coral-ink); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.su-link:hover { color: var(--su-coral-press); }

/* ---------------------------------------------------------------------
   Fields: label above, help below, error in the same slot.
   Underlined text fields; multi-line fields keep a hairline box.
   --------------------------------------------------------------------- */
.su-field { display: grid; gap: 8px; }
.su-field[hidden] { display: none; }
/* A form's vertical rhythm: 20px between fields, so label-to-control (8px) always reads tighter than field-to-field. */
.su-form-stack { display: grid; gap: 20px; min-width: 0; }
.su-form-stack[hidden] { display: none; }
.su-field > label, .su-label { margin: 0; font-size: var(--su-fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--su-slate); }
/* Short related fields share one row so a form stays inside the fold; the row wraps by width. */
.su-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; align-items: end; }
/* Labels in one row share a two-line label zone, bottom-aligned, so a label that wraps (a long name
   plus Optional) never pushes its control out of line with its neighbours. */
.su-field-row > .su-field > label { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-end; min-height: 2.9em; }
/* A long pick list scrolls inside itself, so the fields beneath it never fall below the fold. */
.su-scroll-list { max-height: 14.5rem; overflow-y: auto; padding-right: 4px; }
.su-label .su-opt, .su-field > label .su-opt { color: var(--su-muted); font-weight: 500; letter-spacing: 0.08em; margin-left: 6px; }
/* The one editable-field family (Steve, 2026-10-14): a soft boxed control for every single-line
   text, numeric and date input, every dropdown trigger and every multi-line field. Boundary, radius,
   padding, hover, focus, invalid, valid and disabled states are defined here and nowhere else. */
.su-control {
  width: 100%; min-height: 48px; padding: 12px 16px;
  background: var(--su-surface); color: var(--su-midnight);
  border: 1px solid rgba(15, 23, 42, 0.2); border-radius: var(--su-r-field);
  font-family: var(--su-font); font-size: 1rem; line-height: 1.4;
  transition: border-color var(--su-ease), box-shadow var(--su-ease), background var(--su-ease);
}
.su-control::placeholder { color: var(--su-disabled); }
.su-control:hover { border-color: rgba(15, 23, 42, 0.4); }
.su-control:focus, .su-control:focus-visible { outline: none; border-color: var(--su-coral); }
textarea.su-control { min-height: 120px; resize: vertical; line-height: 1.55; padding: 14px 16px; }
.su-control.is-invalid, .su-control[aria-invalid="true"] { border-color: var(--su-red); }
.su-control.is-valid { border-color: var(--su-mint); }
.su-control:disabled { background: var(--su-grey-soft); color: var(--su-disabled); cursor: not-allowed; border-color: var(--su-grey); }
/* A native select that is not enhanced into the suite dropdown keeps the same box and gains a chevron. */
/* A file chooser keeps its own native presentation even when classed as a control. */
input[type="file"].su-control { min-height: 0; padding: 0; border: 0; background: transparent; }
select.su-control { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; cursor: pointer; }
.su-help { font-size: var(--su-fs-small); color: var(--su-muted); }
.su-error { font-size: var(--su-fs-small); color: var(--su-red); display: flex; gap: 6px; align-items: center; font-weight: 500; }
.su-ok { font-size: var(--su-fs-small); color: var(--su-mint); display: flex; gap: 6px; align-items: center; font-weight: 500; }
.su-check, .su-radio { display: flex; gap: 12px; align-items: flex-start; font-size: var(--su-fs-body); cursor: pointer; }
.su-check input, .su-radio input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--su-coral); }

/* Dropdown: one listbox component (suite-dropdown.js). The native <select>
   stays in the DOM, hidden, as the form value. */
.su-dd { position: relative; }
.su-dd__trigger {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--su-surface); color: var(--su-midnight);
  border: 1px solid rgba(15, 23, 42, 0.2); border-radius: var(--su-r-field);
  font-family: var(--su-font); font-size: 1rem; text-align: left; cursor: pointer;
  transition: border-color var(--su-ease), box-shadow var(--su-ease);
}
.su-dd__trigger:hover { border-color: rgba(15, 23, 42, 0.4); }
.su-dd__trigger:focus { outline: none; }
.su-dd__trigger:focus-visible { border-color: var(--su-coral); }
.su-dd__chev { width: 18px; height: 18px; flex: none; stroke: var(--su-slate); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--su-ease); }
.su-dd.is-open .su-dd__chev { transform: rotate(180deg); }
.su-dd.is-open .su-dd__trigger { border-color: var(--su-coral); }
.su-dd__list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); max-height: 280px; overflow: auto; margin: 0; padding: 6px 0; list-style: none;
  background: var(--su-surface); border: 1px solid var(--su-grey); border-radius: var(--su-r-menu); box-shadow: var(--su-shadow-float);
}
.su-dd__list[hidden] { display: none; }
.su-dd__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; font-size: var(--su-fs-small); color: var(--su-midnight); cursor: pointer; }
.su-dd__opt.is-active { background: var(--su-grey-soft); }
.su-dd__opt[aria-selected="true"] { font-weight: 600; }
.su-dd__opt[aria-selected="true"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--su-coral); flex: none; }
.su-dd__opt[aria-disabled="true"] { color: var(--su-disabled); cursor: not-allowed; }
.su-dd--compact .su-dd__trigger { min-height: 44px; padding: 0 16px; }
.su-dd--compact .su-dd__list { right: auto; min-width: 100%; }

/* Chips, segmented control, tabs */
.su-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; background: transparent; border: 1px solid rgba(15, 23, 42, 0.2); border-radius: var(--su-r-pill); font-family: var(--su-font); font-size: var(--su-fs-small); font-weight: 500; color: var(--su-midnight); cursor: pointer; transition: all var(--su-ease); }
.su-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.su-chip:hover { border-color: var(--su-midnight); }
.su-chip.is-on, .su-chip[aria-pressed="true"] { background: var(--su-midnight); border-color: var(--su-midnight); color: var(--su-white); }
.su-seg { display: inline-flex; padding: 4px; background: var(--su-grey); border-radius: var(--su-r-pill); gap: 2px; }
.su-seg button { border: 0; background: transparent; min-height: 36px; padding: 0 16px; border-radius: var(--su-r-pill); font-family: var(--su-font); font-size: var(--su-fs-small); font-weight: 600; color: var(--su-slate); display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.su-seg button.is-on { background: var(--su-surface); color: var(--su-midnight); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.su-tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--su-grey); }
.su-tabs button, .su-tabs a { background: none; border: 0; border-radius: 0; padding: 14px 0; font-family: var(--su-font); font-size: var(--su-fs-small); font-weight: 600; color: var(--su-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; cursor: pointer; }
.su-tabs button:hover, .su-tabs a:hover { color: var(--su-midnight); }
.su-tabs button:focus-visible, .su-tabs a:focus-visible { outline: 2px solid var(--su-coral); outline-offset: 2px; box-shadow: none; }
.su-tabs .is-on, .su-tabs [aria-selected="true"] { color: var(--su-midnight); border-bottom-color: var(--su-coral); }
.su-count { display: inline-flex; min-width: 22px; height: 22px; padding: 0 7px; align-items: center; justify-content: center; border-radius: var(--su-r-pill); background: var(--su-grey); font-size: var(--su-fs-micro); font-weight: 700; color: var(--su-slate); margin-left: 6px; }

/* Badges: status always has words, never colour alone */
.su-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--su-r-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--su-grey); color: var(--su-slate); white-space: nowrap; }
.su-badge .su-icon { width: 13px; height: 13px; stroke-width: 2; }
.su-badge--draft { background: var(--su-grey); color: var(--su-slate); }
.su-badge--ready { background: var(--su-mint-soft); color: var(--su-mint); }
.su-badge--active { background: var(--su-mint-soft); color: var(--su-mint); }
.su-badge--archived, .su-badge--warn { background: var(--su-amber-soft); color: var(--su-amber); }
.su-badge--guided { background: var(--su-violet-soft); color: var(--su-violet); }
.su-badge--danger { background: var(--su-red-soft); color: var(--su-red); }
.su-badge--outline { background: transparent; border: 1px solid rgba(15, 23, 42, 0.2); color: var(--su-slate); }
.su-tag { font-size: var(--su-fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--su-coral-ink); }

/* Cards and panels */
.su-card { background: var(--su-surface); border: 1px solid var(--su-grey); border-radius: var(--su-r-card); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--su-ease), box-shadow var(--su-ease); }
.su-card--link { cursor: pointer; text-decoration: none; color: inherit; }
.su-card--link:hover { border-color: rgba(15, 23, 42, 0.28); box-shadow: var(--su-shadow-hover); }
.su-card__poster { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: 14px; color: var(--su-white); overflow: hidden; background: radial-gradient(circle at 78% 22%, rgba(255, 90, 95, 0.55), transparent 46%), linear-gradient(135deg, var(--su-midnight), var(--su-slate)); }
.su-card__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.su-card__body { padding: 20px 20px 16px; display: grid; gap: 8px; flex: 1; align-content: start; }
.su-card__title { font-size: var(--su-fs-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0; }
.su-card__desc { font-size: var(--su-fs-small); color: var(--su-slate); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.su-card__foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid var(--su-grey); gap: 12px; }
.su-panel { background: var(--su-surface); border: 1px solid var(--su-grey); border-radius: var(--su-r-card); }
.su-panel--pad { padding: 24px; }
.su-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--su-grey); }

/* Tables */
.su-table { width: 100%; border-collapse: collapse; font-size: var(--su-fs-small); }
.su-table th { text-align: left; padding: 12px 16px; font-size: var(--su-fs-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--su-muted); border-bottom: 1px solid var(--su-grey); white-space: nowrap; }
.su-table td { padding: 16px; border-bottom: 1px solid var(--su-grey); vertical-align: middle; }
.su-table tbody tr:hover { background: var(--su-grey-soft); }
.su-table .su-num { text-align: right; font-variant-numeric: tabular-nums; }
.su-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--su-midnight); color: var(--su-white); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.su-avatar--coral { background: var(--su-coral); color: var(--su-white); }
.su-progress { height: 6px; background: var(--su-grey); border-radius: var(--su-r-pill); overflow: hidden; min-width: 96px; }
.su-progress > i { display: block; height: 100%; background: var(--su-midnight); border-radius: var(--su-r-pill); }
.su-progress--coral > i { background: var(--su-coral); }

/* Menus */
.su-menu-wrap { position: relative; display: inline-block; }
.su-menu { position: absolute; z-index: 40; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--su-surface); border: 1px solid var(--su-grey); border-radius: var(--su-r-menu); box-shadow: var(--su-shadow-float); padding: 6px 0; display: none; }
.su-menu.is-open { display: block; }
.su-menu__who { padding: 14px 18px; border-bottom: 1px solid var(--su-grey); margin-bottom: 6px; }
.su-menu__who b { display: block; font-size: 15px; }
.su-menu__who span { font-size: 13px; color: var(--su-muted); }
.su-menu a, .su-menu button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 18px; font-family: var(--su-font); font-size: var(--su-fs-small); color: var(--su-midnight); text-decoration: none; background: none; border: 0; cursor: pointer; }
.su-menu a:hover, .su-menu button:hover { background: var(--su-grey-soft); }
.su-menu a[aria-current="true"]::after, .su-menu a[aria-current="page"]::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--su-coral); }
.su-menu .su-danger { color: var(--su-red); }
.su-menu hr { border: 0; border-top: 1px solid var(--su-grey); margin: 6px 0; }

/* Notices */
.su-notice { flex-wrap: wrap; display: flex; gap: 14px; padding: 14px 18px; border-radius: var(--su-r-field); border: 1px solid var(--su-grey); background: var(--su-surface); font-size: var(--su-fs-small); align-items: flex-start; }
.su-metric, .su-metric * { min-width: 0; overflow-wrap: break-word; }
.su-notice b { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 2px; }
.su-notice--info { background: var(--su-grey-soft); border-color: var(--su-grey); }
.su-notice--info .su-icon { color: var(--su-slate); }
.su-notice--success { background: var(--su-mint-soft); border-color: var(--su-mint-edge); }
.su-notice--success .su-icon { color: var(--su-mint); }
.su-notice--warn { background: var(--su-amber-soft); border-color: var(--su-amber-edge); }
.su-notice--warn .su-icon { color: var(--su-amber); }
.su-notice--error { background: var(--su-red-soft); border-color: var(--su-red-edge); color: var(--su-red-ink); }
.su-notice--error .su-icon { color: var(--su-red); }

/* States */
.su-skeleton { background: linear-gradient(90deg, var(--su-grey) 0%, var(--su-grey-soft) 50%, var(--su-grey) 100%); background-size: 200% 100%; animation: su-shimmer 1.4s infinite linear; border-radius: 8px; }
@keyframes su-shimmer { to { background-position: -200% 0; } }
.su-state { display: grid; place-items: center; text-align: center; gap: 12px; padding: 56px 24px; }
.su-state__well { width: 56px; height: 56px; border-radius: 50%; background: var(--su-grey); display: flex; align-items: center; justify-content: center; color: var(--su-slate); }
.su-state--error .su-state__well { background: var(--su-red-soft); color: var(--su-red); }

/* Modal family (design gate 2026-10-14; gallery: agent-reviews/mockups/scenarigo-suite-design/modals.html).
   One scrim, one surface, one reading order: optional eyebrow, title, supporting copy, close at the
   top right, body, status region, footer actions. Header, status and footer stay put; only the body
   scrolls. Three width families, never per-dialog widths: compact (confirmations and timeouts),
   the default form width, and wide (management and detail). */
.su-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, 0.62); display: flex; align-items: center; justify-content: center; padding: 24px; }
.su-scrim[hidden] { display: none; }
.su-modal { --su-modal-w: 600px; display: flex; flex-direction: column; width: 100%; max-width: var(--su-modal-w); max-height: min(88vh, 860px); background: var(--su-surface); color: var(--su-midnight); border-radius: var(--su-r-card); box-shadow: var(--su-shadow-float); overflow: hidden; }
.su-modal--compact { --su-modal-w: 480px; }
.su-modal { container-type: inline-size; }
@container (max-width: 22rem) { .su-modal__actions { flex-direction: column; align-items: stretch; } }
.su-modal--wide { --su-modal-w: 1000px; container-type: inline-size; }
.su-modal__head { flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 28px 32px 0; }
.su-modal__titles { min-width: 0; }
.su-modal__title-row { display: flex; align-items: center; gap: 16px; min-width: 0; }
.su-modal__head h2 { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; margin: 6px 0 0; }
.su-modal__title-row h2 { margin: 0; }
.su-modal__lede { margin: 10px 0 0; color: var(--su-slate); font-size: var(--su-fs-small); line-height: 1.55; max-width: 44rem; }
.su-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 32px 24px; display: grid; gap: 20px; align-content: start; color: var(--su-slate); }
.su-modal--wide .su-modal__body { display: block; }
/* In the grid body the gap owns the vertical rhythm, so a child's own block margin (a paragraph's
   default 1em) would be added on top of it. */
.su-modal:not(.su-modal--wide) > .su-modal__body > * { margin-block: 0; }
.su-modal__status { flex: none; padding: 0 32px 16px; }
.su-modal__status:empty { display: none; }
/* A status region whose only content is hidden or empty reserves no space. */
.su-modal__status:not(:has(> :not([hidden]):not(:empty))) { display: none; }
.su-modal__foot { flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 18px 32px 24px; border-top: 1px solid var(--su-grey); }
.su-modal__foot--split { justify-content: space-between; }
.su-modal__foot-note { margin-right: auto; color: var(--su-muted); font-size: var(--su-fs-small); }
.su-modal__foot { flex-wrap: wrap; }
.su-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-left: auto; }
.su-modal__actions[hidden] { display: none; }
.su-modal__foot > :is(p, div):not(.su-modal__actions) { flex: 1 1 100%; margin: 0; }
.su-modal__pinned { margin: 0; padding: 12px 32px 0; }
.su-modal__pinned[hidden] { display: none; }
.su-modal__notice { margin: 12px 32px 0; padding: 10px 14px; border-radius: var(--su-r-field); background: var(--su-grey-soft); color: var(--su-slate); font-size: var(--su-fs-small); line-height: 1.5; }
.su-modal__notice[hidden] { display: none; }
/* Policy rows: a choice with its consequence beneath, the control at the trailing edge. */
.su-policy-list { display: grid; margin-top: 12px; border-top: 1px solid var(--su-grey); }
.su-policy { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--su-grey); cursor: pointer; }
.su-policy__text { display: grid; gap: 4px; min-width: 0; }
.su-policy__text b { color: var(--su-midnight); font-size: var(--su-fs-body); }
.su-policy__text span { color: var(--su-muted); font-size: var(--su-fs-small); font-weight: 400; letter-spacing: 0; text-transform: none; }
.su-policy input { width: 22px; height: 22px; flex: none; accent-color: var(--su-coral); }
/* A settings group inside a form modal: a strong title that reads as a subsection heading, purpose
   copy 8px under it, then the current state and the control (12px apart). Groups sit 24px apart with
   a quiet divider; no nested cards. */
.su-setting { display: grid; gap: 12px; min-width: 0; }
.su-setting + .su-setting { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--su-grey); }
.su-setting__head { display: grid; gap: 8px; }
.su-setting__title { margin: 0; font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.005em; color: var(--su-midnight); }
.su-setting__help { margin: 0; font-size: var(--su-fs-small); color: var(--su-muted); line-height: 1.5; }
/* A search field pinned under a modal's header: inside the same 32px content edge as the body. */
.su-modal__search { flex: none; padding: 12px 32px 0; }
.su-modal__intro { margin: 0 0 24px; font-size: var(--su-fs-small); color: var(--su-muted); line-height: 1.5; }
.su-modal__form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.su-modal .su-state { padding: 32px 16px; }
.su-modal [hidden] { display: none; }
.su-modal__head:not(:has(h2:not([hidden]))) { display: none; }
.su-modal__head:not(:has(h2:not([hidden]))) + .su-modal__body { padding-top: 28px; }
.su-modal__status:not(:has(:not([hidden]))) { display: none; }
/* The room's own confirmation: Exit has no mode and is destructive; the presence warnings are
   dark smoked glass on the room stage and lead with the primary action. */
.su-scrim--room-confirm:not([data-mode]) [data-action="confirm-ok"] { --btn-bg: var(--su-red); --btn-fg: var(--su-white); }
.su-scrim--room-confirm:not([data-mode]) [data-action="confirm-ok"]:hover { --btn-bg: var(--su-red-press); }
.su-scrim--room-confirm[data-mode="room-idle"] .su-modal,
.su-scrim--room-confirm[data-mode="keep-preparing"] .su-modal,
.su-scrim--room-confirm[data-mode="reader"] .su-modal { background: rgba(15, 23, 42, 0.88); color: var(--su-on-dark-soft); border: 1px solid rgba(229, 231, 235, 0.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.su-scrim--room-confirm:not([data-mode="room-idle"]):not([data-mode="keep-preparing"]):not([data-mode="reader"]) .su-well-icon { display: none; }
.su-scrim--room-confirm[data-mode="room-idle"] .su-modal__head h2,
.su-scrim--room-confirm[data-mode="keep-preparing"] .su-modal__head h2,
.su-scrim--room-confirm[data-mode="reader"] .su-modal__head h2 { color: var(--su-white); }
.su-scrim--room-confirm[data-mode="room-idle"] .su-modal__body,
.su-scrim--room-confirm[data-mode="keep-preparing"] .su-modal__body,
.su-scrim--room-confirm[data-mode="reader"] .su-modal__body { color: var(--su-on-dark-muted); }
.su-scrim--room-confirm[data-mode="room-idle"] .su-modal__foot,
.su-scrim--room-confirm[data-mode="keep-preparing"] .su-modal__foot,
.su-scrim--room-confirm[data-mode="reader"] .su-modal__foot { border-top-color: rgba(229, 231, 235, 0.14); }
/* Reader mode: a long message read in a window (the manager feedback transcript). About 680px wide, 17px text,
   one bounded scroll area with the product's slim, recessive scrollbar. */
.su-scrim--room-confirm[data-mode="reader"] .su-modal { --su-modal-w: 680px; }
.su-scrim--room-confirm[data-mode="reader"] .su-modal__body { font-size: 1.0625rem; line-height: 1.6; color: var(--su-on-dark-soft); scrollbar-width: thin; scrollbar-color: rgba(229, 231, 235, 0.28) transparent; }
.su-scrim--room-confirm[data-mode="reader"] .su-modal__body::-webkit-scrollbar { width: 8px; }
.su-scrim--room-confirm[data-mode="reader"] .su-modal__body::-webkit-scrollbar-track { background: transparent; }
.su-scrim--room-confirm[data-mode="reader"] .su-modal__body::-webkit-scrollbar-thumb { background-color: rgba(229, 231, 235, 0.28); border-radius: 999px; }
.su-scrim--room-confirm[data-mode="reader"] .su-modal__body::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--su-coral) 70%, transparent); }
.su-scrim--room-confirm[data-mode="reader"] .su-modal__body::-webkit-scrollbar-button { display: none; block-size: 0; }
.su-scrim--room-confirm[data-mode="reader"] .su-modal__body:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* Concise feedback modal (learner My Training and the administrator's learner report): one
   shared definition, a result line, the criteria at a glance, the next step and the way on to
   the detailed report. */
.feedback-modal { --su-modal-w: 640px; }
.feedback-modal__result { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.feedback-modal__score { font-size: 3rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.feedback-modal__meter { display: grid; grid-template-columns: minmax(120px, 200px) 1fr 52px; gap: 14px; align-items: center; padding-block: 10px; border-top: 1px solid var(--su-grey); font-size: var(--su-fs-small); }
.feedback-modal__meter span { text-align: right; font-variant-numeric: tabular-nums; }
.feedback-modal__next { margin: 20px 0 0; color: var(--su-slate); }
.su-scrim--room-confirm[data-mode="room-idle"] [data-action="confirm-cancel"],
.su-scrim--room-confirm[data-mode="keep-preparing"] [data-action="confirm-cancel"] { --btn-fg: var(--su-white); --btn-bd: rgba(229, 231, 235, 0.5); }
.su-scrim--room-confirm [data-action]:disabled { cursor: not-allowed; }
/* The one-action warning reads as one centred vertical path: message, then its single action. */
.su-scrim--room-confirm[data-mode="keep-preparing"] .su-modal__head { justify-content: center; text-align: center; }
.su-scrim--room-confirm[data-mode="keep-preparing"] .su-modal__titles { text-align: center; }
.su-scrim--room-confirm[data-mode="keep-preparing"] .su-modal__body { text-align: center; justify-items: center; padding: 16px 40px 28px; }
.su-scrim--room-confirm[data-mode="keep-preparing"] .su-modal__foot { justify-content: center; }
.su-modal--room { background: rgba(15, 23, 42, 0.88); color: var(--su-on-dark-soft); border: 1px solid rgba(229, 231, 235, 0.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.su-modal--room .su-modal__body { color: var(--su-on-dark-muted); }
.su-modal--room .su-modal__foot { border-top-color: rgba(229, 231, 235, 0.14); }
.su-modal--room .su-modal__head h2 { color: var(--su-white); }
/* Selection rows for pick-and-assign dialogs and lists. */
.su-pick-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.su-pick { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(15, 23, 42, 0.14); border-radius: var(--su-r-field); background: var(--su-surface); cursor: pointer; transition: border-color var(--su-ease), background var(--su-ease); }
.su-pick:hover { border-color: rgba(15, 23, 42, 0.4); }
.su-pick:has(input:checked) { border-color: var(--su-coral); background: color-mix(in srgb, var(--su-coral) 7%, var(--su-surface)); }
.su-pick:has(input:focus-visible) { box-shadow: var(--su-ring); }
.su-pick input { width: 20px; height: 20px; flex: none; accent-color: var(--su-coral); margin: 0; }
.su-pick__text { min-width: 0; display: grid; gap: 2px; }
.su-pick__title { font-weight: 600; color: var(--su-midnight); }
.su-pick__meta { font-size: var(--su-fs-small); color: var(--su-muted); }
.su-well-icon { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.su-well-icon--warn { background: var(--su-amber-soft); color: var(--su-amber); }
.su-well-icon--danger { background: var(--su-red-soft); color: var(--su-red); }
.su-well-icon--info { background: var(--su-grey-soft); color: var(--su-slate); }

/* ---------------------------------------------------------------------
   Application rail: one anatomy for product and workflow steps
   --------------------------------------------------------------------- */
.su-rail { background: var(--su-midnight); color: var(--su-white); width: 264px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; flex: none; }
.su-rail__brand { height: 72px; padding: 0 24px; display: flex; align-items: center; border-bottom: 1px solid rgba(229, 231, 235, 0.12); }
.su-rail__brand img { height: 34px; width: auto; }
.su-rail__nav { padding: 16px 12px; display: grid; gap: 2px; overflow: auto; }
.su-rail__group { padding: 14px 26px 6px; color: var(--su-disabled); }
.su-rail__link { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 12px; color: var(--su-on-dark-muted); text-decoration: none; font-family: var(--su-font); font-size: 0.9375rem; font-weight: 500; border: 0; border-left: 2px solid transparent; background: none; width: 100%; text-align: left; cursor: pointer; transition: background var(--su-ease), color var(--su-ease); }
.su-rail__link:hover { background: rgba(250, 250, 250, 0.07); color: var(--su-white); }
.su-rail__link.is-on, .su-rail__link[aria-current="page"] { background: rgba(250, 250, 250, 0.09); color: var(--su-white); border-left-color: var(--su-coral); }
.su-rail__foot { margin-top: auto; padding: 16px; border-top: 1px solid rgba(229, 231, 235, 0.12); display: flex; align-items: center; gap: 12px; position: relative; }
.su-rail__who b { display: block; font-size: 14px; }
.su-rail__who span { font-size: 12px; color: var(--su-on-dark-dim); }

/* Page header band: title, one-sentence purpose, primary action aligned */
.su-page { padding: 40px 48px 72px; max-width: 1480px; }
.su-page > * + * { margin-top: 24px; }
.su-page > .su-page__head { margin-top: 0; }
.su-page code { background: var(--su-grey-soft); padding: 2px 6px; border-radius: 6px; font-size: 0.88em; }
.su-page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.su-page__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.su-page__head .su-lede { margin-top: 8px; font-size: 1.0625rem; }


/* ---------------------------------------------------------------------
   Application shell: rail + main, shared by every signed-in page
   --------------------------------------------------------------------- */
.su-app { display: flex; min-height: 100vh; background: var(--su-page); }
.su-main { flex: 1; min-width: 0; }
.su-rail__brand a { display: inline-flex; }
.su-rail__steps { padding-top: 4px; }
.su-rail__mark { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--su-disabled); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; }
.su-rail__link.is-done .su-rail__mark { background: var(--su-mint-live); border-color: var(--su-mint-live); color: var(--su-midnight); }
.su-rail__link.is-attn .su-rail__mark { border-color: var(--su-amber-live); color: var(--su-amber-live); }
.su-rail__flag { margin-left: auto; font-size: 11px; color: var(--su-amber-live); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.su-rail__account { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px; border: 0; border-radius: 12px; background: none; color: inherit; font-family: var(--su-font); cursor: pointer; text-align: left; }
.su-rail__account:hover { background: rgba(250, 250, 250, 0.07); }
.su-rail__who { display: grid; min-width: 0; flex: 1; }
.su-rail__who b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-rail__who span { font-size: 12px; color: var(--su-on-dark-dim); }
.su-rail__account .su-icon { color: var(--su-on-dark-muted); }
.su-menu--up { top: auto; bottom: calc(100% + 8px); left: 12px; right: 12px; min-width: 0; display: none; }
.su-menu--up.is-open { display: block; }
.su-menu__credits { margin: 6px 0 0; font-size: 13px; color: var(--su-slate); font-weight: 600; }

/* Nested navigation: the quiet derivative of the rail for in-page sections */
.su-subnav { display: grid; gap: 2px; position: sticky; top: 32px; }
.su-subnav a { padding: 10px 14px; border-left: 2px solid transparent; color: var(--su-slate); text-decoration: none; font-size: 0.9375rem; font-weight: 500; border-radius: 0 12px 12px 0; transition: background var(--su-ease), color var(--su-ease); }
.su-subnav a:hover { background: var(--su-grey-soft); color: var(--su-midnight); }
.su-subnav a[aria-current="true"], .su-subnav a[aria-current="page"] { border-left-color: var(--su-coral); color: var(--su-midnight); font-weight: 600; }

/* ---------------------------------------------------------------------
   Base element layer. Pages whose generated markup uses bare elements
   (button, input, select, textarea, label) get the suite appearance here, at
   zero specificity, so any .su-* class or composition rule wins cleanly. It is
   the single owner of element defaults: page sheets must not restyle bare
   elements. Buttons carrying no class, or the legacy role classes
   .primary/.secondary/.danger, resolve to the suite button family.
   --------------------------------------------------------------------- */
:where(.su-scope) button:where(:not([class]), .primary, .secondary, .danger) {
  --btn-bg: var(--su-coral); --btn-fg: var(--su-white); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 22px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  border-radius: var(--su-r-pill);
  font-family: var(--su-font); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
  transition: background var(--su-ease), color var(--su-ease), border-color var(--su-ease), box-shadow var(--su-ease);
}
:where(.su-scope) button:where(:not([class]), .primary, .secondary, .danger):hover { --btn-bg: var(--su-coral-ink); --btn-fg: var(--su-white); }
:where(.su-scope) button:where(:not([class]), .primary, .secondary, .danger):focus-visible { outline: none; box-shadow: var(--su-ring), 0 0 0 1px var(--su-coral) inset; }
:where(.su-scope) button.secondary { --btn-bg: transparent; --btn-fg: var(--su-midnight); --btn-bd: var(--su-midnight); }
:where(.su-scope) button.secondary:hover { --btn-bg: var(--su-midnight); --btn-fg: var(--su-white); --btn-bd: var(--su-midnight); }
:where(.su-scope) button.danger { --btn-bg: var(--su-red); --btn-fg: var(--su-white); }
:where(.su-scope) button.danger:hover { --btn-bg: var(--su-red-press); }
:where(.su-scope) button:where(:not([class]), .primary, .secondary, .danger):disabled { --btn-bg: var(--su-grey); --btn-fg: var(--su-disabled); --btn-bd: transparent; cursor: not-allowed; }

:where(.su-scope, .su-fields) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="color"]), textarea, select):where(:not([class]), [class=""]) {
  width: 100%; min-height: 48px; padding: 12px 16px;
  background: var(--su-surface); color: var(--su-midnight);
  border: 1px solid rgba(15, 23, 42, 0.2); border-radius: var(--su-r-field);
  font-family: var(--su-font); font-size: 1rem; line-height: 1.4;
}
:where(.su-scope, .su-fields) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="color"]), textarea, select):where(:not([class]), [class=""]):hover { border-color: rgba(15, 23, 42, 0.4); }
:where(.su-scope, .su-fields) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="color"]), textarea, select):where(:not([class]), [class=""]):focus { outline: none; border-color: var(--su-coral); }
/* Choice controls never take the boxed-field focus treatment: a pointer click shows only the selected state,
   and keyboard focus draws one restrained indicator around the control itself. */
:where(.su-scope, .su-fields) :is(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--su-coral); outline-offset: 2px; box-shadow: none; }
/* Buttons and links reached by keyboard on pages that only use the field layer (no .su-scope) show the same one
   restrained coral outline instead of the browser default. Zero specificity: .su-btn and component rules win. */
:where(.su-scope, .su-fields) :is(button, a[href], summary, [role="button"]):focus-visible { outline: 2px solid var(--su-coral); outline-offset: 2px; }
:where(.su-scope, .su-fields) textarea:where(:not([class]), [class=""]) { padding: 14px 16px; min-height: 96px; }
:where(.su-scope) input[type="radio"] { accent-color: var(--su-coral); width: 18px; height: 18px; }
/* The one checkbox: an empty, restrained outlined box when unchecked; coral with a white tick when checked. The
   native control is replaced so no browser or colour-scheme default (a solid dark square) can leak through. */
:where(.su-scope) input[type="checkbox"] { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid rgba(15, 23, 42, 0.4); border-radius: 6px; background: var(--su-surface); cursor: pointer; transition: background var(--su-ease), border-color var(--su-ease); }
:where(.su-scope) input[type="checkbox"]::before { content: ""; width: 12px; height: 10px; background: var(--su-surface); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); transform: scale(0); transition: transform var(--su-ease); }
:where(.su-scope) input[type="checkbox"]:checked { background: var(--su-coral); border-color: var(--su-coral); }
:where(.su-scope) input[type="checkbox"]:checked::before { transform: scale(1); }
:where(.su-scope) input[type="checkbox"]:hover:not(:checked, :disabled) { border-color: var(--su-midnight); }
:where(.su-scope) input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
:where(input[type="file"]) { max-width: 100%; padding: 0; border: 0; background: transparent; font-family: var(--su-font); font-size: var(--su-fs-small); color: var(--su-slate); }
:where(input[type="file"])::file-selector-button { margin-right: 14px; min-height: 36px; padding: 0 16px; background: transparent; color: var(--su-midnight); border: 1px solid var(--su-midnight); border-radius: var(--su-r-pill); font-family: var(--su-font); font-size: var(--su-fs-small); font-weight: 600; cursor: pointer; transition: background var(--su-ease), color var(--su-ease); }
:where(input[type="file"])::file-selector-button:hover { background: var(--su-midnight); color: var(--su-white); }
:where(.su-scope) label { font-size: var(--su-fs-small); font-weight: 600; color: var(--su-slate); }
:where(.su-scope) a { color: var(--su-coral-ink); }

/* Shared metric, empty state, search and filter choice */
.su-metric { background: var(--su-surface); border: 1px solid var(--su-grey); border-radius: var(--su-r-card); padding: 20px 22px; display: grid; gap: 6px; align-content: start; }
.su-metric__label { font-size: var(--su-fs-micro); font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--su-muted); }
.su-metric__value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.su-metric__sub { font-size: var(--su-fs-small); color: var(--su-muted); }
.su-metric--headline .su-metric__value { font-size: 2.25rem; }
.su-empty { text-align: center; color: var(--su-muted); padding: 40px 16px; background: var(--su-surface); border: 1px dashed rgba(15, 23, 42, 0.2); border-radius: var(--su-r-card); }
.su-search--grow { flex: 1 1 220px; }
.su-search { position: relative; display: flex; align-items: center; flex: 1; min-width: 220px; max-width: 520px; color: var(--su-muted); }
.su-search .su-icon, .su-search > svg { position: absolute; left: 16px; }
.su-search input { width: 100%; min-height: 44px; padding: 0 16px 0 44px; border: 1px solid rgba(15, 23, 42, 0.2); border-radius: var(--su-r-pill); background: var(--su-surface); color: var(--su-midnight); font-family: var(--su-font); font-size: var(--su-fs-small); }
.su-search input:focus { outline: none; border-color: var(--su-coral); }
.su-seg { flex-wrap: wrap; }
.su-seg button[aria-pressed="true"] { background: var(--su-surface); color: var(--su-midnight); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }

/* ---------------------------------------------------------------------
   Responsive data table (opt in with .su-table--data). Hides secondary
   columns on a phone and offers a labelled disclosure; identity stays sticky.
   Ported from the former data-table.css so one file owns it.
     .su-col-identity   whose row this is; sticky
     .su-col-priority   kept on a phone (intent marker)
     .su-col-secondary  hidden on a phone, reappears labelled in the detail
     .su-col-phone-only a cell that exists only on a phone
     .su-disclose-cell  the disclosure control cell
     .su-row-detail     the disclosed detail row
   --------------------------------------------------------------------- */
.su-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.su-table--data .su-sr { position: static; display: inline-block; clip: auto; clip-path: inset(50%); }
.su-fold { display: none; }
.su-fold__label { color: var(--su-muted); }
.su-col-priority { white-space: nowrap; }
.su-col-phone-only { display: none; }
.su-delta--positive { color: var(--su-mint); font-variant-numeric: tabular-nums; }
.su-delta--negative { color: var(--su-muted); font-variant-numeric: tabular-nums; }
.su-table--data .su-col-identity { position: sticky; left: 0; z-index: 1; background: var(--su-surface); }
.su-table--data thead .su-col-identity { z-index: 2; }
.su-disclose-cell { width: 1%; padding-right: 0; }
.su-disclose { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--su-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.su-disclose:hover { color: var(--su-midnight); }
.su-disclose__chevron { display: block; transition: transform 120ms ease; }
.su-disclose[aria-expanded="true"] .su-disclose__chevron { transform: rotate(90deg); }
.su-row-detail > td { padding: 6px 12px 14px; }
.su-detail-list { display: grid; grid-template-columns: minmax(0, auto) minmax(7rem, 1fr); gap: 5px 14px; margin: 0; font-size: var(--su-fs-small); }
.su-detail-list dt { color: var(--su-muted); }
.su-detail-list dd { margin: 0; }
@media (max-width: 599.98px) {
  .su-table--data .su-fold { display: block; font-size: 0.82rem; margin-top: 2px; }
  .su-table--data .su-col-secondary { display: none; }
  .su-table--data .su-col-phone-only { display: table-cell; }
  .su-table--data .su-col-identity, .su-table--data .su-col-identity * { white-space: normal; overflow-wrap: anywhere; }
  .su-table--data .su-badge { white-space: normal; }
  .su-table--data th, .su-table--data td { padding-left: 6px; padding-right: 6px; }
}
@media (min-width: 600px) {
  .su-table--data .su-disclose-cell--responsive,
  .su-table--data .su-row-detail--responsive,
  .su-table--data .su-detail-list--responsive { display: none; }
}

/* Site header: learner and focused pages (no rail). Brand left, account right. */
.su-site-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; padding-inline: clamp(1.25rem, 4vw, 3.5rem); max-width: 1480px; margin-inline: auto; }
.su-site-head__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.su-site-head__brand img { height: 36px; width: auto; max-width: 220px; object-fit: contain; }
.su-site-head__org { font-weight: 600; font-size: 1.0625rem; color: var(--su-slate); border-left: 1px solid var(--su-grey); padding-left: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-site-account { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border: 0; border-radius: var(--su-r-pill); background: none; cursor: pointer; color: var(--su-slate); }
.su-site-account:hover { background: var(--su-grey-soft); }
.su-site-main > .su-notice { margin-bottom: 24px; }
.su-site-main { max-width: 1480px; margin-inline: auto; padding: 8px clamp(1.25rem, 4vw, 3.5rem) 80px; }

/* ---------------------------------------------------------------------
   Responsive-safe shell. Below tablet width the rail becomes a compact top
   band: brand and account on one row, destinations as a scrollable row. The
   systematic tablet and phone design pass is a later phase; this keeps every
   page usable and free of overflow until then.
   --------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .su-app { flex-direction: column; }
  .su-rail { position: static; width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .su-rail__brand { height: 56px; border-bottom: 0; flex: 1 1 auto; }
  .su-rail__foot { margin: 0; padding: 8px 12px; border: 0; }
  .su-rail__who { display: none; }
  .su-rail__nav { order: 3; flex: 1 0 100%; display: flex; overflow-x: auto; padding: 4px 8px 10px; gap: 4px; border-top: 1px solid rgba(229, 231, 235, 0.12); }
  .su-rail__nav .su-rail__link { width: auto; white-space: nowrap; padding: 9px 14px; border-left: 0; border-bottom: 2px solid transparent; border-radius: 10px; }
  .su-rail__nav .su-rail__link.is-on { border-bottom-color: var(--su-coral); }
  .su-rail__group { display: none; }
  .su-menu--up { top: calc(100% + 6px); bottom: auto; left: auto; right: 12px; min-width: 240px; }
  .su-page { padding: 24px 16px 56px; }
  .su-site-head { padding-inline: 16px; height: 68px; }
}

/* ---------------------------------------------------------------------
   Touch and motion. A coarse pointer raises heights only, never widths, so
   nothing reflows; reduced motion removes movement and keeps every state change.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
  .su-btn, .su-btn--sm { min-height: 44px; }
  .su-rail__link, .su-menu__item, .su-seg button, .su-subnav a { min-height: 44px; }
  .su-field, .su-select { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .su-scope *, .su-scope *::before, .su-scope *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   Page bar (formerly shared-public/header.css). The logo | divider | title |
   actions bar used by the authoring builders and the Scenario Library rail.
   One definition, owned here; page sheets place it but do not restyle it.
   --------------------------------------------------------------------- */
.sg-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem var(--sg-gutter, 32px);
  border-bottom: 1px solid color-mix(in srgb, var(--su-grey) 70%, transparent);
  background: var(--su-surface);
  min-width: 0;
}
.sg-header__logo { height: 34px; width: auto; display: block; }
.sg-header__divider { width: 1px; height: 28px; background: var(--su-grey); flex: none; }
.sg-header__title-block { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.sg-header__title-block > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-header__title { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; }
.sg-header__subtitle { font-size: 0.82rem; color: var(--su-muted); }
.sg-header__spacer { flex: 1; }

/* ---------------------------------------------------------------------
   Data pages (Super Admin, 2026-10-14; agent-reviews/Open/2026-10-14-super-admin-
   spacing-navigation-and-data-controls.md). One vertical rhythm, one toolbar, one
   pager and one category icon tile, owned here so no page restates them.

   Rhythm: eyebrow and title read as one group, the lede sits a small step below, the
   first section is a full break away; inside a section the heading group (8px) comes
   first, then 16px to the controls, then the content. Sibling sections are 32px apart.
   --------------------------------------------------------------------- */
.su-page__head .su-eyebrow + .su-h1 { margin-top: 6px; }
.su-page__head .su-h1 + .su-lede { margin-top: 8px; }
.su-stack { display: grid; gap: 32px; min-width: 0; }
.su-stack[hidden] { display: none; }
.su-section { display: grid; gap: 16px; min-width: 0; }
.su-section__head { display: grid; gap: 8px; min-width: 0; }
.su-section__head-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.su-section__title { margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; color: var(--su-midnight); }
.su-section__title--label { font-size: var(--su-fs-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--su-muted); }
.su-section__lede { margin: 0; max-width: 72ch; font-size: var(--su-fs-small); line-height: 1.55; color: var(--su-muted); }
.su-section__link { font-size: var(--su-fs-small); font-weight: 600; color: var(--su-coral-ink); text-decoration: none; white-space: nowrap; }
.su-section__link:hover { text-decoration: underline; }
.su-section > .su-seg { justify-self: start; }
.su-section > .su-panel--pad, .su-panel--stack { min-width: 0; }
.su-panel--stack { display: grid; gap: 16px; }

/* The result area of a long list: the page scrolls to its top on a page change. */
.su-results { display: grid; gap: 16px; min-width: 0; }
/* A page change scrolls a result section to the top of the view; the 24px keeps it off the edge. */
.su-panel--stack, .su-results, .su-section__head { scroll-margin-top: 24px; }
.su-results__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.su-results__heading { margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; }
.su-results__heading:focus { outline: none; }
.su-results__summary { margin: 0; font-size: var(--su-fs-small); color: var(--su-muted); font-variant-numeric: tabular-nums; }
.su-results__body { display: grid; gap: 12px; min-width: 0; }
.su-results__body > * { margin: 0; }

/* Data toolbar: search, filters and a date range in one grouped band. */
.su-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; padding: 16px 20px; background: var(--su-grey-soft); border-radius: var(--su-r-field); }
.su-toolbar__group { display: grid; gap: 6px; min-width: 0; }
.su-toolbar__group > label, .su-toolbar__label { font-size: var(--su-fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--su-slate); }
.su-toolbar__range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.su-toolbar__search { flex: 1 1 260px; max-width: 420px; }
.su-toolbar__clear { align-self: flex-end; }
/* A toolbar that sits inside a result panel needs no band of its own. */
.su-toolbar--bare { padding: 0; background: none; }
.su-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Pagination: Previous, the range, Next - centred under the result. */
.su-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 20px; padding-top: 8px; }
.su-pager__range { min-width: 9rem; text-align: center; font-size: var(--su-fs-small); color: var(--su-muted); font-variant-numeric: tabular-nums; }
.su-pager[hidden] { display: none; }

/* Category icon tile: a soft-cornered square that carries a line icon and a semantic tint. */
.su-icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--su-r-field); background: var(--su-grey-soft); color: var(--su-slate); }
.su-icon-tile .su-icon { width: 20px; height: 20px; }
.su-icon-tile--danger { background: var(--su-red-soft); color: var(--su-red); }
.su-icon-tile--warn { background: var(--su-amber-soft); color: var(--su-amber); }
.su-icon-tile--success { background: var(--su-mint-soft); color: var(--su-mint); }
.su-icon-tile--neutral { background: var(--su-grey-soft); color: var(--su-slate); }

/* Rail utility action: Exit Admin sits apart from the destinations, above the account control. */
.su-rail__utility { margin-top: auto; padding: 12px 16px 0; }
.su-rail__utility + .su-rail__foot { margin-top: 0; border-top: 0; padding-top: 8px; }