/* 基本情報ハンズオンラボ（fe-lab）の共通スタイル
 *
 * 色は kj.css の変数（--color-* / --kj-*）だけを使う。16進の色を直書きしない。
 * 単元ページはここのクラスを使うだけにし、単元ごとの <style> は最小限にする。
 *
 * 目次
 *   1. 土台・本文へ移動
 *   2. ページ上部（中分類の番号・大分類・題名・一行説明）
 *   3. 図解（ファイルが無い間は「準備中」の枠）
 *   4. 要点（小分類ごとの h3 と、項目名つきの短い説明）
 *   5. さわって確かめる（ハンズオンのカード・ビット・入力欄・結果欄・表）
 *   6. 3問チェック
 *   7. 関連ページ・前後の単元
 *   8. トップの一覧
 */

/* ---------- 1. 土台 ---------- */
.lab-main { padding-bottom: 64px; }
.lab-main [hidden] { display: none !important; }

/* 本文へ移動（フォーカスしたときだけ見える）。lab.js が共通ヘッダより前へ移す */
.lab-skip { position: absolute; left: 8px; top: -100px; z-index: 1000; padding: 12px 16px; border: 2px solid var(--color-text); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font-weight: 700; }
.lab-skip:focus { top: 8px; }

.lab-section { margin-top: 48px; }
.lab-section > h2 { margin: 0 0 16px; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height: var(--kj-leading-heading); }
.lab-section > p { margin: 0 0 12px; }
.lab-note { color: var(--color-text-muted); }
.lab-mono { font-family: var(--kj-font-mono); }
.lab-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 12px; }

/* ---------- 2. ページ上部 ---------- */
.lab-hero { padding: 8px 0 8px; }
.lab-unit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 700; }
.lab-unit-no { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; background: var(--kj-inverse); color: var(--kj-on-inverse); }
.lab-unit-major { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 2px solid var(--color-border); border-radius: 8px; }
.lab-unit-group { color: var(--color-text-muted); }

/* ---------- 3. 図解 ---------- */
/* <figure class="lab-figure"><img ... onerror="this.closest('figure').classList.add('is-missing')"><figcaption>図：…</figcaption></figure>
 * ファイルが無い間は、画像の代わりに同じ縦横比の枠を出し、見出しに「（準備中）」を足す */
.lab-figure { margin: 24px 0 0; }
.lab-figure img { display: block; width: 100%; max-width: 960px; height: auto; margin: 0 auto; }  /* 図解は自分の枠を持つので、ここでは枠を付けない */
.lab-figure figcaption { margin-top: 8px; text-align: center; color: var(--color-text-muted); }
.lab-figure__zoom { display: block; max-width: 960px; margin: 0 auto; border-radius: var(--kj-radius-lg); }
.lab-figure__hint { display: block; }
.lab-figure.is-missing .lab-figure__hint { display: none; }
.lab-figure.is-missing img { display: none; }
.lab-figure.is-missing::before { content: ""; display: block; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; border: 2px dashed var(--color-border); border-radius: var(--kj-radius-lg); background: var(--kj-placeholder); }
.lab-figure.is-missing figcaption { margin-top: -56px; position: relative; padding-bottom: 32px; font-weight: 700; color: var(--color-text); }
.lab-figure.is-missing figcaption::after { content: "（準備中）"; }

/* ---------- 4. 要点 ---------- */
.lab-keypoints-group { margin-top: 28px; }
.lab-keypoints-group > h3 { margin: 0 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--color-border); font-size: 1.25rem; line-height: var(--kj-leading-heading); }
.lab-keypoints { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.lab-keypoints dt { margin-top: 12px; font-weight: 700; color: var(--color-accent); }
.lab-keypoints dd { margin: 2px 0 0; }
.lab-keypoints dd + dd { margin-top: 4px; }
@media (min-width: 720px) {
  .lab-keypoints { grid-template-columns: 11em minmax(0, 1fr); column-gap: 20px; }
  .lab-keypoints dt { grid-column: 1; margin-top: 10px; }
  .lab-keypoints dd { grid-column: 2; margin-top: 10px; }
  .lab-keypoints dd + dd { margin-top: 4px; }
}
.lab-keypoints strong, .lab-try strong, .lab-quiz strong { font-weight: 700; }
.lab-formula { font-family: var(--kj-font-mono); white-space: nowrap; }

/* ---------- 5. さわって確かめる ---------- */
.lab-try { box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; margin-top: 24px; padding: 20px; border: 2px solid var(--color-border); border-radius: var(--kj-radius-lg); background: var(--color-surface); min-width: 0; }
.lab-try > h3 { margin: 0; font-size: 1.25rem; line-height: var(--kj-leading-heading); }
.lab-try__task { margin: 0; padding: 10px 14px; border-radius: var(--kj-radius); background: var(--kj-accent-soft); font-weight: 700; }
.lab-try__task::before { content: "やること："; }
.lab-try__controls { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.lab-try__controls > * { min-width: 0; }

/* 入力欄（kj-input を使う）。ラベルは上、エラーは下 */
.lab-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lab-field > label, .lab-field > .lab-field__label { font-weight: 700; }
.lab-field .kj-input { width: 12em; max-width: 100%; font-family: var(--kj-font-mono); }
.lab-field__error { margin: 0; color: var(--color-danger); font-weight: 700; }
.lab-field__error:empty { display: none; }
.lab-field__error:not(:empty)::before { content: "入力を確かめてください："; }
.kj-input[aria-invalid="true"] { border-color: var(--color-danger); border-width: 3px; }

/* 選択（ラジオを並べたもの）。button の代わりに使ってよい */
.lab-choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.lab-choice legend { margin-bottom: 4px; padding: 0; font-weight: 700; }
.lab-choice label { box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border: 2px solid var(--color-border); border-radius: 10px; background: var(--color-surface); cursor: pointer; font-weight: 700; }
.lab-choice input { width: 20px; height: 20px; accent-color: var(--color-accent); }
.lab-choice label:has(input:checked) { border-color: var(--color-accent); border-width: 3px; background: var(--kj-accent-soft); }

/* ビットの並び（押すと 0⇄1）。button[aria-pressed] で状態を持つ */
.lab-bits { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.lab-bit { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.lab-bit__btn { box-sizing: border-box; width: 44px; height: 52px; border: 2px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-family: var(--kj-font-mono); font-size: 1.375rem; font-weight: 700; cursor: pointer; }
.lab-bit__btn[aria-pressed="true"] { border-color: var(--color-accent); border-width: 3px; background: var(--color-accent); color: var(--color-on-accent); }
.lab-bit__btn:hover { border-color: var(--color-accent); }
.lab-bit__btn[data-mark] { outline: 3px dashed var(--color-danger); outline-offset: 2px; }
.lab-bit__label { font-size: var(--kj-text-small); color: var(--color-text-muted); font-family: var(--kj-font-mono); }
.lab-bits__gap { width: 8px; }
/* スマートフォン幅で7〜8ビットが1行に収まるように少し細くする（高さ52px・幅40pxで、押せる大きさ24px以上は保つ） */
@media (max-width: 420px) { .lab-bits { gap: 4px; } .lab-bit__btn { width: 40px; } .lab-bits__gap { width: 4px; } }

/* 結果欄。aria-live="polite" を付け、Lab.show() で書き換える */
.lab-out { box-sizing: border-box; min-width: 0; padding: 14px 16px; border: 2px dashed var(--color-border); border-radius: var(--kj-radius); background: var(--color-background); }
.lab-out:empty::before { content: "（ここに結果が出ます）"; color: var(--color-text-muted); }
.lab-out p { margin: 0; }
.lab-out p + p { margin-top: 6px; }
.lab-out__big { font-family: var(--kj-font-mono); font-size: 1.5rem; font-weight: 700; overflow-wrap: anywhere; }
.lab-out__steps { margin: 6px 0 0; padding-left: 1.4em; font-family: var(--kj-font-mono); overflow-wrap: anywhere; }
.lab-out__steps li + li { margin-top: 2px; }
.lab-out[data-state="error"] { border-style: solid; border-color: var(--color-danger); background: var(--kj-danger-soft); }
.lab-out[data-state="warn"] { border-style: solid; border-color: var(--color-warning); background: var(--kj-notice-bg); }
.lab-out[data-state="ok"] { border-style: solid; border-color: var(--color-success); background: var(--kj-success-soft); }

/* 結果を並べる表（真理値表など）。狭い画面では横に送れる枠に入れる */
.lab-table-wrap { max-width: 100%; overflow-x: auto; }
.lab-table { border-collapse: collapse; font-family: var(--kj-font-mono); }
.lab-table th, .lab-table td { min-width: 3em; padding: 6px 10px; border: 1px solid var(--color-border); text-align: center; }
.lab-table thead th { background: var(--color-surface-strong); }
.lab-table tr[data-current] td, .lab-table tr[data-current] th { background: var(--kj-accent-soft); font-weight: 700; }
.lab-table tr[data-current] th::after { content: " ◀ いま"; font-family: var(--kj-font); font-size: var(--kj-text-small); }
/* 行ではなくマスを指すとき（4マスの表など）は td に data-current。太枠と「◀ いま」の文字で示す */
.lab-main td[data-current] { outline: 3px solid var(--color-accent); outline-offset: -3px; background: var(--kj-accent-soft); font-weight: 700; }
.lab-main td[data-current]::after { content: "◀ いま"; display: block; font-family: var(--kj-font); font-size: var(--kj-text-small); }

/* 仕分け（data-lab-sort）と並べ替え（data-lab-order）。中身は lab.js が作る。
 * 正誤は枠の色に加えて「○ 正解」「× 不正解」「未選択」「○ この位置で正しい」の文字で示す */
.lab-sort, .lab-order { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lab-sort > *, .lab-order > * { margin: 0; }
.lab-sort__title { font-size: 1.0625rem; line-height: var(--kj-leading-heading); }
.lab-sort__options { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }  /* JS なしのときだけ見える */
.lab-sort__options::before { content: "選択肢："; font-weight: 700; }
.lab-sort__items, .lab-order__items { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; }
.lab-sort__item, .lab-order__item { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; padding: 10px 12px; border: 2px solid var(--color-border); border-radius: var(--kj-radius); background: var(--color-background); }
.lab-sort__q { flex: 1 1 18em; min-width: 0; font-weight: 700; }
.lab-sort__no { margin-right: .5em; font-family: var(--kj-font-mono); }
.lab-sort__select { flex: 0 1 auto; min-width: 10em; max-width: 100%; min-height: 44px; }
.lab-sort__choice { flex: 1 1 100%; min-width: 0; }
.lab-sort__choice > legend { margin-bottom: 8px; }
.lab-sort__result, .lab-order__result { flex: 1 1 100%; margin: 0; font-weight: 700; }
.lab-sort__result:empty, .lab-order__result:empty { display: none; }
.lab-sort__why { display: block; margin-top: 2px; font-weight: 400; color: var(--color-text); }
.lab-sort__item[data-result="ok"], .lab-order__item[data-result="ok"] { border-color: var(--color-success); border-width: 3px; }
.lab-sort__item[data-result="ng"], .lab-sort__item[data-result="blank"], .lab-order__item[data-result="ng"] { border-color: var(--color-danger); border-width: 3px; border-style: dashed; }
[data-result="ok"] > .lab-sort__result, [data-result="ok"] > .lab-order__result { color: var(--color-success); }
[data-result="ng"] > .lab-sort__result, [data-result="blank"] > .lab-sort__result, [data-result="ng"] > .lab-order__result { color: var(--color-danger); }
.lab-order__no { display: inline-flex; align-items: center; justify-content: center; min-width: 2em; min-height: 2em; border-radius: 8px; background: var(--kj-inverse); color: var(--kj-on-inverse); font-family: var(--kj-font-mono); font-weight: 700; }
.lab-order__text { flex: 1 1 12em; min-width: 0; }
.lab-order__name { display: block; font-weight: 700; }
.lab-order__desc { display: block; }
.lab-order__btns { display: inline-flex; gap: 8px; }
.lab-order__btns .kj-btn { min-width: 44px; min-height: 44px; padding: 0 12px; }

/* ---------- 6. 3問チェック ---------- */
.lab-quiz { margin: 0; padding: 0; list-style: none; counter-reset: lab-quiz; }
.lab-quiz__item { counter-increment: lab-quiz; margin-top: 20px; padding: 20px; border: 2px solid var(--color-border); border-radius: var(--kj-radius-lg); background: var(--color-surface); }
.lab-quiz__q { margin: 0 0 12px; font-weight: 700; }
.lab-quiz__q::before { content: "問" counter(lab-quiz) "　"; color: var(--color-accent); }
/* JS なしのとき：選択肢はア・イ・ウ・エの番号つきの一覧、答えは details を開くと読める */
.lab-quiz__choices { margin: 0 0 12px; padding-left: 2.2em; list-style-type: katakana; }
.lab-quiz__choices li + li { margin-top: 4px; }
.lab-quiz__explain summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--color-accent); }
.lab-quiz__explain p { margin: 4px 0 0; }
/* JS ありのとき：選択肢を button にする */
.lab-quiz__buttons { display: grid; gap: 8px; margin: 0 0 12px; }
.lab-quiz__choice { box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px; border: 2px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.lab-quiz__choice:hover:not([aria-disabled="true"]) { border-color: var(--color-accent); background: var(--kj-accent-soft); }
.lab-quiz__choice[aria-disabled="true"] { cursor: default; }
.lab-quiz__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid var(--color-border); border-radius: 50%; font-weight: 700; }
.lab-quiz__tag { margin-left: auto; flex: none; font-weight: 700; font-size: var(--kj-text-small); }
.lab-quiz__choice[data-correct] { border-color: var(--color-success); border-width: 3px; background: var(--kj-success-soft); }
.lab-quiz__choice[data-wrong] { border-color: var(--color-danger); border-width: 3px; background: var(--kj-danger-soft); }
.lab-quiz__choice[data-correct] .lab-quiz__tag { color: var(--color-success); }
.lab-quiz__choice[data-wrong] .lab-quiz__tag { color: var(--color-danger); }
.lab-quiz__result { margin: 0 0 8px; font-weight: 700; }
.lab-quiz__result:empty { display: none; }
.lab-quiz__result[data-state="correct"] { color: var(--color-success); }
.lab-quiz__result[data-state="wrong"] { color: var(--color-danger); }
.lab-quiz-score { box-sizing: border-box; margin-top: 20px; padding: 14px 18px; border: 2px dashed var(--color-border); border-radius: var(--kj-radius); font-weight: 700; }
.lab-quiz-score:empty { display: none; }
.lab-quiz-score[data-state="all"] { border-style: solid; border-width: 3px; border-color: var(--color-success); background: var(--kj-success-soft); }
.lab-quiz-actions { margin-top: 12px; }

/* ---------- 7. 関連ページ・前後の単元 ---------- */
.lab-related { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lab-related a { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 2px solid var(--color-accent); border-radius: 10px; font-weight: 700; text-decoration: none; }
.lab-related a:hover { background: var(--kj-accent-soft); }

.lab-pager { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 48px; }
.lab-pager a { box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 12px 16px; border: 2px solid var(--color-border); border-radius: var(--kj-radius); background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.lab-pager a:hover { border-color: var(--color-accent); }
.lab-pager small { color: var(--color-text-muted); font-size: var(--kj-text-small); }
.lab-pager strong { color: var(--color-accent); }
.lab-pager .lab-pager__next { text-align: right; }

/* ---------- 8. トップの一覧 ---------- */
.lab-group { margin-top: 48px; }
.lab-group > h2 { margin: 0 0 4px; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
.lab-major { margin-top: 28px; }
.lab-major > h3 { margin: 0 0 12px; font-size: 1.25rem; }
.lab-unit-card { box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--color-text); text-decoration: none; }
.lab-unit-card__thumb { box-sizing: border-box; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--kj-placeholder); }
.lab-unit-card__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lab-unit-card__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--kj-text-small); font-weight: 700; color: var(--color-text-muted); }
.lab-unit-card .kj-card__text { color: var(--color-text); }
.lab-done { display: none; }
.lab-unit-card[data-done] .lab-done { display: inline-flex; border-color: var(--color-success); color: var(--color-success); }
.lab-unit-card[data-ready="false"] { border-style: dashed; }
.lab-soon { border-color: var(--color-border); color: var(--color-text-muted); }
.lab-source { margin-top: 16px; }