/**
 * Atproo EDA AI — Responsive CSS
 * Mobile-first breakpoints, safe-area insets, reduced-motion.
 */

/* ── Desktop: sidebar visible, hide mobile chrome ── */
@media (min-width: 769px) {
  #sb-desktop      { display: flex !important; }
  .bottom-nav      { display: none !important; }
  #tb-logo-mobile  { display: none !important; }
  #tb-desktop      { display: flex !important; }
  #tb-user-chip    { display: flex !important; }
  .topbar          { padding: 11px 18px; }
  .content         { padding-bottom: 24px; }
  .page            { padding: 18px 20px; }
}

/* ── Mobile: hide desktop sidebar ── */
@media (max-width: 768px) {
  #sb-desktop { display: none !important; }

  /* Stack 2-col grids to 1 col */
  .g2 { grid-template-columns: 1fr !important; }

  /* Sub plans: 1 col on mobile */
  .sub-plans { grid-template-columns: 1fr !important; }

  /* Profile stats: wrap nicely */
  .prof-stats { gap: 14px !important; }
}

/* ── Tablet: 2-col grids stay 2-col ── */
@media (min-width: 481px) and (max-width: 768px) {
  .g2 { grid-template-columns: 1fr 1fr !important; }
}

/* ── Extra-small phones ── */
@media (max-width: 380px) {
  .auth-box    { padding: 28px 18px; }
  .auth-brand  { font-size: 26px; }
  .macros-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── iOS safe areas ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .topbar {
    padding-top: max(12px, env(safe-area-inset-top));
  }
}

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