/* ==========================================================================
   CMS Training — Redesign layer (staging release R1, built on V9.12.104)
   Loaded after styles.css, site-extras.css and production-dark.css.
   Visual only: no element is hidden that carries a feature, and no behavior
   depends on this file. Remove the <link> to roll the look back.
   ========================================================================== */

/* ---------- Type: self-hosted Inter (OFL, see assets/fonts) ---------- */
@font-face{font-family:"CMS Inter";src:url("/assets/fonts/inter-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"CMS Inter";src:url("/assets/fonts/inter-medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"CMS Inter";src:url("/assets/fonts/inter-semibold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"CMS Inter";src:url("/assets/fonts/inter-bold.woff") format("woff");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"CMS Inter Display";src:url("/assets/fonts/inter-display-semibold.woff") format("woff");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"CMS Inter Display";src:url("/assets/fonts/inter-display-bold.woff") format("woff");font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --r-bg:#051521; --r-bg-2:#071c2b;
  --r-surface-1:#0a2232; --r-surface-2:#0d2a3d; --r-surface-3:#123449;
  --r-line:rgba(170,195,210,.15); --r-line-2:rgba(170,195,210,.24);
  --r-ink:#f4f1ea; --r-ink-2:#d2dce2; --r-ink-3:#a3b5c0;
  --r-gold:#efbf63; --r-gold-deep:#d9a33e; --r-gold-soft:rgba(239,191,99,.12);
  --r-blue:#64b4df; --r-green:#7bd0a1; --r-red:#ea9aa0;
  --r-radius:20px; --r-radius-2:14px;
  --r-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 24px 48px -32px rgba(0,0,0,.65);
  --cms-ui-font:"CMS Inter",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --cms-display-font:"CMS Inter Display","CMS Inter",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
/* The dark theme defines its fonts on body.demo-one; restate them there so this layer wins. */
html body,html body.demo-one,html body.production-dark{
  --cms-ui-font:"CMS Inter",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --cms-display-font:"CMS Inter Display","CMS Inter",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--cms-ui-font);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body,body.demo-one{background:var(--r-bg)}
button,input,select,textarea{font-family:inherit}

/* One heading family everywhere (the serif lesson titles are retired). */
.demo-one h1,.demo-one h2,.demo-one .lesson-heading h2,.demo-one .lesson-heading h1,
.production-dark h1,.production-dark h2,.auth-card h1,.auth-card h2,.welcome-identity h1,.welcome-identity h2{
  font-family:var(--cms-display-font)!important;letter-spacing:-.022em!important;font-weight:650!important}
.demo-one h3,.demo-one h4{font-family:var(--cms-ui-font)!important;letter-spacing:-.01em}

/* Keyboard focus that is always visible on dark surfaces. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--r-gold)!important;outline-offset:2px!important;border-radius:10px}

/* ---------- App frame ---------- */
.demo-one .v9-main,.demo-one .main-content{background:transparent}
.demo-one .page{color:var(--r-ink)}
.demo-one .eyebrow,.demo-one .card-label,.demo-one .lesson-tag{color:var(--r-gold)!important;letter-spacing:.14em}

/* ---------- Lesson page ---------- */
.demo-one .lesson-page .lesson-heading{max-width:1180px;margin-left:auto;margin-right:auto}
.demo-one .lesson-page .lesson-heading h2,.demo-one .lesson-page .lesson-heading h1{font-size:clamp(34px,4.2vw,52px)!important;line-height:1.05!important;color:var(--r-ink)!important;margin-top:6px}
.demo-one .lesson-page .lesson-heading p{color:var(--r-ink-2)!important}
.demo-one .lesson-page .duration{color:var(--r-ink)!important;background:var(--r-surface-3)!important;border:1px solid var(--r-line-2)!important}
.demo-one .lesson-outcome{border-radius:var(--r-radius-2)!important;background:linear-gradient(90deg,rgba(239,191,99,.10),rgba(239,191,99,.03))!important;border:1px solid rgba(239,191,99,.28)!important;border-left:4px solid var(--r-gold)!important}
.demo-one .lesson-outcome *{color:var(--r-ink)!important}
.demo-one .lesson-outcome strong,.demo-one .lesson-outcome b,.demo-one .lesson-outcome span:first-child{color:var(--r-gold)!important}

.demo-one .v9-lesson-grid{max-width:1180px;margin-left:auto!important;margin-right:auto!important}

/* Cards: one surface system. */
.demo-one .lesson-page .content-card,.demo-one .lesson-page .learning-mode,.demo-one .lesson-page .interactive-lab,
.demo-one .lesson-page .knowledge-check,.demo-one .lesson-page .screenshot-card,.demo-one .lesson-page .supervisor-challenge{
  background:linear-gradient(180deg,var(--r-surface-2),var(--r-surface-1))!important;border:1px solid var(--r-line)!important;border-radius:var(--r-radius)!important;box-shadow:var(--r-shadow)!important;color:var(--r-ink)!important}
.demo-one .lesson-page .content-card h3,.demo-one .lesson-page .learning-mode h3,.demo-one .lesson-page .interactive-lab h3,
.demo-one .lesson-page .knowledge-check h3,.demo-one .lesson-page .screenshot-card h3,.demo-one .lesson-page .content-card h4,
.demo-one .lesson-page .learning-mode h4{color:var(--r-ink)!important}
.demo-one .lesson-page :is(.content-card,.learning-mode,.interactive-lab) :is(p,li):not(.narration-stage *){color:var(--r-ink-2)!important}

/* Inner tiles that inherited light-theme white backgrounds (acronym key, distinctions, mini cards, term grid). */
.demo-one .lesson-page .compare-grid>div,.demo-one .lesson-page .compare-grid>article,.demo-one .lesson-page .mini-card,
.demo-one .lesson-page .term-grid>*,.demo-one .lesson-page .three-up>*,.demo-one .lesson-page .key-item,.demo-one .lesson-page .report-scenario,
.demo-one .lesson-page .cms-area,.demo-one .lesson-page .callout{
  background:var(--r-surface-3)!important;border:1px solid var(--r-line)!important;border-radius:var(--r-radius-2)!important;color:var(--r-ink)!important;box-shadow:none!important}
.demo-one .lesson-page .compare-grid>* *,.demo-one .lesson-page .mini-card *,.demo-one .lesson-page .term-grid>* *,.demo-one .lesson-page .three-up>* *,
.demo-one .lesson-page .key-item *,.demo-one .lesson-page .report-scenario *,.demo-one .lesson-page .cms-area *,.demo-one .lesson-page .callout *{color:inherit}
.demo-one .lesson-page .compare-grid p,.demo-one .lesson-page .mini-card p,.demo-one .lesson-page .term-grid p,.demo-one .lesson-page .three-up p,.demo-one .lesson-page .callout p,.demo-one .lesson-page .report-scenario p{color:var(--r-ink-2)!important}
.demo-one .lesson-page .compare-grid strong,.demo-one .lesson-page .compare-grid b,.demo-one .lesson-page .compare-label{color:var(--r-gold)!important}

/* Knowledge checks: the question is the most important text on the card. */
.demo-one .knowledge-check h3{font-size:clamp(20px,2.1vw,25px)!important;line-height:1.3!important;font-weight:650!important}
.demo-one .answer-list button,.demo-one .answer-list label,.demo-one .supervisor-choice-list button{
  background:var(--r-surface-3)!important;color:var(--r-ink)!important;border:1px solid var(--r-line-2)!important;border-radius:12px!important;min-height:48px;text-align:left;transition:border-color .2s,background .2s,transform .2s}
.demo-one .answer-list button:hover,.demo-one .supervisor-choice-list button:hover{border-color:rgba(239,191,99,.6)!important;background:#16405a!important}
.demo-one .answer-list button.correct,.demo-one .answer-list button[aria-pressed="true"].correct,.demo-one .answer-list .correct{border-color:rgba(123,208,161,.8)!important;background:rgba(123,208,161,.12)!important}
.demo-one .answer-list button.incorrect,.demo-one .answer-list .wrong,.demo-one .answer-list .incorrect{border-color:rgba(234,154,160,.8)!important;background:rgba(234,154,160,.10)!important}
.demo-one .feedback,.demo-one .choice-feedback,.demo-one .supervisor-feedback{color:var(--r-ink)!important}
.demo-one .feedback *,.demo-one .choice-feedback *{color:inherit}

/* Captions on screenshots and other small notes. */
.demo-one .image-caption,.demo-one .image-caption *,.demo-one .caption-access-note{color:var(--r-ink-2)!important}
.demo-one .caption-access-note{display:block;margin-top:4px}

/* Real CMS screenshots: give them room so they can actually be read. */
.demo-one .lesson-page .screen-grid{display:grid!important;grid-template-columns:1fr!important;gap:18px!important}
.demo-one .lesson-page .screenshot-card{padding:22px 24px 20px!important}
.demo-one .lesson-page .screenshot-title-row{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:8px 16px!important}
.demo-one .lesson-page .screenshot-title-row h3,.demo-one .lesson-page .screenshot-title-row h4{font-size:20px!important;line-height:1.25!important;margin:0!important;flex:1 1 auto}
.demo-one .lesson-page .screenshot-title-row>span,.demo-one .lesson-page .screenshot-title-row small{position:static!important;flex:0 0 auto;white-space:nowrap}
.demo-one .lesson-page .image-zoom{display:block;width:100%;border-radius:12px!important;overflow:hidden;background:#fff!important;border:1px solid var(--r-line-2)!important;margin-top:14px}
.demo-one .lesson-page .image-zoom img{display:block;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}

/* Report screenshots with large empty white areas: crop the preview to the report content (click opens the full capture). */
.demo-one .lesson-page .image-zoom img[src$="screenshots/08.png"]{aspect-ratio:1670/300;object-fit:cover!important;object-position:50% 0!important}
.demo-one .lesson-page .image-zoom img[src$="screenshots/15.png"]{aspect-ratio:1672/300;object-fit:cover!important;object-position:50% 0!important}
.demo-one .lesson-page .image-zoom img[src$="screenshots/20.png"]{aspect-ratio:1678/260;object-fit:cover!important;object-position:50% 0!important}
.demo-one .lesson-page .image-zoom img[src$="screenshots/24.png"]{aspect-ratio:1670/300;object-fit:cover!important;object-position:50% 0!important}
.demo-one .lesson-page .image-zoom img[src$="screenshots/10.png"]{aspect-ratio:1671/600;object-fit:cover!important;object-position:50% 0!important}

/* Interactive simulators: values must be readable before and after interaction. */
.demo-one .lesson-page .rt-agent strong,.demo-one .lesson-page .interactive-lab [class*="metric"] strong{color:var(--r-ink)!important;opacity:1!important}
.demo-one .lesson-page .split-icon-node strong,.demo-one .lesson-page .split-track-label b,.demo-one .lesson-page .split-track-label span{color:var(--r-ink-2)!important;opacity:1!important}

/* Narration stage: inactive items stay legible (dimmed, not invisible); the active item still leads. */
.demo-one .narration-stage .motion-node strong,.demo-one .narration-stage .term-chip b,.demo-one .narration-stage .state-map-node b,
.demo-one .narration-stage .state-map-node small,.demo-one .narration-stage .historical-grid small,.demo-one .narration-stage .gran-tabs button,
.demo-one .narration-stage .evidence-arrow span,.demo-one .narration-stage .state-notes span,.demo-one .narration-stage .cms-recorder,
.demo-one .narration-stage .cms-recorder span,.demo-one .narration-stage .question-card small,.demo-one .narration-stage .practice-flow b{color:#bccbd3!important;opacity:1!important}
.demo-one .narration-stage .motion-node.active strong,.demo-one .narration-stage .term-chip.active b,.demo-one .narration-stage .state-map-node.active b{color:var(--r-ink)!important}
.demo-one .narration-stage .cms-recorder.active,.demo-one .narration-stage .cms-recorder.active span{color:var(--r-gold)!important}

/* Idle stage items: keep them readable while the active one leads with gold/white. */
.demo-one .narration-stage :is(.orientation-point,.motion-question,.motion-node,.term-chip,.metric-dial,.historical-grid>div,.practice-flow>span,.state-map-node,.split-icon-node,.mode-card,.timeline-event,.rtmenu-card,.keep-card){opacity:1!important}
.demo-one .narration-stage :is(.state-map-heading,.state-map-alt-label,.state-panel,.attendance-label,.people-label,.group-report,.admin-results-head,.admin-title,.rona-agent,.question-card) small{color:#b4c4cd!important}

/* Footer: one clear row of actions. */
.demo-one .lesson-footer{border-top:1px solid var(--r-line)!important;padding-top:22px!important;gap:12px}

/* Wide screens: the "In this lesson" rail becomes a sticky side column instead of a duplicate block at the end. */
@media (min-width:1280px){
  .demo-one .v9-lesson-grid{display:grid!important;grid-template-columns:minmax(0,1fr) 264px!important;gap:28px!important;align-items:start!important}
  .demo-one .v9-lesson-rail{position:sticky!important;top:88px!important;display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-top:0!important}
  .demo-one .v9-rail-card,.demo-one .v9-rail-progress,.demo-one .v9-rail-actions{background:var(--r-surface-1)!important;border:1px solid var(--r-line)!important;border-radius:16px!important;padding:16px!important}
  .demo-one .v9-rail-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
}
.demo-one .v9-rail-card ol{margin:10px 0 0;padding:0;list-style:none}
.demo-one .v9-rail-card li a{display:grid;grid-template-columns:30px 1fr;gap:8px;padding:9px 6px;border-radius:10px;color:var(--r-ink-2)!important;text-decoration:none;font-size:13.5px;line-height:1.35;border-bottom:0!important}
.demo-one .v9-rail-card li a:hover{background:var(--r-surface-3);color:var(--r-ink)!important}
.demo-one .v9-rail-card li b{color:var(--r-gold)!important;font-size:11.5px;letter-spacing:.08em;padding-top:2px}
.demo-one .v9-rail-progress span{color:var(--r-ink-3)!important;font-size:11px;letter-spacing:.14em}
.demo-one .v9-rail-progress strong{display:block;color:var(--r-ink)!important;margin:4px 0 10px}

/* ---------- Watch lesson video (optional companion; never awards completion) ---------- */
.demo-one .lesson-page .lesson-video-card{margin:0 0 22px;border-radius:var(--r-radius);border:1px solid var(--r-line);background:linear-gradient(180deg,var(--r-surface-2),var(--r-surface-1));box-shadow:var(--r-shadow);overflow:hidden;padding:0!important}
.demo-one .lesson-page .lesson-video-card>summary{list-style:none;cursor:pointer;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 22px!important;margin:0!important;color:var(--r-ink)!important;font:inherit!important;text-transform:none!important;letter-spacing:0!important;background:none!important;border:0!important}
.demo-one .lesson-page .lesson-video-card>summary::-webkit-details-marker,.demo-one .lesson-page .lesson-video-card>summary::marker{display:none;content:""}
.demo-one .lesson-page .lesson-video-card>summary::before,.demo-one .lesson-page .lesson-video-card>summary::after{content:none!important;display:none!important}
.demo-one .lesson-page .lesson-video-card .lv-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--r-gold-soft);border:1px solid rgba(239,191,99,.45);color:var(--r-gold)!important}
.demo-one .lesson-page .lesson-video-card .lv-icon svg{width:16px;height:16px;margin-left:2px}
.demo-one .lesson-page .lesson-video-card .lv-copy{display:block;min-width:0}
.demo-one .lesson-page .lesson-video-card .lv-copy small{display:block;font-size:11px!important;font-weight:700!important;letter-spacing:.14em!important;color:var(--r-gold)!important;line-height:1.4}
.demo-one .lesson-page .lesson-video-card .lv-copy strong{display:block;font-size:18px!important;font-weight:650!important;line-height:1.3;color:var(--r-ink)!important;margin-top:2px}
.demo-one .lesson-page .lesson-video-card .lv-copy span{display:block;font-size:14px!important;font-weight:400!important;line-height:1.45;color:var(--r-ink-2)!important;margin-top:3px}
.demo-one .lesson-page .lesson-video-card .lv-meta{font-size:13px!important;font-weight:600;color:var(--r-ink)!important;border:1px solid var(--r-line-2);border-radius:999px;padding:6px 12px;white-space:nowrap}
.demo-one .lesson-page .lesson-video-card[open] .lv-meta{background:var(--r-surface-3)}
.demo-one .lesson-page .lesson-video-card>summary:hover .lv-icon{background:rgba(239,191,99,.2)}
.demo-one .lesson-page .lesson-video-card .lv-body{padding:0 22px 20px}
.demo-one .lesson-page .lesson-video-card .lv-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#04121c;border:1px solid var(--r-line-2)}
.demo-one .lesson-page .lesson-video-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#04121c}
.demo-one .lesson-page .lesson-video-card .lv-note{margin:12px 0 0;font-size:13.5px!important;line-height:1.5;color:var(--r-ink-2)!important}
.demo-one .lesson-page .lesson-video-card .lv-note a{color:var(--r-gold)!important}
@media (max-width:620px){
  .demo-one .lesson-page .lesson-video-card>summary{grid-template-columns:auto minmax(0,1fr);padding:16px!important;gap:12px}
  .demo-one .lesson-page .lesson-video-card .lv-meta{grid-column:2;justify-self:start}
  .demo-one .lesson-page .lesson-video-card .lv-copy strong{font-size:16px!important}
  .demo-one .lesson-page .lesson-video-card .lv-body{padding:0 12px 14px}
}

/* ---------- My Training (dashboard) ---------- */
.demo-one .demo1-landing-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--r-line)!important;
  background:radial-gradient(900px 520px at 85% 10%,rgba(100,180,223,.14),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(239,191,99,.07),transparent 60%),var(--r-bg-2)!important}
.demo-one .demo1-hero-overlay{background:linear-gradient(90deg,var(--r-bg-2) 0%,rgba(7,28,43,.94) 42%,rgba(7,28,43,.35) 72%,rgba(7,28,43,.15) 100%)!important}
.demo-one .demo1-hero-image{opacity:1!important}
.demo-one .demo1-hero-image img{object-fit:cover!important;object-position:0% 0%!important;filter:saturate(.9) brightness(.92)}
@media (max-width:899px){.demo-one .demo1-hero-image{display:none!important}.demo-one .demo1-hero-overlay{background:transparent!important}}
@media (min-width:900px){
  .demo-one .demo1-hero-image{left:auto!important;right:-2%!important;width:56%!important;top:44px!important;bottom:-60px!important;border-radius:18px 0 0 0;overflow:hidden;box-shadow:-30px 30px 80px -30px rgba(0,0,0,.7);border:1px solid var(--r-line-2)}
  .demo-one .demo1-hero-overlay{background:linear-gradient(90deg,var(--r-bg-2) 0%,rgba(7,28,43,.97) 40%,rgba(7,28,43,.55) 58%,rgba(7,28,43,.08) 80%)!important}
}
.demo-one .demo1-hero-content h2{font-size:clamp(42px,6vw,76px)!important;line-height:1!important}
.demo-one .demo1-hero-content p{color:var(--r-ink-2)!important;max-width:560px}
.demo-one .demo1-progress-summary strong{color:var(--r-ink)!important}

.demo-one .demo1-lesson-grid{gap:18px!important}
.demo-one .demo1-lesson-tile{background:var(--r-surface-1)!important;border:1px solid var(--r-line)!important;border-radius:18px!important;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important}
.demo-one .demo1-lesson-tile:hover:not([aria-disabled="true"]){transform:translateY(-3px);border-color:rgba(239,191,99,.55)!important;box-shadow:0 22px 40px -26px rgba(0,0,0,.8)!important}
.demo-one .demo1-tile-image{aspect-ratio:3/2!important;height:auto!important;background:#041620!important}
.demo-one .demo1-tile-image img{object-fit:cover!important;object-position:50% 50%!important;filter:none!important;opacity:1!important}
.demo-one .demo1-tile-shade{background:linear-gradient(180deg,rgba(4,22,32,0) 55%,rgba(4,22,32,.75) 100%)!important}
.demo-one .demo1-tile-copy small{color:var(--r-gold)!important}
.demo-one .demo1-tile-copy strong{color:var(--r-ink)!important}
.demo-one .demo1-tile-copy span{color:var(--r-ink-3)!important}

/* ---------- Sign in / welcome ---------- */
.production-dark .auth-story{background:radial-gradient(520px 420px at 18% 12%,rgba(239,191,99,.10),transparent 62%),radial-gradient(640px 520px at 100% 100%,rgba(100,180,223,.16),transparent 60%),linear-gradient(160deg,#08263a 0%,#041620 70%)!important}
.welcome-identity h1,.welcome-identity h2,.auth-welcome h1,.auth-welcome h2{font-family:var(--cms-display-font)!important}

/* ---------- Resources and reference pages ---------- */
.demo-one #resources h2,.demo-one #topics h2,.demo-one #reference h2,.demo-one #help h2,.demo-one #reports h2{color:var(--r-ink)!important}

/* Quick Reference: dark cards on screen; print keeps the original light, ink-friendly table. */
@media screen{
  .demo-one #reference .quick-ref tr{background:var(--r-surface-2)!important;border:1px solid var(--r-line)!important;box-shadow:none!important}
  .demo-one #reference .quick-ref td{color:var(--r-ink)!important}
  .demo-one #reference .quick-ref td::before{color:var(--r-ink-3)!important}
  .demo-one #reference .quick-ref code{background:rgba(100,180,223,.12)!important;color:#cfe6f3!important;border:1px solid rgba(100,180,223,.25)!important}
  .demo-one #reference .reference-rules>*{background:var(--r-surface-2)!important;border:1px solid var(--r-line)!important}
}

/* ---------- Admin / manager / operator ---------- */
.admin-screen,.operator-screen,.manager-screen{font-family:var(--cms-ui-font)}
.admin-panel{border-radius:var(--r-radius)!important}
.agent-table th{letter-spacing:.06em}
/* Tables scroll sideways instead of truncating; the Actions column stays pinned and visible on any width. */
.production-dark .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-color:rgba(170,195,210,.35) transparent}
.production-dark .table-wrap>table{min-width:max(100%,1060px)}
.production-dark .table-wrap td span,.production-dark .table-wrap td b,.production-dark .table-wrap td em{max-width:none!important;overflow:visible!important;text-overflow:clip!important;white-space:nowrap}
.production-dark .table-wrap th.actions-col,.production-dark .table-wrap td.actions-col,
.production-dark .table-wrap th:last-child,.production-dark .table-wrap td:last-child{position:sticky;right:0;z-index:2;background:#0b2537!important;box-shadow:-12px 0 16px -12px rgba(0,0,0,.6)}
.production-dark .table-wrap td:last-child{white-space:nowrap}
@media (max-width:760px){
  .production-dark .table-wrap>table{min-width:860px}
  .production-dark .table-wrap td:last-child{white-space:normal;width:204px;min-width:204px;max-width:204px}
  .production-dark .table-wrap td:last-child>*{display:inline-flex!important;width:96px;justify-content:center;margin:2px!important;padding:6px 4px!important;font-size:11px!important;white-space:nowrap}
  .production-dark .table-wrap td:last-child>div{width:auto;display:grid!important;grid-template-columns:96px 96px;gap:4px}
  .production-dark .table-wrap td:last-child>div>*{width:96px;margin:0!important;padding:6px 4px!important;font-size:11px!important}
}

/* ---------- Simulators: dark surfaces instead of light-theme white islands ---------- */
.demo-one .lesson-page .call-stage{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important}
@media (max-width:900px){.demo-one .lesson-page .call-stage{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:520px){.demo-one .lesson-page .call-stage{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.demo-one .lesson-page .sim-node strong{color:var(--r-ink)!important}
.demo-one .lesson-page .sim-node{background:var(--r-surface-3)!important;border:1px solid var(--r-line-2)!important;color:var(--r-ink)!important;box-shadow:none!important;min-width:0!important}
.demo-one .lesson-page .sim-node *{color:inherit}
.demo-one .lesson-page .sim-node small,.demo-one .lesson-page .sim-node span:not(.node-glyph){color:var(--r-ink-3)!important}
.demo-one .lesson-page .sim-node .node-glyph{background:rgba(100,180,223,.14)!important;color:var(--r-blue)!important}
.demo-one .lesson-page .sim-node.active,.demo-one .lesson-page .sim-node.is-active,.demo-one .lesson-page .sim-node.current{border-color:var(--r-gold)!important;background:#173d55!important;box-shadow:0 0 0 3px rgba(239,191,99,.18)!important}
.demo-one .lesson-page .sim-node.done,.demo-one .lesson-page .sim-node.passed,.demo-one .lesson-page .sim-node.complete{border-color:rgba(123,208,161,.55)!important}
.demo-one .lesson-page .sim-status{background:var(--r-surface-3)!important;border:1px solid var(--r-line-2)!important;color:var(--r-ink)!important}
.demo-one .lesson-page .sim-status *{color:inherit}
.demo-one .lesson-page .sim-status p,.demo-one .lesson-page .sim-status span{color:var(--r-ink-2)!important}
.demo-one .lesson-page .sim-event-log{color:var(--r-ink-2)!important}

/* ---------- Light-theme islands inside lessons -> dark surfaces (found by the contrast audit) ---------- */
.demo-one .lesson-page :is(.metric-grid>article,.report-path-grid>article,.timeline-metrics>article,.lens-display,.rt-insight,.timeline-story,
  .permission-skill,.rona-step,.skill-shelf,.learning-key,.fake-window-bar,.metric-question-grid>button){
  background:var(--r-surface-3)!important;border:1px solid var(--r-line-2)!important;box-shadow:none!important;color:var(--r-ink)!important}
.demo-one .lesson-page :is(.compare-grid>*,.mini-card,.term-grid>*,.three-up>*,.key-item,.report-scenario,.cms-area,.callout,
  .metric-grid>article,.report-path-grid>article,.timeline-metrics>article,.lens-display,.rt-insight,.timeline-story,.permission-skill,
  .rona-step,.skill-shelf,.learning-key,.fake-window-bar,.metric-question-grid>button) :is(strong,b,h3,h4,h5,em,label){color:var(--r-ink)!important}
.demo-one .lesson-page :is(.compare-grid>*,.mini-card,.term-grid>*,.three-up>*,.key-item,.report-scenario,.cms-area,.callout,
  .metric-grid>article,.report-path-grid>article,.timeline-metrics>article,.lens-display,.rt-insight,.timeline-story,.permission-skill,
  .rona-step,.skill-shelf,.learning-key,.fake-window-bar,.metric-question-grid>button) :is(p,li,span,small,i,div,code):not(.mini-icon):not(.cms-area-icon):not(.skill-chip):not(.metric-code):not(.rona-step>span){color:var(--r-ink-2)!important}
.demo-one .lesson-page :is(.compare-grid,.term-grid,.three-up) :is(strong,b):first-child{color:var(--r-gold)!important}
.demo-one .lesson-page .rona-step.accent{border-color:rgba(239,191,99,.5)!important}
.demo-one .lesson-page .rona-step.accent2{border-color:rgba(234,154,160,.55)!important}
.demo-one .lesson-page .learning-key{border-radius:var(--r-radius)!important}
/* Small light badges keep their light fill, with dark text. */
.demo-one .lesson-page :is(.mini-icon,.cms-area-icon,.skill-chip,.metric-code,.mode-flag){color:#0b2637!important}
.demo-one .lesson-page :is(.access-view-btn,.lens-btn,.scenario-btn):not(.active):not([aria-pressed="true"]){color:#0b2637!important}
/* Real-Time mock report inside the narration stage stays light (it imitates a CMS report), with darker secondary text. */
.demo-one .narration-stage .live-report small,.demo-one .narration-stage .live-report i,.demo-one .narration-stage .live-report span{color:#40525d!important}
.demo-one .lesson-page .rt-agent small,.demo-one .lesson-page .rt-clock,.demo-one .lesson-page .rt-clock strong{color:var(--r-ink-2)!important}

/* Remaining muted labels lifted to at least 4.5:1 (from the audit). */
.demo-one .narration-stage .orientation-point small,.demo-one .narration-stage .motion-question small,.demo-one .narration-stage .orientation-point b{color:#bccbd3!important}
.demo-one .narration-stage .motion-question strong{color:var(--r-gold)!important}
.demo-one .narration-stage .live-head .live-clock{color:#c9d5dc!important}
.demo-one .narration-stage :is(.split-track-label,.split-icon-node) :is(b,span,strong){color:#dfe7ec!important}
.demo-one .lesson-page :is(.access-explain,.access-explain strong){color:var(--r-ink-2)!important}
.demo-one .lesson-page .access-explain strong{color:var(--r-ink)!important}
.demo-one .lesson-page :is(.state-concept b,.agent-state-monitor small,.console-head small,.premium-action-grid small,.call-type-btn small,.route-evidence span,.rona-phone small,.realtime-lab article span,.monitor-meta,.workspace-label){color:#aebfc9!important}
.demo-one .lesson-page .rona-phone strong{color:var(--r-ink)!important}
.demo-one .lesson-page .timeline-time strong{color:var(--r-ink)!important}
.demo-one .lesson-page .rona-step>span{color:#0b2637!important}
.demo-one .lesson-page .call-token{background:#07607b!important;color:#fff!important}
.demo-one #reference p{color:var(--r-ink-2)!important}

/* ---------- Retire the serif display face everywhere (generated from every rule that set Georgia) ---------- */
html .credential-modal-card h2,
html .demo-one .admin-v913 .admin-results-head strong,
html .demo-one .agent-state-monitor>strong,
html .demo-one .attendance-v913 .attendance-label strong,
html .demo-one .course-name,
html .demo-one .demo-home-title,
html .demo-one .demo-page-head h2,
html .demo-one .demo1-dialog h2,
html .demo-one .demo1-hero-content h2,
html .demo-one .demo1-preview-copy h2,
html .demo-one .demo1-preview-number,
html .demo-one .demo1-section-heading h3,
html .demo-one .demo1-tile-number,
html .demo-one .groups-v913 .group-folder b,
html .demo-one .groups-v913 .people-label strong,
html .demo-one .help-page-head h2,
html .demo-one .keep-center,
html .demo-one .lesson-heading h2,
html .demo-one .motion-core,
html .demo-one .motion-question,
html .demo-one .orientation-v913 .motion-core>b,
html .demo-one .orientation-v913 .motion-question strong,
html .demo-one .path-legend-copy strong,
html .demo-one .polished-help-card h3,
html .demo-one .polished-support-strip .support-strip-icon,
html .demo-one .polished-support-strip h3,
html .demo-one .practice-step strong,
html .demo-one .premium-sim-header h3,
html .demo-one .premium-strip-head strong,
html .demo-one .question-card strong,
html .demo-one .resource-hub-copy strong,
html .demo-one .resource-hub-icon,
html .demo-one .rona-history-v913 .cause-card strong,
html .demo-one .rona-history-v913 .evidence-card strong,
html .demo-one .split-evidence strong,
html .demo-one .state-value,
html .demo-one .term-center,
html .demo-one .term-motion-v913 .term-center>b,
html .demo-one .topic-hub-heading h2,
html .exec-overview-header h2,
html .feedback-stats strong,
html .production-dark .admin-nav-brand strong,
html .production-dark .admin-topbar h1,
html .production-dark .admin-welcome-row h2,
html .production-dark .auth-card h1,
html .production-dark .auth-story h2,
html .production-dark .auth-story-brand strong,
html .production-dark .auth-welcome.branded h1,
html .production-dark .auth-welcome:not(.branded) h1,
html .production-dark .editor-head h2,
html .production-dark .operator-hero h2,
html .production-dark .production-page-head h2,
html .production-dark .production-progress-copy h3,
html .production-dark .production-progress-num,
html .production-dark .production-progress-orb strong,
html .production-dark .production-progress-panel h3,
html .production-dark .unified-brand>div strong,
html .production-dark .wizard-confirm h3,
html .production-dark .wizard-head h2,
html .production-progress-facts strong,
html .training-orientation-copy h2,
html /* =========================================================
   V9.12.72 — TYPOGRAPHY CONSOLIDATION
   Visual-only release. Preserve lesson/audio/progression logic.
   Typography roles:
   1) Display serif: lesson page title only
   2) UI sans: navigation,
html body,
html controls
   3) Metadata label: one standardized uppercase treatment
   ========================================================= */
body.demo-one,
html headings{font-family:var(--cms-display-font)!important;font-style:normal!important}
html .credential-modal-card h2,
html .demo-one .admin-v913 .admin-results-head strong,
html .demo-one .agent-state-monitor>strong,
html .demo-one .attendance-v913 .attendance-label strong,
html .demo-one .demo-home-title,
html .demo-one .demo-page-head h2,
html .demo-one .demo1-dialog h2,
html .demo-one .demo1-hero-content h2,
html .demo-one .demo1-preview-copy h2,
html .demo-one .demo1-section-heading h3,
html .demo-one .groups-v913 .group-folder b,
html .demo-one .groups-v913 .people-label strong,
html .demo-one .help-page-head h2,
html .demo-one .keep-center,
html .demo-one .lesson-heading h2,
html .demo-one .motion-core,
html .demo-one .orientation-v913 .motion-core>b,
html .demo-one .path-legend-copy strong,
html .demo-one .polished-help-card h3,
html .demo-one .polished-support-strip h3,
html .demo-one .practice-step strong,
html .demo-one .premium-sim-header h3,
html .demo-one .premium-strip-head strong,
html .demo-one .question-card strong,
html .demo-one .resource-hub-copy strong,
html .demo-one .rona-history-v913 .cause-card strong,
html .demo-one .rona-history-v913 .evidence-card strong,
html .demo-one .split-evidence strong,
html .demo-one .state-value,
html .demo-one .term-center,
html .demo-one .term-motion-v913 .term-center>b,
html .demo-one .topic-hub-heading h2,
html .exec-overview-header h2,
html .feedback-stats strong,
html .production-dark .admin-topbar h1,
html .production-dark .admin-welcome-row h2,
html .production-dark .auth-card h1,
html .production-dark .auth-story h2,
html .production-dark .auth-welcome.branded h1,
html .production-dark .auth-welcome:not(.branded) h1,
html .production-dark .editor-head h2,
html .production-dark .operator-hero h2,
html .production-dark .production-page-head h2,
html .production-dark .production-progress-copy h3,
html .production-dark .production-progress-orb strong,
html .production-dark .production-progress-panel h3,
html .production-dark .wizard-confirm h3,
html .production-dark .wizard-head h2,
html .production-progress-facts strong,
html .training-orientation-copy h2,
html /* =========================================================
   V9.12.72 — TYPOGRAPHY CONSOLIDATION
   Visual-only release. Preserve lesson/audio/progression logic.
   Typography roles:
   1) Display serif: lesson page title only
   2) UI sans: navigation,
html body,
html controls
   3) Metadata label: one standardized uppercase treatment
   ========================================================= */
body.demo-one,
html headings{font-weight:620!important}
/* Rail layout: force a single column on wide screens. */
@media (min-width:1280px){html body.demo-one .v9-lesson-grid>.v9-lesson-rail>*{grid-column:1/-1!important;width:auto!important}}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  .demo-one .demo1-lesson-tile,.lesson-video-card *{transition:none!important}
  .demo-one .demo1-lesson-tile:hover{transform:none!important}
}

/* Lesson 11 scene: the report-source note is content, so it must be readable. */
.demo-one .narration-stage .attendance-inside{font-size:13px!important;line-height:1.55!important;color:#c9d5dc!important;max-width:92%;margin-left:auto;margin-right:auto}
.demo-one .narration-stage .attendance-inside b{color:var(--r-gold)!important;font-weight:650}

/* ======================================================================
   R2 — Narration-synced motion engine in the Listen sections (motion/*.js)
   ====================================================================== */
.demo-one .narration-canvas.cmsm-canvas{padding:0!important;min-height:0!important;background:none!important;overflow:visible!important}
.demo-one .narration-canvas.cmsm-canvas>:not(.cmsm-wrap){display:none!important}
.cmsm-wrap{position:relative;width:100%;aspect-ratio:2/1;background:#051521;overflow:hidden}
.cmsm-wrap svg.cmsm,.demo-one .narration-canvas .cmsm-wrap svg.cmsm{position:absolute;inset:0;width:100%;height:100%;display:block;fill:#000;stroke:none;stroke-width:1;
  font-family:"CMS Inter",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.cmsm-wrap svg.cmsm .cmsm-d{font-family:"CMS Inter Display","CMS Inter",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.demo-one .cmsm-stage .narration-stage-top .narration-status{margin-left:auto}
.demo-one .narration-stage-top .cmsm-expand{margin-left:10px;margin-right:0;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 14px;border-radius:999px;
  border:1px solid rgba(239,191,99,.45);background:transparent;color:#efbf63;font:600 13px/1 "CMS Inter",Inter,Arial,sans-serif;letter-spacing:.02em;cursor:pointer}
.demo-one .narration-stage-top .cmsm-expand:hover{background:rgba(239,191,99,.12)}
.demo-one .narration-stage-top .cmsm-expand:focus-visible,.cmsm-btn:focus-visible{outline:3px solid #efbf63;outline-offset:2px}
.cmsm-overlay-bar{display:none}
.cmsm-wrap.cmsm-wrap-expanded{position:fixed;inset:0;z-index:2147483000;width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;border-radius:0}
.cmsm-wrap.cmsm-wrap-expanded .cmsm-overlay-bar{display:flex;position:absolute;top:14px;right:14px;gap:10px;z-index:2}
.cmsm-btn{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(244,241,234,.35);background:rgba(5,21,33,.82);color:#f4f1ea;font:600 15px/1 "CMS Inter",Inter,Arial,sans-serif;cursor:pointer}
.cmsm-btn.cmsm-play{background:#efbf63;color:#051521;border-color:#efbf63}
@media (orientation:portrait) and (max-width:900px){
  .cmsm-wrap.cmsm-wrap-expanded{inset:auto;top:50%;left:50%;width:100vh;width:100dvh;height:100vw;transform:translate(-50%,-50%) rotate(90deg)}
}
html.cmsm-lock,html.cmsm-lock body{overflow:hidden!important}
@media (max-width:560px){.demo-one .narration-stage-top .cmsm-expand{padding:6px 12px}.demo-one .cmsm-stage .narration-stage-top{flex-wrap:wrap}}