/* leadads.guide — component styles. Every colour, radius and font comes from tokens.css. */
:root {
  --la-spring-fast: cubic-bezier(.42, 1.67, .21, .9);
  --la-spring-default: cubic-bezier(.38, 1.21, .22, 1);
  --la-ease-effects: cubic-bezier(.34, .8, .34, 1);
  --la-dur-fast: 350ms;
  --la-dur-default: 500ms;
  --la-dur-effects: 200ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --la-dur-fast: 0ms; --la-dur-default: 0ms; --la-dur-effects: 0ms; }
}

.la-app {
  font-variation-settings: 'ROND' 40;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.la-app *, .la-app *::before, .la-app *::after { box-sizing: border-box; }
.la-app :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Icon ---------- */
.la-icon {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
  display: inline-block; width: 1em; height: 1em; overflow: hidden; flex: none;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; user-select: none;
}

/* ---------- shared state layer ---------- */
.la-btn, .la-ibtn, .la-chip, .la-row, .la-mod__head, .la-tab {
  position: relative; isolation: isolate; -webkit-tap-highlight-color: transparent;
}
.la-btn::before, .la-ibtn::before, .la-chip::before, .la-row::before, .la-mod__head::before, .la-tab::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor;
  opacity: 0; z-index: -1; transition: opacity var(--la-dur-effects) var(--la-ease-effects);
}
.la-btn:hover::before, .la-ibtn:hover::before, .la-chip:hover::before, .la-row:hover::before, .la-mod__head:hover::before, .la-tab:hover::before { opacity: .08; }
.la-btn:active::before, .la-ibtn:active::before, .la-chip:active::before, .la-row:active::before, .la-mod__head:active::before, .la-tab:active::before { opacity: .12; }
.la-row:disabled::before { display: none; }

/* ---------- Button ---------- */
.la-btn {
  --la-h: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--la-h); padding: 0 24px; border: 0; margin: 0;
  border-radius: calc(var(--la-h) / 2);
  font-family: var(--font-body); font-weight: 650; font-size: 16px; line-height: 24px; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-radius var(--la-dur-fast) var(--la-spring-fast),
              background-color var(--la-dur-effects) var(--la-ease-effects),
              box-shadow var(--la-dur-effects) var(--la-ease-effects);
}
.la-btn:active { border-radius: var(--shape-md); }
.la-btn--sm { --la-h: 40px; padding: 0 16px; gap: 6px; font-size: 14px; line-height: 20px; }
.la-btn--sm .la-icon { font-size: 20px; }
.la-btn--sm:active { border-radius: var(--shape-sm); }
.la-btn--lg { --la-h: 80px; padding: 0 36px; gap: 12px; font-family: var(--font-display); font-weight: 750; font-size: 22px; line-height: 28px; }
.la-btn--lg .la-icon { font-size: 30px; }
.la-btn--lg:active { border-radius: var(--shape-lg-plus); }
.la-btn--filled { background: var(--primary); color: var(--on-primary); }
.la-btn--accent { background: var(--tertiary); color: var(--on-tertiary); }
.la-btn--tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.la-btn--outlined { background: transparent; color: var(--on-surface-variant); box-shadow: inset 0 0 0 1px var(--outline); }
.la-btn--text { background: transparent; color: var(--primary-strong); padding: 0 12px; }
.la-btn:disabled {
  cursor: default; box-shadow: none;
  background: color-mix(in srgb, var(--on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--on-surface) 50%, transparent);
}
.la-btn--text:disabled, .la-btn--outlined:disabled { background: transparent; }
.la-btn:disabled::before { display: none; }

/* ---------- IconButton ---------- */
.la-ibtn {
  width: 40px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: 20px;
  display: inline-grid; place-items: center; flex: none; text-decoration: none; cursor: pointer;
  background: transparent; color: var(--on-surface-variant);
  transition: border-radius var(--la-dur-fast) var(--la-spring-fast), background-color var(--la-dur-effects) var(--la-ease-effects);
}
.la-ibtn:active { border-radius: var(--shape-sm); }
.la-ibtn--filled { background: var(--primary); color: var(--on-primary); }
.la-ibtn--tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.la-ibtn--outlined { box-shadow: inset 0 0 0 1px var(--outline); }
.la-ibtn.is-selected { background: var(--primary); color: var(--on-primary); border-radius: var(--shape-md); box-shadow: none; }
.la-ibtn.la-on-player { color: var(--on-player); }

/* ---------- Chip ---------- */
.la-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; margin: 0; border: 0;
  border-radius: var(--shape-sm); background: transparent; color: var(--on-surface-variant);
  box-shadow: inset 0 0 0 1px var(--outline);
  font: 650 14px/20px var(--font-body); cursor: pointer;
  transition: border-radius var(--la-dur-fast) var(--la-spring-fast), background-color var(--la-dur-effects) var(--la-ease-effects), padding var(--la-dur-fast) var(--la-spring-fast);
}
.la-chip .la-icon { font-size: 18px; }
.la-chip:has(.la-icon) { padding-left: 8px; }
.la-chip.is-selected { background: var(--secondary-container); color: var(--on-secondary-container); box-shadow: none; border-radius: 16px; }

/* ---------- Badge ---------- */
.la-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 12px;
  font: 700 12px/16px var(--font-body); letter-spacing: .02em; white-space: nowrap;
}
.la-badge:has(.la-icon) { padding-left: 6px; }
.la-badge--neutral { background: var(--surface-container-highest); color: var(--on-surface-variant); }
.la-badge--new { background: var(--highlight); color: var(--on-highlight); }
.la-badge--hot { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.la-badge--done { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.la-badge--locked { background: var(--surface-container-high); color: var(--on-surface-variant); }

/* ---------- Tabs ---------- */
.la-tabs { display: flex; gap: 4px; box-shadow: inset 0 -1px 0 var(--outline-variant); overflow-x: auto; }
.la-tab {
  height: 48px; padding: 0 16px; margin: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; border-radius: var(--shape-md) var(--shape-md) 0 0;
  color: var(--on-surface-variant); font: 650 14px/20px var(--font-body); white-space: nowrap;
}
.la-tab[aria-selected="true"] { color: var(--primary-strong); }
.la-tab[aria-selected="true"]::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--primary-strong);
}
.la-tab__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center;
  background: var(--surface-container-highest); color: var(--on-surface-variant);
  font: 700 12px/16px var(--font-body); font-variant-numeric: tabular-nums;
}

/* ---------- ProgressBar (M3 linear: active, 4px gap, track, stop dot) ---------- */
.la-progress { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; }
.la-progress__rail { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; height: 8px; }
.la-progress__active { flex: none; height: 8px; border-radius: 4px; background: var(--primary-strong); transition: width var(--la-dur-default) var(--la-spring-default); }
.la-progress__track { position: relative; flex: 1; min-width: 8px; height: 8px; border-radius: 4px; background: var(--secondary-container); }
.la-progress__track::after { content: ''; position: absolute; right: 2px; top: 2px; width: 4px; height: 4px; border-radius: 2px; background: var(--primary-strong); }
.la-progress.is-done .la-progress__active { background: var(--tertiary); }
.la-progress--sm .la-progress__rail, .la-progress--sm .la-progress__active, .la-progress--sm .la-progress__track { height: 4px; }
.la-progress--sm .la-progress__track::after { top: 0; }
.la-progress__label { min-width: 4ch; text-align: right; color: var(--on-surface-variant); font: 500 13px/18px var(--font-mono); font-variant-numeric: tabular-nums; }
.la-progress--player .la-progress__active { background: var(--on-player); }
.la-progress--player .la-progress__track { background: rgba(255, 255, 255, .3); }
.la-progress--player .la-progress__track::after { background: var(--on-player); }

/* ---------- LessonRow ---------- */
.la-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0;
  padding: 8px 14px 8px 12px; border: 0; background: transparent; text-align: left; cursor: pointer;
  border-radius: var(--shape-lg); color: var(--on-surface); font-family: var(--font-body);
  transition: border-radius var(--la-dur-fast) var(--la-spring-fast), background-color var(--la-dur-effects) var(--la-ease-effects);
}
.la-row__lead { flex: none; }
.la-row__lead--done { color: var(--tertiary); }
.la-row__lead--locked { color: var(--on-surface-variant); }
.la-row__ring { width: 20px; height: 20px; margin: 2px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--outline); }
.la-row__now {
  width: 28px; height: 28px; margin: -2px; display: grid; place-items: center;
  border-radius: var(--shape-sm); background: var(--primary); color: var(--on-primary);
}
.la-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.la-row__title { font: 500 15px/20px var(--font-body); }
.la-row__meta { font: 400 13px/18px var(--font-body); color: var(--on-surface-variant); }
.la-row__dur { font: 600 13px/18px var(--font-body); font-variant-numeric: tabular-nums; color: var(--on-surface-variant); }
.la-row--current { background: var(--primary-container); color: var(--on-primary-container); border-radius: var(--shape-xl); }
.la-row--current .la-row__title { font-weight: 700; }
.la-row--current .la-row__meta, .la-row--current .la-row__dur { color: var(--on-primary-container); }
.la-row--locked { cursor: not-allowed; }
.la-row--locked .la-row__title { color: var(--on-surface-variant); }

/* ---------- CourseOutline ---------- */
.la-outline { display: flex; flex-direction: column; gap: 8px; }
.la-mod {
  background: var(--surface-container-low); border-radius: var(--shape-xl); padding: 4px;
  transition: background-color var(--la-dur-effects) var(--la-ease-effects);
}
.la-mod.is-open { background: var(--surface-container-lowest); }
.la-mod__head {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px 12px 10px 10px; border: 0;
  background: none; cursor: pointer; text-align: left; color: var(--on-surface); border-radius: var(--shape-lg-plus);
}
.la-mod__num {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: var(--shape-md); background: var(--tertiary-container); color: var(--on-tertiary-container);
  font: 750 18px/1 var(--font-display);
  transition: border-radius var(--la-dur-fast) var(--la-spring-fast), background-color var(--la-dur-effects) var(--la-ease-effects);
}
.la-mod.is-open .la-mod__num { border-radius: 18px; background: var(--tertiary); color: var(--on-tertiary); }
.la-mod__title { flex: 1; min-width: 0; font: 650 17px/22px var(--font-display); }
.la-mod__count { font: 650 13px/18px var(--font-body); font-variant-numeric: tabular-nums; color: var(--on-surface-variant); }
.la-mod__chev { color: var(--on-surface-variant); transition: transform var(--la-dur-default) var(--la-spring-default); }
.la-mod.is-open .la-mod__chev { transform: rotate(180deg); }
.la-mod__body { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 4px; }

/* ---------- CourseCard ---------- */
.la-card {
  display: flex; flex-direction: column; width: 100%; max-width: 360px; overflow: hidden;
  background: var(--surface-container-low); color: var(--on-surface); border-radius: var(--shape-xl);
  transition: border-radius var(--la-dur-fast) var(--la-spring-fast), box-shadow var(--la-dur-effects) var(--la-ease-effects), background-color var(--la-dur-effects) var(--la-ease-effects);
}
.la-card:hover { border-radius: var(--shape-xl-plus); box-shadow: var(--elevation-1); background: var(--surface-container); }
.la-card__art { position: relative; aspect-ratio: 16 / 9; margin: 8px; overflow: hidden; border-radius: var(--shape-lg); }
.la-art--primary { background: var(--primary-container); color: var(--on-primary-container); --la-art-a: var(--primary); --la-art-b: var(--highlight); }
.la-art--tertiary { background: var(--tertiary-container); color: var(--on-tertiary-container); --la-art-a: var(--tertiary); --la-art-b: var(--highlight); }
.la-art--highlight { background: var(--highlight); color: var(--on-highlight); --la-art-a: var(--tertiary); --la-art-b: var(--primary); }
.la-art--ink { background: var(--inverse-surface); color: var(--inverse-on-surface); --la-art-a: var(--primary-container); --la-art-b: var(--tertiary-container); }
.la-card__disc { position: absolute; width: 58%; aspect-ratio: 1; right: -10%; top: -26%; border-radius: 50%; background: var(--la-art-a); }
.la-card__pill { position: absolute; width: 34%; height: 22%; right: 8%; bottom: 12%; border-radius: var(--shape-full); background: var(--la-art-b); }
.la-card__letter {
  position: absolute; left: 18px; bottom: 6px;
  font: 800 92px/1 var(--font-display); letter-spacing: -.02em;
}
.la-card__body { display: flex; flex-direction: column; gap: 10px; padding: 8px 20px 20px; }
.la-card__eyebrow { font: 700 12px/16px var(--font-body); letter-spacing: .04em; color: var(--tertiary); }
.la-card__title { margin: 0; font: 650 22px/28px var(--font-display); }
.la-card__meta { font: 400 14px/20px var(--font-body); color: var(--on-surface-variant); }
.la-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }

/* ---------- VideoPlayer ---------- */
.la-player { overflow: hidden; border-radius: var(--shape-xl); background: var(--player-ground); color: var(--on-player); font-family: var(--font-body); }
.la-player__stage { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--player-ground); }
.la-player__chapter {
  position: absolute; left: 16px; top: 16px; height: 32px; padding: 0 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .14); color: var(--on-player); font: 650 13px/32px var(--font-body);
}
.la-player__play {
  width: 96px; height: 96px; border: 0; padding: 0; border-radius: 48px; cursor: pointer;
  display: grid; place-items: center; background: var(--primary-container); color: var(--on-primary-container);
  transition: border-radius var(--la-dur-fast) var(--la-spring-fast), transform var(--la-dur-fast) var(--la-spring-fast);
}
.la-player__play:hover { border-radius: var(--shape-xl); }
.la-player__play:active { transform: scale(.92); }
.la-player.is-playing .la-player__play { border-radius: var(--shape-xl); background: rgba(255, 255, 255, .16); color: var(--on-player); }
.la-player__bar { display: flex; align-items: center; gap: 4px; padding: 6px 10px 10px; }
.la-player__time { padding: 0 8px 0 4px; font: 650 13px/18px var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.la-player__track { flex: 1; min-width: 0; padding-right: 8px; }

/* ---------- ResourceItem ---------- */
.la-res {
  display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 12px;
  border-radius: var(--shape-lg); background: var(--surface-container-low); color: var(--on-surface);
}
.la-res__ic {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border-radius: var(--shape-md); background: var(--tertiary-container); color: var(--on-tertiary-container);
}
.la-res__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.la-res__name { font: 650 15px/20px var(--font-body); }
.la-res__meta { font: 400 13px/18px var(--font-body); color: var(--on-surface-variant); }

/* ---------- TopBar ---------- */
.la-top {
  display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 12px 0 8px;
  background: var(--surface-container); color: var(--on-surface);
}
.la-top__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 18px/24px var(--font-display); }
.la-top__prog { width: 220px; flex: none; }
.la-top__avatar {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--shape-md); background: var(--tertiary); color: var(--on-tertiary); font: 800 16px/1 var(--font-display);
}

/* ---------- Wordmark ---------- */
.la-wordmark { font: 800 24px/1 var(--font-display); letter-spacing: -.02em; color: var(--on-surface); }
.la-wordmark b { font-weight: inherit; color: var(--primary-strong); }

/* ---------- Art: Shape, IconTile, Spot, Pattern ---------- */
.la-shape { display: block; flex: none; }
.la-itile { position: relative; display: inline-grid; place-items: center; flex: none; }
.la-itile > .la-shape { position: absolute; inset: 0; }
.la-itile > .la-icon { position: relative; }
.la-spot { display: inline-block; flex: none; line-height: 0; }
.la-spot > svg { width: 100%; height: 100%; display: block; }
.la-pattern { position: relative; overflow: hidden; line-height: 0; }
.la-pattern > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* CourseCard with spot art */
.la-card__art.has-spot .la-card__pattern { position: absolute; inset: 0; }
.la-card__spot { position: absolute; right: 4%; top: 50%; width: 62%; height: auto; aspect-ratio: 1; transform: translateY(-50%); }
.la-card__spot > svg { width: 100%; height: 100%; }
.la-card__art.has-spot .la-card__letter { z-index: 1; }
.la-card:hover .la-card__spot { transform: translateY(-50%) rotate(-4deg) scale(1.03); }
.la-card__spot { transition: transform var(--la-dur-default) var(--la-spring-default); }

/* ---------- Callout ---------- */
.la-callout {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px 16px 14px;
  border-radius: var(--shape-lg-plus); color: var(--on-surface);
}
.la-callout--tip { background: var(--secondary-container); color: var(--on-secondary-container); }
.la-callout--note { background: var(--surface-container); }
.la-callout--warning { background: var(--error-container); color: var(--on-error-container); }
.la-callout__body { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; min-width: 0; }
.la-callout__title { font: 700 15px/22px var(--font-display); }
.la-callout__text { font: 400 15px/22px var(--font-body); }

/* ---------- EmptyState ---------- */
.la-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 24px; }
.la-empty__title { margin-top: 8px; font: 700 22px/28px var(--font-display); color: var(--on-surface); }
.la-empty__text { margin: 0 0 12px; max-width: 40ch; font: 400 15px/22px var(--font-body); color: var(--on-surface-variant); }

/* ---------- Achievement ---------- */
.la-ach { display: flex; align-items: center; gap: 24px; padding: 20px 28px 20px 20px; border-radius: var(--shape-xl); background: var(--surface-container-low); color: var(--on-surface); }
.la-ach__badge { position: relative; width: 112px; height: 112px; flex: none; display: grid; place-items: center; animation: la-ach-pop 700ms var(--la-spring-fast) both; }
.la-ach__badge > .la-shape { position: absolute; inset: 0; animation: la-ach-spin 1200ms var(--la-spring-default) both; }
.la-ach__badge > .la-icon { position: relative; }
.la-ach__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.la-ach__eyebrow { font: 700 12px/16px var(--font-body); letter-spacing: .04em; color: var(--tertiary); }
.la-ach__title { font: 800 28px/34px var(--font-display); letter-spacing: -.01em; }
.la-ach__body { margin: 0 0 8px; font: 400 15px/22px var(--font-body); color: var(--on-surface-variant); }
@keyframes la-ach-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes la-ach-spin { from { transform: rotate(-60deg); } to { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .la-ach__badge, .la-ach__badge > .la-shape { animation: none; } }

/* ---------- Type character ---------- */
.la-btn--lg, .la-mod__num, .la-mod__title, .la-card__title, .la-top__title, .la-top__avatar,
.la-callout__title, .la-empty__title, .la-headline { font-variation-settings: 'SOFT' 100, 'WONK' 0; }
.la-card__letter, .la-ach__title, .la-wordmark, .la-display { font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.la-row__dur, .la-tab__count, .la-mod__count, .la-player__time, .la-card__eyebrow, .la-ach__eyebrow { font-family: var(--font-mono); font-variation-settings: normal; }
.la-row__dur, .la-mod__count, .la-player__time { font-weight: 500; }
.la-card__eyebrow, .la-ach__eyebrow { font-weight: 600; letter-spacing: .02em; }