/* ============================================================
   mobile.css
   The mobile layer, one file, media queries over the SAME HTML. Loaded LAST so it wins the
   cascade; every value comes from tokens.css. NO JavaScript in either band below: the menu
   and the search toggle are the checkbox hack, inherited from the reference because it is
   the better mechanism, not merely because it was there.

   The header gained one script on 2026-08-12 (assets/js/masthead.js) and it does not
   participate here: it adds Escape and outside-click to the «Ещё» <details>, which in both
   bands below is an ordinary expanding row inside the drawer and works without it.

   THE HEADER IS ONE ROW NOW, so the two bands below rebuild the stack from a single flex
   container instead of from two rows that happened to sit on top of each other. The line
   breaks come from the container's own ::before and ::after, which are flex items: that is
   the only way to force a wrap without adding elements to the markup, and the markup is
   shared with the desktop row.

   Only the masthead is covered today. The rest of the mobile layer arrives with the
   templates it belongs to.
   ============================================================ */

/* ============================================================
   THE NARROW DESKTOP BAND, 769px to 1259.98px.

   Still one real row. What leaves it is the primary nav, which moves into the panel under
   the burger; the logo, the search and the account pair stay.

   THE THRESHOLD WAS 1100 AND 1100 WAS BROKEN. It was inherited from the two-row header,
   where the bottom row carried only the lockup and the nav. This row also carries the
   search and the account pair, so it needs far more width, and nobody re-derived the
   number when the frame changed. Between 1101 and 1189 the row overflowed its own card, by
   4.03px at clientWidth 1185 and by 89px at 1101, with the account buttons hanging outside
   the white card. That is the exact failure the two-row header was built to avoid,
   reappearing in the one-row one, and it was invisible until the band was swept: at 1280 and
   above everything fits with room, so nothing looks wrong on the machine it was built on.

   The row as it stands, measured at clientWidth 1280 and 1425 (identical, the wrap caps at
   1280), in the SIGNED-IN state, which is the binding one:

     209.24  logo            (the mark at 44px, ratio 4.756)
      48.00  gap             (the row's 24 plus the logo's own margin-right)
     465.29  nav             (five labels + «Ещё» + five 24px gaps)
      24.00  gap
     160.00  search          (its FLOOR, not the 264px basis, which is what makes this a
                              minimum rather than a description of a 1280px screen)
      24.00  gap
     176.81  account pair    (103.84 + 8 + 64.97)
    1107.34  content, against rowInner = clientWidth - 124

   THE TWO NUMBERS ARE IN DIFFERENT COORDINATE SYSTEMS AND THAT NEARLY GOT WRITTEN DOWN
   WRONG. A requirement is a clientWidth, the width the layout actually gets. A media query
   is not: measured on 2026-08-12, `(max-width: N)` matches against innerWidth, i.e. WITH the
   scrollbar included, confirmed by bisecting matchMedia against a window whose innerWidth
   was 1274 and clientWidth 1259. The boundary came back at 1274.22. So at the threshold the
   layout gets 1260 on a page that does not scroll and 1245 on one that does, and 1245 is
   the number that has to be true.

   AND THE 1189.3 ABOVE IS THE GUEST STATE, WHICH IS NOT THE BINDING ONE. Corrected
   2026-08-12: the signed-in buttons are wider than the guest pair, so the signed-in row is
   the one that stops fitting first, and the session that set this threshold measured only
   the guest page. Re-swept in both states, and with the label change of the same day:

                                    min clientWidth   margin at 1245
     guest, before                      1188.64           56.36   <- what was reported
     signed in, before                  1228.80           16.20   <- what was true
     guest, now                         1212.62           32.38
     signed in, now                     1231.36           13.64   <- what is true now

   So the margin was never 56 and is now 13.64px. It is still positive, which is why the
   threshold has not moved, but it is thin and it is the number to check first if anything
   in this row grows again.

   «МОЙ КАБИНЕТ» IS LOAD-BEARING, NOT COSMETIC. Swept with the 48px gap and the OLD label,
   the requirement is 1252.78, against 1245 available at the threshold on a scrolling page:
   a 7.78px overflow. The gap change alone would have broken this band. The two shipped
   together for that reason.

   THE VALUE IS THE OWNER'S TO MOVE: it decides that a 1280 laptop keeps the full row and a
   1180 one does not. What is not negotiable is that it must leave the clientWidth above
   1231.36 on a page that scrolls, which puts its floor at about 1247.

   NOTHING NEW IS BUILT FOR THIS. It reuses the drawer exactly: the same checkbox
   (#holod-masthead-nav), the same label, the same .rfi-masthead__nav element and the same
   `:checked ~` reveal. Only the presentation differs, a panel under the burger instead of
   a band across the page.
   ============================================================ */
@media (min-width: 768.02px) and (max-width: 1259.98px) {
  .rfi-masthead { position: relative; }

  .rfi-masthead__burger {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; width: 36px; height: 36px; flex: none; cursor: pointer;
    border: 1px solid var(--rfi-border); border-radius: var(--rfi-radius);
  }
  .rfi-masthead__burger:hover { background: var(--rfi-input); }
  .rfi-masthead__burger span { display: block; width: 16px; height: 2px; background: var(--rfi-navy); border-radius: 1px; }
  .rfi-masthead__navcb:checked ~ .rfi-masthead__row .rfi-masthead__burger { background: var(--rfi-input); }

  .rfi-masthead__nav { display: none; }
  .rfi-masthead__navcb:checked ~ .rfi-masthead__row .rfi-masthead__nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 12px; margin-top: 6px; z-index: 40;
    width: 260px; padding: 8px;
    background: var(--rfi-surface); border-radius: var(--rfi-radius);
    box-shadow: var(--rfi-shadow-up);
  }
  .rfi-masthead__navcb:checked ~ .rfi-masthead__row .rfi-masthead__nav > a {
    display: flex; align-items: center; padding: 11px 14px;
    border-radius: var(--rfi-radius-sm); white-space: normal;
  }
  .rfi-masthead__navcb:checked ~ .rfi-masthead__row .rfi-masthead__nav > a:hover,
  .rfi-masthead__navcb:checked ~ .rfi-masthead__row .rfi-masthead__nav > a.is-active { background: var(--rfi-input); }

  /* THE SEARCH INHERITS A WINDFALL HERE and it has to be capped. The nav leaving the row
     frees 465px, and the field is the only elastic member, so it took all of it: measured
     585.27px at clientWidth 1185, against a 264px target. That is the elastic rule working
     exactly as specified and still being the wrong answer, because "absorbs the difference"
     was about a logo that turns out wider than assumed, not about a whole navigation.

     The cap needs the auto margin beside it. Capping alone would leave the freed space as a
     hole in the middle of the row, with the buttons floating mid-card; pushing the pair to
     the right edge puts the space where a reader expects it. Both lines are my judgement
     inside the owner's layout and both revert together. */
  .rfi-masthead__search { max-width: 380px; }
  .rfi-masthead__auth { margin-left: auto; }
}

/* ============================================================
   «ЕЩЁ» INSIDE THE DRAWER, both bands.

   It stays a <details> and stays closed until opened: it is NOT forced open by CSS. That
   was the first attempt and it was abandoned deliberately. Forcing a closed <details> to
   show its content relies on overriding a UA rule that engines implement differently
   (a slot in some, ::details-content in newer ones), so it works in the browser you test
   in and silently hides two sections in another. An expanding row is standard, needs no
   trick, and is what a reader expects inside a drawer.

   The panel only stops being an overlay: position static, no shadow, no ground of its own,
   indented so it reads as belonging to the row above it.
   ============================================================ */
@media (max-width: 1259.98px) {
  /* The 48px logo-to-nav gap is a fact about the FULL row, and below this width there is no
     nav in the row at all: the logo's neighbour is the burger. So the extra 24px that
     masthead.css adds as a margin is reset here, in the one block that covers both bands
     below the full row, rather than in each of them. Without the reset the burger would sit
     24px further right than every other gap in the header, and at 375 it would eat into a
     315px row that has none to spare. */
  .rfi-masthead__logo { margin-right: 0; }

  .rfi-masthead__more { width: 100%; }
  .rfi-masthead__moretrigger { padding: 11px 14px; min-height: 44px; border-radius: var(--rfi-radius-sm); }
  .rfi-masthead__moretrigger:hover { background: var(--rfi-input); }
  .rfi-masthead__morepanel {
    position: static; min-width: 0; padding: 0 0 4px 12px;
    background: none; box-shadow: none; border-radius: 0;
  }
  .rfi-masthead__morepanel a { padding: 10px 14px; min-height: 40px; }
}

/* ============================================================
   MOBILE, 768px and below. The one row becomes three bands, and the markup does not
   change: two full-width pseudo-element flex items cut the row into three lines.

   Band 1  a lupe on the left, the account pair on the right. The lupe checkbox expands one
           full-width field over the pair and hides the lupe.
   Band 2  the logo and a burger.
   Band 3  the drawer: the same .rfi-masthead__nav, restacked vertically, with «Ещё»
           expanding in place inside it.

   The two checkboxes are the first children of <header>, so `:checked ~` reaches the row.
   The explicit height on the mark is not optional: width:auto computes to 0 in a nested
   flex container in some engines, which was a real bug in the reference.
   ============================================================ */
@media (max-width: 768px) {

  .rfi-wrap { padding: 0 16px 24px; }
  .rfi-wrap > .rfi-masthead { margin: 12px 0 18px; }

  .rfi-masthead { padding: 0 14px; position: relative; }

  .rfi-masthead__row { flex-wrap: wrap; height: auto; gap: 10px; padding: 8px 0; }

  /* The two line breaks. A flex container's ::before and ::after ARE flex items, so a
     zero-height 100%-wide one forces a wrap exactly where its `order` puts it. This is the
     only mechanism that cuts the row into bands without adding elements, and the markup is
     shared with the desktop row where these two are inert (no flex-wrap, so they collapse
     to nothing). */
  .rfi-masthead__row::before,
  .rfi-masthead__row::after { content: ''; width: 100%; height: 0; }

  .rfi-masthead__lupe        { order: 1; }
  .rfi-masthead__search      { order: 2; }
  .rfi-masthead__searchclose { order: 3; }
  .rfi-masthead__auth        { order: 4; margin-left: auto; }
  .rfi-masthead__row::before { order: 5; }
  .rfi-masthead__logo        { order: 6; }
  .rfi-masthead__burger      { order: 7; margin-left: auto; }
  .rfi-masthead__row::after  { order: 8; }
  .rfi-masthead__nav         { order: 9; }

  /* ---- band 1: the utility strip ---- */
  .rfi-masthead__lupe {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none; cursor: pointer;
    border: 1px solid var(--rfi-border); border-radius: var(--rfi-radius);
  }
  .rfi-masthead__lupe svg { fill: var(--rfi-text-3); }

  /* The field is hidden until the lupe is pressed: a search box, two buttons and a logo do
     not share 320px, and the search is the one a reader asks for explicitly. */
  .rfi-masthead__search { display: none; }
  .rfi-masthead__auth { gap: 8px; }
  /* 44px minimum: these are the two touch targets in the header. */
  .rfi-masthead__row .rfi-btn--sm { min-height: 44px; height: 44px; font-size: 13px; padding: 0 12px; }

  /* Search open: the field takes the whole line, the lupe and the pair step aside. */
  .rfi-masthead__searchcb:checked ~ .rfi-masthead__row .rfi-masthead__lupe { display: none; }
  .rfi-masthead__searchcb:checked ~ .rfi-masthead__row .rfi-masthead__search {
    display: flex; flex: 1 1 auto; height: 38px; min-width: 0;
  }
  .rfi-masthead__searchcb:checked ~ .rfi-masthead__row .rfi-masthead__auth { display: none; }
  .rfi-masthead__searchcb:checked ~ .rfi-masthead__row .rfi-masthead__searchclose {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--rfi-text-2);
  }

  /* ---- band 2: the plate ---- */
  /* Height only, width from the file's own 1051x221. The reference had to pin an explicit
     width here because its mark was an inline SVG, whose width:auto computes to 0 in a
     nested flex container in some engines. An <img> carrying width and height attributes
     has an intrinsic ratio and does not, and the missing-file state gets the same ratio
     from aspect-ratio in masthead.css, so both states measure the same.

     36px, lowered with the desktop mark's 54 -> 44 rather than left behind. The ratio to
     desktop stays 0.82, close to what it was before (0.74) and to the reference's own
     (27 of 30), and it is a ratio of HEIGHTS, so no change of file touches it. */
  .rfi-masthead__mark { height: 36px; width: auto; }
  .rfi-brandmark__word { font-size: 15px; }

  .rfi-masthead__burger {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; width: 44px; height: 44px; flex: none; cursor: pointer;
  }
  .rfi-masthead__burger span { display: block; width: 20px; height: 2px; background: var(--rfi-navy); border-radius: 2px; }

  /* ---- band 3: the drawer ---- */
  .rfi-masthead__nav { display: none; }
  .rfi-masthead__navcb:checked ~ .rfi-masthead__row .rfi-masthead__nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%;
    margin: 2px 0 4px; border-top: 1px solid var(--rfi-border-soft); padding-top: 6px;
  }
  .rfi-masthead__navcb:checked ~ .rfi-masthead__row .rfi-masthead__nav > a {
    display: flex; align-items: center; min-height: 44px; font-size: 16px;
  }
  .rfi-masthead__nav a.is-active { color: var(--rfi-orange-text); }

  /* ---- company directory row: stack to one column --------------
     Ported from the donor's mobile.css unchanged. Desktop is a horizontal row (logo left,
     body right, tier pushed right). At the phone width that body column is too narrow: the
     tier tag lands on the name and the spec breaks one word per line. On mobile the whole
     row becomes one column, top to bottom: logo full width, then the tier tag on its own
     line, the name, the spec, and the description. */
  .rfi-colist .rfi-crow { flex-direction: column; gap: 12px; }
  .rfi-colist .rfi-crow--rich .rfi-crow__logo,
  .rfi-colist .rfi-crow--plain .rfi-crow__logo {
    width: 100%; height: auto; min-height: 72px; padding: 10px;
  }
  /* Contain, never stretch or crop: a wide banner logo scales to the row width, a small
     square one stays small and centred, both capped so a tall logo cannot dominate the row. */
  .rfi-colist .rfi-crow__logo img { width: auto; max-width: 100%; max-height: 96px; object-fit: contain; }
  .rfi-colist .rfi-crow__body { width: 100%; }
  .rfi-colist .rfi-crow__top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rfi-colist .rfi-tierbadge--row { order: -1; margin-left: 0; }   /* the tag, its own line, above the name */
}

/* ============================================================
   THE TWO THRESHOLDS, AND WHICH OF THEM IS MEASURED.

   1260  RE-DERIVED 2026-08-12 for this row, in a browser, against the real markup. The
         reasoning and the component widths are at the head of that media query. The number
         it replaces, 1100, was inherited from the two-row header and was 89px too low: it
         left the account buttons hanging outside the card everywhere between 1101 and 1189.

         THE ASSUMPTION IT CARRIES, stated because it will be what breaks next: 1189.3 is
         the requirement for THESE labels in Jost 500 16px with THIS logo at 44px. A longer
         label, a seventh item promoted out of «Ещё», a wider mark or a fallback face all
         raise it, and none of them raises this threshold by itself. The failure is visible
         rather than silent, which is the one good thing about it: buttons outside a white
         card are not subtle.

   768   INHERITED and NOT re-derived. It separates "one row with a burger" from "three
         stacked bands", and both sides of it were rebuilt this session, so the boundary is
         a design choice about when to stack rather than a fitting width. What was measured
         at 375px is that the stacked form fits with room; what was not measured is whether
         769 is still the right place to stop stacking. Recorded rather than guessed at.
   ============================================================ */