/* TI-84 style graphing calculator device — graphingcalculator.dev
   Adaptive layout: the device fills its stage (.calc-stage, sized to the
   viewport with 100vh/100dvh). Three layouts, no fixed heights on the device:
   - stacked (phones, portrait tablets): screen on top, keypad below
   - side-by-side (landscape tablets, laptops, desktops, landscape phones)
   Keys are CSS-grid rows that share the available height, so nothing is
   clipped on any aspect ratio. System fonts + CSS only. */

.ti84-device {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  color: #1f2937;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#calculator-tool { height: 100%; }

/* ---------- body: charcoal, deep ---------- */
.ti84-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, var(--keys-h, 58%));
  gap: 8px;
  background: linear-gradient(180deg, #2b2e34 0%, #23262c 32%, #17191d 76%, #101215 100%);
  border: 1px solid #000;
  border-radius: 20px;
  padding: 10px 10px 12px;
  box-shadow:
    0 24px 50px -18px rgba(0, 0, 0, .7),
    0 6px 14px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -2px 0 rgba(0, 0, 0, .55),
    inset 2px 0 0 rgba(255, 255, 255, .04),
    inset -2px 0 0 rgba(0, 0, 0, .4);
}

/* ---------- screen column ---------- */
.ti84-screen-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ti84-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #c9cfd8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  margin: 0 6px 6px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .65);
  flex: none;
}
.ti84-brand small { font-size: 8px; color: #8d94a1; letter-spacing: 2px; font-weight: 600; }

.ti84-screen-bezel {
  --bz: 10px;
  position: relative;
  flex: 1;
  min-height: 0;
  background: #04060a;
  border-radius: 12px;
  padding: var(--bz);
  border: 1px solid #000;
  box-shadow: inset 0 3px 14px rgba(0, 0, 0, .95), inset 0 -1px 0 rgba(255, 255, 255, .05);
}
.ti84-screen-bezel::after {
  content: '';
  position: absolute;
  inset: var(--bz);
  border-radius: 4px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .28);
  pointer-events: none;
}
/* canvas is absolutely placed so its size never feeds back into layout */
canvas.ti84-lcd {
  position: absolute;
  left: var(--bz); top: var(--bz);
  width: calc(100% - 2 * var(--bz));
  height: calc(100% - 2 * var(--bz));
  object-fit: contain;
  display: block;
  border-radius: 4px;
  background: #fff;
  touch-action: none; /* 3D mode: pointer drag on the screen rotates the surface */
}
.ti84-strip {
  flex: none;
  height: 5px;
  margin: 8px 6px 0;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .12) 20%, rgba(255, 255, 255, .12) 80%, rgba(255, 255, 255, 0));
  box-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

/* ---------- keys column: rows share the height (1 + 2 + 8 rows) ---------- */
.ti84-keys-col {
  display: grid;
  grid-template-rows: 1fr 2fr 8fr;
  gap: 5px;
  min-height: 0;
  min-width: 0;
}
.ti84-toprow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; min-height: 0; margin: 0; }
.ti84-midrow { display: flex; gap: 8px; align-items: stretch; min-height: 0; margin: 0; }
.ti84-midkeys { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: calc(50% - 2px); align-content: center; gap: 5px; flex: 1; min-height: 0; min-width: 0; }
.ti84-keypad { display: grid; grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 5px; min-height: 0; margin: 0; }
.ti84-krow { display: grid; gap: 5px; min-height: 0; }
.ti84-krow.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ti84-krow.cols-5 { grid-template-columns: repeat(5, 1fr); }

/* circular directional pad: sized by row height, children placed in % */
.ti84-arrowpad {
  position: relative;
  height: 100%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 32%, #2c313a, #14171c 72%);
  border: 1px solid #000;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -4px 8px rgba(0, 0, 0, .65), 0 2px 5px rgba(0, 0, 0, .45);
  flex: none;
}
.ti84-arrowpad .tikey { position: absolute; flex: none; width: 32%; height: 25%; font-size: 10px; border-radius: 8px; padding: 0; }
.ti84-arrowpad .ap-up    { top: 6%;  left: 34%; }
.ti84-arrowpad .ap-down  { bottom: 6%; left: 34%; }
.ti84-arrowpad .ap-left  { top: 37.5%; left: 6%; }
.ti84-arrowpad .ap-right { top: 37.5%; right: 6%; }
.ti84-arrowpad .tikey.ap-ok {
  width: 30%; height: 30%; top: 35%; left: 35%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3a4049, #1d2025 75%);
}

/* ---------- secondary labels printed on the body above each key ---------- */
.tikey-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tikey-labels {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex: none;
  min-height: 9px;
  padding: 0 3px 1px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .2px;
}
.tikey-labels .k2 { color: #f5c518; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); }
.tikey-labels .ka { color: #37bd7d; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); }

/* ---------- keys: domed 3D hardware look ---------- */
.tikey {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex: 1;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, .6);
  background: linear-gradient(#4a505b, #3a3f47 55%, #2b2f36);
  color: #f2f4f8;
  font-family: inherit;
  font-size: clamp(10px, calc(var(--stage-h, 640px) / 56), 15px);
  font-weight: 700;
  cursor: pointer;
  padding: 2px;
  touch-action: manipulation;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 0 rgba(0, 0, 0, .28),
    0 2px 0 rgba(0, 0, 0, .45),
    0 3px 5px rgba(0, 0, 0, .35);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tikey .km { line-height: 1.1; }

.tikey.num {
  background: linear-gradient(#fdfdfb, #f2f2ee 55%, #d9d9d3);
  color: #14181f;
  border-color: rgba(0, 0, 0, .4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -2px 0 rgba(0, 0, 0, .12),
    0 2px 0 rgba(0, 0, 0, .45),
    0 3px 5px rgba(0, 0, 0, .35);
}
.tikey.blue {
  background: linear-gradient(#3f83f5, #2f6fed 55%, #2357c6);
  color: #fff;
}
.tikey.yellow {
  background: linear-gradient(#f9d63f, #f5c518 55%, #d9a514);
  color: #241a00;
  border-color: rgba(0, 0, 0, .5);
}
.tikey.green {
  background: linear-gradient(#3cc184, #2fae6e 55%, #238a56);
  color: #fff;
}
.tikey.enter {
  background: linear-gradient(#2f6fed, #2456c4 60%, #1d47a3);
  color: #fff;
  font-size: 13px;
}
.tikey.on {
  background: linear-gradient(#33373e, #1e2126 60%, #14161a);
  color: #e8ebf0;
}

.tikey.pressed,
.tikey:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    inset 0 -1px 0 rgba(0, 0, 0, .2),
    0 0 0 rgba(0, 0, 0, .45),
    0 1px 2px rgba(0, 0, 0, .3);
}
.tikey:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}

.ti84-note { display: none; }

/* ---------- side-by-side: landscape tablets, laptops, desktops, landscape phones ---------- */
@media (min-width: 640px) and ((min-aspect-ratio: 5/4) or (max-height: 639px)) {
  .ti84-body {
    grid-template-columns: minmax(0, 1fr) clamp(300px, calc(var(--stage-h, 700px) * .56), 500px);
    grid-template-rows: minmax(0, 1fr);
    gap: 14px;
    padding: 14px 16px;
  }
  .ti84-screen-bezel { --bz: 12px; }
}

/* ---------- portrait tablets: bigger screen, comfortable keys ---------- */
@media (min-width: 600px) and (max-aspect-ratio: 5/4) and (min-height: 640px) {
  .ti84-body { --keys-h: min(50%, 520px); gap: 12px; padding: 14px 16px 16px; }
  .ti84-brand { font-size: 13px; }
  .ti84-screen-bezel { --bz: 12px; }
}

/* ---------- phones (portrait): labels sit on the key face to save height ---------- */
@media (max-width: 599px) {
  .ti84-body { --keys-h: 61%; padding: 8px 8px 10px; gap: 6px; border-radius: 16px; }
  .ti84-brand { font-size: 11px; letter-spacing: 2px; margin-bottom: 4px; }
  .ti84-brand small { display: none; }
  .ti84-strip { display: none; }
  .ti84-screen-bezel { --bz: 6px; border-radius: 9px; }
  .ti84-keys-col { grid-template-rows: 1fr 2fr 8fr; gap: 4px; }
  .ti84-toprow, .ti84-midkeys, .ti84-keypad, .ti84-krow { gap: 4px; }
  .ti84-midrow { gap: 6px; }
  .tikey-wrap { position: relative; }
  .tikey-labels { position: absolute; top: 2px; left: 4px; right: 4px; padding: 0; z-index: 1; pointer-events: none; font-size: 7px; min-height: 0; }
  .tikey-wrap .tikey { padding-top: 8px; border-radius: 6px; }
}
/* ---------- landscape phones / very short viewports ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .ti84-body { padding: 6px 8px 8px; gap: 8px; border-radius: 14px; }
  .ti84-brand { font-size: 10px; margin-bottom: 3px; }
  .ti84-brand small, .ti84-strip { display: none; }
  .ti84-screen-bezel { --bz: 6px; }
  .ti84-keys-col, .ti84-toprow, .ti84-midkeys, .ti84-keypad, .ti84-krow { gap: 3px; }
  .tikey-wrap { position: relative; }
  .tikey-labels { position: absolute; top: 1px; left: 3px; right: 3px; padding: 0; z-index: 1; pointer-events: none; font-size: 6px; min-height: 0; }
  .tikey-wrap .tikey { padding-top: 6px; border-radius: 5px; }
}

/* ---------- full-screen (wide) focus mode ---------- */
.ti84-brand-right { display: flex; align-items: center; gap: 8px; }
.ti84-expand {
  font-family: inherit; font-size: 14px; line-height: 1;
  width: 34px; height: 28px; padding: 0;
  color: #e5e7eb; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 6px; cursor: pointer;
  touch-action: manipulation;
}
.ti84-expand:hover { background: rgba(255, 255, 255, .18); }
.ti84-expand:focus-visible, .tikey:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.ti84-backdrop { position: fixed; inset: 0; background: #0f172a; z-index: 9998; }
.ti84-device.ti84-wide {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  z-index: 9999; margin: 0; padding: 6px;
  background: #0f172a;
}
@media (prefers-reduced-motion: reduce) { .tikey { transition: none; } }