/* ============================================================
   Video Course (participant course player + quiz) page.
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   Reuses .app-screen and .btn/.btn--primary/.btn--outline from
   elements.css. See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  /* Back link sits above the stacked sections. */
  .course-back { justify-self: start; display: inline-flex; align-items: center;
                 gap: var(--mea-space-1); min-height: var(--t-target-min, 44px); }

  /* Course header: title, meta row, progress bar. */
  .course-header { display: grid; gap: var(--mea-space-3);
                   padding: var(--mea-space-5); border-radius: var(--mea-radius-2xl); }
  .course-header__title { margin: 0; }
  .course-header__meta { display: flex; flex-wrap: wrap; align-items: center;
                         gap: var(--mea-space-3); margin: 0; }
  .course-header__category, .course-header__duration { margin: 0; }

  .course-progress { display: grid; gap: var(--mea-space-2); margin: 0; }
  .course-progress__track { display: block; inline-size: 100%; block-size: var(--mea-space-2);
                            border-radius: var(--mea-radius-pill); overflow: hidden; }
  .course-progress__fill { display: block; block-size: 100%; inline-size: 0;
                           border-radius: var(--mea-radius-pill);
                           transition: width var(--mea-dur-normal) var(--mea-ease-default); }
  .course-progress__label { margin: 0; }

  /* Video region: real player or placeholder, both in a card. */
  .video-placeholder { display: grid; gap: var(--mea-space-2); justify-items: center;
                       text-align: center; padding: var(--mea-space-8) var(--mea-space-4);
                       border-radius: var(--mea-radius-2xl); }
  .video-placeholder__icon, .video-placeholder__title, .video-placeholder__hint { margin: 0; }

  .video-player { margin: 0; display: grid; gap: var(--mea-space-3);
                  border-radius: var(--mea-radius-2xl); overflow: hidden; }
  .video-player__media { inline-size: 100%; display: block; aspect-ratio: 16 / 9; }
  .video-player__caption { margin: 0; padding: 0 var(--mea-space-4) var(--mea-space-4); }

  /* About: heading + description text. */
  .course-about { display: grid; gap: var(--mea-space-2);
                  padding: var(--mea-space-5); border-radius: var(--mea-radius-2xl); }
  .course-about:empty { display: none; }
  .course-about__title, .course-about__text { margin: 0; }

  /* Quiz: heading, counter, notices, question, options, nav. */
  .course-quiz { display: grid; gap: var(--mea-space-4);
                 padding: var(--mea-space-5); border-radius: var(--mea-radius-2xl); }
  .course-quiz:empty { display: none; }
  .quiz__title, .quiz__counter, .quiz__error, .quiz__notice,
  .quiz__question { margin: 0; }

  .quiz__error, .quiz__notice { padding: var(--mea-space-3) var(--mea-space-4);
                                border-radius: var(--mea-radius-md); }

  .quiz-options { display: grid; gap: var(--mea-space-2);
                  margin: 0; padding: 0; list-style: none; }
  .quiz-option { inline-size: 100%; display: inline-flex; align-items: center;
                 min-height: var(--t-target-min, 44px); text-align: start;
                 padding: var(--mea-space-3) var(--mea-space-4); border: 0;
                 border-radius: var(--mea-radius-md); cursor: pointer; }

  .quiz__nav { display: flex; align-items: center; justify-content: space-between;
               gap: var(--mea-space-2); }

  /* Quiz result: score, verdict, panel, actions. */
  .quiz-result { display: grid; gap: var(--mea-space-3); justify-items: center; text-align: center; }
  .quiz-result__score, .quiz-result__title, .quiz-result__summary { margin: 0; }
  .quiz-result__panel { inline-size: 100%; display: grid; gap: var(--mea-space-2);
                        padding: var(--mea-space-4); border-radius: var(--mea-radius-lg); }
  .quiz-result__heading, .quiz-result__detail { margin: 0; }
  .quiz-result__actions { display: flex; flex-wrap: wrap; justify-content: center;
                          gap: var(--mea-space-2); }
}

@layer design {
  .course-back { color: var(--t-link); font-size: var(--mea-text-sm);
                 font-weight: var(--mea-w-semibold); }
  .course-back:hover { color: var(--t-link-hover); }

  .course-header { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                   box-shadow: var(--mea-shadow-sm); }
  .course-header__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-2xl);
                          font-weight: var(--mea-w-bold); color: var(--t-text); }
  .course-header__category { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                             color: var(--t-accent); }
  .course-header__duration { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  .course-progress__track { background: var(--t-bg-recessed); }
  .course-progress__fill { background: var(--t-success); }
  .course-progress__label { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  .video-placeholder { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                       box-shadow: var(--mea-shadow-sm); }
  .video-placeholder__icon { font-size: var(--mea-text-hero); line-height: 1; color: var(--t-text-muted); }
  .video-placeholder__title { font-size: var(--mea-text-md); color: var(--t-text-muted); }
  .video-placeholder__hint { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  .video-player { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                  box-shadow: var(--mea-shadow-sm); }
  .video-player__media { background: var(--t-bg-active); }
  .video-player__caption { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  .course-about { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                  box-shadow: var(--mea-shadow-sm); }
  .course-about__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                         font-weight: var(--mea-w-bold); color: var(--t-text); }
  .course-about__text { font-size: var(--mea-text-md); color: var(--t-text-secondary);
                        line-height: var(--mea-lh-relaxed); }

  .course-quiz { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                 box-shadow: var(--mea-shadow-sm); }
  .quiz__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                 font-weight: var(--mea-w-bold); color: var(--t-text); }
  .quiz__counter { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  .quiz__error { background: var(--t-bg-recessed); color: var(--t-error-text);
                 font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                 border: 1px solid var(--t-error); }
  .quiz__notice { background: var(--t-bg-recessed); color: var(--t-warning-text);
                  font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                  border: 1px solid var(--t-warning); }

  .quiz__question { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold);
                    color: var(--t-text); line-height: var(--mea-lh-snug); }

  .quiz-option { background: transparent; color: var(--t-text);
                 border: 1.5px solid var(--t-border);
                 font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold);
                 transition: background var(--mea-dur-fast), color var(--mea-dur-fast),
                             border-color var(--mea-dur-fast); }
  .quiz-option:hover { background: var(--t-bg-recessed); }
  .quiz-option.is-selected { background: var(--t-accent); color: var(--t-accent-text);
                             border-color: var(--t-accent); }

  .quiz-result__score { font-size: var(--mea-text-hero); font-weight: var(--mea-w-black);
                        line-height: var(--mea-lh-tight); }
  .quiz-result__score--pass { color: var(--t-success); }
  .quiz-result__score--fail { color: var(--t-error); }
  .quiz-result__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                        font-weight: var(--mea-w-bold); color: var(--t-text); }
  .quiz-result__summary { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  .quiz-result__panel--pass { background: var(--t-bg-recessed); border: 1px solid var(--t-success); }
  .quiz-result__panel--fail { background: var(--t-bg-recessed); border: 1px solid var(--t-warning); }
  .quiz-result__heading { font-family: var(--mea-font-citizen); font-size: var(--mea-text-md);
                          font-weight: var(--mea-w-bold); }
  .quiz-result__heading--pass { color: var(--t-success-text); }
  .quiz-result__heading--fail { color: var(--t-warning-text); }
  .quiz-result__detail { font-size: var(--mea-text-sm); color: var(--t-text-secondary);
                         line-height: var(--mea-lh-snug); }
}