/* ---------------------------------------------------------------------------
 * Phone/tablet layout for the studio.
 *
 * Every screen keeps the same features it has on desktop — nothing is hidden.
 * The fixed side panels become stacked blocks, dense rows become cards, and
 * anything wide gets its own horizontal scroller instead of squeezing the page.
 * ------------------------------------------------------------------------- */

/* Never let a wide element force the whole page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas { max-width: 100%; }

@media (max-width: 900px) {

  /* --- shells: side panel drops under the content ------------------------ */
  .wrap { grid-template-columns: 1fr !important; padding: 14px !important; gap: 14px !important; }
  .gwrap { flex-direction: column !important; }
  .albums {
    width: auto !important; padding: 14px !important;
    display: flex !important; gap: 8px; overflow-x: auto; align-items: center;
  }
  .albums h2 { display: none; }
  .albums .album-item { flex-shrink: 0; margin: 0; white-space: nowrap; }
  .albums .newalbum { flex-shrink: 0; width: auto !important; margin: 0 !important; padding: 10px 16px; }
  .gmain { padding: 16px 14px !important; }
  .sidebar { position: static !important; }

  /* --- headers ----------------------------------------------------------- */
  .top, .head, .ghead, .top-nav {
    flex-direction: column; align-items: stretch !important; gap: 10px;
  }
  .top h1, .head h1, .ghead h1, .top-nav h1 { font-size: 22px !important; }
  .actions, .actions-row, .dz-btns, .nav, .acts {
    flex-wrap: wrap; width: 100%;
  }
  .actions .btn, .actions-row .btn, .nav .btn { flex: 1 1 auto; justify-content: center; }

  /* --- tab strips scroll instead of wrapping into a wall ----------------- */
  .tabs, .tab-nav, .tasks, .fnav, .stepper {
    overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar, .tab-nav::-webkit-scrollbar, .stepper::-webkit-scrollbar { display: none; }
  .tab, .tab-btn, .st { flex-shrink: 0; white-space: nowrap; }
  .stepper .st .lbl, .st .lbl { font-size: 12px; }

  /* --- tables become readable cards -------------------------------------- */
  .table-wrap, .table-scroll { overflow-x: auto; }
  .table { min-width: 620px; }

  /* --- forms and grids collapse to one column ---------------------------- */
  .row, .row2, .grid-2, .form-grid { grid-template-columns: 1fr !important; }
  .card-stats { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; }
  .card { padding: 18px 15px !important; }

  /* Inputs at 16px stop iOS from zooming the page on focus. */
  input, select, textarea { font-size: 16px !important; }

  /* --- modals / sheets sit as bottom sheets ------------------------------ */
  .modal, .inv, .pick-sheet, .dlg {
    max-width: 100% !important; width: 100% !important;
    max-height: 92vh; border-radius: 18px 18px 0 0 !important;
  }
  .modal-overlay, .inv-back, .pick-back, .dlg-back { align-items: flex-end !important; padding: 0 !important; }

  /* --- room for the fixed bottom nav ------------------------------------- */
  .mobile-nav { display: flex !important; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
}

@media (max-width: 560px) {
  .card-stats { grid-template-columns: 1fr 1fr !important; }
  .hero h1 { font-size: 24px !important; }
  .hero { padding: 26px 16px !important; }
  .btn { padding: 11px 16px !important; font-size: 14px !important; }
  .finish-bar { flex-direction: column; align-items: stretch; gap: 9px; }
  .finish-bar .btn-finish { width: 100%; }
  /* A thumb needs a real target. */
  .tile .mark { width: 34px; height: 34px; font-size: 19px; }
  .lb .nav { width: 44px; height: 44px; font-size: 22px; }
  .lb .prev { inset-inline-start: 8px; } .lb .next { inset-inline-end: 8px; }
}

/* The bottom nav is a phone affordance only. */
.mobile-nav { display: none; }
@media (max-width: 900px) {
  .mobile-nav {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
    background: var(--card, #12102b); border-top: 1px solid var(--line, rgba(255,255,255,.09));
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .mobile-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10.5px; font-weight: 800; text-decoration: none;
    color: var(--muted, #8b8ba7); padding: 4px 8px; border-radius: 10px;
    flex-shrink: 0; min-width: 62px; text-align: center;
  }
  .mobile-nav a .lbl { white-space: nowrap; }
  .mobile-nav a .em svg { width: 19px; height: 19px; display: block; }
  /* Eight destinations don't fit a phone width, so the bar scrolls. */
  .mobile-nav.many { justify-content: flex-start; overflow-x: auto; gap: 2px; }
  .mobile-nav.many::-webkit-scrollbar { display: none; }
  .mobile-nav a.active { color: var(--purple, #6d5ff5); }
  .mobile-nav .em { font-size: 18px; }
}