/* English — "exercise book + school calculator", sized like a tool, not a poster.
   Desktop: camera (modest size) with the answer under it on the left; calculator and
   history on the right. Phone: one screen at a time, switched with a bottom tab bar. */
:root{
  --desk:#ecebe6;
  --black:#0b0b0b;
  --bar-ink:#f4f4f2;
  --bar-dim:#a3a3a0;

  --paper:#fdfdfb;
  --rule:#cddbee;
  --margin:#e9a6a3;
  --ink:#1d2127;
  --ink-2:#555c66;
  --ink-3:#8a9099;
  --red:#c42a1c;
  --hl:#f5ee2a;

  --body:#2a2d31;
  --key:#3c4046;
  --key-2:#4b5058;
  --key-ink:#f2f2ef;
  --warm:#d8692e;
  --lcd:#bcc6ab;
  --lcd-ink:#1b2316;

  --line:32px;
  --ui:"Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --math:"STIX Two Text", "Cambria Math", Cambria, "Times New Roman", serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font-family:var(--ui);color:var(--ink);background:var(--desk);-webkit-font-smoothing:antialiased;min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:default}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid #2f6fe0;outline-offset:2px}

/* =============== top bar =============== */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;height:56px;padding:0 max(14px, calc((100vw - 1180px) / 2));background:var(--desk);border-bottom:1px solid #d9d7cf}
.mark{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;letter-spacing:-.01em}
.mark img{display:block;border-radius:5px}
.status{display:flex;align-items:center;gap:7px;min-width:0;font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status .dot{flex:none;width:8px;height:8px;border-radius:50%;background:#b4b2ab}
.status.load .dot{background:#d9a400}
.status.ok .dot{background:#2f9e55}
.status.err .dot{background:var(--red)}
.status.err{color:var(--red)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:4px}
.top-btn{display:flex;align-items:center;gap:7px;height:44px;padding:0 12px;border-radius:8px;font-size:15px;font-weight:500}
.top-btn:hover{background:#e0dfd8}
.top-btn.icon{width:44px;padding:0;justify-content:center}
#muteBtn .off,#muteBtn .lbl-off{display:none}
#muteBtn[aria-pressed="false"]{color:var(--ink-3)}
#muteBtn[aria-pressed="false"] .on,#muteBtn[aria-pressed="false"] .lbl-on{display:none}
#muteBtn[aria-pressed="false"] .off,#muteBtn[aria-pressed="false"] .lbl-off{display:inline}

/* =============== layout =============== */
.layout{max-width:1180px;margin:0 auto;padding:16px 14px 40px;display:grid;gap:16px;
  grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"scan calc" "scan hist";align-items:start}
.pane-scan{grid-area:scan;display:flex;flex-direction:column;gap:14px;min-width:0}
.pane-calc{grid-area:calc}
.pane-hist{grid-area:hist}
.tabs{display:none}

/* =============== camera =============== */
.camera{background:var(--black);border-radius:10px;overflow:hidden;color:var(--bar-ink)}
.stage{position:relative;height:clamp(220px, 40vh, 380px);overflow:hidden;background:#000}
#video,#still,#overlay{position:absolute;inset:0;width:100%;height:100%}
#video{object-fit:cover}
#still{display:none}
#overlay{pointer-events:none;-webkit-user-select:none;user-select:none}
.stage.live #overlay,.stage.photo #overlay{pointer-events:auto}
.stage.photo #overlay{cursor:pointer}
.stage.photo #video{visibility:hidden}
.stage.photo #still{display:block}

.stage-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:20px;background:#151515}
.big-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;min-width:210px;padding:0 22px;border-radius:9px;background:var(--bar-ink);color:var(--black);font-weight:700;font-size:17px;cursor:pointer}
.big-btn:hover{background:#fff}
.big-btn.alt{background:none;color:var(--bar-ink);box-shadow:inset 0 0 0 1.5px #5a5a57}
.big-btn.alt:hover{box-shadow:inset 0 0 0 1.5px var(--bar-ink)}

.cam-bar{display:flex;align-items:center;justify-content:center;gap:clamp(4px,2vw,18px);min-height:84px;padding:6px 10px}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:64px;min-height:56px;padding:6px 4px;border-radius:8px;font-size:13px;color:var(--bar-ink);cursor:pointer}
.tool:hover{background:#1e1e1e}
.tool[aria-pressed="true"]{color:var(--hl)}
.shutter{display:flex;flex-direction:column;align-items:center;gap:3px;margin:0 6px;font-size:13px;color:var(--bar-ink)}
.shutter .ring{display:block;width:58px;height:58px;border-radius:50%;border:3px solid var(--bar-ink);padding:4px}
.shutter .ring span{display:block;width:100%;height:100%;border-radius:50%;background:var(--bar-ink);transition:transform .1s}
.shutter:active .ring span{transform:scale(.88)}
.cam-bar.crop{gap:8px;flex-wrap:wrap}
.bar-text{min-height:48px;padding:0 14px;border-radius:8px;font-size:15px;color:var(--bar-ink)}
.bar-text:hover{background:#1e1e1e}
.bar-go{min-height:48px;padding:0 20px;border-radius:8px;background:var(--bar-ink);color:var(--black);font-weight:700;font-size:15px}

/* =============== exercise-book page =============== */
.page{position:relative;background:
    linear-gradient(90deg, transparent 47px, var(--margin) 47px, var(--margin) 48px, transparent 48px),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line)),
    var(--paper);
  background-position:0 0, 0 calc(var(--line) * .5);
  padding:calc(var(--line) * .5) 18px calc(var(--line) * .5) 60px;
  line-height:var(--line);border-radius:3px;
  box-shadow:0 1px 0 rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.05)}
.page h2{margin:0;font-size:16px;font-weight:700;line-height:var(--line)}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--line);font-size:14px;color:var(--ink-2)}
.aloud{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:var(--line)}
.aloud input{width:18px;height:18px;margin:0;accent-color:var(--ink)}

.current{position:relative}
.eq{font-family:var(--math);font-size:30px;line-height:calc(var(--line) * 2);min-height:calc(var(--line) * 2);word-break:break-word}
.eq i,.hl i,.plist i,.hlist i,.working i{font-style:italic}
.eq .placeholder{font-family:var(--ui);font-size:17px;color:var(--ink-3)}
.ans{font-family:var(--math);font-size:38px;font-weight:600;line-height:calc(var(--line) * 2)}
.ans:has(.hl:empty){display:none}
.hl{position:relative;z-index:0;padding:0 6px}
.hl:not(:empty)::before{content:"";position:absolute;z-index:-1;left:-2px;right:-4px;top:14%;bottom:12%;background:var(--hl);opacity:.85;border-radius:2px 7px 3px 8px;transform:rotate(-.8deg) skewX(-6deg)}
.note{margin:0;font-size:15.5px;color:var(--ink-2);min-height:var(--line)}
.note.bad{color:var(--red)}
.mark-margin{position:absolute;left:-50px;top:calc(var(--line) * 2);width:40px;text-align:center;font-family:var(--math);font-size:34px;color:var(--red);line-height:calc(var(--line) * 2)}
.acts{display:flex;flex-wrap:wrap;column-gap:20px}
.act{font-size:15px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:4px;line-height:var(--line);min-height:var(--line)}
.act:hover:not(:disabled){text-decoration-color:var(--ink)}
.act:disabled{color:var(--ink-3);text-decoration:none}
.act.danger{color:var(--red)}
.flash{animation:ink .45s ease-out}
@keyframes ink{from{opacity:.2}to{opacity:1}}

.working summary{display:inline-block;cursor:pointer;font-size:15px;text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:4px;list-style:none;min-height:var(--line)}
.working summary::-webkit-details-marker{display:none}
.working[open] summary{text-decoration-color:var(--ink)}
.working ol{margin:0;padding-left:26px;font-family:var(--math);font-size:17px;text-wrap:pretty}
.working li::marker{font-family:var(--ui);font-size:13px;color:var(--ink-3)}
.working li:last-child{font-weight:600}

.photo-list{margin-top:var(--line)}
.photo-list h2 span{font-weight:400;color:var(--ink-2)}
.plist,.hlist{list-style:none;margin:0;padding:0}
.plist li{position:relative;display:flex;align-items:baseline;gap:12px;cursor:pointer;font-family:var(--math);font-size:19px}
.plist .n{position:absolute;left:-46px;width:34px;text-align:center;font-family:var(--ui);font-size:13px;color:var(--ink-3)}
.plist .e{flex:1;min-width:0}
.plist .a{font-weight:600}
.plist li:hover .e{text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:4px}
.plist li.sel .a{background:linear-gradient(transparent 18%, var(--hl) 18%, var(--hl) 86%, transparent 86%)}
.plist li.sel .n{color:var(--ink);font-weight:700}
.plist .empty,.hlist .empty{display:block;cursor:default;font-family:var(--ui);font-size:15px;color:var(--ink-3)}

.hlist li{position:relative;display:flex;align-items:baseline;gap:12px;cursor:pointer;font-family:var(--math);font-size:18px}
.hlist .e{flex:1;min-width:0;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hlist .a{font-weight:600;white-space:nowrap}
.hlist .tick{position:absolute;left:-46px;width:34px;text-align:center;color:var(--red);font-size:20px}
.hlist li:hover .e{color:var(--ink)}
.earlier .hlist{max-height:calc(var(--line) * 8);overflow-y:auto}
.fine{margin:var(--line) 0 0;font-size:13px;line-height:16px;color:var(--ink-3)}

/* =============== calculator =============== */
.calc{width:100%;background:var(--body);border-radius:16px 16px 24px 24px;padding:14px 14px 16px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 -2px 0 rgba(0,0,0,.35) inset, 0 12px 22px -10px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.16)}
.lcd{background:var(--lcd);color:var(--lcd-ink);border-radius:5px;padding:8px 12px 6px;margin-bottom:10px;box-shadow:inset 0 2px 5px rgba(0,0,0,.35), 0 0 0 4px #1d1f22}
.heard{font-size:13px;line-height:18px;min-height:18px;color:#3d4a33}
.calc-input{width:100%;font-family:var(--math);font-size:25px;padding:4px 0 0;border:0;background:none;color:var(--lcd-ink);outline:none}
.calc-input:focus{box-shadow:inset 0 -2px 0 rgba(27,35,22,.45)}
.calc-input::placeholder{color:#6f7c62;font-family:var(--ui);font-size:17px}
.calc-result{font-family:var(--math);font-weight:600;font-size:30px;text-align:right;min-height:40px;line-height:40px;word-break:break-word}
.calc-result.dim{color:#56634a;font-weight:400}
.calc-result.err{font-family:var(--ui);font-size:14px;font-weight:400;line-height:20px;padding:8px 0 4px;color:#7a1d10}
.working.on-calc{background:var(--lcd);color:var(--lcd-ink);border-radius:5px;padding:4px 12px;margin:-4px 0 10px;line-height:28px}
.working.on-calc ol{font-size:16px}
.talk{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:54px;margin-bottom:10px;border-radius:9px;background:#1f2225;color:var(--key-ink);font-weight:700;font-size:16.5px;box-shadow:0 3px 0 #121416, inset 0 1px 0 rgba(255,255,255,.07)}
.talk:active{transform:translateY(2px);box-shadow:0 1px 0 #121416}
.talk .led{position:absolute;left:16px;width:9px;height:9px;border-radius:50%;background:#4a1712}
.talk.on .led{background:#ff3b2a;box-shadow:0 0 6px #ff3b2a;animation:blink 1s steps(2) infinite}
.talk.on{color:#ffd6d0}
.talk.busy{color:var(--bar-dim)}
@keyframes blink{50%{opacity:.25}}
.keys{display:grid;grid-template-columns:repeat(5,1fr);gap:9px 8px}
.k{min-height:50px;border-radius:7px;background:var(--key);color:var(--key-ink);font-family:var(--ui);font-size:20px;font-weight:500;box-shadow:0 3px 0 #17191c, inset 0 1px 0 rgba(255,255,255,.08);touch-action:manipulation}
.k:hover{background:#43474e}
.k:active,.k.pressed{transform:translateY(2px);box-shadow:0 1px 0 #17191c;filter:brightness(1.18)}
.k.fn{background:var(--key-2);font-family:var(--math);font-size:20px}
.k.op{background:var(--key-2);font-family:var(--math);font-size:24px}
.k.var{font-style:italic}
.k sup{font-size:.6em}
.k.warm{background:var(--warm);color:#fff;font-size:14px;font-weight:700;box-shadow:0 3px 0 #8f3d14, inset 0 1px 0 rgba(255,255,255,.18)}
.k.warm:hover{background:#e2773c}
.k.exe{background:#e9e7e0;color:#1d2127;font-size:15px;font-weight:700;box-shadow:0 3px 0 #8d8b84, inset 0 1px 0 #fff}
.k.exe:hover{background:#f5f3ec}

/* =============== settings =============== */
.sheet{width:min(460px,calc(100vw - 20px));max-height:calc(100dvh - 32px);padding:0 22px 22px;border:0;border-radius:8px;background:var(--paper);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.sheet::backdrop{background:rgba(20,20,18,.55)}
.sheet-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:16px 0 6px;background:var(--paper)}
.sheet-head h2{margin:0;font-size:21px;font-weight:700}
.close{display:grid;place-items:center;width:44px;height:44px;border-radius:8px}
.close:hover{background:#efeee9}
.sheet h3{margin:18px 0 2px;font-size:15px;font-weight:700;padding-top:14px;border-top:1px solid #e3e1da}
.sheet h3:first-of-type{border-top:0;padding-top:0}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;min-height:48px;cursor:pointer;font-size:15.5px}
.set-row small{display:block;font-size:13px;color:var(--ink-2);line-height:1.4;margin-top:2px}
.set-row input[type=checkbox]{flex:none;width:22px;height:22px;margin:0;accent-color:var(--ink)}
.set-row select{flex:none;max-width:54%;min-height:42px;padding:0 8px;border-radius:6px;border:1px solid #cfccc3;background:#fff;color:var(--ink);font:inherit;font-size:15px}
.set-row input[type=range]{flex:none;width:46%;accent-color:var(--ink)}
.set-actions{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:16px;padding-top:10px;border-top:1px solid #e3e1da}

.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:10px 16px;border-radius:8px;background:var(--ink);color:#fff;font-size:15px;z-index:50}


/* =============== section switch (desktop) =============== */
.views{display:flex;gap:2px;margin-left:8px;padding:3px;border-radius:9px;background:#e0dfd8}
.view-btn{min-height:36px;padding:0 14px;border-radius:7px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.view-btn[aria-current="page"]{background:var(--paper);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.sched-view{display:none}
body[data-tab="sched"] .layout,body[data-tab="grades"] .layout{display:none}
body[data-tab="sched"] .sched-view{display:block}
.grades-view{display:none}
body[data-tab="grades"] .grades-view{display:block}
.grades-wrap{max-width:620px;margin:0 auto;padding:16px 14px 40px}
.g-lead{margin:0;font-size:16px}
.g-open{display:inline-flex;align-items:center;gap:10px;min-height:56px;margin:calc(var(--line) * .75) 0;padding:0 24px;border-radius:9px;background:var(--ink);color:#fff;font-weight:700;font-size:17px;text-decoration:none;line-height:1}
.g-open:hover{background:#000}
.g-steps{margin:0;padding-left:22px;font-size:15.5px}
.g-edit{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.g-edit input{flex:1;min-width:220px;height:32px;border:0;border-bottom:1px solid #b9c7da;background:transparent;font:inherit;font-size:15px;outline:none}

/* =============== screen share =============== */
.stage.screen #video{object-fit:contain}
.stage.screen{background:#1a1a1a}
.screen-help{margin:0;padding:10px 14px 12px;font-size:14px;line-height:1.45;color:var(--bar-dim);border-top:1px solid #222}
.screen-help b{color:var(--bar-ink)}

/* =============== bell schedule =============== */
.sched-wrap{max-width:1000px;margin:0 auto;padding:16px 14px 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.sch-clock{font-variant-numeric:tabular-nums}
.sch-tag{margin:var(--line) 0 0;font-size:15px;font-weight:700;color:var(--red)}
.sch-title{font-family:var(--math);font-size:30px !important;font-weight:600 !important;line-height:calc(var(--line) * 1.5) !important;margin:0}
.sch-sub{margin:0;font-size:15.5px;color:var(--ink-2)}
.sch-count{margin-top:calc(var(--line) * .5);font-family:var(--math);font-size:64px;font-weight:600;line-height:calc(var(--line) * 2.5);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sch-friendly{margin:0;font-size:16px}
.sch-bar{height:10px;margin:11px 0;background:#e6e4dc;border-radius:2px;overflow:hidden}
.sch-bar span{display:block;height:100%;background:var(--hl);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:width .9s linear}
.sch-next{display:grid;grid-template-columns:auto 1fr;column-gap:12px;margin-top:var(--line)}
.sch-next-lbl{grid-row:span 2;font-size:14px;font-weight:700;color:var(--ink-2)}
.sch-next-name{font-weight:700;font-size:16px}
.sch-next-when{font-size:15px;color:var(--ink-2)}
.sch-days{display:flex;gap:6px;flex-wrap:wrap;margin:calc(var(--line) * .25) 0 calc(var(--line) * .25)}
.sch-day-btn{min-height:40px;min-width:52px;padding:0 10px;border-radius:7px;font-size:14.5px;font-weight:500;line-height:1;box-shadow:inset 0 0 0 1px #cfccc3;background:var(--paper)}
.sch-day-btn.today{font-weight:700}
.sch-day-btn[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.sch-list{list-style:none;margin:0;padding:0}
.sch-list li{position:relative;display:flex;justify-content:space-between;gap:12px;font-size:16px}
.sch-list .nm{font-weight:700}
.sch-list .tm{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.sch-list li.brk .nm{font-weight:400;color:var(--ink-2)}
.sch-list li.done .nm,.sch-list li.done .tm{color:var(--ink-3);text-decoration:line-through;text-decoration-color:rgba(196,42,28,.6)}
.sch-list li.now .nm{background:linear-gradient(transparent 18%, var(--hl) 18%, var(--hl) 88%, transparent 88%)}
.sch-list li.now::before,.sch-list li.soon::before{position:absolute;left:-46px;width:34px;text-align:center;color:var(--red);font-weight:700}
.sch-list li.now::before{content:"now"}
.sch-list li.soon::before{content:"next"}
.sch-names summary{display:inline-block;cursor:pointer;font-size:15px;text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:4px;list-style:none;margin-top:calc(var(--line) * .5)}
.sch-names summary::-webkit-details-marker{display:none}
.sch-name-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.sch-name-grid label{display:flex;align-items:center;gap:8px;font-size:14px}
.sch-name-grid span{flex:none;width:62px;color:var(--ink-2)}
.sch-name-grid input{min-width:0;flex:1;height:28px;border:0;border-bottom:1px solid #b9c7da;background:transparent;font:inherit;font-size:15px;color:var(--ink);outline:none}
.sch-name-grid input:focus{border-bottom-color:var(--ink)}

/* =============== phone: one screen at a time =============== */
@media (max-width:860px){
  .top{height:52px;padding:0 6px 0 12px;gap:10px}
  .mark span{display:none}
  .top-btn{padding:0 10px}
  .layout{display:block;padding:10px 10px calc(86px + env(safe-area-inset-bottom))}
  .pane{display:none}
  body[data-tab="scan"] .pane-scan,body[data-tab="calc"] .pane-calc,body[data-tab="hist"] .pane-hist{display:flex;flex-direction:column;gap:10px}
  .camera{border-radius:8px}
  .stage{height:clamp(220px, 38svh, 360px)}
  .cam-bar{min-height:76px;gap:2px;padding:4px 4px}
  .tool{min-width:58px}
  .shutter .ring{width:54px;height:54px}
  .page{padding-right:12px}
  .eq{font-size:25px;line-height:calc(var(--line) * 1.5);min-height:calc(var(--line) * 1.5)}
  .mark-margin{top:calc(var(--line) * 1.5)}
  .ans{font-size:32px;line-height:calc(var(--line) * 1.5)}
  .calc{border-radius:14px 14px 20px 20px}
  .k{min-height:56px}
  .earlier .hlist{max-height:none}

  .views{display:none}
  .sched-wrap{grid-template-columns:1fr;padding:10px 10px calc(86px + env(safe-area-inset-bottom));gap:10px}
  .sch-count{font-size:52px}
  .grades-wrap{padding:10px 10px calc(86px + env(safe-area-inset-bottom))}
  .tab{font-size:12px}
  .sch-name-grid{grid-template-columns:1fr}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);
    padding:4px 6px env(safe-area-inset-bottom);background:var(--paper);border-top:1px solid #d9d7cf}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;font-size:13px;font-weight:500;color:var(--ink-3)}
  .tab svg{width:25px;height:25px}
  .tab[aria-current="page"]{color:var(--ink);font-weight:700}
  .tab[aria-current="page"] svg{stroke-width:2.1}
}
@media (max-width:360px){
  .tool span,.shutter .lbl{font-size:12px}
  .tool{min-width:52px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}