/* My Family v2.5.0-r3 — mobile page containment, compact toolbars, modal controls and vertical scrolling */
@media (max-width: 900px){
  :root{--mf-r3-gap:8px;--mf-r3-bottom:calc(var(--mf-app-bottom,70px) + env(safe-area-inset-bottom));}

  /* Use one document scroller. Nested page wrappers must not trap vertical gestures. */
  html,body{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-x:none!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y pinch-zoom!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body:not(.modal-open):not(.tree-fullscreen-active){position:static!important;overflow-y:auto!important;}
  body .app-shell,
  body .content.app-main,
  body .page-content,
  body #content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y pinch-zoom!important;
  }
  body .content.app-main{
    min-height:100dvh!important;
    padding-bottom:calc(var(--mf-r3-bottom) + 18px)!important;
  }
  body #content{padding-bottom:10px!important;}

  /* Checkboxes/radios must not inherit the 44–48px text-control height. */
  body input[type="checkbox"],
  body input[type="radio"]{
    appearance:auto!important;
    -webkit-appearance:auto!important;
    width:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    height:20px!important;
    min-height:20px!important;
    max-height:20px!important;
    padding:0!important;
    margin:0!important;
    border-radius:4px!important;
    flex:0 0 20px!important;
    accent-color:#4f46e5!important;
  }
  body input[type="radio"]{border-radius:50%!important;}

  /* Generic page headers: never squeeze titles into one-character columns. */
  body .page-head.compact-page-head:not(.tree-page-head-v2424):not(.events-page-head-v240){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:8px 0 10px!important;
    overflow:visible!important;
  }
  body .page-head .page-title-block{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  body .page-head h1,
  body .page-head.compact-page-head h1{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    white-space:normal!important;
    hyphens:none!important;
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
  }
  body .page-head.page-head-actions-inline{
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
  }
  body .page-head.page-head-actions-inline .actions{
    display:flex!important;
    width:auto!important;
    max-width:min(46vw,180px)!important;
    justify-content:flex-end!important;
  }
  body .page-head.page-head-actions-stack .actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:7px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  body .page-head.page-head-actions-stack .actions>.segmented-actions{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
    padding:4px!important;
  }
  body .page-head.page-head-actions-stack .actions>.segmented-actions .btn{
    width:100%!important;
    min-width:0!important;
    padding:7px 5px!important;
    white-space:normal!important;
  }
  body .page-head.page-head-actions-stack .actions>.btn,
  body .page-head.page-head-actions-stack .actions>button{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:40px!important;
    padding:8px 9px!important;
    line-height:1.15!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }

  /* Album page. */
  body .page-head-albums .actions>.btn{grid-column:1/-1!important;}
  body .photos-dashboard{gap:10px!important;min-width:0!important;}
  body .photos-hero-card{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:12px!important;
    min-width:0!important;
  }
  body .photos-hero-card h2{margin:7px 0 4px!important;font-size:21px!important;line-height:1.18!important;}
  body .photos-hero-card p{margin:0!important;font-size:12px!important;line-height:1.4!important;}
  body .photos-stats{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr)!important;
    gap:4px 8px!important;
    width:100%!important;
    min-width:0!important;
    padding:9px 11px!important;
    border-radius:14px!important;
  }
  body .photos-stats b{font-size:22px!important;line-height:1!important;}
  body .photos-stats small{font-size:10px!important;line-height:1.15!important;white-space:normal!important;}
  body .photos-album-cover{height:170px!important;}
  body .photos-album-meta{padding:11px!important;}
  body .photos-album-meta h3{font-size:17px!important;line-height:1.2!important;}

  /* Documents page. */
  body .page-head-documents .actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  body .page-head-documents .actions>.segmented-actions{grid-column:1/-1!important;}
  body .advanced-drive-explorer,
  body .drive-explorer,
  body .drive-layout,
  body .drive-file-list,
  body .drive-row,
  body .drive-name{width:100%!important;max-width:100%!important;min-width:0!important;}
  body .advanced-drive-explorer .drive-toolbar,
  body .drive-toolbar{
    position:static!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    width:100%!important;
    max-width:100%!important;
    padding:10px!important;
  }
  body .drive-toolbar input,
  body .drive-toolbar select,
  body .drive-toolbar .btn{width:100%!important;min-width:0!important;max-width:100%!important;}
  body .advanced-drive-explorer .drive-sidebar,
  body .drive-sidebar{
    position:relative!important;
    top:auto!important;
    display:flex!important;
    grid-auto-flow:unset!important;
    gap:7px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    max-height:none!important;
    margin:0 0 8px!important;
    padding:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body .drive-sidebar::-webkit-scrollbar{display:none!important;}
  body .drive-sidebar>button,
  body .drive-folder-line{flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:82vw!important;}
  body .drive-sidebar button{width:auto!important;max-width:82vw!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  body .drive-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:7px!important;padding:10px!important;}
  body .drive-row .actions,
  body .drive-row .doc-actions{display:flex!important;flex-wrap:wrap!important;gap:5px!important;width:100%!important;overflow:visible!important;}
  body .drive-row .actions .btn,
  body .drive-row .doc-actions .btn{width:auto!important;min-height:34px!important;padding:6px 8px!important;font-size:11px!important;}

  /* People filters remain readable instead of showing ellipsis-only selections. */
  body .people-filter-row{width:100%!important;min-width:0!important;}

  /* Group editor: stable checkbox/avatar/text grid and internal vertical scrolling. */
  body .group-editor{width:100%!important;min-width:0!important;}
  body .group-editor .field,
  body .group-editor .field.full{width:100%!important;min-width:0!important;}
  body .group-member-search{width:100%!important;min-width:0!important;}
  body .group-member-picker{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    max-height:min(52dvh,430px)!important;
    padding:7px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body .group-member-picker label{
    display:grid!important;
    grid-template-columns:20px 42px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    column-gap:8px!important;
    row-gap:1px!important;
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    padding:7px 8px!important;
    overflow:hidden!important;
  }
  body .group-member-picker label>input{
    grid-column:1!important;
    grid-row:1/3!important;
    align-self:center!important;
    justify-self:center!important;
  }
  body .group-member-picker label>.avatar,
  body .group-member-picker label>.tiny-avatar{
    position:static!important;
    grid-column:2!important;
    grid-row:1/3!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    margin:0!important;
    transform:none!important;
    object-fit:cover!important;
  }
  body .group-member-picker label>span{
    grid-column:3!important;
    grid-row:1!important;
    min-width:0!important;
    max-width:100%!important;
    font-size:13px!important;
    line-height:1.15!important;
    font-weight:850!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body .group-member-picker label>small{
    grid-column:3!important;
    grid-row:2!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    font-size:10px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Communication and emergency pages: compact two-column actions without title collapse. */
  body .page-head-communication-center .actions,
  body .page-head-emergency-contacts .actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body .page-head-communication-center .actions>.btn,
  body .page-head-emergency-contacts .actions>.btn{font-size:11.5px!important;}
  body .route-test-card,
  body .comm-log-card,
  body .emergency-contact-grid{width:100%!important;max-width:100%!important;min-width:0!important;}
  body .emergency-contact-grid{grid-template-columns:1fr!important;gap:9px!important;}
  body .empty{max-width:100%!important;overflow-wrap:break-word!important;}

  /* Modals occupy the viewport and own their scrolling. Hide the fixed nav underneath. */
  body.modal-open{overflow:hidden!important;touch-action:none!important;}
  body.modal-open .mobile-bottom-nav-shell{display:none!important;}
  body .modal{
    position:fixed!important;
    inset:0!important;
    display:grid!important;
    place-items:end center!important;
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:0!important;
    overflow:hidden!important;
    overscroll-behavior:contain!important;
    z-index:2147483000!important;
  }
  body .modal-card{
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    min-height:0!important;
    max-height:calc(100dvh - env(safe-area-inset-top))!important;
    margin:0!important;
    padding:13px 12px calc(16px + env(safe-area-inset-bottom))!important;
    border-radius:21px 21px 0 0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-padding-top:70px!important;
    scroll-padding-bottom:24px!important;
  }
  body .modal-head{
    position:sticky!important;
    top:-13px!important;
    z-index:20!important;
    width:100%!important;
    margin:0 0 10px!important;
    padding:12px 0 8px!important;
    background:rgba(255,255,255,.98)!important;
  }
  body .modal-head h2{min-width:0!important;word-break:normal!important;overflow-wrap:break-word!important;}

  /* All wide internal toolbars stay inside the viewport. */
  body .actions,
  body .section-title,
  body .settings-submenu,
  body .cultural-actions,
  body .route-test-picker,
  body .master-channel-grid{
    max-width:100%!important;
    min-width:0!important;
  }
  body table{max-width:100%!important;}
  body .table-scroll{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
}

@media (max-width: 520px){
  body .people-filter-row{grid-template-columns:1fr!important;gap:7px!important;}
  body .page-head.page-head-actions-inline{grid-template-columns:minmax(0,1fr) auto!important;}
  body .page-head.page-head-actions-inline .actions{max-width:42vw!important;}
}

@media (max-width: 380px){
  body .page-head.page-head-actions-inline{grid-template-columns:1fr!important;}
  body .page-head.page-head-actions-inline .actions{width:100%!important;max-width:100%!important;justify-content:stretch!important;}
  body .page-head.page-head-actions-inline .actions>.btn{width:100%!important;}
  body .page-head.page-head-actions-stack .actions,
  body .page-head-communication-center .actions,
  body .page-head-emergency-contacts .actions,
  body .page-head-documents .actions{grid-template-columns:1fr!important;}
  body .page-head.page-head-actions-stack .actions>.segmented-actions{grid-column:1!important;}
  body .photos-stats{grid-template-columns:auto minmax(0,1fr)!important;}
}