/* Account and sync share the desktop sidebar footer. */
.side .host-sidebar-identity{
  cursor:pointer;
  max-width:calc(100% - 30px);
  overflow:hidden;
  display:grid;
  gap:2px;
}
.host-sidebar-identity:hover{border-color:#6176a2;background:#243452}
.host-sidebar-identity:focus-visible{outline:3px solid #85a0ff;outline-offset:3px}
.host-sidebar-identity strong,.host-sidebar-identity small,.host-sidebar-identity b,.host-sidebar-identity span{
  display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.host-sidebar-identity strong{color:#fff;font-size:14px}
.host-sidebar-identity small{color:#aebbd4;font-size:11px}
.host-sidebar-identity b{color:#b9c4d7;font-size:12px;font-weight:650}
.host-sidebar-identity b::before{content:"Logspace · ";color:#aebbd4}
.host-sidebar-identity span{color:#78dbc0;font-size:12px}
.host-more-account p{overflow-wrap:anywhere}

/* Switch to the bottom navigation before a narrow desktop layout squeezes cards. */
@media (min-width:951px) and (max-width:1100px){
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .app,body.sidebar-collapsed .app{display:block;min-height:100vh;grid-template-columns:none}
  .side,body.sidebar-collapsed .side{
    position:fixed;z-index:40;inset:auto 0 0;
    height:calc(74px + env(safe-area-inset-bottom));
    padding:7px 8px env(safe-area-inset-bottom);
    box-shadow:0 -5px 22px #0004;border-top:1px solid #2c3a58;
  }
  .brand,.free,.sidebar-collapse,#hostAccountCard{display:none!important}
  nav{height:100%;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  nav button,body.sidebar-collapsed nav button{
    min-width:0;min-height:60px;justify-content:center;flex-direction:column;
    gap:2px;padding:6px 3px;border-radius:13px;font-size:24px;line-height:1;
    touch-action:manipulation;
  }
  nav button span,body.sidebar-collapsed nav button>span{
    display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
    font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap;
  }
  nav button.on{background:#2b3b5d;box-shadow:inset 0 0 0 1px #536dfe88}
  .main{min-width:0;padding-bottom:24px}
  .cards,.more-grid,.goal-grid,.subscription-grid,.manage-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #overview>.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none}
  #overview>.grid>.panel{min-width:0;flex:auto}
  #overview>.grid>.goal-dashboard-card{grid-column:1/-1}
  .toast{bottom:calc(94px + env(safe-area-inset-bottom))}
}
@media (max-width:950px){
  .side .host-sidebar-identity{display:none}
}