/* learn-calc.css - the on-screen calculator (learn-calc.js). Docked beside the question from 1100 px, a sheet over the
   bottom of the screen below that. Rounded keys on the page's own surfaces, no hairlines, brand teal for = only. */
.lc{position:fixed;z-index:60;box-sizing:border-box;background:var(--surface);color:var(--ink);border-radius:20px;
  box-shadow:0 18px 48px rgba(11,22,38,.22);padding:14px;display:grid;gap:10px;outline:none}
.lc[hidden]{display:none}
@media (min-width:1100px){.lc{right:max(16px,calc((100vw - 1180px) / 2 - 300px));top:92px;width:300px;max-height:calc(100dvh - 120px);overflow:auto}}
/* a phone or tablet: a sheet resting on the action bar (Check stays in reach), the question scrolls clear above it */
@media (max-width:1099px){.lc{left:0;right:0;bottom:var(--lp-foot-h,88px);border-radius:22px 22px 0 0;padding:12px;max-height:calc(100dvh - var(--lp-foot-h,88px) - 80px);overflow:auto;box-shadow:0 -12px 36px rgba(11,22,38,.2)}
  body.lc-open .lp-stage{padding-bottom:calc(var(--lp-foot-h,88px) + 460px)}}
.lc-h{display:flex;align-items:center;justify-content:space-between}
.lc-h b{font:700 17px var(--f-body)}
.lc-x{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:12px;background:none;color:var(--ink-2);cursor:pointer}
.lc-x:hover{background:var(--sunk)}
.lc-scr{border-radius:14px;background:var(--sunk);padding:10px 12px;min-height:76px;display:grid;align-content:end;gap:2px;text-align:right;font-variant-numeric:tabular-nums}
.lc-ex{font:500 16px/1.3 var(--f-mono,ui-monospace,Menlo,monospace);color:var(--ink-2);word-break:normal;overflow-x:auto;white-space:nowrap}
.lc-res{font:700 26px/1.2 var(--f-body);color:var(--ink);min-height:31px;overflow-x:auto;white-space:nowrap}
.lc-msg{margin:0;font-size:14px;color:var(--ink-2);text-align:left;min-height:0}
.lc-msg:empty{display:none}
.lc-k{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.lc-b{min-height:44px;border:2px solid var(--btn-2-edge);border-radius:12px;background:var(--btn-2);color:var(--ink);font:650 16px var(--f-body);cursor:pointer;padding:0;box-shadow:0 2px 0 var(--btn-2-lip)}
.lc-b:hover{background:var(--btn-2-hover)}
.lc-b:active{transform:translateY(2px);box-shadow:none}
.lc-b:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.lc-b.d{font-size:18px}
.lc-b.fn{font-size:15px}
.lc-b.cl{color:var(--ln-wrong,#c0362c)}
.lc-b.eq{background:var(--study-btn,#0a7f8a);border-color:var(--study-btn,#0a7f8a);color:var(--on-study-btn,#fff);box-shadow:0 2px 0 var(--study-btn-lip,#065a62)}
.lc-b.eq:hover{background:var(--study-btn-hover,#097883)}
.lc-k .lc-b[data-k="eq"]{grid-column:5;grid-row:span 2}   /* = two cells tall, bottom right */
.lc-k .lc-ins{grid-column:span 3;min-height:44px}
.lc-b:focus-visible,.lc-x:focus-visible,.lc-ins:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.lc-ins{min-height:48px;border:0;border-radius:14px;background:var(--study-tint);color:var(--study-ink);font:700 16px var(--f-body);cursor:pointer}
.lc-ins:disabled{opacity:.5;cursor:default}
/* the button on a question */
.lq-calcbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:2px solid var(--btn-2-edge);border-radius:12px;background:var(--btn-2);box-shadow:0 3px 0 var(--btn-2-lip);color:var(--ink);font:650 15px var(--f-body);cursor:pointer;margin:10px 0 0}
.lq-calcbtn svg{flex:none}
.lq-calcbtn[aria-expanded="true"]{background:var(--study-tint);color:var(--study-ink)}
.lq-calcbtn:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}