/*
 * Veridemy — modern design system (vanilla CSS, no build).
 * Theming via CSS custom properties; the engine's settings drive these at runtime.
 */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  /* surfaces (warm-neutral, premium light) */
  --bg: #fbfbfd;
  --surface: #ffffff;
  --surface-2: #f5f5f8;
  --fg: #18181b;
  --muted: #6b6b76;
  --rule: #ececf1;
  --rule-strong: #dcdce3;
  /* a single confident accent (indigo) */
  --accent: #5b54e6;
  --accent-press: #4a43d4;
  --accent-soft: #eeedfd;
  --on-accent: #ffffff;
  --ok: #15803d;
  --ok-soft: #e9f6ee;
  --bad: #c2300e;
  --bad-soft: #fbeae5;
  /* amber "warn"/attention tone (the note "question" badge) — theme-aware so it keeps AA on dark themes
     instead of the old hardcoded light-only amber (LRN-013 a11y audit). */
  --warn: #8a6500;
  --warn-soft: #fbf2d6;
  /* type + shape + depth */
  --font:
    'Inter var', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --root-size: 18px;
  --lh: 1.65;
  --measure: 68ch;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --shadow-1: 0 1px 2px rgba(20, 20, 40, 0.06), 0 1px 3px rgba(20, 20, 40, 0.04);
  --shadow-2: 0 4px 16px rgba(20, 20, 40, 0.08), 0 2px 6px rgba(20, 20, 40, 0.05);
  --shadow-pop: 0 12px 40px rgba(20, 20, 40, 0.16);
  --speed: 0.16s;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}
[data-theme='dark'] {
  --bg: #0f0f12;
  --surface: #17171c;
  --surface-2: #1f1f26;
  --fg: #e7e7ea;
  --muted: #a0a0ad;
  --rule: #26262e;
  --rule-strong: #34343f;
  --accent: #8b85f5;
  --accent-press: #9d98f7;
  --accent-soft: #211f3a;
  --on-accent: #15131f;
  --ok: #4ade80;
  --ok-soft: #16241a;
  --bad: #f08a6b;
  --bad-soft: #2a1812;
  --warn: #f3c969;
  --warn-soft: #2b2410;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 22px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 14px 44px rgba(0, 0, 0, 0.6);
}
[data-theme='reader'] {
  --bg: #f3ecdb;
  --surface: #faf4e6;
  --surface-2: #efe7d2;
  --fg: #2c2620;
  /* AA: >=4.5:1 on every reader surface incl. accent-soft #efe3c9 (was #756a55 → 4.17:1; axe/LRN-019). */
  --muted: #5c5340;
  --rule: #e4d9bf;
  --rule-strong: #d6c9a8;
  /* AA accent-as-text (.eyebrow, links, source markers) — >=4.5:1 incl. accent-on-accent-soft #efe3c9
     (was #8a5e22 → 4.45:1; earlier #9a6a2f → 4.28:1, audit #28). axe/LRN-019. */
  --accent: #7d551f;
  --accent-press: #835825;
  --accent-soft: #efe3c9;
  --on-accent: #fff;
}
[data-theme='high-contrast'] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f2f2;
  --fg: #000000;
  --muted: #1a1a1a;
  --rule: #000000;
  --rule-strong: #000000;
  --accent: #0a33cc;
  --accent-press: #022aa8;
  --accent-soft: #e6ecff;
  --on-accent: #fff;
}

* {
  box-sizing: border-box;
}
html {
  font-size: var(--root-size);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  line-height: var(--lh);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  transition:
    background var(--speed) var(--ease),
    color var(--speed) var(--ease);
}
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}
/* Honor the OS-level "reduce motion" preference even before the in-app Focus toggle is discovered
   (WCAG 2.3.3 / vestibular safety, audit #27). The in-app toggle stays an explicit per-user override. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ── Accessibility helpers ───────────────────────────────────────────────── */
/* Visually hidden but available to screen readers (live region, off-screen labels). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Skip-link: off-screen until focused, then pinned top-left above everything. */
.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  transform: translateY(-200%);
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-2);
}
.skip-link:focus {
  transform: translateY(0);
}
/* A page heading that received programmatic focus shouldn't show a focus ring (it's not a control). */
#app > :is(h1, h2):focus,
#app :is(h1, h2)[tabindex='-1']:focus {
  outline: none;
}

/* ── Top nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); /* iOS Safari < 15.4 needs the prefix (LRN-137) */
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  cursor: pointer;
  background: none;
  border: 0;
  color: var(--fg);
  font-size: 1.02rem;
}
.brand .dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  background: linear-gradient(
    135deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 50%, #d6b3ff)
  );
  box-shadow: var(--shadow-1);
}
.tabs {
  display: flex;
  gap: 0.15rem;
  margin-left: 0.5rem;
}
.tab {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.92rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--speed) var(--ease);
}
.tab:hover {
  color: var(--fg);
  background: var(--surface-2);
}
.tab.active {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}
.nav .spacer {
  flex: 1;
}
.icon-btn {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: all var(--speed) var(--ease);
}
.icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.progress {
  height: 3px;
  background: transparent;
}
.progress > div {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #c4a0ff));
  border-radius: 0 3px 3px 0;
  transition: width 0.35s var(--ease);
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem 1.25rem 7rem;
}
.wide {
  max-width: 60rem;
}
h1 {
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0.6rem 0 0.3rem;
}
h2 {
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.2rem;
}
.lede {
  color: var(--muted);
  font-size: 1.08rem;
  margin: 0 0 2rem;
}
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

/* ── Pills / badges ──────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.badge.verified {
  color: var(--ok);
  background: var(--ok-soft);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--fg);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.95rem;
  transition: all var(--speed) var(--ease);
}
.btn:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-1);
}
.btn.primary:hover:not(:disabled) {
  background: var(--accent-press);
  border-color: var(--accent-press);
}
.btn.ghost {
  border-color: transparent;
  background: transparent;
}
/* A quiet tertiary action (e.g. "Maybe later") styled as a text link — never boxes up on hover the
   way a .btn.ghost does (it underlines instead), so it doesn't compete with the real CTAs. */
.btn.link {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding: 0.4rem 0.4rem;
  margin-top: 0.35rem;
  box-shadow: none;
}
.btn.link:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
  color: var(--fg);
  text-decoration: underline;
}
.btn-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 1.15rem 1.25rem;
  margin: 1.4rem 0;
  box-shadow: var(--shadow-1);
}
.card .eyebrow {
  margin-bottom: 0.5rem;
  display: block;
}

/* catalog */
.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1.1rem;
}
.course-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--fg); /* <button> does not inherit text color — set it (dark-mode fix) */
  font: inherit;
  border-radius: var(--r-lg);
  padding: 1.3rem;
  box-shadow: var(--shadow-1);
  transition: all var(--speed) var(--ease);
}
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--rule-strong);
}
.course-card h3 {
  margin: 0;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
}
.course-card .meta {
  color: var(--muted);
  font-size: 0.9rem;
  flex: 1;
}
.mini-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.mini-bar > div {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

/* ── Content / interactions ──────────────────────────────────────────────── */
.module {
  margin: 2.6rem 0;
}
.module > h2 {
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
.objective {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 0.35rem;
}
.prose {
  margin: 1.15rem 0;
  font-size: 1.05rem;
}
.prose p {
  margin: 0 0 0.9rem;
}
.prose > :last-child {
  margin-bottom: 0;
}
.prose ul,
.prose ol {
  margin: 0 0 0.9rem 1.3rem;
  padding: 0;
}
.prose li {
  margin: 0.25rem 0;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 0.05em 0.35em;
  border-radius: 5px;
  overflow-wrap: anywhere;
}
.prose-h {
  font-weight: 650;
  font-size: 1.05em;
}
body.compact .card {
  padding: 0.8rem 0.9rem;
  margin: 0.9rem 0;
}
body.compact .prose {
  margin: 0.7rem 0;
}
body.compact .module {
  margin: 1.7rem 0;
}

textarea {
  width: 100%;
  min-height: 4.5rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  resize: vertical;
  transition: border-color var(--speed) var(--ease);
}
.topic-input {
  min-height: 7rem;
  font-size: 1rem;
  line-height: 1.5;
}
.prompt-strength {
  min-height: 1.1em;
  transition: color var(--speed) var(--ease);
}
.prompt-strength.weak {
  color: var(--bad);
}
.prompt-strength.good {
  color: var(--ok);
}
/* Suggested starter prompts (LRN-102) — click a chip to fill the topic box with a strong example. */
.prompt-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0.6rem 0 0.2rem;
}
.prompt-suggest-label {
  font-size: 0.82rem;
  color: var(--muted);
}
.prompt-chip {
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  max-width: 100%;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    color var(--speed) var(--ease),
    border-color var(--speed) var(--ease);
}
.prompt-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.prompt-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* quiz options as cards */
.opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  margin: 0.4rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-sm);
}
.opt .mark {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
}
.opt.correct {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.opt.correct .mark {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
.opt.wrong {
  border-color: var(--bad);
  background: var(--bad-soft);
}
.opt.wrong .mark {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}
/* Answered: lock the options so they no longer read as clickable; un-chosen options recede. */
.opts.locked .opt {
  pointer-events: none;
  cursor: default;
}
.opts.locked .opt:not(.correct):not(.wrong):not(.chosen) {
  opacity: 0.5;
}

/* confidence segmented control */
.conf {
  display: inline-flex;
  margin: 0.6rem 0;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}
.conf button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: all var(--speed) var(--ease);
}
.conf button:hover {
  color: var(--fg);
}
.conf button.on {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.feedback {
  margin-top: 0.7rem;
  font-size: 0.97rem;
}
.feedback .why {
  color: var(--muted);
  margin-top: 0.2rem;
}
.reveal {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--rule-strong);
}
.note {
  color: var(--muted);
  font-size: 0.85rem;
}
.hidden {
  display: none;
}

.continue {
  display: block;
  margin: 2rem auto 0;
  font-size: 1rem;
}

/* Scroll-to-reveal sentinel (revealMode === 'scroll'): a calm cue the learner
   scrolls toward to reveal the next chunk. Deliberate, not a button, no autoplay. */
.reveal-sentinel {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 4.5rem;
  margin-top: 1.5rem;
}
.reveal-hint {
  color: var(--muted, #888);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  opacity: 0.75;
  animation: reveal-bob 1.8s ease-in-out infinite;
}
@keyframes reveal-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}
body.reduce-motion .reveal-hint {
  animation: none;
}

/* ── Landing page (first-time visitor; ADR-0033) ──────────────────────────── */
.landing-hero {
  text-align: center;
  padding: 2rem 0 1rem;
  max-width: 46rem;
  margin: 0 auto;
}
.landing-title {
  font-size: clamp(1.7rem, 4.5vw, 2.7rem);
  line-height: 1.15;
  margin: 0.75rem 0;
}
.landing-sub {
  font-size: 1.1rem;
  color: var(--muted, #666);
  line-height: 1.6;
}
.landing-hero .btn-row {
  margin-top: 1.5rem;
}
.btn.lg {
  font-size: 1.05rem;
  padding: 0.7rem 1.3rem;
}
.landing-intro {
  display: inline-block;
  margin-top: 1rem;
}
.landing-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}
.pillar {
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  background: var(--surface);
}
.pillar h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}
.pillar p {
  margin: 0;
  color: var(--muted, #666);
  line-height: 1.5;
}
.landing-steps {
  max-width: 44rem;
  line-height: 1.6;
  padding-left: 1.2rem;
}
.landing-steps li {
  margin: 0.5rem 0;
}
.landing-note {
  color: var(--muted, #777);
  font-style: italic;
  border-left: 3px solid var(--accent, #6b8afd);
  padding-left: 0.9rem;
  margin-top: 1.5rem;
}

/* ── Auth card (Alpha-2 accounts) ─────────────────────────────────────────── */
.auth-card {
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  background: var(--surface);
  margin: 0.5rem 0 1.5rem;
  max-width: 30rem;
}
.auth-card h2 {
  margin: 0 0 0.3rem;
}
.auth-status {
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.auth-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0.45rem 0;
  padding: 0.6rem 0.7rem;
  font-size: 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--bg);
  color: inherit;
}
.auth-forgot {
  margin-top: 0.6rem;
  font-size: 0.85rem;
}
.auth-msg {
  margin-top: 0.6rem;
  min-height: 1.1em;
  font-size: 0.9rem;
  color: var(--muted, #777);
}
.auth-msg.err {
  color: var(--bad);
}

/* ── Review center ───────────────────────────────────────────────────────── */
.stat-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.2rem 0;
}
.stat {
  flex: 1;
  min-width: 9rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-1);
}
.stat .n {
  font-size: 1.9rem;
  font-weight: 680;
  letter-spacing: -0.03em;
}
.stat .k {
  color: var(--muted);
  font-size: 0.85rem;
}
.review-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
  margin: 0.5rem 0;
}
.review-group {
  margin: 1.2rem 0;
}
.rv-group-title {
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--muted);
  margin: 0 0 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
}
.rv-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--muted);
}
.rv-badge {
  font-weight: 700;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}
.rv-badge.over {
  color: var(--bad);
  background: var(--bad-soft);
}
.rv-badge.due {
  color: var(--accent);
  background: var(--accent-soft);
}
.rv-prompt {
  font-size: 0.95rem;
  line-height: 1.45;
}
.empty {
  text-align: center;
  color: var(--muted);
  padding: 3rem 1rem;
}

/* ── Settings drawer ─────────────────────────────────────────────────────── */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 30, 0.32);
  -webkit-backdrop-filter: blur(2px); /* iOS Safari < 15.4 (LRN-137) */
  backdrop-filter: blur(2px);
  z-index: 30;
  opacity: 0;
  transition: opacity var(--speed) var(--ease);
}
.backdrop.show {
  opacity: 1;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(400px, 92vw);
  background: var(--surface);
  border-left: 1px solid var(--rule);
  box-shadow: var(--shadow-pop);
  padding: 1.2rem 1.3rem 3rem;
  overflow-y: auto;
  transform: translateX(102%);
  transition: transform var(--speed) var(--ease);
  z-index: 31;
}
.drawer.open {
  transform: translateX(0);
}
.drawer h3 {
  margin: 0.2rem 0 0.3rem;
  letter-spacing: -0.02em;
}
.presets {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin: 0.9rem 0 0.5rem;
}
.group {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 1.4rem 0 0.4rem;
}
.setting {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.setting .srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.setting label {
  font-weight: 600;
}
.setting .why {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 0.25rem;
}
select,
input[type='range'] {
  font: inherit;
  accent-color: var(--accent);
}
select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.5rem;
}
/* switch for booleans */
.switch {
  appearance: none;
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--rule-strong);
  position: relative;
  cursor: pointer;
  transition: background var(--speed) var(--ease);
  flex: none;
}
.switch:checked {
  background: var(--accent);
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform var(--speed) var(--ease);
}
.switch:checked::after {
  transform: translateX(1.1rem);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Roadmap surfaces (Wave A+) ──────────────────────────────────────────── */
.badge.stub {
  color: var(--accent);
  background: var(--accent-soft);
}
.badge.gen {
  color: var(--muted);
  background: var(--surface-2);
}
.badge.track {
  color: var(--accent);
  background: var(--accent-soft);
}
.inline-badges {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

/* tags */
.tags {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.tag {
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

/* toolbar + search */
.toolbar {
  display: flex;
  gap: 0.6rem;
  margin: 0 0 1.6rem;
  flex-wrap: wrap;
}
.search,
input.text {
  flex: 1;
  min-width: 12rem;
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.85rem;
  transition: border-color var(--speed) var(--ease);
}
.search:focus,
input.text:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.section-h {
  margin: 2.2rem 0 1rem;
}

/* opt-in goal banner */
.banner {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--r);
  padding: 1.1rem 1.2rem;
  margin: 0 0 1.6rem;
}
.banner strong {
  font-size: 1.05rem;
}
.banner-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
}
.goal-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  margin: 0 0 1.6rem;
  font-size: 0.92rem;
}
.linkish {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
}

/* mini-degree / path */
.course-card.program {
  background: linear-gradient(160deg, var(--surface), var(--accent-soft));
}
.path-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--surface);
  margin: 0.6rem 0;
}
.path-n {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
}
.path-body {
  flex: 1;
}
.path-body .tags {
  margin-top: 0.4rem;
}
.capstone {
  border-left: 3px solid var(--accent);
}
.credential-card {
  background: linear-gradient(160deg, var(--surface), var(--accent-soft));
}

/* provenance */
.provenance {
  margin: 0.4rem 0 1.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--surface);
  padding: 0.4rem 1rem;
}
.provenance summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.5rem 0;
}
.prov-body {
  padding-bottom: 0.6rem;
}
/* Course options (LRN-097): one disclosure grouping the per-course machinery panels so the overview leads
   with content + trust. Collapsed = a single line; expands to the Sources / Learning-mode / Manage panels. */
.course-options {
  margin: 0.4rem 0 1.6rem;
}
.course-options > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
  padding: 0.5rem 0.2rem;
}
.course-options[open] > summary {
  margin-bottom: 0.2rem;
}
.course-options > .provenance:first-of-type {
  margin-top: 0;
}
.prov-depth {
  border-left: 2px solid var(--rule);
  padding-left: 0.6rem;
  margin: 0.5rem 0;
  font-size: 0.82rem;
}
.stage-list,
.src-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0;
}
.stage-list li {
  padding: 0.15rem 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.stage-list li.ok {
  color: var(--ok);
}
.src-list li {
  padding: 0.15rem 0;
  font-size: 0.9rem;
}
.muted {
  color: var(--muted);
}
.report {
  border-left: 3px solid var(--rule-strong);
}
/* The same report composer reused in the narrow sidebar rail (LRN-116): drop the heavy card chrome so it
   sits flush inside the "Report an issue" disclosure instead of a nested card-in-a-card. */
.cn-report .card.report {
  border: 0;
  border-left: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 0.3rem 0 0;
}
.cn-report .card.report textarea {
  min-height: 4rem;
}

/* generate flow */
.field-label {
  display: block;
  font-weight: 600;
  margin: 0.8rem 0 0.35rem;
}
.field-label:first-child {
  margin-top: 0;
}
.gen-panel .gen-bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.8rem 0;
}
.gen-bar > div {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #c4a0ff));
  transition: width 0.4s var(--ease);
}
.gen-bar > div.gen-bar-err {
  background: var(--bad);
}
.gen-stage {
  font-weight: 600;
}

/* ── Generation progress: hero + meta (owner: "more sparkle, little graphics") ── */
.gen-hero {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1rem 0 0.3rem;
}
.gen-hero-icon {
  font-size: 1.8rem;
  line-height: 1;
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  flex: none;
}
.gen-hero-icon.done {
  background: var(--ok-soft);
  color: var(--ok);
}
.gen-hero-icon.err {
  background: var(--bad-soft);
  color: var(--bad);
}
.gen-hero-icon.pulse {
  animation: gen-hero-pulse 1.7s var(--ease) infinite;
}
@keyframes gen-hero-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}
.gen-hero-stage {
  font-weight: 700;
  font-size: 1.05rem;
}
.gen-hero-sub {
  color: var(--muted);
  font-size: 0.86rem;
}
.gen-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
}
.gen-elapsed {
  font-variant-numeric: tabular-nums;
}
.gen-eta {
  margin-top: 0.3rem;
}
.gen-bar.shimmer > div {
  background-image: linear-gradient(
    90deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 55%, #c4a0ff),
    var(--accent)
  );
  background-size: 200% 100%;
  animation: gen-bar-shimmer 1.8s linear infinite;
}
@keyframes gen-bar-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.stage-list.rich li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.stage-ic {
  width: 1.5rem;
  text-align: center;
  flex: none;
  filter: grayscale(1);
  opacity: 0.5;
}
.stage-item.doing .stage-ic,
.stage-item.ok .stage-ic {
  filter: none;
  opacity: 1;
}
.stage-item.ok .stage-ic {
  color: var(--ok);
}
body.reduce-motion .gen-hero-icon.pulse,
body.reduce-motion .gen-bar.shimmer > div {
  animation: none;
}

/* plans */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.plan-card {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 1.3rem;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.plan-card.highlight {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}
.plan-card.current {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.plan-name {
  font-weight: 700;
  font-size: 1.15rem;
}
.plan-price {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.plan-price span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
}
.feat {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0;
}
.feat li {
  padding: 0.2rem 0 0.2rem 1.3rem;
  position: relative;
  font-size: 0.92rem;
}
.feat li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}
.gen-quota {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.plan-card .btn {
  margin-top: auto;
}

/* nav plan chip */
.plan-chip {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: all var(--speed) var(--ease);
}
.plan-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.plan-chip .caret {
  opacity: 0.6;
  font-size: 0.8em;
  margin-left: 0.1rem;
}
/* Account dropdown (LRN-098): the email/plan chip discloses a small menu (Account/Settings/Sign out). */
.account-menu {
  position: relative;
  display: inline-flex;
}
.account-menu-pop {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 11rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop);
  padding: 0.3rem;
  display: none;
  z-index: 50;
}
.account-menu.open .account-menu-pop {
  display: block;
}
.account-menu-pop .am-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.account-menu-pop .am-item:hover,
.account-menu-pop .am-item:focus {
  background: var(--accent-soft);
  outline: none;
}
.account-menu-pop .am-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* reported issues */
.issue-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
  margin: 0.5rem 0;
}
.issue-row > div:first-child {
  flex: 1;
}
.issue-status {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.issue-status.queued {
  color: var(--muted);
  background: var(--surface-2);
}
.issue-status.fixing {
  color: var(--accent);
  background: var(--accent-soft);
}
.issue-status.resolved {
  color: var(--ok);
  background: var(--ok-soft);
}
.issue-status.review {
  color: var(--muted);
  background: var(--surface-2);
}
.issue-status.answered {
  color: var(--ok);
  background: var(--ok-soft);
}
/* The team's reply to a learner report, surfaced in-app (LRN-115). */
.issue-reply {
  margin-top: 0.4rem;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
}
.issue-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.issue-cat {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-2);
}
.issue-cat.citation,
.issue-cat.factual {
  color: var(--accent);
  background: var(--accent-soft);
}

/* credential / certificate */
.certificate {
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--surface), var(--accent-soft));
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-2);
  margin: 1.5rem 0;
}
.cert-seal {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.8rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 700;
}
.cert-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.cert-title {
  margin: 0.4rem 0;
}
.cert-body {
  color: var(--fg);
  max-width: 30rem;
  margin: 0.5rem auto;
}
.cert-meta {
  color: var(--muted);
  font-size: 0.85rem;
  max-width: 32rem;
  margin: 0.8rem auto 0;
}
.cert-id {
  margin-top: 1rem;
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── Glossary + flashcards (Wave B / ADR-0023) ───────────────────────────── */
.flashcards .flashcard {
  margin-top: 0.6rem;
}
.fc-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.4rem;
}
.fc-counter {
  white-space: nowrap;
}
.fc-progress {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.fc-progress > div {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}
/* 3D flip card. min-height keeps a stable size; long backs scroll within the face. */
.fc-card {
  perspective: 1000px;
  margin: 0.7rem 0;
}
.fc-inner {
  position: relative;
  min-height: 7rem;
  transition: transform 0.45s var(--ease);
  transform-style: preserve-3d;
}
.fc-card.flipped .fc-inner {
  transform: rotateY(180deg);
}
.fc-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--surface-2);
  overflow: auto;
}
.fc-front {
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.fc-back {
  transform: rotateY(180deg);
  font-size: 1rem;
  line-height: 1.5;
}
.fc-grades {
  display: flex;
  gap: 0.5rem;
}
.fc-hint {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}
body.reduce-motion .fc-inner,
body.reduce-motion .fc-progress > div {
  transition: none;
}

/* ── Lifecycle (Wave D / ADR-0024) ───────────────────────────────────────── */
.btn.danger {
  border-color: var(--bad);
  color: var(--bad);
}
.btn.danger:hover:not(:disabled) {
  background: var(--bad-soft);
  border-color: var(--bad);
}

/* ── Home hero + badges (Wave E / ADR-0024) ──────────────────────────────── */
.hero {
  background: linear-gradient(160deg, var(--accent-soft), var(--surface));
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.4rem;
  margin: 0 0 1.6rem;
}
.hero-enc {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}
.badge-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 0.8rem;
  margin: 0.8rem 0 1.6rem;
}
.badge-tile {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--surface);
  padding: 1rem;
  text-align: center;
}
/* Un-earned tiles read "quieter" via a dimmed (decorative) icon, NOT a faded tile — the label + note
   stay full-contrast so a learner can read what they're working toward (axe/LRN-019: opacity on
   meaningful text fails WCAG AA). */
.badge-tile:not(.earned) .badge-ico {
  color: var(--muted);
  opacity: 0.55;
}
.badge-tile.earned {
  border-color: var(--accent);
  background: linear-gradient(160deg, var(--surface), var(--accent-soft));
}
.badge-ico {
  font-size: 1.6rem;
  color: var(--accent);
}
.badge-label {
  font-weight: 650;
  margin: 0.2rem 0;
}

/* ── Course layout + sidebar (Wave G) ────────────────────────────────────── */
main.course-view {
  max-width: 64rem;
}
.course-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.course-nav {
  position: sticky;
  top: 4.2rem;
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
  font-size: 0.92rem;
}
.course-main {
  min-width: 0;
  max-width: var(--measure);
}
.cn-title {
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0.8rem 0 0.3rem;
}
.cn-h {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 1rem 0 0.4rem;
}
.cn-list {
  list-style: none;
  counter-reset: cn;
  padding: 0;
  margin: 0;
}
.cn-list li {
  counter-increment: cn;
  margin: 0.1rem 0;
}
.cn-link {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  transition: all var(--speed) var(--ease);
}
.cn-link::before {
  content: counter(cn);
  color: var(--accent);
  font-weight: 650;
  flex: none;
}
.cn-link:hover {
  color: var(--fg);
  background: var(--surface-2);
  border-left-color: var(--accent);
}
.cn-gloss {
  margin-top: 1.2rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.6rem;
}
.cn-gloss > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cn-gloss-body {
  margin-top: 0.5rem;
}
.cn-term {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
}
.cn-term:last-child {
  border-bottom: 0;
}
@media (max-width: 760px) {
  .course-layout {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .course-nav {
    position: static;
    max-height: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
  }
}

/* ── About page + footer (Wave H) ────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  margin: 1rem 0 1.6rem;
}
.about-grid .card {
  margin: 0;
}
.about-steps {
  margin: 1rem 0 1.6rem;
  padding-left: 1.3rem;
  line-height: 1.7;
}
.about-steps li {
  margin: 0.4rem 0;
}
.site-footer {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding: 1.6rem 1.25rem 3rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.85rem;
}
.foot-links {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.foot-links .linkish {
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--muted);
}
.foot-links .linkish:hover {
  color: var(--accent);
}
/* Clickable cited source (verify-link). Looks like a link; opens the vetted source in a new tab. */
.src-link {
  color: var(--accent);
  text-decoration: none;
}
.src-link:hover,
.src-link:focus-visible {
  text-decoration: underline;
}
/* AI-disclosure (AUP/safety): a quiet, readable advisory — informative, not alarming. */
.foot-disclosure {
  margin: 0.2rem 0 0.6rem;
  max-width: 64ch;
  line-height: 1.5;
}
.note.disclosure {
  border-left: 3px solid var(--rule);
  padding-left: 0.7rem;
  margin: 0.4rem 0 1rem;
  line-height: 1.5;
}

/* ── Generate waiting page — per-stage explanations + pulse (Wave H) ──────── */
.stage-item {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule);
}
.stage-item:last-child {
  border-bottom: 0;
}
.stage-head {
  font-weight: 600;
  color: var(--muted);
}
.stage-blurb {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.1rem;
}
.stage-item.doing {
  background: var(--accent-soft);
  border-radius: 8px;
  padding-left: 0.55rem;
  border-bottom-color: transparent;
  box-shadow: inset 3px 0 0 var(--accent);
}
.stage-item.doing .stage-head {
  color: var(--accent);
  animation: stage-pulse 1.1s var(--ease) infinite;
}
.stage-item.ok .stage-head {
  color: var(--ok);
}
@keyframes stage-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
body.reduce-motion .stage-item.doing .stage-head {
  animation: none;
}

/* ── Catalog tag filters + continue learning + sidebar progress (Wave I) ──── */
.tag-filters {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 1.4rem;
}
.tag-chip {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: all var(--speed) var(--ease);
}
.tag-chip:hover {
  color: var(--fg);
  border-color: var(--accent);
}
.tag-chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.cn-link.done {
  color: var(--fg);
}
.cn-check {
  margin-left: auto;
  color: var(--ok);
  font-weight: 700;
}

/* ── Command palette ⌘K (Wave J) ─────────────────────────────────────────── */
.search-trigger {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.palette {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  background: rgba(15, 15, 30, 0.34);
  -webkit-backdrop-filter: blur(2px); /* iOS Safari < 15.4 (LRN-137) */
  backdrop-filter: blur(2px);
  padding-top: 12vh;
}
.palette.open {
  display: block;
}
.pal-box {
  width: min(560px, 92vw);
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.pal-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 1.05rem;
  padding: 1rem 1.1rem;
}
.pal-input:focus {
  outline: none;
}
.pal-results {
  max-height: 50vh;
  overflow-y: auto;
  padding: 0.4rem;
}
/* Short viewports (landscape phones, foldables): 12vh top padding + 50vh results crush the input on a
   ~320-480px-tall screen. Pull the box up and give results more room (LRN-013 mobile audit). */
@media (max-height: 560px) {
  .palette {
    padding-top: 5vh;
  }
  .pal-results {
    max-height: 62vh;
  }
}
.pal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.pal-row:hover,
.pal-row:focus-visible {
  background: var(--accent-soft);
}
.pal-sub {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.calib-wrap {
  display: flex;
  justify-content: center;
  padding: 0.4rem 0;
}

/* ── Capstone assessment + credential states (Wave L) ────────────────────── */
.opt.chosen {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.opt.chosen .mark {
  background: var(--accent);
  border-color: var(--accent);
}
.certificate.preview {
  border-style: dashed;
  opacity: 0.92;
}
.certificate.preview .cert-seal {
  background: var(--surface-2);
  color: var(--muted);
}

/* ── Responsive nav (Wave M / audit) ─────────────────────────────────────── */
@media (max-width: 640px) {
  .nav {
    flex-wrap: wrap;
    padding: 0.6rem 0.8rem;
    gap: 0.35rem;
  }
  .nav .spacer {
    display: none;
  }
  .tabs {
    order: 3;
    width: 100%;
    margin-left: 0;
    /* 5 tabs don't fit one row at ~360px — wrap (all visible) instead of crushing labels (audit LRN-015). */
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.3rem;
  }
  .tabs .tab {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }
  .search-trigger {
    margin-left: auto;
  }
  main {
    padding: 1.4rem 1rem 5rem;
  }
}

/* ── First-run onboarding (Wave N) ───────────────────────────────────────── */
.onboard {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: none;
  background: rgba(15, 15, 30, 0.45);
  -webkit-backdrop-filter: blur(3px); /* iOS Safari < 15.4 (LRN-137) */
  backdrop-filter: blur(3px);
  padding: 8vh 1rem;
  overflow-y: auto;
}
.onboard.open {
  display: block;
}
.onboard-card {
  width: min(480px, 94vw);
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  padding: 1.6rem 1.6rem 1.4rem;
}
.onboard-card h2 {
  margin: 0.3rem 0 0.2rem;
}
.onboard-actions {
  margin-top: 1.2rem;
}

/* ── Time estimates (Wave O) ─────────────────────────────────────────────── */
.cn-min {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--muted);
}
.cn-link.done .cn-min {
  display: none;
}

.resume-btn {
  display: block;
  margin: 0.4rem 0 1rem;
}

.pal-row.sel {
  background: var(--accent-soft);
  outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ── Collapsible settings categories (Wave R) ────────────────────────────── */
.setting-group {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--surface);
  margin: 0.6rem 0;
  padding: 0 1rem;
}
.setting-group > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.setting-group > summary::-webkit-details-marker {
  display: none;
}
.setting-group > summary::after {
  content: '▸';
  color: var(--muted);
  transition: transform var(--speed) var(--ease);
}
.setting-group[open] > summary::after {
  transform: rotate(90deg);
}
.setting-group .setting:last-child {
  border-bottom: 0;
}

/* ── More themes (Wave S) — true-black OLED, soft dim, cool Nord ──────────── */
[data-theme='midnight'] {
  --bg: #000000;
  --surface: #0a0a0c;
  --surface-2: #141417;
  --fg: #eaeaee;
  --muted: #9a9aa6;
  --rule: #1c1c22;
  --rule-strong: #2a2a32;
  --accent: #8b85f5;
  --accent-press: #9d98f7;
  --accent-soft: #1a1830;
  --on-accent: #0a0a0c;
  --ok: #4ade80;
  --ok-soft: #0e1c12;
  --bad: #f08a6b;
  --bad-soft: #241009;
  --warn: #f3c969;
  --warn-soft: #221b0a;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 6px 22px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 14px 44px rgba(0, 0, 0, 0.8);
}
[data-theme='dim'] {
  --bg: #1c2128;
  --surface: #22272e;
  --surface-2: #2d333b;
  --fg: #cdd9e5;
  --muted: #909dab;
  --rule: #2d333b;
  --rule-strong: #3a4048;
  --accent: #9a93f8;
  --accent-press: #ada7fa;
  --accent-soft: #25243a;
  --on-accent: #14131f;
  --ok: #57ab5a;
  --ok-soft: #16241a;
  --bad: #e5824d;
  --bad-soft: #2a1812;
  --warn: #e6b450;
  --warn-soft: #2c2512;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 22px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 14px 44px rgba(0, 0, 0, 0.6);
}
[data-theme='nord'] {
  --bg: #2e3440;
  --surface: #3b4252;
  --surface-2: #434c5e;
  --fg: #eceff4;
  --muted: #b3bdd0;
  --rule: #434c5e;
  --rule-strong: #4c566a;
  --accent: #88c0d0;
  --accent-press: #8fbcbb;
  --accent-soft: #3b4252;
  --on-accent: #2e3440;
  --ok: #a3be8c;
  --ok-soft: #333b32;
  /* AA-as-text red (LRN-013): nord's aurora red #bf616a was only 2.46:1 on --surface — error messages
     (.auth-msg.err / .tutor-answer.err, now var(--bad)) failed AA. Lightened to a nord rose that clears
     4.5:1 on every nord surface (guarded by contrast.test.ts). */
  --bad: #e3a3a9;
  --bad-soft: #3b2e30;
  --warn: #ebcb8b;
  --warn-soft: #3a3322;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 22px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 14px 44px rgba(0, 0, 0, 0.6);
}
/* Sepia — warm aged-paper (LRN-020). Distinct from Reader (cooler cream): more amber paper + sepia-brown
   ink. Text/accent chosen for WCAG AA on every sepia surface (guarded by contrast.test.ts). */
[data-theme='sepia'] {
  --bg: #f2e8d2;
  --surface: #f8f1de;
  --surface-2: #ebe0c6;
  --fg: #3a3022;
  --muted: #594833;
  --rule: #e3d6b8;
  --rule-strong: #d4c5a0;
  --accent: #6e4a1a;
  --accent-press: #623f15;
  --accent-soft: #ece0c4;
  --on-accent: #fff;
}

/* ── In-course nav: hide top tabs, surface links in the sidebar (Wave T) ──── */
body.in-course .nav .tabs {
  display: none;
}
.cn-nav {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.2rem;
}
.cn-navlink {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
  transition: all var(--speed) var(--ease);
}
.cn-navlink:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Custom accent color control (Wave U) ────────────────────────────────── */
.color-ctl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.color-ctl input[type='color'] {
  width: 2rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: none;
  cursor: pointer;
}

/* ── Notes + bookmarks (Wave V — common learning-platform features) ───────── */
.inline-badges .spacer {
  flex: 1;
}
.bookmark-btn {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  cursor: pointer;
  transition: all var(--speed) var(--ease);
}
.bookmark-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.bookmark-btn.on {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}
.badge.saved {
  color: var(--accent);
  background: var(--accent-soft);
}
.cn-notes-ta {
  min-height: 6rem;
  font-size: 0.9rem;
}
.tutor-answer {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--fg);
}
.tutor-answer.err {
  color: var(--bad);
}

/* Floating "Ask the tutor" chip (LRN-069): appears at a selection in the course content. JS sets
   display:block + position; hidden by default. position:fixed → uses viewport-relative selection rect. */
.ask-chip {
  display: none;
  position: fixed;
  z-index: 60;
  border: 0;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  white-space: nowrap;
}
.ask-chip:hover {
  background: var(--accent-press);
}
.ask-chip:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.btn-row.center {
  justify-content: center;
}

/* ── Course overview header (Wave W) ─────────────────────────────────────── */
/* Read as a distinct ORIENTATION banner, not just the first content block (audit LRN-016): an accent
   left-edge + a clear bottom rule separate it from the reading column below. */
.course-overview {
  border-left: 3px solid var(--accent);
}
.course-overview .eyebrow {
  color: var(--accent);
}
.course-overview .ov-h {
  font-weight: 650;
  margin: 0.9rem 0 0.3rem;
}
.course-overview .ov-objectives {
  margin: 0 0 0.6rem;
  padding-left: 1.2rem;
}
.course-overview .ov-objectives li {
  margin: 0.15rem 0;
}
.course-overview .tags {
  margin: 0.5rem 0;
}
.course-overview .provenance {
  margin: 0.6rem 0 0;
}
.disclaimer {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}
.disclaimer-ico {
  color: var(--accent);
  font-weight: 700;
}
.verify-panel {
  margin-top: 0.75rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.45;
}
.verify-panel.ok {
  background: color-mix(in srgb, #2e9e5b 14%, transparent);
}
.verify-panel.warn {
  background: color-mix(in srgb, #d98324 18%, transparent);
}
.verify-flagged {
  margin-top: 0.4rem;
}
.verify-flagged > summary {
  cursor: pointer;
  font-weight: 600;
}
.verify-flagged-list {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}
.verify-flagged-list li {
  padding: 0.1rem 0;
}

/* ── Mobile-first / responsive hardening (ADR-0026) ──────────────────────── */
/* No horizontal overflow, ever: long content wraps or scrolls within itself. */
.prose,
.prose p,
.feedback,
.cn-term,
.pal-label,
.course-card h3,
.hero-enc {
  overflow-wrap: anywhere;
}
img,
svg {
  max-width: 100%;
}
.calib-wrap svg {
  height: auto;
}
.inline-badges {
  flex-wrap: wrap;
}
pre,
code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Comfortable tap targets on touch devices (44px guideline; audit LRN-015). */
@media (pointer: coarse) {
  .tab,
  .tag-chip,
  .cn-navlink,
  .plan-chip,
  .icon-btn,
  .linkish,
  .am-item,
  .switch,
  .nb-del,
  .nb-edit-btn,
  .conf button,
  .prompt-chip,
  .bookmark-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Single-glyph icon buttons (note ✎/×) need a 44px WIDTH too, or two adjacent ~20px targets mis-tap on
     iOS (LRN-151). Scoped to the glyph buttons — not the shared rule above, where text tabs/links must
     keep their natural width. */
  .nb-del,
  .nb-edit-btn,
  .icon-btn {
    min-width: 44px;
    justify-content: center;
  }
  .opt,
  .pal-row,
  .cn-link {
    min-height: 44px;
  }
}

/* Phone tightening. */
@media (max-width: 520px) {
  h1 {
    font-size: 1.6rem;
  }
  .card {
    padding: 1rem;
  }
  .certificate {
    padding: 1.6rem 1.1rem;
  }
  .hero {
    padding: 1.1rem;
  }
  .toolbar .btn.primary {
    flex: 1; /* full-width Generate next to search */
  }
  .stat {
    min-width: 7rem;
  }
  .pal-box {
    width: 96vw;
  }
  /* The account chip shows the full email — cap it so a long address can't wrap/overflow the nav. */
  .plan-chip {
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .alpha-tag {
    font-size: 0.68rem;
  }
}

/* ── Alpha label (ADR-0028 — honest "this is a preview") ─────────────────── */
.alpha-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  margin-left: 0.1rem;
  vertical-align: middle;
}

/* ── Toast (transient undo for destructive actions) ─────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--fg);
  color: var(--bg);
  padding: 0.7rem 0.7rem 0.7rem 1.1rem;
  border-radius: var(--r);
  box-shadow: var(--shadow-pop);
  font-size: 0.9rem;
  max-width: 92vw;
}
.toast .btn.ghost {
  color: var(--bg);
  border: 1px solid color-mix(in srgb, var(--bg) 40%, transparent);
}
.toast .btn.ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bg) 15%, transparent);
}
.plans-hint {
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin: 0.4rem 0 0.2rem;
}
.level-badge {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.5rem 0 0.2rem;
  line-height: 1.5;
}
.level-badge-tag {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  margin-right: 0.5rem;
}
.gen-done-summary {
  background: var(--ok-soft);
  color: var(--ok);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin: 0.8rem 0;
  font-weight: 600;
  font-size: 0.9rem;
}
.gen-done-tick {
  font-weight: 700;
}
.quality-panel {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin: 0.6rem 0;
}
.quality-panel.high {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--rule));
  background: var(--ok-soft);
}
.quality-panel.ok {
  background: var(--surface-2);
}
.quality-head {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 0.25rem;
}
.quality-score {
  font-weight: 700;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.quality-panel.high .quality-score {
  color: var(--ok);
}
.quality-label {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.quality-dims {
  margin-top: 0.6rem;
}
.quality-dims > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg);
}
.qdim-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: grid;
  gap: 0.7rem;
}
.qdim-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
}
.qdim-label {
  font-size: 0.9rem;
  font-weight: 600;
}
.qdim-score {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.qdim-bar {
  height: 5px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.25rem 0;
}
.qdim-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.qdim.na {
  opacity: 0.6;
}
.qdim-note {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq-item {
  margin: 1.1rem 0;
  max-width: var(--measure);
}
.faq-q {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 0 0 0.3rem;
}
.faq-a {
  margin: 0;
  color: var(--fg);
  line-height: 1.6;
}

/* ── Notes page (full-page notes product) ────────────────────────────────── */
.notes-toolbar {
  display: flex;
  flex-wrap: wrap; /* search + Export must not overflow on a phone (audit LRN-015) */
  gap: 0.6rem;
  align-items: center;
  margin: 0.8rem 0;
}
.notes-toolbar input[type='search'] {
  flex: 1;
}
.notes-ai {
  margin: 0.6rem 0 1.2rem;
}
/* The "Ask a question…" input sits on its own line here (not in a flex row), so input.text's
   flex:1 doesn't apply — make it full-width so the placeholder isn't truncated, with room above the buttons. */
.notes-ai input.text {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}
.notes-list {
  margin-top: 0.5rem;
}
.notes-group {
  margin: 1.4rem 0;
}
.notes-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.35rem;
  margin-bottom: 0.6rem;
}
.notes-group-title {
  font-size: 1rem;
  font-weight: 650;
  margin: 0;
}
.notes-list .nb-item {
  max-width: var(--measure);
}

/* ── Notebook (My notes — structured, timestamped, anchored) ─────────────── */
/* Both composers (in-course notebook + standalone notes) must wrap on a phone (audit LRN-015). */
.nb-compose {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.4rem;
}
.notebook .nb-compose {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.4rem;
}
.notebook .nb-kind {
  font-size: 0.8rem;
  padding: 0.3rem 0.4rem;
  max-width: 100%;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--fg);
}
.notebook .nb-add {
  margin-left: auto;
  font-size: 0.82rem;
  padding: 0.32rem 0.7rem;
}
.notebook .nb-input {
  min-height: 3.4rem;
}
.notebook .nb-edit {
  min-height: 3rem;
  width: 100%;
}
.nb-list {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.nb-empty {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.2rem 0;
}
.nb-item {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.7rem;
  background: var(--surface);
}
.nb-item.kind-key {
  border-left-color: var(--accent);
}
.nb-item.kind-question {
  border-left-color: #d39a00;
}
.nb-item.kind-todo {
  border-left-color: var(--bad);
}
.nb-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.nb-badge {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.04rem 0.4rem;
}
.nb-item.kind-question .nb-badge {
  color: var(--warn);
  background: var(--warn-soft);
}
.nb-item.kind-todo .nb-badge {
  color: var(--bad);
  background: var(--bad-soft);
}
.nb-sec {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 9rem;
}
.nb-sec::before {
  content: '§ ';
  opacity: 0.6;
}
.nb-time {
  margin-left: auto;
  white-space: nowrap;
}
.nb-del,
.nb-edit-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
  border-radius: var(--r-sm);
}
.nb-del {
  font-size: 1rem;
}
.nb-del:hover {
  color: var(--bad);
}
.nb-edit-btn:hover {
  color: var(--accent);
}
.nb-del:focus-visible,
.nb-edit-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.nb-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--fg);
  white-space: pre-wrap;
  cursor: text;
  border-radius: var(--r-sm);
}
.nb-text:hover {
  background: var(--surface-2);
}
.nb-rule {
  border-top: 1px solid var(--rule);
  margin: 0.8rem 0 0.5rem;
}
.nb-tools {
  flex-wrap: wrap;
}
.nb-tools .btn {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
}
.btn.sm {
  font-size: 0.74rem;
  padding: 0.22rem 0.5rem;
}
.nb-out-actions {
  margin-top: 0.4rem;
  gap: 0.4rem;
}

.report-fix {
  margin-top: 0.6rem;
}

.hero-retention {
  margin-top: 0.5rem;
}