/* The calculator's own face (M0 placeholder; the real face waits on Jay's pick, plan Q2).
   Only the key ARRANGEMENT follows the TI-84 Plus CE. Colors, shape and type are our own. */
:root {
  --case: #24262c; --case-edge: #33363e; --bezel: #111216; --lcd: #eef0ea; --lcd-ink: #1d1f22;
  --key-fn: #3a3d46; --key-fn-ink: #f2f2f2; --key-num: #e4e4e2; --key-num-ink: #1b1c1f;
  --key-op: #4a4e59; --key-2nd: #3d7fd6; --key-alpha: #3c9f58; --key-enter: #5d6270;
  --lab-2nd: #7bb8ff; --lab-alpha: #84d898; --page: #6b6e76;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--page); overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
#stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#stage.port { inset: auto; left: 50%; top: 50%; transform-origin: 0 0; background: var(--page); box-shadow: 0 0 0 1px #000; }
body.porting { background: #0b0b0d; }

/* the calculator is drawn at a fixed design size (380 × 900) and scaled to fit its stage */
#calc { width: 380px; height: 900px; flex: none; transform-origin: 50% 50%; position: relative;
  background: linear-gradient(180deg, var(--case-edge), var(--case) 8%); border-radius: 34px 34px 46px 46px;
  box-shadow: inset 0 0 0 2px #0006, 0 18px 40px #0007; padding: 22px 20px 26px; user-select: none; touch-action: manipulation; }
#brand { height: 22px; color: #c9ccd3; font: 600 12px/22px system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; padding-left: 6px; }
#brand small { font-weight: 400; letter-spacing: .08em; color: #8d919a; text-transform: none; margin-left: 8px; }
#bezel { background: var(--bezel); border-radius: 12px; padding: 12px; margin-bottom: 18px; }
#screen { display: block; width: 316px; height: 237px; background: var(--lcd); border-radius: 3px; image-rendering: auto; }

/* keypad: 5 columns; rows 2–3 have three keys and the arrow pad on the right */
#pad { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 9px; row-gap: 4px; }
.cell { display: flex; flex-direction: column; align-items: stretch; }
.labels { height: 13px; display: flex; justify-content: space-between; font: 600 9.5px/13px system-ui, sans-serif; padding: 0 1px; white-space: nowrap; overflow: visible; }
.labels .s2 { color: var(--lab-2nd); } .labels .sa { color: var(--lab-alpha); }
.key { height: 38px; border: 0; border-radius: 9px; font: 600 15px/1 system-ui, sans-serif; cursor: pointer; padding: 0;
  background: var(--key-op); color: var(--key-fn-ink); box-shadow: 0 2px 0 #0008, inset 0 1px 0 #ffffff22;
  transition: transform .06s, filter .06s; touch-action: manipulation; }
.key.fn { height: 26px; border-radius: 7px; font-size: 12.5px; background: var(--key-fn); }
.key.num { background: var(--key-num); color: var(--key-num-ink); font-size: 18px; }
.key.k2nd { background: var(--key-2nd); }
.key.kalpha { background: var(--key-alpha); }
.key.enter { background: var(--key-enter); }
.key.lit, .key:active { transform: translateY(2px); filter: brightness(1.45); box-shadow: 0 0 0 3px #ffd84a, 0 0 14px #ffd84aaa; }
.key.armed { box-shadow: 0 0 0 3px #fff, 0 2px 0 #0008; }

#arrows { grid-column: 4 / span 2; grid-row: 2 / span 2; position: relative; }
#arrows .key { position: absolute; width: 40px; height: 34px; border-radius: 10px; font-size: 13px; }
#arrows [data-key="UP"]    { left: 45px; top: 6px; }
#arrows [data-key="DOWN"]  { left: 45px; top: 70px; }
#arrows [data-key="LEFT"]  { left: 4px;  top: 38px; }
#arrows [data-key="RIGHT"] { left: 86px; top: 38px; }

#status { margin-top: 10px; color: #f0f0f0; font: 14px/1.45 system-ui, sans-serif; text-align: center; max-width: 92vw; min-height: 1.4em; }
#status b { color: #fff; }
#portbar { position: fixed; left: 8px; top: 8px; z-index: 10; font: 13px system-ui, sans-serif; color: #fff; display: none; }
#portbar select { font: inherit; }