/* ── Mobile breakpoints ── */

@media (max-width: 768px) {
  /* Main content */
  .main { padding-bottom: 110px; }

  /* Hide decorative tires on mobile */
  .tire { display: none; }

  /* Compact FAB */
  .guide-fab {
    bottom: 84px;
    right: 10px;
    padding: 10px 14px;
    font-size: 12px;
    gap: 6px;
  }
  .guide-fab svg { width: 16px; height: 16px; }

  /* Footer clears fixed nav-bar */
  .app-footer { padding-bottom: 90px; }
}

@media (max-width: 640px) {
  .main { padding-bottom: 100px; }
}

@media (max-width: 560px) {
  /* Hide header subtitle on narrow screens to keep header compact */
  .header-subtitle { display: none; }
  .header-title { font-size: 13px; }
}

@media (max-width: 400px) {
  .card-title  { font-size: 18px; }
  .btn         { font-size: 14px; padding: 12px 8px; }
  .zone-label  { font-size: 14px; }
  .screen-card { padding: 28px 18px; }

  /* Compact top banner */
  .top-banner p { font-size: 11px; }

  /* FAB: icon-only on very small screens (font-size:0 hides text node) */
  .guide-fab { padding: 10px 12px; font-size: 0; gap: 0; }
  .guide-fab svg { width: 18px; height: 18px; }
}

/* ── Desktop (≥1024px) — Two-pane layout ── */
@media (min-width: 1024px) {

  /* 1. Dark navy page background — form floats as a white card */
  body { background: #0d1f3c; }
  .app { background: transparent; }

  /* 2. Header — full-width, constrain inner content */
  .header-inner { max-width: 1320px; }

  /* 3. App body: sidebar + content, centered, max 1320px */
  .app-body {
    max-width: 1320px;
    margin: 20px auto 0;
    padding: 0 20px;
    gap: 16px;
    align-items: flex-start;
  }

  /* 4. Step navigator sidebar */
  .step-nav {
    display: flex;
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    box-shadow: 0 4px 28px rgba(0,0,0,0.22);
  }

  /* 5. Content column */
  .app-body-main {
    background: white;
    border-radius: 12px 12px 0 0;
    overflow: clip; /* clips corners without creating scroll container */
    box-shadow: 0 4px 28px rgba(0,0,0,0.22);
  }

  /* 6. Progress bar — full width of content column, no extra padding needed */
  .progress-wrap {
    padding-left: 24px;
    padding-right: 24px;
    top: 0; /* sticky inside app-body-main — sits at top of content card */
    border-radius: 0;
  }
  /* Hide dots — sidebar replaces them */
  .step-dots { display: none; }

  /* 7. Main — fill content column */
  .main {
    max-width: none;
    background: transparent;
    box-shadow: none;
    padding: 20px 24px 140px;
    margin: 0;
    width: 100%;
  }

  /* 8. Branch banner */
  .branch-banner { padding: 14px 28px; gap: 24px; }

  /* 9. Two-column card body: instructions left, upload right */
  .card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    padding: 24px 28px;
  }
  .card-col-upload {
    position: sticky;
    top: 80px;
  }
  /* File list stays in upload column (not a separate grid row) */
  .file-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 10px;
  }

  /* 10. Intro instructions — 2-column grid */
  .intro-list { grid-template-columns: repeat(2, 1fr); }

  /* 11. Upload zone — more breathing room */
  .upload-zone { padding: 32px 20px; }

  /* 12. Screen cards */
  .screen-card { max-width: 500px; }

  /* 13. Nav bar — offset left to skip sidebar */
  .nav-bar {
    left: 0;
    right: 0;
    max-width: none;
    transform: none;
    padding: 10px 0;
  }
  .nav-bar-inner {
    max-width: 1320px;
    margin: 0 auto;
    /* left padding = page padding(20) + sidebar(240) + gap(16) + page padding(20) = 296px */
    padding-left: 296px;
    padding-right: 20px;
  }

  /* 14. Footer */
  .footer-inner { max-width: 1320px; }

  /* 15. FAB — right-aligned to content column edge */
  .guide-fab {
    right: calc(max((100vw - 1320px) / 2, 0px) + 20px);
    bottom: 90px;
  }

  /* 16. Chip layout — horizontal in upload column */
  .file-chip {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }
}