@mks2508/sidebar-headless 0.2.1 → 0.3.1

package/dist/{index.css → dist/index.css}

@@ -1,912 +1,949 @@
+/* CSS Custom Properties for dynamic configuration */
+.container {
+  position: relative;
+  overflow: hidden;
+  perspective: var(--cylinder-perspective, 1000px);
+}
+
+.cylinder {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  /* Rotation is controlled by Web Animations API */
+  transform: rotateX(var(--cylinder-rotation, 0deg));
+}
+
+.face {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backface-visibility: hidden;
+  /* Transform is set via inline style for dynamic positioning */
+  transition: opacity 0.3s ease;
+}
+
+.face.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.face.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Optional: Add will-change for performance on faces that are animating */
+.cylinder.animating .face {
+  will-change: opacity;
+}
+
+.cylinder.animating {
+  will-change: transform;
+}
+
+/**
+ * Tooltip Transition Keyframes
+ *
+ * Sistema de animaciones CSS para transiciones de tooltip con:
+ * - Items staggered enter/exit
+ * - Grid-based height transitions
+ * - 3D title rotations
+ *
+ * Performance: GPU-accelerated (transform + opacity only)
+ */
+
+/* ============================================================================
+   ITEMS ANIMATIONS - Staggered Enter/Exit
+   ============================================================================ */
+
+@keyframes tooltip-item-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes tooltip-item-exit {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-4px);
+  }
+}
+
+/**
+ * Item States con CSS Custom Properties
+ *
+ * Uso: <div style="--animation-order: 0" data-state="entering">
+ */
+.sidebar-sublink[data-state="entering"] {
+  animation: tooltip-item-enter 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  animation-delay: calc(var(--animation-order, 0) * 30ms + 150ms);
+  animation-fill-mode: both;
+}
+
+.sidebar-sublink[data-state="leaving"] {
+  animation: tooltip-item-exit 100ms cubic-bezier(0.4, 0, 0.6, 1);
+  animation-delay: calc(var(--animation-order, 0) * 20ms);
+  animation-fill-mode: both;
+}
+
+/* ============================================================================
+   TITLE 3D ROTATIONS
+   ============================================================================ */
+
+/**
+ * Title Rotate Up (direction-aware)
+ * Usado cuando navegamos hacia arriba en el sidebar
+ */
+@keyframes tooltip-title-rotate-up {
+  from {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+  to {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes tooltip-title-enter-from-below {
+  from {
+    transform: rotateX(90deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+}
+
 /**
- * @mks2508/sidebar-headless - Complete styles
- * 
- * This file contains all styles for Sidebar and MobileBottomNav components:
- * - Sidebar tooltip animations
- * - Mobile bottom navigation optimizations (iOS 26 Safari compatible)
+ * Title Rotate Down (direction-aware)
+ * Usado cuando navegamos hacia abajo en el sidebar
  */
+@keyframes tooltip-title-rotate-down {
+  from {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+  to {
+    transform: rotateX(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes tooltip-title-enter-from-above {
+  from {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+/**
+ * Title States
+ */
+.tooltip-title[data-direction="up"][data-state="leaving"] {
+  animation: tooltip-title-rotate-up 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.tooltip-title[data-direction="up"][data-state="entering"] {
+  animation: tooltip-title-enter-from-below 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.tooltip-title[data-direction="down"][data-state="leaving"] {
+  animation: tooltip-title-rotate-down 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.tooltip-title[data-direction="down"][data-state="entering"] {
+  animation: tooltip-title-enter-from-above 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* ============================================================================
+   3D CUBE FACES (Enfoque A: Multi-cara)
+   ============================================================================ */
+
+/**
+ * Cubo 3D con 6 caras para títulos
+ *
+ * Estructura:
+ * .title-scene (perspective)
+ *   └─ .title-cube (preserve-3d)
+ *       ├─ .title-face--front
+ *       ├─ .title-face--back
+ *       ├─ .title-face--top
+ *       ├─ .title-face--bottom
+ *       ├─ .title-face--left
+ *       └─ .title-face--right
+ */
+
+.title-scene {
+  perspective: 600px;
+  position: relative;
+  width: 100%;
+  height: 2rem;
+}
+
+.title-cube {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  /* Empujar hacia atrás para evitar blur en texto */
+  transform: translateZ(-1rem);
+}
+
+.title-face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 1rem;
+  font-weight: 500;
+}
+
+/* Posicionamiento de caras - Vertical rotation (rotateX) */
+.title-face--front {
+  transform: rotateX(0deg) translateZ(1rem);
+}
+
+.title-face--top {
+  transform: rotateX(90deg) translateZ(1rem);
+}
+
+.title-face--bottom {
+  transform: rotateX(-90deg) translateZ(1rem);
+}
+
+.title-face--back {
+  transform: rotateX(180deg) translateZ(1rem);
+}
+
+/* Estados del cubo - Direction-aware */
+.title-cube[data-face="front"] {
+  transform: translateZ(-1rem) rotateX(0deg);
+}
+
+.title-cube[data-face="top"] {
+  transform: translateZ(-1rem) rotateX(-90deg);
+}
+
+.title-cube[data-face="bottom"] {
+  transform: translateZ(-1rem) rotateX(90deg);
+}
+
+.title-cube[data-face="back"] {
+  transform: translateZ(-1rem) rotateX(180deg);
+}
+
+/* ============================================================================
+   GRID HEIGHT TRANSITION (Grid Trick)
+   ============================================================================ */
+
+/**
+ * Grid trick para height: auto transitions
+ *
+ * Técnica: grid-template-rows: 0fr → 1fr
+ * Browser support: Chrome 107+, Firefox 117+, Safari 16.4+
+ */
+
+.tooltip-content-grid {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 50ms; /* Empieza después del fade-out de items */
+}
+
+.tooltip-content-grid[data-state="open"] {
+  grid-template-rows: 1fr;
+}
+
+.tooltip-content-inner {
+  overflow: hidden;
+  min-height: 0; /* Crítico para que grid trick funcione */
+}
+
+/* ============================================================================
+   UTILITY CLASSES
+   ============================================================================ */
+
+/**
+ * Contenedor con perspective para títulos crossfade
+ */
+.tooltip-title-perspective {
+  perspective: 600px;
+  position: relative;
+  width: 100%;
+  height: 2rem;
+  overflow: hidden;
+}
+
+/**
+ * Disable animations durante hover rápido (opcional)
+ * Usar con cuidado: puede causar flickering
+ */
+.tooltip-no-animations * {
+  animation: none !important;
+  transition: none !important;
+}
+
+/* ============================================================================
+   DEBUG HELPERS
+   ============================================================================ */
+
+/**
+ * Visualización de estados en debug mode
+ */
+[data-tooltip-debug="true"] .sidebar-sublink[data-state]::before {
+  content: attr(data-state);
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 8px;
+  background: rgba(255, 0, 0, 0.8);
+  color: white;
+  padding: 2px 4px;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+[data-tooltip-debug="true"] .tooltip-title[data-direction]::after {
+  content: "dir:" attr(data-direction);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  font-size: 8px;
+  background: rgba(0, 0, 255, 0.8);
+  color: white;
+  padding: 2px 4px;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+/* ============================================================================
+   PERFORMANCE OPTIMIZATIONS
+   ============================================================================ */
+
+/**
+ * GPU acceleration hints
+ */
+.sidebar-sublink[data-state],
+.tooltip-title[data-state],
+.title-cube {
+  will-change: transform, opacity;
+}
+
+/**
+ * Contain layout/paint/style para mejor performance
+ */
+.tooltip-content-grid {
+  contain: layout style paint;
+}
+
+/**
+ * Reduce motion para accesibilidad
+ */
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-sublink[data-state],
+  .tooltip-title[data-state],
+  .title-cube,
+  .tooltip-content-grid {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/**
+ * Mobile Optimizations CSS
+ *
+ * This file contains CSS optimizations for mobile devices,
+ * specifically targeting iOS Safari and Android Chrome.
+ * Updated for 2025 with modern viewport units and safe area handling.
+ *
+ * CRITICAL: iOS 26 Safari has major bugs with fixed/sticky positioning.
+ * This file includes workarounds for these issues.
+ *
+ * Known iOS 26 Issues (as of December 2025):
+ * - Fixed elements shift when address bar shrinks/expands
+ * - visualViewport.offsetTop doesn't reset after keyboard dismissal
+ * - 100dvh creates gaps at bottom for overlays
+ * - position: fixed breaks after keyboard interaction
+ *
+ * @fileoverview Mobile-first CSS optimizations for bottom navigation
+ * @author v0
+ * @version 2.0.0 - iOS 26 compatibility update
+ */
+
+/* ============================================
+   CSS Custom Properties for Mobile Navigation
+   ============================================ */
+
+:root {
+  /* Navigation dimensions */
+  --mobile-nav-height: 4.5rem; /* 72px - optimal touch target */
+  --mobile-nav-padding-x: 1rem;
+  --mobile-nav-padding-y: 0.5rem;
+  --mobile-nav-gap: 0.25rem;
+
+  /* Safe area handling for notched devices */
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
+
+  /* Touch target sizes (WCAG 2.2 Level AAA) */
+  --touch-target-min: 44px;
+  --touch-target-optimal: 48px;
+
+  /* Glassmorphism properties */
+  --glass-blur: 20px;
+  --glass-saturation: 180%;
+  --glass-bg-light: rgba(255, 255, 255, 0.72);
+  --glass-bg-dark: rgba(17, 17, 17, 0.72);
+  --glass-border-light: rgba(255, 255, 255, 0.18);
+  --glass-border-dark: rgba(255, 255, 255, 0.08);
+
+  /* Animation timing */
+  --nav-transition-duration: 200ms;
+  --nav-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* iOS 26 Safari workaround: extra padding for floating bar */
+  --ios26-bottom-offset: 0px;
+}
+
+/* ============================================
+   iOS 26 Safari Critical Workarounds
+   ============================================
+   
+   iOS 26 has major bugs with position: fixed elements:
+   1. Elements shift when scrolling and address bar changes
+   2. After keyboard dismissal, visualViewport doesn't reset
+   3. 100dvh doesn't cover full screen in some cases
+   
+   The workaround from Apple's own website:
+   - Use a wrapper with fixed positioning
+   - Apply 100vh to inner content
+   - This creates proper stacking under the floating URL bar
+*/
+
+/* Detect iOS Safari using feature queries */
+@supports (-webkit-touch-callout: none) {
+  /* 
+   * iOS 26 Safari Fix:
+   * Move scroll from window to body to prevent fixed element drift.
+   * This is the most reliable workaround as of iOS 26.1
+   */
+  html.ios-safari-fix {
+    height: 100%;
+    height: 100dvh;
+    overflow: hidden;
+  }
+
+  html.ios-safari-fix body {
+    height: 100%;
+    height: 100dvh;
+    overflow: auto;
+    overscroll-behavior: contain;
+    /* Prevent momentum scroll affecting fixed elements */
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* ============================================
+   Modern Viewport Units Support
+   ============================================ */
+
+/**
+ * Dynamic Viewport Height (dvh) - Adjusts as browser UI appears/disappears
+ * Small Viewport Height (svh) - Minimum viewport when browser UI is visible
+ * Large Viewport Height (lvh) - Maximum viewport when browser UI is hidden
+ *
+ * IMPORTANT for iOS 26:
+ * - dvh has inconsistent behavior after keyboard dismissal
+ * - svh is more reliable for bottom navigation
+ * - Consider using 100% with proper parent height chains
+ */
+
+/* Fallback for older browsers (iOS < 15.4) */
+@supports not (height: 100dvh) {
+  .mobile-nav-container {
+    bottom: 0;
+    /* iOS 11.0-11.2 legacy support */
+    bottom: constant(safe-area-inset-bottom);
+  }
+}
+
+/* Modern browsers with dynamic viewport units */
+@supports (height: 100dvh) {
+  .mobile-nav-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+/* ============================================
+   Base Mobile Navigation Styles
+   ============================================ */
+
+.mobile-nav-root {
+  /* Positioning - using fixed with iOS 26 considerations */
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 50;
+
+  /* Safe area padding for notched devices */
+  padding-bottom: var(--safe-area-bottom);
+  padding-left: var(--safe-area-left);
+  padding-right: var(--safe-area-right);
+
+  /* 
+   * iOS 26 Fix: Force GPU layer to prevent drift
+   * translateZ(0) creates a new stacking context and compositing layer
+   */
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+
+  /* Hardware acceleration hints */
+  will-change: transform;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+
+  /* 
+   * iOS 26 Fix: contain property helps isolate layout
+   * This prevents the element from being affected by parent layout changes
+   */
+  contain: layout style;
+}
+
+/*
+ * Alternative iOS 26 workaround using sticky positioning
+ * Some developers report sticky works better than fixed in iOS 26
+ * Uncomment if fixed positioning continues to have issues
+ */
+.mobile-nav-root--sticky-fallback {
+  position: sticky;
+  bottom: 0;
+  /* Sticky requires a positioned ancestor or viewport */
+}
+
+/* ============================================
+   Glassmorphism Effect
+   ============================================ */
+
+.mobile-nav-glass {
+  /* Glassmorphism background */
+  background: var(--glass-bg-light);
+
+  /* 
+   * Backdrop blur with vendor prefix for Safari
+   * Note: backdrop-filter can cause performance issues on older devices
+   */
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+
+  /* Border for depth perception */
+  border-top: 1px solid var(--glass-border-light);
+
+  /* Text rendering optimization */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Dark mode glassmorphism */
+.dark .mobile-nav-glass,
+[data-theme="dark"] .mobile-nav-glass {
+  background: var(--glass-bg-dark);
+  border-top-color: var(--glass-border-dark);
+}
+
+/* Fallback for browsers without backdrop-filter support */
+@supports not (backdrop-filter: blur(1px)) {
+  .mobile-nav-glass {
+    background: rgba(255, 255, 255, 0.95);
+  }
+
+  .dark .mobile-nav-glass,
+  [data-theme="dark"] .mobile-nav-glass {
+    background: rgba(17, 17, 17, 0.95);
+  }
+}
+
+/* ============================================
+   Navigation List Styles
+   ============================================ */
+
+.mobile-nav-list {
+  /* Flexbox layout */
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  /* Dimensions */
+  height: var(--mobile-nav-height);
+  width: 100%;
+  max-width: 100%;
+
+  /* Padding */
+  padding: var(--mobile-nav-padding-y) var(--mobile-nav-padding-x);
+
+  /* Reset list styles */
+  list-style: none;
+  margin: 0;
+}
+
+/* ============================================
+   Navigation Item Styles
+   ============================================ */
+
+.mobile-nav-item {
+  /* Flexbox centering */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mobile-nav-gap);
+
+  /* Touch target (minimum 44x44px per WCAG 2.2) */
+  min-width: var(--touch-target-min);
+  min-height: var(--touch-target-min);
+  padding: 0.5rem 0.75rem;
+
+  /* Reset button/anchor styles */
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-decoration: none;
+
+  /* Typography - 16px minimum to prevent iOS zoom on focus */
+  font-size: 0.75rem; /* 12px for labels */
+  line-height: 1;
+
+  /* Transition */
+  transition: color var(--nav-transition-duration) var(--nav-transition-easing), transform
+    var(--nav-transition-duration) var(--nav-transition-easing);
+
+  /* Prevent text selection on touch */
+  -webkit-user-select: none;
+  user-select: none;
+
+  /* Prevent double-tap zoom */
+  touch-action: manipulation;
+
+  /* Remove tap highlight on mobile */
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Active/pressed state */
+.mobile-nav-item:active {
+  transform: scale(0.95);
+}
+
+/* Focus visible for accessibility (keyboard navigation) */
+.mobile-nav-item:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 0.5rem;
+}
+
+/* Icon container */
+.mobile-nav-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem; /* 24px */
+  height: 1.5rem; /* 24px */
+}
+
+/* Label text */
+.mobile-nav-label {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 4rem;
+}
+
+/* ============================================
+   iOS Safari Specific Fixes (All versions)
+   ============================================ */
+
+@supports (-webkit-touch-callout: none) {
+  .mobile-nav-root {
+    /* Prevent rubber-banding effect on the nav */
+    overscroll-behavior: none;
+
+    /* Ensure proper stacking above Safari's UI */
+    position: fixed;
+    bottom: 0;
+  }
+
+  /* Spacer component to prevent content from going under navigation */
+  .mobile-nav-spacer {
+    height: calc(var(--mobile-nav-height) + var(--safe-area-bottom));
+    /* Add extra space for iOS 26 floating bar when needed */
+    padding-bottom: var(--ios26-bottom-offset);
+  }
+}
+
+/* ============================================
+   iOS 26+ Specific Workarounds
+   ============================================
+   
+   These are specifically for iOS 26 Safari bugs.
+   The main issues are:
+   1. Fixed elements drift when address bar shrinks
+   2. visualViewport doesn't reset after keyboard
+   3. 100dvh doesn't account for floating tab bar
+*/
+
+/* 
+ * iOS 26 Detection Hack:
+ * iOS 26 introduced the floating tab bar which affects layout.
+ * We use a combination of feature detection and JS-added classes.
+ */
+
+/* When JS detects iOS 26, it adds this class to html */
+html.ios-26-fix .mobile-nav-root {
+  /* 
+   * Apple's workaround: Use a pseudo-element that extends beyond
+   * the visible area to account for the floating bar
+   */
+  position: fixed;
+  bottom: 0;
+}
+
+html.ios-26-fix .mobile-nav-root::after {
+  content: "";
+  position: absolute;
+  bottom: calc(-1 * var(--safe-area-bottom) - 20px);
+  left: 0;
+  right: 0;
+  height: calc(var(--safe-area-bottom) + 20px);
+  background: inherit;
+  -webkit-backdrop-filter: inherit;
+  backdrop-filter: inherit;
+}
+
+/* 
+ * Alternative: Force recalculation on scroll
+ * This class is toggled by JS when scroll events occur
+ */
+.mobile-nav-root--ios26-scroll-fix {
+  /* Trigger repaint */
+  transform: translateZ(0) translateY(0);
+}
+
+/* ============================================
+   Android Chrome Specific Fixes
+   ============================================ */
+
+@supports not (-webkit-touch-callout: none) {
+  .mobile-nav-root {
+    /* Android uses standard fixed positioning well */
+    bottom: 0;
+  }
+
+  /* Android gesture navigation safe area */
+  .mobile-nav-spacer {
+    height: calc(var(--mobile-nav-height) + var(--safe-area-bottom));
+  }
+}
+
+/* ============================================
+   Keyboard Visibility Handling
+   ============================================
+   
+   iOS 26 Bug: After keyboard dismissal, fixed elements
+   remain offset. This requires JS intervention.
+*/
+
+/* When keyboard is visible, optionally hide nav */
+html.keyboard-visible .mobile-nav-root--hide-on-keyboard {
+  transform: translateY(100%);
+  transition: transform 0.2s ease-out;
+}
+
+/* Force reset after keyboard dismissal (JS adds this class) */
+html.keyboard-dismissed .mobile-nav-root {
+  /* Force layout recalculation */
+  transform: translateZ(0);
+  animation: ios26-reset 0.01s forwards;
+}
+
+@keyframes ios26-reset {
+  from {
+    transform: translateZ(0) translateY(0.01px);
+  }
+  to {
+    transform: translateZ(0) translateY(0);
+  }
+}
+
+/* ============================================
+   Reduced Motion Support
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .mobile-nav-item {
+    transition: none;
+  }
+
+  .mobile-nav-item:active {
+    transform: none;
+  }
+
+  html.keyboard-visible .mobile-nav-root--hide-on-keyboard {
+    transition: none;
+  }
+}
+
+/* ============================================
+   High Contrast Mode Support
+   ============================================ */
+
+@media (prefers-contrast: high) {
+  .mobile-nav-glass {
+    background: Canvas;
+    border-top: 2px solid CanvasText;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  .mobile-nav-item {
+    color: CanvasText;
+  }
+
+  .mobile-nav-item:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* ============================================
+   Landscape Orientation Adjustments
+   ============================================ */
+
+@media (orientation: landscape) and (max-height: 500px) {
+  :root {
+    --mobile-nav-height: 3.5rem;
+  }
+
+  .mobile-nav-label {
+    display: none;
+  }
+
+  .mobile-nav-item {
+    padding: 0.25rem 0.5rem;
+  }
+}
+
+/* ============================================
+   Foldable/Dual Screen Support
+   ============================================ */
+
+@media (horizontal-viewport-segments: 2) {
+  .mobile-nav-root {
+    width: 100%;
+  }
+
+  .mobile-nav-list {
+    /* Adjust for fold in the middle */
+    padding-left: max(var(--mobile-nav-padding-x), env(fold-left, 0px));
+    padding-right: max(var(--mobile-nav-padding-x), env(fold-right, 0px));
+  }
+}
+
+/* Samsung Galaxy Fold specific */
+@media (min-width: 280px) and (max-width: 320px) {
+  .mobile-nav-list {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+}
+
+/* ============================================
+   Very Small Screens (older devices)
+   ============================================ */
+
+@media (max-width: 320px) {
+  :root {
+    --mobile-nav-height: 4rem;
+    --mobile-nav-padding-x: 0.5rem;
+  }
+
+  .mobile-nav-label {
+    font-size: 0.625rem;
+    max-width: 3rem;
+  }
+}
+
+/* ============================================
+   Print Styles
+   ============================================ */
+
+@media print {
+  .mobile-nav-root,
+  .mobile-nav-spacer {
+    display: none !important;
+  }
+}
+
+/* ============================================
+   Utility Classes
+   ============================================ */
+
+/* Hide visually but keep accessible to screen readers */
+.mobile-nav-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Skip to content link for keyboard users */
+.mobile-nav-skip-link {
+  position: absolute;
+  top: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  padding: 0.5rem 1rem;
+  background: var(--glass-bg-light);
+  border-radius: 0.5rem;
+  transition: top 0.2s;
+}
+
+.mobile-nav-skip-link:focus {
+  top: 0.5rem;
+}
 
-/* Sidebar Tooltip Animations */
-/**
- * Tooltip Transition Keyframes
- *
- * Sistema de animaciones CSS para transiciones de tooltip con:
- * - Items staggered enter/exit
- * - Grid-based height transitions
- * - 3D title rotations
- *
- * Performance: GPU-accelerated (transform + opacity only)
- */
-
-/* ============================================================================
-   ITEMS ANIMATIONS - Staggered Enter/Exit
-   ============================================================================ */
-
-@keyframes tooltip-item-enter {
-  from {
-    opacity: 0;
-    transform: translateX(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes tooltip-item-exit {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-4px);
-  }
-}
-
-/**
- * Item States con CSS Custom Properties
- *
- * Uso: <div style="--animation-order: 0" data-state="entering">
- */
-.sidebar-sublink[data-state="entering"] {
-  animation: tooltip-item-enter 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  animation-delay: calc(var(--animation-order, 0) * 30ms + 150ms);
-  animation-fill-mode: both;
-}
-
-.sidebar-sublink[data-state="leaving"] {
-  animation: tooltip-item-exit 100ms cubic-bezier(0.4, 0, 0.6, 1);
-  animation-delay: calc(var(--animation-order, 0) * 20ms);
-  animation-fill-mode: both;
-}
-
-/* ============================================================================
-   TITLE 3D ROTATIONS
-   ============================================================================ */
-
-/**
- * Title Rotate Up (direction-aware)
- * Usado cuando navegamos hacia arriba en el sidebar
- */
-@keyframes tooltip-title-rotate-up {
-  from {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-  to {
-    transform: rotateX(-90deg);
-    opacity: 0;
-  }
-}
-
-@keyframes tooltip-title-enter-from-below {
-  from {
-    transform: rotateX(90deg);
-    opacity: 0;
-  }
-  to {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-}
-
-/**
- * Title Rotate Down (direction-aware)
- * Usado cuando navegamos hacia abajo en el sidebar
- */
-@keyframes tooltip-title-rotate-down {
-  from {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-  to {
-    transform: rotateX(90deg);
-    opacity: 0;
-  }
-}
-
-@keyframes tooltip-title-enter-from-above {
-  from {
-    transform: rotateX(-90deg);
-    opacity: 0;
-  }
-  to {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-}
-
-/**
- * Title States
- */
-.tooltip-title[data-direction="up"][data-state="leaving"] {
-  animation: tooltip-title-rotate-up 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.tooltip-title[data-direction="up"][data-state="entering"] {
-  animation: tooltip-title-enter-from-below 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.tooltip-title[data-direction="down"][data-state="leaving"] {
-  animation: tooltip-title-rotate-down 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.tooltip-title[data-direction="down"][data-state="entering"] {
-  animation: tooltip-title-enter-from-above 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-/* ============================================================================
-   3D CUBE FACES (Enfoque A: Multi-cara)
-   ============================================================================ */
-
-/**
- * Cubo 3D con 6 caras para títulos
- *
- * Estructura:
- * .title-scene (perspective)
- *   └─ .title-cube (preserve-3d)
- *       ├─ .title-face--front
- *       ├─ .title-face--back
- *       ├─ .title-face--top
- *       ├─ .title-face--bottom
- *       ├─ .title-face--left
- *       └─ .title-face--right
- */
-
-.title-scene {
-  perspective: 600px;
-  position: relative;
-  width: 100%;
-  height: 2rem;
-}
-
-.title-cube {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  transform-style: preserve-3d;
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  /* Empujar hacia atrás para evitar blur en texto */
-  transform: translateZ(-1rem);
-}
-
-.title-face {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0 1rem;
-  font-weight: 500;
-}
-
-/* Posicionamiento de caras - Vertical rotation (rotateX) */
-.title-face--front {
-  transform: rotateX(0deg) translateZ(1rem);
-}
-
-.title-face--top {
-  transform: rotateX(90deg) translateZ(1rem);
-}
-
-.title-face--bottom {
-  transform: rotateX(-90deg) translateZ(1rem);
-}
-
-.title-face--back {
-  transform: rotateX(180deg) translateZ(1rem);
-}
-
-/* Estados del cubo - Direction-aware */
-.title-cube[data-face="front"] {
-  transform: translateZ(-1rem) rotateX(0deg);
-}
-
-.title-cube[data-face="top"] {
-  transform: translateZ(-1rem) rotateX(-90deg);
-}
-
-.title-cube[data-face="bottom"] {
-  transform: translateZ(-1rem) rotateX(90deg);
-}
-
-.title-cube[data-face="back"] {
-  transform: translateZ(-1rem) rotateX(180deg);
-}
-
-/* ============================================================================
-   GRID HEIGHT TRANSITION (Grid Trick)
-   ============================================================================ */
-
-/**
- * Grid trick para height: auto transitions
- *
- * Técnica: grid-template-rows: 0fr → 1fr
- * Browser support: Chrome 107+, Firefox 117+, Safari 16.4+
- */
-
-.tooltip-content-grid {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  transition-delay: 50ms; /* Empieza después del fade-out de items */
-}
-
-.tooltip-content-grid[data-state="open"] {
-  grid-template-rows: 1fr;
-}
-
-.tooltip-content-inner {
-  overflow: hidden;
-  min-height: 0; /* Crítico para que grid trick funcione */
-}
-
-/* ============================================================================
-   UTILITY CLASSES
-   ============================================================================ */
-
-/**
- * Contenedor con perspective para títulos crossfade
- */
-.tooltip-title-perspective {
-  perspective: 600px;
-  position: relative;
-  width: 100%;
-  height: 2rem;
-  overflow: hidden;
-}
-
-/**
- * Disable animations durante hover rápido (opcional)
- * Usar con cuidado: puede causar flickering
- */
-.tooltip-no-animations * {
-  animation: none !important;
-  transition: none !important;
-}
-
-/* ============================================================================
-   DEBUG HELPERS
-   ============================================================================ */
-
-/**
- * Visualización de estados en debug mode
- */
-[data-tooltip-debug="true"] .sidebar-sublink[data-state]::before {
-  content: attr(data-state);
-  position: absolute;
-  top: 0;
-  right: 0;
-  font-size: 8px;
-  background: rgba(255, 0, 0, 0.8);
-  color: white;
-  padding: 2px 4px;
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 1000;
-}
-
-[data-tooltip-debug="true"] .tooltip-title[data-direction]::after {
-  content: "dir:" attr(data-direction);
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  font-size: 8px;
-  background: rgba(0, 0, 255, 0.8);
-  color: white;
-  padding: 2px 4px;
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 1000;
-}
-
-/* ============================================================================
-   PERFORMANCE OPTIMIZATIONS
-   ============================================================================ */
-
-/**
- * GPU acceleration hints
- */
-.sidebar-sublink[data-state],
-.tooltip-title[data-state],
-.title-cube {
-  will-change: transform, opacity;
-}
-
-/**
- * Contain layout/paint/style para mejor performance
- */
-.tooltip-content-grid {
-  contain: layout style paint;
-}
-
-/**
- * Reduce motion para accesibilidad
- */
-@media (prefers-reduced-motion: reduce) {
-  .sidebar-sublink[data-state],
-  .tooltip-title[data-state],
-  .title-cube,
-  .tooltip-content-grid {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-
-/* Mobile Bottom Navigation Optimizations */
-/**
- * Mobile Optimizations CSS
- *
- * This file contains CSS optimizations for mobile devices,
- * specifically targeting iOS Safari and Android Chrome.
- * Updated for 2025 with modern viewport units and safe area handling.
- *
- * CRITICAL: iOS 26 Safari has major bugs with fixed/sticky positioning.
- * This file includes workarounds for these issues.
- *
- * Known iOS 26 Issues (as of December 2025):
- * - Fixed elements shift when address bar shrinks/expands
- * - visualViewport.offsetTop doesn't reset after keyboard dismissal
- * - 100dvh creates gaps at bottom for overlays
- * - position: fixed breaks after keyboard interaction
- *
- * @fileoverview Mobile-first CSS optimizations for bottom navigation
- * @author v0
- * @version 2.0.0 - iOS 26 compatibility update
- */
-
-/* ============================================
-   CSS Custom Properties for Mobile Navigation
-   ============================================ */
-
-:root {
-  /* Navigation dimensions */
-  --mobile-nav-height: 4.5rem; /* 72px - optimal touch target */
-  --mobile-nav-padding-x: 1rem;
-  --mobile-nav-padding-y: 0.5rem;
-  --mobile-nav-gap: 0.25rem;
-
-  /* Safe area handling for notched devices */
-  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
-  --safe-area-left: env(safe-area-inset-left, 0px);
-  --safe-area-right: env(safe-area-inset-right, 0px);
-
-  /* Touch target sizes (WCAG 2.2 Level AAA) */
-  --touch-target-min: 44px;
-  --touch-target-optimal: 48px;
-
-  /* Glassmorphism properties */
-  --glass-blur: 20px;
-  --glass-saturation: 180%;
-  --glass-bg-light: rgba(255, 255, 255, 0.72);
-  --glass-bg-dark: rgba(17, 17, 17, 0.72);
-  --glass-border-light: rgba(255, 255, 255, 0.18);
-  --glass-border-dark: rgba(255, 255, 255, 0.08);
-
-  /* Animation timing */
-  --nav-transition-duration: 200ms;
-  --nav-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* iOS 26 Safari workaround: extra padding for floating bar */
-  --ios26-bottom-offset: 0px;
-}
-
-/* ============================================
-   iOS 26 Safari Critical Workarounds
-   ============================================
-   
-   iOS 26 has major bugs with position: fixed elements:
-   1. Elements shift when scrolling and address bar changes
-   2. After keyboard dismissal, visualViewport doesn't reset
-   3. 100dvh doesn't cover full screen in some cases
-   
-   The workaround from Apple's own website:
-   - Use a wrapper with fixed positioning
-   - Apply 100vh to inner content
-   - This creates proper stacking under the floating URL bar
-*/
-
-/* Detect iOS Safari using feature queries */
-@supports (-webkit-touch-callout: none) {
-  /* 
-   * iOS 26 Safari Fix:
-   * Move scroll from window to body to prevent fixed element drift.
-   * This is the most reliable workaround as of iOS 26.1
-   */
-  html.ios-safari-fix {
-    height: 100%;
-    height: 100dvh;
-    overflow: hidden;
-  }
-
-  html.ios-safari-fix body {
-    height: 100%;
-    height: 100dvh;
-    overflow: auto;
-    overscroll-behavior: contain;
-    /* Prevent momentum scroll affecting fixed elements */
-    -webkit-overflow-scrolling: touch;
-  }
-}
-
-/* ============================================
-   Modern Viewport Units Support
-   ============================================ */
-
-/**
- * Dynamic Viewport Height (dvh) - Adjusts as browser UI appears/disappears
- * Small Viewport Height (svh) - Minimum viewport when browser UI is visible
- * Large Viewport Height (lvh) - Maximum viewport when browser UI is hidden
- *
- * IMPORTANT for iOS 26:
- * - dvh has inconsistent behavior after keyboard dismissal
- * - svh is more reliable for bottom navigation
- * - Consider using 100% with proper parent height chains
- */
-
-/* Fallback for older browsers (iOS < 15.4) */
-@supports not (height: 100dvh) {
-  .mobile-nav-container {
-    bottom: 0;
-    /* iOS 11.0-11.2 legacy support */
-    bottom: constant(safe-area-inset-bottom);
-  }
-}
-
-/* Modern browsers with dynamic viewport units */
-@supports (height: 100dvh) {
-  .mobile-nav-container {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-}
-
-/* ============================================
-   Base Mobile Navigation Styles
-   ============================================ */
-
-.mobile-nav-root {
-  /* Positioning - using fixed with iOS 26 considerations */
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 50;
-
-  /* Safe area padding for notched devices */
-  padding-bottom: var(--safe-area-bottom);
-  padding-left: var(--safe-area-left);
-  padding-right: var(--safe-area-right);
-
-  /* 
-   * iOS 26 Fix: Force GPU layer to prevent drift
-   * translateZ(0) creates a new stacking context and compositing layer
-   */
-  transform: translateZ(0);
-  -webkit-transform: translateZ(0);
-
-  /* Hardware acceleration hints */
-  will-change: transform;
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-
-  /* 
-   * iOS 26 Fix: contain property helps isolate layout
-   * This prevents the element from being affected by parent layout changes
-   */
-  contain: layout style;
-}
-
-/*
- * Alternative iOS 26 workaround using sticky positioning
- * Some developers report sticky works better than fixed in iOS 26
- * Uncomment if fixed positioning continues to have issues
- */
-.mobile-nav-root--sticky-fallback {
-  position: sticky;
-  bottom: 0;
-  /* Sticky requires a positioned ancestor or viewport */
-}
-
-/* ============================================
-   Glassmorphism Effect
-   ============================================ */
-
-.mobile-nav-glass {
-  /* Glassmorphism background */
-  background: var(--glass-bg-light);
-
-  /* 
-   * Backdrop blur with vendor prefix for Safari
-   * Note: backdrop-filter can cause performance issues on older devices
-   */
-  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-
-  /* Border for depth perception */
-  border-top: 1px solid var(--glass-border-light);
-
-  /* Text rendering optimization */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Dark mode glassmorphism */
-.dark .mobile-nav-glass,
-[data-theme="dark"] .mobile-nav-glass {
-  background: var(--glass-bg-dark);
-  border-top-color: var(--glass-border-dark);
-}
-
-/* Fallback for browsers without backdrop-filter support */
-@supports not (backdrop-filter: blur(1px)) {
-  .mobile-nav-glass {
-    background: rgba(255, 255, 255, 0.95);
-  }
-
-  .dark .mobile-nav-glass,
-  [data-theme="dark"] .mobile-nav-glass {
-    background: rgba(17, 17, 17, 0.95);
-  }
-}
-
-/* ============================================
-   Navigation List Styles
-   ============================================ */
-
-.mobile-nav-list {
-  /* Flexbox layout */
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-
-  /* Dimensions */
-  height: var(--mobile-nav-height);
-  width: 100%;
-  max-width: 100%;
-
-  /* Padding */
-  padding: var(--mobile-nav-padding-y) var(--mobile-nav-padding-x);
-
-  /* Reset list styles */
-  list-style: none;
-  margin: 0;
-}
-
-/* ============================================
-   Navigation Item Styles
-   ============================================ */
-
-.mobile-nav-item {
-  /* Flexbox centering */
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--mobile-nav-gap);
-
-  /* Touch target (minimum 44x44px per WCAG 2.2) */
-  min-width: var(--touch-target-min);
-  min-height: var(--touch-target-min);
-  padding: 0.5rem 0.75rem;
-
-  /* Reset button/anchor styles */
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  text-decoration: none;
-
-  /* Typography - 16px minimum to prevent iOS zoom on focus */
-  font-size: 0.75rem; /* 12px for labels */
-  line-height: 1;
-
-  /* Transition */
-  transition: color var(--nav-transition-duration) var(--nav-transition-easing), transform
-    var(--nav-transition-duration) var(--nav-transition-easing);
-
-  /* Prevent text selection on touch */
-  -webkit-user-select: none;
-  user-select: none;
-
-  /* Prevent double-tap zoom */
-  touch-action: manipulation;
-
-  /* Remove tap highlight on mobile */
-  -webkit-tap-highlight-color: transparent;
-}
-
-/* Active/pressed state */
-.mobile-nav-item:active {
-  transform: scale(0.95);
-}
-
-/* Focus visible for accessibility (keyboard navigation) */
-.mobile-nav-item:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-  border-radius: 0.5rem;
-}
-
-/* Icon container */
-.mobile-nav-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem; /* 24px */
-  height: 1.5rem; /* 24px */
-}
-
-/* Label text */
-.mobile-nav-label {
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 4rem;
-}
-
-/* ============================================
-   iOS Safari Specific Fixes (All versions)
-   ============================================ */
-
-@supports (-webkit-touch-callout: none) {
-  .mobile-nav-root {
-    /* Prevent rubber-banding effect on the nav */
-    overscroll-behavior: none;
-
-    /* Ensure proper stacking above Safari's UI */
-    position: fixed;
-    bottom: 0;
-  }
-
-  /* Spacer component to prevent content from going under navigation */
-  .mobile-nav-spacer {
-    height: calc(var(--mobile-nav-height) + var(--safe-area-bottom));
-    /* Add extra space for iOS 26 floating bar when needed */
-    padding-bottom: var(--ios26-bottom-offset);
-  }
-}
-
-/* ============================================
-   iOS 26+ Specific Workarounds
-   ============================================
-   
-   These are specifically for iOS 26 Safari bugs.
-   The main issues are:
-   1. Fixed elements drift when address bar shrinks
-   2. visualViewport doesn't reset after keyboard
-   3. 100dvh doesn't account for floating tab bar
-*/
-
-/* 
- * iOS 26 Detection Hack:
- * iOS 26 introduced the floating tab bar which affects layout.
- * We use a combination of feature detection and JS-added classes.
- */
-
-/* When JS detects iOS 26, it adds this class to html */
-html.ios-26-fix .mobile-nav-root {
-  /* 
-   * Apple's workaround: Use a pseudo-element that extends beyond
-   * the visible area to account for the floating bar
-   */
-  position: fixed;
-  bottom: 0;
-}
-
-html.ios-26-fix .mobile-nav-root::after {
-  content: "";
-  position: absolute;
-  bottom: calc(-1 * var(--safe-area-bottom) - 20px);
-  left: 0;
-  right: 0;
-  height: calc(var(--safe-area-bottom) + 20px);
-  background: inherit;
-  -webkit-backdrop-filter: inherit;
-  backdrop-filter: inherit;
-}
-
-/* 
- * Alternative: Force recalculation on scroll
- * This class is toggled by JS when scroll events occur
- */
-.mobile-nav-root--ios26-scroll-fix {
-  /* Trigger repaint */
-  transform: translateZ(0) translateY(0);
-}
-
-/* ============================================
-   Android Chrome Specific Fixes
-   ============================================ */
-
-@supports not (-webkit-touch-callout: none) {
-  .mobile-nav-root {
-    /* Android uses standard fixed positioning well */
-    bottom: 0;
-  }
-
-  /* Android gesture navigation safe area */
-  .mobile-nav-spacer {
-    height: calc(var(--mobile-nav-height) + var(--safe-area-bottom));
-  }
-}
-
-/* ============================================
-   Keyboard Visibility Handling
-   ============================================
-   
-   iOS 26 Bug: After keyboard dismissal, fixed elements
-   remain offset. This requires JS intervention.
-*/
-
-/* When keyboard is visible, optionally hide nav */
-html.keyboard-visible .mobile-nav-root--hide-on-keyboard {
-  transform: translateY(100%);
-  transition: transform 0.2s ease-out;
-}
-
-/* Force reset after keyboard dismissal (JS adds this class) */
-html.keyboard-dismissed .mobile-nav-root {
-  /* Force layout recalculation */
-  transform: translateZ(0);
-  animation: ios26-reset 0.01s forwards;
-}
-
-@keyframes ios26-reset {
-  from {
-    transform: translateZ(0) translateY(0.01px);
-  }
-  to {
-    transform: translateZ(0) translateY(0);
-  }
-}
-
-/* ============================================
-   Reduced Motion Support
-   ============================================ */
-
-@media (prefers-reduced-motion: reduce) {
-  .mobile-nav-item {
-    transition: none;
-  }
-
-  .mobile-nav-item:active {
-    transform: none;
-  }
-
-  html.keyboard-visible .mobile-nav-root--hide-on-keyboard {
-    transition: none;
-  }
-}
-
-/* ============================================
-   High Contrast Mode Support
-   ============================================ */
-
-@media (prefers-contrast: high) {
-  .mobile-nav-glass {
-    background: Canvas;
-    border-top: 2px solid CanvasText;
-    -webkit-backdrop-filter: none;
-    backdrop-filter: none;
-  }
-
-  .mobile-nav-item {
-    color: CanvasText;
-  }
-
-  .mobile-nav-item:focus-visible {
-    outline-width: 3px;
-  }
-}
-
-/* ============================================
-   Landscape Orientation Adjustments
-   ============================================ */
-
-@media (orientation: landscape) and (max-height: 500px) {
-  :root {
-    --mobile-nav-height: 3.5rem;
-  }
-
-  .mobile-nav-label {
-    display: none;
-  }
-
-  .mobile-nav-item {
-    padding: 0.25rem 0.5rem;
-  }
-}
-
-/* ============================================
-   Foldable/Dual Screen Support
-   ============================================ */
-
-@media (horizontal-viewport-segments: 2) {
-  .mobile-nav-root {
-    width: 100%;
-  }
-
-  .mobile-nav-list {
-    /* Adjust for fold in the middle */
-    padding-left: max(var(--mobile-nav-padding-x), env(fold-left, 0px));
-    padding-right: max(var(--mobile-nav-padding-x), env(fold-right, 0px));
-  }
-}
-
-/* Samsung Galaxy Fold specific */
-@media (min-width: 280px) and (max-width: 320px) {
-  .mobile-nav-list {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-}
-
-/* ============================================
-   Very Small Screens (older devices)
-   ============================================ */
-
-@media (max-width: 320px) {
-  :root {
-    --mobile-nav-height: 4rem;
-    --mobile-nav-padding-x: 0.5rem;
-  }
-
-  .mobile-nav-label {
-    font-size: 0.625rem;
-    max-width: 3rem;
-  }
-}
-
-/* ============================================
-   Print Styles
-   ============================================ */
-
-@media print {
-  .mobile-nav-root,
-  .mobile-nav-spacer {
-    display: none !important;
-  }
-}
-
-/* ============================================
-   Utility Classes
-   ============================================ */
-
-/* Hide visually but keep accessible to screen readers */
-.mobile-nav-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* Skip to content link for keyboard users */
-.mobile-nav-skip-link {
-  position: absolute;
-  top: -100%;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 100;
-  padding: 0.5rem 1rem;
-  background: var(--glass-bg-light);
-  border-radius: 0.5rem;
-  transition: top 0.2s;
-}
-
-.mobile-nav-skip-link:focus {
-  top: 0.5rem;
-}
 
+/*# sourceMappingURL=index.css.map*/