/* Lightweight glass navigation. Links remain usable without JavaScript. */
.m-mobile-dock { display: none; }

@media (max-width: 680px) {
  html { scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  .m-has-mobile-dock { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  /* Keep blur on a sibling surface so the dropdown can sample the page behind it. */
  .m-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .m-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    pointer-events: none;
  }
  .m-nav nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    left: auto;
    right: max(12px, env(safe-area-inset-right, 0px));
    top: calc(100% + 8px);
    width: min(360px, calc(100% - 24px));
    max-height: calc(100dvh - 180px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 24px;
    background: #f3f6fb;
    box-shadow: 0 16px 42px rgba(7, 31, 72, .15), 0 2px 5px rgba(7, 31, 72, .05), inset 0 1px 0 rgba(255, 255, 255, .9);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(.985);
    transform-origin: top right;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  }
  .m-nav nav.is-open { gap: 4px; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .m-nav nav a { min-height: 48px; padding: 11px 16px; border-radius: 15px; color: #1a304c; }
  .m-nav nav a[aria-current] { background: rgba(207, 226, 252, .65); color: #1157b5; }
  .m-nav nav a:hover, .m-nav nav a:focus-visible { background: rgba(219, 231, 246, .75); }
  .m-nav nav a:focus-visible { outline-offset: -2px; }
  .m-menu { border-radius: 50%; }
  .m-menu[aria-expanded="true"] { background: rgba(207, 226, 252, .55); }
  .m-mobile-dock {
    --dock-ink: #071f48;
    --dock-accent: #08458e;
    position: fixed;
    z-index: 25;
    inset-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    max-width: 430px;
    margin-inline: auto;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 999px;
    background: #f3f6fb;
    box-shadow: 0 8px 30px rgba(7, 31, 72, .10), 0 1px 4px rgba(7, 31, 72, .04), inset 0 1px 0 rgba(255, 255, 255, .65);
    color: var(--dock-ink);
    font-family: Jakarta, -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .m-mobile-dock, .m-mobile-dock * { box-sizing: border-box; }
  .m-mobile-dock a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 44px;
    min-height: 56px;
    padding: 6px 2px;
    border-radius: 999px;
    color: var(--dock-ink);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
  }
  .m-mobile-dock svg { display: block; width: 22px; height: 22px; flex-shrink: 0; }
  .m-mobile-dock a[aria-current] {
    background: rgba(207, 226, 252, .58);
    color: var(--dock-accent);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), 0 1px 3px rgba(34, 90, 164, .08);
    font-weight: 800;
  }
  .m-mobile-dock a:active { transform: scale(.95); background: #ccdef6; }
  .m-mobile-dock a:focus-visible { outline: 2px solid var(--dock-accent); outline-offset: 1px; }
  @supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .m-nav nav {
      background: linear-gradient(150deg, rgba(255, 255, 255, .66), rgba(235, 243, 253, .58));
      -webkit-backdrop-filter: blur(22px) saturate(160%);
      backdrop-filter: blur(22px) saturate(160%);
    }
    .m-mobile-dock {
      background: linear-gradient(160deg, rgba(255, 255, 255, .52), rgba(240, 245, 252, .48));
      -webkit-backdrop-filter: blur(14px) saturate(150%);
      backdrop-filter: blur(14px) saturate(150%);
    }
  }
}

@media (hover: hover) {
  .m-mobile-dock a:hover { background-color: rgba(219, 231, 246, .9); color: var(--dock-accent); }
}
@media (prefers-reduced-motion: reduce) {
  .m-nav nav { transition: none; }
  .m-mobile-dock a { transition: none; }
  .m-mobile-dock a:active { transform: none; }
}
@media (max-width: 680px) and (prefers-reduced-transparency: reduce), (max-width: 680px) and (prefers-contrast: more) {
  .m-nav nav, .m-header::before { background: #f5f7fb; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .m-nav nav { border-color: #8796aa; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .m-mobile-dock { background: #f5f7fb; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #8796aa; }
  .m-mobile-dock a[aria-current] { background: #d5e6ff; }
}
@media (forced-colors: active) {
  .m-mobile-dock { background: Canvas; border: 1px solid CanvasText; }
  .m-mobile-dock a[aria-current] { outline: 2px solid Highlight; outline-offset: -3px; }
}
@media print {
  .m-mobile-dock { display: none; }
  .m-has-mobile-dock { padding-bottom: 0; }
}