/* Roger: dial pad button under Skip, video button under Pause, and the full screen dial pad.
   Colors, glossy round buttons and sizes come from styles.css. */

/* the two small buttons under Skip and Pause */
.side .mini { display: grid; justify-items: center; gap: 3px; margin-top: 8px; }
.side .mini span { font-size: 12px; line-height: 1.1; color: var(--muted); }
.circle.sm { width: 46px; height: 46px; }
.circle.sm svg.i { width: 21px; height: 21px; }
.circle.on,
.circle[aria-pressed="true"] {
  color: #fff; border-color: #0e6db8;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0) 51%), linear-gradient(180deg, #46b7f9, #0f78c8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -4px 8px rgba(0, 50, 110, 0.28), 0 6px 14px rgba(42, 167, 242, 0.4);
}

/* the dial pad fills the space between the top bar and the tab bar, never scrolls */
body.dp-open { overflow: hidden; }
.dp {
  position: fixed; left: 0; right: 0; top: var(--dp-top, 58px); bottom: var(--dp-bot, 56px); z-index: 4;
  width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 14px 10px;
  display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  background: linear-gradient(180deg, #ffffff, var(--bg));
}
.dp[hidden] { display: none; }

.dp-head { display: flex; align-items: center; gap: 10px; min-height: 46px; }
.dp-who { flex: 1; min-width: 0; display: grid; line-height: 1.15; }
.dp-who small { display: flex; gap: 10px; min-width: 0; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--neon2); white-space: nowrap; }
.dp-who small #dpState { flex: none; }
.dp-who .dp-p { min-width: 0; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; text-transform: none; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dp-who b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-timer { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--good); }
.dp-timer[hidden] { display: none; }

.dp-screen { display: grid; gap: 2px; }
.dp-hint { min-height: 15px; font-size: 12px; text-align: center; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-line { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 48px; }
.dp-num {
  grid-column: 2; text-align: center; font-size: clamp(22px, 7.2vw, 32px); font-weight: 760; letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-num.ph { color: var(--muted); font-weight: 600; }
.dp-back {
  grid-column: 3; appearance: none; width: 44px; height: 44px; border: 0; background: none; color: var(--neon2);
  display: grid; place-items: center; cursor: pointer; border-radius: 50%;
}
.dp-back[hidden] { display: none; }
.dp-back:active { background: var(--card2); }

/* keypad: key size comes from the space that is left, so it always fits */
.dp-keys { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-content: center; }
.dp-grid { --g: 10px; --k: 58px; display: grid; grid-template-columns: repeat(3, var(--k)); grid-auto-rows: var(--k); gap: var(--g); }
@supports (width: 1cqw) {
  .dp-grid { --k: min(calc((100cqh - 3 * var(--g)) / 4), calc((100cqw - 2 * var(--g)) / 3), 78px); }
}
.dp-key {
  appearance: none; width: var(--k); height: var(--k); padding: 0; border-radius: 50%; border: 1px solid #b9dcf7;
  color: var(--text); font: inherit; cursor: pointer; display: grid; place-content: center; justify-items: center; line-height: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 51%), linear-gradient(180deg, #e9f6ff, #bfe1fa);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 6px rgba(11, 111, 184, 0.14), 0 5px 12px rgba(11, 111, 184, 0.18);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.dp-key b { font-size: calc(var(--k) * 0.4); font-weight: 650; }
.dp-key small { margin-top: 2px; min-height: 1em; font-size: calc(var(--k) * 0.15); letter-spacing: 1.5px; color: var(--muted); }
.dp-key:active { transform: scale(0.94); background: linear-gradient(180deg, #d6ecff, #a9d4f3); }

/* the same controls as the main screen: Skip, the big Start / End button, Pause */
.dp-ctl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.dp-big { --bigk: clamp(74px, 14vh, 104px); width: var(--bigk); height: var(--bigk); }
@supports (height: 1dvh) { .dp-big { --bigk: clamp(74px, 14dvh, 104px); } }
.dp-big b { font-size: 18px; white-space: nowrap; }
.dp-big small { font-size: 12px; }
.dp-ctl .side { font-size: 12px; }
.dp-ctl .circle { width: 54px; height: 54px; }
.dp-row2 { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.dp-row2 .btn { min-height: 46px; padding: 8px 12px; font-size: 15px; }

/* shorter screens: trim the extras so the keys stay a good size to tap */
@media (max-height: 620px) {
  .dp { gap: 4px; padding-top: 4px; padding-bottom: 6px; }
  .dp-grid { --g: 6px; }
  .dp-hint { display: none; }
  .dp-head { min-height: 36px; }
  .dp-head .circle.sm { width: 36px; height: 36px; }
  .dp-who b { font-size: 15px; }
  .dp-line { min-height: 40px; }
  .dp-big { --bigk: 72px; }
  .dp-big b { font-size: 15px; }
  .dp-big small { font-size: 11px; }
  .dp-ctl .circle { width: 48px; height: 48px; }
  .dp-ctl .side { gap: 2px; }
  .dp-row2 .btn { min-height: 42px; }
}
/* wide and short (phone on its side): keys on the left, everything else on the right */
@media (orientation: landscape) and (max-height: 520px) {
  .dp {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 4px;
    grid-template-areas: "keys head" "keys screen" "keys ctl" "keys row2";
  }
  .dp-head { grid-area: head; }
  .dp-screen { grid-area: screen; }
  .dp-keys { grid-area: keys; }
  .dp-ctl { grid-area: ctl; align-self: center; }
  .dp-row2 { grid-area: row2; }
  .dp-big { --bigk: 72px; }
  .dp-num { font-size: 24px; }
}