/* The Local Band List V19.08 — Guardian mobile layout pass.
   Loaded after all Community responsive styles. This is the final mobile
   authority for the shared header and common Community layout geometry. */
@media (max-width:900px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body.community-body *{box-sizing:border-box}

  /* REAL TWO-ROW MOBILE HEADER
     Row 1 = brand + authenticated search + notification/profile/logout.
     Row 2 = Community / Friends / Clips(or Music) / Rooms / People(or Safety). */
  body.community-body .tll-appbar{
    height:118px!important;min-height:118px!important;max-height:118px!important;
    width:100%!important;left:0!important;right:0!important;overflow:visible!important;
  }
  body.community-body .tll-appbar-spacer{
    display:block!important;height:118px!important;min-height:118px!important;max-height:118px!important;
    flex:0 0 118px!important;clear:both!important;
  }
  body.community-body .tll-appbar-inner{
    position:relative!important;display:flex!important;align-items:center!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    height:118px!important;min-height:118px!important;max-height:118px!important;
    margin:0!important;padding:6px 6px 56px!important;gap:5px!important;overflow:visible!important;
  }
  body.community-body .tll-appbrand{
    position:static!important;flex:0 0 36px!important;width:36px!important;min-width:36px!important;max-width:36px!important;
    height:36px!important;margin:0!important;overflow:hidden!important;font-size:0!important;gap:0!important;
  }
  body.community-body .tll-appbrand>span:nth-child(2),
  body.community-body .tll-appbrand .tll-segment-badge{display:none!important}
  body.community-body .tll-appbrand-mark{
    width:36px!important;height:36px!important;min-width:36px!important;flex:0 0 36px!important;border-radius:10px!important;
  }
  body.community-body .tll-appbar-search{
    position:static!important;display:flex!important;flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:none!important;
    height:34px!important;margin:0!important;padding:0 9px!important;border-radius:17px!important;overflow:hidden!important;
  }
  body.community-body .tll-appbar-search input{width:100%!important;min-width:0!important;font-size:12px!important}
  body.community-body .tll-appbar-account{
    position:static!important;display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:flex-end!important;
    width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;gap:3px!important;overflow:visible!important;
  }
  body.community-body .tll-appbar-account .tll-appbar-chip:not(.logout):not(.tll-appbar-profile-chip){display:none!important}
  body.community-body .tll-appbar-account .tll-appbar-profile-chip{
    display:inline-flex!important;width:32px!important;height:32px!important;min-width:32px!important;max-width:32px!important;
    padding:0!important;border-radius:50%!important;overflow:hidden!important;
  }
  body.community-body .tll-appbar-account .tll-appbar-profile-chip>span{display:none!important}
  body.community-body .tll-appbar-account .tll-appbar-chip.logout{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:auto!important;min-width:56px!important;max-width:68px!important;height:32px!important;
    padding:4px 7px!important;margin:0!important;font-size:9px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;
  }
  /* Notification widgets/buttons inside the account cluster must stay phone-sized. */
  body.community-body .tll-appbar-account .tll-notification-widget,
  body.community-body .tll-appbar-account [class*="notification"],
  body.community-body .tll-appbar-account [class*="bell"]{max-width:36px!important}

  body.community-body .tll-appbar-nav{
    position:absolute!important;left:6px!important;right:6px!important;bottom:5px!important;top:auto!important;transform:none!important;
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-template-rows:44px!important;
    width:auto!important;max-width:none!important;min-width:0!important;height:44px!important;
    margin:0!important;padding:0!important;gap:4px!important;overflow:hidden!important;background:transparent!important;
  }
  body.community-body .tll-appbar-nav a{
    position:static!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    width:100%!important;min-width:0!important;max-width:none!important;height:44px!important;
    margin:0!important;padding:3px 2px!important;gap:2px!important;border-radius:9px!important;
    font-size:16px!important;line-height:1!important;overflow:hidden!important;
  }
  body.community-body .tll-appbar-nav .tll-navlabel{
    display:block!important;max-width:100%!important;margin:0!important;font-size:8px!important;line-height:1!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  body.community-body .tll-appbar-nav .tll-nav-hide-mobile,
  body.community-body .tll-appbar-nav .tll-mobile-redundant-destination{display:none!important}
  body.community-body .tll-mobile-community-actions,
  body.community-body .tll-desktop-community-actions,
  body.community-body .c-mobile-bottom{display:none!important}

  /* Feed/stories clearance: nothing may occupy the header's fixed space. */
  body.community-body main.c-shell{width:100%!important;max-width:100%!important;min-width:0!important;margin-top:0!important;padding-top:12px!important}
  body.community-body.c-feed-page main.c-shell{margin-top:0!important;padding-top:12px!important}
  body.community-body .c-mobile-scene-rail.c-story-rail,
  body.community-body .c-story-rail{
    position:relative!important;top:auto!important;transform:none!important;clear:both!important;
    margin-top:0!important;z-index:1!important;max-width:100%!important;
  }

  /* Guardian universal mobile-width protections. */
  body.community-body .c-shell,
  body.community-body .c-card,
  body.community-body .c-grid,
  body.community-body .c-feed-main,
  body.community-body .c-feed-sidebar,
  body.community-body .c-social-grid,
  body.community-body .c-social-person,
  body.community-body .c-membergrid,
  body.community-body .c-member,
  body.community-body .c-roomgrid,
  body.community-body .c-room,
  body.community-body .x-grid,
  body.community-body .x-card,
  body.community-body .x-hero,
  body.community-body .x-tabs,
  body.community-body .x-row{
    width:100%!important;max-width:100%!important;min-width:0!important;
  }
  body.community-body img,body.community-body video,body.community-body iframe,body.community-body canvas{max-width:100%!important}
  body.community-body input,body.community-body select,body.community-body textarea,body.community-body button{max-width:100%!important;min-width:0}
  body.community-body table{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  body.community-body .c-row,body.community-body .c-between,body.community-body .x-row{max-width:100%!important;min-width:0!important;flex-wrap:wrap!important}
  body.community-body h1,body.community-body h2,body.community-body h3,body.community-body p,
  body.community-body a,body.community-body b,body.community-body small,body.community-body span{overflow-wrap:anywhere}

  /* Friends page: cards, names and action buttons must remain inside viewport. */
  body.community-body .c-social-hero{width:100%!important;max-width:100%!important;min-width:0!important;align-items:flex-start!important;flex-direction:column!important}
  body.community-body .c-social-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;margin-bottom:20px!important}
  body.community-body .c-social-person{display:flex!important;flex-direction:column!important;gap:10px!important;padding:12px!important;overflow:hidden!important;border-radius:16px!important}
  body.community-body .c-social-person-main{display:grid!important;grid-template-columns:64px minmax(0,1fr)!important;width:100%!important;max-width:100%!important;min-width:0!important;gap:12px!important;align-items:center!important;justify-content:stretch!important}
  body.community-body .c-social-person-main>span:last-child{display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;text-align:left!important}
  body.community-body .c-social-person-main b{font-size:16px!important;line-height:1.2!important}
  body.community-body .c-social-person-main small{font-size:12px!important;line-height:1.35!important}
  body.community-body .c-social-person-main b,body.community-body .c-social-person-main small{white-space:normal!important;overflow-wrap:anywhere!important}
  body.community-body .c-social-avatar,body.community-body .c-social-person .c-profileavatar{width:64px!important;height:64px!important;min-width:64px!important;max-width:64px!important;flex:0 0 64px!important;margin:0!important;margin-top:0!important;margin-left:0!important;margin-right:0!important;align-self:center!important}
  body.community-body .c-social-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;max-width:100%!important;gap:7px!important;align-items:stretch!important}
  body.community-body .c-social-actions form,body.community-body .c-social-actions a{width:100%!important;min-width:0!important;margin:0!important}
  body.community-body .c-social-actions form:last-child{grid-column:1 / -1!important;justify-self:start!important;width:auto!important;min-width:0!important}
  body.community-body .c-social-actions form:last-child .c-btn{width:auto!important;min-width:112px!important;padding-left:16px!important;padding-right:16px!important}
  body.community-body .c-social-actions .c-btn{display:flex!important;width:100%!important;min-width:0!important;max-width:100%!important;min-height:40px!important;align-items:center!important;justify-content:center!important;white-space:normal!important;text-align:center!important;padding:8px 10px!important;font-size:13px!important}
  body.community-body .c-profile-section-head{display:flex!important;width:100%!important;max-width:100%!important;min-width:0!important;gap:8px!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important}
}

@media (max-width:430px){
  body.community-body .tll-appbar{height:116px!important;min-height:116px!important;max-height:116px!important}
  body.community-body .tll-appbar-spacer{height:116px!important;min-height:116px!important;max-height:116px!important;flex-basis:116px!important}
  body.community-body .tll-appbar-inner{height:116px!important;min-height:116px!important;max-height:116px!important;padding:5px 4px 55px!important;gap:4px!important}
  body.community-body .tll-appbrand{width:34px!important;min-width:34px!important;max-width:34px!important;flex-basis:34px!important}
  body.community-body .tll-appbrand-mark{width:34px!important;height:34px!important;min-width:34px!important;flex-basis:34px!important}
  body.community-body .tll-appbar-search{height:31px!important;padding:0 7px!important}
  body.community-body .tll-appbar-search input{font-size:10px!important}
  body.community-body .tll-appbar-account{gap:2px!important}
  body.community-body .tll-appbar-account .tll-appbar-profile-chip{width:29px!important;height:29px!important;min-width:29px!important;max-width:29px!important}
  body.community-body .tll-appbar-account .tll-appbar-chip.logout{min-width:52px!important;max-width:58px!important;height:29px!important;font-size:8px!important;padding:3px 4px!important}
  body.community-body .tll-appbar-nav{left:4px!important;right:4px!important;bottom:5px!important;height:43px!important;grid-template-rows:43px!important;gap:2px!important}
  body.community-body .tll-appbar-nav a{height:43px!important;font-size:15px!important;padding:3px 1px!important}
  body.community-body .tll-appbar-nav .tll-navlabel{font-size:7.5px!important}
}

/* Logged-out header remains a single compact row and never exposes Community search. */
@media (max-width:900px){
  body.community-body .tll-appbar-guest{height:58px!important;min-height:58px!important;max-height:58px!important;overflow:hidden!important}
  body.community-body .tll-appbar-guest + .tll-appbar-spacer,
  body.community-body .tll-appbar-guest ~ .tll-appbar-spacer{height:58px!important;min-height:58px!important;max-height:58px!important;flex-basis:58px!important}
  body.community-body .tll-appbar-guest .tll-appbar-inner{height:58px!important;min-height:58px!important;max-height:58px!important;padding:6px!important}
  body.community-body .tll-appbar-guest .tll-appbar-search{display:none!important}
  body.community-body .tll-appbar-guest .tll-appbar-nav{display:none!important}
}
