/* explain-ui-20260927: the lesson (explanation) page.
   The page's own sheets load lazily AFTER this one, so every rule here is
   prefixed with `html body` to win on specificity instead of order. Colours
   are the app's tokens only, so light, dark, Free and Pro all follow. */

/* ---------- Navbar ---------- */
html body .kv-app-shell .session-page .sn {
  height: 56px;
  background: rgb(var(--kv-chrome-rgb));
  box-shadow: none;
  border-bottom: 1px solid var(--kv-line-2);
}
/* Concept progress along the navbar's bottom edge (the script sets --kvx-progress). */
html body .kv-app-shell .session-page .sn::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: calc(var(--kvx-progress, 0) * 100%);
  height: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--kv-violet);
  transition: width .4s ease;
  pointer-events: none;
}
html body .kv-app-shell .session-page .sn-center {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--kv-line-2);
  border-radius: 999px;
  background: rgba(var(--kv-ink-rgb), .025);
}
html body .kv-app-shell .session-page .sn-prev,
html body .kv-app-shell .session-page .sn-next {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--kv-text-3);
}
html body .kv-app-shell .session-page .sn-progress {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
html body .kv-app-shell .session-page .sn-progress:hover { background: rgba(var(--kv-ink-rgb), .06); }
html body .kv-app-shell .session-page .sn-concept-label { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
html body .kv-app-shell .session-page .sn-action {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--kv-text-3);
}
html body .kv-app-shell .session-page .sn-action:hover { color: var(--kv-text); background: rgba(var(--kv-ink-rgb), .06); }
html body .kv-app-shell .session-page .sn-action.is-active {
  color: var(--kv-brand);
  background: rgba(var(--kv-violet-rgb), .16);
}

/* ---------- Concepts outline ---------- */
/* The live sheet hid the rail's close button, so on desktop the outline could
   only be closed from a small icon on the far side of the navbar. */
html body .kv-app-shell .session-outline-rail .outline-close-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  color: var(--kv-text-3);
}
html body .kv-app-shell .session-outline-rail .outline-close-btn:hover { color: var(--kv-text); background: rgba(var(--kv-ink-rgb), .06); }
html body .kv-app-shell .session-outline-rail .outline-drawer-header,
html body .kv-app-shell .outline-drawer .outline-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* ---------- Reading column ---------- */
html body .kv-app-shell .session-reading-body .bidi-paragraph,
html body .kv-app-shell .session-reading-body p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--kv-text-2);
  margin-block: 0 1.05em;
}
html body .kv-app-shell .session-reading-body .bidi-paragraph[dir=rtl],
html body .kv-app-shell .session-reading-body [dir=rtl] p {
  font-size: 18px;
  line-height: 1.95;
}
html body .kv-app-shell .session-reading-body strong { font-weight: 650; color: var(--kv-text-bright); }

/* Headings: one flowing line of text (never flex items) with a short accent
   bar. Both languages keep one colour: which one comes first varies by heading. */
html body .kv-app-shell .session-reading-body h3.bidi-heading,
html body .kv-app-shell .session-reading-body h4.bidi-heading {
  display: block;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.005em;
  color: var(--kv-text-bright);
  text-wrap: balance;
  border: 0;
  padding-bottom: 0;
}
html body .kv-app-shell .session-reading-body h3.bidi-heading { margin-block: 2.4em .7em; font-size: clamp(21px, 2.2vw, 24px); }
html body .kv-app-shell .session-reading-body h4.bidi-heading { margin-block: 2.1em .6em; font-size: clamp(18.5px, 1.9vw, 20.5px); }
html body .kv-app-shell .session-reading-body h3.bidi-heading::before,
html body .kv-app-shell .session-reading-body h4.bidi-heading::before {
  inset-block: .3em .3em;
  width: 3px;
  opacity: 1;
  background: var(--kv-violet);
}
html body .kv-app-shell .session-reading-body h2:first-child,
html body .kv-app-shell .session-reading-body .break-words:first-child > .bidi-heading:first-child { margin-block-start: 0; }

/* Lists: a real bullet (it was transparent), body-size text, normal weight. */
html body .kv-app-shell .session-reading-body .bidi-list-row {
  gap: .75em;
  margin-block: .25em;
  margin-inline: 0;
  padding-block: .2em;
  font-size: 17px;
  line-height: 1.8;
}
html body .kv-app-shell .session-reading-body .bidi-list-row[dir=rtl] { font-size: 18px; line-height: 1.95; }
html body .kv-app-shell .session-reading-body .bidi-list-row > span:first-child:empty {
  width: 6px;
  height: 6px;
  margin-top: calc(.5lh - 3px);
  background: var(--kv-violet);
  transform: none;
}
html body .kv-app-shell .session-reading-body .bidi-list-row > span:last-child {
  font-size: inherit;
  line-height: inherit;
  font-weight: 400;
  color: var(--kv-text-2);
}
html body .kv-app-shell .session-reading-body .bidi-list-row strong { font-weight: 650; }
html body .kv-app-shell .session-reading-body .my-4:has(> .bidi-list-row) { margin-block: .4em 1.3em; }

/* Figures: the frame hugs the image instead of a full-width empty box, and the
   caption is a quiet two-line note under it. */
html body .kv-app-shell .session-reading-body .markdown-visual-block { margin-block: 1.8em 2em; }
html body .kv-app-shell .session-reading-body .markdown-visual-block figure > div:first-child { margin-block: 0; }
html body .kv-app-shell .session-reading-body .markdown-visual-block figure > div > div.overflow-hidden {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 8px;
  border: 1px solid var(--kv-line-2);
  border-radius: 16px;
  background: var(--panel-solid);
}
html body .kv-app-shell .session-reading-body .markdown-visual-block img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 380px;
  margin-inline: auto;
  border-radius: 10px;
  object-fit: contain;
}
html body .kv-app-shell .session-reading-body .markdown-visual-block figure > div > div.mt-2\.5 {
  justify-content: center;
  max-width: 560px;
  margin: 10px auto 0;
  padding: 0;
}
html body .kv-app-shell .session-reading-body .markdown-visual-block figure > div > div.mt-2\.5 > svg { display: none; }
html body .kv-app-shell .session-reading-body .markdown-visual-block figure p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--kv-text-muted);
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Diagrams: capped to about half a screen and centred; "Expand" opens the full one. */
html body .kv-app-shell .session-reading-body .mermaid-figure { margin-block: 1.8em 2em; }
html body .kv-app-shell .session-reading-body .mermaid-diagram {
  height: auto;
  padding: 18px;
  border: 1px solid var(--kv-line-2);
  border-radius: 16px;
  background: var(--panel-solid);
}
html body .kv-app-shell .session-reading-body .mermaid-diagram svg {
  width: 100%;
  max-height: min(440px, 55vh);
  margin-inline: auto;
}
/* Mermaid sizes each label box from the font it measured; the paragraph rules
   above must not reach the <p> inside its labels or the text gets clipped. */
html body .kv-app-shell .session-reading-body .mermaid-diagram p,
html body .kv-app-shell .session-reading-body .mermaid-diagram [dir] {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
}
html body .kv-app-shell .session-reading-body .mermaid-figure-footer { margin-top: 8px; justify-content: flex-end; }
html body .kv-app-shell .session-reading-body .diagram-expand-button {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  border-radius: 999px;
  color: var(--kv-text-3);
}

/* ---------- Bottom: player + composer ---------- */
/* Room for the handoff card to clear the floating player and composer. */
html body .kv-app-shell .session-page .session-content { padding-bottom: 240px; }
html body .kv-app-shell .session-page .session-composer::before { height: 210px; }

/* ---------- Phones ---------- */
@media (max-width: 639px) {
  html body .kv-app-shell .session-page .sn { height: 52px; }
  /* One quiet chip on phones (prev/next are hidden there); mobile.css would
     inflate it to 44px, so the tap target is restored by an overlay. */
  html body .kv-app-shell .session-page .sn-center { padding: 0; border: 0; background: none; }
  html body .kv-app-shell .session-page .sn-progress {
    position: relative;
    min-height: 34px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--kv-line-2);
  }
  html body .kv-app-shell .session-page .sn-progress::after { content: ""; position: absolute; inset: -5px -2px; }
  html body .kv-app-shell .session-page .session-composer::before { height: 150px; }
  html body .kv-app-shell .session-page .sn-action { width: 38px; min-height: 38px; height: 38px; }

  html body .kv-app-shell .session-reading-header h1 { font-size: clamp(28px, 8vw, 34px); }
  html body .kv-app-shell .session-reading-body .bidi-paragraph,
  html body .kv-app-shell .session-reading-body p,
  html body .kv-app-shell .session-reading-body .bidi-list-row { font-size: 16.5px; line-height: 1.75; }
  html body .kv-app-shell .session-reading-body .bidi-paragraph[dir=rtl],
  html body .kv-app-shell .session-reading-body .bidi-list-row[dir=rtl] { font-size: 17px; line-height: 1.9; }
  html body .kv-app-shell .session-reading-body h3.bidi-heading { font-size: 20px; }
  html body .kv-app-shell .session-reading-body h4.bidi-heading { font-size: 18px; }
  html body .kv-app-shell .session-reading-body .markdown-visual-block img { max-height: 260px; }
  html body .kv-app-shell .session-reading-body .markdown-visual-block figure p { -webkit-line-clamp: 1; }
  html body .kv-app-shell .session-reading-body .mermaid-diagram { padding: 10px; }
  html body .kv-app-shell .session-reading-body .mermaid-diagram svg { max-height: 50vh; }

  /* The composer drops its label on phones (the placeholder says the same) so
     the player and composer stop covering a quarter of the screen. */
  html body .kv-app-shell .session-page .session-composer-label { display: none; }
  html body .kv-app-shell .session-page .session-composer .floating-composer { min-height: 0; padding-block: 6px; }
  html body .kv-app-shell .session-page .session-content { padding-bottom: 200px; }

  /* The floating read-aloud player: 34px controls (mobile.css inflates every
     button to 44px), with the 44px tap target kept by an invisible overlay. */
  html body .read-aloud.is-sticky { padding: 4px 6px; gap: 4px; }
  html body .read-aloud.is-sticky button {
    position: relative;
    min-width: 34px;
    min-height: 34px;
    height: 34px;
    padding-inline: 8px;
  }
  html body .read-aloud.is-sticky button::after { content: ""; position: absolute; inset: -5px -2px; }
  html body .read-aloud.is-sticky .read-aloud-slider { min-width: 70px; }
}