/* ============================================================
   Jazzedge Academy Product UI — Components
   Scoped to .jelms. Consumes tokens.css only — no raw values.
   ============================================================ */

.jelms {
  width: 100%;
  background: var(--color-surface-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-body-line-height);
  --jelms-chart-bar-fill: var(--color-brand-teal-interactive);
}

/* Practice history inline SVG labels use --type-body-small / --type-meta in lms-page.css (JA-LMS-135).
   Chart viewBox width is measured to container clientWidth — do not letterbox with a fixed-aspect viewBox (JA-LMS-136). */

.jelms *,
.jelms *::before,
.jelms *::after {
  box-sizing: border-box;
}

/* The UA rule for [hidden] loses to any class selector that sets display.
   Scoped here so `hidden` is dependable everywhere inside the LMS.
   See JA-LMS-105 / JA-LMS-107.
   Convention (JA-LMS-130):
   - Dynamic visibility is driven by the `hidden` attribute, not by toggling
     a class that sets display.
   - Never give a component class a base `display: none` if JS toggles that
     element's visibility — removing `hidden` cannot override it.
   - Base `display: none` is only for responsive hiding, where a media query
     supplies the visible display value. */
.jelms[hidden],
.jelms [hidden] {
  display: none !important;
}

.jelms :where(a:not(.jelms-btn)) {
  color: var(--color-text-link);
  text-decoration: none;
}

.jelms :where(a:not(.jelms-btn)):hover {
  text-decoration: underline;
}

.jelms :where(a.jelms-btn),
.jelms :where(a.jelms-btn):hover {
  text-decoration: none;
}

/* ── Shared interaction ───────────────────────────────────── */

.jelms-interactive {
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    color var(--motion-duration-fast) var(--motion-easing-standard);
}

/* Canonical inline text link — peer of .jelms-select / .jelms-input (JA-LMS-201).
   Matches the scoped default anchor convention above: link color at rest, underline
   on interaction. Stacked selector beats theme .entry-content a:hover at (0,2,1). */
.jelms a.jelms-link.jelms-link {
  color: var(--color-text-link);
  text-decoration: none;
}

.jelms a.jelms-link.jelms-link:hover,
.jelms a.jelms-link.jelms-link:active {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jelms a.jelms-link.jelms-link:active {
  color: var(--color-brand-teal-interactive);
}

.jelms :where(button, [role="button"], a, input, select, textarea):focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
}

.jelms :where(button, [role="button"], a):focus:not(:focus-visible) {
  outline: none;
}

/* ── JA-LMS-189 — grouped anchor interaction states ─────────── */

.jelms a.jelms-focus-chooser-track__cert-link.jelms-focus-chooser-track__cert-link:hover,
.jelms a.jelms-focus-chooser-track__cert-link.jelms-focus-chooser-track__cert-link:focus-visible,
.jelms a.jelms-focus-chooser-track__cert-link.jelms-focus-chooser-track__cert-link:active,
.jelms a.jelms-focus-chooser-lesson-row__link.jelms-focus-chooser-lesson-row__link:hover,
.jelms a.jelms-focus-chooser-lesson-row__link.jelms-focus-chooser-lesson-row__link:focus-visible,
.jelms a.jelms-focus-chooser-lesson-row__link.jelms-focus-chooser-lesson-row__link:active,
.jelms a.jelms-library-focus-table__link.jelms-library-focus-table__link:hover,
.jelms a.jelms-library-focus-table__link.jelms-library-focus-table__link:focus-visible,
.jelms a.jelms-library-focus-table__link.jelms-library-focus-table__link:active,
.jelms a.jelms-library-personal__history.jelms-library-personal__history:hover,
.jelms a.jelms-library-personal__history.jelms-library-personal__history:focus-visible,
.jelms a.jelms-library-personal__history.jelms-library-personal__history:active,
.jelms a.jelms-my-learning__browse.jelms-my-learning__browse:hover,
.jelms a.jelms-my-learning__browse.jelms-my-learning__browse:focus-visible,
.jelms a.jelms-my-learning__browse.jelms-my-learning__browse:active,
.jelms a.jelms-pa-hero__focus-complete-cert-all.jelms-pa-hero__focus-complete-cert-all:hover,
.jelms a.jelms-pa-hero__focus-complete-cert-all.jelms-pa-hero__focus-complete-cert-all:focus-visible,
.jelms a.jelms-pa-hero__focus-complete-cert-all.jelms-pa-hero__focus-complete-cert-all:active,
.jelms a.jelms-learning-card__quiet-action.jelms-learning-card__quiet-action:hover,
.jelms a.jelms-learning-card__quiet-action.jelms-learning-card__quiet-action:focus-visible,
.jelms a.jelms-learning-card__quiet-action.jelms-learning-card__quiet-action:active,
.jelms a.jelms-learning-card__quiet-action--block.jelms-learning-card__quiet-action--block:hover,
.jelms a.jelms-learning-card__quiet-action--block.jelms-learning-card__quiet-action--block:focus-visible,
.jelms a.jelms-learning-card__quiet-action--block.jelms-learning-card__quiet-action--block:active,
.jelms a.jelms-search-start-card__upgrade.jelms-search-start-card__upgrade:hover,
.jelms a.jelms-search-start-card__upgrade.jelms-search-start-card__upgrade:focus-visible,
.jelms a.jelms-search-start-card__upgrade.jelms-search-start-card__upgrade:active {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-brand-teal-interactive);
  text-decoration: none;
}

.jelms a.jelms-focus-chooser-track__cert-link.jelms-focus-chooser-track__cert-link:hover,
.jelms a.jelms-focus-chooser-track__cert-link.jelms-focus-chooser-track__cert-link:focus-visible,
.jelms a.jelms-focus-chooser-track__cert-link.jelms-focus-chooser-track__cert-link:active {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jelms a.jelms-library-applied__chip.jelms-library-applied__chip:hover,
.jelms a.jelms-library-applied__chip.jelms-library-applied__chip:focus-visible,
.jelms a.jelms-library-applied__chip.jelms-library-applied__chip:active,
.jelms a.jelms-library-collection-pill.jelms-library-collection-pill:hover,
.jelms a.jelms-library-collection-pill.jelms-library-collection-pill:focus-visible,
.jelms a.jelms-library-collection-pill.jelms-library-collection-pill:active,
.jelms a.jelms-library-topic.jelms-library-topic:hover,
.jelms a.jelms-library-topic.jelms-library-topic:focus-visible,
.jelms a.jelms-library-topic.jelms-library-topic:active {
  background-color: var(--color-surface-selected);
  border-color: var(--color-border-interactive, var(--color-brand-teal-interactive));
  color: var(--color-brand-teal-interactive);
  text-decoration: none;
}

.jelms .jelms-library-starter-card:has(a.jelms-library-starter-card__link:hover),
.jelms .jelms-library-starter-card:has(a.jelms-library-starter-card__link:focus-visible) {
  border-color: var(--color-border-interactive, var(--color-brand-teal-interactive));
}

.jelms a.jelms-library-starter-card__link.jelms-library-starter-card__link:hover,
.jelms a.jelms-library-starter-card__link.jelms-library-starter-card__link:focus-visible,
.jelms a.jelms-library-starter-card__link.jelms-library-starter-card__link:active {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text-link);
  text-decoration: none;
}

.jelms a.jelms-library-pagination__btn.jelms-library-pagination__btn:hover,
.jelms a.jelms-library-pagination__btn.jelms-library-pagination__btn:focus-visible,
.jelms a.jelms-library-pagination__btn.jelms-library-pagination__btn:active,
.jelms a.jelms-library-personal-card__action.jelms-library-personal-card__action:hover,
.jelms a.jelms-library-personal-card__action.jelms-library-personal-card__action:focus-visible,
.jelms a.jelms-library-personal-card__action.jelms-library-personal-card__action:active {
  background-color: var(--color-surface-selected);
  border-color: var(--color-border-interactive);
  color: var(--color-brand-teal-interactive);
  text-decoration: none;
}

.jelms a.jelms-library-pagination__btn.jelms-library-pagination__btn:active,
.jelms a.jelms-library-personal-card__action.jelms-library-personal-card__action:active {
  border-color: var(--color-border-strong);
}

/* Icons */
.jelms .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex: none;
}

.jelms .ic svg {
  display: block;
  width: 1em;
  height: 1em;
}

/* ── Base card ────────────────────────────────────────────── */

.jelms-card {
  position: relative;
  background: var(--color-surface-card);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-none);
}

.jelms-card--pad {
  padding: var(--space-6);
}

.jelms-card--pad-compact {
  padding: var(--space-4);
}

.jelms-card--pad-hero {
  padding: var(--space-5);
}

.jelms-card__eyebrow {
  margin: 0 0 var(--space-2);
}

.jelms-card__title {
  margin: 0;
}

.jelms-card__title + .jelms-card__content,
.jelms-card__eyebrow + .jelms-card__title-block {
  margin-top: var(--space-2);
}

.jelms-card__title-block + .jelms-card__content {
  margin-top: var(--space-3);
}

.jelms-card__content + .jelms-card__actions {
  margin-top: var(--space-4);
}

.jelms-card--interactive.jelms-interactive:hover {
  border-color: var(--color-border-strong);
}

.jelms-card--selected {
  border: var(--border-strong) solid var(--color-border-interactive);
  padding: calc(var(--space-6) - var(--border-hairline));
}

.jelms-card--pad-compact.jelms-card--selected {
  padding: calc(var(--space-4) - var(--border-hairline));
}

.jelms-card--pad-hero.jelms-card--selected {
  padding: calc(var(--space-5) - var(--border-hairline));
}

.jelms-card:focus-within {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
}

.jelms-card--error {
  border: var(--border-strong) solid var(--color-semantic-danger);
}

.jelms-card--error .jelms-card__error {
  margin-top: var(--space-2);
  color: var(--color-semantic-danger);
}

.jelms-card.is-loading {
  min-height: inherit;
}

.jelms-card__skeleton {
  background: var(--color-surface-sunken);
  border-radius: var(--radius-control);
}

@media (prefers-reduced-motion: reduce) {
  .jelms-card.is-loading .jelms-card__skeleton {
    animation: none;
  }
}

@media (max-width: 767px) {
  .jelms-card--pad,
  .jelms-card--pad-hero {
    padding: var(--space-4);
  }

  .jelms-card--selected.jelms-card--pad,
  .jelms-card--selected.jelms-card--pad-hero {
    padding: calc(var(--space-4) - var(--border-hairline));
  }
}

/* ── Tooltip utility (.jelms-tip) ───────────────────────────── */

.jelms-tip {
  position: relative;
}

.jelms-tip::after {
  content: attr(data-jelms-tip);
  position: absolute;
  z-index: var(--z-tooltip);
  width: max-content;
  max-width: min(320px, 60vw);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  font-weight: var(--font-weight-regular);
  white-space: normal;
  text-align: center;
  box-shadow: var(--shadow-popover);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 100ms ease-out, transform 100ms ease-out;
  transition-delay: 0;
}

.jelms-tip::before {
  content: "";
  position: absolute;
  z-index: var(--z-tooltip);
  width: 0;
  height: 0;
  border: var(--space-1) solid transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 100ms ease-out, transform 100ms ease-out;
  transition-delay: 0;
}

.jelms-tip:not([data-jelms-tip])::after,
.jelms-tip:not([data-jelms-tip])::before,
.jelms-tip[data-jelms-tip=""]::after,
.jelms-tip[data-jelms-tip=""]::before {
  content: none;
  display: none;
}

.jelms-tip:not([data-jelms-tip-pos])::after,
.jelms-tip[data-jelms-tip-pos="top"]::after {
  inset-block-end: calc(100% + var(--space-2));
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(var(--space-1));
}

.jelms-tip:not([data-jelms-tip-pos])::before,
.jelms-tip[data-jelms-tip-pos="top"]::before {
  inset-block-end: calc(100% + var(--space-1));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  border-block-start-color: var(--color-text-primary);
}

.jelms-tip[data-jelms-tip-pos="bottom"]::after {
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(calc(var(--space-1) * -1));
}

.jelms-tip[data-jelms-tip-pos="bottom"]::before {
  inset-block-start: calc(100% + var(--space-1));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  border-block-end-color: var(--color-text-primary);
}

.jelms-tip[data-jelms-tip-pos="left"]::after {
  inset-inline-end: calc(100% + var(--space-2));
  inset-block-start: 50%;
  transform: translateY(-50%) translateX(calc(var(--space-1) * -1));
}

.jelms-tip[data-jelms-tip-pos="left"]::before {
  inset-inline-end: calc(100% + var(--space-1));
  inset-block-start: 50%;
  transform: translateY(-50%);
  border-inline-start-color: var(--color-text-primary);
}

.jelms-tip[data-jelms-tip-pos="right"]::after {
  inset-inline-start: calc(100% + var(--space-2));
  inset-block-start: 50%;
  transform: translateY(-50%) translateX(var(--space-1));
}

.jelms-tip[data-jelms-tip-pos="right"]::before {
  inset-inline-start: calc(100% + var(--space-1));
  inset-block-start: 50%;
  transform: translateY(-50%);
  border-inline-end-color: var(--color-text-primary);
}

.jelms-tip:hover::after,
.jelms-tip:focus-visible::after,
.jelms-tip:hover::before,
.jelms-tip:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

.jelms-tip:not([data-jelms-tip-pos]):hover::after,
.jelms-tip:not([data-jelms-tip-pos]):focus-visible::after,
.jelms-tip[data-jelms-tip-pos="top"]:hover::after,
.jelms-tip[data-jelms-tip-pos="top"]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

.jelms-tip[data-jelms-tip-pos="bottom"]:hover::after,
.jelms-tip[data-jelms-tip-pos="bottom"]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

.jelms-tip[data-jelms-tip-pos="left"]:hover::after,
.jelms-tip[data-jelms-tip-pos="left"]:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}

.jelms-tip[data-jelms-tip-pos="right"]:hover::after,
.jelms-tip[data-jelms-tip-pos="right"]:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}

@media (pointer: coarse) {
  .jelms-tip:focus::after,
  .jelms-tip:focus::before {
    opacity: 1;
    visibility: visible;
  }

  .jelms-tip:not([data-jelms-tip-pos]):focus::after,
  .jelms-tip[data-jelms-tip-pos="top"]:focus::after {
    transform: translateX(-50%) translateY(0);
  }

  .jelms-tip[data-jelms-tip-pos="bottom"]:focus::after {
    transform: translateX(-50%) translateY(0);
  }

  .jelms-tip[data-jelms-tip-pos="left"]:focus::after {
    transform: translateY(-50%) translateX(0);
  }

  .jelms-tip[data-jelms-tip-pos="right"]:focus::after {
    transform: translateY(-50%) translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jelms-tip::after,
  .jelms-tip::before {
    transition: opacity 100ms ease-out;
  }

  .jelms-tip:not([data-jelms-tip-pos])::after,
  .jelms-tip[data-jelms-tip-pos="top"]::after {
    transform: translateX(-50%) translateY(0);
  }

  .jelms-tip[data-jelms-tip-pos="bottom"]::after {
    transform: translateX(-50%) translateY(0);
  }

  .jelms-tip[data-jelms-tip-pos="left"]::after {
    transform: translateY(-50%) translateX(0);
  }

  .jelms-tip[data-jelms-tip-pos="right"]::after {
    transform: translateY(-50%) translateX(0);
  }
}

/* Category rail */
.jelms-card--railed {
  overflow: hidden;
}

.jelms-card--railed::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--space-1);
  border-radius: calc(var(--radius-card) - var(--border-hairline)) 0 0 calc(var(--radius-card) - var(--border-hairline));
  background: var(--jelms-rail-color, var(--color-border-hairline));
}

.jelms-rail--practice-curriculum {
  --jelms-rail-color: var(--color-category-practice-curriculum);
}

.jelms-rail--practice-focus {
  --jelms-rail-color: var(--color-category-practice-focus);
}

.jelms-rail--intensive {
  --jelms-rail-color: var(--color-category-intensive);
}

.jelms-rail--coaching {
  --jelms-rail-color: var(--color-category-coaching);
}

.jelms-rail--collection {
  --jelms-rail-color: var(--color-category-collection);
}

.jelms-rail--membership {
  --jelms-rail-color: var(--color-category-membership);
}

/* Icon wells */
.jelms-icon-well {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-medium);
  height: var(--size-control-medium);
  border-radius: var(--radius-control);
  background: var(--color-surface-selected);
  color: var(--color-brand-teal-interactive);
  flex: none;
}

.jelms-icon-well .ic {
  font-size: var(--size-icon-medium);
}

.jelms-icon-well--practice-curriculum {
  color: var(--color-category-practice-curriculum);
  background: color-mix(in srgb, var(--color-category-practice-curriculum) 12%, var(--color-surface-selected));
}

.jelms-icon-well--practice-focus {
  color: var(--color-category-practice-focus);
  background: color-mix(in srgb, var(--color-category-practice-focus) 12%, var(--color-surface-selected));
}

.jelms-icon-well--intensive {
  color: var(--color-category-intensive);
  background: color-mix(in srgb, var(--color-category-intensive) 12%, var(--color-semantic-warning-surface));
}

.jelms-icon-well--coaching {
  color: var(--color-category-coaching);
  background: color-mix(in srgb, var(--color-category-coaching) 12%, var(--color-surface-selected));
}

.jelms-icon-well--collection {
  color: var(--color-category-collection);
  background: color-mix(in srgb, var(--color-category-collection) 12%, var(--color-surface-selected));
}

.jelms-icon-well--membership {
  color: var(--color-category-membership);
  background: color-mix(in srgb, var(--color-category-membership) 12%, var(--color-surface-selected));
}

.jelms-icon-well--stat {
  width: var(--size-control-small);
  height: var(--size-control-small);
}

/* ── Buttons ──────────────────────────────────────────────── */

.jelms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--size-control-medium);
  height: var(--size-control-medium);
  padding-inline: var(--space-4);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-brand-teal-interactive);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.jelms-btn.jelms-interactive,
.jelms-btn {
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    color var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-btn .ic {
  font-size: var(--size-icon-small);
}

.jelms-btn--sm {
  min-width: var(--size-control-small);
  height: var(--size-control-small);
  padding-inline: var(--space-3);
}

.jelms-btn--sm .ic {
  font-size: var(--size-icon-small);
}

.jelms-btn--lg {
  min-width: var(--size-control-large);
  height: var(--size-control-large);
  padding-inline: var(--space-5);
}

.jelms-btn--lg .ic {
  font-size: var(--size-icon-medium);
}

.jelms-btn.jelms-btn--primary,
.jelms .jelms-btn.jelms-btn--primary,
.jelms.jelms-popover__panel .jelms-btn.jelms-btn--primary {
  background-color: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--color-action-primary-text);
}

.jelms-btn.jelms-btn--primary:hover,
.jelms .jelms-btn.jelms-btn--primary:hover,
.jelms.jelms-popover__panel .jelms-btn.jelms-btn--primary:hover {
  background-color: var(--color-action-primary-hover);
  border-color: var(--color-action-primary-hover);
  color: var(--color-action-primary-text);
}

.jelms-btn.jelms-btn--primary:active,
.jelms .jelms-btn.jelms-btn--primary:active,
.jelms.jelms-popover__panel .jelms-btn.jelms-btn--primary:active {
  background-color: var(--color-action-primary-active);
  border-color: var(--color-action-primary-active);
  color: var(--color-action-primary-text);
}

.jelms-btn.jelms-btn--primary:disabled,
.jelms-btn.jelms-btn--primary.is-disabled,
.jelms .jelms-btn.jelms-btn--primary:disabled,
.jelms .jelms-btn.jelms-btn--primary.is-disabled,
.jelms.jelms-popover__panel .jelms-btn.jelms-btn--primary:disabled,
.jelms.jelms-popover__panel .jelms-btn.jelms-btn--primary.is-disabled {
  background-color: var(--color-surface-sunken);
  border-color: var(--color-border-hairline);
  color: var(--color-text-disabled);
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.jelms-btn.jelms-btn--accent,
.jelms .jelms-btn.jelms-btn--accent,
.jelms.jelms-popover__panel .jelms-btn.jelms-btn--accent {
  background-color: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--color-action-primary-text);
}

.jelms-btn.jelms-btn--accent:hover,
.jelms .jelms-btn.jelms-btn--accent:hover,
.jelms.jelms-popover__panel .jelms-btn.jelms-btn--accent:hover {
  background-color: var(--color-action-primary-hover);
  border-color: var(--color-action-primary-hover);
  color: var(--color-action-primary-text);
}

.jelms-btn.jelms-btn--accent:active,
.jelms .jelms-btn.jelms-btn--accent:active,
.jelms.jelms-popover__panel .jelms-btn.jelms-btn--accent:active {
  background-color: var(--color-action-primary-active);
  border-color: var(--color-action-primary-active);
  color: var(--color-action-primary-text);
}

.jelms-btn.jelms-btn--accent:disabled,
.jelms-btn.jelms-btn--accent.is-disabled,
.jelms .jelms-btn.jelms-btn--accent:disabled,
.jelms .jelms-btn.jelms-btn--accent.is-disabled,
.jelms.jelms-popover__panel .jelms-btn.jelms-btn--accent:disabled,
.jelms.jelms-popover__panel .jelms-btn.jelms-btn--accent.is-disabled {
  background-color: var(--color-surface-sunken);
  border-color: var(--color-border-hairline);
  color: var(--color-text-disabled);
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.jelms-btn--secondary {
  background: transparent;
  border-color: var(--color-border-interactive);
  color: var(--color-brand-teal-interactive);
}

.jelms-btn--secondary:hover {
  background-color: var(--color-surface-selected);
  border-color: var(--color-border-interactive);
  color: var(--color-brand-teal-interactive);
}

.jelms-btn--secondary:active {
  background-color: var(--color-surface-selected);
  border-color: var(--color-border-strong);
  color: var(--color-brand-teal-interactive);
}

.jelms-btn--secondary:disabled,
.jelms-btn--secondary.is-disabled {
  background: var(--color-surface-sunken);
  border-color: var(--color-border-hairline);
  color: var(--color-text-disabled);
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.jelms-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-brand-teal-interactive);
}

.jelms-btn--ghost:hover {
  background-color: var(--color-surface-selected);
  border-color: transparent;
  color: var(--color-brand-teal-interactive);
}

.jelms-btn--ghost:active {
  background-color: var(--color-surface-sunken);
  border-color: transparent;
  color: var(--color-brand-teal-interactive);
}

.jelms-btn--ghost:disabled,
.jelms-btn--ghost.is-disabled {
  background: var(--color-surface-sunken);
  border-color: var(--color-border-hairline);
  color: var(--color-text-disabled);
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.jelms-btn--neutral {
  background: transparent;
  border-color: var(--color-border-hairline);
  color: var(--color-text-primary);
}

.jelms-btn--neutral:hover {
  background-color: var(--color-surface-selected);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.jelms-btn--neutral:active {
  background-color: var(--color-surface-sunken);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.jelms-btn--neutral:disabled,
.jelms-btn--neutral.is-disabled {
  background: var(--color-surface-sunken);
  border-color: var(--color-border-hairline);
  color: var(--color-text-disabled);
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Anchor buttons — beat theme .entry-content a:hover (0,2,1) at (0,4,0)+ */
.jelms .jelms-btn:hover,
.jelms .jelms-btn:focus-visible,
.jelms .jelms-btn:active {
  text-decoration: none;
}

.jelms .jelms-btn.jelms-btn--primary:hover,
.jelms .jelms-btn.jelms-btn--primary:focus-visible,
.jelms .jelms-btn.jelms-btn--primary:active {
  background-color: var(--color-action-primary-hover);
  border-color: var(--color-action-primary-hover);
  color: var(--color-action-primary-text);
  text-decoration: none;
}

.jelms .jelms-btn.jelms-btn--primary:active {
  background-color: var(--color-action-primary-active);
  border-color: var(--color-action-primary-active);
  color: var(--color-action-primary-text);
}

.jelms .jelms-btn.jelms-btn--accent:hover,
.jelms .jelms-btn.jelms-btn--accent:focus-visible,
.jelms .jelms-btn.jelms-btn--accent:active {
  background-color: var(--color-action-primary-hover);
  border-color: var(--color-action-primary-hover);
  color: var(--color-action-primary-text);
  text-decoration: none;
}

.jelms .jelms-btn.jelms-btn--accent:active {
  background-color: var(--color-action-primary-active);
  border-color: var(--color-action-primary-active);
  color: var(--color-action-primary-text);
}

.jelms .jelms-btn.jelms-btn--secondary:hover,
.jelms .jelms-btn.jelms-btn--secondary:focus-visible,
.jelms .jelms-btn.jelms-btn--secondary:active {
  background-color: var(--color-surface-selected);
  border-color: var(--color-border-interactive);
  color: var(--color-brand-teal-interactive);
  text-decoration: none;
}

.jelms .jelms-btn.jelms-btn--secondary:active {
  border-color: var(--color-border-strong);
}

.jelms .jelms-btn.jelms-btn--ghost:hover,
.jelms .jelms-btn.jelms-btn--ghost:focus-visible,
.jelms .jelms-btn.jelms-btn--ghost:active {
  background-color: var(--color-surface-selected);
  border-color: transparent;
  color: var(--color-brand-teal-interactive);
  text-decoration: none;
}

.jelms .jelms-btn.jelms-btn--ghost:active {
  background-color: var(--color-surface-sunken);
}

.jelms .jelms-btn.jelms-btn--neutral:hover,
.jelms .jelms-btn.jelms-btn--neutral:focus-visible,
.jelms .jelms-btn.jelms-btn--neutral:active {
  background-color: var(--color-surface-selected);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  text-decoration: none;
}

.jelms .jelms-btn.jelms-btn--neutral:active {
  background-color: var(--color-surface-sunken);
}

.jelms-btn--ghost-destructive {
  color: var(--color-semantic-danger);
}

.jelms-btn--ghost-destructive:hover {
  background: var(--color-semantic-danger-surface);
}

.jelms-btn--ghost-destructive:disabled,
.jelms-btn--ghost-destructive.is-disabled {
  background: var(--color-surface-sunken);
  border-color: var(--color-border-hairline);
  color: var(--color-text-disabled);
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.jelms-btn--icon {
  position: relative;
  min-width: var(--size-tap-target-minimum);
  width: var(--size-tap-target-minimum);
  height: var(--size-tap-target-minimum);
  padding: 0;
}

.jelms-btn--icon-compact {
  min-width: var(--size-icon-xlarge);
  width: var(--size-icon-xlarge);
  height: var(--size-icon-xlarge);
  padding: 0;
}

.jelms-btn--icon-compact::before {
  content: "";
  position: absolute;
  inset: calc((var(--size-icon-xlarge) - var(--size-tap-target-minimum)) / 2);
}

.jelms-btn.is-loading {
  pointer-events: none;
}

.jelms-btn.is-loading .ic {
  animation: jelms-spin var(--motion-duration-slow) linear infinite;
}

@keyframes jelms-spin {
  to {
    transform: rotate(360deg);
  }
}

.jelms-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ── Progress bar ─────────────────────────────────────────── */

.jelms-progress {
  height: var(--size-progress-bar);
  border-radius: var(--radius-pill);
  background: var(--color-progress-track);
  overflow: hidden;
}

.jelms-progress > span,
.jelms-progress > i,
.jelms-progress__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--jelms-progress-fill, var(--color-brand-teal-interactive));
}

.jelms-progress--practice-curriculum {
  --jelms-progress-fill: var(--color-category-practice-curriculum);
}

.jelms-progress--practice-focus {
  --jelms-progress-fill: var(--color-category-practice-focus);
}

.jelms-progress--intensive {
  --jelms-progress-fill: var(--color-category-intensive);
}

.jelms-progress--coaching {
  --jelms-progress-fill: var(--color-category-coaching);
}

.jelms-progress--collection {
  --jelms-progress-fill: var(--color-category-collection);
}

.jelms-progress--membership {
  --jelms-progress-fill: var(--color-category-membership);
}

.jelms-progress-group {
  margin-top: var(--space-2);
}

.jelms-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

/* ── My learning — section + cards (JA-LMS-116) ───────────── */

.jelms-my-learning__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}

.jelms-my-learning__title {
  margin: 0;
  font-size: var(--type-page-title-font-size);
  line-height: var(--type-page-title-line-height);
  font-weight: var(--type-page-title-font-weight);
  letter-spacing: var(--type-page-title-letter-spacing);
}

.jelms-my-learning__subtitle {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
}

.jelms-my-learning__browse {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-link);
  font-size: var(--type-section-title-font-size);
  line-height: var(--type-section-title-line-height);
  font-weight: var(--type-label-font-weight);
  text-decoration: none;
  white-space: nowrap;
}

.jelms-my-learning__browse .ic {
  width: var(--space-5);
  height: var(--space-5);
}

.jelms-my-learning__list {
  display: grid;
  gap: var(--space-5);
}

.jelms-learning-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: calc(var(--space-16) + var(--space-2)) minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-7) var(--space-8) var(--space-7) var(--space-10);
  background: var(--color-surface-card);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  min-height: calc(var(--space-16) * 3 + var(--space-7));
}

.jelms-learning-card--featured {
  border-color: var(--color-border-strong);
}

.jelms-learning-card__rail {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--space-1);
  background: var(--color-category-practice-curriculum);
}

.jelms-learning-card__rail--practice-focus {
  background: var(--color-category-practice-focus);
}

.jelms-learning-card__rail--intensive,
.jelms-learning-card__rail--membership {
  background: var(--color-category-intensive);
}

.jelms-learning-card__rail--collection {
  background: var(--color-category-collection);
}

.jelms-learning-card__icon {
  width: calc(var(--space-16) + var(--space-2));
  height: calc(var(--space-16) + var(--space-2));
  margin-block-start: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface-selected);
  color: var(--color-category-practice-curriculum);
  display: grid;
  place-items: center;
}

.jelms-learning-card__icon--practice-focus {
  color: var(--color-category-practice-focus);
}

.jelms-learning-card__icon--intensive,
.jelms-learning-card__icon--membership {
  color: var(--color-category-intensive);
}

.jelms-learning-card__icon--collection {
  color: var(--color-category-collection);
}

.jelms-learning-card__icon .ic {
  width: var(--space-8);
  height: var(--space-8);
}

.jelms-learning-card__body {
  min-width: 0;
}

.jelms-learning-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.jelms-learning-card__title-copy {
  min-width: 0;
}

.jelms-learning-card__eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-category-practice-curriculum);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  font-weight: var(--type-label-font-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.jelms-learning-card--focus .jelms-learning-card__eyebrow,
.jelms-learning-card--complete .jelms-learning-card__eyebrow {
  color: var(--color-category-practice-focus);
}

.jelms-learning-card--intensive .jelms-learning-card__eyebrow {
  color: var(--color-category-intensive);
}

.jelms-learning-card__title {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: var(--type-page-title-font-weight);
}

.jelms-learning-card__meta {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
  font-size: 18px;
  line-height: 24px;
}

.jelms-learning-card__program-progress {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  white-space: nowrap;
}

.jelms-learning-card__quiet-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-control-large);
  padding: 0 var(--space-1);
  color: var(--color-text-link);
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-label-font-weight);
  text-decoration: none;
  white-space: nowrap;
}

.jelms-learning-card__quiet-action .ic {
  width: var(--space-5);
  height: var(--space-5);
}

.jelms-learning-card__quiet-action--block {
  width: 100%;
  justify-content: flex-end;
  gap: var(--space-1);
  font-weight: var(--font-weight-semibold);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-2);
  border-block-start: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-learning-card__next-step,
.jelms-learning-card__status-panel,
.jelms-learning-card__complete-panel {
  margin-block-start: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-selected);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
}

.jelms-learning-card__next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.jelms-learning-card__next-step-label {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
}

.jelms-learning-card__next-step strong {
  display: block;
  font-size: 17px;
  line-height: 24px;
}

.jelms a.jelms-learning-card__primary-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--size-control-large) + var(--space-1));
  padding: 0 var(--space-5);
  border: var(--border-hairline) solid var(--color-action-primary);
  border-radius: var(--radius-control);
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-label-font-weight);
  text-decoration: none;
  white-space: nowrap;
}

.jelms a.jelms-learning-card__primary-action:hover,
.jelms a.jelms-learning-card__primary-action:focus-visible {
  background-color: var(--color-action-primary-hover);
  border-color: var(--color-action-primary-hover);
  color: var(--color-action-primary-text);
  text-decoration: none;
}

.jelms a.jelms-learning-card__primary-action:active {
  background-color: var(--color-action-primary-active);
  border-color: var(--color-action-primary-active);
  color: var(--color-action-primary-text);
  text-decoration: none;
}

.jelms a.jelms-learning-card__primary-action .ic {
  width: var(--space-5);
  height: var(--space-5);
}

.jelms-learning-card__progress-line {
  margin-block-start: var(--space-4);
}

.jelms-learning-card__progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
}

.jelms-learning-card__bar {
  height: var(--space-2);
  margin-block-start: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-border-hairline);
  overflow: hidden;
}

.jelms-learning-card__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-category-practice-curriculum);
}

.jelms-learning-card__bar--practice-focus > span {
  background: var(--color-category-practice-focus);
}

.jelms-learning-card__bar--intensive > span,
.jelms-learning-card__bar--membership > span {
  background: var(--color-category-intensive);
}

.jelms-learning-card__bar--collection > span {
  background: var(--color-category-collection);
}

.jelms-learning-card__footnote {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 20px;
}

.jelms-learning-card__split-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin-block-start: var(--space-6);
}

.jelms-learning-card__split-progress > div > p {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
}

.jelms-learning-card__reward {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-hairline) solid var(--color-border-hairline);
  color: var(--color-text-secondary);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
}

.jelms-learning-card__reward .ic {
  width: var(--space-5);
  height: var(--space-5);
  color: var(--color-category-practice-focus);
}

.jelms-learning-card__status-panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.jelms-learning-card__status-panel .ic {
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  color: var(--color-category-practice-curriculum);
}

.jelms-learning-card__status-panel--neutral .ic {
  color: var(--color-category-practice-focus);
}

.jelms-learning-card__status-panel strong {
  display: block;
  font-size: 17px;
  line-height: 24px;
}

.jelms-learning-card__status-panel p,
.jelms-learning-card__complete-panel p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 20px;
}

.jelms-learning-card__complete-panel {
  display: grid;
  grid-template-columns: var(--space-12) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}

.jelms-learning-card__complete-mark {
  width: var(--space-12);
  height: var(--space-12);
  border-radius: 50%;
  background: var(--color-category-practice-focus);
  color: var(--color-surface-card);
  display: grid;
  place-items: center;
}

.jelms-learning-card__complete-mark .ic {
  width: var(--space-6);
  height: var(--space-6);
}

.jelms-learning-card__complete-panel strong {
  font-size: 18px;
  line-height: 24px;
}

@media (max-width: 1023px) {
  .jelms-learning-card {
    grid-template-columns: calc(var(--space-12) + var(--space-2)) minmax(0, 1fr);
    padding: var(--space-6);
    gap: var(--space-4);
  }

  .jelms-learning-card__icon {
    width: calc(var(--space-12) + var(--space-2));
    height: calc(var(--space-12) + var(--space-2));
    margin-block-start: 0;
  }

  .jelms-learning-card__title-row {
    align-items: flex-start;
  }

  .jelms-learning-card__split-progress {
    gap: var(--space-5);
  }
}

@media (max-width: 767px) {
  .jelms-my-learning__head {
    align-items: flex-start;
  }

  .jelms-my-learning__subtitle {
    display: none;
  }

  .jelms-my-learning__browse {
    font-size: var(--type-body-font-size);
    line-height: var(--type-body-line-height);
  }

  .jelms-learning-card {
    display: block;
    padding: var(--space-5) var(--space-4) var(--space-5) var(--space-5);
    min-height: 0;
  }

  .jelms-learning-card__icon {
    width: var(--size-control-large);
    height: var(--size-control-large);
    margin: 0 0 var(--space-3);
  }

  .jelms-learning-card__icon .ic {
    width: var(--space-6);
    height: var(--space-6);
  }

  .jelms-learning-card__title-row {
    display: block;
  }

  .jelms-learning-card__title {
    font-size: var(--type-section-title-font-size);
    line-height: var(--type-section-title-line-height);
  }

  .jelms-learning-card__meta {
    font-size: 15px;
    line-height: 20px;
  }

  .jelms-learning-card__program-progress {
    display: block;
    margin-block-start: var(--space-2);
  }

  .jelms-learning-card__quiet-action {
    width: 100%;
    justify-content: flex-end;
    gap: var(--space-1);
    font-weight: var(--font-weight-semibold);
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-2);
    border-block-start: var(--border-hairline) solid var(--color-border-hairline);
  }

  .jelms-learning-card__next-step {
    display: block;
  }

  .jelms a.jelms-learning-card__primary-action {
    width: 100%;
    margin-block-start: var(--space-3);
    justify-content: center;
  }

  .jelms-learning-card__split-progress {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    margin-block-start: var(--space-5);
  }

  .jelms-learning-card__complete-panel {
    grid-template-columns: var(--space-10) minmax(0, 1fr);
  }

  .jelms-learning-card__complete-mark {
    width: var(--space-10);
    height: var(--space-10);
  }

  .jelms-learning-card__complete-panel > .jelms-learning-card__quiet-action {
    grid-column: 1 / -1;
  }
}

/* ── Focus area — track progress rows ─────────────────────── */

.jelms-progress-row__track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: var(--space-1) var(--space-2);
  min-height: var(--space-6);
  align-items: center;
}

.jelms-progress-row__track-label {
  grid-column: 1;
  grid-row: 1;
}

.jelms-progress-row__track-count {
  grid-column: 2;
  grid-row: 1;
  text-align: end;
  color: var(--color-text-muted);
}

.jelms-progress-row__track .jelms-progress {
  grid-column: 1 / -1;
  grid-row: 2;
}

.jelms-progress-row__track-reward {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  font-size: var(--type-meta-font-size);
  line-height: var(--type-meta-line-height);
}

/* ── Practice items — sidebar compact list (JA-LMS-127) ─── */

.jelms-practice-items--compact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.jelms-practice-item-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  min-width: 0;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
}

.jelms-practice-item-row::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--space-1);
  border-start-start-radius: calc(var(--radius-control) - var(--border-hairline));
  border-end-start-radius: calc(var(--radius-control) - var(--border-hairline));
  background: var(--jelms-rail-color, var(--color-border-hairline));
}

.jelms-practice-item-row__trigger {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) + var(--space-1));
  border: 0;
  background: transparent;
  text-align: start;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.jelms-practice-item-row__trigger:hover,
.jelms-practice-item-row__trigger:focus-visible {
  background: var(--color-surface-sunken);
  outline: none;
}

.jelms-practice-item-row__name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.jelms-practice-item-row__meta {
  color: var(--color-text-secondary);
}

.jelms-practice-item-row .je-lms-practice-item-menu {
  flex: none;
  align-self: center;
  padding-inline-end: var(--space-1);
}

.jelms-practice-item--needs-attention .jelms-practice-item__meta-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-semantic-warning);
}

.jelms-practice-item--never-practiced .jelms-practice-item-row__meta {
  color: var(--color-text-muted);
}

.jelms-practice-item-row.is-loading .jelms-practice-item-row__trigger {
  pointer-events: none;
  opacity: 0.6;
}

.jelms-practice-item-row:hover .jelms-btn--icon-compact {
  background: var(--color-surface-sunken);
}

/* ── Practice items — manage page (JA-LMS-132) ───────────── */

.jelms-practice-items-manage-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.jelms-practice-items-manage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}


.jelms-practice-items-manage-head__desc {
  margin-block-start: var(--space-2);
  color: var(--color-text-secondary);
  max-width: 42rem;
}

.jelms-practice-items-manage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.jelms-practice-items-manage__archived-empty-note {
  margin: 0;
  flex: 1 1 100%;
  color: var(--color-text-secondary);
}

.jelms-switch.is-disabled {
  cursor: not-allowed;
}

.jelms-switch.is-disabled .jelms-switch__input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.jelms-practice-items--manage {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.jelms-practice-items-manage-archived {
  padding-block-start: var(--space-2);
  border-block-start: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-practice-items-manage-archived__help {
  margin-block: var(--space-2) var(--space-3);
  color: var(--color-text-secondary);
}

.jelms-practice-item-row--archived {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + var(--space-1));
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
  opacity: 0.92;
}

.jelms-practice-item-row--archived::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--space-1);
  border-start-start-radius: calc(var(--radius-control) - var(--border-hairline));
  border-end-start-radius: calc(var(--radius-control) - var(--border-hairline));
  background: var(--jelms-rail-color, var(--color-border-hairline));
}

.jelms-practice-item-row--archived .jelms-practice-item-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.jelms-practice-item-row--archived .jelms-practice-item-row__name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  color: var(--color-text-secondary);
}

.jelms-practice-item-row--archived .jelms-practice-item-row__meta {
  color: var(--color-text-muted);
}

.jelms-practice-item-row__archived-badge {
  align-self: flex-start;
  margin-block-start: var(--space-1);
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--type-meta-font-size);
  line-height: var(--type-meta-line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  background: var(--color-surface-elevated);
  border: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-practice-item-row--archived.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

@media (max-width: 767px) {
  .jelms-practice-item-row--archived {
    flex-direction: column;
    align-items: stretch;
  }

  .jelms-practice-item-row--archived .jelms-btn {
    width: 100%;
  }
}

.jelms-section--practice-items-rail .jelms-section-head__actions {
  flex-shrink: 0;
}

.jelms-section--practice-items-rail .jelms-section-head__start {
  min-width: 0;
}

.jelms-practice-items-count__manage {
  white-space: nowrap;
}

.jelms-section--practice-items-rail #je-lms-practice-items-count {
  margin: var(--space-1) 0 0;
  line-height: var(--type-meta-line-height);
}

.jelms-section-head__title-row,
.jelms-practice-items-manage-head__title-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
}

.jelms-section-head__title-row .jelms-section-head__title,
.jelms-practice-items-manage-head__title-row .jelms-t-page-title {
  margin: 0;
  min-width: 0;
  flex: none;
}

.jelms-practice-items-limit-info {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--size-icon-medium);
  height: var(--size-icon-medium);
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-brand-teal-interactive);
  cursor: pointer;
}

.jelms-practice-items-limit-info:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-control);
}

.jelms-practice-items-limit-info .ic {
  font-size: var(--size-icon-small);
}

.jelms-practice-items-limit-explainer__body p + p {
  margin-top: var(--space-3);
}

@media (max-width: 767px) {
  .je-lms-dashboard .jelms-page-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .je-lms-dashboard .jelms-page-main,
  .je-lms-dashboard .jelms-page-rail {
    display: contents;
  }

  .je-lms-dashboard .jelms-dashboard-slot--pa-hero { order: 1; }
  .je-lms-dashboard .jelms-dashboard-slot--practice-items { order: 2; }
  .je-lms-dashboard .jelms-dashboard-slot--my-learning { order: 3; }
  .je-lms-dashboard .jelms-dashboard-slot--continue { order: 4; }
  .je-lms-dashboard .jelms-dashboard-slot--momentum { order: 5; }
  .je-lms-dashboard .jelms-dashboard-slot--recap { order: 6; }
  .je-lms-dashboard .jelms-dashboard-slot--week-note { order: 7; }
  .je-lms-dashboard .jelms-dashboard-slot--upcoming { order: 8; }
  .je-lms-dashboard .jelms-dashboard-slot--repertoire { order: 9; }
  .je-lms-dashboard .jelms-dashboard-slot--badges { order: 10; }
}

/* ── Momentum card ────────────────────────────────────────── */

.jelms-momentum {
  min-height: calc(var(--space-16) * 3 + var(--space-6));
  padding: var(--space-6);
}

.jelms-momentum__title {
  margin: 0;
}

.jelms-momentum__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.jelms-momentum__stat {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

.jelms-momentum__stat > .jelms-icon-well {
  flex: none;
  width: var(--size-control-small);
  height: var(--size-control-small);
}

.jelms-momentum__stat > div:not(.jelms-icon-well) {
  min-width: 0;
  flex: 1;
}

.jelms-momentum__stat-value {
  margin: 0;
}

.jelms-momentum__stat-label {
  margin: 0;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: var(--type-eyebrow-line-height);
}

.jelms-momentum__stat-label-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.jelms-momentum__stat-label-row .jelms-momentum__stat-label {
  flex: none;
}

.jelms-momentum__streak-info {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--size-icon-medium);
  height: var(--size-icon-medium);
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-brand-teal-interactive);
  cursor: pointer;
}

.jelms-momentum__streak-info:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-control);
}

.jelms-momentum__streak-info .ic {
  font-size: var(--size-icon-small);
}

.jelms-momentum__streak-status {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
}

.jelms-momentum__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
  margin-top: var(--space-5);
  overflow-x: visible;
}

.jelms-momentum__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  text-align: center;
  color: var(--color-text-secondary);
}

.jelms-momentum__dot {
  width: var(--size-icon-small);
  height: var(--size-icon-small);
  border-radius: var(--radius-pill);
  background: var(--color-weekday-inactive);
  flex: none;
}

.jelms-momentum__dot.is-complete {
  background: var(--color-weekday-complete);
}

.jelms-momentum__dot.is-today {
  outline: var(--border-strong) solid var(--color-weekday-today-ring);
  outline-offset: var(--space-1);
}

.jelms-momentum__footer {
  margin-top: var(--space-4);
}

.jelms-momentum__log {
  width: 100%;
}

.jelms-momentum__log .ic {
  width: var(--size-icon-small);
  height: var(--size-icon-small);
}

.jelms-momentum.is-zero .jelms-momentum__stat-value {
  font-variant-numeric: tabular-nums;
}

.jelms-momentum.is-loading {
  min-height: calc(var(--space-16) * 3 + var(--space-6));
}

@media (max-width: 767px) {
  .jelms-momentum {
    min-height: calc(var(--space-16) * 3 + var(--space-8));
    padding: var(--space-4);
  }
}

/* ── Practice Action hero (V9 video-first) ────────────────── */

.jelms-pa-hero {
  padding: var(--space-5);
  overflow: visible;
}

.jelms-pa-hero.jelms-card--railed {
  overflow: visible;
}

.jelms-pa-hero__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 0;
}

.jelms-pa-hero__heading {
  min-width: 0;
  flex: 1 1 auto;
}

.jelms-pa-hero__focus-side {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  max-width: min(100%, 22rem);
  text-align: end;
}

.jelms-pa-hero__focus-side .jelms-pa-hero__meta {
  margin: 0;
}

.jelms-pa-hero__eyebrow {
  margin: 0;
}

.jelms-pa-hero__title {
  margin: var(--space-1) 0 0;
}

.jelms-pa-hero__meta {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

.jelms-pa-hero__change-focus {
  flex: none;
  align-self: flex-end;
  margin-block-start: var(--space-1);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  text-decoration: none;
  text-align: end;
  white-space: nowrap;
}

.jelms-pa-hero__change-focus:hover {
  color: var(--color-brand-teal-interactive);
  text-decoration: underline;
}

.jelms-pa-hero__media-shell {
  margin-block-start: 14px;
  width: 100%;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--color-surface-card);
}

.jelms-pa-hero__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-video-fallback);
  background-image: url('practice-action-background.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  color: var(--color-text-on-media);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jelms-pa-hero__player.is-loading {
  min-height: calc(var(--space-16) * 4 + var(--space-8));
}

.jelms-pa-hero__player-overlays {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.jelms-pa-hero__player-title {
  position: absolute;
  inset-block-start: var(--space-5);
  inset-inline-start: calc(var(--space-5) + var(--space-1));
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: calc(100% - var(--space-8));
  text-shadow: 0 1px 2px var(--color-overlay-video-88), 0 0 12px var(--color-overlay-video-55);
}

.jelms-pa-hero__player-eyebrow {
  font-size: var(--type-eyebrow-font-size);
  font-weight: var(--type-eyebrow-font-weight);
  line-height: var(--type-eyebrow-line-height);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.jelms-pa-hero__player-title-text {
  font-size: var(--type-page-title-font-size, 1.75rem);
  line-height: var(--type-page-title-line-height, 1.25);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jelms-pa-hero__player-captions,
.jelms-pa-hero__player-duration {
  position: absolute;
  inset-block-end: var(--space-4);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-small);
  background: var(--color-overlay-text-primary-68);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
}

.jelms-pa-hero__player-captions {
  inset-inline-start: var(--space-4);
}

.jelms-pa-hero__player-captions[hidden],
.jelms-pa-hero__player-duration[hidden] {
  display: none;
}

.jelms-pa-hero__player-duration {
  inset-inline-end: var(--space-4);
  inset-inline-start: auto;
}

.jelms-pa-hero__player-placeholder {
  position: absolute;
  z-index: 1;
  inset-block-end: var(--space-4);
  inset-inline-end: var(--space-4);
  inset-inline-start: auto;
  margin: 0;
  max-width: calc(50% - var(--space-4));
  padding: var(--space-2) var(--space-3);
  text-align: end;
  color: var(--color-overlay-on-dark-80);
}

.jelms-pa-hero__step-strip-wrap {
  border-block-end: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-pa-hero__strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--size-control-large);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-card);
  border-block-end: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-pa-hero__strip-title {
  margin: 0;
}

.jelms-pa-hero__strip-count {
  margin: 0;
  color: var(--color-text-muted);
}

.jelms-pa-hero__step-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: var(--size-pa-step-strip);
  background: var(--color-surface-card);
}

.jelms-pa-step-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--size-pa-step-strip);
  padding: calc(var(--space-2) - 1px) calc(var(--space-2) - 1px) calc(var(--space-2) - 2px);
  border: 0;
  border-inline-end: var(--border-hairline) solid var(--color-border-hairline);
  background: transparent;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.jelms-pa-step-tab:last-child {
  border-inline-end: 0;
}

.jelms-pa-step-tab:hover {
  background: var(--color-surface-sunken);
}

.jelms-pa-step-tab--viewed:hover {
  background: var(--color-surface-selected);
}

.jelms-pa-step-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--focus-offset) var(--color-overlay-focus-35);
}

.jelms-pa-step-tab--viewed {
  background: var(--color-surface-selected);
  box-shadow: inset 0 -3px var(--color-brand-teal-interactive);
}

.jelms-pa-step-tab__well {
  position: static;
  flex-shrink: 0;
  width: var(--size-pa-step-well);
  height: var(--size-pa-step-well);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-bold);
}

.jelms-pa-step-tab__well--num {
  background: var(--color-surface-sunken);
}

.jelms-pa-step-tab__well--check {
  background: var(--color-surface-selected);
  color: var(--color-brand-teal-interactive);
}

.jelms-pa-step-tab__well--check .ic {
  font-size: var(--size-icon-small);
}

.jelms-pa-step-tab__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.jelms-pa-step-tab__title {
  display: block;
  width: 100%;
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-small-line-height);
  text-align: center;
  margin-block-end: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jelms-pa-step-tab__meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  max-width: 100%;
}

.jelms-pa-step-tab__state {
  display: block;
  padding-inline-start: 0;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  text-align: center;
  color: var(--color-text-muted);
}

.jelms-pa-step-tab--done .jelms-pa-step-tab__state {
  color: var(--color-brand-teal-interactive);
  font-weight: var(--font-weight-semibold);
}

.jelms-pa-step-tab__play {
  position: absolute;
  inset-inline-end: var(--space-2);
  inset-block-end: calc(var(--space-2) + 1px);
  display: inline-flex;
  color: var(--color-brand-teal-interactive);
}

.jelms-pa-step-tab__play .ic {
  font-size: calc(var(--size-icon-small) - 2px);
}

.jelms-pa-step-tab__play[hidden] {
  display: none;
}

/* Practice actions list — sibling match: .jelms-pa-step-tab / .jelms-focus-chooser-lesson-row (JA-LMS-202) */
.jelms-pa-actions-list {
  display: flex;
  flex-direction: column;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  overflow: hidden;
}

.jelms-pa-actions-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--size-control-large);
  padding: var(--space-2) var(--space-4);
  border-block-end: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-pa-actions-list__count {
  margin: 0;
}

.jelms-pa-actions-list__progress {
  height: var(--size-progress-bar);
  background: var(--color-progress-track);
  overflow: hidden;
}

.jelms-pa-actions-list__progress > span {
  display: block;
  height: 100%;
  background: var(--color-brand-teal-interactive);
}

.jelms-pa-actions-list__items {
  display: flex;
  flex-direction: column;
}

.jelms-pa-actions-list__row {
  border-block-start: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-pa-actions-list__row:first-child {
  border-block-start: 0;
}

.jelms a.jelms-pa-actions-list__select.jelms-pa-actions-list__select {
  display: grid;
  grid-template-columns: var(--size-control-medium) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-primary);
  background-color: transparent;
  border-color: transparent;
  text-decoration: none;
}

.jelms-pa-actions-list__row--current .jelms-pa-actions-list__select {
  background-color: var(--color-surface-selected);
}

.jelms-pa-actions-list__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-medium);
  height: var(--size-control-medium);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.jelms-pa-actions-list__row--complete .jelms-pa-actions-list__marker {
  background: var(--color-surface-selected);
  color: var(--color-brand-teal-interactive);
}

.jelms-pa-actions-list__row--current .jelms-pa-actions-list__marker {
  background: var(--color-brand-teal-interactive);
  color: var(--color-text-inverse);
}

.jelms-pa-actions-list__content {
  min-width: 0;
}

.jelms-pa-actions-list__title {
  display: block;
}

.jelms a.jelms-pa-actions-list__select.jelms-pa-actions-list__select:hover,
.jelms a.jelms-pa-actions-list__select.jelms-pa-actions-list__select:focus-visible,
.jelms a.jelms-pa-actions-list__select.jelms-pa-actions-list__select:active {
  color: var(--color-text-primary);
  background-color: var(--color-surface-sunken);
  border-color: transparent;
  text-decoration: none;
}

.jelms-pa-actions-list__row--current .jelms-pa-actions-list__select:hover,
.jelms-pa-actions-list__row--current .jelms-pa-actions-list__select:focus-visible,
.jelms-pa-actions-list__row--current .jelms-pa-actions-list__select:active {
  background-color: var(--color-surface-selected);
  border-color: transparent;
  color: var(--color-text-primary);
  text-decoration: none;
}

.jelms-pa-hero__mobile-stepper {
  display: none;
}

.jelms-pa-hero__steps-sheet {
  border: 0;
  padding: 0;
  margin: 0;
  max-width: min(100vw, 24rem);
  width: 100%;
  background: var(--color-surface-card);
  color: var(--color-text-primary);
}

.jelms-pa-hero__steps-sheet::backdrop {
  background: var(--color-overlay-text-primary-45);
}

.jelms-pa-hero__steps-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4);
  border-block-end: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-pa-hero__steps-sheet-head-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.jelms-pa-hero__steps-sheet-head-copy .jelms-t-meta {
  margin: 0;
  color: var(--color-text-muted);
}

.jelms-pa-hero__steps-sheet-list {
  display: flex;
  flex-direction: column;
  max-height: min(60vh, 24rem);
  overflow-y: auto;
}

.jelms-pa-hero__steps-sheet-item {
  display: grid;
  grid-template-columns: var(--size-control-small) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-block-end: var(--border-hairline) solid var(--color-border-hairline);
  background: transparent;
  text-align: start;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.jelms-pa-hero__steps-sheet-item:hover,
.jelms-pa-hero__steps-sheet-item:focus-visible {
  background: var(--color-surface-selected);
  outline: none;
}

.jelms-pa-hero__steps-sheet-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.jelms-pa-hero__steps-sheet-copy strong,
.jelms-pa-hero__steps-sheet-copy small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jelms-pa-hero__steps-sheet-copy small {
  color: var(--color-brand-teal-interactive);
  font-weight: var(--font-weight-semibold);
}

.jelms-pa-hero__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  min-height: var(--size-control-large);
}

.jelms-pa-hero__actions-left,
.jelms-pa-hero__actions-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.jelms-pa-hero__actions .jelms-btn--primary-complete {
  min-width: calc(var(--space-16) * 4 + var(--space-3));
}

.jelms-pa-hero__resources {
  position: relative;
}

.jelms-pa-hero__resources[hidden] {
  display: none;
}

.jelms-pa-hero__error {
  margin-block-start: var(--space-2);
  color: var(--color-semantic-danger);
}

.jelms-pa-completed {
  display: inline-flex;
  align-items: stretch;
  min-width: calc(var(--space-16) * 4 + var(--space-3));
  height: var(--size-control-large);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.jelms-pa-completed__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: calc(var(--space-16) * 3 + var(--space-4));
  padding-inline: var(--space-3);
  background: var(--color-semantic-success-surface);
  border: var(--border-hairline) solid var(--color-semantic-success);
  border-inline-end: 0;
  border-radius: var(--radius-control) 0 0 var(--radius-control);
  color: var(--color-semantic-success);
  cursor: default;
}

.jelms-pa-completed__status .ic {
  font-size: var(--size-icon-small);
}

.jelms-pa-completed__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding-inline: var(--space-3);
  background: var(--color-semantic-success-surface);
  border: var(--border-hairline) solid var(--color-semantic-success);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  color: var(--color-semantic-success);
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-pa-completed__reset:hover {
  background: color-mix(in srgb, var(--color-semantic-success) 10%, var(--color-semantic-success-surface));
}

.jelms-progress-row__track.is-optional .jelms-progress-row__track-reward {
  color: var(--color-text-secondary);
}

@media (max-width: 767px) {
  .jelms-pa-hero {
    padding: var(--space-4);
  }

  .jelms-pa-hero__header {
    display: flex;
    position: relative;
    min-height: 0;
  }

  .jelms-pa-hero__focus-side {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    max-width: min(55%, 14rem);
  }

  .jelms-pa-hero__header:has(.jelms-pa-hero__focus-side) .jelms-pa-hero__heading {
    padding-inline-end: min(55%, 14rem);
  }

  .jelms-pa-hero__change-focus {
    margin-block-start: 0;
  }

  .jelms-pa-hero__step-strip-wrap {
    display: none;
  }

  .jelms-pa-hero__mobile-stepper {
    display: grid;
    grid-template-columns: var(--size-control-large) minmax(0, 1fr) var(--size-control-large);
    height: calc(var(--size-pa-step-strip) - var(--space-3));
    border-block-end: var(--border-hairline) solid var(--color-border-hairline);
  }

  .jelms-pa-hero__step-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
  }

  .jelms-pa-hero__step-arrow:first-child {
    border-inline-end: var(--border-hairline) solid var(--color-border-hairline);
  }

  .jelms-pa-hero__step-arrow:last-child {
    border-inline-start: var(--border-hairline) solid var(--color-border-hairline);
  }

  .jelms-pa-hero__current-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-2);
    border: 0;
    background: var(--color-surface-selected);
    text-align: start;
    cursor: pointer;
    font: inherit;
    color: inherit;
  }

  .jelms-pa-hero__current-step-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .jelms-pa-hero__current-step-title,
  .jelms-pa-hero__current-step-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--type-body-small-font-size);
    line-height: var(--type-body-small-line-height);
  }

  .jelms-pa-hero__current-step-meta {
    color: var(--color-brand-teal-interactive);
    font-weight: var(--font-weight-semibold);
  }

  .jelms-pa-hero__player-title-text {
    font-size: var(--type-section-title-font-size);
    line-height: var(--type-section-title-line-height);
  }

  .jelms-pa-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .jelms-pa-hero__actions-left,
  .jelms-pa-hero__actions-right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .jelms-pa-hero__actions-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .jelms-pa-hero__actions .jelms-btn,
  .jelms-pa-completed {
    width: 100%;
    min-height: calc(var(--size-control-large) + var(--space-1));
  }
}
.jelms-form__row.jelms-form__row--sentiments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.jelms-form__row.jelms-form__row--sentiments .jelms-sentiment-btn {
  min-width: 0;
  padding-inline: var(--space-2);
  font-size: var(--type-meta-font-size);
  line-height: var(--type-meta-line-height);
  white-space: normal;
  text-align: center;
}

@media (max-width: 479px) {
  .jelms-form__row.jelms-form__row--sentiments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.jelms-header__nav-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--size-control-large);
  padding-inline: var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-header-text-muted);
  font-size: var(--type-label-font-size);
  font-weight: var(--type-label-font-weight);
}

button.jelms-header__drawer-link {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: start;
  font: inherit;
  cursor: pointer;
}


/* ── Section heading row ──────────────────────────────────── */

.jelms-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.jelms-section-head__start {
  min-width: 0;
}

.jelms-section-head__start .jelms-section-head__title {
  margin: 0;
}

.jelms-section-head__start .jelms-t-meta {
  margin: var(--space-1) 0 0;
}

.jelms-section-head__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  flex: none;
}

.jelms-section-head__title {
  margin: 0;
}

.jelms-section-head__link {
  color: var(--color-text-link);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.jelms-section-head__link:hover {
  text-decoration: underline;
}

.jelms-section {
  margin-bottom: var(--space-8);
}

.jelms-section + .jelms-section {
  margin-top: var(--space-8);
}

.jelms-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.jelms-stack--cards {
  gap: var(--space-3);
}

.jelms-stack--sections {
  gap: var(--space-8);
}

/* ── Note card (Willie) ───────────────────────────────────── */

.jelms-note-card {
  background: color-mix(in srgb, var(--color-brand-teal-interactive) 8%, var(--color-surface-card));
  border-color: color-mix(in srgb, var(--color-brand-teal-interactive) 35%, var(--color-border-hairline));
}

.jelms-note-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.jelms-note-card__teacher {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.jelms-note-card__avatar {
  width: calc(var(--size-control-medium) + var(--space-1));
  height: calc(var(--size-control-medium) + var(--space-1));
  border-radius: var(--radius-pill);
  border: var(--border-hairline) solid color-mix(in srgb, var(--color-brand-teal-interactive) 35%, var(--color-border-hairline));
  background: var(--color-surface-selected);
  color: var(--color-brand-teal-interactive);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  flex: none;
}

.jelms-pa-hero__nudge-title {
  margin: 0 0 var(--space-1);
}

.jelms-pa-hero__nudge-body {
  margin: 0;
  color: var(--color-text-muted);
}

.jelms-note-card__eyebrow {
  margin: 0;
}

.jelms-note-card__date {
  margin: 0;
}

.jelms-note-card__title {
  margin: var(--space-3) 0 0;
}

.jelms-note-card__body {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

.jelms-note-card__action {
  margin-top: var(--space-3);
}

/* ── Week note (Willie dashboard rail) ───────────────────── */

.jelms-week-note {
  background: color-mix(in srgb, var(--color-brand-teal-interactive) 8%, var(--color-surface-card));
  border-color: color-mix(in srgb, var(--color-brand-teal-interactive) 35%, var(--color-border-hairline));
}

.jelms-week-note__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.jelms-week-note__teacher {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.jelms-week-note__avatar {
  width: calc(var(--size-control-medium) + var(--space-1));
  height: calc(var(--size-control-medium) + var(--space-1));
  border-radius: var(--radius-pill);
  border: var(--border-hairline) solid color-mix(in srgb, var(--color-brand-teal-interactive) 35%, var(--color-border-hairline));
  background: var(--color-surface-selected);
  color: var(--color-brand-teal-interactive);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  flex: none;
  overflow: hidden;
}

.jelms-week-note__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jelms-week-note__eyebrow {
  margin: 0;
}

.jelms-week-note__date {
  margin: 0;
}

.jelms-week-note__menu {
  position: relative;
  flex: none;
}

.jelms-week-note__menu-panel {
  inset-block-start: calc(100% + var(--space-1));
  inset-inline-end: 0;
  inset-inline-start: auto;
  min-width: calc(var(--size-control-large) + var(--space-8));
}

.jelms-week-note__title {
  margin: var(--space-3) 0 0;
  font-weight: var(--font-weight-semibold);
}

.jelms-week-note__body {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

.jelms-week-note__body p {
  margin: 0;
}

.jelms-week-note__body p + p {
  margin-top: var(--space-2);
}

.jelms-week-note[hidden] {
  display: none;
}

/* ── Recap teaser ─────────────────────────────────────────── */

.jelms-recap-teaser {
  background: var(--color-surface-sunken);
  border: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-recap-teaser__eyebrow {
  margin: 0 0 var(--space-2);
}

.jelms-recap-teaser__headline {
  margin: 0;
}

.jelms-recap-teaser__comparison {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

.jelms-recap-teaser__action {
  margin: var(--space-2) 0 0;
}

.jelms-recap-teaser__link {
  font-weight: var(--font-weight-semibold);
}

/* ── Practice history monthly recaps (JA-LMS-199) ─────────── */

.jelms-practice-history-recap-months {
  margin-block: var(--space-4) var(--space-3);
}

.jelms-practice-history-recap-months__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.jelms-practice-history-recap-month-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-hairline) solid var(--color-border-hairline);
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  text-decoration: none;
  white-space: nowrap;
}

.jelms-practice-history-recap-month-chip:hover,
.jelms-practice-history-recap-month-chip:focus-visible {
  border-color: var(--color-brand-teal-interactive);
  color: var(--color-brand-teal-interactive);
}

.jelms-practice-history-recap-month-chip.is-active {
  border-color: var(--color-brand-teal-interactive);
  background: color-mix(in srgb, var(--color-brand-teal-interactive) 12%, transparent);
  color: var(--color-brand-teal-interactive);
  font-weight: var(--font-weight-semibold);
}

.jelms-practice-history-recap-summary {
  margin-block: var(--space-3) var(--space-4);
}

.jelms-practice-history-recap-summary__title {
  margin: 0 0 var(--space-2);
}

.jelms-practice-history-recap-summary__headline {
  margin: 0;
}

.jelms-practice-history-recap-summary__comparison {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

.jelms-practice-history-recap-summary__details {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

/* JA-LMS-477: Oxygen sets `display: list-item` via
   `:-webkit-any(li, div._important), :is(li, div._important)` — specificity (0,1,1)
   from `div._important` beats `.class` at (0,1,0). Prefix `li.` on rules that set
   `display` on components rendered as <li> so we tie at (0,1,1) and win on source order
   (components.css loads after oxygen.css). Do not remove the `li` prefix as redundant. */
li.jelms-practice-history-recap-summary__detail {
  display: grid;
  gap: var(--space-1);
}

.jelms-practice-history-recap-summary__cert-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-1);
}

/* ── Shared rail utilities ─────────────────────────────────── */

.jelms-divider {
  height: var(--border-hairline);
  margin-block: var(--space-3);
  background: var(--color-border-hairline);
  border: 0;
}

.jelms-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-tag-height);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-selected);
  color: var(--color-text-secondary);
  font-size: var(--type-meta-font-size);
  line-height: var(--type-meta-line-height);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.jelms-tag--membership {
  background: color-mix(in srgb, var(--color-category-membership) 14%, var(--color-surface-selected));
  color: var(--color-category-membership);
}

.jelms-stack--rail {
  gap: var(--space-6);
}

.jelms-rail-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.jelms-rail-card__head .jelms-rail-card__title {
  margin: 0;
}

.jelms-starter-continue__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.jelms-starter-continue__head .jelms-t-eyebrow {
  margin: 0;
}

#jelms-lesson-collection-heading {
  scroll-margin-top: calc(var(--size-header-desktop) + var(--space-4));
}

@media (max-width: 767px) {
  #jelms-lesson-collection-heading {
    scroll-margin-top: calc(var(--size-header-mobile) + var(--space-4));
  }
}

.jelms-rail-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-link);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.jelms-rail-card__link .ic {
  width: var(--space-5);
  height: var(--space-5);
}

.jelms-rail-card__link:hover {
  text-decoration: underline;
}

/* ── Continue where you left off ───────────────────────────── */

.jelms-continue-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 1023px) {
  .jelms-continue-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .jelms-continue-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .jelms-continue-card {
    width: auto;
  }
}

.jelms-continue-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-start-start-radius: var(--radius-card);
  border-start-end-radius: var(--radius-card);
}

.jelms-continue-card__poster {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-start-start-radius: var(--radius-poster-top);
  border-start-end-radius: var(--radius-poster-top);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--jelms-continue-accent, var(--color-category-practice-focus)) 28%, var(--color-surface-sunken)),
      var(--color-video-fallback)
    );
  border-block-end: var(--border-hairline) solid var(--color-border-hairline);
  overflow: hidden;
}

.jelms-continue-card__poster.is-photo {
  display: block;
}

.jelms-continue-card__poster-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.jelms-continue-card__poster-title {
  margin: 0;
  padding: var(--space-3);
  width: 100%;
  color: var(--color-text-inverse);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  font-weight: var(--font-weight-semibold);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  background: linear-gradient(to top, var(--color-overlay-video-88), transparent);
}

.jelms-continue-card--curriculum {
  --jelms-continue-accent: var(--color-category-practice-curriculum);
}

.jelms-continue-card--focus {
  --jelms-continue-accent: var(--color-category-practice-focus);
}

.jelms-continue-card--collection {
  --jelms-continue-accent: var(--color-category-collection);
}

.jelms-continue-row .jelms-continue-card:has(.jelms-jpc-ring--continue-card) {
  height: 100%;
}

.jelms-continue-card__body {
  position: relative;
  padding: var(--space-4);
  min-width: 0;
}

.jelms-continue-card__body:has(.jelms-jpc-ring--continue-card) {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-inline-end: calc(var(--space-4) + var(--size-control-medium) + var(--space-3));
}

.jelms-continue-card__meta-row {
  margin-top: var(--space-1);
  min-width: 0;
}

.jelms-continue-card__body:has(.jelms-jpc-ring--continue-card) .jelms-continue-card__meta-row {
  margin-top: auto;
}

.jelms-jpc-ring--continue-card {
  --size-jpc-progress-ring: var(--size-control-medium);
  --size-jpc-ring-stroke: var(--size-badge-ring-width);
  --type-jpc-ring-count-font-size: var(--type-meta-font-size);

  position: absolute;
  inset-inline-end: var(--space-4);
  inset-block-end: var(--space-4);
  pointer-events: none;
}

.jelms-continue-card__title {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.je-lms-practice-history .jelms-lesson-practice-tools__disclosure {
  overflow: hidden;
  padding: 0;
}

.je-lms-practice-history .jelms-practice-ai-analysis.jelms-lesson-practice-tools__disclosure {
  margin-bottom: var(--space-6);
}

.je-lms-practice-history .jelms-lesson-practice-tools__disclosure-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  list-style: none;
}

.je-lms-practice-history .jelms-lesson-practice-tools__disclosure-summary::-webkit-details-marker {
  display: none;
}

.je-lms-practice-history .jelms-lesson-practice-tools__disclosure-label {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.je-lms-practice-history .jelms-lesson-practice-tools__disclosure-title {
  font-size: var(--type-section-title-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-section-title-line-height);
  color: var(--color-text-primary);
}

.je-lms-practice-history .jelms-lesson-practice-tools__disclosure-chevron {
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.je-lms-practice-history .jelms-lesson-practice-tools__disclosure[open] .jelms-lesson-practice-tools__disclosure-chevron {
  transform: rotate(180deg);
}

.je-lms-practice-history .jelms-lesson-practice-tools__disclosure-body {
  padding: 0 var(--space-6) var(--space-6);
}

.jelms-continue-card.jelms-card--interactive.jelms-interactive:hover {
  border-color: var(--color-border-strong);
}

.jelms-continue-card:hover .jelms-continue-card__title,
.jelms-continue-card:focus-visible .jelms-continue-card__title {
  text-decoration: none;
}

/* ── Upcoming events rail card ─────────────────────────────── */

.jelms-upcoming-card {
  padding: var(--space-5);
}

.jelms-upcoming-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

a.jelms-upcoming-row:hover {
  text-decoration: none;
}

a.jelms-upcoming-row:hover .jelms-upcoming-row__title {
  color: var(--color-brand-teal-interactive);
}

a.jelms-upcoming-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--focus-offset) var(--color-overlay-focus-35);
  border-radius: var(--radius-control);
}

.jelms-upcoming-row + .jelms-upcoming-row {
  margin-top: var(--space-3);
}

.jelms-upcoming-row__date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--size-event-date-block-width);
  height: var(--size-event-date-block-height);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
  text-align: center;
}

.jelms-upcoming-row__date-month {
  margin: 0;
}

.jelms-upcoming-row__date-day {
  margin: 0;
}

.jelms-upcoming-row__content {
  min-width: 0;
  flex: 1;
  padding-block: var(--space-1);
}

.jelms-upcoming-row__title {
  margin: 0;
}

.jelms-upcoming-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

.jelms-upcoming-row.is-locked .jelms-upcoming-row__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.jelms-upcoming-row.is-locked .jelms-upcoming-row__title-row .ic {
  color: var(--color-category-membership);
  font-size: var(--size-icon-small);
}

.jelms-upcoming-row.is-locked .jelms-upcoming-row__date {
  opacity: var(--opacity-muted-icon);
}

.jelms-upcoming-card__premier-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  border: var(--border-hairline) solid color-mix(in srgb, var(--color-category-membership) 35%, var(--color-border-hairline));
  background: color-mix(in srgb, var(--color-category-membership) 8%, var(--color-surface-card));
}

.jelms-upcoming-card__premier-strip p {
  margin: 0;
  color: var(--color-text-secondary);
}

/* ── Community activity rail card ──────────────────────────── */

.jelms-community-card {
  padding: var(--space-5);
}

.jelms-community-card__space-meta {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
}

.jelms-community-card__preview {
  margin: 0;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
}

.jelms-community-card__thread {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.jelms-community-card__avatar {
  width: var(--size-community-avatar);
  height: var(--size-community-avatar);
  border-radius: var(--radius-pill);
  background: var(--color-surface-selected);
  border: var(--border-hairline) solid var(--color-border-hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-bold);
  flex: none;
}

.jelms-community-card__thread-meta {
  margin: 0;
  color: var(--color-text-muted);
}

.jelms-community-card.is-empty .jelms-community-card__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-medium);
  height: var(--size-control-medium);
  margin: var(--space-3) 0;
  border-radius: var(--radius-control);
  background: var(--color-surface-selected);
  color: var(--color-brand-teal-interactive);
}

.jelms-community-card.is-empty .jelms-community-card__empty-title {
  margin: 0;
}

.jelms-community-card.is-empty .jelms-community-card__empty-body {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

.jelms-community-card.is-empty .jelms-community-card__empty-action {
  margin-top: var(--space-3);
}

/* ── Repertoire entry rail card ────────────────────────────── */

.jelms-repertoire-entry {
  padding: var(--space-5);
}

.jelms-repertoire-entry__count {
  margin: var(--space-3) 0 0;
}

.jelms-repertoire-entry__tagline {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
}

.jelms-repertoire-entry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.jelms-repertoire-entry__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

.jelms-repertoire-entry.is-empty .jelms-repertoire-entry__count {
  color: var(--color-text-muted);
}

.jelms-repertoire-entry.is-empty .jelms-repertoire-entry__tagline {
  color: var(--color-text-muted);
}

/* ── Badge medallion (JA-LMS-207) ──────────────────────────── */

.jelms-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.jelms-badge__medallion {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--jelms-badge-surface, var(--color-badge-tier-1-surface));
  color: var(--jelms-badge-icon, var(--color-badge-tier-1-icon));
  box-shadow: inset 0 0 0 var(--size-badge-ring-width) var(--jelms-badge-ring, var(--color-badge-tier-1-ring));
}

.jelms-badge--sm .jelms-badge__medallion {
  width: var(--size-badge-medallion-sm);
  height: var(--size-badge-medallion-sm);
}

.jelms-badge--lg .jelms-badge__medallion {
  width: var(--size-badge-medallion-lg);
  height: var(--size-badge-medallion-lg);
}

.jelms-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.jelms-badge--sm .jelms-badge__icon {
  font-size: var(--size-badge-icon-sm);
}

.jelms-badge--lg .jelms-badge__icon {
  font-size: var(--size-badge-icon-lg);
}

.jelms-badge__icon .ic svg {
  stroke-width: var(--border-strong);
}

.jelms-badge__image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.jelms-badge--tier-1 {
  --jelms-badge-surface: var(--color-badge-tier-1-surface);
  --jelms-badge-icon: var(--color-badge-tier-1-icon);
  --jelms-badge-ring: var(--color-badge-tier-1-ring);
}

.jelms-badge--tier-2 {
  --jelms-badge-surface: var(--color-badge-tier-2-surface);
  --jelms-badge-icon: var(--color-badge-tier-2-icon);
  --jelms-badge-ring: var(--color-badge-tier-2-ring);
}

.jelms-badge--tier-3 {
  --jelms-badge-surface: var(--color-badge-tier-3-surface);
  --jelms-badge-icon: var(--color-badge-tier-3-icon);
  --jelms-badge-ring: var(--color-badge-tier-3-ring);
}

.jelms-badge--tier-4 {
  --jelms-badge-surface: var(--color-badge-tier-4-surface);
  --jelms-badge-icon: var(--color-badge-tier-4-icon);
  --jelms-badge-ring: var(--color-badge-tier-4-ring);
}

.jelms-badge--locked {
  --jelms-badge-surface: var(--color-badge-medallion-muted-surface);
  --jelms-badge-icon: var(--color-badge-medallion-muted-icon);
  --jelms-badge-ring: var(--color-badge-medallion-muted-ring);
}

.jelms-badge--locked .jelms-badge__medallion {
  filter: grayscale(1);
}

.jelms-badge__lock {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  border: var(--border-hairline) solid var(--color-border-strong);
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 0;
  box-shadow: 0 1px 2px rgba(16, 23, 25, 0.08);
}

.jelms-badge--lg .jelms-badge__lock {
  width: 26px;
  height: 26px;
  font-size: 14px;
}

.jelms-badge--has-image .jelms-badge__medallion {
  overflow: hidden;
  box-shadow: inset 0 0 0 var(--size-badge-ring-width) var(--color-border-hairline);
}

.jelms-badge__name {
  margin: var(--space-2) 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.jelms-badges-rail .jelms-badge__name {
  font-size: var(--type-meta-font-size);
  line-height: var(--type-meta-line-height);
  font-weight: var(--type-meta-font-weight);
  letter-spacing: var(--type-meta-letter-spacing);
  text-transform: none;
}

.jelms-badge__meta {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

/* ── Recent badges rail card ───────────────────────────────── */

.jelms-badges-rail {
  padding: var(--space-5);
}

.jelms-badges-rail__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.jelms-badges-rail__grid .jelms-badge {
  min-width: 0;
}

.jelms-badges-rail__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
}

/* ── All badges page (JA-LMS-208) ──────────────────────────── */

.jelms-badges-page__head {
  margin-bottom: var(--space-8);
}

.jelms-badges-page__desc {
  margin: var(--space-2) 0 0;
  max-width: 42rem;
  color: var(--color-text-secondary);
}

.jelms-badges-category + .jelms-badges-category {
  margin-top: var(--space-10);
}

.jelms-badges-category__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.jelms-badges-category__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-selected);
  color: var(--color-brand-teal-interactive);
  font-size: 22px;
}

.jelms-badges-category__copy {
  flex: 1;
  min-width: 0;
}

.jelms-badges-category__title {
  margin: 0;
}

.jelms-badges-category__tagline {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
}

.jelms-badges-category__progress-label {
  margin: var(--space-3) 0 var(--space-2);
}

.jelms-badges-category__progress {
  max-width: 280px;
}

.jelms-badges-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 1023px) {
  .jelms-badges-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .jelms-badges-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.jelms-badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-5);
  min-width: 0;
}

.jelms-badge-card--earned {
  background: var(--color-surface-card);
  border-color: var(--color-border-hairline);
}

.jelms-badge-card--locked {
  background: var(--color-badge-card-locked-surface);
  border-color: var(--color-badge-card-locked-border);
  box-shadow: none;
}

.jelms-badge-card__mark {
  margin-bottom: var(--space-3);
}

.jelms-badge-card__name {
  margin: 0;
  width: 100%;
}

.jelms-badge-card--locked .jelms-badge-card__name {
  color: var(--color-text-secondary);
}

.jelms-badge-card__description {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  width: 100%;
}

.jelms-badge-card--locked .jelms-badge-card__description {
  color: var(--color-text-muted);
}

.jelms-badge-card__status {
  margin: var(--space-3) 0 0;
  width: 100%;
}

.jelms-badge-card__status.is-requirement {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.jelms-badge-card__earned {
  gap: var(--space-1);
}

.jelms-badge-card__earned .ic {
  font-size: 14px;
}

.jelms-badge-card__rewards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.jelms-badge-card--locked .jelms-badge-card__rewards {
  opacity: var(--opacity-muted-icon);
}

.jelms-badge-card__reward {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--type-meta-font-size);
  line-height: var(--type-meta-line-height);
}

.jelms-badge-card__reward .ic {
  font-size: 14px;
}

/* ── Video reviews page (JA-LMS-211) ───────────────────────── */

.jelms-video-reviews-page__head {
  margin-bottom: var(--space-8);
}

.jelms-video-reviews-page__desc {
  margin: var(--space-2) 0 0;
  max-width: 42rem;
  color: var(--color-text-secondary);
}

.jelms-video-reviews-form-card {
  margin-bottom: var(--space-8);
}

.jelms-video-reviews-form-card.is-disabled {
  background: var(--color-surface-sunken);
  opacity: var(--opacity-disabled);
}

.jelms-video-reviews-form-card.is-disabled .jelms-video-reviews-form-card__summary,
.jelms-video-reviews-form-card.is-disabled .jelms-video-reviews-form-card__summary--static {
  cursor: default;
}

.jelms-video-reviews-form-card.is-disabled .jelms-video-reviews-form-card__summary:focus-visible,
.jelms-video-reviews-form-card.is-disabled .jelms-video-reviews-form-card__summary--static:focus-visible {
  outline: none;
}

.jelms-video-reviews-form-card.is-disabled .jelms-video-reviews-form-card__chevron,
.jelms-video-reviews-form-card.is-disabled .jelms-t-section-title,
.jelms-video-reviews-form-card.is-disabled .jelms-video-reviews-form-card__notice {
  color: var(--color-text-disabled);
}

.jelms-video-reviews-form-card__summary--static {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  list-style: none;
}

.jelms-video-reviews-form-card__details {
  border: 0;
}

.jelms-video-reviews-form-card__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.jelms-video-reviews-form-card__summary::-webkit-details-marker {
  display: none;
}

.jelms-video-reviews-form-card__summary .jelms-t-section-title {
  margin: 0;
}

.jelms-video-reviews-form-card__summary:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-control);
}

.jelms-video-reviews-form-card__chevron {
  color: var(--color-text-muted);
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-video-reviews-form-card__details[open] .jelms-video-reviews-form-card__chevron {
  transform: rotate(180deg);
}

.jelms-video-reviews-form-card__body {
  padding-top: var(--space-4);
}

.jelms-video-reviews-form-card__notice {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
}

.jelms-video-reviews-form__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-4);
}

.jelms-video-reviews-list__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-start: var(--space-4);
}

.jelms-video-review__date-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.jelms-video-review__date-divider::before,
.jelms-video-review__date-divider::after {
  content: "";
  flex: 1;
  height: var(--border-hairline);
  background: var(--color-border-hairline);
}

.jelms-video-review__date-divider-label {
  color: var(--color-text-muted);
  font-size: var(--type-body-small-font-size);
  white-space: nowrap;
}

.jelms-video-review {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.jelms-video-review__panel {
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
}

.jelms-video-review__panel--submission {
  padding: var(--space-3) var(--space-4);
  border-inline-start: var(--border-strong) solid var(--color-action-primary);
}

.jelms-video-review__panel--response {
  padding: var(--space-5);
  background: var(--color-surface-elevated);
  border-inline-start: var(--border-strong) solid var(--color-brand-teal-interactive);
}

.jelms-video-review__panel-heading {
  margin: 0;
}

.jelms-video-review__submission-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}

.jelms-video-review__submission-main {
  min-width: 0;
}

.jelms-video-review__submission-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}

.jelms-video-review__submission-question {
  margin-top: var(--space-3);
  padding-inline-start: var(--space-3);
  border-inline-start: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-video-review__question-label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
}

.jelms-video-review__submission-action {
  white-space: nowrap;
}

.jelms-video-review-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--type-body-font-size);
  font-weight: var(--font-weight-semibold);
}

.jelms-video-review-card__date {
  margin: 0;
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-muted);
}

.jelms-video-review-card__note {
  margin: 0;
  font-size: var(--type-body-font-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.jelms-video-review__response-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-video-review__response-verdict {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  text-align: right;
}

.jelms-video-review__assessment-label {
  color: var(--color-text-muted);
}

.jelms-video-review-card__status,
.jelms-video-review-card__verdict-wrap {
  margin: 0;
}

.jelms-video-review-card__verdict {
  display: inline-flex;
  align-items: center;
  margin: 0;
  white-space: nowrap;
}

.jelms-video-review-card__feedback {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  max-width: 68ch;
}

.jelms-video-review-card__repertoire {
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
}

.jelms-video-review-card__feedback p {
  margin: 0;
}

.jelms-video-review-suggestions {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-video-review-suggestions__heading {
  margin: 0 0 var(--space-3);
}

.jelms-video-review-suggestions__list .jelms-library-result-list {
  grid-template-columns: 48px minmax(0, 1fr) max-content max-content 44px;
}

.jelms-video-review-suggestions__list .jelms-library-result-list__main {
  grid-column: 2;
  min-width: 0;
}

.jelms-video-review-suggestions__list .jelms-library-result-list__collection {
  grid-column: 3;
  justify-self: end;
  text-align: right;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
}

.jelms-video-review-suggestions__list .jelms-library-result-list__status {
  grid-column: 4;
  justify-self: end;
  white-space: nowrap;
  width: max-content;
  min-width: max-content;
}

.jelms-video-review-suggestions__list .jelms-library-result-list:not(:has(.jelms-library-result-list__collection)) .jelms-library-result-list__status {
  grid-column: 3;
}

.jelms-video-review-suggestions__list .jelms-library-result-list__aside {
  grid-column: 5;
}

.jelms-modal--video-review .jelms-modal__dialog {
  width: min(56rem, calc(100vw - 2rem));
  max-width: min(56rem, calc(100vw - 2rem));
}

.jelms-modal--video-review .jelms-video-review-modal__video {
  width: 100%;
}

.jelms-modal--video-review .jelms-video-review-modal__iframe-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: #000;
}

.jelms-modal--video-review .jelms-video-review-modal__iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.jelms-video-reviews-upgrade {
  max-width: 42rem;
}

@media (max-width: 639px) {
  .jelms-video-review__submission-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .jelms-video-review__submission-action .jelms-btn {
    width: 100%;
  }

  .jelms-video-review__response-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .jelms-video-review__response-verdict {
    align-items: flex-start;
    width: 100%;
    text-align: left;
  }

  .jelms-video-review-suggestions__list .jelms-library-result-list {
    grid-template-columns: 48px minmax(0, 1fr) 44px;
    grid-template-areas:
      "play main aside"
      "meta meta meta";
  }

  .jelms-video-review-suggestions__list .jelms-library-result-list__play {
    grid-area: play;
  }

  .jelms-video-review-suggestions__list .jelms-library-result-list__main {
    grid-area: main;
    grid-column: auto;
  }

  .jelms-video-review-suggestions__list .jelms-library-result-list__aside {
    grid-area: aside;
    grid-column: auto;
  }

  .jelms-video-review-suggestions__list .jelms-library-result-list__collection,
  .jelms-video-review-suggestions__list .jelms-library-result-list__status {
    grid-area: meta;
    grid-column: auto;
    justify-self: start;
    text-align: left;
  }
}

/* ── Page chrome (kit / dashboard) ────────────────────────── */

.jelms-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.jelms-page-head__title {
  margin: 0 0 var(--space-1);
}

.jelms-page-head__subtitle {
  margin: 0;
  color: var(--color-text-secondary);
}

.jelms-page-body {
  padding-block: var(--space-7) var(--space-14);
}

@media (max-width: 767px) {
  .jelms-page-body {
    padding: var(--space-6) var(--space-4) var(--space-10);
  }
}

.jelms-page-head .jelms-theme-switch {
  flex: none;
}

.jelms-theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.jelms-theme-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.jelms-theme-switch__track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: calc(var(--space-16) + var(--space-1));
  height: var(--size-control-medium);
  padding: var(--space-1);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}

.jelms-theme-switch__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: var(--color-text-muted);
}

.jelms-theme-switch__glyph .ic {
  font-size: var(--size-icon-small);
}

.jelms-theme-switch__knob {
  position: absolute;
  inset-block: var(--space-1);
  inset-inline-start: var(--space-1);
  width: calc(var(--size-control-medium) - var(--space-2));
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-popover);
  transform: translateX(0);
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-theme-switch__input:checked + .jelms-theme-switch__track .jelms-theme-switch__knob {
  transform: translateX(calc(var(--space-16) + var(--space-1) - (var(--size-control-medium) - var(--space-2)) - (var(--space-1) * 2)));
}

.jelms-theme-switch__input:checked + .jelms-theme-switch__track .jelms-theme-switch__glyph--moon,
.jelms-theme-switch__input:not(:checked) + .jelms-theme-switch__track .jelms-theme-switch__glyph--sun {
  color: var(--color-text-primary);
}

.jelms-theme-switch__input:focus-visible + .jelms-theme-switch__track {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .jelms-theme-switch__knob {
    transition: none;
  }
}

/* ── Popover ──────────────────────────────────────────────── */

.jelms-popover {
  position: relative;
}

.jelms-popover__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-1));
  inset-inline-end: 0;
  z-index: var(--z-dropdown);
  min-width: 168px;
  padding: var(--space-2);
  border-radius: var(--radius-control);
  border: var(--border-hairline) solid var(--color-border-hairline);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-popover);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.jelms-popover__panel[hidden] {
  display: none !important;
}

.jelms-popover__panel .jelms-btn {
  justify-content: flex-start;
  width: 100%;
}

/* Per-row action menus: lift the open row above later siblings (JA-LMS-372). */
.jelms-library-result-list:has(.jelms-popover__panel:not([hidden])),
.jelms-practice-item-row:has(.jelms-popover__panel:not([hidden])) {
  z-index: var(--z-dropdown);
}

.jelms-popover--dropdown {
  position: static;
}

.jelms-header__actions .jelms-popover--dropdown {
  position: relative;
}

.jelms-popover__scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-dropdown) - 1);
  background: var(--color-overlay-video-45);
}

.jelms-popover__scrim[hidden] {
  display: none !important;
}

.jelms-popover__panel.is-portaled.is-fixed {
  position: fixed;
  z-index: var(--z-modal);
}

.jelms-popover__panel--dropdown {
  padding: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
}

.jelms-popover__panel--notifications {
  width: 400px;
  max-height: 560px;
}

.jelms-popover__panel--leaderboard {
  --jelms-leaderboard-row-columns: auto var(--size-control-small) minmax(0, 1fr) auto;
  width: 440px;
  max-height: min(620px, calc(100dvh - var(--space-8)));
}

.jelms-popover__panel--leaderboard .jelms-popover__body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.jelms-header__actions .jelms-popover__panel--notifications,
.jelms-header__actions .jelms-popover__panel--leaderboard {
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
}

.jelms-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--size-control-large);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-popover__head .jelms-t-card-title {
  margin: 0;
}

.jelms-popover__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-medium);
  height: var(--size-control-medium);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.jelms-popover__close:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-sunken);
}

.jelms-popover__body {
  min-height: 0;
  flex: 1 1 auto;
}

.jelms-popover__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-control-large);
  padding: var(--space-2) var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-popover__footer-link {
  color: var(--color-brand-teal-interactive);
  font-size: var(--type-label-font-size);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.jelms-popover__footer-link:hover {
  text-decoration: underline;
}

.jelms-popover__status {
  margin: 0;
  padding: var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
}

.jelms-popover__status[hidden] {
  display: none !important;
}

/* Notifications dropdown */
.jelms-notifications-popover__scroll {
  max-height: 440px;
  overflow: auto;
}

.jelms-notifications-popover__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jelms-notifications-popover__empty {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.jelms-notifications-popover__empty .ic {
  width: var(--size-control-large);
  height: var(--size-control-large);
  color: var(--color-brand-teal-interactive);
}

.jelms-notifications-row {
  display: grid;
  grid-template-columns: var(--size-control-small) minmax(0, 1fr) var(--space-2);
  gap: var(--space-3);
  align-items: start;
  min-height: calc(var(--space-16) + var(--space-3));
  padding: var(--space-4) var(--space-4);
  border: 0;
  border-bottom: var(--border-hairline) solid var(--color-border-hairline);
  background: var(--color-surface-card);
  color: inherit;
  text-decoration: none;
  text-align: start;
  width: 100%;
  cursor: pointer;
  font: inherit;
}

a.jelms-notifications-row:hover,
button.jelms-notifications-row:hover {
  background: var(--color-surface-sunken);
  text-decoration: none;
}

.jelms-notifications-row.is-unread:hover {
  background: var(--color-surface-sunken);
}

.jelms-notifications-row.is-expanded .jelms-notifications-row__detail {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.jelms-notifications-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-brand-teal-interactive);
}

.jelms-notifications-row.is-unread {
  background: var(--color-surface-selected);
}

.jelms-notifications-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-small);
  height: var(--size-control-small);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
  color: var(--color-brand-teal-interactive);
}

.jelms-notifications-row__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.jelms-notifications-row__title {
  font-size: var(--type-label-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-label-line-height);
}

.jelms-notifications-row__detail {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jelms-notifications-row__date {
  color: var(--color-text-muted);
  font-size: var(--type-meta-font-size);
  line-height: var(--type-meta-line-height);
  margin-block-start: var(--space-2);
}

.jelms-notifications-row__dot {
  width: var(--space-2);
  height: var(--space-2);
  margin-block-start: var(--space-2);
  border-radius: var(--radius-pill);
  background: transparent;
}

.jelms-notifications-row.is-unread .jelms-notifications-row__dot {
  background: var(--color-brand-teal-interactive);
}

/* Leaderboard dropdown */
.jelms-leaderboard-popover__head-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.jelms-leaderboard-popover__tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  gap: var(--space-1);
}

.jelms-leaderboard-popover__tab {
  min-height: calc(var(--size-control-medium) - var(--space-2));
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--type-meta-font-size);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}

.jelms-leaderboard-popover__tab.is-active {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
}

.jelms-leaderboard-popover__footer {
  flex-shrink: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
}

.jelms-leaderboard-popover__visibility-note {
  margin: 0;
  color: var(--color-text-muted);
}

.jelms-leaderboard-popover__toggle-error {
  margin: 0;
  color: var(--color-semantic-danger);
  font-size: var(--type-meta-font-size);
}

.jelms-switch {
  --jelms-switch-knob-size: 20px;
  --jelms-switch-knob-inset: 2px;
  --jelms-switch-track-off: var(--color-border-strong);
  --jelms-switch-track-on: var(--color-brand-teal-interactive);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.jelms-switch__input {
  appearance: none;
  width: var(--size-control-large);
  height: 24px;
  margin: 0;
  flex: none;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--jelms-switch-track-off);
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-switch::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--jelms-switch-knob-size);
  height: var(--jelms-switch-knob-size);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-card);
  pointer-events: none;
  transform: translateY(-50%) translateX(var(--jelms-switch-knob-inset));
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-switch:has(.jelms-switch__input:checked)::after {
  transform: translateY(-50%) translateX(calc(var(--size-control-large) - var(--jelms-switch-knob-inset) - var(--jelms-switch-knob-size)));
}

.jelms-switch__input:checked {
  background-color: var(--jelms-switch-track-on);
}

.jelms[data-theme="dark"] .jelms-switch__input:checked {
  --jelms-switch-track-on: var(--color-brand-teal-active);
}

@media (prefers-reduced-motion: reduce) {
  .jelms-switch__input,
  .jelms-switch::after {
    transition: none;
  }
}

.jelms-switch__input:focus-visible {
  outline: 2px solid var(--color-brand-teal-interactive);
  outline-offset: 2px;
}

.jelms-switch__label {
  font-size: var(--type-label-font-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.jelms-lesson-jai__summary {
	align-items: center;
}

.jelms-lesson-jai__usage-row {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-width: 0;
}

.jelms-lesson-jai__usage-row[hidden] {
	display: none;
}

.jelms-lesson-jai__usage {
	margin: 0;
	color: inherit;
}

.jelms-lesson-jai__usage-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	padding: 0;
	border: var(--border-none);
	background: transparent;
	color: var(--color-text-muted);
	cursor: help;
}

.jelms-lesson-jai__usage-info:focus-visible {
	outline: 2px solid var(--color-brand-teal-interactive);
	outline-offset: 2px;
	border-radius: var(--radius-control);
}

.jelms-lesson-jai__usage-info .ic {
	font-size: var(--size-icon-small);
}

.jelms-lesson-jai__tier-debug {
	display: block;
	color: inherit;
	font-family: var(--font-family-system-fallback);
	font-size: inherit;
	line-height: inherit;
}

.jelms-lesson-jai__tier-debug-pill {
	max-width: min(100%, 20rem);
	white-space: normal;
	text-align: right;
}

.jelms-lesson-jai__open-trigger {
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--space-3);
}

.jelms-lesson-practice-tools__section--jai[open] .jelms-lesson-jai__open-trigger {
	display: none;
}

.jelms-lesson-jai__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-control-small);
  padding: 0 var(--space-3);
  border: var(--border-hairline) solid var(--color-border-interactive);
  border-radius: var(--radius-pill);
  background: var(--color-surface-selected);
  color: var(--color-text-link);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  font-weight: var(--font-weight-bold);
  flex: none;
  white-space: nowrap;
}

.jelms-lesson-jai__pill[hidden] {
  display: none;
}

.jelms-lesson-jai__pill-gem,
.jelms-lesson-jai__pill .ic {
  flex: none;
}

.jelms-lesson-jai__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.jelms-lesson-jai__textarea {
  width: 100%;
  min-height: calc(var(--space-16) + var(--space-4));
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font: inherit;
  resize: vertical;
}

.jelms-lesson-jai__textarea:focus-visible {
  outline: 2px solid var(--color-brand-teal-interactive);
  outline-offset: 2px;
}

.jelms-lesson-jai__submit {
  align-self: flex-start;
  font-weight: var(--font-weight-semibold);
}

.jelms-lesson-jai__form.is-loading .jelms-lesson-jai__submit {
  opacity: 0.7;
  cursor: wait;
}

.jelms-lesson-jai__status {
  margin: 0;
  color: var(--color-text-muted);
}

.jelms-lesson-jai__error {
  margin: 0;
  color: var(--color-semantic-danger);
}

.jelms-lesson-jai__answer-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
}

.jelms-lesson-jai__answer-label {
  margin: 0;
}

.jelms-lesson-jai__answer {
  margin: 0;
  color: var(--color-text-primary);
}

.jelms-jai-history-page .jelms-viewing-history-head__desc {
  max-width: 42rem;
}

.jelms-jai-history-summary {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

.jelms-jai-history-toolbar {
  margin: 0 0 var(--space-5);
}

.jelms-jai-history-toolbar__filter {
  display: inline-flex;
  align-items: center;
}

.jelms-jai-history-diagnostic {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  white-space: pre-wrap;
}

.jelms-jai-history-repair {
  margin: var(--space-4) 0 0;
}

.jelms-jai-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.jelms-jai-history-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.jelms-jai-history-row__layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-4);
  align-items: start;
}

.jelms-jai-history-row__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.jelms-jai-history-row__lesson-card {
  min-width: 0;
}

.jelms-jai-history-row__lesson-card .jelms-continue-card {
  height: 100%;
}

.jelms-jai-history-row__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.jelms-jai-history-row__question {
  margin: 0;
}

.jelms-jai-history-row__meta {
  margin: 0;
  color: var(--color-text-muted);
}

.jelms-jai-history-row__answer,
.jelms-jai-history-row__answer--open {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 68ch;
  padding: var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
}

.jelms-jai-history-row__answer-summary {
  list-style: none;
  cursor: pointer;
}

.jelms-jai-history-row__answer-summary::-webkit-details-marker {
  display: none;
}

.jelms-jai-history-row__answer-preview {
  display: -webkit-box;
  margin: 0 0 var(--space-2);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  color: var(--color-text-primary);
  white-space: pre-wrap;
}

.jelms-jai-history-row__answer[open] .jelms-jai-history-row__answer-preview,
.jelms-jai-history-row__answer[open] .jelms-jai-history-row__answer-toggle--show {
  display: none;
}

.jelms-jai-history-row__answer:not([open]) .jelms-jai-history-row__answer-body,
.jelms-jai-history-row__answer:not([open]) .jelms-jai-history-row__answer-toggle--hide {
  display: none;
}

.jelms-jai-history-row__answer-toggle {
  color: var(--color-text-link);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
}

.jelms-jai-history-row__answer-label {
  margin: 0;
}

.jelms-jai-history-row__answer-text {
  margin: 0;
  color: var(--color-text-primary);
  white-space: pre-wrap;
}

.jelms-jai-history-row__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.jelms-jai-history-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.jelms-jai-history-row__actions[hidden] {
  display: none;
}

.jelms-jai-history-row__confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
}

.jelms-jai-history-row__confirm[hidden] {
  display: none;
}

.jelms-jai-history-row__confirm-lead {
  margin: 0;
}

.jelms-jai-history-row__confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.jelms-jai-history-row__delete-form {
  margin: 0;
}

.jelms-jai-history-pagination {
  margin-block-start: var(--space-5);
}

.jelms-jai-history-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-control-medium);
  min-height: var(--size-control-medium);
  padding-inline: var(--space-2);
  border-radius: var(--radius-control);
  color: var(--color-text-link);
  text-decoration: none;
}

.jelms-jai-history-pagination .page-numbers.current {
  background: var(--color-surface-selected);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 767px) {
  .jelms-jai-history-row__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.jelms-lesson-transcript-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding-inline: var(--space-4);
  color: var(--color-text-muted);
}

.jelms-lesson-transcript-indicator__icon {
  flex: none;
  color: var(--color-text-muted);
}

.jelms-lesson-transcript-indicator__diagnostic {
  margin: 0;
  padding-inline: var(--space-4);
  color: var(--color-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--type-meta-font-size);
  line-height: var(--type-meta-line-height);
}

.jelms-leaderboard-popover__ranked {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.jelms-leaderboard-popover__list > .jelms-leaderboard-popover__gap {
  display: block;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-block: var(--border-hairline) solid var(--color-border-hairline);
  background: transparent;
  font-size: var(--type-meta-font-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-meta-line-height, 1.3);
  color: var(--color-text-muted);
  text-align: center;
}

.jelms-leaderboard-popover__list > .jelms-leaderboard-popover__cap-separator {
  display: block;
  margin: 0;
  padding: 0;
  height: 0;
  border-block-start: var(--border-hairline) solid var(--color-border-hairline);
  list-style: none;
}

.jelms-leaderboard-popover__join-message {
  margin: 0;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: var(--type-body-font-size);
  color: var(--color-text-secondary);
}

.jelms-leaderboard-popover__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.jelms-leaderboard-popover__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jelms-popover__panel--leaderboard .jelms-leaderboard-row {
  display: grid;
  grid-template-columns: auto 32px minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  min-height: var(--size-control-large);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-leaderboard-row {
  display: grid;
  grid-template-columns: var(--jelms-leaderboard-row-columns, auto 32px minmax(0, 1fr) auto);
  gap: var(--space-2);
  align-items: center;
  min-height: var(--size-control-large);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-leaderboard-row.is-current {
  background: var(--color-surface-selected);
  box-shadow: inset 4px 0 0 var(--color-brand-teal-interactive);
}

.jelms-leaderboard-row__rank {
  text-align: end;
  font-size: var(--type-label-font-size);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.jelms-leaderboard-row.is-top .jelms-leaderboard-row__rank {
  color: var(--color-brand-teal-interactive);
}

.jelms-leaderboard-row__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--size-control-small);
  height: var(--size-control-small);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-size: var(--type-meta-font-size);
  font-weight: var(--font-weight-bold);
}

.jelms-leaderboard-row__name {
  min-width: 0;
  font-size: var(--type-label-font-size);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jelms-leaderboard-row__xp {
  text-align: end;
  white-space: nowrap;
  font-size: var(--type-body-small-font-size);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.jelms-leaderboard-popover__pinned {
  flex-shrink: 0;
  border-top: var(--border-hairline) solid var(--color-border-hairline);
  background: var(--color-surface-card);
}

.jelms-leaderboard-popover__privacy {
  min-height: 280px;
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.jelms-leaderboard-popover__privacy .jelms-t-section-title {
  margin: 0;
}

.jelms-leaderboard-popover__privacy-copy {
  margin: 0;
  color: var(--color-text-muted);
}

.jelms-leaderboard-popover__privacy-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.jelms-leaderboard-popover__privacy-field input[type="text"] {
  min-height: var(--size-control-medium);
  padding: 0 var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font: inherit;
}

.jelms-leaderboard-popover__join {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-hairline) solid var(--color-border-hairline);
  align-self: flex-start;
}

.jelms-leaderboard-popover__privacy-error {
  margin: 0;
  color: var(--color-semantic-danger);
  font-size: var(--type-meta-font-size);
}

.jelms-leaderboard-popover__empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .jelms-popover__panel--notifications,
  .jelms-popover__panel--leaderboard {
    position: fixed;
    inset: var(--size-control-large) 0 0 0;
    width: auto;
    max-height: none;
    border-radius: 0;
    z-index: var(--z-modal);
  }

  .jelms-notifications-popover__scroll,
  .jelms-leaderboard-popover__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
}

body.jelms-popover-open {
  overflow: hidden;
}

@media (min-width: 768px) {
  body.jelms-popover-open {
    overflow: auto;
  }
}

/* ── Modal ────────────────────────────────────────────────── */

body.jelms-modal-open {
  overflow: hidden;
}

.jelms-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.jelms-modal[hidden] {
  display: none !important;
}

.jelms-modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-overlay-video-55);
}

.jelms-modal__dialog {
  position: relative;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  width: min(520px, calc(100vw - var(--space-12)));
  max-height: calc(100dvh - var(--space-16));
  background: var(--color-surface-elevated);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

.jelms-practice-log-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

.jelms-practice-log-sheet[hidden] {
  display: none !important;
}

.jelms-practice-log-sheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-overlay-video-55);
}

.jelms-practice-log-sheet__panel {
  position: relative;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  width: min(960px, 100vw);
  max-height: 100dvh;
  background: var(--color-surface-elevated);
  border-inline-start: var(--border-hairline) solid var(--color-border-hairline);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

.jelms-practice-log-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: calc(var(--space-16) + var(--space-4));
  padding: var(--space-4) var(--space-6);
  border-block-end: var(--border-hairline) solid var(--color-border-hairline);
  flex: none;
}

.jelms-practice-log-sheet__head-copy {
  min-width: 0;
}

.jelms-practice-log-sheet__eyebrow {
  display: block;
  margin-block-end: var(--space-1);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  font-weight: var(--type-label-font-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.jelms-practice-log-sheet__eyebrow-link {
  color: var(--color-text-link);
  text-decoration: none;
}

.jelms-practice-log-sheet__eyebrow-link:hover,
.jelms-practice-log-sheet__eyebrow-link:focus-visible {
  text-decoration: underline;
}

.jelms-practice-log-sheet__eyebrow-link:focus:not(:focus-visible) {
  outline: none;
}

.jelms-practice-log-sheet__title {
  margin: 0;
  min-width: 0;
  font-size: var(--type-page-title-font-size);
  line-height: var(--type-page-title-line-height);
  font-weight: var(--type-page-title-font-weight);
  letter-spacing: var(--type-page-title-letter-spacing);
}

.jelms-practice-log-sheet__title:focus:not(:focus-visible) {
  outline: none;
}

.jelms-practice-log-sheet__intro {
  margin: var(--space-1) 0 0;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  color: var(--color-text-secondary);
}

.jelms-practice-log-sheet__close {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--size-control-large);
  height: var(--size-control-large);
  padding: 0;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  cursor: pointer;
}

.jelms-practice-log-sheet__close .ic {
  font-size: var(--size-icon-medium);
}

.jelms-practice-log-sheet__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 var(--space-6);
  padding-block-end: calc(var(--space-16) + var(--space-8) + var(--space-2));
}

.jelms-practice-log-sheet__form-grid {
  display: block;
}

.jelms-practice-log-sheet__form-col {
  min-width: 0;
}

.jelms-practice-log-sheet__form {
  padding-block-end: var(--space-4);
}

.jelms-practice-log-sheet__section {
  padding-block: var(--space-4);
  border-block-end: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-practice-log-sheet__section:last-child {
  border-block-end: 0;
}

.jelms-practice-log-sheet__section-head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-block-end: var(--space-2);
}

.jelms-practice-log-sheet__step {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--space-4) + var(--space-3));
  height: calc(var(--space-4) + var(--space-3));
  border-radius: var(--radius-pill);
  background: var(--color-surface-selected);
  color: var(--color-text-link);
  font-size: var(--type-body-small-font-size);
  line-height: 1;
  font-weight: var(--type-label-font-weight);
}

.jelms-practice-log-sheet__section-title {
  margin: 0;
  font-size: var(--type-card-title-font-size);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--type-card-title-font-weight);
  letter-spacing: var(--type-card-title-letter-spacing);
}

.jelms-practice-log-sheet__section-help {
  margin: 0;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  color: var(--color-text-secondary);
}

.jelms-practice-log-sheet__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: calc(var(--space-16) + var(--space-4));
  padding: var(--space-4) var(--space-6);
  border-block-start: var(--border-hairline) solid var(--color-border-hairline);
  background: var(--color-surface-elevated);
  flex: none;
}

.jelms-practice-log-sheet__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.jelms-practice-log-sheet__summary .ic {
  flex: none;
  font-size: var(--size-icon-medium);
  color: var(--color-text-secondary);
}

.jelms-practice-log-sheet__summary-copy {
  min-width: 0;
}

.jelms-practice-log-sheet__summary-copy strong,
.jelms-practice-log-sheet__summary-copy small {
  display: block;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
}

.jelms-practice-log-sheet__summary-copy small {
  font-weight: 400;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jelms-practice-log-sheet__submit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-control-large);
  padding-inline: var(--space-4);
}

.jelms-practice-log-sheet__submit .ic {
  font-size: var(--size-icon-medium);
}

.jelms-practice-log-sheet__subtitle {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.jelms-practice-log-sheet__preselected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--color-border-interactive);
  border-radius: var(--radius-control);
  background: var(--color-surface-selected);
}

.jelms-practice-log-sheet__preselected[hidden] {
  display: none !important;
}

.jelms-practice-log-sheet__change {
  flex: none;
}

.jelms-practice-log-sheet fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.jelms-practice-log__picker,
.jelms-practice-log__freeform,
.jelms-practice-log__type {
  margin-block-start: var(--space-2);
}

.jelms-practice-log__type-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.jelms-practice-log__type-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: calc(var(--space-8) + var(--space-4));
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  cursor: pointer;
}

.jelms-practice-log__type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: var(--border-hairline);
  height: var(--border-hairline);
  margin: 0;
  pointer-events: none;
}

.jelms-practice-log__type-radio {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--size-icon-medium);
  height: var(--size-icon-medium);
  margin-block-start: var(--space-1);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
}

.jelms-practice-log__type-option:has(input:checked) .jelms-practice-log__type-radio {
  border-color: var(--color-border-interactive);
}

.jelms-practice-log__type-option:has(input:checked) .jelms-practice-log__type-radio::after {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-text-link);
}

.jelms-practice-log__type-copy {
  min-width: 0;
}

.jelms-practice-log__type-copy strong,
.jelms-practice-log__type-copy small {
  display: block;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
}

.jelms-practice-log__type-copy small {
  font-weight: 400;
  color: var(--color-text-secondary);
}

.jelms-practice-log__type-option:has(input:checked) {
  border-color: var(--color-border-interactive);
  background: var(--color-surface-selected);
}

.jelms-practice-log__type-option--full {
  grid-column: 1 / -1;
}

.jelms-practice-log__field-label {
  display: block;
  margin-block: var(--space-2) var(--space-1);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  font-weight: var(--type-label-font-weight);
}

.jelms-practice-log__select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-control-large);
  padding-inline: var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background-color: var(--color-surface-card);
}

.jelms-practice-log__select-icon,
.jelms-practice-log__select-chevron {
  flex: none;
  font-size: var(--size-icon-medium);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.jelms-practice-log__select-chevron {
  margin-inline-start: auto;
}

.jelms .jelms-practice-log__select-wrap:hover {
  border-color: var(--color-border-strong);
}

.jelms .jelms-practice-log__select-wrap select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-image: none;
}

.jelms-practice-log__freeform input[type="text"] {
  width: 100%;
  min-height: calc(var(--space-8) + var(--space-4));
  padding-inline: var(--space-3);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
}

.jelms-practice-log__no-items-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

.jelms-practice-log-sheet .jelms-practice-log__duration-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
  margin-block-end: var(--space-2);
}

.jelms-practice-log-sheet .jelms-duration-btn {
  min-height: var(--size-control-medium);
  padding-inline: var(--space-1);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--type-label-font-weight);
}

@media (min-width: 900px) {
  .jelms-practice-log-sheet__form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  .jelms-practice-log-sheet__form-col--what > .jelms-practice-log-sheet__section {
    border-block-end: 0;
    padding-block-end: var(--space-2);
  }

  .jelms-practice-log-sheet__form-col--details > .jelms-practice-log-sheet__section:first-child {
    padding-block-start: var(--space-4);
  }

  .jelms-practice-log-sheet__form-col--details > .jelms-practice-log-sheet__section--reflection {
    padding-block-start: var(--space-3);
  }

  .jelms-practice-log-sheet__form-col--details .jelms-practice-log__notes textarea {
    min-height: calc(var(--space-12) + var(--space-2));
  }
}

.jelms-practice-log-sheet .jelms-duration-btn.is-active {
  border: 2px solid var(--color-border-interactive);
  background: var(--color-surface-selected);
  color: var(--color-text-link);
}

.jelms-practice-log__custom-time {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-control-medium);
  padding-inline: var(--space-2);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
}

.jelms-practice-log__custom-time > span {
  flex: none;
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-secondary);
}

.jelms-practice-log__custom-time input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
}

.jelms-practice-log-sheet .jelms-practice-log__sentiment-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}

.jelms-practice-log-sheet .jelms-sentiment-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: calc(var(--space-12) + var(--space-2));
  padding: var(--space-2);
}

.jelms-practice-log-sheet .jelms-sentiment-btn .jelms-sentiment-btn__content {
  gap: var(--space-1);
  padding-block: var(--space-1);
}

.jelms-practice-log-sheet .jelms-sentiment-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: var(--border-hairline);
  height: var(--border-hairline);
  margin: 0;
  pointer-events: none;
}

.jelms-practice-log-sheet .jelms-sentiment-btn:has(input:checked) {
  background: var(--color-surface-selected);
  border: 2px solid var(--color-border-interactive);
  color: var(--color-text-link);
}

.jelms-practice-log__improvement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--size-control-large);
  margin-block-start: var(--space-2);
}

.jelms-practice-log__improvement-copy strong,
.jelms-practice-log__improvement-copy small {
  display: block;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
}

.jelms-practice-log__improvement-copy small {
  font-weight: 400;
  color: var(--color-text-secondary);
}

.jelms-practice-log__segmented {
  display: flex;
  flex: none;
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.jelms-practice-log__segment {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--space-12) + var(--space-4));
  min-height: calc(var(--space-6) + var(--space-4));
  margin: 0;
  cursor: pointer;
}

.jelms-practice-log__segment + .jelms-practice-log__segment {
  border-inline-start: var(--border-hairline) solid var(--color-border-strong);
}

.jelms-practice-log__segment input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: var(--border-hairline);
  height: var(--border-hairline);
  margin: 0;
  pointer-events: none;
}

.jelms-practice-log__segment span {
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
}

.jelms-practice-log__segment:has(input:checked) {
  background: var(--color-surface-selected);
  color: var(--color-text-link);
  font-weight: var(--type-label-font-weight);
}

.jelms-practice-log__notes {
  display: block;
  margin-block-start: var(--space-1);
}

.jelms-practice-log__notes-label {
  display: block;
  margin-block-end: var(--space-1);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  font-weight: var(--type-label-font-weight);
}

.jelms-practice-log__notes-label small {
  font-weight: 400;
  color: var(--color-text-secondary);
}

.jelms-practice-log__notes textarea {
  width: 100%;
  min-height: calc(var(--space-8) + var(--space-4));
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  resize: none;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
}

.jelms-practice-log__notes-count {
  display: block;
  margin-block-start: var(--space-1);
  text-align: right;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  color: var(--color-text-muted);
}

@media (max-width: 639px) {
  .jelms-practice-log__type-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .jelms-practice-log-sheet .jelms-practice-log__duration-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(var(--size-control-large), auto));
  }

  .jelms-practice-log-sheet .jelms-duration-btn {
    min-height: var(--size-control-large);
  }

  .jelms-practice-log-sheet .jelms-practice-log__sentiment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jelms-practice-log__improvement {
    flex-direction: column;
    align-items: stretch;
  }

  .jelms-practice-log-sheet__foot {
    flex-wrap: wrap;
  }

  .jelms-practice-log-sheet__submit {
    width: 100%;
  }
}

.jelms-btn--header-log {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-control-large);
  padding-inline: var(--space-3);
  border: var(--border-hairline) solid color-mix(in srgb, var(--color-brand-teal-interactive) 55%, transparent);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-brand-teal-interactive) 18%, transparent);
  color: var(--color-header-text);
  font-size: var(--type-label-font-size);
  font-weight: var(--type-label-font-weight);
  line-height: var(--type-label-line-height);
  white-space: nowrap;
}

.jelms-btn--header-log:hover {
  background: color-mix(in srgb, var(--color-brand-teal-interactive) 28%, transparent);
  border-color: var(--color-brand-teal-interactive);
}

.jelms-btn--header-log:disabled,
.jelms-btn--header-log.is-disabled {
  background: var(--color-surface-sunken);
  border-color: var(--color-border-hairline);
  color: var(--color-text-disabled);
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.jelms-btn--header-log .ic {
  font-size: var(--size-icon-small);
}

.jelms-practice-log-ack {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-2);
}

.jelms-practice-log-ack__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-xlarge);
  height: var(--size-icon-xlarge);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-brand-teal-interactive) 14%, transparent);
  color: var(--color-brand-teal-interactive);
}

.jelms-practice-log-ack__icon .ic {
  font-size: var(--size-icon-large);
}

.jelms-practice-log-ack__headline {
  margin: 0;
  max-width: 28ch;
}

.jelms-practice-log-ack__detail {
  margin: 0;
  max-width: 34ch;
  color: var(--color-text-secondary);
}

.jelms-practice-log-ack__streak {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.jelms-practice-log-ack__streak-value {
  font-size: var(--type-page-title-font-size);
  line-height: var(--type-page-title-line-height);
  font-weight: var(--type-section-title-font-weight);
  color: var(--color-brand-teal-interactive);
}

.jelms-practice-log-ack__streak-label {
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  color: var(--color-text-secondary);
}

.jelms-practice-log-ack__xp {
  margin: 0;
  font-size: var(--type-label-font-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--type-label-font-weight);
  color: var(--color-text-primary);
}

.jelms-practice-log-ack__xp--milestone {
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
}

.jelms-practice-log-ack__dismiss {
  width: 100%;
  margin-block-start: var(--space-2);
}

.jelms-practice-log-ack--confirm {
  cursor: pointer;
}

.jelms-practice-log-ack--milestone .jelms-practice-log-ack__icon {
  width: calc(var(--size-icon-xlarge) + var(--space-4));
  height: calc(var(--size-icon-xlarge) + var(--space-4));
}

.jelms-practice-log-ack--milestone .jelms-practice-log-ack__headline {
  font-size: var(--type-section-title-font-size);
  line-height: var(--type-section-title-line-height);
}

@media (prefers-reduced-motion: no-preference) {
  .jelms-practice-log-ack--milestone .jelms-practice-log-ack__icon {
    animation: jelms-practice-log-ack-pop var(--motion-duration-slow) ease both;
  }

  .jelms-practice-log-ack__streak-value.is-landing {
    animation: jelms-practice-log-streak-land var(--motion-duration-standard) ease both;
  }
}

@keyframes jelms-practice-log-ack-pop {
  from {
    opacity: 0;
    transform: scale(0.88);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes jelms-practice-log-streak-land {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-2) * -1)) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jelms-practice-log-ack--milestone .jelms-practice-log-ack__icon,
  .jelms-practice-log-ack__streak-value.is-landing {
    animation: none;
  }
}

.jelms-sentiment-btn__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
}

.jelms-sentiment-btn__emoji {
  display: block;
  flex: none;
  width: var(--size-icon-medium);
  height: var(--size-icon-medium);
  font-size: var(--size-icon-medium);
  line-height: 1;
  text-align: center;
}

.jelms-sentiment-btn__label {
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
}


.jelms-form__readiness-cards {
  display: grid;
  gap: var(--space-2);
}

.jelms-readiness-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  cursor: pointer;
}

.jelms-readiness-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-brand-teal-interactive) 45%, var(--color-border-hairline));
  background: var(--color-surface-selected);
}

.jelms-readiness-card input[type="radio"] {
  flex: none;
  margin-block-start: var(--space-1);
}

.jelms-readiness-card__copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

/* Repertoire row readiness toggles (JA-LMS-168) — superseded by .jelms-segmented (JA-LMS-170) */

/* Segmented control — shared pattern (JA-LMS-170) */
.jelms-segmented {
	display: inline-flex;
	max-width: 100%;
	border: var(--border-hairline) solid var(--color-border-hairline);
	border-radius: var(--radius-control);
	overflow: hidden;
	background: var(--color-surface-card);
}

.jelms-segmented__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-height: var(--size-control-large);
	min-width: var(--size-control-large);
	padding-inline: var(--space-3);
	border: 0;
	background: transparent;
	color: var(--color-text-primary);
	font: inherit;
	font-size: var(--type-body-small-font-size);
	line-height: var(--type-body-small-line-height);
	white-space: nowrap;
	cursor: pointer;
}

.jelms-segmented__btn + .jelms-segmented__btn {
	border-inline-start: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-segmented__btn:hover {
	background: var(--color-surface-sunken);
}

.jelms-segmented__btn[aria-pressed="true"] {
	background: var(--color-surface-selected);
	color: var(--color-brand-teal-interactive);
	font-weight: var(--type-label-font-weight);
}

.jelms-segmented__btn:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: calc(var(--focus-offset) * -1);
}

.jelms-form__helper {
  margin: var(--space-2) 0 0;
}

.jelms-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--space-16);
  padding: var(--space-5) var(--space-6);
  border-block-end: var(--border-hairline) solid var(--color-border-hairline);
  flex: none;
}

.jelms-modal__title {
  margin: 0;
  min-width: 0;
}

.jelms-modal__close {
  flex: none;
  color: var(--color-text-secondary);
}

.jelms-modal__body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1 1 auto;
}

.jelms-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-height: calc(var(--space-16) + var(--space-2));
  padding: var(--space-4) var(--space-6);
  border-block-start: var(--border-hairline) solid var(--color-border-hairline);
  flex: none;
}

.jelms-modal__subtitle {
  margin: calc(var(--space-1) * -1) 0 var(--space-4);
  color: var(--color-text-secondary);
}

/* Canonical select — shared appearance (JA-LMS-166 / JA-LMS-167) */
.jelms .jelms-select,
.jelms .jelms-form select,
.jelms .jelms-search-filter-sheet__fields select,
.jelms .jelms-search-collection-browse__select,
.jelms .jelms-library-filter__select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--size-control-large);
  padding: var(--space-2) var(--space-7) var(--space-2) var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background-color: var(--color-surface-card);
  color: var(--color-text-primary);
  font: inherit;
  line-height: var(--type-body-line-height, 1.5);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position:
    calc(100% - var(--space-4)) calc(50% - 2px),
    calc(100% - var(--space-3)) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    color var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms .jelms-select option,
.jelms .jelms-form select option,
.jelms .jelms-search-filter-sheet__fields select option,
.jelms .jelms-search-collection-browse__select option,
.jelms .jelms-library-filter__select option,
.jelms .jelms-practice-log__select-wrap select option {
  background-color: var(--color-surface-card);
  color: var(--color-text-primary);
}

.jelms .jelms-select:hover:not(:disabled),
.jelms .jelms-form select:hover:not(:disabled),
.jelms .jelms-search-filter-sheet__fields select:hover:not(:disabled),
.jelms .jelms-search-collection-browse__select:hover:not(:disabled),
.jelms .jelms-library-filter__select:hover:not(:disabled) {
  border-color: var(--color-border-strong);
}

.jelms .jelms-select:disabled,
.jelms .jelms-form select:disabled,
.jelms .jelms-search-filter-sheet__fields select:disabled,
.jelms .jelms-search-collection-browse__select:disabled,
.jelms .jelms-library-filter__select:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Canonical text input — peer of .jelms-select (JA-LMS-169) */
.jelms .jelms-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--size-control-large);
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background-color: var(--color-surface-card);
  color: var(--color-text-primary);
  font: inherit;
  line-height: var(--type-body-line-height, 1.5);
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    color var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms .jelms-input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.jelms .jelms-input:hover:not(:disabled) {
  border-color: var(--color-border-strong);
}

.jelms .jelms-input:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Canonical checkbox — peer of .jelms-select / .jelms-input (JA-LMS-202) */
.jelms input.jelms-checkbox.jelms-checkbox {
  width: var(--size-control-medium);
  height: var(--size-control-medium);
  margin: 0;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background-color: var(--color-surface-card);
  color: var(--color-text-primary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    color var(--motion-duration-fast) var(--motion-easing-standard);
  text-decoration: none;
}

.jelms input.jelms-checkbox.jelms-checkbox:checked {
  background-color: var(--color-brand-teal-interactive);
  border-color: var(--color-brand-teal-interactive);
  color: var(--color-text-inverse);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.jelms input.jelms-checkbox.jelms-checkbox:hover:not(:disabled) {
  background-color: var(--color-surface-card);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  text-decoration: none;
}

.jelms input.jelms-checkbox.jelms-checkbox:hover:not(:disabled):checked {
  background-color: var(--color-brand-teal-interactive);
  border-color: var(--color-brand-teal-active, var(--color-brand-teal-interactive));
  color: var(--color-text-inverse);
}

.jelms input.jelms-checkbox.jelms-checkbox:focus-visible {
  background-color: var(--color-surface-card);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  text-decoration: none;
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
}

.jelms input.jelms-checkbox.jelms-checkbox:focus-visible:checked {
  background-color: var(--color-brand-teal-interactive);
  border-color: var(--color-brand-teal-interactive);
  color: var(--color-text-inverse);
}

.jelms input.jelms-checkbox.jelms-checkbox:active:not(:disabled) {
  background-color: var(--color-surface-sunken);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  text-decoration: none;
}

.jelms input.jelms-checkbox.jelms-checkbox:active:not(:disabled):checked {
  background-color: var(--color-brand-teal-active, var(--color-brand-teal-interactive));
  border-color: var(--color-brand-teal-active, var(--color-brand-teal-interactive));
  color: var(--color-text-inverse);
}

.jelms input.jelms-checkbox.jelms-checkbox:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  background-color: var(--color-surface-card);
  border-color: var(--color-border-hairline);
  color: var(--color-text-muted);
  text-decoration: none;
}

/* Form fields inside modals */
.jelms-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.jelms-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.jelms-form legend,
.jelms-form__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--type-label-font-size);
  line-height: var(--type-label-line-height);
  font-weight: var(--type-label-font-weight);
}

.jelms-form__error {
  margin: 0;
  color: var(--color-semantic-danger);
  font-size: var(--type-body-small-font-size);
}

.jelms-form__error[hidden] {
  display: none;
}

.jelms-practice-log__field-error {
  margin-block-start: var(--space-2);
}

.jelms-practice-log__picker:focus {
  outline: none;
}

.jelms-practice-log__picker:focus-visible,
.jelms-practice-log__duration-grid:focus-visible,
.jelms-practice-log__sentiment-grid:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-control);
}

.jelms-form__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.jelms-practice-log-sheet .jelms-form__presets {
  flex-wrap: nowrap;
  gap: var(--space-2);
  margin-bottom: 0;
}

.jelms-form__chip.is-active,
.jelms-duration-btn.is-active,
.jelms-sentiment-btn.is-active {
  background: var(--color-surface-selected);
  border-color: var(--color-border-interactive);
  color: var(--color-brand-teal-interactive);
}

.jelms-form input[type="text"],
.jelms-form input[type="password"],
.jelms-form input[type="email"],
.jelms-form input[type="search"],
.jelms-form input[type="url"],
.jelms-form input[type="tel"],
.jelms-form input[type="number"],
.jelms-form textarea {
  width: 100%;
  min-height: var(--size-control-medium);
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font: inherit;
}

.jelms-form textarea {
  min-height: calc(var(--space-16) + var(--space-4));
  resize: vertical;
}

.jelms-form__radios,
.jelms-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.jelms-sentiment-btn,
.jelms-duration-btn {
  min-height: var(--size-control-small);
  padding-inline: var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font: inherit;
  cursor: pointer;
}

@media (max-width: 767px) {
  .jelms-modal {
    align-items: flex-end;
    padding: 0;
  }

  .jelms-modal__dialog {
    width: 100%;
    max-height: calc(100dvh - var(--space-6));
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    border-start-start-radius: var(--space-6);
    border-start-end-radius: var(--space-6);
  }

  .jelms-modal__dialog::before {
    content: "";
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline: 50%;
    width: var(--space-8);
    height: var(--space-1);
    margin-inline-start: calc(var(--space-8) / -2);
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
  }

  .jelms-modal__header {
    padding: var(--space-6) var(--space-4) var(--space-4);
    padding-block-start: calc(var(--space-6) + var(--space-2));
  }

  .jelms-modal__body {
    padding: var(--space-4);
  }

  .jelms-modal__footer {
    flex-direction: column-reverse;
    align-items: stretch;
    padding: var(--space-4);
    padding-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }

  .jelms-modal__footer .jelms-btn--primary,
  .jelms-modal__footer .jelms-btn--accent {
    width: 100%;
    min-height: var(--space-12);
  }
}

/* ── App header ───────────────────────────────────────────── */

.jelms-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  height: var(--size-header-desktop);
  background: var(--color-surface-header);
  color: var(--color-header-text);
}

.jelms-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: 1400px;
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--space-6);
  min-width: 0;
}

@media (min-width: 1448px) {
  .jelms-header__inner {
    padding-inline: 0;
  }
}

.jelms-header :where(a, button) {
  color: inherit;
}

.jelms-header :where(a, button):focus-visible {
  outline-color: var(--color-header-text);
}

.jelms-header .jelms-popover__panel {
  color: var(--color-text-primary);
}

.jelms-header .jelms-popover__panel .jelms-btn--ghost {
  color: var(--color-brand-teal-interactive);
}

.jelms-header__switch-btn,
.jelms-header__icon-btn,
.jelms-header__avatar-btn,
.jelms-header__search-btn,
.jelms-header__menu-btn,
.jelms-header__nav-more-btn,
.jelms-header__nav-link {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    color var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-header__switch-btn:hover,
.jelms-header__icon-btn:hover,
.jelms-header__avatar-btn:hover,
.jelms-header__search-btn:hover,
.jelms-header__menu-btn:hover,
.jelms-header__nav-more-btn:hover,
.jelms-header__nav-link:hover {
  background: var(--color-header-overlay-subtle);
  color: var(--color-header-text);
  text-decoration: none;
}

.jelms-header__switch-btn[aria-expanded="true"],
.jelms-header__icon-btn[aria-expanded="true"],
.jelms-header__avatar-btn[aria-expanded="true"],
.jelms-header__search-btn[aria-expanded="true"],
.jelms-header__menu-btn[aria-expanded="true"],
.jelms-header__nav-more-btn[aria-expanded="true"],
.jelms-header__nav-link.is-active {
  background: var(--color-header-overlay-strong);
  color: var(--color-header-text);
}

.jelms-header__switch {
  flex: none;
}

.jelms-header__switch-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: auto;
  max-width: 220px;
  min-width: 0;
  height: var(--size-control-large);
  padding-inline: var(--space-3);
  border: var(--border-hairline) solid var(--color-header-overlay-border);
  border-radius: var(--radius-control);
  color: var(--color-header-text);
}

.jelms-header__switch-mark-img {
  --network-site-mark-size: calc(var(--size-icon-xlarge) - var(--space-1));
  display: block;
  flex: none;
  width: var(--network-site-mark-size);
  height: var(--network-site-mark-size);
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.jelms-header__switch-text {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  text-align: start;
}

.jelms-header__switch-text .jelms-t-label {
  color: var(--color-header-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.jelms-header__switch-btn .ic {
  font-size: var(--size-icon-small);
  flex: none;
  margin-inline-start: auto;
}

.jelms-header__switch-panel {
  inset-inline: 0 auto;
  width: 320px;
  padding: var(--space-3);
  gap: 0;
}

.jelms-header__switch-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-14);
  padding-inline: var(--space-2);
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  text-decoration: none;
}

.jelms-header__switch-row:hover {
  background: var(--color-surface-selected);
  text-decoration: none;
}

.jelms-header__switch-row.is-current .jelms-header__switch-check {
  opacity: 1;
}

.jelms-header__switch-copy {
  min-width: 0;
  flex: 1;
}

.jelms-header__switch-copy .jelms-t-label {
  display: block;
}

.jelms-header__switch-copy .jelms-t-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jelms-header__switch-check {
  opacity: 0;
  color: var(--color-brand-teal-interactive);
  flex: none;
}

.jelms-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 0 1 auto;
  min-width: 0;
  margin-inline-start: auto;
  flex-wrap: nowrap;
}

.jelms-header__nav-link {
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  min-height: var(--size-control-large);
  padding-inline: var(--space-3);
  color: var(--color-header-text);
  font-size: var(--type-label-font-size);
  font-weight: var(--type-label-font-weight);
  line-height: var(--type-label-line-height);
  border-radius: var(--radius-control);
  position: relative;
}

.jelms-header__nav-link:focus-visible {
  color: var(--color-header-text);
}

.jelms-header__nav-link.is-active {
  color: var(--color-header-text);
}

.jelms-header__nav-link.is-active::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: 0;
  height: var(--border-strong);
  background: var(--color-header-text);
}

.jelms-header__nav-more {
  display: none;
}

.jelms-header__nav-more-btn {
  color: var(--color-header-text);
}

.jelms-header__search {
  display: none;
}

.jelms-header__search-btn {
  display: inline-flex;
}

.jelms-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
}

.jelms-header__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-large);
  height: var(--size-control-large);
  border-radius: var(--radius-control);
  color: var(--color-header-text);
}

.jelms-header__icon-btn .ic {
  font-size: var(--size-icon-medium);
}

.jelms-header__unread {
  position: absolute;
  inset-block-start: 9px;
  inset-inline-end: 9px;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-brand-orange);
  border: var(--border-strong) solid var(--color-surface-header);
}

.jelms-header__avatar {
  flex: none;
}

.jelms-header__avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-large);
  height: var(--size-control-large);
  border-radius: var(--radius-control);
  color: var(--color-header-text);
  gap: var(--space-1);
}

.jelms-header__avatar-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--space-9);
  height: var(--space-9);
  border-radius: var(--radius-pill);
  background: var(--color-surface-selected);
  color: var(--color-brand-teal-interactive);
  font-size: var(--type-label-font-size);
  font-weight: var(--font-weight-bold);
  overflow: hidden;
}

.jelms-header__avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jelms-header__avatar-chevron {
  display: none;
  font-size: var(--size-icon-small);
  color: var(--color-header-text);
}

.jelms-header__avatar-panel {
  inset-inline-end: 0;
  min-width: calc(var(--space-16) * 2);
  max-width: calc(100vw - var(--space-4));
  max-height: calc(100dvh - var(--size-header-desktop) - var(--space-4));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding: var(--space-2);
}

.jelms-header__avatar-panel.is-portaled.is-fixed {
  max-height: calc(100dvh - var(--space-4));
}

.jelms-header__avatar-menu-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.jelms-header__avatar-menu-group + .jelms-header__avatar-menu-group {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-top: var(--border-hairline) solid var(--color-border-hairline);
}

@media (min-width: 768px) {
  .jelms-header__avatar-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-3);
    width: min(calc(var(--space-16) * 9), calc(100vw - var(--space-4)));
    padding: var(--space-3);
  }

  .jelms-header__avatar-menu-group + .jelms-header__avatar-menu-group {
    margin-block-start: 0;
    padding-block-start: 0;
    border-top: none;
  }

  .jelms-header__avatar-menu-group:nth-child(even) {
    border-inline-start: var(--border-hairline) solid var(--color-border-hairline);
    padding-inline-start: var(--space-4);
  }

  /* Odd group count: last group spans both columns so no empty grid cell remains. */
  .jelms-header__avatar-menu-group:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-inline-start: none;
    padding-inline-start: 0;
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-2);
    border-top: var(--border-hairline) solid var(--color-border-hairline);
  }
}

.jelms-header__avatar-menu-group-label {
  margin: 0;
  padding-inline: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.jelms-header__account-menu-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.jelms-header__avatar-panel .jelms-header__account-menu-link {
  justify-content: flex-start;
  inline-size: 100%;
  min-height: var(--size-control-medium);
}

.jelms-header__account-menu-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--type-body-small-font-size);
}

.jelms-header__account-menu-label {
  min-width: 0;
}

.jelms-header__menu-btn,
.jelms-header__wordmark,
.jelms-header__drawer,
.jelms-header__drawer-scrim {
  display: none;
}

/* Compact nav — drop low-priority links into More below 1320px */
@media (min-width: 768px) and (max-width: 1319px) {
  .jelms-header__switch-btn {
    max-width: 184px;
  }

  .jelms-header__nav-link[data-nav-priority="low"] {
    display: none;
  }

  .jelms-header__nav-more {
    display: block;
  }
}

@media (min-width: 1320px) {
  .jelms-header__nav-more {
    display: none;
  }
}

@media (min-width: 1280px) {
  .jelms-header__avatar-chevron {
    display: inline-flex;
  }

  .jelms-header__avatar-btn {
    width: auto;
    padding-inline: var(--space-1);
  }
}

/* Mobile header */
@media (max-width: 767px) {
  .jelms-header {
    height: var(--size-header-mobile);
  }

  .jelms-header__inner {
    gap: var(--space-2);
    padding-inline: var(--space-4);
  }

  .jelms-header__switch,
  .jelms-header__nav,
  .jelms-header__search,
  .jelms-header__leaderboard {
    display: none;
  }

  .jelms-header__menu-btn,
  .jelms-header__wordmark {
    display: inline-flex;
  }

  .jelms-header__wordmark {
    align-items: center;
    max-width: 156px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--type-label-font-size);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    color: var(--color-header-text);
  }

  .jelms-header__menu-btn {
    align-items: center;
    justify-content: center;
    width: var(--size-control-large);
    height: var(--size-control-large);
    border-radius: var(--radius-control);
    color: var(--color-header-text);
  }

  .jelms-header__drawer.is-open,
  .jelms-header__drawer-scrim.is-open {
    display: block;
  }

  .jelms-header__drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sticky) + 1);
    background: var(--color-overlay-video-45);
  }

  .jelms-header__drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: calc(var(--z-sticky) + 2);
    width: min(320px, calc(100vw - var(--space-8)));
    padding: var(--space-4);
    background: var(--color-surface-elevated);
    color: var(--color-text-primary);
    overflow-y: auto;
  }

  .jelms-header__drawer-link {
    display: flex;
    align-items: center;
    min-height: var(--size-control-large);
    padding-inline: var(--space-3);
    border-radius: var(--radius-control);
    color: var(--color-text-primary);
    text-decoration: none;
  }

  .jelms-header__drawer-link.is-active,
  .jelms-header__drawer-link:hover {
    background: var(--color-surface-selected);
    text-decoration: none;
  }

  .jelms-header__drawer-menu-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .jelms-header__drawer-menu-group + .jelms-header__drawer-menu-group {
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-3);
    border-top: var(--border-hairline) solid var(--color-border-hairline);
  }

  .jelms-header__drawer-menu-group-label {
    margin: 0;
    padding-inline: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--type-body-small-font-size);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .jelms-header__drawer-link.jelms-header__account-menu-link {
    gap: var(--space-2);
  }
}

/* ── PA hero resources popover ─────────────────────────────── */

.jelms-pa-hero__resources .jelms-popover__panel {
  min-width: calc(var(--space-16) * 3 + var(--space-4));
}

.jelms-pa-hero__resources .jelms-popover__panel.is-fixed {
  position: fixed;
  inset: auto;
  margin: 0;
  z-index: var(--z-dropdown);
}

.jelms-pa-hero__resources .jelms-popover__panel.is-flip-up {
  inset-block-start: auto;
  inset-block-end: calc(100% + var(--space-1));
}

.jelms-kit-toggle {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-start: var(--space-6);
  z-index: var(--z-tooltip);
}

/* ── Practice Curriculum page (JA-LMS-52) ─────────────────── */

.jelms-curr-page {
  --jelms-curr-band-1: var(--color-jpc-band-1);
  --jelms-curr-band-2: var(--color-jpc-band-2);
  --jelms-curr-band-3: var(--color-jpc-band-3);
  --jelms-curr-band-4: var(--color-jpc-band-4);
  --jelms-curr-band-5: var(--color-jpc-band-5);
  --journey-jpc-band-1: var(--color-jpc-band-1);
  --journey-jpc-band-2: var(--color-jpc-band-2);
  --journey-jpc-band-3: var(--color-jpc-band-3);
  --journey-jpc-band-4: var(--color-jpc-band-4);
  --journey-jpc-band-5: var(--color-jpc-band-5);
}

.jelms-curr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.jelms-curr-head__copy,
.jelms-jpc-head__copy,
.jelms-my-learning__head-copy,
.jelms-notifications-page__head-copy,
.jelms-practice-history-head__copy,
.jelms-practice-items-manage-head__copy,
.jelms-repertoire-head__copy,
.jelms-viewing-history-head__copy,
.jelms-library-focus-path__header-main,
.jelms-jpc-band-row__copy {
  min-width: 0;
}

.jelms-curr-head__lede {
  margin: var(--space-1) 0 0;
  max-width: 58ch;
  color: var(--color-text-secondary);
}

.jelms-curr-band-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.jelms-curr-band-strip__label {
  font-size: var(--type-meta-font-size);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.jelms-curr-band-strip__track {
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-progress-track);
  overflow: hidden;
}

.jelms-curr-band-strip__item.is-current .jelms-curr-band-strip__track {
  box-shadow: 0 0 0 2px var(--color-overlay-teal-35);
}

.jelms-curr-band-strip__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.jelms-curr-bands {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.jelms-curr-band {
  --jelms-curr-band-color: var(--color-category-practice-curriculum);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-card);
}

.jelms-curr-band--current {
  border-color: color-mix(in srgb, var(--jelms-curr-band-color, var(--color-category-practice-curriculum)) 40%, var(--color-border-hairline));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--jelms-curr-band-color, var(--color-category-practice-curriculum)) 10%, var(--color-surface-card));
}

.jelms-curr-band--locked {
  border-color: color-mix(in srgb, var(--jelms-curr-band-color, var(--color-border-hairline)) 22%, var(--color-border-hairline));
}

.jelms-curr-band__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  list-style: none;
  background: color-mix(in srgb, var(--jelms-curr-band-color, var(--color-category-practice-curriculum)) 8%, var(--color-surface-card));
}

.jelms-curr-band__summary::-webkit-details-marker {
  display: none;
}

.jelms-curr-band__title {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--jelms-curr-band-color, var(--color-text-primary)) 70%, var(--color-text-primary));
}

.jelms-curr-band__tag {
  display: inline-block;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-brand-teal-interactive);
  background: color-mix(in srgb, var(--color-brand-orange) 12%, var(--color-surface-selected));
  border: var(--border-hairline) solid var(--color-overlay-orange-32);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.jelms-curr-band__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  font-size: var(--type-meta-font-size);
  color: var(--color-text-muted);
}

.jelms-curr-band__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
}

.jelms-curr-band__chevron {
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-curr-band[open] .jelms-curr-band__chevron {
  transform: rotate(180deg);
}

.jelms-curr-band__levels {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-4);
  border-top: var(--border-hairline) solid var(--color-overlay-border-70);
}

.jelms-curr-level {
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--color-surface-card);
}

.jelms-curr-level--current {
  border: 2px solid var(--color-brand-orange);
  background: var(--color-surface-selected);
}

.jelms-curr-level--done .jelms-curr-level__title {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

.jelms-curr-level--preview {
  opacity: 0.68;
  background: color-mix(in srgb, var(--color-surface-card) 94%, var(--color-text-muted));
}

.jelms-curr-level--preview .jelms-curr-level__title,
.jelms-curr-level--preview .jelms-curr-level__meta {
  color: var(--color-text-muted);
}

.jelms-curr-level__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
}

.jelms-curr-level--current .jelms-curr-level__summary {
  padding: var(--space-4);
}

.jelms-curr-level__summary::-webkit-details-marker {
  display: none;
}

.jelms-curr-level__summary-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

.jelms-curr-level__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-teal-interactive);
  background: color-mix(in srgb, var(--color-brand-orange) 14%, var(--color-surface-selected));
  border: var(--border-hairline) solid var(--color-overlay-orange-35);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.jelms-curr-level__title {
  margin: 0;
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
}

.jelms-curr-level--current .jelms-curr-level__title {
  font-size: var(--type-body-font-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.jelms-curr-level__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  font-size: var(--type-meta-font-size);
  color: var(--color-text-muted);
}

.jelms-curr-level--current .jelms-curr-level__meta {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.jelms-curr-level__expand-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: var(--space-2);
  font-size: 11px;
  color: var(--color-text-muted);
}

.jelms-curr-level__chevron {
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-curr-level[open] .jelms-curr-level__chevron {
  transform: rotate(180deg);
}

.jelms-curr-level__body {
  padding: 0 var(--space-4) var(--space-4);
  border-top: var(--border-hairline) solid var(--color-overlay-border-70);
}

.jelms-curr-level--current .jelms-curr-level__body {
  border-top-color: color-mix(in srgb, var(--color-brand-orange) 22%, var(--color-border-hairline));
}

.jelms-curr-level__keys-row {
  padding-top: var(--space-3);
}

.jelms-curr-level__keys-meta {
  margin: 0 0 var(--space-2);
  font-size: var(--type-meta-font-size);
  color: var(--color-text-muted);
}

.jelms-curr-level__unlock-msg {
  margin: var(--space-3) 0 0;
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-muted);
  line-height: 1.45;
}

.jelms-curr-level__why-link {
  display: inline;
  border: 0;
  background: transparent;
  padding: 0;
  margin-inline-start: var(--space-1);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-teal-interactive);
  cursor: pointer;
  text-decoration: underline;
}

.jelms-curr-key-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.jelms-curr-key {
  min-height: var(--space-8);
  border-radius: var(--radius-control);
  border: var(--border-hairline) solid var(--color-border-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  padding: 0 var(--space-1);
  color: var(--color-text-muted);
  background: var(--color-overlay-border-25);
  font-family: inherit;
  appearance: none;
}

button.jelms-curr-key {
  cursor: pointer;
}

.jelms-curr-key--done {
  background: var(--color-overlay-success-22);
  border-color: var(--color-overlay-success-45);
  color: var(--color-text-primary);
}

.jelms-curr-key--current {
  background: var(--color-overlay-orange-18);
  border-color: var(--color-brand-orange);
  color: var(--color-text-primary);
}

.jelms-curr-key--preview {
  cursor: default;
  opacity: 0.55;
}

.jelms-curr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.jelms-modal--jpc-practice .jelms-modal__dialog {
  width: min(920px, calc(100vw - var(--space-12)));
  max-height: min(92vh, 860px);
}

.jelms-modal--jpc-practice .jelms-modal__video {
  margin-top: var(--space-2);
}

.jelms-modal--jpc-practice .jelms-modal__video[hidden],
.jelms-modal--jpc-practice .jelms-modal__video:empty {
  display: none;
  margin: 0;
}

.jelms-modal--jpc-practice .jelms-modal__video--empty {
  margin-top: var(--space-2);
}

.jelms-modal--jpc-practice .jelms-modal__iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--color-video-fallback);
}

.jelms-modal--jpc-practice .jelms-modal__iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.jelms-modal--jpc-practice .jelms-modal__empty {
  margin: 0;
  padding: var(--space-3) 0;
  text-align: start;
  color: var(--color-text-secondary);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  background: transparent;
}

.jelms-curr-key.is-jpc-nudge,
.journey-jpc__key.is-jpc-nudge {
  outline: var(--border-strong) solid var(--color-brand-teal-interactive);
  outline-offset: var(--focus-offset);
  animation: jelms-jpc-nudge-pulse calc(var(--motion-duration-slow) * 5) var(--motion-easing-standard) 2;
}

@keyframes jelms-jpc-nudge-pulse {
  0%,
  100% {
    outline-color: var(--color-brand-teal-interactive);
  }
  50% {
    outline-color: var(--color-overlay-teal-45);
  }
}

.jelms-modal--jpc-order .jelms-modal__dialog {
  width: min(560px, calc(100vw - var(--space-12)));
}

.jelms-modal--jpc-order .jelms-modal__copy {
  margin: 0;
  font-size: var(--type-body-small-font-size);
  line-height: 1.55;
  color: var(--color-text-primary);
}

.jelms-modal--streak-explainer .jelms-modal__dialog {
  width: min(520px, calc(100vw - var(--space-12)));
}

.jelms-streak-explainer__body {
  display: grid;
  gap: var(--space-3);
}

.jelms-streak-explainer__body p {
  margin: 0;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  color: var(--color-text-secondary);
}

@media (max-width: 900px) {
  .jelms-curr-band-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jelms-curr-key-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Level badges (shared) ────────────────────────────────── */

.jelms-level {
  display: inline-flex;
  align-items: center;
  font-size: var(--type-meta-font-size);
  font-weight: var(--font-weight-semibold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.jelms-level--beginner {
  color: var(--color-brand-teal-interactive);
  background: var(--color-overlay-teal-14);
}

.jelms-level--intermediate {
  color: var(--color-semantic-warning);
  background: var(--color-overlay-warning-14);
}

.jelms-level--professional {
  color: var(--color-category-coaching);
  background: var(--color-overlay-coaching-14);
}

/* ── Library search page (JA-LMS-53) ──────────────────────── */

.jelms-search-page {
  --jelms-search-bar-max: 640px;
}

.jelms-search-toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.jelms-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 var(--jelms-search-bar-max);
  max-width: var(--jelms-search-bar-max);
  min-width: min(100%, 220px);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
}

.jelms-search-bar__ico {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--size-icon-medium);
}

.jelms-search-bar__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--type-body-font-size);
}

.jelms-search-bar__submit {
  flex-shrink: 0;
  border-radius: var(--radius-pill);
}

.jelms-search-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
}

.jelms-search-filters .jelms-form select {
  width: auto;
  min-width: 118px;
  max-width: 180px;
}

.jelms-search-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-teal-interactive);
  text-decoration: none;
}

.jelms-search-back:hover {
  text-decoration: underline;
}

.jelms-search-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.jelms-search-results-head__count {
  margin: 0;
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-muted);
}

.jelms-search-view-toggle {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface-selected);
}

.jelms-search-view-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.jelms-search-view-btn.is-active {
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-popover);
}

.jelms-search-results[data-view="cards"] .jelms-search-results__list {
  display: none;
}

.jelms-search-results[data-view="list"] .jelms-search-results__cards {
  display: none;
}

.jelms-search-results__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.jelms-search-results__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.jelms-search-result {
  min-width: 0;
  height: 100%;
}

.jelms-search-result__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.jelms-search-result__card.jelms-card--interactive.jelms-interactive:hover {
  border-color: var(--color-brand-teal-interactive);
}

.jelms-search-result--locked .jelms-search-result__card {
  opacity: 0.92;
}

.jelms-search-result__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-brand-teal-interactive);
  color: var(--color-text-inverse);
  min-height: calc(var(--space-12) + var(--space-1));
}

.jelms-search-result__band {
  flex: 1;
  min-width: 0;
  font-size: var(--type-meta-font-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.jelms-search-fav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.jelms-search-result__head .jelms-search-fav:hover,
.jelms-search-result__head .jelms-search-fav:focus-visible {
  background: var(--color-overlay-on-brand-14);
  outline: none;
}

.jelms-search-fav .ic {
  font-size: var(--size-icon-medium);
}

.jelms-search-fav--error {
  outline: 2px solid var(--color-semantic-danger);
  outline-offset: 1px;
}

.jelms-search-result__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  min-height: 0;
}

.jelms-search-result__body:hover {
  text-decoration: none;
}

.jelms-search-result__title {
  margin: 0;
  font-size: var(--type-body-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

a.jelms-search-result__body:hover .jelms-search-result__title,
a.jelms-search-result__body:focus-visible .jelms-search-result__title {
  text-decoration: none;
}

.jelms-search-result__desc {
  margin: 0;
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-secondary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jelms-search-result__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
}

.jelms-search-result__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--type-meta-font-size);
  color: var(--color-text-muted);
}

.jelms-search-result__meta-item--complete {
  color: var(--color-semantic-success);
  font-weight: var(--font-weight-semibold);
}

.jelms-search-result__upgrade {
  margin-left: auto;
  font-size: var(--type-meta-font-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-teal-interactive);
  text-decoration: none;
}

.jelms-search-result__upgrade:hover {
  text-decoration: underline;
}

.jelms-search-result-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
}

.jelms-search-result-row--locked {
  opacity: 0.88;
}

.jelms-search-result-row__complete {
  color: var(--color-semantic-success);
  font-size: var(--size-icon-medium);
}

.jelms-search-result-row__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

a.jelms-search-result-row__link:hover,
a.jelms-search-result-row__link:focus-visible {
  text-decoration: none;
}

.jelms-search-result-row:has(a.jelms-search-result-row__link:hover),
.jelms-search-result-row:has(a.jelms-search-result-row__link:focus-visible) {
  background: var(--color-surface-sunken);
}

a.jelms-search-result-row__link:hover .jelms-search-result-row__title,
a.jelms-search-result-row__link:focus-visible .jelms-search-result-row__title {
  text-decoration: none;
}

.jelms-search-result-row__title {
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

.jelms-search-result-row__collection {
  font-size: var(--type-meta-font-size);
  color: var(--color-text-muted);
}

.jelms-search-result-row__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.jelms-search-result-row .jelms-search-fav {
  color: var(--color-text-muted);
}

.jelms-search-result-row .jelms-search-fav.is-active {
  color: var(--color-brand-teal-interactive);
}

.jelms-search-idle {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.jelms-search-idle-panel {
  padding: var(--space-5);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--color-brand-teal-interactive) 4%, var(--color-surface-card));
}

.jelms-search-idle-panel__title {
  margin: 0 0 var(--space-4);
  font-size: var(--type-body-font-size);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.jelms-search-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.jelms-search-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.jelms-search-pill:hover {
  border-color: var(--color-brand-teal-interactive);
  color: var(--color-brand-teal-interactive);
  text-decoration: none;
}

.jelms-search-start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.jelms-search-start-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

.jelms-search-result.jelms-search-start-card:not(.jelms-search-result--locked) > .jelms-card.jelms-search-start-card {
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    border-color var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-search-result.jelms-search-start-card:not(.jelms-search-result--locked) > .jelms-card.jelms-search-start-card:has(a.jelms-search-start-card__body:hover),
.jelms-search-result.jelms-search-start-card:not(.jelms-search-result--locked) > .jelms-card.jelms-search-start-card:has(a.jelms-search-start-card__body:focus-visible) {
  background: var(--color-surface-sunken);
  border-color: var(--color-border-strong);
}

a.jelms-search-start-card__body:hover,
a.jelms-search-start-card__body:focus-visible {
  text-decoration: none;
}

a.jelms-search-start-card__body:hover .jelms-search-start-card__title,
a.jelms-search-start-card__body:focus-visible .jelms-search-start-card__title,
a.jelms-search-start-card__body:hover .jelms-search-start-card__desc,
a.jelms-search-start-card__body:focus-visible .jelms-search-start-card__desc,
a.jelms-search-start-card__body:hover .jelms-search-start-card__goal,
a.jelms-search-start-card__body:focus-visible .jelms-search-start-card__goal {
  text-decoration: none;
}

.jelms-search-start-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
  padding: var(--space-4);
  min-height: 100%;
  text-decoration: none;
  color: inherit;
}

.jelms-search-start-card__goal {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.jelms-search-start-card__title {
  margin: 0;
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
}

.jelms-search-start-card__desc {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-secondary);
  line-height: 1.45;
}

.jelms-search-start-card__upgrade {
  margin-top: auto;
  font-size: var(--type-meta-font-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-teal-interactive);
  text-decoration: none;
}

.jelms-search-collection-browse {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-text-primary) 4.5%, var(--color-surface-card));
}

.jelms-search-collection-browse__title {
  margin: 0 0 var(--space-1);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
}

.jelms-search-collection-browse__lede {
  margin: 0 0 var(--space-3);
  font-size: var(--type-meta-font-size);
  color: var(--color-text-muted);
}

.jelms-search-collection-browse__form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.jelms-search-collection-browse__select {
  flex: 1 1 220px;
  min-width: min(100%, 200px);
}

.jelms-search-section-title {
  margin: 0 0 var(--space-2);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-bold);
}

.jelms-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-5);
  text-align: center;
}

.jelms-search-empty__title {
  margin: 0;
  font-size: var(--type-card-title-font-size);
  font-weight: var(--font-weight-semibold);
}

.jelms-search-empty__lede {
  margin: 0;
  max-width: 42ch;
  color: var(--color-text-secondary);
}

.jelms-search-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.jelms-search-empty__pills {
  justify-content: center;
  margin-bottom: 0;
}

.jelms-search-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.jelms-search-pagination__info {
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-muted);
}

.jelms-search-mobile-head {
  display: none;
}

.jelms-search-filter-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.jelms-search-filter-sheet[hidden] {
  display: none !important;
}

.jelms-search-filter-sheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-overlay-video-55);
}

.jelms-search-filter-sheet__panel {
  position: relative;
  z-index: var(--z-modal);
  width: 100%;
  max-height: min(80vh, 520px);
  padding: var(--space-5);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-popover);
  overflow: auto;
}

.jelms-search-filter-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.jelms-search-filter-sheet__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.jelms-search-filter-sheet__fields select {
  width: 100%;
}

.jelms-search-filter-open {
  display: none;
}

@media (max-width: 767px) {
  .jelms-search-mobile-head {
    display: grid;
    grid-template-columns: var(--size-control-medium) minmax(0, 1fr) var(--size-control-medium);
    align-items: center;
    gap: var(--space-2);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-canvas);
    border-bottom: var(--border-hairline) solid var(--color-border-hairline);
  }

  .jelms-search-page .jelms-search-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .jelms-search-page .jelms-search-bar {
    max-width: none;
    flex-basis: auto;
  }

  .jelms-search-filters {
    display: none;
  }

  .jelms-search-filter-open {
    display: inline-flex;
  }

  .jelms-search-results__cards {
    grid-template-columns: 1fr;
  }

  .jelms-search-result-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .jelms-search-result-row__complete {
    display: none;
  }
}

/* ── Lesson Library v1 (JA-LMS-152) ───────────────────────── */

.jelms-library-page__body {
  max-width: 1400px;
  margin-inline: auto;
  padding-top: var(--space-7);
}

.jelms-library-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.jelms-library-head h1 {
  margin: 0;
  font-size: var(--type-page-title-font-size, 2.25rem);
  line-height: 1.2;
}

.jelms-library-head__lede {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
}

.jelms-library-search-panel {
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.jelms-library-search-panel__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.jelms-library-search-box {
  display: grid;
  grid-template-columns: var(--size-icon-medium) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding-inline: var(--space-4);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-control);
}

.jelms-library-search-box__ico {
  color: var(--color-text-muted);
}

.jelms-library-search-box__input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--type-body-font-size);
  appearance: none;
}

.jelms-library-search-box__input::-webkit-search-cancel-button,
.jelms-library-search-box__input::-webkit-search-decoration {
  appearance: none;
  -webkit-appearance: none;
  display: none;
}

.jelms-library-search-box__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.jelms-library-search-box__clear:hover,
.jelms-library-search-box__clear:focus-visible {
  color: var(--color-text-primary);
  background: var(--color-overlay-border-25);
}

.jelms-library-search-box__clear[hidden] {
  display: none;
}

.jelms-library-search-box__clear .ic {
  width: var(--size-icon-small);
  height: var(--size-icon-small);
}

.jelms-library-search-box__submit {
  min-height: var(--size-control-large);
  padding-inline: var(--space-6);
  border: 0;
  border-radius: 6px;
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
  font: inherit;
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.jelms-library-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--space-3);
}

.jelms-library-filter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--size-control-large);
  padding: 0 var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.jelms-library-filter__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.jelms-library-filter__label {
  color: var(--color-text-primary);
}

.jelms-library-filter__value {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
}

.jelms-library-filter__chev {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
}

.jelms-library-filter--more {
  color: var(--color-text-link);
  border-color: var(--color-border-interactive, var(--color-brand-teal-interactive));
  background: var(--color-surface-card);
  cursor: pointer;
  font: inherit;
}

.jelms-library-filters-more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) 0 0;
}

.jelms-library-filters-more__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-secondary);
}

.jelms-library-applied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-hairline) solid var(--color-border-hairline);
  font-size: var(--type-body-small-font-size);
}

.jelms-library-applied__label {
  color: var(--color-text-primary);
}

.jelms-library-applied__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-control-small);
  padding: 0 var(--space-2);
  border: var(--border-hairline) solid var(--color-border-interactive, var(--color-brand-teal-interactive));
  border-radius: var(--radius-pill);
  background: var(--color-surface-selected);
  color: var(--color-text-link);
  font-size: var(--type-body-small-font-size);
  text-decoration: none;
}

.jelms-library-applied__clear {
  margin-left: auto;
}

.jelms-library-idle {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.jelms-library-personal__header,
.jelms-library-starters__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.jelms-library-personal__eyebrow,
.jelms-library-topics .jelms-eyebrow,
.jelms-library-starters .jelms-eyebrow {
  color: var(--color-category-collection, var(--color-brand-teal-interactive));
}

.jelms-library-personal__history {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-link);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.jelms-library-personal__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
}

.jelms-library-personal__grid--quick {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jelms-library-personal-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 104px;
  padding: var(--space-4);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
}

.jelms-library-personal-card--quick {
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  text-decoration: none;
  color: inherit;
}

.jelms a.jelms-library-personal-card--quick:hover,
.jelms a.jelms-library-personal-card--quick:focus-visible {
  border-color: var(--color-border-interactive, var(--color-brand-teal-interactive));
  background: var(--color-surface-selected);
  text-decoration: none;
  color: inherit;
}

.jelms-library-personal-card--locked {
  background: var(--color-surface-card);
}

.jelms-library-personal-card__quiet-link {
  display: inline-flex;
  margin-top: var(--space-2);
  color: var(--color-text-link);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.jelms-library-personal-card__quiet-link:hover,
.jelms-library-personal-card__quiet-link:focus-visible {
  text-decoration: underline;
}

.jelms-library-personal-card--favorites {
  grid-template-columns: 56px minmax(0, 1fr);
}

.jelms a.jelms-library-personal-card.jelms-library-personal-card--favorites {
  text-decoration: none;
  color: inherit;
}

.jelms a.jelms-library-personal-card.jelms-library-personal-card--favorites:hover,
.jelms a.jelms-library-personal-card.jelms-library-personal-card--favorites:focus-visible {
  border-color: var(--color-border-interactive, var(--color-brand-teal-interactive));
  background: var(--color-surface-selected);
  text-decoration: none;
  color: inherit;
}

.jelms-library-personal-card__thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--color-surface-selected);
  color: var(--color-text-link);
  display: grid;
  place-items: center;
}

.jelms-library-personal-card__thumb--heart {
  color: var(--color-category-collection, var(--color-brand-teal-interactive));
}

.jelms-library-personal-card__copy strong,
.jelms-library-personal-card__copy small {
  display: block;
}

.jelms-library-personal-card__copy small {
  color: var(--color-text-secondary);
}

.jelms-library-personal-card__action {
  min-height: var(--size-control-large);
  padding: 0 var(--space-4);
  border: var(--border-hairline) solid var(--color-border-interactive, var(--color-brand-teal-interactive));
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  color: var(--color-text-link);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.jelms-library-topics {
  position: relative;
  padding: var(--space-6);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  overflow: hidden;
}

.jelms-library-topics::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--color-category-collection, var(--color-brand-teal-interactive));
  border-radius: 11px 0 0 11px;
}

.jelms-library-topics__lede {
  margin: var(--space-1) 0 var(--space-4);
  color: var(--color-text-secondary);
}

.jelms-library-topics__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.jelms-library-topic {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control-large);
  padding: 0 var(--space-4);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.jelms-library-starters__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.jelms-starter-blueprints {
  margin-top: var(--space-8);
}

.jelms-starter-blueprints .jelms-library-result-card {
  position: relative;
}

.jelms-starter-blueprints .jelms-jpc-ring--card {
  --size-jpc-progress-ring: var(--size-control-medium);
  --size-jpc-ring-stroke: var(--size-badge-ring-width);
  --type-jpc-ring-count-font-size: var(--type-meta-font-size);

  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
}

.jelms-starter-blueprints .jelms-jpc-ring--card .jelms-t-meta {
  display: none;
}

.jelms-library-starter-card {
  min-height: 220px;
  padding: var(--space-5);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
}

.jelms-library-starter-card__mark {
  width: var(--size-control-large);
  height: var(--size-control-large);
  border-radius: 10px;
  background: var(--color-surface-selected);
  color: var(--color-category-collection, var(--color-brand-teal-interactive));
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
}

.jelms-library-starter-card__goal {
  display: block;
  margin-bottom: var(--space-1);
}

.jelms-library-starter-card h3 {
  margin: var(--space-1) 0;
  font-size: var(--type-card-title-font-size);
}

.jelms-library-starter-card p {
  margin: 0;
  color: var(--color-text-secondary);
}

.jelms-library-starter-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--color-text-link);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.jelms-library-collections {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-library-collections__label {
  flex: none;
  font-size: var(--type-body-small-font-size);
}

.jelms-library-collections__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.jelms-library-collection-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface-canvas);
  color: var(--color-text-primary);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.jelms-library-results-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-4);
  margin: var(--space-7) 0 var(--space-4);
}

.jelms-library-results-head p {
  margin: 0;
  color: var(--color-text-secondary);
}

.jelms-library-view-toggle {
  display: inline-flex;
  gap: var(--space-1);
  min-height: var(--size-control-large);
  padding: 3px;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
}

.jelms-library-view-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--size-control-large) - 6px);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--type-body-small-font-size);
  cursor: pointer;
}

.jelms-library-view-btn.is-active {
  background: var(--color-surface-card);
  color: var(--color-text-link);
  border: var(--border-hairline) solid var(--color-border-interactive, var(--color-brand-teal-interactive));
}

.jelms-library-results[data-view="cards"] .jelms-library-results__list,
.jelms-library-results[data-view="list"] .jelms-library-results__cards {
  display: none;
}

.jelms-library-results__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.jelms-library-results__list {
  display: flex;
  flex-direction: column;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.jelms-library-result-card {
  position: relative;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  overflow: hidden;
}

.jelms-library-result-card:hover {
  border-color: var(--color-border-interactive, var(--color-brand-teal-interactive));
}

.jelms-library-result-card:has(a.jelms-library-result-card__title:focus-visible) {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
}

.jelms-library-result-card__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background-color: var(--color-surface-sunken);
  overflow: hidden;
  color: var(--color-category-collection, var(--color-brand-teal-interactive));
}

.jelms-library-result-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jelms-library-result-card__thumb .ic {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  color: var(--color-header-text);
  font-size: 22px;
}

.jelms-library-result-card:hover .jelms-library-result-card__thumb .ic {
  background: rgb(0 0 0 / 0.7);
}

.jelms-library-result-card__thumb--has-poster .ic {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.45));
}

.jelms-library-result-card__duration {
  position: absolute;
  z-index: 1;
  right: var(--space-2);
  bottom: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
  font-size: var(--type-body-small-font-size);
}

.jelms-library-result-card__body {
  padding: var(--space-4);
}

.jelms-library-result-card__top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--space-2);
}

.jelms-library-result-card__top .jelms-search-fav {
  margin-left: auto;
}

/* Collection cards: progress ring sits beside the favorite button in the top row. */
.jelms-library-result-card__top-end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.jelms-library-result-card__top-end .jelms-search-fav {
  margin-left: 0;
}

.jelms-library-result-card__topic {
  color: var(--color-category-collection, var(--color-brand-teal-interactive));
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-bold);
}

.jelms-library-result-card__title {
  display: block;
  margin: var(--space-1) 0;
  font-size: var(--type-card-title-font-size);
  line-height: 1.35;
  font-weight: var(--font-weight-semibold);
  color: inherit;
  text-decoration: none;
}

a.jelms-library-result-card__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

a.jelms-library-result-card__title:hover,
a.jelms-library-result-card__title:focus-visible {
  color: var(--color-text-link);
  text-decoration: none;
  background: transparent;
}

a.jelms-library-result-card__title:focus-visible {
  outline: none;
}

.jelms-library-result-card .jelms-search-fav {
  position: relative;
  z-index: 2;
}

.jelms-library-result-card__meta {
  margin: 0;
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-secondary);
}

.jelms-library-result-card__collection {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-link);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
}

.jelms-library-result-card__status .jelms-library-result-card__completed {
  margin: 0;
}

.jelms-library-result-card__completed {
  margin: var(--space-3) 0 0;
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

a.jelms-library-result-card--collection {
  text-decoration: none;
  color: inherit;
}

a.jelms-library-result-card--collection:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
}


.jelms-library-result-list {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1.4fr) 160px minmax(180px, 1fr) 100px 44px;
  gap: var(--space-4);
  align-items: center;
  min-height: 88px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-card);
  border-top: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-library-result-list:has(a.jelms-library-result-list__title:focus-visible) {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
}

.jelms-library-result-list:first-child {
  border-top: 0;
}

.jelms-library-result-list__play {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  background: var(--color-surface-selected);
  color: var(--color-category-collection, var(--color-brand-teal-interactive));
  display: grid;
  place-items: center;
}

.jelms-library-result-list__title {
  display: block;
  margin: 0;
  font-size: var(--type-body-font-size);
  font-weight: var(--font-weight-semibold);
  color: inherit;
  text-decoration: none;
}

a.jelms-library-result-list__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

a.jelms-library-result-list__title:hover,
a.jelms-library-result-list__title:focus-visible {
  color: var(--color-text-link);
  text-decoration: none;
  background: transparent;
}

a.jelms-library-result-list__title:focus-visible {
  outline: none;
}

.jelms-library-result-list__aside {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.jelms-library-result-list__aside .jelms-search-fav {
  margin-left: auto;
}

.jelms-library-result-list__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-secondary);
}

.jelms-library-result-list__topic,
.jelms-library-result-list__collection {
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-secondary);
}

.jelms-library-result-list__collection {
  color: var(--color-text-link);
  font-weight: var(--font-weight-semibold);
}

.jelms-library-result-list__status {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.jelms-library-result-list__completed {
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.jelms-library-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.jelms-library-pagination__btn,
.jelms-library-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-control-large);
  min-height: var(--size-control-large);
  padding: 0 var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: var(--type-body-small-font-size);
  text-decoration: none;
}

.jelms-library-pagination__btn.is-disabled {
  opacity: 0.5;
}

.jelms-library-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

a.jelms-library-pagination__page:hover,
a.jelms-library-pagination__page:focus-visible {
  border-color: var(--color-border-interactive, var(--color-brand-teal-interactive));
  background: var(--color-surface-selected);
  text-decoration: none;
}

li.jelms-library-pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-control-large);
  min-height: var(--size-control-large);
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
}

.jelms-library-pagination__current {
  min-width: var(--size-control-large);
  min-height: var(--size-control-large);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border-hairline) solid var(--color-border-interactive, var(--color-brand-teal-interactive));
  border-radius: var(--radius-control);
  background: var(--color-surface-selected);
  color: var(--color-text-link);
  font-weight: var(--font-weight-semibold);
}

.jelms-library-empty {
  min-height: 420px;
  padding: var(--space-12) var(--space-6);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  text-align: center;
}

.jelms-library-empty__icon {
  width: 64px;
  height: 64px;
  margin-inline: auto;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  display: grid;
  place-items: center;
}

.jelms-library-empty__lede {
  max-width: 540px;
  margin: var(--space-2) auto 0;
  color: var(--color-text-secondary);
}

.jelms-library-empty__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.jelms-library-empty__suggest {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-hairline) solid var(--color-border-hairline);
}

@media (max-width: 1023px) {
  .jelms-library-page__body {
    padding-inline: var(--space-6);
  }

  .jelms-library-results__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jelms-library-starters__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jelms-library-starters__grid .jelms-library-starter-card:last-child {
    grid-column: 1 / -1;
  }

  .jelms-library-personal__grid,
  .jelms-library-personal__grid--quick {
    grid-template-columns: minmax(0, 1fr);
  }

  .jelms-library-result-list {
    grid-template-columns: 48px minmax(0, 1fr) 140px 44px;
  }

  .jelms-library-result-list__topic,
  .jelms-library-result-list__collection {
    display: none;
  }
}

@media (max-width: 767px) {
  .jelms-library-page__body {
    padding-inline: var(--space-4);
    padding-top: var(--space-5);
  }

  .jelms-library-head h1 {
    font-size: 1.875rem;
  }

  .jelms-library-search-panel {
    padding: var(--space-3);
  }

  .jelms-library-search-box {
    min-height: 52px;
    padding-inline: var(--space-2);
    gap: var(--space-2);
  }

  .jelms-library-search-box__clear {
    min-width: 44px;
    min-height: 44px;
  }

  .jelms-library-search-box__submit {
    min-height: 40px;
    padding-inline: var(--space-3);
  }

  .jelms-library-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jelms-library-filter--more {
    grid-column: 1 / -1;
  }

  .jelms-library-applied__clear {
    margin-left: 0;
  }

  .jelms-library-topics__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jelms-library-starters__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .jelms-library-starters__grid .jelms-library-starter-card:last-child {
    grid-column: auto;
  }

  .jelms-library-collections {
    display: block;
  }

  .jelms-library-collections__pills {
    margin-top: var(--space-3);
  }

  .jelms-library-collection-pill {
    width: 100%;
  }

  .jelms-library-view-toggle {
    display: none;
  }

  .jelms-library-results__cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .jelms-library-personal-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .jelms-library-personal-card__action {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  .jelms-library-result-list {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: var(--space-2);
  }

  .jelms-library-result-list__aside {
    grid-column: 3;
    grid-row: 1;
  }

  .jelms-library-empty {
    padding: var(--space-10) var(--space-5);
  }

  .jelms-library-empty__actions,
  .jelms-library-empty__suggest {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Focused Practice Area page ───────────────────────────── */

.jelms-focus-area-page .jelms-focus-area-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.jelms-focus-area-head__copy {
  min-width: 0;
}

.jelms-focus-area-head__lede {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  max-width: 42rem;
}

.jelms-focus-area-head__actions {
  flex: none;
}

.jelms-focus-area-review-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.jelms-focus-area-review-banner__copy {
  margin: 0;
  flex: 1 1 16rem;
}

.jelms-focus-area-review-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.jelms-focus-area-review-banner__error {
  flex: 1 1 100%;
  margin: 0;
  color: var(--color-semantic-danger);
}

.jelms-focus-area-level {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  margin-bottom: var(--space-4);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface-card);
}

.jelms-focus-area-level__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-control-medium);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--type-label-font-size);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.jelms-focus-area-level__btn:hover {
  color: var(--color-text-primary);
}

.jelms-focus-area-level__btn.is-active {
  background: var(--color-brand-teal-interactive);
  color: var(--color-text-inverse);
}

.jelms-focus-area-progress {
  margin-bottom: var(--space-5);
}

.jelms-focus-area-progress__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.jelms-focus-area-progress__tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.jelms-focus-area-complete {
  margin-bottom: var(--space-5);
}

.jelms-focus-area-complete__card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.jelms-focus-area-complete__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.jelms-focus-area-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.jelms-focus-area-step__head {
  display: grid;
  grid-template-columns: var(--size-control-large) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  margin-bottom: var(--space-4);
}

.jelms-focus-area-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-large);
  height: var(--size-control-large);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-bold);
}

.jelms-focus-area-step.is-current .jelms-focus-area-step__num,
.jelms-focus-area-step.is-review .jelms-focus-area-step__num {
  background: color-mix(in srgb, var(--color-category-practice-focus) 16%, var(--color-surface-sunken));
  color: var(--color-category-practice-focus);
}

.jelms-focus-area-step.is-current {
  box-shadow: var(--shadow-popover);
  border-color: color-mix(in srgb, var(--color-category-practice-focus) 35%, var(--color-border-hairline));
}

.jelms-focus-area-step__desc {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

.jelms-focus-area-step__pair {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-5);
}

.jelms-focus-area-step__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.jelms-focus-area-step__video {
  overflow: hidden;
  border-radius: var(--radius-control);
  border: var(--border-hairline) solid var(--color-border-hairline);
  background: var(--color-video-fallback);
  aspect-ratio: 16 / 9;
}

.jelms-focus-area-step__video-placeholder {
  margin: 0 0 var(--space-3);
}

.jelms-focus-area-step__pa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.jelms-focus-area-step__error {
  margin: var(--space-2) 0 0;
  color: var(--color-semantic-danger);
}

.jelms-focus-area-step__lesson-title {
  margin: 0 0 var(--space-2);
}

.jelms-focus-area-step__lesson-meta {
  margin: 0 0 var(--space-3);
}

.jelms-focus-area-step__lesson-status.is-done {
  background: color-mix(in srgb, var(--color-category-practice-focus) 12%, var(--color-surface-selected));
  color: var(--color-category-practice-focus);
}

@media (max-width: 767px) {
  .jelms-focus-area-progress__tracks,
  .jelms-focus-area-step__pair {
    grid-template-columns: 1fr;
  }

  .jelms-focus-area-step__head {
    grid-template-columns: var(--size-control-medium) minmax(0, 1fr);
  }

  .jelms-focus-area-step__state {
    grid-column: 1 / -1;
  }
}

/* Version footer — links, legal, quiet build stamp (JA-LMS-57, JA-LMS-503).
   Sits outside .jelms-app; carries .jelms + data-theme for token scoping. */
.jelms-version-footer {
  margin-top: var(--space-12);
  padding-block: var(--space-6);
  border-top: var(--border-hairline) solid var(--color-border-hairline);
  color: var(--color-text-muted);
  text-align: center;
}

.jelms-version-footer__inner {
  display: grid;
  gap: var(--space-3);
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  .jelms-version-footer__inner {
    padding-inline: 0;
  }
}

.jelms-version-footer__nav,
.jelms-version-footer__legal,
.jelms-version-footer__stamp {
  margin: 0;
}

.jelms-version-footer__links {
  margin: 0;
}

.jelms-version-footer__link {
  color: var(--color-text-link);
  text-decoration: none;
}

.jelms-version-footer__link:hover,
.jelms-version-footer__link:focus-visible {
  text-decoration: underline;
}

.jelms-version-footer__stamp {
  color: var(--color-text-muted);
  opacity: 0.72;
}

@media (max-width: 767px) {
  .jelms-version-footer__links {
    max-width: 100%;
    padding-inline: var(--space-1);
  }
}

/* Legacy alias — kept for any remaining jelms-t-build stamp references. */
.jelms-version-footer__text {
  margin: 0;
  color: inherit;
}

/* ── Certificates library + document (JA-LMS-66) ───────────── */

.jelms-certificates-page {
  display: grid;
  gap: var(--space-8);
  max-width: var(--size-page-content-max);
  margin-inline: auto;
  padding-block: var(--space-8) var(--space-16);
}

.jelms-certificates-page__head {
  padding-bottom: var(--space-6);
  border-bottom: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-certificates-page__desc {
  max-width: var(--size-page-content-max);
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
}

.jelms-certificates-head {
  margin-block-end: var(--space-6);
}

.jelms-certificates-head__desc {
  margin-block-start: var(--space-2);
  color: var(--color-text-secondary);
  max-width: 42rem;
}

.jelms-certificates-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.jelms-certificate-row {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
}

.jelms-certificate-row:hover,
.jelms-certificate-row:has(a.jelms-certificate-row__title:focus-visible) {
  border-color: var(--color-border-strong);
  background: var(--color-surface-sunken);
}

.jelms-certificate-row__thumb {
  width: 96px;
  aspect-ratio: 3300 / 2550;
  overflow: hidden;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
}

.jelms-certificate-row__thumb-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jelms-certificate-row__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.jelms-certificate-row__title {
  margin: 0;
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--font-weight-semibold);
}

.jelms-certificate-row__title a {
  color: inherit;
  text-decoration: none;
}

.jelms-certificate-row__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.jelms-certificate-row__title a:hover,
.jelms-certificate-row__title a:focus-visible {
  color: var(--color-text-link);
  text-decoration: none;
  background: transparent;
}

.jelms-certificate-row__title a:focus-visible {
  outline: none;
}

.jelms-certificate-row:has(.jelms-certificate-row__title a:focus-visible) {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
}

.jelms-certificate-row__earned {
  margin: 0;
  color: var(--color-text-muted);
}

.jelms-certificate-row__action {
  position: relative;
  z-index: 0;
  color: var(--color-text-link);
  white-space: nowrap;
}

.jelms-certificate-row__action-arrow {
  margin-inline-start: var(--space-1);
}

.jelms-certificates-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 36rem;
}

.jelms-certificates-empty__lede {
  color: var(--color-text-secondary);
}

.jelms-certificates-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}

.jelms-certificates-toolbar__actions {
  display: flex;
  gap: var(--space-2);
}

.jelms-certificates-toolbar__print {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.jelms-certificates-toolbar__print-hint {
  margin: 0;
  max-width: 16rem;
  color: var(--color-text-muted);
  text-align: right;
}

.jelms-certificate-document {
  margin: 0;
  display: flex;
  justify-content: center;
}

.jelms-certificate-document__plate {
  position: relative;
  width: min(100%, 66rem);
  aspect-ratio: 3300 / 2550;
}

.jelms-certificate-document__plate-image {
  display: block;
  width: 100%;
  height: auto;
}

.jelms-certificate-document__fields {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.jelms-certificate-document__recipient,
.jelms-certificate-document__achievement,
.jelms-certificate-document__date {
  position: absolute;
  left: 8%;
  margin: 0;
  color: var(--color-certificate-plate-navy);
  font-family: var(--font-family-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jelms-certificate-document__recipient {
  top: 60%;
  max-width: 48%;
  transform: translateY(-100%);
  transform-origin: left bottom;
  font-size: var(--type-certificate-recipient-font-size);
  line-height: var(--type-certificate-recipient-line-height);
  font-weight: var(--type-certificate-recipient-font-weight);
  letter-spacing: var(--type-certificate-recipient-letter-spacing);
}

.jelms-certificate-document__achievement {
  top: 66%;
  max-width: 46%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.jelms-certificate-document__achievement-lead {
  font-size: var(--type-certificate-body-font-size);
  line-height: var(--type-certificate-body-line-height);
  font-weight: var(--type-certificate-body-font-weight);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--color-certificate-plate-navy-muted);
}

.jelms-certificate-document__achievement-program {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--type-certificate-program-font-size);
  line-height: var(--type-certificate-program-line-height);
  font-weight: var(--type-certificate-program-font-weight);
  letter-spacing: var(--type-certificate-program-letter-spacing);
}

.jelms-certificate-document__date {
  top: 81%;
  max-width: 28%;
  font-size: var(--type-certificate-body-font-size);
  line-height: var(--type-certificate-body-line-height);
  font-weight: var(--type-certificate-body-font-weight);
}

.jelms[data-theme="dark"] .jelms-certificate-document__recipient,
.jelms[data-theme="dark"] .jelms-certificate-document__achievement-lead,
.jelms[data-theme="dark"] .jelms-certificate-document__achievement-program,
.jelms[data-theme="dark"] .jelms-certificate-document__date {
  color: var(--color-certificate-plate-navy);
}

@media (prefers-color-scheme: dark) {
  .jelms:not([data-theme="light"]) .jelms-certificate-document__recipient,
  .jelms:not([data-theme="light"]) .jelms-certificate-document__achievement-lead,
  .jelms:not([data-theme="light"]) .jelms-certificate-document__achievement-program,
  .jelms:not([data-theme="light"]) .jelms-certificate-document__date {
    color: var(--color-certificate-plate-navy);
  }

  .jelms:not([data-theme="light"]) .jelms-certificate-document__achievement-lead {
    color: var(--color-certificate-plate-navy-muted);
  }
}

@media (max-width: 767px) {
  .jelms-certificate-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .jelms-certificate-row__thumb {
    display: none;
  }

  .jelms-certificate-row__action {
    display: none;
  }

  .jelms-certificates-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .jelms-certificates-toolbar__print {
    align-items: stretch;
  }

  .jelms-certificates-toolbar__print-hint {
    max-width: none;
    text-align: start;
  }
}

/* ── PA hero — focus complete (JA-LMS-68) ─────────────────── */

.jelms-pa-hero--focus-complete {
  min-height: 0;
}

.jelms-pa-hero__focus-complete-head {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-block-end: var(--space-5);
}

.jelms-pa-hero__focus-complete-mark {
  flex: none;
  width: var(--size-control-large);
  height: var(--size-control-large);
  border-radius: var(--radius-pill);
  background: var(--color-semantic-success-surface);
  border: var(--border-hairline) solid var(--color-semantic-success);
  color: var(--color-semantic-success);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jelms-pa-hero__focus-complete-copy {
  min-width: 0;
}

.jelms-pa-hero__focus-complete-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-6);
  align-items: start;
}

.jelms-pa-hero__focus-complete-cert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.jelms-pa-hero__focus-complete-cert-all {
  color: var(--color-text-link);
  white-space: nowrap;
}

.jelms-pa-hero__focus-complete-cert-preview {
  position: relative;
  overflow: hidden;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
  aspect-ratio: 3300 / 2550;
}

.jelms-pa-hero__focus-complete-cert-plate {
  display: block;
  width: 100%;
  height: auto;
}

.jelms-pa-hero__focus-complete-cert-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  pointer-events: none;
}

.jelms-pa-hero__focus-complete-cert-overlay .jelms-pa-hero__focus-complete-print {
  pointer-events: auto;
  width: auto;
  margin: 0;
  background-color: #ffffff;
  border-color: #073f46;
  color: #073f46;
  box-shadow: 0 2px 12px rgba(7, 63, 70, 0.28);
}

.jelms-pa-hero__focus-complete-cert-overlay .jelms-pa-hero__focus-complete-print:hover,
.jelms-pa-hero__focus-complete-cert-overlay .jelms-pa-hero__focus-complete-print:focus-visible,
.jelms-pa-hero__focus-complete-cert-overlay .jelms-pa-hero__focus-complete-print:active {
  background-color: #ffffff;
  border-color: #0b6f68;
  color: #073f46;
  text-decoration: none;
}

.jelms-certificate-document--preview {
  margin: 0;
  width: 100%;
}

.jelms-certificate-document--preview .jelms-certificate-document__plate {
  width: 100%;
}

.jelms-certificate-document--preview .jelms-certificate-document__plate-image {
  display: block;
  width: 100%;
  height: auto;
}

.jelms-pa-hero__focus-complete-print {
  width: 100%;
  margin-block-start: var(--space-3);
}

.jelms-pa-hero__focus-complete-cert-overlay .jelms-pa-hero__focus-complete-print {
  width: auto;
  margin-block-start: 0;
}

.jelms-pa-hero__focus-complete-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.jelms-pa-hero__focus-complete-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.jelms-pa-hero__focus-complete-block-lede {
  margin: 0;
  color: var(--color-text-secondary);
}

.jelms-pa-hero__focus-complete-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-secondary);
}

.jelms-pa-hero__focus-complete-optional {
  margin: 0;
  color: var(--color-text-muted);
}

.jelms-pa-hero__focus-complete-optional a {
  color: var(--color-text-link);
  white-space: nowrap;
}

.jelms-pa-hero__focus-complete-restart-wrap {
  margin: 0;
}

@media (max-width: 767px) {
  .jelms-pa-hero__focus-complete-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  @page {
    size: 11in 8.5in landscape;
    margin: 0;
  }

  .je-lms-certificates .jelms-header,
  .je-lms-certificates .jelms-version-footer,
  .je-lms-certificates .jelms-footer,
  .je-lms-certificates .jelms-certificates-chrome,
  .je-lms-certificates .jelms-certificates-toolbar {
    display: none !important;
  }

  .je-lms-certificates,
  .je-lms-certificates .jelms-app,
  .je-lms-certificates .jelms-page-wrap,
  .je-lms-certificates .jelms-certificates-page {
    display: block !important;
    background: #fff;
    margin: 0;
    padding: 0;
    min-height: 0;
  }

  .jelms-certificate-document {
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .jelms-certificate-document__plate {
    width: 11in;
    height: auto;
    max-width: none;
    aspect-ratio: 3300 / 2550;
  }

  .jelms-certificate-document__plate-image {
    display: block;
    width: 100%;
    height: auto;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .jelms-certificate-document__recipient,
  .jelms-certificate-document__achievement,
  .jelms-certificate-document__date,
  .jelms-certificate-document__achievement-lead,
  .jelms-certificate-document__achievement-program {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* ── Library — practice focus browse (JA-LMS-67) ───────────── */

.jelms-library-focus-head {
  margin-bottom: var(--space-6);
}

.jelms-library-focus-head__lede {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  max-width: min(100%, 40rem);
}

.jelms-library-focus-head__stats {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
}

.jelms-focus-onboarding-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.jelms-focus-onboarding-steps__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-category-practice-focus) 8%, var(--color-surface-card));
  color: var(--color-text-secondary);
  font-size: var(--type-body-small-font-size);
}

.jelms-focus-onboarding-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-small);
  height: var(--size-control-small);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-category-practice-focus) 18%, var(--color-surface-card));
  color: var(--color-text-primary);
  font-size: var(--type-label-font-size);
  font-weight: var(--type-label-font-weight);
}

.jelms-library-focus-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.jelms-library-focus-item {
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-card);
}

.jelms-library-focus-item.is-current {
  border-color: color-mix(in srgb, var(--color-category-practice-focus) 36%, var(--color-border-hairline));
  box-shadow: 0 0 0 1px var(--color-overlay-practice-focus-10);
}

.jelms-library-focus-item.is-locked {
  border-color: var(--color-overlay-border-80);
}

.jelms-library-focus-item__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  cursor: pointer;
  list-style: none;
  background: color-mix(in srgb, var(--color-category-practice-focus) 6%, var(--color-surface-card));
}

.jelms-library-focus-item__summary::-webkit-details-marker {
  display: none;
}

.jelms-library-focus-item__chevron {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-library-focus-item[open] .jelms-library-focus-item__chevron {
  transform: rotate(180deg);
}

.jelms-library-focus-item__summary-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.jelms-library-focus-item__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.jelms-library-focus-item__title {
  margin: 0;
}

.jelms-library-focus-item__desc {
  color: var(--color-text-secondary);
}

.jelms-library-focus-item__progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  align-items: center;
  max-width: min(100%, 40rem);
}

.jelms-library-focus-item__progress-label {
  color: var(--color-text-muted);
}

.jelms-library-focus-item__progress-percent {
  color: var(--color-text-secondary);
}

.jelms-library-focus-item__progress .jelms-progress {
  grid-column: 1 / -1;
}

.jelms-tag--current {
  background: color-mix(in srgb, var(--color-brand-orange) 14%, var(--color-surface-selected));
  color: var(--color-brand-orange);
}

.jelms-library-focus-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: var(--border-hairline) solid var(--color-overlay-border-70);
}

.jelms-library-focus-level {
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  overflow: hidden;
}

.jelms-library-focus-level.is-current-level {
  border-color: color-mix(in srgb, var(--color-brand-orange) 45%, var(--color-border-hairline));
  background: var(--color-surface-selected);
}

.jelms-library-focus-level.is-locked {
  opacity: 0.92;
}

.jelms-library-focus-level__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  cursor: pointer;
  list-style: none;
}

.jelms-library-focus-level__summary::-webkit-details-marker {
  display: none;
}

.jelms-library-focus-level__chevron {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-library-focus-level[open] .jelms-library-focus-level__chevron {
  transform: rotate(180deg);
}

.jelms-library-focus-level__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  min-width: 0;
}

.jelms-library-focus-level__head-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.jelms-library-focus-level__title {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.jelms-library-focus-level__marker {
  margin: 0;
  color: var(--color-brand-orange);
}

.jelms-library-focus-level__marker--pending {
  color: var(--color-text-muted);
}

.jelms-library-focus-level__progress {
  min-width: calc(var(--space-16) * 4);
  flex: 1 1 calc(var(--space-16) * 4);
  max-width: calc(var(--space-16) * 6);
}

.jelms-library-focus-level__progress .jelms-t-meta {
  display: block;
  margin: 0 0 var(--space-1);
  color: var(--color-text-muted);
}

.jelms-library-focus-level__body {
  padding: 0 var(--space-4) var(--space-4);
  border-top: var(--border-hairline) solid var(--color-overlay-border-60);
}

.jelms-library-focus-level__certificate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-category-practice-focus) 8%, var(--color-surface-selected));
}

.jelms-library-focus-level__upgrade {
  margin: var(--space-4) 0 0;
}

.jelms-library-focus-level__upgrade a {
  color: var(--color-text-link);
}

.jelms-library-focus-table-wrap {
  margin-top: var(--space-4);
  overflow-x: auto;
}

.jelms-library-focus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
}

.jelms-library-focus-table thead th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--color-text-muted);
  border-bottom: var(--border-hairline) solid var(--color-border-hairline);
  white-space: nowrap;
}

.jelms-library-focus-table tbody td {
  padding: var(--space-3);
  vertical-align: top;
  border-bottom: var(--border-hairline) solid var(--color-overlay-border-60);
}

.jelms-library-focus-table tbody tr:last-child td {
  border-bottom: 0;
}

.jelms-library-focus-table tbody td:first-child {
  width: var(--size-control-medium);
  color: var(--color-text-muted);
}

.jelms-library-focus-table__link {
  color: var(--color-text-link);
  font-weight: var(--font-weight-semibold);
}

.jelms-library-focus-level.is-locked .jelms-library-focus-table__link {
  color: var(--color-text-secondary);
  pointer-events: none;
  text-decoration: none;
  cursor: default;
}

.jelms-library-focus-table__muted {
  color: var(--color-text-secondary);
}

.jelms-tag--status.jelms-tag--complete {
  background: color-mix(in srgb, var(--color-semantic-success) 14%, var(--color-surface-selected));
  color: var(--color-semantic-success);
}

.jelms-tag--status.jelms-tag--in-progress {
  background: color-mix(in srgb, var(--color-brand-orange) 14%, var(--color-surface-selected));
  color: var(--color-brand-orange);
}

.jelms-tag--status.jelms-tag--not-started {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.jelms-library-focus-level__actions {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-hairline) solid var(--color-overlay-border-60);
}

#je-lms-library-focus-dialog {
  width: min(480px, calc(100vw - var(--space-12)));
  max-width: none;
  margin: auto;
  border: var(--border-hairline) solid var(--color-border-hairline);
  padding: 0;
}

#je-lms-library-focus-dialog::backdrop {
  background: var(--color-overlay-text-primary-40);
}

#je-lms-library-focus-dialog .jelms-btn-row {
  margin-top: var(--space-4);
  justify-content: flex-end;
}

@media (max-width: 479px) {
  .jelms-library-focus-level__head {
    flex-direction: column;
  }

  .jelms-library-focus-level__progress {
    width: 100%;
    max-width: none;
  }

  .jelms-library-focus-table thead {
    display: none;
  }

  .jelms-library-focus-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
    padding: var(--space-3) 0;
    border-bottom: var(--border-hairline) solid var(--color-overlay-border-60);
  }

  .jelms-library-focus-table tbody tr:last-child {
    border-bottom: 0;
  }

  .jelms-library-focus-table tbody td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-2);
    padding: 0;
    border: 0;
  }

  .jelms-library-focus-table tbody td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: var(--type-meta-font-size);
    line-height: var(--type-meta-line-height);
    font-weight: var(--font-weight-semibold);
  }

  .jelms-library-focus-table tbody td:first-child {
    width: auto;
    font-weight: var(--font-weight-semibold);
  }
}

@media print {
  .jelms-library-focus-level__actions,
  #je-lms-library-focus-dialog {
    display: none !important;
  }
}

/* ── Practice Paths library v2 (JA-LMS-80) ─────────────────── */

.jelms-library-focus-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.jelms-library-focus-head__main {
  min-width: 0;
  flex: 1 1 20rem;
}

.jelms-library-focus-head__certs {
  flex: none;
}

.jelms-library-focus-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  min-height: calc(var(--size-control-medium) + var(--space-7));
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.jelms-library-focus-summary__stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.jelms-library-focus-summary__stat-link {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
}

.jelms-library-focus-summary__stat-link:hover,
.jelms-library-focus-summary__stat-link:focus-visible {
  color: var(--color-text-link);
  text-decoration: none;
}

.jelms-library-focus-summary__stat-link:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}

.jelms-library-focus-summary__stat strong {
  font-size: var(--type-section-title-font-size);
  line-height: var(--type-section-title-line-height);
  color: var(--color-text-primary);
}

.jelms-library-focus-summary__divider {
  width: var(--border-hairline);
  height: var(--space-6);
  background: var(--color-border-hairline);
}

.jelms-library-focus-summary__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 0 auto;
  color: var(--color-text-secondary);
}

.jelms-library-focus-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.jelms-library-focus-path-wrap.is-expanded {
  scroll-margin-top: var(--space-6);
}

.jelms-library-focus-path--expanded {
  overflow: hidden;
}

.jelms-library-focus-path__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 16rem) auto;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-hairline) solid var(--color-overlay-border-70);
}

.jelms-library-focus-path__title-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.jelms-library-focus-path__title-wrap h2 {
  margin: 0;
}

.jelms-library-focus-path__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border: var(--border-hairline) solid var(--color-brand-teal-interactive);
  border-radius: var(--radius-pill);
  background: var(--color-surface-selected);
  color: var(--color-brand-teal-interactive);
  font-size: var(--type-label-font-size);
  font-weight: var(--type-label-font-weight);
}

.jelms-library-focus-path__desc {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
}

.jelms-library-focus-path__header-meta {
  min-width: 0;
}

.jelms-library-focus-path__header-meta .jelms-t-meta {
  display: block;
  margin: 0;
  color: var(--color-text-secondary);
}

.jelms-library-focus-path__switch {
  flex: none;
  color: var(--color-text-link);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.jelms-library-focus-path__switch:hover,
.jelms-library-focus-path__switch:focus-visible {
  text-decoration: underline;
}

.jelms-library-focus-path__collapse {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transform: rotate(180deg);
}

.jelms-library-focus-path__body {
  padding: 0;
  background: var(--color-surface-card);
}

.jelms-library-focus-explore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-5) var(--space-5) var(--space-4);
  border-color: color-mix(in srgb, var(--color-semantic-success) 36%, var(--color-border-hairline));
  background: color-mix(in srgb, var(--color-semantic-success) 8%, var(--color-surface-card));
}

.jelms-library-focus-explore__copy strong {
  display: block;
}

.jelms-library-focus-explore__copy p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
}

.jelms-library-focus-explore__action {
  flex: none;
}

.jelms-focus-chooser {
  padding: var(--space-6) var(--space-7);
  background: color-mix(in srgb, var(--color-surface-sunken) 45%, var(--color-surface-card));
}

.jelms-focus-chooser__heading {
  margin: 0;
}

.jelms-focus-chooser__lede {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
}

.jelms-focus-chooser__tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.jelms-focus-chooser__tracks--single {
  grid-template-columns: minmax(0, 1fr);
}

.jelms-focus-chooser-track {
  min-height: 236px;
  padding: var(--space-5);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: 10px;
  background: var(--color-surface-card);
}

.jelms-focus-chooser-track--your-track {
  border: 2px solid var(--color-text-link);
  padding: calc(var(--space-5) - 1px);
  background: var(--color-surface-selected);
}

.jelms-focus-chooser-track__header {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.jelms-focus-chooser-track__mark {
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
}

.jelms-focus-chooser-track--your-track .jelms-focus-chooser-track__mark {
  border-color: var(--color-text-link);
}

.jelms-focus-chooser-track__mark-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-text-link);
}

.jelms-focus-chooser-track__level,
.jelms-focus-chooser-track__copy strong {
  display: block;
}

.jelms-focus-chooser-track__level {
  font-size: var(--type-card-title-font-size);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--font-weight-bold);
}

.jelms-focus-chooser-track__copy strong {
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--font-weight-semibold);
}

.jelms-focus-chooser-track__pill {
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-pill);
  padding: 3px var(--space-2);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.jelms-focus-chooser-track--your-track .jelms-focus-chooser-track__pill {
  border-color: var(--color-text-link);
  color: var(--color-text-link);
  background: var(--color-surface-card);
}

.jelms-focus-chooser-track__meta {
  margin: var(--space-3) 0 0;
  color: var(--color-text-secondary);
}

.jelms-focus-chooser-track__progress-copy {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-secondary);
}

.jelms-focus-chooser-track .jelms-progress {
  margin-top: var(--space-2);
  height: var(--space-2);
}

.jelms-focus-chooser-track .jelms-progress span {
  background: var(--color-category-practice-focus);
}

.jelms-focus-chooser-track__tier-note {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-control);
}

.jelms-focus-chooser-track__tier-note strong,
.jelms-focus-chooser-track__tier-note small {
  display: block;
  font-size: var(--type-body-small-font-size);
}

.jelms-focus-chooser-track__tier-note small {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-body-small-line-height);
}

.jelms-focus-chooser-track__earned {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--color-text-link);
  font-size: var(--type-body-small-font-size);
}

.jelms-focus-chooser-track__cert-link {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jelms-focus-chooser-track__action-slot > .jelms-focus-chooser-track__action:first-child {
  margin-top: var(--space-4);
}

.jelms-focus-chooser-track__action-slot > .jelms-focus-chooser-track__action + .jelms-focus-chooser-track__action {
  margin-top: var(--space-2);
}

.jelms-focus-chooser-column-action {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-focus-chooser-column-action > .jelms-focus-chooser-track__action:first-child {
  margin-top: 0;
}

.jelms-focus-chooser-track__action {
  width: 100%;
  min-height: 44px;
  margin-top: 0;
  border-radius: var(--radius-control);
  font: inherit;
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
  cursor: pointer;
}

.jelms-focus-chooser-track__action .ic {
  width: 18px;
  height: 18px;
}

.jelms-focus-chooser-track__action--primary {
  border: var(--border-hairline) solid var(--color-action-primary);
  background-color: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--color-action-primary-text);
  text-decoration: none;
}

.jelms-focus-chooser-track__action--outline {
  border: var(--border-hairline) solid var(--color-text-link);
  background-color: var(--color-surface-card);
  border-color: var(--color-text-link);
  color: var(--color-text-link);
  text-decoration: none;
}

.jelms-focus-chooser-track__action--disabled {
  border: var(--border-hairline) solid var(--color-border-hairline);
  background-color: var(--color-surface-sunken);
  border-color: var(--color-border-hairline);
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: not-allowed;
}

.jelms .jelms-focus-chooser-track__action.jelms-focus-chooser-track__action--primary:hover,
.jelms .jelms-focus-chooser-track__action.jelms-focus-chooser-track__action--primary:focus-visible,
.jelms .jelms-focus-chooser-track__action.jelms-focus-chooser-track__action--primary:active {
  background-color: var(--color-action-primary-hover);
  border-color: var(--color-action-primary-hover);
  color: var(--color-action-primary-text);
  text-decoration: none;
}

.jelms .jelms-focus-chooser-track__action.jelms-focus-chooser-track__action--primary:active {
  background-color: var(--color-action-primary-active);
  border-color: var(--color-action-primary-active);
}

.jelms .jelms-focus-chooser-track__action.jelms-focus-chooser-track__action--outline:hover,
.jelms .jelms-focus-chooser-track__action.jelms-focus-chooser-track__action--outline:focus-visible,
.jelms .jelms-focus-chooser-track__action.jelms-focus-chooser-track__action--outline:active {
  background-color: var(--color-surface-selected);
  border-color: var(--color-border-interactive);
  color: var(--color-brand-teal-interactive);
  text-decoration: none;
}

.jelms .jelms-focus-chooser-track__action.jelms-focus-chooser-track__action--outline:active {
  border-color: var(--color-border-strong);
}

.jelms .jelms-focus-chooser-track__action.jelms-focus-chooser-track__action--disabled {
  background-color: var(--color-surface-sunken);
  border-color: var(--color-border-hairline);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.jelms-focus-chooser-track__error {
  margin: var(--space-2) 0 0;
  color: var(--color-semantic-danger);
}

.jelms-focus-chooser-compare {
  padding: var(--space-6) var(--space-7) var(--space-7);
}

.jelms-focus-chooser-compare__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.jelms-focus-chooser-compare__header h3 {
  margin: var(--space-1) 0 0;
}

.jelms-focus-chooser-compare__caption {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-small-font-size);
}

.jelms-focus-chooser-compare__mobile-tabs {
  display: none;
}

.jelms-focus-chooser-compare__lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.jelms-focus-chooser-compare__lists--single {
  grid-template-columns: minmax(0, 1fr);
}

.jelms-focus-chooser-lesson-list {
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface-card);
}

.jelms-focus-chooser-lesson-list__header {
  min-height: 60px;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-sunken);
}

.jelms-focus-chooser-lesson-list__header .jelms-eyebrow,
.jelms-focus-chooser-lesson-list__header strong {
  display: block;
}

.jelms-focus-chooser-lesson-list__header strong {
  font-size: var(--type-card-title-font-size);
  line-height: var(--type-card-title-line-height);
}

.jelms-focus-chooser-lesson-row {
  min-height: 96px;
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: var(--size-control-medium) minmax(0, 1fr);
  gap: var(--space-3);
  border-top: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-focus-chooser-lesson-row > b {
  width: var(--size-control-medium);
  height: var(--size-control-medium);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  display: grid;
  place-items: center;
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-secondary);
}

.jelms-focus-chooser-lesson-row__label,
.jelms-focus-chooser-lesson-row__copy strong,
.jelms-focus-chooser-lesson-row__pa-title,
.jelms-focus-chooser-lesson-row__link {
  display: block;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  white-space: normal;
  word-break: break-word;
}

.jelms-focus-chooser-lesson-row__label {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.jelms-focus-chooser-lesson-row__copy strong {
  margin: 0 0 var(--space-2);
  font-weight: var(--font-weight-semibold);
}

.jelms-focus-chooser-lesson-row__pa-title {
  margin: 0 0 var(--space-2);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
}

.jelms-focus-chooser-lesson-row .jelms-link {
  margin: 0 0 var(--space-2);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
}

.jelms-focus-chooser-lesson-row__link {
  color: var(--color-text-link);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

@media (max-width: 1023px) {
  .jelms-focus-chooser-track {
    min-height: 252px;
  }

  .jelms-focus-chooser-compare__header {
    display: block;
  }

  .jelms-focus-chooser-compare__caption {
    margin-top: var(--space-1);
  }

  .jelms-focus-chooser-lesson-row {
    min-height: 116px;
  }
}

@media (max-width: 767px) {
  .jelms-focus-chooser {
    padding: var(--space-5);
  }

  .jelms-focus-chooser__tracks {
    grid-template-columns: minmax(0, 1fr);
  }

  .jelms-focus-chooser-track {
    min-height: 0;
  }

  .jelms-focus-chooser-compare {
    padding: var(--space-5);
  }

  .jelms-focus-chooser-compare__caption--desktop-only {
    display: none;
  }

  .jelms-focus-chooser-compare__mobile-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1);
    height: 48px;
    padding: var(--space-1);
    margin-bottom: var(--space-3);
    border: var(--border-hairline) solid var(--color-border-hairline);
    border-radius: var(--radius-control);
    background: var(--color-surface-sunken);
  }

  .jelms-focus-chooser-compare__tab {
    min-height: 40px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--type-body-small-font-size);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
  }

  .jelms-focus-chooser-compare__tab.is-active {
    background: var(--color-surface-card);
    color: var(--color-text-link);
    border: var(--border-hairline) solid var(--color-text-link);
  }

  .jelms-focus-chooser-compare__lists {
    display: block;
  }

  .jelms-focus-chooser-lesson-list--mobile-hidden {
    display: none;
  }

  .jelms-focus-chooser-lesson-row {
    min-height: 112px;
  }
}

@media (max-width: 679px) {
  .jelms-focus-chooser__tracks:not(.jelms-focus-chooser__tracks--single) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.jelms-library-focus-path--collapsed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, max-content) auto;
  gap: var(--space-4);
  align-items: center;
  width: 100%;
  min-height: calc(var(--size-control-medium) + var(--space-7));
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--color-border-hairline);
  background: var(--color-surface-card);
  text-align: left;
  cursor: pointer;
}

.jelms-library-focus-path--collapsed-single {
  grid-template-columns: minmax(0, 1fr) max-content auto;
}

.jelms-library-focus-path__collapsed-main {
  min-width: 0;
}

.jelms-library-focus-path__collapsed-main strong {
  display: block;
  font-size: var(--type-card-title-font-size);
}

.jelms-library-focus-path__collapsed-desc {
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jelms-library-focus-path__track-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-left: var(--border-hairline) solid var(--color-border-hairline);
  padding-left: var(--space-4);
  white-space: nowrap;
  flex-shrink: 0;
}

.jelms-library-focus-path__track-state b,
.jelms-library-focus-path__track-state small {
  white-space: nowrap;
}

.jelms-library-focus-path__track-current {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-selected);
  color: var(--color-brand-teal-interactive);
  font-style: normal;
  font-size: var(--type-meta-font-size);
  white-space: nowrap;
}

.jelms-library-focus-path__chevron {
  color: var(--color-text-muted);
}

@media (max-width: 479px) {
  .jelms-library-focus-head {
    display: block;
  }

  .jelms-library-focus-head__certs {
    margin-top: var(--space-3);
  }

  .jelms-library-focus-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .jelms-library-focus-summary__divider {
    display: none;
  }

  .jelms-library-focus-summary__note {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: var(--space-3);
    border-top: var(--border-hairline) solid var(--color-border-hairline);
  }

  .jelms-library-focus-path__header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .jelms-library-focus-path__header-meta {
    grid-column: 1 / -1;
  }

  .jelms-library-focus-path--collapsed,
  .jelms-library-focus-path--collapsed-single {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: calc(var(--space-16) * 2);
    padding: var(--space-3);
  }

  .jelms-library-focus-path__collapsed-main {
    grid-column: 1 / -1;
  }

  .jelms-library-focus-path__chevron {
    grid-column: 2;
    grid-row: 1;
  }

  .jelms-library-focus-path__track-state {
    grid-row: 2;
    justify-content: flex-start;
    border-left: 0;
    border-top: var(--border-hairline) solid var(--color-border-hairline);
    padding: var(--space-2) 0 0;
  }

  .jelms-library-focus-path--collapsed-single .jelms-library-focus-path__track-state {
    grid-column: 1 / -1;
  }

  .jelms-library-focus-explore {
    flex-direction: column;
    align-items: stretch;
  }

  .jelms-library-focus-explore__action {
    width: 100%;
  }
}


/* ── Technique / JPC page v2 (JA-LMS-76) ───────────────────── */

.jelms-jpc-num {
  font-feature-settings: var(--font-feature-numeric);
  font-variant-numeric: tabular-nums;
}

.jelms-jpc-rail {
  position: relative;
}

.jelms-jpc-rail::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--size-jpc-rail);
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.jelms-jpc-rail--teal::before {
  background: var(--color-brand-teal-interactive);
}

.jelms-jpc-rail--indigo::before {
  background: var(--color-category-practice-focus);
}

.jelms-jpc-rail--band-1::before {
  background: var(--color-jpc-band-1);
}

.jelms-jpc-rail--band-2::before {
  background: var(--color-jpc-band-2);
}

.jelms-jpc-rail--band-3::before {
  background: var(--color-jpc-band-3);
}

.jelms-jpc-rail--band-4::before {
  background: var(--color-jpc-band-4);
}

.jelms-jpc-rail--band-5::before {
  background: var(--color-jpc-band-5);
}

.jelms-jpc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.jelms-jpc-head__lede {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
}

.jelms-jpc-why {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-control-medium);
  border: 0;
  background: transparent;
  color: var(--color-brand-teal-interactive);
  font-size: var(--type-label-font-size);
  font-weight: var(--type-label-font-weight);
  cursor: pointer;
  text-decoration: none;
}

.jelms-jpc-journey {
  min-height: var(--size-jpc-journey-height);
  display: grid;
  grid-template-columns: var(--size-jpc-journey-col-start) minmax(0, 1fr) var(--size-jpc-journey-col-end);
  gap: var(--size-jpc-journey-gap);
  align-items: center;
  padding: var(--space-5);
  background: var(--color-surface-card);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
}

.jelms-jpc-journey__copy strong,
.jelms-jpc-journey__copy span,
.jelms-jpc-journey__stat strong,
.jelms-jpc-journey__stat span {
  display: block;
}

.jelms-jpc-journey__headline {
  font-size: var(--type-section-title-font-size);
  font-weight: var(--type-section-title-font-weight);
  line-height: var(--type-section-title-line-height);
}

.jelms-jpc-journey__progress-label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.jelms-jpc-journey__progress-label strong,
.jelms-jpc-journey__progress-label b {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.jelms-jpc-progress {
  height: var(--size-jpc-progress-track);
  border-radius: var(--radius-pill);
  background: var(--color-progress-track);
  overflow: hidden;
}

.jelms-jpc-progress__fill {
  display: block;
  height: 100%;
  background: var(--color-brand-teal-interactive);
  border-radius: inherit;
}

.jelms-jpc-journey__milestone {
  display: block;
  margin-top: var(--space-1);
}

.jelms-jpc-journey__stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  border-inline-start: var(--border-hairline) solid var(--color-border-hairline);
  padding-inline-start: var(--space-6);
}

.jelms-jpc-journey__stat strong {
  font-size: var(--type-card-title-font-size);
}

.jelms-jpc-first-run {
  min-height: var(--size-jpc-first-run-min);
  display: grid;
  grid-template-columns: var(--size-pa-step-strip) minmax(0, 1fr) auto auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-6);
  background: var(--color-surface-card);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
}

.jelms-jpc-first-run__mark {
  width: var(--size-pa-step-strip);
  height: var(--size-pa-step-strip);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: var(--color-surface-selected);
  color: var(--color-brand-teal-interactive);
  border: var(--border-hairline) solid var(--color-brand-teal-interactive);
}

.jelms-jpc-first-run__copy p {
  margin: 0;
  max-width: 40rem;
  color: var(--color-text-secondary);
}

.jelms-jpc-first-run__facts {
  display: flex;
  gap: var(--space-5);
}

.jelms-jpc-first-run__facts span {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--type-body-small-font-size);
}

.jelms-jpc-first-run__facts strong {
  display: block;
  color: var(--color-text-primary);
  font-size: var(--type-section-title-font-size);
}

.jelms-jpc-band-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.jelms-jpc-band-chip {
  min-height: var(--size-jpc-band-chip-min);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  padding: var(--space-2) var(--space-3);
  display: grid;
  grid-template-columns: var(--size-icon-xlarge) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: var(--space-2);
  text-align: start;
  cursor: pointer;
  color: var(--color-text-primary);
  font: inherit;
}

.jelms-jpc-band-chip__num {
  grid-row: 1 / 4;
  width: var(--size-icon-xlarge);
  height: var(--size-icon-xlarge);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  display: grid;
  place-items: center;
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-bold);
}

.jelms-jpc-band-chip__name,
.jelms-jpc-band-chip__range,
.jelms-jpc-band-chip__status {
  display: block;
  font-size: var(--type-body-small-font-size);
  font-style: normal;
}

.jelms-jpc-band-chip__range {
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jelms-jpc-band-chip__status {
  color: var(--color-text-muted);
}

.jelms-jpc-band-chip--band-1,
.jelms-jpc-band__heading--band-1 {
  --jelms-jpc-band-accent: var(--color-jpc-band-1);
  --jelms-jpc-band-on: var(--color-jpc-band-1-on);
  --jelms-jpc-band-on-muted: var(--color-jpc-band-1-on-muted);
}

.jelms-jpc-band-chip--band-2,
.jelms-jpc-band__heading--band-2 {
  --jelms-jpc-band-accent: var(--color-jpc-band-2);
  --jelms-jpc-band-on: var(--color-jpc-band-2-on);
  --jelms-jpc-band-on-muted: var(--color-jpc-band-2-on-muted);
}

.jelms-jpc-band-chip--band-3,
.jelms-jpc-band__heading--band-3 {
  --jelms-jpc-band-accent: var(--color-jpc-band-3);
  --jelms-jpc-band-on: var(--color-jpc-band-3-on);
  --jelms-jpc-band-on-muted: var(--color-jpc-band-3-on-muted);
}

.jelms-jpc-band-chip--band-4,
.jelms-jpc-band__heading--band-4 {
  --jelms-jpc-band-accent: var(--color-jpc-band-4);
  --jelms-jpc-band-on: var(--color-jpc-band-4-on);
  --jelms-jpc-band-on-muted: var(--color-jpc-band-4-on-muted);
}

.jelms-jpc-band-chip--band-5,
.jelms-jpc-band__heading--band-5 {
  --jelms-jpc-band-accent: var(--color-jpc-band-5);
  --jelms-jpc-band-on: var(--color-jpc-band-5-on);
  --jelms-jpc-band-on-muted: var(--color-jpc-band-5-on-muted);
}

.jelms-jpc-band-chip--band-1 .jelms-jpc-band-chip__num {
  box-shadow: inset 0 0 0 var(--border-strong) var(--color-jpc-band-1);
}

.jelms-jpc-band-chip--band-2 .jelms-jpc-band-chip__num {
  box-shadow: inset 0 0 0 var(--border-strong) var(--color-jpc-band-2);
}

.jelms-jpc-band-chip--band-3 .jelms-jpc-band-chip__num {
  box-shadow: inset 0 0 0 var(--border-strong) var(--color-jpc-band-3);
}

.jelms-jpc-band-chip--band-4 .jelms-jpc-band-chip__num {
  box-shadow: inset 0 0 0 var(--border-strong) var(--color-jpc-band-4);
}

.jelms-jpc-band-chip--band-5 .jelms-jpc-band-chip__num {
  box-shadow: inset 0 0 0 var(--border-strong) var(--color-jpc-band-5);
}

.jelms-jpc-band-chip.is-active,
.jelms-jpc-band-chip--current.is-active {
  border-color: var(--jelms-jpc-band-accent);
  background: var(--jelms-jpc-band-accent);
  color: var(--jelms-jpc-band-on);
}

.jelms-jpc-band-chip.is-active .jelms-jpc-band-chip__range,
.jelms-jpc-band-chip.is-active .jelms-jpc-band-chip__status {
  color: var(--jelms-jpc-band-on-muted);
}

.jelms-jpc-band-chip.is-active .jelms-jpc-band-chip__num {
  background: color-mix(in srgb, var(--jelms-jpc-band-on) 14%, transparent);
  color: var(--jelms-jpc-band-on);
  box-shadow: inset 0 0 0 var(--border-strong) var(--jelms-jpc-band-on);
}

.jelms-jpc-bands {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.jelms-jpc-band__card {
  background: var(--color-surface-card);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  padding: 0;
  overflow: hidden;
}

.jelms-jpc-band__body {
  padding: var(--space-5);
}

.jelms-jpc-band__heading {
  width: 100%;
  margin: 0;
  border: 0;
  border-block-end: var(--border-hairline) solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-jpc-band__heading.is-active {
  background: var(--jelms-jpc-band-accent);
  color: var(--jelms-jpc-band-on);
  border-block-end-color: color-mix(in srgb, var(--jelms-jpc-band-on) 22%, transparent);
}

.jelms-jpc-band__heading.is-active:hover {
  background-color: color-mix(in srgb, var(--jelms-jpc-band-accent) 92%, var(--jelms-jpc-band-on));
}

.jelms-jpc-band__heading.is-active:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--jelms-jpc-band-on);
  outline-offset: calc(var(--focus-offset) * -1);
}

.jelms-jpc-band__heading-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
}

.jelms-jpc-band__heading .jelms-eyebrow {
  display: block;
  font-size: var(--type-eyebrow-font-size);
  line-height: var(--type-eyebrow-line-height);
  font-weight: var(--type-eyebrow-font-weight);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  text-transform: uppercase;
  color: inherit;
}

.jelms-jpc-band__heading.is-active .jelms-eyebrow,
.jelms-jpc-band__heading.is-active .jelms-jpc-band__count span {
  color: var(--jelms-jpc-band-on-muted);
}

.jelms-jpc-band__heading .jelms-t-section-title {
  display: block;
  margin: 0;
  color: inherit;
}

.jelms-jpc-band__heading-chevron {
  color: inherit;
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-jpc-band__heading[aria-expanded="true"] .jelms-jpc-band__heading-chevron {
  transform: rotate(180deg);
}

.jelms-jpc-band-row > .ic,
.jelms-jpc-band-row .jelms-jpc-toggle-actions > .ic {
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-jpc-band-row[aria-expanded="true"] > .ic,
.jelms-jpc-band-row[aria-expanded="true"] .jelms-jpc-toggle-actions > .ic {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .jelms-jpc-band__heading-chevron,
  .jelms-jpc-band-row > .ic,
  .jelms-jpc-level-row__chevron {
    transition: none;
  }
}

.jelms-jpc-band__count {
  text-align: end;
  color: inherit;
}

.jelms-jpc-band__count strong,
.jelms-jpc-band__count span {
  display: block;
}

.jelms-jpc-band__count span {
  color: inherit;
}

.jelms-jpc-band-row {
  min-height: var(--size-jpc-collapsed-band-min);
  width: 100%;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: var(--size-control-medium) minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  text-align: start;
  cursor: pointer;
  color: var(--color-text-primary);
  font: inherit;
}

.jelms-jpc-band--first-run .jelms-jpc-band-row {
  grid-template-columns: var(--size-control-medium) minmax(0, var(--size-continue-card-width)) minmax(0, 1fr) auto;
}

.jelms-jpc-band-row__num {
  width: var(--size-control-medium);
  height: var(--size-control-medium);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  display: grid;
  place-items: center;
  font-weight: var(--font-weight-bold);
}

.jelms-jpc-band-row__name,
.jelms-jpc-band-row__range {
  display: block;
  font-size: var(--type-body-small-font-size);
}

.jelms-jpc-band-row__range {
  color: var(--color-text-secondary);
}

.jelms-jpc-band-row__status {
  font-size: var(--type-body-small-font-size);
  font-style: normal;
  color: var(--color-text-secondary);
  text-align: end;
}

.jelms-jpc-current {
  border: var(--border-hairline) solid var(--color-brand-teal-interactive);
  border-radius: var(--radius-control);
  background: var(--color-surface-selected);
  overflow: hidden;
}

.jelms-jpc-current__title {
  min-height: var(--size-jpc-current-header-min);
  padding: var(--space-4) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
}

.jelms-jpc-current--starter-capped .jelms-jpc-current__starter-action {
  margin: var(--space-4) 0 0;
}

.jelms-jpc-current__pill {
  display: inline-flex;
  border: var(--border-hairline) solid var(--color-brand-teal-interactive);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-teal-interactive);
  background: var(--color-surface-card);
}

.jelms-jpc-current__heading {
  font-size: var(--type-card-title-font-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-card-title-font-weight);
  margin: var(--space-1) 0 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.jelms-jpc-current__near {
  margin: var(--space-1) 0 0;
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-teal-interactive);
}

.jelms-jpc-ring {
  width: var(--size-jpc-progress-ring);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}

.jelms-jpc-ring__stack {
  position: relative;
  width: var(--size-jpc-progress-ring);
  height: var(--size-jpc-progress-ring);
  display: grid;
  place-items: center;
}

.jelms-jpc-ring__svg {
  grid-area: 1 / 1;
  width: var(--size-jpc-progress-ring);
  height: var(--size-jpc-progress-ring);
  transform: rotate(-90deg);
}

.jelms-jpc-ring__track,
.jelms-jpc-ring__value {
  fill: none;
  stroke-width: var(--size-jpc-ring-stroke);
}

.jelms-jpc-ring__track {
  stroke: var(--color-progress-track);
}

.jelms-jpc-ring__value {
  stroke: var(--color-brand-teal-interactive);
  stroke-linecap: round;
}

.jelms-jpc-ring__count {
  grid-area: 1 / 1;
  font-size: var(--type-jpc-ring-count-font-size);
  line-height: 1;
  text-align: center;
}

.jelms-jpc-ring__check {
  grid-area: 1 / 1;
  width: var(--size-icon-medium);
  height: var(--size-icon-medium);
  color: var(--color-brand-teal-interactive);
}

.jelms-jpc-ring .jelms-t-meta {
  display: block;
  margin-top: var(--space-1);
  text-align: center;
}

.jelms-jpc-current__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--size-jpc-recommended-panel);
  border-top: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-jpc-keys {
  padding: var(--space-4) var(--space-5);
}

.jelms-jpc-keys__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--type-body-small-font-size);
  margin-bottom: var(--space-2);
}

.jelms-jpc-key-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.jelms-jpc-key {
  position: relative;
  height: var(--size-jpc-key-chip);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  cursor: pointer;
  padding-inline: var(--space-2);
}

.jelms-jpc-key--complete,
.jelms-jpc-key--done {
  border-color: var(--color-semantic-success);
  background: var(--color-semantic-success-surface);
  color: var(--color-semantic-success);
}

.jelms-jpc-key--selected,
.jelms-jpc-key.is-selected {
  border: var(--border-strong) solid var(--color-brand-teal-interactive);
  color: var(--color-brand-teal-interactive);
  background: var(--color-surface-selected);
}

.jelms-jpc-key__badge {
  position: absolute;
  inset-inline-end: var(--space-2);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-regular);
}

.jelms-jpc-key__novideo {
  position: absolute;
  inset-block-end: var(--space-0);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-build-line-height);
  font-style: normal;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.jelms-jpc-key.is-jpc-nudge {
  box-shadow: 0 0 0 var(--border-strong) var(--color-overlay-teal-35);
  animation: jelms-jpc-nudge-pulse var(--motion-duration-slow) var(--motion-easing-standard);
}

.jelms-a11y-only {
  position: absolute;
  width: var(--border-hairline);
  height: var(--border-hairline);
  padding: 0;
  margin: calc(var(--border-hairline) * -1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.jelms-jpc-key-label {
  display: inline;
}

.jelms-jpc-key-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--type-meta-font-size);
  line-height: var(--type-meta-line-height);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  color: var(--color-semantic-danger);
}

.jelms-jpc-key--save-error,
.jelms-curr-key--save-error,
.journey-jpc__key--save-error {
  border-color: var(--color-semantic-danger);
  box-shadow: 0 0 0 var(--border-hairline) color-mix(in srgb, var(--color-semantic-danger) 20%, transparent);
}

.jelms-jpc-recommend {
  border-inline-start: var(--border-hairline) solid var(--color-border-hairline);
  padding: var(--space-5);
  background: var(--color-surface-card);
}

.jelms-jpc-recommend__key {
  font-size: var(--type-section-title-font-size);
  margin: var(--space-1) 0 var(--space-2);
}

.jelms-jpc-recommend__level {
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
  overflow-wrap: anywhere;
}

.jelms-jpc-recommend__practice,
.jelms-jpc-recommend__sheet,
.jelms-jpc-recommend__continue {
  width: 100%;
}

.jelms-jpc-recommend__complete-heading {
  font-size: var(--type-section-title-font-size);
  font-weight: var(--type-section-title-font-weight);
  margin: 0 0 var(--space-2);
}

.jelms-jpc-recommend__complete-copy {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
}

.jelms-jpc-recommend__curriculum-complete {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
}

.jelms-jpc-recommend__continue {
  margin-bottom: var(--space-4);
  min-height: calc(var(--size-control-large) + var(--space-2));
  font-size: var(--type-button-large-font-size);
  line-height: var(--type-button-large-line-height);
  font-weight: var(--type-button-large-font-weight);
  gap: var(--space-3);
}

.jelms-jpc-recommend__continue .ic {
  font-size: var(--size-icon-medium);
}

.jelms-jpc-recommend__feedback-hint {
  margin: 0;
  color: var(--color-text-secondary);
}

.jelms-jpc-recommend__sheet {
  margin-top: var(--space-2);
}

.jelms-jpc-level-list {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.jelms-jpc-level-row {
  min-height: var(--size-jpc-level-row-min);
  width: 100%;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  padding: var(--space-2) var(--space-3);
  display: grid;
  grid-template-columns: var(--size-icon-xlarge) minmax(0, 1fr) var(--size-jpc-level-state) var(--size-icon-medium);
  align-items: center;
  gap: var(--space-3);
  text-align: start;
}

.jelms-jpc-level-row__icon {
  width: var(--size-icon-xlarge);
  height: var(--size-icon-xlarge);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: var(--color-surface-card);
}

.jelms-jpc-level-row--complete .jelms-jpc-level-row__icon {
  background: var(--color-semantic-success-surface);
  color: var(--color-semantic-success);
}

.jelms-jpc-level-row__title {
  display: block;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  font-weight: var(--font-weight-semibold);
  white-space: normal;
  overflow-wrap: anywhere;
}

.jelms-jpc-level-row__state {
  font-size: var(--type-body-small-font-size);
  color: var(--color-text-secondary);
  text-align: end;
  font-weight: var(--font-weight-regular);
}

.jelms-jpc-level-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  min-width: 0;
}

.jelms-jpc-level-row__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  overflow-wrap: anywhere;
}

.jelms-jpc-level-row__mark-icon {
  flex-shrink: 0;
  font-size: var(--size-icon-small);
}

.jelms-jpc-level-row__mark--feedback {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
}

.jelms-jpc-level-row__mark--awaiting {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
}

.jelms-jpc-level-row__mark--action {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  border: var(--border-hairline) solid var(--color-semantic-warning);
  background: var(--color-semantic-warning-surface);
  color: var(--color-semantic-warning);
  font-weight: var(--font-weight-semibold);
}

.jelms-jpc-level-row__mark--invite {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.jelms-jpc-level-row__mark--invite:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-control);
}

.jelms-jpc-level-row--locked,
.jelms-jpc-level-row--upcoming {
  background: var(--color-surface-sunken);
}

.jelms-jpc-level-row--current {
  border: var(--border-hairline) solid var(--color-brand-teal-interactive);
  background: var(--color-surface-selected);
}

.jelms-jpc-level-row--current .jelms-jpc-level-row__icon {
  background: var(--color-surface-card);
  color: var(--color-brand-teal-interactive);
}

.jelms-jpc-level-row__meta--state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  min-width: 0;
}

.jelms-jpc-level-row__state-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  max-width: 100%;
  min-width: 0;
}

.jelms-jpc-level-row__state-wrap .jelms-jpc-level-row__state {
  min-width: 0;
  overflow-wrap: anywhere;
}

.jelms-jpc-level-row__why {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: var(--size-icon-medium);
  height: var(--size-icon-medium);
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-brand-teal-interactive);
  cursor: pointer;
}

.jelms-jpc-level-row__why:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-control);
}

.jelms-jpc-level-row__current-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border: var(--border-hairline) solid var(--color-brand-teal-interactive);
  border-radius: var(--radius-pill);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-teal-interactive);
  background: var(--color-surface-card);
}

.jelms-jpc-level-row--locked {
  color: var(--color-text-disabled);
}

.jelms-jpc-level-row__chevron {
  justify-self: end;
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.jelms-jpc-toggle-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  justify-self: end;
}

.jelms-jpc-toggle-label {
  font-size: var(--type-meta-font-size);
  line-height: var(--type-meta-line-height);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.jelms-jpc-band__heading .jelms-jpc-toggle-label {
  color: inherit;
  opacity: 0.82;
}

.jelms-jpc-band__heading.is-active .jelms-jpc-toggle-label {
  color: var(--jelms-jpc-band-on-muted);
}

.jelms-jpc-band-complete {
  min-height: var(--size-jpc-band-complete-min);
  border: var(--border-hairline) solid var(--color-semantic-success);
  border-radius: var(--radius-control);
  background: var(--color-semantic-success-surface);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: var(--size-pa-step-strip) minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
}

.jelms-jpc-band-complete__mark {
  width: var(--size-pa-step-strip);
  height: var(--size-pa-step-strip);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: var(--color-surface-card);
  color: var(--color-semantic-success);
  border: var(--border-hairline) solid var(--color-semantic-success);
}

.jelms-jpc-band-complete p {
  margin: 0;
}

@media (max-width: 767px) {
  .jelms-jpc-head {
    display: block;
  }

  .jelms-jpc-why {
    margin-top: var(--space-2);
  }

  .jelms-jpc-journey {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .jelms-jpc-journey__stat {
    border-inline-start: 0;
    border-block-start: var(--border-hairline) solid var(--color-border-hairline);
    padding-inline-start: 0;
    padding-block-start: var(--space-3);
  }

  .jelms-jpc-first-run {
    grid-template-columns: var(--size-control-large) minmax(0, 1fr);
    padding: var(--space-5);
  }

  .jelms-jpc-first-run__facts,
  .jelms-jpc-first-run__cta {
    grid-column: 1 / -1;
  }

  .jelms-jpc-first-run__cta {
    width: 100%;
  }

  .jelms-jpc-band-nav {
    display: flex;
    overflow: hidden;
    gap: var(--space-2);
    margin: var(--space-3) 0;
  }

  .jelms-jpc-band-chip {
    min-width: var(--size-jpc-band-chip-mobile);
    width: var(--size-jpc-band-chip-mobile);
    height: var(--size-jpc-band-chip-mobile);
    min-height: var(--size-jpc-band-chip-mobile);
    padding: var(--space-2);
    display: block;
  }

  .jelms-jpc-band-chip__num {
    width: var(--size-icon-xlarge);
    height: var(--size-icon-xlarge);
  }

  .jelms-jpc-band-chip__name,
  .jelms-jpc-band-chip__range,
  .jelms-jpc-band-chip__status {
    display: none;
  }

  .jelms-jpc-band-chip.is-active {
    min-width: var(--size-jpc-band-chip-mobile-active);
    width: var(--size-jpc-band-chip-mobile-active);
    display: grid;
    grid-template-columns: var(--size-icon-xlarge) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .jelms-jpc-band-chip.is-active .jelms-jpc-band-chip__name,
  .jelms-jpc-band-chip.is-active .jelms-jpc-band-chip__status {
    display: block;
    font-size: var(--type-body-small-font-size);
    line-height: var(--type-build-line-height);
  }

  .jelms-jpc-band-chip.is-active .jelms-jpc-band-chip__num {
    grid-row: 1 / 3;
  }

  .jelms-jpc-band__body {
    padding: var(--space-3);
  }

  .jelms-jpc-band__heading {
    padding: var(--space-3);
  }

  .jelms-jpc-current__grid {
    display: block;
  }

  .jelms-jpc-current__title {
    align-items: flex-start;
    padding: var(--space-3);
  }

  .jelms-jpc-recommend {
    border-inline-start: 0;
    border-block-start: var(--border-hairline) solid var(--color-border-hairline);
    padding: var(--space-4);
  }

  .jelms-jpc-keys {
    padding: var(--space-3);
  }

  .jelms-jpc-key-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jelms-jpc-key {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-0);
    height: auto;
    min-height: var(--size-jpc-key-chip-mobile);
    padding: var(--space-1) var(--space-2);
  }

  .jelms-jpc-key:not(:has(.jelms-jpc-key__badge)):not(:has(.jelms-jpc-key__novideo)) {
    flex-direction: row;
  }

  .jelms-jpc-key__label {
    display: block;
    line-height: 1.15;
  }

  .jelms-jpc-key__badge {
    position: static;
    font-size: var(--type-meta-font-size);
    line-height: var(--type-meta-line-height);
    font-weight: var(--font-weight-regular);
  }

  .jelms-jpc-key__novideo {
    position: static;
    font-size: var(--type-meta-font-size);
    line-height: var(--type-meta-line-height);
  }

  .jelms-jpc-level-row:not(.jelms-jpc-level-row__toggle) {
    grid-template-columns: var(--size-icon-xlarge) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
  }

  .jelms-jpc-level-row:not(.jelms-jpc-level-row__toggle) .jelms-jpc-level-row__icon {
    grid-row: 1 / 3;
  }

  .jelms-jpc-level-row:not(.jelms-jpc-level-row__toggle) .jelms-jpc-level-row__copy {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .jelms-jpc-level-row:not(.jelms-jpc-level-row__toggle) .jelms-jpc-level-row__meta,
  .jelms-jpc-level-row:not(.jelms-jpc-level-row__toggle) .jelms-jpc-level-row__meta--state {
    grid-column: 2;
    grid-row: 2;
    align-items: flex-start;
  }

  .jelms-jpc-level-row {
    min-height: var(--size-jpc-level-row-min-mobile);
    gap: var(--space-2);
  }

  .jelms-jpc-level-row__header {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .jelms-jpc-level-row__header .jelms-jpc-level-row__toggle {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: var(--size-icon-xlarge) minmax(0, 1fr) auto;
  }

  .jelms-jpc-level-row__header .jelms-jpc-level-row__meta {
    grid-column: 1;
    grid-row: 2;
    padding: 0 var(--space-3) var(--space-2) calc(var(--size-icon-xlarge) + var(--space-2));
    align-items: flex-start;
  }

  .jelms-jpc-level-row__meta {
    align-items: flex-start;
  }

  .jelms-jpc-level-row__meta--state {
    align-items: flex-start;
  }

  .jelms-jpc-level-row__state {
    text-align: start;
  }

  .jelms-jpc-level-row__chevron {
    grid-column: auto;
    grid-row: auto;
  }

  .jelms-jpc-toggle-label {
    display: none;
  }

  .jelms-jpc-band-chip.is-active {
    height: auto;
    min-height: var(--size-jpc-band-chip-mobile);
    grid-template-rows: auto;
  }

  .jelms-jpc-band-chip.is-active .jelms-jpc-band-chip__status {
    display: none;
  }

  .jelms-jpc-band-chip.is-active .jelms-jpc-band-chip__num {
    grid-row: 1;
  }

  .jelms-jpc-band-row {
    min-height: var(--size-jpc-level-row-min-mobile);
    grid-template-columns: var(--size-icon-xlarge) minmax(0, 1fr) var(--size-icon-medium);
  }

  .jelms-jpc-band--first-run .jelms-jpc-band-row {
    grid-template-columns: var(--size-icon-xlarge) minmax(0, 1fr) var(--size-icon-medium);
  }

  .jelms-jpc-band-row__status {
    grid-column: 2;
    text-align: start;
  }

  .jelms-jpc-band-row .ic {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .jelms-jpc-band-complete {
    grid-template-columns: var(--size-pa-step-strip) minmax(0, 1fr);
  }

  .jelms-jpc-band-complete__cta {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* JA-LMS-77 — expandable completed levels + milestone submission */

.jelms-jpc-band.is-open > .jelms-jpc-band-row {
  display: none !important;
}

.jelms-jpc-level {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.jelms-jpc-level-row__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--size-jpc-level-state);
  align-items: stretch;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
}

.jelms-jpc-level.is-expanded > .jelms-jpc-level-row__header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.jelms-jpc-level-row__header .jelms-jpc-level-row__toggle {
  border: 0;
  border-radius: 0;
  background: transparent;
  grid-template-columns: var(--size-icon-xlarge) minmax(0, 1fr) auto;
}

.jelms-jpc-level-row__header .jelms-jpc-level-row__meta {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  align-self: center;
}

.jelms-jpc-level-row__toggle {
  width: 100%;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: start;
}

.jelms-jpc-level-row__toggle.is-expanded .jelms-jpc-level-row__chevron {
  transform: rotate(180deg);
}

.jelms-jpc-level__panel {
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-block-start: 0;
  border-radius: 0 0 var(--radius-control) var(--radius-control);
  background: var(--color-surface-sunken);
}

.jelms-jpc-level-row__toggle.is-expanded {
  border-block-end: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.jelms-jpc-level__panel-inner {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.jelms-jpc-key-grid--review {
  margin-top: var(--space-1);
}

.jelms-jpc-milestone__head {
  margin-bottom: var(--space-3);
}

.jelms-jpc-milestone__head .jelms-t-label {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

.jelms-jpc-milestone__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: var(--size-jpc-recommended-panel);
}

.jelms-jpc-milestone__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.jelms-jpc-milestone__policy {
  margin: 0;
  color: var(--color-text-secondary);
}

.jelms-jpc-milestone__error {
  color: var(--color-semantic-danger);
}

.jelms-jpc-milestone__redo-notes,
.jelms-jpc-milestone__notes {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  border: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-jpc-milestone__redo-notes p,
.jelms-jpc-milestone__notes p {
  margin: var(--space-1) 0 0;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
}

.jelms-jpc-milestone__grade {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.jelms-jpc-milestone__badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tag-height);
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  font-feature-settings: var(--font-feature-numeric);
}

.jelms-jpc-milestone__badge--pass {
  background: var(--color-semantic-success-surface);
  color: var(--color-semantic-success);
  border: var(--border-hairline) solid var(--color-semantic-success);
}

.jelms-jpc-milestone__badge--redo {
  background: var(--color-semantic-warning-surface);
  color: var(--color-semantic-warning);
  border: var(--border-hairline) solid var(--color-semantic-warning);
}

.jelms-jpc-milestone__status {
  margin: 0;
  font-size: var(--type-body-small-font-size);
}

@media (max-width: 767px) {
  .jelms-jpc-milestone__form {
    max-width: none;
  }
}

/* Favorites page — list rows (JA-LMS-268, JA-LMS-269) */
.jelms-favorites-page .jelms-favorites-list-card {
  padding: 0;
  overflow: hidden;
}

.jelms-favorites-page .jelms-favorites-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.jelms-favorites-page .jelms-library-result-list {
  grid-template-columns: 48px minmax(0, 1fr) max-content;
  min-width: min(100%, 20rem);
}

.jelms-favorites-page .jelms-library-result-list__aside,
.jelms-viewing-history-page .jelms-library-result-list__aside {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.jelms-favorites-page .jelms-jpc-ring--favorites-row {
  --size-jpc-progress-ring: var(--size-control-medium);
  --size-jpc-ring-stroke: var(--size-badge-ring-width);
  --type-jpc-ring-count-font-size: var(--type-meta-font-size);
}

.jelms-favorites-page .jelms-jpc-ring--favorites-row .jelms-t-meta {
  display: none;
}

.jelms-favorites-page .jelms-library-result-list__main {
  min-width: 0;
}

.jelms-favorites-page .jelms-library-result-list__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jelms-favorites-page .jelms-favorites-toolbar__sort {
  flex: none;
  display: flex;
  align-items: center;
}

.jelms-favorites-page .jelms-favorites-remove-all {
  margin-block-start: var(--space-4);
}

/* Viewing history page — list rows (JA-LMS-272) */
.jelms-viewing-history-page .jelms-viewing-history-list-card {
  padding: 0;
  overflow: hidden;
}

.jelms-viewing-history-page .jelms-viewing-history-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.jelms-viewing-history-page .jelms-library-result-list {
  grid-template-columns: 48px minmax(0, 1fr) 44px;
  min-width: min(100%, 20rem);
}

.jelms-viewing-history-page .jelms-library-result-list__main {
  min-width: 0;
}

.jelms-viewing-history-page .jelms-library-result-list__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jelms-viewing-history-page .jelms-viewing-history-toolbar__sort {
  flex: none;
  display: flex;
  align-items: center;
}

.jelms-viewing-history-page .je-lms-viewing-history-favorite.is-active {
  color: var(--color-brand-teal-interactive);
}

.jelms-viewing-history-page .je-lms-viewing-history-favorite.is-active .ic svg {
  fill: currentColor;
}

.jelms-viewing-history-page .je-lms-viewing-history-favorite:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
}

.jelms-viewing-history-page .je-lms-viewing-history-row {
  max-height: 12rem;
  overflow: hidden;
  transition:
    opacity var(--motion-duration-standard) var(--motion-easing-exit),
    max-height var(--motion-duration-standard) var(--motion-easing-exit),
    min-height var(--motion-duration-standard) var(--motion-easing-exit),
    padding-block var(--motion-duration-standard) var(--motion-easing-exit);
}

.jelms-viewing-history-page .je-lms-viewing-history-row--removing {
  opacity: 0;
  max-height: 0;
  min-height: 0;
  padding-block: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .jelms-viewing-history-page .je-lms-viewing-history-row {
    transition: none;
  }
}

/* JA-LMS-382 — Lesson collection page */
.jelms-collection-page {
  max-width: var(--size-page-content-max);
  margin-inline: auto;
  padding-block: var(--space-8) var(--space-16);
  overflow-x: clip;
}

.jelms-collection-empty {
  display: grid;
  gap: var(--space-4);
  max-width: var(--size-page-content-max);
}

.jelms-collection-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.jelms-collection-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--size-jpc-recommended-panel));
  gap: var(--space-8);
  align-items: start;
  padding-bottom: var(--space-6);
  border-bottom: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-collection-head__copy {
  min-width: 0;
}

.jelms-collection-head__kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--type-eyebrow-font-size);
  font-weight: var(--type-eyebrow-font-weight);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.jelms-collection-head__badge {
  padding: var(--space-1) var(--space-3);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-pill);
  color: var(--color-text-primary);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.jelms-collection-head__description {
  max-width: var(--size-page-content-max);
  margin-block: var(--space-3) 0;
  color: var(--color-text-muted);
}

.jelms-collection-head__meta {
  margin-block: var(--space-3) 0;
}

.jelms-collection-head__actions {
  display: grid;
  justify-items: end;
  gap: var(--space-3);
  min-width: 0;
  max-width: 100%;
}

.jelms-collection-contents {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-4);
}

.jelms-collection-contents .jelms-library-view-toggle {
  display: inline-flex;
  flex-shrink: 0;
}

.jelms-collection-view-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--size-control-large) - 6px);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--type-body-small-font-size);
  cursor: pointer;
}

.jelms-collection-view-btn.is-active {
  background: var(--color-surface-card);
  color: var(--color-text-link);
  border: var(--border-hairline) solid var(--color-border-interactive, var(--color-brand-teal-interactive));
}

.jelms-collection-list__resources {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--type-meta-font-size);
}

.jelms-collection-list__resources .ic {
  width: var(--size-icon-small);
  height: var(--size-icon-small);
}

.jelms-jpc-ring--collection {
  width: var(--size-control-medium);
  height: var(--size-control-medium);
}

@media (max-width: 767px) {
  .jelms-collection-page {
    padding-block: var(--space-6) var(--space-12);
  }

  .jelms-collection-head {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .jelms-collection-head__actions {
    justify-items: stretch;
  }

  .jelms-collection-head__actions .jelms-btn {
    width: 100%;
  }

  .jelms-collection-contents {
    align-items: start;
    flex-direction: column;
    gap: var(--space-4);
  }

  .jelms-collection-contents .jelms-library-view-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
}

/* ── Events page (JA-LMS-383) ─────────────────────────────── */

.jelms-events-page,
.jelms-replays-page {
  --jelms-events-date-compact-width: calc(var(--size-event-date-block-width) - var(--space-3));
  --jelms-events-date-compact-height: calc(var(--size-event-date-block-height) - var(--space-4));
  --jelms-events-archive-teacher-size: var(--size-header-desktop);
  --jelms-events-date-col: calc(var(--jelms-events-date-compact-width) + var(--space-5));
  --jelms-events-lead-col: calc(var(--jelms-events-archive-teacher-size) + var(--space-3) + var(--jelms-events-date-compact-width) + var(--space-4));
  --jelms-events-time-col: calc(var(--size-jpc-recommended-panel) - var(--space-16));
  --jelms-events-access-col: calc(var(--size-jpc-level-state) - var(--space-10));
  --jelms-events-actions-col: calc(var(--size-jpc-recommended-panel) - var(--space-16) + var(--space-10));
  --jelms-events-row-min: calc(var(--jelms-events-archive-teacher-size) + var(--space-4));
  --jelms-events-archive-date-col: calc(var(--jelms-events-date-compact-width) + var(--space-5));
  --jelms-events-archive-lead-col: calc(var(--jelms-events-archive-teacher-size) + var(--space-3) + var(--jelms-events-date-compact-width) + var(--space-4));
  --jelms-events-archive-recorded-col: calc(var(--size-continue-card-width) - var(--space-9));
  --jelms-events-archive-resources-col: calc(var(--size-continue-card-width) + var(--space-1));
  --jelms-events-archive-action-col: var(--size-jpc-level-state);
  --jelms-events-archive-row-min: calc(var(--jelms-events-archive-teacher-size) + var(--space-2));
  --jelms-events-archive-recorded-col-tablet: var(--size-jpc-band-chip-mobile-active);
  display: grid;
  gap: var(--space-8);
  max-width: var(--size-page-content-max);
  margin-inline: auto;
  padding-block: var(--space-8) var(--space-16);
}

.jelms-events-page__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-events-page__intro {
  min-width: 0;
}

.jelms-events-page__desc {
  max-width: var(--size-page-content-max);
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
}

.jelms-replays-page__head {
  padding-bottom: var(--space-6);
  border-bottom: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-replays-page__desc {
  max-width: var(--size-page-content-max);
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
}

.jelms-events-timezone {
  min-width: calc(var(--size-jpc-recommended-panel) + var(--space-8));
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.jelms-events-timezone__icon {
  color: var(--color-brand-teal-interactive);
  flex: 0 0 auto;
}

.jelms-events-timezone__copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.jelms-events-timezone__change {
  margin-inline-start: auto;
  flex: 0 0 auto;
  font-weight: var(--font-weight-semibold);
}

.jelms-events-section {
  display: grid;
  gap: var(--space-4);
}

.jelms-events-section--archive {
  padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-events-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-8) 0 var(--space-4);
}

.jelms-events-section__head--archive {
  padding-top: var(--space-4);
}

.jelms-events-empty {
  padding: var(--space-6);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
}

.jelms-events-empty--filtered {
  margin-top: var(--space-4);
}

.jelms-events-empty--locked .jelms-events-empty__quiet-link {
  display: inline-flex;
  margin-top: var(--space-2);
  color: var(--color-text-link);
  font-size: var(--type-body-small-font-size);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.jelms-events-empty--locked .jelms-events-empty__quiet-link:hover,
.jelms-events-empty--locked .jelms-events-empty__quiet-link:focus-visible {
  text-decoration: underline;
}

.jelms-events-recordings-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
}

.jelms-events-recordings-search {
  flex: 1 1 calc(var(--size-continue-card-width) + var(--space-16));
  min-width: min(100%, calc(var(--size-continue-card-width) + var(--space-4)));
}

.jelms-events-recordings-search__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-page);
}

.jelms-events-recordings-search__ico {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--size-icon-medium);
}

.jelms-events-recordings-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--type-body-font-size);
}

.jelms-events-recordings-search__submit {
  flex-shrink: 0;
  border-radius: var(--radius-control);
}

.jelms-events-recordings-filter {
  flex: 0 1 auto;
}

.jelms-events-recordings-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  flex: 0 1 auto;
}

.jelms-events-recordings-filter__select {
  min-width: var(--jelms-events-archive-recorded-col);
}

@media (max-width: 767px) {
  .jelms-events-recordings-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .jelms-events-recordings-search {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .jelms-events-recordings-toolbar__filters {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .jelms-events-recordings-filter {
    width: 100%;
  }

  .jelms-events-recordings-filter__select {
    width: 100%;
    min-width: 0;
  }
}

.jelms-events-recordings-pagination {
  margin-top: var(--space-5);
}

.jelms-events-month {
  margin-bottom: var(--space-6);
}

.jelms-events-month__label {
  margin: 0 0 var(--space-2);
  font-size: var(--type-meta-font-size);
  line-height: var(--type-meta-line-height);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.jelms-events-list,
.jelms-events-archive {
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  overflow: hidden;
}

.jelms-events-row,
.jelms-events-archive-row {
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-hairline) solid var(--color-border-hairline);
}

.jelms-events-list > li.jelms-events-row,
.jelms-events-archive > li.jelms-events-archive-row {
  display: grid;
}

.jelms-events-row:last-child,
.jelms-events-archive-row:last-child {
  border-bottom: 0;
}

.jelms-events-archive-more {
  border-top: var(--border-hairline) solid var(--color-border-hairline);
  padding: var(--space-4) var(--space-5);
}

.jelms-events-archive-more__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--space-1);
}

.jelms-events-row {
  grid-template-columns: var(--jelms-events-lead-col) minmax(0, 1fr) var(--jelms-events-time-col) var(--jelms-events-access-col) var(--jelms-events-actions-col);
  min-height: var(--jelms-events-row-min);
}

.jelms-events-row__lead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.jelms-events-row--live {
  background: var(--color-surface-selected);
  border-inline-start: var(--space-1) solid var(--color-brand-teal-interactive);
  padding-inline-start: var(--space-4);
}

.jelms-events-row__date {
  width: var(--jelms-events-date-compact-width);
  min-height: var(--jelms-events-date-compact-height);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-card);
  display: grid;
  place-content: center;
  text-align: center;
  flex: none;
}

.jelms-events-row__date-month {
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.jelms-events-row__date-day {
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--font-weight-bold);
}

.jelms-events-row__copy {
  min-width: 0;
}

.jelms-events-row__topline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.jelms-events-row__copy .jelms-t-meta {
  margin-top: var(--space-1);
}

.jelms-events-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tag-height);
  padding: 0 var(--space-2);
  border: var(--border-hairline) solid var(--color-brand-teal-interactive);
  border-radius: var(--radius-pill);
  font-size: var(--type-meta-font-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-teal-interactive);
}

.jelms-events-row__time {
  display: grid;
  gap: var(--space-1);
}

.jelms-events-row__access {
  display: grid;
  gap: var(--space-1);
}

.jelms-events-row__access--ok .jelms-t-label {
  color: var(--color-brand-teal-interactive);
}

.jelms-events-row__access .jelms-t-label {
  white-space: nowrap;
}

.jelms-events-row__access--locked .jelms-t-label {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-1);
}

.jelms-events-row__access .jelms-events-row__plan {
  white-space: nowrap;
}

.jelms-events-row__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.jelms-events-archive-row {
  grid-template-columns:
    var(--jelms-events-archive-lead-col)
    minmax(0, 1fr)
    var(--jelms-events-archive-recorded-col)
    var(--jelms-events-archive-resources-col)
    var(--jelms-events-archive-action-col);
  min-height: var(--jelms-events-archive-row-min);
  align-items: center;
}

.jelms-events-archive-row__lead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.jelms-events-archive-row__teacher {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--jelms-events-archive-teacher-size);
  height: var(--jelms-events-archive-teacher-size);
  border: var(--border-hairline) solid var(--color-border-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  overflow: hidden;
}

.jelms-events-archive-row__teacher-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jelms-events-archive-row__teacher-initials {
  font-size: var(--type-body-font-size);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.jelms-events-archive-row__teacher-fallback {
  font-size: var(--size-icon-medium);
}

.jelms-events-archive-row .jelms-events-row__date {
  width: var(--jelms-events-date-compact-width);
  min-height: var(--jelms-events-date-compact-height);
}

.jelms-events-archive-row .jelms-events-row__date-month {
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  font-weight: var(--font-weight-bold);
}

.jelms-events-archive-row .jelms-events-row__date-day {
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--font-weight-bold);
}

.jelms-events-archive-row__copy {
  min-width: 0;
}

.jelms-events-archive-row__titleline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.jelms-events-archive-row__titleline .jelms-t-card-title {
  min-width: 0;
}

.jelms-events-archive-row__titleline .lib-card__done {
  color: var(--color-semantic-success);
  font-size: var(--size-icon-medium);
  flex-shrink: 0;
}

.jelms-events-archive-row__copy .jelms-t-card-title {
  font-size: var(--type-card-title-font-size);
  line-height: var(--type-card-title-line-height);
  font-weight: var(--type-card-title-font-weight);
  letter-spacing: var(--type-card-title-letter-spacing);
}

.jelms-events-archive-row__copy .jelms-t-meta {
  margin-top: var(--space-1);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  color: var(--color-text-secondary);
}

.jelms-events-archive-row__recorded {
  grid-column: 3;
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  color: var(--color-text-secondary);
}

.jelms-events-archive-row__resources {
  grid-column: 4;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-body-small-font-size);
  line-height: var(--type-body-small-line-height);
  color: var(--color-text-secondary);
}

.jelms-events-archive-row__resources .ic {
  flex-shrink: 0;
  font-size: var(--size-icon-medium);
  color: var(--color-text-secondary);
}

.jelms-events-archive-row__actions {
  grid-column: 5;
  display: flex;
  justify-content: flex-end;
}

.jelms-events-archive-row__actions .jelms-btn {
  min-height: var(--size-control-large);
  border-radius: var(--radius-control);
  justify-self: end;
}

@media (max-width: 980px) {
  .jelms-events-page,
  .jelms-replays-page {
    --jelms-events-archive-teacher-size: var(--size-pa-step-strip);
    --jelms-events-lead-col: calc(var(--jelms-events-archive-teacher-size) + var(--space-3) + var(--jelms-events-date-compact-width) + var(--space-4));
    --jelms-events-archive-lead-col: calc(var(--jelms-events-archive-teacher-size) + var(--space-3) + var(--jelms-events-date-compact-width) + var(--space-4));
  }

  .jelms-events-row {
    grid-template-columns: var(--jelms-events-lead-col) minmax(0, 1fr) var(--jelms-events-time-col) var(--jelms-events-access-col);
  }

  .jelms-events-row__access {
    grid-column: 2;
  }

  .jelms-events-row__actions {
    grid-column: 4;
    grid-row: 1 / 3;
  }

  .jelms-events-archive-row {
    grid-template-columns:
      var(--jelms-events-archive-lead-col)
      minmax(0, 1fr)
      var(--jelms-events-archive-recorded-col-tablet);
  }

  .jelms-events-archive-row__recorded,
  .jelms-events-archive-row__resources {
    grid-column: 2;
  }

  .jelms-events-archive-row__actions {
    grid-column: 3;
    grid-row: 1 / span 3;
    align-self: center;
  }
}

@media (max-width: 767px) {
  .jelms-events-page__head {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-5);
  }

  .jelms-events-timezone {
    min-width: 0;
    width: 100%;
  }

  .jelms-events-section__head {
    padding-top: var(--space-6);
  }

  .jelms-events-row {
    grid-template-columns: var(--jelms-events-date-compact-width) minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    min-height: 0;
  }

  .jelms-events-row--live {
    padding-inline-start: var(--space-3);
  }

  .jelms-events-row__date {
    width: var(--jelms-events-date-compact-width);
    min-height: var(--jelms-events-date-compact-height);
  }

  .jelms-events-row__lead .jelms-events-archive-row__teacher {
    display: none;
  }

  .jelms-events-row__time,
  .jelms-events-row__access,
  .jelms-events-row__actions {
    grid-column: 2;
  }

  .jelms-events-row__actions {
    grid-row: auto;
    justify-content: flex-start;
  }

  .jelms-events-row__actions .jelms-btn {
    width: 100%;
  }

  .jelms-events-section--archive {
    padding-top: var(--space-6);
  }

  .jelms-events-archive-row {
    grid-template-columns: var(--jelms-events-date-compact-width) minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    min-height: 0;
  }

  .jelms-events-archive-row .jelms-events-row__date {
    width: var(--jelms-events-date-compact-width);
    min-height: var(--jelms-events-date-compact-height);
  }

  .jelms-events-archive-row__teacher {
    display: none;
  }

  .jelms-events-archive-row__recorded,
  .jelms-events-archive-row__resources,
  .jelms-events-archive-row__actions {
    grid-column: 2;
  }

  .jelms-events-archive-row__actions {
    grid-row: auto;
    justify-self: stretch;
  }

  .jelms-events-archive-row__actions .jelms-btn {
    width: 100%;
  }

  .jelms-events-archive-row__resources {
    flex-wrap: wrap;
  }
}

/* ── Settings timezone row (JA-LMS-391, JA-LMS-414) ───────────────────── */

.jelms-settings-timezone {
  --jelms-settings-timezone-control-width: calc(var(--size-jpc-recommended-panel) + var(--space-16));
  --jelms-settings-timezone-messages-min: calc((var(--type-body-small-line-height) * 4) + var(--space-1));
}

.je-lms-account-page .jelms-account-settings__pref-row.jelms-settings-timezone {
  grid-template-columns: minmax(0, 1fr) var(--jelms-settings-timezone-control-width);
  align-items: start;
}

.jelms-settings-timezone__current {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.jelms-settings-timezone__control {
  display: grid;
  gap: var(--space-3);
  width: var(--jelms-settings-timezone-control-width);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  grid-template-rows: auto auto auto minmax(var(--jelms-settings-timezone-messages-min), auto);
}

.jelms-settings-timezone__select {
  width: 100%;
  min-height: calc(var(--size-event-date-block-height) + var(--space-16));
}

.jelms-settings-timezone__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  grid-row: 3;
}

.jelms-settings-timezone__detect-note,
.jelms-settings-timezone__status {
  grid-row: 4;
  grid-column: 1 / -1;
  align-self: start;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.jelms-settings-timezone__detect-note[hidden] {
  display: none;
}

.jelms-settings-timezone__detect-note,
.jelms-settings-timezone__status.is-success {
  color: var(--color-text-secondary);
}

.jelms-settings-timezone__status.is-error {
  color: var(--color-semantic-danger);
}

@media (max-width: 980px) {
  .je-lms-account-page .jelms-account-settings__pref-row.jelms-settings-timezone {
    grid-template-columns: minmax(0, 1fr) min(var(--jelms-settings-timezone-control-width), 100%);
  }
}

@media (max-width: 767px) {
  .je-lms-account-page .jelms-account-settings__pref-row.jelms-settings-timezone {
    grid-template-columns: minmax(0, 1fr);
  }

  .jelms-settings-timezone__control {
    width: 100%;
  }

  .jelms-settings-timezone__actions {
    flex-direction: column;
  }

  .jelms-settings-timezone__actions .jelms-btn {
    width: 100%;
  }
}