/* ==========================================================================
   r8.css — Round 8 (2 Oct late): Upload pop-up · class Materials · Feed attach · Homework page · Create Studio.
   On top of slim.css + r5.css + r6.css. Colours only through tokens. Every tap target ≥ 44px.
   ========================================================================== */

/* ---------- shared: segmented tabs used by Upload and Attach ---------- */
.up8-ways{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--neutral-soft);flex-wrap:wrap}
.up8-ways button{flex:1 1 140px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;
  font:inherit;font-size:14px;color:var(--sub);cursor:pointer}
.up8-ways button[aria-selected="true"]{background:var(--surface);color:var(--accent-ink);font-weight:500;box-shadow:var(--shadow)}
.up8-ways img{width:20px;height:20px}

/* ---------- 91 · Upload pop-up ---------- */
dialog.up8,dialog.att8{width:min(680px,calc(100vw - 24px));max-height:calc(100vh - 24px)}
.up8-body,.att8-body{padding:14px 16px;display:grid;gap:14px;overflow:auto;max-height:calc(100vh - 190px)}
.up8-drop{display:grid;justify-items:center;gap:6px;text-align:center;padding:22px 16px;border:2px dashed var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;position:relative}
.up8-drop:hover,.up8-drop.over,.drop8.over{border-color:var(--accent);background:var(--accent-soft)}
.up8-drop .ico.lg{width:34px;height:34px;color:var(--accent-ink)}
.up8-drop small{color:var(--muted);font-size:13px}
.up8-drop .btn{margin-top:6px;pointer-events:none}
.up8-drop:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.up8-list{display:grid;gap:8px}
.up8-empty{margin:0}
.up8-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:6px 6px 6px 10px;border:var(--card-border);border-radius:12px;background:var(--surface)}
.up8-item b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up8-item small{color:var(--muted);font-size:12.5px}
.up8-pv{width:64px;height:44px;object-fit:cover;border-radius:8px;background:#000}
.up8-item .icon-btn{width:44px;height:44px}
.up8-to{border:0;margin:0;padding:0}
.up8-to legend{font-size:13px;font-weight:600;margin-bottom:6px}
.up8-clsrow{display:flex;flex-wrap:wrap;gap:8px}
.up8-cls{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 10px;border:var(--card-border);border-radius:22px;font-size:14px;cursor:pointer;background:var(--surface)}
.up8-cls:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.up8-cls input{width:18px;height:18px}
.up8-cls .cthumb.sm{width:24px;height:24px}
.up8-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.up8-foot .grow{flex:1}

/* ---------- 93 · Attach files ---------- */
.att8-list{display:grid;gap:6px;max-height:min(46vh,420px);overflow:auto}
.att8-row{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:center;min-height:52px;padding:6px 10px;border-radius:12px;cursor:pointer}
.att8-row:hover{background:var(--neutral-soft)}
.att8-row:has(input:checked){background:var(--accent-soft)}
.att8-row input{width:20px;height:20px}
.att8-row b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att8-row small{color:var(--muted);font-size:12.5px}
.att8btn{gap:6px;min-height:44px}
.att8-chips{display:flex;flex-wrap:wrap;gap:8px}
.att8-chips:empty{display:none}
.cmp .att8-chips{padding:0 14px 8px}
.att8-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:0 0 0 6px;border-radius:22px;background:var(--accent-soft);color:var(--accent-ink);font-size:13.5px}
.att8-chip .post-ic{width:30px;height:30px;flex:none}
.att8-chip .post-ic img{width:18px;height:18px}
.att8-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.att8-x{width:44px;height:44px;flex:none;border:0;border-radius:22px;background:none;color:inherit;cursor:pointer;display:grid;place-items:center}
.att8-x:hover{background:var(--surface)}
.att8-cards{display:grid;gap:0}
.att8-cards .att8-file{margin:0 16px 12px}
.att8-file{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;width:calc(100% - 32px);min-height:56px;padding:8px 12px;border:var(--card-border);border-radius:12px;background:var(--surface);
  color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.att8-file:hover{background:var(--accent-soft)}
.att8-file b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att8-file small{color:var(--muted);font-size:12.5px}
.att8-pic{display:block;width:100%;border:0;padding:0;background:var(--neutral-soft);cursor:zoom-in;min-height:44px}
.att8-pic img{display:block;width:100%;max-height:420px;object-fit:cover}
.post-ic img{width:22px;height:22px}

/* ---------- 92 · Materials ---------- */
.mat8-filter{flex-wrap:wrap}
.mat8-filter .num{opacity:.7}
.mat8row .mat8-type{font-size:12.5px;white-space:nowrap}
.mat8-empty{padding:12px 4px}
.drop8 .srcrow{justify-content:center}
.drop8 .srcrow img{width:20px;height:20px}
@media (max-width:600px){ .mat8row .mat8-type{display:none} .mat8row{grid-template-columns:auto minmax(0,1fr)} }

/* ---------- one viewer ---------- */
dialog.v8{width:min(900px,calc(100vw - 24px))}
.v8-body{padding:12px;max-height:calc(100vh - 110px);overflow:auto}
.v8img{display:block;max-width:100%;max-height:70vh;margin:0 auto;border-radius:8px}
.v8pdf{width:100%;height:70vh;border:0;border-radius:8px;background:var(--neutral-soft)}
.v8again{padding:16px;background:var(--warn-soft);border-radius:12px;color:var(--ink)}
.v8made{font-size:14px}
.v8made .car5{margin-top:8px}

/* ---------- 94 · homework page ---------- */
.hw8-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.hw8-way{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:start;padding:16px;border:var(--card-border);border-radius:var(--radius);background:var(--surface);cursor:pointer;min-height:44px}
.hw8-way:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.hw8-way input{width:20px;height:20px;margin-top:2px}
.hw8-wic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--neutral-soft);color:var(--accent-ink)}
.hw8-way b{display:block;font-size:16px;font-weight:600;margin-bottom:2px}
.hw8-way small{color:var(--sub);font-size:13.5px;line-height:1.45}
.hw8-fs{border:0;margin:0;padding:0}
.hw8-fs legend{font-size:13px;font-weight:600;margin-bottom:6px}
.hw8-ck{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:22px;border:var(--card-border);font-size:14px;cursor:pointer;background:var(--surface)}
.hw8-ck:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.hw8-ck input{width:18px;height:18px}
.hw8-ck .av.sm{width:24px;height:24px}
.hw8-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.hw8-rub{min-width:0}
.hw8-rub td{padding:4px 6px}
.hw8-rub td:last-child{width:110px}
.hw8-stu{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hw8-prefill{background:var(--accent-soft);color:var(--accent-ink);padding:10px 14px;border-radius:12px}
.hw8card{border-left:4px solid var(--warn)}
.hw8bar{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--warn-soft);color:var(--warn);font-size:13px;font-weight:600;letter-spacing:.02em}
.hw8meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 16px 14px}
.hw8meta .grow{flex:1}
.hw8row.new{background:var(--accent-soft)}
.hw8row{cursor:default}

/* ---------- 95 · Create Studio ---------- */
.c8-for{max-width:320px;margin-bottom:12px}
.nb.c8{grid-template-columns:270px minmax(0,1fr) 300px;min-height:560px}
.c8 .src{min-height:44px;cursor:pointer}
.c8 .src .post-ic{width:30px;height:30px;flex:none}
.c8 .nbp > h3 .btn{min-height:44px;margin:-8px -6px -8px 0}
.c8 .nbp > h3 .grow{flex:1}
.c8-tiles{display:grid;gap:8px}
.c8-tile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;min-height:56px;padding:8px 12px;border:var(--card-border);border-radius:12px;background:var(--surface);
  font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.c8-tile:hover{background:var(--accent-soft)}
.c8-tile .ico{color:var(--accent-ink)}
.c8-tile b{display:block;font-weight:500;font-size:14px}
.c8-tile small{color:var(--muted);font-size:12.5px}
.c8-res{display:grid;gap:6px}
.c8-res > b .ico{color:var(--ok, var(--alt-ink))}
.c8-body{font-size:14px;line-height:1.5}
.c8-body .ol6{padding-left:20px}
.c8-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.c8-empty{padding:8px}
.g8{display:grid;gap:6px;margin-top:6px}
.g8 span{padding:8px 10px;border-radius:10px;background:var(--neutral-soft)}
.mind{width:100%;max-width:420px;color:var(--ink)}
.aud8{display:grid;gap:6px;padding:10px;border-radius:12px;background:var(--neutral-soft)}
.aud8-track{flex:1;height:8px;border-radius:4px;background:var(--line);overflow:hidden;min-width:60px}
.aud8-track i{display:block;height:100%;width:0;background:var(--accent);transition:width .9s linear}
.aud8[data-state="playing"] .aud8-track i{background:var(--accent-ink)}
.aud8 details summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:13.5px;color:var(--accent-ink)}
.aud8 details p{font-size:14px;line-height:1.55}
@media (prefers-reduced-motion:reduce){.aud8-track i{transition:none}}
@media (max-width:1100px){ .nb.c8{grid-template-columns:240px minmax(0,1fr)} .c8-studio{grid-column:1/-1;order:-1} .c8-tiles{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} }
@media (max-width:760px){ .nb.c8{grid-template-columns:1fr;min-height:0} .c8-src{order:-2} .c8-studio{order:-1} .c8-tiles{grid-template-columns:1fr 1fr} }
@media (max-width:760px){ .c8 .c8-src .srcs6{max-height:300px;overflow:auto} }
@media (max-width:480px){ .up8-ways{flex-wrap:nowrap} .up8-ways button{flex:1 1 0;flex-direction:column;gap:2px;padding:6px 4px;font-size:12.5px;line-height:1.2;text-align:center} }
/* 3 Oct fix (Lucas): long source names were cut off and the Sources box scrolled sideways — names now wrap */
.c8 .nbp .pb{overflow-x:hidden}
.c8 .src > span:last-child{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.35}
.c8 .src, .c8 .src *{white-space:normal}  .c8 .src{min-width:0}

/* q117 A: the Homework card in Create — questions you can edit before publishing */
.c8-hwq li{margin-bottom:6px}
.c8-hwq small{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.c8-res.editing [data-q]{display:block;outline:1px dashed var(--accent);border-radius:6px;padding:4px 6px;background:var(--surface)}
/* question editor: one box per option, like Google Forms (3 Oct) */
.hw8-q .hw8-stem{font-size:16px;font-weight:500}
.hw8-hint{font-size:13px;font-weight:600;color:var(--sub)}
.hw8-list{display:grid;gap:8px}
.hw8-opt,.hw8-pair,.hw8-gap{display:grid;align-items:center;gap:10px;padding:6px 6px 6px 12px;border:var(--card-border);border-radius:var(--opt-radius);background:var(--surface)}
.hw8-opt{grid-template-columns:auto minmax(0,1fr) auto auto}
.hw8-opt input[type=radio]{width:20px;height:20px;margin:0;accent-color:var(--alt-ink);cursor:pointer}
.hw8-opt .input,.hw8-pair .input,.hw8-gap .input{border-color:transparent;background:transparent}
.hw8-opt .input:focus,.hw8-pair .input:focus,.hw8-gap .input:focus{border-color:var(--line-strong);background:var(--surface)}
.hw8-okt{display:none;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--alt-ink);white-space:nowrap}
.hw8-opt:has(input[type=radio]:checked){border-color:var(--alt-ink);background:var(--alt-soft)}
.hw8-opt:has(input[type=radio]:checked) .hw8-okt{display:inline-flex}
.hw8-pair{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto}
.hw8-arrow{color:var(--muted);font-size:18px}
.hw8-gap{grid-template-columns:auto minmax(0,1fr);padding-right:12px}
.hw8-gapn{font-size:13px;font-weight:600;color:var(--sub);min-width:46px}
.hw8-more{justify-self:start}
.hw8-see{margin:0;padding:10px 14px;border-radius:12px;background:var(--neutral-soft);font-size:15px}
.hw8-see>span:first-child{font-size:13px;font-weight:600;color:var(--sub)}
.hw8-blank{display:inline-block;width:72px;border-bottom:2px solid var(--ink);margin:0 4px;vertical-align:-2px}
@media (max-width:480px){.hw8-pair{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.hw8-arrow{display:none}.hw8-pair .input:nth-of-type(2){grid-column:1;grid-row:2}.hw8-pair .icon-btn{grid-column:2;grid-row:1}.hw8-okt{display:none!important}}