/* Learning (LMS): My learning, the catalog, the course player, quizzes, the manager's views, grading and the course editor.
   Every value is a design token (a custom property of the active theme) or derived from one with color-mix(), so light, dark, the shipped themes and the old look follow; nothing is hard-coded. Status is ALWAYS in words:
   the colors and edges here only help. The player is a grid with the outline beside the content from 62rem up and above it below that; nothing scrolls sideways at 320 px. */

/* ---- status chips and progress */
.ln-chip { border: 1px solid var(--color-border); }
.ln-chip.ln-s-completed, .ln-istatus.ln-i-done { background: color-mix(in srgb, var(--color-live-on) 18%, var(--color-surface)); border-color: var(--color-live-on); color: var(--color-text); }
.ln-chip.ln-s-in_progress, .ln-chip.ln-s-paused { background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); color: var(--color-text); }
.ln-chip.ln-s-overdue, .ln-chip.ln-s-failed, .ln-chip.ln-s-expired { background: var(--color-danger-soft); border-color: var(--color-danger-text); color: var(--color-danger-text); }
.ln-chip.ln-s-suspended, .ln-chip.ln-s-blocking { background: color-mix(in srgb, var(--color-live-away) 16%, var(--color-surface)); border-color: var(--color-live-away); color: var(--color-text); }
.ln-chip.ln-s-waived, .ln-chip.ln-s-withdrawn, .ln-chip.ln-s-assigned { background: var(--color-surface-2); color: var(--color-text); }
.ln-bar { width: 100%; max-width: 30rem; height: .8rem; accent-color: var(--color-accent); vertical-align: middle; }
.ln-progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-2) 0; }
.ln-card { display: grid; gap: var(--space-2); }
.ln-card.ln-overdue { border-left: 5px solid var(--color-danger-text); }
.ln-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem var(--space-3); }
.ln-go { justify-self: start; text-decoration: none; }

/* ---- the course outline: modules, lessons, items with each item's status in words */
.ln-outline, .ln-items { list-style: none; margin: 0; padding: 0; }
.ln-module { margin: 0 0 var(--space-3); }
.ln-module h3 { font-size: .95rem; margin: 0 0 var(--space-1); overflow-wrap: anywhere; }
.ln-lesson h4 { font-size: .8rem; margin: var(--space-2) 0 .2rem; color: var(--color-text-muted); font-weight: 650; text-transform: none; overflow-wrap: anywhere; }
.ln-item + .ln-item { margin-top: .15rem; }
.ln-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-2); align-items: baseline; padding: .4rem .55rem; border-radius: var(--radius-md); border: 1px solid transparent; text-decoration: none; color: var(--color-text); }
.ln-link .ln-title { font-weight: 600; overflow-wrap: anywhere; }
.ln-link .muted { grid-column: 1; }
.ln-link .ln-istatus { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
a.ln-link:hover { background: var(--color-surface-2); }
.ln-item.ln-here .ln-link { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border)); }
.ln-link.ln-locked { color: var(--color-text-muted); cursor: not-allowed; }
.ln-istatus { font-size: .74rem; font-weight: 600; padding: 0 .45rem; border-radius: 999px; line-height: 1.3rem; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); white-space: nowrap; }
.ln-istatus.ln-i-failed { background: var(--color-danger-soft); color: var(--color-danger-text); border-color: var(--color-danger-text); }
.ln-istatus.ln-i-pending, .ln-istatus.ln-i-locked { background: var(--color-surface-2); }
.ln-istatus.ln-i-in_progress { background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)); }

/* ---- the player */
.lp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.lp > * { min-width: 0; }
.lp-outline { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-3); }
.lp-outline > summary { cursor: pointer; font-weight: 650; padding: .2rem 0; }
.lp-outline[open] > summary { margin-bottom: var(--space-2); }
.lp-main { min-width: 0; }
.lp-main h1 { overflow-wrap: anywhere; margin-bottom: var(--space-1); }
.lp-main h1:focus-visible { outline-offset: 4px; }
.lp-sub { margin: 0 0 var(--space-3); }
.lp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem var(--space-3); margin: 0 0 var(--space-3); }
.lp-banner { border: 1px solid var(--color-border); background: var(--color-surface-2); border-radius: var(--radius-md); padding: var(--space-3); margin: 0 0 var(--space-3); }
.lp-media video, .lp-media audio { display: block; width: 100%; max-width: 56rem; border-radius: var(--radius-md); background: var(--color-surface-2); }
.lp-media video { aspect-ratio: 16 / 9; }
.lp-transcript { margin: var(--space-3) 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--color-surface); max-width: 56rem; }
.lp-transcript > summary { cursor: pointer; font-weight: 650; }
.lp-transcript-text { max-height: 18rem; overflow: auto; }
.lp-transcript-text p { margin: 0 0 var(--space-2); }
.lp-figure img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.lp-done { margin: var(--space-4) 0 0; }
.lp-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.lp-nav a.btn, .lp-nav .btn { text-decoration: none; }
.btn.disabled { opacity: .6; cursor: not-allowed; }
@media (min-width: 62rem) {
  .lp { grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr); align-items: start; }
  .lp-outline { position: sticky; top: var(--space-4); max-height: calc(100vh - 2rem - var(--env-banner-h)); overflow: auto; }
  .lp-outline > summary { list-style: none; }
  .lp-outline > summary::-webkit-details-marker { display: none; }
}

/* ---- a quiz */
.lq-facts { margin: 0 0 var(--space-4); }
.lq-q { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); min-width: 0; background: var(--color-surface); }
.lq-q legend { padding: 0 .4rem; font-weight: 650; }
.lq-q[disabled] { opacity: .85; }
.lq-prompt { margin: 0 0 var(--space-2); }
.lq-opts { display: grid; gap: var(--space-2); }
.lq-opt { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 2.75rem; padding: .55rem var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; background: var(--color-surface); }
.lq-opt:hover { background: var(--color-surface-2); }
.lq-opt input { width: 1.3rem; height: 1.3rem; flex: none; margin: .1rem 0 0; accent-color: var(--color-accent); }
.lq-opt span { overflow-wrap: anywhere; }
.lq-field { margin: 0; }
.lq-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.lq-fb { margin-top: var(--space-2); min-height: 0; }
.lq-fbox { border: 1px solid var(--color-border); border-left-width: 5px; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: var(--space-2) 0; background: var(--color-surface-2); color: var(--color-text); }
.lq-fb-ok { border-left-color: var(--color-live-on); }
.lq-fb-no { border-left-color: var(--color-danger-text); }
.lq-fb-wait { border-left-color: var(--color-live-away); }
.lq-fbox p { margin: .3rem 0 0; }
.lq-review { padding-left: 1.2rem; display: grid; gap: var(--space-4); }
.lq-attempts { margin: 0 0 var(--space-3); }

/* ---- rich text from the restricted markup (learning_markup.py): only these tags ever appear */
.lm { overflow-wrap: anywhere; max-width: 56rem; }
.lm h2 { font-size: 1.35rem; margin: var(--space-5) 0 var(--space-2); }
.lm h3 { font-size: 1.15rem; margin: var(--space-4) 0 var(--space-2); }
.lm h4 { font-size: 1rem; margin: var(--space-3) 0 var(--space-2); }
.lm h2:first-child, .lm h3:first-child, .lm h4:first-child { margin-top: 0; }
.lm ul, .lm ol { padding-left: 1.4rem; margin: 0 0 var(--space-3); }
.lm li + li { margin-top: .25rem; }
.lm code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--color-surface-2); padding: 0 .3rem; border-radius: var(--radius-sm); }
.lm-table { overflow-x: auto; margin: 0 0 var(--space-3); max-width: 100%; }
.lm-table table { border-collapse: collapse; min-width: 100%; }
.lm-table th, .lm-table td { border: 1px solid var(--color-border); padding: .45rem .7rem; text-align: left; vertical-align: top; }
.lm-table th { background: var(--color-surface-2); }
.lm-callout { border: 1px solid var(--color-border); border-left: 5px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); color: var(--color-text); }
.lm-callout.lm-warning { border-left-color: var(--color-danger-text); background: var(--color-danger-soft); }
.lm-callout.lm-tip { border-left-color: var(--color-live-on); background: color-mix(in srgb, var(--color-live-on) 8%, var(--color-surface)); }
.lm-callout-title { font-weight: 700; margin: 0 0 .2rem; }
.lm-callout > :last-child { margin-bottom: 0; }
.lm-figure { margin: 0 0 var(--space-3); }
.lm-figure img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* ---- manager screens: filters, counts, the compliance matrix, one enrollment, assign */
.ln-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--space-3); align-items: end; }
.ln-filters .select-field, .ln-grid .select-field { min-width: 0; }
.ln-filters input[type="date"], .ln-grid input, .select-field input[type="text"], .select-field input[type="number"], .select-field input[type="date"], .select-field input[type="file"] { padding: .55rem .6rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; width: 100%; min-width: 0; }
.ln-filter-go { display: flex; gap: var(--space-2); align-items: center; }
.ln-scroll { overflow-x: auto; max-width: 100%; }
.ln-counts td.num a { font-weight: 700; }
.ln-counts td.ln-bad a { color: var(--color-danger-text); }
.ln-buckets ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 var(--space-3); }
.ln-matrix th[scope="row"] { min-width: 11rem; position: sticky; left: 0; background: var(--color-surface); z-index: 1; }
.ln-matrix thead th { vertical-align: bottom; min-width: 8rem; white-space: normal; }
.ln-cell { min-width: 8rem; border-left: 5px solid var(--color-border); }
.ln-cell a { color: var(--color-text); text-decoration: none; }
.ln-cell a:hover b, .ln-cell a:focus-visible b { text-decoration: underline; }
.ln-c-completed { border-left-color: var(--color-live-on); background: color-mix(in srgb, var(--color-live-on) 10%, var(--color-surface)); }
.ln-c-overdue, .ln-c-failed, .ln-c-expired { border-left-color: var(--color-danger-text); background: var(--color-danger-soft); }
.ln-c-in_progress, .ln-c-paused { border-left-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface)); }
.ln-c-suspended { border-left-color: var(--color-live-away); background: color-mix(in srgb, var(--color-live-away) 10%, var(--color-surface)); }
.ln-c-none, .ln-c-waived, .ln-c-withdrawn { color: var(--color-text-muted); }
.ln-acts { display: grid; gap: var(--space-2); }
.ln-act { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-2) var(--space-3); }
.ln-act > summary { cursor: pointer; font-weight: 600; }
.ln-act[open] > summary { margin-bottom: var(--space-2); }
.ln-inline { display: inline-block; vertical-align: top; margin: 0 .2rem; }
.ln-mini, .ln-mini-form { display: inline-flex; gap: var(--space-2); align-items: end; margin: 0; flex-wrap: wrap; }
.ln-assign .select-field input, .ln-assign .select-field select { width: 100%; }
.ln-fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); margin: 0 0 var(--space-4); min-width: 0; }
.ln-fieldset legend { padding: 0 .4rem; font-weight: 600; }
.ln-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: var(--space-3); margin: 0 0 var(--space-3); }
.ln-checks { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.ln-bignum b { font-size: 2.4rem; line-height: 1; }
.ln-bignum span { color: var(--color-text-muted); }
.ln-sum { margin: 0 0 var(--space-3); padding-left: 1.2rem; }
.ln-problems { color: var(--color-danger-text); margin: .3rem 0; padding-left: 1.2rem; }
.ln-inline-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin: 0 0 var(--space-3); }
.ln-inline-form .select-field { flex: 1 1 14rem; min-width: 0; }

/* ---- grading and the course editor */
.gd-answer { margin: 0 0 var(--space-3); padding: var(--space-3); border-left: 4px solid var(--color-accent); background: var(--color-surface-2); border-radius: var(--radius-md); white-space: pre-wrap; overflow-wrap: anywhere; }
.ln-tabs ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 var(--space-4); }
.ln-tabs a { display: inline-block; min-height: 24px; padding: .4rem .9rem; border-radius: 999px; text-decoration: none; color: var(--color-text); border: 1px solid var(--color-border); font-weight: 600; background: var(--color-surface); }
.ln-tabs a[aria-current="page"] { background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border)); color: var(--color-text); }
.ln-ed-module { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); margin: 0 0 var(--space-3); background: var(--color-surface); }
.ln-ed-lesson { margin: var(--space-3) 0 0 var(--space-3); padding-left: var(--space-3); border-left: 3px solid var(--color-border); }
.ln-ed-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.ln-ed-head h3, .ln-ed-head h4 { margin: 0; overflow-wrap: anywhere; }
.ln-ed-items { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: var(--space-2); }
.ln-ed-item { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); }
.ln-row-actions { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: start; }
.ln-steps { padding-left: 1.2rem; display: grid; gap: .3rem; }
.ln-step.ln-done::marker { content: "Done: "; }
.ln-suggestions { padding-left: 1.2rem; display: grid; gap: var(--space-2); }
.ln-opt-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 9rem); gap: var(--space-3); align-items: end; margin: 0 0 var(--space-2); }
.ln-opt-row .lq-opt { min-height: 0; }
.ln-question > summary { overflow-wrap: anywhere; }
.ln-cs-published, .ln-cs-approved { background: color-mix(in srgb, var(--color-live-on) 18%, var(--color-surface)); border-color: var(--color-live-on); color: var(--color-text); }
.ln-cs-in_review, .ln-cs-changes_requested { background: color-mix(in srgb, var(--color-live-away) 16%, var(--color-surface)); border-color: var(--color-live-away); color: var(--color-text); }
.ln-cs-draft, .ln-cs-retired { background: var(--color-surface-2); color: var(--color-text); }
.lp-alert { color: var(--color-danger-text); }
@media (max-width: 40rem) {
  .ln-opt-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }             /* a phone: each answer or criterion has the whole width, its tick or points below it */
  .ln-fieldset { padding: var(--space-2); }
  .lq-q { padding: var(--space-2) var(--space-3); }
}

/* the Training panel of a profile (new look only): groups of cards, the when in words, one link for the history, one for the full record */
.training-on-panel .tp-group-h { font-size: 1rem; margin: var(--space-4) 0 var(--space-2); }
.training-on-panel .tp-group-h:first-of-type { margin-top: var(--space-3); }
.tp-list { margin: 0 0 var(--space-3); }
.tp-when { font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; }
.ln-card > .tp-when.muted { font-weight: 400; color: var(--color-text-muted); }
.tp-more { justify-self: start; display: inline-flex; align-items: center; min-height: 1.75rem; min-width: 1.75rem; padding: 0 .25rem; }
.tp-record { margin: var(--space-3) 0 0; }
.training-on-panel .pair-side { min-width: 0; max-width: 100%; }
.training-on-panel .pair-side b { overflow-wrap: anywhere; }

/* ---- release 2: analytics and the outcome measures (read-only tables and a row of facts) */
.ln-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--space-3); margin: 0 0 var(--space-3); }
.ln-facts > div { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--color-surface); }
.ln-facts dt { color: var(--color-text-muted); font-size: .85rem; }
.ln-facts dd { margin: 0; font-size: 1.25rem; font-weight: 700; }
.ln-an-question { border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-3); }
.ln-an-question h3 { margin: 0 0 var(--space-1); font-size: 1rem; }

/* ---- release 2: check-in questions in a video */
.lp-checkin { border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-3); }
.lp-checkin h3 { margin: 0 0 var(--space-2); font-size: 1rem; }
.lp-checkin.lp-ck-active { border: 2px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-3); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); }
.lp-checkin.lp-ck-done h3 { color: var(--color-text); }