/* The calculator's own face. Jay picked B, Harbor ("Ballauer GX"), on 2026-11-14: body.face-harbor, set in index.html
   and embed.html. :root holds the Graphite colors, the base the skins build on.
   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;
  --brand-ink: #c9ccd3; --brand-sub: #8d919a; --key-shadow: #0008;
}
/* Face designs for Jay's pick (plan Q2, review page /review/faces.html). Graphite is the default above.
   Our own colors and names; the 2nd labels stay in a blue family and ALPHA in a green family. */
body.face-harbor {
  --case: #1c2a44; --case-edge: #2b3d61; --bezel: #0e1424; --lcd: #eef1ec;
  --key-fn: #2c3f63; --key-fn-ink: #eef2fa; --key-op: #34496f; --key-num: #f4f0e6; --key-num-ink: #1a2030;
  --key-2nd: #3f8ee8; --key-alpha: #39a865; --key-enter: #c79a1e;
  --lab-2nd: #8ec5ff; --lab-alpha: #8fe0a8; --page: #5e6a80; --brand-ink: #e3c76a; --brand-sub: #9fb0cf;
}
body.face-paper {
  --case: #e8e6e3; --case-edge: #f7f6f4; --bezel: #1d1e22; --lcd: #f0f1ec;
  --key-fn: #3b3a39; --key-fn-ink: #f6f5f3; --key-op: #57534f; --key-num: #ffffff; --key-num-ink: #201e1d;
  --key-2nd: #2a68bd; --key-alpha: #2b8749; --key-enter: #ec3013;
  --lab-2nd: #1d56a6; --lab-alpha: #1d7339; --page: #9a9794; --brand-ink: #201e1d; --brand-sub: #6b6866; --key-shadow: #0005;
}
body.face-paper #calc { box-shadow: inset 0 0 0 2px #0002, 0 18px 40px #0005; }
body.face-paper .key.num { box-shadow: 0 2px 0 #0004, inset 0 0 0 1px #0002; }
* { 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: var(--brand-ink); 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: var(--brand-sub); 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 var(--key-shadow), 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; }

#tools { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
body.tools-side #tools { flex-direction: column; align-items: stretch; }
/* landscape windows: the Keyboard switch sits in the lower-right corner, so the calculator gets the full height */
body.tools-side #tools { position: absolute; right: 16px; bottom: 16px; margin: 0; }
/* phones (M7, 2026-11-14): not in scope, so a short note first, with a way through */
#phone-note { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: var(--page); padding: 16px; }
#phone-note[hidden] { display: none; }
#phone-note .card { max-width: 340px; background: #fff; color: #1f1e1d; border-radius: 10px; padding: 20px 22px; font: 17px/1.45 system-ui, sans-serif; box-shadow: 0 10px 30px #0004; }
#phone-note .card b { font-size: 19px; }
#phone-note .card p { margin: 8px 0 16px; }
#phone-note button { font: 600 16px system-ui, sans-serif; color: #fff; background: #3a3d46; border: 0; border-radius: 6px; padding: 12px 16px; min-height: 44px; cursor: pointer; }
#tools button { font: 600 clamp(13px, 0.8vw, 28px)/1 system-ui, sans-serif; color: #fff; background: #3a3d46; border: 1px solid #8d919a; border-radius: 6px; padding: 7px 12px; cursor: pointer; }
#tools button[aria-pressed="false"] { color: #c9ccd3; background: transparent; }
#status { margin-top: 8px; color: #e6e6e6; font: clamp(13px, 0.85vw, 30px)/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; }