/* ───────────── 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 search and light/dark buttons stay on the
   screen (27 px off at 320); the four doors may shrink (their big figures pushed the second column 27 px off at 320); a long name
   breaks inside its heading */
@media (max-width: 380px) { .bar-in { gap: 10px; } .bar-end { gap: 6px; } .brand { gap: 8px; } .brand svg { width: 28px; height: 28px; } .brand .word { font-size: 14px; } }
.doors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .door { padding: 16px 14px; } .door-fig { font-size: 32px; } }
.door { min-width: 0; overflow-wrap: anywhere; }
h1, h2, h3 { overflow-wrap: anywhere; }
.shop-head { grid-template-columns: minmax(0, 1fr); }
.shop-head > * { min-width: 0; }
.shop-head .tag { white-space: normal; max-width: 100%; }   /* a long plan tag ran to 371 px on a 320 phone */

/* 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(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
.strip-in { padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
.foot-low { padding-bottom: max(26px, 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.small, .btn { min-height: 44px; }
  .strip a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot ul { gap: 0; }
  .foot ul a, .foot-low nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .foot-low nav { gap: 0 16px; }
  .dim-end { display: inline-block; padding-block: 16px; margin-block: -16px; }
  details.sheet > summary, details > summary { display: flex; align-items: center; min-height: 44px; }
  .crumbs a { display: inline-block; padding: 14px 3px; margin: -14px -3px; }
}

/* ── v2 (28-Oct-2026 evening; helper 34 for lead 68): what the full 45-viewport run left — /submit/'s plan switch 28 px wider than a
   320 px phone, small touch targets, and text across the fold in book posture (bin/hinge.mjs --leaf at 954×859 and 626×890). The
   site's own list/grid rules outrank plain classes, so these name main#main; ad slots and the sidebar column are left as they are. ── */
.terms-switch { flex-wrap: wrap; max-width: 100%; }
@media (pointer: coarse) {
  .sheet ol li > a, .linklist li > a { display: flex; align-items: center; min-height: 44px; }
  .strip a { min-width: 44px; justify-content: center; }
  .crumbs a { padding-block: 15px; margin-block: -15px; }                     /* v1's 14 px left 43 px */
  .mb-more, .topcard-more { display: inline-block; padding-block: 16px; margin-block: -16px; }
  .note-box > a, .notes-by a, .topcard > header > a { display: inline-block; padding-block: 13px; margin-block: -13px; }
  .notes-head > a.tag { display: inline-block; padding-block: 16px; margin-block: -16px; }
  .ym-publication-credit a, .ym-policy-links a { display: inline-block; min-width: 44px; padding-block: 14px; margin-block: -14px; }
  .sheet ol li > a { min-width: 44px; }
  main#main aside li > a { display: flex; align-items: center; min-height: 44px; }
  .terms-switch .term { display: inline-flex; align-items: center; min-height: 44px; }
}
@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); }
  /* grids and lists: one column on each page */
  main#main :is(ol.rows, .dev-row, ul.finder-cards, .grid.three, .grid.two, .plan-grid, ol.steps, .sheet-groups, ul.linklist, .doors)
    { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  main#main :is(ol.rows, .dev-row, ul.finder-cards, .grid.three, .grid.two, .plan-grid, ol.steps, .sheet-groups, ul.linklist) > * { min-width: 0; }
  /* two-part heads and bodies: the words on the left page, the picture / side sheet on the right */
  main#main :is(.hero-in, .tool-body, .dev-hero, header.head.list-head) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  /* single text blocks, forms and tables in their box: the left page */
  main#main :is(header.head:not(.list-head), .section > h2, .section.sources, .table-scroll, .notes-col, .claim-band, p.plan-extra, .terms-switch),
    main#main .notes-rail :is(.rail-h, .rail-list) { max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
  main#main .entry-content table { display: block; max-width: 100%; overflow-x: auto; }
  footer.foot .foot-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  footer.foot .foot-top > div { grid-column: auto; min-width: 0; }   /* the brand column spanned both and its 340 px note crossed */
  footer.foot p.small, footer.foot > p.ym-policy-links { max-width: var(--fold-page); margin-left: max(16px, env(safe-area-inset-left)); margin-right: auto; }
  /* the section strip scrolls sideways; in book posture its links wrap on the left page */
  .strip .strip-in { flex-wrap: wrap; overflow-x: visible; max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
  /* 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: 0 !important; margin-right: auto !important; }
}

/* ── v3 (28-Oct-2026 night; helper 34 for lead 68): what the finer book-posture check (loose inline text, every link and picture)
   found — the home's four hero figures ran out of the words' half (four columns in a ~260 px half), the device-card rows still
   scrolled sideways below 641 px (a card across the fold), and long crumb trails and the footer's link row crossed the fold. ── */
@media (horizontal-viewport-segments: 2) {
  .hero-copy .hero-figs { grid-template-columns: repeat(2, auto); }
  main#main .dev-row { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; scroll-snap-type: none; }
  main#main nav.crumbs { max-width: var(--fold-page); }
  footer.foot .foot-low { flex-direction: column; align-items: flex-start; }
  footer.foot .foot-low > * { max-width: var(--fold-page); }
  footer.foot .foot-low .ym { margin-left: 0; }
}