/* ==========================================================================
   Mobile & tablet responsiveness (Plan F Workstream 7, B-06)

   Before this file the app had 5 @media rules in total, all in layout.css and
   all concerned with the shell (drawers, off-canvas nav, root font size).
   components.css (30KB), combat.css (13KB), animations.css and tokens.css had
   none at all -- so mobile_companion.js shipped mobile *behaviour* on top of a
   layout that was never made to fit a phone.

   Scope here is deliberately the two things that were measurably broken on a
   375px viewport, verified in-browser rather than guessed at:

     1. Touch targets. 39 interactive elements were under the 44x44 CSS-px
        minimum (WCAG 2.5.5 / Apple HIG), including #mobile-menu-btn at 31x36 --
        the primary navigation control on mobile.
     2. Component and combat layout. Cards, modals, tables, the combatant list
        and the sheet grid were all sized for a desktop column and had no
        small-screen treatment whatsoever.

   Loaded after components.css and combat.css so these rules win without
   needing !important, except where a desktop rule is itself !important.
   ========================================================================== */

/* ── Tablet (<= 1024px) ───────────────────────────────────────────────────
   Between the desktop rail and the phone drawer: keep the multi-column
   feel but stop panels from being squeezed below a usable width. */
@media (max-width: 1024px) {
  .v20-sheet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-cards,
  .suggestion-cards-grid {
    gap: var(--sp-2);
  }

  .modal {
    width: min(92vw, 720px);
  }
}

/* ── Phone (<= 768px) ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* --- Touch targets ---------------------------------------------------
     Anything tappable gets a 44px minimum. `min-height` rather than a fixed
     height so multi-line labels still grow, and inline-flex centring so the
     larger hit area doesn't leave the label stranded at the top. */
  .btn,
  .nav-item,
  .nav-subtab,
  .sheet-tab-btn,
  .prompt-chip,
  button,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
  }

  /* Edge-docked drawer handles sit outside the .btn system and were the last
     controls still under the minimum (22-35px wide). */
  .sidebar-expand-btn,
  #right-sidebar-toggle,
  #st-ptt-btn,
  #send-combat-chat-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Icon-only controls need width too -- these were the worst offenders
     (#mobile-menu-btn 31x36, #left-sidebar-collapse-btn 22x32). */
  .btn-icon,
  .modal-close,
  #mobile-menu-btn,
  #left-sidebar-collapse-btn,
  #right-sidebar-collapse-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* .btn-sm exists to be compact on desktop; on a phone "compact" loses to
     "reachable", so it keeps its smaller type but not its smaller box. */
  .btn-sm {
    min-height: 44px;
    padding-inline: var(--sp-3);
  }

  /* Nav rows are the primary way around the app on mobile -- give them a
     comfortable row height and left-aligned labels (centring reads oddly
     in a vertical list). */
  .nav-item {
    min-height: 48px;
    justify-content: flex-start;
  }

  /* Form controls: 16px minimum font-size, because iOS Safari auto-zooms the
     page on focus for anything smaller, which then leaves the layout
     scrolled sideways. */
  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }
  textarea,
  .v20-textarea {
    min-height: 88px;
  }

  /* --- Cards & panels -------------------------------------------------- */
  .card,
  .session-card,
  .discipline-card,
  .combat-summary-card,
  .suggestion-card {
    width: 100%;
    min-width: 0; /* let flex children actually shrink instead of overflowing */
  }

  .action-cards,
  .suggestion-cards-grid,
  .quick-prompts {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  /* --- Modals ----------------------------------------------------------
     Near-fullscreen on a phone; the body scrolls internally so the header and
     footer (with the confirm/cancel actions) stay reachable. */
  .modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-footer {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .modal-footer .btn {
    flex: 1 1 auto;
  }

  /* --- Tables ----------------------------------------------------------
     A rules/roster table cannot reflow into 375px, so it scrolls inside its
     own container rather than pushing the whole page sideways. */
  .data-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .data-table th,
  .data-table td {
    padding: var(--sp-2);
  }

  /* --- Character sheet -------------------------------------------------- */
  .v20-sheet,
  .v20-row {
    grid-template-columns: 1fr;
    display: grid;
  }
  .v20-col {
    width: 100%;
  }
  .sheet-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .sheet-tab-btn {
    flex: 0 0 auto;
  }

  /* --- Combat ----------------------------------------------------------
     The combat feed is the live play surface; the initiative row has to stay
     legible while it holds name, initiative, health and status. */
  #combat-header,
  .combat-header-actions {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .combatant-row {
    flex-wrap: wrap;
    min-height: 48px;
    row-gap: var(--sp-1);
  }
  .combatant-info {
    min-width: 0;
    flex: 1 1 auto;
  }
  .combatant-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .combat-feed-scroll {
    max-height: 45dvh;
  }

  .action-card-meta {
    flex-wrap: wrap;
    gap: var(--sp-1);
  }

  /* The turn overlay must not cover the whole screen on a small viewport --
     the player still needs to see the board underneath it. */
  #your-turn-overlay {
    max-width: 92vw;
  }

  /* --- Chat / stream ---------------------------------------------------- */
  .chat-msg-header {
    flex-wrap: wrap;
    gap: var(--sp-1);
  }
  .chat-msg-body {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* --- Toasts ----------------------------------------------------------
     Full-width above the bottom nav rather than a floating desktop pill. */
  .toast {
    left: var(--sp-2);
    right: var(--sp-2);
    width: auto;
    max-width: none;
    bottom: calc(var(--mobile-nav-h) + var(--sp-3));
  }
}

/* ── Small phones (<= 380px) ───────────────────────────────────────────── */
@media (max-width: 380px) {
  /* Reclaim horizontal space where padding costs more than it gives. */
  .card,
  .modal-body,
  .content-area {
    padding: var(--sp-2);
  }
  .btn-sm {
    padding-inline: var(--sp-2);
  }
}

/* ── Landscape phones ──────────────────────────────────────────────────
   Height, not width, is the scarce resource here: a 375x812 phone turned
   sideways has ~375px of vertical space, so tall fixed blocks must yield. */
@media (max-height: 500px) and (orientation: landscape) {
  .combat-feed-scroll {
    max-height: 40dvh;
  }
  .modal {
    max-height: 100dvh;
  }
  #your-turn-overlay {
    max-height: 80dvh;
    overflow-y: auto;
  }
}

/* ── Accessibility: reduced motion ─────────────────────────────────────
   animations.css is 8KB of unconditional motion. Honour the OS-level
   preference rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}