/* ear: 聴音(旋律・リズム・コード進行) */
.ed-kinds{ margin-top:-4px; }
.ed-note{ font-size:12px; }
.ed-empty{ text-align:center; padding:18px 0; }
.ed-count{ text-align:center; font-size:13px; color:var(--sub); margin:6px 0; }
.ed-fig{ overflow-x:auto; }
.ed-fig svg{ max-width:100%; height:auto; }
.ed-bars-fig{ display:flex; flex-wrap:wrap; gap:8px; }
.ed-bar-fig{ flex:1 1 220px; }

.ed-pad{ display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:8px; margin:10px 0; }
.ed-key{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; }
.ed-key .qk{ color:var(--text-on-paper-muted); font-size:11px; }
.ed-key small{ font-size:11px; color:var(--sub); }

/* 変化記号・オクターブの切り替え */
.ed-pad + .chip-row{ margin-bottom:6px; }

/* リズムのマス */
.ed-grid{ display:flex; flex-direction:column; gap:10px; margin:10px 0 4px; }
.ed-bar{ display:flex; flex-wrap:wrap; align-items:stretch; gap:6px; padding:8px; border:1px solid var(--line); border-radius:10px; position:relative; }
.ed-barno{ flex:0 0 100%; font-size:11px; color:var(--sub); }
.ed-beat{ display:grid; grid-template-columns:repeat(var(--n), 1fr); gap:3px; flex:1 1 0; min-width:0; padding-right:6px; border-right:1px solid var(--line); }
.ed-beat:last-child{ border-right:0; padding-right:0; }
.ed-cell{ min-height:44px; border:1.5px solid var(--line2); border-radius:6px; background:var(--surface); font-size:11px; color:var(--sub); padding:0; }
.ed-cell:hover:not(:disabled){ border-color:var(--accent); }
.ed-cell.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.ed-cell:disabled{ cursor:default; }
.ed-cell.on:disabled{ opacity:.85; }
.ed-cell.good{ background:var(--ok); border-color:var(--ok); color:#fff; }
.ed-cell.extra{ background:var(--ng); border-color:var(--ng); color:#fff; }
.ed-cell.miss{ border:2px dashed var(--ng); color:var(--ng); background:var(--ng-bg); }

/* コード進行の枠 */
.ed-slots{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:10px 0; }
.ed-slot{ min-width:84px; padding:10px 12px; border:2px solid var(--line2); border-radius:10px; background:var(--surface); font-size:16px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.ed-slot.cur{ border-color:var(--accent); background:var(--accent-bg); }
.ed-slot.filled{ font-weight:600; }
.ed-slot:disabled{ cursor:default; }
.ed-slot-no{ font-size:11px; font-weight:400; color:var(--sub); }

/* 答え合わせ */
.ed-reveal{ margin-top:14px; border-top:1px solid var(--line); padding-top:8px; }
.ed-reveal h4{ margin:8px 0 4px; }
.ed-chords{ display:flex; flex-wrap:wrap; gap:8px; }
.ed-chord{ min-width:92px; padding:8px 12px; border:2px solid var(--line); border-radius:10px; display:flex; flex-direction:column; align-items:center; gap:1px; }
.ed-chord b{ font-size:18px; }
.ed-chord span{ font-size:13px; color:var(--sub); }
.ed-chord small{ font-size:11px; color:var(--sub); }
.ed-chord.good{ border-color:var(--ok); background:var(--ok-bg); }
.ed-chord.bad{ border-color:var(--ng); background:var(--ng-bg); }
.ed-chord.playing{ border-color:var(--accent); background:var(--accent-bg); }

.mini-staff .notehead-group.good .notehead, .mini-staff .notehead-group.good .accidental{ fill:var(--ok); }
.mini-staff .notehead-group.good .stem{ stroke:var(--ok); }
.mini-staff .notehead-group.bad .notehead, .mini-staff .notehead-group.bad .accidental{ fill:var(--ng); }
.mini-staff .notehead-group.bad .stem{ stroke:var(--ng); }

.mini-staff .notehead-group.good.playing .notehead, .mini-staff .notehead-group.bad.playing .notehead, .mini-staff .notehead-group.good.playing .accidental, .mini-staff .notehead-group.bad.playing .accidental{ fill:var(--accent); }
.mini-staff .notehead-group.good.playing .stem, .mini-staff .notehead-group.bad.playing .stem{ stroke:var(--accent); }

@media (max-width:640px){
  .ed-pad{ grid-template-columns:repeat(4, 1fr); }
  .ed-cell{ min-height:48px; }
  .ed-slot{ min-width:70px; }
  .ed-chord{ min-width:72px; }
}