/* ════════════════════════════════════════════════════════════════════════════
   Онлайн-школа: воронка доходимости, программа, очередь проверки.
   Дополняет app.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── воронка по урокам: где именно отваливаются ────────────────────────── */
.funnel{list-style:none;margin:0;padding:0}
.funnel li{display:flex;align-items:center;gap:12px;padding:7px 0}
.funnel .n{font-family:var(--mono);font-size:11px;opacity:.35;flex:0 0 20px;text-align:right}
.funnel .ti{flex:0 0 clamp(150px, 26%, 280px);font-size:13.5px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.funnel .ti.task::after{content:"задание";font-family:var(--mono);font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;margin-left:8px;padding:2px 5px;
  border-radius:3px;border:1px solid color-mix(in srgb,var(--signal) 34%,var(--hair));
  color:var(--signal);vertical-align:1px}
.funnel .fb{flex:1;height:20px;border-radius:3px;background:var(--recess);
  position:relative;overflow:hidden;min-width:60px}
.funnel .fb i{position:absolute;inset:0 auto 0 0;background:var(--live);opacity:.8}
.funnel .fb i.warn{background:var(--warn)}
.funnel .fb i.bad{background:var(--signal)}
.funnel .fb b{position:absolute;left:8px;top:0;line-height:20px;font-family:var(--mono);
  font-size:11.5px;color:var(--ground);mix-blend-mode:normal;font-weight:400}
.funnel .drop{flex:0 0 62px;text-align:right;font-family:var(--mono);font-size:12px}
.funnel .drop.hot{color:var(--signal)}
.funnel li.cliff{background:color-mix(in srgb,var(--signal) 7%,transparent);
  border-radius:4px;margin:0 -8px;padding:7px 8px}

/* ── программа ─────────────────────────────────────────────────────────── */
.prog{list-style:none;margin:0;padding:0}
.prog .mh{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  opacity:.45;padding:16px 0 7px}
.prog .mh:first-child{padding-top:0}
.prog li{display:flex;align-items:center;gap:11px;padding:9px 0;
  border-bottom:1px solid color-mix(in srgb,var(--hair) 32%,transparent)}
.prog li:last-child{border:0}
.prog li .n{font-family:var(--mono);font-size:11.5px;opacity:.35;flex:0 0 20px}
.prog li .t{flex:1;font-size:14px}
.prog li .m{font-family:var(--mono);font-size:11.5px;opacity:.45}

/* ── ученики ───────────────────────────────────────────────────────────── */
.studs{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:13px}
.pbar{height:6px;border-radius:3px;background:var(--recess);overflow:hidden;margin:10px 0 6px}
.pbar i{display:block;height:100%;border-radius:3px;background:var(--live)}
.pbar i.warn{background:var(--warn)} .pbar i.bad{background:var(--signal)}
.tier{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:3px;border:1px solid var(--hair);opacity:.7}
.tier.ment{border-color:color-mix(in srgb,var(--live) 40%,var(--hair));color:var(--live);opacity:1}
.tier.check{border-color:color-mix(in srgb,var(--signal) 34%,var(--hair));color:var(--signal);opacity:1}

/* ── очередь проверки ──────────────────────────────────────────────────── */
.hw{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.crit{border-radius:5px;padding:11px 13px;margin:11px 0;font-size:13px;line-height:1.5;
  border:1px solid color-mix(in srgb,var(--signal) 26%,var(--hair));
  background:color-mix(in srgb,var(--signal) 6%,transparent)}
.crit b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.5;margin-bottom:5px;font-weight:400}
.answer{border-radius:5px;padding:12px 13px;font-size:13.5px;line-height:1.55;
  background:var(--recess);white-space:pre-wrap;margin-bottom:11px}
.answer.shot{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;
  opacity:.65}
.answer.shot svg{width:19px;height:19px;flex:0 0 19px;opacity:.6}
.hwact{display:flex;gap:8px}
.hwact .btn{flex:1}
.rework{width:100%;padding:11px;border-radius:4px;border:1px solid var(--hair);
  background:var(--plate);color:inherit;font:inherit;font-size:13.5px;resize:vertical;
  margin-bottom:9px}
.rework:focus{outline:none;border-color:var(--signal)}