/* Responsive breakpoints */
@media (max-width: 800px) {
  /* Override layout tokens for mobile */
  :root {
    --header-height: var(--header-height-mobile);
    --footer-height: 40px;
  }

  /* Fixed, single-row mobile header */
  .header {
    height: var(--header-height-mobile);
    min-height: var(--header-height-mobile);
    flex-direction: row;
    padding: 0 var(--space-4);
  }

  /* Hide desktop nav */
  nav.nav {
    display: none;
  }

  /* Hide desktop header icons (login link + logos + desktop theme toggle) */
  .header-icons {
    display: none;
  }

  /* Show mobile login icon button, push it to the right */
  .header-login-mobile {
    display: flex;
    margin-left: auto;
    margin-right: var(--space-3);
  }

  /* Show burger button */
  .burger-btn {
    display: flex;
  }

  /* Hide index page logo on mobile */
  .logo-image {
    display: none;
  }

  /* Show mobile menu panel structure */
  .mobile-menu {
    display: block;
  }

  /* Adjust main-content for new mobile header height */
  .main-content {
    top: calc(var(--header-height-mobile) + env(safe-area-inset-top));
    bottom: calc(var(--footer-height) + env(safe-area-inset-bottom));
  }
}

@media (max-width: 768px) {

  .note,
  .note-section {
    padding: 16px;
    margin: 16px 0;
  }

  .note__header,
  .note-header {
    margin-bottom: 16px;
  }

  .note__title,
  .note-header h3 {
    font-size: 18px;
  }

  .note__icon,
  .note-icon {
    font-size: 24px;
  }
}