/* Geometry measured from an iOS 26 Calculator screenshot on a 393 x 852 pt iPhone (15/16/17 Pro size).
   CSS px == iOS pt. Everything scales with screen width via --u so other models stay proportional. */
:root {
  --u: calc(100vw / 393);   /* one iOS point on a 393pt-wide screen */

  --orange: #ff9201;
  --orange-dark: #fa8c00;
  --orange-press: #fcc78d;
  --fn: #5e5e5e;
  --fn-dark: #525252;
  --fn-press: #a5a5a8;
  --num: #343434;
  --num-dark: #2e2e2e;
  --num-press: #737373;
  --top: #202020;
  --white: #ffffff;
  --rim: rgba(255, 255, 255, 0.16);

  --pad-x: calc(16 * var(--u));
  --gap-x: calc(8 * var(--u));
  --gap-y: calc(8 * var(--u));
  --btn: calc((100vw - 2 * var(--pad-x) - 3 * var(--gap-x)) / 4);
  --top-btn: calc(44 * var(--u));
  --safe-top: env(safe-area-inset-top, 59px);
  --display-size: calc(64 * var(--u));
  --label-size: calc(35 * var(--u));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  color: var(--white);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.calc {
  position: fixed;
  inset: 0;
  background: #000;
  touch-action: manipulation;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  cursor: default;
}

/* Inline SVG glyphs: each sets its own --w/--h in pt at the 393 scale */
button svg {
  display: block;
  pointer-events: none;
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

/* Top corner buttons */
.round {
  position: absolute;
  top: var(--safe-top);
  width: var(--top-btn);
  height: var(--top-btn);
  border-radius: 50%;
  background: var(--top);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.28s ease-out;
}
.round.history { left: var(--pad-x); }
.round.mode { right: var(--pad-x); }
.round.pressed { transition: none; background: #3a3a3a; }

/* Keypad. Anchored from the top: in a home-screen web app iOS reports a viewport that is
   shorter than the screen by the status-bar height, so bottom anchoring lands too high.
   The screen aspect ratio is the same on all recent iPhones, so top offsets in --u scale fine. */
.keypad {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  /* Offsets are from the top safe-area inset, so they hold whether the page starts under
     the status bar (translucent) or below it (opaque, safe-area-inset-top = 0). */
  top: calc(var(--safe-top) + 277.9 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: var(--btn);
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
}

.key {
  height: var(--btn);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--label-size);
  font-weight: 400;
  line-height: 1;
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--rim);
  transition: background-color 0.28s ease-out, color 0.28s ease-out;
}
.key.num { background: linear-gradient(160deg, var(--num) 55%, var(--num-dark)); }
.key.fn  { background: linear-gradient(160deg, var(--fn) 45%, var(--fn-dark)); }
.key.op  { background: linear-gradient(180deg, var(--orange) 60%, var(--orange-dark)); }

.key.pressed { transition: none; }
.key.num.pressed { background: var(--num-press); }
.key.fn.pressed  { background: var(--fn-press); }
.key.op.pressed  { background: var(--orange-press); }

/* Text labels render slightly low relative to the reference; nudge them up */
.key.num:not([data-key="negate"]), .key.fn[data-key="clear"] { padding-bottom: calc(0.8 * var(--u)); }
/* The backspace glyph's visual centre sits left of the button centre in iOS */
.key[data-key="bs"] svg { transform: translateX(calc(-1.3 * var(--u))); }

/* Grey expression line above the number (iOS 26) */
.expr {
  position: absolute;
  left: var(--pad-x);
  right: calc(15.5 * var(--u));
  top: calc(var(--safe-top) + 160.8 * var(--u));
  height: calc(27 * var(--u));
  color: #8e8e93;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}
.expr span {
  font-size: calc(27 * var(--u));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

/* Display */
.display {
  position: absolute;
  left: var(--pad-x);
  right: calc(16.2 * var(--u));
  /* The box is exactly one line of the base size, so shrunken text stays centred on the
     same line as iOS does. Puts the digit baseline at 314pt on iOS Safari. */
  top: calc(var(--safe-top) + 200.9 * var(--u));
  height: var(--display-size);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}
/* Text that still doesn't fit runs off the left edge and fades out, as in iOS 26 */
.clipped {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 calc(25 * var(--u)));
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 calc(25 * var(--u)));
}
.display-text {
  display: block;
  font-size: var(--display-size);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transform-origin: right bottom;
  will-change: font-size;
}