/* ==========================================================================
   GD Stake — Responsive Layer
   Breakpoints: <375 (small phone) · 375-599 (phone) · 600-767 (large phone /
   phablet) · 768-1023 (tablet) · 1024-1439 (laptop) · 1440+ (desktop)
   ========================================================================== */

/* ---------------------------------------------------------------------
   0. Base / small phones (<375px) — tighten spacing so nothing clips
   --------------------------------------------------------------------- */
@media (max-width: 374px) {
  body {
    font-size: 14px;
  }
  .app-main {
    padding: 14px 14px 6px;
  }
  .gd-card {
    padding: 14px;
  }
  .gd-topbar {
    padding: 14px 14px 4px;
  }
  .gd-hero-card {
    padding: 16px 18px;
  }
  h1 {
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------------------
   1. Large phones / phablets (600px+) — a little breathing room
   --------------------------------------------------------------------- */
@media (min-width: 600px) {
  .app-shell {
    max-width: 460px;
    margin: 24px auto;
    border-radius: 32px;
    border: 1px solid var(--gd-border);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
    min-height: calc(100vh - 48px);
  }
  .gd-bottom-nav {
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
  }
  .starfield {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   2. Tablets (768px+) — reflow stat grids to 2 columns, widen shell
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  .app-shell {
    max-width: 620px;
  }

  /* generic responsive grid helper: single column on phone, 2-up on tablet */
  .gd-grid-2up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .gd-grid-2up > * {
    margin-bottom: 0 !important;
  }

  .app-main {
    padding: 22px 26px 10px;
  }
}

/* ---------------------------------------------------------------------
   3. Laptop / small desktop (1024px+) — persistent sidebar, wide canvas
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  body {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    padding: 0;
    background:
      radial-gradient(
        ellipse at 15% 0%,
        rgba(59, 108, 246, 0.1),
        transparent 55%
      ),
      radial-gradient(
        ellipse at 90% 60%,
        rgba(106, 61, 240, 0.1),
        transparent 55%
      ),
      var(--gd-black);
  }

  /* Shell becomes a wide "web app" canvas instead of a phone frame */
  .app-shell {
    max-width: 1180px;
    width: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    min-height: 100vh;
    display: flex;
    padding-bottom: 0 !important;
  }

  .starfield {
    display: none;
  }

  /* Drawer becomes a permanent, non-overlay left rail */
  .gd-drawer-overlay {
    display: none !important;
  }
  .gd-drawer {
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh;
    box-shadow: none;
    border-right: 1px solid var(--gd-border);
    flex-shrink: 0;
  }
  [data-drawer-open] {
    display: none;
  }

  /* Bottom tab bar is replaced by the sidebar on desktop */
  .gd-bottom-nav {
    display: none !important;
  }
  .app-shell {
    padding-bottom: 0;
  }

  .gd-page-content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 640px;
    margin: 0 auto;
  }

  .gd-topbar {
    padding: 28px 0 10px;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
  }
  .app-main {
    padding: 10px 0 40px;
    max-width: 640px;
    margin: 0 auto;
  }

  /* 3-up grids for dashboards on wide screens */
  .gd-grid-3up {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .gd-grid-3up > * {
    margin-bottom: 0 !important;
  }
}

/* ---------------------------------------------------------------------
   4. Desktop (1440px+) — extra room, larger type scale
   --------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .app-shell {
    max-width: 1320px;
  }
  .gd-page-content,
  .gd-topbar,
  .app-main {
    max-width: 760px;
  }
  body {
    font-size: 15.5px;
  }
}

/* ---------------------------------------------------------------------
   5. Landscape phones — avoid excessive vertical scroll on short viewports
   --------------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) and (max-width: 1023px) {
  .app-shell {
    margin: 0 auto;
    border-radius: 0;
  }
  :root {
    --gd-nav-h: 62px;
  }
  .gd-nav-item span {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   6. Accessibility
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
.gd-nav-item:focus-visible {
  outline: 2px solid var(--gd-cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-contrast: more) {
  :root {
    --gd-border: rgba(255, 255, 255, 0.25);
    --gd-text-secondary: #c3cadd;
  }
}