/* Strature GPS phase 1, the masthead (owner: WP1; sitebuild/hubs/chrome.py). Copied into www/ only with site.config.json
   phase1.hubs on, and loaded by the header then; site.css keeps the header's own rules, this file only adds. Site
   tokens only.
   WS-697 (4), owner's ruling 25 Oct 2026: one menu on every page (sitebuild/sitemap_menu.py, /assets/mega-menu.css); the
   GPS pages' two-level header of WS-243 (1) and its rules are gone. W-115: 60px on the phone, 72px from 900px.
   WS-255 (11): "Sign in" (/my/) in the header, in the menu sheet on the phone; WS-369 (2), owner's ruling 19 Oct 2026:
   in the bar at every width too ("My Strature" once site.js finds the reader signed in), within W-115's 88px. */

/* ---------- Sign in in the bar (WS-255 (11); WS-369 (2): on the phone too) ----------
   In .mh-right after the search icon, before "Get in touch" (from 560px) and the menu button. A 44px tap target.
   Signed in (site.js, the Follow button's check: GET /api/my/me?peek=1), the link reads "My Strature"; on the phone it
   is a person icon of the same 44px named "My Strature" (the words stay for screen readers), so the bar never moves.
   Measured (verify_extra/hdr_signin.py): 60px bar, no wrap, no sideways scroll, 320 to 899px. */
.mh-in{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:44px;height:44px;padding:0 2px;
  color:var(--white);text-decoration:none;font:600 13px/1 var(--sans);border-bottom:1px solid transparent;white-space:nowrap}
.mh-in:hover,.mh-in[aria-current="page"]{border-bottom-color:var(--white)}
.mh-in-i{display:none}
@media (max-width:899px){
  .mh-in[data-me] .mh-in-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mh-in[data-me] .mh-in-i{display:block}
}
/* under 560px the bar holds the mark, the search icon, Sign in and the menu button; "Get in touch" gives way there (the
   menu sheet ends on its own "Get in touch", and each page keeps its own contact link) */
@media (max-width:559px){.mh-in ~ .mh-cta{display:none}}
/* the menu button: a 44px tap target, as the search icon and Sign in (review N6; the 60px and 56px bars hold it) */
@media (max-width:899px){.mh .menu-btn{height:44px;min-width:44px;justify-content:center}}
@media (min-width:900px){
  /* wide enough for "My Strature", so the signed-in label never moves the bar (review S5) */
  .mh-in{height:34px;min-width:76px}
  .nav .nav-in{display:none}
}

/* ---------- the My Strature command centre (body.my-cc, /my/; WS-360 (1)): a 56px bar under 1024px ----------
   Inert on every other page. Under 1024px the bar is 56px (the mark at most 26px tall, so its clear space, 2.1 x its
   height, fits). From 1024px the bar is the site's 72px. */
@media (max-width:1023px){
  :root:has(body.my-cc){--mh:56px}
  body.my-cc .mh{--wmh:clamp(18.4px, calc((100vw - 234px) / 7.08), 26px)}
}
/* from 900 to 1023px the 56px bar keeps Sign in (or My Strature) a 44px target (verify_extra/hdr_signin.py); signed in,
   the phone's person icon, so the words never push the menu */
@media (min-width:900px) and (max-width:1023px){
  html:has(body.my-cc){scroll-padding-top:64px}
  body.my-cc .mh-in{height:44px;min-width:44px}
  body.my-cc .mh-in[data-me] .mh-in-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.my-cc .mh-in[data-me] .mh-in-i{display:block}
}

/* ---------- the search icon (sitebuild/hubs/rane_links.py): only once /search/ is built ----------
   A 44px tap target with its label in aria-label, after the menu and before .mh-right (Sign in, Get in touch, the menu
   button); on the phone before Sign in. */
.mh-srch{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;
  color:var(--white);border:1px solid transparent}
.mh-srch:hover,.mh-srch[aria-current="page"]{border-color:rgba(255,255,255,.6)}
/* the phone: the mark gives the icon its 44px and the 8px gap (site.css reserves 182px beside the mark; 234px here) */
@media (max-width:899px){.mh:has(.mh-srch){--wmh:clamp(18.4px, calc((100vw - 234px) / 7.08), 28px)}}
@media (max-width:319px){.mh:has(.mh-srch){--wmh:clamp(16px, calc((100vw - 234px) / 5.98), 22px)}}
/* brand rule (verify_extra/logo.py marks_sizes): W2 is drawn at 120px wide or more wherever it fits, else W3. With the
   search icon the mark's floor is 18.4px (W2 = 6.53 x height), so W2 stays at least 120px wide down to 320px */
/* WS-337 (3), owner's ruling 17 Oct 2026: under 360px the bar has no room for the mark, the icon, "Get in touch" and the
   menu button: the bar's "Get in touch" gives way (the menu sheet ends on its own "Get in touch"); 375px and up are
   unchanged */
@media (max-width:359px){.mh:has(.mh-srch) .mh-cta{display:none}}

/* ---------- the GPS correction mark (WS-412 (4); sitebuild/hubs/corrections.py; review M6) ----------
   <a class="tag gc-mark"> sits inline after a corrected figure. On the phone (W-115) its tap area is 44px tall and
   at least 44px wide through an invisible ::after, so the line height and the text flow do not change. */
@media (max-width:899px){
  .gc-mark{position:relative}
  .gc-mark::after{content:"";position:absolute;left:50%;top:50%;width:100%;min-width:44px;height:44px;
    transform:translate(-50%,-50%)}
}