/* ----------------------------------------------------------------------------
   Orthoticon Learn.

   Self-contained on purpose: this folder has to be servable on its own, so it
   carries its own copy of the design tokens rather than reaching into the
   app's stylesheet. The values are the app's - Clinical White and Clinical
   Blue - so the two read as one product.

   The three classes the shared player creates (.lesson-stage, .lesson-video,
   .lesson-chrome) are styled here as well; player.js builds the elements, the
   page decides how big they are.
---------------------------------------------------------------------------- */

:root {
  --bg: #eef2f6;
  --ink: #172029;
  --muted: #5d6b78;
  --line: #e3e9f0;
  --panel: #ffffff;
  --panel-sunken: #f4f7fb;
  --accent: #1f74c4;
  --accent-quiet: #e4eff9;
  --accent-ink: #0f4c86;
  --hover-border: #b7c3cf;
  --hover-bg: #eef5fb;
  --letterbox: #0b131c;
}

:root[data-theme="dark"] {
  --bg: #171c22;
  --ink: #e7edf2;
  --muted: #93a1ad;
  --line: #2a323b;
  --panel: #1f262e;
  --panel-sunken: #242c35;
  --accent: #5aa8ec;
  --accent-quiet: #1b3450;
  --accent-ink: #bcdcf8;
  --hover-border: #3a444f;
  --hover-bg: #22303d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: inherit; }

.learn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.learn-brand h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
}

.learn-brand h1 span {
  color: var(--accent);
  font-weight: 500;
}

.learn-brand p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.learn-back {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}

.learn-back:hover { color: var(--accent); }

.learn-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.learn-search {
  width: 240px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-sunken);
  color: var(--ink);
  font-size: 13px;
}

.learn-search:focus {
  outline: none;
  border-color: var(--accent);
}

.segmented {
  display: flex;
  gap: 4px;
}

.segmented button {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
}

.segmented button.active {
  border-color: var(--accent);
  background: var(--accent-quiet);
  color: var(--accent-ink);
  font-weight: 600;
}

.learn-theme {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}

.learn-main {
  max-width: 1220px;
  margin: 0 auto;
  padding: 22px 24px 48px;
}

.learn-section-title {
  margin: 0 0 2px;
  font-size: 15px;
}

.learn-section-note {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
}

/* Courses get wider cards than lessons: a course is a commitment, and the
   description is the thing that decides whether someone starts one. */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}

.course-card {
  display: flex;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.course-card:hover,
.lesson-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.course-card-poster {
  width: 132px;
  flex: none;
  background: var(--letterbox) center/cover no-repeat;
}

.course-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px 12px 0;
  min-width: 0;
}

.course-card-desc {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.learn-shelf {
  margin-bottom: 28px;
}

.learn-shelf h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
}

.learn-shelf-count {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--panel-sunken);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.lesson-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

/* 16:9, matching what every published lesson is normalised to, so a shelf of
   cards is a straight line rather than a ragged one. */
.lesson-card-poster {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--letterbox) center/cover no-repeat;
}

.lesson-card-duration {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(11, 19, 28, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.lesson-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px 12px;
}

.lesson-card-body strong,
.course-card-body strong {
  font-size: 13px;
}

.lesson-card-meta {
  color: var(--muted);
  font-size: 11px;
}

/* --- Watching ------------------------------------------------------------ */

.watch-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 24px 40px;
  align-items: start;
}

@media (max-width: 1000px) {
  .watch-main { grid-template-columns: minmax(0, 1fr); }
}

.watch-stage-wrap {
  border-radius: 12px;
  overflow: hidden;
  background: var(--letterbox);
}

/* Same three rules as the editor's preview, and for the same reason: the
   chrome canvas is centred on the video rather than filling the box, so a
   caption is never drawn onto the letterboxing. */
.lesson-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesson-video {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
}

.lesson-chrome {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.watch-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.watch-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 12px 14px;
}

.watch-panel h2 {
  margin: 0 0 8px;
  font-size: 13px;
}

.watch-chapters,
.course-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 42vh;
  overflow-y: auto;
}

.chapter {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.chapter:hover { background: var(--hover-bg); }

.chapter.is-current {
  background: var(--accent-quiet);
  color: var(--accent-ink);
}

.chapter-time {
  flex: none;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}

.chapter-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chapter-body strong {
  font-size: 12px;
  font-weight: 600;
}

.chapter-role {
  color: var(--muted);
  font-size: 10px;
}

.course-steps li { counter-increment: coursestep; }

.course-steps a {
  display: block;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 12px;
  text-decoration: none;
}

.course-steps a::before {
  content: counter(coursestep) ". ";
  color: var(--muted);
}

.course-steps a:hover { background: var(--hover-bg); }

.course-steps a.is-current {
  background: var(--accent-quiet);
  color: var(--accent-ink);
  font-weight: 600;
}

.course-steps { counter-reset: coursestep; }

.next-lesson {
  display: block;
  padding: 9px 11px;
  border: 1px solid var(--accent);
  border-radius: 9px;
  background: var(--accent-quiet);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.learn-empty {
  max-width: 480px;
  margin: 14vh auto;
  padding: 0 24px;
  text-align: center;
}

.learn-empty h2 {
  margin: 0 0 8px;
  font-size: 17px;
}

.learn-empty p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.learn-button {
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

/* ---- Sign-in (learn-auth.js) ----------------------------------------------
   Until the session is open the library and the player are hidden behind a
   full-page card: "Signing in…", or why not and what to do. */
body.learn-locked .learn-head .learn-tools > :not(.learn-theme),
body.learn-locked main {
  visibility: hidden;
}

.learn-gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--bg);
  z-index: 50;
}

.learn-gate[hidden] { display: none; }

.learn-gate-box {
  max-width: 460px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  text-align: center;
}

.learn-gate-box h2 { margin: 0 0 10px; font-size: 18px; }
.learn-gate-box p { margin: 0 0 16px; color: var(--muted); line-height: 1.5; }
.learn-gate-box p:last-child { margin-bottom: 0; }
.learn-gate-box .learn-button { margin: 0 4px; }

.learn-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}

.learn-user[hidden] { display: none; }

.learn-link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.learn-link:hover { text-decoration: underline; }
.learn-link[hidden] { display: none; }