/* ============================================================
   mobile-overrides.css — tablet/phone optimizations for
   the Amos Project standalone. Layered on top of library*.css,
   shared.css, amos.css and the inline <style id="mobile-chrome">
   block in index.html. Loaded last so it wins the cascade.
   ============================================================ */

/* Prevent accidental horizontal bleed from off-canvas chrome without
   creating a scroll container on <body> (which would break window.scroll). */
html { overflow-x: clip; }

/* Flex children of .app (.amos-main, .amos-coll, .amos-body) default to
   min-width: auto which resolves to min-content — when inner content has an
   intrinsic width larger than the viewport (e.g. long prose paragraphs or
   flex rows), the container refuses to shrink and pushes past the viewport.
   Force min-width: 0 so these views respect the parent's actual width. */
.app > .amos-main,
.app > .amos-coll,
.app > .amos-body,
.app > .caius-coll { min-width: 0; }

/* -- Tablet breakpoint (<=1024, above drawer breakpoint 820) --- */
@media (max-width: 1024px) {
  /* Cap wide language grids in commission modals */
  .bcm-lang-grid { grid-template-columns: repeat(4, 1fr); }
  .cov-lang-menu .clm-grid { grid-template-columns: repeat(3, 1fr); }
}

/* -- Narrow tablet / large phone (<=820, drawer mode) ---------- */
@media (max-width: 820px) {
  /* Library main grid: make cards breathe, respect 16px side padding */
  .amos-grid { padding: 16px 16px 32px; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .amos-grid-group .amos-grid { padding: 0 16px 12px; }
  .amos-list-group .amos-list { margin: 0 16px; }
  .amos-grid-group .amos-rail-head,
  .amos-list-group .amos-rail-head { padding: 14px 16px 10px; }

  /* "Three ways to read" product strip and partner card: stack */
  .wmb-v2-consumer { grid-template-columns: 1fr; gap: 12px; }
  .wmb-v2-partner { grid-template-columns: 1fr; gap: 12px; }
  .wmb-v2-partner .pa-letter { align-self: start; }

  /* Studies rail head: let the 4-child flex row wrap */
  .amos-rail-head { flex-wrap: wrap; gap: 6px 10px; }
  .amos-rail-head > * { min-width: 0; }

  /* Library masthead stats row */
  .wlm-grid { grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }

  /* Commission modals: tighten grids (unscoped so both Book & Pericope use it) */
  .book-commission .bcm-scope { grid-template-columns: repeat(2, 1fr); padding: 14px 16px; }
  .bcm-mode-grid { grid-template-columns: repeat(2, 1fr); }
  .bcm-lang-grid { grid-template-columns: repeat(3, 1fr); }

  /* Coverage language menu: 3 cols max */
  .cov-lang-menu .clm-grid { grid-template-columns: repeat(3, 1fr); }

  /* Reader drawer: go full-width at tablet */
  .amos-drawer { width: 100vw !important; right: -100vw; }

  /* Tap-target size for icon-only buttons */
  .amos-icon-btn, .amos-pill, .amos-user-btn { min-height: 36px; }

  /* Topbar overflow guard (audit rank 4): let the breadcrumb absorb all the
     shrink while the right-hand cluster (wallet + user avatar) never shrinks,
     so the "JR" avatar can't be pushed past the viewport edge. */
  .amos-topbar { min-width: 0; }
  .amos-topbar-right { flex-shrink: 0; }
  .amos-topbar .amos-crumbs { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .amos-topbar .amos-crumbs .here { max-width: 58vw; overflow: hidden; text-overflow: ellipsis; }

  /* Collection / Teachings page hero: stack tag row and CTA row */
  .coll-hero-top { flex-wrap: wrap; gap: 14px; align-items: flex-start; }
  .coll-hero-tag { flex-wrap: wrap; }
  .coll-hero-ctas { width: 100%; }
  .coll-hero-ctas .coll-article-cta { flex: 1 1 auto; justify-content: center; text-align: center; }
  /* Toolbar (filter tabs / chip bar) side padding */
  .amos-toolbar { padding: 12px 16px; }
}

/* -- Phone (<=560) --------------------------------------------- */
@media (max-width: 560px) {
  /* Hide secondary topbar controls to make room for wallet + user */
  .amos-topbar-right .amos-sc-pair,
  .amos-topbar-right .amos-pill.lang,
  .amos-topbar-right .topbar-sep { display: none !important; }
  .amos-topbar-right { gap: 4px !important; }
  .amos-topbar .amos-pill.wallet { padding: 4px 8px; font-size: 12px; }
  .amos-topbar .amos-pill.wallet .wallet-label { display: none; }

  /* Typography compact */
  .wmb-title, .wlm-title, .coll-hero-title { font-size: clamp(24px, 7vw, 34px) !important; line-height: 1.15 !important; }
  .coll-hero-tagline { font-size: 15px !important; line-height: 1.4 !important; }
  .coll-hero-sub     { font-size: 13.5px !important; }

  /* Library main grid: single column with comfortable card height */
  .amos-grid { grid-template-columns: 1fr; padding: 12px 12px 28px; gap: 10px; }
  .amos-grid-group .amos-grid { padding: 0 12px 10px; }
  .amos-list-group .amos-list { margin: 0 12px; }
  .amos-grid-group .amos-rail-head,
  .amos-list-group .amos-rail-head { padding: 14px 12px 8px; }

  /* Search card (audit rank 4): the base layout is display:grid, so the
     authored `flex:1` on the input was inert and the field collapsed to ~29px
     ("Ent"). Switch the container to flex here so the input actually fills the
     row, hide the "Start typing" mode pill, and use 16px to stop iOS zoom. */
  .amos-ref-input {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 14px 0 !important;
    padding: 12px 12px 12px 14px !important;
  }
  .amos-ref-input .ri-mode { display: none !important; }
  .amos-ref-input input {
    font-size: 16px !important;   /* >=16px prevents iOS focus-zoom */
    min-width: 0; flex: 1 1 120px; width: auto;
  }
  .amos-ref-input .ri-kbd { display: none !important; }
  .amos-ref-input .ri-submit { flex: 0 0 auto; padding: 9px 14px !important; }

  /* Commission modals: stack label-above-content rows, aggressive grid collapse.
     These rules are unscoped so Book and Pericope commission modals both shrink. */
  .amos-modal-backdrop { padding: 8px !important; }
  .amos-modal { max-width: 100% !important; margin: 0 !important; border-radius: 10px !important; max-height: calc(100vh - 16px) !important; }
  .amos-modal-head { padding: 14px 16px 12px !important; }
  .bcm-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px 16px !important;
  }
  .bcm-row-lbl { padding-top: 0 !important; }
  .book-commission .bcm-scope { grid-template-columns: repeat(2, 1fr) !important; padding: 12px 16px !important; }
  .bcm-mode-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .bcm-lang-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .bcm-lang, .bcm-mode { min-width: 0 !important; }

  /* Wallet balance banner in modals */
  .bcm-panel, .bcm-footer, .bcm-quote { padding: 10px 14px !important; }

  /* AboutView 3-pillar grid -> 1 column */
  .about-pillars { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Coverage language menu: 2 cols */
  .cov-lang-menu .clm-grid { grid-template-columns: repeat(2, 1fr); }

  /* Collection / Teachings page: coll-hero + body fit viewport */
  .coll-hero { padding: 18px 14px 22px !important; }
  .coll-hero-top { flex-direction: column; align-items: stretch; gap: 10px; }
  .coll-hero-tag { flex-wrap: wrap; line-height: 1.4; }
  .coll-hero-tag .coll-subtype { white-space: normal; }
  .coll-hero-ctas { flex-direction: column; width: 100%; gap: 8px; }
  .coll-hero-ctas .coll-article-cta { width: 100%; justify-content: center; padding: 10px 14px; }
  .coll-hero-sub { max-width: 100% !important; }
  /* .coll-stats is flex; let stat cells flex-shrink and remove the 130px min-width */
  .coll-stats { flex-wrap: wrap; width: 100% !important; }
  .coll-stat { min-width: 0 !important; flex: 1 1 45%; padding: 10px 14px !important; }
  .coll-editorial .coll-ed-line { grid-template-columns: auto 1fr; }

  .coll-body  { padding: 18px 14px !important; }
  .coll-body-head { flex-wrap: wrap; gap: 6px 12px; }

  /* AmosTeachingsView toolbar — filter tabs + chip list must wrap/scroll cleanly */
  .amos-toolbar { padding: 10px 14px !important; }
  .amos-toolbar-inner { flex-wrap: wrap; row-gap: 8px; }
  .amos-tchip { font-size: 12.5px; padding: 5px 10px; }

  /* Teachings / article cards feed */
  .amos-body { padding: 14px !important; }
  .amos-card { padding: 14px !important; }
  .amos-card-title { font-size: 16px !important; line-height: 1.25 !important; }
  .amos-card-abs { font-size: 13px !important; }

  /* Reader drawer head: stack title + actions */
  .amos-drawer-head { flex-wrap: wrap; gap: 8px; }

  /* Author view + teachings grid: single column */
  .authors-grid, .teachings-grid, .amos-coll .teachings-grid { grid-template-columns: 1fr !important; }

  /* Footer compacted */
  .wmm-footer, .amos-footer { padding: 18px 14px !important; font-size: 12px !important; }
}

/* -- Very narrow (<=380) small phones --------------------------- */
@media (max-width: 380px) {
  /* Shave more off the topbar so the avatar never clips */
  .amos-topbar { padding: 8px 10px !important; gap: 6px !important; }
  .amos-topbar .amos-crumbs { font-size: 12.5px; }
  .amos-topbar .amos-crumbs .here { max-width: 42vw; }
  .amos-topbar-right .amos-pill.wallet { font-size: 11.5px; padding: 3px 7px; }
  .amos-userpill-wrap .amos-pill.avatar { padding: 2px 4px; }
  .amos-userpill-wrap .amos-pill.avatar .chev { display: none; }

  /* Commission modal: go single-column on mode picker if it's still crowded */
  .bcm-mode-grid { grid-template-columns: 1fr !important; }
}

/* ── Touch-target sizes (responsive QA punch list, 2026-07-06) ──────────── */
@media (max-width: 820px) {
  /* Reader chapter chips: 28px → comfortable thumb size */
  .ddc-chipnum { min-width: 40px; min-height: 40px; }
  /* Study sheet prev/next pericope buttons */
  .vsv-pnbtn { min-width: 38px; min-height: 38px; }
  /* Study-sheet topbar: let the chip row breathe on narrow phones */
  .vsv-topbar { flex-wrap: wrap; row-gap: 6px; }
}
