.breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--space-2);
}
.breadcrumb a {
  color: var(--color-muted);
  text-decoration: none;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--color-accent);
}

.lesson-shell {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.lesson-main {
  min-width: 0;
}

/* スライドとコンテンツを重ねる入れ物。高さはスライドのパネルが決め、
   コンテンツはその上に絶対配置で乗って、中でスクロールする。こうすると
   本文がどれだけ長くてもタブが画面上部に残り、いつでも切り替えられる。

   スライドのパネルは、コンテンツを見ている間も「隠す」だけで流れから
   外さない（hidden ではなく visibility）。外すと入れ物の高さが無くなり、
   コンテンツの領域が潰れる。 */
/* 重ねるのはスライドがあるレッスンだけ（lesson-panels-stacked）。スライドが
   無ければ高さを決めるものが無く、本文を狭い箱に閉じ込める理由も無いので、
   そのまま流してページごとスクロールさせる。 */
.lesson-panels-stacked {
  position: relative;
}

.lesson-shell[data-tab="content"] #panel-slides {
  visibility: hidden;
}

.lesson-panels-stacked #panel-content,
.lesson-panels-stacked #panel-exercises {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  /* スクロールバーが本文に重ならないようにする。 */
  padding-right: var(--space-2);
}

/* 右の列。メモと質問を縦に積む。それぞれ枠の中で完結させ、長い文章を
   書いても列そのものは伸ばさない（伸びるとスライドの高さと揃わなくなる）。

   下の詰めは、下端をスライド（ステージ）の下端に合わせるためのもの。右の列は
   左の列と同じ高さに引き伸ばされるが、左の列はステージの下にナレーション欄を
   持つぶん長い。その差だけ詰めて、中身の終わりをステージの終わりに揃える。
   コンテンツタブでも同じでよい——本文はスライドと同じ大きさの領域に収まり、
   左の列の高さがタブによって変わらないため。

   7.3rem はプレイヤーの .caption の縦の合計（player/src/styles.ts）:
     margin-top 0.9 + padding-top 0.7 + height 5 + padding-bottom 0.7
   この値がずれると揃わなくなるので、
   tests/test_lesson_layout.py が styles.ts と突き合わせている。 */
.lesson-aside {
  min-width: 0;
}

.lesson-aside-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  height: 100%;
}

/* スライドがあるときは、右の列の中身を絶対配置にして行の高さ決定から外す。

   詰めを padding で取ると、その分が右の列自身の高さに足され、右の列の方が
   高くなって行そのものを押し広げる。結果、揃えたいはずの下端が逆に
   ずれる（1024px幅で73px下へ）。絶対配置なら中身は高さに寄与せず、
   行は左の列だけで決まる。 */
.lesson-shell[data-slides="1"] .lesson-aside {
  position: relative;
}

.lesson-shell[data-slides="1"] .lesson-aside-inner {
  position: absolute;
  inset: 0 0 7.3rem 0;
  height: auto;
}

.lesson-memo,
.lesson-llm {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 右の列のタブの行。左の列のタブと同じ行に並べたいので、字の大きさ・
   上下の詰め・下の余白をタブに合わせる（.lesson-tab と .lesson-tabs 参照）。
   高さを直接指定せず同じ構成要素で作るのは、タブ側を触ったときに片方だけ
   ずれるのを避けるため。 */
.lesson-side-tabs {
  display: flex;
  gap: 0.2rem;
  margin-bottom: var(--space-2);
}

.lesson-side-tab {
  font: inherit;
  font-size: var(--text-sm);
  padding: 0.4rem 0.7rem;
  border: none;
  /* 左のタブは選択線2px（.lesson-tab）と行の下線1px（.lesson-tabs）で
     3px分ある。同じだけ取って、下の枠の上端も左右で揃える。 */
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
  line-height: inherit;
}

.lesson-side-tab:hover { color: var(--color-text); }
.lesson-side-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* アクセント色はCTA（購入する・送信する等）専用にしたいので、選択状態の
   タブには使わない。太字＋下線（ニュートラル色）だけで区別する（T14）。 */
.lesson-side-tab.active {
  color: var(--color-text-heading);
  border-bottom-color: var(--color-text-heading);
  font-weight: 700;
}

.lesson-side-body {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-raised);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* タブで1つだけ出すので、開いているペインが残りの高さを全部使う。
   縦に積んでいた頃は、メモと質問で高さを取り合って両方とも小さくなり、
   質問の履歴が5行しか見えなかった。 */
.lesson-side-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lesson-side-pane[hidden] {
  display: none;
}

.lesson-side-body {
  flex: 1;
  min-height: 3rem;
}

/* 枠の高さの変化をテキストエリアまで伝える。間のformが縮まないと、
   枠だけ小さくなって中身がはみ出す。 */
.lesson-memo form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lesson-placeholder {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* .course-complete-bannerのdisplay:flexは詳細度(0,1,0)なので、ブラウザ
   既定の[hidden]{display:none}（UAスタイル）を上書きしてしまい、JSが
   hiddenを外す前から常時表示されていた。詳細度を上げて明示的に勝たせる。 */
.course-complete-banner[hidden] {
  display: none;
}

.course-complete-banner {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-raised);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.course-complete-message {
  margin: 0;
  font-weight: 600;
}

.lesson-cta {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 0.6rem 1.2rem;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.lesson-cta:hover,
.lesson-cta:focus-visible {
  filter: brightness(1.08);
}

/* レッスン本文（courses/<course>/<module>/<lesson>/body.html を差し込む
   領域）向けの規則。旧chapter_detail.html時代の同等ルールを移植した。 */
.lesson-body {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text);
}

/* 注釈。Sphinx は <div class="admonition note"> を出す（種類は2つ目のクラス）。
   手書き時代の <aside class="note"> も残っているので、どちらにも効かせる。 */
.lesson-body .note,
.lesson-body .important,
.lesson-body .admonition {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-raised);
  font-size: var(--text-sm);
}

.lesson-body .important,
.lesson-body .admonition.warning,
.lesson-body .admonition.caution,
.lesson-body .admonition.danger,
.lesson-body .admonition.error { border-left-color: var(--color-fail); }

/* 「注釈」「警告」などの見出し行。本文と同じ大きさだと埋もれる。 */
.lesson-body .admonition-title {
  margin: 0 0 var(--space-1);
  font-weight: 700;
}

/* 注釈の中の最後の段落に余白が残ると、枠の下が間延びする。 */
.lesson-body .admonition > :last-child { margin-bottom: 0; }

.lesson-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
}

.lesson-body th,
.lesson-body td {
  border: 1px solid var(--color-border);
  padding: var(--space-1);
  text-align: left;
}

.lesson-body caption {
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}

/* 図は本文の幅に収める。書籍のHTMLには原寸のまま置かれているものがあり、
   画面が狭いと横にはみ出す（1024px幅で実際に起きた）。object はmermaidの図。 */
.lesson-body img,
.lesson-body svg,
.lesson-body object {
  max-width: 100%;
  height: auto;
}

.lesson-body pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
}

.memo-textarea {
  width: 100%;
  /* 枠に合わせて伸び縮みする。min-height を大きく取ると縮めなくなる。 */
  flex: 1;
  min-height: 2.5rem;
  resize: vertical;
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}

.memo-save {
  margin-top: var(--space-2);
  /* 親をflexにしたので、指定しないと横いっぱいに伸びる。 */
  align-self: flex-start;
}

.memo-saved-hint {
  margin-left: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-pass);
}

.lesson-tabs {
  display: flex;
  gap: 0.2rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
}

.lesson-tab {
  font: inherit;
  font-size: var(--text-sm);
  padding: 0.4rem 0.9rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
}
.lesson-tab:hover:not(:disabled) { color: var(--color-text); }
.lesson-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* .lesson-side-tab.activeと同じ理由でアクセント色を使わない（T14）。 */
.lesson-tab.active {
  color: var(--color-text-heading);
  border-bottom-color: var(--color-text-heading);
  font-weight: 700;
}
/* 無効なタブでも「スライドがあるレッスンもある」と読み取れる程度の
   コントラストは残す（枠線用のトークンを文字色に使うと判読できない）。
   opacity は base.css の button:hover を打ち消すため——ホバーで薄く
   なると押せそうに見えてしまう。 */
.lesson-tab:disabled {
  color: var(--color-muted);
  cursor: default;
  opacity: 1;
}

/* プレイヤーの操作列（shadow DOM）へスロットで差し込まれる。スロットに載る
   中身は light DOM のままなので、ここの規則もトークンもそのまま効く。 */
.slide-autoplay {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-muted);
  white-space: nowrap;
}

mxz-slide-player {
  display: block;
}

@media (max-width: 768px) {
  .lesson-shell {
    grid-template-columns: 1fr;
  }
  /* 1列になるとスライドの隣ではなくなるので、揃えるための詰めは要らない。 */
  .lesson-aside {
    padding-bottom: 0;
  }

  /* 1列では .lesson-aside がスライドと同じ行ではなく独立した行になる。
     下端をスライドに揃えるための絶対配置（L84-92）を解除しないと、
     .lesson-aside に高さを決める中身が無くなって0に潰れ、タブの中身
     （メモ・質問・端末）がはみ出す/重なって崩れる。 */
  .lesson-shell[data-slides="1"] .lesson-aside {
    position: static;
  }

  .lesson-shell[data-slides="1"] .lesson-aside-inner {
    position: static;
  }
}

/* --- 質問欄 ---------------------------------------------------------------- */

/* 質問と回答の並び。枠は .lesson-side-body が持つので、ここは中の配置だけ。 */
.lesson-llm .lesson-side-body {
  gap: var(--space-2);
}

.qa-log {
  flex: 1;
  /* 0 まで潰れると履歴が見えなくなる。入力欄が場所を取るので下限を置く。
     大きくしすぎると右の列の最小の高さが伸び、下端の揃えが崩れる。 */
  min-height: 2.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.qa-item {
  font-size: var(--text-sm);
  line-height: 1.7;
}

.qa-question {
  margin: 0 0 var(--space-1);
  padding-left: var(--space-1);
  border-left: 3px solid var(--color-accent);
  font-weight: 600;
  /* 質問は利用者が書いた文字。長い一続きでも枠を押し広げない。 */
  overflow-wrap: anywhere;
}

.qa-answer {
  margin: 0;
  color: var(--color-text);
  /* LLMの回答は改行で段落を作る。innerHTMLで入れるので、pre-wrapで改行を
     文字のまま残す（タグとしては組み立てない）。 */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.qa-answer code {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.1em 0.3em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

.qa-error {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-fail);
}

/* 入力欄と送信を横に並べる。縦に積むと約120px使い、狭い画面では履歴が
   0まで潰れたうえ、右の列が下へ溢れて下端の揃えも崩れた（1024px幅で
   130px超過）。 */
#question-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
}

.qa-input {
  flex: 1;
  min-width: 0;
  resize: vertical;
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}

.qa-send {
  flex-shrink: 0;
}

.qa-input:disabled,
.qa-send:disabled {
  opacity: 0.6;
  cursor: progress;
}


/* --- 端末 ------------------------------------------------------------------ */

.term-body {
  /* iframe を枠いっぱいに広げる。端末は行数が命なので余白を切り詰める。 */
  padding: 0;
  overflow: hidden;
}

.term-intro {
  padding: var(--space-2);
}

/* 端末が使えない旨の説明。ペインの残り高さいっぱいに広げ、その中央に置く
   （term-bodyがpadding: 0のため、ここで余白も持たせる）。 */
.term-unavailable {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  text-align: center;
}

/* display: flex がUAスタイルシートの [hidden] { display: none } と同じ
   詳細度で衝突し、hidden="true"でも実際には表示されてしまっていた
   （実機で、動作中の端末にこの説明文が重なって見える不具合として確認済み）。
   #lesson-terminal・.term-actions と同じ形で明示的に上書きする。 */
.term-unavailable[hidden] {
  display: none;
}

.term-status {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* 自分のAPIキーを端末に入力してもらうコース向けの注意書き。本文中の
   admonition.warning（lesson_detail.css上部）と同じ左罫線の作りに揃える。 */
.term-caution {
  margin: var(--space-2) 0;
  padding: var(--space-1) var(--space-2);
  border-left: 3px solid var(--color-fail);
  background: var(--color-surface-raised);
  font-size: var(--text-sm);
}

#lesson-terminal {
  flex: 1;
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  /* 端末の背景は黒。読み込み中に白い矩形が出ないようにしておく。 */
  background: #000;
}

#lesson-terminal[hidden] {
  display: none;
}

/* 端末の操作（初期化・破棄）。端末が出ている間だけ見せる。 */
.term-actions {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
}

.term-actions[hidden] {
  display: none;
}

.term-action {
  font-size: var(--text-sm);
  padding: 0.3rem 0.8rem;
  /* どちらも取り消せない操作なので、主要な導線と同じ強さで見せない。 */
  background: var(--color-surface);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}

.term-action:hover:not(:disabled) {
  color: var(--color-fail);
  border-color: var(--color-fail);
}

/* ESCは取り消せない操作ではないので、初期化・破棄と違う色でホバーする。 */
.term-action-esc:hover:not(:disabled) {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* 実機のキーボードでEscが左端にあるのに合わせ、初期化・破棄とは
   離して左端に置く（右マージンを埋めて残りを右端へ押し出す）。 */
.term-action-esc {
  margin-right: auto;
}

/* --- 端末（匿名向けダミー） -------------------------------------------------- */

.term-trial-intro {
  padding: var(--space-2);
}

/* 本物の#lesson-terminalと同じ構成（flex:1の黒画面＋下に説明）。 */
.term-trial-mock {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.term-trial-mock[hidden] {
  display: none;
}

.term-trial-screen {
  flex: 1;
  margin: 0;
  padding: var(--space-2);
  overflow: auto;
  /* 本物の端末（#lesson-terminal）と同じ黒背景にして、見た目を近づける。 */
  background: #000;
  color: #ddd;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
  white-space: pre-wrap;
}

.term-trial-prompt {
  color: #6f6;
}

.term-trial-cmd {
  color: #fff;
}

.term-trial-cta {
  margin: 0;
  padding: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-muted);
}