/* ============================================================
   BIRCH COURSE — the course index (/birch-course) and the lesson template (/birch-course/<slug>).
   Requires: tokens.css, page.css, surface.css, patterns.css; the transcript also blog/theme.css.
   Moved from Webflow 09.10.2026; states measured on the live pages (site/migrations/birch-course.md),
   decisions in site/decisions/birch-course.json.

   .course-layout      content (8 columns) + the course menu (4 columns), one grid
   .course-menu        lesson list by section: desktop — sticky right column; phones — a bar fixed at the
                       bottom that opens the list above it (CourseMenu.astro)
   .course-player      light YouTube player (LitePlayer.astro): preview + play button, iframe on click
   .course-transcript  the transcript card: blog renderer markup at the lesson's reading size
   .course-help        Help Center links, two in a row; hover colour goes by position
   .course-section-card  a section card on the index: title, count, text, picture
   ============================================================ */

/* ---------- Page frame ---------- */
/* The course starts close under the menu, as on live (46 from the menu to the back link). */
.course-page { padding-top: var(--space-lg); }
.course-layout { align-items: start; column-gap: var(--space); } /* content ↔ menu 24 (Liliya's review 09.10.2026) */
/* The menu's column runs as tall as the content, so the sticky menu has room to stick while the page scrolls. */
.course-aside { align-self: stretch; }
.course-main { display: grid; gap: var(--course-gap, var(--space-xl)); min-width: 0; }
.course-block { display: grid; gap: var(--space); }
@media (max-width: 47.9375rem) {
  .course-page { --course-gap: var(--space-lg); padding-top: var(--space); }
}

/* Back link: the arrow moves away on hover (live: the link grows 12 wide). */
.course-back { display: inline-flex; align-items: center; gap: var(--space-xxs); justify-self: start; padding-block: var(--space-xs); }
.course-back__arrow { transition: margin var(--duration-hover) var(--ease-hover); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .course-back:hover .course-back__arrow { margin-right: var(--space-sm); }
}
.course-head { display: grid; gap: var(--space-sm); }
/* Title, video and transcript read as one block, as on live: the transcript card sits right under the video. */
.course-lead { display: grid; gap: var(--gap-main); }
.course-lead > .course-head { margin-bottom: var(--space-xs); } /* title → video 24 */

/* ---------- Course menu ---------- */
/* Fill and text follow the page theme: surface on light (lessons), Background/Grey on dark (index). */
.course-menu {
  --menu-bg: var(--color-surface);
  --menu-current-bg: var(--color-bg);
  --menu-current-ink: var(--color-text);
  --menu-dot: var(--color-text-inverted);
  --menu-muted: var(--color-text-grey-inverted);
  --menu-rule: var(--color-text-inverted);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-sm));
}
.theme-dark .course-menu {
  --menu-bg: var(--color-bg-grey);
  --menu-dot: var(--color-text);
  --menu-muted: var(--color-text-grey-on-grey);
  --menu-rule: var(--color-text);
}
.course-menu__panel {
  display: grid;
  overflow: hidden; /* the rounded corners clip the scrollbar of the list inside */
  background: var(--menu-bg);
  border-radius: var(--radius-lg);
}
.course-menu__scroll {
  max-height: calc(100vh - var(--nav-height) - var(--space-md));
  position: relative; /* offsetTop of the current lesson is measured from here (CourseMenu.astro) */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-sm) var(--space-sm); /* rows 16 in from the panel edge (Liliya's review 09.10.2026) */
}
/* Scrollbar: a hairline pill (4 wide) along the right edge, in the text colour — faint at rest, darker under the
   mouse; it keeps clear of the rounded corners and of the sticky head (ends rounded again, 12.10.2026). WebKit/Blink draw it from the pseudo-elements,
   Firefox from the standard props. Thinner on Liliya's review 09.10.2026. */
.course-menu__scroll::-webkit-scrollbar { width: var(--space-xs); }
.course-menu__scroll::-webkit-scrollbar-track { background: transparent; margin-block: var(--space-md) var(--space-sm); }
.course-menu__scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--menu-dot) 18%, transparent) padding-box;
  border: var(--border-thin) solid transparent; /* the same inset on every side keeps both ends round: a 4-wide pill */
  border-radius: var(--radius-pill);
}
.course-menu__scroll:hover::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--menu-dot) 35%, transparent); }
@supports not selector(::-webkit-scrollbar) {
  .course-menu__scroll { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--menu-dot) 25%, transparent) transparent; }
}
.course-menu__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center; /* title and count centred on each other (Liliya's review 09.10.2026) */
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  /* 16 all round, the top 4 more: the title's caps sit high in their line, so it needs a little extra above to look
     centred (optical compensation, Liliya's review 12.10.2026) */
  padding: calc(var(--space-sm) + var(--space-xxs)) var(--space-sm) var(--space-sm);
  background: var(--menu-bg);
  border-bottom: var(--border-medium) dotted var(--menu-rule); /* live: 3 dotted */
  /* a strip of the panel's fill under the dots: lessons scrolling up disappear before they reach the line, instead of
     showing through its gaps (Liliya's review 12.10.2026) */
  box-shadow: 0 var(--space-sm) 0 var(--menu-bg);
}
.course-menu__count, .course-menu__section { color: var(--menu-muted); }
.course-menu__group + .course-menu__group { margin-top: var(--space-sm); }
.course-menu__section { padding: var(--space-xs) var(--space-sm); }
.course-menu__list { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } /* rows 8 apart: step ≈ live 53 at 1728 (Liliya, 09.10.2026) */
.course-menu__link {
  display: flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm); /* more air than live (Liliya's review 09.10.2026) */
  border-radius: var(--radius-sm); /* nested: panel 16 − its 8 */
}
.course-menu__list > li, .course-menu__link { min-width: 0; }
.course-menu__link span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Hover: a dot grows in front of the title and pushes it right (live, 0.2 s). */
.course-menu__link::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  margin-right: 0;
  border-radius: 50%;
  background: var(--menu-dot);
  transition: width var(--duration-hover) var(--ease-hover), height var(--duration-hover) var(--ease-hover), margin var(--duration-hover) var(--ease-hover);
}
@media (hover: hover) {
  .course-menu__link:hover::before { width: var(--space-xs); height: var(--space-xs); margin-right: var(--space-xs); }
}
@media (prefers-reduced-motion: reduce) { .course-menu__link::before { transition: none; } }
.course-menu__link[aria-current="page"] { background: var(--menu-current-bg); color: var(--menu-current-ink); }
.course-menu__link[aria-current="page"]::before { background: var(--menu-current-ink); }
.course-menu__toggle { display: none; }

/* Phones: a bar stuck to the bottom of the screen while the course content scrolls, left behind at the end of it —
   before the bento CTA (Liliya's review 09.10.2026); the list opens above it in a yellow frame.
   How: the menu column lies over the content in the same grid cell and runs its full height; the menu sits at its
   foot with position: sticky, so it can never leave the course section. The content keeps room for the bar. */
@media (max-width: 47.9375rem) {
  .course-layout.grid > .course-main, .course-layout.grid > .course-aside { grid-area: 1 / 1; } /* beats the grid's phone «span 1» */
  .course-layout > .course-main { padding-bottom: var(--space-xl); } /* the bar: 76 high */
  .course-aside { display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
  .course-menu {
    position: sticky;
    top: auto;
    bottom: var(--space-sm);
    z-index: 20;
    pointer-events: auto;
  }
  .course-menu__toggle {
    display: flex;
    align-items: center;
    gap: var(--space);
    width: 100%;
    padding: var(--space-sm) var(--space);
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: var(--radius-lg);
  }
  .theme-dark .course-menu__toggle { background: var(--color-accent-indigo); }
  .course-menu__toggle .course-menu__count { margin-left: auto; color: var(--color-text-grey); }
  .theme-dark .course-menu__toggle .course-menu__count { color: var(--color-text); }
  /* The plus of dots turns a quarter-and-a-half into an × of dots when the list is open (one icon, no swap). */
  .course-menu__icon { width: 1.75rem; height: 1.75rem; flex: none; transition: transform var(--duration-hover) var(--ease-hover); }
  .course-menu.is-open .course-menu__icon { transform: rotate(45deg); }
  /* The list opens at once on tap — no unfold (Liliya's review 09.10.2026: the unfolding mask looked bad). */
  .course-menu__panel {
    display: none;
    margin-bottom: var(--space-xs);
    border: var(--border-thick) solid var(--color-primary);
  }
  .course-menu__scroll { max-height: 60vh; padding-top: var(--space-xs); }
  .course-menu.is-open .course-menu__panel { display: grid; }
  @media (prefers-reduced-motion: reduce) { .course-menu__icon { transition: none; } }
  .course-menu__head { display: none; }
}

/* ---------- Light YouTube player ---------- */
.course-player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.course-player img, .course-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.course-player img { object-fit: cover; }
.course-player__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  cursor: pointer;
}
.course-player__play svg { width: 4.25rem; height: auto; }
/* YouTube's own button: dark until the mouse comes, red under it (YouTube red → the nearest token, Accent/Red). */
.course-player__play .bg { fill: color-mix(in srgb, var(--color-bg) 80%, transparent); transition: fill var(--duration-hover) var(--ease-hover); }
.course-player__play .tri { fill: var(--color-text); }
@media (hover: hover) {
  .course-player__play:hover .bg, .course-player__play:focus-visible .bg { fill: var(--color-accent-red); }
}
.course-player__play:focus-visible { outline: var(--border-thick) solid var(--color-primary); outline-offset: calc(-1 * var(--border-thick)); }

/* ---------- Transcript ---------- */
/* The blog renderer's markup (blog/render/render.mjs) at the lesson's size: live course text, snapped to tokens
   (decision 09.10.2026) — paragraph 16, h2 24, h3 and h4 16 (weight sets them apart) at every width (live phones had h2 28.8: no token,
   and 32 would equal the lesson title). */
.course-transcript { display: grid; gap: var(--space-sm); } /* «Transcript» → text 16 (Liliya, 09.10.2026) */
.course-transcript .post-body {
  /* Birch/Reading M (tokens.css): the blog renderer's text reads the blog's variables, so they point at the style */
  --blog-text-size: var(--text-reading-m-size);
  --blog-text-lh: var(--text-reading-lh);
  --blog-text-weight: 500;
  max-width: none;
  margin: 0;
}
.course-transcript .post-body {
  /* Text rhythm: paragraphs and headings 12 apart — Spacing XS + XXS, the scale has no step between 8 and 16
     (Liliya's review: 16 → 8 on 09.10.2026, then «a little more», 12, on 12.10.2026). */
  --t-gap: calc(var(--space-xs) + var(--space-xxs));
}
.course-transcript .post-body > * { margin: 0 0 var(--t-gap); }
.course-transcript .post-body > :last-child { margin-bottom: 0; }
.course-transcript .post-body p { margin: 0 0 var(--t-gap); }
.course-transcript .post-body h2, .course-transcript .post-body h3, .course-transcript .post-body h4 { --wdth: 100; font-weight: 600; letter-spacing: 0; }
.course-transcript .post-body h2 { margin: var(--space) 0 var(--t-gap); font-size: var(--text-h4-size); line-height: var(--text-h4-lh); }
.course-transcript .post-body h3 { margin: var(--space) 0 var(--space-xs); font-size: var(--text-h6-size); line-height: var(--text-h6-lh); } /* live 17.3 → H6 16, the nearest step */
.course-transcript .post-body h4 { margin: var(--space) 0 var(--space-xs); font-size: var(--text-h6-size); line-height: var(--text-h6-lh); }
.course-transcript .post-body > :first-child { margin-top: 0; }
.course-transcript .post-body ul, .course-transcript .post-body ol { padding-left: var(--space); }
.course-transcript .post-body li { margin: var(--space-xxs) 0; }
/* Links: blue, no underline; a little darker under the mouse (Liliya's review 09.10.2026) — the dark shade is derived
   by rule from the link colour (20% towards black), not a new token. */
.course-transcript .post-body a { text-decoration: none; transition: color var(--duration-hover) var(--ease-hover); }
.course-transcript .post-body a:hover { text-decoration: none; color: color-mix(in srgb, var(--blog-link) 80%, var(--color-text-inverted)); }
.course-transcript .post-body a:focus-visible { outline: var(--border-thin) solid currentColor; outline-offset: var(--space-xxs); border-radius: var(--radius-xs); }
/* Bold inside Reading text is 600 (tokens.css); repeated here because the blog theme's own 700 loads later. */
.course-transcript .post-body strong { font-weight: 600; }
.course-transcript .post-body .a-quote { margin: var(--space) 0; padding: var(--space) var(--space-md); background: var(--color-bg-white); border-radius: var(--radius-md); }
/* Tap targets (WCAG 2.2, ≥ 24): padding on an inline link grows its hit area without moving the lines;
   a link alone on its line («Try strategy») becomes a block of that height. */
.course-transcript .post-body a { padding-block: var(--space-xxs); }
.course-transcript .post-body p > a:only-child { display: inline-block; }

/* ---------- Help Center links ---------- */
.course-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-main); }
.course-help__link {
  display: flex;
  align-items: center;
  min-height: 100%;
  padding: var(--space);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  transition: background-color var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover);
}
/* Hover colour by position, as on live: yellow, green, purple, raspberry, then again (decision 09.10.2026). */
.course-help__link { --hover-bg: var(--color-primary); --hover-ink: var(--color-text-inverted); }
.course-help__link:nth-child(4n + 2) { --hover-bg: var(--color-accent-green-deep); }
.course-help__link:nth-child(4n + 3) { --hover-bg: var(--color-accent-purple); --hover-ink: var(--color-text); }
.course-help__link:nth-child(4n + 4) { --hover-bg: var(--color-accent-raspberry); --hover-ink: var(--color-text); }
@media (hover: hover) {
  .course-help__link:hover, .course-help__link:focus-visible { background: var(--hover-bg); color: var(--hover-ink); }
}
@media (prefers-reduced-motion: reduce) { .course-help__link { transition: none; } }
@media (max-width: 47.9375rem) {
  .course-help { grid-template-columns: 1fr; gap: var(--space-xs); }
  .course-help__link { padding: var(--space-sm); } /* Liliya's review 09.10.2026 */
}

/* Related posts: LinkCard, two in a row (link-card styles: product-blocks.css). */
.course-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--block-gap); column-gap: var(--gap-sm); }
/* phones: stacked cards separated like sections, so a caption clearly belongs to its picture (as LinkCards) */
@media (max-width: 47.9375rem) { .course-posts { grid-template-columns: 1fr; row-gap: var(--section-space); } }

/* ---------- Index ---------- */
.course-intro { display: grid; justify-items: center; gap: var(--space-lg); padding: var(--space-lg) var(--space-lg) 0; } /* sides: Liliya's review 09.10.2026 */
.course-intro h1 { width: 100%; }
.course-intro__wordmark { width: 100%; height: auto; }
.course-intro .btn-group { width: 50%; }
@media (max-width: 47.9375rem) {
  .course-intro { padding: var(--space) 0 0; }
  .course-intro .btn-group { width: 100%; }
}
.course-start svg { width: 1em; height: 1em; flex: none; }
.course-start { gap: var(--space-xs); }

.course-sections { display: grid; gap: var(--space-sm); }
/* A section card: text on the left, picture on the right; hover as on live — lighter fill, yellow frame,
   the picture shrinks to 0.9. */
.course-section-card {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: center;
  gap: var(--space);
  padding: var(--pad-card-fluid);
  background: var(--color-bg-grey);
  border: var(--border-medium) solid var(--color-bg-grey); /* 3, as live (Liliya, 12.10.2026) */
  border-radius: var(--radius-lg);
  transition: background-color var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover);
}
.course-section-card__text { display: grid; align-content: space-between; gap: var(--space-xl); height: 100%; }
.course-section-card__title { display: grid; gap: var(--space-xs); }
.course-section-card .text-grey { color: var(--color-text-grey-on-grey); } /* AA on the grey card (09.10.2026) */
.course-section-card__picture { width: 100%; max-width: 17rem; height: auto; justify-self: end; transition: transform var(--duration-hover) var(--ease-hover); }
@media (hover: hover) {
  .course-section-card:hover, .course-section-card:focus-visible { background: var(--color-bg-grey-hover); border-color: var(--color-primary); }
  .course-section-card:hover .course-section-card__picture { transform: scale(0.9); }
}
@media (prefers-reduced-motion: reduce) { .course-section-card, .course-section-card__picture { transition: none; } }
@media (max-width: 47.9375rem) {
  .course-section-card { grid-template-columns: 1fr; }
  .course-section-card__text { gap: var(--space-sm); }
  .course-section-card__picture { justify-self: center; max-width: 15rem; }
}