/* The calculator: the device's own look (tokens --dev-*), a black body, an LCD, keys with their gold and
   blue legends stacked above the face legend and the letter at the lower right. */

.calc {
  background: var(--dev-body);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-3) var(--s-5);
  box-shadow: var(--shadow-2);
  width: 100%;
  max-width: 380px;
  user-select: none;
}

.lcd {
  background: var(--dev-lcd);
  color: var(--dev-lcd-ink);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-4);
}
.lcd-status {
  font-size: var(--t-xs);
  color: var(--dev-lcd-faint);
  min-height: 20px;
  white-space: pre;
  overflow: hidden;
}
.lcd-status[data-shift="gold"]::before { content: "GOLD "; color: var(--dev-lcd-ink); font-weight: 600; }
.lcd-status[data-shift="blue"]::before { content: "BLUE "; color: var(--dev-lcd-ink); font-weight: 600; }
.lcd-line {
  display: flex;
  gap: var(--s-2);
  font-size: var(--t-lg);
  line-height: var(--lh-tight);
  min-height: 26px;
}
.lcd-label { color: var(--dev-lcd-faint); font-size: var(--t-sm); width: 1ch; align-self: center; }
.lcd-text { flex: 1; text-align: right; white-space: pre; overflow: hidden; }
.lcd-left .lcd-text { text-align: left; }
.lcd-x { font-weight: 600; }
.lcd-soft {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-1);
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  text-align: center;
}
.lcd-softcell { border-top: 1px solid var(--dev-lcd-faint); padding-top: 2px; white-space: nowrap; overflow: hidden; }
.lcd-softcell.on { font-weight: 600; }
.lcd-softcell.sub::after { content: "▸"; }
/* no menu up: the line keeps its height, drawn empty (a zero-width space gives each cell a line) */
.lcd-soft-empty { visibility: hidden; }
.lcd-softcell:empty::before { content: "\200b"; }

.keypad { display: flex; flex-direction: column; gap: var(--s-2); }
.keyrow { display: grid; gap: var(--s-2); }
.keyrow-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.keyrow-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.keyrow-soft { margin-bottom: var(--s-1); }

.key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-height: 56px;
  padding: var(--s-1) 2px var(--s-1);
  background: var(--dev-key);
  color: var(--dev-key-ink);
  border: 1px solid var(--dev-key-edge);
  border-radius: var(--r-sm);
  font: inherit;
  cursor: pointer;
  transition: background var(--quick), transform var(--quick);
}
.key:active { transform: translateY(1px); }
.key.lit { background: var(--dev-lit); color: var(--dev-body); }
/* the key a printed name in the lesson means, while that name is pointed at or focused */
/* an app's frame (a game from APPS) over the screen, which keeps its size: nothing below it moves */
.lcd { position: relative; }
.lcd-app { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; background: inherit; border-radius: inherit; }
.lcd-app[hidden] { display: none; }
.lcd.app-on > :not(.lcd-app) { visibility: hidden; }
.key.hint { outline: 3px solid var(--accent); outline-offset: 2px; }
.key.lit .key-gold, .key.lit .key-blue { color: var(--dev-body); }
.key-shifted { display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 100%; overflow: hidden; font-size: 11px; line-height: 1; white-space: nowrap; }
.key-gold { color: var(--dev-gold); }
.key-blue { color: var(--dev-blue); }
.key-face { max-width: 100%; overflow: hidden; font-size: var(--t-sm); font-weight: 600; line-height: 1.1; white-space: nowrap; }
.key-letter { position: absolute; right: 3px; bottom: 1px; font-size: 9px; color: var(--ink-faint); }
.key-soft { min-height: 24px; background: var(--dev-key-edge); }
.key-goldshift { background: var(--dev-gold); border-color: var(--dev-gold); }
.key-blueshift { background: var(--dev-blue); border-color: var(--dev-blue); }
[data-shift="1"] .key-goldshift, [data-shift="2"] .key-blueshift { outline: 2px solid var(--dev-lit); outline-offset: 1px; }