/* ───────────── every form factor: phones from 320 px, foldables (cover, open, book posture), tablets, desktops ─────────────
   rules_design_review, 28-Oct-2026. One layer for iTechGuides' WordPress theme (itg-prime) and its directory pages (the Next composer
   and the engine; #main.td … from tools.css), which share the top bar and the foot. The directory's own rules sit at an id + class
   (#main.td .td-more), so min-height is !important on its controls. See directory-blueprint/design/FOLD-LAYER.md. */

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

/* the bar never sticks (the owner's standing rule); the directory's tool bar may stick, but gives way on short screens */
.mast { position: relative; }
@media (max-height: 520px) { #main.td .td-toolbar, .td-toolbar.is-stuck { position: static !important; } }

/* 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)); }
.foot-legal { padding-bottom: max(26px, env(safe-area-inset-bottom)); }
.drawer-panel { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .tgl, .burger, .drawer-close, .mast-search-btn { width: 44px !important; height: 44px !important; }
  .brand { min-height: 44px; }
  .hubbar-link { padding-block: 16px; }
  .drawer-hubs a { min-height: 44px; }
  .foot-col li { margin: 0; }
  .foot-col a, .foot-legal a, .foot a { display: inline-flex; align-items: center; min-height: 44px !important; min-width: 44px; }
  .page-numbers, .nav-links a { min-width: 44px !important; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  nav .menu-item > a, nav li > a:not(.hubbar-link) { min-height: 44px; display: flex; align-items: center; }
  main button, main select, main input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height: 44px !important; }
  main button { min-width: 44px; }
  label.tdv-auth-keep { min-height: 44px; display: flex; align-items: center; }
  .td-pager-step { min-height: 44px !important; }
  #main.td nav li > a, .td-pager a { min-width: 44px !important; text-align: center; }
  .tdv-auth-switch > a, .tdv-auth-foot > a { display: inline-block; padding-block: 12px !important; margin-block: -12px !important; }
  .td-sx-gh > a, main div > a.td-chip { display: inline-block; padding-block: 16px !important; margin-block: -16px !important; }   /* 13 px line-height */
  .tdv-auth-brand, .td-chip, .td-pa-rsel select, .td-go-req-form input, .td-go-req-form button { min-height: 44px !important; }
  #main.td :is(.td-cmp-add, .td-visit, .td-visit--sm, .td-sx-cmp, .td-sx-visit, .td-sx-tab, .td-sx-opt, .td-m-visit, .td-pl-go, .td-adv-buy,
    .td-goal-buy, .td-goal-more, .td-ftools a, .td-ftools-all, .td-cx-mini, .td-vp-spot, .td-sec-link, .td-mod-link, .tdv-auth-switch,
    .tdv-auth-theme, .tdv-auth-link, .tdv-auth-keep, .tdv-auth-brand), .itgp-pop-t, .itgp-mv-t, .itgp-sh-more, .itgp-reldir-a, .itgp-reldir-cmp,
    .itgp-si { min-height: 44px !important; }
  #main.td :is(.td-cmp-add, .td-sx-cmp, .td-sx-tab, .td-sx-opt) { min-width: 44px; }
  #main.td :is(.td-more, .td-name, .td-pl-bill, .td-lp-final-alt), #main.td .td-sx-t > a, #main.td .td-sx-m > a, #main.td th > a, .tdv-auth-legal > a,
  article > a.nolightbox, article > span > a, main li > a, .itgp-vrow-o > a, #main.td nav li > a { display: inline-block; padding-block: 14px !important; margin-block: -14px !important; }
  #main.td .td-name, .tdv-auth-legal > a, article > a.nolightbox { min-width: 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; the foot runs one column per half; a page's own content keeps to the left half (the phone layout),
   its own two-column layouts put back to one column inside the 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) - 32px); }
  .wrap { padding-left: 16px; padding-right: 16px; }
  main, #main { max-width: var(--seg0); margin-right: auto; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: var(--fold-gap); }
  .foot-legal { max-width: var(--fold-page); }
}

/* v2 (28-Oct, the full device set; lead 68's GO): taps the v1 rules did not reach */
@media (pointer: coarse) {
  /* the advertise page: the site's own 40 px rule on the topic picker, matched at its own selector; the "request a spot" toggle */
  #main.td .td-st-l2 select { min-height: 44px !important; }
  #main.td .td-go-req > summary { display: inline-block; padding-block: 12px !important; margin-block: -12px !important; }
  /* a brand page: the brand's own site under its name, and the side column's module links */
  #main.td .td-brand-hero a { display: inline-block; min-width: 44px; padding-block: 12px; margin-block: -12px; }
  #secondary .td-mod-link { display: inline-block; padding-block: 14px; margin-block: -14px; }
  /* product spec pages (WordPress + WooCommerce): the crumb links, headline links, the related-directory kicker, the gallery zoom */
  .single-product > span > span > a, .gb-headline > a { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .itgp-reldir-k > a { display: inline-block; padding-block: 15px; margin-block: -15px; }
  a.woocommerce-product-gallery__trigger { min-width: 44px !important; min-height: 44px !important; }
  /* the share plugin (ESSB): its own sizes stay, only the minimum touch size is raised */
  .essb_links a.nolightbox { min-width: 44px !important; }
  .essb_mailform_content_input, .essb_mailform_content_button { min-height: 44px !important; }
}