/* ============================================================
   kz-lesson.css — レッスン画面（2026-10-29〜）
   ------------------------------------------------------------
   正本：docs/DESIGN.md「文字の段」「骨組み」。数値はそこから取る。
   受け持ち：レッスン画面の中身（講座の目次の中身・本文の組版・この回の目次・
   回の終わり・投影）。外枠（上の帯・.app の列・引き出しの土台・ボタン）は kz-base.css。
   本文の部品（箱・表・図・蛍光ペン）は lesson-rich.css。どちらも --kzl-* の段を使う。

   使わない型：ピル型、uppercase、等幅の小さなラベル、左だけ・上だけの色線、
   グラデーション、影（ポップオーバーだけ）、進捗の表示（バー・n/n・達成）。
   ============================================================ */

/* ── 文字の段（PC）。スマホと投影は下で差し替える ── */
.lesson-content {
  --kzl-body: 17px;
  --kzl-lh: 1.8;
  --kzl-h1: 32px;
  --kzl-h2: 24px;
  --kzl-h3: 19px;
  --kzl-point: 19px;
  --kzl-table: 16px;
  --kzl-small: 14px;
  --kzl-measure: var(--kz-measure, 680px);
  --kzl-top: 40px;
}
@media (max-width: 860px) {
  .lesson-content {
    --kzl-body: 16px;
    --kzl-lh: 1.85;
    --kzl-h1: 26px;
    --kzl-h2: 21px;
    --kzl-h3: 18px;
    --kzl-point: 18px;
    --kzl-table: 15px;
    --kzl-top: 24px;
  }
}

/* ── 進捗の表示は出さない（DESIGN.md「入れないもの」） ── */
.scroll-progress,
.app-header__progress { display: none !important; }

/* ── 本文の器 ── */
body[data-route="lesson"] .lesson-content {
  max-width: none;
  margin: 0;
  padding: var(--kzl-top) 0 96px;
  font-family: var(--kz-font);
  font-size: var(--kzl-body);
  line-height: var(--kzl-lh);
  letter-spacing: .02em;
  line-break: strict;
  overflow-wrap: anywhere;
  word-break: normal;
  color: var(--kz-fg);
  background: none;
}
body[data-route="lesson"] .lesson-content > * { max-width: var(--kzl-measure); }

/* 3段目（この回の目次）を本文の右に置く：≥1180px */
.kz-toc { display: none; }
@media (min-width: 1180px) {
  body[data-route="lesson"] .lesson-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 208px;
    column-gap: 48px;
    align-items: start;
  }
  body[data-route="lesson"] .lesson-content > * { grid-column: 1; }
  body[data-route="lesson"] .lesson-content > .kz-toc {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 8;
    position: sticky;
    top: calc(var(--kz-bar-h, 56px) + var(--safe-top, 0px) + 24px);
    max-height: calc(100dvh - var(--kz-bar-h, 56px) - var(--safe-top, 0px) - 48px);
    overflow-y: auto;
    max-width: none;
  }
  body[data-route="lesson"] .lesson-content > .kz-toc[hidden] { display: none; }
}

.kz-toc__label {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kz-fg-3);
}
.kz-sections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.lesson-content .kz-sections,
.sidebar .kz-sections { margin: 0; padding: 0; list-style: none; }
.lesson-content .kz-sections li,
.sidebar .kz-sections li { margin: 0; }
.kz-toc .kz-sections { gap: 6px; }
.kz-toc .kz-sections__link {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kz-fg-2);
  text-decoration: none;
}
.kz-toc .kz-sections__link:hover { color: var(--kz-fg); }
.kz-sections__link[aria-current="location"] { color: var(--kz-accent); font-weight: 700; }

/* ── 講座の目次（左）の中身 ── */
body[data-route="lesson"] .sidebar .sidebar__section-title {
  margin: 0 0 16px;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--kz-fg);
}
body[data-route="lesson"] .sidebar .sidebar__item {
  position: relative;
  justify-content: space-between;
  min-height: 40px;
  box-shadow: none;
}
body[data-route="lesson"] .sidebar .sidebar__item[aria-current="true"] { font-weight: 700; }
body[data-route="lesson"] .sidebar .sidebar__item::before,
body[data-route="lesson"] .sidebar .sidebar__item::after { content: none; display: none; }
body[data-route="lesson"] .sidebar .sidebar__item-number { display: none; }
body[data-route="lesson"] .sidebar .sidebar__item-title { flex: 1 1 auto; min-width: 0; font-size: 15px; }
/* 回の番号（題の上に小さく）と、区切り（前期・後期）の見出し */
.sidebar__item-no { display: block; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--kz-fg-3); }
body[data-route="lesson"] .sidebar .sidebar__item[aria-current="true"] .sidebar__item-no { color: var(--kz-accent); font-weight: 700; }
.sidebar__group { margin: 12px 0 4px; }
.sidebar__back { display: none; }
@media (max-width: 860px) {
  .sidebar__back { display: block; margin: 0 0 12px; }
  .sidebar__back-btn {
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    background: none;
    color: var(--kz-accent);
    font: inherit;
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.sidebar__group:first-child, .sidebar__back + .sidebar__group { margin-top: 0; }
.sidebar__group-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-bottom: 1px solid var(--kz-line);
  border-radius: 0;
  background: none;
  color: var(--kz-fg);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}
.sidebar__group-btn:hover { background: var(--kz-tint); }
.sidebar__group-btn > span:first-child { flex: 1 1 auto; }
.sidebar__group-count { font-size: 14px; font-weight: 400; color: var(--kz-fg-3); }
/* 開閉の印：右向き（畳み）／下向き（開き）の小さな三角を枠線で作る */
.sidebar__group-btn::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  color: var(--kz-fg-3);
}
.sidebar__group-btn[aria-expanded="true"]::after { transform: rotate(45deg); }
.sidebar__item-state {
  flex: none;
  padding-top: 1px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--kz-fg-3);
  white-space: nowrap;
}
.sidebar__item-state--done { color: var(--kz-ok); }
body[data-route="lesson"] .sidebar .sidebar__item--locked { opacity: 1; color: var(--kz-fg-3); }

/* 講座の目次の「この回」：右の目次が無い幅（<1180px）と引き出しで出す */
.kz-nav-here { margin-top: 24px; }
.kz-nav-here__label { margin: 0 0 4px; padding: 0 10px; font-size: 14px; color: var(--kz-fg-3); }
.kz-nav-here .kz-sections__link {
  display: block;
  padding: 6px 10px;
  border-radius: var(--kz-r);
  font-size: 15px;
  line-height: 1.55;
  color: var(--kz-fg-2);
  text-decoration: none;
}
.kz-nav-here .kz-sections__link:hover { background: var(--kz-tint); color: var(--kz-fg); }
@media (min-width: 1180px) {
  .kz-nav-here { display: none; }
}

/* ── 本文の組版（.lp-content。道具が付く前の素の本文にも同じ値） ── */
.lesson-content .lp-content,
.lesson-content:not(:has(.lp-content)) {
  font-size: calc(var(--kzl-body) * var(--lr-font-scale, 1));
  line-height: var(--kzl-lh);
  transition: none;
}
.lesson-content .lp-content { max-width: var(--kzl-measure); }
.lesson-content .lp-content > :first-child { margin-top: 0; }

.kz-course-of {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 12px;
  font-size: var(--kzl-small);
  line-height: 1.6;
  color: var(--kz-fg-3);
}
/* 今の回の位置（「後期 第1回」）。講座名より強く、回の題より弱く */
.kz-course-of__pos { color: var(--kz-accent); font-weight: 700; }

/* 本文の組版は :where() で詳細度を下げて書く。部品（lesson-rich.css のクラス）が必ず勝つので、
   部品ごとの打ち消しが要らない。css/screens.css には要素の規則を置かない。 */
:where(.lesson-content .lp-content) h1 {
  margin: 0 0 24px;
  font-size: var(--kzl-h1);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .03em;
  text-wrap: balance;
  border: 0;
  padding: 0;
}
:where(.lesson-content .lp-content) h2 {
  margin: 64px 0 20px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--kz-line);
  border-radius: 0;
  background: none;
  font-size: var(--kzl-h2);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: .02em;
  text-wrap: balance;
  scroll-margin-top: calc(var(--kz-bar-h, 56px) + var(--safe-top, 0px) + 24px);
}
:where(.lesson-content .lp-content) h3 {
  margin: 40px 0 12px;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--kzl-h3);
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: .02em;
  scroll-margin-top: calc(var(--kz-bar-h, 56px) + var(--safe-top, 0px) + 24px);
}
:where(.lesson-content .lp-content) h4 { margin: 28px 0 8px; font-size: var(--kzl-body); font-weight: 700; }
:where(.lesson-content .lp-content) h1:focus,
:where(.lesson-content .lp-content) h2:focus,
:where(.lesson-content .lp-content) h3:focus { outline: none; }
:where(.lesson-content .lp-content) p { margin: 0 0 20px; }
:where(.lesson-content .lp-content) ul,
:where(.lesson-content .lp-content) ol { margin: 0 0 20px; padding-left: 1.4em; }
:where(.lesson-content .lp-content) li { margin: 0 0 6px; }
:where(.lesson-content .lp-content) li > ul,
:where(.lesson-content .lp-content) li > ol { margin: 6px 0 0; }
:where(.lesson-content .lp-content) strong,
:where(.lesson-content .lp-content) b { font-weight: 700; }
:where(.lesson-content .lp-content) em { font-style: normal; font-weight: 700; }
:where(.lesson-content .lp-content) a { color: var(--kz-accent); text-underline-offset: 3px; }
:where(.lesson-content .lp-content) hr { margin: 48px 0; border: 0; border-top: 1px solid var(--kz-line); }
:where(.lesson-content .lp-content) code {
  padding: 1px 6px;
  border-radius: var(--kz-r);
  background: var(--kz-tint);
  font-size: .92em;
}
:where(.lesson-content .lp-content) img,
:where(.lesson-content .lp-content) video,
:where(.lesson-content .lp-content) iframe {
  max-width: 100%;
  height: auto;
  border-radius: var(--kz-r);
}
:where(.lesson-content .lp-content) figure { margin: 0 0 28px; }
/* 教材に直書きされた小さな文字（style="font-size:12px"）も補助の段に揃える */
:where(.lesson-content .lp-content) figcaption {
  margin-top: 8px;
  font-size: var(--kzl-small) !important;
  line-height: 1.7;
  color: var(--kz-fg-3) !important;
}
:where(.lesson-content .lp-content) .lr-fig figcaption { color: #4a505c !important; }

/* 本文の表（lr-table 以外の素の表も同じ見た目に） */
.lesson-content .lr-table { display: table; }
.lesson-content .lp-content table:not(.lr-table) {
  width: 100%;
  margin: 0 0 28px;
  border-collapse: collapse;
  font-size: var(--kzl-table);
  line-height: 1.65;
}
.lesson-content .lp-content table:not(.lr-table) th,
.lesson-content .lp-content table:not(.lr-table) td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-top: 1px solid var(--kz-line);
}
.lesson-content .lp-content table:not(.lr-table) thead th {
  border-top: 0;
  background: none;
  font-size: var(--kzl-small);
  color: var(--kz-fg-2);
}

/* 教材の中の段取りの帯（「後期 第1回｜座学60分」「全90分」のチップ）は出さない */
.lesson-kicker,
.lesson-meta { display: none !important; }

/* 古い教材の生の表：狭い画面では表の中だけ横にずらす（ページ全体を横に動かさない） */
@media (max-width: 599px) {
  .lesson-content .lp-content table:not(.lr-table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 図：スマホは最小幅520pxで台の中を横にずらす（縮めて読めなくしない） */
.lesson-content .lr-fig > svg { min-width: 520px; }
@media (min-width: 861px) {
  .lesson-content .lr-fig > svg { min-width: 0; }
}

/* クイズ（本文の中の選択肢）：枠1種・角丸4px */
.lesson-content .quiz {
  margin: 0 0 28px;
  padding: 20px 24px;
  border: 1px solid var(--kz-line-strong);
  border-radius: var(--kz-r);
  background: none;
  box-shadow: none;
}
.lesson-content .quiz__option {
  border: 1px solid var(--kz-line-strong);
  border-radius: var(--kz-r);
  background: var(--kz-bg);
  color: var(--kz-fg);
  box-shadow: none;
}
.lesson-content .quiz__option[data-state="correct"] { border-color: var(--kz-ok); color: var(--kz-ok); }
.lesson-content .quiz__option[data-state="wrong"] { border-color: var(--kz-warn); color: var(--kz-warn); }
.lesson-content .quiz__feedback { font-size: var(--kzl-small); color: var(--kz-fg-2); }

/* ── 回の終わり：前の回／次の回の2つの枠 ── */
.lesson-content .kz-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin: 64px 0 0;
  padding: 0;
  border: 0;
}
.kz-pager__item {
  position: relative;
  display: block;
  min-width: 0;
  padding: 16px 20px;
  border: 1px solid var(--kz-line);
  border-radius: var(--kz-r);
  background: none;
  color: var(--kz-fg);
  text-decoration: none;
  font-size: var(--kzl-body);
  line-height: 1.6;
}
a.kz-pager__item:hover,
.kz-pager__next:hover { border-color: var(--kz-fg-3); }
.kz-pager__item small {
  display: block;
  margin-bottom: 2px;
  font-size: var(--kzl-small);
  color: var(--kz-fg-3);
}
.kz-pager__item small + span { display: block; }
.lesson-content a.kz-pager__item,
.lesson-content a.kz-pager__link { color: var(--kz-fg); text-decoration: none; }
.kz-pager__next { text-align: right; }
.kz-pager__link { display: block; color: inherit; text-decoration: none; }
/* 次の回の枠は全体を押せるようにし、「完了にする」だけは別に押せるよう前に出す */
.kz-pager__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--kz-r); }
.kz-pager__link:focus-visible { outline: none; }
.kz-pager__link:focus-visible::after { outline: 2px solid var(--kz-accent); outline-offset: 2px; }
.kz-pager__mark,
.kz-pager__done {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: 8px;
  font-size: var(--kzl-small);
  line-height: 1.6;
}
.kz-pager__mark {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--kz-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.kz-pager__mark:disabled { color: var(--kz-fg-3); cursor: default; }
.kz-pager__done { color: var(--kz-ok); }
@media (max-width: 860px) {
  .lesson-content .kz-pager { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
}

/* ── 講座の最後・未公開の回（演出なし） ── */
.lesson-content .course-complete,
.lesson-content .lesson-lock {
  display: block;
  max-width: var(--kzl-measure);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
}
.lesson-content .course-complete__title,
.lesson-content .lesson-lock__title {
  margin: 0 0 16px;
  font-size: var(--kzl-h1);
  line-height: 1.35;
}
.lesson-content .course-complete__body,
.lesson-content .lesson-lock__msg,
.lesson-content .lesson-lock__countdown,
.lesson-content .lesson-lock__hint {
  margin: 0 0 12px;
  font-size: var(--kzl-body);
  color: var(--kz-fg-2);
}
.lesson-content .lesson-lock__icon { display: none; }
.course-complete__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ── 投影（上の帯の「投影する」／キー P） ──
   左右の目次と道具を畳み、本文22px・幅1080px。上の帯と「次の回へ」は残す。 */
body.kz-proj[data-route="lesson"] .lesson-content {
  --kzl-body: 22px;
  --kzl-lh: 1.75;
  --kzl-h1: 44px;
  --kzl-h2: 34px;
  --kzl-h3: 26px;
  --kzl-point: 26px;
  --kzl-table: 20px;
  --kzl-small: 18px;
  --kzl-measure: 1080px;
  display: block;
}
body.kz-proj[data-route="lesson"] .lesson-content > .kz-toc,
body.kz-proj[data-route="lesson"] .lesson-content > .lp-toolbar { display: none; }
body.kz-proj[data-route="lesson"] .lesson-content > * { margin-left: auto; margin-right: auto; }
body.kz-proj[data-route="lesson"] .lesson-content .lr-fig > svg { min-width: 0; }
body.kz-proj[data-route="lesson"] .lesson-content .lp-content > p,
body.kz-proj[data-route="lesson"] .lesson-content .lp-content li { max-width: none; }
@media (min-width: 861px) {
  body.kz-proj[data-route="lesson"] .app {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1112px) minmax(0, 1fr);
  }
  body.kz-proj[data-route="lesson"] .app > .sidebar { display: none; }
  body.kz-proj[data-route="lesson"] .app > .main {
    grid-column: 2;
    padding-left: max(16px, var(--safe-left, 0px));
    padding-right: max(16px, var(--safe-right, 0px));
  }
}

/* ── 動きを減らす設定 ── */
@media (prefers-reduced-motion: reduce) {
  .lesson-content.nva-enter { animation: none; }
}

/* ── 印刷：目次と道具を外し、本文だけ ── */
@media print {
  .lesson-content > .kz-toc,
  .lesson-content > .lp-toolbar,
  .lesson-content > .kz-pager,
  .kz-nav-here { display: none !important; }
  body[data-route="lesson"] .lesson-content { display: block; padding: 0; }
}

/* 2026-10-29 検品の指摘：右の欄に「この回の目次」が出る幅では、道具の列の同じボタンを出さない */
@media (min-width: 1180px) {
  body:not(.kz-proj) .lp-toolbar [data-panel="toc"] { display: none; }
}