/* ============================================================
   Togvia — touch density and reflow. Phase 5.
   ============================================================

   Loaded LAST on every page, from tripsSharedNavigation() and from the legal
   pages, because Togvia has two stylesheet families and neither of them covers
   the whole site. trips-ui.css is not loaded on the homepage or the Countries
   directory at all; trips-home.css and trips-inspiration.css are not loaded in
   the workspace. A density policy that lives in either one can only ever be
   true of half the product, which is how a 22px "Preview trip" link survived
   four phases of mobile work.

   Every rule here fixes something measured in real Chrome with real touch
   emulation by scripts/ui-audit.mjs. Nothing is here on suspicion.

   It adapts to the POINTER, not the width: a 1024px tablet is a touch device
   and a 700px desktop window is not. Nothing below changes a mouse layout.
   ============================================================ */

/*
 * A note on !important, which is used only inside the coarse-pointer block.
 *
 * These are not style preferences competing with a designer's intent; they are
 * a floor below which a control stops being usable with a finger. Several of
 * the rules they override already agreed — trips-meridian.css sets the vote
 * buttons to 44px — but did it behind `max-width: 720px`, so a 768px tablet
 * and a phone in landscape got the 36px desktop size. Matching every existing
 * selector's specificity one at a time would leave the same trap for the next
 * component, so the policy layer is stated once and made authoritative.
 */
@media (pointer: coarse) {
  /* Anything that behaves as a button. 44px is the size a finger hits
     reliably; below that people miss and blame themselves. */
  .btn--sm,
  .btn--xs,
  .country-btn,
  .vote-page__more,
  .trips-shared-nav__brand,
  .trips-shared-nav__links a,
  .trips-account-menu > summary,
  .ws-progress__link,
  .ws-tools__summary { min-height: 44px !important; }

  /* Inline links that act as controls get room around them rather than a
     bigger font, so the typography stays exactly as it was designed. */
  .ws-flow__escape,
  .trip-state__escape,
  .next-step-page__escape,
  .m-how__action,
  .m-route-card__preview,
  .m-route-card__copy-link,
  .m-route-mini__arrow,
  .countries-more a,
  .m-directory-card a,
  .place-discovery-card__button {
    display: inline-flex;
    align-items: center;
    min-height: 44px !important;
  }

  /* A search field drawn inside a padded box: the box looks like the control
     and is 43px tall, but the input itself was only 18px, so tapping the
     padding did not focus it. Moving the padding onto the field keeps the
     control looking identical and makes all of it live. */
  .country-search { padding-block: 2px !important; }
  .country-search input { min-height: 40px !important; }

  /* A radio or checkbox at 13px is a coin-toss to tap. */
  input[type="radio"],
  input[type="checkbox"] { width: 24px !important; height: 24px !important; }

  /* The drag handle in Plan. It is the only way to reorder a day by touch. */
  .plan-item__grip { min-width: 44px !important; min-height: 44px !important; }

  /* Our own controls drawn over the route map. They carry an explicit height,
     which min-height cannot lift, so the height itself is replaced. */
  .m-route-card__map-head button { width: 44px !important; height: 44px !important; }

  /* Named because a single-class rule elsewhere in the cascade sets them
     smaller; these are the exact controls the audit measured under 44px, not
     a guess at which ones might be. */
  .btn.btn--xs,
  .btn.btn--sm,
  .place-card__title,
  .place-card__report,
  .country-map-panel__open,
  .m-btn.m-btn--text,
  .m-route-card__actions .m-btn--text,
  .vote-page__menu > summary,
  .guardian-check__all > summary,
  .live-transport-notices > summary,
  .create-personalise > summary,
  .create-advanced > summary,
  .next-step-page__advanced > summary,
  details > summary.btn,
  .country-btn.country-btn--sm,
  .country-btn.country-btn--soft,
  .country-btn.country-btn--primary,
  .m-btn.m-btn--primary,
  .m-btn.m-btn--secondary,
  .vote-fairness__guest,
  .vote-buttons .vote-btn,
  .m-vote-options button,
  .m-routes-filters__head button,
  .m-filter-options label,
  [data-preview-vote],
  .m-route-mini__arrow,
  .place-card__action,
  .place-card__actions button,
  .place-card__actions a { min-height: 44px !important; }

  /* Below about 10px, text stops being readable on a phone held at arm's
     length. Only the smallest labels are lifted; the designed 10px eyebrows
     are left alone. */
  .badge { font-size: max(10px, 0.68rem); }
}

/* ---------------------------------------------------------------
   Reflow. WCAG 1.4.10 asks that content still work at 320 CSS pixels
   without a second scroll direction — which is also what a phone in
   portrait actually is, and what 200% zoom on a laptop becomes.
   --------------------------------------------------------------- */

.toolbar,
.page-head,
.page-head__actions { min-width: 0; }
.page-head__actions { flex-wrap: wrap; }

/* Display headings are set large, and a large word is easily wider than a
   320px phone. The guides hero heading needed 355px inside a 288px column and
   pushed 51px of horizontal scroll onto the whole document. break-word only
   breaks a word that would overflow on its own, so ordinary wrapping is
   untouched. */
h1, h2, h3, h4 { overflow-wrap: break-word; }

/* A long unbroken word — a place name, a URL somebody pasted into a note —
   must not be allowed to set the width of the page it sits in. */
.trip-state h3,
.trip-facts__item small,
.go-now__slot strong,
.vote-page__title-line h3,
.place-row strong,
.member-row strong,
.empty-state p,
.empty-state h3 { overflow-wrap: anywhere; }