/* =============================================================================
   AgentNet Academy — Hebrew RTL course

   THEME: the academy is a section of the AgentNet news site, not a separate product, so
   its design language is monitor/static/site.css's: a white magazine canvas, hairline
   rules, square corners, one teal accent (--accent, the .ch-ai-news palette), and
   Frank Ruhl Libre for body copy with Heebo for chrome. Token NAMES are kept from the old
   dark build so the rules downstream did not have to be rewritten; only the values moved.

   Design system + motion. Motion follows Emil Kowalski's animation standards
   (github.com/emilkowalski/skills): transform/opacity only, custom easing curves,
   UI motion under 300ms, hover gated to real pointers, reduced-motion honoured.
   ============================================================================= */

:root {
  /* --- paper: the news site's canvas. site.css --page/--wash/--band, same values, so a
         reader moving from /ai to /ai/course/ does not cross a lighting change --- */
  --bg: #fff;
  --band: #f2f1ee;
  /* The dark build's --surface-1/2/3 elevation scale is gone rather than flattened to
     three whites: on paper, depth is carried by a hairline, not by a lighter fill. */

  /* Hairlines, not translucency. A 5%-white fill is nothing at all on paper, and that is
     what every raised surface in the dark build was made of; they use these two instead. */
  --line: #e2e0dc;
  --line-strong: #d3d0ca;

  /* Three fill weights replacing the rgba(255,255,255,x) ladder the dark build used. */
  --tint-1: #f6f6f4;
  --tint-2: #f2f1ee;
  --tint-3: #e9e7e2;

  /* --- text: site.css --ink / --ink2 / --muted --- */
  --text: #14181a;
  --text-soft: #3a4145;
  --muted: #6a7075;

  /* --- brand: the AgentNet teal from .ch-ai-news, tracked value-for-value. It is used as
         small bold TEXT as well as a fill under white text, so it has to clear 4.5:1 both
         ways; #0c9db4 (the artwork's teal) is 3.23 and failed. "bright" now means MORE
         contrast, which on white means darker — a lighter tint would vanish. --- */
  --accent: #0a8093;
  --accent-bright: #0a6f80;
  --accent-deep: #076b7c;
  --brandc: #0e7c8c;
  --link: #12525f;
  --accent2: #5b4b8a;
  --ok: #2f7d55;
  /* Was #a4702a, which measured 3.94:1 against the --wash ground the warn box sits on —
     under the 4.5:1 WCAG 1.4.3 needs for 16px text. Bold does not help: "large text" starts
     at 18.66px bold, and this is 16. Darkened to 5.45:1, same hue. */
  --warn: #8a5a1f;
  --danger: #b3392a;

  /* --- track identity: six tracks, six colours. Re-cut for a white ground — the dark
         build's pastels sat at ~4.5:1 on #0f1218 and ~1.8:1 on paper. --- */
  --t-setup: #0e7c8c;
  --t-foundations: #5b4b8a;
  --t-ml-llms: #a03a63;
  --t-rag: #2f7d55;
  --t-agents: #8f6420;
  --t-production: #26557f;

  /* --- shape: the reference design has no rounded corners anywhere. Radii survive as
         tokens (a few controls are genuinely round) but default to square. --- */
  --radius: 0px;
  --radius-sm: 0px;
  --radius-xs: 0px;
  --shadow-1: none;
  --shadow-2: 0 3px 14px rgba(20, 24, 26, 0.09);
  --ring: 0 0 0 1px var(--line) inset;

  /* --- type: Heebo for chrome and headlines, Frank Ruhl Libre for body copy, exactly as
         site.css .prose does it. The serif is the strongest single cue that these are the
         same publication. --- */
  --font: "Heebo", "Assistant", "Segoe UI", Tahoma, Arial, system-ui, sans-serif;
  --font-serif: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --measure: 66ch;

  /* --- motion: built-in easings are too weak to read as intentional --- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 130ms;
  --dur-fast: 180ms;
  --dur-mid: 240ms;
  --dur-slow: 420ms;
}

/* Per-track accent, set on whatever element carries data-track. Everything downstream
   reads var(--track), so a RAG page and a production page are never the same colour. */
[data-track="setup"]       { --track: var(--t-setup); }
[data-track="foundations"] { --track: var(--t-foundations); }
[data-track="ml-llms"]     { --track: var(--t-ml-llms); }
[data-track="rag"]         { --track: var(--t-rag); }
[data-track="agents"]      { --track: var(--t-agents); }
[data-track="production"]  { --track: var(--t-production); }
[data-track-card="setup"]       { --track: var(--t-setup); }
[data-track-card="foundations"] { --track: var(--t-foundations); }
[data-track-card="ml-llms"]     { --track: var(--t-ml-llms); }
[data-track-card="rag"]         { --track: var(--t-rag); }
[data-track-card="agents"]      { --track: var(--t-agents); }
[data-track-card="production"]  { --track: var(--t-production); }

@supports (font-variation-settings: normal) {
  body { font-synthesis: none; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body:has(.lesson-layout) {
  overflow: hidden;
}

a { color: var(--accent-bright); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: rgba(10, 128, 147, 0.20); }

/* Scrollbars — thin and neutral; the page is paper, so the default is close enough
   that this is only about width. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- header --- */
/* The site's .topbar, rebuilt: opaque white over one hairline, the wordmark at the
   leading edge, a solid accent action at the trailing edge. Values copied from
   monitor/static/site.css so the two mastheads line up at the same height. */
.app-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0.7rem clamp(0.9rem, 3vw, 1.6rem);
  display: flex; align-items: center; gap: 18px;
  width: min(1180px, 100%); margin: 0 auto;
}

body:has(.lesson-layout) .app-header { display: none; }
.hspace { flex: 1; }

.logo { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.logo:hover { color: var(--text); text-decoration: none; }
.logo .mk { width: 34px; height: 34px; color: var(--brandc); flex: none; }
.logo b { font-size: 30px; font-weight: 900; letter-spacing: -0.6px; line-height: 1; }
.logo b i { font-style: normal; color: var(--accent); }
.logo .sl {
  font-size: 12px; color: var(--muted); font-weight: 600;
  border-inline-start: 1px solid var(--line); padding-inline-start: 12px;
}
@media (max-width: 620px) { .logo .sl { display: none; } .logo b { font-size: 24px; } }

/* The masthead's one solid control, same as the site's Telegram button. */
.tgbtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: #fff;
  font-weight: 800; font-size: 14px; padding: 10px 18px; flex: none;
  text-decoration: none;
}
.tgbtn:hover { background: var(--accent-deep); color: #fff; text-decoration: none; }

.brand {
  display: flex; align-items: center; gap: 0.7rem;
  color: inherit; text-decoration: none;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em;
}
.brand-name { color: var(--text); font-size: 1.02rem; }
.brand-badge {
  width: 32px; height: 32px;
  background: var(--brandc);
  display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 1.02rem;
}
.nav-links { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
@media (max-width: 620px) {
  .app-header { gap: 0.5rem; }
  .brand { font-size: 0.95rem; }
  .home-back { min-height: 2rem; padding: 0.28rem 0.58rem; }
  .brand-name { font-size: 0.92rem; }
  .brand span:last-child { white-space: nowrap; }
  .brand-badge { width: 28px; height: 28px; }
  /* One scrollable row beats a wrapped block that eats a third of the viewport. */
  .nav-links {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; max-width: 58vw;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; padding: 0.35rem 0.6rem; font-size: 0.85rem; }
}
.nav-links a {
  position: relative;
  color: var(--muted); font-size: 0.92rem; font-weight: 600;
  padding: 0.4rem 0.8rem;
}
.nav-links a:hover { color: var(--text); background: var(--tint-1); text-decoration: none; }
.nav-links a.active {
  color: var(--text);
  background: var(--tint-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Reading progress for the page — a 2px line, no layout cost. */
.read-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px; z-index: 60;
  background: var(--accent);
  transform: scaleX(var(--read, 0)); transform-origin: right center;
  will-change: transform; pointer-events: none;
}

/* ------------------------------------------------------------- structure --- */
.container { width: min(1140px, 92vw); margin: 0 auto; padding: 1.6rem 0 4.5rem; }

.container.lesson-layout {
  width: min(1280px, 98vw);
  height: 100vh;
  padding: 0.24rem 0 0.36rem;
  gap: 0.28rem;
  overflow: hidden;
}

.hero { padding: clamp(1.6rem, 5vw, 3rem) 0 1.4rem; display: grid; gap: 1rem; }
.hero h1 {
  margin: 0; font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.15;
  font-weight: 900; letter-spacing: -0.03em;
  color: var(--text);
}
.hero p { margin: 0; color: var(--text-soft); font-size: clamp(1rem, 2.2vw, 1.15rem); max-width: var(--measure); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.6rem; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 0.4rem; color: var(--muted); font-size: 0.88rem; }
.hero-stats b { color: var(--text); font-size: 1.15rem; font-weight: 900; display: block; line-height: 1.2; }

h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 900; letter-spacing: -0.02em; }
.section-head {
  border-top: 3px solid var(--text); padding-top: 0.6rem; margin-top: 0.4rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head p { color: var(--muted); margin: 0.2rem 0 0; }

/* --------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  border: 0; padding: 0.7rem 1.4rem;
  font-family: inherit; font-weight: 800; font-size: 0.95rem; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-deep); color: #fff; }
.btn-secondary {
  background: #fff; color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn:hover { text-decoration: none; }
.btn-secondary:hover { background: var(--tint-1); }

/* ----------------------------------------------------------------- cards --- */
.grid { display: grid; gap: 1rem; }
/* Three up, like the site's .cardgrid. auto-fill gave four at desktop, and six tracks into
   four columns leaves a two-card orphan row with a hole beside it. */
.grid-tracks { grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .grid-tracks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-tracks { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  padding: 1.2rem 1.3rem;
}

.lesson-layout .card {
  padding: 0.94rem 1.08rem;
}
.card h2, .card h3 { margin: 0 0 0.45rem; letter-spacing: -0.01em; }
.card > p { margin: 0; color: var(--text-soft); }

/* Track cards get a coloured spine. */
[data-track-card] {
  display: block; overflow: hidden;
  padding-inline-start: 1.5rem;
  color: inherit;
}
[data-track-card]::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 4px; background: var(--track, var(--accent));
}
[data-track-card] h3 { font-size: 1.12rem; }
[data-track-card]:hover { text-decoration: none; }

.track-meta { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: 0.85rem 0 0.2rem; }
.pill {
  font-size: 0.76rem; font-weight: 700; padding: 0.18rem 0.6rem;
  background: var(--tint-1);
  color: var(--text-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pill.purple { background: var(--tint-1); color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--line); }

/* -------------------------------------------------------------- progress --- */
.progress-bar {
  height: 7px; background: var(--tint-2);
  overflow: hidden; margin-top: 0.85rem;
}
.progress-bar > span {
  /* Fills with scaleX rather than width: width relayouts the bar on every frame,
     transform runs on the compositor. --fill is the 0..1 ratio, set by app.js. */
  display: block; height: 100%; width: 100%;
  transform: scaleX(var(--fill, 0)); transform-origin: right center;
  background: var(--track, var(--accent));
  transition: transform var(--dur-slow) var(--ease-out);
}

/* --------------------------------------------------------- lesson layout --- */
.lesson-layout {
  display: grid; grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.28rem; align-items: stretch; align-content: start;
}
@media (max-width: 940px) {
  .lesson-layout { grid-template-columns: 1fr; }
}

.sidebar {
  position: relative; top: auto; z-index: 30;
  overflow: hidden;
  padding: 0.34rem 0.58rem;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.32rem 0.52rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.sidebar h3 {
  margin: 0; font-size: 0.78rem;
  display: flex; align-items: center; gap: 0.45rem;
  white-space: nowrap;
}
.icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  vertical-align: -0.15em;
}
.track-icon {
  color: var(--track, var(--accent));
}
.lesson-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0.22rem; counter-reset: lsn;
  grid-template-columns: repeat(var(--lesson-count, 12), minmax(0, 1fr));
  overflow: visible;
  min-width: 0;
}
/* Deliberately NOT display:grid/flex here. Lesson titles contain <bdi> wrappers around
   English runs, and an inline-level element child of a grid/flex container is blockified
   into its own item — which shoved the rest of the title into a new implicit row inside the
   1.6rem number column. Block flow with an absolutely-placed counter keeps the title as one
   continuous inline run that wraps normally. */
.lesson-list a {
  display: block; position: relative; min-width: 0;
  padding: 0.26rem 0.34rem; padding-inline-start: 1.54rem;
  color: var(--muted); border-radius: var(--radius-xs);
  font-size: 0.72rem; line-height: 1.12;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lesson-list a::before {
  counter-increment: lsn; content: counter(lsn);
  position: absolute; inset-inline-start: 0.38rem; top: 50%; transform: translateY(-50%);
  font-size: 0.66rem; font-weight: 700; color: var(--muted);
  width: 1.08rem; height: 1.08rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tint-1); box-shadow: inset 0 0 0 1px var(--line);
}
.lesson-list a:hover { background: var(--tint-1); color: var(--text); text-decoration: none; }
.lesson-list a.active {
  color: var(--text); font-weight: 700;
  background: var(--tint-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.lesson-list a.active::before {
  background: var(--track, var(--accent)); color: #fff; box-shadow: none;
}
.lesson-list a.done { color: var(--text-soft); }
.lesson-list a.done::before { background: var(--tint-2); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.sidebar .hint { display: none; }
.sidebar .progress-bar { grid-column: 1 / -1; margin-top: 0; height: 5px; }

.lesson-main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  grid-template-areas:
    "header header"
    "animation right";
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.5rem; min-width: 0; min-height: 0; overflow: hidden;
  direction: ltr;
}
.lesson-main > * { direction: rtl; }
.lesson-header { grid-area: header; }
[data-section="animation"] { grid-area: animation; align-self: stretch; min-height: 0; }
[data-section="animation"] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.lesson-right-rail {
  grid-area: right;
  display: grid; gap: 0.42rem; align-self: stretch;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0; overflow: hidden;
}
.lesson-nav { grid-area: nav; direction: rtl; }
@media (max-width: 560px) {
  body:has(.lesson-layout) {
    overflow: auto;
  }
  .container.lesson-layout {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .sidebar { position: static; }
  .sidebar {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .sidebar .lesson-list {
    grid-column: 1 / -1;
  }
  .sidebar .progress-bar {
    grid-column: 1 / -1;
  }
  .lesson-main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "animation"
      "right";
  }
  [data-section="animation"] {
    position: static;
    overflow: visible;
    grid-template-rows: auto auto auto;
  }
  .anim-root svg { max-height: 224px; }
  .lesson-list { gap: 0.18rem; }
  .lesson-list a {
    font-size: 0.62rem;
    padding-inline-start: 1.48rem;
    padding-inline-end: 0.26rem;
  }
  .lesson-list a::before {
    inset-inline-start: 0.24rem;
    width: 1rem; height: 1rem; font-size: 0.56rem;
  }
}
.lesson-header { padding-inline-start: 1.25rem; padding-inline-end: 1.25rem; }
.lesson-header::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 4px; background: var(--track, var(--accent));
}
.lesson-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 1.42rem;
  padding: 0.12rem 0.48rem;
  color: var(--text-soft);
  background: var(--tint-1);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.66rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.lesson-back:hover {
  color: var(--text);
  background: var(--tint-3);
  text-decoration: none;
}
.lesson-header h1 { margin: 0.04rem 0 0; font-size: clamp(1.34rem, 2.6vw, 1.72rem); line-height: 1.12; letter-spacing: -0.02em; }
/* The one-sentence takeaway, stated once, at the top. It used to also appear as a 💡 callout
   halfway down and again as a bullet — three copies of one idea on a four-minute page. */
.lede {
  margin: 0.18rem 0 0; max-width: 70ch;
  font-size: 1rem; line-height: 1.42; color: #161c1f;
  font-weight: 500;
}
.lesson-header .meta {
  color: var(--muted); font-size: 0.82rem; font-weight: 600;
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}
.meta-track { display: inline-flex; align-items: center; gap: 0.3rem; }
.lesson-header .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }

/* ------------------------------------------------------------ anim stage --- */
.anim-stage {
  background: var(--tint-1);
  box-shadow: inset 0 0 0 1px var(--line);
  min-height: 0; height: auto; padding: 0.58rem;
  position: relative; overflow: hidden;
}
.anim-stage::after {
  /* rule in the track colour along the top edge — the reference marks a section with a
     heavy top rule rather than a border on all four sides */
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--track, var(--accent));
}
.anim-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.42rem; }
.anim-head h2 { margin: 0; }
/* Sits in the heading row. It used to float in the stage's corner, where it collided with
   whatever the builder drew in that corner once the svg scaled down on a phone. */
.anim-title {
  flex: none;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-soft);
  background: var(--tint-1);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 0.16rem 0.6rem;
}
.anim-root {
  width: 100%; height: 100%; min-height: 0;
  position: relative; display: grid; place-items: center;
  align-self: center;
}
.anim-root svg {
  width: min(100%, 720px);
  height: auto;
  max-height: min(100%, 370px);
  aspect-ratio: 11 / 6;
  display: block;
}
.anim-caption {
  text-align: center; color: var(--text); font-size: 0.92rem;
  margin: 0.42rem auto 0; min-height: 1.35em; font-weight: 800;
  width: fit-content; max-width: min(100%, 52ch);
  padding: 0.18rem 0.56rem;
  background: var(--tint-1);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Controls as one segmented toolbar rather than three loose pills. */
.anim-controls {
  display: inline-flex; gap: 0.25rem; margin-top: 0.42rem;
  padding: 0.25rem;
  background: var(--tint-1); box-shadow: inset 0 0 0 1px var(--line);
}
.anim-controls button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.32rem;
  background: transparent; color: var(--text-soft);
  border: 0;
  padding: 0.32rem 0.8rem; font-family: inherit; font-size: 0.8rem; font-weight: 700;
  cursor: pointer;
}
.anim-controls button:hover { background: var(--tint-2); color: var(--text); }
.anim-controls button[data-anim="play"] {
  background: var(--tint-3);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ------------------------------------------------------------ lesson body --- */
.lesson-body { font-size: 1.08rem; overflow: hidden; }
.lesson-body p, .lesson-body li, .bullets li, .lede,
.idea, .practice, .warn-box, details.practice > p {
  font-family: var(--font-serif);
}
/* Headings, callout labels and code stay in Heebo — the reference sets its section heads in
   the sans and only the article body in the serif. Scoped to the callouts' own <strong>
   labels rather than every <strong>: a bold run inside a serif sentence must not switch
   family mid-line. */
.lesson-body h2, .lesson-body code,
.idea > strong, .practice > strong, .warn-box > strong,
details.practice > summary { font-family: var(--font); }
.lesson-body > * { max-width: var(--measure); }
.lesson-body h2 {
  font-size: 1.16rem; margin: 0.52rem 0 0.28rem; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 0.55rem;
}
.lesson-body h2:first-child { margin-top: 0; }
.lesson-body h2::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 2px;
  background: var(--track, var(--accent)); flex: none;
}
.lesson-body p { margin: 0 0 0.42rem; color: #1e2427; line-height: 1.62; }
.lesson-body ul, .bullets { padding-inline-start: 0; margin: 0.35rem 0 0.55rem; list-style: none; }
.lesson-body li, .bullets li {
  margin: 0.24rem 0; color: #1e2427; line-height: 1.52;
  padding-inline-start: 1.35rem; position: relative;
}
.lesson-body li::before, .bullets li::before {
  content: ""; position: absolute; inset-inline-start: 0.25rem; top: 0.72em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--track, var(--accent)); opacity: 0.75;
}

/* Callouts. A coloured spine plus a tinted field — kept as flow layout so a callout with a
   leading <strong> and one without (the plain warn-box the builder emits) both read right. */
details.practice { padding: 0; box-shadow: inset 0 0 0 1px var(--line); }
details.practice > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 0.42rem 0.75rem;
  font-weight: 800; color: var(--co);
  display: flex; align-items: center; gap: 0.5rem;
}
details.practice > summary::-webkit-details-marker { display: none; }
details.practice > summary::after {
  content: "+"; margin-inline-start: auto;
  font-weight: 700; color: var(--muted); font-size: 1.1rem; line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out);
}
details.practice[open] > summary::after { content: "−"; }
details.practice > summary:hover { background: var(--tint-1); }
details.practice > p { margin: 0; padding: 0 1.1rem 0.95rem; color: var(--text-soft); }
details.practice::before { inset-block: 0.7rem; }

.idea, .practice, .warn-box {
  --co: var(--accent);
  position: relative;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem; margin: 0.55rem 0;
  padding-inline-start: 1.35rem;
  background: var(--tint-1);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-soft);
}
.idea::before, .practice::before, .warn-box::before {
  content: ""; position: absolute; inset-block: 0.55rem; inset-inline-start: 0;
  width: 3px; border-radius: 3px; background: var(--co);
}
.idea { --co: var(--accent); }
.practice { --co: var(--accent2); }
.warn-box { --co: var(--warn); }
.idea > strong, .practice > strong, .warn-box > strong { color: var(--co); font-weight: 800; }
.practice-actions { margin-top: 0.75rem; }
.practice-reveal { color: var(--ok); font-weight: 600; margin-top: 0.55rem; }

.lesson-body code, code {
  direction: ltr; display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em;
  background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line);
  padding: 0.05em 0.4em;
}
.en-term { color: var(--accent-bright); font-weight: 700; direction: ltr; display: inline-block; }
bdi { unicode-bidi: isolate; }
.source-line { display: none; }

/* ------------------------------------------------------------------ quiz --- */
.quiz-box { align-self: end; }
.quiz-box h2 { font-size: 1.12rem; margin-bottom: 0.35rem; }
.quiz-box .quiz-q { font-size: 0.98rem; font-weight: 700; color: var(--text); margin: 0.05rem 0 0; }
.quiz-options { display: grid; gap: 0.35rem; margin-top: 0.5rem; }
.quiz-opt {
  text-align: start; font-family: inherit; font-size: 0.95rem; font-weight: 600;
  background: #fff; color: var(--text);
  border: 0; box-shadow: inset 0 0 0 1px var(--line-strong);
  border-radius: var(--radius-sm); padding: 0.45rem 0.65rem; cursor: pointer;
}
.quiz-opt:hover:not(:disabled) { background: var(--tint-1); box-shadow: inset 0 0 0 1px var(--accent); }
.quiz-opt:disabled { cursor: default; opacity: 0.75; }
.quiz-opt.correct {
  background: #eaf5ee; opacity: 1;
  box-shadow: inset 0 0 0 1.5px var(--ok);
}
.quiz-opt.wrong {
  background: #fbecea; opacity: 1;
  box-shadow: inset 0 0 0 1.5px var(--danger);
}
.quiz-feedback { font-weight: 800; }
.quiz-explain { color: var(--muted); }

.lesson-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.75rem; flex-wrap: wrap; margin-top: 0.4rem;
}
.mark-done { margin: 0; }

.lesson-layout + .footer {
  display: none;
}

@media (max-height: 560px) {
  .container.lesson-layout {
    width: min(1220px, 98vw);
    padding-block: 0.26rem;
    gap: 0.28rem;
  }
  .lesson-layout .card {
    padding: 0.52rem 0.66rem;
  }
  .sidebar { padding: 0.28rem 0.45rem; }
  .sidebar h3 { font-size: 0.76rem; margin-bottom: 0.18rem; }
  .lesson-list { gap: 0.14rem; }
  .lesson-list a {
    font-size: 0.58rem;
    line-height: 1;
    padding: 0.18rem 0.24rem;
    padding-inline-start: 1.22rem;
  }
  .lesson-list a::before {
    inset-inline-start: 0.2rem;
    width: 0.82rem;
    height: 0.82rem;
    font-size: 0.5rem;
  }
  .sidebar .progress-bar { height: 4px; margin-top: 0.26rem; }
  .lesson-main { gap: 0.28rem; }
  .lesson-header h1 { font-size: 1.05rem; }
  .lesson-header { padding-inline-end: 0.68rem; }
  .lesson-back {
    min-height: 1.35rem;
    padding: 0.12rem 0.42rem;
    font-size: 0.62rem;
  }
  .lede { font-size: 0.76rem; line-height: 1.15; margin-top: 0.08rem; }
  .lesson-header .meta { font-size: 0.66rem; gap: 0.32rem; }
  .anim-head { margin-bottom: 0.2rem; }
  .anim-head h2 { font-size: 1rem; }
  .anim-title { font-size: 0.58rem; padding: 0.1rem 0.46rem; }
  .anim-stage { padding: 0.36rem; }
  .anim-root svg { max-height: 208px; }
  .anim-caption {
    font-size: 0.72rem;
    margin-top: 0.18rem;
    min-height: 1.2em;
  }
  .anim-controls {
    margin-top: 0.22rem;
    padding: 0.18rem;
  }
  .anim-controls button {
    padding: 0.22rem 0.62rem;
    font-size: 0.68rem;
  }
  .lesson-body { font-size: 0.86rem; }
  .lesson-body h2 { font-size: 0.98rem; margin-bottom: 0.14rem; }
  .lesson-body p { line-height: 1.42; margin-bottom: 0.22rem; }
  .lesson-body ul, .bullets { margin: 0.18rem 0 0.24rem; }
  .lesson-body li, .bullets li { margin: 0.08rem 0; }
  details.practice > summary { padding: 0.28rem 0.54rem; }
  .idea, .practice, .warn-box {
    padding-block: 0.34rem;
    margin: 0.3rem 0;
  }
  .quiz-box h2 { font-size: 0.86rem; margin-bottom: 0.12rem; }
  .quiz-box .quiz-q { font-size: 0.78rem; }
  .quiz-options { gap: 0.18rem; margin-top: 0.22rem; }
  .quiz-opt {
    font-size: 0.72rem;
    padding: 0.28rem 0.48rem;
    border-radius: 9px;
  }
}

/* ------------------------------------------------------ onboarding / misc --- */
.onboarding-steps {
  display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  margin: 1.4rem 0;
}
.step-card {
  background: #fff; border: 1px solid var(--line);
  padding: 1.1rem;
}
.step-card strong { display: block; margin-top: 0.1rem; }
.step-card p { color: var(--muted); margin: 0.35rem 0 0; font-size: 0.9rem; }
.step-card .n {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--accent);
  color: #fff; font-weight: 900; margin-bottom: 0.6rem;
}

.glossary-grid { display: grid; gap: 0.55rem; }
.glossary-item {
  display: grid; grid-template-columns: 150px 1fr; gap: 0.9rem; align-items: baseline;
  padding: 0.8rem 1rem;
  background: #fff; border: 1px solid var(--line);
}
.glossary-item span { color: var(--text-soft); }
@media (max-width: 620px) { .glossary-item { grid-template-columns: 1fr; gap: 0.15rem; } }
.glossary-item strong { color: var(--accent-bright); direction: ltr; display: inline-block; font-weight: 800; }

.credits code { color: var(--accent-bright); }
.credits { padding-inline-start: 1.1rem; }
.credits li { margin: 0.45rem 0; color: var(--text-soft); }

/* The site's footer is a full-width wash band, but this element carries .container too, so
   it is centred at 1140px. Breaking out needs the width REPLACED, not just negative margins:
   with .container's fixed width still in force the box is over-constrained, one margin gets
   dropped and the band slides off the trailing edge. width:100vw makes the two negative
   margins resolve to zero and the padding puts the text back on the container's measure. */
.footer {
  border-top: 1px solid var(--line); background: var(--tint-1);
  color: var(--muted); font-size: 0.87rem;
  width: 100vw; margin-top: 2.5rem; margin-inline: calc(50% - 50vw);
  padding: 1.6rem calc((100vw - min(1140px, 92vw)) / 2);
}

.toast {
  position: fixed; bottom: 1.3rem; left: 50%;
  background: var(--text); box-shadow: var(--shadow-2);
  color: #fff; font-weight: 700;
  padding: 0.7rem 1.15rem;
  opacity: 0; pointer-events: none; z-index: 100;
}

/* =========================================================================
   MOTION
   ========================================================================= */

.btn, .anim-controls button, .lesson-list a, .card, .quiz-opt, .nav-links a, .step-card {
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-mid) var(--ease-out),
    color var(--dur-fast) ease,
    opacity var(--dur-fast) ease;
}

/* Press compresses — the single cheapest signal that a control is real. */
.btn:active, .anim-controls button:active, .quiz-opt:active:not(:disabled) {
  transform: scale(0.97); transition-duration: var(--dur-press);
}

/* Hover only where there is a real pointer; on touch it fires on tap and sticks. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .card:hover { box-shadow: var(--ring), var(--shadow-2); }
  [data-track-card]:hover {
    transform: translateY(-3px);
    box-shadow: var(--ring), var(--shadow-2);
  }
  .lesson-list a:hover { transform: translateX(-3px); }   /* RTL: toward the text */
  .step-card:hover { transform: translateY(-2px); }
}

/* Keyboard gets the same affordance as the mouse. */
.btn:focus-visible, .anim-controls button:focus-visible, .quiz-opt:focus-visible,
.lesson-list a:focus-visible, .nav-links a:focus-visible, [data-track-card]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs);
}

/* Entrance: one staggered reveal, 45ms apart, decorative only — the cards are
   clickable from frame one and nothing waits on the animation. */
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.grid-tracks > *, .onboarding-steps > * { animation: riseIn var(--dur-slow) var(--ease-out) both; }
.grid-tracks > :nth-child(2), .onboarding-steps > :nth-child(2) { animation-delay: 45ms; }
.grid-tracks > :nth-child(3), .onboarding-steps > :nth-child(3) { animation-delay: 90ms; }
.grid-tracks > :nth-child(4), .onboarding-steps > :nth-child(4) { animation-delay: 135ms; }
.grid-tracks > :nth-child(5) { animation-delay: 180ms; }
.grid-tracks > :nth-child(6) { animation-delay: 225ms; }

/* Toast: interruptible transition, not a keyframe that cannot be reversed mid-flight. */
.toast {
  transform: translateX(-50%) translateY(10px) scale(0.96);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* Quiz answers settle in rather than snapping. */
.quiz-feedback, .quiz-explain, .practice-reveal { animation: riseIn var(--dur-mid) var(--ease-out) both; }

/* Reduced motion means gentler, not nothing: opacity still carries state, movement goes. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .grid-tracks > *, .onboarding-steps > * { animation: none; opacity: 1; transform: none; }
  .btn:hover, .card:hover, [data-track-card]:hover, .lesson-list a:hover, .step-card:hover { transform: none; }
  .toast, .toast.show { transform: translateX(-50%); transition: opacity 150ms ease; }
}

/* SVG labels. Every <text> the builders emit now carries its own text-anchor and direction —
   the old ones carried neither, so all 48 of them inherited text-anchor:start under the
   page's dir=rtl and drew outside the box they belonged to. This is the safety net for any
   label that slips through unanchored; it must NOT override the explicit ones, or a mixed
   Hebrew/number label would get reordered. */
.anim-root svg text:not([text-anchor]) { text-anchor: middle; direction: ltr; }

/* ===================== skip link =====================
   WCAG 2.4.1 Bypass Blocks, Level A. The course had none on any of its 59 pages: a keyboard
   or screen-reader user had to walk the header and the whole track/lesson nav before
   reaching the lesson itself, on every page. The news site has had one all along; the
   course was built separately and never got it.

   Hidden by transform rather than an off-screen offset — inset-inline-start:-9999px is real
   layout in RTL and drags the document sideways, which is exactly the bug that put 92px of
   horizontal scrolling on the news site's phones. */
.skip-link{
  position:absolute; inset-inline-start:8px; top:0; z-index:200;
  transform:translateY(-150%);
  background:var(--brandc); color:#fff; padding:8px 14px; border-radius:0 0 6px 6px;
  font-weight:700; text-decoration:none;
}
.skip-link:focus{ transform:translateY(0) }

/* Announced to assistive tech, painted nowhere. The animation stages carry a short line
   telling a screen-reader user that the diagram restates the lesson text — otherwise they
   hear "איור מונפש: לולאת הסוכן" and have no way to know whether they are missing content.
   clip-path over display:none, which would remove it from the accessibility tree too. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}