:root {
  --bg: #F8F9FA;
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --accent: #4A7C59;
  --accent-alt: #4C6EF5;
  --warning: #D97706;
  --card-bg: #FFFFFF;
  --border: #E2E8F0;

  --font-sans: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --stroke: 1.5px;

  /* Formalizes curves already in use ad hoc: --ease-bounce and --ease-gauge
     were each hand-typed identically in two places before this; --ease-drawer
     is new, replacing a bare `ease` on the app's one recurring bottom sheet. */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-gauge: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
* { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
button, .card, .tab, .pill, .tf-btn { touch-action: manipulation; }
button, .tab, .pill, .card, .badge, .ripple-bucket, .ripple-card, .triage-request-card, .puzzle-select-card, .step-dot-btn, .fs-step, .chain-mobile-badge, h1, .drawer-title-row { -webkit-user-select: none; user-select: none; }
/* `none` (not `contain`) on the root: the app has its own custom
   pull-to-refresh (#pullRefreshIndicator, js/app.js), so the native
   browser/OS pull-to-refresh needs to be fully suppressed here rather than
   just contained, or the two can fire at once on Android Chrome. */
html, body { overscroll-behavior-y: none; }
/* All :hover rules live here, gated to real pointers. Without this, a tap
   on a touch device applies :hover and it sticks until the next tap
   elsewhere — the card/button visibly stays "hovered" after the tap that
   should have moved past it. :active (unaffected by this gate) already
   carries touch press-feedback separately. */
@media (hover: hover) and (pointer: fine) {
  .subtopic-option:hover { background: #F1F5F9; }
  .card:hover { border-color: #CBD5E1; box-shadow: 0 1px 3px rgba(30, 41, 59, 0.06); }
  button.action:hover { background: #F1F5F9; border-color: #CBD5E1; }
  .action.primary:hover { background: #3f6b4c; }
  .action.danger:hover { background: #FEF3E2; }
  .tf-btn:hover { border-color: #CBD5E1; }
  .puzzle-select-card:hover { border-color: #CBD5E1; box-shadow: 0 1px 3px rgba(30,41,59,0.06); }
  .perf-matrix tr:hover td { background: #F8F9FA; }
  .quiz-tf-btn:not([disabled]):hover { border-color: var(--accent); }
}
body {
  font-family: var(--font-sans);
  background: #FFFFFF;
  color: var(--text-primary);
  margin: 0;
  padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-2) calc(68px + env(safe-area-inset-bottom));
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
}
h1 { font-size: 22px; font-weight: 600; }
.wrap { max-width: 720px; margin: 0 auto; }
.eyebrow { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 0.02em; color: var(--text-secondary); margin-bottom: 4px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.stat { font-size: 13px; color: var(--text-secondary); }
.stat strong { color: var(--text-primary); font-weight: 500; }

/* ── Bottom nav — Android / default ── */
.tabs {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  /* Matches .wrap's max-width so the bar lines up with the content column
     instead of spreading its 5 icons across the full viewport width on
     wide/laptop screens (was full-bleed unconditionally — fine on mobile
     where the viewport is already narrower than this cap, but on a 1440px
     screen it stretched the tab bar edge-to-edge under a much narrower
     centered content column, leaving huge, unpolished gaps between icons). */
  max-width: 720px; margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #FFFFFF;
  border-top: 0.5px solid rgba(0,0,0,0.12);
  /* Horizontal padding (--space-1) keeps the active tab's highlight pill
     off the screen edge when the active tab is the first or last one
     (Scenarios/Progress) — .tab has flex:1 with no side margin, so
     without this the highlight's rounded box ran flush to x:0/right:0. */
  padding: 6px 8px 6px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  z-index: 100;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
  color: #8E8E93;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
  border: none; background: none;
  -webkit-appearance: none; appearance: none;
  transition: color 0.15s ease;
}

/* Android active: solid green background block */
.tab.active {
  color: var(--accent);
  background: #E7F0EA;
  border-radius: 12px;
}

.tab:active { opacity: 0.5; }

.tab::before, .tab::after,
.tab.active::before, .tab.active::after { display: none !important; content: none !important; }

/* tab-icon-wrap exists in HTML for iOS; on Android just pass through */
.tab-icon-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 28px;
  flex-shrink: 0;
}

.tab svg {
  width: 22px; height: 22px;
  stroke: currentColor; stroke-width: 1.8px;
  fill: none; display: block; flex-shrink: 0;
}

.tab-label { display: block; white-space: nowrap; }

/* Shared line-icon style for buttons outside the nav bar — matches .tab svg
   so the emoji-free icons (Generate Custom Scenario, Start a Campaign, Show
   custom scenarios only) read as one coherent icon system with the nav. */
.btn-icon {
  width: 18px; height: 18px;
  stroke: currentColor; stroke-width: 1.8px;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -4px; margin-right: 6px; flex-shrink: 0;
}

/* Badge — absolute dot top-right of icon wrap */
.puzzle-tab-badge {
  position: absolute;
  top: -1px; right: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  border-radius: 20px; padding: 1px 5px;
  pointer-events: none;
}
.puzzle-tab-badge.dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  background: #F97316;
  box-shadow: 0 0 0 1.5px #FFFFFF;
}
.puzzle-tab-badge.streak {
  background: #FEF3C7; color: #92400E;
  border: 1px solid #FCD34D;
}

/* (iPhone bottom-nav styles live in the consolidated @supports block further
   down — see "iPhone only: floating frosted-glass pill". This placeholder
   avoids two competing @supports blocks fighting over .tabs positioning.) */

.titlerow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: var(--space-2); }
.titlerow h1 { font-size: 18px; }
.titlerow .stat { display: none; }

.top-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: var(--space-2); }
.app-eyebrow {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary); margin: 0;
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-eyebrow .eyebrow-short { display: none; }
.top-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Below ~480px the eyebrow + Team View pill + avatar + menu genuinely don't
   fit on one clean line — collapse the Team View button to icon-only rather
   than letting the title wrap or the row overflow. The eyebrow text also
   swaps to a shorter label here so it reads cleanly ("Business Acumen")
   instead of truncating mid-word ("Business Acumen Pract…"). Was 380px,
   which still truncated at common 390px phone widths (iPhone 14/15-class)
   — widened to comfortably cover the whole common phone-portrait range.
   The text-overflow:ellipsis above still applies as a safety net if even
   the short label doesn't fit at the very narrowest supported widths. */
/* UI-02: phones keep a short "Team" label rather than an unlabeled icon
   circle; the eyebrow shortens to "Dojo" to make room. */
.team-view-header-btn .tv-short { display: none; }
@media (max-width: 480px) {
  .team-view-header-btn { padding: 0 12px; }
  .team-view-header-btn .tv-long { display: none; }
  .team-view-header-btn .tv-short { display: inline; }
  .app-eyebrow .eyebrow-full { display: none; }
  .app-eyebrow .eyebrow-short { display: inline; }
}

/* Avatar with corner streak badge (replaces the separate streak pill) */
.avatar-btn-wrap { position: relative; display: inline-flex; }
.avatar-btn-wrap .profile-switcher-btn { padding: 0; width: 44px; height: 44px; border-radius: 50%; justify-content: center; }
.avatar-btn-wrap .profile-switcher-btn .profile-avatar { margin: 0; width: 30px; height: 30px; font-size: 12px; }
.avatar-streak-corner { position: absolute; bottom: -2px; right: -4px; z-index: 1; display: none; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; color: #fff; background: #D97706; border: 2px solid var(--bg); border-radius: 999px; padding: 1px 5px 1px 4px; line-height: 1.3; }
.avatar-streak-corner.visible { display: inline-flex; }
.fw-header-btn { display: flex; align-items: center; gap: 6px; background: #E7F0EA; color: var(--accent); border: none; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; }
.icon-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 16px; font-weight: 600; padding: 0; }
.icon-btn:active { background: #E2E8F0; }

/* z-index was 90/91 — BELOW .tabs' z-index:100, so the fixed bottom tab bar
   rendered on top of the last ~64px of every drawer in the app (chain
   framework, settings, profile, playbook, filter picker, about), clipping
   drawer content behind it and making the tab buttons the thing that
   actually received taps in that strip instead of whatever the drawer
   showed there. Raised above .tabs (and above .welcome-overlay below,
   preserving the same relative order) while staying well under the
   higher-priority overlays (toasts, AI loading, pull-to-refresh, auth gate
   all sit at 999+ and are unaffected). */
.drawer-overlay { position: fixed; inset: 0; background: rgba(30,41,59,0.35); z-index: 110; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer-sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card-bg); border-radius: 16px 16px 0 0; padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom)); max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; transform: translateY(100%); transition: transform 0.25s var(--ease-drawer); z-index: 111; box-shadow: 0 -8px 32px rgba(0,0,0,0.18); }
.drawer-overlay.open .drawer-sheet { transform: translateY(0); }
.drawer-handle { display: none; } /* retired: a grabber promises drag-to-dismiss, which sheets don't have (audit HIG-01) */
/* Desktop: sheets cap at the content column instead of spanning the window
   (audit UI-01). left/right 0 + max-width + auto margins centres a fixed box. */
@media (min-width: 640px) {
  .drawer-sheet { max-width: 560px; margin-inline: auto; }
}
.drawer-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.drawer-close { background: none; border: none; font-size: 20px; color: var(--text-secondary); cursor: pointer; line-height: 1; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.subtopic-sheet-list { display: flex; flex-direction: column; gap: 4px; }
.subtopic-option { text-align: left; background: none; border: none; padding: 12px 8px; font-size: 15px; color: var(--text-primary); border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; }
.subtopic-option.active { background: #E7F0EA; color: var(--accent); font-weight: 500; }

.panel { display: none; }
.panel.active { display: block; animation: fadeIn 0.18s ease; }
p.lead { color: var(--text-secondary); margin-bottom: var(--space-3); max-width: 60ch; }

.step { display: flex; gap: var(--space-2); padding: 14px 0; border-bottom: 1px solid var(--border); }
.step:first-child { border-top: 1px solid var(--border); }
.step-n { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: #E7F0EA; border: none; color: var(--accent); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.step-label { font-weight: 500; margin-bottom: 4px; }
.step-detail { font-size: 14px; color: var(--text-secondary); }
.tips { margin-top: var(--space-4); background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-3); }
.tips div.title { font-weight: 500; margin-bottom: var(--space-1); }
.tips ul { margin: 0; padding-left: 18px; color: var(--text-secondary); font-size: 14px; line-height: 1.8; }

.filters { display: flex; gap: 6px; margin-bottom: var(--space-3); flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); }
.filters::-webkit-scrollbar { display: none; }
.pill { flex-shrink: 0; font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg); cursor: pointer; color: var(--text-primary); font-family: inherit; }
.action-bar { display: flex; gap: 8px; margin-bottom: var(--space-3); }
.admin-mode-link { text-align: center; font-size: 12px; color: var(--text-secondary); margin-top: var(--space-3); cursor: pointer; text-decoration: underline; touch-action: manipulation; min-height: 44px; display: flex; align-items: center; justify-content: center; }

.admin-header { margin-bottom: var(--space-3); }
.admin-back-btn { font-size: 13px; background: none; border: none; color: var(--text-primary); cursor: pointer; padding: 0 var(--space-1); min-height: 44px; min-width: 44px; font-family: inherit; margin-bottom: var(--space-1); }
.admin-demo-note { font-size: 12px; color: #8A6D1E; background: #FBF8EF; border: 1px solid #EDE3C4; border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 6px; }

.admin-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: var(--space-3); }
.admin-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 10px; text-align: center; }
.admin-stat-num { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.admin-stat-label { font-size: 10px; color: var(--text-secondary); margin-top: 2px; line-height: 1.3; }

.admin-section-title { font-size: 13px; font-weight: 600; margin: var(--space-3) 0 10px; }

.heatmap-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.heatmap-label { font-size: 12px; width: 150px; flex-shrink: 0; color: var(--text-secondary); }
.heatmap-track { flex: 1; height: 20px; background: #F1F5F9; border-radius: 6px; overflow: hidden; }
.heatmap-fill { height: 100%; border-radius: 6px; transition: width 0.3s ease; }
.heatmap-fill.low { background: var(--accent); }
.heatmap-fill.mid { background: #E08A2C; }
.heatmap-fill.high { background: #E24B4A; }
.heatmap-pct { font-size: 12px; font-weight: 600; width: 36px; text-align: right; }

.assign-picker-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; min-height: 44px; }
.assign-picker-row:last-child { border-bottom: none; }
.assign-checkbox { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }

.assigned-focus-card { background: linear-gradient(135deg, #FFF8E8 0%, #F8F9FA 100%); border: 1px solid #F0E2B8; border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: var(--space-2); }
.assigned-focus-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: #8A6D1E; margin-bottom: 8px; }
.assigned-focus-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.06); cursor: pointer; min-height: 44px; }
.assigned-focus-item:last-child { border-bottom: none; }
.assigned-focus-item-title { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; }
.assigned-focus-item { gap: var(--space-1); }
.assigned-focus-item.is-done .assigned-focus-item-title { color: var(--text-secondary); }

/* Assignment due dates (js/features/assignments/due-dates.js) */
.due-chip { display: inline-block; flex-shrink: 0; font-size: 11px; font-weight: 600; line-height: 1.4; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--text-secondary); border: 1px solid var(--border); white-space: nowrap; font-variant-numeric: tabular-nums; }
.due-chip--overdue { background: #FDECEC; color: #B42318; border-color: #F5C6C6; }
.due-chip--due-today, .due-chip--due-soon { background: #FEF3E2; color: #92400E; border-color: #F8D9A8; }
.due-chip--done { background: #EAF2EC; color: var(--accent); border-color: #CFE0D4; }
.assign-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-1); }
.assign-row { display: flex; align-items: center; gap: var(--space-1); font-size: 12px; color: var(--text-secondary); min-height: 32px; }
.assign-row__title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.assign-member-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.bsr-expand-btn.assign-nudge-btn { color: #B42318; border-color: #F5C6C6; }
.assign-due-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); margin-top: 12px; }
.assign-due-label { font-size: 13px; font-weight: 600; }
.assign-due-optional { font-weight: 400; color: var(--text-secondary); }
.assign-due-input { width: auto; min-height: 44px; margin: 0; }
/* "Due by" and the buttons stay on screen while the scenario and member
   lists scroll inside the card. The negative offsets cancel the card's own
   padding so the footer sits flush with its edges. */
.assign-footer { position: sticky; bottom: calc(-1 * var(--space-4)); margin: var(--space-1) calc(-1 * var(--space-4)) calc(-1 * var(--space-4)); padding: 0 var(--space-4) var(--space-3); background: var(--card-bg); border-top: 1px solid var(--border); }
.assign-footer__actions { display: flex; gap: var(--space-1); margin-top: 12px; }
.assign-footer__actions .action { flex: 1; min-height: 44px; }
.assign-footer__actions .action.primary { flex: 2; }

.company-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: #6B5B95; background: #EFEAF7; border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.push-to-team-btn { background: #FFF8E8; border: 1px solid #F0E2B8; color: #8A6D1E; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 6px 12px; cursor: pointer; touch-action: manipulation; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; }
.push-to-team-btn.pushed { background: #E7F0EA; border-color: #C6DECD; color: var(--accent); }

.ent-scenario-row { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 8px; }
.ent-scenario-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ent-scenario-title { font-size: 13px; font-weight: 500; }
.ent-scenario-meta { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; }
.ent-scenario-actions { display: flex; gap: 8px; }
.ent-scenario-actions button { font-size: 12px; padding: 6px 10px; min-height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-bg); cursor: pointer; touch-action: manipulation; font-family: inherit; }
.admin-filter-row { display: flex; gap: 6px; margin-bottom: var(--space-2); flex-wrap: wrap; }

.profile-switcher-btn { display: flex; align-items: center; gap: 6px; background: #F1F5F9; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px 6px 6px; font-size: 12px; font-weight: 500; color: var(--text-primary); cursor: pointer; touch-action: manipulation; min-height: 44px; font-family: inherit; }
.profile-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }

.profile-option { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); cursor: pointer; touch-action: manipulation; min-height: 44px; }
.profile-option:last-child { border-bottom: none; }
.profile-option.active { background: #E7F0EA; border-radius: var(--radius-sm); margin: 0 -8px; padding: 12px 8px; }
.profile-option-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.profile-option-name { font-size: 14px; font-weight: 500; }
.profile-option-meta { font-size: 12px; color: var(--text-secondary); }

.manager-role-badge { display: none; font-size: 10px; font-weight: 700; color: #fff; background: #B8720B; border-radius: 999px; padding: 3px 8px; letter-spacing: 0.02em; }

.settings-field { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.settings-field:last-child { border-bottom: none; }
.settings-field-label { color: var(--text-secondary); }
.settings-field-value { font-weight: 500; }

.settings-login-error { font-size: 12px; color: #B42318; background: #FDECEC; border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 8px; }

.roster-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; min-height: 44px; }
.roster-row:last-child { border-bottom: none; }
.roster-name { font-weight: 500; }
.roster-role { color: var(--text-secondary); font-size: 12px; }

.settings-menu-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 500; cursor: pointer; touch-action: manipulation; min-height: 44px; }
.settings-menu-row:last-child { border-bottom: none; }
.settings-menu-row:active { background: #F1F5F9; }
.settings-menu-chevron { color: var(--text-secondary); font-size: 18px; }

.auth-modal-card { max-width: 320px; }
.action-bar .action, .action-bar label.action { flex: 1; text-align: center; justify-content: center; margin: 0; }
.action-bar .action.danger { flex: 0 0 auto; margin-left: 12px; }
.pill.active { border-color: var(--accent); background: #E7F0EA; color: var(--accent); }
.mode-switch { background: #EDF0F3; border-radius: 12px; padding: 4px; gap: 4px; -webkit-mask-image: none; mask-image: none; }
.mode-switch .pill { border: none; background: transparent; border-radius: 9px; flex: 1 1 auto; }
.mode-switch .pill.active { background: var(--card-bg); color: var(--text-primary); box-shadow: 0 1px 3px rgba(30,41,59,0.12); }
.pill:active { transform: scale(0.95); }
.card:active { transform: scale(0.985); border-color: #CBD5E1; }
.puzzle-select-card:active { transform: scale(0.985); }
.triage-request-card:active { transform: scale(0.985); }
.ripple-bucket:active { transform: scale(0.97); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.card { cursor: pointer; background: var(--card-bg); border: 1px solid #EDF0F3; border-radius: var(--radius-md); padding: 18px 20px; text-align: left; font-family: inherit; color: var(--text-primary); transition: border-color 0.15s ease, box-shadow 0.15s ease; min-height: 64px; }

/* ---- Scenario controls bar (replaces the two pill rows) ---- */
.scenario-controls-bar { display: flex; gap: 8px; margin-bottom: 8px; }

/* ---- Status segmented control ---- */
.status-segmented-control { display: flex; background: #EEF2F6; border-radius: var(--radius-sm); padding: 3px; gap: 3px; margin-bottom: 10px; }
.status-segment-btn { flex: 1; min-height: 38px; border: none; background: transparent; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 5px; transition: background 0.15s ease, color 0.15s ease; }
.status-segment-btn.active { background: var(--card-bg); color: var(--text-primary); box-shadow: 0 1px 3px rgba(30,41,59,0.12); font-weight: 600; }
.status-segment-count { font-size: 11px; opacity: 0.7; }
.scenario-control-btn { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--text-primary); cursor: pointer; font-family: inherit; text-align: left; }
.scenario-control-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scenario-control-chevron { flex-shrink: 0; color: var(--text-secondary); font-size: 14px; }
.scenario-control-btn.filter-active { border-color: var(--accent); background: #E7F0EA; color: var(--accent); }
.scenario-control-btn.filter-active .scenario-control-chevron { color: var(--accent); }
.scenario-shuffle-btn { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-bg); font-size: 16px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ---- Completed vs. uncompleted card hierarchy ---- */
.card.uncompleted { border: 1.5px solid #E2E8F0; background: var(--card-bg); }
.card.completed { border: 1px solid #D7ECDD; background: #F0F9F4; }
.card-status-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; flex-shrink: 0; }
.card-status-badge.todo { background: #EEF2F6; color: #475569; }
.card-status-badge.completed { background: var(--accent); color: #fff; }
.card-top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.card-badge-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card.completed .card-title { color: #1B4332; }
.card-score-chip { font-size: 12px; font-weight: 700; color: var(--accent); background: #fff; border: 1px solid #D7ECDD; padding: 2px 8px; border-radius: 999px; }

.badge { font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 500; }
.badge.dp { background: #E7F0EA; color: var(--accent); }
.badge.sp { background: #FBEEE3; color: #B35C1E; }
.badge.sop { background: #ECE9FB; color: #5B4BC4; }
.badge.custom { background: #F1F5F9; color: var(--text-secondary); }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.card-title { font-weight: 500; font-size: 15px; margin-bottom: 0; }

.reassure-note { font-size: 13px; color: var(--text-secondary); text-align: center; margin-bottom: var(--space-3); line-height: 1.5; }

.hero-card { background: linear-gradient(135deg, #E7F0EA 0%, #F8F9FA 100%); border: 1px solid #D7E5DC; border-radius: var(--radius-md); padding: 22px 20px; margin-bottom: var(--space-3); }
.hero-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hero-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 10px; }
.hero-top-row .hero-eyebrow { margin-bottom: 0; }
.hero-reroll { background: none; border: none; color: var(--text-secondary); font-size: 16px; cursor: pointer; touch-action: manipulation; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; }
.hero-reroll:active { background: rgba(0,0,0,0.06); }
.hero-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 8px 0 6px; line-height: 1.35; }
.hero-prompt-preview { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-empty { text-align: center; padding: 12px 0; }
.hero-empty-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.hero-empty-body { font-size: 13px; color: var(--text-secondary); }

.accordion-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: none; border-top: 1px solid var(--border); padding: 14px 2px; font-size: 14px; font-weight: 500; color: var(--text-primary); cursor: pointer; touch-action: manipulation; font-family: inherit; min-height: 44px; }
.accordion-chevron { display: inline-block; transition: transform 0.2s ease; color: var(--text-secondary); font-size: 18px; transform: rotate(90deg); }
.accordion-toggle.open .accordion-chevron { transform: rotate(270deg); }
#scenarioAccordionBody { animation: fadeIn 0.2s ease; padding-top: var(--space-2); }
.best { font-size: 12px; color: var(--text-secondary); }

.back-btn { font-size: 13px; background: none; border: none; color: var(--text-primary); cursor: pointer; padding: 0; font-family: inherit; }
.scenario-detail-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
#rippleGameWrap > .back-btn, #triageGameWrap > .back-btn { margin-bottom: var(--space-2); display: block; }
.scenario-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); }
.scenario-meta { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px; }
.scenario-text { font-size: 15px; }

.answer-layout { display: flex; flex-direction: column; width: 100%; }

.chain-mobile-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: var(--space-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 44px;
  font-family: inherit;
}
.chain-mobile-badge::after { content: '\2039 tap to view \203a'; text-transform: none; font-size: 11px; color: var(--text-secondary); letter-spacing: normal; }

textarea, input[type=text] { width: 100%; font-family: inherit; font-size: 16px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-primary); }
textarea { min-height: 160px; resize: none; }
textarea:focus, input[type=text]:focus { outline: none; border-color: var(--accent-alt); box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.12); }
input::placeholder, textarea::placeholder { color: #94A3B8; }

button.action { font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-bg); color: var(--text-primary); cursor: pointer; font-family: inherit; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
button.action:active, label.action:active { transform: scale(0.97); background: #E2E8F0; }
.action.primary:active { background: #345c41; transform: scale(0.97); }
button.action:disabled { opacity: 0.5; cursor: default; }
.action.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.action.danger { background: transparent; border-color: var(--warning); color: var(--warning); }
.field-group .action, #panel-mine .action { width: 100%; }

.rubric-check { display: flex; gap: var(--space-1); align-items: center; font-size: 14px; margin-bottom: var(--space-1); cursor: pointer; min-height: 44px; }
.rubric-check input { width: 18px; height: 18px; accent-color: var(--accent); margin-top: 2px; }

.feedback-box { margin-top: var(--space-3); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); }
.feedback-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }

.score-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.score-very-bad   { background: #FDECEC; color: #B42318; }
.score-not-good   { background: #FEF3E2; color: var(--warning); }
.score-acceptable { background: #F1F5F9; color: var(--text-secondary); }
.score-good       { background: #E8ECFD; color: var(--accent-alt); }
.score-very-good  { background: #E7F0EA; color: var(--accent); }

.glossary-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.glossary-term { font-weight: 500; margin-bottom: 4px; }
.glossary-def { font-size: 13px; color: var(--text-secondary); }

.quiz-progress { font-size: 12px; color: var(--text-secondary); margin-bottom: var(--space-1); }
.quiz-term { font-size: 18px; font-weight: 500; margin-bottom: var(--space-2); }
.quiz-kind { font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--accent-alt); margin-bottom: 6px; font-weight: 500; }
.tf-row { display: flex; gap: var(--space-1); margin-top: 4px; }
.tf-btn { flex: 1; font-size: 14px; font-weight: 500; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-bg); color: var(--text-primary); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.tf-btn.correct { border-color: var(--accent); background: #E7F0EA; color: var(--accent); }
.tf-btn.wrong { border-color: var(--warning); background: #FEF3E2; color: var(--warning); }
.tf-btn:disabled { cursor: default; opacity: 0.9; }
.tf-explain { margin-top: var(--space-2); font-size: 13px; color: var(--text-secondary); background: #F1F5F9; border-radius: var(--radius-sm); padding: 10px 12px; }
.hint-box { margin-top: var(--space-1); font-size: 13px; color: var(--accent); background: #E7F0EA; border-radius: var(--radius-sm); padding: 10px 12px; }

@keyframes slideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.wizard-progress-track { height: 4px; background: var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.wizard-progress-fill { height: 100%; width: 100%; background: var(--accent); border-radius: 999px; transform-origin: left; transform: scaleX(0.2); transition: transform 0.3s ease; }

.step-tracker { display: flex; gap: 4px; margin-bottom: var(--space-2); }
.step-dot-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; font-family: inherit; touch-action: manipulation; padding: 4px 0; }
.step-dot-circle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; border: 2px solid var(--border); color: var(--text-secondary); background: var(--card-bg); transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; }
.step-dot-btn.current .step-dot-circle { border-color: var(--accent); color: var(--accent); }
.step-dot-btn.completed .step-dot-circle { background: var(--accent); border-color: var(--accent); color: #fff; }
.step-dot-btn:disabled { cursor: default; opacity: 0.45; }
.step-dot-btn, .pill {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fs-step { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); cursor: pointer; touch-action: manipulation; transition: background 0.2s ease; border-radius: 8px; }
.fs-step:last-child { margin-bottom: 0; }
.fs-n { font-size: 11px; font-weight: 600; color: var(--accent); padding-top: 1px; }
.fs-step.completed .fs-n { background: var(--accent); color: #fff; border-radius: 50%; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.fs-label { font-size: 13px; font-weight: 500; }
.fs-hint { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }
.fs-step.active { background: #E7F0EA; padding: 6px; margin: -6px -6px 10px -6px; }
.fs-step.active .fs-label { color: var(--accent); }

.wizard-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); animation: slideIn 0.25s ease; touch-action: manipulation; }
.wizard-card.active-focus { border-color: var(--accent); }
.wizard-step-label { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.wizard-step-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.wizard-card textarea { min-height: 180px; }
.wizard-nav {
  position: fixed;
  left: 0;
  right: 0;
  /* Was 52px — the rendered .tabs bar is 63.5px tall (icon + label + padding),
     so this undershot it and the nav bar's bottom edge overlapped the tab bar
     by ~11.5px. 68px clears it with a small margin. */
  bottom: calc(68px + env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  padding: 12px var(--space-2);
  /* Same fix as .tabs: matches .wrap's max-width so the Hint/Next Step
     button row lines up with the content column instead of stretching
     full-bleed under it on wide/laptop screens (was left:0;right:0 with no
     cap — fine on mobile, but on a 1440px screen the buttons spanned the
     entire window while .tabs and the content above were both centered
     at 720px, an inconsistent, unpolished mismatch). */
  max-width: 720px; margin: 0 auto;
  z-index: 40;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}
/* Must clear the fixed .wizard-nav (which itself sits 68px above .tabs) plus
   some breathing room, or the last item in the scroll (scratchpad accordion)
   ends up permanently hidden underneath it. 76px only cleared .tabs alone —
   a leftover from before .wizard-nav became position:fixed. Bumped to cover
   the taller two-row wrapped nav on narrow screens (measured ~121px tall +
   68px gap); see the matching override below for the wider single-row case. */
#scenarioDetail { padding-bottom: 210px; }
@media (min-width: 521px) {
  #scenarioDetail { padding-bottom: 160px; }
}
.wizard-nav .action { flex: 1; touch-action: manipulation; }
/* On narrow screens, three buttons in one row (Previous/Hint/Submit) get
   cramped — "Submit Complete Chain" in particular wraps to two lines and
   visually touches its neighbors. Give the primary action its own full-width
   row below Previous/Hint instead of squeezing all three side by side. */
/* Was: wrap to two rows under 520px (121px of chrome). Now one row at every
   width with short labels on phones, so the nav is ~68px (audit UX-01). */
.wizard-nav .lbl-short { display: none; }
.wizard-nav__prev { flex: 0 0 auto !important; min-width: 48px; }
.wizard-nav .action.primary { flex: 2; }
@media (max-width: 520px) {
  .wizard-nav .lbl-long { display: none; }
  .wizard-nav .lbl-short { display: inline; }
}
/* While a scenario wizard is open the tab bar is hidden and the nav drops to
   the bottom edge; with the on-screen keyboard open it rides on top of the
   keyboard (--kb-inset, js/features/keyboard-inset/viewport.js). */
body.wizard-active .tabs { display: none; }
body.wizard-active .wizard-nav { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
body.wizard-active.kb-open .wizard-nav { bottom: var(--kb-inset, 0px); padding-bottom: 12px; }
body.wizard-active #scenarioDetail { padding-bottom: calc(96px + env(safe-area-inset-bottom) + var(--kb-inset, 0px)); }

.cert-print-view { display: none; }
.cert-page { max-width: 700px; margin: 0 auto; padding: 32px; font-family: var(--font-sans); color: #1E293B; }
.cert-header { text-align: center; border-bottom: 3px solid var(--accent); padding-bottom: 16px; margin-bottom: 24px; }
.cert-title { font-size: 22px; font-weight: 700; }
.cert-subtitle { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.cert-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.cert-meta-label { display: block; font-size: 11px; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.02em; }
.cert-meta-value { display: block; font-size: 15px; font-weight: 600; }
.cert-overall { text-align: center; background: #F8F9FA; border-radius: 8px; padding: 20px; margin-bottom: 24px; }
.cert-overall-num { font-size: 40px; font-weight: 700; color: var(--accent); }
.cert-overall-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; }
.cert-section-title { font-size: 14px; font-weight: 700; margin: 20px 0 10px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.cert-pillar-row, .cert-insight-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; border-bottom: 1px solid #F1F5F9; }
.cert-pillar-score { font-weight: 700; }
.cert-insight-label { color: var(--text-secondary); }
.cert-insight-value { font-weight: 600; text-align: right; }
.cert-signoff { display: flex; justify-content: space-between; margin-top: 48px; gap: 24px; }
.cert-signoff-line { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-secondary); }
.cert-signoff-blank { border-bottom: 1px solid #1E293B; height: 28px; }

@media print {
  body * { visibility: hidden; }
  #certificatePrintView, #certificatePrintView * { visibility: visible; }
  #certificatePrintView { position: absolute; top: 0; left: 0; width: 100%; display: block !important; }
  .tabs, .top-header, .drawer-overlay, .welcome-overlay { display: none !important; }
}

.engagement-callout { border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 10px; }
.engagement-callout-warn { background: #FFF3E0; color: #B8720B; border: 1px solid #F0D9A8; }
.engagement-callout-ok { background: #E7F0EA; color: var(--accent); border: 1px solid #C6DECD; }
.engagement-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); min-height: 44px; }
.engagement-row:last-child { border-bottom: none; }
.engagement-status { font-size: 14px; width: 20px; text-align: center; }
.engagement-name { flex: 1; font-size: 13px; font-weight: 500; }
.engagement-nudge-btn { font-size: 11px; padding: 6px 10px; min-height: 44px; border-radius: 999px; border: 1px solid #F0E2B8; background: #FFF8E8; color: #8A6D1E; cursor: pointer; touch-action: manipulation; font-family: inherit; }

@media (max-width: 768px) {
  .wizard-card textarea { min-height: 140px; }
}

#rubricBox { animation: fadeIn 0.3s ease; }

.eval-summary-card { animation: fadeIn 0.3s ease; }
.eval-score-row { text-align: center; margin-bottom: 14px; }
.eval-score-num { font-size: 36px; font-weight: 700; color: var(--text-primary); }
.eval-score-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); }

.eval-feedback { background: #F1F5F9; border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 14px; }
.eval-feedback-line { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.eval-feedback-line:not(:last-child) { margin-bottom: 6px; }

.eval-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.eval-item:last-of-type { border-bottom: none; }
.eval-item-row { display: flex; align-items: flex-start; gap: 10px; min-height: 28px; }
.eval-item-text { font-size: 13px; line-height: 1.4; padding-top: 2px; }
.eval-item-reason {
  font-size: 12px; line-height: 1.5; color: var(--text-secondary);
  margin-top: 5px; margin-left: 2px; padding-left: 10px;
  border-left: 2px solid var(--border);
}
.eval-badge { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.eval-badge.eval-covered { background: #E7F0EA; color: var(--accent); }
.eval-badge.eval-partial { background: #FFF3E0; color: #B8720B; }
.eval-badge.eval-missed { background: #FDECEC; color: #B42318; }
.eval-badge.eval-insufficient { background: #F1F5F9; color: var(--text-secondary); }
.eval-insufficient-banner { background: #FFF8E8; border: 1px solid #F0E2B8; border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; color: #8A6D1E; margin-bottom: 12px; }

.streak-badge { display: none; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #B8720B; background: #FFF3E0; border-radius: 999px; padding: 4px 10px; }
.mastery-dot { font-size: 12px; margin-right: 4px; }

.playbook-section { margin-bottom: 16px; }
.playbook-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--accent); }
.playbook-body { font-size: 13px; color: var(--text-primary); line-height: 1.55; }
#execCheckBox, #defendBox { animation: fadeIn 0.3s ease; }

.exec-prompt-card { background: #FBF8EF; border: 1px solid #EDE3C4; border-radius: var(--radius-md); padding: var(--space-3); margin: 16px 0 12px; }
.exec-prompt-label { font-size: 12px; font-weight: 600; color: #8A6D1E; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; }
.exec-prompt-question { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.exec-prompt-card textarea { min-height: 110px; resize: vertical; }

/* Was a pale red/pink (error-adjacent) — this is a normal, healthy step in
   the flow, not something gone wrong. Amber ("you're being challenged")
   reads correctly without implying a mistake, and matches the tone already
   established by .exec-prompt-card just above it in the wizard. */
.defend-card { background: #FDF4E7; border: 1px solid #F0DDB3; border-radius: var(--radius-md); padding: var(--space-3); margin: 16px 0 12px; }
.defend-label { font-size: 12px; font-weight: 600; color: var(--warning); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; }
.defend-quote { font-size: 15px; font-weight: 500; font-style: italic; margin-bottom: 12px; line-height: 1.4; }
.defend-quote.ai-pulse { color: var(--text-secondary); font-weight: 400; font-style: normal; }
.defend-card textarea { min-height: 110px; resize: vertical; }

.progress-time { font-size: 11px; color: var(--text-secondary); margin-left: 6px; }

.ripple-timer-track { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-2); }
.ripple-timer-fill { height: 100%; width: 100%; background: var(--accent); border-radius: 999px; transform-origin: left; transform: scaleX(1); transition: transform 0.15s linear, background 0.3s ease; }
.ripple-timer-fill.tier-warn { background: #E08A2C; }
.ripple-timer-fill.tier-critical { background: #E24B4A; animation: pulseCritical 0.6s ease infinite; }
@keyframes pulseCritical { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

#rippleGame, #triageGame {
  background: radial-gradient(circle at 30% 15%, #262A45 0%, #14151A 75%);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
#rippleGame .ripple-score { font-size: 40px; font-weight: 700; color: #fff; text-shadow: 0 0 20px rgba(74,124,89,0.6); }
#rippleGame .ripple-streak-badge { background: rgba(232,236,253,0.15); color: #C8D6FF; }
#rippleGame .ripple-timer-track, #triageGame .ripple-timer-track { background: rgba(255,255,255,0.12); }
#rippleGame .ripple-trigger-card, #triageGame .ripple-trigger-card { background: #1E2036; border-color: rgba(255,255,255,0.08); color: #F2F0E9; }
#rippleGame .ripple-card { box-shadow: 0 2px 10px rgba(0,0,0,0.25); }

#triageGame .triage-margin { color: #B4B2C4; }
#triageGame .triage-margin strong { font-size: 40px; font-weight: 700; color: #fff; text-shadow: 0 0 20px rgba(76,110,245,0.5); }
#triageGame .triage-meter-label { color: #D8D6E8; }
#triageGame .triage-meter-track { background: rgba(255,255,255,0.12); }
#triageGame .triage-request-card { box-shadow: 0 2px 10px rgba(0,0,0,0.25); }

.ripple-hud { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); font-size: 13px; }
.ripple-score { font-size: 20px; font-weight: 600; }
.ripple-streak-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #E8ECFD; color: var(--accent-alt); font-size: 12px; font-weight: 600; transition: transform 0.15s ease; }
.ripple-streak-badge.pulse { animation: streakPulse 0.3s ease; }
@keyframes streakPulse { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }

.ripple-trigger-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); font-size: 15px; font-weight: 500; }

.ripple-buckets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--space-3); }
.ripple-bucket { background: var(--card-bg); border: 2px solid var(--border); border-radius: var(--radius-md); padding: 14px 10px; text-align: center; font-size: 13px; font-weight: 500; cursor: pointer; touch-action: manipulation; transition: border-color 0.15s ease, background 0.15s ease; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: inherit; color: var(--text-primary); }
.ripple-bucket.ready { border-color: var(--accent-alt); box-shadow: 0 0 0 3px rgba(76,110,245,0.25), 0 0 16px rgba(76,110,245,0.35); }
.ripple-bucket .ripple-bucket-icon { display: block; width: 22px; height: 22px; }
.ripple-bucket .ripple-bucket-icon svg { width: 100%; height: 100%; }
.ripple-bucket.correct-flash { animation: bucketCorrect 0.4s ease; border-color: var(--accent); background: #E7F0EA; }
.ripple-bucket.wrong-flash { animation: shakeX 0.4s ease; border-color: #E24B4A; background: #FDECEC; }
@keyframes bucketCorrect { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes shakeX { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

.ripple-cards { display: flex; flex-direction: column; gap: 8px; }
.ripple-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; cursor: pointer; touch-action: manipulation; transition: border-color 0.15s ease, transform 0.15s ease, opacity 0.2s ease; min-height: 44px; display: flex; align-items: center; }
.ripple-card.selected { border-color: var(--accent-alt); box-shadow: 0 0 0 3px rgba(76,110,245,0.3), 0 0 14px rgba(76,110,245,0.4); }
.ripple-card.placed { opacity: 0; transform: scale(0.8); pointer-events: none; }
.ripple-card:active { transform: scale(0.98); }

.ripple-popup { position: fixed; left: 50%; font-size: 15px; font-weight: 600; pointer-events: none; z-index: 200; animation: rippleFloatUp 0.9s ease forwards; white-space: nowrap; }
.ripple-popup.pos { color: var(--accent); }
.ripple-popup.neg { color: #E24B4A; }
@keyframes rippleFloatUp { 0% { opacity: 0; transform: translate(-50%, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60px); } }

.ripple-intro-card, .ripple-result-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; }
.ripple-result-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.ripple-result-title.win { color: var(--accent); }
.ripple-result-title.lose { color: var(--warning); }
.ripple-result-stats { display: flex; justify-content: center; gap: 24px; margin: var(--space-3) 0; }
.ripple-result-stat-num { font-size: 22px; font-weight: 600; }
.ripple-result-stat-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; }

.puzzle-card-grid { display: flex; flex-direction: column; width: 100%; gap: 10px; }
.puzzle-select-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); text-align: center; cursor: pointer; touch-action: manipulation; font-family: inherit; color: var(--text-primary); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.puzzle-select-icon { font-size: 26px; margin-bottom: 8px; }
.puzzle-select-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.puzzle-select-sub { font-size: 11px; color: var(--text-secondary); }

.triage-meters { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-2); }
.triage-meter-label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; margin-bottom: 4px; }
.triage-meter-track { height: 10px; background: var(--border); border-radius: 999px; overflow: hidden; }
.triage-meter-fill { height: 100%; width: 100%; border-radius: 999px; background: var(--accent-alt); transform-origin: left; transform: scaleX(1); transition: transform 0.3s ease, background 0.3s ease; }
.triage-meter-fill.over-limit { background: #E24B4A; }
.triage-meter.shake-error { animation: shakeX 0.4s ease; }

.triage-margin { text-align: center; font-size: 13px; color: var(--text-secondary); margin-bottom: var(--space-2); }
.triage-margin strong { font-size: 22px; color: var(--text-primary); display: block; }

.triage-requests { display: flex; flex-direction: column; gap: 8px; }
.triage-request-card { background: var(--card-bg); border: 2px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; cursor: pointer; touch-action: manipulation; transition: border-color 0.15s ease, background 0.15s ease; min-height: 44px; }
.triage-request-card.active { border-color: var(--accent); background: #E7F0EA; box-shadow: 0 0 0 3px rgba(74,124,89,0.3), 0 0 16px rgba(74,124,89,0.35); }
.triage-request-name { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.triage-request-stats { display: flex; gap: 12px; font-size: 12px; color: var(--text-secondary); align-items: baseline; }
.triage-request-stats b { color: var(--text-primary); }
.triage-request-stats .stat-cost b { color: #E24B4A; }
.triage-request-stats .stat-return { margin-left: auto; }
.triage-request-stats .stat-return b { color: var(--accent); font-size: 15px; font-weight: 700; }

.mine-hint { font-size: 14px; color: var(--text-secondary); margin-bottom: var(--space-3); max-width: 60ch; }
#glossarySearchInput { margin-bottom: var(--space-2); }
.quiz-config-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; margin: var(--space-2) 0 6px; }
.field-group { display: flex; flex-direction: column; gap: var(--space-1); max-width: 560px; }
.field-group label, .field-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }

.progress-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.progress-name { font-weight: 500; font-size: 14px; }
.progress-sub { font-size: 12px; color: var(--text-secondary); }
.progress-section-title { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-secondary); margin-bottom: var(--space-1); }

/* ---- Scratchpad accordion ---- */
.scratchpad-accordion { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.scratchpad-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--card-bg); border: none; padding: 13px 14px; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; min-height: 44px; font-family: inherit; }
.scratchpad-toggle-icon { font-size: 16px; transition: transform 0.2s ease; line-height: 1; }
.scratchpad-accordion.open .scratchpad-toggle-icon { transform: rotate(180deg); }
.scratchpad-body { display: none; padding: 10px 12px 12px; background: var(--card-bg); }
.scratchpad-accordion.open .scratchpad-body { display: block; }
.scratchpad-body textarea { width: 100%; min-height: 100px; font-size: 14px; line-height: 1.5; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; resize: vertical; font-family: inherit; background: var(--bg); color: var(--text-primary); box-sizing: border-box; }
.scratchpad-body textarea:focus { outline: none; border-color: var(--accent); }

/* ---- Reflection / Learning Notes ---- */
.reflection-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.reflection-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 6px; }
.reflection-section textarea { width: 100%; min-height: 90px; font-size: 14px; line-height: 1.5; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; resize: vertical; font-family: inherit; background: var(--bg); color: var(--text-primary); box-sizing: border-box; }
.reflection-section textarea:focus { outline: none; border-color: var(--accent); }
.reflection-hint { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }

/* ---- Audit card: reflection blockquote ---- */
.audit-reflection { margin: 10px 0 2px; padding: 9px 12px; background: #F0F9F4; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 12px; color: var(--text-primary); line-height: 1.5; font-style: italic; }
.audit-reflection-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 4px; font-style: normal; }

/* ---- Resurfaced reflection callout (shown when starting a new scenario) ---- */
.reflection-recall-card { display: flex; gap: 10px; background: #FFF7EA; border: 1px solid #F0DCB8; border-radius: var(--radius-md); padding: 12px 14px; margin: 10px 0 4px; }
.reflection-recall-icon { font-size: 18px; flex-shrink: 0; line-height: 1.3; }
.reflection-recall-body { flex: 1; min-width: 0; }
.reflection-recall-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #92400E; margin-bottom: 3px; }
.reflection-recall-text { font-size: 13px; color: var(--text-primary); line-height: 1.5; font-style: italic; }
.reflection-recall-meta { font-size: 11px; color: var(--text-secondary); margin-top: 4px; font-style: normal; }
.reflection-recall-dismiss { background: none; border: none; font-size: 16px; color: var(--text-secondary); cursor: pointer; min-height: 44px; min-width: 32px; flex-shrink: 0; align-self: flex-start; }

/* ---- Hybrid Cloud AI grading ---- */
@keyframes ai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.ai-pulse { animation: ai-pulse 1.1s ease-in-out infinite; pointer-events: none; }
.eval-source-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; margin-bottom: 10px; }
.eval-source-badge.cloud { background: #EEF2FF; color: #4338CA; }
.eval-source-badge.offline { background: #F1F5F9; color: #475569; }
.eval-provisional-note { font-size: 12px; color: var(--text-secondary); margin: -4px 0 10px; }

/* ---- Live connection status indicator ---- */
.connection-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  margin-top: 6px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
}
.connection-status-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: #94A3B8;
}
.connection-status-badge.online::before  { background: var(--accent); }
.connection-status-badge.offline::before { background: #94A3B8; }
.connection-status-badge.checking::before {
  background: #B8720B; animation: cloud-check-pulse 1s ease-in-out infinite;
}
@keyframes cloud-check-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.eval-vp-feedback { background: #F8F9FA; border-left: 3px solid #4338CA; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 12px; font-size: 13px; line-height: 1.6; color: var(--text-primary); margin: 10px 0 14px; white-space: pre-line; }

/* ---- Presenter / Demo Mode ---- */
.settings-toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
.settings-toggle-label { font-size: 13px; font-weight: 500; }
.settings-toggle-sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.toggle-switch { position: relative; display: inline-block; width: 46px; height: 27px; flex-shrink: 0; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch-track { position: absolute; inset: 0; background: #D1D5DB; border-radius: 999px; transition: background 0.2s ease; }
.toggle-switch-track::before { content: ''; position: absolute; height: 21px; width: 21px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-switch input:checked + .toggle-switch-track { background: var(--accent); }
.toggle-switch input:checked + .toggle-switch-track::before { transform: translateX(19px); }

.worker-url-input { width: 100%; box-sizing: border-box; margin-top: 8px; margin-bottom: 4px; }
.worker-url-hint { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }

.demo-autofill-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; background: #FFF7EA; border: 1.5px dashed #D97706; color: #92400E; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; margin-bottom: 12px; }
.demo-autofill-btn:active { background: #FEF0D8; }

@keyframes pitch-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.55); }
  50% { box-shadow: 0 0 0 7px rgba(217, 119, 6, 0); }
}
.pitch-highlight { animation: pitch-glow 1.8s ease-in-out infinite; border-radius: var(--radius-sm); position: relative; z-index: 1; }

/* ---- Puzzle XP / Points system ---- */
.puzzle-points-header { background: linear-gradient(135deg, #EEF2FF 0%, #F8F9FA 100%); border: 1px solid #C7D2FE; border-radius: var(--radius-md); padding: 18px 16px; text-align: center; margin-bottom: 16px; }
.puzzle-points-num { font-size: 34px; font-weight: 800; color: #3730A3; line-height: 1.1; }
.puzzle-points-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #4338CA; margin-top: 2px; }
.puzzle-points-meta { font-size: 12px; color: var(--text-secondary); margin-top: 8px; }

.puzzle-achievements-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px 14px; }
.puzzle-achv-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.puzzle-achv-row:last-child { border-bottom: none; }
.puzzle-achv-mode { font-weight: 500; }
.puzzle-achv-stats { color: var(--text-secondary); font-size: 12px; text-align: right; }
.puzzle-achv-stats strong { color: var(--text-primary); font-size: 13px; }

/* ---- XP earned banner (shown on puzzle result screens) ---- */
@keyframes xp-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(67, 56, 202, 0.45); }
  50% { box-shadow: 0 0 14px 4px rgba(67, 56, 202, 0.35); }
}
.xp-earned-banner { opacity: 0; transform: translateY(-6px) scale(0.96); transition: opacity 0.3s ease, transform 0.4s var(--ease-bounce); background: linear-gradient(135deg, #4338CA, #6D5AE6); color: #fff; font-size: 14px; font-weight: 700; text-align: center; border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; animation: xp-glow-pulse 1.6s ease-in-out infinite; }
.xp-earned-banner.show { opacity: 1; transform: translateY(0) scale(1); }

/* ---- Audit card: submitted-answer accordion ---- */
.submitted-answer-accordion { margin: 10px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.submitted-answer-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: #F8F9FA; border: none; padding: 10px 12px; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; min-height: 40px; font-family: inherit; }
.submitted-answer-toggle-icon { transition: transform 0.2s ease; }
.submitted-answer-accordion.open .submitted-answer-toggle-icon { transform: rotate(180deg); }
.submitted-answer-body { display: none; padding: 10px 12px; }
.submitted-answer-accordion.open .submitted-answer-body { display: block; }
.submitted-step-block { margin-bottom: 10px; }
.submitted-step-block:last-child { margin-bottom: 0; }
.submitted-step-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 3px; }
.submitted-step-text { font-size: 13px; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; }

/* ---- Audit card: rubric breakdown ---- */
.audit-rubric-list { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }

/* ---- How You Can Improve coaching card ---- */
.improvement-card { background: #F0F4FF; border: 1px solid #C7D2FE; border-radius: var(--radius-md); padding: 12px 14px; margin: 10px 0; }
.improvement-title { font-size: 12px; font-weight: 700; color: #3730A3; margin-bottom: 8px; }
.improvement-source-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: #4338CA; color: #fff; padding: 2px 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.improvement-list { margin: 0 0 10px; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--text-primary); }
.improvement-list li { margin-bottom: 4px; }
.improvement-next-btn { width: 100%; min-height: 40px; background: #fff; border: 1px solid #C7D2FE; color: #3730A3; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* ---- Infinite Scenario Generator ---- */
.generate-scenario-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-bottom: var(--space-2); background: linear-gradient(135deg, #4338CA, #6D5AE6); color: #fff; border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: 0 2px 8px rgba(67,56,202,0.25); }
.generate-scenario-btn:active { transform: scale(0.99); }
.gen-modal-card { background: var(--card-bg); border-radius: var(--radius-md); padding: var(--space-4); max-width: 420px; width: 100%; max-height: 85vh; max-height: 85dvh; overflow-y: auto; }
.gen-modal-title { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.gen-modal-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.gen-field-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); margin: 14px 0 8px; }
.gen-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.gen-pill { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--card-bg); font-size: 13px; font-weight: 500; color: var(--text-primary); cursor: pointer; font-family: inherit; }
.gen-pill.active { border-color: #4338CA; background: #EEF2FF; color: #3730A3; font-weight: 600; }
.gen-spinner { display: inline-block; width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: gen-spin 0.7s linear infinite; vertical-align: middle; }
@keyframes gen-spin { to { transform: rotate(360deg); } }
.gen-error-note { background: #FDECEC; border: 1px solid #F5C6C6; color: #B42318; border-radius: var(--radius-sm); font-size: 13px; padding: 10px 12px; margin-top: 12px; display: none; }
.gen-error-note.show { display: block; }
.gen-kpi-tag { display: inline-block; font-size: 11px; font-weight: 600; background: #FDECEC; color: #B42318; border-radius: 999px; padding: 3px 9px; margin: 0 4px 4px 0; }
.gen-difficulty-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 999px; padding: 3px 9px; margin-left: 6px; }
.gen-difficulty-badge.easy { background: #E7F0EA; color: var(--accent); }
.gen-difficulty-badge.medium { background: #FFF7EA; color: #92400E; }
.gen-difficulty-badge.hard { background: #FDECEC; color: #B42318; }

/* ---- Competency Radar ---- */
.radar-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 8px 8px; margin-bottom: 12px; }
.radar-title { font-size: 13px; font-weight: 600; text-align: center; margin-bottom: 4px; }

/* ---- Historical Audit modal ---- */
.audit-open-report-btn { width: 100%; min-height: 42px; margin-top: 10px; background: var(--card-bg); border: 1px solid var(--accent); color: var(--accent); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.hist-audit-card { background: var(--card-bg); border-radius: var(--radius-md); padding: var(--space-4); max-width: 520px; width: 100%; max-height: 88vh; max-height: 88dvh; overflow-y: auto; }
.hist-audit-section { margin-bottom: 16px; }
.hist-audit-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 6px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.hist-audit-context { font-size: 13px; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; }
.hist-audit-rebuttal { font-size: 13px; line-height: 1.6; font-style: italic; background: #FBF8EF; border-left: 3px solid #B8720B; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 12px; }
.hist-audit-actions { display: flex; gap: 8px; margin-top: 16px; }

@media print {
  body.print-audit #certificatePrintView { display: none !important; }
  body.print-audit #historicalAuditContent, body.print-audit #historicalAuditContent * { visibility: visible; }
  body.print-audit #historicalAuditModal { display: flex !important; position: static !important; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; }
  body.print-audit .hist-audit-card { max-width: 100% !important; max-height: none !important; overflow: visible !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; }
  body.print-audit .hist-audit-actions, body.print-audit .hist-audit-close { display: none !important; }
  body.print-audit .hist-audit-section { break-inside: avoid; }
}
.eval-dual-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 14px; }
.eval-sub-score-card { background: #F8F9FA; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; text-align: center; }
.eval-sub-score-num { font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.eval-sub-score-label { font-size: 11px; color: var(--text-secondary); margin-top: 3px; line-height: 1.3; }
.eval-sub-score-card.discipline { border-top: 3px solid var(--accent); }
.eval-sub-score-card.thinking { border-top: 3px solid #5B4BC4; }

/* Step mastery skill breakdown card */
.skill-breakdown-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 20px; }
.skill-breakdown-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.skill-breakdown-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.skill-breakdown-label { font-size: 11px; color: var(--text-secondary); width: 28px; flex-shrink: 0; font-weight: 600; }
.skill-breakdown-name { font-size: 11px; color: var(--text-secondary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-breakdown-track { width: 90px; height: 7px; background: #E2E8F0; border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.skill-breakdown-fill { height: 100%; border-radius: 999px; }
.skill-breakdown-fill.high { background: var(--accent); }
.skill-breakdown-fill.mid { background: #F59E0B; }
.skill-breakdown-fill.low { background: #E24B4A; }
.skill-breakdown-pct { font-size: 12px; font-weight: 700; width: 36px; text-align: right; flex-shrink: 0; }
.skill-growth-callout { margin-top: 10px; padding: 8px 10px; background: #FFF7EA; border: 1px solid #F0DCB8; border-radius: var(--radius-sm); font-size: 12px; color: #92400E; }

.empty { font-size: 14px; color: var(--text-secondary); }
.note { font-size: 12px; color: var(--text-secondary); margin-bottom: var(--space-2); }

.quiz-summary { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; }
.quiz-summary .big-score { font-size: 32px; font-weight: 600; margin: 10px 0; }

/* Same fix as .drawer-overlay above — was below .tabs' z-index:100. */
.welcome-overlay { position: fixed; inset: 0; background: rgba(30,41,59,0.45); z-index: 115; display: flex; align-items: center; justify-content: center; padding: var(--space-3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.welcome-card { background: var(--card-bg); border-radius: var(--radius-md); padding: var(--space-4); max-width: 360px; width: 100%; text-align: left; box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.welcome-card h2 { font-size: 18px; margin-bottom: var(--space-2); }
.welcome-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: 12px; }
.welcome-list li { display: flex; gap: 10px; font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.welcome-list .num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #E7F0EA; color: var(--accent); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.welcome-card .action { width: 100%; background: var(--accent); border-color: var(--accent); color: #fff; }

.tab svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2px; fill: none; display: block; flex-shrink: 0; }

.empty-callout { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-3); margin-top: var(--space-2); }
.empty-callout svg { width: 32px; height: 32px; stroke: var(--text-secondary); stroke-width: 1.5px; fill: none; opacity: 0.6; }
.empty-callout .empty-title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.empty-callout .empty-body { font-size: 13px; color: var(--text-secondary); max-width: 32ch; }

/* Manager identity + progress lens */
.profile-avatar.manager, .profile-option-avatar.manager { background: #B8720B; }
.progress-lens-row {
  display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 14px;
  overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.progress-lens-row::-webkit-scrollbar { display: none; }
.progress-lens-row .pill { flex-shrink: 0; }
.profile-manager-note { font-size: 12px; color: var(--text-secondary); background: #FFF7EA; border: 1px solid #F0DCB8; border-radius: var(--radius-sm); padding: 8px 10px; margin: 8px 0; }
.blindspot-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.blindspot-row:last-child { border-bottom: none; }
.blindspot-rate { font-weight: 700; }

/* ---- Power BI Dashboard ---- */
.pbi-section { margin-bottom: var(--space-3); }
.pbi-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.pbi-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* KPI grid */
.pbi-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: var(--space-3); }
.pbi-kpi-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 12px; position: relative; overflow: hidden; }
.pbi-kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
.pbi-kpi-card.amber::before { background: #D97706; }
.pbi-kpi-card.red::before { background: #E24B4A; }
.pbi-kpi-card.blue::before { background: var(--accent-alt); }

/* Clickable blind-spot KPI + drill-down */
.pbi-kpi-card.clickable { cursor: pointer; transition: box-shadow 0.15s ease, transform 0.1s ease; }
.pbi-kpi-card.clickable:active { transform: scale(0.98); }
.pbi-kpi-card.clickable .pbi-kpi-hint { font-size: 10px; color: var(--text-secondary); margin-top: 6px; text-decoration: underline; }
.blindspot-drilldown { display: none; margin: -6px 0 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); overflow: hidden; }
.blindspot-drilldown.open { display: block; }
.blindspot-drilldown-header { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.blindspot-drilldown-close { background: none; border: none; font-size: 18px; color: var(--text-secondary); cursor: pointer; min-height: 44px; min-width: 44px; }
.blindspot-drilldown-section { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.blindspot-drilldown-section:last-child { border-bottom: none; }
.blindspot-drilldown-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 8px; }
.blindspot-scenario-row, .blindspot-employee-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--border); min-height: 44px; }
.blindspot-scenario-row:last-child, .blindspot-employee-row:last-child { border-bottom: none; }
.blindspot-miss-count { font-size: 11px; font-weight: 700; color: #B42318; background: #FDECEC; padding: 3px 9px; border-radius: 999px; flex-shrink: 0; margin-left: 10px; }
.blindspot-scenario-row.assignable { cursor: pointer; background: none; border: none; width: 100%; font-family: inherit; padding: 10px 0; }
.blindspot-scenario-row.assignable:active { background: #F8F9FA; }
.blindspot-assign-state { font-size: 11px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; margin-left: 8px; white-space: nowrap; }
.blindspot-assign-state.assigned { color: var(--accent); }
.blindspot-nudge-btn { width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid #F0E2B8; background: #FFF8E8; color: #8A6D1E; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* Demo auth tag */
.demo-auth-tag { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #92400E; background: #FFF7EA; border: 1px solid #F0DCB8; border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 12px; line-height: 1.4; }
.demo-auth-btn { width: 100%; min-height: 44px; }
.pbi-kpi-num { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.pbi-kpi-label { font-size: 11px; color: var(--text-secondary); margin-top: 3px; line-height: 1.3; }
.pbi-kpi-trend { font-size: 11px; font-weight: 600; margin-top: 6px; }
.pbi-kpi-trend.up { color: var(--accent); }
.pbi-kpi-trend.down { color: #E24B4A; }
.pbi-kpi-trend.neutral { color: var(--text-secondary); }

/* Performance matrix */
.perf-matrix { width: 100%; border-collapse: collapse; font-size: 12px; }
.perf-matrix th { text-align: left; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); padding: 6px 8px; border-bottom: 2px solid var(--border); white-space: nowrap; }
.perf-matrix td { padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.perf-matrix tr:last-child td { border-bottom: none; }
.pm-name { font-weight: 500; font-size: 13px; }
.pm-role { font-size: 11px; color: var(--text-secondary); }
.pm-status { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.pm-status.green { background: #22C55E; }
.pm-status.amber { background: #F59E0B; }
.pm-mini-bar-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 80px; }
.pm-mini-bar-row { display: flex; align-items: center; gap: 4px; }
.pm-mini-bar-label { font-size: 9px; color: var(--text-secondary); width: 14px; flex-shrink: 0; }
.pm-mini-bar-track { flex: 1; height: 5px; background: #E2E8F0; border-radius: 999px; overflow: hidden; }
.pm-mini-bar-fill { height: 100%; border-radius: 999px; }
.pm-mini-bar-fill.demand { background: var(--accent); }
.pm-mini-bar-fill.supply { background: #E08A2C; }
.pm-mini-bar-fill.cross { background: #5B4BC4; }

/* Sub-topic heatmap grid */
.subtopic-heatmap-grid { display: flex; flex-direction: column; gap: 6px; }
.subtopic-heatmap-row { display: flex; align-items: center; gap: 10px; }
.subtopic-heatmap-label { font-size: 12px; color: var(--text-secondary); width: 180px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subtopic-heatmap-track { flex: 1; height: 22px; background: #F1F5F9; border-radius: 6px; overflow: hidden; position: relative; }
.subtopic-heatmap-fill { height: 100%; border-radius: 6px; transition: width 0.4s ease; display: flex; align-items: center; padding-left: 8px; }
.subtopic-heatmap-fill.high { background: linear-gradient(90deg, #4A7C59, #5EA470); }
.subtopic-heatmap-fill.mid { background: linear-gradient(90deg, #D97706, #F59E0B); }
.subtopic-heatmap-fill.low { background: linear-gradient(90deg, #DC2626, #E24B4A); }
.subtopic-heatmap-pct { font-size: 12px; font-weight: 700; width: 36px; text-align: right; }

/* 4-Week trend table */
.trend-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.trend-table th { text-align: center; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); padding: 6px 8px; border-bottom: 2px solid var(--border); }
.trend-table th:first-child { text-align: left; }
.trend-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: center; }
.trend-table td:first-child { text-align: left; font-weight: 500; font-size: 12px; color: var(--text-secondary); }
.trend-table tr:last-child td { border-bottom: none; }
.trend-val { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.trend-delta { font-size: 10px; font-weight: 600; }
.trend-delta.up { color: var(--accent); }
.trend-delta.down { color: #E24B4A; }
.trend-week-current td { background: #F0F9F4; }

/* Audit trail timeline */
.audit-timeline { display: flex; flex-direction: column; gap: 8px; }
.audit-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.audit-card-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; min-height: 52px; }
.audit-card-header:active { background: #F8F9FA; }
.audit-badge-col { flex-shrink: 0; }
.audit-info { flex: 1; min-width: 0; }
/* Two lines before the ellipsis: on a phone one line cut most titles short. */
.audit-title { font-size: 13px; font-weight: 500; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.audit-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.audit-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.audit-chevron { font-size: 12px; color: var(--text-secondary); transition: transform 0.2s ease; }
.audit-card.open .audit-chevron { transform: rotate(90deg); }
.audit-detail { display: none; padding: 0 14px 12px; border-top: 1px solid var(--border); }
.audit-card.open .audit-detail { display: block; }
.audit-step-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.audit-step-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; }
.audit-step-icon { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.audit-step-icon.covered { background: #E7F0EA; color: var(--accent); }
.audit-step-icon.missed { background: #FDECEC; color: #B42318; }


/* ---- PWA Install button ---- */
.install-app-btn { display: flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 14px; background: var(--accent); color: #fff; border: none; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.install-app-btn:active { transform: scale(0.97); }

/* ================================================================
   Decision Risk Score card  —  mobile-first
   ----------------------------------------------------------------
   Previously the gauge and rationale sat side-by-side at every width.
   On a 360px phone that left the rationale ~170px of usable space —
   roughly three words per line. The layout now stacks by default and
   only goes horizontal once there is genuinely room for it.
   ================================================================ */
.risk-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  margin: 18px 0;
}
.risk-card-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.risk-card-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-secondary);
}
.risk-tier-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}

/* Stacked by default: gauge centred, rationale full-width beneath it. */
.risk-gauge-row {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; margin-bottom: 18px;
}
.risk-gauge-svg { width: 132px; height: 76px; flex-shrink: 0; overflow: visible; }
.risk-gauge-fill { transition: stroke-dashoffset 0.7s var(--ease-gauge); }
.risk-rationale {
  font-size: 13.5px; line-height: 1.6; color: var(--text-secondary);
  margin: 0; text-align: center; max-width: 42ch;
}

/* Side-by-side only where the text has room to breathe. */
@media (min-width: 420px) {
  .risk-gauge-row { flex-direction: row; align-items: center; gap: 18px; }
  .risk-rationale { text-align: left; }
}

.risk-scale { display: flex; align-items: center; gap: 10px; }
.risk-scale-label { font-size: 10px; font-weight: 700; white-space: nowrap; letter-spacing: 0.02em; }
.risk-scale-track { flex: 1; height: 6px; background: #E2E8F0; border-radius: 999px; overflow: hidden; }
.risk-scale-fill { height: 100%; width: 100%; border-radius: 999px; transform-origin: left; transform: scaleX(0); transition: transform 0.7s var(--ease-gauge); }

/* ================================================================
   Stakeholder Persona Reactions panel  —  mobile-first
   ----------------------------------------------------------------
   Quote-led cards. The role sits above the quote rather than beside it
   so a long quote never has to share a line with a role label.
   ================================================================ */
.stakeholder-panel { margin: 18px 0; }
.stakeholder-panel-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 10px;
}
.stakeholder-card-grid { display: flex; flex-direction: column; gap: 10px; }
.stakeholder-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.stakeholder-card-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 8px;
}
.stakeholder-role {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 6px;
}
.stakeholder-dot { font-size: 12px; line-height: 1; flex-shrink: 0; }
.stakeholder-reaction {
  font-size: 14px; line-height: 1.6; color: var(--text-primary);
  margin: 0; font-style: italic;
}
.stakeholder-panel-note {
  font-size: 11.5px; line-height: 1.55; color: var(--text-secondary);
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
}

/* ---- Ripple: "Not Related" noise bucket ----
   Spans the full row so the 5-bucket grid never leaves an orphan cell, and
   because rejecting an impact is a different action from assigning one —
   the layout should reflect that distinction, not hide it. */
#bucket-noise { grid-column: 1 / -1; min-height: 52px; flex-direction: row; gap: 8px; border-style: dashed; color: var(--text-secondary); }
#bucket-noise .ripple-bucket-icon { width: 18px; height: 18px; }

/* ---- Coherence coaching banner (keyword-stuffing detected) ---- */
.eval-coherence-banner {
  background: #FFF8E8; border: 1px solid #F0E2B8; border-left: 4px solid #B8720B;
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.6; color: #7A5D14;
}
.eval-coherence-banner strong { color: #5E480F; }

/* ================================================================
   Puzzle coaching card (error-mapped feedback on result screens)
   ================================================================ */
.puzzle-coaching-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-left: 4px solid var(--accent-alt);
  border-radius: var(--radius-sm);
  padding: 16px; margin: 16px 0; text-align: left;
}
.puzzle-coaching-headline {
  font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; line-height: 1.4;
}
.puzzle-coaching-list { margin: 0; padding-left: 18px; }
.puzzle-coaching-list li {
  font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 10px;
}
.puzzle-coaching-list li:last-child { margin-bottom: 0; }
.puzzle-coaching-next {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.6; color: var(--text-primary);
}
.puzzle-coaching-next-tag {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; background: #EEF2FF; color: #3730A3;
  padding: 3px 8px; border-radius: 999px; margin-right: 8px; vertical-align: 1px;
}

/* ================================================================
   Manager View — Operational Insights (mobile-first)
   ================================================================ */
.ops-tile-row { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
@media (min-width: 420px) { .ops-tile-row { grid-template-columns: 1fr 1fr; } }

.ops-tile {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px;
}
.ops-tile-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 6px;
}
.ops-tile-value { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.ops-tile-value.low   { color: var(--accent); }
.ops-tile-value.med   { color: #B8720B; }
.ops-tile-value.high  { color: #B42318; }
.ops-tile-value.muted { color: #94A3B8; }
.ops-tile-note { font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); margin-top: 6px; }

.ops-findings-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-secondary); margin: 0 0 10px;
}
.ops-finding {
  background: var(--card-bg); border: 1px solid var(--border);
  border-left-width: 4px; border-radius: var(--radius-sm);
  padding: 13px 15px; margin-bottom: 10px;
}
.ops-finding.sev-high { border-left-color: #B42318; }
.ops-finding.sev-med  { border-left-color: #B8720B; }
.ops-finding-text { font-size: 13.5px; line-height: 1.55; color: var(--text-primary); }
.ops-finding-text strong { font-weight: 700; }
.ops-finding-action {
  font-size: 12px; line-height: 1.55; color: var(--text-secondary);
  margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--border);
}
.ops-insight-empty {
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
  background: #F8F9FA; border: 1px dashed var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
}

/* ================================================================
   TEAM COMMAND DECK — enterprise oversight header for Manager View
   ----------------------------------------------------------------
   Built entirely on existing custom properties. The "enterprise" feel
   comes from typography density, hairline borders and sharp corners,
   not a new color palette — var(--text-primary) is reused as a solid
   header background, which is the only place a token is used non-
   literally, and it stays within the existing system rather than
   introducing new hex values.
   ================================================================ */
.tcd-header {
  background: var(--text-primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 14px 16px;
}
.tcd-header-label {
  color: #fff; font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.tcd-header-sub { color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 3px; }

.tcd-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden;
  margin-bottom: 20px;
}
@media (min-width: 640px) {
  .tcd-grid { grid-template-columns: 1fr 1fr; }
  /* A single-column widget at an odd position ends up alone in its row —
     exposing the grid's own background (used to draw the 1px gap lines) as
     a blank phantom tile in the empty second cell — whenever it's either
     the last widget, or immediately followed by one that always spans both
     columns (.tcd-ticker-widget / .tcd-roster-widget). Checking :last-child
     alone missed the second case: some widgets (e.g. Campaign Resilience)
     only render when there's real data for them, so the widget count and
     which one ends up "last" both vary — this can't be pinned to a fixed
     nth-child position. */
  .tcd-grid > *:nth-child(odd):is(:last-child, :has(+ .tcd-ticker-widget, + .tcd-roster-widget)) {
    grid-column: 1 / -1;
  }
}

.tcd-widget { background: var(--card-bg); padding: 16px; border-left: 3px solid transparent; }
/* A colored left edge per widget — matches the accent-bar pattern already
   used on glossary terms, so the dashboard reads as designed rather than a
   stack of plain white boxes. Colors reused from elsewhere in the app
   (warning/accent-alt/accent tokens, the existing high-risk red, and the
   indigo already used on the AI-generation button) rather than introducing
   new ones. Targeted by grid position for the two widgets with no unique
   class (Risk = 1st, Trend = 2nd) and by class or position for the rest. */
.tcd-grid > .tcd-widget:nth-child(1) { border-left-color: var(--warning); }
.tcd-grid > .tcd-widget:nth-child(2) { border-left-color: var(--accent-alt); }
.tcd-ticker-widget { border-left-color: #B42318; }
.tcd-roster-widget { border-left-color: var(--accent); }
.tcd-grid > .tcd-widget:last-child { border-left-color: #4338CA; }
.tcd-widget-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 12px;
}
.tcd-widget-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tcd-widget-title-row .tcd-widget-title { margin-bottom: 0; }
.tcd-empty { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.tcd-widget-note { font-size: 10.5px; color: var(--text-secondary); margin-top: 6px; }

/* Band colours — reused consistently with the Decision Risk Score card */
.tcd-band-low  { color: var(--accent); }
.tcd-band-med  { color: #B8720B; }
.tcd-band-high { color: #B42318; }
.tcd-band-muted{ color: #94A3B8; }

/* Widget 1: Aggregate Risk Exposure */
.tcd-risk-num { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.tcd-risk-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: #E2E8F0; margin-bottom: 8px; }
.tcd-risk-seg.low  { background: var(--accent); }
.tcd-risk-seg.med  { background: #B8720B; }
.tcd-risk-seg.high { background: #B42318; }
.tcd-risk-legend { display: flex; gap: 12px; font-size: 11px; color: var(--text-secondary); margin-bottom: 10px; }
.tcd-risk-legend span { display: inline-flex; align-items: center; gap: 4px; }
.tcd-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.tcd-dot.low  { background: var(--accent); }
.tcd-dot.med  { background: #B8720B; }
.tcd-dot.high { background: #B42318; }
.tcd-mini-roster { border-top: 1px solid var(--border); padding-top: 8px; }
.tcd-mini-row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.tcd-mini-row span:first-child { color: var(--text-primary); }
.tcd-mini-row span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Widget 2: Alignment Trend */
.tcd-trend-body { display: flex; flex-direction: column; align-items: flex-start; }
.tcd-spark { width: 100%; max-width: 220px; height: 56px; }
.tcd-trend-readout { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; }

/* Widget 3: Systemic Blind Spots Ticker */
.tcd-ticker-widget { grid-column: 1 / -1; }
.tcd-ticker-toggle {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  /* Holds a word ("Pause" / "Resume"), not an icon: size to the label. */
  padding: 0 10px; height: 26px; font-size: 11px; font-weight: 600; white-space: nowrap;
  cursor: pointer; color: var(--text-secondary);
}
.tcd-ticker-body {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13.5px; line-height: 1.5; color: var(--text-primary);
  min-height: 40px;
}
.tcd-ticker-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: #94A3B8; }
.tcd-ticker-body.sev-high .tcd-ticker-dot { background: #B42318; }
.tcd-ticker-body.sev-med  .tcd-ticker-dot { background: #B8720B; }
.tcd-ticker-body.sev-low  .tcd-ticker-dot { background: var(--accent); }
.tcd-ticker-dots { display: flex; gap: 5px; margin-top: 10px; }
.tcd-ticker-pip { width: 5px; height: 5px; border-radius: 50%; background: var(--border); }
.tcd-ticker-pip.active { background: var(--text-primary); }

/* Blind Spot Report — expandable panel under the ticker */
.bsr-expand-btn {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 0 12px; height: 26px; font-size: 11px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.bsr-expand-btn:active { background: #F1F5F9; }
/* These pills stay 26px tall to look right in a dense header, but the touch
   target reaches 9px above and below: 44px in all. (-10px, because the
   offset is measured from inside the 1px border.) */
.tcd-ticker-toggle, .bsr-expand-btn { position: relative; touch-action: manipulation; }
.tcd-ticker-toggle::after, .bsr-expand-btn::after { content: ''; position: absolute; inset: -10px 0; }
.bsr-panel {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.bsr-section-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 10px;
}
.bsr-row { margin-bottom: 12px; }
.bsr-row:last-child { margin-bottom: 0; }
.bsr-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; gap: 8px; }
.bsr-row-label { font-size: 13px; color: var(--text-primary); }
.bsr-row-pct { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.bsr-bar { height: 6px; border-radius: 999px; background: #E2E8F0; overflow: hidden; }
.bsr-bar-fill { height: 100%; border-radius: 999px; }
.bsr-bar-fill.sev-high { background: #B42318; }
.bsr-bar-fill.sev-med  { background: #B8720B; }
.bsr-bar-fill.sev-low  { background: var(--accent); }
.bsr-affected-list { display: flex; flex-direction: column; }
.bsr-affected-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.bsr-affected-row:last-child { border-bottom: none; }
.bsr-affected-name { color: var(--text-primary); font-weight: 500; }
.bsr-affected-count { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bsr-assign-btn {
  width: 100%; margin-top: 16px; padding: 11px; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; border: none; font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: inherit;
}
.bsr-assign-btn:active { opacity: 0.85; }

/* Widget 4: Team Roster Health */
.tcd-roster-widget { grid-column: 1 / -1; }
.tcd-roster-list { display: flex; flex-direction: column; }
.tcd-roster-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.tcd-roster-row:last-child { border-bottom: none; }
.tcd-roster-name { font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; flex-direction: column; }
.tcd-roster-role { font-size: 10px; font-weight: 400; color: var(--text-secondary); opacity: 0.75; margin-top: 1px; }
.tcd-roster-seed-note { font-size: 10px; font-weight: 600; color: #92400E; margin-top: 2px; }
.tcd-roster-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tcd-roster-stat { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.tcd-roster-stat.muted { color: #B0B8C4; font-style: italic; }
.tcd-roster-chip {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #F1F5F9; font-variant-numeric: tabular-nums;
}

/* ---- Team View header entry point ----
   Was previously only reachable via a small text link buried at the bottom
   of the Progress tab. This is a persistent, always-visible entry point —
   hidden entirely for non-manager sessions via updateManagerUIVisibility(),
   never dynamically removed/added so there's nothing to forget to re-show. */
.team-view-header-btn {
  display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 14px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; white-space: nowrap;
}
.team-view-header-btn:active { opacity: 0.85; }

/* ---- Manager-mode practice preview banner ----
   Shown when a manager intentionally leaves Team View to preview/demo the
   player experience, so it never looks like an accidental mode. */
.practice-preview-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #FFF8E8; border: 1px solid #F0E2B8; border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 14px; font-size: 12.5px; color: #7A5D14;
}
.practice-preview-banner button {
  background: none; border: 1px solid #D9C480; border-radius: 999px;
  padding: 5px 12px; font-size: 11.5px; font-weight: 700; color: #7A5D14;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}

/* ================================================================
   🥋 AI GRADING LOADING OVERLAY — pure SVG + CSS keyframes, zero
   external images/GIFs, matches the app's existing custom properties.
   ================================================================ */
.ai-loading-overlay {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  background: rgba(248, 249, 250, 0.97);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: ai-overlay-in 0.2s ease;
}
@keyframes ai-overlay-in { from { opacity: 0; } to { opacity: 1; } }

/* Pulsing "dojo mat" energy ring behind the fighter */
.ai-loading-ring {
  position: absolute;
  width: 150px; height: 150px; border-radius: 50%;
  border: 3px solid var(--accent);
  opacity: 0.35;
  animation: ai-ring-pulse 1.6s ease-out infinite;
}
@keyframes ai-ring-pulse {
  0%   { transform: scale(0.7); opacity: 0.45; }
  70%  { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}

.ai-fighter {
  width: 110px; height: 128px;
  stroke: var(--text-primary);
  fill: none;
  overflow: visible;
}
.fighter-head { fill: var(--accent); stroke: none; }
.fighter-belt { fill: var(--accent); stroke: none; }
.fighter-torso,
.fighter-arm-back, .fighter-arm-front,
.fighter-leg-back, .fighter-leg-front {
  stroke-width: 5px; stroke-linecap: round;
}

/* Whole figure does a subtle weight-shift bob through the combo */
.ai-fighter { animation: fighter-bob 1.2s ease-in-out infinite; }
@keyframes fighter-bob {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-2px) rotate(-2deg); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(-3px) rotate(2deg); }
}

/* Punching arm: pivots forward from the shoulder (60,48) on the front beat */
.fighter-arm-front-pivot {
  transform-origin: 60px 48px;
  animation: arm-punch 1.2s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}
@keyframes arm-punch {
  0%, 60%, 100% { transform: rotate(0deg) scaleX(1); }
  20%           { transform: rotate(-8deg) scaleX(1.18); } /* strike extends */
  35%           { transform: rotate(2deg) scaleX(0.95); }  /* snap back */
}

/* Kicking leg: pivots from the hip (60,78) on the second beat, offset from the punch */
.fighter-leg-front-pivot {
  transform-origin: 60px 78px;
  animation: leg-kick 1.2s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}
@keyframes leg-kick {
  0%, 45%, 90%, 100% { transform: rotate(0deg) scaleX(1); }
  65%                { transform: rotate(-14deg) scaleX(1.15); } /* kick extends */
  80%                { transform: rotate(3deg) scaleX(0.95); }   /* retract */
}

/* Impact bursts flash briefly at the moment of each strike, then vanish */
.impact-burst { stroke: var(--warning); stroke-width: 2.5px; stroke-linecap: round; opacity: 0; }
.impact-burst-punch { animation: impact-flash 1.2s steps(1) infinite; animation-delay: 0.15s; }
.impact-burst-kick  { animation: impact-flash 1.2s steps(1) infinite; animation-delay: 0.68s; }
@keyframes impact-flash {
  0%, 12%, 100% { opacity: 0; }
  4%            { opacity: 1; }
}

.ai-loading-text {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  min-height: 20px; text-align: center; padding: 0 24px;
}
.ai-loading-subtext {
  font-size: 12.5px; color: var(--text-secondary); margin-top: -10px;
  text-align: center; padding: 0 28px; max-width: 320px; line-height: 1.5;
}
.ai-loading-offline-btn {
  margin-top: 6px; font-size: 13px; padding: 8px 18px; min-height: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .ai-fighter, .fighter-arm-front-pivot, .fighter-leg-front-pivot,
  .impact-burst, .ai-loading-ring { animation: none; }

  /* Wrong/correct/streak feedback: the border-color and background set
     outside these keyframes still carry the result — only the shake/bump/
     float motion is removed. None of these are watched for animationend
     by JS (all cleared via setTimeout), so dropping the animation is safe. */
  .ripple-bucket.correct-flash, .ripple-bucket.wrong-flash,
  .triage-meter.shake-error, .chain-slot.wrong,
  .ripple-streak-badge.pulse, .ripple-popup, .wizard-card {
    animation: none;
  }

  /* Sheets/toasts/banners still need to reach their visible position, but
     without an animated slide/float. Collapsing the duration (rather than
     transition: none) keeps the opacity component as a perceptible, if
     instant, state change instead of removing feedback outright. */
  .drawer-sheet, .app-toast, .connectivity-toast,
  .pull-refresh-indicator, .xp-earned-banner {
    transition-duration: 0.01s;
  }
}

/* ---- "Estimated" tag: distinguishes offline-heuristic risk/reactions from AI-graded ---- */
.heuristic-tag {
  display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; background: #F1F5F9; color: var(--text-secondary);
  padding: 2px 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle;
}

/* ---- Compare with Strong Answer ---- */
.compare-toggle-wrap { margin: 16px 0; }
.compare-toggle-btn {
  width: 100%; min-height: 44px; background: #F8F9FA; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text-primary);
  cursor: pointer; font-family: inherit;
}
.compare-panel { display: none; margin-top: 10px; }
.compare-panel.open { display: block; }
.compare-step-block { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.compare-step-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.compare-step-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); margin-bottom: 8px; }
.compare-col-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #94A3B8; margin: 8px 0 3px; }
.compare-col-label:first-of-type { margin-top: 0; }
.compare-your-text { font-size: 13px; line-height: 1.5; color: var(--text-secondary); background: #F8F9FA; border-radius: var(--radius-sm); padding: 8px 10px; }
.compare-model-text { font-size: 13px; line-height: 1.5; color: var(--text-primary); background: #F0F4F1; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 8px 10px; }

/* ---- Bullwhip Effect Visualizer ---- */
.bullwhip-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; margin: 16px 0; }
.bullwhip-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 10px; }
.bullwhip-svg { width: 100%; max-width: 340px; display: block; margin: 0 auto; }
.bullwhip-caption { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); margin-top: 10px; text-align: center; }
.bullwhip-caption strong { color: var(--text-primary); }

/* ---- Campaign entry + banners ---- */
.campaign-start-btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; width: 100%; min-height: 44px; margin-bottom: var(--space-2);
  padding: 0 14px;
  background: #fff; color: var(--text-primary); border: 1.5px solid var(--border);
  border-radius: var(--radius-md); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.campaign-progress-banner { background: #F0F4F1; border: 1px solid #C6DECD; border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px; }
.campaign-progress-top { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.campaign-meter-row { display: flex; gap: 10px; }
.campaign-meter { flex: 1; }
.campaign-meter-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); margin-bottom: 3px; }
.campaign-meter-track { height: 5px; background: #E2E8F0; border-radius: 999px; overflow: hidden; }
.campaign-meter-fill { height: 100%; width: 100%; border-radius: 999px; transform-origin: left; transform: scaleX(0); transition: transform 0.5s ease; }
.campaign-meter-fill.budget { background: var(--accent); }
.campaign-meter-fill.strain { background: #B8720B; }
.campaign-meter-fill.risk { background: #B42318; }
.campaign-summary-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 12px; font-size: 12.5px; color: #3730A3;
}
.campaign-summary-banner button {
  background: none; border: 1px solid #C7D2FE; border-radius: 999px; padding: 4px 10px;
  font-size: 11px; font-weight: 700; color: #3730A3; cursor: pointer; font-family: inherit; white-space: nowrap;
}

/* ---- Team Command Deck: Campaign Performance widget ---- */
.tcd-campaign-widget { grid-column: 1 / -1; }
.tcd-scope-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; background: #F1F5F9; color: var(--text-secondary); padding: 2px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.tcd-campaign-stats { display: flex; gap: 16px; }
.tcd-campaign-stat { text-align: center; }
.tcd-campaign-stat-num { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tcd-campaign-stat-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; margin-top: 2px; }

/* ---- Puzzles tab subtitle ---- */
.puzzles-tab-subtitle { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 14px; }

/* ---- Chain Reaction ---- */
.chain-slots { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; }
.chain-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin: 14px 0 6px; }
.chain-slots.reviewing .chain-slot { pointer-events: none; }
.chain-slot {
  min-height: 52px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; font-size: 13px; text-align: left; font-family: inherit; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.chain-slot.empty { border: 1.5px dashed var(--border); color: #94A3B8; background: none; min-height: 40px; padding: 6px 12px; }
.chain-slot.filled { border: 1.5px solid var(--accent); background: #F0F4F1; color: var(--text-primary); }
.chain-slot.correct { border-color: var(--accent); background: #E7F0EA; }
.chain-slot.wrong { border-color: #B42318; background: #FDECEC; animation: chain-shake 0.3s ease; }
@keyframes chain-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.chain-slot-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.chain-slot.empty .chain-slot-num { background: var(--border); color: var(--text-secondary); }

.chain-pool { display: flex; flex-direction: column; gap: 8px; }
.chain-card {
  min-height: 48px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; padding: 10px 12px; font-size: 13px; text-align: left; font-family: inherit;
  cursor: pointer; color: var(--text-primary);
}
.chain-card:active { background: #F8F9FA; }

.chain-share-box { background: #F8F9FA; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.chain-share-text { font-size: 13px; font-weight: 600; white-space: pre-line; margin-bottom: 10px; }

/* ---- Mandatory sign-in gate ---- */
.auth-gate {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(160deg, #1A3D28 0%, #2D5A3D 50%, #3A6B4A 100%);
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}
/* Until auth resolves, keep the gate hidden so signed-in users never see a
   green flash. JS adds .auth-resolved to <html> once state is known, then
   .auth-gate shows only if actually signed out. */
html:not(.auth-resolved) .auth-gate { display: none !important; }
.auth-gate-bg { display: none; }
.auth-gate-forest { display: none; }
.auth-gate-scroll {
  position: relative; z-index: 2;
  width: 100%; display: flex; align-items: center; justify-content: center;
}
.auth-gate-card {
  width: 100%; max-width: 380px;
  background: rgba(255,255,255,0.97);
  border-radius: 24px; padding: 28px 24px 24px;
  box-shadow: 0 32px 80px -16px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.12);
}
.auth-gate-logo {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.auth-gate-logo-text {
  font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 0.02em;
}
.auth-gate-mark {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent) 0%, #3A6247 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff;
  box-shadow: 0 6px 16px -4px rgba(74, 124, 89, 0.45);
}
.auth-gate-title { font-size: 22px; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.02em; color: #0D2518; }
.auth-gate-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }

.gate-remember-row {
  display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 2px 0;
  font-size: 12.5px; color: var(--text-secondary); cursor: pointer;
}
.gate-remember-row input { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; }

/* ---- Remembered-account quick switch strip ---- */
.gate-remembered-strip { margin-bottom: 18px; }
.gate-remembered-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: #94A3B8; margin-bottom: 8px;
}
.gate-remembered-chip {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; margin-bottom: 6px; cursor: pointer; text-align: left; font-family: inherit;
}
.gate-remembered-chip:active { background: #F8F9FA; }
.gate-remembered-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.gate-remembered-avatar.manager { background: linear-gradient(135deg, var(--accent), #3A6247); }
.gate-remembered-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.gate-remembered-meta { font-size: 11px; color: var(--text-secondary); }
.gate-remembered-divider {
  display: flex; align-items: center; gap: 10px; margin: 14px 0;
  font-size: 11px; color: #CBD5E1; text-transform: uppercase; letter-spacing: 0.04em;
}
.gate-remembered-divider::before, .gate-remembered-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.switch-account-forget {
  background: none; border: none; color: #94A3B8; font-size: 20px; line-height: 1;
  min-width: 44px; min-height: 44px; padding: 0; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);
}
.switch-account-forget:active { color: #B42318; }

/* Demo-data disclosure on the manager dashboard */
.tcd-demo-banner {
  background: #FFF7EA; border: 1px solid #F0DCB8; border-radius: var(--radius-sm);
  padding: 8px 12px; margin-bottom: 12px; font-size: 12px; color: #92400E;
}

/* ---- Guided Walkthrough ---- */
.walkthrough-entry {
  position: relative;
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: linear-gradient(135deg, #F0F4F1, #EAF0EC);
  border: 1.5px solid var(--accent); border-radius: var(--radius-sm);
  margin-bottom: var(--space-2); cursor: pointer;
}
.walkthrough-entry:active { background: #E4EDE7; }
.walkthrough-entry-icon { font-size: 24px; flex-shrink: 0; }
.walkthrough-entry-title { font-size: 14px; font-weight: 700; color: var(--accent); padding-right: 20px; }
.walkthrough-entry-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.walkthrough-entry-arrow { font-size: 22px; color: var(--accent); flex-shrink: 0; margin-left: auto; }
.walkthrough-entry-dismiss {
  position: absolute; top: 6px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.06); color: var(--text-secondary);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; padding: 0;
}
.walkthrough-entry-dismiss:active { background: rgba(0,0,0,0.12); }

.walkthrough-card {
  background: #fff; border-radius: 18px; width: 100%; max-width: 420px;
  max-height: 90vh; max-height: 90dvh; overflow-y: auto; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px -12px rgba(30,41,59,0.22);
}
.walkthrough-header { display: flex; align-items: center; padding: 16px 20px 10px; flex-shrink: 0; }
.walkthrough-progress { display: flex; gap: 6px; align-items: center; }
.wt-dot { width: 7px; height: 7px; border-radius: 50%; background: #D1D5DB; transition: background 0.2s; }
.wt-dot.active { background: var(--accent); width: 20px; border-radius: 4px; }
#walkthroughBody { padding: 4px 24px 8px; flex: 1; }
.walkthrough-footer { display: flex; justify-content: space-between; padding: 12px 20px 20px; gap: 10px; flex-shrink: 0; border-top: 1px solid var(--border); margin-top: 8px; }
.walkthrough-footer .action { min-width: 90px; }

.wt-icon { font-size: 36px; text-align: center; margin-bottom: 10px; }
.wt-title { font-size: 20px; font-weight: 800; margin: 0 0 12px; text-align: center; }
.wt-body { font-size: 14px; line-height: 1.6; margin: 0 0 12px; color: var(--text-primary); }
.wt-muted { color: var(--text-secondary); }
.wt-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #94A3B8; margin-bottom: 10px; }

.wt-scenario-card { background: #F8F9FA; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 14px; }
.wt-scenario-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.wt-scenario-prompt { font-size: 13px; line-height: 1.55; color: var(--text-secondary); }

.wt-step-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-bottom: 4px; }
.wt-step-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 14px; }

.wt-example-box { background: #F0F4F1; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 12px 14px; margin-bottom: 14px; }
.wt-example-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 6px; }
.wt-example-text { font-size: 13px; line-height: 1.6; color: var(--text-primary); font-style: italic; }

.wt-annotation { background: #FAFAFA; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.wt-annotation-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748B; margin-bottom: 6px; }
.wt-annotation p { font-size: 13px; line-height: 1.6; margin: 0; color: var(--text-primary); }

/* ---- Auth gate product pitch ---- */
.auth-gate-pitch {
  background: #F8F9FA; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px;
}
.auth-gate-pitch-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
}
.auth-gate-pitch-icon { flex-shrink: 0; font-size: 15px; margin-top: 1px; }

/* ---- Scenario card difficulty + time chips ---- */
.card-meta-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.card-diff-chip {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; letter-spacing: 0.02em;
}
.diff-1 { background: #D1FAE5; color: #065F46; }
.diff-2 { background: #FEF3C7; color: #92400E; }
.diff-3 { background: #FEE2E2; color: #991B1B; }
.card-time-chip {
  font-size: 10.5px; color: var(--text-secondary);
  background: #F1F5F9; border-radius: 20px; padding: 2px 8px;
}

/* ---- What Next nudge ---- */
.whatnext-card {
  background: #fff; border-radius: 18px; width: 100%; max-width: 360px;
  padding: 28px 24px 20px; text-align: center;
  box-shadow: 0 24px 60px -12px rgba(30,41,59,0.22);
}
.whatnext-icon { font-size: 38px; margin-bottom: 12px; }
.whatnext-heading { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.whatnext-body { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 20px; }
.whatnext-cta { width: 100%; margin-bottom: 8px; }
.whatnext-skip { width: 100%; color: var(--text-secondary); background: none; border: none; font-size: 13px; cursor: pointer; padding: 6px; font-family: inherit; }
.whatnext-skip:active { opacity: 0.6; }

/* ---- Recommended Next card (Progress tab) ---- */
.rec-next-card {
  background: linear-gradient(135deg, #F0F4F1, #EAF0EC);
  border: 1.5px solid var(--accent); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 16px;
}
.rec-next-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.rec-next-icon { font-size: 22px; flex-shrink: 0; }
.rec-next-title { font-size: 13.5px; font-weight: 700; }
.rec-next-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.rec-next-stat { font-size: 17px; font-weight: 800; color: var(--accent); text-align: right; flex-shrink: 0; line-height: 1.2; }
.rec-next-body { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }

/* ---- Puzzle discovery: tab badge + home teaser ---- */
.tab-label-wrap { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.puzzle-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  border-radius: 20px; padding: 1px 5px;
}
.puzzle-tab-badge.dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: #F97316; /* orange — unsolved */
}
.puzzle-tab-badge.streak {
  background: #FEF3C7; color: #92400E;
  border: 1px solid #FCD34D;
}

.daily-puzzle-teaser {
  align-items: center; gap: 10px; padding: 10px 14px;
  background: #FFFBEB; border: 1.5px solid #FCD34D;
  border-radius: var(--radius-sm); margin-bottom: var(--space-2);
  font-size: 12.5px; color: #92400E; cursor: pointer;
  font-weight: 500;
}
.daily-puzzle-teaser:active { background: #FEF3C7; }

/* ---- Connectivity toast ---- */
.connectivity-toast {
  /* Was a bare `bottom: 80px`. Every other bottom-anchored fixed element adds
     the safe-area inset; without it this toast sat behind the floating nav
     pill on any notched iPhone (nav top edge lands ~89px up once the 34px
     home-indicator inset is applied). */
  /* translateY(240px) here (was 120%, i.e. relative to the toast's OWN
     height) must stay in sync with the matching hidden-state value in
     showConnectivityToast()'s setTimeout (js/components.js) — see the
     comment there for why a percentage of the toast's own height doesn't
     reliably clear its `bottom: 80px + safe-area` anchor and left it
     sitting on top of the bottom tab bar after the 5s auto-dismiss. */
  position: fixed; bottom: calc(80px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(240px);
  z-index: 9998; max-width: 320px; width: calc(100% - 32px);
  padding: 10px 16px; border-radius: 20px;
  font-size: 13px; font-weight: 600; text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: transform 0.3s var(--ease-bounce);
  pointer-events: none;
}
.connectivity-toast.online  { background: #D1FAE5; color: #065F46; }
.connectivity-toast.offline { background: #FEF3C7; color: #92400E; }

/* ---- Pull to refresh ---- */
.pull-refresh-indicator {
  /* The page uses viewport-fit=cover with a black-translucent status bar, so
     the web view extends UNDER the status bar and env(safe-area-inset-top) is
     ~47-59px on notched iPhones. At a flat `top: 0` the visible state put this
     bar's centred label behind the clock/battery. Growing the bar by the inset
     and padding its content down keeps the label clear. Both values collapse
     to exactly the previous geometry when the inset is 0 (Android/desktop). */
  position: fixed; top: 0; left: 0; right: 0; z-index: 9997;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
  font-size: 12.5px; color: var(--text-secondary);
  background: var(--bg);
  transform: translateY(calc(-56px - env(safe-area-inset-top)));
  transition: transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pull-refresh-indicator.visible { transform: translateY(0); }
.pull-refresh-indicator.refreshing { transform: translateY(0); }
.pull-refresh-spinner {
  width: 18px; height: 18px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  display: none;
}
.pull-refresh-indicator.refreshing .pull-refresh-spinner {
  display: block; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Profile drawer section labels ---- */
.drawer-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #94A3B8; margin: 16px 0 6px;
}

/* ---- My Team row with last active + reminder button ---- */
.my-team-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; min-height: 44px; border-bottom: 1px solid var(--border); }
.my-team-row:last-child { border-bottom: none; }
.my-team-row-main { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; }
.team-remind-btn { background: none; border: 1.5px solid var(--border); border-radius: var(--radius-sm); min-width: 44px; min-height: 44px; padding: 0; font-size: 16px; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.team-remind-btn:active { background: #F0F4F1; }

/* ---- Generic app toast ---- */
.app-toast {
  position: fixed; bottom: calc(90px + env(safe-area-inset-bottom)); left: 16px; right: 16px;
  transform: translateY(200%); opacity: 0;
  z-index: 10000; max-width: 320px; margin: 0 auto;
  padding: 10px 16px; border-radius: 20px; font-size: 13px; font-weight: 600;
  text-align: center; background: #D1FAE5; color: #065F46;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: transform 0.3s var(--ease-bounce), opacity 0.3s ease;
  pointer-events: none;
}
.app-toast.error { background: #FEE2E2; color: #991B1B; }

/* ---- Gate mode toggle (Sign In / Sign Up) ---- */
.gate-mode-row {
  display: flex; gap: 4px; background: #F1F5F9; border-radius: 12px;
  padding: 4px; margin-bottom: 16px;
}
.gate-mode-btn {
  flex: 1; padding: 10px; border: none; border-radius: 9px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  background: none; color: var(--text-secondary);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; font-family: inherit;
}
.gate-mode-btn.active {
  background: #fff; color: var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* ---- Gate inputs — bigger, more comfortable ---- */
.gate-input {
  width: 100%; box-sizing: border-box;
  margin-top: 10px; padding: 14px 16px;
  font-size: 16px; font-family: inherit; line-height: 1.5;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: #F8F9FA; color: var(--text-primary);
  outline: none; transition: border-color 0.15s;
  -webkit-appearance: none;
}
.gate-input:focus { border-color: var(--accent); background: #fff; }
.gate-input::placeholder { color: #94A3B8; }

.gate-submit-btn { width: 100%; margin-top: 16px; padding: 15px; font-size: 15px; border-radius: 12px; }

/* ---- Tab bar safe area (Android) ---- */
.panel {
  min-height: calc(100dvh - 52px - 10px - env(safe-area-inset-bottom, 16px));
}

/* ── iPhone only: floating frosted-glass pill ── */
@supports (-webkit-touch-callout: none) {

  /* Hide Custom tab — its features live in the Scenarios panel on iPhone */
  .tab[data-tab="mine"] { display: none !important; }

  .tabs {
    left: 16px;
    right: 16px;
    /* Sit close to the physical bottom edge like Apple Music. We only add a
       small fraction of the safe-area inset, not the whole thing, so the bar
       hugs the bottom instead of floating high above the home indicator. */
    bottom: max(8px, calc(env(safe-area-inset-bottom) - 12px));
    border-top: none;
    border-radius: 26px;
    background: rgba(250, 250, 250, 0.88);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.14),
      0 2px 6px rgba(0, 0, 0, 0.08),
      inset 0 0.5px 0 rgba(255, 255, 255, 0.8);
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    padding: 6px 10px;
    /* Even spacing with equal gaps between and around the 4 tabs */
    justify-content: space-between;
    gap: 4px;
  }

  .tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px 5px;
    color: #48484A;
    border-radius: 18px !important;
    transition: background 0.18s ease, color 0.18s ease;
  }

  /* Active: full tab (icon + label) gets the green pill — Apple Music style */
  .tab.active {
    color: var(--accent);
    background: rgba(74, 124, 89, 0.13) !important;
    border-radius: 18px !important;
  }
  .tab.active .tab-icon-wrap {
    background: none;
    border-radius: 0;
  }

  /* Custom panel needs a way back on iPhone (no nav icon) */
  .custom-back-btn { display: flex !important; }

  body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .panel {
    min-height: calc(100dvh - 80px - env(safe-area-inset-bottom));
  }
  .wizard-nav {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
  body.wizard-active .wizard-nav { bottom: 0; }
  body.wizard-active.kb-open .wizard-nav { bottom: var(--kb-inset, 0px); }
}

/* ---- Adaptive Learning Path card ---- */
.lp-card {
  background: linear-gradient(150deg, #F2F7F4 0%, #EAF1EC 100%);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 16px; margin-bottom: 18px;
}
.lp-header { margin-bottom: 12px; }
.lp-title { font-size: 15px; font-weight: 800; color: var(--accent); letter-spacing: -0.01em; }
.lp-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.lp-item {
  display: flex; align-items: flex-start; gap: 11px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 13px; margin-bottom: 8px;
  cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lp-item:last-child { margin-bottom: 0; }
.lp-item:active { transform: scale(0.985); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.lp-item-rank {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.lp-item-body { flex: 1; min-width: 0; }
.lp-item-label {
  font-size: 10.5px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px;
}
.lp-item-title { font-size: 13.5px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.lp-item-why { font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); }
.lp-item-why strong { color: var(--text-primary); font-weight: 700; }
.lp-item-arrow { flex-shrink: 0; font-size: 20px; color: var(--accent); align-self: center; }

/* ---- Campaign completion modal ---- */
.cc-card {
  background: #fff; border-radius: 20px; width: 100%; max-width: 400px;
  max-height: 88vh; max-height: 88dvh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 26px 22px 22px; text-align: center;
  box-shadow: 0 24px 60px -12px rgba(30,41,59,0.3);
}
.cc-trophy { font-size: 40px; margin-bottom: 6px; }
.cc-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.cc-meta { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; margin-bottom: 18px; }

.cc-verdict { border-radius: 14px; padding: 14px 16px; margin-bottom: 20px; text-align: left; }
.cc-verdict-good { background: #ECFDF3; border: 1.5px solid #A6E9C1; }
.cc-verdict-warn { background: #FFF7EA; border: 1.5px solid #F0DCB8; }
.cc-verdict-neutral { background: #F1F5F9; border: 1.5px solid var(--border); }
.cc-verdict-title { font-size: 14.5px; font-weight: 800; margin-bottom: 5px; }
.cc-verdict-good .cc-verdict-title { color: #05603A; }
.cc-verdict-warn .cc-verdict-title { color: #92400E; }
.cc-verdict-sub { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }

.cc-section-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #94A3B8;
  text-align: left; margin-bottom: 10px;
}
.cc-arc {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 10px; min-height: 100px; margin-bottom: 10px;
  padding: 0 4px;
}
.cc-arc-col { display: flex; flex-direction: column; align-items: center; flex: 1; max-width: 60px; }
.cc-arc-score { font-size: 11px; font-weight: 700; margin-bottom: 4px; color: var(--text-primary); }
.cc-arc-bar { width: 100%; border-radius: 6px 6px 0 0; transition: height 0.3s ease; }
.cc-band-good { background: linear-gradient(180deg, #6BAF82, #4A7C59); }
.cc-band-mid  { background: linear-gradient(180deg, #FCD34D, #E8A33D); }
.cc-band-low  { background: linear-gradient(180deg, #F5A3A3, #DC6868); }
.cc-arc-label { font-size: 10.5px; color: var(--text-secondary); margin-top: 5px; font-weight: 600; }
.cc-avg { font-size: 12px; color: var(--text-secondary); margin-bottom: 20px; }

.cc-state-row { display: flex; gap: 8px; margin-bottom: 4px; }
.cc-state {
  flex: 1; background: #F8F9FA; border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 6px;
}
.cc-state-num { font-size: 19px; font-weight: 800; color: var(--accent); line-height: 1; }
.cc-state-label { font-size: 10px; color: var(--text-secondary); margin-top: 4px; }

/* ---- Progress: enhanced skill breakdown ---- */
.skill-bd-subtitle { font-size: 11.5px; color: var(--text-secondary); margin-bottom: 12px; }
.skill-bd-left { flex: 1; min-width: 0; }
.skill-bd-namerow { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.skill-bd-num { font-size: 10px; font-weight: 800; color: #94A3B8; flex-shrink: 0; }
.skill-bd-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.skill-bd-pct { font-size: 11px; font-weight: 700; flex-shrink: 0; border-radius: 20px; padding: 1px 7px; }
.skill-bd-pct-high { background: #FEE2E2; color: #991B1B; }
.skill-bd-pct-mid  { background: #FEF3C7; color: #92400E; }
.skill-bd-pct-low  { background: #D1FAE5; color: #065F46; }
.skill-bd-impl { font-size: 11px; line-height: 1.5; color: #92400E; margin-bottom: 4px; }
.skill-bd-track { height: 6px; background: #F1F5F9; border-radius: 99px; overflow: hidden; margin-top: 2px; }
.skill-bd-fill { height: 100%; width: 100%; border-radius: 99px; transform-origin: left; transform: scaleX(0); transition: transform 0.4s ease; }
.miss-high { background: #DC6868; }
.miss-mid  { background: #F59E0B; }
.miss-low  { background: #4A7C59; }
.skill-worst { background: #FFFBEB; border-radius: 10px; padding: 8px 10px; margin: 4px -10px; }

/* ---- Progress: score trend ---- */
.prog-trend-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 14px;
}
.prog-trend-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.prog-trend-title { font-size: 13px; font-weight: 700; }
.prog-trend-delta { font-size: 12px; font-weight: 600; }
.prog-trend-spark { width: 100%; display: block; }
.prog-trend-foot { font-size: 11px; color: var(--text-secondary); margin-top: 8px; }

/* ---- Progress: peer benchmark ---- */
.peer-bench-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 14px;
}
.peer-bench-title { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.peer-bench-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.peer-bench-stat { flex: 1; text-align: center; }
.peer-bench-num { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.peer-bench-label { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.peer-bench-vs { font-size: 12px; color: var(--text-secondary); font-weight: 600; flex-shrink: 0; }
.peer-bench-note { font-size: 12px; line-height: 1.5; border-radius: 8px; padding: 8px 10px; }
.peer-bench-above { background: #ECFDF3; color: #065F46; }
.peer-bench-below { background: #FEF3C7; color: #92400E; }
.peer-bench-even  { background: #F1F5F9; color: var(--text-secondary); }

/* ---- P1: Difficulty filter pills — horizontal scroll, no wrap ---- */
/* Right-edge fade so a hard scroll cutoff (e.g. "Advanced" sliced off on a
   360px phone) reads as "scroll for more" rather than a broken layout —
   the row genuinely scrolls (overflow-x: auto below), it just had no
   visual affordance hinting that before. */
.diff-filter-row {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin: 8px 0 4px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}
.diff-filter-row::-webkit-scrollbar { display: none; }
.diff-pill { border: 1.5px solid var(--border); border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 600; background: none; cursor: pointer; color: var(--text-secondary); font-family: inherit; white-space: nowrap; flex-shrink: 0; }
.diff-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- P2: Glossary collapsed rows ---- */
/* ============================================================
   GLOSSARY — redesigned browse view
   ============================================================ */

/* Progress strip at top of browse list */
.gloss-progress-strip {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding: 10px 14px;
  background: #F0F7F3; border-radius: var(--radius-sm);
  border: 1px solid #C8E0D0;
}
.gloss-progress-text { font-size: 12px; font-weight: 600; color: var(--accent); flex-shrink: 0; }
.gloss-prog-bar { flex: 1; height: 5px; background: #C8E0D0; border-radius: 999px; overflow: hidden; }
.gloss-prog-fill { height: 100%; width: 100%; background: var(--accent); border-radius: 999px; transform-origin: left; transform: scaleX(0); transition: transform 0.4s ease; }

/* Spaced repetition — "N terms due for review" banner */
.sr-due-banner {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-bottom: 14px; padding: 10px 14px;
  background: #FEF3C7; border: 1px solid #FDE68A; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: #92400E;
  text-align: left; cursor: pointer;
}
.sr-due-banner:active { background: #FDE68A; }
.sr-due-banner-icon { font-size: 14px; flex-shrink: 0; }

/* Per-term "Due for review" badge in the browse list */
.sr-due-badge {
  font-size: 11px; font-weight: 700; color: #92400E;
  background: #FEF3C7; border-radius: 999px; padding: 1px 6px;
  flex-shrink: 0;
}

/* Per-term "tracked, not due yet" badge — confirms a miss was recorded */
.sr-scheduled-badge {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-secondary, #EEE); border: 1px solid #D9D9D9;
  border-radius: 999px; padding: 1px 6px;
  flex-shrink: 0;
}

/* Container — bleed to panel edges */
.gloss-list { margin: 0 -16px; }
/* On a wide screen the bleed made the list wider than the search box and
   filters above it; keep it on the content column instead. */
@media (min-width: 640px) { .gloss-list { margin: 0; } }

/* Each row */
.gloss-row {
  position: relative;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease;
}
.gloss-row:first-child { border-top: 1px solid var(--border); }

/* Left accent stripe via pseudo-element */
.gloss-row::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 0 2px 2px 0;
}
.gloss-cat-demand::before  { background: #4A7C59; }
.gloss-cat-supply::before  { background: #2563EB; }
.gloss-cat-cross::before   { background: #7C3AED; }
.gloss-cat-general::before { background: #94A3B8; }

/* Mastered rows get a subtle tint */
.gloss-row.gloss-mastered { background: #FAFFFE; }
.gloss-mastered-check {
  font-size: 11px; font-weight: 700; color: var(--accent);
  background: #D1FAE5; border-radius: 999px; padding: 1px 6px;
  flex-shrink: 0;
}

/* Row header — the clickable trigger */
.gloss-row-header {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 16px 15px 18px;
  cursor: pointer; min-height: 56px;
  user-select: none; -webkit-user-select: none;
  background: none; border: none; width: 100%;
  font-family: inherit; text-align: left;
}
.gloss-row-header:active { background: rgba(0,0,0,0.02); }

.gloss-row-term {
  font-size: 15px; font-weight: 600;
  color: var(--text-primary); flex: 1;
  line-height: 1.3;
}

/* Category badge (always visible in row) */
.gloss-cat-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; flex-shrink: 0; letter-spacing: 0.02em;
  white-space: nowrap;
}
.gloss-cat-badge.demand  { background: #E7F0EA; color: #4A7C59; }
.gloss-cat-badge.supply  { background: #DBEAFE; color: #1D4ED8; }
.gloss-cat-badge.cross   { background: #EDE9FE; color: #6D28D9; }
.gloss-cat-badge.general { background: #F1F5F9; color: #475569; }

/* Chevron */
.gloss-row-chevron {
  font-size: 16px; color: #CBD5E1;
  transition: transform 0.2s ease, color 0.15s ease;
  flex-shrink: 0; font-weight: 400; line-height: 1;
}
.gloss-row.open .gloss-row-chevron { transform: rotate(90deg); color: var(--text-secondary); }

/* Expanded body */
.gloss-row-body { padding: 0 16px 16px 18px; }

/* Definition block */
.gloss-def-block {
  background: #F8FAFC; border-radius: var(--radius-sm);
  border: 1px solid var(--border); padding: 14px 16px;
  margin-bottom: 12px; margin-top: 2px;
}
.gloss-def-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 6px;
}
.gloss-row-def {
  font-size: 14.5px; line-height: 1.7;
  color: var(--text-primary);
}

/* Test me button */
.gloss-testme-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1.5px solid var(--accent); background: none; color: var(--accent);
  font-size: 12px; font-weight: 700; padding: 6px 14px;
  border-radius: 999px; cursor: pointer; font-family: inherit;
  transition: background 0.15s ease;
}
.gloss-testme-btn:active { background: #E7F0EA; }

.gloss-inline-test { margin-top: 12px; }

/* Test me — write-your-answer state */
.gloss-test-prompt {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 8px; line-height: 1.4;
}
.gloss-test-input {
  width: 100%; box-sizing: border-box; font-family: inherit;
  font-size: 14px; line-height: 1.5; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  min-height: 72px; resize: vertical; background: var(--card-bg);
  transition: border-color 0.15s ease;
}
.gloss-test-input:focus { outline: none; border-color: var(--accent); }
/* scroll-margin-bottom clears the fixed .tabs bar (~64px + safe-area) that
   sits on top of the page's normal scroll content — without it,
   scrollIntoView({block:'end'}) (see startInlineTest in components.js)
   aligns this row to the raw viewport bottom, which is exactly where the
   tab bar visually covers it, so the Check/Reveal buttons land hidden
   underneath the bar instead of above it. */
.gloss-test-actions { display: flex; gap: 8px; margin-top: 8px; scroll-margin-bottom: calc(80px + env(safe-area-inset-bottom)); }

/* Test result states */
.gloss-test-result {
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 13px; font-weight: 600; margin-bottom: 10px;
  display: flex; align-items: flex-start; gap: 8px;
}
.gloss-result-correct { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.gloss-result-partial  { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.gloss-result-wrong    { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.gloss-test-result-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* Definition blurs out when test is active */
.gloss-def-blurred {
  filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  transition: filter 0.2s ease;
}
.gloss-def-block { transition: filter 0.2s ease; }
.gloss-model-answer {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
  margin-bottom: 10px;
}
.gloss-model-answer strong { color: var(--text-primary); font-weight: 600; display: block; margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- P4: Custom questionnaire ---- */
.custom-toggle-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.custom-toggle-label { font-size: 13px; font-weight: 600; }
.custom-toggle-group { display: flex; background: #F1F5F9; border-radius: 10px; padding: 3px; gap: 2px; }
.custom-toggle-btn { border: none; background: none; padding: 5px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--text-secondary); }
.custom-toggle-btn.active { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.custom-q-card { background: #F8F9FA; border: 1.5px solid var(--border); border-radius: 16px; padding: 18px 16px; margin-bottom: 16px; }
.custom-q-title { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.custom-q-sub { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.custom-q-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.custom-q-chip { border: 1.5px solid var(--border); border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; background: #fff; cursor: pointer; color: var(--text-secondary); font-family: inherit; }
.custom-q-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.custom-q-step { margin-top: 16px; }
.custom-q-step-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 8px; }
.custom-q-step-hint { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.custom-manual-details { margin-top: 8px; }
.custom-manual-summary { font-size: 13px; color: var(--text-secondary); cursor: pointer; padding: 8px 0; }

/* ---- Custom panel back button (iPhone only — hidden on Android) ---- */
.custom-back-btn {
  display: none;
  align-items: center; gap: 6px;
  background: none; border: none;
  color: var(--accent); font-family: inherit;
  font-size: 14px; font-weight: 600;
  padding: 4px 0; margin-bottom: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.custom-back-btn:active { opacity: 0.6; }

/* ---- Custom-only filter button on scenarios page ---- */
.custom-only-scenarios-btn {
  width: 100%; margin-bottom: var(--space-3);
  border: 1.5px solid var(--border); border-radius: 10px;
  background: none; padding: 9px 14px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; font-family: inherit; text-align: left;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.custom-only-scenarios-btn.active {
  background: #E7F0EA; border-color: var(--accent); color: var(--accent);
}

/* ---- Judgment intro card ---- */
.judgment-intro-card {
  background: linear-gradient(135deg, #F0F7F4 0%, #E8F1EC 100%);
  border: 1.5px solid var(--accent);
  border-radius: 18px; padding: 22px 18px; margin-bottom: 14px; text-align: center;
}
.judgment-intro-icon { font-size: 32px; margin-bottom: 10px; }
.judgment-intro-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; }
.judgment-intro-sub { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 18px; }
.judgment-count-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 10px; }
.judgment-count-row { display: flex; gap: 8px; justify-content: center; }
.judgment-count-btn {
  flex: 1; max-width: 72px; padding: 9px 0;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  color: var(--text-secondary); transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.judgment-count-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- Quiz shell — redesigned ---- */
.quiz-shell { display: flex; flex-direction: column; gap: 12px; }
.quiz-meta-row { display: flex; align-items: center; justify-content: space-between; }
.quiz-kind-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent); background: #E7F0EA; border-radius: 20px; padding: 3px 10px;
}
.quiz-counter { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.quiz-progress-bar { height: 4px; background: #E2E8F0; border-radius: 99px; overflow: hidden; }
.quiz-progress-fill { height: 100%; width: 100%; background: var(--accent); border-radius: 99px; transform-origin: left; transform: scaleX(0); transition: transform 0.3s ease; }
.quiz-score-row { font-size: 11.5px; color: var(--text-secondary); }
.quiz-question-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 18px; min-height: 80px;
}
.quiz-term-big { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }
.quiz-def-text { font-size: 15px; line-height: 1.6; color: var(--text-primary); font-weight: 400; }
.quiz-tf-statement { font-size: 14px; line-height: 1.65; color: var(--text-primary); }
.quiz-answer-input {
  width: 100%; box-sizing: border-box; font-family: inherit;
  font-size: 14px; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: 12px;
  min-height: 90px; resize: vertical;
}
.quiz-answer-input:focus { border-color: var(--accent); outline: none; }
.quiz-action-btn { width: 100%; margin-top: 0; }
.quiz-reveal-card {
  background: #F0F7F4; border: 1.5px solid #B2D8C2;
  border-radius: 14px; padding: 14px 16px;
}
.quiz-reveal-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 6px; }
.quiz-reveal-text { font-size: 14px; line-height: 1.6; }
.quiz-reveal-term { font-size: 18px; font-weight: 800; }
.quiz-selfgrade-row { display: flex; gap: 8px; }
.quiz-grade-btn { flex: 1; padding: 12px; border: none; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.quiz-grade-right { background: #D1FAE5; color: #065F46; }
.quiz-grade-wrong { background: #FEE2E2; color: #991B1B; }
.quiz-tf-row { display: flex; gap: 10px; }
.quiz-tf-btn {
  flex: 1; padding: 14px; border: 1.5px solid var(--border);
  border-radius: 14px; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit; background: var(--card-bg);
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.quiz-tf-correct { background: #D1FAE5 !important; border-color: #4A7C59 !important; color: #065F46; }
.quiz-tf-wrong { background: #FEE2E2 !important; border-color: #DC2626 !important; color: #991B1B; }
.quiz-tf-dim { opacity: 0.45; }
.quiz-explain-card {
  background: #F8F9FA; border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0; padding: 12px 14px;
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
}


/* ============================================================
   Settings sheet primitives (audit §3.3, HIG-02..07)
   One component system instead of borrowed classes + inline styles.
   Every interactive row/control is at least 44px tall.
   ============================================================ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.settings-sheet { padding-top: var(--space-1); background: var(--bg); }
.settings-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; margin-bottom: var(--space-1); position: sticky; top: calc(-1 * var(--space-1)); background: var(--bg); z-index: 1; }
.settings-nav__back, .settings-nav__done { background: none; border: none; font-family: inherit; font-size: 15px; color: var(--accent); cursor: pointer; min-height: 44px; min-width: 44px; padding: 0 var(--space-1); touch-action: manipulation; }
.settings-nav__back { justify-self: start; }
.settings-nav__back[hidden] { display: block; visibility: hidden; }
.settings-nav__done { justify-self: end; font-weight: 600; }
.settings-nav__title { margin: 0; font-size: 16px; font-weight: 600; text-align: center; }
.settings-group { margin-bottom: var(--space-3); }
.settings-group__title { margin: 0 0 var(--space-1) var(--space-2); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.settings-group__rows { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.settings-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px var(--space-2); border: none; border-bottom: 1px solid var(--border); background: none; font-family: inherit; font-size: 15px; color: var(--text-primary); text-align: left; box-sizing: border-box; }
.settings-group__rows > .settings-row:last-child, #rosterTeamList > .settings-row:last-child { border-bottom: none; }
.settings-row--link { cursor: pointer; touch-action: manipulation; }
.settings-row--link:active { background: #F1F5F9; }
.settings-row__label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.settings-row__sub { font-size: 12px; color: var(--text-secondary); font-weight: 400; line-height: 1.4; }
.settings-row__value { color: var(--text-secondary); font-size: 14px; text-align: right; overflow-wrap: anywhere; max-width: 60%; }
.settings-row__chevron { color: #94A3B8; font-size: 20px; line-height: 1; }
.settings-row__lead { display: flex; }
.settings-row--destructive { color: #B42318; justify-content: center; font-weight: 500; }
.settings-row--destructive .settings-row__label { align-items: center; text-align: center; }
.settings-row--destructive .settings-row__sub { color: var(--text-secondary); }
.settings-row--stack { flex-direction: column; align-items: stretch; gap: var(--space-1); }
.settings-row--field { gap: var(--space-1); }
.settings-row--member { padding: 0 var(--space-1) 0 0; gap: 4px; }
.settings-member-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px var(--space-2); background: none; border: none; font-family: inherit; font-size: 15px; color: var(--text-primary); text-align: left; cursor: pointer; touch-action: manipulation; }
.settings-member-main:active { background: #F1F5F9; }
.settings-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.settings-input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 16px; color: var(--text-primary); background: var(--card-bg); box-sizing: border-box; }
.settings-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.settings-inline-btn { min-height: 44px; min-width: 64px; padding: 0 var(--space-2); border: none; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.settings-full-btn { width: 100%; min-height: 44px; }
.settings-stack { display: flex; flex-direction: column; gap: var(--space-1); }
.settings-stack .action { width: 100%; min-height: 44px; }
.settings-footnote { font-size: 12px; color: var(--text-secondary); padding: var(--space-1) var(--space-2) 0; min-height: 1em; }
.settings-toggle-row { cursor: pointer; }
.settings-prose { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.settings-prose p { margin: 0; }
.settings-prose strong { color: var(--text-primary); }

/* ---- Privacy notice (js/features/privacy/) ---- */
.privacy-overlay { z-index: 10000; } /* above the sign-in gate (9999): reachable from it */
.privacy-card { max-height: 86dvh; overflow-y: auto; }
.privacy-title { font-size: 17px; margin: 0 0 var(--space-1); }
.privacy-body { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.privacy-body h3 { font-size: 13px; color: var(--text-primary); margin: var(--space-2) 0 4px; }
.privacy-body p, .privacy-body ul { margin: 0 0 var(--space-1); }
.privacy-body ul { padding-left: 18px; }
.privacy-body strong { color: var(--text-primary); }
.privacy-draft-flag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--warning); background: #FFF7EA; border-radius: 999px; padding: 2px 10px; }
.privacy-btn { width: 100%; min-height: 44px; margin-top: var(--space-2); }
.gate-privacy-link { display: block; margin: 10px auto 0; min-height: 44px; padding: 0 var(--space-1); background: none; border: none; font-family: inherit; font-size: 13px; color: var(--text-secondary); text-decoration: underline; cursor: pointer; }
.wizard-privacy-hint { font-size: 12px; color: var(--text-secondary); background: #F1F5F9; border-radius: var(--radius-sm); padding: 6px 10px; margin-bottom: 10px; }

.gate-signup-note { font-size: 13px; color: var(--text-secondary); margin: 14px 0 8px; line-height: 1.45; }

/* ---- Team picker (js/features/team-dashboard/ui.js) ---- */
.tcd-team-picker { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-1) 0 var(--space-2); }
.tcd-team-picker__label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.tcd-team-picker__select { min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 15px; background: var(--card-bg); color: var(--text-primary); }

/* ---- Organization admin (js/features/org-admin/ui.js) ---- */
.org-team__head { display: flex; gap: var(--space-1); }
.org-team__managers summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; color: var(--accent); }
.org-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; }
.org-check input { width: 20px; height: 20px; }
.org-link-danger { align-self: flex-start; min-height: 44px; padding: 0; background: none; border: none; font-family: inherit; font-size: 13px; color: #B42318; cursor: pointer; }
.org-person__controls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
.org-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #B8720B; background: #FFF7EA; border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; }

/* ---- HR insights (js/features/hr-insights/ui.js) ---- */
.hr-period { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); }
.hr-period__btn { flex: 1; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); font-family: inherit; font-size: 14px; color: var(--text-secondary); cursor: pointer; }
.hr-period__btn.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.hr-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--text-secondary); }
.hr-stats strong { color: var(--text-primary); }

/* ---- Command Center skeleton (UX-06) ---- */
.tcd-skel { background: linear-gradient(90deg, #EEF1F4 0%, #F6F8FA 50%, #EEF1F4 100%); background-size: 200% 100%; border-radius: var(--radius-md); animation: tcdSkel 1.2s ease-in-out infinite; }
.tcd-skel--header { height: 64px; margin-bottom: var(--space-2); }
.tcd-skel--card { height: 180px; }
@keyframes tcdSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .tcd-skel { animation: none; } }

/* ---- Quiz me: learner's answer beside the reference (UX-04) ---- */
.quiz-your-answer { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: var(--space-1); background: var(--card-bg); }
.quiz-your-answer-text { font-size: 14px; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.quiz-your-answer-empty { color: var(--text-secondary); font-style: italic; }

/* ---- Assign modal: searchable picker (UX-05) ---- */
.assign-search { width: 100%; margin-bottom: var(--space-1); }
.assign-results { max-height: 46dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.assign-results__label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin: 8px 2px 2px; }
.assign-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); font-family: inherit; text-align: left; cursor: pointer; }
.assign-result.selected { border-color: var(--accent); background: #F0F4F1; }
.assign-result__title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.assign-result__meta { font-size: 12px; color: var(--text-secondary); }

/* ---- "New version ready" prompt (js/features/app-update/ui.js) ---- */
.app-update-bar { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + var(--space-1)); z-index: 9000; width: min(560px, calc(100% - 2 * var(--space-2))); display: flex; align-items: center; gap: var(--space-1); padding: 6px 6px 6px var(--space-2); background: var(--text-primary); color: #fff; border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25); font-size: 14px; animation: appUpdateIn 0.25s var(--ease-drawer); }
.app-update-bar__text { flex: 1; }
.app-update-bar__btn { min-height: 44px; padding: 0 var(--space-2); border: none; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.app-update-bar__close { min-width: 44px; min-height: 44px; border: none; background: none; color: #CBD5E1; font-size: 20px; cursor: pointer; }
@keyframes appUpdateIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .app-update-bar { animation: none; } }