/* 先生・管理の画面（C2・2026-11-04）。style.css は触らず、ここで足す。1画面1仕事・大きいボタン1つ・説明は details で畳む */

/* 下のタブ: 6つ並んでも 375px で切れない */
nav.tabs.six button{font-size:11px;padding-left:0;padding-right:0}
nav.tabs.six button i{font-size:18px}

/* 手順カード（1・2・3） */
.step{position:relative;padding-left:52px}
.step .no{position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--ai);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center}
.step.done .no{background:var(--leaf)}
.step.wait{opacity:.55}
.step h3{font-size:15.5px;font-weight:800;line-height:1.3;margin-bottom:2px}
.step details{margin-top:8px}
.step summary,.fold summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--ai);padding:6px 0}
.fold{margin-top:8px}
.fold>summary+*{margin-top:4px}

/* 大きく押せる「ファイルを選ぶ」 */
.pick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:96px;margin-top:10px;border:2px dashed var(--gold);border-radius:16px;background:#FBF3DF;color:var(--ai);font-weight:800;text-align:center;cursor:pointer;padding:12px}
.pick:active{transform:scale(.99)}
.pick .ic{font-size:30px;line-height:1}
.pick .fn{font-size:12.5px;font-weight:600;color:var(--mut);word-break:break-all}
.pick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pick.has{border-style:solid;background:#EEF1F7}

/* 大きいボタン・リンクボタン */
.btn.big{padding:16px;font-size:16px}
.btn.gold{background:var(--gradgold);color:#16264C;box-shadow:0 4px 12px rgba(200,162,75,.35)}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn-row .btn{margin-top:10px}

/* 数字3つの要約 */
.sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.sum>div{background:var(--soft);border-radius:14px;padding:10px 6px;text-align:center}
.sum b{display:block;font-size:24px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}
.sum span{display:block;font-size:12px;color:var(--mut);line-height:1.25}
.sum .ok{background:#E9F6EF}.sum .ok b{color:#0E7A47}
.sum .ng{background:#FDECEC}.sum .ng b{color:var(--seal)}
.sum .wt{background:#FBF3DF}.sum .wt b{color:#7A5C17}
.nlist{display:flex;flex-direction:column;gap:2px;margin-top:6px;font-size:13px}
.nlist div{padding:4px 0;border-bottom:1px solid var(--line)}
.nlist div:last-child{border-bottom:none}

/* 管理: 検索欄（placeholder が切れないよう、1行で検索を広く・クラスを狭く） */
.srch{display:flex;gap:8px;align-items:center}
.srch input{flex:1;min-width:0;margin:0}
.srch select{flex:0 0 auto;width:auto;max-width:42%;margin:0}
/* 管理: ID+sandi 一括の帯 */
.banner{background:#FBF3DF;border:1.5px solid var(--gold);border-radius:16px;padding:12px 14px;margin-top:10px}
.banner b.t{display:block;font-size:15px}
.banner .btn{margin-top:10px}

/* 先生: 「Perlu dicek」の1行 */
.cklist{padding:2px 12px}
.ck{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.ck:last-child{border-bottom:none}
.ck .who{flex:1;min-width:0}
.ck .who a{font-weight:800;text-decoration:none}
.ck .chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.ck .chips .chip{font-size:12px;padding:2px 8px;white-space:normal}
.btn.wabtn{flex:0 0 auto;width:auto;margin:0;padding:10px 16px;font-size:14px;background:#128C4B;box-shadow:none}
.note{font-size:12.5px;color:var(--mut);background:var(--soft);border-radius:10px;padding:8px 10px;margin-top:8px}
/* ヒートマップ: 「!」の凡例・折りたたみ */
.legend2{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px;font-size:12px;color:var(--mut)}
.legend2 b{display:inline-block;min-width:14px;text-align:center;border-radius:4px;background:#FDECEC;color:var(--seal);padding:0 3px}
.heatmore{margin-top:8px}
/* WA を選ぶ下からの板 */
.sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(20,24,60,.45);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s both}
.sheet{width:100%;max-width:560px;background:#fff;border-radius:22px 22px 0 0;padding:16px 16px 22px;border-top:4px solid var(--gold)}
.sheet h3{font-size:16px;font-weight:800}
.sheet .btn{margin-top:8px;padding:13px}
.sheet .x{margin-top:6px}

/* 先生: Tes */
.pbar{height:8px;border-radius:99px;background:#E7EAF3;overflow:hidden;margin-top:6px}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,#2B4580,var(--ai));border-radius:99px}
a.tesrow{display:block;color:inherit;text-decoration:none}
a.tesrow:active{background:var(--soft)}
.sc{font-variant-numeric:tabular-nums;font-weight:900}
.hard .it{display:block;padding:8px 0}
.hard .q{font-size:13px;margin-top:2px}
.ringk .items2{margin-top:6px}
.ringk .it2{font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line)}
.ringk .it2:last-child{border-bottom:none}
.tag2{display:inline-block;font-size:12px;font-weight:800;padding:1px 7px;border-radius:6px;background:var(--soft);color:var(--ai);margin-right:4px}

/* 管理: 問題の取り込み */
.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--soft);border-radius:10px;padding:8px 10px;white-space:pre-wrap;word-break:break-all}
.qprev{padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.qprev:last-child{border-bottom:none}
.qprev .ans{color:#0E7A47;font-weight:800}
.errl{color:var(--seal);font-size:13px;margin-top:4px}
@media (max-width:420px){.step{padding-left:48px}.step .no{left:10px}}

/* ───── 2026-11-05 見やすさ直し（先生・管理の画面だけ。body.staf の中だけに効く）
   文字は16px以上、濃い文字色、押す所は48px以上、主ボタン（紺・金）は1画面に1つ、他は白い枠 ───── */
body.staf{font-size:16px;--mut:#444B5C}
body.staf .sm,body.staf .tag,body.staf .chip,body.staf .new,body.staf .legend,body.staf .legend2,body.staf .note,
body.staf .cmt,body.staf .ctab,body.staf .ctab th,body.staf .nlist,body.staf .mono,body.staf .qprev,body.staf .errl,
body.staf .fs-opt,body.staf .stat .sm,body.staf .step summary,body.staf .fold summary,body.staf .pick .fn,
body.staf .sum span,body.staf .hard .q,body.staf .ringk .it2,body.staf .tag2,body.staf .ex-rev .opt,body.staf .dev,
body.staf .dev select,body.staf .or,body.staf .pdbtn,body.staf label.f,body.staf .toast,body.staf .cmt,
body.staf .legend span,body.staf .acts input,body.staf .like,body.staf .send,body.staf .linkbtn,body.staf .seg button{font-size:16px}
body.staf h2{font-size:18px}
body.staf .stat b.nv{font-size:16px}
body.staf .chip{white-space:normal;line-height:1.35}
body.staf .chip.wait{color:#5E4300;background:#FBEFC9}
body.staf .chip.ng{color:#A52A2A}
body.staf .tag,body.staf .tag2{padding:2px 8px}
body.staf .sum b{font-size:26px}

/* 押す所は48px以上 */
body.staf .btn,body.staf .send,body.staf .like,body.staf .linkbtn,body.staf .seg button,body.staf .pdbtn,
body.staf .step summary,body.staf .fold summary,body.staf .flagd summary,body.staf .tesrow,body.staf .pick{min-height:48px}
body.staf input:not([type=checkbox]):not([type=radio]),body.staf select,body.staf .acts input{min-height:48px;font-size:16px}
body.staf .btn{display:flex;align-items:center;justify-content:center;padding-top:10px;padding-bottom:10px}
body.staf .send,body.staf .like,body.staf .linkbtn,body.staf .seg button,body.staf .pdbtn{display:inline-flex;align-items:center;justify-content:center;padding-left:14px;padding-right:14px}
body.staf .step summary,body.staf .fold summary,body.staf .flagd summary{display:flex;align-items:center;cursor:pointer}
body.staf label:has(>input[type=checkbox]){display:inline-flex;align-items:center;min-height:48px;gap:6px}
body.staf input[type=checkbox]{width:24px;height:24px}
body.staf .btn.wabtn{min-width:64px}
body.staf nav.tabs button{min-height:52px;font-size:13px}
body.staf nav.tabs button{letter-spacing:-.02em;padding-left:0;padding-right:0}   /* 6つ並んでも Peringkat が切れない（2026-11-05） */
body.staf nav.tabs.six button{font-size:12px}

/* 主ボタンは1画面に1つ: 繰り返し出る小さな操作（WA・保存・送信）は白地＋枠。大きい .btn.big／.btn.fun だけが主 */
body.staf .btn:not(.big):not(.fun):not(.ghost):not(.gold){background:#fff;color:var(--ai);border:2px solid var(--ai);box-shadow:none}
body.staf .btn.wabtn{background:#fff;color:#0B5E34;border:2px solid #128C4B;box-shadow:none}
body.staf .sheet .btn:not(.ghost){background:#fff;color:var(--ai);border:2px solid var(--ai)}
body.staf .sheet .btn:first-of-type:not(.ghost){background:var(--ai);color:#fff}
body.staf .btn:disabled{opacity:.6}

/* 先生: 要確認（同じ種類は件数つき1枚・詳細は畳む） */
.flagd{display:inline-block;vertical-align:top}
.flagd summary{list-style:none;cursor:pointer}
.flagd summary::-webkit-details-marker{display:none}
.flagd summary .chip::after{content:" ▾"}
.flagd[open] summary .chip::after{content:" ▴"}
.flagd>div{margin-top:4px;padding:6px 10px;background:var(--soft);border-radius:10px;color:var(--ink)}
.flagd>div div{padding:3px 0}
body.staf .ck .chips{gap:6px;align-items:flex-start}
body.staf .ck{padding:8px 0}

/* 先生: 45人の表。縦に長くしない（行を詰める・見出しと名前を固定・スマホは横スクロール）。名前は16px */
body.staf .heat{overflow:auto;max-height:68vh;gap:1px;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px;background:#fff}
body.staf .heat .hr{grid-template-columns:116px repeat(var(--n),24px);gap:2px;width:max-content;min-width:100%;min-height:32px}
body.staf .heat .hr i{height:22px}
body.staf .heat .nm{font-size:16px;line-height:1.2;position:sticky;left:0;z-index:1;background:#fff;padding:5px 4px 5px 8px;display:block}
body.staf .heat .hr.head{position:sticky;top:0;z-index:3;background:#fff;min-height:26px}
body.staf .heat .hr.head span{position:sticky;left:0;z-index:4;background:#fff}
body.staf .heat .hr em{font-size:14px}
body.staf .heat a.hr:active .nm{background:var(--soft)}
body.staf .legend2{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 8px;font-size:16px;color:var(--ink);background:#FFF8E6;border:1px solid #F0E2BD;border-radius:10px;padding:8px 10px}
body.staf .legend2 b{font-size:16px;min-width:22px}
body.staf .legend{font-size:14px;color:var(--ink)}

/* 管理: 検索欄。入力は1行まるごと、クラスの選択はその下（placeholder が切れない） */
body.staf .srch{flex-wrap:wrap}
body.staf .srch input{flex:1 1 100%}
body.staf .srch select{flex:1 1 100%;max-width:none;width:100%}
body.staf .srch button{flex:0 0 auto}
/* 先生の Siswa の中の切り替え（Peta・Peringkat・Catatan）。見た目は .seg button と同じ（2026-11-05） */
.seg a.segb{flex:1;text-align:center;text-decoration:none;font-size:15px;font-weight:700;padding:8px;min-height:48px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line);background:#fff;border-radius:99px;color:var(--mut)}
.seg a.segb[aria-pressed=true]{background:var(--ai);border-color:var(--ai);color:#fff}