/**
 * PUBLIC CATALOG — THE LATE NARROW-VIEWPORT PASS and the surfaces that only
 * exist there: the <=680px block that trims the shell, grids, detail page and
 * search panel together; the queue page's table; the touch tap-target floor
 * under `@media (hover: none)`; the .table-scroll wrapper; and the 380px cap
 * that kills residual horizontal overflow.
 *
 * EIGHTH of ten sheets — after styles-search.css, before
 * styles-listing-cards.css. 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.
 *
 * This is NOT "the responsive sheet" — every surface keeps its own media
 * queries with itself in sheets 1-7, exactly as the original had them. What is
 * here is the late catch-all pass that has to outrank them, plus the <=480px
 * block in styles-mobile.css which in turn outranks this one.
 */

/* ── Final mobile cleanup ── */
.catalog-intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.catalog-intro .breadcrumbs,
.catalog-intro .back-btn {
  margin-bottom: 0;
}

@media (max-width: 680px) {
  .catalog-intro {
    gap: 8px;
    margin-bottom: 10px;
  }
  .catalog-page-summary .catalog-pill {
    white-space: normal;
    line-height: 1.35;
  }
  .cat-card-body {
    padding: 15px;
    gap: 8px;
  }
  .cat-card-head {
    gap: 10px;
  }
  .cat-card-name {
    font-size: 16px;
  }
  .cat-card-desc {
    font-size: 12px;
    line-height: 1.4;
    -webkit-line-clamp: 1;
  }
  .cat-card-count {
    min-height: 26px;
    padding: 3px 9px;
  }
  .cat-card-kicker,
  .cat-card-link {
    display: none;
  }
  .cat-card-subcats {
    gap: 6px;
  }
  .cat-card-subcat {
    min-height: 26px;
    padding: 0 9px;
    font-size: 11px;
  }
  .cat-card-subcat:not(.cat-card-subcat-more):nth-child(n+3) {
    display: none;
  }
  .file-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .file-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
  }
  .file-thumb {
    aspect-ratio: auto;
    min-height: 112px;
    height: 100%;
  }
  .file-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 12px;
  }
  .file-title {
    margin-bottom: 0;
    -webkit-line-clamp: 3;
  }
  .file-meta {
    padding-top: 0;
    border-top: none;
    gap: 10px;
    flex-wrap: wrap;
  }
  .detail-layout {
    gap: 10px;
  }
  .detail-page-summary .detail-summary-secondary {
    display: none;
  }
  .detail-actions {
    gap: 8px;
  }
  .detail-action-primary {
    order: 0;
  }
  .detail-action-secondary {
    order: 1;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    justify-content: flex-start;
    color: var(--accent);
  }
  .detail-action-secondary:hover {
    background: none;
    border: none;
    color: var(--accent);
  }
  .detail-action-secondary svg {
    width: 14px;
    height: 14px;
  }
  .similar-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    border-radius: 18px;
  }
  .similar-card-thumb {
    aspect-ratio: auto;
    min-height: 96px;
    height: 100%;
  }
  .similar-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px;
  }
  .similar-card-cat {
    display: none;
  }
  .request-form {
    padding: 18px 16px;
  }
  .form-row {
    flex-direction: column;
  }
  .adv-search-page {
    padding: 16px 12px 22px;
  }
  .adv-search-panel {
    padding: 14px 12px;
    border-radius: 18px;
  }
  .adv-search-row {
    gap: 10px;
    margin-bottom: 10px;
  }
  .adv-search-actions {
    gap: 10px;
  }
  .adv-search-spacer {
    display: none;
  }
  .adv-ai-toggle,
  .adv-search-btn,
  .adv-clear-btn,
  .adv-search-link {
    width: 100%;
    justify-content: center;
  }
  .adv-results-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .adv-active-filters {
    gap: 6px;
  }
  .adv-filter-chip,
  .adv-filter-clear-all,
  .adv-preset {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
  }
  /* The /search page's own header is the only thing between a phone and the
     search box, so it gets out of the way: the title stays, the explanatory
     note does not repeat what the controls under it already say. Measured
     2026-09-17 at 390x844 — this is ~140px of the distance to the first
     result. */
  .adv-search-shell .catalog-page-note {
    display: none;
  }
  .adv-search-shell .section-title {
    font-size: 24px;
  }
  .adv-search-shell {
    padding: 14px;
  }
  .adv-search-panel {
    padding: 12px;
  }
  /* The query field and its button stack rather than squeezing the input to
     nothing; `min-width: 0` on the input is what stops the pair overflowing. */
  .adv-query-line {
    flex-direction: column;
  }
  .adv-facet-grid {
    grid-template-columns: 1fr;
  }
}

/* Queue page (admin) — table would overflow at narrow widths because columns are wider
   than the viewport; wrap it so the entire row stays usable on phone. */
#queueBody {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#queueBody table {
  min-width: 640px;
}
/* Recently-imported card (queue page strip, queue-recent-imports.js).
   Hover lift here instead of inline onmouseover/onmouseout attributes,
   which the strict CSP / data-on* discipline forbids. */
.recent-import-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Touch-device tap-area floor: phones don't fire :hover, so we key off
   (hover: none) to give chevrons + sidebar twists a 36px hit box without
   bloating the desktop layout. */
@media (hover: none) {
  .nav-parent-header .nav-chevron,
  .sb-chevron {
    min-height: 44px;
    min-width: 44px;
    padding: 8px;
  }
  /* ── Touch-device tap-target floor (44px) ──
     Customers browse on phones/tablets; every control they actually tap
     gets a comfortable 44px hit area. Scoped to coarse pointers so desktop
     mouse density is untouched. */
  .pagination .page-btn,
  .pagination .page-ellipsis {
    min-width: 44px;
    height: 44px;
  }
  .detail-tag {
    min-height: 44px;
    padding: 10px 14px;
  }
  .back-btn {
    min-height: 44px;
    padding: 10px 14px;
  }
  .detail-actions .btn,
  .btn-primary,
  .adv-search-btn,
  .adv-clear-btn,
  .adv-preset,
  .adv-filter-chip,
  .adv-filter-clear-all,
  .adv-filters-summary,
  .adv-facet-option {
    min-height: 44px;
  }
  /* The AI switch is a role="switch" div, so it needs the floor stated: it
     rendered at ~42px and was the one control in this panel the touch floor
     never covered. */
  .adv-ai-toggle {
    min-height: 44px;
  }
  /* The filter fields themselves — a 37px select is a miss on a phone. */
  .adv-field input,
  .adv-field select {
    min-height: 44px;
  }
  .adv-cat-search input,
  .adv-cat-option,
  /* Each selected category is a removable token, so it is a touch target like
     the chip it mirrors (#966). */
  .adv-cat-token {
    min-height: 44px;
  }
  /* Inline "See printed versions" link gets vertical room without
     becoming a full-width block. */
  .detail-shop-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Breadcrumb + footer links: tappable trail items get a 44px hit area
     via vertical padding; the row already wraps so this never overflows. */
  .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Horizontal-scroll wrapper for any wide table embedded in catalog pages.
   Mirrors the admin shell rule so .table-scroll works wherever a table
   shows up. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* 360px-class viewport hard cap: kill any residual horizontal overflow from
   pill rows or chip strips that wrap nowrap content. */
@media (max-width: 380px) {
  .header-stats { font-size: 11px; }
  .landing-fact { white-space: normal; }
  .results-bar {
    padding: 10px 10px;
    border-radius: 14px;
  }
  /* Keep page buttons at a 44px touch floor even on the narrowest phones;
     tighten only horizontal padding so the row still fits. */
  .pagination .page-btn { font-size: 13px; padding: 0 8px; }
  /* Tap target floor for in-card actions that were sub-44 on phone. */
  .file-card-admin-actions .catalog-file-vault-action {
    min-height: 36px;
  }
}