/* MPI Scholar Academy — PAPER  (paper.js)  BUILD paper-1 */
.paper{
  --ink:#1E1B2E; --faint:#B9B4CF; --rule:#D9E4F5; --ok:#2E8B57; --bad:#D9483B; --hi:#FFF2B3;
  --cell:44px; --small:28px;
  --hand:'Patrick Hand','Segoe Print','Bradley Hand','Comic Sans MS',cursive;
  margin:8px 0 0; background:#FCFBF7; border-radius:14px; border:1px solid #E6E2F2;
  padding:18px 14px 20px;
  background-image:linear-gradient(var(--rule) 1px, transparent 1px);
  background-size:100% 30px; background-position:0 12px;
  font-family:var(--hand); font-size:2rem; line-height:1; color:var(--ink);
}
.paper.done{box-shadow:inset 0 0 0 3px #3FA95A}
.paper .sum{display:inline-grid;justify-items:end;min-width:100%}
.paper .row{display:grid;grid-auto-flow:column;align-items:end;justify-content:end}
.paper .row.small{height:var(--small)}
.paper .row.line{height:0;border-top:3px solid var(--ink);margin:4px 0 6px}
.paper .row .op{width:var(--cell);text-align:center;color:#6B6690;font-size:1.6rem}
.paper .c{width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center;
  position:relative;color:var(--ink);border:2px dotted transparent;border-radius:8px}
.paper .c.in{cursor:pointer}
.paper .c.in:empty::after{content:'';position:absolute;inset:8px;border-bottom:2px dotted var(--faint)}
.paper .c.in.on{border-color:#8F86C9;background:var(--hi)}
.paper .c.in.ok{color:var(--ok)} .paper .c.in.bad{color:var(--bad)}
.paper .c.zero{color:#8B86A6}
.paper .row.small .c{height:var(--small);font-size:calc(var(--cell) * .52);align-items:flex-end;padding-bottom:2px;letter-spacing:-.04em;color:#6B6690}
.paper .row.small .c.in{border-radius:6px}
.paper .row.small .c.in.on{background:#FFF2B3}
.paper .row.small .c.in:empty::after{inset:auto 30% 3px 30%;border-bottom:2px dotted #D9D4EA}   /* short and faint: a carry space, not an answer square */
.paper .c.given{cursor:pointer}
.paper .c.struck::before{content:'';position:absolute;left:8px;right:8px;top:50%;height:3px;background:var(--ink);transform:rotate(-55deg);border-radius:2px}
.paper .row.small .c.struck::before{left:6px;right:6px;height:2px}
.paper .c.struck{color:#9B96B5}
.paper .c.say{background:#FFE08A;border-color:#E2AE2A;border-style:solid}

/* long division */
.paper .div .quot{margin-left:calc(var(--cell) + 14px)}
.paper .div .bracket{position:relative;padding-left:12px;border-left:3px solid var(--ink);border-top:3px solid var(--ink);border-top-left-radius:10px}
.paper .div .dsr{width:auto;padding:0 6px;margin-right:2px}
.paper .div .work{margin-left:calc(var(--cell) + 14px)}
.paper .div .work.sub{border-top:2px solid var(--ink)}
.paper .div .remrow{margin-top:10px}
.paper .div .remrow .op{width:auto;padding:0 8px;font-family:var(--hand);color:var(--ink)}
.paper .div .remrow .c.in{width:auto;min-width:var(--cell);padding:0 6px}

/* the blank paper under the problem */
.paper .row.scratchgap{height:20px}
.paper .row.scratch .m{width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#D9D4EA;font-size:1.1rem}
.paper .row.scratch .m::after{content:'—'}
.paper .row.scratch.ruled{border-bottom:3px solid var(--ink)}
.paper .row.scratch .c.in:empty::after{border-bottom-color:#E6E2F0}

/* algebra ladder */
.paper .ladder{padding:4px 0 8px}
.paper .ln{display:flex;justify-content:center;align-items:baseline;gap:10px;min-height:var(--cell);margin:2px 0}
.paper .side{display:flex;align-items:baseline;gap:4px;min-width:5ch;justify-content:flex-end}
.paper .side.r{justify-content:flex-start}
.paper .eq{padding:0 8px}
.paper .stepnote{display:flex;justify-content:center;gap:10px;font-size:1.05rem;color:#8B86A6}
.paper .stepnote span{min-width:5ch;text-align:right} .paper .stepnote span.r{text-align:left}
.paper .ln .c{width:auto;min-width:var(--cell);padding:0 6px}
.paper .ln.ok .c{color:var(--ok)} .paper .ln.bad .c{color:var(--bad)} .paper .ln.solved{color:var(--ok);justify-content:center}
.paper .pops{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px;font-family:system-ui,sans-serif}
.paper .pops button{min-height:40px;border-radius:10px;border:2px solid #CFC9E4;background:#fff;font:700 .78rem system-ui;padding:0 10px;color:#23203A;cursor:pointer}
.paper .pops button.on{background:#23203A;color:#fff}
.paper .pops .num{width:58px;text-align:center;font:700 1rem system-ui;border:2px solid #CFC9E4;border-radius:10px;min-height:40px}
.paper .pops .apply{background:#F5C244;border-color:#E2AE2A}
.paper .pops .pcheck{background:#EDFBF0;border-color:#3FA95A}
.paper .pnote{font:600 .8rem system-ui;color:#4B4570;min-height:1.2em}

/* show-me card */
.pdemocard{grid-column:1 / -1}
.pdemohead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:700 .9rem system-ui;color:#23203A}
.pdemohead b{margin-right:auto}
.pcaption{margin-top:8px;font:600 .95rem system-ui;color:#23203A;min-height:1.4em;cursor:pointer}
body.pdemo .paper:not(.pdemocard .paper) .c.in{pointer-events:none}

/* the phone pad (paper.js) */
#ppad{position:fixed;left:0;right:0;bottom:0;z-index:1400;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));
  display:none;grid-template-columns:repeat(4,1fr);gap:7px;background:rgba(20,18,31,.96);border-top:2px solid rgba(255,255,255,.14)}
#ppad.open{display:grid}
#ppad button{min-height:50px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:#2E2A46;color:#fff;font:700 1.25rem system-ui}
#ppad button:active{background:#4A4463}
#ppad .ok{grid-column:span 2;background:#4E9A51} #ppad .back{background:#6E3B3B} #ppad .sym{background:#3D3760;font-size:1.1rem}
body.ppad-open{padding-bottom:calc(270px + env(safe-area-inset-bottom,0px)) !important}
body.ppad-open #mtabs, body.ppad-open #sfx-toggle{display:none !important}
@media (min-width:901px){ #ppad{display:none !important} }
@media (max-width:480px){ .paper{padding:14px 8px 16px} }