/* ==========================================================================
   Linh Hua: Course page ("the same page, on the Study Desk's paper").
   Course-only. Colour, border colour, shadow and motion properties only:
   no size, spacing, type or position changes anywhere, and the lesson
   content is styled exactly as before apart from the dark caption ink.
   The course colours come from the shared identity registry (identity.css):
   course.js marks #courseRoot with the course's identity tokens once the
   course is known; without them the neutral palette applies.
   ========================================================================== */

body:has(#courseRoot) {
  --c-field: #f8f8fd;
  --c-paper: #f6f7fb;
  --c-panel: #fbfbfe;
  --c-edge: rgba(74, 56, 176, 0.13);
  --c-rule: rgba(74, 56, 176, 0.12);
  --c-shaft: rgba(124, 111, 255, 0.12);
  --c-track: rgba(74, 56, 176, 0.12);
  background: var(--c-paper);
}

:root[data-theme="dark"] body:has(#courseRoot) {
  --c-field: #131833;
  --c-paper: #0d111d;
  --c-panel: #10152a;
  --c-edge: rgba(160, 148, 255, 0.16);
  --c-rule: rgba(176, 164, 255, 0.14);
  --c-shaft: rgba(124, 111, 255, 0.18);
  --c-track: rgba(255, 255, 255, 0.1);
}

/* The shared ambient layers (film grain, top glow) give way to the studio
   field, as on the Dashboard; the reading pattern was already off here. */
html:has(#courseRoot)::before,
body:has(#courseRoot)::before { display: none; }

#courseRoot {
  /* Bar fill, completed marks and the Mark complete box, from the identity
     registry (neutral until the course is known, and in its error states) */
  --c-fill: var(--id-fill);
  --c-mark: var(--id-strong);
  --c-box: var(--id-strong);
  background:
    radial-gradient(1100px 520px at 8% -8%, var(--c-shaft), transparent 64%),
    linear-gradient(180deg, var(--c-field) 0, var(--c-paper) 360px);
}

/* A course with a secondary identity (the Combo) shows both: the bar runs
   from one to the other and completed marks are split. */
#courseRoot[data-identity-secondary] {
  --c-fill: linear-gradient(90deg, var(--id-fill), var(--id2-fill));
  --c-mark: linear-gradient(135deg, var(--id-strong) 50%, var(--id2-strong) 50%);
}

/* Panels: quieter paper on a lilac hairline (the 1px border stays 1px) */
#courseRoot .course-sidebar,
#courseRoot .course-content {
  background: var(--c-panel);
  border-color: var(--c-edge);
  box-shadow: none;
}

/* Internal rules */
#courseRoot .lesson-actions {
  border-top-color: var(--c-rule);
  border-bottom-color: var(--c-rule);
}

#courseRoot .lesson-body h3 { border-top-color: var(--c-rule); }

/* Progress: course colour, shown at its value with no fill animation */
#courseRoot .progress-bar-track { background: var(--c-track); }

#courseRoot .progress-bar-fill {
  background: var(--c-fill);
  transition: none;
}

/* Completed lessons and the Mark complete box carry the course colour */
#courseRoot .lesson-item.completed .lesson-check {
  background: var(--c-mark);
  border-color: transparent;
}

#courseRoot .lesson-complete-toggle input { accent-color: var(--c-box); }

/* Dark: the figure card stays white for the chart art, so its caption takes
   a dark ink (6.6:1) instead of the dark-theme muted grey (2.9:1). Only the
   glyph fill changes, so nothing else that follows the text colour does;
   forced-colors mode keeps the system colours. */
@media (forced-colors: none) {
  :root[data-theme="dark"] #courseRoot .lesson-body figcaption { -webkit-text-fill-color: #565c70; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(#courseRoot) { scroll-behavior: auto; }
}