:root {
  color-scheme: light;
  --rr-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rr-color-canvas: #f3f6f8;
  --rr-color-surface: #ffffff;
  --rr-color-surface-subtle: #edf3f6;
  --rr-color-surface-raised: #ffffff;
  --rr-color-text: #193346;
  --rr-color-text-muted: #617382;
  --rr-color-border: #d9e2e8;
  --rr-color-border-strong: #bdcbd4;
  --rr-color-brand: #12628d;
  --rr-color-brand-hover: #0d5379;
  --rr-color-brand-soft: #e7f3f9;
  --rr-color-on-brand: #ffffff;
  --rr-color-shell: #10283b;
  --rr-color-shell-text: #ffffff;
  --rr-color-shell-muted: #b8c8d3;
  --rr-color-current: #216546;
  --rr-color-current-bg: #e9f5ee;
  --rr-color-current-border: #b9dec8;
  --rr-color-attention: #925912;
  --rr-color-attention-bg: #fff4dd;
  --rr-color-attention-border: #eed29e;
  --rr-color-review: #6a4e9a;
  --rr-color-review-bg: #f1ecfa;
  --rr-color-review-border: #d8caf0;
  --rr-color-progress: #12628d;
  --rr-color-progress-bg: #e7f3f9;
  --rr-color-progress-border: #badce9;
  --rr-color-error: #a23838;
  --rr-color-error-bg: #fff0f0;
  --rr-color-error-border: #efc1c1;
  --rr-color-disabled-bg: #dbe2e6;
  --rr-color-disabled-text: #667680;
  --rr-focus-ring: #2a83b2;
  --rr-overlay: rgba(12, 29, 40, .58);
  --rr-shadow-card: 0 12px 36px rgba(22, 49, 66, .08);
  --rr-shadow-dialog: 0 30px 80px rgba(0, 0, 0, .25);
  --rr-radius-sm: 8px;
  --rr-radius-md: 10px;
  --rr-radius-lg: 14px;
  --rr-radius-pill: 999px;
  --rr-space-1: 4px;
  --rr-space-2: 8px;
  --rr-space-3: 12px;
  --rr-space-4: 16px;
  --rr-space-5: 20px;
  --rr-space-6: 24px;
  --rr-space-8: 32px;
  --rr-space-10: 40px;
  --rr-content-max: 1220px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --rr-color-canvas: #0c171d;
  --rr-color-surface: #14242c;
  --rr-color-surface-subtle: #20343e;
  --rr-color-surface-raised: #192b34;
  --rr-color-text: #edf5f7;
  --rr-color-text-muted: #b7c7cd;
  --rr-color-border: #34505c;
  --rr-color-border-strong: #52707c;
  --rr-color-brand: #78d0da;
  --rr-color-brand-hover: #9adfe6;
  --rr-color-brand-soft: #173844;
  --rr-color-on-brand: #071b20;
  --rr-color-shell: #07151b;
  --rr-color-shell-text: #f3fafb;
  --rr-color-shell-muted: #b7c8ce;
  --rr-color-current: #a5e5c1;
  --rr-color-current-bg: #173b2d;
  --rr-color-current-border: #32664d;
  --rr-color-attention: #ffd18d;
  --rr-color-attention-bg: #493214;
  --rr-color-attention-border: #795523;
  --rr-color-review: #ddccff;
  --rr-color-review-bg: #34284c;
  --rr-color-review-border: #5f4b82;
  --rr-color-progress: #a9e1eb;
  --rr-color-progress-bg: #173844;
  --rr-color-progress-border: #356575;
  --rr-color-error: #ffb6b6;
  --rr-color-error-bg: #452424;
  --rr-color-error-border: #794141;
  --rr-color-disabled-bg: #2a3a42;
  --rr-color-disabled-text: #9daeb5;
  --rr-focus-ring: #91dae2;
  --rr-overlay: rgba(0, 7, 10, .75);
  --rr-shadow-card: 0 14px 42px rgba(0, 0, 0, .28);
  --rr-shadow-dialog: 0 30px 80px rgba(0, 0, 0, .62);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; font-family: var(--rr-font-sans); color: var(--rr-color-text); background: var(--rr-color-canvas); }
body { min-height: 100%; margin: 0; background: var(--rr-color-canvas); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--rr-focus-ring); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Application shell, primary navigation, facility selector, and utilities. */
.topbar, .rr-app-shell__header {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 12px clamp(18px, 4vw, 58px);
  color: var(--rr-color-shell-text);
  background: var(--rr-color-shell);
}
.brand, .rr-brand { color: var(--rr-color-shell-text); font-size: 24px; font-weight: 800; text-decoration: none; }
.preview-note { display: flex; gap: 9px; align-items: center; font-size: 12px; }
.preview-note strong { padding: 5px 9px; border-radius: var(--rr-radius-pill); color: #0c4b6c; background: #d7edf7; }
.preview-note span { color: var(--rr-color-shell-muted); }
.facility-switcher, .rr-facility-selector { margin-left: auto; text-align: right; }
.facility-switcher span, .rr-facility-selector__label { display: block; color: var(--rr-color-shell-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.facility-switcher strong, .rr-facility-selector__value { font-size: 14px; }
.rr-shell-tools { display: flex; align-items: center; gap: 12px; }

.appearance-selector, .rr-appearance-selector { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border: 1px solid color-mix(in srgb, var(--rr-color-shell-muted) 45%, transparent); border-radius: var(--rr-radius-md); }
.appearance-selector button, .rr-appearance-selector button { min-height: 30px; padding: 5px 8px; border: 0; border-radius: 6px; color: var(--rr-color-shell-muted); background: transparent; font-size: 12px; font-weight: 750; cursor: pointer; }
.appearance-selector button:hover, .rr-appearance-selector button:hover { color: var(--rr-color-shell-text); background: color-mix(in srgb, var(--rr-color-shell-text) 10%, transparent); }
.appearance-selector button[aria-pressed="true"], .rr-appearance-selector button[aria-pressed="true"] { color: var(--rr-color-shell); background: var(--rr-color-shell-text); }

main, .rr-app-shell__main { width: min(100%, var(--rr-content-max)); margin: auto; padding: 36px clamp(16px, 4vw, 48px) 80px; }
.hero, .rr-page-header { display: flex; justify-content: space-between; gap: 28px; align-items: end; margin-bottom: 30px; }
.eyebrow, .rr-eyebrow { margin: 0 0 6px; color: var(--rr-color-brand); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -.035em; }
h2 { margin: 0; font-size: 24px; }
h3 { margin: 0 0 8px; font-size: 18px; }
.lede { max-width: 720px; color: var(--rr-color-text-muted); font-size: 17px; line-height: 1.55; }
.hero-status { display: grid; gap: 8px; justify-items: end; text-align: right; }
.hero-status small { color: var(--rr-color-text-muted); }

/* Customer-facing status labels. Text remains the primary carrier of meaning. */
.status, .rr-status { display: inline-flex; align-items: center; flex: 0 0 auto; width: max-content; max-width: 100%; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--rr-radius-pill); font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.status.current, .rr-status--current { color: var(--rr-color-current); background: var(--rr-color-current-bg); border-color: var(--rr-color-current-border); }
.status.attention, .status.action-required, .rr-status--attention, .rr-status--action-required { color: var(--rr-color-attention); background: var(--rr-color-attention-bg); border-color: var(--rr-color-attention-border); }
.status.review, .rr-status--review { color: var(--rr-color-review); background: var(--rr-color-review-bg); border-color: var(--rr-color-review-border); }
.status.in-progress, .rr-status--in-progress { color: var(--rr-color-progress); background: var(--rr-color-progress-bg); border-color: var(--rr-color-progress-border); }

.tabs, .rr-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 26px; border-bottom: 1px solid var(--rr-color-border); scrollbar-width: thin; }
.tab, .rr-tab { padding: 14px 16px; border: 0; border-bottom: 3px solid transparent; color: var(--rr-color-text-muted); background: transparent; font-weight: 700; white-space: nowrap; cursor: pointer; }
.tab:hover, .rr-tab:hover { color: var(--rr-color-text); }
.tab.active, .tab[aria-selected="true"], .rr-tab[aria-selected="true"] { color: var(--rr-color-brand); border-color: var(--rr-color-brand); }
.panel { display: none; }
.panel.active { display: block; }

.metric-grid, .rr-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.metric-grid article, .card, .rr-card { color: var(--rr-color-text); background: var(--rr-color-surface); border: 1px solid var(--rr-color-border); border-radius: var(--rr-radius-lg); box-shadow: var(--rr-shadow-card); }
.metric-grid article, .rr-summary-card { display: grid; gap: 5px; padding: 22px; }
.metric-grid strong, .rr-summary-card__value { font-size: 32px; }
.metric-grid span:last-child, .rr-summary-card__detail { color: var(--rr-color-text-muted); font-size: 13px; line-height: 1.4; }
.metric-label, .rr-summary-card__label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.two-column { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.card, .rr-card { padding: 24px; }
.card-heading, .section-title, .rr-card__header, .rr-page-section__header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.card-heading > :first-child, .section-title > :first-child, .rr-card__header > :first-child, .rr-page-section__header > :first-child { min-width: 0; }
.section-title, .rr-page-section__header { margin: 34px 0 20px; }

.exception-list, .rr-exception-list { display: grid; gap: 18px; }
.exception, .rr-exception-card { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 14px; padding-top: 18px; border-top: 1px solid var(--rr-color-border); }
.exception:first-child, .rr-exception-card:first-child { padding-top: 0; border-top: 0; }
.exception p, .detail-card > p, .posting-row p, .learner-preview p, .rr-card p { color: var(--rr-color-text-muted); line-height: 1.55; }
.link-button, .rr-action-link { padding: 0; border: 0; color: var(--rr-color-brand); background: none; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.step-list, .rr-program-status-list { display: grid; gap: 9px; padding: 0; margin: 0; list-style: none; }
.step-list li, .rr-program-status-row { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 9px; }
.step-list li > span, .rr-program-status-row__index { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; color: var(--rr-color-text-muted); background: var(--rr-color-surface-subtle); font-size: 12px; font-weight: 800; }
.step-list li > div, .rr-program-status-row__body { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex: 1; }
.step-list small, .rr-program-status-row small { color: var(--rr-color-text-muted); }
.step-list .done > span, .rr-program-status-row--current .rr-program-status-row__index { color: var(--rr-color-current); background: var(--rr-color-current-bg); }
.step-list .attention-step, .rr-program-status-row--attention { background: var(--rr-color-attention-bg); }
.step-list .review-step, .rr-program-status-row--review { background: var(--rr-color-review-bg); }

.boundary, .rr-evidence-note { padding-left: 12px; border-left: 3px solid var(--rr-color-border); color: var(--rr-color-text-muted); font-size: 12px; line-height: 1.5; }
.detail-card dl, .posting-row dl, .rr-evidence-list { margin: 20px 0; }
.detail-card dl div, .posting-row dl div, .rr-evidence-list > div { display: grid; grid-template-columns: 145px 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--rr-color-border); }
dt { color: var(--rr-color-text-muted); font-weight: 700; }
dd { margin: 0; }
.callout, .rr-callout { padding: 16px; margin: 18px 0; border: 1px solid var(--rr-color-progress-border); border-radius: var(--rr-radius-md); background: var(--rr-color-brand-soft); }
.callout.warning, .rr-callout--review { border-color: var(--rr-color-review-border); background: var(--rr-color-review-bg); }
.callout p, .rr-callout p { margin-bottom: 0; }

.actions, .rr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
button, .button, .rr-button { appearance: none; min-height: 40px; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--rr-radius-sm); color: var(--rr-color-on-brand); background: var(--rr-color-brand); font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
button:hover:not(:disabled), .button:hover, .rr-button:hover:not(:disabled) { background: var(--rr-color-brand-hover); }
button.secondary, .button.secondary, .rr-button--secondary { color: var(--rr-color-text); background: var(--rr-color-surface-subtle); border-color: var(--rr-color-border); }
button.secondary:hover:not(:disabled), .button.secondary:hover, .rr-button--secondary:hover:not(:disabled) { background: var(--rr-color-border); }
button:disabled, .rr-button:disabled, [aria-disabled="true"] { color: var(--rr-color-disabled-text); background: var(--rr-color-disabled-bg); cursor: not-allowed; }
.rr-document-action { display: inline-flex; align-items: center; gap: 8px; }

.posting-row { display: grid; grid-template-columns: 1fr auto; gap: 30px; margin-bottom: 14px; }
.posting-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 220px; }
.posting-actions .button, .posting-actions button { text-align: center; }
.muted-row { box-shadow: none; }
.lifecycle-card ol { padding: 0; margin: 18px 0; list-style: none; }
.lifecycle-card li { position: relative; padding: 0 0 22px 28px; border-left: 2px solid var(--rr-color-border); }
.lifecycle-card li::before { position: absolute; top: 3px; left: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--rr-color-border-strong); content: ""; }
.lifecycle-card li.complete::before { background: var(--rr-color-current); }
.lifecycle-card li.current::before { background: var(--rr-color-attention); box-shadow: 0 0 0 5px var(--rr-color-attention-bg); }
.lifecycle-card li:last-child { border-color: transparent; }
.lifecycle-card small { display: block; margin-top: 3px; color: var(--rr-color-text-muted); }

.detail-card label, .rr-field { display: grid; gap: 6px; margin: 16px 0; font-weight: 700; }
select, input, textarea, .rr-input { width: 100%; padding: 11px; border: 1px solid var(--rr-color-border-strong); border-radius: var(--rr-radius-sm); color: var(--rr-color-text); background: var(--rr-color-surface); }
::placeholder { color: var(--rr-color-text-muted); opacity: 1; }
.language-note { display: flex; justify-content: space-between; padding: 12px; margin: 16px 0; border-radius: var(--rr-radius-sm); background: var(--rr-color-brand-soft); }
.generated-link { display: grid; gap: 6px; padding: 14px; margin-top: 16px; border: 1px solid var(--rr-color-current-border); border-radius: var(--rr-radius-md); background: var(--rr-color-current-bg); }
.generated-link code { overflow-wrap: anywhere; }
.generated-link span { color: var(--rr-color-text-muted); font-size: 12px; }
.entitlement { display: flex; align-items: baseline; gap: 10px; margin: 18px 0; }
.entitlement strong { font-size: 44px; }
.entitlement span { color: var(--rr-color-text-muted); }
.learner-preview { margin-top: 20px; }
.locale-choice, .rr-language-selector { display: flex; gap: 8px; margin: 18px 0; }
.locale, .rr-language-selector button { color: var(--rr-color-text); background: var(--rr-color-surface-subtle); border-color: var(--rr-color-border); }
.locale.active, .locale[aria-pressed="true"], .rr-language-selector button[aria-pressed="true"] { color: var(--rr-color-on-brand); background: var(--rr-color-brand); border-color: transparent; }
.learner-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.learner-fields label { display: grid; gap: 6px; font-weight: 700; }
.learner-fields button { min-height: 43px; }

.rr-detail { margin-top: 12px; border-top: 1px solid var(--rr-color-border); }
.rr-detail summary { padding: 14px 0; color: var(--rr-color-brand); font-weight: 800; cursor: pointer; }
.rr-detail__body { padding-bottom: 14px; color: var(--rr-color-text-muted); line-height: 1.55; }
.rr-state { display: grid; justify-items: start; gap: 8px; padding: 20px; border: 1px dashed var(--rr-color-border-strong); border-radius: var(--rr-radius-md); color: var(--rr-color-text-muted); background: var(--rr-color-surface); }
.rr-state--error { border-style: solid; border-color: var(--rr-color-error-border); color: var(--rr-color-error); background: var(--rr-color-error-bg); }
.rr-loading-bar { width: min(100%, 260px); height: 8px; overflow: hidden; border-radius: var(--rr-radius-pill); background: var(--rr-color-surface-subtle); }
.rr-loading-bar::after { display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--rr-color-brand); content: ""; animation: rr-loading 1.2s ease-in-out infinite alternate; }
.rr-ask-entry { display: inline-flex; align-items: center; gap: 8px; color: var(--rr-color-text); background: var(--rr-color-surface); border-color: var(--rr-color-border); box-shadow: var(--rr-shadow-card); }
.rr-source { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--rr-color-border); border-radius: var(--rr-radius-md); background: var(--rr-color-surface-subtle); }
.rr-source__meta { color: var(--rr-color-text-muted); font-size: 12px; }
.rr-training-status { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rr-color-border); }
.rr-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--rr-color-border); border-radius: var(--rr-radius-md); background: var(--rr-color-surface); }
.rr-table { width: 100%; min-width: 780px; border-collapse: collapse; }
.rr-table th, .rr-table td { padding: 12px 14px; border-bottom: 1px solid var(--rr-color-border); text-align: left; vertical-align: top; }
.rr-table th { color: var(--rr-color-text-muted); background: var(--rr-color-surface-subtle); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.rr-table tr:last-child td { border-bottom: 0; }
.rr-diagram { padding: 16px; border: 1px solid var(--rr-color-border); border-radius: var(--rr-radius-md); background: var(--rr-color-surface); color: var(--rr-color-text); }

dialog { max-width: 560px; padding: 28px; border: 1px solid var(--rr-color-border); border-radius: var(--rr-radius-lg); color: var(--rr-color-text); background: var(--rr-color-surface-raised); box-shadow: var(--rr-shadow-dialog); }
dialog::backdrop { background: var(--rr-overlay); }
.dialog-close { float: right; min-height: auto; padding: 0 0 12px 20px; color: var(--rr-color-text); background: transparent; font-size: 24px; }

@keyframes rr-loading { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

@media (max-width: 980px) {
  .topbar, .rr-app-shell__header { gap: 18px; }
  .preview-note span { display: none; }
}

@media (max-width: 820px) {
  .topbar, .rr-app-shell__header { flex-wrap: wrap; }
  .hero, .rr-page-header { align-items: start; }
  .hero, .two-column, .posting-row { display: grid; grid-template-columns: 1fr; }
  .metric-grid, .rr-summary-grid { grid-template-columns: 1fr; }
  .hero-status { justify-items: start; text-align: left; }
  .rr-facility-selector { display: none; }
  .rr-shell-tools { margin-left: auto; }
  .learner-fields { grid-template-columns: 1fr; }
  .posting-actions { min-width: 0; }
  .detail-card dl div, .posting-row dl div, .rr-evidence-list > div { grid-template-columns: 1fr; gap: 4px; }
  .step-list li > div, .rr-program-status-row__body { align-items: start; flex-direction: column; gap: 2px; }
}

@media (max-width: 520px) {
  .topbar, .rr-app-shell__header { gap: 12px; padding-inline: 14px; }
  .preview-note { order: 3; width: 100%; }
  .preview-note span { display: inline; }
  .appearance-selector button, .rr-appearance-selector button { padding-inline: 7px; }
  main, .rr-app-shell__main { padding-top: 26px; padding-inline: 14px; }
  .card, .rr-card { padding: 19px; }
  .exception, .rr-exception-card { grid-template-columns: 1fr; }
  .card-heading, .section-title, .rr-card__header, .rr-page-section__header { align-items: start; flex-direction: column; }
  .rr-training-status { grid-template-columns: minmax(0, 1fr) auto; }
}

@media print {
  .topbar, .tabs, .appearance-selector, .rr-appearance-selector, .rr-ask-entry { display: none !important; }
  :root { color-scheme: light; --rr-color-canvas: #ffffff; --rr-color-surface: #ffffff; --rr-color-text: #111111; --rr-color-text-muted: #444444; --rr-color-border: #bbbbbb; --rr-shadow-card: none; }
  main, .rr-app-shell__main { max-width: none; padding: 0; }
  .card, .rr-card { break-inside: avoid; }
}