/* ==========================================================================
   av_responsive.css — one shared layer that makes every page usable on every
   screen, from a 320px phone to a 4K television.

   Loaded LAST on every page, so it can raise floors without any page needing
   its own copy of these rules. Deliberately narrow in scope:

   * It never changes desktop/laptop appearance. Touch rules live behind
     `(pointer: coarse)`, small-screen rules behind width queries, and
     wide-screen rules behind `min-width: 2000px`.
   * It fixes measured defects only — every rule here traces to something
     scripts/verify_responsive.py flagged in a real browser at a real
     viewport, not to a guess about what might be wrong.
   * It leaves badge-like elements alone. A 10px notification count or a
     10.5px "PLATFORM" chip is conventional badge sizing (iOS, Gmail and
     GitHub all do it); inflating those to 12px would visibly redesign the UI
     for no accessibility gain, since they are labels rather than prose.
   ========================================================================== */

/* ── 1. Touch targets ──────────────────────────────────────────────────────
   Measured failures on phones and tablets: "Forgot password?" 14px,
   "Create an account" 15px, the terms checkbox 13px, the panel close buttons
   24-28px, the notification bell 29px, "← Search" 31px. Anything under ~32px
   is genuinely hard to hit with a thumb; WCAG 2.5.5 asks for 44px.

   Applied only on coarse pointers, so a mouse-driven UI is untouched. Uses
   min-height plus flex centring rather than fixed height, so a button that is
   already large keeps its own size and nothing gets clipped. */
@media (pointer: coarse) {
  button,
  a.btn,
  a.back,
  a.back-link,
  a.logout,
  a.g-btn,
  .topbar a,
  header a,
  nav a,
  input[type="button"],
  input[type="submit"],
  select,
  [role="button"] {
    min-height: 44px;
  }

  /* Text and similar inputs measured at 28-30px on phones — comfortably
     tappable only by accident. Checkboxes and radios are sized separately
     below, so they are excluded here. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select {
    min-height: 44px;
  }

  /* Icon-only and close buttons: give them a square hit area. */
  button.v-close,
  button.suggest-rail-close,
  button.icon-btn,
  button.bell-btn,
  button.lightbox-close,
  button.menu-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Text-style link buttons ("Forgot password?", "Back to sign in") are
     inline and collapse to their line-height, so padding is what gives them
     a hit area. */
  button.link,
  button.back-link-btn {
    min-height: 44px;
    padding: 12px 4px;
  }

  /* Inline prose links ("Create an account", "Sign in", "Sign in again" in a
     notice banner) cannot take min-height while inline — inline-block plus
     vertical padding is what actually enlarges the hit box. */
  p a,
  .sub a,
  .notice a,
  .card-body a,
  label a {
    display: inline-block;
    padding: 10px 2px;
  }

  /* Checkboxes and radios: the browser default is ~13px, which is the
     smallest target on the signup form. */
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px;
    height: 22px;
    min-height: 22px;
  }

  /* iOS zooms the page in when a focused input's text is under 16px. Setting
     the floor here stops that jump, which otherwise leaves the layout
     zoomed and horizontally scrollable after the keyboard closes. */
  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* ── 2. Legibility on small screens ───────────────────────────────────────
   Prose under 12px measured on phones: form hints, the sidebar email, status
   text. Raised to 12px. Badges/chips/counters are explicitly excluded — see
   the header note. */
@media (max-width: 480px) {
  .hint,
  .help-block,
  .field .hint,
  .sidebar-user-email,
  .muted,
  .sub,
  .subtitle,
  .brand-sub,
  p.sub {
    font-size: 12px;
    line-height: 1.5;
  }
}

/* ── 3. Very wide screens: smart TVs and ultrawide monitors ───────────────
   Nothing overflowed at 3840px, but an unconstrained container stretches a
   paragraph into a single 3000px line, which is unreadable from a sofa, and
   leaves console tables floating in whitespace. Cap the content column and
   scale type up slightly, since TV viewing distance is measured in metres. */
@media (min-width: 2000px) {
  body {
    font-size: 17px;
  }

  .shell,
  main#chat,
  .content,
  .container {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 3000px) {
  body {
    font-size: 19px;
  }

  .shell,
  main#chat,
  .content,
  .container {
    max-width: 2400px;
  }
}

/* ── 4. Universal safety nets ─────────────────────────────────────────────
   These hold at every width. Cheap insurance against the single most common
   mobile regression: one wide element (a long part number, a data table, a
   pasted URL) forcing the whole page to scroll sideways. */

/* Media and embeds never exceed their column. */
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

/* Long unbroken strings — part numbers like "55810M75J30-XYZ-LONG", VINs,
   URLs in evidence panels — wrap instead of pushing the layout wide. */
td,
th,
p,
li,
dd,
.bubble,
.card-body {
  overflow-wrap: break-word;
}

/* Tables are the usual overflow culprit: let them scroll inside their own
   box rather than widening the document. verify_responsive.py treats an
   overflow inside an overflow-x:auto ancestor as correct for this reason. */
.scroll-x,
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Respect a reduced-motion preference — the search page runs pulse and
   shimmer animations that can be uncomfortable, and this is a one-line
   accessibility win rather than a redesign. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}