#mobile-bottom-navigation { display: none; }
#mobile-nav-updates-top { display: none; }
#mobile-more-popover { display: none; }
#app-container.experience-shell.family-navigation-active .app-primary-nav > #experience-students-btn { display: none !important; }
.experience-shell > header .experience-wordmark { appearance: none; display: inline-flex; align-items: center; flex: 0 0 auto; margin: 0; padding: 0 20px 0 0; border: 0; border-right: 1px solid var(--experience-line); border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 22px; font-weight: 800; letter-spacing: -.8px; line-height: 1.2; text-align: left; cursor: pointer; }
.experience-shell > header .experience-wordmark:hover { color: inherit; background: transparent; }
.experience-shell > header .experience-wordmark:focus-visible { outline: 3px solid var(--v1-focus, #76682b); outline-offset: 3px; border-radius: 3px; }

@media (max-width: 1023px) {
  .experience-shell > header .experience-wordmark { border-right: 0; }
  #app-container.experience-shell.mobile-nav-enabled {
    padding-top: var(--app-header-height, 64px);
    padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  }
  #app-container.experience-shell.mobile-nav-enabled > header {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    z-index: 850;
    flex: 0 0 auto;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  #experience-menu-toggle { display: none !important; }
  #app-container.experience-shell.mobile-nav-enabled > header > .experience-identity { justify-content: space-between; }
  #mobile-nav-updates-top {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-dark, #172d3a);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-nav-updates-top[hidden] { display: none !important; }
  #mobile-nav-updates-top .mobile-nav-top-update-icon { display: block; width: 24px; height: 24px; pointer-events: none; }
  #mobile-nav-updates-top[aria-current="page"] { color: var(--brand-primary-text, #fff); background: var(--brand-primary, #76682b); }
  #mobile-nav-updates-top:focus-visible { outline: 3px solid var(--v1-focus, #76682b); outline-offset: 2px; }
  #mobile-nav-updates-top .mobile-nav-top-update-badge {
    position: absolute;
    top: 2px;
    right: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid var(--bg-surface, #fff);
    border-radius: 999px;
    background: #b42318;
    color: #fff;
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
  }
  #mobile-nav-updates-top .mobile-nav-top-update-badge[hidden] { display: none; }
  .experience-shell .experience-account { display: flex; align-items: center; margin-left: 4px; }
  .experience-shell .experience-account-label,
  .experience-shell #profile-menu-btn > svg { display: none !important; }
  .experience-shell #profile-menu-container { position: relative; width: auto; }
  .experience-shell #profile-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 4px; border: 0; border-radius: 50%; background: transparent; }
  .experience-shell #user-avatar { width: 36px; height: 36px; }
  .experience-shell #profile-dropdown { position: absolute !important; z-index: 910; top: calc(100% + 8px); right: 0; width: min(300px, calc(100vw - 24px)); max-height: min(70dvh, calc(100dvh - var(--app-header-height, 64px) - 24px)); overflow: auto; margin: 0; padding: 6px; border: 1px solid var(--experience-line, #d6e0e3); border-radius: 14px; background: var(--bg-surface, #fff); box-shadow: 0 14px 36px rgb(23 45 58 / 22%); }
  .experience-shell #profile-dropdown #settings-link,
  .experience-shell #profile-dropdown #role-view-toggle-btn,
  .experience-shell #profile-dropdown #workspace-notifications { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 8px; color: var(--text-dark, #172d3a); text-align: left; text-decoration: none; }
  .experience-shell #profile-dropdown #settings-link:hover,
  .experience-shell #profile-dropdown #role-view-toggle-btn:hover,
  .experience-shell #profile-dropdown #workspace-notifications:hover { background: var(--accent-light, #f2f0e6); }

  #mobile-more-popover:not([hidden]) { position: fixed; z-index: 899; display: block; width: min(360px, calc(100vw - 24px)); max-height: min(70dvh, calc(100dvh - var(--app-header-height, 64px) - 100px)); overflow: auto; padding: 12px; border: 1px solid var(--experience-line, #d6e0e3); border-radius: 16px; background: var(--bg-surface, #fff); box-shadow: 0 14px 36px rgb(23 45 58 / 22%); overscroll-behavior: contain; }
  #mobile-more-popover[hidden] { display: none !important; }
  #mobile-more-popover > .app-primary-nav { display: flex !important; width: 100%; min-width: 0; max-height: none; overflow: visible; flex-direction: column; align-items: stretch; gap: 8px; }
  #mobile-more-popover .nav-menu-group { display: block; width: 100%; min-width: 0; }
  #mobile-more-popover .nav-menu-items { position: static; inset: auto; transform: none; width: 100%; min-width: 0; max-width: 100%; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #mobile-more-popover .nav-menu-summary,
  #mobile-more-popover .nav-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: 9px; color: var(--text-dark, #172d3a); text-align: left; text-decoration: none; }
  #mobile-more-popover .nav-menu-summary { list-style: none; }
  #mobile-more-popover .nav-menu-summary::marker { content: ''; }
  #mobile-more-popover .nav-menu-summary::before { content: none; }
  #mobile-more-popover .nav-menu-summary::after { display: none; }
  #mobile-more-popover .nav-menu-summary > .experience-nav-chevron { display: block; width: 18px; height: 18px; flex: 0 0 18px; margin-left: auto; }
  #mobile-more-popover .experience-nav-icon { display: block; flex: 0 0 20px; width: 20px; height: 20px; pointer-events: none; }
  #mobile-more-popover .experience-nav-label { flex: 1; min-width: 0; text-align: left; }
  #mobile-more-popover .nav-menu-item.is-current,
  #mobile-more-popover .nav-menu-summary.is-current { background: var(--brand-soft, #f1f0ea); color: var(--brand-link, #76682b); font-weight: 700; }
  #mobile-more-popover .nav-menu-item:hover,
  #mobile-more-popover .nav-menu-summary:hover { background: var(--accent-light, #f2f0e6); }
  #mobile-more-popover :is(.nav-menu-item, .nav-menu-summary):focus-visible { outline: 3px solid var(--v1-focus, #76682b); outline-offset: 2px; }
  #mobile-more-popover .app-primary-nav > #dashboard-btn,
  #mobile-more-popover .app-primary-nav > #experience-students-btn,
  #mobile-more-popover .app-primary-nav > #messages-btn,
  #mobile-more-popover .app-primary-nav > #announcements-btn,
  #mobile-more-popover .app-primary-nav #family-learning-journeys-btn,
  #mobile-more-popover[data-family-navigation="true"] #calendar-btn,
  #mobile-more-popover .app-primary-nav > #role-view-toggle-btn,
  #mobile-more-popover .app-primary-nav > #profile-menu-container { display: none !important; }
  #mobile-more-popover .nav-menu-summary { min-height: 44px; padding: 10px 12px; }
  #mobile-more-popover .nav-menu-items { padding-left: 8px; }

  #mobile-bottom-navigation {
    position: fixed;
    z-index: 900;
    left: 50%;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 3px;
    width: min(560px, calc(100vw - 24px));
    min-height: 64px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--experience-line, #d6e0e3) 78%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-surface, #fff) 96%, transparent);
    box-shadow: 0 8px 30px rgb(23 45 58 / 18%), 0 1px 3px rgb(23 45 58 / 10%);
    transform: translateX(-50%);
    transition: transform .22s ease, opacity .18s ease, visibility .18s ease;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-bottom-navigation[data-family-navigation="true"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #mobile-bottom-navigation[data-family-navigation="true"] #mobile-nav-home { order: 1; }
  #mobile-bottom-navigation[data-family-navigation="true"] #mobile-nav-calendar { order: 2; }
  #mobile-bottom-navigation[data-family-navigation="true"] #mobile-nav-messages { order: 3; }
  #mobile-bottom-navigation[data-family-navigation="true"] #mobile-nav-journeys { order: 4; }
  #mobile-bottom-navigation[data-family-navigation="true"] #mobile-nav-more { order: 5; }
  #mobile-bottom-navigation[hidden] { display: none !important; }
  #mobile-bottom-navigation.is-scroll-hidden,
  #mobile-bottom-navigation.is-keyboard-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, calc(100% + 20px)); }
  #mobile-bottom-navigation .mobile-bottom-navigation-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 52px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-dark, #172d3a);
    cursor: pointer;
    touch-action: manipulation;
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
  }
  #mobile-bottom-navigation .mobile-bottom-navigation-item:active { transform: scale(.94); }
  @media (hover: hover) and (pointer: fine) {
    #mobile-bottom-navigation .mobile-bottom-navigation-item:hover { background: var(--accent-light, #f2f0e6); }
  }
  #mobile-bottom-navigation .mobile-bottom-navigation-item.is-current { background: var(--brand-primary, #76682b); color: var(--brand-primary-text, #fff); }
  #mobile-bottom-navigation .mobile-bottom-navigation-item.is-open:not(.is-current) { background: color-mix(in srgb, var(--text-dark, #172d3a) 8%, var(--bg-surface, #fff)); color: var(--text-dark, #172d3a); }
  #mobile-bottom-navigation #mobile-nav-anecdote {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    background: var(--brand-primary, #76682b);
    color: var(--brand-primary-text, #fff);
  }
  #mobile-bottom-navigation[data-family-navigation="true"] #mobile-nav-messages {
    background: var(--brand-primary, #76682b);
    color: var(--brand-primary-text, #fff);
  }
  #mobile-bottom-navigation #mobile-nav-anecdote .mobile-bottom-nav-icon { width: 27px; height: 27px; flex-basis: 27px; }
  #mobile-bottom-navigation .mobile-bottom-navigation-item[hidden] { display: none !important; }
  #mobile-bottom-navigation .mobile-bottom-nav-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; pointer-events: none; }
  #mobile-bottom-navigation .mobile-bottom-navigation-item:focus-visible,
  #mobile-bottom-navigation .mobile-nav-account-close:focus-visible,
  #mobile-bottom-navigation .mobile-nav-settings:focus-visible { outline: 3px solid var(--v1-focus, #76682b); outline-offset: 2px; }
  #mobile-bottom-navigation .mobile-bottom-navigation-badge {
    position: absolute;
    top: 1px;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid var(--bg-surface, #fff);
    border-radius: 999px;
    background: #b42318;
    color: #fff;
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
  }
  #mobile-bottom-navigation .mobile-bottom-navigation-badge[hidden] { display: none; }

  body:has(dialog[open]) #mobile-bottom-navigation,
  #mobile-bottom-navigation.is-modal-hidden { display: none !important; visibility: hidden; pointer-events: none; }
  body:has(dialog[open]) #mobile-more-popover { display: none !important; }

  /* These first-level routes live in the bottom bar on compact layouts. Keep
     classroom, learning records and school management reachable in the menu. */
  #app-container.experience-shell.mobile-nav-enabled .app-primary-nav > #dashboard-btn,
  #app-container.experience-shell.mobile-nav-enabled .app-primary-nav > #experience-students-btn,
  #app-container.experience-shell.mobile-nav-enabled .app-primary-nav > #messages-btn,
  #app-container.experience-shell.mobile-nav-enabled .app-primary-nav > #announcements-btn,
  #app-container.experience-shell.mobile-nav-enabled .app-primary-nav #family-learning-journeys-btn { display: none !important; }
  #app-container.experience-shell.mobile-nav-enabled .app-primary-nav > #experience-journeys-btn { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    #mobile-bottom-navigation { transition: none; }
    #mobile-bottom-navigation .mobile-bottom-navigation-item { transition: none; }
  }
}

@media (max-width: 380px) {
  #mobile-bottom-navigation { width: calc(100vw - 16px); padding-inline: 5px; gap: 0; }
  #mobile-bottom-navigation .mobile-bottom-navigation-item { width: 48px; }
}

@media (min-width: 1024px) {
  #mobile-bottom-navigation { display: none !important; }
  #mobile-more-popover { display: none !important; }
}