/* ============================================================================
   FORMS ON MOBILE — edge to edge, no card

   On a phone a form does not need to be a card. The border, radius and shadow only narrow the
   usable width and draw a frame around something that already fills the screen, so below 640px the
   form spans the viewport and the chrome comes off. The content keeps its own padding, so nothing
   touches the glass — it is the CARD that goes, not the inset.

   Deliberately opt-in per page. "Which layouts are forms" is a judgement, not something a selector
   can infer, so this file is linked only by the form pages:

     the registration wizard   private, public and account
     the resident forms        find PPO ID, check status, request site key, application
     the auth forms            login, forgot PIN, reset PIN
     guest pass                issue a pass
     contact

   Everything else keeps its card at every width — the legal and static pages, the permit/receipt
   card, and the in-shell list cards (My Permits, My Registrations, Wallet, Plates).

   The bleed is `margin-inline: calc(50% - 50vw)` rather than unsetting the container's padding,
   because that padding differs per page (.reg-shell, .app-main-body and .public-auth-shell each
   set their own) and this rule should not have to know which one it is sitting in. Horizontal
   overflow cannot result: html/body carry overflow-x: clip.
   ============================================================================ */
@media (max-width: 640px) {
  .reg-card,
  .auth-panel,
  .guest-generate-card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* Page sheets set their own max-width on these (680px, 960px, none) and load in a different
       order on every page, so the bleed is stated once here and stated to win. */
    max-width: none !important;
    width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
  }

  /* The shells these sit in add a page gutter that would otherwise show as a stripe down each
     side of a now-full-bleed form. */
  .reg-shell,
  .public-auth-shell {
    padding-inline: 0;
  }
}