/* ลำดับขั้นตอนหน้านักเรียน (หน้าแรก + หน้าใบงาน): ใหญ่ ชัด กดง่ายบนมือถือ */
.flow-who { display:flex; align-items:center; gap:12px; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.flow-avatar { width:44px; height:44px; flex:none; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:800; font-size:1.2rem; }
.flow-who-text { flex:1; min-width:0; line-height:1.3; }
.flow-who-text strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flow-who button.small-btn, .doc-bar button.small-btn { flex:none; width:auto; min-height:44px; padding:0 16px; white-space:nowrap; }

/* แถบขั้นตอน 1-2-3 */
.flow-steps { list-style:none; margin:0 0 14px; padding:0; display:flex; gap:6px; counter-reset:none; }
.flow-steps li { flex:1; display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:14px; background:var(--card-alt); border:2px solid var(--line); color:var(--muted); min-width:0; }
.flow-steps .n { flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.95rem; background:var(--line); color:var(--ink); }
.flow-steps .t { font-size:.92rem; font-weight:700; line-height:1.15; overflow:hidden; text-overflow:ellipsis; }
.flow-steps li.now { border-color:var(--accent); background:var(--accent-light); color:var(--accent); }
.flow-steps li.now .n { background:var(--accent); color:var(--accent-ink); }
.flow-steps li.done { border-color:var(--ok); color:var(--ok); }
.flow-steps li.done .n { background:var(--ok); color:#fff; font-size:0; }
.flow-steps li.done .n::after { content:"✓"; font-size:.95rem; }
.flow-home.is-locked .flow-steps li[data-s="1"] { border-color:var(--warn); background:var(--yellow-light); color:var(--warn); }
.flow-home.is-locked .flow-steps li[data-s="1"] .n { background:var(--warn); color:#fff; }

/* ขั้นที่ 1 เช็คชื่อ */
.ci-done { margin:0 0 12px; padding:10px 14px; border-radius:14px; border:2px solid var(--ok); color:var(--ok); font-weight:700; background:var(--card-alt); }
.ci-card { margin:0 0 14px; padding:14px; border-radius:var(--radius-card); border:2px solid var(--warn); background:var(--yellow-light); }
.ci-title { font-weight:800; font-size:1.1rem; color:var(--ink); }
.ci-hint { margin:4px 0 10px; font-size:.92rem; color:var(--muted); }
.ci-row { display:flex; gap:8px; }
.ci-row input { flex:1; min-width:0; font-size:1.4rem; letter-spacing:5px; text-align:center; min-height:52px; background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:12px; }
.ci-row input::placeholder { color:var(--muted); letter-spacing:3px; }
.ci-row button { flex:1; min-height:52px; font-weight:800; font-size:1.05rem; }
.ci-card a.small { display:inline-block; margin-top:8px; }

/* การ์ดหลัก: ปุ่มเดียวที่ต้องกดตอนนี้ */
.flow-main { background:var(--accent-light); border:2px solid var(--accent); border-radius:var(--radius-card); padding:18px; margin-bottom:16px; text-align:center; }
.flow-home.is-locked .flow-main { background:var(--yellow-light); border-color:var(--warn); }
.flow-home.is-done .flow-main { background:var(--card-alt); border-color:var(--line); }
.flow-live { display:inline-block; margin-bottom:8px; padding:3px 12px; border-radius:999px; background:var(--coral); color:#fff; font-weight:800; font-size:.85rem; }
.flow-title { font-size:1.3rem; font-weight:800; line-height:1.3; color:var(--ink); }
.flow-hint { margin:6px 0 14px; font-size:.95rem; color:var(--muted); min-height:1.2em; }
button.flow-cta, .btn.flow-cta { width:100%; min-height:58px; font-size:1.2rem; font-weight:800; padding:12px 16px; border-radius:var(--radius-btn); }
.flow-wait { margin:0 0 14px; }

/* ทางเข้า ทบทวน / เกม + หน้าทบทวน */
.flow-review { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 14px; }
.rv-entry { display:flex; align-items:center; gap:10px; min-height:64px; padding:10px 12px; text-align:left; border:2px solid var(--line); border-radius:14px; background:var(--card-alt); color:var(--ink); font:inherit; cursor:pointer; }
.rv-entry strong { display:block; font-size:1rem; }
.rv-entry small { display:block; color:var(--muted); font-size:.78rem; line-height:1.25; }
.rv-ic { font-size:1.6rem; flex:none; }
.rv-tabs { display:flex; gap:8px; margin:6px 0 10px; }
.rv-tab { flex:1; min-height:48px; border:2px solid var(--line); border-radius:14px; background:var(--card-alt); color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }
.rv-tab.on { border-color:var(--accent); background:var(--accent-light); color:var(--accent); }
.rv-lesson { width:100%; display:flex; align-items:center; gap:12px; min-height:60px; margin:8px 0; padding:10px 12px; text-align:left; border:2px solid var(--line); border-radius:14px; background:var(--card-alt); color:var(--ink); font:inherit; cursor:pointer; }
.rv-no { flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); font-weight:800; }
.rv-t { flex:1; min-width:0; }
.rv-t strong { display:block; line-height:1.25; }
.rv-t small { color:var(--muted); }
.rv-item { margin:8px 0; border:2px solid var(--line); border-radius:14px; background:var(--card-alt); }
.rv-item > summary { cursor:pointer; padding:12px 14px; min-height:48px; list-style:none; }
.rv-item > summary::-webkit-details-marker { display:none; }
.rv-games { padding:0 8px 8px; }
.rv-key { background:var(--accent-light); border-left:4px solid var(--accent); border-radius:8px; padding:12px 14px; margin-bottom:12px; }
.rv-slide { background:var(--card); border:1.5px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:12px 16px; margin:10px 0; }
.rv-st { font-weight:700; color:var(--accent); }
.rv-slide ul { margin:6px 0 0 18px; line-height:1.6; font-size:.95rem; }
.rv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin:10px 0; }
@media (max-width:420px) { .flow-review { grid-template-columns:1fr; } }

/* ส่วนรองยุบไว้: ใบงานอื่น / ประวัติ */
.flow-more { margin-top:14px; border:1.5px solid var(--line); border-radius:14px; background:var(--card-alt); }
.flow-more > summary { cursor:pointer; padding:14px 16px; min-height:48px; font-weight:700; list-style:none; display:flex; align-items:center; }
.flow-more > summary::-webkit-details-marker { display:none; }
.flow-more > summary::after { content:"▾"; margin-left:auto; color:var(--muted); }
.flow-more[open] > summary::after { content:"▴"; }
.flow-more > :not(summary) { margin-left:12px; margin-right:12px; }
.flow-more[open] { padding-bottom:12px; }
.flow-more select { width:100%; font-size:1.05rem; padding:12px; min-height:48px; }

/* หน้าใบงาน */
.doc-head { position:static; }
.doc-bar { display:flex; align-items:center; gap:10px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--line); }
.doc-bar .small-btn { min-height:44px; padding:0 16px; font-weight:700; }
.doc-who { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.doc-save { flex:none; font-size:.85rem; font-weight:700; color:var(--accent); }
.doc-steps { margin-bottom:0; flex-wrap:wrap; }
.doc-steps li { padding:0; border:0; background:none; }
.step-jump { width:100%; display:flex; align-items:center; gap:8px; min-height:44px; padding:6px 12px; border:2px solid var(--line); border-radius:14px; background:var(--card-alt); color:var(--ink); font:inherit; cursor:pointer; text-align:left; }
.step-jump .n { background:var(--accent); color:var(--accent-ink); }
.step-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 0 10px; font-size:1.2rem; }
.step-h .n { flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); font-weight:800; }
.step-tag { margin-left:auto; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700; background:var(--chip); color:var(--chip-ink); }
.step-card { scroll-margin-top:12px; }
.step-card > .step-h { margin-top:0; }
.step-group { border-left:6px solid var(--accent); }
.step-solo { border-left:6px solid var(--coral); }
.step-solo .step-h .n { background:var(--coral); }

/* ตัวเลือกตอบ: แตะง่าย */
.field label.selfopt, .selfopt { min-height:52px; display:flex; align-items:center; gap:12px; padding:12px 14px; }
.selfopt input { width:22px; height:22px; flex:none; }
.field textarea, .field input[type="text"] { font-size:1.05rem; }

/* แถบส่งงาน: ลอยติดล่างจอ ไม่ต้องเลื่อนหา */
.send-bar { position:sticky; bottom:0; z-index:20; margin-bottom:0; border-top:3px solid var(--accent); box-shadow:0 -8px 24px rgba(0,0,0,.12); }
.send-row { display:flex; gap:10px; flex-wrap:wrap; }
.send-row .flow-cta { flex:2 1 220px; }
.send-row #back { flex:1 1 120px; min-height:58px; font-weight:700; }

@media (max-width:520px) {
  .flow-steps .t { font-size:.82rem; }
  .flow-steps li { padding:8px; gap:6px; }
  .flow-title { font-size:1.15rem; }
  .doc-steps li { flex:1 1 45%; }
}