/*
  app.css — 学習サイト固有のレイアウトと画面パーツ

  ① これは何か: サイドバー付きレイアウト、ダッシュボード、レッスン画面（学習→問題→実践→
     フィードバックの 4 段階）、練習用ターミナル、並べ替え・対応付け問題の見た目。
  ② なぜここにあるか: components.css は DS の部品そのもの。学習サイトにしか無い画面構成は
     DS に無いので、foundations（色・文字・余白・角丸・影）のルールだけを拠り所にここに置く。
  ③ 前提: 値は tokens.css の変数経由。DS の部品で表せるものは components.css のクラスを使う。
  ④ 詳細: ../README.md
*/

/* ================= アプリ全体 ================= */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.skip-link {
  position: absolute;
  left: var(--m);
  top: -100px;
  z-index: 100;
  padding: var(--s) var(--m);
  border-radius: var(--radius-default);
  background: var(--brand-primary);
  color: var(--ink-000);
}

.skip-link:focus { top: var(--m); }

/* ================= サイドバー ================= */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: var(--l) var(--m);
  border-right: 1px solid var(--border-hairline);
  background: var(--neutral-gray-1);
  --text-secondary: var(--neutral-gray-6);
}

.brand {
  display: block;
  color: var(--text-primary);
  text-decoration: none;
}

.brand__name { font-size: var(--fs-16); font-weight: var(--fw-bold); line-height: var(--lh-title); }
.brand__sub { font-size: var(--fs-12); line-height: var(--lh-note); color: var(--text-secondary); }

.sidebar__progress { margin-top: var(--m); }

.meter {
  height: var(--xs);
  border-radius: var(--radius-default);
  background: var(--neutral-gray-2);
  overflow: hidden;
}

.meter__bar { height: 100%; background: var(--brand-primary); transition: width 0.3s ease; }

.sidebar__nav { margin-top: var(--l); }
.sidebar__head { font-size: var(--fs-12); line-height: var(--lh-label); color: var(--text-secondary); margin-bottom: var(--s); }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s);
  padding: var(--s);
  border-radius: var(--radius-default);
  color: var(--neutral-gray-6);
  font-size: var(--fs-14);
  line-height: var(--lh-note);
  text-decoration: none;
}

.nav-item:hover { background: var(--brand-background); color: var(--neutral-gray-6); }
.nav-item[aria-current="page"] { background: var(--brand-background); color: var(--brand-primary); }
.nav-item__num {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--neutral-gray-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-12);
  line-height: var(--lh-label);
  color: var(--neutral-gray-5);
}
.nav-item__num--done { background: var(--success-primary); border-color: var(--success-primary); color: var(--ink-000); }
.nav-item__num--active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--ink-000); }
.nav-item__label { flex: 1; min-width: 0; }

.sidebar__foot {
  margin-top: var(--l);
  padding-top: var(--m);
  border-top: 1px solid var(--border-hairline);
  font-size: var(--fs-12);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.sidebar__foot a { color: var(--neutral-gray-6); }

.sidebar-toggle { display: none; }

/* ================= メイン ================= */
.main { min-width: 0; }

.container {
  max-width: calc(var(--content-max) + var(--xl) * 2);
  margin: 0 auto;
  padding: var(--xl);
}

.page-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s); }
.page-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s); }

/* ================= ダッシュボード ================= */
.hero {
  padding: var(--xl);
  border-radius: var(--radius-default);
  background: var(--grad-hero);
  color: var(--ink-000);
}

.hero__title { font-size: var(--fs-24); font-weight: var(--fw-regular); line-height: var(--lh-title); letter-spacing: var(--ls-title); }
.hero__lead { margin-top: var(--s); font-size: var(--fs-16); line-height: var(--lh-body); max-width: 40em; }
.hero__actions { margin-top: var(--l); display: flex; flex-wrap: wrap; gap: var(--s); }

/* ヒーロー（ブランド面）の上のボタンは白面 + text-primary（action.md） */
.hero .btn--on-brand { background: var(--ink-000); border-color: var(--ink-000); color: var(--text-primary); }
.hero .btn--on-brand:hover { background: var(--brand-background); }

.module-card { display: flex; flex-direction: column; gap: var(--s); }
.module-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s); }
.module-card__title { font-size: var(--fs-16); font-weight: var(--fw-bold); line-height: var(--lh-title); color: var(--text-primary); }
.module-card__goal { font-size: var(--fs-14); line-height: var(--lh-body); color: var(--text-secondary); flex: 1; }
.module-card__meta { display: flex; flex-wrap: wrap; gap: var(--xs); font-size: var(--fs-12); line-height: var(--lh-label); color: var(--text-secondary); }

/* エコシステム図 */
.map { width: 100%; height: auto; }
.map text { font-family: var(--font-sans); font-size: var(--fs-12); fill: var(--neutral-gray-7); }
.map .map__node { fill: var(--ink-000); stroke: var(--neutral-gray-3); }
.map .map__node--ds { fill: var(--brand-background); stroke: var(--brand-primary); }
.map .map__node--git { fill: var(--neutral-gray-1); stroke: var(--neutral-gray-6); }
.map .map__node--ci { fill: var(--success-background); stroke: var(--success-primary); }
.map .map__edge { fill: none; stroke: var(--neutral-gray-4); stroke-width: 1.5; }
.map .map__edge--loop { stroke: var(--brand-primary); stroke-dasharray: 4 3; }
.map .map__label { font-size: var(--fs-12); fill: var(--neutral-gray-5); }
.map .map__title { font-weight: var(--fw-bold); }
.map .map__arrow { fill: var(--neutral-gray-4); }
.map .map__arrow--loop { fill: var(--brand-primary); }

/* ================= レッスン ================= */
.stages {
  display: flex;
  gap: var(--s);
  padding: var(--m);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-default);
  background: var(--neutral-gray-1);
  --text-secondary: var(--neutral-gray-6);
  overflow-x: auto;
}

.stage {
  display: flex;
  align-items: center;
  gap: var(--s);
  flex: 1 1 0;
  min-width: max-content;
  padding: var(--xs) var(--s);
  border-radius: var(--radius-default);
  background: none;
  font-size: var(--fs-14);
  line-height: var(--lh-label);
  color: var(--neutral-gray-6);
  text-align: left;
}

.stage[aria-current="step"] { background: var(--brand-background); color: var(--brand-primary); }
.stage:disabled { cursor: not-allowed; color: var(--neutral-gray-4); }
.stage:not(:disabled):hover { background: var(--brand-background); }
.stage__label { white-space: nowrap; }

.lesson { max-width: var(--content-max); }

.lesson h2 { font-size: var(--fs-18); font-weight: var(--fw-bold); line-height: var(--lh-title); letter-spacing: var(--ls-title); color: var(--text-primary); }
.lesson h3 { font-size: var(--fs-16); font-weight: var(--fw-bold); line-height: var(--lh-title); color: var(--text-primary); }
.lesson p { font-size: var(--fs-16); line-height: var(--lh-body); }
.lesson ul, .lesson ol { padding-left: var(--l); font-size: var(--fs-16); line-height: var(--lh-body); }
.lesson ul { list-style: disc; }
.lesson ol { list-style: decimal; }
.lesson li + li { margin-top: var(--xs); }
.lesson strong { font-weight: var(--fw-bold); color: var(--text-primary); }
.lesson code:not(.inline) { padding: 0 var(--xs); border-radius: var(--radius-default); background: var(--neutral-gray-1); color: var(--neutral-gray-7); font-size: var(--fs-14); }
.lesson .code code { padding: 0; background: none; font-size: inherit; color: inherit; }
.lesson .table code { font-size: var(--fs-12); }

.section { padding: var(--l) 0; border-top: 1px solid var(--border-hairline); }
.section:first-of-type { border-top: 0; padding-top: 0; }
.section > * + * { margin-top: var(--m); }

.section__kicker { display: flex; align-items: center; gap: var(--s); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s);
  padding-top: var(--l);
  border-top: 1px solid var(--border-hairline);
}

/* 4 つの場所（Git 心的モデル）図 */
.flow-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s); }
.flow-4__box { padding: var(--m); border: 1px solid var(--neutral-gray-3); border-radius: var(--radius-default); background: var(--ink-000); text-align: center; }
.flow-4__box--remote { background: var(--brand-background); border-color: var(--brand-primary); }
.flow-4__name { font-size: var(--fs-14); font-weight: var(--fw-bold); line-height: var(--lh-title); color: var(--text-primary); }
.flow-4__desc { margin-top: var(--xs); font-size: var(--fs-12); line-height: var(--lh-note); color: var(--text-secondary); }
.flow-4__cmd { margin-top: var(--s); display: inline-block; padding: 0 var(--xs); border-radius: var(--radius-default); background: var(--neutral-gray-1); font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-body); color: var(--neutral-gray-7); }

@media (max-width: 760px) { .flow-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= 問題（quiz） ================= */
.quiz { display: flex; flex-direction: column; gap: var(--l); }

.question { padding: var(--m); border: 1px solid var(--border-hairline); border-radius: var(--radius-default); }
.question__head { display: flex; gap: var(--s); align-items: flex-start; }
.question__text { flex: 1; font-size: var(--fs-16); line-height: var(--lh-body); color: var(--text-primary); }
.question__type { font-size: var(--fs-12); line-height: var(--lh-label); color: var(--text-secondary); margin-top: var(--xs); }
.question__options { margin-top: var(--s); }
.question__result { margin-top: var(--m); }
.question .code { margin-top: var(--s); }

/* 並べ替え（order） */
.order { display: flex; flex-direction: column; gap: var(--s); }
.order__item {
  display: flex;
  align-items: center;
  gap: var(--s);
  padding: var(--s) var(--m);
  border: 1px solid var(--neutral-gray-3);
  border-radius: var(--radius-default);
  background: var(--ink-000);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--neutral-gray-7);
}
.order__item.is-correct { border-color: var(--success-primary); background: var(--success-background); }
.order__item.is-wrong { border-color: var(--error-primary); background: var(--error-background); }
.order__text { flex: 1; }
.order__ctrl { display: flex; gap: var(--xs); }

/* 対応付け（match） */
.match { display: flex; flex-direction: column; gap: var(--s); }
.match__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s);
  align-items: center;
  padding: var(--s) var(--m);
  border: 1px solid var(--neutral-gray-3);
  border-radius: var(--radius-default);
}
.match__row.is-correct { border-color: var(--success-primary); background: var(--success-background); }
.match__row.is-wrong { border-color: var(--error-primary); background: var(--error-background); }
.match__key { font-size: var(--fs-14); line-height: var(--lh-body); color: var(--neutral-gray-7); }
.match__key code { font-size: var(--fs-12); }
.match__code { padding: var(--s); border-radius: var(--radius-default); background: var(--neutral-gray-1); font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-body); color: var(--neutral-gray-7); white-space: pre-wrap; }
.match__note { grid-column: 1 / -1; font-size: var(--fs-12); line-height: var(--lh-note); color: var(--neutral-gray-6); }

@media (max-width: 760px) { .match__row { grid-template-columns: minmax(0, 1fr); } }

/* ================= 実践：ターミナル ================= */
.practice { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--l); align-items: start; }

@media (max-width: 1000px) { .practice { grid-template-columns: minmax(0, 1fr); } }

.terminal {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-default);
  background: var(--bg-dark);
  color: var(--ink-000);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  overflow: hidden;
}

.terminal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s);
  padding: var(--s) var(--m);
  border-bottom: 1px solid var(--neutral-gray-6);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: var(--lh-label);
  color: var(--neutral-gray-3);
}

.terminal__bar .icon-btn { color: var(--neutral-gray-3); }
.terminal__bar .icon-btn:hover { background: var(--neutral-gray-6); }

.terminal__out {
  height: 360px;
  padding: var(--m);
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.terminal__line { display: block; min-height: 1em; }
.terminal__line--cmd { color: var(--ink-000); }
.terminal__line--cmd::before { content: "$ "; color: var(--brand-smartblue-tertiary); }
.terminal__line--out { color: var(--neutral-gray-3); }
.terminal__line--ok { color: var(--success-secondary); }
.terminal__line--warn { color: var(--warning-secondary); }
.terminal__line--err { color: var(--error-tertiary); }
.terminal__line--claude { color: var(--brand-smartblue-tertiary); }

.terminal__form {
  display: flex;
  align-items: center;
  gap: var(--s);
  padding: var(--s) var(--m);
  border-top: 1px solid var(--neutral-gray-6);
}

.terminal__prompt { color: var(--brand-smartblue-tertiary); white-space: nowrap; }
.terminal__input {
  flex: 1;
  min-width: 0;
  height: var(--control-h);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-000);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
}
.terminal__input:focus { outline: none; }
.terminal__input::placeholder { color: var(--neutral-gray-4); }

.tasks { display: flex; flex-direction: column; gap: var(--s); }
.tasks__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s); }

.task {
  display: flex;
  gap: var(--s);
  align-items: flex-start;
  padding: var(--s) var(--m);
  border: 1px solid var(--neutral-gray-3);
  border-radius: var(--radius-default);
  background: var(--ink-000);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--neutral-gray-7);
}

.task.is-done { border-color: var(--success-primary); background: var(--success-background); }
.task.is-current { border-color: var(--brand-primary); background: var(--brand-background); }
.task.is-locked { color: var(--neutral-gray-5); }
.task__mark { flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--neutral-gray-4); border-radius: var(--radius-full); font-size: var(--fs-12); line-height: var(--lh-label); color: var(--neutral-gray-5); margin-top: 2px; }
.task.is-done .task__mark { background: var(--success-primary); border-color: var(--success-primary); color: var(--ink-000); }
.task.is-current .task__mark { border-color: var(--brand-primary); color: var(--brand-primary); }
.task__body { flex: 1; min-width: 0; }
.task__hint { margin-top: var(--xs); }
.task__hint summary { cursor: pointer; font-size: var(--fs-12); line-height: var(--lh-label); color: var(--brand-primary); }
.task__hint code { display: inline-block; margin-top: var(--xs); font-size: var(--fs-12); }

.team-actions { display: flex; flex-direction: column; gap: var(--s); }

/* ================= フィードバック ================= */
.score {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s);
}

.score__box { padding: var(--m); border: 1px solid var(--border-hairline); border-radius: var(--radius-default); }
.score__label { font-size: var(--fs-12); line-height: var(--lh-label); color: var(--text-secondary); }
.score__value { margin-top: var(--s); font-size: var(--fs-20); font-weight: var(--fw-bold); line-height: var(--lh-label); color: var(--text-primary); }

@media (max-width: 760px) { .score { grid-template-columns: minmax(0, 1fr); } }

.review-list { display: flex; flex-direction: column; gap: var(--s); }
.review-item { display: flex; gap: var(--s); align-items: flex-start; font-size: var(--fs-14); line-height: var(--lh-body); }

.competency { display: flex; flex-wrap: wrap; gap: var(--xs); }

/* ================= レポート ================= */
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m); }
@media (max-width: 760px) { .report-grid { grid-template-columns: minmax(0, 1fr); } }

/* ================= 空状態 ================= */
.empty { padding: var(--xl) var(--m); text-align: center; border: 1px dashed var(--neutral-gray-3); border-radius: var(--radius-default); }
.empty__title { font-size: var(--fs-16); font-weight: var(--fw-bold); line-height: var(--lh-title); color: var(--text-primary); }
.empty__text { margin-top: var(--s); font-size: var(--fs-14); line-height: var(--lh-body); color: var(--text-secondary); }

/* ================= レスポンシブ ================= */
@media (max-width: 1000px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    max-width: calc(100vw - var(--xl));
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: none;
  }
  .sidebar.is-open { transform: none; box-shadow: var(--shadow-default); }
  .sidebar-toggle {
    display: inline-flex;
    position: sticky;
    top: var(--m);
    margin: var(--m) 0 0 var(--l);
    z-index: 30;
    background: var(--ink-000);
    border: 1px solid var(--neutral-gray-3);
  }
  .scrim { position: fixed; inset: 0; z-index: 35; background: var(--neutral-black-40); display: none; }
  .scrim.is-open { display: block; }
}

@media (max-width: 760px) {
  .container { padding: var(--l); }
  .hero { padding: var(--l); }
  .terminal__out { height: 280px; }
}