/* Shared navigation. Keep the 1100px breakpoint aligned with main.js. */
body #nav a:focus-visible,
body #navPanel a:focus-visible,
body #navPanel button:focus-visible,
body #navPanelToggle:focus-visible {
  outline: 3px solid #f3ca76 !important;
  outline-offset: 4px !important;
}
@media (min-width: 1101px) {
  body #wrapper #nav {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    height: auto !important;
    min-height: 76px !important;
    padding: 10px 14px !important;
    border: 1px solid #405575 !important;
    border-radius: 20px !important;
    background: #172c4b !important;
    box-shadow: 0 12px 28px #08182d26 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
  }
  body #wrapper #nav ul.links {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body #wrapper #nav ul.links li {
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }
  body #wrapper #nav ul.links li a {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    padding: 10px clamp(10px, 1vw, 18px) !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #f4f7fc !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    white-space: normal !important;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease !important;
  }
  body #wrapper #nav ul.links li a::before,
  body #wrapper #nav ul.links li a::after { display: none !important; }
  body #wrapper #nav ul.links li a:hover {
    background: #2a4162 !important;
    transform: translateY(-2px);
  }
  body #wrapper #nav ul.links li a[href="portal.html"] {
    border-color: #c9922d !important;
    color: #f3ca76 !important;
  }
  body #wrapper #nav ul.links li.active a {
    background: #f0c674 !important;
    color: #172c4b !important;
    box-shadow: none !important;
  }
  body #wrapper #nav ul.icons {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 0 0 12px !important;
    margin: 0 !important;
    border-left: 1px solid #405575 !important;
  }
  body #wrapper #nav ul.icons li { padding: 0 !important; }
  body #wrapper #nav ul.icons a {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    color: #edf3fc !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body #wrapper #nav ul.icons a:hover { background: #2a4162 !important; }
  body #navPanelToggle { display: none !important; }
}
@media (max-width: 1100px) {
  body #navPanelToggle {
    position: fixed !important;
    width: auto !important;
    min-width: 106px !important;
    height: 48px !important;
    min-height: 48px !important;
    gap: 10px !important;
    padding: 0 16px !important;
    border: 1px solid #496082 !important;
    border-radius: 16px !important;
    background: #172c4b !important;
    color: #fff !important;
    font-size: 13px !important;
    text-transform: none !important;
    box-shadow: 0 6px 18px #08182d26 !important;
    transition: opacity 180ms ease, transform 180ms ease !important;
    will-change: auto !important;
    cursor: pointer;
    z-index: 10001 !important;
  }
  body #navPanelToggle::before {
    content: "" !important;
    width: 18px !important;
    height: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(#f0c674, #f0c674) left top / 18px 2px no-repeat,
      linear-gradient(#f0c674, #f0c674) left center / 12px 2px no-repeat,
      linear-gradient(#f0c674, #f0c674) left bottom / 18px 2px no-repeat !important;
    box-shadow: none !important;
  }
  body #navPanelToggle::after { display: none !important; }
  body #navPanelToggle:hover,
  body #navPanelToggle:focus-visible { background: #233e63 !important; transform: none !important; }
  body.is-navPanel-visible { overflow: hidden !important; }
  body.is-navPanel-visible #wrapper {
    opacity: 0.4 !important;
    filter: none !important;
    transform: none !important;
    transition: opacity 240ms ease !important;
  }
  body #navPanel {
    width: min(92vw, 440px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    border-left: 1px solid #405575 !important;
    background: #0b1a30 !important;
    perspective: none !important;
    box-shadow: -12px 0 36px #08182d30 !important;
    transform: translateX(100%) !important;
    transition: transform 280ms cubic-bezier(.22,.68,0,1), visibility 280ms !important;
    animation: none !important;
  }
  body.is-navPanel-visible #navPanel {
    transform: translateX(0) !important;
    animation: none !important;
    box-shadow: -12px 0 36px #08182d30 !important;
  }
  body #navPanel .nav-panel-premium-shell {
    padding: calc(env(safe-area-inset-top, 0px) + 24px) 22px calc(env(safe-area-inset-bottom, 0px) + 22px) !important;
    background: linear-gradient(155deg, #0f2744 0, #0b1a30 45%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body #navPanel .close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    cursor: pointer;
  }
  body #navPanel .close::before {
    content: "×" !important;
    font: 28px/1 sans-serif !important;
  }
  body #navPanel .close:hover { transform: none !important; }
  body #navPanel .nav-panel-premium-head {
    margin: 42px 0 24px !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  body #navPanel .nav-panel-premium-brand {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  body #navPanel .nav-panel-premium-brand::after { display: none !important; }
  body #navPanel .nav-panel-premium-logo {
    width: 58px !important;
    height: 58px !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body #navPanel .nav-panel-premium-kicker {
    font-size: 16px !important;
    color: #fff !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  body #navPanel .nav-panel-premium-title { color: #f0c674 !important; font-size: 11px !important; }
  body #navPanel .nav-panel-premium-head p { color: #c5d3e7 !important; font-size: 13px !important; margin: 8px 0 0 !important; }
  body #navPanel .links { gap: 7px !important; }
  body #navPanel .links li,
  body #navPanel ul.icons li {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }
  body #navPanel .links li a {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 52px !important;
    padding: 13px 16px !important;
    border: 1px solid #3a506e !important;
    border-radius: 13px !important;
    background: #ffffff06 !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: background-color 160ms ease, transform 160ms ease !important;
  }
  body #navPanel .links li a::before { display: none !important; }
  body #navPanel .links li a::after { content: "↗" !important; font: 18px/1 sans-serif !important; }
  body #navPanel .links li a:hover { background: #2a4162 !important; transform: translateX(-2px) !important; }
  body #navPanel .links li a[href="portal.html"] { border-color: #c9922d !important; color: #f0c674 !important; }
  body #navPanel .links li.active a { background: #f0c674 !important; color: #172c4b !important; border-color: #f0c674 !important; }
  body #navPanel .links li.active a::after { content: "•" !important; }
  body #navPanel ul.icons {
    justify-content: flex-start !important;
    gap: 10px !important;
    border: 0 !important;
    border-top: 1px solid #3a506e !important;
    border-radius: 0 !important;
    background: none !important;
    padding: 20px 0 0 !important;
    margin-top: 24px !important;
    box-shadow: none !important;
  }
  body #navPanel ul.icons li { padding: 0 !important; }
  body #navPanel ul.icons a.icon::before {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }
}
/* Institutional refinement: royal blue, restrained gold and clearer hierarchy. */
@media (min-width: 1101px) {
  body #wrapper #nav {
    gap: 10px 18px !important;
    min-height: 84px !important;
    padding: 13px 18px !important;
    border: 1px solid #7497d452 !important;
    border-radius: 22px !important;
    background: linear-gradient(115deg, #15284a, #0e1e38 60%, #0b1728) !important;
    box-shadow: inset 0 1px 0 #ffffff1c, 0 16px 34px #071c3d30 !important;
  }
  body #wrapper #nav ul.links { gap: 4px !important; }
  body #wrapper #nav ul.links li a {
    position: relative !important;
    min-height: 48px !important;
    font-weight: 600 !important;
    color: #e6edfc !important;
    border-radius: 11px !important;
  }
  body #wrapper #nav ul.links li a:hover {
    color: #fff !important;
    background: #ffffff12 !important;
    transform: translateY(-1px) !important;
  }
  body #wrapper #nav ul.links li.active a {
    color: #fff !important;
    border-color: #ffffff1c !important;
    background: #ffffff12 !important;
    box-shadow: inset 0 1px 0 #ffffff0d !important;
  }
  body #wrapper #nav ul.links li.active a::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    width: 20px !important;
    height: 3px !important;
    left: calc(50% - 10px) !important;
    bottom: 4px !important;
    border-radius: 3px !important;
    background: #e6c47e !important;
  }
  body #wrapper #nav ul.links li a[href="portal.html"] {
    margin-inline: 6px !important;
    padding-inline: 21px !important;
    background: #e6c47e !important;
    border-color: #f3d89f !important;
    color: #162f5b !important;
    font-weight: 800 !important;
    box-shadow: inset 0 1px 0 #fff6 !important;
  }
  body #wrapper #nav ul.links li.active a[href="portal.html"]::after { background: #162f5b !important; }
  body #wrapper #nav ul.icons { gap: 7px !important; border-color: #ffffff24 !important; }
  body #wrapper #nav ul.icons a {
    border: 1px solid #ffffff1c !important;
    border-radius: 50% !important;
    background: #ffffff07 !important;
  }
  body #wrapper #nav ul.icons a:hover { background: #ffffff1c !important; color: #f3d89f !important; }
}
@media (max-width: 1100px) {
  body #navPanelToggle {
    background: linear-gradient(130deg, #0e2240, #091628) !important;
    border-color: #809bcd66 !important;
    border-radius: 50px !important;
    min-width: 112px !important;
    box-shadow: inset 0 1px 0 #ffffff24, 0 8px 24px #10284b38 !important;
  }
  body #navPanel {
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    width: min(calc(100vw - 24px), 440px) !important;
    height: calc(100vh - 24px) !important;
    height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px))) !important;
    border: 1px solid #7497d466 !important;
    border-radius: 26px !important;
    background: #081224 !important;
    transform: translateX(calc(100% + 24px)) !important;
  }
  body.is-navPanel-visible #navPanel { transform: translateX(0) !important; }
  body #navPanel .nav-panel-premium-shell {
    padding: 26px 24px 24px !important;
    background: radial-gradient(ellipse at 0 0, #122644 0, transparent 60%), linear-gradient(160deg, #0b1a30, #07101a) !important;
  }
  body #navPanel .close {
    top: 15px !important;
    right: 15px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border-color: #ffffff26 !important;
    background: #ffffff0b !important;
  }
  body #navPanel .nav-panel-premium-head { margin: 40px 0 20px !important; gap: 18px !important; }
  body #navPanel .nav-panel-premium-brand { gap: 16px !important; }
  body #navPanel .nav-panel-premium-logo {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    border: 3px solid #e6c47e !important;
    box-shadow: 0 0 0 5px #e6c47e12 !important;
  }
  body #navPanel .nav-panel-premium-kicker {
    font-family: "Libre Baskerville", Georgia, serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    max-width: 12ch !important;
  }
  body #navPanel .nav-panel-premium-title {
    font-family: "Manrope", sans-serif !important;
    color: #e6c47e !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    margin-top: 5px !important;
  }
  body #navPanel .nav-panel-premium-head p {
    padding-bottom: 22px !important;
    border-bottom: 1px solid #ffffff20 !important;
    color: #c5d3ed !important;
    font-style: normal !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
  }
  body #navPanel .links { gap: 5px !important; }
  body #navPanel .links li a {
    min-height: 52px !important;
    padding: 14px 16px !important;
    border-color: transparent !important;
    background: transparent !important;
    border-radius: 13px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #e7eefc !important;
  }
  body #navPanel .links li a::after { content: '›' !important; color: #a4b8de !important; font-size: 23px !important; }
  body #navPanel .links li a:hover { background: #ffffff0d !important; transform: translateX(2px) !important; }
  body #navPanel .links li.active a {
    border-color: #ffffff45 !important;
    background: #eff3fc !important;
    color: #203d73 !important;
    font-weight: 800 !important;
    box-shadow: inset 4px 0 0 #d4ac5c !important;
  }
  body #navPanel .links li.active a::after { content: '•' !important; color: #9a6b1d !important; }
  body #navPanel .links li a[href="portal.html"] {
    margin-block: 8px !important;
    background: #e6c47e !important;
    border-color: #f3d89f !important;
    color: #162f5b !important;
    font-weight: 800 !important;
  }
  body #navPanel .links li a[href="portal.html"]::after { content: '↗' !important; color: #162f5b !important; font-size: 19px !important; }
  body #navPanel ul.icons { margin-top: 20px !important; padding-top: 20px !important; border-color: #ffffff20 !important; gap: 12px !important; }
  body #navPanel ul.icons a.icon::before { background: #ffffff08 !important; border-color: #ffffff24 !important; border-radius: 50% !important; }
}
@media (prefers-reduced-motion: reduce) {
  body #wrapper #nav *, body #navPanel, body #navPanel *, body #navPanelToggle,
  body.is-navPanel-visible #wrapper { animation: none !important; transition: none !important; }
}
body.nav-panel-motion-lite #navPanel,
body.nav-panel-motion-lite #navPanel *,
body.nav-panel-motion-lite #navPanelToggle { animation: none !important; transition: none !important; }
/* Override legacy staggered entrances; only the panel itself moves. */
body.is-navPanel-visible #navPanel .links li,
body.is-navPanel-visible #navPanel ul.icons li,
body.is-navPanel-visible #navPanel .nav-panel-premium-head {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}