/* Mobile navigation: one logo trigger, one drawer, one scrolling surface. */
.astra-app .fc-menu-trigger { display: none; }
.astra-app .sidebar,
.nav-collapsed .astra-app .sidebar {
  display: flex; flex-direction: column; gap: 0;
  width: min(368px, calc(100vw - 24px)); height: 100dvh;
  padding: max(18px, env(safe-area-inset-top, 0px)) 0 0;
  overflow: hidden; border-radius: 0 24px 24px 0;
  transform: translateX(-105%);
  transition: transform .44s cubic-bezier(.22, 1, .36, 1), visibility 0s .44s;
  visibility: hidden;
}
.astra-app.nav-open .sidebar { transform: translateX(0); visibility: visible; transition-delay: 0s; box-shadow: 16px 0 80px #0003; }
.astra-app .sidebar-head { flex: 0 0 auto; margin: 0; padding: 0 76px 0 24px; min-height: 44px; }
.astra-app .astra-drawer-brand { display: flex; align-items: center; gap: 10px; }
.astra-app .astra-drawer-brand img { display: block; width: 36px; height: 36px; }
.astra-app .sidebar .brand-text .name { font-size: 25px; }
.astra-app .sidebar .mobile-close {
  top: max(18px, env(safe-area-inset-top, 0px)); right: 18px;
  width: 44px; height: 44px; border: 1px solid var(--border);
  border-radius: 50%; background: var(--bg-0); color: var(--text);
}
.astra-app .sidebar .mobile-close svg { transition: transform .25s; }
.astra-app .sidebar .mobile-close:hover svg { transform: rotate(90deg); }
.fc-drawer-intro { flex: 0 0 auto; padding: 26px 24px 20px; border-bottom: 1px solid var(--border); }
.fc-drawer-kicker { font: 600 9px/1.5 var(--font-body); letter-spacing: .12em; color: var(--text-dim); }
.fc-drawer-intro h2 { margin: 6px 0; font: 600 46px/1 var(--font-display); letter-spacing: -.02em; color: var(--text); }
.fc-drawer-intro h2::after { content: ''; display: inline-block; width: 9px; height: 9px; margin-left: 8px; border-radius: 3px; background: var(--fc-nav-marker, #c7f36b); transform: rotate(-12deg); }
.fc-drawer-hint { margin: 9px 0 0; color: var(--text-dim); font: 400 11px/1.5 var(--font-body); }
.astra-app .sidebar .nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; touch-action: pan-y;
  padding: 8px 16px max(24px, env(safe-area-inset-bottom, 0px));
  gap: 0; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  scroll-padding-block: 16px; -webkit-overflow-scrolling: touch;
}
.fc-nav-group { flex: 0 0 auto; padding: 16px 0; }
.fc-nav-group + .fc-nav-group { border-top: 1px solid var(--border); }
.fc-nav-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 10px 9px; font: 800 11px/1.5 var(--font-body); letter-spacing: .075em; text-transform: uppercase; color: var(--text-dim); }
.fc-nav-group h3 small { margin-left: auto; font: 500 10px var(--font-body); opacity: .7; }
.fc-nav-pages { display: grid; gap: 3px; }
.fc-nav-page { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 12px; border: 1px solid transparent; border-radius: 11px; font: 600 13px/1.5 var(--font-body); text-decoration: none; color: var(--text); transition: background .16s, transform .16s; }
.fc-nav-page > svg { flex-shrink: 0; color: var(--text-dim); }
.fc-nav-page > span:not(.fc-nav-arrow) { flex: 1; min-width: 0; }
.fc-nav-page .fc-nav-arrow { margin-left: auto; color: var(--text-dim); opacity: 0; transform: translate(-4px, 4px); transition: transform .2s, opacity .2s; }
.fc-nav-page[aria-current='page'] { background: var(--accent-soft); border-color: var(--border); box-shadow: inset 3px 0 var(--fc-nav-marker, #c7f36b); color: var(--accent); }
.fc-nav-page[aria-current='page'] > svg { color: var(--accent); }
.fc-nav-page[aria-current='page'] .fc-nav-arrow,
.fc-nav-page:hover .fc-nav-arrow { opacity: 1; transform: none; }
.fc-nav-page:hover { background: var(--accent-soft); }
.fc-nav-page:active { transform: scale(.98); }
.astra-app .nav-backdrop { display: block; background: #090b1070; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: opacity .3s, visibility .3s; }
.astra-app.nav-open .fc-nav-group { animation: fc-group-arrive .45s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(60ms + var(--group-index) * 35ms); }
.astra-app.nav-open .astra-drawer-brand img { animation: fc-core-turn .65s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes fc-group-arrive { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes fc-core-turn { from { transform: rotate(-100deg) scale(.65); } to { transform: rotate(0) scale(1); } }
@media (max-width: 850px) {
  .astra-app .topbar { position: sticky; top: 0; z-index: 75; }
  .astra-app .topbar > .brand,
  .astra-app .astra-context-wrap,
  .astra-app .astra-mobile-nav { display: none; }
  .astra-app .fc-menu-trigger { display: flex; align-items: center; min-height: 44px; padding: 0 4px 0 0; border: 0; background: transparent; color: var(--text); cursor: pointer; }
  .astra-app .fc-menu-trigger .astra-logo { position: relative; overflow: visible; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
  .astra-app .fc-menu-trigger:active .astra-logo { transform: rotate(-12deg) scale(.9); }
  .fc-menu-indicator { position: absolute; right: -5px; bottom: -3px; display: grid; align-content: center; justify-items: center; gap: 3px; width: 18px; height: 18px; border: 2px solid var(--panel); border-radius: 6px; background: #c7f36b; color: #18211f; }
  .fc-menu-indicator i { width: 8px; height: 1.5px; background: currentColor; border-radius: 1px; }
  .astra-app .content { padding-top: 18px; padding-bottom: max(32px, env(safe-area-inset-bottom, 0px)); }
  .astra-app .astra-footer { padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
  .astra-app .quiz-navigation { bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .astra-app #page-root[data-exam-view='quiz'] { padding-bottom: calc(var(--sw-dock-height, 134px) + 24px); }
  body:has(.astra-app) .study-widget.sw-card:not(.sw-docked),
  body:has(.astra-app) .auto-study-widget:not(.sw-docked) { bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important; }
  body:has(.astra-app.nav-open) > :is(.study-widget, .auto-study-widget) { visibility: hidden; pointer-events: none; }
}
@media (max-height: 650px) {
  .fc-drawer-intro { padding-top: 12px; padding-bottom: 12px; }
  .fc-drawer-intro h2 { font-size: 32px; }
  .fc-drawer-kicker, .fc-drawer-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .astra-app .sidebar, .astra-app .nav-backdrop, .fc-nav-page,
  .astra-app .fc-menu-trigger .astra-logo, .astra-app .sidebar .mobile-close svg { transition: none; }
  .astra-app.nav-open .fc-nav-group, .astra-app.nav-open .astra-drawer-brand img { animation: none; }
}

/* During a swipe the finger owns position and backdrop opacity. */
.astra-app.fc-nav-dragging .sidebar {
  visibility: visible; transition: none; will-change: transform;
  box-shadow: 16px 0 80px #0003;
}
.astra-app.fc-nav-dragging .nav-backdrop {
  visibility: visible; transition: none; will-change: opacity;
}
.astra-app.fc-nav-gesture .fc-nav-group,
.astra-app.fc-nav-gesture .astra-drawer-brand img { animation: none; }
@media (max-width: 850px) {
  .astra-app .fc-menu-trigger,
  .astra-app .sidebar,
  .astra-app .nav-backdrop { touch-action: pan-y pinch-zoom; }
}
