/* =========================================================================
   responsive.css — 3 breakpoints + reduced-motion (DESIGN.md v2 §8)
   LOADED LAST so its media-query rules win the cascade.
   Dependency: all (it overrides earlier modules at specific widths)
   ========================================================================= */

/* mobile-first base lives in the other modules (it is the <640 default).
   Below: hide collapsible toolbar groups + show hamburger under 640.
   <640 the toolbar row is nowrap and only search + theme/hamburger are visible;
   relax the search min-width floor here (220 floor is a 640-1299/>=1300 contract,
   §8C; under nowrap at narrow widths it must be able to shrink to avoid overflow,
   matching the pre-v2.1 behaviour). */
@media (max-width: 639.98px) {
  :root { --toolbar-h: 56px; }
  .toolbar__row { flex-wrap: nowrap; }
  .toolbar__group--collapsible { display: none; }
  .toolbar__group--grow { min-width: 0; }
  .toolbar__hamburger { display: inline-flex; }
}

/* >=640: the bottom sheet (mobile only) is removed */
@media (min-width: 640px) {
  .sheet, .sheet-scrim { display: none; }
}

/* 640 - <1360: toolbar wraps (DESIGN.md v2.1 §8B). The search group is flex:1 1 100%
   (set in hero.css) so it occupies its own top row; collapsible control groups wrap
   onto the row(s) below. This covers the 640-1023 tablet band AND the 1024+ "middle
   band" dual-row layout that replaces the old >=1024 nowrap (which caused 71px
   overflow @1024 and search collapse to 0-4px in the 1115-1200 narrow band).
   flex-wrap:wrap is already the base, so no rule needed here — the single-row
   override below is what flips it back. */

/* SINGLE-ROW THRESHOLD = 1360px, NOT the 1300 stated in DESIGN.md v2.1 §8A.
   §8A's arithmetic undercounted gaps: it used "gap(12)" as a single gap, but the row
   has 7 flex children => 6 inter-group gaps x 12px = 72px (not 12). Measured ground
   truth (Playwright @1300): non-search groups sum 969.67px + gaps 72px + search floor
   220px = 1261.67px content needed; at vw=1300 content area is only 1300-96(padding)
   =1204px => 57.67px short => 22px overflow @1300/1301 (search pinned at its 220 floor,
   non-search set to flex:0 0 auto per spec so cannot compress). The exact 0-overflow
   floor measures to 1358px; 1360 adds a 2px sub-pixel-rounding buffer. Below 1360 the
   dual-row wrap (above) holds 0 overflow all the way down through 1024 (verified).
   NOTE for uiux: DESIGN.md §8 §8A/§8B's "1300" needs correcting to ~1360 (gap count).
   The 0-overflow hard floor the spec itself mandates is the binding requirement here. */
@media (min-width: 1360px) {
  .toolbar__row { flex-wrap: nowrap; }
  .toolbar__group--grow { flex: 1 1 auto; }                       /* no longer owns the row */
  .toolbar__group:not(.toolbar__group--grow) { flex: 0 0 auto; } /* non-search groups don't shrink */
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* keep opacity fades short but allowed; drop position/scale */
  .card.reveal.is-in { transition: opacity 150ms linear; transform: none; }
  .card.reveal { transform: none; }
  .skeleton::after { animation: none; background: none; }
  .skeleton { animation: skeleton-pulse 1.6s ease-in-out infinite; }
  @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
  .toast.is-shown { transition: opacity 150ms linear; transform: translateY(0); }
  /* §11.5/§11.7: incant main button active-scale OFF under reduced-motion (bg only) */
  .incant__copy:active { transform: none; }
  /* icon size/stroke changes via inline style are NOT transitions — still instant, as required (function not decoration) */
}