/* ============================================================
   topdevphone — Calculator app
   iOS-style pad: dark keys, orange operator column, double-width
   zero. The palette is expressed as local variables so the light
   theme gets a matching light keypad instead of a black slab.
   ============================================================ */
.calc {
  --calc-bg: #0b0b0e;
  --calc-key: #333338;
  --calc-key-hit: #4d4d55;
  --calc-fn: #a5a5ae;
  --calc-fn-ink: #101014;
  --calc-op: #ff9500;
  --calc-op-hit: #ffb04d;
  --calc-op-ink: #ffffff;
  --calc-ink: #ffffff;
  --calc-muted: rgba(255, 255, 255, 0.45);

  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--calc-bg);
  color: var(--calc-ink);
  padding: 6px 14px 26px;
}

[data-theme='light'] .calc {
  --calc-bg: var(--bg-primary);
  --calc-key: #e4e4ea;
  --calc-key-hit: #cfcfd8;
  --calc-fn: #b5b5c0;
  --calc-fn-ink: #101014;
  --calc-op: #ff9500;
  --calc-op-hit: #ffb04d;
  --calc-op-ink: #ffffff;
  --calc-ink: #0a0a0c;
  --calc-muted: rgba(10, 10, 12, 0.42);
}

/* ---------- readout ---------- */
.calc-screen {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-end;
  padding: 0 8px 16px;
  overflow: hidden;
}
.calc-expr {
  font-size: 15px; font-weight: 500; letter-spacing: 0.5px;
  color: var(--calc-muted);
  min-height: 20px; margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.calc-out {
  font-size: 62px; font-weight: 300; line-height: 1.05; letter-spacing: -1px;
  color: var(--calc-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  transition: font-size 0.12s ease;
}
.calc-out.err { color: var(--accent-red); font-weight: 500; }

/* ---------- keypad ---------- */
.calc-pad {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.calc-key {
  height: 68px; border-radius: 34px;
  background: var(--calc-key); color: var(--calc-ink);
  font-size: 29px; font-weight: 400; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, transform 0.08s ease, color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.calc-key:active,
.calc-key.hit { background: var(--calc-key-hit); transform: scale(0.96); }

.calc-key.fn {
  background: var(--calc-fn); color: var(--calc-fn-ink);
  font-size: 25px; font-weight: 500;
}
.calc-key.fn:active,
.calc-key.fn.hit { filter: brightness(1.12); }

.calc-key.op {
  background: var(--calc-op); color: var(--calc-op-ink);
  font-size: 33px; font-weight: 500;
}
.calc-key.op:active,
.calc-key.op.hit { background: var(--calc-op-hit); }
/* pending operator stays inverted until the next entry, like iOS */
.calc-key.op.active { background: #ffffff; color: var(--calc-op); }

.calc-key.zero {
  grid-column: span 2;
  justify-content: flex-start;
  padding-left: 27px;
}

@media (prefers-reduced-motion: reduce) {
  .calc-key, .calc-out { transition: none; }
}