/* Page chrome: rounded, chunky controls in a TI-Nspire blue/slate palette. */
:root{--ink:#26323d;--muted:#6b7a88;--line:#dbe3ec;--page:#eef3f8;--blue:#1a8fe3;--blue-dark:#1271b8;--green:#58cc02;--pad:20px;--tool:44px;--gap:14px;font-family:Nunito,"Nunito Sans",ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--page);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}
html{min-height:100%;background:var(--page);overscroll-behavior:none}
body{margin:0;min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #84c8f5;outline-offset:3px}
button:disabled{cursor:default}
button[hidden]{display:none}
main{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--pad)}
.stage{display:flex;align-items:flex-start;gap:var(--gap)}

/* Calculator: screen above the original keypad, sized to fill the window height.
   Height = 2.282 x width + 11px (LCD bezel + 8px gap + 252:386 keypad). */
.calculator{--h:calc(100dvh - 2*var(--pad) - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;width:min(calc(100vw - 2*var(--pad) - var(--tool) - var(--gap)),calc((var(--h) - 11px)/2.282),640px);background:#fff;color:#111;user-select:none}
.screen-bezel{border-radius:3px;padding:5px;background:#fff;border:1px solid #222}
.screen{aspect-ratio:4/3;position:relative;background:#edf2ef;overflow:hidden;border-radius:2px}
canvas{display:block;width:100%;height:100%;image-rendering:auto}
#lcd{touch-action:none;cursor:default}
#screen-message{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;color:#425853;background:radial-gradient(at 50% 0,#f6f9f4,#e7eeea)}
#screen-message[hidden]{display:none}
.screen-logo{margin-bottom:13px;border-radius:12px}
#screen-title{font-size:15px;font-weight:800;margin:0 0 6px}
#screen-detail{font-size:11px;line-height:1.6;max-width:225px;margin:0;color:#62766b}
.loader{display:block;width:120px;height:8px;margin-top:14px;border-radius:8px;background:#d6e2dc;overflow:hidden}
.loader i{display:block;height:100%;width:40%;border-radius:8px;background:var(--green)}
body[data-state=fault] .loader{display:none}

.ti-keypad{position:relative;width:100%;aspect-ratio:252/386;user-select:none}
.ti-keypad>img{display:block;width:100%;height:100%;pointer-events:none}
.key{touch-action:none}
.ti-hit.key{position:absolute;margin:0;padding:0;border:0;border-radius:3px;background:transparent;box-shadow:none;color:transparent;font-size:0;touch-action:none;transform:none;min-height:0}
.ti-hit.key:disabled{opacity:1}
.ti-hit.key.active,.ti-hit.key:active{background:#0078d438;box-shadow:inset 0 0 0 1px #0078d4;transform:none}
.ti-touch{position:absolute;left:31.15%;top:12.23%;width:37.7%;height:20%;touch-action:none;border-radius:14px}
.ti-touch.active{background:#0078d430}

/* Toolbar */
.controls{display:flex;flex-direction:column;gap:12px}
.chunky{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--tool);padding:0 14px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font-size:17px;font-weight:900;box-shadow:0 4px 0 var(--line);transition:transform .06s,box-shadow .06s,background .1s;white-space:nowrap}
.controls .chunky{width:var(--tool);padding:0}
.controls .chunky span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.chunky svg{width:16px;height:16px;fill:currentColor;flex:none}
.chunky:hover:not(:disabled){background:#f7fafc}
.chunky:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--line)}
.chunky:disabled{color:#b3bec8;border-color:#e8edf2;box-shadow:0 4px 0 #e8edf2}
#pause:not(:disabled){color:var(--blue)}
body.expanded #maximize{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 0 var(--blue-dark)}
.chunky.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 0 var(--blue-dark)}
.chunky.primary:hover{background:#2b9bec}
.chunky.primary:active{box-shadow:0 0 0 var(--blue-dark)}

/* Error note only appears when something went wrong. */
.setup-note{display:none;width:100%;max-width:520px;margin-top:16px;padding:14px 16px;border:2px solid #ffc1c1;border-radius:18px;background:#fff1f1;color:#a12a2a;box-shadow:0 4px 0 #ffc1c1}
body[data-state=fault] .setup-note{display:block}
.setup-note strong{font-size:14px;font-weight:800}
.setup-note p{font-size:12px;line-height:1.55;margin:4px 0 0;overflow-wrap:anywhere;max-height:12em;overflow:auto}
#fault-details{width:100%;max-width:420px;font-size:12px;margin:12px 0}
#fault-details summary{cursor:pointer;font-weight:800;color:var(--muted)}
#fault-trace{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;background:#fff;border:2px solid var(--line);border-radius:12px;padding:10px}
#fault-details[hidden]{display:none}

/* About dialog */
dialog{border:2px solid var(--line);border-radius:24px;max-width:420px;width:calc(100% - 32px);padding:28px 26px 24px;color:var(--ink);box-shadow:0 8px 0 var(--line),0 30px 80px #10203533}
dialog::backdrop{background:#10203566;backdrop-filter:blur(3px)}
.dialog-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:none;font-size:26px;line-height:1;color:#9aa7b4}
.dialog-close:hover{background:#f0f4f8;color:var(--ink)}
.about-logo{display:block;border-radius:14px}
dialog h2{font-size:24px;font-weight:900;letter-spacing:-.4px;margin:12px 0 6px}
dialog h3{font-size:14px;font-weight:900;margin:18px 0 6px}
dialog p,dialog li{font-size:13px;line-height:1.6;color:#566676}
dialog ul{margin:0;padding-left:18px}
.info-box{background:#eaf5fd;border:2px solid #c7e6fb;border-radius:14px;padding:12px 14px;font-size:13px;color:#16507c}
.info-box p{margin:4px 0 0;color:#2c6a98;overflow-wrap:anywhere}
.small{font-size:11px!important;color:var(--muted)!important}
dialog a{color:var(--blue-dark);font-weight:700}
dialog .chunky.primary{width:100%;height:44px;margin-top:8px;font-size:15px;text-transform:uppercase;letter-spacing:.8px}

/* Maximized: LCD and keypad side by side, both filling the window height. */
body.expanded .calculator{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 16px;width:min(calc(100vw - 2*var(--pad) - var(--tool) - var(--gap)),1700px)}
body.expanded .screen-bezel{width:min(100%,calc((var(--h) - 12px)*4/3 + 12px));justify-self:center}
body.expanded .ti-keypad{height:var(--h);width:auto}

/* Phones: toolbar becomes a row above the calculator. */
@media(max-width:799px){
 :root{--pad:8px;--tool:38px;--gap:8px}
 .stage{flex-direction:column-reverse;align-items:stretch}
 .controls{flex-direction:row;justify-content:flex-end;gap:8px}
 .chunky{border-radius:12px}
 #maximize{display:none}
 .calculator{width:min(calc(100vw - 2*var(--pad)),calc((var(--h) - var(--tool) - 4px - var(--gap) - 11px)/2.282))}
 .screen-bezel{padding:4px}
}
/* Short landscape screens: LCD left, keypad right, toolbar at the edge. */
@media(max-height:600px) and (orientation:landscape){
 :root{--pad:6px;--tool:36px;--gap:8px}
 .stage{flex-direction:row;align-items:flex-start}
 .controls{flex-direction:column;gap:9px}
 #maximize{display:none}
 .calculator,body.expanded .calculator{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px;width:calc(100vw - 2*var(--pad) - var(--tool) - var(--gap))}
 .screen-bezel,body.expanded .screen-bezel{width:min(100%,calc((var(--h) - 12px)*4/3 + 12px));justify-self:center}
 .ti-keypad,body.expanded .ti-keypad{height:var(--h);width:auto}
}
@media(prefers-reduced-motion:no-preference){
 .loader i{animation:slide 1.1s ease-in-out infinite}
 dialog[open]{animation:appear .18s ease-out}
 @keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
 @keyframes appear{from{opacity:0;transform:translateY(10px) scale(.98)}}
}