/* ==========================================================================
   TrackLabWidget — styles
   接頭辞は tlab-（tl- は TuningLabWidget が使用済み）

   色・線幅の値は「サイト掲載カリキュラム化の原則」§6・§7 と一致させている。
   描画は SVG ではなく DOM + CSS（指示書 §3）。

   縦の積算（企画書 §6。合計 600px を超えないこと）
     body padding      1 + 1 =   2px
     .tlab-root border 1 + 1 =   2px
     .tlab-transport         =  40px
     Drums   3行 × 24px      =  72px
     トラック境界            =   3px
     Piano  25行 × 12px      = 300px
     トラック境界            =   3px
     Bass   13行 × 12px      = 156px
     .tlab-ruler             =  22px
                        合計 = 600px
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  background: transparent;
  padding: 1px 0;
  -webkit-text-size-adjust: 100%;
}

.tlab-root {
  --tlab-dot: 13px;          /* JS が実測セル幅から min(18px, cellW*0.58) で更新する */
  max-width: 1100px;         /* 指示書 §10：広すぎるとセルが間延びするため上限 */
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  color: #1e293b;
}

body.tlab-embed { padding: 0; }
body.tlab-embed .tlab-root { border-radius: 0; }

/* --------------------------------------------------------------------------
   トランスポート（40px）
   -------------------------------------------------------------------------- */

.tlab-transport {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.tlab-btn {
  flex: 0 0 auto;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  color: #334155;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 11px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.tlab-btn:hover { background: #f1f5f9; }
.tlab-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }

.tlab-btn.primary { background: #2563eb; border-color: #2563eb; color: #ffffff; }
.tlab-btn.primary:hover { background: #1d4ed8; }
.tlab-btn.primary.playing { background: #dc2626; border-color: #dc2626; }
.tlab-btn.primary.playing:hover { background: #b91c1c; }
.tlab-btn:disabled { opacity: .48; cursor: not-allowed; }

.tlab-btn.toggle.on { background: #2563eb; border-color: #2563eb; color: #ffffff; }

.tlab-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tlab-meta b { color: #334155; font-weight: 700; }
.tlab-meta .k { color: #94a3b8; font-weight: 600; margin-right: 3px; }

.tlab-count {
  flex: 0 0 auto;
  min-width: 26px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   quiz モード
   -------------------------------------------------------------------------- */

.tlab-quiz-transport {
  height: auto;
  min-height: 40px;
  flex-wrap: wrap;
  padding-top: 6px;
  padding-bottom: 6px;
}
.tlab-quiz-transport .quiz-submit {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
}
.tlab-quiz-transport .quiz-submit:hover { background: #15803d; }

.tlab-quiz-feedback {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-height: 38px;
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  line-height: 1.55;
}
.tlab-quiz-feedback.correct { background: #f0fdf4; color: #166534; }
.tlab-quiz-feedback.incorrect { background: #fff7ed; color: #9a3412; }
.tlab-quiz-feedback.error { background: #fef2f2; color: #b91c1c; font-weight: 700; }
.tlab-quiz-accuracy { font-weight: 700; font-variant-numeric: tabular-nums; }
.tlab-quiz-detail { color: #7c2d12; }
.tlab-quiz-audio-error {
  flex-basis: 100%;
  color: #b91c1c;
  font-weight: 700;
}
.tlab-quiz-legend { margin-left: auto; color: #64748b; white-space: nowrap; }
.tlab-quiz-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 3px 0 8px;
  border-radius: 50%;
  vertical-align: -1px;
}
.tlab-quiz-legend i:first-child { margin-left: 0; }
.tlab-quiz-legend .match { background: #16a34a; }
.tlab-quiz-legend .missing { background: #ffffff; border: 2px solid #f97316; }
.tlab-quiz-legend .extra { background: #dc2626; }
.tlab-quiz-legend .mismatch { background: #eab308; }
.tlab-quiz-review {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
}
.tlab-review-btn {
  border: 0;
  border-right: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  padding: 4px 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.tlab-review-btn:last-child { border-right: 0; }
.tlab-review-btn[aria-pressed="true"] { background: #334155; color: #ffffff; }

body.tlab-submitted .tlab-cell,
body.tlab-submitted .tlab-note { cursor: default; }
body.tlab-submitted .tlab-note.pitch::after { cursor: default; }

.tlab-note.quiz-matched.pitch { background: #16a34a; border-color: #166534; }
.tlab-note.quiz-matched .tlab-dot { background: #16a34a; }
.tlab-note.quiz-extra.pitch { background: #dc2626; border-color: #991b1b; }
.tlab-note.quiz-extra .tlab-dot { background: #dc2626; }
.tlab-note.quiz-mismatch.pitch { background: #eab308; border-color: #a16207; }
.tlab-note.quiz-mismatch .tlab-dot { background: #eab308; }

.tlab-note.quiz-target { pointer-events: none; z-index: 4; }
.tlab-note.quiz-target.pitch {
  background: transparent;
  border-width: 2px;
  border-style: solid;
}
.tlab-note.quiz-target.quiz-missing.pitch { border-color: #f97316; }
.tlab-note.quiz-target.quiz-mismatch.pitch { border-color: #eab308; border-style: dashed; }
.tlab-note.quiz-target.quiz-matched.pitch { border-color: #16a34a; }
.tlab-note.quiz-target .tlab-dot { background: #ffffff; border: 2px solid; }
.tlab-note.quiz-target.quiz-missing .tlab-dot { color: #f97316; border-color: #f97316; }
.tlab-note.quiz-target.quiz-mismatch .tlab-dot { color: #a16207; border-color: #eab308; border-style: dashed; }
.tlab-note.quiz-target.quiz-matched .tlab-dot { color: #16a34a; border-color: #16a34a; }

body.tlab-review-compare .tlab-note.quiz-target.quiz-matched { display: none; }
body.tlab-review-target .tlab-note.quiz-answer { display: none; }
body.tlab-review-answer .tlab-note.quiz-target { display: none; }

@media (max-width: 600px) {
  .tlab-quiz-transport { gap: 5px; padding: 6px; }
  .tlab-quiz-transport .tlab-btn { padding: 7px 8px; font-size: 11px; }
  .tlab-quiz-transport .tlab-meta {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: flex-end;
    gap: 8px;
  }
  .tlab-quiz-feedback { align-items: flex-start; }
  .tlab-quiz-legend { flex-basis: 100%; margin-left: 0; white-space: normal; }
  .tlab-quiz-review { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   トラック本体
   -------------------------------------------------------------------------- */

.tlab-main { position: relative; }

/* Bass Maker explicitly opts in: only the piano roll scrolls, and the
   transport stays available even in a two-bar question on a small screen. */
.tlab-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.tlab-scroll:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.tlab-length-control { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; background: #f8fafc; }
.tlab-length-control input { width: 64px; min-height: 32px; padding: 5px; border: 1px solid #cbd5e1; border-radius: 5px; font: inherit; }

.tlab-track { display: flex; }
/* 企画書 §4.2：楽器の切れ目は縦の小節線と同じ強さ（3px #334155）にする */
.tlab-track + .tlab-track { border-top: 3px solid #334155; }

/* 左カラム：原則 §6① の「鍵盤エリア幅 60px・背景 #f1f5f9」 */
.tlab-side {
  position: relative;
  flex: 0 0 60px;
  width: 60px;
  background: #f1f5f9;
  display: flex;
  flex-direction: column;
}
/* Keep pitch names beside the visible cells when a Bass question scrolls.
   The opaque side covers notes/cursors sliding behind it, while its normal
   60px flex width still reserves the first column in the roll. */
.tlab-scroll .tlab-side {
  position: sticky;
  left: 0;
  z-index: 10;
  background: #f1f5f9;
  box-shadow: 1px 0 0 #cbd5e1;
}

/* トラック名は左端の縦帯に置き、鍵盤エリアの 60px を削らない */
.tlab-track-name {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 11px;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #94a3b8;
  background: #e2e8f0;
  cursor: pointer;
  border: 0;
  font-family: inherit;
  padding: 0;
}
.tlab-track-name:hover { color: #475569; background: #cbd5e1; }
.tlab-track-name:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }

/* ミュート／ソロ（企画書 §5.1）。色だけでなく帯の M / S 文字と音符の減光でも示す */
.tlab-track-name.muted { background: #94a3b8; color: #ffffff; }
.tlab-track-name.muted:hover { background: #64748b; color: #ffffff; }
.tlab-track-name.solo { background: #eab308; color: #422006; }
.tlab-track-name.solo:hover { background: #ca8a04; color: #ffffff; }

/* ほかがソロ中で鳴らないトラックも、帯を薄くして「今は鳴っていない」を示す */
.tlab-track.inaudible .tlab-track-name:not(.muted):not(.solo) { opacity: .5; }
.tlab-track.inaudible .tlab-notes { opacity: .26; }
.tlab-track.inaudible .tlab-grid { background: #fbfcfd; }
.tlab-track.inaudible .tlab-side { background: #e9eef4; }
.tlab-track.inaudible .tlab-key { color: #94a3b8; }

.tlab-key {
  height: var(--rh);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 0 4px 0 13px;
  font-size: 9px;
  line-height: 1;
  color: #1e293b;                                  /* 原則 §6②：白鍵の音名は濃い文字 */
  background-image: linear-gradient(to top, #e2e8f0 0 0.8px, transparent 0.8px);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
}
.tlab-key:hover { background-color: rgba(37, 99, 235, .10); }
.tlab-key.band { background-color: rgba(51, 65, 85, .08); }   /* 原則 §6②：スケール外＝暗い帯 */
.tlab-key.band:hover { background-color: rgba(37, 99, 235, .10); }
.tlab-key .deg { font-size: 8px; font-weight: 700; color: #2563eb; }
.tlab-key.drum { font-weight: 700; color: #475569; letter-spacing: .04em; }

/* グリッド：全トラックが同じ列数を共有するので列が縦に揃う。
   grid-template-columns の repeat() 回数に var() は使えない（CSS仕様）ため JS が実値を書く */
.tlab-grid {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-auto-rows: var(--rh);
  background: #ffffff;
  box-shadow: inset -3px 0 0 #334155;   /* 末尾の小節線。レイアウト幅に影響させない */
  touch-action: none;
}

/* グリッド線は border ではなく background のグラデーションで描く。
   Chrome は border-width を整数pxへ丸めるため、border だと 1.5px と 0.8px が
   どちらも 1px になり、原則 §7① の「太さで拍子をガイドする」が成立しなくなる。
   グラデーションならサブピクセルのまま描かれ、レイアウト幅も食わない
   （＝セル幅が全列で完全に等しくなり、音符の位置が列境界とぴったり合う）。 */
.tlab-cell {
  --vw: 0.8px;                           /* 既定は16分の細線。線種クラスが上書きする */
  --vc: #e2e8f0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image:
    linear-gradient(to right, var(--vc) 0 var(--vw), transparent var(--vw)),
    linear-gradient(to top, #e2e8f0 0 0.8px, transparent 0.8px);   /* 原則 §6①：横のグリッド線 */
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  touch-action: none;
}
.tlab-cell:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; z-index: 3; }

/* 原則 §7①：ステップ番号から一般式で決まる縦線（太いものが優先） */
.tlab-cell.l-bar  { --vw: 3px;   --vc: #334155; }   /* 小節線（企画書 §4.2 で追加した1段） */
.tlab-cell.l-half { --vw: 2px;   --vc: #475569; }   /* 小節中央＝3拍目の頭 */
.tlab-cell.l-beat { --vw: 1.5px; --vc: #94a3b8; }
.tlab-cell.l-8th  { --vw: 1px;   --vc: #cbd5e1; }
.tlab-cell.l-16th { --vw: 0.8px; --vc: #e2e8f0; }

.tlab-cell.band { background-color: rgba(51, 65, 85, .08); }
.tlab-cell:hover { background-color: rgba(37, 99, 235, .07); }
.tlab-cell.band:hover { background-color: rgba(37, 99, 235, .07); }

body.tlab-preset .tlab-cell { cursor: default; }
body.tlab-preset .tlab-cell:hover { background-color: transparent; }
body.tlab-preset .tlab-cell.band:hover { background-color: rgba(51, 65, 85, .08); }

/* --------------------------------------------------------------------------
   音符
   -------------------------------------------------------------------------- */

.tlab-notes { position: absolute; inset: 0; pointer-events: none; }

.tlab-note {
  position: absolute;
  left: calc(var(--s) * 100% / var(--n));
  width: calc(var(--len) * 100% / var(--n));
  top: calc(var(--r) * var(--rh));
  height: var(--rh);
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
}

/* ドラム：原則 §7② の円（r=9 → 直径18px）をセル幅の58%で相似に保つ */
.tlab-note.drum {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.tlab-dot {
  width: var(--tlab-dot);
  height: var(--tlab-dot);
  border-radius: 50%;
  background: var(--c);
  color: #ffffff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ピッチ：原則 §6③ の角丸矩形。行高12pxに対し rx=4 は丸すぎるため 3px（指示書 §6） */
.tlab-note.pitch {
  background: var(--c);
  border-radius: 3px;
  border: 1px solid rgba(15, 23, 42, .22);
}
.tlab-note.pitch::after {          /* 右端8px：長さ変更のつかみしろ */
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
}
body.tlab-preset .tlab-note { cursor: default; }
body.tlab-preset .tlab-note.pitch::after { cursor: default; }

/* T-6: 開始音（quizモードの事前配置）。消せない・動かせないことを見た目でも示す */
.tlab-note.pitch.given {
  cursor: default;
  border-style: double;
  border-width: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.tlab-note.pitch.given::after { cursor: default; }

/* T-7: lengthFixed=1 のときは長さ変更のつかみしろを見た目からも消す */
body.tlab-lengthfixed .tlab-note.pitch::after { cursor: default; }

.tlab-note.selected { outline: 2px solid #0f172a; outline-offset: 0; z-index: 4; }
.tlab-note.dragging { opacity: .85; z-index: 5; }

/* --------------------------------------------------------------------------
   再生位置（全トラック＋ルーラーを1本の列が貫く＝必ず揃う）
   -------------------------------------------------------------------------- */

.tlab-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(60px + (100% - 60px) * var(--s) / var(--n));
  width: calc((100% - 60px) / var(--n));
  background: rgba(37, 99, 235, .12);
  box-shadow: inset 2px 0 0 #2563eb;
  pointer-events: none;
  z-index: 2;
  /* トランジションを付けない。bpm=240・grid=16 では1ステップが62msしかなく、
     滑らせると再生位置が音より遅れて「今どこが鳴っているか」がズレる（企画書 §3.4） */
}
.tlab-cursor[hidden] { display: none; }
.tlab-cursor.countin { top: auto; height: 22px; background: rgba(234, 88, 12, .18); box-shadow: inset 2px 0 0 #ea580c; }

@media (prefers-reduced-motion: reduce) {
  .tlab-btn { transition: none; }
}

/* --------------------------------------------------------------------------
   ルーラー（22px）
   -------------------------------------------------------------------------- */

.tlab-ruler {
  display: flex;
  height: 22px;
  border-top: 1px solid #cbd5e1;
  background: #f8fafc;
}
.tlab-ruler-side { flex: 0 0 60px; width: 60px; background: #f1f5f9; }
.tlab-ruler-cells {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;                 /* grid-template-columns は JS が実値を書く */
}
/* 企画書 §4.1：拍頭にだけ「小節.拍」を、その拍の線へ左揃えで置く。
   中央寄せにするとセル幅の半分だけ線から離れ、数字と線の対応が狂って見える */
.tlab-tick { position: relative; }
.tlab-tick > span {
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.tlab-tick.bar-head > span { color: #1e293b; font-weight: 700; }

/* --------------------------------------------------------------------------
   幅が足りないときの案内（指示書 §10。PC専用）
   -------------------------------------------------------------------------- */

.tlab-notice {
  max-width: 460px;
  margin: 0 auto;
  padding: 26px 24px;
  text-align: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.tlab-notice .icon { line-height: 0; }
.tlab-notice h1 {
  margin: 12px 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.6;
}
.tlab-notice p {
  font-size: 12px;
  line-height: 1.9;
  color: #64748b;
}
.tlab-notice .req {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   お手本の再生中は打ち込めない（2026-08-22）
   実際に入力を止めているのは app.js の editable()。
   ここは「今は置けない」と伝えるための見た目で、CSSは保険。
   ============================================================ */
.tlab-listening .tlab-grid,
.tlab-listening .tlab-keys {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.tlab-listening .tlab-quiz-feedback::after {
    content: '🎧 お手本を再生中です。鳴り終わってから打ち込んでください。';
    display: block;
    margin-top: 6px;
    color: var(--tlab-accent, #2563eb);
    font-weight: 700;
}