/* ═══════════════════════════════════════════════════════════════
   Gothia Logistics — Design System
   Three contexts: admin · learner · marketing
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Neutral scale */
  --c-white:  #ffffff;
  --c-50:     #f9fafb;
  --c-100:    #f3f4f6;
  --c-200:    #e5e7eb;
  --c-300:    #d1d5db;
  --c-400:    #9ca3af;
  --c-500:    #6b7280;
  --c-600:    #4b5563;
  --c-700:    #374151;
  --c-800:    #1f2937;
  --c-900:    #111827;

  /* Status */
  --ok:        #059669;
  --ok-bg:     #ecfdf5;
  --warn:      #b45309;
  --warn-bg:   #fef9c3;
  --danger:    #dc2626;
  --danger-bg: #fef2f2;

  /* Accent. Every var(--accent, ...) call site already existed before this token did —
     each just fell back to its own hardcoded blue (#1a6eb5 in the large majority of
     spots, #2563eb in a handful of others), so the site was already quietly blue in
     these places without ever naming it. Formalizing it here as one legacy-derived blue
     makes that consistent instead of introducing a new color scheme. */
  --accent:    #1a6eb5;
  --accent-bg: #e8f1f8;

  /* Semantic aliases */
  --text:    var(--c-900);
  --muted:   var(--c-500);
  --border:  var(--c-200);
  --bg:      var(--c-50);
  --surface: var(--c-white);

  /* Radius */
  --r-xs: 3px;
  --r:    6px;
  --r-lg: 10px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);

  /* Typography */
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Course-content headings. Legacy's reader used a bright, saturated blue (#1A64C9) for
     every h2/h3 in course text — a deliberately more mellow, muted navy here instead.
     Nudged bluer twice now per feedback (was #2c4a6e, then #204f7d) — still short of
     legacy's full saturation, but a second, more noticeable step toward it. */
  --content-heading: #1d59a3;

  /* Component sizing */
  --h-input:  36px;
  --h-input-sm: 30px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
dialog { margin: auto; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}
* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"] { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
a img { border: 0; outline: 0; }
img, video { max-width: 100%; display: block; }
p { margin: 0; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
button { cursor: pointer; font: inherit; background: none; border: none; }
ul, ol { list-style: none; }

/* ── Buttons ────────────────────────────────────────────────── */
.button,
button[type=submit],
button:not([class]) {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  background: var(--c-900);
  color: var(--c-white);
  border: 1px solid transparent;
  border-radius: var(--r);
  font: 600 13px/1 var(--font);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .1s, border-color .1s;
  -webkit-appearance: none;
}
.button:hover,
button[type=submit]:hover,
button:not([class]):hover { background: var(--c-700); }

.button.secondary,
button.secondary {
  background: var(--c-white);
  color: var(--c-900);
  border-color: var(--border);
}
.button.secondary:hover,
button.secondary:hover { background: var(--c-50); border-color: var(--c-300); }

.button:disabled,
button:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* The learner's two "go read your course" CTAs — the course overview's primary
   button and each card's action button on the course listing — share the plain
   near-black .button look with every other button on the site. Legacy nod: give
   just these two the accent blue instead, so the one action a learner takes most
   often reads distinctly from a generic form-submit button. */
.course-cta-continue,
.course-row-cta .button {
  background: var(--accent);
}
.course-cta-continue:hover,
.course-row-cta .button:hover { background: #155a92; }

.button.danger,
button.danger {
  background: var(--danger);
  color: var(--c-white);
  border-color: transparent;
}
.button.danger:hover,
button.danger:hover { background: #b91c1c; }

.danger-zone {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.danger-zone h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}

.button.small,
button.small {
  height: var(--h-input-sm);
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--r-xs);
}

/* ── Form elements ──────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 13px; font-weight: 600; color: var(--c-600); }
.field-hint { font-size: 11px; color: var(--muted); margin: -2px 0 2px; }
.color-field { display: flex; gap: 6px; align-items: center; }
.color-circle-wrap { position: relative; display: inline-flex; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; cursor: pointer; overflow: hidden; }
.color-circle-wrap input[type="color"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: none; padding: 0; cursor: pointer; }
.required { color: var(--danger); }
.check-list { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r); background: var(--c-white); max-height: 140px; overflow-y: auto; }
.check-list-item { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: normal; cursor: pointer; padding: 2px 0; }

input:not([type=checkbox]):not([type=radio]),
select,
textarea,
.input {
  width: 100%;
  height: var(--h-input);
  padding: 0 10px;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font: 14px/1 var(--font);
  color: var(--text);
  outline: none;
  transition: border-color .1s, box-shadow .1s;
  -webkit-appearance: none;
}
textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 10px;
  line-height: 1.6;
  resize: vertical;
}
select {
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236b7280' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  cursor: pointer;
}
input:focus, select:focus, textarea:focus, .input:focus {
  border-color: var(--c-700);
  box-shadow: 0 0 0 3px rgba(17,24,39,.08);
}
input::placeholder, textarea::placeholder { color: var(--c-400); }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  background: var(--c-100);
  color: var(--c-600);
  font: 600 11px/1 var(--font);
  border-radius: var(--r-xs);
  white-space: nowrap;
}
.badge.ok      { background: var(--ok-bg);      color: var(--ok);     }
.badge.warning { background: var(--warn-bg);    color: var(--warn);   }
.badge.danger  { background: var(--danger-bg);  color: var(--danger); }
.badge.type-image    { background: #dbeafe; color: #1e40af; }
.badge.type-video    { background: #fef3c7; color: #92400e; }
.badge.type-embed    { background: #ede9fe; color: #5b21b6; }
.badge.type-download { background: #dcfce7; color: #166534; }
.badge.type-popup    { background: #fce7f3; color: #9d174d; }

/* ── Notices ────────────────────────────────────────────────── */
.notice {
  padding: 11px 14px;
  border-radius: var(--r);
  background: var(--warn-bg);
  border: 1px solid #fcd34d;
  color: var(--warn);
  font-size: 13px;
  line-height: 1.5;
}
.notice.success { background: var(--ok-bg);     border-color: #6ee7b7; color: var(--ok);     }
.notice.error   { background: var(--danger-bg); border-color: #fca5a5; color: var(--danger); }

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--c-900);
  color: var(--c-white);
  padding: 10px 16px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 500;
  z-index: 200;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }

/* ── Utilities ──────────────────────────────────────────────── */
.muted    { color: var(--muted); }
.eyebrow  { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
hr        { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.actions  { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.empty    { padding: 32px; border: 1px dashed var(--c-300); border-radius: var(--r-lg); text-align: center; color: var(--muted); font-size: 13px; }


/* ════════════════════════════════════════════════════════════════
   ADMIN INTERFACE
   ════════════════════════════════════════════════════════════════ */

body.admin-body { background: var(--c-50); }

#page-loading-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent, #1a6eb5); z-index: 10000;
  transform: scaleX(0); transform-origin: left; pointer-events: none;
  transition: opacity .2s;
}
#page-loading-bar.loading { animation: page-load-grow 30s ease-out forwards; }
@keyframes page-load-grow {
  0%   { transform: scaleX(0);    }
  20%  { transform: scaleX(.55);  }
  60%  { transform: scaleX(.80);  }
  100% { transform: scaleX(.92);  }
}

/* Topbar menu button — desktop hidden, mobile shown */
.topbar-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-xs);
  color: var(--c-600);
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  transition: background .1s, color .1s;
}
.topbar-menu-btn:hover { background: var(--c-100); color: var(--text); }

/* Admin topbar */
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: var(--c-white);
  border-bottom: 1px solid var(--border);
}
.admin-topbar-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 12px;
}
.admin-topbar-logo {
  height: 26px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  object-position: left;
  display: block;
}
.admin-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 10px;
  border-right: 1px solid var(--border);
}
.admin-topbar-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* Layout shell */
.admin-layout {
  display: flex;
  min-height: calc(100vh - 48px);
}

/* Sidebar */
.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--c-white);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 48px;
  height: calc(100vh - 48px);
  overflow: hidden;
  transition: width .2s ease;
  z-index: 10;
}

/* Sidebar header (toggle only) */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  height: 48px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.admin-layout.collapsed .sidebar-header { justify-content: center; }

/* Toggle button */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs);
  color: var(--c-400);
  flex-shrink: 0;
  transition: background .1s, color .1s;
}
.sidebar-toggle:hover { background: var(--c-100); color: var(--text); }
.sidebar-toggle-icon { transition: transform .2s ease; display: block; }

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--c-400);
  padding: 14px 10px 3px;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}
.admin-layout.collapsed .sidebar-section { display: none; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-600);
  text-decoration: none;
  white-space: nowrap;
  transition: background .1s, color .1s;
  position: relative;
  flex-shrink: 0;
}
.sidebar-link svg { flex-shrink: 0; opacity: .55; transition: opacity .1s; }
.sidebar-link:hover { background: var(--c-50); color: var(--text); }
.sidebar-link:hover svg { opacity: .9; }
.sidebar-link.active { background: var(--c-100); color: var(--text); font-weight: 600; }
.sidebar-link.active svg { opacity: 1; }

/* Label span — animates out on collapse */
.sidebar-label {
  overflow: hidden;
  max-width: 180px;
  opacity: 1;
  transition: max-width .2s ease, opacity .15s ease;
}
.sidebar-badge {
  display: inline-block;
  flex-shrink: 0;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* ── Collapsed state ───────────────────────────────────── */
.admin-layout.collapsed .admin-sidebar { width: 52px; }
.admin-layout.collapsed .sidebar-toggle-icon { transform: rotate(180deg); }

/* Hide labels */
.admin-layout.collapsed .sidebar-label {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
}

/* Center nav icons when collapsed */
.admin-layout.collapsed .sidebar-link { justify-content: center; padding: 8px; gap: 0; }

/* Tooltip on collapsed nav items */
.admin-layout.collapsed .sidebar-link::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--c-900);
  color: var(--c-white);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: var(--r-xs);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s;
  z-index: 100;
}
.admin-layout.collapsed .sidebar-link:hover::after { opacity: 1; }

/* Main content */
.admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.admin-main h1 { font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.admin-main h2 { font-size: 13px; font-weight: 600; color: var(--muted); }

/* Stats bar */
.stats-bar {
  background: var(--c-50);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
}

/* Toolbar row — separate from stats bar so it stays visible on mobile */
.stats-toolbar {
  background: var(--c-white);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
}
.stats-toolbar form { display: contents; }
.search-wrap { position: relative; display: flex; align-items: center; flex: 1; min-width: 140px; max-width: 280px; }
.search-wrap svg { position: absolute; left: 9px; pointer-events: none; color: var(--muted); flex-shrink: 0; }
.search-wrap .search-input { width: 100%; padding-left: 34px !important; }
.stats-bar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs);
  color: var(--c-400);
  flex-shrink: 0;
  margin-left: 4px;
  transition: background .1s, color .1s;
}
.stats-bar-toggle:hover { background: var(--c-200); color: var(--text); }
.stats-bar-chevron { transition: transform .25s ease; display: block; }
.stats-bar-toggle.stats-collapsed .stats-bar-chevron { transform: rotate(-90deg); }
.page-edit-bar .stats-bar-toggle { margin-left: 0; }
.stats-bar.collapsed { border-bottom: none; }

/* Edit-page stats bar — toggle lives in page-edit-bar; bar fully disappears when collapsed */
.stats-bar--edit .stat-item { justify-content: flex-start; }
.stats-bar--edit .stat-value { font-size: 28px; letter-spacing: -.03em; }
.stats-bar--edit .stats-bar-body { padding: 9px 0 12px; }
.stats-bar--edit.collapsed { border-bottom: none; }
.stats-bar--edit .stat-title { padding-left: 28px; }
.stats-bar--edit .stat-desc  { padding-left: 28px; }
.stats-bar-divider { width: 1px; background: var(--border); align-self: stretch; margin: 16px 4px; flex-shrink: 0; }
/* Stat card: icon + number on same row, title + desc indented to align with number */
.stat-num-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; min-height: 42px; }
.stat-num-row .stat-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); }
.stat-num-row .stat-value { margin-bottom: 0; }
.stat-title { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 1px; }
.stat-desc  { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }
.stat-item--icon .stat-title { padding-left: 28px; }
.stat-item--icon .stat-desc  { padding-left: 28px; }

/* Dashboard — full-width stat numbers and charts */
.dash-stats { display: flex; padding: 32px 32px 24px; gap: 0; flex-wrap: wrap; }
.dash-stat { flex: 1; padding: 0 28px; border-right: 1px solid var(--border); min-width: 110px; }
.dash-stat:first-child { padding-left: 0; }
.dash-stat:last-child  { border-right: none; }
.dash-stat-value { display: block; font-size: 56px; font-weight: 700; letter-spacing: -.05em; color: var(--text); line-height: 1; margin-bottom: 8px; }
.dash-stat-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.dash-stat-desc  { display: block; font-size: 12px; color: var(--muted); }
.dash-charts { display: flex; border-top: 1px solid var(--border); flex-wrap: wrap; }
.dash-chart { flex: 1; padding: 20px 32px; border-right: 1px solid var(--border); min-width: 180px; }
.dash-chart:last-child { border-right: none; }
.dash-chart-title { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.pie-with-legend { display: flex; align-items: center; gap: 20px; }
.pie-legend { display: flex; flex-direction: column; gap: 6px; }
.pie-legend-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); }
.pie-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Draft / unpublished notice */
.draft-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 24px;
  font-size: 13px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  color: #92400e;
  flex-shrink: 0;
}
.draft-notice--pending {
  background: #eff6ff;
  border-bottom-color: #bfdbfe;
  color: #1e40af;
}
.draft-notice > span { flex: 1; }
.draft-notice svg { flex-shrink: 0; opacity: .7; }
.draft-notice .button {
  flex-shrink: 0;
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--r-xs);
  opacity: .8;
}
.draft-notice .button:hover { opacity: 1; background: rgba(0,0,0,.07); }

/* Settings dialog */
.settings-dialog {
  border: none;
  border-radius: calc(var(--r) + 2px);
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  padding: 0;
  width: 680px;
  max-width: 95vw;
  margin: auto;
}
.settings-dialog::backdrop { background: rgba(0,0,0,.3); }
.settings-dialog-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.settings-dialog-head h2 {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.settings-dialog-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  flex-shrink: 0;
  margin-left: auto;
}
.settings-dialog-close:hover { background: var(--c-100); color: var(--text); }
.settings-dialog-body {
  padding: 20px 24px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}
.settings-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
.link-page-list { max-height: 180px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r); }
.link-page-item { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; font-size: 13px; border: none; border-bottom: 1px solid var(--c-100); background: none; cursor: pointer; color: var(--text); }
.link-page-item:last-child { border-bottom: none; }
.link-page-item:hover { background: var(--c-50); }
.link-page-label { flex: 1; }
.link-page-slug { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Collapsible body — charts + numbers */
.stats-bar-body {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  max-height: 180px;
  opacity: 1;
  transition: max-height .3s ease, opacity .2s ease, padding .3s ease;
}
.stats-bar.collapsed .stats-bar-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.stats-bar--edit.collapsed .stats-bar-body {
  padding: 0;
}

/* Stat number items — no dividers */
.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 28px;
  min-width: 100px;
}
.stat-item--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .1s;
}
.stat-item--link:hover { background: rgba(0,0,0,.04); }
.stat-lead {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
.stat-lead .stat-value { margin-bottom: 0; }
.stat-icon { color: var(--muted); flex-shrink: 0; display: block; }
.stat-value {
  display: block;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* Chart items — no dividers */
.chart-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px 28px;
  flex-shrink: 0;
  gap: 8px;
}
.chart-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.chart-item svg { display: block; }

/* Page content (white panel below stats) */
.page-content {
  flex: 1;
  background: var(--c-white);
  padding: 28px 32px;
}

/* Sticky edit bar — header row on detail edit pages (module-edit, course-edit) */
.page-edit-bar {
  position: sticky;
  top: 48px;
  z-index: 9;
  border-bottom: 1px solid var(--border);
  background: var(--c-white);
}
.peb-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 32px;
}
.peb-row2 { display: none; }
.page-edit-bar h1 { font-size: 17px; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.peb-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.peb-overflow { position: relative; display: none; }
.peb-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  min-width: 140px;
  padding: 4px;
}
.peb-menu.open { display: block; }
.peb-menu .peb-menu-item {
  display: block;
  width: 100%;
  height: auto;
  text-align: left;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  background: none;
  border: none;
  border-radius: calc(var(--r) - 2px);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}
.peb-menu .peb-menu-item:hover { background: var(--c-50); }
.peb-menu .peb-menu-item.danger { color: var(--danger); background: none; }
.peb-menu .peb-menu-item.danger:hover { background: var(--danger-bg); }
.peb-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
.peb-menu form { margin: 0; padding: 0; }

/* Page nav (detail pages: ← back | Title [badge]) */
.page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-nav-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.page-nav h1 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -.03em; }
.page-nav-sep { color: var(--c-300); user-select: none; }
.back-link { font-size: 13px; color: var(--muted); flex-shrink: 0; display: inline-flex; align-items: center; }
.back-link:hover { color: var(--text); }
.notification-banner { background: #1e293b; color: #e2e8f0; border-left: 4px solid var(--primary, #4f46e5); }
.notification-banner-inner { display: flex; align-items: center; gap: 14px; padding: 13px 5vw; }
.notification-banner-body { flex: 1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.notification-banner-body strong { font-weight: 700; font-size: 14px; }
.notification-banner-body span { font-size: 13px; opacity: .8; }
.notification-banner-dismiss { background: none; border: none; cursor: pointer; color: #e2e8f0; opacity: .5; padding: 4px; flex-shrink: 0; line-height: 1; border-radius: var(--r-xs); transition: opacity .1s, background .1s; }
.notification-banner-dismiss:hover { opacity: 1; background: rgba(255,255,255,.1); }
.page-nav .badge { flex-shrink: 0; }

/* Tabs */
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab-link {
  display: inline-block;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .1s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  font-family: inherit;
}
.tab-link:hover { color: var(--text); }
.tab-link.active { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }

/* Picker dialog (module / user multi-select with search) */
.picker-dialog { width: 520px; }
.picker-search { padding: 10px 20px; border-bottom: 1px solid var(--border); }
.picker-search .input { width: 100%; }
.picker-list { display: flex; flex-direction: column; overflow-y: auto; max-height: 360px; }
.picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--c-100);
  transition: background .1s;
}
.picker-row:last-child { border-bottom: none; }
.picker-row:hover { background: var(--c-50); }
.picker-row:has(input:checked) { background: var(--c-100); }
.picker-row input[type=checkbox] { flex-shrink: 0; width: 15px; height: 15px; cursor: pointer; }
.picker-label { flex: 1; min-width: 0; }
.picker-label strong { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-label span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-empty { padding: 24px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.picker-count { font-size: 12px; color: var(--muted); margin-right: auto; min-width: 60px; }

/* Page toolbar (search + actions) */
.page-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-toolbar .search-input { flex: 1; min-width: 160px; max-width: 280px; }
.page-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.locale-sw { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.locale-sw a { padding: 3px 8px; text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; line-height: 1; display: flex; align-items: center; transition: background .12s, color .12s; }
.locale-sw a.active { background: var(--c-100); color: var(--text); }
.locale-sw a:hover:not(.active) { background: var(--c-50); color: var(--text); }
.locale-sw a + a { border-left: 1px solid var(--border); }

/* Stats bar */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 24px;
}
.stat {
  padding: 16px 20px;
  border-right: 1px solid var(--border);
}
.stat:last-child { border-right: none; }
.stat > span, .stat .stat-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.stat strong { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--text); }

/* Dashboard cards */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.card {
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
}
.admin-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .1s, background .1s;
}
.admin-card:hover { background: var(--c-50); border-color: var(--c-300); }
.admin-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  background: var(--c-100);
  color: var(--c-600);
  display: grid;
  place-items: center;
}
.admin-card h2 { font-size: 13px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; margin: 0; }
.admin-card p  { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* Data table */
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
  padding: 9px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  background: var(--c-50);
  border-bottom: 1px solid var(--border);
}
.data-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-100);
  vertical-align: middle;
  font-size: 13px;
  background: var(--c-white);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr.clickable-row { cursor: pointer; }
.data-table tbody tr.clickable-row:hover  td { background: var(--c-50); }
.data-table tbody tr.clickable-row:active td { background: var(--c-100); }

/* Chevron on clickable rows */
.data-table tbody tr.clickable-row td:last-child { position: relative; padding-right: 28px; }
.data-table tbody tr.clickable-row td:last-child::after {
  content: '›';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-400);
  font-size: 16px;
  pointer-events: none;
}

/* Sort links */
.sort-link { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sort-link::after { content: '↕'; opacity: .4; font-size: 9px; }
.sort-link.asc::after  { content: '↑'; opacity: 1; color: var(--text); }
.sort-link.desc::after { content: '↓'; opacity: 1; color: var(--text); }
.sort-link.asc, .sort-link.desc { color: var(--text); }

.row-actions   { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.data-table tbody tr.row-highlight td { background: var(--c-50); }
.data-table tbody tr.part-row td { background: var(--c-50); border-top: 2px solid var(--border); }
.data-table tbody tr.part-row .part-row-title { font-weight: 700; font-size: 14px; }
.data-table tbody tr.part-row .part-row-meta { font-size: 12px; color: var(--muted); margin-left: 8px; }
.data-table tbody tr.part-row.drag-over td { box-shadow: inset 0 -2px 0 var(--accent, #2563eb); }
.list-empty    { text-align: center; padding: 40px 24px; color: var(--muted); font-size: 13px; }
.inline-form   { margin: 0; display: flex; align-items: center; }

/* Block card list (module content tab) */
.block-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 20px; }
.block-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--c-white);
}
.block-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  transition: background .1s;
}
.block-card-head:hover { background: var(--c-50); }
.block-card.open > .block-card-head { background: var(--c-50); border-bottom: 1px solid var(--border); }
.block-card-num { font-size: 12px; color: var(--muted); min-width: 16px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.block-card-title { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block-card-preview { font-size: 12px; color: var(--muted); flex: 2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block-card-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }
.block-card-body { padding: 18px 20px 16px; }

/* Create panel */
.create-panel {
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.create-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.create-panel-header h2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

/* Panel */
.panel {
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}

/* List header (legacy) */
.list-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.list-header h1 { margin: 0; }


/* ── Block canvas (WYSIWYG content editor) ─────────────────────── */

.canvas-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.canvas-locale-tabs {
  display: flex;
  gap: 2px;
  background: var(--c-100);
  padding: 2px;
  border-radius: var(--r);
}
.canvas-locale-tab {
  padding: 4px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  transition: background .1s, color .1s;
}
.canvas-locale-tab.active {
  background: var(--c-white);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.canvas-save-status {
  font-size: 12px;
  color: var(--muted);
  opacity: 0;
  transition: opacity .3s;
  white-space: nowrap;
}
.canvas-save-status.visible { opacity: 1; }
#saveAllBtn:disabled { opacity: .35; cursor: default; }

.block-canvas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.block-canvas-item {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--c-white);
  transition: border-color .15s;
}
.block-canvas-item:focus-within { border-color: var(--c-400); }
.block-canvas-item--muted { background: var(--c-50); }

.block-controls-wrap {
  position: sticky;
  top: var(--block-ctrl-top, 96px);
  z-index: 8;
  border-radius: var(--r) var(--r) 0 0;
}
.block-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--c-100);
  background: var(--c-50);
  border-radius: var(--r) var(--r) 0 0;
  flex-wrap: nowrap;
  min-height: 36px;
}
.block-controls-right { display: flex; gap: 2px; margin-left: auto; }
.block-ctrl-sep { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; }
.block-format-bar .color-circle-wrap { align-self: center; margin: 0 2px; }
.block-inline-bar { display: flex; align-items: center; gap: 1px; flex: 1; min-width: 0; overflow: hidden; }
.block-inline-bar .color-circle-wrap { align-self: center; margin: 0 2px; }
.bar-group { display: inline-flex; align-items: center; gap: 1px; flex-shrink: 0; }
.block-overflow-btn { font-size: 16px; letter-spacing: 1px; }
.block-overflow-panel {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: var(--c-100);
  border-bottom: 1px solid var(--border);
}
.block-overflow-panel.open { display: flex; }
.bop-moved-row { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; width: 100%; }
.bop-moved-row:not(:last-child) { padding-bottom: 5px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.bop-moved-row > .bar-group:first-child > .block-fmt-sep:first-child { display: none; }
.bop-fmt-row { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; }
.bop-divider { width: 1px; height: 18px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
.bop-settings-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.block-ctrl-anchor { font-size: 11px; height: 20px !important; width: 68px !important; border: 1px solid var(--border); border-radius: var(--r); padding: 0 5px !important; background: var(--c-white); color: var(--text); }
.block-ctrl-pad { font-size: 11px; height: 20px !important; width: auto !important; border: 1px solid var(--border); border-radius: var(--r); padding: 0 2px !important; background: var(--c-white); color: var(--text); cursor: pointer; }
.block-ctrl-width { font-size: 11px; height: 20px !important; width: auto !important; border: 1px solid var(--border); border-radius: var(--r); padding: 0 2px !important; background: var(--c-white); color: var(--text); cursor: pointer; }
.block-ctrl-anchor:focus { outline: none; border-color: var(--c-400); }
.block-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  transition: background .1s, color .1s;
  padding: 0;
}
.block-ctrl-btn:hover { background: var(--c-200); color: var(--text); }
.block-ctrl-btn.danger:hover { background: var(--danger-bg); color: var(--danger); }
.block-ctrl-btn--label { width: auto; white-space: nowrap; padding: 0 5px; }

.block-content { padding: 14px 16px; }
.block-content--bare { padding: 0; }
.block-html-area { display: none; width: 100%; min-height: 120px; font-family: monospace; font-size: 12px; border: 1px solid var(--border); border-radius: var(--r); padding: 8px 10px; box-sizing: border-box; resize: vertical; line-height: 1.5; color: var(--text); background: var(--c-50); margin-top: 4px; }
.block-html-area:focus { outline: none; border-color: var(--c-400); }

/* Text / Popup */
.block-format-bar {
  display: none;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 8px;
  max-width: 100%;
  box-shadow: 0 2px 6px rgba(0,0,0,.07);
}
.block-format-bar.visible { display: flex; }
.block-fmt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  border: none;
  background: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  color: var(--c-700);
  transition: background .1s;
  padding: 0;
}
.block-fmt-btn:hover { background: var(--c-100); }
.block-fmt-btn--label { width: auto; white-space: nowrap; padding: 0 5px; }
.block-fmt-sep { width: 1px; background: var(--border); margin: 4px 2px; }

/* ── Marketing page prose ────────────────────────────────────────────────── */
.prose-page { max-width: 760px; }
.prose-page-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 28px; line-height: 1.15; }
.prose { font-size: 16px; line-height: 1.75; color: var(--text); }
.prose p  { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.5em; margin: 0 0 1em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .3em; }
.prose strong { font-weight: 600; }
/* A paragraph opening with a bold term ("Flexible flow strategy. With this
   strategy...") is a legacy authoring convention for an inline sub-heading, not
   incidental emphasis — common sitewide (393 blocks). Scoped to :first-child so
   bold text used mid-paragraph for normal emphasis is untouched. */
.prose p > b:first-child,
.prose p > strong:first-child,
.block-text p > b:first-child,
.block-text p > strong:first-child {
  color: var(--content-heading);
}

.block-text {
  min-height: 60px;
  outline: none;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  word-break: break-word;
}
.block-text:empty::before {
  content: attr(data-placeholder);
  color: var(--c-400);
  pointer-events: none;
  display: block;
}
.block-text p { margin: 0 0 .75em; }
.block-text p:last-child { margin-bottom: 0; }
.block-text ul, .block-text ol { padding-left: 1.4em; margin: 0 0 .75em; }
.block-text ul { list-style: disc; }
.block-text ol { list-style: decimal; }
.block-text h1 { font-size: clamp(26px, 3.5vw, 48px); font-weight: 800; line-height: 1.1;  letter-spacing: -.03em;  padding-top: .4em; margin: 0 0 .35em; color: var(--content-heading); }
.block-text h2 { font-size: clamp(20px, 2.5vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em;  padding-top: .4em; margin: 0 0 .35em; color: var(--content-heading); }
.block-text h3 { font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em;  padding-top: .4em; margin: 0 0 .35em; color: var(--content-heading); }
.block-text h4, .page-block-col h4 { font-size: clamp(36px, 6vw, 80px);  font-weight: 900; line-height: 1.0;  letter-spacing: -.04em;  padding-top: .25em; margin: 0 0 .3em; }
.block-text h5, .page-block-col h5 { font-size: clamp(20px, 2.5vw, 32px); font-weight: 300; line-height: 1.3;  letter-spacing: .005em; padding-top: .35em; margin: 0 0 .3em; }
.block-text .ingress { font-size: 1.15em; font-weight: 400; line-height: 1.75; color: var(--c-600); margin-bottom: 1em; }
/* Callout box */
.callout, .callout-preview {
  border: 1px solid var(--border, #d0d7de);
  background: var(--surface-alt, #f6f8fa);
  border-radius: var(--r, 6px);
  padding: .85em 1.1em;
  overflow: hidden;
}
/* A standalone callout (not paired beside an image/ruta — see .block-pair-callout,
   which needs its full column width) sizes to its own content instead of always
   stretching to the full text-column width. A short bullet list ("Labor / Capital /
   Material") stayed full-paragraph-wide before this; a genuinely long callout still
   grows up to that same width via max-width, so nothing wraps unnecessarily either.
   min-width keeps a very short list (e.g. 3 one-word bullets) from shrinking down to
   an oddly narrow sliver — half the text column reads as a deliberate box, not a bug.
   Excludes a callout containing a legacy-imported image+text flex pairing (see
   admin/import-legacy.php) — that pairing needs the full column width for its own
   layout to work, not to be shrunk down toward its text content's size. */
.content-block > .callout:not(:has(div[style*="display:flex"])) {
  width: fit-content;
  min-width: 50%;
  max-width: 100%;
}
/* Legacy's course_themes.color1/2/3 (verified against theme 1: #B4CCF5/#FFEBB4/#BBEABF) —
   a callout box picks one of 3 colors per instance; course authors used this to distinguish
   different kinds of highlighted content within the same module. */
/* Scoped to .callout/.callout-preview specifically — a bare .callout--N selector
   would keep tinting a block's editor preview even after switching its type away
   from callout, since the color class isn't cleared on type-switch, only hidden. */
.callout.callout--1, .callout-preview.callout--1 { background: #B4CCF5; border-color: #9fb8e0; }
.callout.callout--2, .callout-preview.callout--2 { background: #FFEBB4; border-color: #e6d19c; }
.callout.callout--3, .callout-preview.callout--3 { background: #BBEABF; border-color: #a3d1a7; }
.page-block-callout { border-left: 4px solid var(--callout-c, var(--c-300)); background: var(--callout-bg, var(--c-50)); padding: 16px 20px; border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.page-block-callout--info    { --callout-c: #3b82f6; --callout-bg: #eff6ff; }
.page-block-callout--tip     { --callout-c: #10b981; --callout-bg: #ecfdf5; }
.page-block-callout--warning { --callout-c: #f59e0b; --callout-bg: #fffbeb; }
.page-block-callout--note    { --callout-c: var(--c-400); --callout-bg: var(--c-100); }
.page-block-callout--plate   { border-left: none; background: var(--plate-bg, var(--c-100)); border-radius: var(--r-lg); }
.page-block-callout-title { font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--callout-c); }

.block-text a, .prose a { color: var(--accent, #1a6eb5); text-decoration: underline; text-underline-offset: 2px; }
.block-text abbr, .prose abbr { text-decoration: underline dotted; cursor: help; }
a.link-btn, .block-text a.link-btn, .prose a.link-btn {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  height: 38px;
  background: var(--c-900);
  color: var(--c-white) !important;
  border-radius: var(--r);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none !important;
  transition: background .15s;
  margin: 4px 0;
}
a.link-btn:hover { background: var(--c-700); }

/* Column blocks */
.block-cols { display: grid; gap: 32px; }
.block-cols-2 { grid-template-columns: repeat(2, 1fr); }
.block-cols-3 { grid-template-columns: repeat(3, 1fr); }
.block-cols-4 { grid-template-columns: repeat(4, 1fr); }
.block-cols-1-2 { grid-template-columns: 1fr 2fr; }
.block-cols-2-1 { grid-template-columns: 2fr 1fr; }
.block-col { min-width: 0; display: flex; flex-direction: column; }
.block-col > * { flex: 1; }
@media (max-width: 768px) {
  .block-cols { gap: 20px; }
  .block-cols-2, .block-cols-3, .block-cols-4, .block-cols-1-2, .block-cols-2-1 { grid-template-columns: 1fr; }
  .block-cols-edit.block-cols-2, .block-cols-edit.block-cols-1-2, .block-cols-edit.block-cols-2-1 { grid-template-columns: 1fr; }
}

/* Admin column editor */
.block-cols-edit { display: grid; gap: 10px; }
.block-cols-edit.block-cols-2 { grid-template-columns: repeat(2, 1fr); }
.block-cols-edit.block-cols-3 { grid-template-columns: repeat(3, 1fr); }
.block-cols-edit.block-cols-4 { grid-template-columns: repeat(4, 1fr); }
.block-cols-edit.block-cols-1-2 { grid-template-columns: 1fr 2fr; }
.block-cols-edit.block-cols-2-1 { grid-template-columns: 2fr 1fr; }
.col-block-list { display: flex; flex-direction: column; gap: 6px; height: 100%; min-width: 0; }
.col-sub-block { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.col-sub-block-hd { display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: var(--c-50); border-bottom: 1px solid var(--border); flex-wrap: nowrap; min-height: 34px; }
.col-sub-type-label { font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; margin-right: 2px; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.col-mini-bar { display: flex; align-items: center; gap: 1px; flex: 1; min-width: 0; overflow: hidden; }
.col-sub-del { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 3px; }
.col-sub-del:hover { color: var(--danger); background: var(--c-100); }
.csb-overflow-btn { background: none; border: none; cursor: pointer; color: var(--muted); border-radius: 3px; padding: 2px 4px; font-size: 14px; letter-spacing: 1px; line-height: 1; }
.csb-overflow-btn:hover { background: var(--c-100); color: var(--text); }
.csb-overflow-btn.active { color: var(--text); background: var(--c-100); }
.csb-overflow-panel { display: none; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 6px; background: var(--c-100); border-bottom: 1px solid var(--border); }
.csb-overflow-panel.open { display: flex; }
.csb-body { padding: 8px; overflow-x: hidden; }
.col-sub-text-body[contenteditable] {
  display: block;
  min-height: 56px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.6;
  outline: none;
}
.col-sub-text-body[data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
.col-add-row { padding: 2px 0 0; }
.col-add-btn { width: 100%; padding: 7px; background: none; border: 1px dashed var(--c-300); border-radius: var(--r); cursor: pointer; font-size: 12px; color: var(--muted); transition: border-color .15s, color .15s; }
.col-add-btn:hover { border-color: var(--c-400); color: var(--c-600); background: var(--c-50); }
#colTypeMenu { display: none; }
@media (max-width: 900px) {
  .block-cols-edit.block-cols-3, .block-cols-edit.block-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .block-cols-edit.block-cols-3, .block-cols-edit.block-cols-4 { grid-template-columns: 1fr; }
}

/* Course catalog settings form in admin */
.catalog-settings-form {
  padding: 16px;
}
.catalog-settings-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  margin: 0 0 14px;
}
.catalog-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px) { .catalog-settings-grid { grid-template-columns: 1fr; } }

/* Hero block admin editor */
.hero-editor { display: grid; grid-template-columns: 1fr 300px; gap: 0; }
@media (max-width: 640px) { .hero-editor { grid-template-columns: 1fr; } }
.hero-ed-fields { display: flex; flex-direction: column; }
.hero-ed-section { padding: 10px 14px; }
.hero-ed-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.hero-ed-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; color: var(--c-400); }
.hero-ed-swatch { box-shadow: 0 0 0 2px rgba(0,0,0,.08); }
.hero-ed-swatches { display: flex; align-items: center; gap: 7px; }
.hero-ed-swatch-label { font-size: 11px; color: var(--c-400); }
.hero-ed-headline-input { font-size: 20px; font-weight: 800; letter-spacing: -.03em; width: 100%; border: none; border-bottom: 2px solid var(--c-200); border-radius: 0; background: transparent; padding: 4px 0; outline: none; color: var(--text); }
.hero-ed-headline-input:focus { border-bottom-color: var(--accent, #2563eb); }
.hero-ed-headline-input::placeholder { color: var(--c-300); font-weight: 400; letter-spacing: 0; }
.hero-ed-btn-row { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.hero-ed-image { padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--c-50); }
.hero-ed-thumb { position: relative; width: 100%; height: 240px; background: var(--c-100); border-radius: var(--r); overflow: hidden; cursor: pointer; border: 1.5px dashed var(--c-300); transition: border-color .15s; }
.hero-ed-thumb:hover { border-color: var(--c-500); }
.hero-ed-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-ed-thumb-preview { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 12px 10px; pointer-events: none; }
.hero-ed-prev-headline { font-size: 9px; font-weight: 800; line-height: 1.2; text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hero-ed-prev-subtext { font-size: 7px; text-align: center; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .85; }
.hero-ed-prev-btn { font-size: 6px; font-weight: 700; padding: 2px 6px; border-radius: 2px; margin-top: 2px; }
.hero-ed-thumb-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 11px; font-weight: 600; opacity: 0; transition: opacity .15s; }
.hero-ed-thumb:hover .hero-ed-thumb-overlay { opacity: 1; }
.hero-ed-thumb-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--c-400); font-size: 11px; text-align: center; padding: 12px; line-height: 1.4; }
.hero-ed-remove-btn { font-size: 11px; color: var(--muted); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }
.hero-ed-remove-btn:hover { color: var(--danger, #dc2626); }

/* Full-width blocks (breaks out of .shell in page.php context) */
.page-block.page-block--fullwidth {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Active block ctrl btn (e.g. full-width toggle) */
.block-ctrl-btn.active {
  background: var(--accent, #1a6eb5);
  color: #fff;
  border-color: var(--accent, #1a6eb5);
  opacity: 1;
}

/* Homepage page section spacing on index.php */
.pub-page-section { padding: 40px 0; }
.pub-page-section + .pub-page-section { padding-top: 0; }

/* Image alignment */
.block-img { height: auto; border-radius: var(--r); max-width: 100%; display: block; }
.block-img.align-none   { max-width: 100%; margin: 0 auto; }
.block-img.align-center { margin: 0 auto; }

/* Flex pair: image + text side by side, image aligned to left or right */
.block-pair { display: flex; gap: 1.75em; align-items: flex-start; margin-bottom: 24px; }
.block-pair--left  { flex-direction: row; }
.block-pair--right { flex-direction: row-reverse; }
.block-pair-img { flex: 0 0 auto; max-width: var(--img-col, 42%); }
.block-pair-img img { width: 100%; height: auto; display: block; border-radius: var(--r); }
.block-pair .content-block { flex: 1; min-width: 0; margin-bottom: 0; }
.block-pair--side-by-side .block-pair-img { flex: 0 0 auto; max-width: 50%; }
.block-img-caption { font-size: 12px; color: var(--muted); margin: 6px 0 0; text-align: center; }
@media (max-width: 768px) {
  /* Separate image block + text block pairs */
  .block-pair { flex-direction: column; gap: 1em; }
  .block-pair--right { flex-direction: column-reverse; }
  .block-pair-img { max-width: 100%; }
  /* Float-based inline images */
  .prose img {
    float: none !important;
    display: block !important;
    max-width: 100% !important;
    margin: 0 0 1em !important;
  }
  /* Legacy-imported flex image+text layouts (display:flex wrapper with child divs) */
  .prose div[style*="display:flex"],
  .prose div[style*="display: flex"] {
    flex-direction: column !important;
  }
  .prose div[style*="display:flex"] > div,
  .prose div[style*="display: flex"] > div {
    max-width: 100% !important;
    width: 100% !important;
  }
}
.module-page { display: none; }
.module-page.active { display: block; }
.page-title { margin: 0 0 20px; }

/* Module reader layout */
.module-layout { display: flex; gap: 28px; align-items: start; }
.module-main { flex: 1; min-width: 0; }

/* Module sidebar */
.module-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 86px);
  display: flex;
  flex-direction: column;
  transition: width .2s ease;
}
.module-sidebar-header {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 40px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
  flex-shrink: 0;
}
.module-sidebar-heading-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  max-width: 180px;
  opacity: 1;
  transition: max-width .2s ease, opacity .15s ease;
}
.module-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs);
  color: var(--c-400);
  flex-shrink: 0;
  transition: background .1s, color .1s;
}
.module-sidebar-toggle:hover { background: var(--c-100); color: var(--text); }
.module-sidebar-toggle-icon { transition: transform .2s ease; display: block; }
.module-sidebar-nav { overflow-y: auto; overflow-x: hidden; flex: 1; }
.sidebar-module { display: flex; align-items: center; gap: 10px; padding: 9px 14px; text-decoration: none; color: var(--text); font-size: 13px; line-height: 1.3; border-left: 3px solid transparent; white-space: nowrap; }
.sidebar-module + .sidebar-module { border-top: 1px solid var(--border); }
.sidebar-module:hover { background: var(--surface-alt); }
.sidebar-module.current { border-left-color: var(--accent); background: var(--accent-bg); font-weight: 600; }
.sidebar-module.done { color: var(--muted); }
.mod-step { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; font-weight: 700; display: grid; place-items: center; background: var(--c-100); color: var(--muted); }
.mod-step--done    { background: var(--ok-bg); color: var(--ok); }
.mod-step--current { background: var(--accent); color: #fff; }
.module-sidebar-label { overflow: hidden; max-width: 160px; opacity: 1; transition: max-width .2s ease, opacity .15s ease; white-space: nowrap; text-overflow: ellipsis; }
.sidebar-part-heading { padding: 12px 14px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-part-heading:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 14px; }

/* Collapsed sidebar */
.module-layout.msb-collapsed .module-sidebar { width: 44px; }
.module-layout.msb-collapsed .module-sidebar-header { justify-content: center; padding: 0 8px; gap: 0; }
.module-sidebar-heading-text:hover { color: var(--text); text-decoration: underline; }
.module-layout.msb-collapsed .module-sidebar-heading-text { max-width: 0; opacity: 0; }
.module-layout.msb-collapsed .module-sidebar-toggle-icon { transform: rotate(180deg); }
.module-layout.msb-collapsed .sidebar-module { justify-content: center; padding: 9px 4px 9px 1px; gap: 0; }
.module-layout.msb-collapsed .module-sidebar-label { max-width: 0; opacity: 0; pointer-events: none; }
.module-layout.msb-collapsed .sidebar-part-heading { max-width: 0; opacity: 0; overflow: hidden; padding-left: 4px; padding-right: 4px; }

/* Mobile: fixed overlay, collapsed by default */
@media (max-width: 860px) {
  .module-layout { gap: 0; }
  .module-sidebar {
    position: fixed;
    top: 54px;
    left: 0;
    bottom: 0;
    max-height: none;
    z-index: 200;
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    border-left: none;
    width: 44px;
  }
  .module-layout:not(.msb-collapsed) .module-sidebar { width: 220px; box-shadow: 4px 0 24px rgba(0,0,0,.15); }
  .module-main { margin-left: 44px; padding: 0 12px; }
  .module-main .panel { background: transparent; border: none; border-radius: 0; padding: 0; }
  .module-header { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
  .page-nav .btn-label { display: none; }
}
.module-header { margin-bottom: 16px; }
.module-header h1 { margin: 0 0 6px; }
.module-part-label { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.module-description { margin: 0; color: var(--muted); font-size: 14px; }

/* Page dots (top — no buttons, bottom — inside page-nav) */
.page-dots { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 0 16px; }
.page-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border); background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
.page-dot.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.page-dot:hover:not(.active) { border-color: var(--c-400, #9ca3af); color: var(--text); }

/* Bottom navigation bar */
.page-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 0; border-top: 1px solid var(--border); margin-top: 16px; }
.page-nav .page-dots { padding: 0; }

/* Alignment bar on image blocks in editor (lives in block-controls row) */
.block-align-bar { display: flex; align-items: center; gap: 4px; }
.block-align-label { font-size: 11px; color: var(--muted); margin-right: 4px; }
.block-type-toggle { display: flex; align-items: center; gap: 3px; }
.block-type-btn { font-size: 11px; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); cursor: pointer; color: var(--c-700); }
.block-type-btn:hover { background: var(--surface-alt); }
.block-type-btn.active { background: var(--accent, #1a6eb5); color: #fff; border-color: var(--accent, #1a6eb5); }
.block-callout-color-bar { display: flex; align-items: center; gap: 5px; margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--border); }
.block-callout-color-btn { width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.block-callout-color-btn.active { outline: 2px solid var(--accent, #1a6eb5); outline-offset: 1px; }
.block-callout-color-btn--none { background: repeating-linear-gradient(45deg, var(--surface-alt) 0 3px, var(--surface) 3px 6px); }
.block-callout-color-btn--blue { background: #B4CCF5; }
.block-callout-color-btn--yellow { background: #FFEBB4; }
.block-callout-color-btn--green { background: #BBEABF; }
.block-align-sep { width: 1px; height: 14px; background: var(--border); margin: 0 4px; }
.block-align-unit { font-size: 11px; color: var(--muted); }
.block-img-width { width: 52px; font-size: 11px; padding: 2px 5px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); text-align: right; }
.block-align-btn { font-size: 11px; padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); cursor: pointer; color: var(--c-700); }
.block-align-btn:hover { background: var(--surface-alt); }
.block-align-btn.active { background: var(--accent, #1a6eb5); color: #fff; border-color: var(--accent, #1a6eb5); }
.block-caption-toggle { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--c-700); cursor: pointer; white-space: nowrap; }
.block-caption-toggle input[disabled] { cursor: not-allowed; }
.block-caption-toggle:has(input[disabled]) { color: var(--muted); cursor: not-allowed; }

/* Image */
.block-image-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  background: var(--c-100);
}
.block-image-wrap img {
  display: block;
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}
.block-image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.42);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
}
.block-image-wrap:hover .block-image-overlay { opacity: 1; }
.block-image-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 140px;
  border: 2px dashed var(--c-300);
  border-radius: var(--r);
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  transition: border-color .1s, color .1s, background .1s;
}
.block-image-empty:hover { border-color: var(--c-600); color: var(--c-700); background: var(--c-50); }

/* Video */
.block-video-preview {
  margin-top: 12px;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--c-900);
}
.block-video-preview iframe,
.block-video-preview video { width: 100%; height: 100%; border: none; display: block; }
.block-video-preview.empty {
  background: var(--c-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
}

/* Download */
.block-download-row { display: flex; gap: 8px; align-items: center; }
.block-download-row input { flex: 1; min-width: 0; }

/* Embed code */
.block-embed-code {
  font-family: 'SF Mono', 'Fira Mono', monospace;
  font-size: 12px;
  min-height: 100px;
  line-height: 1.5;
  background: var(--c-50);
}

/* Add block row */
.block-add-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px;
  border: 1.5px dashed var(--c-200);
  border-radius: var(--r);
}
.block-add-row-label { font-size: 12px; color: var(--muted); margin-right: 4px; }

/* Drag handle */
.block-drag-handle { cursor: grab; color: var(--muted); padding: 2px 4px; font-size: 15px; line-height: 1; user-select: none; display: inline-flex; align-items: center; opacity: .4; }
.block-drag-handle:hover { opacity: 1; }
.block-drag-handle:active { cursor: grabbing; }
.block-canvas-item.dragging { opacity: .4; }
.block-canvas-item.drag-over-top { box-shadow: 0 -3px 0 0 var(--accent, #2563eb); }
.block-canvas-item.drag-over-bottom { box-shadow: 0 3px 0 0 var(--accent, #2563eb); }

/* Insert zones (injected by JS between blocks) */
.block-insert-zone { height: 4px; display: flex; align-items: center; justify-content: center; transition: height .12s; position: relative; }
.block-insert-zone:hover { height: 40px; }
.block-insert-btn { opacity: 0; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--c-white); cursor: pointer; color: var(--muted); font-size: 18px; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; transition: opacity .12s, background .1s, color .1s; }
.block-insert-zone:hover .block-insert-btn { opacity: 1; }
.block-insert-btn:hover { background: var(--accent-bg, #eff6ff); border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
#blockInsertMenu { position: fixed; z-index: 9999; background: var(--c-white); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 4px 16px rgba(0,0,0,.14); padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; min-width: 240px; }

/* Media dialog */
.media-dialog {
  border: none;
  border-radius: var(--r-lg);
  padding: 0;
  width: 800px;
  max-width: 95vw;
  max-height: 88vh;
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
  overflow: hidden;
}
.media-dialog::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.media-dialog[open] { display: flex; flex-direction: column; }
.media-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--c-white);
}
.media-dialog-head h2 { font-size: 14px; font-weight: 700; margin: 0; color: var(--text); }
.media-dialog-body { flex: 1; overflow-y: auto; padding: 16px; background: var(--c-50); }
.media-upload-zone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--c-white);
  border: 1.5px dashed var(--c-300);
  border-radius: var(--r);
  margin-bottom: 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  transition: border-color .1s, color .1s;
}
.media-upload-zone:hover { border-color: var(--c-600); color: var(--text); }
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.media-grid-item {
  aspect-ratio: 1;
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--c-200);
  transition: border-color .1s;
  position: relative;
}
.media-grid-item:hover { border-color: var(--c-400); }
.media-grid-item.selected { border-color: var(--c-900); }
.media-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-grid-empty { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--muted); font-size: 13px; }
.media-grid-delete {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff;
  border: none; cursor: pointer; font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .1s;
}
.media-grid-item:hover .media-grid-delete { opacity: 1; }
.media-grid-delete:hover { background: #dc2626; }

/* Media folder items in picker grid */
.media-folder-item {
  aspect-ratio: 1;
  border-radius: var(--r);
  cursor: pointer;
  border: 2px solid var(--border);
  background: var(--c-100);
  transition: border-color .1s, background .1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  user-select: none;
}
.media-folder-item:hover { border-color: var(--c-400); background: var(--c-200); }
.media-folder-icon { font-size: 26px; line-height: 1; }
.media-folder-name { font-size: 11px; font-weight: 500; color: var(--c-700); word-break: break-all; text-align: center; line-height: 1.3; }
.media-grid-breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 12px; color: var(--muted); }
.media-grid-breadcrumbs button { background: none; border: none; cursor: pointer; color: var(--c-600); text-decoration: underline; font-size: 13px; padding: 0; }
.media-grid-breadcrumbs button:hover { color: var(--text); }
.media-grid-breadcrumbs span { color: var(--muted); }

/* Media manager page */
.media-manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.media-manager-item {
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .15s;
}
.media-manager-item:hover { border-color: var(--c-400); }
.media-manager-link { display: block; text-decoration: none; color: inherit; }
.media-manager-thumb {
  aspect-ratio: 4/3;
  background: var(--c-100);
  overflow: hidden;
}
.media-manager-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-manager-info {
  padding: 8px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.media-manager-name { font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-manager-caption { font-size: 11px; color: var(--muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-manager-size { font-size: 11px; color: var(--muted); }
.media-manager-actions {
  padding: 6px 10px 10px;
  display: flex;
  gap: 6px;
}
/* Media detail page */
.media-detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  margin-bottom: 32px;
  align-items: start;
}
@media (max-width: 720px) { .media-detail-layout { grid-template-columns: 1fr; } }
.media-detail-preview {
  background: var(--c-100);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.media-detail-preview img { max-width: 100%; max-height: 60vh; object-fit: contain; display: block; }
.media-detail-meta { display: flex; flex-direction: column; gap: 12px; }
.media-detail-filename { font-size: 15px; font-weight: 600; word-break: break-all; margin: 0; }
.media-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.media-detail-table th { text-align: left; color: var(--muted); font-weight: 500; padding: 5px 12px 5px 0; white-space: nowrap; width: 1%; }
.media-detail-table td { padding: 5px 0; }
.media-detail-url { font-size: 11px; word-break: break-all; color: var(--muted); }
.media-detail-section-h { font-size: 14px; font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }

/* ════════════════════════════════════════════════════════════════
   LEARNER INTERFACE
   ════════════════════════════════════════════════════════════════ */

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 5vw;
  height: 54px;
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; letter-spacing: -.025em; }
.brand-fallback { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; }
.topbar-logo { height: 28px; width: auto; max-width: 130px; object-fit: contain; display: block; }
.topbar nav { flex: 1; display: flex; align-items: center; gap: 2px; }
.topbar nav a { padding: 6px 10px; border-radius: var(--r); font-size: 13px; color: var(--c-600); transition: background .1s, color .1s; white-space: nowrap; }
.topbar nav a:hover { background: var(--c-100); color: var(--text); }
.topbar nav .button { padding: 0 14px; color: var(--c-white); }
.topbar nav .button:hover { color: var(--c-white); }
.topbar-user-name { font-size: 13px; color: var(--muted); padding: 6px 10px; white-space: nowrap; }
.topbar-user-links { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.topbar-hamburger { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r); color: var(--c-600); flex-shrink: 0; }
@media (min-width: 769px) { .topbar-cart.topbar-cart-mobile { display: none; } }
.topbar-hamburger:hover { background: var(--c-100); }
.admin-lang-btn { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 7px; border: 1px solid var(--border); border-radius: var(--r-xs); text-decoration: none; color: inherit; }

/* Nav dropdowns */
.nav-dropdown { position: relative; }
.nav-dd-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: var(--r);
  font-size: 13px; color: var(--c-600);
  transition: background .1s, color .1s;
  white-space: nowrap; cursor: pointer;
}
.nav-dd-btn:hover,
.nav-dropdown:hover .nav-dd-btn { background: var(--c-100); color: var(--text); }
.nav-dd-chevron { flex-shrink: 0; transition: transform .15s; }
.nav-dropdown:hover .nav-dd-chevron,
.nav-dropdown.open .nav-dd-chevron { transform: rotate(180deg); }
.nav-dd-panel {
  display: none;
  position: absolute; top: 100%; left: 0;
  min-width: 220px;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  padding: 10px 6px 6px;
  z-index: 500;
  flex-direction: column;
}
.nav-dropdown:hover .nav-dd-panel,
.nav-dropdown.open .nav-dd-panel { display: flex; }
.nav-dd-panel a {
  padding: 8px 12px; border-radius: var(--r);
  font-size: 13px; color: var(--c-600);
  transition: background .1s, color .1s;
  white-space: nowrap;
}
.nav-dd-panel a:hover { background: var(--c-100); color: var(--text); }
.topbar nav .nav-label-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--muted);
  padding: 0 10px;
  cursor: default;
  pointer-events: none;
  white-space: nowrap;
  opacity: .7;
}
.nav-label-group .nav-dd-panel { top: calc(100% + 4px); }
.nav-label-group:hover .nav-dd-panel { display: flex; }
.topbar nav .nav-dd-panel .nav-label-head {
  display: block;
  padding: 0 12px 5px;
  margin: 10px 0 4px;
  border-bottom: 1px solid var(--border);
  color: var(--c-400);
  opacity: 1;
}
.topbar nav .nav-dd-panel .nav-label-head:first-child { margin-top: 0; }
/* Admin label row */
.nav-label-row td { background: var(--c-50); }
/* Page drag-and-drop */
td.drag-handle { width: 32px; text-align: center; color: var(--c-300); cursor: grab; user-select: none; }
td.drag-handle:active { cursor: grabbing; }
tr.pg-dragging { opacity: 0.35; }
tr.pg-over-top td { box-shadow: inset 0 2px 0 var(--c-700); }
tr.pg-over-bot td { box-shadow: inset 0 -2px 0 var(--c-700); }
tr.pg-over-mid td { background: var(--c-100); box-shadow: inset 0 0 0 2px var(--c-400); }
.nav-label-admin-text { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--muted); }

/* Shell */
.shell { width: min(1040px, 92vw); margin: 36px auto 72px; }

/* Page headings in learner view */
.shell h1 { font-size: clamp(24px, 3vw, 36px); margin-bottom: 6px; }
.shell h2 { font-size: 18px; margin-bottom: 8px; }
.shell h3 { font-size: 15px; margin-bottom: 6px; }
/* Prose headings override shell headings when both classes are present (e.g. block text) */
.prose h1 { font-size: clamp(26px, 3.5vw, 48px); font-weight: 800; line-height: 1.1;  letter-spacing: -.03em;  padding-top: .4em; margin: 0 0 .35em; color: var(--content-heading); }
.prose h2 { font-size: clamp(20px, 2.5vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em;  padding-top: .4em; margin: 0 0 .35em; color: var(--content-heading); }
.prose h3 { font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em;  padding-top: .4em; margin: 0 0 .35em; color: var(--content-heading); }
.prose h4 { font-size: clamp(36px, 6vw, 80px);  font-weight: 900; line-height: 1.0;  letter-spacing: -.04em;  padding-top: .25em; margin: 0 0 .3em; }
.prose h5 { font-size: clamp(20px, 2.5vw, 32px); font-weight: 300; line-height: 1.3;  letter-spacing: .005em; padding-top: .35em; margin: 0 0 .3em; }

/* Section header */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }

/* Breadcrumbs */
.breadcrumbs { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.breadcrumbs a { text-decoration: underline; text-decoration-color: var(--c-300); text-underline-offset: 2px; }
.breadcrumbs a:hover { color: var(--text); }

/* Course cards */
.course-card {
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .1s, box-shadow .1s;
}
.course-card:hover { border-color: var(--c-300); box-shadow: var(--shadow-sm); }
.course-card h2 { font-size: 15px; font-weight: 700; margin: 0; }
.price { font-size: 20px; font-weight: 800; letter-spacing: -.03em; margin-top: auto; }

/* Two-column learner layout */
.two-col {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
}
.two-col > * { min-width: 0; }
.two-col.compact { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.side { position: sticky; top: 72px; }

/* Module list */
.module-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.module-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-100);
  border-left: 3px solid transparent;
  transition: background .1s;
}
.module-item:last-child { border-bottom: none; }
.module-item:hover { background: var(--c-50); }
/* Same treatment as the reader sidebar's current-module marker — the coursebook
   overview gets its own "start here" pointer at the row the Continue/Start button
   actually links to, instead of leaving that row visually identical to any other
   open-but-not-next module. */
.module-item--continue { border-left-color: var(--accent); background: var(--accent-bg); }
.module-item--continue:hover { background: var(--accent-bg); }
.module-item > a { color: inherit; text-decoration: none; flex: 1; min-width: 0; }

/* A module's own titled internal pages (pagebreaks), listed under it like legacy's
   reader.php TOC nested its blocks' H2/H3 headings under each block's own entry. */
.module-subpage-item { display: block; padding: 7px 16px 7px 52px; font-size: 12.5px; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--c-100); background: var(--c-white); }
.module-subpage-item:last-child { border-bottom: none; }
.module-subpage-item:hover { background: var(--c-50); color: var(--text); }
.module-subpage-item::before { content: '—'; margin-right: 6px; }

/* Popup references — inline in prose */
.popup-ref {
  color: var(--accent, #1a6eb5);
  text-decoration: underline dotted var(--accent, #1a6eb5) 2px;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: background .15s;
}
.popup-ref:hover { text-decoration-style: solid; background: var(--accent-bg); }
.popup-ref::after {
  content: 'i';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--accent, #1a6eb5);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  vertical-align: super;
  transition: background .15s, transform .15s;
}
.popup-ref:hover::after { background: #155a92; transform: scale(1.12); }

/* Popup dialog */
.popup-dialog { max-width: 480px; width: calc(100% - 32px); margin: auto; border-radius: var(--r); padding: 0; border: none; box-shadow: 0 8px 32px rgba(0,0,0,.25); }
.popup-dialog::backdrop { background: rgba(0,0,0,.35); }
.popup-dialog-header { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 10px 0; }
.popup-dialog-close { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--muted); padding: 0 4px; outline: none; }
.popup-dialog-close:hover { color: var(--text); }
.popup-dialog-body { padding: 16px; font-size: 14px; line-height: 1.7; }
.popup-dialog-img { display: block; max-width: calc(100% - 32px); margin: 4px 16px 12px; border-radius: var(--r); }

/* Confirm dialog */
#confirmDlg { border: none; border-radius: var(--r-lg); box-shadow: 0 8px 32px rgba(0,0,0,.22); padding: 28px 28px 22px; max-width: 380px; width: calc(100vw - 40px); }
#confirmDlg::backdrop { background: rgba(0,0,0,.35); }
.confirm-dlg-msg { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: var(--text); }
.confirm-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Popup block title input in editor */
.block-popup-title { display: block; width: 100%; font-size: 13px; font-weight: 600; padding: 7px 10px; border: none; border-bottom: 1px solid var(--c-200); background: var(--c-50); margin: 0; box-sizing: border-box; }
.block-popup-title:focus { outline: none; border-bottom-color: var(--accent, #1a6eb5); }
.block-popup-title::placeholder { font-weight: 400; color: var(--c-400); }

/* Popup picker items */
.popup-picker-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); cursor: pointer; font-size: 13px; margin-bottom: 6px; }
.popup-picker-item:hover { background: var(--surface-alt); }
.popup-picker-item:disabled { cursor: not-allowed; opacity: .55; }
.popup-picker-item:disabled:hover { background: var(--surface); }

/* Question options (drag-to-reorder, inline-editable) */
.qopt-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); margin-bottom: 8px; }
.qopt-row.qopt-dragging { opacity: .4; }
.qopt-row.qopt-drag-over { box-shadow: 0 -3px 0 0 var(--accent, #2563eb); }
.qopt-drag { cursor: grab; color: var(--muted); font-size: 14px; user-select: none; flex-shrink: 0; line-height: 1; }
.qopt-text-input { flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; font-size: 14px; padding: 6px 8px; border-radius: var(--r-xs); color: var(--text); }
.qopt-text-input:hover, .qopt-text-input:focus { border-color: var(--border); background: var(--surface-alt, #f6f8fa); outline: none; }
.qopt-correct-label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.qopt-delete-btn { flex-shrink: 0; display: flex; border: none; background: none; cursor: pointer; color: var(--muted); padding: 4px; border-radius: var(--r-xs); }
.qopt-delete-btn:hover { color: var(--danger); background: var(--danger-bg); }

/* Live question preview */
.qpreview-panel { border: 1px dashed var(--border); border-radius: var(--r-lg); padding: 16px; background: var(--surface-alt, #f6f8fa); }
.qpreview-panel .content-block { margin-bottom: 0; }
.qpreview-opt { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; font-size: 14px; }
.qpreview-opt input { margin-top: 3px; flex-shrink: 0; }
.qpreview-empty { color: var(--muted); font-size: 13px; }

/* Delprov/slutprov question listing — inline options/answer preview */
.qlist-opts { margin: 4px 0 0; padding-left: 1.1em; font-size: 12.5px; color: var(--muted); }
.qlist-opts li { margin: 1px 0; }
.qlist-opts li.qlist-opt-correct { color: var(--ok); font-weight: 600; }
.qlist-answer { margin-top: 4px; font-size: 12.5px; color: var(--muted); font-style: italic; }

/* Content blocks */
.content-block { margin-bottom: 24px; line-height: 1.75; font-size: 15px; }
.content-block.eval-missing { background: var(--danger-bg); border-radius: var(--r); padding: 12px 14px; margin-left: -14px; margin-right: -14px; }
.content-block h1 { font-size: 2em; font-weight: 700; margin: 0 0 .5em; line-height: 1.15; color: var(--content-heading); }
.content-block h2 { font-size: 1.1em; font-weight: 700; margin: 0 0 .5em; line-height: 1.25; color: var(--content-heading); }
.content-block h3 { display: inline; font-size: 1em; font-weight: 700; line-height: 1.3; margin: 0 .4em 0 0; color: var(--content-heading); }
.content-block h3 + p { display: inline; }
.content-block .ingress { font-size: 1.15em; font-weight: 400; line-height: 1.75; color: var(--c-600); margin-bottom: 1em; }
.content-block ul, .content-block ol { padding-left: 1.4em; margin: 0 0 .75em; }
.content-block ul { list-style: disc; }
.content-block ol { list-style: decimal; }
.legacy-math-table { border-collapse: collapse; margin: 0 0 1em; font-size: .85em; max-width: 100%; }
.block-pair-callout { display: block; }
/* Paired callout content (e.g. a long legacy table) is capped rather than left to
   grow to whatever height its content needs — imported courses vary wildly in how
   long a "ruta" gets, and letting an outlier stretch the row to match would either
   force the paired text into a huge empty gap (short text) or make no difference
   (long text already exceeds it). A capped, scrollable pane stays predictable across
   every course instead of solving each outlier one at a time. A lower cap than a
   typical block-pair image (480px) keeps the common case — a handful of short
   paragraphs beside the box — from sitting in a mostly-empty column; a genuinely
   long table just scrolls sooner instead. */
.block-pair-callout .callout { max-height: min(320px, 45vh); overflow: auto; }
.legacy-math-table td { border: 1px solid var(--border); padding: 2px 6px; line-height: 1.3; }
.legacy-math-table tr:first-child td { background: var(--c-50); font-weight: 600; position: sticky; top: 0; }

/* Progress */
.progress-track { height: 3px; background: var(--c-200); border-radius: 999px; overflow: hidden; margin: 10px 0 4px; }
.progress-fill  { height: 100%; background: var(--accent); border-radius: 999px; }

/* Certificate */
.certificate {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 56px 40px;
  text-align: center;
  background: var(--c-50);
}

/* Stats (also used in learner) */
.stats-row { display: flex; gap: 24px; margin-bottom: 24px; }

/* Dark card variant */
.kicker-card { background: var(--c-900); color: var(--c-white); border-color: transparent; }
.kicker-card .muted, .kicker-card .badge { color: rgba(255,255,255,.55); background: rgba(255,255,255,.1); }

/* Auth */
.auth-panel { max-width: 400px; margin: 56px auto; }

/* Payment form */
.payment-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.payment-form select { max-width: 120px; }
.payment-form input  { max-width: 200px; }

/* Footer note */
.footer-note { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.5; }


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Topbar: show hamburger, collapse right-side items into dropdown */
  .topbar-menu-btn { display: flex; }
  .admin-topbar-right {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    min-width: 170px;
    background: var(--c-white);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--r) var(--r);
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
  }
  body.topbar-open .admin-topbar-right { display: flex; }
  .admin-topbar-user { border-right: none; padding-right: 0; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .admin-topbar-name { display: block; }

  /* Sidebar: fixed, collapsed (52px) by default; expands to 220px overlay on open */
  .admin-sidebar {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    z-index: 200;
    transition: width .2s ease, box-shadow .2s ease;
  }
  /* Expanded state on mobile: overlay with shadow */
  .admin-layout:not(.collapsed) .admin-sidebar {
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }
  /* Reserve space for the fixed 52px collapsed sidebar */
  .admin-main { margin-left: 52px; }

  /* Stats bar: hide on mobile; toggle has nothing to collapse so hide it too */
  .stats-bar { display: none; }
  .stats-toolbar .stats-bar-toggle { display: none; }
  .stats-toolbar { padding: 0 16px; }

  /* Page */
  .page-content { padding: 18px 16px; }

  /* Tables: horizontal scroll */
  .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

  /* Learner stat grid: two cols */
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--border); }
  .stat:nth-child(odd) { border-right: 1px solid var(--border); }
  .stat:last-child, .stat:nth-last-child(2):nth-child(odd) { border-bottom: none; }

  /* Card grid */
  .grid { grid-template-columns: 1fr 1fr; }

  /* Learner layout */
  .shell   { width: 92vw; margin: 20px auto 56px; }
  .two-col, .two-col.compact { grid-template-columns: 1fr; }
  .side    { position: static; }
  .topbar { padding: 0 4vw; }
  .topbar-hamburger { display: flex; }
  .topbar-cart.topbar-cart-mobile { margin-left: auto; }
  .topbar nav .topbar-cart { display: none; }
  .topbar nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--c-white);
    border-bottom: 1px solid var(--border);
    padding: 8px 4vw 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    z-index: 30;
  }
  body.topbar-open .topbar nav { display: flex; }
  .topbar nav > a { padding: 10px 12px; font-size: 14px; }
  .topbar-user-name { padding: 10px 12px; font-size: 13px; }
  .topbar-user-links { margin-left: 0; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 6px; }
  .topbar-user-links a { padding: 10px 12px; font-size: 14px; }
  .topbar-user-links .locale-sw { align-self: flex-start; margin: 6px 12px; }
  .topbar-user-links .locale-sw a { padding: 3px 8px; font-size: 11px; }
  /* Mobile dropdowns: no hover, click to expand inline */
  .nav-dd-btn { width: 100%; justify-content: space-between; padding: 10px 12px; font-size: 14px; }
  .nav-dropdown:hover .nav-dd-btn { background: transparent; color: var(--c-600); }
  .nav-dropdown:hover .nav-dd-panel { display: none; }
  .nav-dropdown.open .nav-dd-panel { display: flex; }
  .nav-dd-panel { position: static; box-shadow: none; border: none; border-radius: 0; padding: 0 0 4px 12px; min-width: 0; }
  .nav-dd-panel a { padding: 8px 12px; font-size: 14px; }
  .nav-dropdown.open .nav-dd-chevron { transform: rotate(180deg); }
  .topbar nav .nav-label-head { padding: 6px 12px 2px; font-size: 10px; cursor: default; pointer-events: none; }
  .nav-label-group .nav-dd-panel { display: flex; position: static; box-shadow: none; border: none; padding: 0 0 4px 12px; }

  /* Edit bar: title moves to row2, back link shrinks to arrow, overflow menu appears */
  .peb-row1 { padding: 0 16px; }
  .peb-row2 { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; }
  .peb-row1 > .page-nav-sep,
  .peb-row1 > h1,
  .peb-row1 > .badge { display: none; }
  .back-link-text { display: none; }
  .peb-btn-desktop { display: none !important; }
  .peb-overflow { display: block; }

  /* Toolbar */
  .page-toolbar .search-input { max-width: none; }
  .page-toolbar-right { margin-left: 0; }
  .page-toolbar-right .btn-label { display: none; }

  /* Forms */
  .payment-form input, .payment-form select { max-width: none; }

  /* Dashboard stats: 2×2 grid, smaller numbers */
  .dash-stats { display: grid; grid-template-columns: 1fr 1fr; padding: 16px 16px 12px; }
  .dash-stat { padding: 10px 14px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 0; }
  .dash-stat:first-child { padding-left: 14px; }
  .dash-stat:last-child  { border-right: 1px solid var(--border); }
  .dash-stat:nth-child(even) { border-right: none; }
  .dash-stat:nth-last-child(-n+2) { border-bottom: none; }
  .dash-stat-value { font-size: 32px; margin-bottom: 4px; }

  /* Dashboard charts: 2×2 grid, scale SVGs to container */
  .dash-charts { display: grid; grid-template-columns: 1fr; }
  .dash-chart { flex: none; padding: 14px 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 0; }
  .dash-chart:nth-child(even) { border-right: none; }
  .dash-chart:nth-last-child(-n+2) { border-bottom: none; }
  .dash-chart svg { max-width: 100%; height: auto; }
  .pie-with-legend { gap: 10px; }
}

@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
  .page-toolbar { flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .stats-toolbar .stats-bar-toggle,
  #courseStatsToggle,
  #moduleStatsToggle { display: none; }
}

/* ── Study cards (admin grid preview) ───────────────────────────────────────── */
.study-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.study-card-preview { border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.study-card-q { font-size: 13px; font-weight: 600; color: var(--text); }
.study-card-a { font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 8px; }
.study-card-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }

/* ── Flip cards (learner view) ───────────────────────────────────────────────── */
.study-cards-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.study-cards-heading { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 14px; }
.study-card-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.flip-card { perspective: 700px; cursor: pointer; }
.flip-card-inner { display: grid; transform-style: preserve-3d; transition: transform .4s ease; }
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { grid-area: 1/1; backface-visibility: hidden; border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center; min-height: 140px; }
.flip-card-front { background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: 14px; }
.flip-card-back { background: var(--accent); color: #fff; border: 1px solid var(--accent); transform: rotateY(180deg); font-size: 13px; }
.flip-card-front p, .flip-card-back p { margin: 0; }
.flip-card-front ul, .flip-card-back ul { margin: 0; padding-left: 18px; text-align: left; }
.flip-card-front li, .flip-card-back li { margin-bottom: 4px; }
.study-card-a ul { margin: 6px 0 0; padding-left: 16px; }
.study-card-a li { margin-bottom: 3px; }

/* ════════════════════════════════════════════════════════════════
   PUBLIC / MARKETING SITE
   ════════════════════════════════════════════════════════════════ */

.pub-body { background: var(--c-white); }

/* Hero */
.pub-hero {
  background: var(--c-900);
  color: var(--c-white);
  padding: 80px 32px 96px;
  text-align: center;
}
.pub-hero-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.pub-hero-h {
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
  color: var(--c-white);
  margin: 0;
}
.pub-hero-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-400);
  max-width: 480px;
  margin: 0;
}
.pub-hero-cta {
  height: 40px;
  padding: 0 24px;
  font-size: 14px;
  background: var(--c-white);
  color: var(--c-900);
  border-color: transparent;
}
.pub-hero-cta:hover { background: var(--c-100); }

/* Catalog */
.pub-main { min-height: calc(100vh - 52px); }
.pub-catalog { padding: 0 32px; }
.pub-catalog-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.pub-catalog-h {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}
.pub-empty {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 48px 0;
}

/* Category section */
.pub-category { display: flex; flex-direction: column; gap: 14px; }
.pub-category-h {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Course grid */
.pub-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 14px;
}

/* Course card */
.pub-course-card {
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .12s, box-shadow .12s;
}
.pub-course-card:hover {
  border-color: var(--c-300);
  box-shadow: var(--shadow-sm);
}
.pub-course-card-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: var(--text);
  margin: 0;
}
.pub-course-card-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.pub-course-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.pub-course-card-price {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
  display: block;
  line-height: 1.2;
}
.pub-course-card-price.free { color: var(--ok); }
.pub-course-card-duration {
  font-size: 12px;
  color: var(--muted);
  display: block;
}

@media (max-width: 768px) {
  .pub-hero { padding: 52px 20px 64px; }
  .pub-catalog { padding: 0 20px; }
  .pub-course-grid { grid-template-columns: 1fr; }
}

/* ── Subpage drawer ─────────────────────────────────────────────────────────── */
.subpage-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 401;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.subpage-backdrop.open { opacity: 1; pointer-events: auto; }

.subpage-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(640px, 92vw);
  background: var(--c-white);
  box-shadow: -4px 0 40px rgba(0,0,0,.18);
  z-index: 402; /* above .impersonate-bar (400) — its sticky positioning was
                   covering the drawer's own head/title bar while impersonating */
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
}
.subpage-drawer.open { transform: translateX(0); }

.subpage-drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 52px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.subpage-drawer-title {
  flex: 1;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.subpage-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 6px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.subpage-drawer-close:hover { background: var(--c-50); color: var(--text); }

.subpage-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px 40px;
}
.subpage-drawer-loading {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 60px 0;
}
.subpage-link {
  color: var(--c-700);
  text-decoration: underline;
  cursor: pointer;
}
.subpage-link:hover { color: var(--text); }

/* Impersonation banner */
.impersonate-bar {
  position: sticky;
  top: 0;
  z-index: 400;
  background: #f59e0b;
  color: #1c1917;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
}
.impersonate-exit {
  background: rgba(0,0,0,.15);
  color: inherit;
  text-decoration: none;
  padding: 3px 10px;
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 600;
}
.impersonate-exit:hover { background: rgba(0,0,0,.28); }

/* Public admin edit bar */
.pub-admin-bar {
  position: sticky;
  top: 54px;
  z-index: 209;
  background: #fff8e1;
  border-bottom: 1px solid #ffe082;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 5vw;
  font-size: 13px;
  flex-wrap: wrap;
}
.pub-admin-bar-notice {
  flex: 1;
  color: #b45309;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pub-admin-bar-edit {
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r);
  background: rgba(0,0,0,.07);
  font-weight: 500;
  white-space: nowrap;
}
.pub-admin-bar-edit:hover { background: rgba(0,0,0,.12); }
.pub-edit-fab {
  position: fixed;
  top: 64px;
  right: 16px;
  z-index: 209;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.impersonating .pub-edit-fab { top: 100px; }
.pub-edit-fab-note {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 20px;
  padding: 3px 10px 3px 7px;
  font-size: 12px;
  font-weight: 500;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.pub-edit-fab-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1e293b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: background .15s;
  flex-shrink: 0;
}
.pub-edit-fab-btn:hover { background: #334155; color: #fff; }

/* Push sticky elements down when the impersonation bar is visible */
body.impersonating .topbar        { top: 36px; }
body.impersonating .pub-admin-bar  { top: 90px; }
body.impersonating .module-sidebar { top: 106px; }
body.impersonating .side           { top: 108px; }
@media (max-width: 860px) {
  body.impersonating .module-sidebar { top: 90px; }
}

/* Exam outcome panels */
.exam-outcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 40px 24px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
}
.exam-outcome--passed {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #14532d;
}
.exam-outcome--pending {
  border-color: #d97706;
  background: #fffbeb;
  color: #78350f;
}
.exam-outcome--failed {
  border-color: #dc2626;
  background: var(--c-50);
  color: #7f1d1d;
}
.exam-outcome-icon { opacity: .75; }
.exam-outcome h2 { margin: 0; font-size: 1.4rem; }
.exam-outcome p { margin: 0; opacity: .85; }
.exam-score { font-weight: 600; }
.exam-grader-comment { background: var(--c-50); border-left: 3px solid var(--border); border-radius: var(--r); padding: 14px 18px; text-align: left; width: 100%; box-sizing: border-box; }
.exam-grader-comment strong { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.exam-grader-comment p { margin: 0; font-size: 14px; color: var(--text); line-height: 1.65; opacity: 1; }
.exam-outcome-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* Quiz answer review (shown on passed module quiz) */
.quiz-review { width: 100%; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.quiz-review-item { padding: 10px 14px; border-radius: 8px; font-size: .9rem; }
.quiz-review-item.correct { background: rgba(34,197,94,.12); }
.quiz-review-item.incorrect { background: rgba(239,68,68,.1); }
.quiz-review-q { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; line-height: 1.4; }
.quiz-review-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.4; }
.quiz-review-icon--ok  { color: #16a34a; }
.quiz-review-icon--err { color: #dc2626; }
.quiz-review-detail { margin-top: 6px; padding-left: 24px; display: flex; flex-direction: column; gap: 2px; }
.quiz-review-wrong   { color: #dc2626; }
.quiz-review-correct { color: #16a34a; font-weight: 500; }
/* The "Revisit: <module>" action — a real small button (see the shared .button
   system near the top of this file) instead of a link-styled reset button, pulled
   to the right of the answer text it sits below via align-self. Accent blue, same
   family as .course-cta-continue — this is a "keep reading" action too. */
.quiz-review-revisit { align-self: flex-end; margin-top: 6px; background: var(--accent); }
.quiz-review-revisit:hover { background: #155a92; }

/* My courses list */
.my-courses-header { margin-bottom: 24px; }
.my-courses-header h1 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.my-courses-list { display: flex; flex-direction: column; gap: 12px; }
.course-row {
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .1s, box-shadow .1s;
}
.course-row:hover { border-color: var(--c-400); box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.course-row-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 20px 16px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.course-row-body { flex: 1; min-width: 0; }
.course-row-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0 0 4px; }
.course-row-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--text);
}
.course-row-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.5;
}
.course-row-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.course-cat-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--c-100);
  color: var(--c-600);
}
.course-row-parts { display: flex; flex-direction: column; gap: 3px; margin: 0 0 12px; padding: 0; list-style: none; }
.course-row-parts li {
  position: relative;
  padding-left: 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.course-row-parts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-300);
}
.course-row-progress-wrap { display: flex; align-items: center; gap: 10px; }
.course-row-track {
  flex: 1;
  height: 4px;
  background: var(--c-200);
  border-radius: 999px;
  overflow: hidden;
  margin: 0;
}
.progress-fill--done { background: #16a34a; }
.course-row-fraction { font-size: 12px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.course-row-next { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.course-next-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  background: var(--c-100);
  color: var(--c-600);
  flex-shrink: 0;
}
.course-next-badge--done    { background: #dcfce7; color: #15803d; }
.course-next-badge--exam    { background: #fef9c3; color: #a16207; }
.course-next-badge--start   { background: #eff6ff; color: #1d4ed8; }
.course-next-badge--pending { background: #fef9c3; color: #a16207; }
.course-next-badge--failed  { background: #fee2e2; color: #b91c1c; }
.course-next-label { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-row-cta { flex-shrink: 0; }
.course-row-overview {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  padding: 7px 20px;
  border-top: 1px solid var(--border);
  background: var(--c-50);
  text-decoration: none;
  transition: background .1s, color .1s;
}
.course-row-overview:hover { background: var(--c-100); color: var(--text); }

/* Mark-as-complete button state in module nav */
.btn-complete { background: #16a34a; }
.btn-complete:hover { background: #15803d; }

/* Cart icon in topbar */
.topbar-cart {
  position: relative;
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  padding: 4px;
  border-radius: var(--r);
  transition: background .1s;
}
.topbar-cart:hover { background: var(--c-100); }
.topbar-cart-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* Public catalog filters */
.pub-filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pub-search-wrap {
  position: relative;
  max-width: 400px;
}
.pub-search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.pub-search-input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px !important;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 14px;
  font-family: inherit;
  background: var(--c-white);
  color: var(--text);
  box-sizing: border-box;
  transition: border-color .15s;
}
.pub-search-input:focus { outline: none; border-color: var(--c-500); }
.pub-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pub-cat-pill {
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .1s, border-color .1s, color .1s;
  font-family: inherit;
}
.pub-cat-pill:hover { background: var(--c-50); border-color: var(--c-300); color: var(--text); }
.pub-cat-pill.active {
  background: var(--c-900);
  border-color: var(--c-900);
  color: var(--c-white);
}
.pub-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pub-tag-pill {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .1s, border-color .1s, color .1s;
  font-family: inherit;
}
.pub-tag-pill:hover { background: var(--c-50); border-color: var(--c-300); color: var(--text); }
.pub-tag-pill.active { background: var(--c-700); border-color: var(--c-700); color: var(--c-white); }

/* Course card cart actions */
.pub-card-badge { margin-bottom: 8px; }
.pub-card-badge-premium { background: #fef9c3; color: #854d0e; }
.pub-card-badge-lang { background: #dbeafe; color: #1e40af; font-weight: 700; letter-spacing: .04em; }
.pub-card-badge-trans { background: var(--c-100); color: var(--muted); padding: 3px 5px; display: inline-flex; align-items: center; gap: 3px; }
.pub-cross-lang-section { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); }
.pub-cross-lang-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 16px; }

/* ── Category accordion ─────────────────────────────────────────────────────── */
.cat-accordion { display: flex; flex-direction: column; gap: 8px; }
.cat-accordion-item { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.cat-accordion-head {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; background: none; text-align: left;
  transition: background .12s;
}
.cat-accordion-head:hover { background: var(--c-50); }
.cat-accordion-item.open .cat-accordion-head { background: var(--c-50); }
.cat-accordion-title { font-size: 16px; font-weight: 700; color: var(--text); flex: 1; letter-spacing: -.02em; }
.cat-accordion-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cat-accordion-chevron { flex-shrink: 0; color: var(--muted); transition: transform .2s ease; }
.cat-accordion-item.open .cat-accordion-chevron { transform: rotate(180deg); }
.cat-accordion-body { display: none; padding: 0 20px 24px; }
.cat-accordion-item.open .cat-accordion-body { display: block; }
.cat-accordion-desc { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 0 0 20px; }
.cat-accordion-image { margin: 0 -20px 20px; overflow: hidden; max-height: 220px; }
.cat-accordion-image img { width: 100%; height: 220px; object-fit: cover; display: block; }
.cat-accordion-slogan { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.5; margin: 0 0 10px; }
.cat-accordion-text { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0 0 20px; }
.pub-cart-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.pub-in-cart-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
}
.pub-remove-cart-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pub-remove-cart-btn:hover { color: #dc2626; }
.pub-no-results { text-align: center; color: var(--muted); font-size: 14px; padding: 48px 0; }

/* ── Course modal ────────────────────────────────────────────────────────────── */
dialog.course-modal {
  border: none;
  border-radius: 16px;
  padding: 0;
  width: min(820px, 95vw);
  max-height: 88vh;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
}
dialog.course-modal[open] {
  display: flex;
  flex-direction: column;
}
dialog.course-modal::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(3px); }
.cm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--c-100);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  z-index: 1;
  transition: background .12s;
}
.cm-close:hover { background: var(--c-200); }
.cm-close:focus { outline: none; }
.cm-body { overflow-y: auto; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.cm-loading { display: flex; align-items: center; justify-content: center; min-height: 160px; }
.cm-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--c-200);
  border-top-color: var(--accent, #2563eb);
  border-radius: 50%;
  animation: cm-spin .7s linear infinite;
}
@keyframes cm-spin { to { transform: rotate(360deg); } }
.cm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.cm-head-info { flex: 1; min-width: 0; }
.cm-head-cta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-top: 4px; }
.cm-title { font-size: 22px; font-weight: 800; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.02em; }
.cm-subtitle { font-size: 15px; color: var(--muted); margin: 0; }
.cm-price { font-size: 18px; font-weight: 700; }
.cm-price--free { color: var(--ok); }
.cm-price-row { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cm-in-cart { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ok); font-weight: 600; }
.cm-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--c-100);
  border-radius: 20px;
  padding: 4px 10px;
}
.cm-desc { font-size: 15px; line-height: 1.6; color: var(--text); margin: 0; }
.cm-body-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cm-body-grid--single { grid-template-columns: 1fr; }
.cm-details { display: flex; flex-direction: column; gap: 16px; }
.cm-detail-row { display: flex; flex-direction: column; gap: 4px; }
.cm-detail-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--c-400); }
.cm-detail-val { font-size: 14px; line-height: 1.5; color: var(--text); }
.cm-cert-list { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cm-cert-list li { font-size: 14px; line-height: 1.5; padding-left: 20px; position: relative; }
.cm-cert-list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent, #2563eb); opacity: .3; }
.cm-outline { display: flex; flex-direction: column; gap: 10px; }
.cm-outline-title { font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--c-400); margin: 0; }
.cm-outline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.cm-outline-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.cm-outline-item:last-child { border-bottom: none; }
.cm-outline-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--c-100); font-size: 11px; font-weight: 700; color: var(--muted); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.cm-outline-info strong { font-size: 13px; font-weight: 600; line-height: 1.3; display: block; }
.cm-outline-info p { font-size: 12px; color: var(--muted); margin: 2px 0 0; line-height: 1.4; }
@media (max-width: 600px) {
  .cm-head { flex-direction: column; }
  .cm-head-cta { align-items: flex-start; }
  .cm-body-grid { grid-template-columns: 1fr; }
  .cm-body { padding: 20px; }
}
@media (max-width: 600px) { .hide-mobile { display: none; } }

/* Cart page */
.cart-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin: 20px 0; }
.cart-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--c-white);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title { display: block; font-size: 15px; font-weight: 600; }
.cart-item-desc { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.cart-item-price { font-size: 15px; font-weight: 600; white-space: nowrap; }
.cart-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
}
.cart-remove-btn:hover { color: #dc2626; background: #fef2f2; }
.cart-footer { display: flex; flex-direction: column; }
.cart-total-row { display: flex; align-items: center; justify-content: space-between; font-size: 16px; margin-bottom: 6px; }
.cart-total-row strong { font-size: 20px; }
.cart-total-row--sub { font-size: 14px; color: var(--muted); }
.cart-discount-row { color: var(--ok, #16a34a); font-size: 14px; }
.cart-discount-form { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.cart-discount-input { max-width: 180px; font-family: monospace; }
.cart-discount-applied { display: flex; align-items: center; justify-content: space-between; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--r); padding: 8px 12px; margin-bottom: 14px; font-size: 14px; color: var(--ok, #16a34a); }
.cart-discount-error { font-size: 13px; color: var(--danger); margin: -8px 0 10px; }
.inv-totals { border-top: 1px solid var(--border); padding-top: 12px; margin-bottom: 20px; }
.inv-access-note { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); background: var(--c-50); border-radius: var(--r); padding: 10px 12px; margin-top: 16px; }
.badge.warn { background: #fef3c7; color: #92400e; }

/* ── Page blocks (public) ────────────────────────────────────────────────── */
.page-block { width: 100%; overflow: hidden; }
.page-block + .page-block { margin-top: 0; }
.page-block .shell { margin-top: 0; margin-bottom: 0; }
.page-block--pad-sm { padding: 16px 0; }
.page-block--pad-md { padding: 40px 0; }
.page-block--pad-lg { padding: 80px 0; }
.page-block--pad-xl { padding: 160px 0; }
.page-block--pad-fs { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.page-block--pt-sm { padding-top: 16px; }
.page-block--pt-md { padding-top: 40px; }
.page-block--pt-lg { padding-top: 80px; }
.page-block--pt-xl { padding-top: 160px; }
.page-block--pb-sm { padding-bottom: 16px; }
.page-block--pb-md { padding-bottom: 40px; }
.page-block--pb-lg { padding-bottom: 80px; }
.page-block--pb-xl { padding-bottom: 160px; }
.page-block--w-narrow .shell { width: min(760px, 92vw); }
.page-block--w-wide .shell { max-width: min(1040px, 92vw); }
.page-block--hero { text-align: center; position: relative; }
.page-block--hero .page-block-hero { }
.page-block--hero h1 { font-size: clamp(28px, 5vw, 56px); font-weight: 800; line-height: 1.1; margin: 0 0 20px; }
.page-block--hero .hero-subtext { font-size: 18px; color: var(--muted); margin: 0 0 32px; }
.page-block--parallax { position: relative; overflow: hidden; }
.hero-parallax-bg { position: absolute; left: 0; right: 0; top: -20%; height: 140%; background-size: cover; background-position: center; will-change: transform; pointer-events: none; }
.hero-bg-layer { position: absolute; inset: -20px; background-size: cover; background-position: center; pointer-events: none; }
.hero-overlay { position: absolute; inset: 0; pointer-events: none; }
.page-block--hero .page-block-hero { position: relative; z-index: 1; }
.page-block--text { }
.page-block--html { }
.page-block--image { }
.page-block--video { }
.page-block-figure { margin: 0; }
.page-block-figure img { display: block; max-width: 100%; height: auto; border-radius: var(--r); }
.page-block-figure figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.block-video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--r); }
.block-video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ── Page block editor ───────────────────────────────────────────────────── */
.page-block-text[contenteditable] { min-height: 60px; padding: 8px 10px; line-height: 1.6; outline: none; }
.page-block-text[contenteditable]:focus { background: var(--c-50); }
.page-block-text[contenteditable]:empty:before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.page-block-callout-body[contenteditable] { outline: none; }
.page-block-callout-body[contenteditable]:empty:before { content: attr(data-placeholder); color: inherit; opacity: .5; pointer-events: none; }

/* ── Locale completion dots (categories / tags list) ────────────────────── */
.locale-dot { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 11px; font-weight: 600; color: #bbb; background: #f3f4f6; margin-right: 2px; }
.locale-dot.active { color: #fff; background: var(--ok, #059669); }

/* ── Public nav: search icon ─────────────────────────────────────────────── */
.topbar-icon-btn { display: flex; align-items: center; padding: 6px; color: var(--fg); opacity: .6; border-radius: 6px; }
.topbar-icon-btn:hover { opacity: 1; background: rgba(0,0,0,.05); }

/* Media dialog — mobile bottom sheet */
@media (max-width: 600px) {
  .media-dialog {
    width: 100%;
    max-width: 100%;
    height: 90dvh;
    max-height: 90dvh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    margin: auto 0 0;
  }
}

/* ── Public footer ─────────────────────────────────────────────────────────── */
.pub-footer { background: #1c2333; color: #c9d1e0; margin-top: 80px; }
.pub-footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; padding: 56px 5vw 48px; }
.pub-footer-logo { height: 32px; width: auto; filter: brightness(0) invert(1); opacity: .85; display: block; margin-bottom: 12px; }
.pub-footer-logo-text { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.pub-footer-tagline { font-size: 13px; color: #8a97b0; margin: 0; line-height: 1.5; }
.pub-footer-heading { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #fff; margin: 0 0 14px; }
.pub-footer-nav { display: flex; flex-direction: column; gap: 8px; }
.pub-footer-nav a { font-size: 13px; color: #c9d1e0; text-decoration: none; }
.pub-footer-nav a:hover { color: #fff; }
.pub-footer-address { font-size: 13px; color: #c9d1e0; font-style: normal; line-height: 1.8; }
.pub-footer-address a { color: #c9d1e0; text-decoration: none; }
.pub-footer-address a:hover { color: #fff; }
.pub-footer-bottom { border-top: 1px solid #2d3750; }
.pub-footer-bottom-inner { padding: 20px 5vw; }
.pub-footer-bottom p { font-size: 12px; color: #5c6a82; margin: 0; }
@media (max-width: 768px) {
  .pub-footer-inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 5vw 32px; }
  .pub-footer { margin-top: 48px; }
}

/* ── Course parts (groups of modules, Premium-only) — ported from Hans's 3.0 ── */
.part-heading { padding: 18px 20px 8px; border-top: 1px solid var(--border); }
.part-heading:first-child { border-top: none; }
.part-heading-title { font-size: 15px; font-weight: 700; color: var(--text); }
.part-heading-title:hover { text-decoration: underline; text-underline-offset: 2px; }
.part-heading-meta { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-size: 12px; color: var(--muted); }
.part-heading-desc { font-size: 13px; color: var(--muted); margin: 4px 0 0; line-height: 1.5; }
.part-heading.locked .part-heading-title { color: var(--muted); }
.part-check-item { background: var(--c-50); }
.part-page { max-width: 760px; }
.part-page-eyebrow { font-size: 12px; font-weight: 600; color: var(--muted); margin: 16px 0 4px; }
.part-page h1 { font-size: 26px; margin: 0 0 12px; }
.part-page-intro { font-size: 15px; line-height: 1.65; color: var(--c-700); margin: 0 0 20px; }
.part-page-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 13px; color: var(--muted); }
.part-page-progress .progress-track { flex: 1; max-width: 280px; }

/* learner/part-recap.php — legacy reader.php's "Sammanfattning" page, ported as
   its own view rather than an inline box (easier for a learner to actually read
   before a test drawing on several modules at once). */
.recap-list { list-style: none; margin: 0 0 28px; padding: 0; }
.recap-item { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.recap-item:first-child { border-top: none; padding-top: 0; }
.recap-item-body { flex: 1; min-width: 0; }
.recap-item-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.recap-item-desc { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--c-700); }
.recap-item-peek { flex-shrink: 0; }

/* A right-anchored drawer, not a centered modal — for anything that should stay
   reachable without covering the page the learner came from (a module peek, the
   tutor-message thread). Full-height, fixed to the right edge. Shared by
   .recap-peek-dialog and .tutor-drawer — two real uses is what earns this a
   shared class instead of two copies of the same ~20 lines.
   [open] matters here, not just specificity: an author-origin rule beats a
   user-agent one regardless of specificity, so an unqualified .side-drawer{}
   display rule would override the UA's dialog:not([open]){display:none} and leave
   every closed dialog rendered (and, since they're all position:fixed at the same
   coordinates, stacked invisibly on top of each other — whichever is last in the
   DOM wins the paint, with no click ever needed to "open" it). */
.side-drawer[open] {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(560px, 92vw);
  /* A <dialog> sizes itself to content (capped by the UA's own max-height), not
     stretched by its insets — top:0;bottom:0 alone doesn't fill the viewport when
     content is shorter than that, only when it happens to be taller. Explicit
     height forces it full-height regardless of how much content is in there. */
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  padding: 0;
  border: none;
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0,0,0,.18);
}
.side-drawer::backdrop { background: rgba(0,0,0,.08); }
@media (max-width: 700px) {
  .side-drawer[open] { width: 100%; border-left: none; }
}

/* Matches .subpage-drawer-head/.subpage-drawer-title — same "courseblock popover"
   header treatment everywhere, not a smaller one-off just because this dialog got
   built separately. */
.recap-peek-dialog .popup-dialog-header {
  flex-shrink: 0;
  justify-content: space-between;
  padding: 0 20px;
  height: 52px;
  border-bottom: 1px solid var(--border);
}
.recap-peek-title { flex: 1; font-size: 19px; font-weight: 700; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recap-peek-body { flex: 1; min-height: 0; padding: 12px 20px 24px; overflow-y: auto; }
.recap-peek-body .module-page { display: block !important; }
.recap-peek-body .module-page + .module-page { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }

/* Caps the part-check results column so it stays legible beside the peek drawer
   above (min(560px, 92vw)) on any screen wide enough to fit both. */
.part-check-panel { max-width: 640px; }
.recap-cta { border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; background: var(--c-50); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.recap-cta p { margin: 0; font-size: 14px; color: var(--text); }

/* Ask a tutor — one persistent FAB for the whole reader rather than a trigger
   wired into every courseblock; opens the same .side-drawer pattern as the
   module-peek dialogs above. Learner-only (mirrors .pub-edit-fab's admin-only
   top-right spot, positioned opposite at bottom-right so the two never collide). */
.tutor-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 209;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.tutor-fab:hover { background: #155a92; transform: translateY(-1px); }
.tutor-fab-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--surface);
}
.tutor-drawer .popup-dialog-header { flex-shrink: 0; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.tutor-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.tutor-empty { color: var(--muted); font-size: 13px; text-align: center; margin-top: 24px; }
.tutor-msg { display: flex; flex-direction: column; max-width: 88%; }
.tutor-msg--learner { align-self: flex-end; align-items: flex-end; }
.tutor-msg--admin { align-self: flex-start; align-items: flex-start; }
.tutor-msg-context { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.tutor-msg-bubble { padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
.tutor-msg--learner .tutor-msg-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.tutor-msg--admin .tutor-msg-bubble { background: var(--c-100); color: var(--text); border-bottom-left-radius: 4px; }
.tutor-msg-time { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.tutor-compose { flex-shrink: 0; display: flex; gap: 8px; padding: 14px 16px 22px; border-top: 1px solid var(--border); align-items: flex-end; }
.tutor-compose textarea { flex: 1; resize: none; min-height: 40px; max-height: 120px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); font: 400 13px/1.4 var(--font); color: var(--text); }
.tutor-compose textarea:focus { outline: none; border-color: var(--accent); }

/* ── First-time learner tutorial (2026-09-29) ──────────────────────────── */
.tutorial-dialog { max-width: 440px; width: calc(100% - 32px); margin: auto; border: none; border-radius: var(--r); padding: 0; box-shadow: 0 24px 80px rgba(0,0,0,.22); }
.tutorial-dialog::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(3px); }
.tutorial-dialog-body { padding: 28px 28px 4px; }
.tutorial-dialog-body h2 { margin: 0 0 8px; font-size: 19px; }
.tutorial-intro { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.tutorial-tips { margin: 0; padding: 0; list-style: none; }
.tutorial-tips li { position: relative; padding: 0 0 14px 24px; font-size: 14px; line-height: 1.5; }
.tutorial-tips li:last-child { padding-bottom: 0; }
.tutorial-tips li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent, #2563eb); font-weight: 700; }
.tutorial-dialog-foot { padding: 20px 28px 28px; }
.tutorial-dialog-foot .button { width: 100%; }

/* ── Glossary (standalone sv/en reference work) ─────────────────────────────── */
.glossary-header { margin-bottom: 20px; }
.glossary-header h1 { margin-bottom: 4px; }
.glossary-back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; margin-bottom: 10px; }
.glossary-back-link:hover { text-decoration: underline; }

.glossary-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.glossary-search { position: relative; flex: 1; min-width: 240px; display: flex; align-items: center; }
.glossary-search svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.glossary-search input[type="text"] {
  width: 100%; height: var(--h-input); padding: 0 14px 0 36px;
  border: 1px solid var(--border); border-radius: var(--r);
  font: 14px var(--font); background: var(--surface);
}
.glossary-search input[type="text"]:focus { outline: none; border-color: var(--accent); }
.glossary-locale-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; flex-shrink: 0; }
.glossary-locale-toggle a {
  padding: 0 14px; height: var(--h-input); display: flex; align-items: center;
  font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none;
}
.glossary-locale-toggle a + a { border-left: 1px solid var(--border); }
.glossary-locale-toggle a.active { background: var(--accent); color: var(--c-white); }

.glossary-letters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.glossary-letters a, .glossary-letter-empty {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-xs);
  font-size: 12.5px; font-weight: 600;
}
.glossary-letters a { color: var(--text); text-decoration: none; }
.glossary-letters a:hover { background: var(--c-50); }
.glossary-letters a.active { background: var(--accent); color: var(--c-white); }
.glossary-letter-empty { color: var(--border); }

.glossary-count { font-size: 12.5px; margin: 0 0 16px; }
.glossary-empty { padding: 40px 0; text-align: center; color: var(--muted); }

.glossary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.glossary-term {
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface);
}
.glossary-term h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 6px; color: var(--content-heading); }
.glossary-term p { font-size: 13.5px; line-height: 1.6; color: var(--text); margin: 0 0 6px; }
.glossary-term p:last-child { margin-bottom: 0; }
.glossary-term-ref { font-size: 12px; color: var(--muted); }

/* ── Quick-access glossary popover ──────────────────────────────────────────
   Stacked directly above .tutor-fab (same 52px circle, same right edge, one
   gap's worth higher) — a paired set of reader utilities, not identical twins:
   white/bordered here vs. solid accent for the tutor FAB, so the two don't
   read as the same action at a glance. */
.glossary-fab {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 209;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
  cursor: pointer;
  transition: background .15s, transform .15s, border-color .15s;
}
.glossary-fab:hover { background: var(--accent-bg, var(--c-50)); border-color: var(--accent); transform: translateY(-1px); }

.glossary-popover[open] {
  display: flex;
  flex-direction: column;
  position: fixed;
  /* Explicit inset (not just right/bottom) — a <dialog>'s UA default sets
     top/left too, which otherwise wins over right/bottom and pins this to
     the top-left corner instead of anchoring near the FAB it opens from. */
  inset: auto 20px 84px auto;
  margin: 0;
  width: min(380px, 92vw);
  max-height: min(520px, 70vh);
  border-radius: var(--r-lg);
  padding: 0;
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
.glossary-popover::backdrop { background: rgba(0,0,0,.06); }
@media (max-width: 460px) {
  .glossary-popover[open] { inset: auto 10px 84px 10px; width: auto; }
}

.glossary-popover-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 16px 12px; gap: 10px; }
.glossary-popover-results { flex: 1; min-height: 0; overflow-y: auto; }
.glossary-popover-hint { color: var(--muted); font-size: 13px; text-align: center; padding: 24px 8px; margin: 0; }
.glossary-popover-full-link { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; text-align: center; flex-shrink: 0; }
.glossary-popover-full-link:hover { text-decoration: underline; }

/* Compact term cards inside the popover — single column, tighter than the
   full glossary page's grid, and defs get line-clamped since this is a quick
   lookup, not the place to read a paragraph-long definition in full (the
   "Open full glossary" link is right there for that). */
.glossary-popover-results .glossary-list { display: flex; flex-direction: column; gap: 8px; }
.glossary-popover-results .glossary-term { padding: 10px 12px; }
.glossary-popover-results .glossary-term h3 { font-size: 13.5px; }
.glossary-popover-results .glossary-term p {
  font-size: 12.5px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.glossary-popover-results .glossary-count { font-size: 11.5px; margin: 0 0 8px; }