/* -------------------------------------------------------------------------
   phone.css — the handset: shell, earpiece, display window, soft keys,
   rocker and number pad.

   Every length is in `cqw` (1% of the handset's width) so the whole device is
   one rigid drawing that scales to any screen. The vertical grid it is laid
   out on, in the same units, top to bottom:

        4  earpiece          61  display ends
       11  wordmark          63  soft keys and rocker
       20  display           82  clear key
                             99  number pad, four rows of 21
                            181  chin
   ---------------------------------------------------------------------- */

/* --- shell -------------------------------------------------------------- */

.device__inner {
  border-radius: inherit;
  overflow: hidden;
  background:
    linear-gradient(163deg,
      #5a6773 0%, #46525e 14%, #3a444f 40%, #303945 68%, #232a33 100%);
  box-shadow:
    inset 0 0 0 0.3cqw rgba(255, 255, 255, 0.09),
    inset 0 -2cqw 3.5cqw rgba(0, 0, 0, 0.42),
    inset 0 1cqw 2cqw rgba(255, 255, 255, 0.05);
}

/* The seam of the removable front cover. */
.device__inner::before {
  content: "";
  position: absolute;
  inset: 1.4cqw;
  border-radius: 13% / 6.6%;
  box-shadow:
    inset 0 0 0 0.22cqw rgba(255, 255, 255, 0.07),
    0 0 0 0.22cqw rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

/* --- earpiece ----------------------------------------------------------- */

.earpiece {
  position: absolute;
  left: 50%;
  top: 4.2cqw;
  width: 27cqw;
  height: 3.4cqw;
  transform: translateX(-50%);
  border-radius: 1.7cqw;
  background:
    repeating-linear-gradient(90deg,
      #262c33 0 0.45cqw, #14181d 0.45cqw 0.9cqw),
    #14181d;
  box-shadow:
    inset 0 0.4cqw 0.7cqw rgba(0, 0, 0, 0.95),
    0 0.22cqw 0 rgba(255, 255, 255, 0.09);
}

/* --- wordmark ----------------------------------------------------------- */

.brand {
  position: absolute;
  left: 0;
  right: 0;
  top: 10.6cqw;
  text-align: center;
  font-size: 4.3cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.36em;
  text-indent: 0.36em; /* re-centre against the trailing letter-space */
  color: #d3dae2;
  text-shadow:
    0 0.18cqw 0.18cqw rgba(0, 0, 0, 0.6),
    0 -0.1cqw 0 rgba(255, 255, 255, 0.18);
}

/* --- display window ----------------------------------------------------- */

.screen {
  position: absolute;
  left: 15cqw;
  top: 19.6cqw;
  width: 70cqw;
  height: 41.4cqw;
  padding: 2.1cqw;
  border-radius: 2.2cqw;
  touch-action: none;
  background: linear-gradient(180deg, #171d1a 0%, #222a26 60%, #1a211d 100%);
  box-shadow:
    inset 0 0.6cqw 1.4cqw rgba(0, 0, 0, 0.9),
    inset 0 0 0 0.2cqw rgba(0, 0, 0, 0.6),
    0 0.3cqw 0 rgba(255, 255, 255, 0.1);
}

.screen__lcd {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.4cqw;
  background: #c7f0d8;
  /* the backlight bleeding into the bezel */
  box-shadow: 0 0 2.5cqw rgba(154, 226, 175, 0.28);
  /* ...and coming up as the phone switches on */
  animation: lcd-warm-up 900ms ease-out 1;
}

@keyframes lcd-warm-up {
  0% { filter: brightness(0.3) contrast(0.7); }
  100% { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .screen__lcd { animation: none; }
}

/* A single soft highlight across the glass — enough to read as a surface,
   not enough to fight the pixels underneath. */
.screen__glass {
  position: absolute;
  inset: 2.1cqw;
  border-radius: 0.4cqw;
  pointer-events: none;
  background:
    linear-gradient(148deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.05) 26%,
      rgba(255, 255, 255, 0) 46%);
}

/* --- keys, shared ------------------------------------------------------- */

.key {
  --tilt: 0deg;
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: #262d36;
  font-family: inherit;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transform: rotate(var(--tilt));
  background:
    linear-gradient(180deg, #e4e9ec 0%, #c8cfd4 36%, #aab2b9 74%, #909aa2 100%);
  box-shadow:
    inset 0 0.3cqw 0 rgba(255, 255, 255, 0.8),
    inset 0 -0.35cqw 0.45cqw rgba(0, 0, 0, 0.24),
    inset 0 0 0 0.12cqw rgba(0, 0, 0, 0.18),
    0 0.35cqw 0.5cqw rgba(0, 0, 0, 0.45);
}

.key:focus-visible {
  outline: 0.35cqw solid #8fd3a4;
  outline-offset: 0.3cqw;
}

.key:active,
.key.is-down {
  background: linear-gradient(180deg, #aab2b9 0%, #929ba3 55%, #858e96 100%);
  box-shadow:
    inset 0 0.4cqw 0.7cqw rgba(0, 0, 0, 0.4),
    inset 0 0 0 0.12cqw rgba(0, 0, 0, 0.25),
    0 0.08cqw 0.15cqw rgba(0, 0, 0, 0.4);
  transform: rotate(var(--tilt)) translateY(0.3cqw);
}

/* --- soft keys ---------------------------------------------------------- */

/* Blank, as they were: what they do is written on the display above them. */
.key--soft {
  top: 62.8cqw;
  width: 27.5cqw;
  height: 13cqw;
}

.key--soft-left {
  --tilt: -5deg;
  left: 5.5cqw;
  border-radius: 6.5cqw 2cqw 2cqw 6.5cqw;
}

.key--soft-right {
  --tilt: 5deg;
  left: 67cqw;
  border-radius: 2cqw 6.5cqw 6.5cqw 2cqw;
}

/* --- up/down rocker ----------------------------------------------------- */

.rocker {
  position: absolute;
  left: 36.5cqw;
  top: 60.5cqw;
  width: 27cqw;
  height: 19cqw;
  border-radius: 14cqw / 9.5cqw;
  overflow: hidden;
  background:
    linear-gradient(180deg, #eef1f3 0%, #d3d9dd 30%, #b4bbc2 70%, #98a1a9 100%);
  box-shadow:
    inset 0 0.35cqw 0 rgba(255, 255, 255, 0.85),
    inset 0 -0.4cqw 0.5cqw rgba(0, 0, 0, 0.22),
    0 0.55cqw 0.8cqw rgba(0, 0, 0, 0.5);
}

/* the moulded waist between the two halves */
.rocker::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 0.5cqw;
  transform: translateY(-50%);
  border-radius: 0.25cqw;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.5));
  pointer-events: none;
}

.key--rocker {
  left: 0;
  width: 100%;
  height: 50%;
  background: none;
  box-shadow: none;
  font-size: 3.4cqw;
  line-height: 1;
  color: #313944;
}

.key--rocker-up { top: 0; align-items: flex-end; padding-bottom: 1.1cqw; }
.key--rocker-down { top: 50%; align-items: flex-start; padding-top: 1.1cqw; }

.key--rocker:active,
.key--rocker.is-down {
  background: rgba(0, 0, 0, 0.16);
  box-shadow: inset 0 0 1.4cqw rgba(0, 0, 0, 0.3);
  transform: none;
}

/* --- clear key ---------------------------------------------------------- */

.key--clear {
  left: 39.5cqw;
  top: 82cqw;
  width: 21cqw;
  height: 11cqw;
  border-radius: 5.5cqw;
  font-size: 4.4cqw;
}

/* --- number pad --------------------------------------------------------- */

.keypad {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  top: 99cqw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6cqw 2.4cqw;
}

.key--pad {
  position: static;
  height: 18.4cqw;
  border-radius: 2.6cqw / 4.2cqw;
  gap: 1.3cqw;
  align-items: baseline;
  padding-top: 0.6cqw;
}

/* The keymat fans very slightly outwards, as the moulded one did. */
.key--pad:nth-child(3n + 1) { --tilt: -3deg; }
.key--pad:nth-child(3n) { --tilt: 3deg; }

.key--pad b {
  font-size: 6.4cqw;
  font-weight: 600;
  line-height: 1;
}

.key--pad i {
  font-size: 2.6cqw;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #3d4652;
}

/* --- chin --------------------------------------------------------------- */

.mic {
  position: absolute;
  left: 50%;
  top: 189cqw;
  width: 13cqw;
  height: 1.7cqw;
  transform: translateX(-50%);
  border-radius: 0.85cqw;
  background: #171b20;
  box-shadow:
    inset 0 0.25cqw 0.4cqw rgba(0, 0, 0, 0.9),
    0 0.2cqw 0 rgba(255, 255, 255, 0.08);
}