/*
  Mobile layout and touch pass.

  Applied ONLY to the mobile single-file build (see tools/build-single-file.cjs).
  The standard build and the desktop page are untouched, so nothing here can
  regress the layout you already use.

  Loaded after styles.css, so plain selector specificity is enough for most
  overrides; a few need a little more because the base rules sit inside their own
  media queries.

  Three problems this addresses, in order of how much they hurt:

  1. Form fields inherit the 15px body font. iOS Safari auto-zooms the page on
     focus for any field under 16px, so tapping search or the owned-products box
     zoomed in and left you pinching back out. Fields are 16px here.
  2. The Yes / No / Not sure buttons were about 30px tall. They are the primary
     control on all 1,200+ cards, and 30px is well under the ~44px comfortable
     tap size. Everything interactive gets a 44px minimum.
  3. Two-column card lists and desktop-width spacing survive further down than a
     phone wants, so the breakpoints move up.
*/

/* ── 1. Stop iOS zoom-on-focus ─────────────────────────────────────────────
   Must be 16px or larger. Applies at all widths, not just coarse pointers,
   because it is about the browser's zoom heuristic rather than the input
   device. */
input,
select,
textarea,
.search,
.profile-field input,
.profile-field select,
.company-status-sort-control select {
  font-size: 16px;
}

/* ── 2. Touch targets ─────────────────────────────────────────────────────
   Scoped to coarse pointers so a desktop browser resized narrow keeps its
   compact controls. */
@media (pointer: coarse) {
  .answer {
    min-height: 46px;
    padding: 10px 8px;
    font-size: 13px;
  }

  .answers {
    gap: 8px;
  }

  .btn,
  .ticker-button,
  .advanced-filter-option,
  .supply-confirm,
  .supply-confirm-all,
  .quantity-rule-remove,
  .quantity-rule-entry-input,
  .quantity-rule-entry-add,
  .ownership-chart-search-clear {
    min-height: 44px;
  }

  /* The 16px floor stops iOS zooming the page when the field takes focus. */
  .quantity-rule-entry-input {
    font-size: 16px;
  }

  .btn {
    padding: 12px 16px;
  }

  /* Disclosure headers are the main navigation on a phone, so they get a
     comfortable strip rather than a text-height line. */
  .supply-chain-summary-toggle,
  .owned-products-group-summary,
  .panel-collapse-toggle,
  summary {
    min-height: 44px;
    align-items: center;
  }

  /* Ticker chips sit in dense rows; give them room without stretching the row. */
  .owned-products-ticker,
  .supply-ticker-plain {
    min-height: 40px;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* The remove control is destructive and sits beside a wrapping title, so it
     needs a full tap target rather than the 10px chip it is on a desktop. */
  .owned-products-remove {
    min-height: 40px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
  }

  /* Checkbox and radio controls in the filter panels. */
  .relevance-grid label,
  .filter-grid label,
  .housing-option {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ── 3. Layout ────────────────────────────────────────────────────────────
   The desktop keeps Review by product and Results by company visible in two
   columns. Merely stacking those columns on a phone put the company results
   after the entire product catalogue, so the two working views could never be
   seen together. Keep the phone-width column, but split the viewport into two
   independently scrollable rows: review above, live company results below. */
@media (max-width: 900px) {
  .brand-list {
    grid-template-columns: 1fr;
  }

  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(300px, 3fr) minmax(220px, 2fr);
    align-items: stretch;
    gap: 12px;
    height: calc(100vh - 24px);
    height: calc(100svh - 24px);
    min-height: 560px;
    max-height: 860px;
    overflow: hidden;
  }

  .layout > main,
  .layout > .sidebar {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .layout > main > .panel,
  .layout > .sidebar > .panel:first-child {
    margin-top: 0;
  }

  .layout > .sidebar {
    position: static;
  }
}

@media (max-width: 620px) {
  :root {
    --audit-fixed-toolbar-space: 0px;
  }

  .app {
    width: 100%;
    max-width: 100%;
    padding: 16px 12px 96px !important;
  }

  /* The base audit intentionally fixes this toolbar with !important. The
     mobile build must reset the whole fixed-position geometry, not only
     `position`, or the leftover 50% offset and transform widen the page and
     clip controls at the right edge. Letting the toolbar scroll away also
     returns roughly a fifth of the viewport. */
  .toolbar {
    position: static !important;
    top: auto !important;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    z-index: 20 !important;
    padding: 9px;
    margin: 0 0 14px !important;
  }

  main,
  .layout,
  .layout > *,
  .sidebar {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .toolbar .search {
    flex: 1 1 100%;
  }

  /* The company status panel caps its height against the viewport for a
     desktop sidebar; stacked on a phone that produces a scroll area inside a
     scroll area. */
  .company-results-panel {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }

  .supply-chain-block {
    padding: 10px;
  }

  .supply-row-head {
    gap: 6px;
  }

  /* Long source URLs and part descriptions must wrap rather than widen the
     page; a single overflowing element scrolls the whole document sideways. */
  .supply-part,
  .supply-source,
  .owned-products-result {
    overflow-wrap: anywhere;
  }
}

/* ── 4. Horizontal overflow guard ─────────────────────────────────────────
   Cheap insurance: one wide element anywhere in a 1,200-card catalog would
   otherwise make the entire page pan sideways, which is the single most
   annoying mobile failure mode and the hardest to trace. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}