/* Handheld (PDA) · page layout only. The frame, type scale, controls and parts are the kit's (data-scale="station"). */
@layer page {
  /* The device: a phone-sized column on a desk screen, the whole screen on a phone. */
  #h { max-width: 520px; margin-inline: auto; border-inline: 1px solid var(--line); }

  /* Head: the working rack, the device, Preview and the person on one line. */
  .h-top { display: flex; flex: 1; align-items: center; gap: var(--s2); min-width: 0; }
  .h-rackbox { flex: 0 1 auto; min-width: 0; }
  @media (max-width: 360px) { .h-top { flex-wrap: wrap; } }

  /* Two thumb buttons side by side in a screen's bar, at every width. */
  .h-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  @media (max-width: 420px) { .h-row2 { grid-template-columns: minmax(0, 1fr); } }

  /* Badged out: the lock screen, centred. */
  .h-lock { justify-items: center; padding-block: var(--s8); text-align: center; }
}