/* Student frontend. Design taken from docs/prototype.html: notebook sheet with a red margin. */
:root{
  --paper:#F6F8FC; --sheet:#FFFFFF; --ink:#1B2A5E; --text:#232838; --muted:#667089;
  --rule:#D5DEEF; --pen:#2447B8; --pen-soft:#E6ECFB; --red:#C8202F; --red-soft:#FCE9EB;
  --ok:#1E7A4C; --ok-soft:#E3F4EA; --marker:#FFE866;
  --ui:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hand:"Caveat","Segoe Script","Comic Sans MS",cursive;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#10141F; --sheet:#181E2D; --ink:#DCE5FF; --text:#E4E8F2; --muted:#95A0BA;
    --rule:#2B3550; --pen:#8FA8FF; --pen-soft:#222C49; --red:#FF7480; --red-soft:#3A1E26;
    --ok:#6FD19C; --ok-soft:#173326; --marker:#6B5C00;
  }
}
:root[data-theme="dark"]{
  --paper:#10141F; --sheet:#181E2D; --ink:#DCE5FF; --text:#E4E8F2; --muted:#95A0BA;
  --rule:#2B3550; --pen:#8FA8FF; --pen-soft:#222C49; --red:#FF7480; --red-soft:#3A1E26;
  --ok:#6FD19C; --ok-soft:#173326; --marker:#6B5C00;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--text);font:400 16px/1.55 var(--ui)}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pen);outline-offset:2px}
a{color:var(--pen)}
.wrap{max-width:860px;margin:0 auto;padding:0 16px 64px}
header.top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:22px 0 14px;border-bottom:2px solid var(--ink)}
.brand{font:700 1.5rem/1.1 var(--ui);color:var(--ink);letter-spacing:-.02em;text-decoration:none}
.brand small{display:block;font:500 .85rem/1.3 var(--ui);color:var(--muted);letter-spacing:0;margin-top:4px}
.logout{margin-left:auto;display:flex;gap:10px;align-items:baseline}
button.link{background:none;border:0;color:var(--pen);cursor:pointer;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
h1{font:700 1.9rem/1.15 var(--ui);color:var(--ink);letter-spacing:-.02em;margin:26px 0 10px}
h2{font:600 1.25rem/1.25 var(--ui);color:var(--ink);margin:0 0 8px}
h3{font:600 1rem/1.3 var(--ui);margin:0 0 6px}
p{margin:0 0 12px;max-width:68ch}
.muted{color:var(--muted)} .small{font-size:.875rem}
.sheet{background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:22px 22px 22px 58px;position:relative;margin-bottom:18px}
.sheet::before{content:"";position:absolute;top:0;bottom:0;left:40px;width:2px;background:var(--red);opacity:.55}
.plain{background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:20px;margin-bottom:18px}
.plain.narrow{max-width:460px}
@media (max-width:560px){.sheet{padding-left:36px}.sheet::before{left:20px}}
label.f{display:block;font-weight:500;margin:14px 0 5px}
label.f:first-child{margin-top:0}
input[type=text],input[type=url],input[type=email],input[type=password],textarea,select{width:100%;background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:9px 11px}
input:focus,textarea:focus,select:focus{border-color:var(--pen);outline:none;box-shadow:0 0 0 3px var(--pen-soft)}
textarea{min-height:88px;resize:vertical}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.row > .grow{flex:1 1 220px}
.btn{background:var(--pen);color:#fff;border:1px solid var(--pen);border-radius:4px;padding:9px 16px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
:root[data-theme="dark"] .btn{color:#10141F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{color:#10141F}}
.btn.ghost{background:transparent;color:var(--pen) !important}
.btn.danger{background:transparent;border-color:transparent;color:var(--red) !important;padding-left:6px;padding-right:6px}
.btn:disabled{opacity:.5;cursor:default}
.check{display:flex;gap:9px;align-items:flex-start;margin:10px 0}
.check input{margin-top:5px}
.hl{background:linear-gradient(transparent 55%,var(--marker) 55%)}
.err{color:var(--red);font-weight:500;margin:8px 0}
.flash{padding:10px 14px;border-radius:4px;margin:16px 0;font-weight:500}
.flash.success{background:var(--ok-soft);color:var(--ok)}
.flash.error{background:var(--red-soft);color:var(--red)}
/* worksheet pieces reused by later stages */
.q{padding:16px 0;border-top:1px solid var(--rule)}
.q:first-of-type{border-top:0}
.qn{font-weight:700;color:var(--ink);margin-right:6px}
.mark{font:700 1.5rem/1 var(--hand);margin-left:8px}
.mark.ok{color:var(--ok)} .mark.no{color:var(--red)}
.fix{font:500 1.35rem/1.2 var(--hand);color:var(--red);margin-top:4px}
.score{display:inline-block;font:700 3.4rem/1 var(--hand);color:var(--red);border:3px solid var(--red);border-radius:50%;padding:14px 26px 18px;transform:rotate(-6deg);margin:6px 0 14px}
.list-item{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:14px 0;border-top:1px solid var(--rule)}
.list-item:first-child{border-top:0}
.list-item .meta{flex:1 1 220px}
/* work page */
.instructions{white-space:pre-wrap}
.qtext{white-space:pre-wrap}
.opts{display:grid;gap:6px;margin-top:8px}
.opt{display:flex;gap:10px;align-items:center;padding:7px 10px;border:1px solid var(--rule);border-radius:4px;cursor:pointer}
.opt:has(input:checked){border-color:var(--pen);background:var(--pen-soft)}
.gap-line{line-height:2.4}
.gap-in{display:inline-block;width:auto;min-width:110px;max-width:100%;border:0 !important;border-bottom:2px solid var(--pen) !important;border-radius:0 !important;padding:2px 6px !important;background:transparent !important;color:var(--pen);font-weight:600;box-shadow:none !important}
.chips{display:flex;flex-wrap:wrap;gap:7px;min-height:42px;padding:6px 0}
.chips.answer{border-bottom:2px solid var(--pen);margin-bottom:8px}
.chip{background:var(--pen-soft);border:1px solid var(--rule);border-radius:4px;padding:5px 11px;cursor:pointer;font-weight:500}
.chips.answer .chip{background:var(--sheet);border-color:var(--pen);color:var(--pen)}
.given-line{margin-top:6px}
.given{color:var(--pen);font-weight:600;white-space:pre-wrap}
.note-hand{font:500 1.5rem/1.25 var(--hand);color:var(--red)}
.tag{display:inline-block;padding:0 6px;border-radius:3px;background:var(--pen-soft);color:var(--pen);font-size:.8rem}
.tag.red{background:var(--red-soft);color:var(--red)}
.overdue{color:var(--red);font-weight:600}
.returned{border-left:4px solid var(--red)}
.remark{float:right;max-width:60%;text-align:right}
@media (max-width:560px){.remark{float:none;max-width:none;text-align:left;margin-bottom:6px}}
.lesson-open{border-left:4px solid var(--ok)}

/* media and new types */
.media{margin:8px 0 10px}
.media img{max-width:100%;max-height:360px;border-radius:4px;border:1px solid var(--rule);display:block}
.media audio{width:100%;max-width:420px;display:block}
.pairs{display:grid;gap:8px;margin-top:8px}
.pair{display:grid;grid-template-columns:minmax(120px,1fr) minmax(140px,1fr);gap:10px;align-items:center}
.pair select{width:100%}
@media (max-width:480px){.pair{grid-template-columns:1fr}}