/* Versioned with the shared header. Keep viewport placement independent of
   pages still holding an immutable, older base.css URL in their browser cache. */
@media (max-width:900px) {
  .site-header.site-header--beta-mobile {
    position:fixed !important;
    top:auto !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100%;
    margin:0;
    display:block !important;
    visibility:visible;
    transform:none !important;
    z-index:500;
    padding-bottom:env(safe-area-inset-bottom, 0px);
    border-top:1px solid var(--ui-border, #d7dce2);
    border-bottom:0;
    background:var(--ui-surface, var(--bg-header, #fff));
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .site-header--beta-mobile .site-header-inner {
    display:block;
    box-sizing:border-box;
    width:100%;
    max-width:none;
    height:72px;
    padding:0 !important;
  }
  .site-header--beta-mobile .site-logo { display:none; }
  .site-header--beta-mobile .site-nav {
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:0;
    width:100%;
    height:100%;
    padding:0;
    overflow:visible;
  }
  .site-header--beta-mobile .site-nav-item,
  .site-header--beta-mobile .site-nav .site-lang-trigger {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    box-sizing:border-box;
    width:100%;
    height:100%;
    min-width:0;
    padding:8px 0;
    border:0;
    border-radius:0 !important;
    margin:0;
    transform:none;
    transition:background-color .15s ease,color .15s ease;
  }
  .site-header--beta-mobile .site-nav-icon {
    width:24px;
    height:24px;
    min-width:24px;
    max-width:24px;
    transform:none;
  }
  .site-header--beta-mobile .site-nav-label { font-size:14px; line-height:20px; white-space:nowrap; }
  .site-header--beta-mobile .site-nav-label[data-mobile-label] { font-size:0; }
  .site-header--beta-mobile .site-nav-label[data-mobile-label]::after { content:attr(data-mobile-label); font-size:14px; }
  .site-header--beta-mobile .site-lang-menu { width:100%; height:100%; }
  .site-header--beta-mobile .site-lang-trigger::after { display:none; }
  .site-header--beta-mobile .site-lang-dropdown { top:auto; right:0; bottom:calc(100% + 8px); }
  /* Reserve fixed controls after the footer, not between page content and footer. */
  .site-header--beta-mobile ~ .site-main,
  .site-header--beta-mobile.has-mobile-favorites ~ .site-main { min-height:0; padding-bottom:16px !important; }
  .site-header--beta-mobile ~ .site-main > .page-root { min-height:0; margin-bottom:0; padding-bottom:16px; }
  .site-header--beta-mobile ~ .site-footer { padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  .site-header--beta-mobile.has-mobile-favorites ~ .site-footer { padding-bottom:calc(196px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Final mobile chrome rules live in this file so page styles cannot restore
   the old circular/line active states. */
@media (max-width:900px) {
  .site-mobile-page-toolbar {
    position:sticky !important;
    top:0 !important;
    z-index:510 !important;
  }
  .site-mobile-page-toolbar .settings-page-toolbar-center {
    grid-column:2 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
    width:100%;
    min-width:0;
    text-align:center !important;
  }
  .site-mobile-page-toolbar .settings-page-toolbar-logo {
    width:100%;
    max-width:100%;
    color:var(--ui-text) !important;
    font-size:12px !important;
    line-height:1.2 !important;
    font-weight:950 !important;
    letter-spacing:0 !important;
    text-align:center !important;
    white-space:normal !important;
  }
  .site-header--beta-mobile .site-nav-item.is-active,
  .site-header--beta-mobile .site-nav a.is-active {
    border:0 !important;
    border-radius:0 !important;
    background:var(--ui-surface-hover) !important;
    color:var(--ui-text) !important;
    box-shadow:none !important;
  }
  .site-header--beta-mobile .site-nav-item:not(.is-active):hover,
  .site-header--beta-mobile .site-nav a:not(.is-active):hover,
  .site-header--beta-mobile .site-nav .site-lang-trigger:hover,
  .site-header--beta-mobile .site-lang-menu[open] .site-lang-trigger {
    border:0 !important;
    border-radius:0 !important;
    background:var(--ui-surface-hover) !important;
    color:var(--ui-text) !important;
    box-shadow:none !important;
  }
}