/**
 * FoSS responsive layer — works with pre-built CSS modules (no Tailwind in source tree).
 * Breakpoint map (aligns with Tailwind defaults):
 *   sm: 640px  | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px
 */

:root {
  --foss-bp-sm: 640px;
  --foss-bp-md: 768px;
  --foss-bp-lg: 1024px;
  --foss-bp-xl: 1280px;
  --foss-bp-2xl: 1536px;
  --foss-touch-target: 44px;
  --foss-content-max: 1680px;
}

/* Faster taps on interactive controls (avoids 300ms delay on legacy mobile browsers) */
#root button,
#root a[role="button"] {
  touch-action: manipulation;
}

/* --- Main column: readable line length on very wide displays --- */
@media (min-width: 1536px) {
  ._content_13nhy_41 {
    max-width: min(var(--foss-content-max), 100%);
    margin-inline: auto;
  }
}

/* --- App chrome: sidebar + top bar as rounded “cards” (desktop) --- */
@media (min-width: 901px) {
  ._aside_5jfzo_1 {
    border-radius: 0 var(--foss-radius) var(--foss-radius) 0;
    border: 1px solid var(--foss-border-light);
    border-left: none;
    box-shadow:
      var(--foss-shadow-sm),
      6px 0 28px rgba(21, 40, 47, 0.08);
    overflow: hidden;
  }

  ._header_ieodk_1 {
    margin: 0.65rem 1rem 0.5rem;
    border-radius: var(--foss-radius-sm);
    border: 1px solid var(--foss-border-light);
    box-shadow: var(--foss-shadow-sm);
  }
}

/* --- Sidebar drawer: smoother motion + safe area (mobile / tablet) --- */
@media (max-width: 900px) {
  ._aside_5jfzo_1 {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: 0 var(--foss-radius-sm) var(--foss-radius-sm) 0;
    border: 1px solid var(--foss-border-light);
    border-left: none;
    overflow: hidden;
  }

  ._aside_5jfzo_1._open_5jfzo_29 {
    box-shadow:
      12px 0 48px rgba(21, 40, 47, 0.18),
      var(--foss-shadow-sm);
  }

  ._header_ieodk_1 {
    margin: 0.5rem 0.65rem 0.4rem;
    border-radius: var(--foss-radius-sm);
    border: 1px solid var(--foss-border-light);
    box-shadow: var(--foss-shadow-sm);
  }

  ._overlay_5jfzo_402 {
    transition: opacity 0.22s ease-out, backdrop-filter 0.22s ease-out;
  }

  /* Touch-friendly nav links in drawer */
  ._link_5jfzo_108 {
    min-height: var(--foss-touch-target);
    align-items: center;
  }

  ._navSectionHead_5jfzo_503 {
    min-height: var(--foss-touch-target);
  }
}

/* --- Header: stack & spacing on narrow phones --- */
@media (max-width: 479.98px) {
  ._right_ieodk_145 {
    gap: 0.5rem;
  }

  ._quick_ieodk_408 {
    min-height: var(--foss-touch-target);
    padding-inline: 1rem;
  }
}

/* --- Theme / font controls: keep icon buttons tappable --- */
@media (max-width: 639.98px) {
  ._themeBtn_ieodk_155 {
    min-width: var(--foss-touch-target);
    min-height: var(--foss-touch-target);
    justify-content: center;
  }
}

/* --- Profile / notifications --- */
@media (max-width: 639.98px) {
  ._profileBtn_ieodk_501 {
    min-height: var(--foss-touch-target);
  }

  ._trigger_13atb_5 {
    width: var(--foss-touch-target);
    height: var(--foss-touch-target);
  }
}

/* --- Section cards: breathing room on small screens --- */
@media (max-width: 639.98px) {
  ._section_14ynr_1 {
    border-radius: 1rem;
  }

  ._head_14ynr_17 {
    padding: 1rem 1.05rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  ._body_14ynr_99 {
    padding: 1rem 1.05rem 1.15rem;
  }

  ._title_14ynr_60 {
    font-size: clamp(1rem, 4.2vw, 1.08rem);
  }
}

/* --- Global: no accidental horizontal scroll in app shell --- */
#root {
  overflow-x: clip;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  ._aside_5jfzo_1 {
    transition: none;
  }
}