/* ───────────── 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: below 380 px the word mark and the gaps give way so the light/dark and menu buttons stay on the
   screen (27 px off at 320); a long name breaks inside its heading */
@media (max-width: 380px) { .bar-in { gap: 8px; } .bar-tools { gap: 6px; } .brand { gap: 8px; } .brand svg { width: 30px; height: 30px; } .brand-word b { font-size: 15px; } }
h1, h2, h3 { overflow-wrap: anywhere; }

/* the bar never sticks (the owner's standing rule: no sticky header on any site) */
.bar { position: relative; }

/* safe areas: notches, rounded corners and the home bar */
.wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
@media (max-width: 640px) { .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } }

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .brand, .btn, .btn-s { min-height: 44px; }
  details > summary { display: flex; align-items: center; min-height: 44px; }
  .foot ul { gap: 0; }
  .foot ul a, .foot-base a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .crumbs a, .more { display: inline-block; padding: 13px 3px; margin: -13px -3px; }
  aside li > a, main li > a:only-child { display: inline-block; padding-block: 12px; margin-block: -12px; }
}
.foot { padding-bottom: max(28px, env(safe-area-inset-bottom)); }

/* book posture (a foldable half-open like a book): nothing across the fold */
@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 { padding-left: 16px; padding-right: 16px; }
  .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
}

/* ── v2 (28-Oct-2026 evening; helper 34 for lead 68): what the full 45-viewport run left — small touch targets, and text across the
   fold in book posture (bin/hinge.mjs --leaf at 954×859 and 626×890). These name main#main because the site's own rules outrank
   plain classes; ad slots, sponsor boxes and the estate's search/newsletter are left as they are. ── */
@media (pointer: coarse) {
  a.skip { min-height: 44px; }
  .bc-comments form.comment-form :is(input[type=text], input[type=email], input[type=url], .submit) { min-height: 44px; }   /* the theme's input[type] rule sets 42 */
  .pager .btn-s, .bc-pager .page-numbers { min-width: 44px; min-height: 44px; }
  .bc-legal-menu li > a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .bc-legal-menu ul.menu { row-gap: 0; }
  a.chip { display: inline-flex; align-items: center; min-height: 44px; }
  .card.trade > h3 > a, td.small > a, .bc-byline a, a.small, main#main > p.muted > a:only-child { display: inline-block; padding-block: 13px; margin-block: -13px; }
  main#main ul:not([class]) > li > a:first-child { display: inline-block; padding-block: 12px; margin-block: -12px; }   /* the trades list: a link and its count */
}
@media (horizontal-viewport-segments: 2) {
  /* grids and lists: one column on each page */
  main#main :is(.wrap > .grid, .wrap.grid, ol.rows, .offers, ol.bc-index) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  main#main :is(.wrap > .grid, .wrap.grid, ol.rows, .offers, ol.bc-index) > * { min-width: 0; }
  /* a software page's two columns: the main column on the left page, the side on the right */
  main#main .wrap.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  main#main .wrap.cols > * { min-width: 0; }
  /* single text blocks, heads, forms and tables in their box: the left page */
  main#main :is(.hero-in > *, section.head .wrap > *, .sheet-head, .table-scroll, section.band .wrap > p, .wrap > h1, .wrap > p, .wrap > form.big-find,
    .bc-col, .bc-list-head, .bc-page-head-in, .bc-page-card) { max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
  main#main .bc-table-scroll { max-width: 100%; overflow-x: auto; }
  nav.bc-legal-menu { max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
  /* a centred page box (the claim page's narrower one, the hero's padding) starts at the left edge, so the left page holds */
  main#main > .wrap { margin-left: 0 !important; padding-left: max(16px, env(safe-area-inset-left)) !important; }
  main#main section.hero > .wrap.hero-in { max-width: none !important; }
  main#main .wrap > form.big-find[style] { max-width: var(--fold-page) !important; }   /* the claim page's search: style="max-width:none" */
  footer.foot .foot-cols > div, footer.foot .foot-cols > div:first-child { grid-column: auto; min-width: 0; }   /* the brand column spanned both; its 420 px note crossed */
  /* the estate's network box carries its size and centring in a style attribute */
  aside.ym-net { max-width: var(--fold-page) !important; margin-left: max(16px, env(safe-area-inset-left)) !important; margin-right: auto !important; }
}