/**
 * web/assets/learn.css — ポータルv2 WV1(docs/portal-v2-plan-2026-08-07.md §2 P-1)専用の
 * 追加スタイル。/en/session・/en/progress・トップのヒーロー帯(セッション導線+streakチップ)が使う。
 *
 * web/lib/layout.mjs(BASE_STYLE)はこのWPの触ってよい範囲に含まれないため、既存のCSSクラス
 * (.try-item/.try-choices/.try-choice・.study-card-fr/.study-card-ja・.study-results系・
 * .study-courses/.study-course-bar・.cta・.lvlchip・.chapterhead 等)を積極的に再利用し、
 * ここでは「既存クラスで足りない最小限」だけを追加する(study.jsが同じ制約下でインラインstyle
 * に頼ったのと同じ考え方だが、こちらは新規ファイルとして触ってよい範囲内にあるため、
 * 通常のCSSファイルとして書く)。
 *
 * 配色・単位のトークンはlayout.mjs BASE_STYLE の :root 変数(--ink/--ink-2/--link/--rule/
 * --ground/--wash/--ok/--bad/--lvl-a1〜b2 等)をそのまま参照する。CSS変数の解決はカスケードの
 * 計算値決定時に行われるため、定義側(layout.mjsの<style>)と参照側(このファイル)が別々の
 * スタイルシートであっても問題なく効く。
 *
 * ビルド(web/build.mjs)が web/public/en/assets/learn.css へそのままコピーする。
 * 読み込みは各ページの本文(bodyHtml)先頭に <link rel="stylesheet" href="/en/assets/learn.css">
 * を直接書く方式(<head>はlayout.mjsのpage()が組み立てるため触れない。HTML Living Standardは
 * rel="stylesheet" の <link> を body 内に置くことを許容している=body-ok)。
 *
 * 規約: font-sizeはrem/em(px禁止)。:focus-visible・prefers-reduced-motionは既に
 * layout.mjsのBASE_STYLE側で全称ルールとして効くため、ここでは追加しない(重複を避ける)。
 */

/* ===== セッション進行表示(/en/session) ===== */
.learn-progress{font-size:.8125rem;color:var(--ink-2);margin:0 0 .75rem;text-align:center}
.learn-stage-label{font-size:.75rem;font-weight:700;letter-spacing:.03em;color:var(--ink-2);
  text-transform:uppercase;text-align:center;margin:0 0 .5rem}

/* カード本体は既存の .study-card / .study-card-fr / .study-card-ja を流用する
 * (render-session.mjsが同名クラスでマークアップを組み立てる)。 */

/* ===== タイピング採点(3段階目) ===== */
.learn-type-row{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin:1rem 0 0}
.learn-type-input{flex:1 1 14rem;max-width:20rem;padding:.65em .8em;border:1px solid var(--rule);
  border-radius:4px;font-size:1rem;font-family:var(--serif);color:var(--ink);background:var(--ground)}
.learn-type-input:disabled{color:var(--ink-2);background:var(--wash)}
.learn-type-submit{border:1px solid var(--link);color:var(--link);background:none;border-radius:4px;
  padding:.65em 1.2em;font-size:.9375rem;font-weight:700;cursor:pointer;min-height:44px}
.learn-type-submit:disabled{border-color:var(--ink-2);color:var(--ink-2);cursor:default}
.learn-type-feedback{font-size:.9375rem;font-weight:600;color:var(--ink);margin:.75rem 0 0;text-align:center}
.learn-type-feedback.is-correct{color:var(--ok)}
.learn-type-feedback.is-wrong{color:var(--bad)}

/* ===== トップのヒーロー帯: 今日のセッション導線+streakチップ ===== */
.hero-session-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:0 0 1.1em}
.hero-session-cta{background:#fff;color:var(--band);border:1px solid #fff;border-radius:4px;
  padding:.75em 1.4em;font-size:1rem;font-weight:700;text-decoration:none;min-height:44px;
  display:inline-flex;align-items:center}
.hero-session-cta:hover{background:var(--wash)}
.hero-streak-chip{display:inline-flex;align-items:baseline;gap:.3em;font-size:.8125rem;
  color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:4px;padding:.3em .7em}
.hero-streak-chip b{font-size:.9375rem}
.hero-streak-chip[hidden]{display:none}

/* ===== 進捗ダッシュボード(/en/progress) ===== */
.learn-levelsection,.learn-weaksection{margin:0 0 2.2rem}
.learn-progress-empty{background:var(--wash);border:1px solid var(--rule);border-left:3px solid var(--ink-2);
  padding:.9em 1.1em;font-size:.9375rem;color:var(--ink);margin:0 0 1.4rem}
.learn-stat-row{display:flex;flex-wrap:wrap;gap:1.5rem;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:1rem 0;margin:0 0 1.6rem}
.learn-stat{min-width:7rem}
.learn-stat-value{font-size:1.5rem;font-weight:700;color:var(--ink);line-height:1.3}
.learn-stat-label{font-size:.8125rem;color:var(--ink-2)}

.learn-levelbars{list-style:none;padding:0;margin:0 0 1.8rem}
.learn-levelbar{border-bottom:1px solid var(--rule);padding:.7rem 0;font-size:.9375rem}
.learn-levelbar-head{display:flex;align-items:center;gap:.6rem;margin:0 0 .3rem}
.learn-levelbar-count{margin-left:auto;font-size:.8125rem;color:var(--ink-2)}
.learn-levelbar-bar{background:var(--rule);border-radius:100px;height:6px;overflow:hidden}
.learn-levelbar-bar > [data-learn-level-fill]{height:100%;width:0}

.learn-weak-list{list-style:none;padding:0;margin:0 0 1.4rem;border-top:1px solid var(--rule)}
.learn-weak-list li{border-bottom:1px solid var(--rule)}
.learn-weak-row{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;
  text-decoration:none;color:var(--ink);padding:.6rem 0;min-height:44px}
a.learn-weak-row:hover .learn-weak-en{text-decoration:underline}
.learn-weak-en{font-family:var(--serif);font-weight:700}
.learn-weak-ja{font-size:.8125rem;color:var(--ink-2)}
