/* ================================================================
   Nugget — Personal-Finance Learning App
   styles.css — complete component stylesheet
   Mobile-first. All tokens via CSS custom properties.
   ================================================================ */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------- */

:root{
  --nug-bg:#FAF6EE; --nug-surface:#FFFFFF; --nug-ink:#20242E; --nug-ink-muted:#5C6470; --nug-line:#ECE6DA;
  --nug-primary:#3A56D4; --nug-primary-ink:#FFFFFF; --nug-gold:#E5A92C; --nug-gold-deep:#B9821F;
  --nug-success:#2E9E6B; --nug-review:#E08A2B; --nug-locked:#CBD0D9;
  --nug-radius-sm:8px; --nug-radius-md:14px; --nug-radius-lg:22px;
  --nug-space-1:4px; --nug-space-2:8px; --nug-space-3:12px; --nug-space-4:16px; --nug-space-5:24px; --nug-space-6:32px;
  --nug-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --nug-shadow-sm:0 1px 2px rgba(32,36,46,.08); --nug-shadow-md:0 8px 24px rgba(32,36,46,.10);
  --nug-maxw:460px;
}


/* ----------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--nug-bg);
  font-family: var(--nug-font);
  color: var(--nug-ink);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: var(--nug-font);
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.25;
}


/* ----------------------------------------------------------------
   3. APP SHELL
   ---------------------------------------------------------------- */

.nug-app {
  max-width: var(--nug-maxw);
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}


/* ----------------------------------------------------------------
   4. TOP BAR
   ---------------------------------------------------------------- */

.nug-top-bar {
  padding: var(--nug-space-3) var(--nug-space-4);
  background: var(--nug-surface);
  border-bottom: 1px solid var(--nug-line);
  box-shadow: var(--nug-shadow-sm);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--nug-space-3);
  position: sticky;
  top: 0;
  z-index: 100;
}

#top-bar.is-hidden {
  display: none;
}

.nug-top-bar-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--nug-space-2);
}

/* Home link (left side of top bar) */
.nug-home-link {
  font-size: 0.85rem;
  color: var(--nug-ink-muted);
  text-decoration: none;
  padding: var(--nug-space-1) var(--nug-space-2);
  border-radius: var(--nug-radius-sm);
  transition: color 0.15s ease;
}

.nug-home-link:hover {
  text-decoration: underline;
  color: var(--nug-ink);
}

/* Points badge */
.nug-points {
  display: inline-flex;
  align-items: center;
  gap: var(--nug-space-1);
  background: var(--nug-gold);
  color: var(--nug-gold-deep);
  font-size: 0.8rem;
  font-weight: 700;
  padding: var(--nug-space-1) var(--nug-space-3);
  border-radius: 999px;
  white-space: nowrap;
}

/* Streak badge */
.nug-streak {
  display: inline-flex;
  align-items: center;
  gap: var(--nug-space-1);
  background: var(--nug-review);
  color: var(--nug-primary-ink);
  font-size: 0.8rem;
  font-weight: 700;
  padding: var(--nug-space-1) var(--nug-space-3);
  border-radius: 999px;
  white-space: nowrap;
}


/* ----------------------------------------------------------------
   5. SCREENS
   ---------------------------------------------------------------- */

.nug-screen {
  padding: var(--nug-space-5) var(--nug-space-4);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.nug-screen.is-hidden {
  display: none;
}


/* ----------------------------------------------------------------
   6. BUTTONS
   ---------------------------------------------------------------- */

.nug-btn {
  display: block;
  width: 100%;
  padding: var(--nug-space-3) var(--nug-space-4);
  border: none;
  border-radius: var(--nug-radius-md);
  font-family: var(--nug-font);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  text-decoration: none;
  line-height: 1.4;
}

.nug-btn:active {
  transform: scale(0.98);
}

.nug-btn--primary {
  background: var(--nug-primary);
  color: var(--nug-primary-ink);
  box-shadow: var(--nug-shadow-sm);
}

.nug-btn--primary:hover {
  opacity: 0.9;
  box-shadow: var(--nug-shadow-md);
}

.nug-btn--ghost {
  background: transparent;
  border: 2px solid var(--nug-line);
  color: var(--nug-ink);
}

.nug-btn--ghost:hover {
  border-color: var(--nug-ink-muted);
}

.nug-btn--gold {
  background: var(--nug-gold);
  color: var(--nug-gold-deep);
}

.nug-btn--gold:hover {
  opacity: 0.9;
}

.nug-btn:disabled,
.nug-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* ----------------------------------------------------------------
   7. CARDS
   ---------------------------------------------------------------- */

.nug-card {
  background: var(--nug-surface);
  border-radius: var(--nug-radius-md);
  box-shadow: var(--nug-shadow-sm);
  padding: var(--nug-space-5);
  border: 1px solid var(--nug-line);
}


/* ----------------------------------------------------------------
   8. COIN / MASCOT PLACEHOLDER
   ---------------------------------------------------------------- */

.nug-coin {
  width: 64px;
  height: 64px;
  background: var(--nug-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nug-gold-deep);
  font-size: 1.75rem;
  flex-shrink: 0;
}


/* ----------------------------------------------------------------
   9. PROGRESS BAR
   ---------------------------------------------------------------- */

.nug-progress {
  width: 100%;
  height: 8px;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  display: block;
}

.nug-progress::-webkit-progress-bar {
  background: var(--nug-line);
  border-radius: 999px;
}

.nug-progress::-webkit-progress-value {
  background: var(--nug-success);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.nug-progress::-moz-progress-bar {
  background: var(--nug-success);
  border-radius: 999px;
}


/* ----------------------------------------------------------------
   10. ONBOARDING
   ---------------------------------------------------------------- */

.nug-onboard-step {
  display: flex;
  flex-direction: column;
  gap: var(--nug-space-5);
  flex-grow: 1;
}

.nug-onboard-step.is-hidden {
  display: none;
}

.nug-onboard-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nug-space-4);
  text-align: center;
  padding-top: var(--nug-space-6);
}

.nug-coin-icon {
  width: 64px;
  height: 64px;
  background: var(--nug-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nug-gold-deep);
  font-size: 2rem;
  margin: 0 auto;
}

.nug-onboard-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--nug-ink);
  line-height: 1.2;
}

.nug-onboard-subtitle {
  font-size: 1rem;
  color: var(--nug-ink-muted);
  line-height: 1.5;
  max-width: 320px;
}

.nug-onboard-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nug-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

/* Goal picker grid */
.nug-goal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nug-space-2);
}

.nug-goal-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nug-space-2);
  padding: var(--nug-space-4) var(--nug-space-2);
  border: 2px solid var(--nug-line);
  border-radius: var(--nug-radius-md);
  background: var(--nug-surface);
  font-family: var(--nug-font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nug-ink);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
  line-height: 1.3;
}

.nug-goal-btn:hover {
  border-color: var(--nug-ink-muted);
}

.nug-goal-btn.is-selected {
  border-color: var(--nug-primary);
  background: rgba(58, 86, 212, 0.05);
  color: var(--nug-primary);
}

.nug-goal-btn-icon {
  font-size: 1.5rem;
}

/* Daily goal grid */
.nug-daily-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nug-space-2);
}

.nug-daily-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nug-space-1);
  padding: var(--nug-space-3) var(--nug-space-2);
  border: 2px solid var(--nug-line);
  border-radius: var(--nug-radius-md);
  background: var(--nug-surface);
  font-family: var(--nug-font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nug-ink);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.nug-daily-btn:hover {
  border-color: var(--nug-ink-muted);
}

.nug-daily-btn.is-selected {
  border-color: var(--nug-primary);
  background: rgba(58, 86, 212, 0.05);
  color: var(--nug-primary);
}

.nug-daily-btn-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--nug-gold-deep);
}

.nug-onboard-actions {
  display: flex;
  flex-direction: column;
  gap: var(--nug-space-3);
  margin-top: auto;
  padding-top: var(--nug-space-4);
}


/* ----------------------------------------------------------------
   11. HOME SCREEN
   ---------------------------------------------------------------- */

.nug-greeting {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--nug-ink);
  margin-bottom: var(--nug-space-4);
}

.nug-daily-progress {
  margin-bottom: var(--nug-space-5);
}

.nug-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--nug-ink-muted);
  margin-bottom: var(--nug-space-2);
}

.nug-progress-label strong {
  color: var(--nug-success);
}

.nug-unit-block {
  margin-bottom: var(--nug-space-6);
}

.nug-unit-title {
  font-weight: 700;
  color: var(--nug-ink);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--nug-space-1);
}

.nug-unit-subtitle {
  color: var(--nug-ink-muted);
  font-size: 0.85rem;
  margin-bottom: var(--nug-space-3);
}

/* Lesson list */
.nug-lesson-list {
  list-style: none;
  padding: 0;
  margin: var(--nug-space-3) 0;
}

.nug-lesson-node {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--nug-space-3);
  padding: var(--nug-space-3) var(--nug-space-4);
  border-radius: var(--nug-radius-md);
  margin-bottom: var(--nug-space-2);
  cursor: pointer;
  background: var(--nug-surface);
  border: 1px solid var(--nug-line);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
  color: var(--nug-ink);
}

.nug-lesson-node:last-child {
  margin-bottom: 0;
}

.nug-lesson-node:hover {
  border-color: var(--nug-ink-muted);
}

.nug-lesson-node.is-available {
  border-color: var(--nug-primary);
  box-shadow: var(--nug-shadow-sm);
}

.nug-lesson-node.is-available:hover {
  box-shadow: var(--nug-shadow-md);
}

.nug-lesson-node.is-complete {
  border-color: var(--nug-success);
  opacity: 0.85;
}

.nug-lesson-node.is-locked {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--nug-locked);
}

/* Node icon */
.nug-node-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.nug-lesson-node.is-complete .nug-node-icon {
  background: var(--nug-success);
  color: #fff;
}

.nug-lesson-node.is-available .nug-node-icon {
  background: var(--nug-primary);
  color: var(--nug-primary-ink);
}

.nug-lesson-node.is-locked .nug-node-icon {
  background: var(--nug-locked);
  color: #fff;
}

.nug-node-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}

.nug-node-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.nug-node-desc {
  font-size: 0.8rem;
  color: var(--nug-ink-muted);
}

/* Quick review button */
.nug-quick-review-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nug-space-2);
  width: 100%;
  padding: var(--nug-space-3) var(--nug-space-4);
  border: none;
  border-radius: var(--nug-radius-md);
  background: var(--nug-review);
  color: #fff;
  font-family: var(--nug-font);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: var(--nug-space-4);
  transition: opacity 0.15s ease;
}

.nug-quick-review-btn:hover {
  opacity: 0.9;
}

/* Credibility note */
.nug-credibility-note {
  font-size: 0.75rem;
  color: var(--nug-ink-muted);
  text-align: center;
  margin-top: var(--nug-space-6);
  padding-top: var(--nug-space-4);
  border-top: 1px solid var(--nug-line);
  line-height: 1.5;
}


/* ----------------------------------------------------------------
   12. LESSON PLAYER
   ---------------------------------------------------------------- */

.nug-lesson-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--nug-space-3);
  margin-bottom: var(--nug-space-3);
}

.nug-back-btn {
  background: transparent;
  border: none;
  padding: var(--nug-space-1) var(--nug-space-2);
  border-radius: var(--nug-radius-sm);
  cursor: pointer;
  color: var(--nug-ink-muted);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.nug-back-btn:hover {
  color: var(--nug-ink);
}

.nug-lesson-title {
  font-size: 1rem;
  font-weight: 700;
  flex-grow: 1;
  text-align: center;
  color: var(--nug-ink);
}

/* Spacer to balance the back button */
.nug-lesson-header-spacer {
  width: 32px;
  flex-shrink: 0;
}

.nug-lesson-progress-wrap {
  margin: var(--nug-space-3) 0;
}

.nug-lesson-progress {
  width: 100%;
  height: 8px;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  display: block;
}

.nug-lesson-progress::-webkit-progress-bar {
  background: var(--nug-line);
  border-radius: 999px;
}

.nug-lesson-progress::-webkit-progress-value {
  background: var(--nug-primary);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.nug-lesson-progress::-moz-progress-bar {
  background: var(--nug-primary);
  border-radius: 999px;
}

/* Item card */
.nug-item-card {
  background: var(--nug-surface);
  border-radius: var(--nug-radius-md);
  box-shadow: var(--nug-shadow-sm);
  padding: var(--nug-space-5);
  border: 1px solid var(--nug-line);
  margin-top: var(--nug-space-4);
}

.nug-item-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--nug-ink-muted);
  margin-bottom: var(--nug-space-3);
}

.nug-item-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--nug-ink);
  margin-bottom: var(--nug-space-2);
}

.nug-item-body {
  color: var(--nug-ink);
  line-height: 1.6;
  font-size: 0.95rem;
}

.nug-item-example {
  font-style: italic;
  color: var(--nug-ink-muted);
  border-left: 3px solid var(--nug-gold);
  padding-left: var(--nug-space-3);
  margin-top: var(--nug-space-3);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Question prompt */
.nug-question-prompt {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nug-ink);
  margin-top: var(--nug-space-5);
  margin-bottom: var(--nug-space-2);
}

/* Answer choices */
.nug-choices {
  display: flex;
  flex-direction: column;
  gap: var(--nug-space-2);
  margin-top: var(--nug-space-4);
}

.nug-choice {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--nug-space-3) var(--nug-space-4);
  border: 2px solid var(--nug-line);
  border-radius: var(--nug-radius-md);
  background: var(--nug-surface);
  font-family: var(--nug-font);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--nug-ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  line-height: 1.4;
}

.nug-choice:hover:not(:disabled) {
  border-color: var(--nug-ink-muted);
}

.nug-choice.is-selected {
  border-color: var(--nug-primary);
  background: rgba(58, 86, 212, 0.04);
}

.nug-choice.is-correct {
  border-color: var(--nug-success);
  background: rgba(46, 158, 107, 0.07);
}

.nug-choice.is-wrong {
  border-color: #E05C5C;
  background: #FFF0F0;
}

.nug-choice:disabled {
  cursor: default;
}

/* Feedback strip */
.nug-feedback {
  padding: var(--nug-space-3) var(--nug-space-4);
  border-radius: var(--nug-radius-md);
  margin-top: var(--nug-space-3);
  font-size: 0.9rem;
  display: none;
  line-height: 1.5;
}

.nug-feedback.is-visible {
  display: block;
}

.nug-feedback.is-correct {
  background: #EBF7F2;
  color: var(--nug-success);
  border: 1px solid var(--nug-success);
}

.nug-feedback.is-wrong {
  background: #FFF0F0;
  color: #C0392B;
  border: 1px solid #E05C5C;
}

/* Reveal answer (for review mode) */
.nug-reveal-answer {
  margin-top: var(--nug-space-4);
  padding: var(--nug-space-4);
  background: var(--nug-bg);
  border-radius: var(--nug-radius-md);
  border: 1px solid var(--nug-gold);
  display: none;
}

.nug-reveal-answer.is-visible {
  display: block;
}

.nug-reveal-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--nug-gold-deep);
  margin-bottom: var(--nug-space-2);
}

.nug-reveal-text {
  font-size: 0.9rem;
  color: var(--nug-ink);
  line-height: 1.6;
}

.nug-reveal-actions {
  display: flex;
  flex-direction: row;
  gap: var(--nug-space-2);
  margin-top: var(--nug-space-3);
}

.nug-reveal-actions .nug-btn {
  flex: 1;
}

/* Sticky lesson action area */
.nug-lesson-action-area {
  padding-top: var(--nug-space-5);
  position: sticky;
  bottom: 0;
  background: var(--nug-bg);
  padding-bottom: var(--nug-space-5);
}


/* ----------------------------------------------------------------
   13. RESULTS SCREEN
   ---------------------------------------------------------------- */

.nug-results-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--nug-space-4);
  flex-grow: 1;
  padding-top: var(--nug-space-6);
}

.nug-results-icon {
  width: 80px;
  height: 80px;
  background: var(--nug-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nug-gold-deep);
  font-size: 2.5rem;
  margin: 0 auto;
  box-shadow: var(--nug-shadow-md);
}

.nug-results-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--nug-ink);
}

.nug-results-subtitle {
  font-size: 1rem;
  color: var(--nug-ink-muted);
}

.nug-results-stats {
  display: flex;
  flex-direction: row;
  gap: var(--nug-space-4);
  justify-content: center;
  width: 100%;
}

.nug-results-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nug-space-1);
}

.nug-results-points {
  font-size: 2rem;
  font-weight: 800;
  color: var(--nug-gold);
  line-height: 1;
}

.nug-results-points-label {
  font-size: 0.75rem;
  color: var(--nug-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.nug-results-streak {
  font-size: 2rem;
  font-weight: 800;
  color: var(--nug-review);
  line-height: 1;
}

.nug-results-streak-label {
  font-size: 0.75rem;
  color: var(--nug-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.nug-results-actions {
  display: flex;
  flex-direction: column;
  gap: var(--nug-space-3);
  width: 100%;
  margin-top: auto;
  padding-top: var(--nug-space-5);
}


/* ----------------------------------------------------------------
   14. UTILITY CLASSES
   ---------------------------------------------------------------- */

.nug-mt-1 { margin-top: var(--nug-space-1); }
.nug-mt-2 { margin-top: var(--nug-space-2); }
.nug-mt-3 { margin-top: var(--nug-space-3); }
.nug-mt-4 { margin-top: var(--nug-space-4); }
.nug-mt-5 { margin-top: var(--nug-space-5); }
.nug-mt-6 { margin-top: var(--nug-space-6); }

.nug-mb-1 { margin-bottom: var(--nug-space-1); }
.nug-mb-2 { margin-bottom: var(--nug-space-2); }
.nug-mb-3 { margin-bottom: var(--nug-space-3); }
.nug-mb-4 { margin-bottom: var(--nug-space-4); }
.nug-mb-5 { margin-bottom: var(--nug-space-5); }
.nug-mb-6 { margin-bottom: var(--nug-space-6); }

.nug-text-muted {
  color: var(--nug-ink-muted);
}

.nug-text-center {
  text-align: center;
}

.nug-text-sm {
  font-size: 0.85rem;
}

.nug-text-xs {
  font-size: 0.75rem;
}

.nug-divider {
  border: none;
  border-top: 1px solid var(--nug-line);
  margin: var(--nug-space-4) 0;
}

.is-hidden {
  display: none !important;
}

/* Selected state for onboarding picker buttons (via data-action) */
[data-action="pick-goal"].is-selected,
[data-action="pick-daily"].is-selected {
  border-color: var(--nug-primary) !important;
  background: rgba(58, 86, 212, 0.05) !important;
  color: var(--nug-primary) !important;
}

/* Lesson node estimated time label */
.nug-lesson-est {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--nug-ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Unit header wrapper */
.nug-unit-header {
  margin-bottom: var(--nug-space-2);
}

/* Home CTAs spacing */
#continue-btn,
#quick-review-btn {
  margin-bottom: var(--nug-space-3);
}

/* Lesson screen: make item-card grow to fill space */
#screen-lesson {
  gap: 0;
}

/* Reveal answer panel: ensure it can be shown/hidden by class */
#reveal-answer {
  display: none;
}
#reveal-answer.is-visible {
  display: block;
}