/* Fixed over the photograph, then over the sheet.
 * The header is transparent on the hero, where the photograph carries it. Once
 * the sheet has risen past it the ground beneath is white, so white nav text
 * would disappear: at that point it takes the sheet's own ground and ink. The
 * swap is driven by data-covered, which site/scroll.js sets from scroll
 * position — it is a legibility rule, not decoration, so it runs under reduced
 * motion too. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--resurs-header-height);
  padding-inline: var(--resurs-header-inset);
  color: var(--resurs-on-photo);
  transition: background var(--resurs-quick) var(--resurs-ease),
              color var(--resurs-quick) var(--resurs-ease),
              border-color var(--resurs-quick) var(--resurs-ease);
  border-bottom: 1px solid transparent;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.brand .icon { width: 30px; height: 30px; }
/* The rendered emblem, the triangle without the word: the word beside it is
   typed. Height is the contract; width follows the asset's own aspect. */
.brand-mark { display: block; height: 40px; width: auto; }
.brand-word {
  font-size: var(--resurs-size-mark);
  letter-spacing: 0.08em;
  /* Semibold: the client's own lockup sets the word heavy under the triangle,
     and a light word beside the emblem reads as two things, not one mark. */
  font-weight: 600;
}

/* Seven destinations now stand here, not four: his section 1, in his order.
   At the nav size with the old gap they run into the actions at 1440, so the
   bar gives on both — one step down in type, twelve px out of each gap. The
   mark and the bar's own box do not move. */
.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-inline: auto;
  font-size: var(--resurs-size-small);
  white-space: nowrap;
}
.site-nav a { opacity: 0.92; transition: opacity var(--resurs-quick) var(--resurs-ease); }
.site-nav a:hover { opacity: 1; }

.site-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  font-size: var(--resurs-size-nav);
}

/* Over the sheet. */
[data-covered='true'] .site-header {
  background: var(--resurs-ground);
  color: var(--resurs-ink);
  border-bottom-color: var(--resurs-hairline);
}
[data-covered='true'] .pill-outline {
  border-color: var(--resurs-hairline);
  color: var(--resurs-ink);
}
[data-covered='true'] .pill-outline:hover { background: var(--resurs-surface); }
/* On the light ground the brushed-metal emblem dissolves: its lines are pale
   greys on white. Lifted contrast and a hairline of shadow keep it a mark and
   not a smudge; over the photograph it needs nothing. */
[data-covered='true'] .brand-mark {
  filter: contrast(1.35) brightness(0.85) drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.45));
}

@media (max-width: 1080px) {
  .site-header { padding-inline: var(--resurs-gutter); gap: 20px; }
  .site-nav { gap: 22px; font-size: var(--resurs-size-meta); }
  .site-actions { gap: 16px; }
}

/* --- each family gives where its own row stops fitting ---------------------
   Measured on master, 2026-09-06 (evidence: chrome-861/root-cause.json,
   chrome-861/intrinsic-rows.json). Every bar on this site is a flex row of
   three children and not one of them can give: the mark and the actions are
   flex:none, and .site-nav is white-space:nowrap, so its min-content width IS
   its words. Each builder's row therefore has ONE intrinsic width whatever the
   viewport is, and because the bar is position:fixed everything past the right
   edge is unreachable rather than scrollable - no scrollbar, no gesture.

   Two builders, two measured widths, two rules. site/header.js's seven
   destinations make a 1262px row on all eight of its routes (1216px once the
   1080 step-down lands): from 861 to 1215 its trigger's box stood at
   x=1167..1262 and a click on it timed out. site/platform-chrome.js and
   site/departments/index.html raise four destinations and a 960px row - 961px
   on the fifteen dossiers and their siblings, so 960 is the last width at which
   any of the thirty-one overflows: below 961 their actions hung up to 99px off
   the edge with no control at all, the <summary> having appeared only below
   861. Above its own threshold each row fits, and a nav that fits stands.

   No type or gap shaves 400px off seven Russian words beside the mark and two
   calls, so where a row cannot fit the nav gives exactly as it already gave
   below 861: the mega-menu and the disclosure each hold the destinations the
   bar was showing, and the control that opens them is what stays. */
@media (max-width: 1279px) {
  /* The seven. Scoped to the bar that carries the trigger, because only that
     bar has somewhere to put them - the other family's row fits this whole
     band and hiding it would take away a route and give nothing back. */
  .site-header:has(.menu-trigger) .site-nav { display: none; }
  /* The nav's own margin-inline:auto went with it; the actions keep the right
     edge they hold at 1440. */
  .site-header:has(.menu-trigger) .site-actions { margin-left: auto; }
}

/* --- the plain-nav disclosure --------------------------------------------- */
/* site/platform-chrome.js and site/departments/index.html each build their
   own bar rather than mounting site/header.js (its own comment says why:
   both predate the mega-menu and are owed to it, not this lane's job to
   merge). Their .site-nav loses its box the same way the real header's
   does at <=860px, but neither ever had a trigger to bring it back - a
   route on these six pages was reachable at 1440 and gone at 390. A native
   <details> beside the same .site-nav they already build costs no new
   content key and no JS: closed by default past the breakpoint, its
   <summary> IS the trigger, and it needs nothing from site/header.js's own
   animated mega-panel. Above this family's own threshold - 961px, where its
   960/961px row starts fitting - the trigger is simply not there: the bar is
   a flex row with a 32px gap, and display:contents on a <details> still leaves
   the shadow slots claiming one gap of it (measured: the nav moved 16px), so
   the control is display:none instead. It is not merely invisible there: while
   it was, its own 44px box was IN the row, and the row it lengthened then
   overflowed at 961 by 39px and at 1000 by 1px - measured 2026-09-06, which is
   how this rule proved it is load-bearing rather than cosmetic. Nothing else in the bar
   moves, which is what the pixel diff against master says.

   The nav is the disclosure's SIBLING and is not inside it. It was inside
   until this lane, and that was a live defect: measured in this repo's
   Chromium (130.0.6723.31), a closed <details> hides its content through its
   shadow slot and display:contents on the host does not reach it, so the
   primary nav was invisible at 1440 on all seven routes that used the pattern
   - the links were in the DOM and no reader could see them. A control that
   owns only itself, and an adjacent-sibling rule for what it opens, is the
   shape that holds at both widths. */
.mobile-nav { display: none; }

/* --- the four, below 961 -------------------------------------------------- */
@media (max-width: 960px) {
  .site-nav { display: none; }
  .site-actions { margin-left: auto; }
  .mobile-nav { display: block; order: 2; }
  .mobile-nav > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--resurs-hairline);
    border-radius: var(--resurs-radius-pill);
    background: var(--resurs-ground);
    color: var(--resurs-ink);
    cursor: pointer;
    list-style: none;
  }
  .mobile-nav > summary::-webkit-details-marker,
  .mobile-nav > summary::marker { display: none; content: ''; }
  html:not([data-covered='true']) .mobile-nav > summary {
    background: transparent;
    border-color: var(--resurs-glass-edge);
    color: var(--resurs-on-photo);
  }
  .mobile-nav[open] > summary { background: var(--resurs-surface); }
  /* Closed, .site-nav keeps the blanket display:none above; open, this rule
     is the more specific one and wins regardless of source order. */
  .mobile-nav[open] + .site-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: var(--resurs-header-height) 0 auto 0;
    z-index: 9;
    max-height: calc(100vh - var(--resurs-header-height));
    overflow: auto;
    padding: 16px var(--resurs-gutter) 24px;
    gap: 4px;
    background: var(--resurs-ground);
    color: var(--resurs-ink);
    border-top: 1px solid var(--resurs-hairline);
    box-shadow: var(--resurs-panel-lift);
    font-size: var(--resurs-size-nav);
  }
  .mobile-nav[open] + .site-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* At 860 and under the phone kit is the page on every route it serves, and the
   bar keeps one call beside the mark: the sign-in leaves, and the trigger drops
   its word for a square. Only these two are width-bound - the collapse above is
   what both bar families share. */
@media (max-width: 860px) {
  .site-actions .ghost { display: none; }
  /* The trigger loses its word and becomes a square: the menu is now the whole
     navigation at this width, so it must not crowd the one call beside it.
     min-height/min-width hold the touch target at 44px even where the
     visible glyph stays smaller — a square icon button is exactly the case
     min-height alone cannot cover. */
  .menu-trigger-word { display: none; }
  .menu-trigger { width: 44px; min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
}
@media (max-width: 560px) {
  .site-header { height: 64px; }
  /* The bar is 64px here but --resurs-header-height is still 76.9px, so the
     panel opened 13px below the bar and the page showed through the strip.
     The same override .mega already carries at this width. */
  .mobile-nav[open] + .site-nav { inset: 64px 0 auto 0; max-height: calc(100vh - 64px); }
  .brand .icon { width: 26px; height: 26px; }
  .brand-mark { height: 32px; }
  /* The glyphs shrink for density; the tap target does not. Padding-block
     grows the link's own box past its content without moving the content -
     the header still centres it inside the fixed 64px bar. */
  .brand { padding-block: 6px; min-height: 44px; }
  .pill-outline { padding: 6px 6px 6px 16px; gap: 10px; min-height: 44px; }
  .pill-outline .dot { width: 26px; height: 26px; }
}

/* --- the trigger ---------------------------------------------------------- */
/* A third pill shape, and the only control in the bar: outlined like the call
   beside it, sized to it, and carrying the state of the panel it opens. */
.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--resurs-hairline);
  border-radius: var(--resurs-radius-pill);
  background: var(--resurs-ground);
  color: var(--resurs-ink);
  font: inherit;
  font-size: var(--resurs-size-small);
  cursor: pointer;
  transition: background var(--resurs-quick) var(--resurs-ease),
              border-color var(--resurs-quick) var(--resurs-ease);
}
.menu-trigger:hover { background: var(--resurs-surface); border-color: var(--resurs-field-edge-hover); }
.menu-trigger .icon { display: block; }
.menu-trigger-close { display: none; }
.menu-trigger[aria-expanded='true'] .menu-trigger-open { display: none; }
.menu-trigger[aria-expanded='true'] .menu-trigger-close { display: block; }
.menu-trigger[aria-expanded='true'] { background: var(--resurs-surface); }

/* Over the photograph the bar has no ground of its own, so neither may the
   trigger: it borrows the glass edge the call beside it already uses. */
html:not([data-covered='true']) .menu-trigger {
  background: transparent;
  border-color: var(--resurs-glass-edge);
  color: var(--resurs-on-photo);
}
html:not([data-covered='true']) .menu-trigger:hover { background: var(--resurs-glass-fill); }

/* Once the page has moved under a bar that already stands on white. Over the
   photograph the photograph carries it and a shadow would sit on nothing. */
[data-covered='true'][data-scrolled='true'] .site-header { box-shadow: var(--resurs-header-shadow); }
.pill-download { padding-left: 20px; }
.pill-ink { border-color: var(--resurs-hairline); color: var(--resurs-ink); }
.pill-ink:hover { background: var(--resurs-surface); }

/* --- the menu ------------------------------------------------------------- */
/* Nothing scrolls under an open menu. */
html[data-menu='open'], html[data-menu='opening'] { overflow: hidden; }

.menu-veil {
  position: fixed;
  inset: 0;
  z-index: 8;
  background: var(--resurs-veil);
  opacity: 0;
  transition: opacity var(--resurs-open) var(--resurs-ease);
}
.menu-veil[data-state='open'], .menu-veil[data-state='opening'] { opacity: 1; }

.menu-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--resurs-hairline);
  border-radius: 50%;
  background: var(--resurs-ground);
  color: var(--resurs-ink);
  cursor: pointer;
  transition: background var(--resurs-quick) var(--resurs-ease);
}
.menu-close:hover { background: var(--resurs-surface); }

/* The panel: full width, under the bar. What stands inside it is
   site/menu.css's, loaded after this sheet. */
.mega {
  position: fixed;
  top: var(--resurs-header-height);
  left: 0;
  right: 0;
  z-index: 9;
  max-height: calc(100vh - var(--resurs-header-height));
  overflow: auto;
  padding: 28px 0 32px;
  background: var(--resurs-ground);
  border-top: 1px solid var(--resurs-hairline);
  box-shadow: var(--resurs-panel-lift);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--resurs-open) var(--resurs-ease),
              transform var(--resurs-open) var(--resurs-ease);
}
.mega[data-state='open'], .mega[data-state='opening'] { opacity: 1; transform: none; }
.mega .menu-close { position: absolute; top: 20px; right: var(--resurs-header-inset); }

@media (max-width: 560px) {
  .mega { top: 64px; max-height: calc(100vh - 64px); padding: 20px 0 28px; }
  .mega .menu-close { top: 14px; right: var(--resurs-gutter); }
  /* Every site-actions CTA collapses to its icon here, not only the download
     pill: the platform family (site/platform-chrome.js) and the departments
     route's own inline header both build the same pill.pill-outline shape
     for their own call («Оставить заявку» / applyCta) with no collapse of
     their own, which pushed the bar wider than 360px carries. One rule
     scoped to .site-actions covers all three header builders at once,
     matching the collapse the download pill already had. */
  .site-actions .pill-outline > span:first-child { display: none; }
  /* Icon-only now: min-width joins the pill-outline min-height so the square
     button holds 44x44 rather than shrinking to its icon's own width. */
  .site-actions .pill-outline { padding: 6px; min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-veil, .mega, .menu-trigger, .menu-close { transition: none; }
}