/* ───────────── every form factor: phones from 320 px, foldables (cover, open, book posture), tablets, desktops ─────────────
   rules_design_review, 28-Oct-2026 · directory-blueprint/design/FOLD-LAYER.md. An override loaded after the site's own CSS (the well's
   compiled sheet); the viewport meta carries viewport-fit=cover. TriviaWell, helper 34. Ad units and their containers are untouched, and
   touch/fold rules never change `display` of anything the site hides. */

h1, h2, h3 { overflow-wrap: anywhere; }

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

/* safe areas: notches, rounded corners and the home bar */
.well-container { padding-left: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-left)); padding-right: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-right)); }
.well-footer__base { padding-bottom: max(1.1rem, env(safe-area-inset-bottom)); }

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .nav-toggle, .theme-toggle { width: 44px; height: 44px; }
  .well-logo, .well-action, .topic-chip, .well-btn, .well-nav__link, .well-search__input, .well-dropdown__link, .well-dropdown__all, .auth-brand { min-height: 44px; }
  .well-dropdown__link, .well-dropdown__all { display: flex; align-items: center; }
  .well-pagination__link { min-width: 44px; height: 44px; }
  .well-action { min-width: 44px; justify-content: center; }
  .topics-directory__item { padding-block: 0; align-items: center; }
  .topics-directory__item a { display: flex; align-items: center; min-height: 44px; min-width: 44px; }
  .well-footer__links { gap: 0; }
  .well-footer__links a, .well-footer__base a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .well-footer__base { row-gap: 0; }
  /* lone small links: a taller box that does not move the layout */
  .q-card__title:not(.visually-hidden) a { display: block; padding-block: 11px; margin-block: -11px; }
  .rail-card__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .auth-home-link, .auth-secondary a { display: inline-block; padding-block: 11px; margin-block: -11px; }
  .round-q__link, .section-head__link { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .q-detail__crumbs a { display: inline-block; min-width: 44px; padding: 11px 6px; margin: -11px -6px; }
}

/* book posture (a foldable half-open like a book): nothing across the fold. Lists and grids put one column on each half; a page's
   opening words keep to the left half; side columns go to the right half */
@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) - 36px); }
  .well-hero__inner, .daily-layout, .feed-layout, .well-footer__inner, .well-band__inner
    { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  .topics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  .topics-directory { columns: 2; column-gap: var(--fold-gap); }
  .well-footer__base, .well-nav, .page-head__body, .page-head__tools, .hub-intro, .well-container > .q-feed { max-width: var(--fold-page); margin-inline: 0 auto; }
  /* a page head: its tools go under its words, on the left half */
  .page-head { flex-direction: column; align-items: flex-start; }
  /* the sign-in panel keeps to the left half (it is centred by its own rules) */
  .auth-container, .auth-panel { max-width: var(--fold-page) !important; margin-inline: 0 auto !important; }
}