/* Ireland '27 as a phone app.

   Everything here is behind one query — a touch screen no wider than a tablet held upright — so
   a desktop browser, however narrow, never sees it. Conventions borrowed from the phone itself:
   navigation in a floating bottom tab bar, the system font at system sizes, 44px targets, inputs
   at 16px so iOS never zooms, popups as sheets that rise from the bottom, press feedback that
   lands with the finger, and safe-area padding around the notch and home indicator. */

.nv-tabbar { display:none; }
#installHint { display:none; }

@media (max-width:900px) and (pointer:coarse) {
  :root {
    --sans:-apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
    --nv-tab-h:62px;
    --nv-tab-gap:max(10px, calc(env(safe-area-inset-bottom, 0px) - 12px));
    --nv-tab-space:calc(var(--nv-tab-h) + var(--nv-tab-gap) + 14px);
    --nv-glass:rgba(15,61,46,0.82);
    --nv-ease:cubic-bezier(0.32, 0.72, 0, 1);
  }
  html { overscroll-behavior:none; -webkit-text-size-adjust:100%; }
  * { -webkit-tap-highlight-color:transparent; }
  body { font-family:var(--sans); font-size:17px; padding-bottom:var(--nv-tab-space); }
  button, a, select, summary, [role=button], .person, .room, .rsvp button, .picker button, .choice button {
    touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  }
  input, textarea, select { font-size:16px !important; }           /* no zoom-on-focus */
  .btn, .rsvp button, .picker button, .choice button, .me-chip { min-height:44px; }
  .btn.sm { min-height:40px; }
  button:active, .btn:active, .person:active, .nv-tab:active, .rsvp button:active, .picker button:active { opacity:.55; transition:none; }
  .card:active { transform:none; }

  /* ---- top bar: brand + who-am-I only; the tabs move to the bottom ---- */
  .topbar { padding:calc(8px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left)); gap:10px; }
  .topbar .tabs { display:none; }
  .brand { flex:1; font-size:1.35rem; }
  .me-chip span.full { display:inline; }

  /* ---- floating glass tab bar ---- */
  .nv-tabbar {
    position:fixed; z-index:90; display:flex; align-items:stretch; gap:2px;
    left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right));
    bottom:var(--nv-tab-gap); height:var(--nv-tab-h); padding:5px; max-width:520px; margin:0 auto;
    border-radius:calc(var(--nv-tab-h) / 2);
    background:var(--nv-glass); -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%);
    border:0.5px solid rgba(201,162,39,.45);
    box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 10px 30px -6px rgba(11,42,32,.5), inset 0 1px 0 rgba(255,255,255,.12);
  }
  /* A sheet covers the tab bar, as the phone's own apps do, so Save and Cancel are never behind it. */
  .nv-tabbar { transition:transform .32s var(--nv-ease), opacity .32s ease-out; }
  body.sheet-open .nv-tabbar { transform:translateY(140%); opacity:0; pointer-events:none; }
  body.sheet-open { overflow:hidden; }
  body.sheet-open .toast { bottom:auto; top:calc(14px + env(safe-area-inset-top)); }
  .nv-tab {
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    border-radius:calc((var(--nv-tab-h) - 10px) / 2); color:#dfe9e3; text-decoration:none;
    font:500 10px/1.1 var(--sans); letter-spacing:.01em; transition:background .2s ease-out, opacity .2s ease-out;
  }
  .nv-tab .nv-ic { font-size:20px; line-height:1; }
  .nv-tab .nv-lbl { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .nv-tab.on { color:var(--gold); background:rgba(255,255,255,.14); font-weight:600; }

  /* ---- layout breathing room ---- */
  main { padding:16px max(14px, env(safe-area-inset-right)) 40px max(14px, env(safe-area-inset-left)); }
  h2.sec { font-size:1.9rem; }
  .lede { font-size:1rem; }
  .sec-head { margin:26px 0 12px; }
  .hero { min-height:340px; border-radius:22px; }
  .hero-in { padding:22px 18px; }
  .hero p { font-size:1rem; }
  .countdown { gap:8px; }
  .cd { min-width:0; flex:1 1 calc(50% - 8px); padding:8px 10px; }
  .cd b { font-size:1.8rem; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns:1fr; }
  .card { border-radius:18px; }

  /* ---- houses ---- */
  .house .gallery { aspect-ratio:4/3; }
  .house .title { font-size:1.5rem; }
  .rooms { grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); }
  .house .gallery .arr { display:none; }             /* swipe instead */
  .house .foot-row { flex-direction:column; align-items:stretch; }
  .house .foot-row .btn { text-align:center; }

  /* ---- bunking: houses stack, people rows get taller ---- */
  .board { grid-template-columns:1fr; }
  .col .thumb { height:70px; }
  .person { padding:10px 12px; min-height:48px; }
  .person .nm { font-size:1rem; }

  /* ---- itinerary ---- */
  .day-h { top:calc(52px + env(safe-area-inset-top)); }
  .ev { grid-template-columns:36px 1fr; padding:14px; gap:10px; }
  .ev .ic { font-size:1.4rem; }
  .ev .t h3 { font-size:1.15rem; }
  .rsvp { width:100%; }
  .rsvp button { flex:1; min-height:44px; font-size:.9rem; }
  .filters { width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; padding-bottom:2px; }
  .filters .btn { white-space:nowrap; flex:0 0 auto; }

  /* ---- crew table → cards ---- */
  .table, .table thead, .table tbody, .table tr, .table td { display:block; }
  .table thead { display:none; }
  .table { background:transparent; box-shadow:none; }
  .table tr { background:var(--paper); border:1px solid #ece3ce; border-radius:14px; margin-bottom:10px; padding:10px 12px; }
  .table td { border:0; padding:3px 0; }
  .table td:empty { display:none; }
  .table td:nth-child(2) { display:inline-block; margin-right:8px; }
  .table td:nth-child(3)::before { content:"Household · "; color:var(--muted); }
  .table td:nth-child(4)::before { content:"House · "; color:var(--muted); }
  .table td:nth-child(5)::before { content:"Travel · "; color:var(--muted); }
  .table td:nth-child(6) { font-size:.9rem; }
  .table td:last-child { padding-top:8px; }
  .table td:last-child .btn { width:100%; }

  /* ---- flights ---- */
  .fl-end .fl-time { font-size:2rem; }
  .fl-mid { min-width:76px; }

  /* ---- modals become sheets ---- */
  .modal { place-items:end center; padding:0; }
  .modal-card {
    width:100%; max-width:none; max-height:88dvh; border-radius:22px 22px 0 0;
    padding:26px 18px calc(22px + env(safe-area-inset-bottom)); position:relative;
    animation:nv-sheet .38s var(--nv-ease);
  }
  .modal-card::before { content:""; position:absolute; top:8px; left:50%; width:36px; height:5px; margin-left:-18px; border-radius:3px; background:rgba(60,60,67,.3); }
  @keyframes nv-sheet { from { transform:translateY(100%); } to { transform:none; } }
  .picker { max-height:52dvh; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); }
  .picker button { min-height:48px; }
  .actions { position:sticky; bottom:0; background:var(--paper); padding-top:10px; margin-top:10px; }
  .actions .btn { flex:1; min-height:48px; }
  .form .two { grid-template-columns:1fr; }

  /* ---- lightbox: thumbs hidden, full-bleed photo, swipe ---- */
  .lb-top { padding:calc(10px + env(safe-area-inset-top)) 14px 8px; }
  .lb-strip { padding-bottom:calc(12px + env(safe-area-inset-bottom)); }

  /* ---- toast above the tab bar ---- */
  .toast { bottom:calc(var(--nv-tab-space) + 6px); max-width:calc(100vw - 32px); text-align:center; }

  /* ---- gate ---- */
  .gate { padding:16px; }
  .gate-card { padding:30px 20px calc(26px + env(safe-area-inset-bottom)); border-radius:22px; }
  .gate .btn { min-height:50px; font-size:1.05rem; }

  /* ---- install hint ---- */
  #installHint {
    position:fixed; z-index:45; display:flex; align-items:center; gap:12px;
    left:max(10px, env(safe-area-inset-left)); right:max(10px, env(safe-area-inset-right));
    bottom:calc(var(--nv-tab-space) + 4px); max-width:480px; margin:0 auto;
    padding:11px 12px 11px 14px; background:var(--paper); border:1px solid #ece3ce; border-radius:16px;
    box-shadow:0 10px 30px rgba(11,42,32,.22); font:13px/1.4 var(--sans); color:var(--ink);
    animation:fade .3s ease;
  }
  #installHint img { width:38px; height:38px; border-radius:9px; flex:none; }
  #installHint .t { flex:1; min-width:0; }
  #installHint .t b { display:block; font-weight:600; color:var(--green-800); }
  #installHint .t span { color:var(--muted); font-size:12px; }
  #installHint button { font:inherit; font-size:12px; font-weight:600; min-height:36px; padding:7px 12px; border-radius:100px; border:1px solid #ece3ce; background:#fff; color:var(--muted); flex:none; }
  #installHint button.go { background:var(--green-700); border-color:var(--green-700); color:#fff; }

  /* ---- standalone (installed) tweaks ---- */
  @media (display-mode: standalone) {
    .topbar { padding-top:calc(10px + env(safe-area-inset-top)); }
  }
}