/* ============================================================================
   Daily Learning — components
   Built on tokens.css. Component names follow the app (action-button,
   course-card, bottom-navigation, lesson-progress-ring, answer-choice,
   activity-feedback); the generic primitives at the end are ADDED for design
   work outside the lesson flow.

   Rules that hold for every component here:
   · one filled action per view, everything else peach or quiet
   · 44px minimum target for anything a thumb presses
   · focus is always visible: 3px ring in --color-focus, 3px offset
   · motion is short, eased out, and dies under prefers-reduced-motion
   ========================================================================== */

/* ---------------------------------------------------------------- shell */
.app-shell {
  width: min(100%, var(--app-shell-max-width));
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-family-ui);
  font-size: var(--type-body);
  font-weight: var(--font-medium);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

.app-shell--with-tabs { padding-block-end: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px)); }

.page-content {
  flex: 1;
  padding: var(--page-content-top-inset) var(--page-inset) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* ---------------------------------------------------------------- brand row */
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.wordmark {
  font-size: var(--type-brand);
  font-weight: var(--font-strong);
  letter-spacing: var(--tracking-brand);
  line-height: var(--leading-compact);
  color: var(--color-ink);
  text-decoration: none;
}
.profile-shortcut {
  width: 40px; height: 40px; min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-primary-ink);
  font-size: var(--type-avatar-initial);
  font-weight: var(--font-strong);
  cursor: pointer;
  transition: background-color var(--motion-quick) var(--motion-ease), transform var(--motion-press) var(--motion-ease);
}
.profile-shortcut:hover { background: var(--color-secondary-hover); }
.profile-shortcut:active { transform: scale(0.96); }

/* ---------------------------------------------------------------- type helpers */
.page-heading {
  margin: 0;
  font-size: var(--type-page-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-page-heading);
  text-wrap: var(--wrap-heading);
}
.section-heading {
  margin: 0;
  font-size: var(--type-section-heading);
  line-height: var(--leading-section-heading);
  letter-spacing: var(--tracking-section-heading);
  text-wrap: var(--wrap-heading);
}
.eyebrow {
  margin: 0;
  font-size: var(--type-metadata);
  font-weight: var(--font-strong);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
}
.supporting { font-size: var(--type-supporting); color: var(--color-muted); line-height: var(--leading-supporting); }
.meta { font-size: var(--type-metadata); color: var(--color-muted); letter-spacing: var(--tracking-description); }

/* ---------------------------------------------------------------- actions */
.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--type-action);
  font-weight: var(--font-strong);
  letter-spacing: var(--tracking-action-label);
  line-height: var(--leading-compact);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--motion-quick) var(--motion-ease),
              color var(--motion-quick) var(--motion-ease),
              transform var(--motion-press) var(--motion-ease),
              box-shadow var(--motion-quick) var(--motion-ease);
}
.action-button:active { transform: scale(0.96); }
.action-button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.action-button[disabled],
.action-button[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.action-button--primary { background: var(--color-action-strong); color: var(--color-action-ink); }
.action-button--primary:hover { background: var(--color-action-strong-hover); }

.action-button--secondary { background: var(--color-secondary); color: var(--color-primary-ink); }
.action-button--secondary:hover { background: var(--color-secondary-hover); }

.action-button--quiet { background: transparent; color: var(--color-primary-ink); padding-inline: 12px; }
.action-button--quiet:hover { background: var(--color-primary-soft); }

.action-button--danger { background: var(--color-danger); color: var(--color-white); }

.action-button--compact { min-height: 40px; font-size: var(--type-action-compact); padding: 9px 18px; }
.action-button--block { width: 100%; }

/* icon-only, still a 44px target */
.icon-button {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--color-secondary); color: var(--color-primary-ink);
  cursor: pointer;
  transition: background-color var(--motion-quick) var(--motion-ease), transform var(--motion-press) var(--motion-ease);
}
.icon-button:hover { background: var(--color-secondary-hover); }
.icon-button:active { transform: scale(0.96); }
.icon-button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- course card */
.course-card {
  width: 100%;
  min-height: 112px;
  padding: var(--course-card-padding);
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-surface);
  background: var(--color-canvas);
  color: var(--color-ink);
  text-align: start;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 140ms var(--motion-ease), background-color 140ms var(--motion-ease);
}
.course-card:hover { border-color: #efb6a4; background: #fffaf7; }
.course-card:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.course-card--text-only { grid-template-columns: minmax(0, 1fr); min-height: 92px; padding: 15px 18px; }

.course-card__art {
  width: 88px; aspect-ratio: var(--aspect-course-cover);
  border-radius: 10px; overflow: hidden; background: var(--color-primary-soft);
  display: grid; place-items: center;
}
.course-card__art img { width: 100%; height: 100%; object-fit: cover; }
.course-card__body { display: grid; gap: var(--space-copy-helper); min-width: 0; }
.course-card__title {
  margin: 0; font-size: var(--type-course-title); font-weight: var(--font-strong);
  letter-spacing: var(--tracking-course-title); line-height: var(--leading-compact);
}
.course-card__description {
  margin: 0; font-size: var(--type-course-description); color: var(--color-course-description-aa);
  letter-spacing: var(--tracking-description); line-height: var(--leading-compact-copy);
}
.course-card__meta {
  margin: 0; font-size: var(--type-metadata); color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- lesson progress ring */
.lesson-progress-ring {
  --value: 0;                      /* 0–100, set inline */
  --ring-size: 44px;
  width: var(--ring-size); height: var(--ring-size);
  position: relative;
  display: grid; place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--color-primary) calc(var(--value) * 1%),
    var(--color-primary-soft) 0
  );
}
.lesson-progress-ring::before {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: var(--color-canvas);
}
.lesson-progress-ring__label {
  position: relative;
  font-size: var(--type-metadata);
  font-weight: var(--font-strong);
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-ink);
  line-height: 1;
}

/* ---------------------------------------------------------------- scenario + answers */
.question-block { display: grid; gap: var(--space-3); }
.question-block h2 {
  margin: 0; font-size: var(--type-question); line-height: var(--leading-lesson-title);
  letter-spacing: var(--tracking-lesson-title); font-weight: var(--font-strong); text-wrap: var(--wrap-heading);
}
.scenario-copy {
  margin: 0; font-size: var(--type-supporting); color: var(--color-lesson-description-aa);
  letter-spacing: var(--tracking-description); line-height: var(--leading-supporting);
}
.answer-list { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.answer-choice {
  width: 100%; min-height: 52px;
  display: flex; align-items: center;
  padding: 13px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-answer-text);
  font: inherit; font-size: var(--type-body); font-weight: var(--font-medium);
  letter-spacing: var(--tracking-description); line-height: var(--leading-compact-copy);
  text-align: start; cursor: pointer;
  transition: background-color 140ms var(--motion-ease), border-color 140ms var(--motion-ease),
              transform var(--motion-press) var(--motion-ease);
}
.answer-choice:hover { border-color: #e6c3b6; background: #fffaf7; }
.answer-choice:active { transform: scale(0.99); }
.answer-choice:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.answer-choice[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-ink); }
.answer-choice[data-state="correct"] { border-color: var(--color-success); background: var(--color-success-soft); color: var(--color-success); }
.answer-choice[data-state="wrong"] { border-color: var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger); }

/* ---------------------------------------------------------------- feedback footer */
.activity-feedback {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--course-content-inset);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-feedback-surface);
}
.activity-feedback__icon {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: var(--color-white);
  background: var(--color-info);
}
.activity-feedback__icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.activity-feedback--success .activity-feedback__icon { background: var(--color-feedback-success); }
.activity-feedback--error .activity-feedback__icon { background: var(--color-danger); }
.activity-feedback__copy { display: grid; gap: var(--space-copy-tight); min-width: 0; }
.activity-feedback__title { margin: 0; font-size: var(--type-supporting); font-weight: var(--font-strong); color: var(--color-ink); }
.activity-feedback__message { margin: 0; font-size: var(--type-supporting); color: var(--color-feedback-copy); line-height: var(--leading-supporting); }

/* ---------------------------------------------------------------- bottom navigation */
.bottom-navigation {
  position: fixed; inset-inline: 0; inset-block-end: 0;
  z-index: 20;
  display: flex; justify-content: center;
  padding-block-end: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--color-canvas) 92%, transparent);
  backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--color-border-subtle);
}
.bottom-navigation__inner { width: min(100%, var(--app-shell-max-width)); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.bottom-navigation__tab {
  display: grid; justify-items: center; gap: var(--space-1);
  min-height: var(--tab-bar-height);
  padding: 9px 4px 7px;
  border: 0; background: none;
  color: var(--color-muted);
  font: inherit; font-size: var(--type-tab-label); font-weight: var(--font-strong);
  letter-spacing: var(--tracking-eyebrow);
  cursor: pointer;
  transition: color var(--motion-quick) var(--motion-ease);
}
.bottom-navigation__tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bottom-navigation__tab[aria-current="page"] { color: var(--color-primary-ink); }
.bottom-navigation__tab:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; border-radius: var(--radius-surface); }

/* ---------------------------------------------------------------- profile stats */
.profile-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.profile-stat {
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-surface);
  background: var(--color-lemon);
  color: var(--color-gold-ink);
  display: grid; gap: var(--space-1);
}
.profile-stat__value { font-size: var(--type-stat-value); font-weight: var(--font-strong); letter-spacing: var(--tracking-stat-value); line-height: var(--leading-stat-value); font-variant-numeric: var(--numeric-profile-stat); }
.profile-stat__label { font-size: var(--type-metadata); color: var(--color-muted-strong); }

/* ============================================================================
   ADDED primitives — the parts a design system needs beyond one app's flow
   ========================================================================== */

/* ---- badge ------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: var(--type-metadata); font-weight: var(--font-strong);
  letter-spacing: var(--tracking-eyebrow); line-height: 1.4;
  background: var(--color-secondary); color: var(--color-primary-ink);
  white-space: nowrap;
}
.badge--streak { background: var(--color-lemon); color: var(--color-gold-ink); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }

/* ---- field ------------------------------------------------------------- */
.field { display: grid; gap: var(--space-copy-small); }
.field__label { font-size: var(--type-label); font-weight: var(--font-strong); color: var(--color-ink); }
.field__hint { font-size: var(--type-metadata); color: var(--color-muted); }
.field__error { font-size: var(--type-metadata); color: var(--color-danger); font-weight: var(--font-strong); }
.field input,
.field textarea,
.field select {
  width: 100%; min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-white);
  color: var(--color-ink);
  font: inherit; font-size: 16px;        /* 16px stops iOS zoom-on-focus */
  line-height: 1.35;
  transition: border-color var(--motion-quick) var(--motion-ease), box-shadow var(--motion-quick) var(--motion-ease);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-focus); }
.field [aria-invalid="true"] { border-color: var(--color-danger); }

/* ---- alert ------------------------------------------------------------- */
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-surface);
  background: var(--color-info-soft);
  color: var(--color-info);
  font-size: var(--type-supporting); line-height: var(--leading-supporting);
}
.alert--success { background: var(--color-success-soft); color: var(--color-success); }
.alert--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.alert__title { margin: 0 0 2px; font-weight: var(--font-strong); }
.alert p { margin: 0; }

/* ---- empty state ------------------------------------------------------- */
.empty {
  display: grid; justify-items: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-surface);
  color: var(--color-muted);
}
.empty__title { font-size: var(--type-course-title); font-weight: var(--font-strong); color: var(--color-ink); }
.empty__body { font-size: var(--type-supporting); max-width: 34ch; line-height: var(--leading-supporting); }

/* ---- skeleton ---------------------------------------------------------- */
.skeleton {
  border-radius: var(--radius-surface);
  background: linear-gradient(90deg, var(--color-border-subtle) 25%, var(--color-primary-soft) 37%, var(--color-border-subtle) 63%);
  background-size: 400% 100%;
  animation: skeleton-sweep 1.4s linear infinite;
}
@keyframes skeleton-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---- toast ------------------------------------------------------------- */
.toast-region { position: fixed; inset-block-end: calc(var(--tab-bar-height) + var(--space-3)); inset-inline: 0; display: grid; justify-items: center; gap: var(--space-2); pointer-events: none; z-index: 30; }
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-canvas);
  font-size: var(--type-supporting); font-weight: var(--font-medium);
  box-shadow: var(--shadow-2);
}

/* ---- dialog ------------------------------------------------------------ */
dialog.sheet {
  width: min(100% - 32px, 420px);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-canvas);
  color: var(--color-ink);
  box-shadow: var(--shadow-2);
}
dialog.sheet::backdrop { background: rgb(23 34 54 / 0.45); }
dialog.sheet h2 { margin: 0 0 var(--space-2); font-size: var(--type-section-heading); letter-spacing: var(--tracking-section-heading); }

/* ---- kbd + code -------------------------------------------------------- */
.kbd {
  display: inline-block; padding: 1px 6px;
  border: 1px solid var(--color-border); border-block-end-width: 2px;
  border-radius: 6px; background: var(--color-white);
  font-size: var(--type-metadata); font-weight: var(--font-strong); font-variant-numeric: tabular-nums;
}
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
pre { margin: 0; padding: var(--space-4); overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); }

/* ---- layout helpers ---------------------------------------------------- */
.stack { display: grid; gap: var(--space-4); }
.stack--tight { gap: var(--space-2); }
.stack--roomy { gap: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.divider { height: 1px; border: 0; background: var(--color-border); margin-block: var(--space-4); }

/* ---- motion floor ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}