/**
 * PUBLIC CATALOG — THE CONSOLIDATED <=480px OVERRIDE BLOCK.
 *
 * TENTH AND LAST of the ten sheets, and it has to stay last: every rule here
 * exists to outrank sheets 1-9 at phone width. Read the load-order block at the
 * top of styles.css before moving a rule between sheets: the split is a
 * contiguous slice of one original file and the cascade depends on it.
 *
 * The block below was already a merge of originally-scattered @media blocks
 * (header / mobile baseline / detail card / channels card / sources card /
 * activity feed / title+desc edit), kept in the original source order so the
 * cascade inside it is unchanged. Adding a phone override for a surface whose
 * own sheet already has one? Put it in that sheet's media query first; only
 * come here when it genuinely has to beat everything else.
 */

/* ── Consolidated mobile overrides (max-width: 480px) ──
   Merged from originally-scattered @media blocks (header / mobile baseline
   / detail-card / channels-card / sources-card / activity-feed /
   detail title+desc edit). Selector order matches source-order in the
   original blocks so cascade semantics stay identical. */
@media (max-width: 480px) {
  .header {
    padding: 10px 12px;
    position: static;
  }
  .header-logo {
    font-size: 20px;
  }
  .search-box-label {
    font-size: 10px;
  }
  .nav-drawer {
    width: 92vw;
    max-width: 320px;
    left: -92vw;
  }
  .footer {
    padding: 24px 14px 32px;
  }
  .footer-mark {
    font-size: 16px;
  }
  /* Long pill text wraps clean rather than forcing horizontal overflow. */
  .catalog-pill {
    white-space: normal;
  }
  /* Modal-style category dropdown becomes uselessly small under 360 wide. */
  .adv-cat-menu {
    max-height: 60vh;
  }
  /* Apple HIG 44px tap floor on mobile. */
  .btn,
  .back-btn {
    min-height: 44px;
  }
  .breadcrumbs a {
    display: inline-block;
    min-height: 44px;
    padding: 12px 4px;
  }
  .catalog-listing-detail-card__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .catalog-listing-detail-card__actions .btn {
    flex: 1 1 auto;
    min-width: 100px;
  }
  .catalog-listing-detail-card__row {
    flex-direction: column;
  }
  /* The four `.catalog-listing-channels-card__*` phone overrides that sat here
     went with the card itself on 2026-08-10 — its renderer,
     data/catalog/listing-detail-channels.js, was deleted in ad8ee9a4 when
     price/channels/readiness moved to /admin/shop-ops. */
  .catalog-listing-sources-card__row-head {
    gap: 6px;
  }
  .catalog-listing-sources-card__link {
    max-width: 16ch;
    font-size: 11px;
  }
  .catalog-listing-sources-card__remove {
    width: 24px;
    height: 24px;
  }
  /* Mobile 412: stack actor + timestamp on a second line under the pill
     so the row never overflows. The summary stays on its own line. */
  .catalog-listing-activity-feed__row-head {
    gap: 6px;
  }
  .catalog-listing-activity-feed__when {
    margin-left: 0;
  }
  .catalog-listing-activity-feed__list {
    max-height: 360px;
  }
  /* 412-wide mobile: keep the editor inside the viewport — the title
     input already spans 100%, but the action row needs to wrap when
     buttons don't fit. flex-wrap above handles that; the box-sizing rule
     keeps padding inside the 100% width box. (`.detail-desc-edit-input`
     was here until #975 retired the description editor.) */
  .detail-title-edit-input {
    font-size: 16px; /* avoids iOS zoom-on-focus */
  }
}