/* ───────────── every form factor: phones from 320 px, foldables (cover, open, book posture), tablets, desktops ─────────────
   rules_design_review, 28-Oct-2026. The viewport meta carries viewport-fit=cover; see directory-blueprint/design/FOLD-LAYER.md. */

/* nothing wider than the screen: the series page's chart grid asked for 320 px columns (inline), 20 px past a 320 px phone; a long
   word breaks inside its heading; a spec value in a product comparison may break anywhere (it ran 57–114 px past 568–790 px screens) */
.grid[style*="minmax(320px"] { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)) !important; }
.grid > * { min-width: 0; }
h1, h2, h3 { overflow-wrap: anywhere; }
.aps-specs-table td.aps-attr-value > * { min-width: 0; overflow-wrap: anywhere; }

/* the bar never sticks (the owner's standing rule: no sticky header on any site); the side column no longer waits for it */
.bar { position: relative; }
.stick { top: 16px; }

/* safe areas: notches, rounded corners and the home bar */
.wrap { padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
.exmc-wrap { padding-left: max(var(--gut, 20px), env(safe-area-inset-left)); padding-right: max(var(--gut, 20px), env(safe-area-inset-right)); }
.strip { padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
.foot-note { padding-bottom: max(28px, env(safe-area-inset-bottom)); }

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .brand, .btn-s, .bar-search { min-height: 44px; }
  .nav a, .strip a, .exmc-tags a { display: inline-flex; align-items: center; min-height: 44px; }
  .strip a { min-width: 44px; justify-content: center; }
  .terms button { min-height: 44px; }
  main details > summary { padding-block: 11px; }
  .foot ul { gap: 0; }
  .foot ul a, .foot-note a, .foot-brand .brand { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .row h3 a, .handset h3 a, .featured h3 a, .card h3 a, .panel h2 a, .panel h3 a, h3 > a, .crumbs a, .exmc-meta a, .meta-line > a, .aps-2co > a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .aps-2co > a, h3 > a { min-width: 44px; }
  .band-head a.more, .device .more, .aps-specs-link a { padding-block: 15px; margin-block: -15px; }
  .exmc-head .kick, .exmc-listhead .kick { padding-block: 16px; margin-block: -16px; }
  .exmc-head .kick, .exmc-listhead .kick { min-width: 44px; }
  .aps-product-brand > a, .aps-product-cat > a { display: inline-block; min-width: 44px; padding-block: 13px; margin-block: -13px; }
  input.search-field, input.search-submit, .meks_ess-item { min-height: 44px; }
  input.search-submit { min-width: 44px; }
  .list-plain li > a { padding-block: 9px; margin-block: -9px; }
  .apscrumbs a { display: inline-block; min-width: 44px; padding-block: 13px; margin-block: -13px; text-align: center; }
  .crumbs a { min-width: 44px; padding-inline: 4px; margin-inline: -4px; }
  .exmc-side ul { gap: 0; }
  .exmc-latest a, .exmc-side li > a { min-height: 44px; align-content: center; }
  .exmc-side input[type='search'], .exmc-404 input[type='search'], .exmc-side .search-submit, .exmc-404 .search-submit { min-height: 44px; }
}

/* book posture (a foldable half-open like a book): nothing across the fold. The page keeps equal margins so the gap between two
   columns lands on the fold; grids and shelves put one column on each half, a page's opening words and running text keep to the
   left half; the phone carousel becomes a two-column grid. */
@media (horizontal-viewport-segments: 2) {
  :root { --seg0: env(viewport-segment-width 0 0, 50vw); --fold-gap: calc(env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px) + 32px); --fold-page: calc(var(--seg0) - 32px); }
  .wrap, .exmc-wrap, .strip { padding-left: 16px; padding-right: 16px; }
  .wrap { max-width: none !important; }   /* v2: a page whose .wrap is 900 px wide sat centred, so its left-half blocks ran past the fold */
  .hero-in, .two, .makers-band, .exmc-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  .grid, .grid[style*="minmax"], .stories, .models, .bento, .foot-top, .rows, .maker-shots, .offers { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: var(--fold-gap); }   /* v2: + .offers (advertise: 3 auto-fill columns put the middle offer on the fold) */
  .bento .big, .bento .wide, .foot-brand { grid-column: auto; grid-row: auto; }
  .trio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); overflow: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .trio .handset { flex: none; }
  .shelf { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); overflow: visible; }
  .head, .head h1, .head .lede, .band-head, .crumbs, .prose, .note, .featured, .table-box, .sheet, .meta-line, .exmc-head, .exmc-listhead, .exmc-lede, .exmc-404, .empty, .band h2, .terms, .apscrumbs { max-width: var(--fold-page); }
  .strip { flex-wrap: wrap; overflow-x: visible; max-width: var(--seg0); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: var(--fold-gap); }
  .foot-note { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  /* the product pages (WordPress, APS plugin): the whole product block keeps to the left half */
  .aps-container { max-width: var(--seg0) !important; margin-left: 0 !important; margin-right: auto !important; padding-left: 16px; padding-right: 16px; }
}