/* Calculator — page-specific styling. Calculator card stays dark-on-light
   or light-on-dark depending on theme (uses --color-brand/--color-bg so it
   still reads as a self-contained device in both modes). */

.calculator-shell { max-width: 360px; width: 100%; }

.calculator-app {
  background: var(--color-brand);
  color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
}

.calc-history {
  min-height: 18px;
  font-size: var(--text-xs);
  opacity: 0.55;
  text-align: right;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
}

.calc-display { text-align: right; padding: var(--space-3) var(--space-2) var(--space-4); }
.calc-expression { font-size: var(--text-sm); opacity: 0.6; min-height: 20px; font-family: var(--font-mono); }
.calc-value {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 800;
  overflow-x: auto;
  white-space: nowrap;
}

.calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.calc-key {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg) 12%, transparent);
  color: var(--color-bg);
  font-size: var(--text-xl);
  font-weight: 600;
  font-family: var(--font-display);
  transition: background 0.15s ease, transform 0.1s ease;
  border: none;
}
.calc-key:hover { background: color-mix(in srgb, var(--color-bg) 20%, transparent); }
.calc-key:active { transform: scale(0.94); }
.calc-key.wide { grid-column: span 2; aspect-ratio: auto; }

.op-key { background: color-mix(in srgb, var(--color-bg) 8%, transparent); color: color-mix(in srgb, var(--color-bg) 75%, transparent); font-size: var(--text-lg); }
.accent-key, .equals-key { background: var(--color-accent); color: #fff; }
.accent-key:hover, .equals-key:hover { background: var(--color-accent-hover); }