/* ==================== GLOBAL RESPONSIVE SAFETY NET ====================
   Loaded LAST. Site-wide guards that keep every page from breaking on small
   screens, without altering any page's intentional design. Per-page media
   queries live in their own partials; this file only catches the universals:
   overflow, media sizing, long-word wrap, iOS zoom, and container padding. */

/* iOS/Android: stop text auto-inflation in landscape so layouts stay predictable */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* clip (not hidden) kills any accidental horizontal scrollbar WITHOUT
     creating a scroll container — so position:sticky keeps working. */
  overflow-x:clip;
}

/* Media never overflows its column ------------------------------------------------ */
img, svg, video, canvas, iframe, embed, object{ max-width:100%; }
/* content images keep their aspect ratio when scaled down; icons that declare an
   explicit width/height attribute are left alone so their sizing never changes. */
img:not([width]):not([height]){ height:auto; }

/* Long unbreakable strings (URLs, long words) must wrap, not push the page wide ---- */
h1,h2,h3,h4,h5,h6,p,li,a,span,strong,em,td,th,dd,dt,label,button,figcaption,blockquote,small{
  overflow-wrap:break-word;
}
/* Preformatted / code blocks scroll internally instead of stretching the page */
pre{ max-width:100%; overflow-x:auto; }

/* Tables shouldn't force the page wider than the viewport */
table{ max-width:100%; }

/* Container gutters tighten on phones so cards get more room.
   These two steps are now ONE continuous clamp() in core/42-responsive-system.css
   — same widths at the sizes that mattered, without the two hard jumps (and
   without two more breakpoints that no content grid shared). Kept here as a
   fallback for browsers with no clamp() support; 42 overrides both. */
@media (max-width:560px){
  .wrap{ padding-left:16px; padding-right:16px; }
}
@media (max-width:380px){
  .wrap{ padding-left:12px; padding-right:12px; }
}

/* Prevent the iOS "zoom on focus" jump: any control under 16px triggers it.
   No !important, so a component that deliberately sizes an input still wins. */
@media (max-width:768px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea{
    font-size:16px;
  }
}

/* Honour notch / rounded-corner safe areas for anything pinned to a screen edge.
   (Opt-in via the safe-area utility; fixed bars can add these where needed.) */
@supports(padding:max(0px)){
  .safe-x{ padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
}

/* ============================================================================
   TOUCH TARGETS
   A handful of icon buttons and pill tabs were designed for a mouse cursor and
   measure 25–34px — well under the ~44px a fingertip needs, so they are fiddly
   or miss entirely on a phone. Scoped to `pointer:coarse` so the desktop
   design is untouched; this file loads after the feature stylesheets, so these
   win on equal specificity. Sizes are nudged to a comfortable minimum rather
   than expanded with invisible pseudo-elements, which would overlap and steal
   taps from neighbouring controls.
   The `max-width` arm covers phone- AND tablet-width viewports on any pointer
   type (and makes the rules testable in a desktop preview, where `coarse`
   never matches). 900px so iPad portrait (768) is included — it is a touch
   device even though its pointer type is only reported as coarse on-device.
   ============================================================================ */
@media (pointer:coarse), (max-width:900px){
  /* QuizBank word cards: delete (25px) + speak (34px) */
  .qb-card-del{ padding:9px 11px; font-size:16px; }
  .qb-card-speak{ width:40px; height:40px; }
  .qb-card-speak svg{ width:18px; height:18px; }

  /* Writing Toolkit inline tools: copy / pronounce / save (26px) */
  .wtk-tool{ width:38px; height:38px; font-size:15px; }
  .wgd-copy{ width:38px; height:38px; font-size:15px; }
  #wtkDrawerClose{ width:40px; height:40px; }
  /* …and the row holding a phrase + its tool cluster is nowrap, so the bigger
     buttons pushed straight past its right edge. Let both levels wrap. */
  .wtk-tools{ flex-wrap:wrap; }
  .wtk-phrase-row{ flex-wrap:wrap; }

  /* Grammar dashboard + leaderboard pill tabs (30px tall) */
  .gd2-tab{ padding:10px 14px; }

  /* Article word popover — this is a touch-FIRST surface (you open it by
     long-pressing a word), yet its language pills were 25px, the pronounce
     button 28px and Highlight / Save / Remove 32px. */
  #arPopover .ar-pop-lang{ padding:9px 12px; }
  #arPopover .ar-pop-speak{ width:38px; height:38px; }
  #arPopover button[data-ar-action]{ min-height:40px; padding:10px 14px; }

  /* Grammar: the two rails a learner taps most were the smallest things on the
     page — the explain-language switcher and the lesson-section navigator at
     23px tall. Plus the course/unit nav and the back pill. */
  .ll-pills button{ min-height:40px; padding:8px 14px; display:inline-flex; align-items:center; }
  .glh-chip{ min-height:40px; padding:9px 14px; display:inline-flex; align-items:center; }
  .gun-course{ min-height:40px; padding:9px 14px; display:inline-flex; align-items:center; }
  .gun-btn{ min-height:40px; padding:9px 15px; display:inline-flex; align-items:center; }
  .gr-back{ min-height:40px; padding:9px 15px; display:inline-flex; align-items:center; }
  .gr-tab{ min-height:42px; }

  /* Shadowing speed / loop segment buttons (32.8px) */
  .sh-seg button{ min-height:40px; display:inline-flex; align-items:center; }

  /* Writing Toolkit exam-drawer task switcher (32.8px) */
  .wtk-drawer-tasks button{ min-height:40px; }

  /* Speaking-article inline pronounce / save icons (26px) */
  .sb-speak, .sb-save{ width:38px; height:38px; }

  /* Writing samples filter chips (32.5px) + article-reader font-size buttons */
  .wsamples-filter-group button{ min-height:40px; }
  .reader-tools button{ min-height:40px; }
  .articles-filter button{ min-height:42px; }

  /* Text-style navigation links measured at 21–29px. These are links rather
     than buttons, so the button rules above never reached them, yet they are
     the primary way out of a page on a phone (the QuizBank back link) or into
     one (the grammar dashboard's "Study" / "Full board"). Grow the hit area
     with padding on an inline-flex box: the text keeps its position and size,
     only the tappable box gets taller. */
  .qb-back,
  .gd2-mast-go,
  .gd2-lb-foot-link{
    display:inline-flex; align-items:center;
    min-height:40px; padding-top:4px; padding-bottom:4px;
  }
  /* The site logo is the universal "go home" target and measured 29px tall. */
  body > header .logo{ min-height:40px; }
}