/* PlanbookEdu Training (learn.planbookedu.com)
   Extracted from screens 2a and 2b of the "Training Site.dc.html" Claude Design
   prototype. Token values match kb.css so the Help Center and the Training site
   read as one product. */

:root {
  --brand-blue-deep: #192FA3;
  --brand-blue-deeper: #0f2280;
  --brand-blue: #0066CC;
  --brand-blue-light: #7DB5EE;
  --brand-blue-pale: #CFE4FF;
  --brand-blue-paler: #EFFAFF;
  --cta-orange-top: #FF8500;
  --cta-orange-bottom: #E05E00;
  --cta-orange-border: #CB5200;

  --ink: #1c2333;
  --ink-body: #2b3547;
  --ink-muted: #45506b;
  --ink-faint: #7a86a0;
  --line: #e3eaf2;
  --line-soft: #f0f4f9;
  --line-accent: #d9edf7;

  --ok-fg: #006b2f;
  --ok-bg: #e7f7ec;
  --ok-line: #b6e0c3;
  --going-fg: #92400e;
  --going-bg: #fff3e2;
  --going-line: #f0c48a;

  --font-display: 'Lexend', Arial, sans-serif;
  --font-body: 'Source Sans 3', Arial, sans-serif;
  --wrap: 1100px;
}

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

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--brand-blue); }
a:hover { color: var(--brand-blue-deep); }

.material-symbols-outlined {
  font-variation-settings: 'opsz' 20, 'wght' 500;
  user-select: none;
}

/* ---------- Header ---------- */

.ln-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}
.ln-header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ln-brand { display: flex; align-items: center; gap: 14px; }
.ln-brand-link { display: flex; align-items: center; text-decoration: none; }
.ln-brand-link img { height: 32px; display: block; }
.ln-brand-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink-muted);
  border-left: 1px solid var(--line);
  padding-left: 14px;
}
.ln-header-nav { display: flex; align-items: center; gap: 22px; }
.ln-header-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.ln-header-nav a:hover { color: var(--brand-blue-deep); }

/* ---------- Hero (homepage) ---------- */

.ln-hero {
  background: linear-gradient(160deg, var(--brand-blue-deep) 0%, var(--brand-blue-deeper) 100%);
  color: #fff;
  padding: 52px 24px 46px;
}
.ln-hero-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.ln-eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue-pale);
  font-weight: 600;
  margin-bottom: 12px;
}
.ln-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.1;
  margin: 0 0 14px;
}
.ln-hero-copy p {
  font-size: 19px;
  line-height: 1.5;
  color: #dce8ff;
  margin: 0;
  max-width: 560px;
  text-wrap: pretty;
}
.ln-hero-progress {
  flex: 0 0 270px;
  border: 1px solid #4a63cf;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  padding: 20px 22px;
}
.ln-hero-progress-label {
  font-family: var(--font-display);
  font-size: 15px;
  margin-bottom: 10px;
}
.ln-hero-progress-count { font-size: 14px; color: #dce8ff; }
.ln-hero-resume {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-blue-deep);
  background: #fff;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 10px;
}
.ln-hero-resume:hover { background: var(--brand-blue-paler); color: var(--brand-blue-deep); }
.ln-hero-resume .material-symbols-outlined { font-size: 18px; }

/* ---------- Progress bars ---------- */

.ln-bar {
  height: 6px;
  background: #e9eef5;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}
.ln-bar-fill {
  height: 100%;
  width: 0;
  background: var(--brand-blue-deep);
  border-radius: 3px;
  transition: width 0.2s ease;
}
.ln-bar-onblue { height: 8px; background: rgba(255, 255, 255, 0.22); border-radius: 4px; }
.ln-bar-onblue .ln-bar-fill { background: var(--cta-orange-top); }
.ln-bar-onpale { background: #fff; border: 1px solid var(--line); }
.ln-bar-inline { width: 160px; margin-bottom: 0; flex: none; }

/* ---------- Main / sections ---------- */

.ln-main {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 42px 24px 56px;
  width: 100%;
  flex: 1;
}
.ln-main-narrow { max-width: 820px; }

.ln-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ln-section-head h2 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
  margin: 0;
}
.ln-section-head span { font-size: 15px; color: var(--ink-faint); }
.ln-section-head-sub h2 { font-size: 18px; color: var(--ink-muted); }
.ln-section-head-sub span { font-size: 14px; }

/* ---------- Start here cards ---------- */

.ln-start-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
.ln-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.ln-card:hover { border-color: var(--brand-blue-light); }
.ln-card:hover .ln-card-title-row h3 a { text-decoration: underline; }
.ln-card-thumb {
  background: var(--brand-blue-paler);
  border-bottom: 1px solid var(--line);
  padding: 20px 20px 0;
  /* The image inside is a fixed 472px, so a card narrower than that (the
     two-up grid between 900 and 1100) crops it rather than scaling it. */
  overflow: hidden;
}
.ln-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ln-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ln-card-title-row h3 {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 0;
}
.ln-card-title-row h3 a { color: var(--brand-blue-deep); text-decoration: none; }
.ln-card-title-row h3 a:hover { text-decoration: underline; }
.ln-card-body p {
  font-size: 16px;
  color: var(--ink-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}
.ln-card-meta {
  font-size: 14px;
  color: var(--ink-faint);
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ln-card .ln-btn { margin-top: auto; align-self: flex-start; }

/* ---------- Badges + progress text states ---------- */

.ln-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
  padding: 2px 10px;
}
.ln-badge .material-symbols-outlined { font-size: 15px; }
.ln-badge-done {
  color: var(--ok-fg);
  background: var(--ok-bg);
  border: 1px solid var(--ok-line);
  padding-left: 7px;
}
.ln-badge-going {
  color: var(--going-fg);
  background: var(--going-bg);
  border: 1px solid var(--going-line);
}
.ln-meta-idle { color: var(--ink-faint); }
.ln-meta-going { color: var(--going-fg); font-weight: 600; }
.ln-meta-done { color: var(--ok-fg); font-weight: 600; }

/* ---------- Go further rows ---------- */

.ln-rows { display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; }
.ln-row {
  display: flex;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 18px 22px;
}
.ln-row:hover { border-color: var(--brand-blue-light); }
.ln-row:hover .ln-row-body h3 a { text-decoration: underline; }
.ln-row-thumb {
  /* Shrinkable, and the image inside keeps its own pixel size — so a narrower
     window CROPS the screenshot instead of scaling it, and it stays 1:1 sharp
     at every width. Every row crop is framed from its left edge for that
     reason. Below 700px the thumb is dropped entirely (see Responsive). */
  flex: 0 1 380px;
  min-width: 240px;
  height: 190px;
  background: var(--brand-blue-paler);
  /* A ring, not a border: a border is inside these 200x125 (box-sizing:
     border-box), which would leave the image 198x123 and no longer exactly half
     its file. box-shadow draws outside the box and costs the layout nothing. */
  box-shadow: 0 0 0 1px var(--line);
  border-radius: 10px;
  overflow: hidden;
}
/* min-width, not 0: the thumbnail is what gives way when the row narrows, and
   it gives way by cropping. Without a floor here the text column is the one
   that collapses, into a four-word-per-line ribbon. */
.ln-row-body { flex: 1; min-width: 300px; }
.ln-row-body h3 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 5px;
}
.ln-row-body h3 a { color: var(--brand-blue-deep); text-decoration: none; }
.ln-row-body h3 a:hover { text-decoration: underline; }
.ln-row-body p { font-size: 16px; color: var(--ink-muted); margin: 0 0 10px; }
.ln-row-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--ink-faint);
  flex-wrap: wrap;
}
.ln-row-action { flex: 0 0 auto; }

/* ---------- Buttons ---------- */

.ln-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
}
.ln-btn .material-symbols-outlined { font-size: 18px; }
.ln-btn-primary { color: #fff; background: var(--brand-blue-deep); }
.ln-btn-primary:hover { background: var(--brand-blue-deeper); color: #fff; }
.ln-btn-ghost {
  color: var(--brand-blue-deep);
  background: #fff;
  border-color: var(--brand-blue-light);
}
.ln-btn-ghost:hover { background: var(--brand-blue-paler); color: var(--brand-blue-deep); }
.ln-btn-orange {
  color: #fff;
  background: linear-gradient(180deg, var(--cta-orange-top), var(--cta-orange-bottom));
  border-color: var(--cta-orange-border);
}
.ln-btn-orange:hover { filter: brightness(1.07); color: #fff; }
.ln-btn-disabled {
  color: #b3bccb;
  border-color: var(--line);
  background: #fff;
  cursor: default;
}
/* A finished course offers a rewatch, which is not the page's main action. */
.ln-btn-primary.is-review {
  color: var(--brand-blue-deep);
  background: #fff;
  border-color: var(--brand-blue-light);
}
.ln-btn-primary.is-review:hover { background: var(--brand-blue-paler); }
.ln-btn-primary.is-review .material-symbols-outlined { display: none; }

/* ---------- In production ---------- */

.ln-soon-wrap { border-top: 1px solid var(--line); padding-top: 26px; }
.ln-soon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ln-soon {
  border: 1px dashed #ccd6e2;
  border-radius: 14px;
  background: #f6f8fb;
  padding: 16px 16px 14px;
  opacity: 0.75;
}
.ln-soon-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eef2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.ln-soon-icon .material-symbols-outlined { font-size: 20px; color: #8b95a8; }
.ln-soon-title {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.ln-soon-note { font-size: 13px; color: #8b95a8; }

/* ---------- CTA ---------- */

.ln-cta {
  margin-top: 44px;
  border: 1px solid var(--line-accent);
  background: var(--brand-blue-paler);
  border-radius: 14px;
  padding: 28px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.ln-cta h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink);
}
.ln-cta p { margin: 0; font-size: 15px; color: var(--ink-muted); }
.ln-cta-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.ln-reset-line {
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--ink-faint);
}
.ln-reset-line button {
  font: inherit;
  color: var(--brand-blue);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- Sub-hero (course + lesson pages) ---------- */

.ln-subhero {
  background: linear-gradient(160deg, var(--brand-blue-deep) 0%, var(--brand-blue-deeper) 100%);
  color: #fff;
  padding: 28px 24px;
}
.ln-subhero-inner { max-width: var(--wrap); margin: 0 auto; }
/* The lesson page runs wider than --wrap (see .ln-lesson), so its breadcrumb and
   title have to match or they sit visibly inset from the player below them.
   Selected via :has() on the sibling .ln-lesson, so no body class or extra
   template plumbing is needed — course and index pages have no .ln-lesson and
   keep the standard wrap. */
.ln-subhero:has(+ .ln-lesson) .ln-subhero-inner { max-width: 1660px; }
@media (max-width: 1659px) {
  .ln-subhero:has(+ .ln-lesson) .ln-subhero-inner { max-width: 1360px; }
}
.ln-crumbs { font-size: 14px; color: var(--brand-blue-pale); margin-bottom: 8px; }
.ln-crumbs a { color: var(--brand-blue-pale); text-decoration: none; }
.ln-crumbs a:hover { text-decoration: underline; color: var(--brand-blue-pale); }
.ln-crumbs span { margin: 0 6px; }
.ln-subhero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  margin: 0 0 8px;
}
.ln-subhero-meta { font-size: 15px; color: #dce8ff; }

/* ---------- Course page ---------- */

.ln-course-blurb {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0 0 24px;
  max-width: 640px;
}
.ln-course-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-size: 14px;
}
.ln-course-progress .ln-bar { flex: 1; margin-bottom: 0; }
.ln-lesson-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  background: #fff;
}
.ln-lesson-row:hover { border-color: var(--brand-blue-light); background: var(--brand-blue-paler); color: inherit; }
.ln-lesson-marker {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #ccd6e2;
  background: #fff;
  color: var(--ink-faint);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ln-lesson-text { flex: 1; min-width: 0; }
.ln-lesson-title { display: block; font-size: 16px; font-weight: 600; color: var(--brand-blue-deep); }
.ln-lesson-summary { display: block; font-size: 14px; color: var(--ink-faint); margin-top: 2px; }
.ln-lesson-time { font-size: 13px; color: var(--ink-faint); white-space: nowrap; }
.ln-course-action { margin-top: 18px; }
.ln-back-line { margin-top: 32px; font-size: 15px; }
.ln-back-line a { text-decoration: none; font-weight: 600; }

/* Watched ticks, shared by the course list and the lesson sidebar. */
.ln-tick {
  background: #008000;
  border-color: #008000;
  position: relative;
}
.ln-tick::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(40deg);
}
.ln-contents-marker.ln-tick::after { left: 6px; top: 4px; height: 9px; }

/* ---------- Lesson page ---------- */

/* Wider than --wrap (1100px) on purpose: this is the one page whose subject is
   a 16:9 video, and the shared wrap minus a 320px sidebar, a 40px gap and 48px
   of padding left the player about 692px across — small enough that the app UI
   inside the recording, which is captured at 1280px, was being shown at roughly
   half scale. Text still wraps at a readable measure further down the page
   (.ln-lesson-body caps at 620px), so only the player takes the extra width. */
.ln-lesson {
  max-width: 1660px;
  margin: 0 auto;
  padding: 32px 24px 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
  width: 100%;
  flex: 1;
}

/* Below the width where a 1:1 player plus the sidebar fits (1280 + 48 padding +
   32 gap + 300 sidebar = 1660), drop the sidebar under the video rather than
   squeezing the player. See the .ln-video comment for why 1280 specifically. */
@media (max-width: 1659px) {
  .ln-lesson { grid-template-columns: minmax(0, 1fr); max-width: 1360px; }
  .ln-lesson-side { max-width: 1280px; width: 100%; }
}
/* Capped at the masters' native 1280x720, and never wider.
 *
 * These recordings are screenshots of the app's own UI, so they are full of 1px
 * borders and thin table rules. Displaying them at any non-integer scale
 * resamples every one of those into a soft grey smear — which is exactly what a
 * 1018px-wide player was doing to a 1280px source (79.5%). Vimeo's own debug
 * panel confirmed it was already serving the top 1280x720 rung with zero dropped
 * frames, so the softness was the downscale in the page, not the delivery.
 *
 * Letting it grow PAST 1280 would be worse still: upscaling invents detail that
 * was never captured. Centred, so the extra room on a wide screen becomes margin
 * rather than blur. */
.ln-video {
  background: #101418;
  border: 1px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-width: 1280px;
  margin-inline: auto;
}
.ln-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.ln-video-pending { display: flex; align-items: center; justify-content: center; }
.ln-video-pending-inner {
  text-align: center;
  color: #cfd6e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
}
.ln-video-pending-inner .material-symbols-outlined { font-size: 40px; color: #6b7891; }
.ln-video-pending-inner strong { font-family: var(--font-display); font-size: 17px; color: #fff; }
.ln-video-pending-inner span { font-size: 15px; }
.ln-video-pending-inner a { color: var(--brand-blue-light); }

/* Bound the whole column to the player's width, not the grid's. The video is
   capped at its native 1280 (see .ln-video); without this the nav row and the
   body text below it would run on to the grid's full width and read as
   belonging to a different, wider page than the video they sit under. */
.ln-lesson-main { max-width: 1280px; width: 100%; margin-inline: auto; }

.ln-lesson-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.ln-watched {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: var(--ink-muted);
  cursor: pointer;
}
.ln-watched input { width: 17px; height: 17px; accent-color: var(--brand-blue-deep); }

.ln-lesson-body { padding-top: 24px; }
.ln-lesson-body h2 {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 10px;
}
.ln-lesson-lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0 0 18px;
  max-width: 620px;
  text-wrap: pretty;
}
.ln-steps {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 620px;
}
.ln-steps li { display: flex; gap: 12px; align-items: flex-start; }
.ln-step-n {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-blue-deep);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ln-steps li > span:last-child { font-size: 16px; line-height: 1.55; color: var(--ink-body); }
.ln-tip {
  display: flex;
  gap: 12px;
  background: var(--brand-blue-paler);
  border: 1px solid var(--line-accent);
  border-radius: 10px;
  padding: 16px 18px;
  max-width: 620px;
}
.ln-tip .material-symbols-outlined { font-size: 20px; color: var(--brand-blue-deep); flex: none; }
.ln-tip p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-body); }

.ln-articles { margin-top: 24px; }
.ln-articles-label {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.ln-articles-links { display: flex; gap: 10px; flex-wrap: wrap; }
.ln-articles-links a {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--brand-blue-deep);
  background: #fff;
  border: 1px solid var(--brand-blue-light);
  border-radius: 8px;
  padding: 8px 14px;
  text-decoration: none;
}
.ln-articles-links a:hover { background: var(--brand-blue-paler); }
.ln-articles-links .material-symbols-outlined { font-size: 17px; }

/* ---------- Lesson sidebar ---------- */

.ln-lesson-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 88px;
}
.ln-contents {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.ln-contents-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--brand-blue-paler);
}
.ln-contents-title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--brand-blue-deep);
  margin-bottom: 8px;
}
.ln-contents-count { font-size: 13px; color: var(--ink-muted); }
.ln-contents-list { display: flex; flex-direction: column; }
.ln-contents-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 18px;
  border-bottom: 1px solid #eef2f7;
  text-decoration: none;
}
.ln-contents-item:last-child { border-bottom: none; }
.ln-contents-item:hover { background: var(--brand-blue-paler); }
.ln-contents-item.is-current { background: #f4f8ff; }
.ln-contents-marker {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ccd6e2;
  background: #fff;
  color: var(--ink-faint);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.ln-contents-text { flex: 1; min-width: 0; }
.ln-contents-name { display: block; font-size: 16px; color: var(--ink); }
.ln-contents-item.is-current .ln-contents-name { font-weight: 600; color: var(--brand-blue-deep); }
.ln-contents-time { display: block; font-size: 13px; color: var(--ink-faint); }

.ln-upnext {
  border: 1px solid var(--line-accent);
  border-radius: 14px;
  background: var(--brand-blue-paler);
  padding: 18px 20px;
}
.ln-upnext-wide { margin-top: 32px; }
.ln-upnext-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.ln-upnext-title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--brand-blue-deep);
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
}
.ln-upnext-title:hover { text-decoration: underline; }
.ln-upnext-meta { font-size: 14px; color: var(--ink-muted); margin-bottom: 14px; }

.ln-all-courses {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 600;
  padding: 0 2px;
}
.ln-all-courses .material-symbols-outlined { font-size: 18px; }

/* ---------- Course thumbnails ---------- */

/* Real screenshots of the app, captured by learn/scripts/shots.sh into
   assets/img/thumbs/<course-slug>.png.

   THE IMAGE IS DRAWN AT 1:1, on both kinds of display. Each course ships a
   pair — the box size and the same crop at 2x — and srcset picks between them
   by device pixel ratio, so the app inside the picture is always at 100% and
   its small UI text is as sharp as the app's own. A single 2x file cannot do
   that: on an ordinary display it is the app rendered at 50% and resampled,
   which is legible and never crisp.

   So these sizes ARE the capture sizes in shots.mjs (TIERS), and the pair has
   to move with them; learn/eleventy.config.js fails the build when a PNG's
   dimensions don't match the tier its course is in.

   Each shot is also a CROP of the screen, not the whole page — at 100% a
   thumbnail only holds a corner of a screen, so the capture frames the part the
   course is actually about.

   object-fit is belt and braces: at the sizes above there is nothing to crop.
   No width/height attributes on the <img> — the card and row shapes have
   different intrinsic sizes, and both boxes are fixed here anyway. */

.ln-card-thumb img {
  display: block;
  /* Its own pixels, never scaled: centred when the card is wider (one column
     under 900px), cropped by the panel above when it is narrower. */
  width: 472px;
  max-width: none;
  margin-inline: auto;
  height: 168px;
  object-fit: cover;
  object-position: top center;
  background: #fff;
  /* Three hairlines rather than a border, for the reason on .ln-row-thumb —
     and only three, because the bottom of this image sits on the thumb panel's
     own bottom rule and a fourth would double it. */
  box-shadow: -1px 0 0 var(--line), 1px 0 0 var(--line), 0 -1px 0 var(--line);
  border-radius: 8px 8px 0 0;
}
.ln-row-thumb img {
  display: block;
  width: 380px;
  height: 190px;
  max-width: none;
  object-position: top left;
}

/* ---------- Whole-card click targets ---------- */

/* A course card is one thing, so all of it is the link — not just the title and
   the button, which is what a visitor has to aim at otherwise.

   Done as an overlay on the title link rather than by wrapping the card in an
   <a>: the card already contains a second link (the action button, which
   progress.js repoints at the lesson to resume), and an anchor inside an anchor
   is invalid and resolves differently in every browser. The overlay also keeps
   ONE tab stop per card and one accessible name, where a wrapper would announce
   the whole card's text.

   The cost is that text inside the card can no longer be selected with the
   mouse. That is the standard trade for this pattern and the reason the summary
   text also appears on the course page itself. */
.ln-card,
.ln-row { position: relative; }
.ln-stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
/* Anything with its own destination has to sit above the overlay. */
.ln-card .ln-btn,
.ln-row-action { position: relative; z-index: 2; }

/* The overlay carries the focus ring for the whole card, so keyboard users see
   the same target the mouse gets. */
.ln-card:focus-within,
.ln-row:focus-within { border-color: var(--brand-blue-light); }
.ln-stretch:focus-visible { outline: none; }
.ln-stretch:focus-visible::after {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}

/* ---------- Footer ---------- */

.ln-footer { border-top: 1px solid var(--line); background: #fafcfe; }
.ln-footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 26px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-faint);
}
.ln-footer-links { display: flex; gap: 20px; }
.ln-footer-links a { color: var(--ink-muted); text-decoration: none; }
.ln-footer-links a:hover { color: var(--brand-blue-deep); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .ln-hero-inner { flex-direction: column; align-items: stretch; gap: 28px; }
  .ln-hero h1 { font-size: 34px; }
  .ln-hero-progress { flex: 1 1 auto; }
  .ln-start-grid { grid-template-columns: 1fr; }
  /* Below this the row has no width to spare for a 380px picture, and cropping
     it further would leave a strip rather than a screen. */
  .ln-row-thumb { display: none; }
  .ln-soon-grid { grid-template-columns: repeat(2, 1fr); }
  .ln-lesson { grid-template-columns: 1fr; gap: 28px; }
  /* Sticky is for a column beside the video. Once it wraps underneath, the
     contents list is just a long block and pinning it would cover the page. */
  .ln-lesson-side { position: static; }
}

@media (max-width: 700px) {
  .ln-header-inner { flex-wrap: wrap; gap: 12px; }
  .ln-header-nav { gap: 16px; font-size: 14px; flex-wrap: wrap; }
  .ln-row { flex-wrap: wrap; }
  .ln-row-body { min-width: 0; }
  .ln-row-action { width: 100%; justify-content: center; }
  .ln-lesson-nav { justify-content: center; }
  .ln-soon-grid { grid-template-columns: 1fr; }
  .ln-subhero h1 { font-size: 26px; }
}