/* SafariBook phone layout hardening */
@media (max-width:700px){
  html,body,#app,.shell{max-width:100%;}
  body{overflow-x:hidden;}

  .shell,.page,.guidegrid,.guidepanel,.logger-fast-tools,#speciesGrid{
    min-width:0;
    width:100%;
    max-width:100%;
  }

  /* Give the lodge identity its own row instead of squeezing it beside
     language/support/sign-out controls on narrow phones. */
  .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    padding:9px 12px;
    position:relative;
    top:auto;
  }
  .brand{width:100%;min-width:0;}
  .brandtext{min-width:0;overflow:hidden;}
  .brandtext b{font-size:20px;}
  .topright{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:6px;
    align-items:stretch;
  }
  .topbar .select{
    width:100%!important;
    min-width:0!important;
    max-width:none;
    padding:8px 9px!important;
  }
  .topbar .supportTop,.topbar #signOut{
    white-space:nowrap;
    padding:8px 9px;
  }

  /* The top bar can now be two rows, so do not rely on a fixed sticky offset. */
  .nav{top:0;}
  .logger-fast-tools{
    display:block;
    position:relative;
    top:auto;
    overflow:hidden;
  }

  .page{
    overflow-x:hidden;
    padding-bottom:calc(88px + env(safe-area-inset-bottom));
  }
  .guidepanel{overflow:hidden;}

  /* Native iOS date controls contribute a large min-content width. The
     input alone cannot override the grid item's automatic minimum, so make
     the Logger form track and every field explicitly shrinkable as well. */
  .guidepanel .formgrid{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%;
    min-width:0;
    max-width:100%;
  }
  .guidepanel .formgrid>.field{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow:hidden;
  }
  .guidepanel .formgrid>.field.full{grid-column:1/-1;}

  /* Give Drive Date a real outer box. iOS is free to render its native date
     control internally, while this shell supplies the complete rounded
     border so the right edge can never disappear off-screen. */
  .logger-date-shell{
    box-sizing:border-box;
    width:100%;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
  }
  .logger-date-shell:focus-within{
    border-color:#a8b9ad;
    box-shadow:0 0 0 3px rgba(36,91,67,.08);
  }
  .logger-date-shell #loggerDate{
    display:block!important;
    box-sizing:border-box!important;
    width:100%!important;
    inline-size:100%!important;
    min-width:0!important;
    min-inline-size:0!important;
    max-width:100%!important;
    max-inline-size:100%!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  #loggerDate::-webkit-date-and-time-value{
    width:100%;
    min-width:0;
    text-align:left;
  }
  #loggerDate::-webkit-calendar-picker-indicator{margin:0;}

  /* The desktop search field is sticky. Inside the compact logger toolbar
     that can cause Quick Picks to slide underneath/over it while scrolling
     on iOS. Keep the toolbar in normal document flow on phones. */
  .logger-fast-tools .speciessearch{
    position:static!important;
    top:auto!important;
    z-index:auto!important;
    width:100%;
    min-width:0;
    max-width:100%;
    margin:0!important;
    padding:0 0 9px!important;
    background:#fff;
  }
  #speciesSearch{
    display:block;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .logger-fast-label{position:static;clear:both;}
  .logger-fast-filters,.logger-quick-picks{
    position:relative;
    z-index:1;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
  }

  /* Keep the Logger fast to scan/tap on normal phones. The previous 420px
     breakpoint forced a single oversized column on many iPhones. */
  .speciesgrid,#speciesGrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .speciescard{min-width:0;overflow:hidden;}
  .speciescard b,.speciescard small{overflow-wrap:anywhere;}
}

@media (max-width:340px){
  .topright{grid-template-columns:1fr 1fr;}
  .topbar .select{grid-column:1/-1;}
  .speciesgrid,#speciesGrid{grid-template-columns:1fr!important;}
}