@media(max-width:1150px){.people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.forms-grid,.lower-grid,.profile-layout{grid-template-columns:1fr}.filters-panel{grid-template-columns:1fr 1fr}.profile-metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){
 .app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;right:0;top:auto;bottom:0;width:100%;height:70px;border-right:0;border-top:1px solid var(--line);padding:8px 10px;display:block}.brand-mark{display:none}.sidebar-nav{display:flex;justify-content:space-around;gap:4px}.nav-item{width:64px;min-height:52px}
 .main{padding:14px 14px 92px}.topbar{align-items:flex-start}.status-pill{display:none}.hero{min-height:220px;border-radius:23px;padding:25px;align-items:flex-start;justify-content:center;flex-direction:column}.hero-people-btn{align-self:flex-start}.metrics{grid-template-columns:1fr 1fr;gap:10px}.metric-card{min-height:145px;padding:15px;align-items:flex-start;flex-direction:column}
 .panel{padding:18px}.form-grid{grid-template-columns:1fr}.full,.span-2,.primary-btn,.form-message{grid-column:1}.people-grid,.filters-panel,.profile-metrics{grid-template-columns:1fr}.page-intro{align-items:flex-start}.directory-summary{display:none}.profile-hero{grid-template-columns:1fr}.profile-title h2{font-size:34px}.profile-actions{flex-wrap:wrap}.activity-row{grid-template-columns:38px 1fr}.activity-row>.chip{grid-column:2;width:max-content}
}
@media(max-width:720px){
  .topbar{position:sticky;top:0;z-index:8;background:rgba(244,247,248,.92);backdrop-filter:blur(12px);padding:8px 0}
  .page-intro{margin-top:6px}
  .panel,.profile-card,.metric-card,.person-card{border-radius:18px}
}

@media(max-width:720px){
  .sidebar{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-bottom:max(8px,env(safe-area-inset-bottom));height:calc(70px + env(safe-area-inset-bottom));}
  .main{padding-bottom:calc(100px + env(safe-area-inset-bottom));}
  .topbar-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}.user-badge{max-width:150px}.updates-btn{padding:9px 10px}
}


/* ============================================================
   v8.3.2 — iPhone / mobile bottom-navigation polish
   Keeps navigation clear of rounded screen corners + home indicator.
   ============================================================ */
@media(max-width:720px){
  html,body{max-width:100%;overflow-x:hidden}
  body{padding-top:env(safe-area-inset-top)}

  .sidebar{
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
    bottom:max(8px,env(safe-area-inset-bottom));
    width:auto;
    height:66px;
    padding:6px 8px;
    border:1px solid rgba(173,193,202,.78);
    border-radius:21px;
    background:rgba(245,249,250,.96);
    box-shadow:0 10px 32px rgba(14,45,62,.17);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    overflow:hidden;
  }

  .sidebar-nav{
    width:100%;
    height:100%;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:4px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 2px;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar-nav::-webkit-scrollbar{display:none}

  .nav-item{
    flex:0 0 62px;
    width:62px;
    min-width:62px;
    min-height:52px;
    height:52px;
    border-radius:15px;
    scroll-snap-align:center;
    padding:5px 3px;
  }
  .nav-item span{font-size:17px;line-height:1}
  .nav-item small{font-size:8px;line-height:1.05;white-space:nowrap}

  .main{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
    padding-bottom:calc(96px + env(safe-area-inset-bottom));
  }

  footer{padding-bottom:10px}
}


/* ============================================================
   v8.3.3 — TRUE MOBILE WIDTH FIX
   The app's CSS grid container was allowed to keep a large min-content
   width on complex Meeting / Ministering screens. On iPhone that could
   make the whole app wider than the visual viewport, then overflow-x:hidden
   made the right side look physically cropped. The important fix is
   min-width:0 on the actual grid item chain, not adding more side gutters.
   ============================================================ */
@media(max-width:720px){
  html,
  body{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    overflow-x:hidden;
  }

  .app-shell{
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:minmax(0,1fr);
  }

  .main{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .view,
  .view.active,
  #view-meeting,
  #view-ministering{
    width:100%;
    max-width:100%;
    min-width:0;
    margin-left:0;
    margin-right:0;
  }

  #view-meeting > *,
  #view-ministering > *{
    min-width:0;
    max-width:100%;
  }

  #view-meeting .panel,
  #view-ministering .panel,
  #view-meeting .meeting-top-card,
  #view-meeting .meeting-section-card,
  #view-meeting .meeting-history-shell,
  #view-meeting .archive-editor-shell,
  #view-ministering .district-hero,
  #view-ministering .min-comp-grid,
  #view-ministering .min-comp-card,
  #view-ministering .assigned-editor,
  #view-ministering .subform-card{
    width:100%;
    max-width:100%;
    min-width:0;
    margin-left:0;
    margin-right:0;
  }

  #view-meeting input:not([type="checkbox"]):not([type="radio"]),
  #view-meeting select,
  #view-meeting textarea,
  #view-ministering input:not([type="checkbox"]):not([type="radio"]),
  #view-ministering select,
  #view-ministering textarea{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  #view-meeting .meeting-view-tabs,
  #view-ministering .district-tabs{
    width:100%;
    max-width:100%;
    min-width:0;
  }
}