/* ============================================================
   ExpertLab Learner — Premium App Shell
   ============================================================ */

/* ── Typography ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Play:wght@400;700&display=swap');

/* ── Design tokens ── */
:root {
  /* Fonts */
  --font-display: "Play", Inter, system-ui, sans-serif;
  --font-body:    Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Backgrounds */
  --bg-main:         #06111f;
  --bg-panel:        rgba(9, 24, 42, 0.78);
  --bg-panel-strong: rgba(14, 34, 58, 0.94);
  --bg-sidebar:      rgba(5, 16, 30, 0.96);
  --bg-card:         rgba(8, 22, 40, 0.72);
  --bg-inset:        rgba(0, 0, 0, 0.28);

  /* Borders */
  --border-soft:   rgba(93, 160, 220, 0.14);
  --border-mid:    rgba(93, 160, 220, 0.24);
  --border-active: rgba(82, 150, 255, 0.68);
  --border-panel:  rgba(93, 160, 220, 0.18);

  /* Text */
  --text-main:  #f4f7fb;
  --text-muted: #8fa6bd;
  --text-dim:   #5e7288;
  --text-acc:   #4fd8ff;

  /* Semantic colours */
  --blue:   #4c8dff;
  --cyan:   #4fd8ff;
  --green:  #5ee0a0;
  --gold:   #f4b95b;
  --locked: #4b5563;

  --ok:   #5ee0a0;
  --warn: #f4b95b;
  --err:  #e8526a;

  /* Native TEST_BETA diagnostic — Approprié/Non approprié semantic colours. Scoped tokens
     (not --ok/--err) so tuning them for light-mode contrast cannot ripple into the
     dashboard/admin surfaces that already consume --ok/--err/--warn unchanged. */
  --diag-danger:  #ef7777;
  --diag-success: #4fd494;
  /* Proposition prev/next glyph colour. Existing amber already used elsewhere in this exact
     dark theme (UAT tools border/text, flag-pressed state) - reused rather than inventing a
     new hue, so it is proven readable on this background already. */
  --diag-nav:     #e7ad3d;

  /* Accent */
  --accent:   #4fd8ff;
  --cityone-accent: var(--accent);
  --accent-2: #5ee0a0;
  --acc-glow: rgba(79, 216, 255, 0.18);
  --badge-accent: #f4c45b;
  --badge-accent-soft: rgba(244, 196, 91, 0.12);
  --badge-stage: radial-gradient(circle at 50% 38%, rgba(244,196,91,.22), rgba(79,216,255,.06) 58%, transparent 72%);

  /* Highlighted panel (hub "next mission" strip). Tokenised because the hard-coded navy
     gradient it replaces stayed dark under data-theme="light" while --text-main flipped to
     near-black, leaving the panel unreadable. */
  --bg-highlight-panel: linear-gradient(110deg, rgba(11, 36, 64, 0.94), rgba(8, 22, 44, 0.78));
  --border-highlight:   rgba(79, 216, 255, 0.34);

  /* Radius */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* Shadows */
  --sh-card:  0 2px 20px rgba(0,0,0,0.50), 0 1px 3px rgba(0,0,0,0.30);
  --sh-float: 0 8px 40px rgba(0,0,0,0.60);
  --sh-glow:  0 0 24px rgba(79,216,255,0.14);

  /* Sidebar */
  --sidebar-w: 58px;
  --topbar-h:  52px;
  --mobile-bottomnav-h: 58px;
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --font-size-body: 14px;
  --font-size-topbar-title: 14px;
  --font-size-topbar-section: 11px;
  --font-size-menu-label: 12px;
  --font-size-menu-hint: 11px;
  --font-size-menu-link: 13px;
}

:root[data-theme="light"] {
  --bg-main:         #eff4fa;
  --bg-panel:        rgba(248, 251, 255, 0.94);
  --bg-panel-strong: rgba(255, 255, 255, 0.98);
  --bg-sidebar:      rgba(243, 248, 255, 0.98);
  --bg-card:         rgba(255, 255, 255, 0.92);
  --bg-inset:        rgba(215, 229, 244, 0.38);
  --border-soft:     rgba(25, 87, 135, 0.13);
  --border-mid:      rgba(25, 87, 135, 0.24);
  --border-active:   rgba(50, 118, 199, 0.72);
  --border-panel:    rgba(25, 87, 135, 0.20);
  --text-main:       #102235;
  --text-muted:      #3a5774;
  --text-dim:        #5a7490;
  --text-acc:        #0f7ca8;
  --accent:          #1578a7;
  --acc-glow:        rgba(21, 120, 167, 0.16);
  --badge-accent:    #7c5600;
  --badge-accent-soft: rgba(156, 105, 0, 0.10);
  --badge-stage: radial-gradient(circle at 50% 38%, rgba(225,174,64,.24), rgba(21,120,167,.08) 58%, transparent 72%);

  /* Darker/more saturated so text and icons built on these still clear 4.5:1 (normal
     text) against the light panel/card backgrounds — the dark-theme values above are
     tuned for a near-black background and read as near-invisible pastel on white. */
  --diag-danger:  #c4302a;
  --diag-success: #157a4a;
  /* Dark gold/amber - the dark-theme value above (#e7ad3d) is a light pastel amber and
     reads at ~2:1 contrast on a white panel; this is contrast-checked at ~5.8:1 on white
     while staying clearly the same gold hue family. */
  --diag-nav:     #8a5c00;

  /* Light panel with the same accent tint as the dark gradient, kept light enough that the
     light-theme --text-main (#102235) and --text-muted (#3a5774) both stay well above
     4.5:1 on it. */
  --bg-highlight-panel: linear-gradient(110deg, rgba(233, 243, 253, 0.98), rgba(246, 250, 255, 0.94));
  --border-highlight:   rgba(21, 120, 167, 0.34);
}

:root[data-font-size="large"] {
  --font-size-body: 15.5px;
  --font-size-topbar-title: 15.5px;
  --font-size-topbar-section: 12px;
  --font-size-menu-label: 13px;
  --font-size-menu-hint: 12px;
  --font-size-menu-link: 14px;
}

/* Dark is the baseline token set in :root; data-theme="dark" intentionally uses defaults. */

/* Large-text mode extends readability across learner hub/career/dashboard surfaces. */
:root[data-font-size="large"] .welcome-title { font-size: clamp(1.9rem, 4.9vw, 2.2rem); }
:root[data-font-size="large"] .welcome-subtitle,
:root[data-font-size="large"] .module-desc,
:root[data-font-size="large"] .side-info-text,
:root[data-font-size="large"] .mia-message,
:root[data-font-size="large"] .mia-meta,
:root[data-font-size="large"] .node-mia-note p,
:root[data-font-size="large"] .node-locked-reason,
:root[data-font-size="large"] .node-locked-how,
:root[data-font-size="large"] .db-status-text,
:root[data-font-size="large"] .db-kpi-explanation-text,
:root[data-font-size="large"] .dashboard-recent-list li,
:root[data-font-size="large"] .dashboard-blocked-text,
:root[data-font-size="large"] .db-next-subtitle,
:root[data-font-size="large"] .dashboard-progress-meta,
:root[data-font-size="large"] .dashboard-progress-pct,
:root[data-font-size="large"] .dashboard-distribution-item,
:root[data-font-size="large"] .dashboard-diagnostic-values-item,
:root[data-font-size="large"] .mia-float-role,
:root[data-font-size="large"] .mia-float-home-meta,
:root[data-font-size="large"] .mia-float-tips li,
:root[data-font-size="large"] .mia-dock-message,
:root[data-font-size="large"] .mia-dock-meta,
:root[data-font-size="large"] .mia-dock-panel-tips li {
  font-size: clamp(0.8rem, 1.2vw, 0.96rem);
}

:root[data-font-size="large"] .module-title,
:root[data-font-size="large"] .btn-primary,
:root[data-font-size="large"] .btn-secondary,
:root[data-font-size="large"] .course-link,
:root[data-font-size="large"] .node-detail-competence,
:root[data-font-size="large"] .node-progress-pct,
:root[data-font-size="large"] .node-detail-dl dd,
:root[data-font-size="large"] .course-unavailable,
:root[data-font-size="large"] .course-locked-label,
:root[data-font-size="large"] .db-title,
:root[data-font-size="large"] .db-family-name,
:root[data-font-size="large"] .db-family-meta p,
:root[data-font-size="large"] .db-family-cta,
:root[data-font-size="large"] .db-next-title,
:root[data-font-size="large"] .dashboard-progress-title,
:root[data-font-size="large"] .mia-name,
:root[data-font-size="large"] .mia-float-name,
:root[data-font-size="large"] .mia-float-message,
:root[data-font-size="large"] .mia-dock-name,
:root[data-font-size="large"] .mia-dock-panel-msg {
  font-size: clamp(0.9rem, 1.35vw, 1.05rem);
}

:root[data-font-size="large"] .btn-secondary--compact,
:root[data-font-size="large"] .db-panel-title,
:root[data-font-size="large"] .db-panel-sub,
:root[data-font-size="large"] .db-empty,
:root[data-font-size="large"] .dashboard-refresh-chip,
:root[data-font-size="large"] .node-status-badge,
:root[data-font-size="large"] .node-level-badge,
:root[data-font-size="large"] .node-detail-family,
:root[data-font-size="large"] .node-progress-label-text,
:root[data-font-size="large"] .node-detail-dl dt,
:root[data-font-size="large"] .learner-page-status-badge,
:root[data-font-size="large"] .mia-role,
:root[data-font-size="large"] .mia-dock-text,
:root[data-font-size="large"] .account-menu-title,
:root[data-font-size="large"] .account-menu-status {
  font-size: clamp(0.75rem, 1.08vw, 0.9rem);
}

:root[data-font-size="large"] .kpi-value,
:root[data-font-size="large"] .db-kpi-value,
:root[data-font-size="large"] .db-engagement-score,
:root[data-font-size="large"] .db-family-pct {
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
}

:root[data-font-size="large"] .db-kpi-value--hero {
  font-size: clamp(2rem, 4.6vw, 2.7rem) !important;
}

:root[data-font-size="large"] .db-kpi-label,
:root[data-font-size="large"] .db-engagement-label,
:root[data-font-size="large"] .db-next-status,
:root[data-font-size="large"] .db-eyebrow,
:root[data-font-size="large"] .module-badge,
:root[data-font-size="large"] .node-locked-header,
:root[data-font-size="large"] .panel-section-label {
  font-size: clamp(0.68rem, 0.95vw, 0.82rem);
}

/* Career map SVG text: readable in large-text mode without changing map behavior. */
:root[data-font-size="large"] #career-map-svg text {
  font-size: clamp(10px, 1.08vw, 19px);
}
:root[data-font-size="large"] #career-map-svg text[font-size="8"]  { font-size: clamp(10px, 1.0vw, 13px); }
:root[data-font-size="large"] #career-map-svg text[font-size="11"] { font-size: clamp(12px, 1.12vw, 16px); }
:root[data-font-size="large"] #career-map-svg text[font-size="13"] { font-size: clamp(14px, 1.24vw, 18px); }
:root[data-font-size="large"] #career-map-svg text[font-size="14"] { font-size: clamp(15px, 1.3vw, 19px); }
:root[data-font-size="large"] #career-map-svg text[font-size="16"] { font-size: clamp(17px, 1.45vw, 22px); }
:root[data-font-size="large"] #career-map-svg text[font-size="18"] { font-size: clamp(19px, 1.58vw, 24px); }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

@media (max-width: 900px) {
  html, body { height: 100%; overflow: hidden; }
  body.learner-theme {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .app-shell { flex: 1; min-height: 0; }
}

body.learner-theme {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.55;
  color: var(--text-main);
  background: var(--bg-main);
  background-image:
    radial-gradient(ellipse 70% 50% at 0% 0%,    rgba(76, 141, 255, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 100% 8%,  rgba(94, 224, 160, 0.05) 0%, transparent 50%);
  background-attachment: fixed;
  overflow: hidden;
}

/* ============================================================
   APP SHELL — sidebar + topbar + content
   ============================================================ */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ── */
.app-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 0 16px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-soft);
  z-index: 20;
  overflow: visible;
}

.sidebar-brand {
  width: 100%;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.sidebar-brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(1.1);
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 0;
  width: 100%;
}

.sidebar-item {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color .16s, background .16s, border-color .16s;
  cursor: pointer;
}

.sidebar-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-item:hover {
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
}

.sidebar-item.active {
  color: var(--accent);
  background: rgba(79, 216, 255, 0.10);
  border-color: rgba(79, 216, 255, 0.22);
}

.sidebar-item--disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

.sidebar-tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--bg-panel-strong);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-main);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 100;
  box-shadow: var(--sh-card);
}

.sidebar-item:hover .sidebar-tooltip { opacity: 1; }

.sidebar-divider {
  width: 28px;
  height: 1px;
  background: var(--border-soft);
  margin: 6px 0;
  flex-shrink: 0;
}

.sidebar-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}

/* ── Topbar ── */
.app-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 18px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(6, 17, 31, 0.94);
  backdrop-filter: blur(16px);
  z-index: 10;
  gap: 16px;
  flex-shrink: 0;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.topbar-section {
  font-size: var(--font-size-topbar-section);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-family: var(--font-display);
}

.topbar-divider {
  width: 1px;
  height: 16px;
  background: var(--border-soft);
  flex-shrink: 0;
}

.topbar-page-title {
  font-size: var(--font-size-topbar-title);
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
  font-family: var(--font-display);
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: nowrap;
  flex-shrink: 1;
}

.topbar-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color .15s, background .15s, border-color .15s;
}

.topbar-icon-btn svg { width: 15px; height: 15px; }
.topbar-icon-btn:hover { color: var(--text-muted); background: rgba(255,255,255,0.06); border-color: var(--border-mid); }

.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1b4870, #0c2540);
  border: 1.5px solid rgba(79, 216, 255, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.topbar-avatar:hover,
.topbar-avatar:focus-visible,
.topbar-avatar.is-open {
  border-color: rgba(79, 216, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(79, 216, 255, 0.16);
}

.topbar-avatar:focus-visible {
  outline: none;
}

.account-avatar-host {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.active-journey-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 0;
  background: #d93a3a;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.preview-mode-badge {
  position: absolute;
  top: -34px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 202, 79, 0.35);
  background: rgba(255, 202, 79, 0.14);
  color: #ffe8a5;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}

.preview-mode-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 202, 79, 0.30);
  background: rgba(255, 202, 79, 0.10);
  color: #fbe7b1;
  font-size: 12px;
  line-height: 1.35;
}

:root[data-theme="light"] .preview-mode-note {
  color: #7c5600;
}

/* Mia dock in reviewer preview mode: subtle gold tint on border */
.mia-dock[data-preview="true"] {
  border-color: rgba(255, 202, 79, 0.28);
  background: rgba(255, 202, 79, 0.04);
}
.mia-dock[data-preview="true"] .mia-dock-message {
  color: #fbe7b1;
}

.preview-mode-note p {
  margin: 0;
}

.preview-mode-note p + p {
  margin-top: 4px;
}

.preview-mode-note--compact {
  margin-top: 6px;
  max-width: 540px;
}

.account-menu {
  position: fixed;
  box-sizing: border-box;
  width: 320px;
  min-width: 0;
  max-height: calc(100dvh - 70px);
  overflow: auto;
  max-width: min(92vw, 320px);
  background: rgba(8, 24, 42, 0.98);
  border: 1px solid rgba(93, 160, 220, 0.28);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
  padding: 12px;
  z-index: 2500;
}

:root[data-theme="light"] .app-topbar {
  background: rgba(245, 250, 255, 0.96);
}

:root[data-theme="light"] .account-menu {
  background: rgba(250, 253, 255, 0.98);
  border-color: rgba(25, 87, 135, 0.28);
}

/* Hub cards/panels: explicit light coverage for dark hard-coded card surfaces. */
:root[data-theme="light"] .module-card {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(25, 87, 135, 0.16);
}

:root[data-theme="light"] .module-card--active {
  background: linear-gradient(160deg, rgba(237, 247, 255, 0.96), rgba(250, 253, 255, 0.98));
  border-color: rgba(21, 120, 167, 0.30);
}

:root[data-theme="light"] .module-icon {
  background: rgba(21, 120, 167, 0.10);
  border-color: rgba(21, 120, 167, 0.26);
}

:root[data-theme="light"] .module-arrow {
  background: rgba(21, 120, 167, 0.10);
  border-color: rgba(21, 120, 167, 0.24);
}

:root[data-theme="light"] .mia-panel-full,
:root[data-theme="light"] .side-info {
  background: rgba(248, 252, 255, 0.92);
}

/* Career map + side panel: explicit light overrides for SVG/panel dark surfaces. */
:root[data-theme="light"] .career-panel,
:root[data-theme="light"] .mia-block,
:root[data-theme="light"] .node-detail {
  background: rgba(251, 254, 255, 0.94);
}

:root[data-theme="light"] .map-ctrl-btn {
  background: rgba(244, 250, 255, 0.96);
  border-color: rgba(25, 87, 135, 0.28);
  color: var(--text-muted);
}

:root[data-theme="light"] .cluster-focus-ctx {
  background: rgba(21, 120, 167, 0.12);
  border-color: rgba(21, 120, 167, 0.26);
  color: #0f6f99;
}

:root[data-theme="light"] .career-status-filter-dropdown-btn {
  border-color: rgba(21, 120, 167, 0.42);
  background: linear-gradient(135deg, rgba(21, 120, 167, 0.18) 0%, rgba(21, 120, 167, 0.10) 100%);
  color: #13496b;
}

:root[data-theme="light"] .career-status-filter-select-wrap::after {
  border-right-color: rgba(19, 73, 107, 0.9);
  border-bottom-color: rgba(19, 73, 107, 0.9);
}

:root[data-theme="light"] .career-status-filter-select-wrap.is-open .career-status-filter-dropdown-btn {
  border-color: rgba(21, 120, 167, 0.62);
  box-shadow: inset 0 0 0 1px rgba(21, 120, 167, 0.20), 0 0 12px rgba(21, 120, 167, 0.14);
}

:root[data-theme="light"] .career-status-filter-dropdown-menu {
  border-color: rgba(21, 120, 167, 0.34);
  background: linear-gradient(155deg, rgba(244, 250, 255, 0.98), rgba(252, 255, 255, 0.98));
}

:root[data-theme="light"] .career-status-filter-dropdown-option {
  color: #2f5778;
}

:root[data-theme="light"] .career-status-filter-dropdown-option:hover,
:root[data-theme="light"] .career-status-filter-dropdown-option.is-focused {
  color: #0f496c;
  background: rgba(21, 120, 167, 0.12);
}

:root[data-theme="light"] .career-status-filter-dropdown-option[aria-selected="true"] {
  color: #0e4d72;
  background: linear-gradient(135deg, rgba(21, 120, 167, 0.18) 0%, rgba(21, 120, 167, 0.10) 100%);
  box-shadow: inset 0 0 0 1px rgba(21, 120, 167, 0.22);
}

:root[data-theme="light"] .learner-page-status-badge {
  background: rgba(239, 247, 255, 0.95);
  border-color: rgba(21, 120, 167, 0.30);
  color: #225273;
}

:root[data-theme="light"] .learner-page-status-badge::before {
  box-shadow: 0 0 6px rgba(21, 120, 167, 0.42);
}

:root[data-theme="light"] #career-map-svg rect[fill="#040c18"] {
  fill: #e9f2fb !important;
}

:root[data-theme="light"] #career-map-svg circle[stroke="#040c18"] {
  stroke: rgba(231, 241, 250, 0.98) !important;
  opacity: 1 !important;
}

:root[data-theme="light"] #career-map-svg circle[stroke="rgba(94,168,220,0.18)"] {
  stroke: rgba(25, 87, 135, 0.26) !important;
}

:root[data-theme="light"] #career-map-svg circle[stroke="rgba(61,184,245,0.22)"] {
  stroke: rgba(21, 120, 167, 0.38) !important;
}

:root[data-theme="light"] #career-map-svg circle[fill="rgba(61,184,245,0.07)"] {
  fill: rgba(21, 120, 167, 0.08) !important;
}

:root[data-theme="light"] #career-map-svg circle[fill="url(#cg)"] {
  stroke: #1578a7 !important;
}

:root[data-theme="light"] #career-map-svg circle[fill="#071828"] {
  fill: #dff0ff !important;
}

:root[data-theme="light"] #career-map-svg text[fill="#042e18"] {
  fill: #104d70 !important;
}

:root[data-theme="light"] #career-map-svg text[fill="#cceeff"],
:root[data-theme="light"] #career-map-svg text[fill="rgba(170,215,240,0.65)"] {
  fill: #2c5375 !important;
}

/* Family-end badges around map perimeter. */
:root[data-theme="light"] #career-map-svg rect[fill="#071828"][width="58"][height="36"] {
  fill: #edf6ff !important;
  stroke: rgba(21, 120, 167, 0.72) !important;
  width: 72px;
  height: 42px;
  transform: translateX(-8px);
}

:root[data-theme="light"] #career-map-svg text[letter-spacing="0.10em"] {
  letter-spacing: 0.05em !important;
  fill: #1c567e !important;
}

/* Dashboard surfaces: explicit light coverage for dark hard-coded card/panel containers. */
:root[data-theme="light"] .db-kpi {
  background: linear-gradient(155deg, rgba(244, 250, 255, 0.98), rgba(252, 255, 255, 0.98));
  border-color: rgba(25, 87, 135, 0.20);
}

:root[data-theme="light"] .db-kpi--hero {
  background: linear-gradient(145deg, rgba(231, 244, 255, 0.98) 0%, rgba(247, 252, 255, 0.98) 100%);
  border-color: rgba(21, 120, 167, 0.28);
}

:root[data-theme="light"] .db-panel {
  background: linear-gradient(155deg, rgba(248, 253, 255, 0.98), rgba(242, 249, 255, 0.98));
  border-color: rgba(25, 87, 135, 0.18);
  box-shadow: 0 6px 20px rgba(17, 51, 84, 0.08), 0 1px 0 rgba(255,255,255,0.72) inset;
}

:root[data-theme="light"] .db-family-card {
  background: rgba(249, 253, 255, 0.98);
  border-color: rgba(25, 87, 135, 0.16);
}

:root[data-theme="light"] .db-family-card.is-expanded {
  background: linear-gradient(155deg, rgba(235, 247, 255, 0.98), rgba(247, 253, 255, 0.99));
}

:root[data-theme="light"] .dashboard-diagnostic-chart {
  background: rgba(246, 251, 255, 0.96);
  border-color: rgba(25, 87, 135, 0.14);
}

:root[data-theme="light"] .dashboard-recent-list li,
:root[data-theme="light"] .db-badges-placeholder {
  background: rgba(247, 252, 255, 0.96);
  border-color: rgba(25, 87, 135, 0.16);
}

:root[data-theme="light"] .dashboard-diagnostic-ring {
  stroke: rgba(25, 87, 135, 0.24);
}

:root[data-theme="light"] .dashboard-diagnostic-axis {
  stroke: rgba(25, 87, 135, 0.20);
}

/* Dashboard contrast tune: keep blue/cyan identity but darker on light surfaces. */
:root[data-theme="light"] .db-kpi-icon-wrap--progress,
:root[data-theme="light"] .db-kpi-icon-wrap--activity,
:root[data-theme="light"] .db-kpi-icon-wrap--time {
  color: #116792;
}

:root[data-theme="light"] .db-panel-icon,
:root[data-theme="light"] .db-panel-title,
:root[data-theme="light"] .db-panel-sub,
:root[data-theme="light"] .dashboard-refresh-chip,
:root[data-theme="light"] .db-diag-leg-item,
:root[data-theme="light"] .dashboard-progress-row .dashboard-progress-pct,
:root[data-theme="light"] .db-family-name,
:root[data-theme="light"] .db-family-meta p,
:root[data-theme="light"] .db-family-pct,
:root[data-theme="light"] .dashboard-diagnostic-values-item,
:root[data-theme="light"] .db-status-text--compact {
  color: #225779;
}

:root[data-theme="light"] .dashboard-diagnostic-polygon--learner {
  fill: rgba(17, 103, 146, 0.18);
  stroke: #116792;
}

:root[data-theme="light"] .dashboard-diagnostic-dot--learner {
  fill: #116792;
}

:root[data-theme="light"] .dashboard-distribution-segment--in-progress {
  background: rgba(17, 103, 146, 0.86);
}

:root[data-theme="light"] .dashboard-distribution-dot--in-progress {
  background: rgba(17, 103, 146, 0.95);
}

:root[data-theme="light"] .dashboard-progress-bar > span,
:root[data-theme="light"] .dashboard-progress-bar-fill,
:root[data-theme="light"] .db-family-bar-fill {
  background: linear-gradient(90deg, rgba(17, 103, 146, 0.92) 0%, rgba(34, 116, 161, 0.82) 100%);
}

:root[data-theme="light"] .dashboard-progress-bar,
:root[data-theme="light"] .db-family-bar {
  background: rgba(17, 103, 146, 0.14);
}

:root[data-theme="light"] .mia-avatar {
  background: linear-gradient(145deg, #d7eaf8, #eaf5ff);
  border-color: rgba(21, 120, 167, 0.36);
  box-shadow: 0 0 10px rgba(21, 120, 167, 0.14);
}

:root[data-theme="light"] .mia-avatar-initial {
  color: #116792;
}

:root[data-theme="light"] .mia-name,
:root[data-theme="light"] .mia-role,
:root[data-theme="light"] .mia-message,
:root[data-theme="light"] .mia-meta {
  color: #2f5d7f;
}

/* Career Mia controls/panels + mission detail surfaces in light mode. */
:root[data-theme="light"] .mia-dock,
:root[data-theme="light"] .mia-dock-panel,
:root[data-theme="light"] .mia-float-panel,
:root[data-theme="light"] .mission-window,
:root[data-theme="light"] .detail-sheet-inner,
:root[data-theme="light"] .node-detail,
:root[data-theme="light"] .node-locked-block,
:root[data-theme="light"] .node-mia-note,
:root[data-theme="light"] .mission-page,
:root[data-theme="light"] .mission-header,
:root[data-theme="light"] .mission-activities,
:root[data-theme="light"] .mission-launch-panel {
  background: rgba(248, 252, 255, 0.97);
  border-color: rgba(25, 87, 135, 0.22);
}

:root[data-theme="light"] .mia-dock-text,
:root[data-theme="light"] .mia-dock-name,
:root[data-theme="light"] .mia-dock-message,
:root[data-theme="light"] .mia-dock-meta,
:root[data-theme="light"] .mia-dock-panel-msg,
:root[data-theme="light"] .mia-dock-panel-tips li,
:root[data-theme="light"] .mia-float-name,
:root[data-theme="light"] .mia-float-role,
:root[data-theme="light"] .mia-float-message,
:root[data-theme="light"] .mia-float-home-meta,
:root[data-theme="light"] .mia-float-tips li,
:root[data-theme="light"] .mission-window-label,
:root[data-theme="light"] .node-detail-title,
:root[data-theme="light"] .node-detail-competence,
:root[data-theme="light"] .node-detail-family,
:root[data-theme="light"] .node-mia-note p,
:root[data-theme="light"] .node-locked-reason,
:root[data-theme="light"] .node-locked-how,
:root[data-theme="light"] .mission-kicker,
:root[data-theme="light"] .mission-title,
:root[data-theme="light"] .mission-subtitle,
:root[data-theme="light"] .mission-activity-title,
:root[data-theme="light"] .mission-activity-meta,
:root[data-theme="light"] .mission-launch-panel-title,
:root[data-theme="light"] .mission-launch-panel-body,
:root[data-theme="light"] .mission-launch-panel-status {
  color: #214e70;
}

:root[data-theme="light"] .mia-dock-btn,
:root[data-theme="light"] .mia-float-btn,
:root[data-theme="light"] .mission-window-close,
:root[data-theme="light"] .detail-sheet-close,
:root[data-theme="light"] .mia-dock-panel-close,
:root[data-theme="light"] .mia-float-close,
:root[data-theme="light"] .mission-back-link,
:root[data-theme="light"] .family-return-btn-map {
  background: rgba(237, 247, 255, 0.96);
  color: #1d4f74;
  border-color: rgba(25, 87, 135, 0.26);
}

:root[data-theme="light"] .mia-dock-btn:hover,
:root[data-theme="light"] .mia-float-btn:hover,
:root[data-theme="light"] .mission-window-close:hover,
:root[data-theme="light"] .detail-sheet-close:hover,
:root[data-theme="light"] .mia-dock-panel-close:hover,
:root[data-theme="light"] .mia-float-close:hover,
:root[data-theme="light"] .mission-back-link:hover,
:root[data-theme="light"] .family-return-btn-map:hover {
  background: rgba(226, 240, 252, 0.98);
  border-color: rgba(21, 120, 167, 0.40);
}

/* Mia support/messages + mission intro video: explicit light-mode surfaces for dark hard-coded blocks. */
:root[data-theme="light"] .mia-feedback-panel textarea,
:root[data-theme="light"] .mia-support-reply-box textarea {
  background: rgba(255, 255, 255, 0.98);
  color: #163a58;
  border-color: rgba(25, 87, 135, 0.28);
}

:root[data-theme="light"] .mia-support-ticket-box,
:root[data-theme="light"] .mia-support-msg {
  background: rgba(244, 250, 255, 0.98);
  border-color: rgba(25, 87, 135, 0.24);
}

:root[data-theme="light"] .mia-support-indicator,
:root[data-theme="light"] .mia-support-reply-needed {
  color: #955d00;
}

:root[data-theme="light"] .mia-support-admin-reply,
:root[data-theme="light"] .mia-support-msg-body {
  color: #163a58;
}

:root[data-theme="light"] .mia-support-msg-head,
:root[data-theme="light"] .mia-support-status {
  color: #496a87;
}

:root[data-theme="light"] .mission-intro-video,
:root[data-theme="light"] .mission-intro-fallback {
  background: rgba(248, 252, 255, 0.97);
  border-color: rgba(25, 87, 135, 0.22);
}

:root[data-theme="light"] .mission-intro-video-player,
:root[data-theme="light"] .mission-intro-video-mia-fallback {
  background: rgba(237, 247, 255, 0.98);
  border-color: rgba(25, 87, 135, 0.24);
  box-shadow: 0 2px 12px rgba(14, 52, 82, 0.08);
}

:root[data-theme="light"] .mission-intro-video-mia-title {
  color: #1f4f73;
}

/* Family hover/focus labels and selected-family title in map light mode. */
:root[data-theme="light"] .fam-sel-floating-label,
:root[data-theme="light"] .cluster-focus-ctx {
  color: #1a4f74;
  background: rgba(235, 246, 255, 0.95);
  border-color: rgba(21, 120, 167, 0.34);
}

/* Dashboard: progression globale value + KPI explanation panel readability. */
:root[data-theme="light"] .db-kpi--hero .db-kpi-value--hero,
:root[data-theme="light"] #dashboard-progress,
:root[data-theme="light"] .db-kpi[data-kpi-key="progress"] .db-kpi-value {
  color: #0f5f88;
}

:root[data-theme="light"] .db-kpi-explanation {
  background: rgba(245, 251, 255, 0.98);
  border-color: rgba(25, 87, 135, 0.22);
}

:root[data-theme="light"] .db-kpi-explanation-text {
  color: #285b7f;
}

/* Learner debug surfaces (visual only; no trigger behavior changes). */
:root[data-theme="light"] .refresh-debug-panel,
:root[data-theme="light"] .refresh-debug-panel.refresh-debug-panel--inline {
  background: rgba(248, 252, 255, 0.99);
  border-color: rgba(25, 87, 135, 0.28);
  color: #204c6d;
}

:root[data-theme="light"] .refresh-debug-title,
:root[data-theme="light"] .refresh-debug-label,
:root[data-theme="light"] .refresh-debug-value,
:root[data-theme="light"] .refresh-debug-meta {
  color: #29597b;
}

:root[data-theme="light"] .refresh-debug-row {
  border-color: rgba(25, 87, 135, 0.14);
}

:root[data-theme="light"] .refresh-debug-response {
  background: rgba(236, 246, 255, 0.9);
  border-color: rgba(25, 87, 135, 0.16);
  color: #1f4f72;
}

:root[data-theme="light"] .refresh-debug-close,
:root[data-theme="light"] .refresh-debug-copy {
  background: rgba(232, 245, 255, 0.96);
  border-color: rgba(25, 87, 135, 0.28);
  color: #1f4d6f;
}

/* Family focus header shown after selecting a family on career map. */
:root[data-theme="light"] #family-floating-banner {
  background: rgba(244, 251, 255, 0.98) !important;
  border-color: rgba(25, 87, 135, 0.30) !important;
  box-shadow: 0 4px 20px rgba(17, 51, 84, 0.12), 0 0 14px rgba(21, 120, 167, 0.10);
}

:root[data-theme="light"] .family-banner-name {
  color: #1f4f72 !important;
}

/* Career center Test Beta node: stable class hooks generated by learner-career.js. */
#career-map-svg .career-core-node--state-pending {
  --career-core-glow-rgb: 232, 82, 106;
  --career-core-glow-bright-rgb: 255, 109, 130;
  --career-core-shell-rgb: 58, 17, 27;
}

#career-map-svg .career-core-node--state-completed {
  --career-core-glow-rgb: 94, 224, 160;
  --career-core-glow-bright-rgb: 126, 244, 184;
  --career-core-shell-rgb: 14, 47, 35;
}

#career-map-svg .career-core-node--ring {
  display: none;
}

#career-map-svg .career-core-node--body {
  display: none;
}

#career-map-svg .career-core-node--top {
  display: none;
}

#career-map-svg .career-core-node--aura {
  display: none;
}

#career-map-svg .career-core-node--halo {
  display: none;
}

#career-map-svg .career-core-node--backglow {
  fill: rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.3);
}

:root[data-theme="light"] #career-map-svg .career-core-node-label {
  fill: #1f5d86 !important;
}

:root[data-theme="light"] #career-map-svg .career-core-node-label--sub {
  fill: #3d6e93 !important;
}

#career-map-svg .career-core-node-visual-shell {
  filter: drop-shadow(0 0 22px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.2))
    drop-shadow(0 0 44px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.12));
}

:root[data-theme="light"] #career-map-svg .career-core-node-visual-shell {
  filter: drop-shadow(0 0 22px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.24))
    drop-shadow(0 0 44px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.14));
}

#career-map-svg .career-core-node--pulse {
  transform-origin: center center;
  transform-box: fill-box;
}

#career-map-svg .career-core-node--backglow.career-core-node--pulse {
  animation: careerCoreBackGlowLight 3.2s ease-in-out infinite;
}

#career-map-svg .career-core-node-visual-shell.career-core-node--pulse {
  animation: careerCoreProjectedBloom 3.2s ease-in-out infinite;
}

#career-map-svg .career-core-node-visual {
  animation: careerCoreImageLight 3.2s ease-in-out infinite;
}

@keyframes careerCoreBackGlowLight {
  0%, 100% {
    opacity: 0.36;
    filter: blur(10px) brightness(0.94);
  }
  50% {
    opacity: 0.86;
    filter: blur(20px) brightness(1.16);
  }
}

@keyframes careerCoreProjectedBloom {
  0%, 100% {
    filter: drop-shadow(0 0 24px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.2))
      drop-shadow(0 0 48px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.12));
  }
  50% {
    filter: drop-shadow(0 0 36px rgba(var(--career-core-glow-bright-rgb, 79, 216, 255), 0.38))
      drop-shadow(0 0 72px rgba(var(--career-core-glow-bright-rgb, 79, 216, 255), 0.2));
  }
}

@keyframes careerCoreImageLight {
  0%, 100% {
    filter: brightness(0.97) saturate(1);
  }
  50% {
    filter: brightness(1.16) saturate(1.1);
  }
}

:root[data-theme="light"] .family-return-btn-map {
  background: rgba(242, 250, 255, 0.98) !important;
  border-color: rgba(25, 87, 135, 0.30) !important;
  color: #1e4f72 !important;
}

:root[data-theme="light"] .family-return-btn-map:hover,
:root[data-theme="light"] .family-return-btn-map:focus-visible {
  background: rgba(231, 244, 255, 0.99) !important;
  border-color: rgba(21, 120, 167, 0.42) !important;
}

.account-menu-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.account-menu-section + .account-menu-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(93, 160, 220, 0.18);
}

.account-menu-label {
  margin: 0 0 8px;
  font-size: var(--font-size-menu-label);
  color: var(--text-muted);
}

.account-menu-subtitle {
  margin: -4px 0 8px;
  font-size: var(--font-size-menu-hint);
  color: var(--text-dim);
}

.account-menu-detail {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 8px;
}

.account-menu-detail-label {
  font-size: var(--font-size-menu-hint);
  color: var(--text-dim);
}

.account-menu-detail-value {
  font-size: var(--font-size-menu-hint);
  color: var(--text-muted);
  word-break: break-word;
}

.account-menu-switches {
  display: grid;
  gap: 8px;
}

.account-menu-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(93, 160, 220, 0.22);
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 10px;
  cursor: pointer;
}

.account-menu-switch-row:hover {
  border-color: rgba(79, 216, 255, 0.42);
}

.account-menu-switch-text {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-menu-switch-label {
  color: var(--text-main);
  font-size: var(--font-size-menu-label);
  font-weight: 600;
  line-height: 1.25;
}

.account-menu-switch-hint {
  color: var(--text-dim);
  font-size: var(--font-size-menu-hint);
  line-height: 1.2;
}

.account-menu-switch-control {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.account-menu-switch-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.account-menu-switch-ui {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(93, 160, 220, 0.34);
  background: rgba(255, 255, 255, 0.08);
  transition: background .15s ease, border-color .15s ease;
}

.account-menu-switch-ui::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d9f4ff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform .15s ease;
}

.account-menu-switch-input:checked + .account-menu-switch-ui {
  background: rgba(79, 216, 255, 0.28);
  border-color: rgba(79, 216, 255, 0.64);
}

.account-menu-switch-input:checked + .account-menu-switch-ui::before {
  transform: translateX(18px);
}

.account-menu-switch-input:focus-visible + .account-menu-switch-ui {
  outline: 2px solid rgba(79, 216, 255, 0.72);
  outline-offset: 2px;
}

:root[data-theme="light"] .account-menu-switch-row {
  background: rgba(241, 249, 255, 0.86);
  border-color: rgba(25, 87, 135, 0.18);
}

:root[data-theme="light"] .account-menu-switch-input:checked + .account-menu-switch-ui::before {
  background: #ffffff;
}

.account-menu-journeys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.account-menu-journey-btn {
  height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(93, 160, 220, 0.24);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.account-menu-journey-btn[aria-pressed="true"] {
  border-color: rgba(79, 216, 255, 0.55);
  background: rgba(79, 216, 255, 0.14);
  color: #d9f4ff;
}

:root[data-theme="light"] .account-menu-journey-btn[aria-pressed="true"] {
  color: #102235;
}

.account-menu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(93, 160, 220, 0.24);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  text-decoration: none;
  font-size: var(--font-size-menu-link);
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}

.account-menu-link:hover {
  border-color: rgba(79, 216, 255, 0.46);
  background: rgba(79, 216, 255, 0.10);
}

.account-menu-status {
  margin: 8px 0 0;
  min-height: 16px;
  font-size: 11px;
  color: var(--text-muted);
}

.account-menu-status.is-error {
  color: #f5b3c0;
}

.topbar-learner-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ── Content area ── */
.app-content {
  grid-area: content;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ============================================================
   CAREER PAGE
   ============================================================ */

.career-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

/* ── Map area ── */
.map-area {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* .map-toolbar removed — meta/legend moved to topbar */
.map-toolbar { display: none; }

/* ── Topbar map meta inline group ── */
.topbar-map-meta-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.topbar-map-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-family: var(--font-display);
  white-space: nowrap;
}

.career-refresh-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #ffd890;
  white-space: nowrap;
}

.career-refresh-indicator.is-clickable {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.career-refresh-indicator::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 1.6px solid rgba(245, 185, 91, 0.24);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: learnerSpin 0.9s linear infinite;
}

/* ── Career topbar status filter ── */
.career-status-filter-select-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 220px;
  width: 220px;
  max-width: 220px;
  position: relative;
  flex-shrink: 0;
}

.career-status-filter-select-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(50%);
  overflow: hidden;
}

.career-status-filter-dropdown-btn {
  width: 100%;
  height: 30px;
  padding: 0 32px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(79,216,255,0.36);
  background:
    linear-gradient(135deg, rgba(61,184,245,0.14) 0%, rgba(79,216,255,0.08) 100%);
  color: #d9f4ff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.career-status-filter-dropdown-btn:hover {
  border-color: rgba(79,216,255,0.62);
  box-shadow: 0 0 12px rgba(79,216,255,0.16);
}

.career-status-filter-select-wrap.is-open .career-status-filter-dropdown-btn {
  border-color: rgba(79,216,255,0.74);
  box-shadow: inset 0 0 0 1px rgba(79,216,255,0.24), 0 0 14px rgba(79,216,255,0.20);
}

.career-status-filter-select-wrap::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(217, 244, 255, 0.9);
  border-bottom: 2px solid rgba(217, 244, 255, 0.9);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

.career-status-filter-dropdown-btn:focus-visible {
  outline: 2px solid rgba(79,216,255,0.62);
  outline-offset: 2px;
}

.career-status-filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 14px;
  border: 1px solid rgba(79,216,255,0.34);
  background: linear-gradient(155deg, rgba(9,24,42,0.98), rgba(6,17,31,0.98));
  box-shadow: var(--sh-float);
  z-index: 52;
}

.career-status-filter-dropdown-option {
  width: 100%;
  border-radius: 9px;
  padding: 8px 10px;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
}

.career-status-filter-dropdown-option:hover,
.career-status-filter-dropdown-option.is-focused {
  color: #d9f4ff;
  background: rgba(79,216,255,0.12);
}

.career-status-filter-dropdown-option[aria-selected="true"] {
  color: #d9f4ff;
  background: linear-gradient(135deg, rgba(61,184,245,0.20) 0%, rgba(79,216,255,0.10) 100%);
  box-shadow: inset 0 0 0 1px rgba(79,216,255,0.20);
}

.career-status-filter-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.career-status-filter {
  --filter-dot: var(--accent-2);
  --filter-border: rgba(255,255,255,0.14);
  --filter-text: var(--text-muted);
  --filter-bg: rgba(255,255,255,0.03);
  appearance: none;
  border: 1px solid var(--filter-border);
  border-radius: 999px;
  background: var(--filter-bg);
  color: var(--filter-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  height: 26px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease, transform .14s ease;
  white-space: nowrap;
  font-family: var(--font-display);
}

.career-status-filter:hover {
  border-color: rgba(255,255,255,0.26);
  color: var(--text-main);
}

.career-status-filter:active {
  transform: translateY(1px);
}

.career-status-filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--filter-dot);
  box-shadow: 0 0 6px var(--filter-dot);
  animation: pulseDot 2.8s ease-in-out infinite;
  opacity: 0.72;
  transition: opacity .18s ease, box-shadow .18s ease, transform .18s ease;
  flex-shrink: 0;
}

.career-status-filter[data-state-filter="locked"] { --filter-dot: #7d8ea0; }
.career-status-filter[data-state-filter="unlocked"] { --filter-dot: #4fd8ff; }
.career-status-filter[data-state-filter="in_progress"] { --filter-dot: #f5b95b; }
.career-status-filter[data-state-filter="completed"] { --filter-dot: #5ee0a0; }

.career-status-filter.is-active,
.career-status-filter[aria-pressed="true"] {
  color: #d9f4ff;
  border-color: rgba(79,216,255,0.52);
  background: linear-gradient(135deg, rgba(61,184,245,0.20) 0%, rgba(79,216,255,0.10) 100%);
  box-shadow: inset 0 0 0 1px rgba(79,216,255,0.14), 0 0 14px rgba(79,216,255,0.20);
}

.career-status-filter.is-active .career-status-filter-dot,
.career-status-filter[aria-pressed="true"] .career-status-filter-dot {
  opacity: 1;
  box-shadow: 0 0 10px var(--filter-dot);
  transform: scale(1.08);
}

.career-status-filter:not(.is-active):not([aria-pressed="true"]) {
  opacity: 0.84;
}

@media (max-width: 1320px) and (min-width: 901px) {
  .career-status-filter { padding: 4px 8px; font-size: 9px; letter-spacing: 0.04em; }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .career-status-filter-bar { gap: 6px; }
}

/* Mobile filter strip — hidden on desktop */
.career-filter-strip {
  display: none;
}

@media (min-width: 901px) {
  .career-status-filter-bar {
    display: none;
  }
}

@media (max-width: 900px) {
  /* Hide ExpertLab brand + divider in topbar at narrow widths to avoid overflow */
  .topbar-section { display: none; }
  .topbar-divider  { display: none; }

  #learner-page-status-badge-career {
    min-height: 30px;
    padding: 6px 12px;
    pointer-events: auto;
    touch-action: manipulation;
    position: relative;
    z-index: 12;
    flex-shrink: 0;
  }

  /* Clean topbar — filters move to strip below, no wrapping */
  .topbar-right {
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .career-status-filter-select-wrap { display: none; }
  /* Hide filter bar and refresh button from topbar on mobile */
  .career-status-filter-bar { display: none; }
  #career-progress-refresh-btn { display: none; }
  .topbar-map-meta-group { display: none; }

  /* Filter strip below topbar */
  .career-filter-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    height: 38px;
    background: rgba(6, 17, 31, 0.92);
    border-bottom: 1px solid var(--border-soft);
    backdrop-filter: blur(12px);
    position: sticky;
    top: var(--topbar-h);
    z-index: 44;
    flex-shrink: 0;
  }

  .career-filter-strip .career-status-filter {
    flex: 1;
    max-width: 80px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    font-size: 10px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .career-filter-strip .career-status-filter-label {
    display: inline;
  }
}

.career-node-filter-dimmed {
  filter: grayscale(0.55) saturate(0.42) brightness(0.60);
}

.map-meta-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cluster-focus-ctx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(61,184,245,0.10);
  border: 1px solid rgba(61,184,245,0.28);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #7dd4f5;
  white-space: nowrap;
  transition: opacity 200ms ease;
}
.cluster-focus-ctx[hidden] {
  display: none;
}

.career-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.legend-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-dot--locked   { background: var(--locked); }
.legend-dot--unlocked { background: var(--accent); }
.legend-dot--progress { background: var(--warn); }
.legend-dot--done     { background: var(--ok); box-shadow: 0 0 5px rgba(94,224,160,0.5); }

.map-canvas-wrap {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#career-map-svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Family-end badges around the map perimeter (size/readability only, no behavior change). */
#career-map-svg rect[fill="#071828"][width="58"][height="36"] {
  width: 72px;
  height: 42px;
  transform: translateX(-8px);
}

#career-map-svg text[letter-spacing="0.10em"] {
  font-size: 8.6px;
  letter-spacing: 0.06em !important;
}

/* Map overlay controls */
.map-controls {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 10;
}

.map-ctrl-btn {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-mid);
  background: rgba(6, 15, 28, 0.92);
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  transition: background .15s, color .15s, border-color .15s;
  backdrop-filter: blur(10px);
  font-family: inherit;
  user-select: none;
}

.map-ctrl-btn:hover { background: rgba(79,216,255,0.15); color: var(--text-main); border-color: var(--border-active); }
.map-ctrl-btn--reset { font-size: 0.82rem; }

/* ── Cluster marker ── */
[data-cluster-marker] {
  transition: opacity 200ms ease;
}

[data-cluster-marker]:hover circle[filter] {
  filter: url(#fcluster) brightness(1.2);
}

[data-cluster-member] {
  transition: opacity 200ms ease-out;
}

.career-node-refresh-ring {
  fill: none;
  stroke: rgba(245, 185, 91, 0.88);
  stroke-width: 2.2;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  transform-origin: center;
  animation: learnerSpin 1s linear infinite;
  pointer-events: none;
}

/* ── Career right panel — fixed height, internal scroll only ── */
.career-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* ── Mia compact block — fixed, never scrolls ── */
.mia-block {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mia-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mia-avatar {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1b4870, #0c2540);
  border: 1.5px solid rgba(79,216,255,0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(79,216,255,0.12);
}

.mia-avatar-status {
  position: relative;
  isolation: isolate;
}

.mia-avatar-status::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  z-index: 0;
  transform: scale(1);
  transition: opacity 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.mia-avatar-status.is-syncing::before {
  opacity: 1;
  background: rgba(244, 185, 91, 0.30);
  box-shadow: 0 0 18px rgba(244, 185, 91, 0.55);
  animation: miaSyncPulse 1.3s ease-in-out infinite;
}

.mia-avatar-status.is-updated::before {
  opacity: 1;
  background: rgba(94, 224, 160, 0.26);
  box-shadow: 0 0 16px rgba(94, 224, 160, 0.44);
}

.mia-avatar-status.has-error::before {
  opacity: 1;
  background: rgba(232, 82, 106, 0.28);
  box-shadow: 0 0 16px rgba(232, 82, 106, 0.42);
}

.mia-avatar-status > * {
  position: relative;
  z-index: 1;
}

.mia-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
}

.mia-avatar-initial {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

.mia-label { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.mia-name  { font-size: 12px; font-weight: 700; color: var(--text-main); }
.mia-role  { font-size: 10px; color: var(--text-dim); letter-spacing: 0.03em; }

.mia-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 7px var(--ok);
  animation: pulseDot 3.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

@keyframes learnerSpin {
  to { transform: rotate(360deg); }
}

@keyframes miaSyncPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.08); opacity: 1; }
}

.mia-message {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.50;
  margin: 0;
}

.mia-meta {
  font-size: 10px;
  color: rgba(79,216,255,0.50);
  font-style: italic;
  margin: 0;
}

/* ── Node detail — scrollable section filling remaining panel height ── */
.node-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
}

.node-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.55;
  gap: 12px;
}

.node-detail-empty-icon {
  width: 44px; height: 44px;
  color: var(--text-dim);
  opacity: 0.32;
}
.node-detail-empty-icon svg { width: 100%; height: 100%; }

.node-detail-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Section label */
.panel-section-label {
  padding: 8px 14px 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-soft);
}

/* Status bar */
.node-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.node-status-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-family: var(--font-display);
}

.node-status-badge[data-state="completed"]  { background: rgba(94,224,160,0.10); border-color: rgba(94,224,160,0.30); color: #7ef4b8; }
.node-status-badge[data-state="in_progress"]{ background: rgba(244,185,91,0.10); border-color: rgba(244,185,91,0.30); color: #ffd080; }
.node-status-badge[data-state="unlocked"]   { background: rgba(79,216,255,0.09); border-color: rgba(79,216,255,0.28); color: #7ee6ff; }
.node-status-badge[data-state="locked"]     { background: rgba(75,85,99,0.14);   border-color: rgba(75,85,99,0.28);   color: var(--locked); }
.node-status-badge[data-state="preview"]    { background: rgba(255,202,79,0.10); border-color: rgba(255,202,79,0.32); color: #ffe8a5; }

.node-level-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
}

/* Main info block */
.node-info-block {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.node-detail-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
  font-family: var(--font-display);
}

.node-detail-competence {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.node-detail-family {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Progress bar */
.node-progress-block {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.node-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.node-progress-label-text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.node-progress-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.node-progress-bar-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}

.node-progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.45s ease;
}

/* Mia contextual note */
.node-mia-note {
  padding: 7px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.node-mia-note p {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  font-style: italic;
}

/* Detail data list */
.node-detail-dl {
  margin: 0;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
  align-items: baseline;
}

.node-detail-dl dt {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.node-detail-dl dd {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
}

/* Server-provided badge presentation; it does not participate in map layout or progression. */
.career-badge-detail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(79, 216, 255, 0.04);
}
.career-badge-artwork {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}
.career-badge-copy { min-width: 0; }
.career-badge-label, .career-badge-status, .career-badge-description { margin: 0; }
.career-badge-label { color: var(--text-main); font: 700 12px/1.35 var(--font-display); }
.career-badge-status { margin-top: 2px; color: var(--accent); font-size: 11px; font-weight: 700; }
.career-badge-description { margin-top: 5px; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
@media (max-width: 420px) {
  .career-badge-detail { gap: 8px; padding: 9px 12px; }
  .career-badge-artwork { width: 60px; height: 60px; flex-basis: 60px; }
}

/* Locked explanation */
.node-locked-block {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.node-locked-block[hidden] { display: none !important; }

.node-locked-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.node-locked-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.node-locked-header--how {
  color: rgba(79, 216, 255, 0.70);
}

.node-locked-header--how .node-locked-icon {
  color: rgba(79, 216, 255, 0.70);
}

.node-locked-icon {
  width: 12px; height: 12px;
  flex-shrink: 0;
  color: var(--text-dim);
}

.node-locked-reason {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.node-locked-how {
  margin: 0;
  font-size: 11px;
  color: var(--text-acc);
  line-height: 1.5;
  font-style: italic;
}

/* Course CTA — pinned visually at bottom via natural flow */
.node-course-wrap {
  padding: 10px 14px 12px;
}

.course-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  color: #021929;
  border-radius: var(--r-md);
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(130deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 2px 14px rgba(79,216,255,0.24);
  width: 100%;
  transition: opacity .17s, transform .12s;
  letter-spacing: 0.01em;
}

.course-link:hover { opacity: 0.88; transform: translateY(-1px); }

.course-unavailable {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  padding: 9px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--r-sm);
}

.course-locked-label {
  margin: 0;
  font-size: 11px;
  color: var(--locked);
  text-align: center;
  padding: 9px 12px;
  border: 1px solid rgba(75,85,99,0.26);
  border-radius: var(--r-sm);
  background: rgba(75,85,99,0.07);
}

/* ============================================================
   HOME PAGE
   ============================================================ */

.home-content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}

/* ── Home main ── */
.home-main {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid var(--border-soft);
}

/* ── Welcome strip ── */
.welcome-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.welcome-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.welcome-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-main);
}

.welcome-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.learner-page-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}

.learner-page-status-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 7px var(--accent-2);
  animation: pulseDot 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

.learner-page-status-badge--loading::before {
  animation: pulseDot 1.4s ease-in-out infinite;
}

.learner-page-status-badge--ok::before {
  animation: pulseDot 2.8s ease-in-out infinite;
}

.learner-page-status-badge--pending::before {
  background: #ffd45e;
  box-shadow: 0 0 8px rgba(255, 212, 94, 0.9);
  animation: pulseDot 1.9s ease-in-out infinite;
}

.learner-page-status-badge--error {
  border-color: rgba(232,82,106,0.32);
  color: #ffb2bf;
}

.learner-page-status-badge--error::before {
  background: var(--err);
  box-shadow: 0 0 8px var(--err);
  animation: pulseDot 1.1s ease-in-out infinite;
}

/* Status chip */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  width: fit-content;
}

.status-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px var(--accent-2);
  animation: pulseDot 2.8s ease-in-out infinite;
  flex-shrink: 0;
}

.status-chip.error .status-chip-dot { background: var(--err); box-shadow: 0 0 6px var(--err); }
.status-chip.error { border-color: rgba(232,82,106,0.28); color: #ffa0ae; }

.status-chip.is-clickable {
  cursor: pointer;
}

/* CTA row */
.cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  border-radius: var(--r-md);
  padding: 10px 20px;
  font-weight: 700;
  font-size: 13px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  color: #021929;
  background: linear-gradient(130deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 2px 16px rgba(79,216,255,0.26);
  transition: opacity .17s, transform .12s, box-shadow .17s;
  letter-spacing: 0.01em;
}

.btn-primary:hover { opacity: 0.90; transform: translateY(-1px); box-shadow: 0 4px 24px rgba(79,216,255,0.36); }
.btn-primary:active { transform: translateY(0); }
.btn-primary.disabled { pointer-events: none; opacity: 0.30; box-shadow: none; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  border-radius: var(--r-md);
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-main);
  border: 1px solid var(--border-mid);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}

.btn-secondary:hover { background: rgba(255,255,255,0.07); border-color: var(--border-active); }

.btn-secondary--compact {
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 999px;
}

.journey-choice-panel {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100% - 2rem));
  background: rgba(7, 20, 36, 0.94);
  border: 1px solid rgba(93, 160, 220, 0.32);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.52);
  z-index: 11;
}

.journey-choice-title {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  color: #f4f7fb;
}

.journey-choice-intro {
  margin: 0 0 0.9rem;
  color: #b8cadc;
}

.journey-choice-options {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.journey-choice-card {
  display: grid;
  gap: 0.32rem;
  border: 1px solid rgba(93, 160, 220, 0.24);
  background: rgba(14, 35, 58, 0.68);
  border-radius: 12px;
  padding: 0.8rem;
  cursor: pointer;
}

.journey-choice-card input[type="radio"] {
  margin: 0 0 0.2rem;
}

.journey-choice-card-title {
  font-weight: 700;
  color: #e8f0fb;
}

.journey-choice-card-desc {
  color: #b8cadc;
  font-size: 0.92rem;
}

.journey-choice-confirm {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.85rem 0;
  color: #d8e5f4;
}

.journey-choice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.journey-choice-status {
  margin: 0.72rem 0 0;
  min-height: 1.2em;
  color: #d8e5f4;
}

.journey-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.6rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(93, 160, 220, 0.22);
  border-radius: 999px;
  background: rgba(11, 28, 48, 0.72);
}

.journey-switcher-label {
  font-size: 0.72rem;
  color: #b9cbdd;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.journey-switcher-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #d9e8f7;
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
}

.journey-switcher-btn[aria-pressed="true"] {
  background: rgba(79, 216, 255, 0.16);
  border-color: rgba(79, 216, 255, 0.5);
  color: #f4fbff;
}

@media (max-width: 760px) {
  .journey-choice-panel {
    top: 50%;
    padding: 0.85rem;
  }

  .journey-choice-options {
    grid-template-columns: 1fr;
  }
}

.btn-icon { width: 13px; height: 13px; flex-shrink: 0; }

.parcours-spinner,
.learner-inline-spinner {
  width: 10px;
  height: 10px;
  color: var(--cityone-accent, var(--accent, currentColor));
  border: 1.6px solid rgba(127, 127, 127, .25);
  border: 1.6px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
  animation: learnerSpin 0.9s linear infinite;
  vertical-align: middle;
}

.btn-secondary.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.9;
}

.btn-secondary.is-loading::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 1.6px solid rgba(255, 255, 255, 0.28);
  border-top-color: var(--text-main);
  border-radius: 50%;
  animation: learnerSpin 0.9s linear infinite;
  display: inline-block;
  margin-right: 6px;
}

/* KPI strip */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.kpi-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  transition: border-color .16s;
}
.kpi-cell:hover { border-color: var(--border-mid); }

.kpi-cell--action { cursor: pointer; }
.kpi-cell--action:hover { border-color: rgba(79,216,255,0.42); box-shadow: var(--sh-glow); }
.kpi-cell--action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.kpi-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
}

.kpi-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.home-next-mission {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--border-highlight);
  border-radius: var(--r-md);
  background: var(--bg-highlight-panel);
}

.home-next-mission-copy { min-width: 0; }
.home-next-mission-eyebrow { margin: 0 0 4px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; }
.home-next-mission-title { margin: 0; color: var(--text-main); font-size: 16px; line-height: 1.3; }
.home-next-mission-meta { min-height: 1.2em; margin: 5px 0 0; color: var(--text-muted); font-size: 12px; }
.home-next-mission-cta { flex: 0 0 auto; white-space: nowrap; }

.home-family-progress {
  margin-top: 14px;
  padding: 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}

.home-family-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.home-family-progress-title {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.home-family-progress-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.home-family-progress-empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.home-family-card {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(10, 26, 44, 0.72);
}

.home-family-card.is-recommended {
  border-color: rgba(79, 216, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(79, 216, 255, 0.18) inset;
}

.home-family-card-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}

.home-family-card-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.home-family-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.home-family-letter {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border-mid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text-acc);
}

.home-family-title-meta {
  min-width: 0;
}

.home-family-name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.home-family-remaining {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.home-family-pct {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  color: var(--text-main);
}

.home-family-card-body {
  padding: 0 10px 10px;
}

.home-family-reco {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-acc);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-family-stats,
.home-family-next-title {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.home-family-badges-placeholder {
  margin: 6px 0 8px;
  border: 1px dashed var(--border-mid);
  border-radius: 8px;
  padding: 8px;
}

.home-family-badges-placeholder p {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.home-family-badges-placeholder p:last-child {
  margin-bottom: 0;
}

.home-family-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border-mid);
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text-main);
  text-decoration: none;
}

.home-family-cta.is-disabled {
  opacity: 0.65;
  cursor: default;
}

:root[data-theme="light"] .home-family-card {
  background: linear-gradient(155deg, rgba(248, 253, 255, 0.98), rgba(242, 249, 255, 0.98));
  border-color: rgba(25, 87, 135, 0.18);
  box-shadow: 0 5px 16px rgba(17, 51, 84, 0.07), 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

:root[data-theme="light"] .home-family-card.is-recommended {
  border-color: rgba(21, 120, 167, 0.34);
  box-shadow:
    0 0 0 1px rgba(79, 216, 255, 0.18) inset,
    0 6px 18px rgba(17, 51, 84, 0.08);
}

:root[data-theme="light"] .home-family-badges-placeholder {
  background: rgba(247, 252, 255, 0.92);
  border-color: rgba(25, 87, 135, 0.20);
}

:root[data-theme="light"] .home-family-cta {
  background: rgba(246, 252, 255, 0.98);
  border-color: rgba(25, 87, 135, 0.24);
}

@media (max-width: 900px) {
  .home-family-progress-grid {
    grid-template-columns: 1fr;
  }
}

/* Module grid */
.module-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 10px;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.module-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  position: relative;
  transition: border-color .16s, box-shadow .16s;
  text-decoration: none;
  color: inherit;
}

.module-card--active {
  border-color: rgba(79,216,255,0.22);
  background: rgba(8,22,44,0.72);
  cursor: pointer;
}
.module-card--active:hover { border-color: rgba(79,216,255,0.48); box-shadow: var(--sh-glow); }
.module-card--disabled { opacity: 0.38; cursor: default; pointer-events: none; }

.module-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: rgba(79,216,255,0.08);
  border: 1px solid rgba(79,216,255,0.18);
  color: var(--accent);
}
.module-icon svg { width: 16px; height: 16px; }
.module-card--disabled .module-icon { color: var(--text-dim); background: rgba(255,255,255,0.03); border-color: var(--border-soft); }

.module-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.module-title { font-size: 12px; font-weight: 700; color: var(--text-main); }
.module-desc  { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

.module-arrow {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(79,216,255,0.10);
  border: 1px solid rgba(79,216,255,0.22);
  color: var(--accent);
  align-self: center;
  transition: background .15s, transform .12s;
}
.module-card--active:hover .module-arrow { background: rgba(79,216,255,0.22); transform: translateX(2px); }
.module-arrow svg { width: 10px; height: 10px; }

.module-badge {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ── Home side panel ── */
.home-side {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
}

.mia-side-panel {
  display: none;
  border-left: 1px solid var(--border-soft);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
}

.mia-media-card {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: radial-gradient(circle at 35% 20%, rgba(61, 184, 245, 0.22), rgba(8, 20, 40, 0.92));
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mia-avatar--panel {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.mia-avatar-img--panel {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mia-feedback {
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
}

.mia-feedback-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

.mia-feedback-help {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.mia-feedback-panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.mia-feedback-panel [data-support-ticket-box][hidden],
.mia-feedback-panel [data-support-reply-box][hidden],
.mia-feedback-panel [data-support-new-ticket][hidden] {
  display: none !important;
}

.mia-feedback-panel textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid var(--border-mid);
  background: rgba(7, 19, 36, 0.88);
  color: var(--text-main);
  padding: 10px;
  font: inherit;
}

.mia-support-ticket-box {
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  background: rgba(8, 20, 40, 0.62);
  padding: 10px;
}

.mia-support-indicator {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: #ffd890;
}

.mia-support-indicator-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.mia-support-archives-link {
  border: none;
  background: transparent;
  color: var(--text-acc);
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.mia-support-archives-link:hover {
  color: var(--accent-2);
}

.mia-support-admin-reply {
  margin: 0;
  font-size: 12px;
  color: var(--text-main);
  line-height: 1.45;
}

.mia-support-status {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--text-dim);
}

.mia-support-history {
  display: grid;
  gap: 6px;
}

.mia-support-msg {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(7, 19, 36, 0.72);
  padding: 8px;
}

.mia-support-msg-head {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
}

.mia-support-msg-body {
  margin: 0;
  font-size: 12px;
  color: var(--text-main);
  line-height: 1.45;
}

.mia-support-reply-box {
  display: grid;
  gap: 6px;
}

.mia-support-reply-needed {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: #ffd890;
}

.mia-support-reply-box textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid var(--border-mid);
  background: rgba(7, 19, 36, 0.88);
  color: var(--text-main);
  padding: 10px;
  font: inherit;
}

.mia-feedback-actions {
  display: flex;
  gap: 8px;
}

.mia-feedback-actions .btn-secondary,
.mia-feedback-actions .btn-primary {
  flex: 1;
  justify-content: center;
}

.mia-feedback-status {
  margin: 8px 0 0;
  min-height: 18px;
  font-size: 11px;
  color: var(--text-muted);
}

.mia-feedback-status.is-error {
  color: #f5b3c0;
}

.mia-feedback--float {
  margin-top: 10px;
}

.mia-support-archives-modal[hidden] {
  display: none !important;
}

.mia-support-archives-modal {
  position: fixed;
  inset: 0;
  z-index: 360;
  background: rgba(4, 12, 24, 0.62);
  display: grid;
  place-items: center;
  padding: 16px;
}

.mia-support-archives-card {
  width: min(460px, calc(100vw - 32px));
  max-height: min(74vh, 620px);
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--border-mid);
  background: rgba(8, 20, 40, 0.98);
  box-shadow: var(--sh-float);
  padding: 12px;
}

.mia-support-archives-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.mia-support-archives-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.mia-support-archives-close {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s;
}

.mia-support-archives-close:hover { background: rgba(255,255,255,0.08); }
.mia-support-archives-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mia-support-archives-close svg { width: 14px; height: 14px; }

.mia-support-archives-content {
  display: grid;
  gap: 8px;
}

.mia-support-archive-ticket {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(7, 19, 36, 0.72);
  padding: 8px;
}

.mia-support-archives-empty {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Mia panel — full home side version */
.mia-panel-full {
  padding: 16px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.mia-panel-full .mia-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mia-panel-full .mia-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Info block */
.side-info {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.side-info-icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  color: var(--text-dim);
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}
.side-info-icon svg { width: 16px; height: 16px; }

.side-info-text {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ============================================================
   LEARNER DASHBOARD
   ============================================================ */

.dashboard-page {
  padding: 14px 16px 108px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(76, 141, 255, 0.09), transparent 60%),
    radial-gradient(ellipse 40% 30% at 85% 80%, rgba(94, 224, 160, 0.04), transparent 55%);
}

.dashboard-layout,
.mission-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

/* ── Header ── */
.db-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 0 2px;
}

.db-header-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.db-header-text {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.db-eyebrow {
  margin: 0;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  font-weight: 700;
}

.db-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.db-status-text {
  margin: 0;
  color: var(--text-dim);
  font-size: 10px;
}

.db-status-text--compact {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.86;
  white-space: nowrap;
}

/* backward-compat */
.dashboard-refresh-chip {
  margin: 0;
  width: fit-content;
  font-size: 9px;
  color: var(--text-dim);
  border: 1px solid var(--border-soft);
  background: rgba(7, 18, 33, 0.72);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── KPI Ribbon ── */
/*
  7 KPIs. First card (.db-kpi--hero) spans 2 rows and is visually larger.
  At full width: 1 hero + 6 = [hero col][3-col grid for 6] → 4-col total.
  At medium: hero spans 2 rows in a 3-col grid (hero=1col, 6 fill 2×3).
  At small: 2-col, hero normal.
*/
.db-kpi-ribbon {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 7px;
}

.db-kpi--hero {
  grid-row: 1 / 3;
  background:
    linear-gradient(145deg, rgba(12, 30, 56, 0.96) 0%, rgba(8, 20, 40, 0.94) 100%);
  border-color: rgba(79, 216, 255, 0.26);
}

.db-kpi--hero::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 60% at 30% 40%, rgba(79, 216, 255, 0.06), transparent 70%);
  pointer-events: none;
}

.db-kpi--hero .db-kpi-icon-wrap {
  width: 52px;
  height: 52px;
}

.db-kpi--hero .db-kpi-icon-wrap svg {
  width: 31px;
  height: 31px;
}

.db-kpi--hero .db-kpi-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.db-kpi-value--hero {
  font-size: 36px !important;
  line-height: 1 !important;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #4fd8ff 0%, #7ef4b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.db-kpi {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px 10px;
  background: linear-gradient(155deg, rgba(9, 25, 46, 0.94), rgba(7, 18, 34, 0.90));
  border: 1px solid rgba(93, 160, 220, 0.16);
  border-radius: 10px;
  transition: border-color .18s, box-shadow .18s;
  overflow: hidden;
  cursor: pointer;
}

.db-kpi::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(79, 216, 255, 0.20) 50%, transparent 95%);
  pointer-events: none;
}

.db-kpi:hover {
  border-color: rgba(79, 216, 255, 0.32);
  box-shadow: 0 0 18px rgba(79, 216, 255, 0.06);
}

.db-kpi:focus-visible {
  outline: 2px solid rgba(79, 216, 255, 0.82);
  outline-offset: 1px;
}

.db-kpi.is-explained {
  border-color: rgba(79, 216, 255, 0.46);
  box-shadow: 0 0 20px rgba(79, 216, 255, 0.12);
}

.db-kpi-icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--accent);
}

.db-kpi-icon-wrap svg { width: 24px; height: 24px; }

.db-kpi-icon-wrap--progress  { color: #4fd8ff; filter: drop-shadow(0 0 10px rgba(79, 216, 255, 0.22)); }
.db-kpi-icon-wrap--unlocked  { color: #5ee0a0; filter: drop-shadow(0 0 10px rgba(94, 224, 160, 0.22)); }
.db-kpi-icon-wrap--completed { color: #5ee0a0; filter: drop-shadow(0 0 10px rgba(94, 224, 160, 0.26)); }
.db-kpi-icon-wrap--inprogress{ color: #f4b95b; filter: drop-shadow(0 0 10px rgba(244, 185, 91, 0.22)); }
.db-kpi-icon-wrap--time      { color: #7dd4f5; filter: drop-shadow(0 0 10px rgba(125, 212, 245, 0.20)); }
.db-kpi-icon-wrap--activity  { color: #6bc8ee; filter: drop-shadow(0 0 10px rgba(107, 200, 238, 0.20)); }
.db-kpi-icon-wrap--engagement{ color: #e8526a; filter: drop-shadow(0 0 10px rgba(232, 82, 106, 0.20)); }

.db-kpi-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.db-kpi-label {
  margin: 0;
  font-size: 8px;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-kpi-value {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-main);
}

.db-kpi-value--sm {
  font-size: 10px;
  line-height: 1.4;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-muted);
  white-space: normal;
}

/* Light mode contrast fix for Progression globale KPI value (number + %). */
:root[data-theme="light"] .db-kpi--hero .db-kpi-value#dashboard-progress,
:root[data-theme="light"] .db-kpi--hero .db-kpi-value--hero#dashboard-progress {
  color: #0f5f88 !important;
}

:root[data-theme="light"] .db-kpi--hero #dashboard-progress,
:root[data-theme="light"] .db-kpi[data-kpi-key="progress"] #dashboard-progress {
  color: #0e4d72 !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .db-kpi[data-kpi-key="progress"] .db-kpi-label {
  color: #2f5f84 !important;
}

/* Mobile main menu + secondary/sub menu (career filter strip) light mode. */
:root[data-theme="light"] .mobile-bottomnav {
  background: rgba(245, 251, 255, 0.98) !important;
  border-top-color: rgba(25, 87, 135, 0.20) !important;
  box-shadow: 0 -4px 16px rgba(17, 51, 84, 0.10) !important;
}

:root[data-theme="light"] .mobile-bottomnav-item {
  color: #466785 !important;
}

:root[data-theme="light"] .mobile-bottomnav-item .mobile-bottomnav-label {
  color: #4c6f8d !important;
}

:root[data-theme="light"] .mobile-bottomnav-item.active,
:root[data-theme="light"] .mobile-bottomnav-item[aria-current="page"] {
  background: rgba(231, 245, 255, 0.98) !important;
  border-color: rgba(21, 120, 167, 0.34) !important;
  color: #0f5f88 !important;
}

:root[data-theme="light"] .mobile-bottomnav-item.active .mobile-bottomnav-label,
:root[data-theme="light"] .mobile-bottomnav-item[aria-current="page"] .mobile-bottomnav-label {
  color: #0f5f88 !important;
}

:root[data-theme="light"] .mobile-bottomnav-item svg {
  color: #3f6788 !important;
}

:root[data-theme="light"] .mobile-bottomnav-item.active svg,
:root[data-theme="light"] .mobile-bottomnav-item[aria-current="page"] svg {
  color: #116792 !important;
}

:root[data-theme="light"] .career-filter-strip {
  background: rgba(244, 251, 255, 0.97) !important;
  border-bottom-color: rgba(25, 87, 135, 0.20) !important;
}

:root[data-theme="light"] .career-filter-strip .career-status-filter {
  background: rgba(238, 248, 255, 0.96) !important;
  border-color: rgba(25, 87, 135, 0.24) !important;
  color: #2a5678 !important;
}

:root[data-theme="light"] .career-filter-strip .career-status-filter.is-active,
:root[data-theme="light"] .career-filter-strip .career-status-filter[aria-pressed="true"] {
  background: rgba(228, 243, 255, 0.99) !important;
  border-color: rgba(21, 120, 167, 0.44) !important;
  color: #0f5f88 !important;
}

:root[data-theme="light"] .career-filter-strip .career-status-filter-dot {
  box-shadow: 0 0 0 1px rgba(25, 87, 135, 0.12);
}

/* Engagement KPI */
.db-engagement-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-engagement-score {
  font-size: 22px;
  line-height: 1.05;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-main);
}

.db-engagement-label {
  font-size: 8px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.db-kpi[data-engagement="high"] .db-kpi-icon-wrap--engagement { color: #5ee0a0; }
.db-kpi[data-engagement="mid"]  .db-kpi-icon-wrap--engagement { color: #f4b95b; }

.db-kpi-explanation {
  margin-top: -1px;
  padding: 9px 12px;
  border: 1px solid rgba(93, 160, 220, 0.22);
  border-radius: 9px;
  background: rgba(7, 19, 36, 0.70);
}

.db-kpi-explanation-text {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Panel base ── */
.db-panel {
  position: relative;
  background: linear-gradient(155deg, rgba(8, 23, 42, 0.93), rgba(6, 17, 32, 0.90));
  border: 1px solid rgba(93, 160, 220, 0.16);
  border-radius: 12px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255,255,255,0.03) inset;
  padding: 14px 15px;
  overflow: hidden;
}

.db-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(79, 216, 255, 0.25) 50%, transparent 95%);
  pointer-events: none;
}

.db-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.db-panel-header--sub {
  margin: 16px 0 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(93, 160, 220, 0.10);
}

.db-panel-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: rgba(79, 216, 255, 0.80);
  display: inline-flex;
}

.db-panel-icon svg { width: 16px; height: 16px; }
.db-panel-icon--badge { color: rgba(244, 185, 91, 0.80); }

.db-panel-title {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.db-panel-title--sub { font-size: 9px; }

.db-panel-sub {
  margin: -8px 0 10px;
  font-size: 10px;
  color: var(--text-dim);
}

.db-empty {
  margin: 4px 0 0;
  color: var(--text-dim);
  font-size: 10px;
}

/* ── Row layouts ── */
.db-row { display: grid; gap: 10px; }

.db-row--main  { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.db-row--intel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 1fr); }

/* ── Family progression grid ── */
.db-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 10px;
}

.db-family-card {
  padding: 0;
  background: rgba(7, 19, 36, 0.70);
  border: 1px solid rgba(93, 160, 220, 0.13);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color .18s, box-shadow .18s, background .18s, transform .18s;
}

.db-family-card:hover {
  border-color: rgba(79, 216, 255, 0.28);
  box-shadow: 0 0 14px rgba(79, 216, 255, 0.05);
}

.db-family-card.is-expanded {
  border-color: rgba(79, 216, 255, 0.42);
  background: linear-gradient(155deg, rgba(10, 28, 50, 0.90), rgba(7, 20, 36, 0.92));
  box-shadow: 0 0 22px rgba(79, 216, 255, 0.12);
  transform: translateY(-1px);
}

.db-family-toggle {
  width: 100%;
  border: 0;
  margin: 0;
  padding: 12px 13px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.db-family-toggle:focus-visible {
  outline: 2px solid rgba(79, 216, 255, 0.80);
  outline-offset: -2px;
  border-radius: 10px;
}

.db-family-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}

.db-family-icon {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.db-family-icon svg { width: 17px; height: 17px; }

.db-family-icon--letter {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.db-family-name {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.db-family-pct {
  margin: 0;
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 46%;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--accent);
  letter-spacing: -0.02em;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: right;
  line-height: 1.05;
}

.db-family-bar {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(79, 216, 255, 0.07);
  overflow: hidden;
}

.db-family-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79,216,255,0.88) 0%, rgba(94,224,160,0.72) 100%);
  box-shadow: 0 0 4px rgba(79,216,255,0.18);
  transition: width .5s ease;
}

.db-family-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-family-meta p {
  margin: 0;
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.5;
}

.db-family-expanded {
  padding: 0 13px 13px;
}

.db-family-cta {
  width: 100%;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* ── Next action panel ── */
.db-next-status {
  margin: 0;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--text-dim);
}

.db-next-title {
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text-main);
  font-weight: 600;
}

.db-next-subtitle {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 10px;
}

.dashboard-blocked-heading {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--warn);
}

.dashboard-blocked-text {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 10px;
}

.dashboard-next-link-wrap { margin: 12px 0 0; }

/* ── Diagnostic panel ── */
.db-diagnostic-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 9px;
  flex-wrap: wrap;
}

.db-diag-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dim);
  font-size: 9px;
}

.db-diag-swatch {
  width: 14px;
  height: 2px;
  border-radius: 999px;
  display: inline-block;
}

.db-diag-swatch--you   { background: #4fd8ff; box-shadow: 0 0 4px rgba(79,216,255,0.30); }
.db-diag-swatch--global{ background: rgba(94,224,160,0.80); }

/* Radar chart container */
.dashboard-diagnostic-chart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(93, 160, 220, 0.10);
  background: rgba(5, 14, 28, 0.50);
  border-radius: 8px;
}

.dashboard-diagnostic-radar {
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.dashboard-diagnostic-ring {
  fill: none;
  stroke: rgba(93, 160, 220, 0.18);
  stroke-width: 0.7;
}

.dashboard-diagnostic-axis {
  stroke: rgba(93, 160, 220, 0.16);
  stroke-width: 0.7;
}

.dashboard-diagnostic-polygon { fill-opacity: 0.14; stroke-width: 1.5; }

.dashboard-diagnostic-polygon--learner {
  fill: rgba(79, 216, 255, 0.14);
  stroke: #4fd8ff;
  filter: drop-shadow(0 0 4px rgba(79, 216, 255, 0.14));
}

.dashboard-diagnostic-polygon--global {
  fill: rgba(94, 224, 160, 0.10);
  stroke: rgba(94, 224, 160, 0.80);
}

.dashboard-diagnostic-dot--learner { fill: #4fd8ff; }
.dashboard-diagnostic-dot--global  { fill: rgba(94, 224, 160, 0.95); }

.dashboard-diagnostic-label {
  fill: var(--text-dim);
  font-size: 8.5px;
  font-weight: 600;
}

.dashboard-diagnostic-values-list {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
}

.dashboard-diagnostic-values-item {
  margin: 0;
  color: var(--text-dim);
  font-size: 9px;
  border-bottom: 1px solid rgba(93, 160, 220, 0.08);
  padding-bottom: 3px;
  line-height: 1.4;
}

/* ── Level + distribution ── */
.dashboard-progress-list { display: grid; gap: 4px; }

.dashboard-progress-item {
  padding: 7px 0;
  border: 0;
  border-top: 1px solid rgba(93, 160, 220, 0.12);
  background: transparent;
}

.dashboard-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 6px;
}

.dashboard-progress-title,
.dashboard-progress-meta,
.dashboard-progress-pct { margin: 0; }

.dashboard-progress-title { font-size: 10px; color: var(--text-main); font-weight: 600; }
.dashboard-progress-meta  { font-size: 9px;  color: var(--text-dim); }

.dashboard-progress-bar {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(79, 216, 255, 0.07);
  overflow: hidden;
}

.dashboard-progress-bar > span,
.dashboard-progress-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79,216,255,0.88) 0%, rgba(94,224,160,0.74) 100%);
}

.dashboard-progress-pct {
  margin-top: 4px;
  font-size: 9px;
  color: var(--text-muted);
}

.dashboard-progress-row {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  align-items: center;
}

.dashboard-progress-row .dashboard-progress-pct {
  margin-top: 0;
  color: rgba(79, 216, 255, 0.90);
}

/* Répartition */
.dashboard-path-distribution { display: grid; gap: 7px; }

.dashboard-distribution-bar {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  overflow: hidden;
}

.dashboard-distribution-segment { display: block; height: 100%; }

.dashboard-distribution-segment--completed  { background: rgba(94,224,160,0.84); }
.dashboard-distribution-segment--in-progress{ background: rgba(79,216,255,0.88);  }
.dashboard-distribution-segment--to-start   { background: rgba(244,185,91,0.84); }
.dashboard-distribution-segment--locked     { background: rgba(95,110,130,0.82); }

.dashboard-distribution-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 6px;
}

.dashboard-distribution-item {
  margin: 0;
  font-size: 9px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dashboard-distribution-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.dashboard-distribution-dot--completed  { background: rgba(94,224,160,0.95); }
.dashboard-distribution-dot--in-progress{ background: rgba(79,216,255,0.95);  }
.dashboard-distribution-dot--to-start   { background: rgba(244,185,91,0.95);  }
.dashboard-distribution-dot--locked     { background: rgba(95,110,130,0.95);  }

/* ── Recent activity ── */
.dashboard-recent-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}

.dashboard-recent-list li {
  padding: 8px 10px;
  background: rgba(6, 16, 30, 0.65);
  border: 1px solid rgba(93, 160, 220, 0.11);
  border-left: 2px solid rgba(79, 216, 255, 0.22);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.5;
  transition: border-color .15s;
}

.dashboard-recent-list li:hover {
  border-left-color: rgba(79, 216, 255, 0.50);
  border-color: rgba(79, 216, 255, 0.20);
}

/* ── Badge collection and details ── */
.dashboard-badge-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
}
.dashboard-badge-miniature {
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.025);
  color: var(--text-main);
  padding: 7px 4px 5px;
  display: grid;
  justify-items: center;
  gap: 4px;
  cursor: pointer;
  font: inherit;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.dashboard-badge-miniature:hover,
.dashboard-badge-miniature:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,216,255,.16); outline: 0; transform: translateY(-1px); }
.dashboard-badge-miniature.is-locked { filter: grayscale(1); opacity: .58; }
.dashboard-badge-miniature.is-earned { border-color: rgba(251,201,78,.56); background: rgba(251,201,78,.07); }
.dashboard-badge-artwork { width: 100%; max-width: 56px; aspect-ratio: 1; object-fit: contain; }
.dashboard-badge-status { color: var(--text-dim); font-size: 8px; line-height: 1.2; text-align: center; }
.dashboard-badge-miniature.is-earned .dashboard-badge-status { color: #fbc94e; }

.badge-modal-backdrop { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(1,8,18,.76); backdrop-filter: blur(7px); }
.badge-modal-backdrop[hidden] { display: none; }
.badge-modal { position: relative; width: min(100%, 520px); max-height: min(700px, calc(100dvh - 40px)); overflow: auto; border: 1px solid var(--border-mid); border-radius: var(--r-lg); background: var(--bg-panel-strong); box-shadow: 0 24px 70px rgba(0,0,0,.48); padding: 28px; display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr); gap: 24px; }
.badge-modal-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 1px solid var(--border-soft); border-radius: 50%; background: rgba(255,255,255,.05); color: var(--text-main); cursor: pointer; font-size: 24px; line-height: 1; }
.badge-modal-close:hover, .badge-modal-close:focus-visible { border-color: var(--accent); outline: 0; }
.badge-modal-artwork { width: 100%; align-self: start; object-fit: contain; }
.badge-modal-status, .badge-modal-meta, .badge-modal-description, .badge-modal-effect { margin: 0; }
.badge-modal-status { color: #fbc94e; font-size: 12px; font-weight: 700; }
.badge-modal-title { margin: 6px 0; font-size: 23px; line-height: 1.15; }
.badge-modal-meta { color: var(--text-dim); font-size: 12px; }
.badge-modal-description { margin-top: 16px; color: var(--text-muted); line-height: 1.55; }
.badge-modal-effect-label { margin: 18px 0 4px; color: var(--text-dim); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.badge-modal-effect { color: var(--text-main); line-height: 1.5; }

.learner-badge-celebration-modal { width: min(100%, 680px); grid-template-columns: minmax(190px, .78fr) minmax(0, 1.22fr); gap: 30px; padding: 34px; overflow-x: hidden; }
.badge-celebration-artwork-stage { position: sticky; top: 0; min-height: 260px; align-self: start; display: grid; place-items: center; border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--badge-stage), var(--bg-inset); overflow: hidden; }
.badge-celebration-artwork-stage::before { content: ''; position: absolute; width: 72%; aspect-ratio: 1; border: 1px solid var(--badge-accent); border-radius: 50%; opacity: .22; box-shadow: 0 0 36px var(--badge-accent-soft); }
.badge-celebration-artwork-stage.is-empty::after { content: '✦'; position: relative; color: var(--badge-accent); font-size: 56px; line-height: 1; }
.badge-celebration-artwork-stage .badge-modal-artwork { position: relative; z-index: 1; width: min(88%, 230px); aspect-ratio: 1; padding: 18px; filter: drop-shadow(0 18px 24px rgba(0,0,0,.32)); }
.badge-celebration-copy { min-width: 0; display: grid; align-content: start; gap: 18px; }
.badge-celebration-heading { display: grid; gap: 7px; }
.badge-celebration-kicker { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 30px; }
.badge-celebration-kicker p { margin: 0; }
.learner-badge-celebration-modal .badge-modal-status { color: var(--badge-accent); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.badge-celebration-position { color: var(--text-dim); font-size: 11px; font-weight: 600; }
.learner-badge-celebration-modal .badge-modal-title { margin: 0; font-family: var(--font-display); font-size: clamp(25px, 4vw, 32px); }
.learner-badge-celebration-modal .badge-modal-description { margin: 0; color: var(--text-main); font-size: 15px; }
.learner-badge-celebration-modal .badge-modal-meta { color: var(--text-muted); }
.badge-celebration-effect-panel { padding: 14px 16px; border: 1px solid var(--border-soft); border-left: 3px solid var(--badge-accent); border-radius: var(--r-sm); background: var(--badge-accent-soft); }
.badge-celebration-effect-panel .badge-modal-effect-label { margin: 0 0 5px; color: var(--badge-accent); }
.badge-celebration-effect-panel .badge-modal-effect { font-size: 13px; }
.badge-celebration-progress { display: grid; gap: 8px; }
.badge-celebration-progress-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; color: var(--text-muted); font-size: 12px; }
.badge-celebration-progress-copy strong { color: var(--text-main); font-size: 12px; }
.badge-celebration-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: var(--bg-inset); box-shadow: inset 0 0 0 1px var(--border-soft); }
.badge-celebration-progress-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--badge-accent)); transition: width .28s ease; }
.badge-celebration-remaining { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.badge-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 2px; }
.badge-modal-actions .btn-primary, .badge-modal-actions .btn-secondary { justify-content: center; }
.badge-modal-actions [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .badge-celebration-progress-track span { transition: none; }
}

.home-modules-section { position: relative; }
.module-card.has-badge-attention { border-color: #fbc94e; box-shadow: 0 0 0 3px rgba(251,201,78,.18), var(--sh-glow); }
.home-badge-notification { position: absolute; z-index: 12; right: 0; bottom: calc(100% + 10px); width: min(100%, 390px); display: flex; align-items: flex-end; gap: 8px; filter: drop-shadow(0 14px 28px rgba(0,0,0,.34)); }
.home-badge-notification[hidden] { display: none; }
.home-badge-notification-avatar { position: relative; z-index: 1; flex: 0 0 auto; width: 66px; height: 66px; display: grid; place-items: end center; border-radius: 50%; background: var(--bg-inset); }
.home-badge-notification-mia { width: 64px; height: 64px; object-fit: contain; }
.home-badge-notification-balloon { position: relative; min-width: 0; flex: 1; padding: 13px 14px; border: 1px solid var(--border-mid); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs); background: var(--bg-panel-strong); }
.home-badge-notification-balloon::before { content: ''; position: absolute; left: -7px; bottom: 12px; width: 13px; height: 13px; border-left: 1px solid var(--border-mid); border-bottom: 1px solid var(--border-mid); background: var(--bg-panel-strong); transform: rotate(45deg); }
.home-badge-notification-speaker { display: block; margin-bottom: 4px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.home-badge-notification-copy { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.home-badge-notification-copy p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-main); }

:root[data-font-size="large"] .learner-badge-celebration-modal .badge-modal-title { font-size: clamp(28px, 4.4vw, 35px); }
:root[data-font-size="large"] .learner-badge-celebration-modal .badge-modal-description { font-size: 16.5px; }
:root[data-font-size="large"] .badge-celebration-effect-panel .badge-modal-effect,
:root[data-font-size="large"] .badge-celebration-progress-copy,
:root[data-font-size="large"] .badge-celebration-progress-copy strong,
:root[data-font-size="large"] .badge-celebration-remaining,
:root[data-font-size="large"] .home-badge-notification-copy p { font-size: 13.5px; }

.db-panel--badges {
  overflow: visible;
}

/* Backward-compat stubs */
.dashboard-panel--diagnostic,
.dashboard-panel--level,
.dashboard-panel--distribution,
.dashboard-panel--family,
.dashboard-panel--engagement,
.dashboard-panel--badges,
.dashboard-panel--next,
.dashboard-panel--recent,
.dashboard-panel--summary {}

.dashboard-engagement-subtitle,
.dashboard-engagement,
.dashboard-engagement-title,
.dashboard-engagement-detail,
.dashboard-badges-placeholder { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/*
  KPI Ribbon breakpoints:
  Desktop ≥1100px:   [hero row-span-2] [3 cols] = 4-col grid, 2 rows → 1+3+3 = 7 cells ✓
  Medium 700–1099px: [hero row-span-2] [2 cols] = 3-col grid, 2 rows → 1+2+2 = 5 (hero+4)
                     so remaining 6 KPIs need 3 cols to fit neatly → keep 3-col
  Small <700px:      flat 2-col, hero not spanning
*/

@media (max-width: 1100px) {
  .db-kpi-ribbon {
    grid-template-columns: minmax(0, 1.28fr) repeat(2, minmax(0, 1fr));
  }
  .db-row--main  { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .db-row--intel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .db-row--main  { grid-template-columns: 1fr; }
  .db-row--intel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  body.learner-theme {
    padding-top: var(--mobile-safe-top);
  }
  .app-sidebar { display: none; }
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "topbar" "content";
    padding-bottom: calc(var(--mobile-bottomnav-h) + var(--mobile-safe-bottom));
  }
  .app-topbar {
    position: sticky;
    top: var(--mobile-safe-top);
    z-index: 45;
  }
  .home-content { grid-template-columns: 1fr; }
  .home-side { display: none; }
  .mia-side-panel { display: none !important; }
  .career-layout { grid-template-columns: 1fr; }
  .dashboard-page { padding: 12px; gap: 8px; }
  .db-header {
    align-items: baseline;
  }
  .db-title { font-size: 20px; }
  .db-row--intel { grid-template-columns: 1fr; }
  .career-panel { display: none; }
  .map-area { min-height: 460px; flex: 1; }
}

@media (min-width: 901px) {
  .career-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .dashboard-layout,
  .mission-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .mia-side-panel {
    display: block;
  }

  .mia-float-btn--dashboard,
  .mia-float-panel--dashboard {
    display: none !important;
  }

  .mia-dock {
    display: none !important;
  }
}

@media (max-width: 700px) {
  /* Hero collapses to normal cell, flat grid */
  .db-kpi-ribbon {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
  }
  .db-kpi--hero {
    grid-row: auto;
    grid-column: 1 / -1;
  }
  .db-kpi--hero .db-kpi-icon-wrap { width: 30px; height: 30px; border-radius: 8px; }
  .db-kpi--hero .db-kpi-icon-wrap svg { width: 20px; height: 20px; }
  .db-kpi-value--hero { font-size: 26px !important; }
}

@media (max-width: 640px) {
  .home-main { padding: 16px; }
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-next-mission { align-items: flex-start; flex-direction: column; gap: 12px; }
  .module-grid { grid-template-columns: 1fr; }
  .db-kpi-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-kpi--hero { grid-column: 1 / -1; }
  .db-kpi-value--hero { font-size: 28px !important; }
  .dashboard-diagnostic-label { font-size: 8px; }
  .dashboard-diagnostic-values-item { font-size: 9px; }
  .dashboard-distribution-legend { grid-template-columns: 1fr; }
  .welcome-title { font-size: 22px; }
  .career-legend { display: none; }
  .map-area { min-height: 360px; }
  .db-family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-badge-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .badge-modal { grid-template-columns: 1fr; padding: 24px 20px 20px; gap: 12px; }
  .badge-modal-artwork { max-width: 170px; }
  .learner-badge-celebration-modal { gap: 18px; }
  .badge-celebration-artwork-stage { position: relative; min-height: 178px; }
  .badge-celebration-artwork-stage .badge-modal-artwork { width: min(68%, 170px); padding: 8px; }
  .badge-celebration-copy { gap: 14px; }
  .badge-modal-actions { flex-direction: column-reverse; }
  .badge-modal-actions .btn-primary, .badge-modal-actions .btn-secondary { width: 100%; }
  .home-badge-notification { right: 0; left: 0; width: auto; bottom: calc(100% + 8px); }
  .home-badge-notification-avatar { width: 54px; height: 54px; }
  .home-badge-notification-mia { width: 52px; height: 52px; }
}

@media (max-width: 400px) {
  .dashboard-badge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 400px) {
  .kpi-strip { grid-template-columns: 1fr; }
  .db-kpi-ribbon { grid-template-columns: 1fr 1fr; }
  .cta-row { flex-direction: column; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
}

/* ── Debug panel — hidden in client preview ── */
#map-debug-panel { display: none !important; }

/* ── Family selector: side letter buttons ── */
#family-selector {
  position: absolute;
  right: 14px;
  left: auto;
  bottom: calc(14px + 34px * 3 + 5px * 2 + 12px); /* above zoom/reset/recenter trio */
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-height: none;
  overflow: visible;
  scrollbar-width: none;
}

#family-selector::-webkit-scrollbar { display: none; }

.fam-sel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  background: rgba(6, 15, 28, 0.92);
  border: 1px solid rgba(93, 160, 220, 0.18);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
  backdrop-filter: blur(10px);
  font-family: inherit;
  padding: 0;
  gap: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}

.fam-sel-btn:hover {
  background: rgba(10, 22, 42, 0.96);
  border-color: rgba(93, 160, 220, 0.32);
}

.fam-sel-btn--active {
  background: rgba(8, 20, 38, 0.98);
  border-color: var(--fam-color, #4fd8ff);
}

.fam-sel-btn--expanded {
  /* expanded state now drives only visual emphasis; sizing remains fixed */
  background: rgba(10, 22, 42, 0.96);
  border-color: rgba(93, 160, 220, 0.32);
}

:root[data-theme="light"] .fam-sel-btn {
  background: rgba(244, 250, 255, 0.97);
  border-color: rgba(25, 87, 135, 0.28);
  color: #2b5a7c;
}

:root[data-theme="light"] .fam-sel-btn:hover {
  background: rgba(236, 247, 255, 0.98);
  border-color: rgba(21, 120, 167, 0.44);
}

:root[data-theme="light"] .fam-sel-btn--active,
:root[data-theme="light"] .fam-sel-btn--expanded {
  background: rgba(230, 244, 255, 0.98);
  border-color: var(--fam-color, #1578a7);
}

:root[data-theme="light"] .fam-sel-letter {
  color: var(--fam-color, #1578a7);
}

/* Large letter marker */
.fam-sel-letter {
  font-size: 14px;
  font-weight: 800;
  color: var(--fam-color, #4fd8ff);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}

.fam-sel-full-label {
  display: none;
}

.fam-sel-floating-label {
  position: absolute;
  right: 42px;
  top: 0;
  transform: translateY(-50%);
  z-index: 40;
  display: block;
  max-width: min(260px, calc(100vw - 96px));
  background: rgba(6, 15, 28, 0.96);
  border: 1px solid rgba(93, 160, 220, 0.28);
  border-right: 3px solid var(--fam-color, #4fd8ff);
  border-radius: var(--r-sm);
  color: var(--text-main);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  padding: 7px 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease;
}

.fam-sel-floating-label.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ── Floating family banner (inside map area, top-center) ── */
#family-floating-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: rgba(6, 15, 28, 0.88);
  border: 1px solid rgba(93, 160, 220, 0.24);
  border-radius: var(--r-md);
  border-left: 4px solid var(--fam-color, #4fd8ff);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.50), 0 0 20px rgba(79, 216, 255, 0.08);
  backdrop-filter: blur(12px);
  animation: slideInBanner 280ms ease-out;
  max-width: calc(100% - 80px);
  width: max-content;
}

@keyframes slideInBanner {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.family-banner-letter {
  display: none;
}

.family-banner-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-main);
  text-align: center;
  line-height: 1.15;
  max-height: 2.76em;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: anywhere;
  max-width: 240px;
}

/* ── Family return button inside map area, top-right ── */
.family-return-btn-map {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(93, 160, 220, 0.28);
  background: rgba(6, 15, 28, 0.92);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  backdrop-filter: blur(10px);
  padding: 0;
  flex-shrink: 0;
  animation: slideInReturnBtn 280ms ease-out;
  font-family: inherit;
}

@keyframes slideInReturnBtn {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.family-return-btn-map:hover {
  background: rgba(10, 22, 42, 0.96);
  border-color: rgba(93, 160, 220, 0.32);
  color: var(--text-main);
}

.family-return-btn-map svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* ── Mobile adjustments ── */
@media (max-width: 900px) {
  #family-selector {
    position: absolute;
    right: 14px;
    left: auto;
    bottom: calc(14px + 34px * 3 + 5px * 2 + 12px);
    flex-direction: column;
    align-items: flex-end;
    overflow: visible;
    gap: 5px;
    max-height: none;
  }

  .fam-sel-btn {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .fam-sel-floating-label {
    right: 42px;
    max-width: min(220px, calc(100vw - 92px));
  }

  .family-active-header {
    padding: 0 10px;
    font-size: 11px;
    gap: 6px;
  }

  .family-active-letter {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  #family-return-btn {
    width: 34px;
    height: 34px;
  }

  #family-return-btn svg {
    width: 14px;
    height: 14px;
  }

  .family-banner-name {
    font-size: 10px;
    max-height: 2.3em;
    max-width: 200px;
  }
}

@media (max-width: 600px) {
  .family-banner-name {
    font-size: 9.5px;
    max-height: 2.2em;
    max-width: 180px;
  }

  #family-floating-banner {
    max-width: calc(100% - 70px);
    padding: 9px 14px;
  }
}

/* ============================================================
   MOBILE BOTTOM SHEET — mission detail
   ============================================================ */

.detail-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 200;
  backdrop-filter: blur(3px);
}

.detail-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  background: var(--bg-panel-strong);
  border-top: 1px solid var(--border-mid);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.60);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  animation: sheetSlideUp 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.detail-sheet[hidden] { display: none; }

@keyframes sheetSlideUp {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

.detail-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  margin: 10px auto 0;
  flex-shrink: 0;
}

.detail-sheet-inner {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
  padding: 12px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.detail-sheet-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
  z-index: 2;
}
.detail-sheet-close:hover { background: rgba(255,255,255,0.10); color: var(--text-main); }
.detail-sheet-close svg { width: 12px; height: 12px; }

/* Sheet content elements */
.sheet-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 10px;
}

.sheet-status-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
}
.sheet-status-badge--completed  { background: rgba(94,224,160,0.10); border-color: rgba(94,224,160,0.30); color: #7ef4b8; }
.sheet-status-badge--in_progress{ background: rgba(244,185,91,0.10); border-color: rgba(244,185,91,0.30); color: #ffd080; }
.sheet-status-badge--unlocked   { background: rgba(79,216,255,0.09); border-color: rgba(79,216,255,0.28); color: #7ee6ff; }
.sheet-status-badge--locked     { background: rgba(75,85,99,0.14);   border-color: rgba(75,85,99,0.28);   color: var(--locked); }
.sheet-status-badge--preview    { background: rgba(255,202,79,0.10); border-color: rgba(255,202,79,0.32); color: #ffe8a5; }

.sheet-level-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
}

.sheet-info-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.sheet-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.sheet-competence {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.sheet-family {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.sheet-progress-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.sheet-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sheet-progress-label-text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.sheet-progress-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.sheet-progress-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}

.sheet-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.45s ease;
}

.sheet-mia-note {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  font-style: italic;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.sheet-locked-block {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sheet-locked-block[hidden] { display: none !important; }

.sheet-locked-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sheet-locked-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.sheet-locked-header--how {
  color: rgba(79, 216, 255, 0.70);
}

.sheet-locked-header--how .sheet-locked-icon {
  color: rgba(79, 216, 255, 0.70);
}

.sheet-locked-icon {
  width: 12px; height: 12px;
  flex-shrink: 0;
  color: var(--text-dim);
}

.sheet-locked-reason {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.sheet-locked-how {
  margin: 0;
  font-size: 12px;
  color: var(--text-acc);
  line-height: 1.5;
  font-style: italic;
}

.sheet-course-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #021929;
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(130deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 2px 14px rgba(79,216,255,0.24);
  width: 100%;
  margin-top: 4px;
  transition: opacity .17s, transform .12s;
}
.sheet-course-link:hover { opacity: 0.88; transform: translateY(-1px); }

.sheet-course-locked {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--locked);
  text-align: center;
  padding: 10px 12px;
  border: 1px solid rgba(75,85,99,0.26);
  border-radius: var(--r-sm);
  background: rgba(75,85,99,0.07);
}

/* Show sheet elements only on mobile */
.detail-sheet-backdrop,
.detail-sheet { display: none; }

@media (max-width: 900px) {
  .detail-sheet-backdrop,
  .detail-sheet { display: flex; }
  .detail-sheet-backdrop { display: block; }
.detail-sheet[hidden],
.detail-sheet-backdrop[hidden] { display: none !important; }
}


/* ============================================================
   FLOATING MIA BUTTON & PANEL (mobile/tablet)
   ============================================================ */

.mia-float-btn {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 14px;
  z-index: 220;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(107, 231, 255, 0.42);
  background: radial-gradient(circle at 30% 22%, #1b2a3f 0%, #081425 72%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.56), 0 0 14px rgba(79, 216, 255, 0.16);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0;
  transition: transform .18s, box-shadow .18s, border-color .18s, bottom .28s cubic-bezier(0.32, 0.72, 0, 1);
}

.mia-float-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.62), 0 0 20px rgba(79, 216, 255, 0.22);
  border-color: rgba(107, 231, 255, 0.58);
}

/* Portrait PNG assets inside the float button */
.mia-float-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  object-position: center center;
  transition: opacity .22s ease;
  pointer-events: none;
}

/* Idle state: show idle asset, hide active */
.mia-float-btn[data-mia-state="idle"]   .mia-float-img--idle   { opacity: 1; }
.mia-float-btn[data-mia-state="idle"]   .mia-float-img--active { opacity: 0; }

/* Active state: show active asset, hide idle */
.mia-float-btn[data-mia-state="active"] .mia-float-img--idle   { opacity: 0; }
.mia-float-btn[data-mia-state="active"] .mia-float-img--active { opacity: 1; }

/* Default (no data-mia-state yet): show idle */
.mia-float-btn:not([data-mia-state]) .mia-float-img--idle   { opacity: 1; }
.mia-float-btn:not([data-mia-state]) .mia-float-img--active { opacity: 0; }

/* Fallback initial text — hidden when SVG images are used */
.mia-float-initial { display: none; }

/* Unread indicator — small glowing dot */
.mia-unread-badge {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff4865;
  border: 2px solid #09162a;
  box-shadow: 0 0 8px rgba(255, 72, 101, 0.80);
  animation: badgePulse 2.4s ease-in-out infinite;
}

.mia-unread-badge[hidden] { display: none !important; }

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 72, 101, 0.65); }
  50%       { box-shadow: 0 0 12px rgba(255, 72, 101, 0.95); }
}

.mia-float-panel {
  display: none;
  position: fixed;
  bottom: 82px;
  right: 14px;
  left: auto;
  z-index: 221;
  width: 240px;
  background: var(--bg-panel-strong);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.60), var(--sh-glow);
  padding: 12px 14px 14px;
  animation: miaFloatIn 200ms ease-out;
  transition: bottom .28s cubic-bezier(0.32, 0.72, 0, 1);
}

.mia-float-panel[hidden] { display: none !important; }

@keyframes miaFloatIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.mia-float-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mia-float-panel-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mia-float-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.mia-float-role {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}

.mia-float-close {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s;
}
.mia-float-close:hover { background: rgba(255,255,255,0.08); }
.mia-float-close svg { width: 10px; height: 10px; }

.mia-float-message {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.50;
}

.mia-float-home-meta {
  margin: 0;
  font-size: 10px;
  color: rgba(79,216,255,0.60);
  line-height: 1.45;
}

.mia-float-fallback {
  display: none;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #9de7ff;
  background: radial-gradient(circle at 34% 24%, #203a5a 0%, #0b1b2f 70%);
}

.mia-float-btn--fallback .mia-float-fallback {
  display: flex;
}

.mia-float-btn--fallback .mia-float-img {
  opacity: 0 !important;
}

.mia-float-tips {
  margin: 0;
  padding: 0 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mia-float-tips li {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .mia-float-btn { display: flex; }
  .mia-float-panel { display: block; }
  .mia-float-panel[hidden] { display: none !important; }
}

/* ============================================================
   DESKTOP — stronger node detail panel, collapsed empty state
   ============================================================ */

@media (min-width: 901px) {
  /* Collapse the empty placeholder — just a small hint, no dead space */
  .node-detail-empty {
    flex: 0;
    padding: 14px 14px 10px;
    gap: 6px;
    font-size: 11px;
    min-height: 0;
  }

  .node-detail-empty-icon {
    width: 28px;
    height: 28px;
    opacity: 0.20;
  }

  /* Active detail surface — raised card feel */
  .node-detail-content {
    border-top: 2px solid var(--border-active);
    background: rgba(8, 20, 42, 0.60);
  }

  .panel-section-label {
    background: rgba(79, 216, 255, 0.06);
    color: var(--accent);
  }
}

/* ============================================================
   MOBILE BOTTOM NAV BAR
   ============================================================ */

.mobile-bottomnav {
  display: none;
  align-items: flex-end;
  justify-content: stretch;
  gap: 0;
  padding: 0 4px calc(var(--mobile-safe-bottom));
  min-height: calc(var(--mobile-bottomnav-h) + var(--mobile-safe-bottom));
  background: rgba(6, 15, 28, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  flex-shrink: 0;
  overflow: visible;
}

/* Top separator line */
.mobile-bottomnav::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(93, 160, 220, 0.18) 20%,
    rgba(93, 160, 220, 0.18) 65%,
    rgba(79, 216, 255, 0.30) 75%,
    rgba(79, 216, 255, 0.30) 100%
  );
  pointer-events: none;
}


/* ── Normal nav items ── */
.mobile-bottomnav-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 0;
  height: 54px;
  padding-bottom: 4px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color .15s, background .15s, border-color .15s;
}

.mobile-bottomnav-item:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

.mobile-bottomnav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.mobile-bottomnav-label {
  line-height: 1;
  white-space: nowrap;
}

.mobile-bottomnav-item.active {
  color: var(--accent);
  background: rgba(79, 216, 255, 0.10);
  border-color: rgba(79, 216, 255, 0.22);
}

/* ── Mia slot ── */
.mobile-bottomnav-item--mia {
  flex: 1 1 0;
  height: 54px;
  padding: 0;
  gap: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  overflow: visible;
  position: relative;
  z-index: 3;
}

.mobile-bottomnav-item--mia:hover,
.mobile-bottomnav-item--mia.active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* ── Mia circular avatar ── */
/* Outer glow ring — sits 28px above the nav baseline */
.mobile-bottomnav-item--mia::before {
  content: "";
  position: absolute;
  left: calc(50% + 4px);
  top: calc(50% - 6px);
  transform: translate(-50%, -50%);
  bottom: auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  /* Dark fill centre + conic gradient ring only at the outer edge */
  background:
    radial-gradient(circle, rgba(9, 22, 42, 1) 55%, transparent 55%),
    conic-gradient(
      rgba(79, 216, 255, 0.70) 0deg,
      rgba(94, 224, 160, 0.55) 90deg,
      rgba(79, 216, 255, 0.70) 200deg,
      rgba(79, 216, 255, 0.30) 280deg,
      rgba(79, 216, 255, 0.70) 360deg
    );
  box-shadow:
    0 0 18px rgba(79, 216, 255, 0.28),
    0 8px 24px rgba(0, 0, 0, 0.60);
  z-index: 0;
  pointer-events: none;
  transition: box-shadow .22s ease;
}

.mobile-bottomnav-item--mia:hover::before,
.mobile-bottomnav-item--mia:active::before {
  box-shadow:
    0 0 28px rgba(79, 216, 255, 0.48),
    0 10px 28px rgba(0, 0, 0, 0.65);
}

/* Active-state pulse when Mia has a message */
.mobile-bottomnav-item--mia[data-mia-state="active"]::before {
  animation: miaRingPulse 2.6s ease-in-out infinite;
}

@keyframes miaRingPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(79,216,255,0.28), 0 8px 24px rgba(0,0,0,0.60); }
  50%       { box-shadow: 0 0 32px rgba(79,216,255,0.55), 0 8px 24px rgba(0,0,0,0.60); }
}

/* Mia photo — circular, face-cropped, sits on top of ring */
.mobile-bottomnav-mia-img {
  position: absolute;
  left: calc(50% + 4px);
  top: calc(50% - 6px);
  transform: translate(-50%, -50%);
  bottom: auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 12%;  /* show face, include hair bun */
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
  z-index: 1;
  background: rgba(9, 22, 42, 1);
}

.mobile-bottomnav-item--mia[data-mia-state="idle"]    .mobile-bottomnav-mia-img--idle   { opacity: 1; }
.mobile-bottomnav-item--mia[data-mia-state="idle"]    .mobile-bottomnav-mia-img--active { opacity: 0; }
.mobile-bottomnav-item--mia[data-mia-state="active"]  .mobile-bottomnav-mia-img--idle   { opacity: 0; }
.mobile-bottomnav-item--mia[data-mia-state="active"]  .mobile-bottomnav-mia-img--active { opacity: 1; }
.mobile-bottomnav-item--mia:not([data-mia-state])     .mobile-bottomnav-mia-img--idle   { opacity: 1; }
.mobile-bottomnav-item--mia:not([data-mia-state])     .mobile-bottomnav-mia-img--active { opacity: 0; }

/* No text label */
.mobile-bottomnav-item--mia .mobile-bottomnav-label {
  display: none;
}

/* Unread indicator — small glowing dot on top-right edge of Mia circle */
.mobile-bottomnav-mia-badge {
  position: absolute;
  left: calc(50% + 4px + 19px);
  top: calc(50% - 6px - 19px);
  transform: translate(-50%, -50%);
  z-index: 4;
}

.mobile-bottomnav-item--disabled {
  opacity: 0.32;
  pointer-events: none;
}

@media (max-width: 900px) {
  .mobile-bottomnav { display: flex; }
  .mia-float-btn { display: none !important; }

  /* Shift Mia float button up so it doesn't overlap the bottom sheet handle */
  .mia-float-panel { bottom: calc(var(--mobile-bottomnav-h) + var(--mobile-safe-bottom) + 4px); right: 14px; left: auto; }
  .mia-float-panel::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: -10px;
    width: 16px;
    height: 16px;
    border-right: 1px solid rgba(79, 216, 255, 0.26);
    border-bottom: 1px solid rgba(79, 216, 255, 0.26);
    background: rgba(7, 18, 33, 0.96);
    transform: rotate(45deg);
    pointer-events: none;
  }
  body.sheet-open .mia-float-panel { bottom: calc(var(--detail-sheet-offset, 0px) + var(--mobile-bottomnav-h) + var(--mobile-safe-bottom) + 84px); }
  .mia-float-panel--home { width: 228px; padding: 12px 12px 13px; }
}

/* ============================================================
   DESKTOP FLOATING MISSION WINDOW
   ============================================================ */

.mission-window-backdrop {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: rgba(4, 10, 22, .62);
}
.mission-window-backdrop[hidden] { display: none; }

.mission-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 300;
  width: min(420px, calc(100vw - 32px));
  background: rgba(8, 20, 40, 0.98);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.70), 0 2px 8px rgba(0, 0, 0, 0.40);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  animation: missionWindowIn 180ms ease-out;
}

.mission-window[hidden] { display: none !important; }

@keyframes missionWindowIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.topbar-theme-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  background: var(--bg-panel-strong);
  color: var(--text-main);
  cursor: pointer;
  font-size: 20px;
}
.topbar-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Pointer activation must not leave a square focus ring on the SVG radar target. */
.career-core-diagnostic-button:focus:not(:focus-visible) { outline: none; }
.career-core-diagnostic-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.mission-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.20);
}

.mission-window-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-family: var(--font-display);
}

.mission-window-close {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
  padding: 0;
}
.mission-window-close:hover { background: rgba(255,255,255,0.10); color: var(--text-main); }
.mission-window-close svg { width: 10px; height: 10px; }

.mission-window-body {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
  display: flex;
  flex-direction: column;
}

/* On mobile the mission window is always hidden — bottom sheet handles detail */
@media (max-width: 900px) {
  .mission-window { display: none !important; }
  .mission-window-backdrop { display: none !important; }
}

/* ============================================================
   DESKTOP MIA DOCK
   ============================================================ */

.mia-dock {
  display: none; /* hidden on mobile; desktop-only */
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 20;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(6, 15, 28, 0.92);
  border: 1px solid var(--border-mid);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
  max-width: 280px;
  overflow: visible;
}

.mia-dock.is-open {
  border-color: rgba(79, 216, 255, 0.30);
}

@media (min-width: 901px) {
  .mia-dock { display: flex; }
}

.mia-dock-btn {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(107, 231, 255, 0.38);
  background: radial-gradient(circle at 30% 22%, #1b2a3f 0%, #081425 72%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.52), 0 0 10px rgba(79, 216, 255, 0.14);
  cursor: pointer;
  overflow: visible;
  padding: 0;
  transition: transform .16s, border-color .16s;
}

.mia-dock-btn:hover {
  transform: scale(1.06);
  border-color: rgba(107, 231, 255, 0.54);
}

/* Portrait PNG assets inside dock button */
.mia-dock-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  object-position: center center;
  transition: opacity .22s ease;
  pointer-events: none;
}

.mia-dock-btn[data-mia-state="idle"]   .mia-dock-img--idle   { opacity: 1; }
.mia-dock-btn[data-mia-state="idle"]   .mia-dock-img--active { opacity: 0; }
.mia-dock-btn[data-mia-state="active"] .mia-dock-img--idle   { opacity: 0; }
.mia-dock-btn[data-mia-state="active"] .mia-dock-img--active { opacity: 1; }
.mia-dock-btn:not([data-mia-state])    .mia-dock-img--idle   { opacity: 1; }
.mia-dock-btn:not([data-mia-state])    .mia-dock-img--active { opacity: 0; }

/* Unread badge on dock button */
.mia-dock-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff8f9d 0%, #ff4b64 42%, #ea2948 100%);
  border: none;
  box-shadow: 0 0 12px rgba(255, 72, 101, 0.74);
  animation: badgePulse 2.4s ease-in-out infinite;
  z-index: 5;
}
.mia-dock-badge[hidden] { display: none !important; }

@media (max-width: 900px) {
  .detail-sheet-close {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

.mia-dock-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mia-dock-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.mia-dock-message {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mia-dock-meta {
  display: none; /* meta hidden in compact dock */
}

/* Dock guidance panel — slides up above dock */
.mia-dock-panel {
  position: absolute;
  bottom: calc(100% - 1px);
  left: -1px;
  right: -1px;
  z-index: 1;
  width: auto;
  background: rgba(8, 20, 40, 0.98);
  border: 1px solid var(--border-mid);
  border-bottom: 0;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.65);
  padding: 12px 14px 14px;
  animation: miaFloatIn 200ms ease-out;
}

.mia-dock-panel[hidden] { display: none !important; }

@media (max-width: 900px) {
  .mia-dock-panel { display: none !important; }
}

.mia-dock-panel-close {
  float: right;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s;
  padding: 0;
  margin: -2px -2px 6px 8px;
}
.mia-dock-panel-close:hover { background: rgba(255, 255, 255, 0.10); color: var(--text-main); }
.mia-dock-panel-close svg { width: 10px; height: 10px; }

.mia-dock-panel-msg {
  margin: 0 0 8px;
  font-size: 12px;
  font-family: var(--font-body);
  color: var(--text-muted);
  line-height: 1.50;
}

.mia-dock-panel-tips {
  margin: 0;
  padding: 0 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mia-dock-panel-tips li {
  font-size: 11px;
  font-family: var(--font-body);
  color: var(--text-dim);
  line-height: 1.45;
}

.sidebar-tooltip,
.topbar-map-meta,
.cluster-focus-ctx,
.legend-label,
.family-selector-letter,
.family-active-banner,
.node-status-badge,
.node-level-badge,
.mission-window-label,
.sheet-status-badge,
.sheet-level-badge,
.map-ctrl-btn,
.topbar-icon-btn,
.mia-float-name,
.mia-float-role,
.mobile-bottomnav-item {
  font-family: var(--font-display);
}

.mia-float-message,
.mia-float-tips li,
.node-locked-reason,
.node-locked-how,
.node-detail-dl dd,
.sheet-mia-note,
.sheet-detail-meta-value {
  font-family: var(--font-body);
}

/* ============================================================
   Mission View (Phase 4.6)
   ============================================================ */

.learner-mission-page {
  background: radial-gradient(1200px 700px at 10% -10%, rgba(38, 119, 185, 0.24), rgba(8, 20, 40, 0.92));
  color: var(--text-main);
}

body.learner-theme.learner-mission-page {
  min-height: 100vh;
  overflow: hidden;
}

.journey-account-corner {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 8px;
}

.learner-mission-page .app-content {
  overflow-y: auto;
  overflow-x: hidden;
}

.mission-page {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 18px 40px;
}

.mission-back-link {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
}

.mission-header,
.mission-intro-video,
.mission-intro-fallback,
.mission-activities {
  background: rgba(7, 19, 36, 0.88);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  padding: 18px;
}

.mission-header {
  margin-bottom: 14px;
}

.mission-intro-video {
  margin-bottom: 14px;
}

.mission-intro-fallback {
  margin-bottom: 14px;
}

.mission-intro-video-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: rgba(4, 12, 24, 0.92);
  overflow: hidden;
}

.mission-intro-video-el {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

.mission-intro-video-retry-text {
  display: block;
  margin-bottom: 8px;
}

.mission-intro-video-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm, 8px);
  background: var(--surface-2, rgba(255, 255, 255, 0.06));
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.mission-intro-video-retry-btn:hover {
  filter: brightness(1.08);
}

/* --- Native evaluation card --- */
.mission-evaluation {
  margin-top: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  padding: 16px;
}
.mission-evaluation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.mission-evaluation-status {
  font-weight: 700;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
}
.mission-evaluation-card-message {
  margin: 0 0 12px;
  color: var(--text-muted);
}
.mission-evaluation-open {
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-sm, 8px);
  background: var(--accent, #2f6fed);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.mission-evaluation-open:disabled {
  border-color: var(--border-soft);
  background: var(--surface-2, rgba(255, 255, 255, 0.06));
  color: var(--text-muted);
  cursor: not-allowed;
}
.mission-evaluation-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 10, 22, 0.72);
  backdrop-filter: blur(4px);
}
.mission-evaluation-modal[hidden] { display: none; }
/* "Texte agrandi" for the native TEST_BETA / Mission Évaluation modal.
   The modal's typography is fixed px/rem (it is a self-contained surface), so it did not
   follow the shared --font-size-body token the rest of the learner UI uses. One inherited
   scale factor, driven by the SAME :root[data-font-size] state the account menu already
   toggles, multiplies every text size below - there is no Test-Beta-specific setting and no
   second list of enlarged pixel values. Scale 1 renders byte-identically to before. */
.mission-evaluation-modal { --eval-text-scale: 1; }
:root[data-font-size="large"] .mission-evaluation-modal { --eval-text-scale: 1.15; }
body.evaluation-modal-open { overflow: hidden; }
.mission-evaluation-dialog {
  position: relative;
  width: min(720px, 100%);
  height: min(820px, calc(100dvh - 40px));
  max-height: min(820px, calc(100dvh - 40px));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "head"
    "body"
    "actions";
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg, 16px);
  background: var(--bg-panel-strong);
  color: var(--text-main);
  /* Inherited base size for every text in the modal that has no size of its own (question
     stems, answer rows). Scaled by the shared accessibility factor declared above. */
  font-size: calc(var(--font-size-body) * var(--eval-text-scale));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}
.mission-evaluation-dialog:focus { outline: none; }
.mission-evaluation-modal.is-expanded { padding: 0; }
.mission-evaluation-modal.is-expanded .mission-evaluation-dialog {
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  border-radius: 0;
}
/* Explicit named areas, NOT auto-placement: the close/fullscreen cluster owns its own
   grid area, so adding, removing or revealing any other head content (progress text,
   stopwatch, UAT tools, result state) can never re-flow it out of the top-left corner.
   That auto-placement re-flow was the reported UAT defect. */
.mission-evaluation-modal-head {
  grid-area: head;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "controls heading stopwatch"
    "navigator navigator navigator";
  align-items: start;
  gap: 10px 14px;
  padding: max(18px, env(safe-area-inset-top)) 20px 12px max(20px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-panel-strong);
}
.mission-evaluation-modal-head h2 { margin: 2px 0 0; font-size: calc(1.05rem * var(--eval-text-scale)); }
.mission-evaluation-heading { grid-area: heading; min-width: 0; }
.mission-evaluation-progress {
  margin: 0;
  color: var(--text-muted);
  font-size: calc(13px * var(--eval-text-scale));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mission-evaluation-timer {
  min-width: 74px;
  text-align: left;
  color: var(--accent, #77a1ff);
  font-variant-numeric: tabular-nums;
  font-size: calc(17px * var(--eval-text-scale));
  letter-spacing: .02em;
}
.mission-evaluation-window-actions {
  grid-area: controls;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Count-UP stopwatch. Deliberately a separate element from the countdown timer in the
   action footer, so a diagnostic gains a stopwatch without any timed Mission Évaluation
   losing or changing its countdown. */
/* Passive status typography - explicitly NOT a pill/button: no border, no filled
   background, no border-radius, no hover/click affordance. It is a <strong role="timer">,
   not an interactive control, and must not visually claim to be one. */
.mission-evaluation-stopwatch {
  grid-area: stopwatch;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  min-width: 70px;
  padding: 2px 2px 0 0;
  color: var(--text-main);
  white-space: nowrap;
  user-select: none;
  /* Suppresses the mobile double-tap-zoom delay so the in-modal UAT discovery gesture
     registers each tap immediately. Still not a control: no cursor, border or hover state. */
  touch-action: manipulation;
}
.mission-evaluation-stopwatch[hidden] { display: none; }
.mission-evaluation-stopwatch-label {
  font-size: calc(10px * var(--eval-text-scale));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.mission-evaluation-stopwatch-value {
  font-variant-numeric: tabular-nums;
  font-size: calc(15px * var(--eval-text-scale));
  font-weight: 800;
  letter-spacing: .02em;
}
.mission-evaluation-icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.mission-evaluation-icon-button[hidden] { display: none !important; }
.mission-evaluation-close { font-size: 25px; }
.mission-evaluation-icon-button:hover { background: rgba(127, 127, 127, 0.12); }
.mission-evaluation-navigator {
  grid-area: navigator;
  display: flex;
  gap: 7px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 1px 4px;
  /* Scrolls normally (touch, mouse wheel, trackpad) - only the native scrollbar chrome
     is hidden, never the ability to scroll. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mission-evaluation-navigator::-webkit-scrollbar { display: none; height: 0; }
.mission-evaluation-nav-question {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.mission-evaluation-nav-question.is-answered {
  border-color: rgba(46, 160, 67, 0.72);
  color: var(--text-main);
  background: rgba(46, 160, 67, 0.14);
}
.mission-evaluation-nav-question.is-partial {
  border-color: rgba(231, 173, 61, 0.75);
  color: var(--text-main);
  background: rgba(231, 173, 61, 0.14);
}
/* A scenario the server named as still incomplete when the learner tried to finish.
   Text stays var(--text-main) - like the answered/partial siblings above - rather than a
   fixed pale color, so it stays legible against the tint in both themes. */
.mission-evaluation-nav-question.is-missing-required {
  border-color: var(--diag-danger);
  color: var(--text-main);
  background: color-mix(in srgb, var(--diag-danger) 20%, transparent);
}
.mission-evaluation-nav-question.is-current {
  border-color: var(--accent, #77a1ff);
  color: var(--text-main);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #77a1ff) 30%, transparent);
}
.mission-evaluation-nav-question.is-flagged::after {
  content: '⚑';
  position: absolute;
  top: -7px;
  right: -5px;
  color: #f3b63f;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.mission-evaluation-scroll-body {
  grid-area: body;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px;
  scrollbar-gutter: stable;
}
.mission-evaluation-instructions {
  margin: 0 0 12px;
  opacity: 0.85;
}
.mission-evaluation-instructions-hint {
  display: inline-block;
  margin-top: 2px;
  font-size: calc(.86rem * var(--eval-text-scale));
  opacity: .8;
}
.mission-evaluation-intro {
  margin: 14px 0 8px;
  font-style: italic;
  opacity: 0.9;
}
.mission-evaluation-question {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm, 8px);
  padding: 12px 14px;
  margin: 0 0 12px;
  min-width: 0;
  background: var(--bg-card);
}
.mission-evaluation-question legend {
  font-weight: 700;
  padding: 0 6px;
}
.mission-evaluation-unanswered {
  margin: 4px 6px 8px;
  color: var(--text-muted);
  font-weight: 700;
}
.mission-evaluation-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 6px;
  border-radius: var(--r-sm, 8px);
  cursor: pointer;
  color: var(--text-main);
}
.mission-evaluation-option:hover {
  background: rgba(127, 127, 127, 0.08);
}
.mission-evaluation-option input {
  margin-top: 3px;
  flex: 0 0 auto;
}
.mission-evaluation-option.is-correct {
  background: rgba(46, 160, 67, 0.14);
  border: 1px solid rgba(46, 160, 67, 0.5);
}
.mission-evaluation-option.is-learner-answer {
  border: 1px solid color-mix(in srgb, var(--accent, #77a1ff) 62%, transparent);
}
/* TEST Beta only: no bordered/filled card around the question or its options - a plain
   stem followed by generously-spaced radio rows. Ordinary Mission Evaluations (N008, etc.)
   keep the bordered-card treatment above untouched. */
.mission-evaluation-modal.is-diagnostic .mission-evaluation-question {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 28px;
  background: transparent;
}
.mission-evaluation-modal.is-diagnostic .mission-evaluation-question legend {
  padding: 0;
  margin: 0 0 10px;
}
.mission-evaluation-modal.is-diagnostic .mission-evaluation-option {
  padding: 10px 8px;
  margin: 0 0 2px;
}
.mission-evaluation-modal.is-diagnostic .mission-evaluation-option:focus-within {
  outline: 2px solid var(--accent, #77a1ff);
  outline-offset: 2px;
}
.mission-evaluation-modal.is-diagnostic .mission-evaluation-option:has(input:checked) {
  color: var(--accent, #77a1ff);
  font-weight: 700;
}
.mission-evaluation-review-detail {
  display: grid;
  gap: 9px;
  margin: 14px 6px 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.mission-evaluation-review-detail p { margin: 0; }
.mission-evaluation-review-outcome { font-weight: 800; }
.mission-evaluation-review-outcome[data-outcome="correct"] { color: #4fd494; }
.mission-evaluation-review-outcome[data-outcome="partially_correct"] { color: #e7ad3d; }
.mission-evaluation-review-outcome[data-outcome="incorrect"] { color: #ef7777; }
.mission-evaluation-review-points { font-variant-numeric: tabular-nums; font-weight: 700; }
.mission-evaluation-actions {
  grid-area: actions;
  min-width: 0;
  position: relative;
  z-index: 2;
  display: grid;
  /* Symmetric minmax(0,1fr) bookends: the lifecycle group (middle column) sits at the
     mathematical center of the row regardless of how much nav-group/status-group content
     is visible on either side - see the E requirement (lifecycle buttons always centered). */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 20px max(12px, env(safe-area-inset-bottom));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  border-top: 1px solid var(--border-soft);
  background: var(--bg-panel-strong);
}
.mission-evaluation-actions[hidden],
.mission-evaluation-previous[hidden],
.mission-evaluation-flag[hidden],
.mission-evaluation-next[hidden],
.mission-evaluation-quit[hidden],
.mission-evaluation-submit[hidden] { display: none !important; }
.mission-evaluation-nav-group {
  grid-column: 1;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
  max-width: 100%;
}
.mission-evaluation-lifecycle-group {
  grid-column: 2;
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
  max-width: 100%;
}
.mission-evaluation-status-group {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
  max-width: 100%;
  text-align: right;
}
.mission-evaluation-submit,
.mission-evaluation-previous,
.mission-evaluation-flag,
.mission-evaluation-next,
.mission-evaluation-quit,
.mission-evaluation-reload {
  padding: 10px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm, 8px);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.mission-evaluation-submit {
  background: var(--accent, #2f6fed);
  color: #fff;
  border-color: transparent;
}
.mission-evaluation-next {
  background: var(--accent, #2f6fed);
  color: #fff;
  border-color: transparent;
}
.mission-evaluation-previous {
  background: var(--bg-card);
  color: inherit;
}
.mission-evaluation-previous:disabled,
.mission-evaluation-next:disabled,
.mission-evaluation-quit:disabled {
  opacity: 0.45;
  cursor: default;
}
.mission-evaluation-quit {
  background: var(--bg-card);
  color: inherit;
  white-space: nowrap;
}
.mission-evaluation-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--bg-card);
  color: inherit;
}
.mission-evaluation-flag[aria-pressed="true"] {
  border-color: #d9a029;
  color: #f3c45a;
  background: rgba(217, 160, 41, .12);
}
.mission-evaluation-icon-button:focus-visible,
.mission-evaluation-nav-question:focus-visible,
.mission-evaluation-actions button:focus-visible,
.mission-evaluation-option:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--accent, #77a1ff) 72%, white);
  outline-offset: 2px;
}
.mission-evaluation-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.mission-evaluation-reload {
  background: var(--bg-card);
  color: inherit;
}
.mission-evaluation-result {
  margin-top: 12px;
}
.mission-evaluation-diagnostic-result-title {
  margin: 0 0 12px;
  font-size: calc(1.05rem * var(--eval-text-scale));
}
.mission-evaluation-diagnostic-radar {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 320px;
  margin: 0 auto 16px;
}
.mission-evaluation-diagnostic-family-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.mission-evaluation-diagnostic-family-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-card);
  font-weight: 600;
}
/* Pre-existing bug found while working on this file: this rule's unconditional
   `display: flex` outranks the UA [hidden]{display:none} rule (author origin always wins
   over user-agent origin at equal specificity), so every real learner - not only an
   allowlisted UAT account after the triple-click reveal - was seeing this panel on every
   TEST_BETA attempt. The dedicated [hidden] guard below matches the same pattern already
   used for every other JS-toggled element in this file (e.g. .mission-evaluation-actions,
   .mission-evaluation-stopwatch). No authorization logic changes - the reset action itself
   was always server-gated by host + self + allowlist regardless of this panel's visibility. */
.mission-evaluation-uat-tools {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px dashed #e7ad3d;
  border-radius: 10px;
  background: rgba(231, 173, 61, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.mission-evaluation-uat-tools[hidden] { display: none !important; }
.mission-evaluation-uat-tools-title {
  margin: 0;
  font-size: calc(.78rem * var(--eval-text-scale));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #e7ad3d;
  flex-basis: 100%;
}
.mission-evaluation-uat-reset {
  background: #e7ad3d;
  color: #241a04;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: calc(.82rem * var(--eval-text-scale));
  font-weight: 600;
  cursor: pointer;
}
.mission-evaluation-uat-status {
  margin: 0;
  font-size: calc(.8rem * var(--eval-text-scale));
  flex-basis: 100%;
}
/* Pilot test-account score controls. Deliberately reuses the dashed-amber UAT
   language above so it never reads as ordinary learner functionality. */
.mission-evaluation-uat-scores { flex-basis: 100%; }
.mission-evaluation-uat-scores[hidden] { display: none !important; }
.mission-evaluation-uat-scores-title {
  margin: 8px 0 6px;
  font-size: calc(.76rem * var(--eval-text-scale));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #e7ad3d;
}
.mission-evaluation-uat-scores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}
.mission-evaluation-uat-score-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mission-evaluation-uat-score-field label {
  font-size: calc(.76rem * var(--eval-text-scale));
  font-weight: 600;
  color: inherit;
}
.mission-evaluation-uat-score-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid rgba(231, 173, 61, .55);
  border-radius: 7px;
  /* Theme-aware inset, NOT a hard-coded light surface: the field inherits the modal's
     text colour, so a white background left near-white text on white in dark mode. */
  background: var(--bg-inset);
  color: inherit;
  font-size: calc(.82rem * var(--eval-text-scale));
  font-variant-numeric: tabular-nums;
}
.mission-evaluation-uat-score-field input:focus-visible {
  outline: 2px solid #e7ad3d;
  outline-offset: 1px;
}
/* Shows which value the badge engine will actually evaluate, and whether it is the
   real calculated score or a test override. */
.mission-evaluation-uat-score-origin {
  margin: 0;
  font-size: calc(.68rem * var(--eval-text-scale));
  opacity: .85;
}
.mission-evaluation-uat-score-origin.is-override { color: #e7ad3d; font-weight: 600; }
.mission-evaluation-uat-scores-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.mission-evaluation-uat-apply,
.mission-evaluation-uat-clear {
  border-radius: 8px;
  padding: 6px 12px;
  font-size: calc(.82rem * var(--eval-text-scale));
  font-weight: 600;
  cursor: pointer;
}
.mission-evaluation-uat-apply { background: #e7ad3d; color: #241a04; border: none; }
.mission-evaluation-uat-clear {
  background: transparent;
  color: #e7ad3d;
  border: 1px solid rgba(231, 173, 61, .7);
}
.mission-evaluation-uat-apply[disabled],
.mission-evaluation-uat-clear[disabled] { opacity: .6; cursor: default; }
.mission-evaluation-uat-note {
  margin: 8px 0 0;
  font-size: calc(.72rem * var(--eval-text-scale));
  opacity: .85;
  flex-basis: 100%;
}
@media (max-width: 430px) {
  .mission-evaluation-uat-scores-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mission-evaluation-uat-scores-actions > button { flex: 1 1 100%; }
}
.mission-evaluation-progress {
  cursor: default;
  user-select: none;
}

.mission-replay-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.mission-replay-control[hidden], .mission-replay-control [hidden] { display: none; }
.mission-replay-control p { flex-basis: 100%; margin: 0; color: #e7ad3d; }

/* --- Score-calculation blocking state (G) --------------------------------- */
.mission-evaluation-calculating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 240px;
  padding: 24px 16px;
  text-align: center;
}
.mission-evaluation-calculating[hidden] { display: none; }
.mission-evaluation-calculating-spinner {
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  border: 3px solid color-mix(in srgb, var(--accent, #77a1ff) 24%, transparent);
  border-top-color: var(--accent, #77a1ff);
  border-radius: 50%;
  animation: learnerSpin 0.9s linear infinite;
}
.mission-evaluation-calculating-primary {
  margin: 0;
  font-size: calc(1.05rem * var(--eval-text-scale));
  font-weight: 800;
}
.mission-evaluation-calculating-secondary {
  margin: 0;
  font-size: calc(.88rem * var(--eval-text-scale));
  color: var(--text-muted);
}
.mission-evaluation-calculating.has-error .mission-evaluation-calculating-spinner,
.mission-evaluation-calculating.has-error .mission-evaluation-calculating-primary,
.mission-evaluation-calculating.has-error .mission-evaluation-calculating-secondary { display: none; }
.mission-evaluation-calculating-error { margin-top: 8px; }
.mission-evaluation-calculating-error[hidden] { display: none; }
.mission-evaluation-calculating-error p { margin: 0 0 10px; color: var(--diag-danger); font-weight: 600; }
.mission-evaluation-calculating-retry {
  padding: 10px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm, 8px);
  background: var(--accent, #2f6fed);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Reserved-space status text (D, F): both spans always occupy their box - only
   `visibility` toggles, never `display` - so save-status/completion-hint text never
   inserts or removes a row and the footer's height/position never shifts. */
.mission-evaluation-saving,
.mission-evaluation-completion-hint {
  display: block;
  min-height: 1.2em;
  font-size: calc(.78rem * var(--eval-text-scale));
  line-height: 1.2;
  color: var(--learner-muted, #9fb0c4);
  visibility: hidden;
}
.mission-evaluation-saving[data-state="saving"],
.mission-evaluation-saving[data-state="saved"],
.mission-evaluation-completion-hint[data-state="visible"] {
  visibility: visible;
}

.mission-evaluation-confirm-layer,
.mission-replay-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 8, 18, .78);
}
.mission-evaluation-confirm-layer[hidden], .mission-replay-modal[hidden] { display: none; }
.mission-evaluation-confirm-dialog,
.mission-replay-dialog {
  width: min(520px, 100%);
  max-height: min(680px, calc(100dvh - 32px));
  overflow: auto;
  padding: 24px;
  color: var(--learner-text, #f5f8fc);
  background: var(--learner-panel, #10233a);
  border: 1px solid rgba(117, 177, 230, .3);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
}
.mission-evaluation-confirm-dialog:focus,
.mission-replay-dialog:focus { outline: none; }
.mission-evaluation-confirm-dialog h2,
.mission-replay-dialog h2 { margin: 0 0 14px; }
.mission-evaluation-confirm-dialog p,
.mission-replay-dialog p { line-height: 1.55; }
.mission-evaluation-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.learner-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  pointer-events: none;
}
.learner-guide-shade {
  position: absolute;
  inset: 0;
  background: rgba(1, 6, 14, .72);
}
.learner-guide-spotlight {
  position: fixed;
  border: 3px solid #58d7ff;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(1, 6, 14, .72), 0 0 28px rgba(88, 215, 255, .62);
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}
.learner-guide-card {
  position: fixed;
  z-index: 1;
  width: min(360px, calc(100vw - 24px));
  max-height: min(520px, calc(100dvh - 24px));
  overflow: auto;
  padding: 18px;
  color: var(--learner-text, #f5f8fc);
  background: var(--learner-panel, #10233a);
  border: 1px solid rgba(117, 177, 230, .4);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
  pointer-events: auto;
}
.learner-guide-card::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 28px;
  width: 16px;
  height: 16px;
  background: inherit;
  border-left: 1px solid rgba(117, 177, 230, .4);
  border-top: 1px solid rgba(117, 177, 230, .4);
  transform: rotate(45deg);
}
.learner-guide-card h2 { margin: 0 0 8px; font-size: 1.15rem; }
.learner-guide-card p { margin: 0 0 12px; line-height: 1.5; }
.learner-guide-progress { color: var(--learner-muted, #9fb0c4); font-size: .78rem; }
.learner-guide-optout { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0; font-size: .88rem; }
.learner-guide-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.learner-guide-actions button { min-height: 40px; }
.learner-guide-target-active { position: relative; z-index: 1601 !important; }

@media (max-width: 680px) {
  .mission-evaluation-confirm-actions { flex-direction: column-reverse; }
  .mission-evaluation-confirm-actions button { width: 100%; }
  .learner-guide-card { bottom: 12px !important; left: 12px !important; top: auto !important; }
  .learner-guide-card::before { display: none; }
}

:root[data-theme="light"] body.learner-theme .mission-evaluation-confirm-dialog,
:root[data-theme="light"] body.learner-theme .mission-replay-dialog,
:root[data-theme="light"] body.learner-theme .learner-guide-card {
  color: #17253a;
  background: #fff;
  border-color: #c8d5e5;
}
.mission-evaluation-grade {
  font-weight: 700;
}
.mission-evaluation-submit-error {
  color: #d93025;
  font-weight: 600;
}
.mission-evaluation-review-note {
  opacity: 0.8;
  font-size: calc(13px * var(--eval-text-scale));
}
@media (max-width: 600px) {
  .mission-evaluation { padding: 12px; }
  .mission-evaluation-modal { align-items: end; padding: 0; }
  .mission-evaluation-dialog {
    width: 100%;
    height: min(92dvh, 820px);
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
  }
  .mission-evaluation-modal-head { padding: 14px 14px 10px; }
  .mission-evaluation-scroll-body { padding: 14px; }
  .mission-evaluation-actions {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  }
  /* Narrow viewports stack nav / lifecycle / status as full-width rows instead of the
     desktop 3-column layout - the lifecycle group stays centered via justify-content on
     its own full-width row, independent of the other rows' content. */
  .mission-evaluation-timer,
  .mission-evaluation-nav-group,
  .mission-evaluation-lifecycle-group,
  .mission-evaluation-status-group { grid-column: 1; justify-self: stretch; width: 100%; }
  .mission-evaluation-timer { text-align: center; }
  .mission-evaluation-nav-group .mission-evaluation-previous,
  .mission-evaluation-nav-group .mission-evaluation-flag,
  .mission-evaluation-nav-group .mission-evaluation-next { flex: 1 1 0; padding-inline: 8px; }
  .mission-evaluation-lifecycle-group { justify-content: center; }
  .mission-evaluation-status-group { align-items: center; text-align: center; }
  .mission-evaluation-flag [data-flag-label] { display: none; }
  .mission-evaluation-modal.is-expanded .mission-evaluation-dialog { height: 100dvh; max-height: 100dvh; }
}

/* The modal lives at body level and follows the same root data-theme contract
   as the rest of the learner application. Root attribute changes repaint it
   immediately, including while it is open. */
:root[data-theme="light"] body.learner-theme .mission-evaluation-modal {
  background: rgba(16, 34, 53, 0.28);
}

:root[data-theme="light"] body.learner-theme .mission-evaluation-dialog {
  box-shadow: 0 24px 70px rgba(17, 52, 84, 0.18);
}

.mission-intro-video-mia-fallback {
  margin-top: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: rgba(4, 12, 24, 0.92);
  padding: 14px;
}

.mission-intro-video-mia-fallback img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--r-md) - 4px);
}

.mission-intro-video-mia-title {
  margin: 12px 0 6px;
  font-weight: 700;
}

.mission-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-dim);
}

.mission-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
}

.mission-subtitle {
  margin: 6px 0 0;
  color: var(--text-muted);
}

.mission-status-row {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.mission-status-badge,
.mission-progress {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
}

.mission-refresh-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #ffd890;
}

.mission-refresh-indicator.is-clickable {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mission-refresh-indicator::before {
  content: none;
}

.mission-refresh-indicator.is-processing::before {
  content: '';
  width: 11px;
  height: 11px;
  border: 1.7px solid rgba(245, 185, 91, 0.24);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: learnerSpin 0.9s linear infinite;
}

.mission-status-badge[data-state="locked"] {
  border-color: rgba(210, 90, 80, 0.45);
  color: #ffb0a8;
}

.mission-status-badge[data-state="preview"] {
  border-color: rgba(255, 202, 79, 0.40);
  color: #ffe8a5;
}

.mission-lock-note,
.mission-lock-how,
.mission-error {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.mission-error {
  color: #ffb0a8;
}

.mission-error.mission-error--info {
  color: #9ce6ff;
}

.mission-section-title {
  margin: 0 0 12px;
  font-size: 18px;
}

.mission-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.mission-activity-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.mission-activity-title {
  margin: 0;
  font-size: 15px;
}

.mission-activity-meta {
  margin: 4px 0 0;
  color: var(--text-dim);
  font-size: 12px;
}

.mission-activity-link {
  border: 1px solid rgba(91, 210, 255, 0.55);
  color: var(--accent);
  text-decoration: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.mission-activity-unavailable,
.mission-empty {
  margin: 0;
  color: var(--text-dim);
  font-size: 12px;
}

.mission-launch-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 28px));
  z-index: 70;
  background: linear-gradient(160deg, rgba(10, 27, 50, 0.98), rgba(6, 18, 36, 0.98));
  border: 1px solid rgba(79, 216, 255, 0.28);
  border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgba(3, 10, 20, 0.66), var(--sh-float);
  backdrop-filter: blur(14px);
  padding: 18px 18px 16px;
}

.mission-launch-panel[hidden] { display: none !important; }

.mission-launch-panel-title {
  margin: 0 0 8px;
  padding-right: 34px;
  font-size: 20px;
  font-family: var(--font-display);
  color: var(--text-main);
  letter-spacing: 0.01em;
}

.mission-launch-panel-body {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.mission-launch-panel-status {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #9ce6ff;
}

.mission-launch-panel[data-loading="true"] .mission-launch-panel-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mission-launch-panel[data-loading="true"] .mission-launch-panel-status::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 1.7px solid rgba(79, 216, 255, 0.26);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: learnerSpin 0.9s linear infinite;
}

.mission-launch-panel-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mission-launch-panel-btn {
  border-radius: 999px;
  border: 1px solid var(--border-mid);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 13px;
  cursor: pointer;
}

.mission-launch-panel-btn--primary {
  border-color: rgba(79, 216, 255, 0.55);
  color: var(--accent);
  background: rgba(79, 216, 255, 0.1);
}

.mission-launch-panel-btn--ghost {
  color: var(--text-muted);
}

.mission-launch-panel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .mission-launch-panel {
    width: calc(100vw - 20px);
    padding: 14px 14px 13px;
  }

  .mission-launch-panel-title {
    font-size: 18px;
  }

  .mission-launch-panel-body,
  .mission-launch-panel-status {
    font-size: 13px;
  }
}

.refresh-debug-trigger:focus-visible {
  outline: 2px solid rgba(79,216,255,0.65);
  outline-offset: 2px;
}

.refresh-debug-trigger {
  cursor: text;
  text-decoration: none;
}

.refresh-debug-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(430px, calc(100vw - 20px));
  z-index: 60;
  background: rgba(8, 20, 40, 0.98);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-float);
  backdrop-filter: blur(12px);
}

.refresh-debug-panel.refresh-debug-panel--inline {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 10px);
  width: auto;
  z-index: 30;
}

.refresh-debug-panel[hidden] { display: none !important; }

.refresh-debug-panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--border-soft);
}

.refresh-debug-title {
  margin: 0;
  padding-right: 38px;
  font-size: 13px;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}

.refresh-debug-close,
.refresh-debug-copy {
  border: 1px solid var(--border-mid);
  background: rgba(255,255,255,0.03);
  color: var(--text-main);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
}

.refresh-debug-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.refresh-debug-copy { margin-top: 8px; }

.refresh-debug-panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
}

.refresh-debug-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.refresh-debug-row--stack {
  align-items: stretch;
  flex-direction: column;
}

.refresh-debug-label {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}

.refresh-debug-value {
  font-size: 12px;
  color: var(--text-main);
  text-align: right;
  word-break: break-word;
}

.refresh-debug-response {
  margin: 0;
  padding: 8px 9px;
  max-height: 160px;
  overflow: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: rgba(0, 0, 0, 0.26);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.refresh-debug-meta {
  margin: 0;
  color: var(--text-dim);
  font-size: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .parcours-spinner,
  .learner-inline-spinner,
  .btn-secondary.is-loading::before,
  .career-refresh-indicator::before,
  .mission-refresh-indicator::before,
  .career-node-refresh-ring,
  .mia-avatar-status.is-syncing::before,
  #career-map-svg .career-core-node--pulse,
  #career-map-svg .career-core-node-visual-shell,
  #career-map-svg .career-core-node-visual {
    animation: none !important;
  }
  #career-map-svg .career-core-node--pulse {
    opacity: 0.96;
    transform: none !important;
  }
  #career-map-svg .career-core-node-visual {
    filter: none !important;
  }
  #career-map-svg .career-core-node--backglow {
    opacity: 0.64 !important;
    filter: blur(14px) brightness(1.08) !important;
  }
  #career-map-svg .career-core-node-visual-shell {
    filter: drop-shadow(0 0 26px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.26))
      drop-shadow(0 0 54px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.14)) !important;
  }
}

/* ============================================================
   DASHBOARD-SPECIFIC MIA FLOAT
   ============================================================ */

.mia-float-btn--dashboard {
  display: flex;
  left: auto;
  right: 16px;
  bottom: 16px;
  width: 58px;
  height: 58px;
  z-index: 250;
}

.mia-float-panel--dashboard {
  display: block;
  left: auto;
  right: 16px;
  bottom: 84px;
  width: 242px;
}

.dashboard-mia-link-wrap {
  margin: 10px 0 0;
}

.dashboard-mia-link-wrap .btn-secondary {
  width: 100%;
  justify-content: center;
}

@media (max-width: 900px) {
  .mia-float-btn--dashboard {
    right: 12px;
    left: auto;
    bottom: 18px;
  }
  .dashboard-page {
    padding-bottom: 126px;
  }
  .mia-float-panel--dashboard {
    right: 12px;
    left: auto;
    bottom: 92px;
    width: min(236px, calc(100vw - 24px));
  }
}

/* ============================================================
   FINAL LIGHT-MODE OVERRIDES (late cascade winners)
   ============================================================ */

:root[data-theme="light"] body.learner-theme #dashboard-progress.db-kpi-value.db-kpi-value--hero {
  color: #0e4d72 !important;
  -webkit-text-fill-color: #0e4d72 !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

:root[data-theme="light"] body.learner-theme .topbar-avatar[data-account-avatar="1"],
:root[data-theme="light"] body.learner-theme #topbar-avatar.topbar-avatar {
  background: linear-gradient(145deg, #edf6ff, #dfeefe) !important;
  border-color: rgba(25, 87, 135, 0.34) !important;
  color: #0f5f88 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 8px rgba(17, 51, 84, 0.12) !important;
}

:root[data-theme="light"] body.learner-theme .topbar-avatar[data-account-avatar="1"]:hover,
:root[data-theme="light"] body.learner-theme .topbar-avatar[data-account-avatar="1"]:focus-visible,
:root[data-theme="light"] body.learner-theme .topbar-avatar[data-account-avatar="1"].is-open {
  background: linear-gradient(145deg, #e6f2ff, #d6e9fb) !important;
  border-color: rgba(21, 120, 167, 0.48) !important;
  color: #0e4d72 !important;
}

/* Mia mobile: keep restored ring/avatar design; only lighten inner dark center. */
:root[data-theme="light"] body.learner-theme .mobile-bottomnav-item--mia::before {
  background:
    radial-gradient(circle, rgba(236, 246, 255, 0.98) 55%, transparent 55%),
    conic-gradient(
      rgba(79, 216, 255, 0.70) 0deg,
      rgba(94, 224, 160, 0.55) 90deg,
      rgba(79, 216, 255, 0.70) 200deg,
      rgba(79, 216, 255, 0.30) 280deg,
      rgba(79, 216, 255, 0.70) 360deg
    ) !important;
}

:root[data-theme="light"] body.learner-theme .mobile-bottomnav-mia-img {
  background: rgba(236, 246, 255, 0.98) !important;
}

:root[data-theme="light"] body.learner-theme .mia-feedback-panel textarea,
:root[data-theme="light"] body.learner-theme .mia-support-reply-box textarea {
  background: #ffffff !important;
  color: #163a58 !important;
  border-color: rgba(25, 87, 135, 0.30) !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-ticket-box,
:root[data-theme="light"] body.learner-theme .mia-support-msg {
  background: rgba(244, 250, 255, 0.99) !important;
  border-color: rgba(25, 87, 135, 0.26) !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-msg-head,
:root[data-theme="light"] body.learner-theme .mia-support-status {
  color: #496a87 !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-msg-body,
:root[data-theme="light"] body.learner-theme .mia-support-admin-reply {
  color: #163a58 !important;
}

:root[data-theme="light"] body.learner-theme .mission-intro-video,
:root[data-theme="light"] body.learner-theme .mission-intro-fallback {
  background: rgba(248, 252, 255, 0.98) !important;
  border-color: rgba(25, 87, 135, 0.24) !important;
}

:root[data-theme="light"] body.learner-theme .mission-intro-video-player,
:root[data-theme="light"] body.learner-theme .mission-intro-video-mia-fallback {
  background: rgba(237, 247, 255, 0.99) !important;
  border-color: rgba(25, 87, 135, 0.28) !important;
  box-shadow: 0 2px 12px rgba(14, 52, 82, 0.08) !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-archives-modal {
  background: rgba(11, 34, 56, 0.24) !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-archives-card {
  background: #ffffff !important;
  border-color: rgba(25, 87, 135, 0.28) !important;
  box-shadow: 0 8px 26px rgba(17, 52, 84, 0.14) !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-archives-title,
:root[data-theme="light"] body.learner-theme .mia-support-archives-empty {
  color: #1e4d70 !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-archives-close {
  background: transparent !important;
  border-color: rgba(25, 87, 135, 0.28) !important;
  color: #1c4f73 !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-archives-close:hover {
  background: rgba(226, 240, 252, 0.98) !important;
  border-color: rgba(21, 120, 167, 0.40) !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-archive-ticket {
  background: rgba(244, 250, 255, 0.99) !important;
  border-color: rgba(25, 87, 135, 0.24) !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-archives-link {
  color: #0f6f9a !important;
}
.mission-component-progress {
  margin: 1rem 0 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border-panel);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--sh-card);
}

.mission-component-progress-head,
.mission-component-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mission-component-progress-head {
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border-soft);
}

.mission-component-progress-head .mission-section-title {
  margin: 0;
}

.mission-component-row {
  padding: .65rem 0 0;
  color: var(--text-main);
  font-size: .9rem;
}

.mission-component-row[hidden] {
  display: none !important;
}

.mission-component-row [data-component-state] {
  color: var(--text-muted);
  font-weight: 700;
  text-align: right;
}

/* ==========================================================================
   Native TEST_BETA — presentation modes, count-up stopwatch UX, gamified deck
   Scoped to the evaluation modal; nothing here affects an ordinary Mission
   Évaluation, which never renders the gamified elements at all.
   ========================================================================== */

/* --- Presentation choice (pre-start, diagnostic only) --------------------- */
.mission-evaluation-mode-choice { margin-top: 16px; }
.mission-evaluation-mode-choice[hidden] { display: none; }
.mission-evaluation-mode-choice h3 {
  margin: 0 0 10px;
  font-size: calc(.95rem * var(--eval-text-scale));
  font-weight: 800;
}
.mission-evaluation-mode-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.mission-evaluation-mode-option {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "icon copy";
  align-items: start;
  gap: 2px 12px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md, 12px);
  background: var(--bg-card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mission-evaluation-mode-option:hover { transform: translateY(-1px); }
.mission-evaluation-mode-option.is-selected {
  border-color: var(--accent, #77a1ff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #77a1ff) 32%, transparent);
}
.mission-evaluation-mode-option:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent, #77a1ff) 72%, white);
  outline-offset: 2px;
}
.mission-evaluation-mode-option-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-muted);
}
.mission-evaluation-mode-option-icon svg { width: 100%; height: 100%; }
.mission-evaluation-mode-option.is-selected .mission-evaluation-mode-option-icon { color: var(--accent, #77a1ff); }
.mission-evaluation-mode-option-title { grid-area: title; font-weight: 800; }
.mission-evaluation-mode-option-copy {
  grid-area: copy;
  font-size: calc(.84rem * var(--eval-text-scale));
  color: var(--text-muted);
}

/* --- Missing required answers feedback ------------------------------------ */
.mission-evaluation-missing {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--diag-danger) 55%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--diag-danger) 12%, transparent);
  color: var(--text-main);
  font-weight: 700;
}
.mission-evaluation-missing[hidden] { display: none; }
.mission-evaluation-question.is-missing-required legend::after {
  content: ' • réponse manquante';
  color: var(--diag-danger);
  font-weight: 700;
  font-size: .82rem;
}

/* --- Gamified: no-scroll layout --------------------------------------------
   The whole interactive state (scenario nav → scene → card → prop. controls → bottom bar)
   is sized to fit the modal's own viewport at every supported breakpoint - not scrolled,
   not clipped. The scroll-body becomes a flex column scoped to .is-gamified only;
   traditional mode keeps its ordinary scrolling form untouched. overflow:hidden here is a
   backstop, not the fix - the fix is the sizing below (fixed card + trimmed chrome), proven
   by fitting the longest of the 33 authoritative scene descriptions and 193 propositions
   (see test-beta-gamified-fixed-card-layout.test.js). */
.mission-evaluation-modal.is-gamified .mission-evaluation-scroll-body {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 10px;
  padding-bottom: 8px;
}
.mission-evaluation-modal.is-gamified .mission-evaluation-uat-tools {
  flex: 0 0 auto;
}
/* The head's own progress line ("SITUATION N SUR 33") would otherwise duplicate the scene
   index below it - hidden here only; traditional mode still shows it. */
.mission-evaluation-modal.is-gamified .mission-evaluation-progress { display: none; }
/* A floating toast, not a flow element: the missing-answer notice appears only after a
   refused submission and is transient, so it must never permanently reserve (or suddenly
   take) space from the scene/card/control budget at any breakpoint - especially short
   landscape viewports, where that budget has no slack to give. */
.mission-evaluation-modal.is-gamified .mission-evaluation-missing {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 4px;
  z-index: 4;
  margin: 0;
  padding: 6px 10px;
  font-size: .78rem;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
}

/* --- Gamified: the scene stays put directly under the navigation ---------- */
.mission-evaluation-scene {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: -14px -4px 12px;
  padding: 12px 4px 10px;
  background: var(--bg-panel-strong);
  border-bottom: 1px solid var(--border-soft);
}
.mission-evaluation-scene[hidden] { display: none; }
/* Stacked (index above, text below) by default: the index label ("SITUATION 8 SUR 33")
   is wide enough that putting it on the SAME row as the text (tried and measured) starves
   the text column down to a narrow strip and forces far MORE wrapped lines than stacking
   costs in its one extra line - net worse on portrait/default widths. The single-line
   variant is reintroduced ONLY for the short-landscape tier below, where width is abundant
   and height is what's scarce. */
.mission-evaluation-modal.is-gamified .mission-evaluation-scene {
  position: static;
  flex: 0 0 auto;
  margin: 0 0 8px;
  padding: 0 0 8px;
}
.mission-evaluation-scene-index {
  margin: 0 0 4px;
  font-size: calc(11px * var(--eval-text-scale));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent, #77a1ff);
}
/* Fixed footprint in gamified mode only (see fitGamifiedSceneText in learner-mission.js) -
   the longest of the 33 authoritative scene descriptions is proven to fit here without
   scrolling or truncation. Traditional mode never shows this block at all. */
.mission-evaluation-modal.is-gamified .mission-evaluation-scene-text-wrap {
  min-width: 0;
  max-height: var(--eval-scene-text-h, 120px);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.mission-evaluation-scene-text {
  margin: 0;
  width: 100%;
  font-style: italic;
  line-height: 1.32;
  /* font-size is set inline, in gamified mode, by fitGamifiedSceneText(); this value is
     only the traditional-mode/first-paint fallback. */
  font-size: calc(.92rem * var(--eval-text-scale));
}

/* --- Gamified: one response card at a time -------------------------------- */
.mission-evaluation-gamified {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}
.mission-evaluation-gamified[hidden] { display: none; }
.eval-swipe-meta {
  margin: 0;
  flex: 0 0 auto;
  font-size: calc(12px * var(--eval-text-scale));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.eval-swipe-deck {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Fixed footprint per breakpoint (see media queries below) - identical for every one of
   the 193 propositions regardless of text length. It never grows/shrinks with content;
   fitGamifiedCardStemText() (learner-mission.js) adjusts only the TEXT size within it. */
.eval-swipe-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(360px, 100%);
  height: var(--eval-card-h, 230px);
  padding: 18px 20px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--bg-card);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
  overflow: hidden;
  will-change: transform;
}
.eval-swipe-card.is-dragging { cursor: grabbing; }
.eval-swipe-card.is-settling { transition: transform .22s ease, opacity .22s ease; }
.eval-swipe-card.is-exiting { transition: transform .3s ease, opacity .3s ease; opacity: 0; }
/* The measured text-fit target: fills whatever room is left once the fixed-height
   answered-status line below is accounted for, and centers the proposition both ways. */
.eval-swipe-card-stem-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.eval-swipe-card-stem {
  margin: 0;
  width: 100%;
  text-align: center;
  font-weight: 600;
  line-height: 1.32;
  /* font-size is set inline, per-card, by fitGamifiedCardStemText(); this is only the
     first-paint fallback before that runs. */
  font-size: calc(1rem * var(--eval-text-scale));
}
/* Fixed-height regardless of state (empty until answered), so the card footprint never
   changes when the learner answers. */
.eval-swipe-card-answered {
  flex: 0 0 auto;
  margin: 6px 0 0;
  min-height: 1.2em;
  font-size: calc(.82rem * var(--eval-text-scale));
  font-weight: 700;
  text-align: center;
}
.eval-swipe-card-answered[data-semantic="appropriate"] { color: var(--diag-success); }
.eval-swipe-card-answered[data-semantic="inappropriate"] { color: var(--diag-danger); }
.eval-swipe-feedback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
}
/* An opaque card-coloured panel tinted by semantic, so the large mark and its label read
   cleanly over the question text while the card is being dragged, in either theme. */
.eval-swipe-feedback { background: var(--bg-card); }
.eval-swipe-feedback[data-semantic="inappropriate"] { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--diag-danger) 20%, transparent); }
.eval-swipe-feedback[data-semantic="appropriate"] { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--diag-success) 20%, transparent); }
.eval-swipe-feedback-mark {
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
}
.eval-swipe-feedback[data-semantic="inappropriate"] .eval-swipe-feedback-mark { color: var(--diag-danger); }
.eval-swipe-feedback[data-semantic="appropriate"] .eval-swipe-feedback-mark { color: var(--diag-success); }
.eval-swipe-feedback-label {
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-main);
}
.eval-swipe-feedback-hint {
  font-size: .8rem;
  font-weight: 700;
  opacity: .9;
  text-align: center;
  color: var(--text-main);
}
/* Transient "situation complète" cue: an overlay on the deck, never a flow element, so it
   can never move the fixed card or the control row beneath it. */
.eval-swipe-complete {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--diag-success) 22%, var(--bg-panel-strong));
  border: 1px solid color-mix(in srgb, var(--diag-success) 55%, transparent);
  color: var(--text-main);
  font-weight: 700;
  font-size: .8rem;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}

/* --- Gamified: answer controls only ----------------------------------------
   ✕ Non approprié | ✓ Approprié. Proposition and scene progression are driven by
   the answer flow, so no competing previous/next arrows are exposed here. */
.eval-swipe-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
}
.eval-swipe-ctrl-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 64px;
}
.eval-swipe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border: 2.5px solid var(--border-soft);
  border-radius: 50%;
  background: var(--bg-card);
  color: inherit;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.eval-swipe-btn:hover { transform: translateY(-2px); }
.eval-swipe-btn:active { transform: translateY(0); }
.eval-swipe-btn-mark {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}
.eval-swipe-btn--answer[data-semantic="inappropriate"] { border-color: color-mix(in srgb, var(--diag-danger) 65%, transparent); }
.eval-swipe-btn--answer[data-semantic="inappropriate"] .eval-swipe-btn-mark { color: var(--diag-danger); }
.eval-swipe-btn--answer[data-semantic="appropriate"] { border-color: color-mix(in srgb, var(--diag-success) 65%, transparent); }
.eval-swipe-btn--answer[data-semantic="appropriate"] .eval-swipe-btn-mark { color: var(--diag-success); }
.eval-swipe-btn--answer[aria-pressed="true"][data-semantic="inappropriate"] {
  background: color-mix(in srgb, var(--diag-danger) 18%, var(--bg-card));
  border-color: var(--diag-danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--diag-danger) 24%, transparent), 0 8px 20px rgba(0, 0, 0, .18);
}
.eval-swipe-btn--answer[aria-pressed="true"][data-semantic="appropriate"] {
  background: color-mix(in srgb, var(--diag-success) 18%, var(--bg-card));
  border-color: var(--diag-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--diag-success) 24%, transparent), 0 8px 20px rgba(0, 0, 0, .18);
}
.eval-swipe-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent, #77a1ff) 72%, white);
  outline-offset: 3px;
}

/* --- Scene-change cue -------------------------------------------------------
   Deliberately a dark, near-opaque scrim regardless of theme: it is a brief attention
   interrupt ("you have entered a new situation"), not a themed panel, so it stays legible
   and obviously dominant over light-mode content too rather than fading into a white
   background. It covers the whole dialog (head, scene, deck, footer), which is what does
   the "current content dims" part of the job - nothing beneath it needs a separate dim
   state. ~800ms total, within the requested 500-900ms window. */
.mission-evaluation-scene-cue {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(4, 9, 18, .92) 0%, rgba(4, 9, 18, .82) 45%, rgba(4, 9, 18, 0) 78%);
  backdrop-filter: blur(2px);
  animation: eval-scene-cue .8s cubic-bezier(.22, .8, .3, 1) forwards;
}
.mission-evaluation-scene-cue[hidden] { display: none; }
.mission-evaluation-scene-cue-kicker {
  font-size: .92rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--accent, #77a1ff);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.mission-evaluation-scene-cue-index {
  font-size: 2.1rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .65);
}
@keyframes eval-scene-cue {
  0%   { opacity: 0; transform: scale(.86); }
  18%  { opacity: 1; transform: scale(1.02); }
  30%  { transform: scale(1); }
  72%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}
/* Non-animated equivalent for prefers-reduced-motion: a clear, instant state change
   (shown, then removed by JS after a shorter hold) rather than a moving transition. */
@media (prefers-reduced-motion: reduce) {
  .mission-evaluation-scene-cue { animation: none !important; opacity: 1; }
}

/* --- Completed result: family title under each percentage ----------------- */
.mission-evaluation-diagnostic-family-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 12px;
}
.mission-evaluation-diagnostic-family-key { font-weight: 800; }
.mission-evaluation-diagnostic-family-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.mission-evaluation-diagnostic-family-label {
  grid-column: 1 / -1;
  font-weight: 500;
  font-size: calc(.86rem * var(--eval-text-scale));
  color: var(--text-muted);
}

/* --- Mobile / gamified layout -------------------------------------------- */
@media (max-width: 600px) {
  .mission-evaluation-modal-head { padding-left: max(14px, env(safe-area-inset-left)); }
  .mission-evaluation-stopwatch { min-width: 0; padding: 2px 0 0; }
  .mission-evaluation-stopwatch-label { font-size: calc(9px * var(--eval-text-scale)); }
  .mission-evaluation-stopwatch-value { font-size: calc(13px * var(--eval-text-scale)); }
  .mission-evaluation-modal-head h2 { font-size: calc(.95rem * var(--eval-text-scale)); }
  /* Structural columns/stacking for .mission-evaluation-actions at this breakpoint are
     already set by the shared ≤600px rule above (single column, full-width nav/lifecycle/
     status rows) - this block only adds gamified-specific spacing/sizing on top. */
  .mission-evaluation-actions { row-gap: 8px; }
  .mission-evaluation-quit { font-size: calc(.86rem * var(--eval-text-scale)); }
  .mission-evaluation-mode-options { grid-template-columns: 1fr; }
  /* Fixed gamified footprints for this breakpoint - identical for all 33 scene
     descriptions / 193 propositions; only the TEXT size inside each adapts (see
     fitGamifiedSceneText / fitGamifiedCardStemText). */
  .eval-swipe-card { --eval-card-h: 150px; padding: 6px 16px; }
  .mission-evaluation-scene-text-wrap { --eval-scene-text-h: 120px; }
  .eval-swipe-feedback-mark { font-size: 52px; }
  .mission-evaluation-gamified { gap: 6px; }
  .eval-swipe-meta { font-size: calc(10.5px * var(--eval-text-scale)); margin-bottom: -2px; }
  .eval-swipe-controls { gap: 12px; }
  /* Gamified-only head/footer trims (traditional mode's head/footer sizing is untouched) -
     reclaims room for the fixed scene/card budget above. */
  .mission-evaluation-modal.is-gamified .mission-evaluation-modal-head { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .mission-evaluation-modal.is-gamified .mission-evaluation-icon-button { width: 30px; height: 30px; font-size: 16px; }
  .mission-evaluation-modal.is-gamified .mission-evaluation-close { font-size: 21px; }
  .mission-evaluation-modal.is-gamified .mission-evaluation-nav-question { flex-basis: 26px; width: 26px; height: 26px; }
  .mission-evaluation-modal.is-gamified .mission-evaluation-actions { padding-top: 8px; }
  .eval-swipe-btn { width: 44px; height: 44px; }
  .eval-swipe-btn-mark { font-size: 19px; }
  .eval-swipe-card-answered { min-height: .95em; margin-top: 2px; font-size: calc(.78rem * var(--eval-text-scale)); }
  /* Gamified mobile gets a little more of the viewport than the shared bottom-sheet
     default - traditional mode's dialog height is untouched. :not(.is-expanded) so
     fullscreen's own 100dvh rule always wins regardless of the two rules' source order
     (equal specificity otherwise - source order would be fragile here). */
  .mission-evaluation-modal.is-gamified:not(.is-expanded) .mission-evaluation-dialog {
    height: min(99dvh, 860px);
    max-height: 99dvh;
  }
  .mission-evaluation-modal.is-gamified .mission-evaluation-scroll-body { padding: 6px 12px 4px; }
}

/* Landscape phones: the card must never grow past the viewport and hide the action bar. */
@media (max-height: 520px) {
  .eval-swipe-card { --eval-card-h: 124px; padding: 4px 16px; }
  .mission-evaluation-scene-text-wrap { --eval-scene-text-h: 68px; }
  .eval-swipe-feedback-mark { font-size: 32px; }
  .eval-swipe-btn { width: 38px; height: 38px; }
  .eval-swipe-btn-mark { font-size: 16px; }
  .eval-swipe-controls { gap: 10px; }
  /* The redundant "Question X sur Y" meta line is hidden - the scene index already
     orients the learner. */
  .eval-swipe-card-answered { min-height: .9em; margin-top: 1px; font-size: calc(.74rem * var(--eval-text-scale)); }
  .mission-evaluation-gamified { gap: 3px; }
  /* Every other chrome element in the dialog is trimmed too, to give the card genuine
     room: smaller close/fullscreen icons, tighter head row gap, smaller nav circles,
     tighter footer buttons. The close/fullscreen cluster keeps its own grid area/position -
     only its own size shrinks. */
  .mission-evaluation-modal-head {
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: 4px;
    gap: 4px 10px;
  }
  .mission-evaluation-modal-head h2 { font-size: calc(.86rem * var(--eval-text-scale)); margin-top: 0; }
  .mission-evaluation-icon-button { width: 28px; height: 28px; font-size: 15px; }
  .mission-evaluation-close { font-size: 20px; }
  .mission-evaluation-window-actions { gap: 3px; }
  .mission-evaluation-navigator { gap: 4px; padding: 1px 1px 2px; }
  .mission-evaluation-nav-question { flex-basis: 22px; width: 22px; height: 22px; font-size: 9px; }
  .mission-evaluation-actions button { padding-top: 4px; padding-bottom: 4px; }
  /* Short landscape only: index and text share ONE line (index is narrow width here isn't
     scarce, height is), unlike the stacked default - flex-start, not baseline, since the
     two children have different line-heights and baseline inserted a gap above the
     shorter one instead of stacking them tightly. */
  .mission-evaluation-modal.is-gamified .mission-evaluation-scene {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 3px;
    padding-bottom: 3px;
  }
  /* Short landscape only: the index sits BESIDE the scene text rather than above it, so any
     growth here is taken directly out of the text column's width and can push the (already
     floor-sized) description past its fixed box. It is a positional chip in this tier, not
     reading text, so it deliberately does not follow --eval-text-scale here - the scene text
     itself still does. */
  .mission-evaluation-scene-index { flex: 0 0 auto; margin-bottom: 0; font-size: 9.5px; white-space: nowrap; }
  .mission-evaluation-modal.is-gamified .mission-evaluation-scene-text-wrap { flex: 1 1 auto; }
  .mission-evaluation-modal.is-gamified .eval-swipe-meta { display: none; }
  .mission-evaluation-actions { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  /* This tier is reached by width-wide/height-short landscape phones that the ≤600px WIDTH
     query above never touches - it needs the same dialog-height/scroll-body-padding
     reclaim, just via height instead of width. :not(.is-expanded) so fullscreen's own
     100dvh rule always wins regardless of source order (see the ≤600px width rule above
     for the same guard and why). */
  .mission-evaluation-modal.is-gamified:not(.is-expanded) .mission-evaluation-dialog {
    height: min(820px, calc(100dvh - 10px));
    max-height: calc(100dvh - 10px);
  }
  .mission-evaluation-modal.is-gamified .mission-evaluation-scroll-body { padding: 5px 12px 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .eval-swipe-card,
  .eval-swipe-card.is-settling,
  .eval-swipe-card.is-exiting { transition: none !important; }
  /* .mission-evaluation-scene-cue reduced-motion rule lives with its base definition above. */
  .mission-evaluation-mode-option { transition: none !important; }
  .mission-evaluation-mode-option:hover { transform: none !important; }
}

/* ==========================================================================
   Career Mode — native TEST_BETA direct-launch overlay
   The central Diagnostic node opens the real, unmodified mission page
   (?embedded=1) inside a same-origin iframe rather than navigating away from
   Career Mode. This overlay only positions/fills the iframe - the diagnostic
   modal's own fullscreen ("is-expanded") state and every other rule above
   fully applies unchanged inside it.
   ========================================================================== */
.career-native-diagnostic-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(4, 10, 22, 0.72);
}
.career-native-diagnostic-overlay[hidden] { display: none; }
.career-native-diagnostic-overlay iframe {
  display: block;
  width: 100dvw;
  height: 100dvh;
  border: 0;
}
.career-native-diagnostic-overlay iframe[hidden] { display: none; }
.career-native-diagnostic-status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--bg-panel-strong);
  color: var(--text-main);
  text-align: center;
}
.career-native-diagnostic-status[hidden] { display: none; }
.career-native-diagnostic-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  background: var(--bg-panel-strong);
  color: var(--text-main);
  font-size: 24px;
  cursor: pointer;
}
.career-native-diagnostic-close[hidden] { display: none; }
.career-native-diagnostic-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.diagnostic-embedded .app-shell,
.diagnostic-embedded .mobile-bottomnav,
.diagnostic-embedded .mia-float-btn,
.diagnostic-embedded .mia-float-panel { visibility: hidden; }

.mission-progression-modal {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4, 10, 22, .72);
}
.mission-progression-modal[hidden] { display: none; }
.mission-progression-dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 30px;
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  background: var(--bg-panel-strong);
  color: var(--text-main);
  box-shadow: 0 20px 64px rgba(0, 0, 0, .5);
}
.mission-progression-dialog h2 { margin: 0 0 14px; }
.mission-progression-dialog p { white-space: pre-line; line-height: 1.5; }
.mission-progression-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.mission-progression-actions button[hidden] { display: none; }
.mission-progression-dialog:focus { outline: none; }
.mission-progression-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mission-progression-confetti span {
  position: absolute;
  top: -20px;
  left: var(--confetti-left);
  width: 7px;
  height: 12px;
  background: var(--confetti-color);
  animation: missionConfetti 2.2s ease-out forwards;
  animation-delay: var(--confetti-delay);
}
@keyframes missionConfetti {
  to { transform: translateY(360px) rotate(540deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mission-progression-confetti { display: none; }
}
@media (max-width: 680px) {
  /* Phone grid tracks must shrink below the topbar's intrinsic text width. */
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-topbar,
  .app-content { min-width: 0; }
  .app-topbar { gap: 8px; }
  .app-topbar .topbar-left { flex: 1 1 0%; gap: 6px; }
  .app-topbar .topbar-page-title {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app-topbar .topbar-right { flex: 0 1 auto; }
  .app-topbar .account-avatar-host,
  .app-topbar .topbar-icon-btn { flex-shrink: 0; }
  /* Direct text needs a block ellipsis; reserve space for the status dot. */
  :root .app-topbar .learner-page-status-badge,
  .app-topbar #learner-page-status-badge-career {
    display: block;
    position: relative;
    min-width: 30px;
    max-width: 40vw;
    padding-left: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :root .app-topbar .learner-page-status-badge::before {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  /* Keep legacy refresh reachable without its single-line width requirement. */
  .app-topbar #mission-progress-refresh-btn,
  .app-topbar #learner-dashboard-refresh-btn {
    min-width: 0;
    max-width: 128px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Respect native/preview runtime intent despite .btn-secondary's display. */
  .app-topbar #mission-progress-refresh-btn[hidden] { display: none; }
}
@media (max-width: 400px) {
  /* Keep the status dot, accessible label and diagnostic tap target. */
  :root .app-topbar .learner-page-status-badge,
  .app-topbar #learner-page-status-badge-career {
    font-size: 0;
    letter-spacing: 0;
    gap: 0;
    padding: 8px;
    min-width: 30px;
    min-height: 30px;
    flex-shrink: 0;
  }
  :root .app-topbar .learner-page-status-badge::before {
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .app-topbar #mission-progress-refresh-btn,
  .app-topbar #learner-dashboard-refresh-btn { max-width: 96px; }
}

/* Anchored phone fallback for targets that cannot clear the bottom sheet. */
@media (max-width: 680px) {
  .learner-guide-overlay--anchored.learner-guide-overlay--top-sheet .learner-guide-card {
    top: var(--learner-guide-sheet-top) !important;
    bottom: auto !important;
  }
}
/* O-mission-layout adapts only the learner mission detail shell. */
body.o-mission-layout .mission-layout {
  display: block;
}
body.o-mission-layout .mission-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 56rem;
  min-width: 0;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
body.o-mission-layout .mia-side-panel {
  display: none !important;
}
body.o-mission-layout .mission-header,
body.o-mission-layout .mission-component-progress,
body.o-mission-layout .mission-intro-video,
body.o-mission-layout .mission-intro-fallback,
body.o-mission-layout .mission-evaluation,
body.o-mission-layout .mission-activities {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
}
body.o-mission-layout .mission-header {
  padding-top: 1rem !important;
  padding-bottom: 1.5rem !important;
}
body.o-mission-layout .mission-intro-video,
body.o-mission-layout .mission-intro-fallback,
body.o-mission-layout .mission-evaluation,
body.o-mission-layout .mission-activities {
  padding-block: 1.4rem !important;
  border-top: 1px solid var(--border-soft) !important;
}
body.o-mission-layout .mission-component-progress {
  padding-block: 1rem !important;
  border-top: 1px solid var(--border-soft) !important;
}
body.o-mission-layout .mission-intro-video-player,
body.o-mission-layout .mission-intro-video-mia-fallback {
  border-radius: 0;
}
body.o-mission-layout .mia-float-btn--dashboard {
  display: flex !important;
  z-index: 70;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body.o-mission-layout .mia-float-panel--dashboard {
  display: block;
  z-index: 69;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
body.o-mission-layout .mia-float-panel--dashboard[hidden] {
  display: none !important;
}
body.o-mission-layout .mission-header,
body.o-mission-layout .mission-component-progress,
body.o-mission-layout .mission-intro-video,
body.o-mission-layout .mission-intro-fallback,
body.o-mission-layout .mission-evaluation,
body.o-mission-layout .mission-activities {
  animation: o-mission-section-in 850ms ease-out both;
}
body.o-mission-layout .mission-component-progress { animation-delay: 80ms; }
body.o-mission-layout .mission-intro-video,
body.o-mission-layout .mission-intro-fallback { animation-delay: 150ms; }
body.o-mission-layout .mission-evaluation { animation-delay: 220ms; }
body.o-mission-layout .mission-activities { animation-delay: 290ms; }
@keyframes o-mission-section-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 901px) {
  body.o-mission-layout .mission-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  body.o-mission-layout .mia-float-panel--dashboard {
    bottom: calc(var(--mobile-bottomnav-h) + var(--mobile-safe-bottom) + 4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.o-mission-layout .mission-header,
  body.o-mission-layout .mission-component-progress,
  body.o-mission-layout .mission-intro-video,
  body.o-mission-layout .mission-intro-fallback,
  body.o-mission-layout .mission-evaluation,
  body.o-mission-layout .mission-activities {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* Programmatic focus for non-interactive screen reader context has no selection ring. */
[tabindex="-1"]:not(a, button, input, select, textarea, summary, [role="option"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"], [role="tab"], [role="radio"], [role="checkbox"], [role="switch"], [role="treeitem"], [role="gridcell"], [role="link"], [role="button"]):focus,
[tabindex="-1"]:not(a, button, input, select, textarea, summary, [role="option"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"], [role="tab"], [role="radio"], [role="checkbox"], [role="switch"], [role="treeitem"], [role="gridcell"], [role="link"], [role="button"]):focus-visible {
  outline: none;
}

/* P-m121: progress refreshes on page load, so learner pages show no manual
   « Actualiser ma progression » button and no « À jour » badge. Elements stay in
   the DOM for the page scripts; loading, pending and error states stay visible. */
#home-progress-refresh-btn,
#learner-dashboard-refresh-btn,
#career-progress-refresh-btn,
#mission-progress-refresh-btn,
.learner-page-status-badge.learner-page-status-badge--ok { display: none !important; }

/* P-m113: the unread dot sits on the floating Mia bubble's top-right edge, not on her face.
   Without a position it was flex-centred inside the 64px bubble (career page). */
.mia-float-btn > .mia-unread-badge { position: absolute; top: 2px; right: 2px; z-index: 2; }