/* Keep the camera clear while giving the calculator all remaining height. */
html,body{background:#000}
:root{--safe-top:var(--native-safe-top,env(safe-area-inset-top,0px));--safe-bottom:var(--native-safe-bottom,env(safe-area-inset-bottom,0px));--safe-left:var(--native-safe-left,env(safe-area-inset-left,0px));--safe-right:var(--native-safe-right,env(safe-area-inset-right,0px))}
.safe-area-probe{position:fixed;visibility:hidden;pointer-events:none;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
#app{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:max(48px,var(--safe-top)) max(4px,var(--safe-right)) max(8px,var(--safe-bottom)) max(4px,var(--safe-left));background:#000}
#three-stage,#calculator.ex,#calculator.cw{flex:0 0 auto;width:var(--calculator-width);height:var(--calculator-height);max-width:none;margin:auto 0;background:#000}
#three-stage{order:1}
/* Use the already empty shoulders beside the camera; no separate control row. */
.switchbar{position:absolute;inset:4px 0 auto;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:480px;height:44px;margin:0 auto;padding:0 6px;box-sizing:border-box;background:transparent;pointer-events:none;z-index:10}
.switch{display:flex;align-items:center;width:78px;height:44px;padding:0;border:0;background:none;pointer-events:auto}
.switch button{position:static;inset:auto;width:78px;min-height:44px;margin:0;padding:0;border:0;border-radius:10px;font:500 10px/1 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:0;background:transparent;color:#bfc2c7;box-shadow:none}
.switch button::after{content:' ↔';font-size:12px}
.switch button.selected{display:none}
.switchbar #about{position:static;inset:auto;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:10px;background:transparent;color:#aeb0b7;font:23px/44px -apple-system,BlinkMacSystemFont,sans-serif;pointer-events:auto}
.switch button:active,.switchbar #about:active{background:#23252a}
.switch button:focus-visible,.switchbar #about:focus-visible{outline:2px solid #fff;outline-offset:-2px}
#help{max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px)}
/* Preview overlays represent unavailable pixels, not production UI. */
html[data-device-preview=island]::after,html[data-device-preview=notch]::after{content:'';position:fixed;z-index:1000;pointer-events:none;background:#070707;box-shadow:inset 0 0 0 1px #151515;left:50%;transform:translateX(-50%)}
html[data-device-preview=island]::after{top:11px;width:126px;height:37px;border-radius:22px}
html[data-device-preview=notch]::after{top:0;width:210px;height:32px;border-radius:0 0 20px 20px}
html[data-device-preview=island]::before,html[data-device-preview=notch]::before{content:'';position:fixed;z-index:1000;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:#888;pointer-events:none}

.switch{padding:0;border:0}.switch button{min-height:44px}

/* The reconstructed front is the screen surface, including the camera shoulders. */
html,body,#app{background:#222527}
#app{padding:0}
#three-stage{width:var(--calculator-width);height:var(--calculator-height);margin:0;background:#25272a}
.switchbar{max-width:600px}
.switch button{font-size:11px;letter-spacing:1px;color:#d7d9da;text-shadow:0 1px 2px #000}
.switchbar #about{color:#c6c9cb}
.three-mode #calculator .bezel{border-radius:4px!important}
.three-mode #calculator #lcd{border-radius:4px;box-shadow:inset 0 2px 5px #52665099,inset 0 0 1px #344335}
#calculator .face{display:none!important}
.procedural-fallback #calculator.ex,.procedural-fallback #calculator.cw{border-radius:0}
.procedural-fallback #calculator .key{background-color:#343a3d!important;background-image:var(--drawn-legend)!important;background-size:100% 100%!important;box-shadow:inset 0 1px 1px #ffffff30,0 2px 3px #0009!important;touch-action:manipulation}
.procedural-fallback #calculator.ex #numeric .key{background-color:#e6e9e7!important}
.procedural-fallback #calculator.ex #numeric .key.blue{background-color:#234baa!important}
.procedural-fallback #calculator.ex .dpad .key,.procedural-fallback #calculator.ex #navigation>.key:nth-child(-n+4){background-color:#bdc6cc!important}
.procedural-fallback #calculator.cw .key.shift{background-color:#b7a970!important}
.procedural-fallback #calculator .key:active{transform:translateY(2px);filter:brightness(.85)}

/* Centre controls in the clear shoulders, aligned with the camera cutout. */
.switchbar{height:max(48px,var(--safe-top));top:0;padding:0;display:grid;grid-template-columns:minmax(72px,1fr) 146px minmax(72px,1fr);align-items:center}
.switchbar .switch{width:72px;justify-self:center;grid-column:1}
.switchbar .switch button{width:72px}
.switchbar #about{grid-column:3;justify-self:center;font-size:20px}
html[data-device-preview=notch] .switchbar{grid-template-columns:1fr 210px 1fr}
/* Font glyphs extend beyond TeX's nominal box. Leave ink padding inside the LCD. */
#calculator .calc-editor{height:100%;min-height:0;display:block;overflow:auto;scrollbar-width:none}
#calculator .calc-editor math-field{height:auto;min-height:0;font-size:23px;display:block;overflow:visible}
#calculator .calc-editor math-field::part(content){padding:9px 2px 7px;overflow:visible}
#calculator .calc-editor math-field::part(container){overflow:visible}
#calculator #screen:has(#answer:not(:empty)) .calc-editor{height:58%}
#calculator #answer{height:42%;font-size:21px;min-height:0;overflow:auto;padding:2px 3px 6px;box-sizing:border-box}
#calculator #answer:empty{display:none}
#calculator #error{overflow:auto;overflow-wrap:anywhere;white-space:normal}
/* Retain MathLive's programmatic horizontal scrolling for long expressions. */
#calculator .calc-editor math-field::part(content){overflow:hidden}
.form-page-indicator{position:absolute;right:1px;top:1px;font:9px sans-serif;pointer-events:none}
/* Centre the live glass within the raised surround on both fronts. */
.three-mode #calculator .bezel{transform:none}

/* Matrix answers need their own rows and full-height brackets, not font glyphs. */
#calculator #screen:has(#answer .lcd-matrix) .calc-editor{height:32%}
#calculator #screen:has(#answer .lcd-matrix) #answer{height:68%;overflow:hidden;padding:3px 4px 5px}
.lcd-matrix{display:inline-flex;align-items:stretch;gap:.3em;vertical-align:top;line-height:1.08;font-size:21px;white-space:nowrap;max-width:none}
.lcd-matrix-grid{display:grid;column-gap:.65em;row-gap:.15em;align-items:center}
.lcd-matrix-cell{display:block;text-align:right;min-width:1em}
.lcd-matrix-cell math{display:inline-block;vertical-align:middle}
.lcd-matrix-bracket{display:block;width:.24em;min-width:3px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.lcd-matrix-bracket.left{border-left:1.5px solid currentColor}
.lcd-matrix-bracket.right{border-right:1.5px solid currentColor}

/* iPad full-screen and Mac windows frame the calculator at a familiar scale.
   Compact iPad windows deliberately keep the edge-to-edge phone treatment. */
@media (min-width:600px){
 html,body,#app{
  background:
   radial-gradient(circle at 18% 14%,#35556a52 0,transparent 34%),
   radial-gradient(circle at 82% 80%,#53644d3d 0,transparent 36%),
   linear-gradient(145deg,#111820 0%,#1b2228 48%,#101518 100%);
 }
 body::before{
  content:'';position:fixed;inset:0;pointer-events:none;opacity:.24;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(to bottom,#0009,transparent 78%);
  mask-image:linear-gradient(to bottom,#0009,transparent 78%);
 }
 #three-stage{
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 28px 70px #000a,0 1px 0 #ffffff24,inset 0 0 0 1px #ffffff0d;
 }
 .switchbar{top:var(--calculator-top);max-width:var(--calculator-width)}
 #assistant-takeover{right:calc((100vw - var(--calculator-width))/2 + 18px)}
}
/* Catalyst's compact window is calculator-only; the board belongs to wide mode. */
html[data-pocket-platform=mac][data-calculator-layout=framed] #three-stage{border-radius:22px;overflow:hidden}
html[data-pocket-platform=mac] .switchbar{top:var(--calculator-top);max-width:var(--calculator-width)}