#mobileTabs { display:none; }

@media (max-width:767px) {
  :root .in main { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
  :root .in #mobileTabs:not(:empty) {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    position:fixed;
    inset:auto 0 0;
    z-index:45;
    min-height:calc(60px + env(safe-area-inset-bottom));
    padding:4px max(2px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(2px,env(safe-area-inset-left));
    background:color-mix(in srgb,var(--s1) 94%,transparent);
    backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
  }
  :root .in #mobileTabs button {
    display:grid;
    place-items:center;
    align-content:center;
    gap:2px;
    min-width:0;
    min-height:44px;
    padding:1px;
    color:var(--mute);
    background:transparent;
    border:0;
    font-size:clamp(9px,2.65vw,12px);
    line-height:1.2;
  }
  :root .in #mobileTabs button[aria-current="page"] { color:var(--ind); }
  :root .in #mobileTabs .ico {
    width:36px;
    height:24px;
    padding:3px 9px;
    border-radius:9999px;
  }
  :root .in #mobileTabs button[aria-current="page"] .ico { background:var(--surface-tint); }
  :root .in #mobileTabs button:focus-visible { outline:2px solid var(--ind); outline-offset:-2px; }
}

:root body > header #ab[hidden] { display:none; }
:root body > header .brand-wordmark { flex:none; }
:root .in > header .brand-wordmark { width:120px; margin:0 auto 0 0; }
:root .in > header .brand-wordmark img { width:100%; height:auto; }
:root body > header .brand-wordmark::after { inset:0; }
.profile-session {
  max-width:660px;
  margin:16px auto 0;
  padding:12px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
}
.profile-session button { min-height:44px; }

@media (max-width:780px) {
  :root .in > header {
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:6px;
    padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right));
  }
  :root .in > header .brand-wordmark { width:86px; margin:0 auto 0 0; }
  :root .in > header :is(#notificationsButton,#th,#mobileNavToggle) {
    flex:0 0 40px;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    min-height:40px;
    margin:0;
    padding:0;
    border-radius:10px;
  }
  :root .in > header :is(#notificationsButton,#th,#mobileNavToggle) svg { width:20px; height:20px; }
  :root .in > header #headerProfile { display:none; }
  :root .in.navigation-open #side {
    left:auto;
    right:max(12px,env(safe-area-inset-right));
    max-height:calc(100dvh - var(--shell-header) - 80px);
  }
}