/* Guest-only layout. Keep all input visible without changing owner pages. */
.guest-page {
  --key-gap: 4px;
  --letter-columns: 7;
  padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right))
    max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
}
.guest-page .guest-card {
  width: 100%;
  max-width: 460px;
  height: calc(100svh - max(4px, env(safe-area-inset-top)) - max(4px, env(safe-area-inset-bottom)));
  max-height: 900px;
  min-height: min-content;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
  border-radius: 16px;
}
.guest-page .acceptance-banner {
  flex: none;
  padding: 0;
  margin: 0;
  font-size: 9px;
  line-height: 12px;
  border-radius: 4px;
}
.guest-page .brand {
  flex: none;
  gap: 0;
  margin: 0;
}
.guest-page .brand > span {
  font-size: 27px;
  line-height: 28px;
  letter-spacing: -1px;
}
.guest-page .brand small { font-size: 10px; line-height: 12px; }
.guest-page #entry {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.guest-page .identity-row {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border-bottom: 2px solid var(--green);
}
.guest-page .identity-value { flex: 1; min-width: 0; }
.guest-page #identity-label { display: block; color: var(--muted); font-size: 10px; line-height: 12px; }
.guest-page .identity-display { display: flex; align-items: baseline; gap: 10px; }
.guest-page .identity-display output {
  font-size: 27px;
  line-height: 30px;
  letter-spacing: 5px;
  font-weight: 750;
}
.guest-page .identity-divider { color: var(--muted); font-size: 18px; }
.guest-page #backspace { flex: none; width: 48px; min-height: 44px; font-size: 26px; }
.guest-page .keyboard { margin: 0; gap: var(--key-gap); }
.guest-page .numeric { flex: none; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(48px, 7svh, 64px)); }
.guest-page .guest-card .numeric button { height: 100%; min-height: 48px; font-size: 24px; background: #e8eddf; }
.guest-page .letters {
  flex: 1;
  grid-template-columns: repeat(var(--letter-columns), minmax(0, 1fr));
  grid-auto-rows: minmax(44px, 1fr);
}
.guest-page .guest-card .letters button { min-width: 0; min-height: 44px; height: 100%; padding: 0; font-size: 20px; }
.guest-page .keyboard button { border-radius: 8px; }
.guest-page .quantity-row {
  flex: none;
  gap: 6px;
  margin: 0;
  min-height: 44px;
  font-size: clamp(16px, 4.5vw, 20px);
  font-weight: 700;
}
.guest-page .quantity-row > div { display: grid; grid-template-columns: 44px minmax(24px, auto) 44px; gap: 4px; }
.guest-page .quantity-row button { min-height: 44px; width: 44px; font-size: 25px; }
.guest-page .quantity-row output { min-width: 24px; font-size: 23px; }
.guest-page .primary { flex: none; min-height: 50px; font-size: 18px; }
.guest-page .message { flex: none; min-height: 0; margin: 0; font-size: 11px; line-height: 14px; }
.guest-page .message:empty { display: none; }
.guest-page .guest-alert {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 14px;
  background: #203d34cf;
  overflow-y: auto;
}
.guest-page .alert-panel { width: 100%; max-width: 430px; padding: 20px; border: 3px solid #b45122; border-radius: 16px; background: var(--paper); }
.guest-page .alert-panel h2 { margin: 0 0 14px; font-size: 24px; line-height: 1.25; }
.guest-page .alert-panel p { margin: 0 0 18px; font-size: 18px; line-height: 1.45; white-space: pre-line; }
.guest-page .alert-panel button, .guest-page .alert-panel a { width: 100%; min-height: 48px; margin: 6px 0 0; padding: 10px; font-size: 16px; text-align: center; }
.guest-page .alert-panel a { display: block; border-radius: 10px; background: var(--green); color: white; text-decoration: none; }
.guest-page .guest-alert:focus { outline: none; }
.guest-page .success { flex: 1; padding: 16px 0; align-content: center; }
.guest-page .progress-ring { width: min(210px, 55vw); height: min(210px, 55vw); }
.guest-page .success-check { margin: 10px 0; }
/* Taller screens can offer wider letters, matching digit widths at 770px. */
@media (min-height: 700px) {
  .guest-page { --letter-columns: 6; }
}
@media (min-height: 770px) {
  .guest-page { --letter-columns: 5; }
}
/* Very narrow or landscape displays may scroll instead of hiding controls. */
@media (max-width: 339px) {
  .guest-page .quantity-row { font-size: 14px; }
  .guest-page #identity-label { font-size: 9px; }
}