/* TI-84 Plus CE faceplate.
   Geometry is a 258 x 604 unit plate scaled so the 232 x 174 LCD is exactly
   320 x 240 CSS px (1 unit = 320/232 px), like the real CE screen. */
@font-face{font-family:'TI84Screen';src:url(/assets/fonts/ti84-screen.woff2?v=3) format('woff2');font-display:block}
@font-face{font-family:'TI84Status';src:url(/assets/fonts/ti84-status.woff2?v=3) format('woff2');font-display:block}

.ti84-body.ti84ce{
    position:relative;
    flex-shrink:0;
    width:355.862px;            /* 258 * 320/232 */
    height:833.103px;           /* 604 * 320/232 */
    padding:0;
    margin:0;
    border:0;
    border-radius:11px;
    background:#000;
    box-shadow:0 0 0 1px rgba(255,255,255,.07),0 24px 60px rgba(0,0,0,.55);
    transform-origin:top center;
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
}
.ti84ce .ce-face{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.ti84ce .ce-face .ce-key .kb{transition:filter .06s,fill .06s}
.ti84ce .ce-face .ce-key.down .kb{filter:brightness(.8)}
.ti84ce .ce-face .ce-gen.down .kb{fill:#3b3b3b}
.ti84ce .ce-face .ce-key.down path:not(.kb){transform:translateY(.4px)}
.ti84ce.is-2nd #ce-second .kb{stroke:#fff;stroke-width:1.4}
.ti84ce.is-alpha #ce-alpha .kb{stroke:#fff;stroke-width:1.4}

/* ---------- key hit areas (transparent, over the artwork) ---------- */
.ti84ce .ti84-buttons{position:absolute;left:0;top:0;width:100%;height:100%;display:block;margin:0;padding:0;gap:0;pointer-events:none;z-index:3}
.ti84ce .calc-btn.ce-hit{
    all:unset;
    position:absolute;
    box-sizing:border-box;
    pointer-events:auto;
    cursor:pointer;
    border-radius:7px;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
.ti84ce .calc-btn.ce-hit:focus-visible{outline:2px solid #44c8f5;outline-offset:-3px}
.ti84ce .calc-btn.ce-hit-arrow{border-radius:0}
.ti84ce .calc-btn.ce-hit-arrow:focus-visible{outline:none;background:rgba(68,200,245,.25)}

/* ---------- LCD ---------- */
.ti84ce .ti84-screen-bezel{
    position:absolute;
    left:17.931px;              /* 13 units */
    top:40px;                   /* 29 units */
    width:320px;
    height:240px;
    margin:0;
    padding:0;
    border-radius:0;
    background:#fff;
    box-shadow:none;
    overflow:hidden;
    z-index:2;
}
.ti84ce .ti84-screen{
    position:absolute;
    left:0;top:0;width:320px;height:240px;
    min-height:0;
    margin:0;padding:0;
    border:0;border-radius:0;
    background:#fff;
    color:#000;
    font-family:'TI84Screen',ui-monospace,monospace;
    font-size:20px;
    line-height:20px;
    font-weight:normal;
    overflow:hidden;
    user-select:text;
    -webkit-user-select:text;
}
.ti84ce .screen-status-bar{
    position:absolute;
    left:0;top:0;width:320px;height:30px;
    display:block;
    margin:0;padding:0 0 0 2px;
    border:0;
    background:#525552;
    color:#fff;
    font-family:'TI84Status',ui-monospace,monospace;
    font-size:13px;
    line-height:13px;
    white-space:nowrap;
    word-spacing:0;
    overflow:hidden;
}
.ti84ce .status-item{font:inherit;color:#fff;letter-spacing:0;text-transform:none;margin:0;padding:0}
.ti84ce .status-item.active{font:inherit;color:#fff}
.ti84ce .status-battery{
    position:absolute;
    left:303px;top:4px;
    width:14px;height:20px;
    margin:0;
    background:#c5c2c5;
    border-radius:2px;
    font-size:0;
    color:transparent;
}
.ti84ce .status-battery svg{display:none}
.ti84ce .status-battery::before{content:'';position:absolute;left:4px;top:-2px;width:6px;height:2px;background:#c5c2c5}
.ti84ce .status-battery::after{content:'';position:absolute;left:4px;top:3px;width:6px;height:15px;background:#009e00}

.ti84ce .screen-content{
    position:absolute;
    left:0;top:34px;right:0;bottom:0;
    display:flex;
    flex-direction:column;
    font-family:inherit;
    color:#000;
    overflow:hidden;
}
.ti84ce .screen-history{
    flex:0 1 auto;
    min-height:0;
    max-height:none;
    overflow:hidden;
    font-size:20px;
    line-height:20px;
    color:#000;
}
.ti84ce .screen-history .history-line,
.ti84ce .screen-history .result-line{
    position:relative;
    min-height:20px;
    margin:0;
    font-size:20px;
    line-height:20px;
    font-weight:normal;
    color:#000;
    white-space:pre-wrap;
    word-break:break-all;
}
.ti84ce .screen-history .history-line{text-align:left;padding:0 8px 0 0}
.ti84ce .screen-history .result-line{text-align:right;padding:0 8px 0 0}
/* dotted divider under each answer, as on the CE home screen */
.ti84ce .screen-history .result-line::after{
    content:'';
    position:absolute;
    left:0;right:0;bottom:-1px;
    height:2px;
    background:repeating-linear-gradient(90deg,transparent 0 2px,#000 2px 4px,transparent 4px 6px);
}
.ti84ce .screen-input{
    flex:0 0 auto;
    min-height:20px;
    margin:0;padding:0 8px 0 0;
    font-size:20px;
    line-height:20px;
    font-weight:normal;
    text-align:left;
    color:#000;
    white-space:pre-wrap;
    word-break:break-all;
}
.ti84ce .calc-cursor{
    display:inline-block;
    width:12px;height:20px;
    margin:0;
    vertical-align:top;
    background:linear-gradient(#000,#000) no-repeat 2px 3px/10px 14px;
    animation:ceBlink 1s steps(1,end) infinite;
    position:relative;
}
.ti84ce.is-2nd .calc-cursor::after,
.ti84ce.is-alpha .calc-cursor::after{
    position:absolute;left:0;top:0;width:12px;height:20px;
    color:#fff;
    text-align:center;
    font:20px/20px 'TI84Screen',ui-monospace,monospace;
}
.ti84ce.is-2nd .calc-cursor::after{content:'\2191'}
.ti84ce.is-alpha .calc-cursor::after{content:'A'}
@keyframes ceBlink{0%{opacity:1}50%{opacity:0}}
.ti84ce .screen-result{
    flex:0 0 auto;
    min-height:0;
    padding:0 8px 0 0;
    font-size:20px;
    line-height:20px;
    text-align:right;
    color:#000;
}
.ti84ce .screen-result:empty{display:none}
.ti84ce .screen-indicators{display:none}

/* no browser scrollbars inside the LCD */
.ti84ce .ti84-screen-bezel *{scrollbar-width:none}
.ti84ce .ti84-screen-bezel *::-webkit-scrollbar{display:none}

/* ---------- on-screen menus (MATH, MODE, VARS ...) ---------- */
.ti84ce .calc-overlay-menu{
    top:30px;
    background:#fff;
    color:#000;
    padding:0;
    font-family:'TI84Screen',ui-monospace,monospace;
    font-size:20px;
    line-height:20px;
}
.ti84ce .calc-overlay-menu .menu-title{
    font:inherit;
    margin:0;padding:0 2px;
    border:0;
    background:#000;
    color:#fff;
}
.ti84ce .calc-overlay-menu .menu-tabs{gap:0;margin:0;background:#fff}
.ti84ce .calc-overlay-menu .menu-tab{
    flex:0 0 auto;
    padding:0 6px;
    font:inherit;
    background:#fff;
    color:#000;
    border:0;
    border-radius:0;
}
.ti84ce .calc-overlay-menu .menu-tab.active{background:#000;color:#fff}
.ti84ce .calc-overlay-menu .menu-tab-content{max-height:none;min-height:0}
.ti84ce .calc-overlay-menu .menu-option{padding:0 2px;font:inherit;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti84ce .calc-overlay-menu .menu-option:hover{background:#000;color:#fff}
.ti84ce .calc-overlay-menu .menu-close{
    margin-top:auto;
    padding:0;
    font:inherit;
    text-align:center;
    background:#525552;
    color:#fff;
    border:0;
}
.ti84ce .calc-overlay-menu .menu-close:hover{background:#000}
.ti84ce .mode-setting-row{gap:0 8px;padding:0 2px}
.ti84ce .mode-opt{padding:0 2px;font:inherit;color:#000;border-radius:0}
.ti84ce .mode-opt.selected{background:#000;color:#fff}

/* ---------- graph screen: the whole LCD ---------- */
.ti84ce .graph-screen{
    position:absolute;
    left:0;top:0;width:320px;height:240px;
    margin:0;
    border:0;border-radius:0;
    background:#fff;
    overflow:hidden;
}
.ti84ce #graphCanvas{position:absolute;left:0;top:0;width:320px!important;height:240px!important}
.ti84ce .graph-controls{
    position:absolute;
    right:3px;top:3px;
    gap:3px;
    padding:0;
    background:transparent;
    border:0;
    z-index:4;
}
.ti84ce .graph-controls .btn-graph{
    width:22px;height:22px;
    font-size:.65rem;
    border-radius:3px;
    background:rgba(255,255,255,.85);
    border:1px solid #9a9a9a;
}

/* ---------- small screens: the page script scales the plate to fit ---------- */
@media (max-width:768px){
    .ti84-body.ti84ce{padding:0;border-radius:11px;width:355.862px}
}

/* zoom controls sit centred above the calculator, as on the reference */
.calculator-wrapper:has(.ti84ce){flex-direction:column;align-items:center}
.calculator-wrapper:has(.ti84ce) .calc-zoom-controls{position:static;margin:0 auto 12px;align-self:center}

/* CE error screen (ERROR: NAME / 1:Quit / 2:Goto) */
.ti84ce .ti-error-screen{
    position:absolute;
    left:0;top:30px;right:0;bottom:0;
    z-index:40;
    background:#fff;
    color:#000;
    padding:4px 0 0;
    font:20px/20px 'TI84Screen',ui-monospace,monospace;
}
.ti84ce .ti-err-title{text-align:center;margin-bottom:2px}
.ti84ce .ti-err-title span{background:#000;color:#fff;padding:0 3px}
.ti84ce .ti-err-opt{padding:0 2px;cursor:pointer;white-space:nowrap}
.ti84ce .ti-err-num{background:#000;color:#fff}
.ti84ce .ti-err-num.ti-err-plain{background:none;color:#000}
.ti84ce .ti-err-help{margin-top:12px;padding:8px 2px 0;border-top:2px solid #000;white-space:normal}