/* Nav v2: H.Y.W.I. is a menu (LOCAL, OFFSITE) in every masthead; UMBRA is one more item in the T.W.I.Y. lists. Three mast shapes, three small rule sets; the existing mast rules are reused (the menu is built from the same details/summary markup as OPEN SOURCE).
 * A  fixed T.W.I.Y. masts (/, /ui/, /xv/): H.Y.W.I. is a third menu after OPEN SOURCE, built on the .tw-oss rules (labels only until Argon writes descriptions). Under 768px the mast is a 2-column grid (wordmark row, menu row), so the menu leaves the grid and sits on the wordmark row, right-aligned.
 *    The T.W.I.Y. list has a fourth item, so the phone offset that keeps OPEN SOURCE's list below T.W.I.Y.'s open list grows from 242px to 162px (80px per item).
 * B  /build/: H.Y.W.I. is a second .grp menu in the shelf, after OPEN SOURCE.
 * C  list masts (all other pages): an <li> menu after OPEN SOURCE; under 48rem the list scrolls sideways and would hide it, so a boxed menu on the wordmark row replaces it (a row of its own under 374px, where the wordmark takes the whole row). */
.tw-mast .tw-hywi-control { display: flex; align-items: stretch; flex: 0 0 128px; inline-size: 128px; block-size: 44px; }
.tw-mast .tw-hywi { flex: 0 0 44px; inline-size: 44px; block-size: 44px; }
.tw-mast .tw-hywi-control > .tw-hywi-label { display: flex; align-items: center; flex: 1 1 auto; min-inline-size: 0; block-size: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-rule); border-inline-end: 0; background: var(--color-paper); color: var(--color-ink); font: 700 11px/1.5 var(--font-mono); letter-spacing: .16em; text-decoration: none; white-space: nowrap; }
.tw-mast .tw-hywi-control > .tw-hywi-label:hover, .tw-mast .tw-hywi-control > .tw-hywi > summary:hover { border-color: var(--color-muted); }
.tw-mast .tw-hywi-control > .tw-hywi-label:focus-visible, .tw-mast .tw-hywi-control > .tw-hywi > summary:focus-visible { outline: var(--focus-w) solid var(--color-ink); outline-offset: 2px; }
.tw-mast .tw-hywi-control > .tw-hywi > summary { display: flex; align-items: center; justify-content: center; inline-size: 44px; min-inline-size: 44px; block-size: 44px; min-block-size: 44px; padding: 0; border: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); font-size: 0; cursor: pointer; list-style: none; }
.tw-mast .tw-hywi-control > .tw-hywi > summary::-webkit-details-marker { display: none; }
.tw-mast .tw-hywi-control > .tw-hywi > summary::after { content: ""; flex: 0 0 6px; inline-size: 6px; block-size: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.tw-mast .tw-hywi-control > .tw-hywi[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.tw-mast .tw-hywi-control > .tw-hywi ul { position: absolute; inset-block-start: calc(100% + var(--space-2)); inset-inline-end: 0; width: 160px; max-width: calc(100vw - 2 * var(--space-5)); padding: 0; }
.mast-hywi { display: none; }
.mast-hywi-control { display: none; align-items: stretch; min-block-size: 44px; }
.mast-hywi-control > .mast-hywi-label { display: flex; align-items: center; min-block-size: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-rule); border-inline-end: 0; background: var(--color-paper); color: var(--color-ink); font: 700 11px/1.5 var(--font-mono); letter-spacing: .16em; text-decoration: none; white-space: nowrap; }
.mast-hywi > summary { display: flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; padding: 0; border: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); font-size: 0; cursor: pointer; list-style: none; }
.mast-hywi > summary::-webkit-details-marker { display: none; }
.mast-hywi > summary::after { content: ""; flex: 0 0 6px; inline-size: 6px; block-size: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.mast-hywi[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.mast-hywi-control > .mast-hywi-label:hover, .mast-hywi > summary:hover { border-color: var(--color-muted); }
.mast-hywi-control > .mast-hywi-label:focus-visible, .mast-hywi > summary:focus-visible, .mast-hywi a:focus-visible { outline: var(--focus-w) solid var(--color-ink); outline-offset: 2px; }
.mast-hywi > ul { position: absolute; inset-block-start: calc(100% + var(--space-2)); inset-inline-end: 0; z-index: 30; min-inline-size: 160px; margin: 0; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-rule); background: var(--color-paper); list-style: none; }
.mast-hywi a { display: flex; align-items: center; min-block-size: 44px; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.mast-hywi a:hover { text-decoration: underline; }
.grp-hywi-control { display: flex; align-items: stretch; position: relative; flex: 0 0 104px; inline-size: 104px; block-size: 44px; }
.mast-links li.hywi-li[data-hywi-control] { display: flex; align-items: stretch; flex: 0 0 104px; inline-size: 104px; block-size: 44px; }
.mast-links .grp-hywi-control > .grp-hywi-label, .mast-links li.hywi-li[data-hywi-control] > .grp-hywi-label { display: flex; align-items: center; flex: 1 1 auto; min-inline-size: 0; color: var(--color-ink); font-size: var(--text-xs,13px); font-weight: 600; font-stretch: 114%; letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.mast-links .grp-hywi-control > .grp-hywi-label:hover, .mast-links li.hywi-li[data-hywi-control] > .grp-hywi-label:hover { text-decoration: underline; text-decoration-thickness: var(--rule-heavy,2px); text-underline-offset: .35em; }
.mast-links .grp-hywi-control > .grp-hywi-label:focus-visible, .mast-links li.hywi-li[data-hywi-control] > .grp-hywi-label:focus-visible { outline: var(--focus-w,3px) solid var(--color-ink); outline-offset: 2px; }
.mast-links .grp.grp-hywi { flex: 0 0 44px; inline-size: 44px; min-inline-size: 44px; block-size: 44px; }
.mast-links .grp.grp-hywi > summary { justify-content: center; inline-size: 44px; min-inline-size: 44px; block-size: 44px; padding: 0; }
.mast-links .grp.grp-hywi > summary::after { margin-left: 0; }
.grp-hywi-control > .grp.grp-hywi { position: static; }
@media (min-width: 48rem) {
  .tw-mast .tw-hywi-control { position: relative; }
  .tw-mast .tw-hywi-control > .tw-hywi { position: static; }
  .tw-mast .tw-hywi-control > .tw-hywi > ul { width: 128px; }
  .mast-links li.hywi-li[data-hywi-control] { position: relative; }
  .mast-links li.hywi-li[data-hywi-control] > .grp.grp-hywi { position: static; }
}
@media (max-width: 47.99rem) {
  .build-page .grp-hywi-control { flex: none; margin-inline-end: 4.25rem; } /* PILOT is pinned to the right edge of the shelf here; keep clear of it */
  .build-page .grp-hywi > ul { inset-inline: 0 auto; }
}
@media (max-width: 767px) {
  .tw-mast .tw-hywi-control { position: absolute; inset-block-start: calc(-44px - var(--space-3)); inset-inline-end: 0; flex: 0 0 auto; inline-size: auto; }
  .tw-mast .tw-hywi-control > .tw-hywi-label { padding-inline: 8.2px 0; letter-spacing: .08em; }
  .tw-mast .tw-hywi { position: relative; inset: auto; }
  .twiy-page .tw-mast .tw-hywi ul { position: absolute; inset-block-start: calc(100% + var(--space-2)); inset-inline: auto 0; width: 160px; max-width: calc(100vw - 2 * var(--space-5)); }
  .twiy-page .tw-mast .mast-links:has(> .tw-menu:not(.tw-oss)[open]) .tw-oss:not(.tw-hywi) ul { inset-block-start: calc(100% + var(--space-2) + 162px + var(--space-2)); }
  .twiy-page .tw-mast .mast-links:has(> .tw-menu:not(.tw-oss)[open]) .tw-hywi ul { inset-block-start: calc(100% + var(--space-2)); }
}
.mast .twiy-li { display: none; }
@media (max-width: 47.99rem) {
  .mast .twiy-li { display: block; }
  .mast .grp-scroll > ul > li:has(> a[href="/xv/"]), .mast .grp-scroll > ul > li:has(> a[href="/ui/"]), .mast .grp-scroll > ul > li:has(> a[href="/umbra/"]), .mast .grp-scroll > ul > li:has(> a[href="/build/"]) { display: none; }   /* the four flat T.W.I.Y. items fold into one menu */
  .mast .hywi-li { display: none; }
  .mast .mast-links li.hywi-li[data-hywi-control] { display: none; }
  .mast .mast-hywi-control { display: flex; position: absolute; inset-block-start: var(--space-5); inset-inline-end: var(--gutter); }
  .mast .mast-hywi-control > .mast-hywi-label { padding-inline: 3.8px 0; letter-spacing: .03em; }
  .mast .mast-hywi { display: block; position: relative; inset: auto; }
}
@media (max-width: 23.4rem) {
  .mast .mast-hywi-control { position: relative; inset: auto; margin-inline-start: auto; margin-block: var(--space-2) var(--space-3); }
}

/* Hallmark · S85 additions below (Perennos Tempo as a top-level item, phone nav wrap, PILOT beside the scroller) · pre-emit critique: P3 H4 E4 S4 R4 V4 */
/* S85: Perennos Tempo is its own top-level item, no longer inside OPEN SOURCE (CLAIMS C25). */
.tw-mast .tw-solo { display: flex; align-items: center; flex: 0 0 auto; min-block-size: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); font: 700 11px/1.5 var(--font-mono); letter-spacing: .12em; text-decoration: none; white-space: nowrap; }
.tw-mast .tw-solo:hover, .tw-mast .tw-solo[aria-current] { border-color: var(--color-muted); }
.tw-mast .tw-solo:focus-visible { outline: var(--focus-w) solid var(--color-ink); outline-offset: 2px; }
.build-page .nav-solo { display: flex; align-items: center; min-block-size: 44px; color: var(--color-ink); font-size: var(--text-xs,13px); font-weight: 600; font-stretch: 114%; letter-spacing: .06em; white-space: nowrap; text-decoration: none; }
.build-page .nav-solo:hover, .build-page .nav-solo[aria-current] { text-decoration: underline; text-decoration-thickness: var(--rule-heavy,2px); text-underline-offset: .35em; }
@media (max-width: 767px) {
  .twiy-page .tw-mast .mast-links { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr); }
  .tw-mast .tw-solo { padding-inline: var(--space-2); font-size: 10px; letter-spacing: .04em; justify-content: center; }
  .tw-mast .tw-menu em { display: none; }
  .twiy-page .tw-mast .tw-oss summary { padding-inline: var(--space-2); font-size: 10px; letter-spacing: 0; }
}
@media (max-width: 47.99rem) {
  .build-page .grp-shelf:has(> .nav-solo) { flex-wrap: wrap; height: auto; row-gap: 0; }
  .build-page .grp-shelf > .nav-solo { flex: 0 0 auto; margin-inline-end: var(--space-4); }
  .build-page .grp-shelf > .grp-scroll { flex: 0 0 auto; padding-inline-end: 6px; }
  .build-page .grp-shelf > .grp-hywi-control { margin-inline-end: 0; }
}
/* S85: on standard-nav pages the PILOT pill no longer floats over the scrolling list at phone width; it takes its own place at the end of the row. */
@media (max-width: 47.99rem) {
  .mast-links:has(.grp) > .grp-pilot { position: static; margin: 6px 0 0 var(--space-2); }
  .mast-links:has(.grp) > .grp-scroll { padding-inline-end: 6px; scroll-padding-inline-end: 6px; min-width: 0; }
}