/* ═══════════════════════════════════════════════════════════════
   CANOPY — Shared Mobile Stylesheet
   Cross-page responsive rules, ported from the design handoff's
   `/* mobile pass */` blocks (Feed.dc.html, Settings.dc.html,
   Competitors.dc.html all ship the identical block — reproduced
   here once as semantic, reusable classes instead of the handoff's
   attribute-value selectors, which target inline styles that don't
   exist in production markup).

   Load this AFTER canopy-theme.css and canopy.css (Tailwind) on
   every app page, e.g.:
     <link rel="stylesheet" href="/canopy.css">
     <link rel="stylesheet" href="/canopy-theme.css">
     <link rel="stylesheet" href="/canopy-mobile.css">

   This file only holds rules shared by 2+ pages. Page-specific mobile
   quirks (landing hero scaling, pricing matrix, etc.) stay in that
   page's own <style> block. See design-export/learnings-foundations.md
   for the full usage guide and class reference.
   ═══════════════════════════════════════════════════════════════ */

/* ── ≤900px: gutters + rail/two-col stacking ── */
@media (max-width: 900px) {
  /* Page gutters — every app page's <main> gets tighter side padding. */
  main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Rail layouts (Settings 200px rail, API Docs TOC): [rail, 1fr] grid → stacked column.
     Apply to the grid container that currently has grid-template-columns:200px 1fr. */
  .cnp-rail-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
  }
  /* The sticky rail nav itself: release sticky positioning, lay out as a wrapped row
     (becomes a horizontal chip/tab strip above the content instead of a side rail). */
  .cnp-rail-nav {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  /* Two-col splits (Feed sidebar+feed, WinLoss form+list): grid → single column. */
  .cnp-split-layout {
    grid-template-columns: 1fr !important;
  }
  /* On splits where content should render above a secondary sidebar (e.g. Feed),
     mark the content column primary and the sidebar secondary. */
  .cnp-split-primary { order: 1; }
  .cnp-split-secondary { order: 2; }
}

/* ── ≤720px: 100vh master-detail pages release their height lock ── */
@media (max-width: 720px) {
  /* The outer height:100vh; overflow:hidden shell (Competitors, Battlecards). */
  .cnp-master-detail {
    height: auto !important;
    overflow: visible !important;
  }
  /* The flex:1; display:flex row inside it (sidebar + detail pane). */
  .cnp-master-detail-body {
    flex-direction: column !important;
  }
  /* The sidebar/list pane: goes full-width, capped height, scrolls internally. */
  .cnp-master-detail-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 320px !important;
    border-right: none !important;
    border-bottom: 1px solid oklch(0.24 0.025 163 / 0.3);
  }
}

/* ── ≤600px: single-column collapse + text/overflow relaxations ── */
@media (max-width: 600px) {
  /* Any grid using repeat(auto-fit/auto-fill, minmax(...)) → one column.
     Add this class alongside the grid utility/style on the container. */
  .cnp-auto-grid {
    grid-template-columns: 1fr !important;
  }

  main {
    padding-top: 24px !important;
  }

  /* Page title collapses from 29px (see .page-title in canopy-theme.css) to 24px. */
  main h1,
  main .page-title {
    font-size: 24px !important;
  }

  /* Release nowrap/ellipsis truncation so text wraps instead of clipping —
     covers both inline-style truncation (ported designs) and Tailwind's
     .truncate / .whitespace-nowrap utilities (production markup). */
  main [style*="white-space:nowrap"],
  main .whitespace-nowrap,
  main .divider {
    white-space: normal !important;
  }
  main [style*="text-overflow:ellipsis"],
  main .truncate {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  main *,
  main {
    min-width: 0 !important;
  }
  main h1, main h2, main h3, main p, main span, main a, main li, main td, main th {
    overflow-wrap: break-word;
  }
}

/* ── Tables (Compare, Admin, Products, pricing matrix): horizontal scroll
   instead of squeezing columns or wrapping cell text. Wrap the <table> in
   a <div class="cnp-table-wrap">, or use Tailwind's overflow-x-auto directly
   — both work identically; this class exists for naming consistency with
   the other cnp- hooks above. ── */
.cnp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}