body{font-family:system-ui,sans-serif;margin:2rem auto;max-width:40rem;line-height:1.5}
.error{color:#b00020}
input,button{display:block;margin:.5rem 0;padding:.5rem;font-size:1rem}

/* Navigation.
 *
 * Two shapes, one markup. On a laptop — where the guest registry and the Luma
 * import get used — it is a plain tab strip above the content. On a phone it
 * becomes a fixed bottom bar, because the phone's job is check-in at the door:
 * one hand, a crowded room, and the thumb nowhere near the top of the screen.
 */
.nav-bar{display:flex;align-items:stretch;gap:.25rem;
         margin-bottom:1.5rem;border-bottom:1px solid #ddd;background:#fff}
.nav-bar a{display:flex;align-items:center;justify-content:center;
           flex:1;min-height:2.5rem;padding:.45rem .5rem;
           color:#444;text-decoration:none;font-size:.95rem;
           border-bottom:2px solid transparent}
.nav-bar a:hover{color:#111}
.nav-bar a[aria-current="page"]{color:#7c2d12;font-weight:600;border-bottom-color:#7c2d12}
/* Sign out is not a destination — it is smaller, dimmer, and set apart so a
   misplaced thumb during check-in does not end the session. */
.nav-out{flex:0 0 auto !important;margin-left:auto;padding-left:1rem !important;
         color:#888 !important;font-size:.85rem !important}

@media (max-width:40rem){
  /* The bar measures 74px; 5rem clears it with room for the home indicator.
     2rem side margins waste a phone's width, so they shrink too. */
  body{margin:1rem;padding-bottom:5rem}
  .nav-bar{position:fixed;left:0;right:0;bottom:0;z-index:10;margin-bottom:0;
           gap:0;border-bottom:none;border-top:1px solid #ddd;
           padding-bottom:env(safe-area-inset-bottom);
           box-shadow:0 -1px 4px rgba(0,0,0,.10)}
  /* 3.25rem matches the check-in guest rows: the same minimum tap target. */
  .nav-bar a{min-height:3.25rem;font-size:.9rem;
             border-bottom:none;border-top:2px solid transparent}
  .nav-bar a[aria-current="page"]{border-top-color:#7c2d12;background:#faf5f2}
  .nav-out{margin-left:0;padding-left:.75rem !important;padding-right:.75rem !important}
}