/* ===== iPad enhancement layer (word list / handwriting / order) ===== */

/* fix pre-existing bug: #pairsPane/#dataPane's display:block overrode .pane{display:none} */
#pairsPane:not(.on),#dataPane:not(.on){display:none}

/* --- word list pane (visible only on wide screens) --- */
#wlist{display:none}
#cardMain{display:contents}

@media (min-width:1000px){
  #cardPane.on{display:grid; grid-template-columns:330px minmax(0,1fr); height:100%}
  #wlist{display:block; overflow-y:auto; -webkit-overflow-scrolling:touch; border-right:1px solid var(--line); padding:6px 0}
  #cardMain{display:flex; flex-direction:column; height:100%; min-width:0; overflow:hidden}
  #cardArea{flex:1 1 0; min-height:0; overflow-y:auto; padding:10px 24px}
  #hwCanvas{height:140px}
  #extraBar{padding:0 18px 6px}
  #cardMain #gradeBar{padding:8px 18px 12px}
}

.wrow{display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; font-size:14px; border-left:3px solid transparent}
.wrow.cur{background:var(--surface); border-left-color:var(--teal)}
.wrow .no{color:var(--muted); font-size:11px; width:30px; flex:none}
.wrow .wd{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wrow .bx{width:9px; height:9px; border-radius:50%; flex:none; background:var(--line)}
.wrow .bx.b2{background:var(--slate)}
.wrow .bx.b3{background:var(--amber)}
.wrow .bx.b4{background:var(--teal)}
#wlistHead{color:var(--muted); font-size:11px; letter-spacing:.06em; padding:8px 14px 6px}

/* --- handwriting practice --- */
#extraBar{display:flex; justify-content:center; gap:10px; padding:0 18px 10px}
#hwBtn{background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:9px 18px; font-size:13px; font-weight:600; cursor:pointer}
#hwBtn.on{color:var(--teal); border-color:var(--teal)}
#hwWrap{display:none; padding:0 18px 12px}
#hwWrap.on{display:block}
#hwCanvas{width:100%; height:190px; display:block; background:var(--surface); border:1px solid var(--line); border-radius:14px; touch-action:none}
#hwCtrl{display:flex; gap:8px; margin-top:8px; justify-content:center}
#hwCtrl button{background:var(--surface); color:var(--muted); border:1px solid var(--line); border-radius:8px; padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer}
#hwCtrl button.on{color:var(--teal); border-color:var(--teal)}