/* Responsive overrides — loaded AFTER page CSS in every template head
 * (see _head.html). Kept in one file so we can audit touch-target and
 * breakpoint behavior in one place rather than hunting through every
 * page stylesheet.
 *
 * Breakpoint strategy:
 *   ≤ 600 px  — phones. Priority: 44 px tap targets, topbar nav scrollable,
 *               dialogs full-width, readable body text ≥ 14 px.
 *   ≤ 400 px  — small phones. Grid single-column if the page uses one.
 *   768–1100  — tablets. Minor adjustments where the 700 px snap from desktop
 *               → mobile throws away too much space.
 *
 * Non-goals: redesigning any page. Everything here is layout-preserving;
 * it just widens the viable viewport range.
 */

/* ================================================================= */
/* ≤ 600 px — phone baseline                                          */
/* ================================================================= */
@media (max-width: 600px) {

  /* --- Topbar nav: scroll horizontally instead of wrapping. The admin-
   * styled topbar (`.a-nav`) packs 7–10 links; wrapping makes the header
   * ~3 lines tall on a phone. Horizontal scroll keeps it one line and
   * the user can swipe to reach later links. */
  .a-topbar-inner {
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .a-nav {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    white-space: nowrap;
    padding-bottom: 4px;
  }
  .a-nav::-webkit-scrollbar { display: none; }
  .a-nav a {
    flex: 0 0 auto;
    padding: 10px 14px;   /* 40 px tall × variable width ≥ 44 when text is 2+ chars */
    font-size: 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* --- Buttons: ensure every clickable control is at least 44 × 44 px.
   * We target the admin-style classes used across every second-screen
   * page (.a-btn, .a-btn-sm) and the gallery/focus controls. */
  .a-btn, .a-btn-sm {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
  }
  .a-btn-sm { padding: 8px 12px; font-size: 13px; }
  .a-input, .a-form-select {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;       /* ≥ 16 px prevents iOS Safari auto-zoom on focus */
  }

  /* --- Cards: tighter padding so the usable content area doesn't drop to
   * ~60 % of the viewport on a 360-px phone. */
  .a-card { padding: 14px 14px; }
  .a-main { padding: 12px; gap: 12px; }
  .a-card-title { font-size: 15px; margin-bottom: 10px; }

  /* --- Dialogs: full-width with safe inset so the OS nav doesn't overlap.
   * Native <dialog> defaults to min-content width which looks broken on
   * phones. */
  .a-dialog, .g-dialog {
    min-width: 0;
    width: min(100vw, 480px);
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    border-radius: 12px 12px 0 0;
    padding: 16px 16px env(safe-area-inset-bottom, 16px);
    position: fixed;
    inset: auto 0 0 0;     /* bottom sheet on phones */
  }
  .a-dialog-actions, .g-dialog-actions {
    gap: 10px;
    justify-content: stretch;
  }
  .a-dialog-actions .a-btn,
  .g-dialog-actions button {
    flex: 1 1 0;
    min-height: 44px;
  }

  /* --- Gallery topbar: wrap + scroll the filter row so it doesn't push
   * the URL-submit out of sight. */
  .g-topbar-inner { padding: 10px 12px; }
  .g-topbar-inner .g-admin-link {
    min-height: 44px;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
  }
  .g-url-btn, .g-search, .g-url-input {
    min-height: 44px;
    font-size: 16px;
  }
  .g-select, .g-date-input {
    min-height: 40px;
    font-size: 14px;
  }

  /* Focus overlay on a phone: the close button must be a real tap target.
   * Previously 36 × 36, bumped to 44. */
  .g-close {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }

  /* Focus meta: tighter padding so more transcript fits on-screen,
   * and a higher ceiling so you can actually read. */
  .g-focus-meta {
    max-height: 50vh;
    padding: 10px 14px 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* Focus action buttons — were 5 × 10 px padding (too small). */
  .g-act-btn {
    min-height: 40px;
    padding: 9px 14px;
    font-size: 13px;
  }

  /* --- Home dashboard: give each card breathing room. */
  .hm-totals-row .a-stat { flex: 1 1 30%; min-width: 0; }
  .hm-activity-row {
    grid-template-columns: 56px 1fr auto;
    padding: 10px;
    gap: 10px;
  }
  .hm-activity-poster { width: 56px; height: 32px; }

  /* --- Creator page: concept pills don't need a full 44 px row, but
   * should be clearly finger-pressable. */
  .cr-concept-pill { padding: 9px 14px; font-size: 14px; }
  .cr-highlight { padding: 14px; }
  .cr-videos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .cr-video-body { padding: 8px 10px 10px; }

  /* --- Bookmarks / trails rows: thumb-friendly height. */
  .bm-row { grid-template-columns: 96px 1fr auto; gap: 10px; padding: 10px; }
  .bm-poster { width: 96px; height: 54px; }
  .tr-row { padding: 12px 14px; }

  /* --- Tables shouldn't blow out the viewport. */
  .a-table-wrap { margin: 0 -14px; }

  /* --- Search form stacks vertically so the 16-char "Search" input has room. */
  .sr-form {
    flex-direction: column;
    gap: 10px;
  }
  .sr-form .a-input, .sr-form .a-btn, .sr-form .a-form-select {
    width: 100%;
  }
}

/* ================================================================= */
/* ≤ 400 px — tiny phones                                             */
/* ================================================================= */
@media (max-width: 400px) {
  /* Gallery grid: single column below 400 px. 9:16 tiles at half-width
   * are barely interpretable — give them full width. */
  .g-grid { grid-template-columns: 1fr; gap: 8px; padding: 8px; }

  /* Home stats: three up is too cramped — stack to two columns. */
  .hm-totals-row { flex-wrap: wrap; }
  .hm-totals-row .a-stat { flex: 1 1 calc(50% - 5px); }
  .hm-totals-row .a-stat:first-child { flex-basis: 100%; }

  /* Creator video grid: single column so titles/posters are readable. */
  .cr-videos { grid-template-columns: 1fr; }
  .cr-stats { justify-content: center; }
}

/* ================================================================= */
/* 768–1100 px — tablets                                              */
/* ================================================================= */
@media (min-width: 768px) and (max-width: 1100px) {
  /* Home dashboard: keep the two-pane layout instead of snapping to
   * one-column at 900 px — there's plenty of room on a tablet. */
  .hm-grid {
    grid-template-columns: 3fr 2fr;
    gap: 14px;
  }

  /* Admin 2-col grid is already handled; nudge stats to 4-up instead of
   * 3-up so a tablet shows a richer row. */
  .a-stats-grid { grid-template-columns: repeat(4, 1fr); }

  /* Creator page: let the stats row sit beside the header rather than
   * stacking. */
  .cr-header { grid-template-columns: 1fr auto; }

  /* Gallery focus overlay: keep the drawer slide-in (inherits from
   * the ≤900 px rule in gallery.css). No override needed here.
   * Intentionally left blank; revisit if users report friction. */
}

/* ================================================================= */
/* Safe-area insets for notched phones                                */
/* ================================================================= */
@supports (padding: env(safe-area-inset-top)) {
  .a-topbar, .g-topbar {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .a-main, .g-grid {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
}