/* Matrix Course Viewer — global styles
   ------------------------------------- */

:root {
  /* Palette */
  --bg:            #f6f6fb;
  --surface:       #ffffff;
  --surface-2:     #fafafd;
  --border:        #e6e4f1;
  --border-strong: #cdc8e3;
  --primary:       #7c3aed;       /* violet-600 */
  --primary-dark:  #1e1b4b;       /* indigo-950 */
  --primary-darker:#14102e;
  --primary-100:   #ede9fe;       /* violet-100 */
  --primary-50:    #f5f3ff;       /* violet-50 */
  --accent:        #a78bfa;       /* violet-400 */
  --text:          #1c1b30;
  --text-muted:    #5d5b78;
  --text-subtle:   #8a87a6;
  --success:       #16a34a;
  --success-50:    #e8f9ed;
  --warn:          #b45309;
  --warn-bg:       #fff5e0;
  --warn-border:   #f4d99b;
  --bronze:        #b45309;
  --bronze-bg:     #fff5e6;
  --silver:        #475569;
  --silver-bg:     #eef2f6;
  --gold:          #b07d04;
  --gold-bg:       #fff8df;

  /* Shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(15, 35, 88, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 35, 88, 0.07), 0 1px 2px rgba(15, 35, 88, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(15, 35, 88, 0.18), 0 2px 6px rgba(15, 35, 88, 0.06);
  --shadow-lg: 0 24px 48px -12px rgba(15, 35, 88, 0.25);

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* Layout */
  --header-h: 60px;
  --sidebar-w: 340px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* HTML `hidden` attribute should always trump `display: flex`/`grid` set on the
   same element by class selectors. Without this, the admin login & shell —
   both flex / grid containers with the `hidden` attribute — render on top of
   each other and the Sign-in toggle becomes a no-op. */
[hidden] { display: none !important; }

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--primary-100); color: var(--primary-dark); }

/* Scrollbars — wider + higher-contrast so they're clearly visible and easy to
   grab (especially the in-course content + screen-list panes). */
html { scrollbar-color: #7c83a3 rgba(148,163,184,0.18); scrollbar-width: auto; } /* Firefox */
*::-webkit-scrollbar { width: 14px; height: 14px; }
*::-webkit-scrollbar-thumb { background: #8b93b3; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #5f6789; background-clip: content-box; border: 3px solid transparent; }
*::-webkit-scrollbar-thumb:active { background: #4b5378; background-clip: content-box; border: 3px solid transparent; }
*::-webkit-scrollbar-track { background: rgba(148,163,184,0.16); border-radius: 99px; }

/* ---------- Header ---------- */
.site-header {
  height: var(--header-h);
  background: linear-gradient(180deg, var(--primary-darker), var(--primary-dark));
  color: #fff;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: #fff;
  text-decoration: none;
  height: 100%;
}
.site-header .brand:hover { text-decoration: none; opacity: 0.92; }
.site-header .brand-logo {
  height: 22px;
  width: auto;
  display: block;
  /* Logo SVG ships with its native violet — invert/recolour to white for the dark header. */
  filter: brightness(0) invert(1);
  /* Restore a subtle violet glow underneath via drop-shadow for warmth. */
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(167, 139, 250, 0.25));
}
.site-header .brand-divider {
  color: rgba(255,255,255,0.35);
  font-weight: 300;
  margin: 0 0.05rem;
}
.site-header .brand-sub {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.4px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.92);
}
.site-header nav { margin-left: auto; display: flex; gap: 1.4rem; }
.site-header nav a {
  color: rgba(255,255,255,0.78);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.site-header nav a:hover { color: #fff; text-decoration: none; }
.site-header nav a.active { color: #fff; border-bottom-color: var(--accent); }

/* My Account button — top-right of header */
.site-header-account {
  margin-left: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.85rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 99px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.site-header-account:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.32);
  text-decoration: none;
}
.site-header-account-ico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--primary-darker);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}
@media (max-width: 600px) {
  .site-header-account-label { display: none; }
  .site-header-account { padding: 0.35rem; }
}

/* Sidebar collapse toggle — sits to the left of the Matrix brand
   in the top header. Always visible; lets learners hide or show the
   sidebar without losing their place. The icon flips when collapsed
   so it's obvious which direction it'll move. */
.site-header-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 0.6rem;
  padding: 0;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.site-header-sidebar-toggle:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.32);
}
.site-header-sidebar-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}
/* When the shell is collapsed, mirror the icon so the divider line
   sits on the right edge — implies "the sidebar is hidden, click to
   bring it back". */
.app-shell.sidebar-collapsed .site-header-sidebar-toggle svg { transform: scaleX(-1); }

/* Collapsed shell: hide the sidebar, give the main column the
   reclaimed space. Smooth grid transition keeps the change pleasant. */
.app-body { transition: grid-template-columns 0.22s ease; }
.app-shell.sidebar-collapsed .app-body { grid-template-columns: 0 1fr; }
.app-shell.sidebar-collapsed .app-body > .ms-sidebar {
  /* visibility:hidden keeps focus management clean (no tab-traps
     into a hidden sidebar) and lets the grid transition smoothly. */
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Hamburger / mobile nav ----------
   Appears <=720px wide. Hides the inline nav links and shows a
   bottom-anchored drop-down panel with every nav item stacked,
   plus the My Account button (which is otherwise hidden to save
   header real-estate). */
.site-header-hamburger {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  margin-left: 0.6rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
}
.site-header-hamburger span {
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease;
}
body.nav-open .site-header-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .site-header-hamburger span:nth-child(2) { opacity: 0; }
body.nav-open .site-header-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 720px) {
  .site-header { padding: 0 0.7rem; gap: 0.4rem; }
  .site-header .brand-sub { display: none; }
  .site-header .brand-divider { display: none; }
  .site-header .brand-logo { height: 26px; }

  /* Hide the inline nav + account by default; the hamburger reveals
     them as a stacked dropdown. */
  .site-header nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: linear-gradient(180deg, var(--primary-dark), var(--primary-darker));
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0.4rem 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    z-index: 11;
  }
  body.nav-open .site-header nav { max-height: 70vh; overflow-y: auto; }
  .site-header nav a {
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-bottom-color: rgba(255,255,255,0.06);
    font-size: 1rem;
  }
  .site-header nav a.active {
    background: rgba(124,58,237,0.25);
    border-bottom-color: var(--accent);
  }

  .site-header-account { display: none; }
  .site-header-hamburger { display: inline-flex; margin-left: auto; }
  .site-header-sidebar-toggle { width: 32px; height: 32px; margin-right: 0.4rem; }
  .site-header-sidebar-toggle svg { width: 16px; height: 16px; }

  /* The mobile sidebar drawer itself is defined in the ≤900px block below
     (keyed off .sidebar-mobile-open), so it's decoupled from the desktop
     'sidebar-collapsed' state and can't be hidden by accident. */
}

/* Tighten card paddings + grid breakpoints across content sections
   so narrow viewports don't waste pixels on huge gutters. */
@media (max-width: 720px) {.stats-hero { padding: 2rem 1.1rem 2.4rem; }.stats-hero h1 { font-size: 1.55rem; }.stats-section,
.mapping-section,
.support-section,
.compiler-section,
.files-section {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    margin-top: -1.5rem;
  }
  .mapping-grid, .support-grid, .support-help-grid { grid-template-columns: 1fr; gap: 0.55rem; }
  .mapping-level, .support-card-group { padding: 1rem 0.95rem 1.1rem; }
  .stat-card { padding: 0.85rem 0.95rem 1rem; }
  .stat-card-num { font-size: 1.55rem; }
  .stat-card-lg .stat-card-num { font-size: 1.85rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 80ms ease, box-shadow 150ms ease;
  white-space: nowrap;
  user-select: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid rgba(29,78,216,0.35); outline-offset: 2px; }
.btn:not(:disabled):active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, var(--shadow-xs); }
.btn-primary:hover { background: #1740b0; text-decoration: none; }
.btn-secondary { background: var(--surface); color: var(--primary); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--primary-50); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.hero-bg { display: none; }
.hero-inner { position: relative; max-width: 900px; margin: 0 auto; }

/* ---------- Missing media (author-facing to-do list) ---------- */
.missing-section {
  max-width: 1180px;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
}
.missing-card {
  background: linear-gradient(180deg, #fffaf0, #fff);
  border: 1px solid var(--warn-border);
  border-radius: var(--r-lg);
  padding: 1.2rem 1.4rem 1.4rem;
  box-shadow: var(--shadow-xs);
}
.missing-card-head {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 0.5rem;
}
.missing-card-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--primary-dark);
  font-weight: 800;
  display: flex; align-items: center; gap: 0.55rem;
}
.missing-card-pill {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn);
  font-size: 0.7rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  font-weight: 800;
}
.missing-card-counter {
  margin-left: auto;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.32rem 0.75rem;
  border-radius: 99px;
}
.missing-card-hint { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 1rem; }
.missing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.missing-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.7rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.85rem;
}
.missing-row-icon { font-size: 1.2rem; opacity: 0.85; }
.missing-row-name code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--primary-dark);
}
.missing-row-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }
.missing-row-meta code {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
}
.missing-row-usage { font-size: 0.78rem; color: var(--text-subtle); margin-top: 0.2rem; }

/* ---------- Achievements ---------- */
.achievements-section {
  max-width: 1180px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
}
.achievements-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem 1.5rem 1.6rem;
}
.achievements-header {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 1.2rem;
}
.achievements-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--primary-dark);
  font-weight: 800;
  letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 0.55rem;
}
.achievements-header h2::before { content: "🏆"; font-size: 1.25rem; }
.achievements-counter {
  margin-left: auto;
  background: var(--primary-100);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.8rem;
  border-radius: 99px;
}
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.7rem;
}
.achievement {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 0.9rem 1.05rem;
  text-align: center;
  position: relative;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.achievement.locked { opacity: 0.55; filter: grayscale(0.6); }
.achievement.unlocked {
  background: linear-gradient(180deg, #fffbeb, #fff7d4);
  border-color: #f0d670;
  box-shadow: 0 4px 14px -6px rgba(202, 138, 4, 0.4);
  opacity: 1; filter: none;
}
.achievement.unlocked::after {
  content: "";
  position: absolute; top: 6px; right: 6px;
  width: 10px; height: 10px;
  background: #f59e0b;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}
.achievement-icon {
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 0.55rem;
  filter: grayscale(0.3);
  transition: transform 180ms ease, filter 180ms ease;
}
.achievement.unlocked .achievement-icon { filter: none; transform: scale(1.1); }
.achievement-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary-dark);
  margin-bottom: 0.25rem;
}
.achievement-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ---------- Sidebar section headers ---------- */
.section-header {
  list-style: none;
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.85rem 1rem 0.35rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.section-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-subtle);
  flex: 0 0 auto;
}
.section-intro      .section-dot { background: var(--accent); }
.section-bronze     .section-dot { background: var(--bronze); }
.section-silver     .section-dot { background: var(--silver); }
.section-gold       .section-dot { background: var(--gold); }
.section-assessment .section-dot { background: var(--primary); }
.section-homework   .section-dot { background: #ec4899; }
.section-project    .section-dot { background: #06b6d4; }
.section-bronze     .section-label { color: var(--bronze); }
.section-silver     .section-label { color: var(--silver); }
.section-gold       .section-label { color: var(--gold); }

/* ---------- Toasts ----------
   Pinned to the BOTTOM-right so they never cover the sticky screen-bar
   actions (Previous / Next / Mark complete). They stack upward as new
   ones arrive. */
.toast-root {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 50;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.55rem;
  pointer-events: none;
  max-width: 360px;
}
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 12px;
  padding: 0.85rem 1rem 0.95rem 0.85rem;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  box-shadow: var(--shadow-md);
  transform: translateX(420px);
  opacity: 0;
  transition: transform 360ms cubic-bezier(.2,1,.2,1), opacity 200ms ease;
  pointer-events: auto;
  min-width: 260px;
}
.toast.in { transform: translateX(0); opacity: 1; }
.toast.out { transform: translateX(420px); opacity: 0; }
.toast.toast-complete { border-left-color: var(--success); }
.toast.toast-achievement {
  background: linear-gradient(135deg, #fffbeb, #fff);
  border-left-color: #f59e0b;
}
.toast-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  background: var(--success-50);
  color: var(--success);
  flex: 0 0 auto;
}
.toast-achievement .toast-icon {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  font-size: 1.4rem;
}
.toast-icon.glow {
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18), 0 0 20px rgba(245, 158, 11, 0.4);
  animation: glow-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes glow-pulse {
  from { box-shadow: 0 0 0 3px rgba(245,158,11,0.2), 0 0 16px rgba(245,158,11,0.35); }
  to   { box-shadow: 0 0 0 6px rgba(245,158,11,0.05), 0 0 28px rgba(245,158,11,0.55); }
}
.toast-body { flex: 1; min-width: 0; }
.toast-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b45309;
  font-weight: 800;
  margin-bottom: 0.15rem;
}
.toast-title {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 0.95rem;
  margin-bottom: 0.1rem;
  font-family: var(--font-display);
}
.toast-msg { font-size: 0.82rem; color: var(--text-muted); }
.toast-msg strong { color: var(--success); font-weight: 800; }

/* ---------- Confetti ---------- */
.confetti-piece {
  position: fixed;
  top: -20px;
  width: 8px;
  height: 12px;
  z-index: 999;
  pointer-events: none;
  border-radius: 1px;
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
  animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); opacity: 0; }
}

/* ---------- Pulse on checkbox tick ---------- */
.screen-checkbox.pulse {
  animation: tick-pulse 480ms cubic-bezier(.2,1.6,.4,1);
}
@keyframes tick-pulse {
  0%   { transform: scale(0.85); }
  40%  { transform: scale(1.35); box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.3); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
.pill-count {
  background: var(--primary-100);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.05rem 0.45rem;
  border-radius: 99px;
  letter-spacing: 0.2px;
  min-width: 1.5em;
  text-align: center;
}

/* The catalogue is now a stack of grouped sections (Student/Teacher/CPD/Packs);
   each section holds its own card grid. */
.catalog {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.course-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 200ms cubic-bezier(.4,.2,.2,1), box-shadow 200ms ease, border-color 200ms ease;
  position: relative;
}
.course-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.course-card .thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  background-color: var(--primary-dark);
  /* Default to a branded gradient. A course WITH a cover sets background-image
     inline (overriding this); a course without keeps the gradient — so a card
     is never a flat blank colour. */
  background-image: linear-gradient(135deg, var(--primary), var(--primary-dark));
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  text-decoration: none;
}
.course-card .thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8,21,56,0.35));
  transition: opacity 200ms ease;
}
.course-card:hover .thumb::after { opacity: 0.65; }

/* Pack badge inside sidebar course-info */
.ms-course-group-pack .ms-course-info-code {
  color: #b45309 !important;
}

/* "Return to course" mode: the sidebar card on non-course pages.
   It's a quick shortcut back into the course the learner started. */
.ms-course-group-return {
  background: linear-gradient(180deg, var(--primary-50), transparent);
  border: 1px solid var(--primary-100);
  border-radius: var(--r-md);
  margin: 0.45rem 0.65rem;
}
.ms-course-group-return .ms-course-head {
  padding: 0.65rem 0.85rem;
}
.ms-course-group-return .ms-course-head:hover {
  background: var(--primary-50);
}
.ms-course-group-return .ms-course-info-code {
  color: var(--primary) !important;
  letter-spacing: 1px;
}
/* No separate chevron style here — .course-nav-arrow is consistent
   across every variant so the toggle looks the same on every screen. */
.course-card .body { padding: 1.1rem 1.25rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
.course-card .code {
  font-size: 0.7rem;
  letter-spacing: 1.8px;
  color: var(--text-subtle);
  font-weight: 700;
  text-transform: uppercase;
}
.course-card h3 {
  margin: 0.3rem 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--primary-dark);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.course-card p {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  /* Clamp to 3 lines so description length can't change the card height. The meta
     block below uses margin-top:auto to pin the stats + progress + button to the
     bottom, so every card lines up identically. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-card .meta {
  display: flex;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  flex-wrap: wrap;
  /* Pin the stats + progress + button to the bottom of the (equal-height) card,
     so every card's call-to-action lines up regardless of description length. */
  margin-top: auto;
}
.course-card .meta .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--primary-50);
  color: var(--primary-dark);
  border: 1px solid var(--border);
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.course-card .meta .chip strong { color: var(--primary); font-weight: 700; }
.course-card .meta .chip-warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn);
}
.course-card .meta .chip-warn strong { color: var(--warn); }

.course-card .actions { display: flex; gap: 0.55rem; }
.course-card .btn {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
}
.course-card .btn-arrow {
  display: inline-block;
  transition: transform 180ms ease;
  margin-left: 0.15rem;
}
.course-card:hover .btn-arrow { transform: translateX(3px); }

/* ---------- SCORM Compliance page ---------- */
.scorm-hero {
  background: linear-gradient(180deg, var(--surface), var(--bg));
  padding: 2.4rem 1.5rem 1.6rem;
  border-bottom: 1px solid var(--border);
}
.scorm-hero-inner { max-width: 1100px; margin: 0 auto; }
.scorm-hero-breadcrumb {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
  letter-spacing: 0.2px;
}
.scorm-hero-breadcrumb a { color: var(--primary); font-weight: 700; text-decoration: none; }
.scorm-hero-breadcrumb a:hover { text-decoration: underline; }
.scorm-hero-breadcrumb span { color: var(--text); font-weight: 600; }
.scorm-hero-back-row { margin-bottom: 1.2rem; }
.scorm-version-pill {
  display: inline-block;
  background: var(--primary-100);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 99px;
  margin-bottom: 0.7rem;
}
.scorm-hero h1 {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -0.015em;
}
.scorm-hero p { color: var(--text-muted); margin: 0; max-width: 720px; font-size: 1rem; }

.scorm-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.scorm-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-xs);
}
.scorm-section-eyebrow {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--text-subtle);
  margin-bottom: 0.35rem;
}
.scorm-section-title {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--primary-dark);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.scorm-section p { margin: 0 0 0.85rem; color: var(--text); }
.scorm-section p:last-child { margin-bottom: 0; }
.scorm-section code {
  background: var(--primary-50);
  color: var(--primary-dark);
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.88em;
}

.scorm-list { padding-left: 1.4rem; margin: 0 0 0.85rem; }
.scorm-list li { margin-bottom: 0.45rem; line-height: 1.55; }

.scorm-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
  margin-top: 0.5rem;
}
.scorm-pillar {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem 1.15rem;
  position: relative;
}
.scorm-pillar-num {
  position: absolute;
  top: 0.6rem;
  right: 0.85rem;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-100);
  line-height: 1;
}
.scorm-pillar h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-dark);
}
.scorm-pillar p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }

.scorm-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-sm); }
.scorm-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.scorm-table thead th {
  background: var(--surface-2);
  font-size: 0.7rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: left;
  font-weight: 700;
  color: var(--text-subtle);
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border);
}
.scorm-table tbody td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.scorm-table tbody tr:last-child td { border-bottom: none; }
.scorm-table th.num, .scorm-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.scorm-table-narrow { max-width: 540px; }

.scorm-callout {
  background: linear-gradient(180deg, #fffbeb, #fff);
  border-left: 4px solid #f59e0b;
  padding: 0.8rem 1rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-top: 0.8rem;
  font-size: 0.94rem;
}
.scorm-callout strong { color: #92400e; }

.scorm-steps {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  counter-reset: scorm-step;
}
.scorm-steps li {
  counter-increment: scorm-step;
  padding: 0.6rem 0.85rem 0.6rem 2.6rem;
  position: relative;
  border-left: 2px solid var(--primary-100);
  margin-bottom: 0.35rem;
  background: var(--surface-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.scorm-steps li::before {
  content: counter(scorm-step);
  position: absolute;
  left: 0.7rem;
  top: 0.55rem;
  background: var(--primary);
  color: #fff;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
}

.scorm-conformance { display: flex; flex-direction: column; gap: 0.6rem; }
.scorm-conformance-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  grid-template-rows: auto auto;
  gap: 0.15rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.85rem;
}
.scorm-conformance-code {
  grid-row: 1 / 3;
  font-family: ui-monospace, monospace;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary);
  align-self: center;
}
.scorm-conformance-row strong { font-family: var(--font-display); color: var(--primary-dark); font-size: 0.95rem; }
.scorm-conformance-row span { font-size: 0.85rem; color: var(--text-muted); }

.scorm-tree {
  background: var(--primary-dark);
  color: #c5d0e8;
  padding: 1rem 1.2rem;
  border-radius: var(--r-md);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.55;
  overflow-x: auto;
  margin: 0;
}

.scorm-pipeline { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-direction: column; gap: 0.55rem; }
.scorm-pipeline li {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  gap: 0.1rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.65rem 0.85rem;
  align-items: start;
}
.scorm-pipeline-num {
  grid-row: 1 / 3;
  background: var(--primary-100);
  color: var(--primary);
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
}
.scorm-pipeline strong { font-family: var(--font-display); color: var(--primary-dark); font-size: 0.95rem; }
.scorm-pipeline li > span:last-child { font-size: 0.88rem; color: var(--text-muted); }

.scorm-live-status { font-size: 0.85rem; }
.scorm-live-status code {
  background: var(--surface-2);
  font-size: 0.82rem;
  color: var(--text);
  padding: 0.05rem 0.35rem;
}
.scorm-live-status td:first-child { font-weight: 500; }

.scorm-bottom-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding: 0 0.3rem;
}

@media (max-width: 700px) {
  .scorm-conformance-row { grid-template-columns: 1fr; }
  .scorm-conformance-code { grid-row: auto; }
  .scorm-pipeline li { grid-template-columns: 1fr; }
  .scorm-pipeline-num { grid-row: auto; }
}

/* ---------- Stats page ---------- */
.stats-hero {
  background: linear-gradient(180deg, var(--surface), var(--bg));
  text-align: center;
  padding: 3rem 1.5rem 2rem;
}
.stats-hero h1 {
  margin: 0.4rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -0.015em;
}
.stats-hero p { color: var(--text-muted); max-width: 580px; margin: 0 auto; font-size: 1rem; }

.stats-section { max-width: 1180px; margin: 0 auto 4rem; padding: 0 1.5rem; }

.stats-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.4rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.2rem 1.25rem;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.stat-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.stat-card-lg {
  background: linear-gradient(135deg, var(--primary-100), var(--primary-50));
  border-color: var(--primary-100);
}
.stat-card-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-subtle);
  font-weight: 700;
}
.stat-card-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1.1;
  margin: 0.45rem 0 0.2rem;
  letter-spacing: -0.01em;
}
.stat-card-foot { font-size: 0.82rem; color: var(--text-muted); }
.stat-card-foot strong { color: var(--text); }
.stat-card-lg .stat-card-num { font-size: 2.4rem; color: var(--primary); }

/* My Account: Total time card is green to match "session time" semantics
   used elsewhere on the site. */
.stat-card-time {
  background: linear-gradient(135deg, #dcfce7, #f0fdf4);
  border-color: #bbf7d0;
}
.stat-card-time .stat-card-num { color: #15803d; }
.stat-card-time .stat-card-eyebrow { color: #15803d; }

.stats-h2 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 1rem;
}
.stats-courses { margin-bottom: 2.4rem; }
.stats-courses-list { display: flex; flex-direction: column; gap: 0.7rem; }
.stats-course-row {
  display: grid;
  grid-template-columns: 96px 1fr 28px;
  gap: 1rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.stats-course-row:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  border-color: var(--border-strong);
  text-decoration: none;
}
.stats-course-row-thumb {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  border-radius: var(--r-sm);
  background-color: var(--primary-dark);
  /* Gradient default so a course with no cover shows a branded tile, not blank. */
  background-image: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.stats-course-row-head { display: flex; align-items: baseline; gap: 0.55rem; margin-bottom: 0.4rem; }
.stats-course-row-head .code { font-size: 0.7rem; letter-spacing: 1.5px; color: var(--text-subtle); font-weight: 700; }
.stats-course-row-head strong { font-family: var(--font-display); font-size: 1.02rem; color: var(--primary-dark); font-weight: 700; }
.stats-course-row-bar {
  background: var(--primary-100);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
  margin-bottom: 0.4rem;
}
.stats-course-row-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--primary));
}
.stats-course-row-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.stats-course-row-meta strong { color: var(--text); font-weight: 700; }
.stats-course-row-meta .time strong { color: var(--primary); }
.stats-course-row-arrow { color: var(--text-subtle); font-size: 1.4rem; }

.stats-screens { margin-bottom: 2.4rem; }
.stats-screens-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.stats-screens-header .stats-h2 { margin: 0; }
.stats-screens > summary { cursor: pointer; margin: 0 0 0.8rem; }
.stats-screens > summary:hover { color: var(--primary); }
.stats-select {
  margin-left: auto;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}
.stats-screens-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stats-screen-row {
  display: grid;
  grid-template-columns: 50px 1fr 130px 110px 90px;
  gap: 0.6rem;
  align-items: center;
  padding: 0.6rem 1rem;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
}
.stats-screen-row:last-child { border-bottom: none; }
.stats-screen-row.stats-screen-head {
  background: var(--surface-2);
  font-size: 0.7rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-subtle);
  padding: 0.55rem 1rem;
}
.stats-screen-row.done .title { color: var(--text-muted); }
.stats-screen-row .num { font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: right; }
.stats-screen-row .title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-screen-row .type-label { font-size: 0.78rem; color: var(--text-muted); text-transform: capitalize; }
.status-pill {
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  display: inline-block;
}
.status-pill.done { background: var(--success-50); color: var(--success); }
.status-pill.todo { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.status-pill.missing { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); }

.stats-achievements { margin-bottom: 2.4rem; }
.stats-actions {
  display: flex; gap: 0.7rem; align-items: center; justify-content: center;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* ---------- Preview page (drop-to-preview author tool) ---------- */
.preview-section {
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
}
.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 2.4rem 1.5rem 2.6rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease,
              box-shadow 180ms ease, transform 140ms ease;
  margin-bottom: 1.6rem;
}
.dropzone:hover {
  border-color: var(--primary);
  background: var(--primary-50);
  box-shadow: var(--shadow-sm);
}
.dropzone.drag {
  border-color: var(--primary);
  background: var(--primary-50);
  box-shadow: 0 0 0 4px var(--primary-100);
  transform: scale(1.006);
}
.dropzone-icon {
  font-size: 2.2rem;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.7rem;
}
.dropzone-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-dark);
}
.dropzone-sub {
  margin-top: 0.6rem;
  color: var(--text-muted);
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.dropzone-types {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--text-subtle);
  letter-spacing: 0.4px;
}
.preview-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.preview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.preview-card-head {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.preview-card-head > div:first-child { display: flex; align-items: center; gap: 0.55rem; flex: 1; min-width: 0; }
.preview-card-name {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.86rem;
  color: var(--primary-dark);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-card-size { color: var(--text-subtle); font-size: 0.78rem; }
.preview-card-type {
  font-size: 0.66rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.18rem 0.5rem;
  border-radius: 99px;
  background: var(--primary-100);
  color: var(--primary);
}
.preview-card-type.document { background: #dbeafe; color: #1d4ed8; }
.preview-card-type.html { background: #dcfce7; color: #15803d; }
.preview-card-type.pdf { background: #ffedd5; color: #c2410c; }
.preview-card-type.image { background: #ede9fe; color: #6d28d9; }
.preview-card-type.powerpoint { background: #fce7f3; color: #be185d; }
.preview-card-type.spreadsheet { background: #ecfdf5; color: #047857; }
.preview-card-remove {
  background: transparent; border: none;
  font-size: 1.4rem; color: var(--text-subtle);
  width: 28px; height: 28px; padding: 0; cursor: pointer;
  border-radius: 6px;
}
.preview-card-remove:hover { background: var(--surface-2); color: var(--warn); }
.preview-card-body {
  min-height: 200px;
  max-height: 600px;
  overflow: auto;
  background: var(--bg);
}
.preview-card-body .stage-doc { padding: 1rem; background: transparent; }
.preview-card-body .stage-doc-inner { padding: 1.5rem 2rem 2rem; }
.preview-card-body .preview-iframe { width: 100%; height: 600px; border: none; background: #fff; }
.preview-card-body .preview-image { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.preview-card-body .preview-image img { max-width: 100%; max-height: 540px; border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.preview-card-foot {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.preview-card-foot label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-subtle);
}
.preview-card-foot input {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}
.preview-card-foot input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}
.preview-snippet-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  padding: 1.2rem 1.4rem 1.4rem;
}
.preview-snippet-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.preview-snippet-head .stats-h2 { margin: 0; flex: 1; }
.preview-snippet-hint { color: var(--text-muted); font-size: 0.86rem; margin: 0 0 0.7rem; }
.preview-snippet-hint code { font-family: ui-monospace, monospace; font-size: 0.85em; background: var(--primary-50); padding: 0.1rem 0.35rem; border-radius: 3px; color: var(--primary-dark); }
#snippet {
  width: 100%;
  min-height: 220px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem;
  padding: 1rem;
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
  border-radius: var(--r-sm);
  resize: vertical;
  color: var(--primary-dark);
  line-height: 1.5;
}

/* ---------- Sidebar nav (Dashboard / All Courses / footer links) ---------- */
.sidebar-nav {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.55rem;
  background: var(--surface-2);
  display: flex; flex-direction: column; gap: 0.2rem;
  flex-shrink: 0; /* nav block reserves its space; never squashed */
}
.sidebar-nav-item {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  font-size: 0.86rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
.sidebar-nav-item:hover { background: var(--primary-50); text-decoration: none; }
.sidebar-nav-item.active { background: var(--primary-100); color: var(--primary-dark); font-weight: 700; }
.sidebar-nav-ico {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff;
  border-radius: 6px;
  font-size: 0.85rem;
}
.sidebar-nav-item.active .sidebar-nav-ico { background: var(--primary-dark); }
.sidebar-foot-link {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.sidebar-foot-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.sidebar-foot-link span:first-child { width: 22px; text-align: center; }
.sidebar-foot-danger { color: var(--warn); }
.sidebar-foot-danger:hover { background: var(--warn-bg); color: var(--warn); }

/* ---------- Course Dashboard page ---------- */
.dashboard-main { padding: 0; overflow: auto; max-height: calc(100vh - var(--header-h)); }
.dashboard-breadcrumb {
  padding: 1rem 1.5rem 0.6rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.4px;
}
.dashboard-breadcrumb-code { color: var(--primary); font-weight: 700; }
.dashboard-breadcrumb-sep { margin: 0 0.4rem; color: var(--text-subtle); }
.dashboard-breadcrumb-cur { color: var(--text); font-weight: 600; }

.dash-hero {
  margin: 0.4rem 1.5rem 1.4rem;
  padding: 2rem 2.2rem 2.2rem;
  background:
    radial-gradient(900px 320px at 100% 0%, rgba(167,139,250,0.18) 0%, transparent 60%),
    linear-gradient(135deg, var(--primary-dark), #2a1f5b 60%, var(--primary));
  color: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.dash-hero-eyebrow {
  margin: 0; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,0.75);
}
.dash-hero h1 {
  margin: 0.4rem 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.dash-hero p { margin: 0; max-width: 760px; opacity: 0.9; font-size: 1.02rem; }
.dash-tier-counts {
  display: flex; gap: 0.7rem; margin-top: 1.4rem;
  flex-wrap: wrap;
}
.dash-tier-count {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  display: flex; flex-direction: column;
  min-width: 130px;
  backdrop-filter: blur(8px);
}
.dash-tier-count .num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}
.dash-tier-count .label {
  font-size: 0.72rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-top: 0.4rem;
  opacity: 0.85;
}
.dash-tier-count.tier-bronze { box-shadow: inset 4px 0 0 #d97706; }
.dash-tier-count.tier-silver { box-shadow: inset 4px 0 0 #94a3b8; }
.dash-tier-count.tier-gold   { box-shadow: inset 4px 0 0 #fbbf24; }
.dash-hero-actions { display: flex; gap: 0.6rem; margin-top: 1.4rem; flex-wrap: wrap; }
.dash-hero-actions .btn { padding: 0.7rem 1.2rem; }
.dash-hero-actions .btn-secondary { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.25); }
.dash-hero-actions .btn-secondary:hover { background: rgba(255,255,255,0.18); }

.dash-section { margin: 0 1.5rem 1.6rem; }
.dash-section-head { margin-bottom: 0.75rem; }
.dash-section-eyebrow {
  margin: 0; font-size: 0.7rem; letter-spacing: 1.8px; text-transform: uppercase;
  font-weight: 800; color: var(--text-subtle);
}
.dash-section-title {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: -0.005em;
}

.dash-prep {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.6rem 1.6rem;
  box-shadow: var(--shadow-xs);
}
.dash-prep p { margin: 0 0 1rem; }
.dash-prep-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.dash-prep-list li {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 0.55rem 0.85rem;
  font-size: 0.94rem;
}
.dash-callout {
  background: linear-gradient(180deg, #fffbeb, #fff);
  border: 1px solid #f4d99b;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 0.85rem 1.05rem;
  margin-top: 1rem;
}
.dash-callout strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #b45309;
  margin-bottom: 0.4rem;
}
.dash-callout p { margin: 0; }
.dash-callout code {
  background: rgba(0,0,0,0.04);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.86em;
}

.dash-promos {
  margin: 0 1.5rem 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.85rem;
}
.dash-promo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.2rem 1.25rem;
  display: flex; gap: 0.85rem;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-xs);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.dash-promo:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
  text-decoration: none;
}
.dash-promo-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700;
  background: var(--primary-100); color: var(--primary);
  flex: 0 0 auto;
}
.dash-promo-yt .dash-promo-icon { background: #fee2e2; color: #b91c1c; }
.dash-promo-fc .dash-promo-icon { background: #ffedd5; color: #c2410c; }
.dash-promo-dl .dash-promo-icon { background: #dbeafe; color: var(--primary); }
.dash-promo-eyebrow {
  font-size: 0.66rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 700;
}
.dash-promo-body strong {
  display: block;
  font-family: var(--font-display);
  color: var(--primary-dark);
  font-size: 1rem;
  font-weight: 700;
  margin: 0.25rem 0 0.3rem;
}
.dash-promo-body span { font-size: 0.85rem; color: var(--text-muted); display: block; }
.dash-promo-link { color: var(--primary); font-weight: 700; margin-top: 0.5rem !important; font-size: 0.85rem !important; }

.dash-wiki-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
}
.dash-wiki-grid a {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.dash-wiki-grid a:hover { background: var(--primary-50); border-color: var(--primary-100); text-decoration: none; }

.dash-worksheets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.7rem;
}
.dash-ws-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem 1.15rem;
  text-decoration: none;
  color: var(--text);
  display: flex; flex-direction: column;
  position: relative;
  border-left: 3px solid var(--accent);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.dash-ws-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); text-decoration: none; }
.dash-ws-card.tier-bronze { border-left-color: #d97706; }
.dash-ws-card.tier-silver { border-left-color: #94a3b8; }
.dash-ws-card.tier-gold   { border-left-color: #fbbf24; }
.dash-ws-card.done { background: linear-gradient(180deg, var(--success-50), #fff); border-color: #bbf7d0; }
.dash-ws-card.missing { opacity: 0.6; pointer-events: none; }
.dash-ws-tier {
  font-size: 0.66rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 700;
}
.dash-ws-title {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--primary-dark);
  margin: 0.35rem 0 0.7rem;
}
.dash-ws-progress { margin-top: auto; }
.dash-ws-bar { background: var(--primary-100); border-radius: 99px; height: 4px; overflow: hidden; }
.dash-ws-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary)); }
.dash-ws-card.done .dash-ws-bar > span { background: var(--success); }
.dash-ws-status { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.4rem; }
.dash-ws-card.done .dash-ws-status { color: var(--success); font-weight: 700; }

.dashboard-footer {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 3rem;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- Admin CMS ---------- */
.cms-login {
  min-height: calc(100vh - var(--header-h));
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.5rem;
}
.cms-login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.4rem 2.2rem;
  box-shadow: var(--shadow-md);
  max-width: 460px;
  width: 100%;
  text-align: center;
}
.cms-login-icon {
  width: 56px; height: 56px;
  background: var(--primary-100); color: var(--primary);
  border-radius: 14px;
  font-size: 1.8rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.cms-login-card h1 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
  color: var(--primary-dark);
}
.cms-login-card p { color: var(--text-muted); margin: 0 0 1.4rem; }
#cms-login-form { display: flex; flex-direction: column; gap: 0.85rem; text-align: left; }
#cms-login-form label {
  font-size: 0.74rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 700;
  display: flex; flex-direction: column; gap: 0.3rem;
}
#cms-login-form input {
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}
#cms-login-form input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}
.cms-login-hint { font-size: 0.78rem; color: var(--text-subtle); margin: 0; text-align: center; }
.cms-login-hint code { background: var(--primary-50); padding: 0.05rem 0.3rem; border-radius: 3px; font-size: 0.85em; }

.cms-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: calc(100vh - var(--header-h));
}
.cms-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: auto;
}
.cms-side-section { padding: 1rem 1.25rem 0.4rem; }
.cms-side-eyebrow {
  font-size: 0.66rem; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 800;
}
.cms-side-section h2 {
  margin: 0.2rem 0 0; font-size: 0.95rem; font-family: var(--font-display);
  color: var(--primary-dark); font-weight: 700;
}
.cms-course-list, .cms-html-list {
  list-style: none; padding: 0.4rem 0.55rem; margin: 0;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.cms-course-pick, .cms-html-pick {
  background: transparent; border: 1px solid transparent;
  text-align: left; cursor: pointer;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 0.2rem;
  font-family: inherit; font-size: 0.86rem;
  color: var(--text);
  width: 100%;
}
.cms-course-pick:hover, .cms-html-pick:hover { background: var(--primary-50); border-color: var(--primary-100); }
.cms-course-pick strong { font-family: var(--font-display); color: var(--primary); font-size: 0.7rem; letter-spacing: 1.4px; text-transform: uppercase; }
.cms-edited-tag {
  display: inline-block;
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn);
  padding: 0.05rem 0.35rem;
  border-radius: 99px;
  font-weight: 700;
  margin-top: 0.2rem;
  align-self: flex-start;
}
.cms-side-foot {
  margin-top: auto; padding: 0.85rem 1.1rem 1.1rem;
  border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.4rem;
}
.cms-side-foot .btn { width: 100%; }

.cms-main { overflow: auto; padding: 1.6rem 1.8rem 4rem; max-height: calc(100vh - var(--header-h)); }
.cms-page-head { margin-bottom: 1.4rem; }
.cms-page-eyebrow { font-size: 0.7rem; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-subtle); font-weight: 800; }
.cms-page-head h1 {
  margin: 0.2rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -0.015em;
}
.cms-page-hint { color: var(--text-muted); font-size: 0.92rem; margin: 0; }

.cms-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.5rem 1.5rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-xs);
}
.cms-section-title { margin: 0 0 0.85rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--primary-dark); font-weight: 700; }
.cms-section-hint { color: var(--text-muted); font-size: 0.9rem; margin: -0.4rem 0 1rem; }

.cms-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
}
.cms-grid-full { grid-column: 1 / -1; }
.cms-grid-2 label {
  display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 0.72rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 700;
}
.cms-grid-2 input, .cms-grid-2 select, .cms-grid-2 textarea {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: inherit; font-size: 0.9rem;
  text-transform: none; letter-spacing: normal;
  color: var(--text);
}
.cms-grid-2 textarea { resize: vertical; min-height: 80px; }
.cms-grid-2 input:focus, .cms-grid-2 select:focus, .cms-grid-2 textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

.cms-section-actions { display: flex; align-items: center; gap: 0.7rem; margin-top: 1rem; }
.cms-saved-hint {
  background: var(--success-50); color: var(--success);
  font-size: 0.78rem; font-weight: 700;
  padding: 0.25rem 0.65rem; border-radius: 99px;
  letter-spacing: 0.4px;
}

.cms-screens { display: flex; flex-direction: column; gap: 0.4rem; }
.cms-screen-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.4rem;
}
.cms-screen-main {
  display: grid;
  grid-template-columns: 26px minmax(0,2fr) 108px 70px minmax(0,2fr) 64px;
  gap: 0.5rem;
  align-items: center;
}
.cms-screen-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.55rem;
}
.cms-screen-actions-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
}
.cms-screen-noedit {
  font-size: 0.76rem;
  color: var(--text-subtle);
  font-style: italic;
}
.cms-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem;
}
.cms-edit-text-btn { white-space: nowrap; font-size: 0.82rem; padding: 0.4rem 0.85rem; }
.cms-edit-text-btn .cms-edited-tag { margin-left: 0.35rem; }
.cms-screen-editor {
  margin-top: 0.65rem;
  border-top: 1px dashed var(--border-strong);
  padding-top: 0.75rem;
}
.cms-text-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cms-text-edit-col { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.cms-text-area {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.82rem;
  padding: 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  resize: vertical;
  background: var(--surface-2);
  color: var(--text);
  min-height: 300px;
  line-height: 1.5;
}
.cms-screen-num {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--text-subtle);
  text-align: center;
  font-weight: 600;
}
.cms-screen-row input, .cms-screen-row select {
  padding: 0.32rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.84rem;
  background: var(--surface);
}
.cms-screen-src { font-family: ui-monospace, monospace; font-size: 0.78rem !important; }
.cms-screen-missing {
  font-size: 0.7rem; letter-spacing: 0.4px; color: var(--warn);
  display: inline-flex; align-items: center; gap: 0.3rem;
}

.cms-html-edit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}
.cms-html-edit-label {
  font-size: 0.7rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 700;
  display: flex; flex-direction: column; gap: 0.4rem;
}
#cms-html-textarea {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem;
  padding: 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  resize: vertical;
  background: var(--surface-2);
  color: var(--text);
  min-height: 360px;
  text-transform: none;
  letter-spacing: normal;
}
.cms-html-preview {
  width: 100%;
  min-height: 360px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
}
@media (max-width: 1100px) {
  .cms-shell { grid-template-columns: 1fr; height: auto; }
  .cms-html-edit { grid-template-columns: 1fr; }
  .cms-screen-main { grid-template-columns: 26px 1fr 1fr; }
  .cms-screen-main .cms-screen-src { grid-column: 1 / -1; }
  .cms-text-edit { grid-template-columns: 1fr; }
}

/* ---------- Files page (file manager + staging) ---------- */
.files-section { max-width: 1180px; margin: 0 auto 4rem; padding: 0 1.5rem; }
.files-dropzone { margin-top: 0; }

.files-staging {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  padding: 1.2rem 1.4rem 1.4rem;
  margin: 1.6rem 0;
}
.files-staging-head {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.files-staging-head .stats-h2 { margin: 0; }
.files-staging-count {
  background: var(--primary-100); color: var(--primary);
  font-size: 0.78rem; font-weight: 700;
  padding: 0.32rem 0.75rem; border-radius: 99px;
}
.files-staging-head #export-zip { margin-left: auto; }
.files-staging-hint { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 1rem; }
.files-staging-hint code { background: var(--primary-50); padding: 0.05rem 0.3rem; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 0.85em; }
.files-staging-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.files-staged-row {
  display: grid;
  grid-template-columns: 220px 1fr auto auto;
  gap: 0.6rem;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.85rem;
}
.files-staged-row.fills { background: linear-gradient(180deg, #e8f9ed, #fff); border-color: #bbf7d0; }
.files-staged-name code { font-family: ui-monospace, monospace; font-size: 0.86rem; font-weight: 600; color: var(--primary-dark); }
.files-staged-size { color: var(--text-subtle); font-size: 0.78rem; margin-left: 0.4rem; font-weight: 500; }
.files-staged-path {
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
  background: var(--surface);
  color: var(--text);
  width: 100%;
}
.files-staged-path:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); }
.files-staged-tag {
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}
.files-staged-row.fills .files-staged-tag { background: var(--success-50); color: var(--success); border-color: #bbf7d0; }
.files-staged-remove { padding: 0.2rem 0.55rem; }

.files-tree-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  padding: 1.2rem 1.4rem 1.4rem;
}
.files-tree-head {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.files-tree-head .stats-h2 { margin: 0; }
.files-tree-legend {
  display: flex; gap: 0.4rem;
  font-size: 0.74rem;
}
.files-tree-head #rescan-btn { margin-left: auto; }
.files-tree-hint { color: var(--text-muted); font-size: 0.86rem; margin: 0 0 1rem; }
.files-tree { min-height: 3rem; }
.files-tree .stage-loading { padding: 1rem 0; color: var(--text-muted); }

.files-status {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.files-status.ok { background: var(--success-50); color: var(--success); border-color: #bbf7d0; }
.files-status.missing { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.files-status.staged { background: var(--primary-100); color: var(--primary); border-color: var(--primary-100); }

.files-folder { margin-bottom: 1rem; }
.files-folder-head {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  border-bottom: none;
}
.files-folder-name {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-dark);
  flex: 1;
}
.files-folder-counts { display: flex; gap: 0.3rem; }
.files-folder-list {
  list-style: none; padding: 0; margin: 0;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: var(--surface);
}
.files-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0.85rem;
  border-top: 1px solid var(--border);
}
.files-row:first-child { border-top: none; }
.files-row-icon {
  font-weight: 800;
  text-align: center;
  font-size: 0.95rem;
}
.files-row-ok .files-row-icon { color: var(--success); }
.files-row-missing .files-row-icon { color: var(--warn); }
.files-row-staged .files-row-icon { color: var(--primary); }
.files-row-name code { font-family: ui-monospace, monospace; font-size: 0.85rem; color: var(--primary-dark); font-weight: 600; }
.files-row-meta { font-size: 0.74rem; color: var(--text-subtle); margin-top: 0.15rem; }
.files-row-size { font-size: 0.75rem; color: var(--text-subtle); font-family: ui-monospace, monospace; }
.files-row-staged { font-size: 0.74rem; color: var(--primary); font-weight: 700; letter-spacing: 0.3px; }
.files-row-action .btn { padding: 0.32rem 0.7rem; font-size: 0.78rem; }
.files-row-missing { background: linear-gradient(180deg, #fffaf0, transparent); }
.files-row-staged { background: linear-gradient(180deg, var(--primary-50), transparent); }

@media (max-width: 800px) {
  .files-staged-row { grid-template-columns: 1fr; }
  .files-tree-head { flex-direction: column; align-items: stretch; }
  .files-tree-head #rescan-btn { margin-left: 0; }
}

/* ---------- Preview card actions ---------- */
.preview-card-actions { display: flex; gap: 0.4rem; align-items: center; }
.preview-card-pdf { padding: 0.4rem 0.7rem; font-size: 0.78rem; }
.preview-card-pdf:disabled { opacity: 0.55; cursor: progress; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--primary-darker);
  color: rgba(255,255,255,0.7);
  padding: 2.2rem 1.5rem;
  margin-top: 2rem;
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 0.2rem; }
.footer-brand strong { color: #fff; font-size: 0.95rem; font-family: var(--font-display); letter-spacing: 0.3px; }
.footer-brand span { font-size: 0.82rem; opacity: 0.65; }
.footer-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-links a {
  color: rgba(255,255,255,0.78);
  font-size: 0.86rem;
  text-decoration: none;
  font-weight: 500;
}
.footer-links a:hover { color: #fff; text-decoration: underline; }

/* ---------- Viewer layout ---------- */
.viewer-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: calc(100vh - var(--header-h));
}

.viewer-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0; /* flex container must allow shrinking for inner scroll */
}
.viewer-course-info {
  padding: 1rem 1.15rem 0.95rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  flex-shrink: 0; /* header reserves its space; never squashed */
}
.viewer-course-info .code {
  font-size: 0.66rem;
  letter-spacing: 1.6px;
  color: var(--text-subtle);
  font-weight: 700;
  text-transform: uppercase;
}
.viewer-course-info h1 {
  margin: 0.2rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: var(--primary-dark);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.progress { height: 8px; }
.progress-label {
  font-size: 0.92rem;
  margin-top: 0.55rem;
  font-weight: 600;
  color: var(--text);
}
.progress-label strong { color: var(--primary); font-weight: 800; }
.progress-label #progress-percent {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--primary);
  font-weight: 800;
}
.progress {
  background: var(--primary-100);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(15,35,88,0.04);
}
.progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  width: 0;
  transition: width 250ms ease;
  border-radius: inherit;
}
.progress-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.45rem;
  display: flex;
  justify-content: space-between;
}
.progress-label strong { color: var(--text); }

.screen-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0 0.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0; /* THE FIX — flex children default to min-height:auto,
                    which blocks the scrollable list from shrinking and
                    therefore prevents the scrollbar from ever appearing. */
}

.screen-item {
  display: grid;
  grid-template-columns: 22px 1fr 8px;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.75rem 0.42rem 0.9rem;
  cursor: pointer;
  border-left: 2px solid transparent;
  font-size: 0.82rem;
  transition: background-color 120ms ease, border-color 120ms ease;
  position: relative;
  min-width: 0;
}
.screen-item:hover { background: var(--primary-50); }
.screen-item.active {
  background: var(--primary-100);
  border-left-color: var(--primary);
}
.screen-item.active .screen-title { color: var(--primary-dark); font-weight: 600; }
.screen-item.completed .screen-title { color: var(--text-muted); }
.screen-item.completed.active .screen-title { color: var(--primary-dark); }

.screen-checkbox {
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  background: #fff;
  cursor: pointer;
  padding: 0;
  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}
.screen-checkbox:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,0.12);
}
.screen-checkbox:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,0.28);
}
.screen-item.completed .screen-checkbox {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.screen-item.completed .screen-checkbox::before { content: "✓"; }
.screen-item.completed .screen-checkbox:hover {
  box-shadow: 0 0 0 3px rgba(22,163,74,0.2);
}

.screen-title {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  letter-spacing: 0.005em;
}
.screen-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.screen-num {
  flex: 0 0 auto;
  color: var(--text-subtle);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  width: 1.6em;
  text-align: right;
}
.screen-item.active .screen-num { color: var(--primary); }
.screen-item.completed .screen-num { color: var(--success); }

.screen-type-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
}
.screen-type-dot.youtube    { background: #dc2626; }
.screen-type-dot.pdf        { background: #ea580c; }
.screen-type-dot.document   { background: #1d4ed8; }
.screen-type-dot.html       { background: #16a34a; }
.screen-type-dot.image      { background: #7c3aed; }
.screen-type-dot.powerpoint { background: #db2777; }

.screen-item.missing { opacity: 0.85; }
.screen-item.missing .screen-title-text { color: var(--warn); }
.screen-item.missing .screen-type-dot { background: var(--warn); }

.sidebar-actions {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding: 0.75rem 1.25rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex-shrink: 0; /* footer reserves its space; never squashed by long list */
}
.certificate-cta { padding: 0; background: transparent; border: none; }
.certificate-cta .btn { width: 100%; padding: 0.7rem 1rem; }
#bundle-btn { width: 100%; padding: 0.6rem 1rem; font-size: 0.85rem; }
#bundle-btn:disabled { opacity: 0.55; cursor: progress; }

/* ---------- Viewer main ----------
   No internal overflow — the document body scrolls naturally so the
   sticky .screen-bar pins against the viewport (under the header). */
.viewer-main {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  min-width: 0;
}
.screen-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-xs);
  /* Stick to the top of the viewer so the screen title, hours and file
     reference stay visible while learners scroll long worksheets. */
  position: sticky;
  top: var(--header-h);
  z-index: 5;
}
.screen-bar h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--primary-dark);
  line-height: 1.25;
}
.screen-bar .meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
  letter-spacing: 0.1px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: center;
}
.screen-bar .meta-field { display: inline-flex; align-items: center; gap: 0.3rem; }
.screen-bar .meta-k {
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-subtle);
}
.screen-bar .meta-sep { color: var(--border-strong); margin: 0 0.15rem; }
.screen-bar .meta-field code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.76rem;
  background: var(--primary-50);
  color: var(--primary-dark);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--primary-100);
  font-weight: 600;
}
.screen-bar .actions {
  margin-left: auto;
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.screen-bar .actions .btn { white-space: nowrap; }
.screen-bar .actions-sep {
  width: 1px;
  align-self: stretch;
  min-height: 1.5rem;
  background: var(--border-strong);
  margin: 0 0.1rem;
}
/* "Options" dropdown — gathers the secondary screen actions into one menu. */
.screen-bar .actions .options-menu { position: relative; display: inline-flex; }
.options-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 60;
}
.options-dropdown[hidden] { display: none; }
.options-dropdown .opt-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  background: transparent;
  border-radius: 7px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.options-dropdown .opt-item:hover:not(:disabled),
.options-dropdown .opt-item:focus-visible { background: var(--primary-50); color: var(--primary-dark); outline: none; }
.options-dropdown .opt-item:disabled { opacity: 0.4; cursor: not-allowed; }
.options-dropdown .opt-item[hidden] { display: none; }
/* "Mark complete" + the show-asset-info checkbox sit under the downloads,
   separated by a divider. */
.options-dropdown #mark-course-btn { margin-top: 0.25rem; border-top: 1px solid var(--border); border-radius: 0; padding-top: 0.6rem; }
.options-dropdown .opt-check input { margin: 0; flex: none; width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }

/* Show/hide the Title·Time·Type·Asset line under the screen title. */
.hide-asset-info #screen-meta { display: none; }
/* Phones: the Title / Time / Type / Asset line takes a third of the screen; the screen title above says the same thing. */
@media (max-width: 700px) { #screen-meta { display: none; } }

/* Screen stage */
.screen-stage {
  flex: 1;
  overflow: auto;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.screen-stage iframe {
  flex: 1;
  border: none;
  width: 100%;
  height: 100%;
  background: #fff;
}

/* YouTube wrapper — responsive 16:9 with a comfortable max-width so
   the video sits centred on the stage. Includes 'Open on YouTube'
   and 'Fullscreen' actions below the frame. */
.stage-youtube {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.75rem;
  background: linear-gradient(180deg, var(--primary-darker), var(--primary-dark));
}
.stage-youtube-frame {
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.stage-youtube-frame iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  flex: none;
}
.stage-youtube-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.stage-youtube-actions .btn {
  background: rgba(255,255,255,0.95);
  color: var(--primary-dark);
  border-color: rgba(255,255,255,0.5);
}
.stage-youtube-actions .btn:hover {
  background: #fff;
  border-color: #fff;
}

.screen-stage .stage-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--primary-darker), var(--primary-dark));
  padding: 1.5rem;
}
.screen-stage .stage-image img,
.screen-stage .stage-image svg {
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

/* Document rendering */
.stage-doc {
  background: var(--bg);
  padding: 2rem 1.5rem 3rem;
  overflow: auto;
}
.stage-doc-inner {
  /* Read like a clean Word page, not raw text. Narrower card gives a
     comfortable ~70-character measure; relaxed leading + paragraph
     rhythm stop a wall of short paragraphs feeling cramped. No content
     or structure is changed here — purely typographic. */
  max-width: 1000px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 3rem 3.5rem 3.25rem;
  font-family: "Segoe UI", Calibri, system-ui, -apple-system, Arial, sans-serif;
  font-size: 1.02rem;
  line-height: 1.7;
  color: #1f2440;
  text-wrap: pretty;
  -webkit-hyphens: none;
  hyphens: none;
}
/* A rendered .docx (docx-preview) is shown at the document's TRUE layout (so a
   table matches the source), then scaled as a whole by app.js to fit the viewer
   width — faithful AND no sideways scrolling. Only the gray page-frame is dropped
   so the page sits cleanly in the card. */
.stage-doc-inner .docx-scalehost { width: 100%; }
.stage-doc-inner .docx-wrapper { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
/* Keep tables/images within the page and wrap long cell text — like Word, where the
   table fits the page. (Without this, docx-preview lets an unbreakable string expand
   a column and the table runs off the page.) The page is then scaled to fit the screen. */
.stage-doc-inner .docx-wrapper table { max-width: 100% !important; }
.stage-doc-inner .docx-wrapper td, .stage-doc-inner .docx-wrapper th { overflow-wrap: anywhere; word-break: break-word; }
.stage-doc-inner .docx-wrapper img { max-width: 100%; height: auto; }
/* Placeholder shown in place of a picture the browser can't load (an image that
   was linked to the author's PC, or never embedded in the .docx). Keeps the slot
   size so surrounding text stays in the document's layout, and reads as intentional
   rather than a broken box. */
.stage-doc-inner .docx-img-missing {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  box-sizing: border-box; max-width: 100%; min-width: 72px; min-height: 56px; padding: .75rem 1rem;
  vertical-align: middle; text-align: center; line-height: 1.2;
  background: repeating-linear-gradient(45deg, #f4f6fb, #f4f6fb 11px, #eef1f8 11px, #eef1f8 22px);
  border: 1px dashed #c4cbe0; border-radius: 8px; color: #8a93b0; font-size: .78rem;
}
.stage-doc-inner .docx-img-missing-glyph { font-size: 1.6rem; opacity: .55; line-height: 1; }
.stage-doc-inner .docx-img-missing-text { letter-spacing: .01em; }
.stage-doc-inner h1 {
  font-family: var(--font-display);
  font-size: 1.85rem;
  color: var(--primary-dark);
  margin: 0 0 0.6em;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.stage-doc-inner h1.doc-h1 {
  display: inline-block;
  background: linear-gradient(135deg, var(--primary-100), var(--primary-50));
  border: 1px solid var(--primary-100);
  color: var(--primary-dark);
  padding: 0.45rem 1rem 0.5rem;
  border-radius: 99px;
  font-size: 1rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 1.4rem;
}
.stage-doc-inner h2 {
  font-family: var(--font-display);
  font-size: 1.22rem;
  color: var(--primary-dark);
  margin: 1.9em 0 0.55em;
  font-weight: 700;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}
.stage-doc-inner h2.doc-section {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.1rem;
  color: var(--primary-dark);
  margin: 1.8rem 0 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.stage-doc-inner h2.doc-section::before {
  content: "";
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--primary-100);
  color: var(--primary);
  flex: 0 0 auto;
  border: 1px solid transparent;
}
.stage-doc-inner h2.design-brief::before { content: "📋"; }
.stage-doc-inner h2.hardware::before     { content: "🔧"; background: #ecfeff; color: #0e7490; }
.stage-doc-inner h2.software::before     { content: "💻"; background: #f5f3ff; color: var(--primary); }
.stage-doc-inner h2.challenges::before   { content: "🎯"; background: #fff1f2; color: #be123c; }
.stage-doc-inner h2.hints::before        { content: "💡"; background: #fef9c3; color: #a16207; }
.stage-doc-inner h2.over-to-you::before  { content: "▶";  background: var(--success-50); color: var(--success); }
.stage-doc-inner h2.risk::before         { content: "⚠"; background: var(--warn-bg); color: var(--warn); }

.stage-doc-inner ul.doc-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.4rem 0 1rem;
}
.stage-doc-inner ul.doc-list li {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 0.55rem 0.85rem;
  font-size: 0.95rem;
  color: var(--text);
  margin: 0;
}

.stage-doc-inner .worksheet-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  align-items: center;
  background: linear-gradient(135deg, var(--primary-100), var(--primary-50));
  border: 1px solid var(--primary-100);
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  margin: 0 0 1.4rem;
  font-size: 0.74rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--primary-dark);
}
.stage-doc-inner .worksheet-header span {
  display: inline-flex;
  align-items: center;
}
.stage-doc-inner .worksheet-header span:not(:last-child)::after {
  content: "•";
  margin: 0 0.7rem;
  color: var(--accent);
  font-weight: 800;
}

/* Inline YouTube embed — works anywhere on the site (worksheet bodies, dashboard prep, etc.) */
.inline-youtube {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  margin: 1.2rem 0 1.4rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #000;
}
.inline-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  flex: none;
}

.stage-doc-inner p.no-video {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--text-subtle);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 0.4rem 0.75rem;
  border-radius: 99px;
  margin: 0.4rem 0 1rem;
}
.stage-doc-inner p.no-video::before { content: "▶"; color: var(--text-subtle); }

/* Hints get a soft callout treatment for the paragraphs immediately following */
.stage-doc-inner h2.hints + p,
.stage-doc-inner h2.hints + p + p,
.stage-doc-inner h2.hints + p + p + p {
  background: linear-gradient(180deg, #fffbeb, #fff);
  border-left: 3px solid #f59e0b;
  padding: 0.7rem 0.95rem;
  border-radius: 0 6px 6px 0;
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

/* Click-to-reveal Hints section (replaces the always-visible h2.hints).
   Closed state hides the answers behind a yellow chip; open state reveals
   the same callout-styled paragraphs. */
.stage-doc-inner details.hints-details {
  margin: 1.3em 0 1em;
}
.stage-doc-inner details.hints-details > .hints-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem 0.55rem 0.7rem;
  background: #fffbeb;
  color: #a16207;
  border: 1px solid #fde68a;
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 150ms ease, border-color 150ms ease, transform 80ms ease;
  user-select: none;
}
.stage-doc-inner details.hints-details > .hints-summary::-webkit-details-marker { display: none; }
.stage-doc-inner details.hints-details > .hints-summary::marker { content: ''; }
.stage-doc-inner details.hints-details > .hints-summary:hover {
  background: #fef3c7;
  border-color: #fcd34d;
}
.stage-doc-inner details.hints-details > .hints-summary:active { transform: translateY(1px); }
.stage-doc-inner details.hints-details > .hints-summary .hints-summary-ico {
  width: 22px;
  height: 22px;
  background: #fcd34d;
  color: #78350f;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.stage-doc-inner details.hints-details[open] > .hints-summary {
  background: #fef3c7;
  border-color: #fcd34d;
  margin-bottom: 0.6rem;
}
.stage-doc-inner details.hints-details > p,
.stage-doc-inner details.hints-details > ul,
.stage-doc-inner details.hints-details > ol {
  background: linear-gradient(180deg, #fffbeb, #fff);
  border-left: 3px solid #f59e0b;
  padding: 0.7rem 0.95rem;
  border-radius: 0 6px 6px 0;
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}
.stage-doc-inner h3 { font-size: 1.05rem; color: var(--text); margin: 1.4em 0 0.35em; font-weight: 700; }
.stage-doc-inner p { margin: 0 0 0.85em; max-width: 68ch; }

/* Custom Word styles recovered via the mammoth styleMap. h2.ws-name uses
   the normal h2 look; the rest get sensible weight so the source's
   formatting finally shows on the page. */
.stage-doc-inner h2.ws-name { margin-top: 1.5em; }
.stage-doc-inner .ws-number {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.1em;
}
.stage-doc-inner .pack-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-subtle);
  letter-spacing: 0.4px;
  margin: 0 0 0.3em;
}
.stage-doc-inner .doc-contents { font-weight: 600; color: var(--text); margin: 0 0 0.25em; }
.stage-doc-inner .yt-url { font-size: 0.85rem; color: var(--text-muted); word-break: break-all; }
.stage-doc-inner .ai-instr {
  font-size: 0.82rem;
  color: var(--text-subtle);
  background: var(--surface-2);
  border-left: 3px solid var(--border-strong);
  padding: 0.4em 0.7em;
  margin: 0 0 0.6em;
  border-radius: 0 6px 6px 0;
}
.stage-doc-inner em { font-style: italic; }
.stage-doc-inner strong { font-weight: 700; color: #141938; }
.stage-doc-inner a { color: var(--primary); text-underline-offset: 2px; }
/* First line of these worksheets is the doc title in <p><strong> form.
   Give it a little more presence WITHOUT changing the markup. */
.stage-doc-inner > p:first-child { margin-bottom: 1.3em; }
.stage-doc-inner > p:first-child strong { font-size: 1.4rem; color: var(--primary-dark); letter-spacing: -0.01em; }
.stage-doc-inner ul, .stage-doc-inner ol { padding-left: 1.4em; margin: 0 0 0.85em; }
.stage-doc-inner li { margin-bottom: 0.3em; }
.stage-doc-inner img {
  max-width: 100%; height: auto;
  border-radius: var(--r-sm); margin: 0.7em 0;
  /* Honour the picture's own EXIF orientation. Modern browsers do this
     by default for <img>, but a few contexts override to "none", which
     leaves photos on their side after Word strips/keeps EXIF
     inconsistently. Force it on for every image in screen content. */
  image-orientation: from-image;
}
/* Same default for any image in admin previews / file manager / new course thumbnails */
.am-preview img, .am-preview-img img, .am-doc img, .am-tile-thumb img,
.am-scorm-frame img { image-orientation: from-image; max-width: 100%; height: auto; }
.stage-doc-inner table { border-collapse: collapse; margin: 1em 0; width: 100%; font-size: 0.95em; }
.stage-doc-inner th, .stage-doc-inner td { border: 1px solid var(--border); padding: 0.45em 0.7em; vertical-align: top; }
.stage-doc-inner th { background: var(--primary-50); }
.stage-doc-inner code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; background: var(--primary-50); padding: 0.1em 0.35em; border-radius: 4px; }
.stage-doc-inner pre { background: var(--primary-50); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.9em 1em; overflow-x: auto; }

/* ── docx-preview: render the .docx with its OWN embedded styles, verbatim.
   The worksheet-theme rules above are scoped to .stage-doc-inner and would
   leak into the rendered document (forcing full-width tables, header tints,
   borders on borderless cells, 68ch paragraphs, etc.). These higher-
   specificity rules neutralise that leakage so the document looks exactly as
   authored — docx-preview's own inline styles still win where present. */
.stage-doc-inner .docx-wrapper { background: transparent; padding: 1rem 0; box-shadow: none; display: block; }
.stage-doc-inner .docx-wrapper section.docx { margin: 0 auto 1rem; background: #fff; box-shadow: 0 1px 8px rgba(20,25,56,.12); }
.stage-doc-inner .docx-wrapper p { max-width: none; margin: revert; }
.stage-doc-inner .docx-wrapper table { width: auto; border-collapse: collapse; margin: revert; font-size: inherit; }
.stage-doc-inner .docx-wrapper th, .stage-doc-inner .docx-wrapper td { border: none; background: transparent; padding: revert; vertical-align: revert; }
.stage-doc-inner .docx-wrapper th { font-weight: inherit; }
.stage-doc-inner .docx-wrapper img { max-width: none; height: revert; border-radius: 0; box-shadow: none; }
.stage-doc-inner .docx-wrapper ul, .stage-doc-inner .docx-wrapper ol { padding-left: revert; margin: revert; }
.stage-doc-inner .docx-wrapper strong { color: inherit; }
.stage-doc-inner .docx-wrapper code { background: transparent; padding: 0; border-radius: 0; }
/* Let wide pages scroll rather than overflow the layout */
.stage-doc-inner { overflow-x: auto; }

.stage-doc-toolbar {
  max-width: 800px;
  margin: 0 auto 0.9rem;
  display: flex;
  justify-content: flex-end;
}

/* Status / empty / missing screens */
.stage-loading, .stage-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  padding: 3rem 2rem;
  text-align: center;
  font-size: 0.95rem;
}
/* ---------- PDF viewer (always-on toolbar + iframe + fallback) ---------- */
.stage-pdf {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #2d2b40;
  min-height: 0;
}
/* Portrait datasheets looked cramped in a short, wide box because the flex
   chain wasn't giving the stage full height. Force a tall reading area
   (the .screen-stage scrolls if it overflows). Not applied in the
   fixed-overlay "fullscreen" mode, which already fills the viewport. */
.stage-pdf:not(.pdf-overlay) { min-height: calc(100vh - var(--header-h, 56px) - 60px); }
.stage-pdf-toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.95rem;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.stage-pdf-name {
  flex: 1;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.8rem;
  color: var(--primary-dark);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage-pdf-actions { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.stage-pdf-actions .btn { padding: 0.4rem 0.75rem; font-size: 0.82rem; }
.stage-pdf-frame {
  position: relative;
  flex: 1;
  min-height: 0;
}
/* CSS-overlay "fullscreen": the whole .stage-pdf wrap is pinned over
   the viewport. Doesn't use the native Fullscreen API (which the
   cross-origin PDF iframe silently blocks), so it always works. */
.stage-pdf.pdf-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #525659;
  margin: 0;
  display: flex;
  flex-direction: column;
}
body.pdf-overlay-open { overflow: hidden; }
.stage-pdf.pdf-overlay .stage-pdf-frame { flex: 1; }
.stage-pdf.pdf-overlay .stage-pdf-toolbar { background: #323639; }
.stage-pdf.pdf-overlay .stage-pdf-name { color: #fff; }
.stage-pdf-exit {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 10000;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.95);
  color: var(--primary-dark);
  border: 0;
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.stage-pdf-exit:hover { background: #fff; }
.stage-pdf-iframe,
.stage-pdf-object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}
.stage-pdf-fallback {
  position: absolute;
  inset: 0;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  gap: 1rem;
}
.stage-pdf-fallback-icon { font-size: 3rem; line-height: 1; }
.stage-pdf-fallback h2 { margin: 0; font-family: var(--font-display); color: var(--primary-dark); font-size: 1.4rem; }
.stage-pdf-fallback p { margin: 0; max-width: 540px; color: var(--text-muted); }
.stage-pdf-fallback-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; justify-content: center; }
.stage-pdf-fallback-src code {
  font-size: 0.78rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  color: var(--text-muted);
  max-width: 540px;
  word-break: break-all;
  display: inline-block;
}

.stage-missing,
.stage-pptx {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  gap: 1.1rem;
}
.stage-missing h2,
.stage-pptx h2 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--primary-dark);
  font-size: 1.45rem;
}
.stage-missing p,
.stage-pptx p {
  color: var(--text-muted);
  max-width: 540px;
  margin: 0;
  font-size: 0.96rem;
}
.stage-missing .badge {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn);
  border-radius: 99px;
  padding: 0.32rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.stage-missing code {
  background: var(--primary-50);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.92em;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  color: var(--primary-dark);
}

/* ---------- Certificate ---------- */
.cert-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1rem 4rem;
}
.cert-controls {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.cert-input {
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  font-family: inherit;
  min-width: 300px;
  background: var(--surface);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cert-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(29,78,216,0.18);
}

.cert {
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 1.414/1;
  background:
    radial-gradient(circle at 0% 0%, rgba(29,78,216,0.04), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(212,175,55,0.06), transparent 40%),
    #fff;
  border: 12px solid var(--primary-dark);
  padding: 3rem 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  box-shadow: var(--shadow-lg);
  border-radius: 4px;
  position: relative;
}
/* Gold inner frame as a positioned pseudo-element rather than `outline`
   — outline is not rendered by html2canvas, so Save-as-PDF would drop
   the frame. A bordered ::before is captured faithfully. */
.cert::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1.5px solid #d4af37;
  border-radius: 2px;
  pointer-events: none;
}
.cert > * { position: relative; z-index: 1; }
.cert .crest {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 8px;
  color: var(--primary-dark);
  font-weight: 700;
}
.cert .crest::before, .cert .crest::after {
  content: "◆";
  margin: 0 0.7rem;
  color: #d4af37;
  font-size: 0.9em;
  vertical-align: middle;
}
.cert .title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--primary-dark);
  margin: 1.1rem 0 0.4rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.cert .subtitle {
  font-size: 1.02rem;
  color: var(--text-muted);
  margin: 0 0 1.2rem;
  letter-spacing: 0.4px;
}
.cert .recipient {
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  color: var(--primary);
  font-family: "Brush Script MT", "Lucida Handwriting", "Segoe Script", cursive;
  margin: 0.3rem 0;
  min-height: 1.4em;
  line-height: 1.2;
}
.cert .body {
  font-size: 1.05rem;
  max-width: 760px;
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  line-height: 1.55;
}
.cert .signoff {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 1.5rem;
  font-size: 0.88rem;
  gap: 1rem;
}
.cert .signoff .col { flex: 1; padding: 0 1rem; }
.cert .signoff .line {
  border-top: 1px solid #94a3c7;
  margin: 0 0 0.45rem;
}
.cert .signoff strong {
  color: var(--primary-dark);
  font-size: 0.78rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.15rem;
}

/* Logo + richer detail (replaces the old text "MATRIX" crest) */
.cert .cert-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}
.cert .cert-logo {
  width: clamp(170px, 26%, 240px);
  height: auto;
  display: block;
}
.cert .cert-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.cert .cert-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cert .cert-course {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: 0.2px;
  margin: 0.45rem 0 0;
  padding: 0 1rem;
}
.cert .cert-awarded {
  margin: 0.7rem 0 0 !important;
}
.cert .cert-foot {
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-subtle);
}

@media print {
  .site-header, .cert-controls, .viewer-shell { display: none; }
  body { background: #fff; }
  .cert-shell { padding: 0; }
  .cert {
    border-width: 8px;
    box-shadow: none;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cert .cert-logo {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---------- Responsive ---------- */
/* Narrow viewport — only switch to single-column below 700px.
   980px was too aggressive: a normal browser window at 900-1100px
   wide hit this and the sidebar got capped at 60vh, which made the
   internal screen-list scroll inside a tiny window.
   Anything wider than 700px keeps the two-column desktop layout so
   the sidebar gets full viewport height for its internal scroll. */
@media (max-width: 700px) {
  .viewer-shell { grid-template-columns: 1fr; height: auto; }
  .viewer-sidebar { max-height: none; }
  .screen-bar { flex-wrap: wrap; }
  /* Prev + Next share the top row; "Mark complete & next" gets its own full
     width below. min-width:0 lets the long button shrink instead of overflowing
     the viewport (the cut-off-buttons bug). */
  .screen-bar .actions {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .screen-bar .actions .btn {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.85rem;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    white-space: nowrap;
  }
  /* Options sits on the top row alongside Prev/Next (equal thirds); the dropdown
     stays absolutely positioned so it overlays the stage. */
  .screen-bar .actions .options-menu { flex: 1 1 0; min-width: 0; }
  .screen-bar .actions .options-menu #options-btn { width: 100%; }
  .screen-bar .actions #complete-btn { flex-basis: 100%; order: 3; }
}
@media (max-width: 600px) {
  .catalog { margin-top: -1rem; }
  .stage-doc { padding: 1rem; }
  .stage-doc-inner { padding: 1.5rem 1.4rem 2rem; }
  .cert { padding: 1.5rem; }
}

/* =====================================================================
   New sidebar design (ms- prefix) — used by sidebar.js
   Replaces the visual style of .viewer-sidebar contents while keeping
   the outer .viewer-shell grid layout intact. Old .screen-list / .screen-item
   styles above are unused once sidebar.js controls all pages.
   ===================================================================== */

.ms-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--text);
}

/* Header */
.ms-header {
  padding: 1.25rem 1.1rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.ms-brand {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  text-decoration: none;
}
.ms-brand:hover { text-decoration: none; }
.ms-brand-logo {
  height: 30px;
  width: auto;
  display: block;
}
.ms-brand-eyebrow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  font-weight: 700;
}
.ms-course-code {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.3px;
}
.ms-course-title {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}
/* Sidebar header is a link back to the course dashboard. */
.ms-header-link {
  display: block;
  margin-top: 0.5rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
  transition: background 150ms ease, border-color 150ms ease, transform 110ms ease;
}
.ms-header-link:hover {
  background: var(--primary-50);
  border-color: var(--primary);
  text-decoration: none;
  transform: translateY(-1px);
}
.ms-header-link .ms-course-code { display: block; }
.ms-header-link .ms-course-title { display: block; }
.ms-header-dash {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--primary);
}
.ms-header-link:hover .ms-header-dash { text-decoration: underline; }

/* Overall progress */
.ms-overall {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ms-overall-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.ms-overall-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 700;
}
.ms-overall-pct {
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ms-bar {
  width: 100%;
  height: 6px;
  background: var(--primary-50);
  border-radius: 99px;
  overflow: hidden;
}
.ms-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  border-radius: 99px;
  transition: width 350ms ease;
}

/* Nav scroll area */
.ms-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0;
  min-height: 0;
}
.ms-section {
  padding: 0.15rem 0.65rem;
  margin-bottom: 0.35rem;
}
/* Tools (SCORM Compliance) live OUTSIDE the scrolling nav now, so they
   anchor to the bottom of the sidebar regardless of how many items the
   nav has. A divider line sits above to separate them from the nav. */
.ms-section-tools {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 0.65rem 0.65rem 0.7rem;
  margin: 0;
  background: var(--surface);
}

/* Top-level nav items (Dashboard, All Courses, Tools) */
.ms-nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  font-size: 0.83rem;
  font-weight: 600;
  transition: background 120ms ease, color 120ms ease;
}
.ms-nav-item:hover {
  background: var(--primary-50);
  text-decoration: none;
}
.ms-nav-item.active {
  background: var(--primary-100);
  color: var(--primary);
}
.ms-nav-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f0f1f5;
  color: var(--text-muted);
}
.ms-nav-ico svg { width: 14px; height: 14px; }
.ms-nav-ico-primary { background: var(--primary); color: #fff; }
.ms-nav-ico-mute    { background: #f0f1f5; color: var(--text); }
.ms-nav-ico-blue    { background: #eff6ff; color: #2563eb; }
.ms-nav-ico-amber   { background: #fef3c7; color: #b45309; }
.ms-nav-item.active .ms-nav-ico-primary { background: var(--primary); }
.ms-nav-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Expandable course card */
.ms-course-group {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0.45rem -0.65rem;
  background: var(--surface);
}
.ms-course-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background 120ms ease;
}
.ms-course-head:hover { background: var(--primary-50); }
.ms-course-group.expanded .ms-course-head {
  background: linear-gradient(90deg, var(--primary-100), transparent);
}
.ms-course-thumb {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--primary-50);
}
.ms-course-info {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}
.ms-course-info-code {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.5px;
  line-height: 1;
}
.ms-course-info-title {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}
.ms-course-info-progress {
  display: block;
  font-size: 0.66rem;
  color: var(--text-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
/* Chevron toggle on the course card.
   Sized to be obvious (22px × 22px chevron inside a 32×32 button-shaped
   hit area with a violet fill) so learners can find and use the toggle
   at a glance. SAME style on every screen — was previously rendered in
   two visual states (small grey when in the viewer, larger purple
   everywhere else), which made it feel inconsistent. */
.course-nav-arrow {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--primary-50);
  color: var(--primary);
  transition: transform 0.25s ease, background 120ms ease;
  flex-shrink: 0;
  box-sizing: content-box;
}
.ms-course-head:hover .course-nav-arrow {
  background: var(--primary-100);
}
.ms-course-group.expanded .course-nav-arrow { transform: rotate(90deg); }
.ms-course-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ms-course-group.expanded .ms-course-body { max-height: 4000px; }

/* Tier sections */
.ms-tier { padding: 0.6rem 0.95rem 0.35rem; }
.ms-tier-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
  color: var(--text-muted);
}
.ms-tier-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-subtle);
}
.ms-tier-label.tier-bronze { color: var(--bronze); }
.ms-tier-label.tier-silver { color: var(--silver); }
.ms-tier-label.tier-gold   { color: var(--gold); }
.ms-tier-label.tier-bronze .ms-tier-dot { background: var(--bronze); }
.ms-tier-label.tier-silver .ms-tier-dot { background: var(--silver); }
.ms-tier-label.tier-gold   .ms-tier-dot { background: var(--gold); }
.ms-tier-label.tier-intro       { color: var(--text-muted); }
.ms-tier-label.tier-intro       .ms-tier-dot { background: var(--primary); }
.ms-tier-label.tier-homework    { color: #b45309; }
.ms-tier-label.tier-homework    .ms-tier-dot { background: #f59e0b; }
.ms-tier-label.tier-assessment  { color: #b91c1c; }
.ms-tier-label.tier-assessment  .ms-tier-dot { background: #dc2626; }
.ms-tier-label.tier-certificate { color: var(--success); }
.ms-tier-label.tier-certificate .ms-tier-dot { background: var(--success); }
.ms-tier-label.tier-other       { color: var(--text-muted); }
.ms-tier-label.tier-other       .ms-tier-dot { background: var(--text-subtle); }

/* Readable type badge under each sidebar row's title so learners can
   tell at a glance what each screen is: Worksheet / Video / PDF /
   Slides / Page / Image. Colour-coded by type. */
.ms-ws-type-badge {
  display: inline-block;
  align-self: flex-start;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.5;
  color: #fff;
  background: var(--primary);
}
.ms-ws-type-badge.document   { background: #1d4ed8; }
.ms-ws-type-badge.html       { background: #16a34a; }
.ms-ws-type-badge.youtube    { background: #dc2626; }
.ms-ws-type-badge.pdf        { background: #ea580c; }
.ms-ws-type-badge.image      { background: #7c3aed; }
.ms-ws-type-badge.powerpoint { background: #db2777; }

/* Worksheet rows */
.ms-ws-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.78rem;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.ms-ws-item:hover {
  background: var(--primary-50);
  text-decoration: none;
}
.ms-ws-item.active {
  background: var(--primary-100);
  color: var(--primary);
}
.ms-ws-item.done .ms-ws-num {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}
/* Completed screen — faded green wash + left accent + tick so progress
   is obvious at a glance. The active row keeps its own primary highlight,
   so the green is suppressed while a done screen is the one being viewed. */
.ms-ws-item.done:not(.active) {
  background: var(--success-50);
  box-shadow: inset 3px 0 0 var(--success);
}
.ms-ws-item.done:not(.active):hover {
  background: #d6f3e0;
}
.ms-ws-item.done:not(.active) .ms-ws-title {
  color: var(--success);
}
/* Interactive per-screen completion toggle. Lets a learner mark any page
   done straight from the sidebar list, instead of only via the in-page
   "Mark complete & next" button. Empty circle = not done; filled green
   check = done. */
.ms-ws-tick {
  flex: 0 0 auto;
  align-self: center;
  width: 20px;
  height: 20px;
  margin-left: 0.35rem;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.ms-ws-tick::after {
  content: "✓";
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
}
.ms-ws-tick:hover { border-color: var(--success); background: var(--success-50); }
.ms-ws-tick:hover::after { color: var(--success); }
.ms-ws-tick:active { transform: scale(0.88); }
.ms-ws-tick:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ms-ws-item.done .ms-ws-tick {
  background: var(--success);
  border-color: var(--success);
}
.ms-ws-item.done .ms-ws-tick::after { color: #fff; }
/* Missing screens: visually subdued but still clickable. Clicking
   takes the learner to the viewer's friendly "Resource missing —
   please send X" panel, which is more useful than greying out a
   row and disabling the click entirely. */
.ms-ws-item.missing { opacity: 0.82; }
.ms-ws-item.missing .ms-ws-title { color: var(--warn); font-style: italic; }
.ms-ws-item.missing .ms-ws-type-badge { background: var(--warn); }
.ms-ws-item.missing:hover { opacity: 1; background: var(--warn-bg); }
.ms-ws-num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ms-ws-item.active .ms-ws-num {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
/* Title + type badge stacked in a column to the right of the number */
.ms-ws-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ms-ws-title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.ms-ws-item { align-items: flex-start; }
.ms-ws-item .ms-ws-num { margin-top: 1px; }

/* Reset bar at sidebar bottom */
.ms-reset-bar {
  padding: 0.7rem 1.1rem 0.9rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.ms-reset-btn {
  width: 100%;
  padding: 0.6rem 0.5rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-subtle);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.ms-reset-btn:hover {
  border-color: #d97706;
  color: #c2410c;
  background: #fff7ed;
}

/* =====================================================================
   Universal app shell — injected by chrome.js on every page.
   .app-shell wraps the whole page: header on top, then a grid of
   sidebar + main column. Replaces the old .viewer-shell and .catalog-shell.
   ===================================================================== */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app-body {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  flex: 1 1 auto;
  min-height: 0;
}
.app-shell-bare .app-body { grid-template-columns: 1fr; }
.app-body > .ms-sidebar {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  align-self: start;
}
.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}
.app-main > .site-footer { margin-top: auto; }

/* Viewer pages with internal scroll panes need their viewer-main to fill */
.app-main > .viewer-shell,
.app-main > .viewer-main {
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 900px) {
  .app-body { grid-template-columns: 1fr; }
  /* The screen list can't stay docked on a narrow screen, so it becomes an
     off-canvas drawer opened by the header's toggle button (see chrome.js). */
  .app-body > .ms-sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    width: min(86vw, 340px);
    height: auto;
    z-index: 60;
    transform: translateX(-110%);
    transition: transform 0.25s ease;
    box-shadow: 8px 0 28px rgba(0,0,0,0.28);
  }
  .app-shell.sidebar-mobile-open .app-body > .ms-sidebar { transform: translateX(0); visibility: visible; pointer-events: auto; }
  .app-shell.sidebar-mobile-open .sidebar-backdrop { display: block; }
}
/* Off-canvas drawer backdrop — only ever shown on mobile via .sidebar-mobile-open. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 55;
}

/* Legacy compat: old per-page wrappers are passthroughs now. */
.viewer-shell {
  display: contents;
}

/* Footer actions inside the viewer main column.
   Two-row layout: top row holds the certificate CTA on the left and
   the 'Next worksheet →' button on the right; bottom row holds the
   'Download all worksheets PDF' link spanning full width. Compact
   padding so it doesn't dominate the page. */
.viewer-footer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 1.2rem 0.7rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.viewer-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.viewer-footer-actions .btn { padding: 0.45rem 0.9rem; font-size: 0.82rem; }
.viewer-footer-actions .certificate-cta { padding: 0; background: transparent; border: 0; margin: 0; }
.viewer-footer-actions .viewer-next-btn { margin-left: auto; }
.viewer-footer-actions .viewer-bundle-btn {
  width: 100%;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  color: var(--primary);
  background: transparent;
  border: 1px dashed var(--border-strong);
}
.viewer-footer-actions .viewer-bundle-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary);
  border-style: solid;
}
.viewer-footer-actions .viewer-bundle-btn:disabled { opacity: 0.55; cursor: progress; }

/* Hide old sidebar legacy slots if pages still reference them */
.viewer-sidebar .sidebar-actions { display: none; }

/* ---------- Account page ---------- */
.account-hero .account-name-row {
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.account-hero .account-name-row label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}
.account-hero #account-name-input {
  flex: 1 1 260px;
  max-width: 360px;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}
.account-hero #account-name-input::placeholder { color: var(--text-subtle); }
.account-hero #account-name-input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  border-color: var(--primary);
}

.account-section-hint {
  margin: 0.4rem 0 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.account-course-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 1.1rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
/* Text-only account rows (course thumbnail removed) — drop the 88px image
   column so the body + actions fill the row. */
.account-course-row-textonly { grid-template-columns: 1fr auto; }
.account-course-row:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.account-course-row .stats-course-row-thumb {
  width: 88px;
  height: 64px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--primary-50);
  display: block;
  border: 1px solid var(--border);
}
.account-course-row .stats-course-row-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.account-course-row .stats-course-row-head .code {
  font-size: 0.65rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 800;
}
.account-course-row .stats-course-row-head strong { font-size: 1rem; color: var(--text); }
.account-course-row .stats-course-row-bar {
  width: 100%;
  height: 6px;
  background: var(--primary-50);
  border-radius: 99px;
  overflow: hidden;
  margin: 0.25rem 0 0.4rem;
}
.account-course-row .stats-course-row-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  border-radius: inherit;
  transition: width 250ms ease;
}
.account-course-row .stats-course-row-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.account-course-row .stats-course-row-meta strong { color: var(--text); }
.account-course-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  min-width: 200px;
}
.account-course-actions .btn { padding: 0.5rem 0.85rem; font-size: 0.82rem; }

@media (max-width: 700px) {
  .account-course-row { grid-template-columns: 1fr; }
  .account-course-row .stats-course-row-thumb { width: 100%; height: 100px; }
  .account-course-actions { flex-direction: row; min-width: 0; }
  .account-course-actions .btn { flex: 1 1 auto; }
}

/* ---------- Support page ---------- */
.support-section {
  max-width: 1100px;
  margin: -2rem auto 3.5rem;
  padding: 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.support-card-group {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.7rem 1.7rem 1.8rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* Accent rail down the left edge of every card group */
.support-card-group::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}
.support-card-head {
  margin-bottom: 1.2rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid var(--border);
}
.support-card-eyebrow {
  display: inline-block;
  font-size: 0.64rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--primary);
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
  padding: 0.24rem 0.62rem;
  border-radius: 99px;
}
.support-card-head h2 {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0.85rem;
}
.support-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: background 160ms ease, border-color 160ms ease,
              box-shadow 160ms ease, transform 120ms ease;
}
.support-link:hover {
  background: var(--primary-50);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-2px);
}
.support-link-ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.15rem;
  box-shadow: 0 4px 12px -4px var(--primary);
}
.support-link-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.support-link-body strong { font-size: 0.98rem; font-weight: 700; color: var(--text); }
.support-link-body span { font-size: 0.8rem; line-height: 1.45; color: var(--text-muted); }
.support-link-arrow {
  color: var(--primary);
  font-weight: 800;
  flex-shrink: 0;
  font-size: 1.05rem;
  transition: transform 160ms ease;
}
.support-link:hover .support-link-arrow { transform: translateX(4px); }

/* Plain how-to grid (no links) used by the "Using the Course Viewer" card. */
.support-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}
.support-help {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.05rem 1.1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  transition: box-shadow 160ms ease, transform 120ms ease, border-left-color 160ms ease;
}
.support-help:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  border-left-color: var(--primary-dark);
}
.support-help strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.support-help span {
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.support-help a { color: var(--primary); font-weight: 600; }
.support-help em { font-style: normal; font-weight: 600; color: var(--text); }

/* ---------- Mapping page (BTEC curriculum guide) ---------- */
.mapping-section {
  max-width: 1200px;
  margin: -2rem auto 3rem;
  padding: 0 1.4rem;
}
.mapping-level {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-xs);
}
.mapping-level-head { margin-bottom: 1.1rem; }
.mapping-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.mapping-level-badge.tier-bronze { background: var(--bronze-bg); color: var(--bronze); }
.mapping-level-badge.tier-silver { background: var(--silver-bg); color: var(--silver); }
.mapping-level-badge.tier-gold   { background: var(--gold-bg);   color: var(--gold); }
.mapping-level-badge .ms-tier-dot { width: 7px; height: 7px; background: currentColor; }
.mapping-level h2 {
  margin: 0.2rem 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--primary-dark);
}
.mapping-level-sub {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-subtle);
  letter-spacing: 0;
}
.mapping-level-blurb {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  max-width: 780px;
}

.mapping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 0.85rem;
}
.mapping-unit {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow 150ms ease, border-color 150ms ease, transform 80ms ease;
}
.mapping-unit.available {
  background: linear-gradient(180deg, #ecfdf5, #fff);
  border-color: #bbf7d0;
}
.mapping-unit.available:hover {
  border-color: #86efac;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.mapping-unit.unavailable { opacity: 0.82; }
.mapping-unit header { margin-bottom: 0.6rem; }
.mapping-unit-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 1.5px;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
}
.mapping-unit.available .mapping-unit-eyebrow { color: #15803d; }
.mapping-unit.unavailable .mapping-unit-eyebrow { color: var(--text-subtle); }
.mapping-unit h3 {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
  line-height: 1.3;
}
.mapping-products {
  margin: 0 0 0.95rem;
  padding-left: 1.2rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
}
.mapping-products li { margin-bottom: 0.15rem; }
.mapping-products code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.72rem;
  background: var(--surface);
  color: var(--primary);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  border: 1px solid var(--primary-100);
  margin-left: 0.3rem;
}
.mapping-cta {
  align-self: flex-start;
  padding: 0.5rem 0.95rem;
  background: #15803d;
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 150ms ease;
}
.mapping-cta:hover { background: #166534; text-decoration: none; }
.mapping-cta-disabled {
  align-self: flex-start;
  padding: 0.5rem 0.95rem;
  background: var(--surface-2);
  color: var(--text-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.8rem;
}
.mapping-foot {
  padding: 1.2rem 1.4rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.mapping-foot p { margin: 0.2rem 0; }

/* ---------- Worksheet Compiler page ---------- */
.compiler-section {
  max-width: 880px;
  margin: -2rem auto 3rem;
  padding: 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.compiler-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-xs);
}
.compiler-card-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}
.compiler-card-step {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
}
.compiler-card-head h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
  letter-spacing: 0.2px;
}
.compiler-card label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.compiler-card input[type=text] {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
}
.compiler-card input[type=text]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
  background: var(--surface);
}

.compiler-dropzone { padding: 2rem 1.4rem; }

.file-list {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.file-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
}
.file-row .idx {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  flex: 0 0 auto;
}
.file-row .name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.file-row .size {
  color: var(--text-subtle);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.file-row .row-btn {
  border: 1px solid var(--border);
  background: #fff;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1;
}
.file-row .row-btn:hover:not(:disabled) { background: var(--primary-50); color: var(--primary); border-color: var(--primary-100); }
.file-row .row-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.file-row .row-btn-rm:hover { background: #fff1f2; color: #b91c1c; border-color: #fecdd3; }

.compiler-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0 0.2rem;
}
.compiler-progress {
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  display: none;
  margin: 0 0.2rem;
}
.compiler-progress.active { display: block; }
.compiler-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  width: 0;
  transition: width 0.25s ease;
}
.compiler-status {
  font-size: 0.85rem;
  color: var(--text-muted);
  min-height: 1.2rem;
  padding: 0 0.2rem;
}
.compiler-status.err { color: #b91c1c; }
.compiler-status.ok  { color: var(--success); }

/* Offscreen sandbox for docx → canvas conversion */
#render-sandbox {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 794px;
  background: #fff;
  padding: 40px;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  font-size: 12pt;
  line-height: 1.4;
  color: #000;
}
#render-sandbox h1 { font-size: 20pt; margin: 16px 0 8px; }
#render-sandbox h2 { font-size: 16pt; margin: 14px 0 6px; }
#render-sandbox h3 { font-size: 13pt; margin: 12px 0 4px; }
#render-sandbox p  { margin: 6px 0; }
#render-sandbox table { border-collapse: collapse; width: 100%; margin: 8px 0; }
#render-sandbox td, #render-sandbox th { border: 1px solid #333; padding: 4px 6px; vertical-align: top; }
#render-sandbox img { max-width: 100%; height: auto; }
#render-sandbox ul, #render-sandbox ol { margin: 6px 0 6px 22px; }

/* ---------- Tools page (Splitter / Definition / Course files / Exports) ---- */
/* Sticky segmented tab bar — stays put under the site header so switching
   tools never makes you hunt for the tabs, and the page no longer jumps. */
.tool-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.4rem;
  padding: 0.4rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: var(--header-h);
  z-index: 9;
}
.tool-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.52rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease,
              border-color 150ms ease, box-shadow 150ms ease, transform 110ms ease;
}
.tool-tab:hover { background: var(--surface); color: var(--primary); transform: translateY(-1px); }
.tool-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 6px 16px -7px var(--primary);
}
.tool-tab.active:hover { transform: none; color: #fff; }

/* Smooth-scroll target clears the sticky header + tab bar. */
.files-section { scroll-margin-top: calc(var(--header-h) + 72px); }

.tool-panel { display: none; }
.tool-panel.active {
  display: block;
  min-height: 56vh;                 /* short panels (Drive) don't collapse the page */
  animation: toolPanelIn 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes toolPanelIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tool-panel.active { animation: none; }
}

.split-media-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.split-media-status { font-size: 0.82rem; color: var(--text-muted); }
.split-media-status.ok { color: var(--success); font-weight: 600; }

.split-status {
  margin-top: 1rem;
  padding: 0.7rem 0.95rem;
  border-radius: var(--r-md);
  font-size: 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.split-status.ok   { background: var(--success-50); border-color: #bbf7d0; color: var(--success); }
.split-status.warn { background: var(--warn-bg); border-color: #fde68a; color: var(--warn); }
.split-status.err  { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.split-status .x   { color: #b91c1c; font-weight: 700; }

.split-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.split-id-label,
.files-tree-head .split-id-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}
.split-id-input {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  min-width: 180px;
}

.split-warnings { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.split-warn {
  font-size: 0.8rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--r-sm);
  background: var(--warn-bg);
  border: 1px solid #fde68a;
  color: #92400e;
}
.split-warn.err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

.def-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.4rem 0 1.1rem; }
.def-chip {
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.def-chip strong { color: var(--text); }

#def-structure, #def-screens {
  width: 100%;
  min-height: 240px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  resize: vertical;
}

.drive-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0.5rem;
}
.drive-url { flex: 1 1 320px; min-width: 0; }
.drive-frame {
  width: 100%;
  height: 620px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-top: 0.4rem;
}

@media (max-width: 640px) {
  .split-actions, .split-media-row, .drive-row { flex-direction: column; align-items: stretch; }
  .split-id-input { min-width: 0; width: 100%; }
}

/* ---------- Course-complete certificate CTAs ----------
   Dashboard banner + sidebar quick-access. Both gold-accented so the
   reward reads at a glance. Shown only when progress = 100% AND the
   course has certificate.enabled, mirroring certificate.html unlock. */
.dash-cert-cta {
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(22,163,74,0.10));
  border: 2px solid #d4af37;
  border-radius: var(--r-lg);
  padding: 1.3rem 1.5rem;
  margin: 0 0 1.4rem;
  box-shadow: 0 8px 28px rgba(212,175,55,0.18);
}
.dash-cert-cta-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem;
}
.dash-cert-cta-icon {
  font-size: 2.4rem;
  flex: 0 0 auto;
  line-height: 1;
}
.dash-cert-cta-body { flex: 1 1 280px; min-width: 0; }
.dash-cert-cta-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--success);
  font-weight: 800;
  margin-bottom: 0.2rem;
}
.dash-cert-cta-body h2 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--primary-dark);
  font-weight: 800;
}
.dash-cert-cta-body p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.dash-cert-cta-btn { flex: 0 0 auto; align-self: center; }

/* Sidebar quick-access — slots between the progress bar and the screen list. */
.ms-cert-cta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.6rem 0.8rem 0.4rem;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(22,163,74,0.10));
  border: 1.5px solid #d4af37;
  border-radius: var(--r-md);
  color: var(--primary-dark);
  text-decoration: none;
  font-size: 0.82rem;
  transition: background 140ms ease, transform 80ms ease;
}
.ms-cert-cta:hover {
  background: linear-gradient(135deg, rgba(212,175,55,0.28), rgba(22,163,74,0.16));
  text-decoration: none;
  transform: translateY(-1px);
}
.ms-cert-cta-ico { font-size: 1.4rem; flex: 0 0 auto; }
.ms-cert-cta-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.ms-cert-cta-body strong { font-weight: 800; color: var(--primary-dark); font-size: 0.85rem; }
.ms-cert-cta-body span { font-size: 0.72rem; color: var(--text-muted); }
.ms-cert-cta-arrow { color: #d4af37; font-weight: 800; flex: 0 0 auto; }

/* =====================================================================
   Admin · Content Manager (am-) — mirrors the front-end course flow:
   a catalog of course tiles → open a course → the screen sidebar →
   preview + WYSIWYG / Word-upload editing of each screen.
   ===================================================================== */
.am-wrap { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1.4rem 3rem; }
.am-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  padding: 1.4rem 1.5rem 1.8rem;
  min-height: 62vh;
}

/* ---- Landing: course tiles, side by side ---- */
.am-head { margin-bottom: 1.3rem; }
.am-head-eyebrow {
  font-size: 0.68rem; letter-spacing: 1.6px; text-transform: uppercase;
  font-weight: 800; color: var(--primary);
}
.am-head h1 { margin: 0.15rem 0 0.2rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--text); }
.am-head p { margin: 0; color: var(--text-muted); font-size: 0.9rem; max-width: 620px; }
.am-head-row {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.8rem;
}
.am-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; padding-top: 0.4rem; }
.am-head-actions .btn { white-space: nowrap; padding: 0.55rem 1rem; font-size: 0.95rem; }

.am-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  align-items: stretch;                  /* every tile in a row is the same height */
}
.am-tile {
  display: flex; flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer; text-align: left; font: inherit; padding: 0;
  transition: transform 90ms ease, box-shadow 130ms ease, border-color 130ms ease;
}
.am-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary-100); }
.am-tile-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--primary-dark), #2d2a6e);
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
.am-tile-code {
  margin: 0.55rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 1px;
  background: rgba(255,255,255,0.92); color: var(--primary-dark);
  border-radius: 999px; padding: 0.15rem 0.55rem;
}
.am-tile-body {
  padding: 0.75rem 0.85rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.25rem;
  flex: 1 1 auto;                         /* fill the rest of the tile */
  min-height: 6.5rem;                     /* same body height even when text is short */
}
.am-tile-body strong {
  font-size: 0.9rem; color: var(--text); line-height: 1.35;
  /* Clamp the title to 2 lines so every tile reserves the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.45em;
}
.am-tile-meta { font-size: 0.76rem; color: var(--text-muted); }
.am-tile-meta em { color: var(--success); font-style: normal; font-weight: 700; }
.am-tile-edited { font-size: 0.7rem; color: var(--text-subtle); margin-top: auto; padding-top: 0.2rem; }

/* Per-tile delete (top-right circular button) */
.am-tile-wrap { position: relative; }
.am-tile-del {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer; padding: 0; font-size: 0.95rem;
  color: #b91c1c;
  box-shadow: var(--shadow-xs);
  opacity: 0; transition: opacity 120ms, transform 120ms, background 100ms;
}
.am-tile-wrap:hover .am-tile-del,
.am-tile-del:focus { opacity: 1; }
.am-tile-del:hover { background: #fef2f2; transform: scale(1.08); border-color: #fecaca; }

/* "+ New course" tile */
.am-tile-new {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem; min-height: 220px;
  background: var(--surface);
  border: 2px dashed var(--border-strong);
  color: var(--text-subtle);
}
.am-tile-new:hover {
  border-color: var(--primary); color: var(--primary); background: var(--primary-50);
  transform: none; box-shadow: none;
}
.am-tile-new-icon { font-size: 2.2rem; line-height: 1; }
.am-tile-new-text { font-size: 0.95rem; font-weight: 700; }

/* New-course form */
.am-newcourse {
  display: flex; flex-direction: column; gap: 0.9rem;
  max-width: 540px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 1.2rem 1.4rem;
}
.am-newcourse label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; }
.am-newcourse label > span { font-weight: 700; color: var(--text); }
.am-newcourse input, .am-newcourse textarea {
  font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface); color: var(--text);
}
.am-newcourse input:focus, .am-newcourse textarea:focus { outline: none; border-color: var(--primary); }
.am-newcourse .am-nc-check { flex-direction: row; align-items: center; gap: 0.5rem; }
.am-newcourse .am-nc-check span { font-weight: 500; }
.am-nc-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.4rem; }

/* ---- Course open: a fixed app-style work area ----
   When a course is open the PAGE ITSELF DOES NOT SCROLL — body
   .am-course-mode locks it. The two-pane shell is a fixed box pinned
   below the header; the sidebar and the content pane each scroll
   inside themselves. Because nothing in the page reflows or scrolls,
   picking a screen physically cannot move the sidebar or the layout.
   The lock has to apply to BOTH <html> and <body> — body's
   overflow:hidden does not reliably stop the <html> element from
   scrolling, especially when the app-shell has min-height:100vh. */
html.am-course-mode, body.am-course-mode { overflow: hidden; height: 100vh; }
.am-course-shell {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 1.1rem;
  height: calc(100vh - var(--header-h) - 3.4rem);
}
.am-side {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.am-side-head { flex: 0 0 auto; padding: 0.85rem 0.9rem 0.7rem; border-bottom: 1px solid var(--border); }
.am-back {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--primary);
  padding: 0; margin-bottom: 0.5rem;
}
.am-back:hover { text-decoration: underline; }
.am-side-code { font-size: 0.68rem; font-weight: 800; letter-spacing: 1px; color: var(--text-subtle); }
.am-side-title { font-family: var(--font-display); font-size: 0.98rem; color: var(--text); font-weight: 700; }
.am-screenlist { flex: 1 1 auto; padding: 0.4rem; overflow-y: auto; }

.am-content {
  min-width: 0;
  /* Fills the fixed shell and scrolls inside itself — every screen,
     long worksheet or short image, occupies exactly this box, so the
     page never grows / shrinks and the screen menu never shifts. */
  height: 100%;
  overflow-y: auto;
  padding-right: 0.35rem;
}

.am-empty { text-align: center; padding: 3rem 1rem; }
.am-empty-ico { font-size: 2.6rem; }
.am-empty h1 { font-family: var(--font-display); font-size: 1.3rem; color: var(--text); margin: 0.5rem 0 0.35rem; }
.am-empty p { max-width: 420px; margin: 0 auto; color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }

/* ---- Screen content pane ---- */
.am-screen-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; flex-wrap: wrap; }
.am-screen-ico { font-size: 1.9rem; flex: 0 0 auto; }
.am-screen-headbody { flex: 1 1 260px; min-width: 0; }
.am-screen-eyebrow {
  display: block; font-size: 0.66rem; letter-spacing: 1.3px; text-transform: uppercase;
  font-weight: 800; color: var(--primary); margin-bottom: 0.15rem;
}
.am-screen-title {
  width: 100%;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text);
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 0.2rem 0.35rem; margin: -0.2rem -0.35rem; background: none;
}
.am-screen-title:hover { border-color: var(--border); }
.am-screen-title:focus { outline: none; border-color: var(--primary); background: var(--surface); }

.am-replace {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 1.05rem;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  margin-bottom: 1rem;
  transition: border-color 120ms ease, background 120ms ease;
}
.am-replace.drag { border-color: var(--primary); background: var(--primary-50); }
.am-replace-readonly { border-style: solid; }
.am-replace-info { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.am-replace-info strong { font-size: 0.9rem; color: var(--text); }
.am-replace-info span { font-size: 0.79rem; color: var(--text-muted); line-height: 1.5; }
.am-replace-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.am-src {
  font-family: ui-monospace, Consolas, monospace; font-size: 0.75rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.3rem 0.5rem; color: var(--text-muted);
}

.am-status { padding: 0.6rem 0.9rem; border-radius: var(--r-md); font-size: 0.85rem; margin-bottom: 1rem; }
.am-status.ok { background: var(--success-50); border: 1px solid #bbf7d0; color: var(--success); }
.am-status.err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

/* ---- WYSIWYG editor (no raw HTML — looks like a Word page) ---- */
.am-editor { margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.am-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  padding: 0.45rem 0.5rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.am-tool-btn {
  appearance: none; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-sm); cursor: pointer;
  font: inherit; font-size: 0.82rem; min-width: 32px; height: 30px;
  padding: 0 0.5rem; color: var(--text);
  transition: background 100ms ease, border-color 100ms ease;
}
.am-tool-btn:hover { background: var(--primary-50); border-color: var(--primary-100); }
.am-tool-btn b { font-weight: 800; }
.am-tool-sep { width: 1px; background: var(--border); margin: 2px 0.2rem; }
.am-doc {
  background: #fff;
  min-height: 340px; max-height: 64vh; overflow-y: auto;
  padding: 1.6rem 2rem;
  font-family: "Segoe UI", Calibri, Arial, sans-serif;
  font-size: 11pt; line-height: 1.6; color: #1a1a2e;
}
.am-doc:focus { outline: 2px solid var(--primary-100); outline-offset: -2px; }
.am-doc h1, .am-doc h2 { color: #1e1b4b; line-height: 1.25; }
.am-doc img { max-width: 100%; height: auto; }
.am-doc table { border-collapse: collapse; width: 100%; margin: 0.8em 0; }
.am-doc th, .am-doc td { border: 1px solid #c8d5f0; padding: 0.4em 0.6em; }
.am-editor-actions {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding: 0.6rem 0.7rem; background: var(--surface-2); border-top: 1px solid var(--border);
}

/* ---- Preview ---- */
.am-preview-wrap { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.am-preview-label {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 800; color: var(--text-subtle);
  padding: 0.4rem 0.5rem 0.4rem 0.9rem; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.am-preview-save { text-transform: none; letter-spacing: normal; font-size: 0.8rem; padding: 0.32rem 0.8rem; }

/* Delete button on the screen header — red accent so it's clearly destructive */
.am-delete-btn { color: #b91c1c; border-color: rgba(185, 28, 28, 0.2); }
.am-delete-btn:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* Primary "+ Add screen" action — just a clean gap below the read-only
   actions, no label clutter. The purple button speaks for itself. */
.am-side-divider {
  height: 1px; background: var(--border);
  margin: 0.9rem 0 0.7rem;
}
.am-side-act-primary {
  background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700;
  padding: 0.55rem 0.8rem; font-size: 0.9rem;
}
.am-side-act-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

/* Danger action in the sidebar (Delete course) — sits with the rest
   of the read-only actions, above the divider and the Add screen
   primary button. */
.am-side-act-danger {
  color: #b91c1c; border-color: rgba(185, 28, 28, 0.25);
}
.am-side-act-danger:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* Inline SCORM viewer iframe */
.am-scorm-viewer {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-xs);
}
.am-scorm-frame {
  width: 100%; height: calc(100vh - var(--header-h) - 14rem); min-height: 480px;
  border: 0; display: block;
}

/* File-manager "+ Add screen" sits right next to the heading */
.am-head #am-fm-add { margin-top: 0.6rem; }

/* Drag-to-reorder the screen list (PowerPoint-style) */
.am-screenlist .ms-ws-item { cursor: grab; }
.am-screenlist .ms-ws-item:active { cursor: grabbing; }
.am-screenlist .ms-ws-item.ms-ws-dragging { opacity: 0.4; }
.am-screenlist .ms-ws-item.ms-ws-dropping-before { box-shadow: inset 0 3px 0 var(--primary); }
.am-screenlist .ms-ws-item.ms-ws-dropping-after  { box-shadow: inset 0 -3px 0 var(--primary); }
.am-preview { padding: 1rem; background: #f4f6fb; }
.am-preview .stage-doc { padding: 0; background: transparent; }
.am-preview-frame { width: 100%; height: 560px; border: none; background: #fff; border-radius: var(--r-sm); }
.am-preview-img { display: flex; justify-content: center; }
.am-preview-img img { max-width: 100%; max-height: 520px; border-radius: var(--r-sm); }

/* ---- Per-screen meta row (hours · source file · last edited) ---- */
.am-screen-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.3rem;
  margin: -0.4rem 0 1rem; font-size: 0.78rem; color: var(--text-muted);
}
.am-screen-meta strong { color: var(--text); font-weight: 700; }
.am-screen-meta code {
  font-family: ui-monospace, Consolas, monospace; font-size: 0.73rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.1rem 0.4rem; color: var(--text); word-break: break-all;
}
.am-meta-hours { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--text); }
.am-meta-hours input {
  width: 64px; font: inherit; font-weight: 600; padding: 0.18rem 0.35rem;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
}
.am-meta-hours input:focus { outline: none; border-color: var(--primary); }

/* ---- File manager table ---- */
.am-fm-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.am-fm-table th, .am-fm-table td {
  text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); vertical-align: top;
}
.am-fm-table th {
  font-size: 0.66rem; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--text-subtle); background: var(--surface-2); position: sticky; top: 0;
}
.am-fm-table tbody tr { cursor: pointer; transition: background 90ms ease; }
.am-fm-table tbody tr:hover { background: var(--primary-50); }
.am-fm-loc code,
.am-fm-loc a {
  font-family: ui-monospace, Consolas, monospace; font-size: 0.73rem; word-break: break-all;
}

@media (max-width: 820px) {
  /* Stacked on narrow screens — the page scrolls normally again. */
  body.am-course-mode { overflow: auto; }
  .am-course-shell { grid-template-columns: 1fr; height: auto; }
  .am-side { height: auto; }
  .am-screenlist { max-height: 50vh; }
  .am-content { height: auto; overflow: visible; padding-right: 0; }
}