/* Shared navigation stays at a constant scale on every page. */
:root { --sidebar-width: 68px; --nav-surface: #e8eaff; --nav-selected: #c8cdff; }
/* Use the same wordmark crop as the loading screen. */
.header-logo-mark {
  display: block;
  flex-shrink: 0;
  height: 40px;
  aspect-ratio: 1170 / 499;
  overflow: hidden;
}
.header .header-logo-mark .toefl-logo {
  display: block;
  width: 211.538462%;
  height: 100%;
  max-width: none;
}
.sidebar {
  background: var(--nav-surface);
  border-right: 0;
  padding: 12px 8px 24px;
  gap: 20px;
  overscroll-behavior: contain;
}
.sidebar .sidebar-items { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.sidebar .sidebar-button {
  min-height: 50px;
  height: auto;
  padding: 11px;
  border-radius: 12px;
  color: #505461;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sidebar .sidebar-button svg { width: 22px; height: 22px; stroke-width: 1.9; color: #606574; }
.sidebar .sidebar-button.is-selected { background: var(--nav-selected); color: #505461; }
.sidebar .sidebar-button:focus-visible { outline: 3px solid #6265b5; outline-offset: -3px; }
.sidebar .sidebar-button:active { background: #b9c0ff; transform: scale(.98); }
.sidebar .sidebar-toggle {
  align-self: flex-end;
  width: 50px;
  min-height: 50px;
  padding: 11px;
  justify-content: center;
}
.sidebar-toggle svg { transform: rotate(180deg); transition: transform 280ms var(--ui-ease); }
body.sidebar-expanded .sidebar-toggle svg { transform: rotate(0); }
.section-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (hover: hover) and (pointer: fine) {
  .sidebar .sidebar-button:hover { background: #d7dcff; }
  .sidebar .sidebar-button.is-selected:hover { background: #bfc6fb; }
  .sidebar .sidebar-toggle:hover svg { translate: -2px 0; }
}
@media (min-width: 601px) {
  body.sidebar-expanded { --sidebar-width: 284px; }
  .sidebar .sidebar-label,
  body.sidebar-expanded .sidebar .sidebar-label {
    font: 500 13.5px/1.4 'Montserrat', Arial, sans-serif;
  }
  body.sidebar-expanded .sidebar .sidebar-button { gap: 0; }
  body.sidebar-expanded .sidebar .sidebar-label { max-width: 230px; margin-left: 12px; }
  .sidebar .sidebar-toggle,
  body.sidebar-expanded .sidebar .sidebar-toggle { width: 50px; }
}
@media (max-width: 600px) {
  .header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; }
  .header .mobile-menu-toggle { grid-column: 1; grid-row: 1; justify-self: start; }
  .header .logo-link { grid-column: 2; grid-row: 1; margin-left: 0; justify-self: center; }
  .header .page-title { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; }
  .header-logo-mark { height: 36px; }
  .sidebar {
    width: min(340px, 92vw);
    max-height: calc(100dvh - var(--header-height));
    padding: 8px 10px 20px;
    border-radius: 0 0 16px 0;
    gap: 8px;
  }
  .sidebar [data-nav="menu"] { display: flex; }
  .sidebar .sidebar-toggle svg { transform: rotate(0); }
  .sidebar .sidebar-button { min-height: 56px; padding: 12px 14px; gap: 14px; }
  .sidebar .sidebar-label { font: 500 14px/1.4 'Montserrat', Arial, sans-serif; white-space: normal; }
  .sidebar .sidebar-items { gap: 6px; }
  .sidebar .sidebar-button svg { width: 24px; height: 24px; }
}
.pref-dark .sidebar { --nav-surface: #191923; --nav-selected: #393951; }
.pref-dark .sidebar .sidebar-button { color: #f2f2fa; }
.pref-dark .sidebar .sidebar-button svg { color: #dedee8; }
.pref-contrast .sidebar .sidebar-button svg { color: currentColor; }
.pref-dark .sidebar .sidebar-button.is-selected { color: #fff; }
.pref-dark .sidebar .sidebar-button:hover { background: #303049; }
.pref-dark .sidebar .sidebar-button.is-selected:hover,
.pref-dark .sidebar .sidebar-button:active { background: #454567; }
.pref-contrast .sidebar .sidebar-button.is-selected { box-shadow: inset 0 0 0 2px currentColor; }
.pref-largeText .sidebar .sidebar-label { font-size: 18px; }
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar *, .app-shell, .page.active, .menu-backdrop {
    transition: none !important;
    animation: none !important;
  }
}