/* a v1d site's bar: 56 px at a desk and 48 on a phone, a hairline under it, the mark on the site's left edge, the destinations as words, the use value and
   the face at its right */
.part-site-header { box-sizing: border-box; display: flex; min-width: 0; align-items: center; gap: var(--space-6); height: var(--site-bar-h, 56px);
  padding: 0 var(--site-edge, var(--space-6));
  border-bottom: 1px solid var(--border); font-family: var(--font); color: var(--fg); }
.part-site-mark { display: inline-flex; align-items: center; flex: none; color: var(--fg); font-size: var(--site-mark-size); line-height: 0;
  text-decoration: none; }
.part-site-mark:focus-visible, .part-site-nav > a:focus-visible, .part-site-use:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px;
  border-radius: var(--radius-small); }
.part-site-nav { display: flex; align-items: center; gap: var(--space-4); min-width: 0; font-size: var(--type-body); font-weight: 600; }
.part-site-nav > a { display: inline-flex; align-items: center; min-height: var(--control-h); color: var(--muted); text-decoration: none; white-space: nowrap; }
.part-site-nav > a[aria-current] { color: var(--fg); }
.part-site-nav > a > .word { text-box: trim-both cap alphabetic; }   /* on the middle of its capitals, as the presses beside it */
@media (hover: hover) { .part-site-nav > a:hover { color: var(--fg); } }
.part-site-end { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; flex: none; }
.part-site-facts { display: flex; align-items: center; gap: var(--space-2); }
/* the use value: the box meter with its number on a raised ground, a control's height; its boxes stand as bars */
.part-site-use { box-sizing: border-box; display: inline-flex; align-items: center; height: var(--control-h); padding: 0 var(--space-3);
  border-radius: var(--radius);
  background: var(--raised); color: var(--fg); text-decoration: none; }
.part-site-use .part-box-meter { --meter-size: 4px; --meter-height: 12px; }
a.part-site-use:active { background: var(--control); }
/* who is signed in: the account menu's face, a control's height, in a finger's 44 px whose edge is the site's */
.part-site-end > v1d-account { margin-right: calc((var(--control-h) - var(--site-face-reach)) / 2); }
/* a phone: the mark's tag alone, the words scroll sideways under a fade where they do not fit, the state marks go to the title line; the face's 44 px
   at the bar's end */
@media (max-width: 899px) {
  .part-site-header { gap: var(--space-3); padding-right: var(--space-1); }
  .part-site-mark { overflow: hidden; }
  .part-site-mark > .mark-badge { margin-left: calc(-1 * var(--site-chip-at)); }
  .part-site-nav { flex: 1; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, var(--fg) calc(100% - var(--space-6)), transparent); }
  .part-site-nav::-webkit-scrollbar { display: none; }
  .part-site-end { gap: var(--space-1); }
  .part-site-facts { display: none; }
  .part-site-end > v1d-account { margin-right: 0; }
  .part-site-sign-in { margin-right: var(--space-2); }
}
/* where the browser can tell, the fade stands only while the words scroll and goes at their end, so words that fit are never faded (row S15) */
@supports (animation-timeline: scroll()) {
  @media (max-width: 899px) { .part-site-nav { mask-image: none; animation: part-site-nav-fade linear both; animation-timeline: scroll(self inline); } }
}
@keyframes part-site-nav-fade { from, 99% { mask-image: linear-gradient(90deg, var(--fg) calc(100% - var(--space-6)), transparent); } to { mask-image: none; } }
/* under 400 px the gaps close a step, so a signed-in bar holds three words beside the use value and the face (row S15: the API's Agents scrolled 11 px
   at 390) */
@media (max-width: 399px) {
  .part-site-header { gap: var(--space-2); }
  .part-site-nav { gap: var(--space-3); }
  .part-site-use { padding: 0 var(--space-2); }
}