/* ============================================================
   HYYRYN — THE HEADER BALANCE
   One definition, loaded by every account page, because a figure
   about somebody's money that is written twice will eventually
   disagree with itself and the first person to notice will be
   the one it is wrong for.

   TWO ROLES, TWO COLOURS, AND THE COLOURS ARE NOT DECORATION.
   brand-identity §22: the code is three wide and each colour
   means one thing.

     NAVY  the platform's own guarantee
     GOLD  applied for, waiting, not yet granted
     GREEN money that completed the protection loop

   A HOMEOWNER looking at their balance is looking at Hyyryn
   holding money on their behalf. That is the guarantee, so it is
   NAVY, and the money is still theirs until they release it.

   A TRADESPERSON looking at their balance is looking at money
   they have earned and cannot yet reach. That is precisely
   "applied for, waiting, not yet granted", so it is GOLD.

   GREEN IS NOT USED HERE BY EITHER. Green means the loop closed
   and the money moved. A balance sitting in the header is by
   definition money that has not moved yet, and spending green on
   it would leave nothing to say when it finally does.
   ============================================================ */

.hy-bal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: none;
  padding-right: 16px;
  margin-right: 2px;
  border-right: 1px solid var(--line, #E6E0D0);
  text-decoration: none;
  line-height: 1;
}

.hy-bal-k {
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted, #636976);
  white-space: nowrap;
}

.hy-bal-v {
  font-family: var(--serif, 'Libre Caslon Text', Georgia, serif);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
}

/* the homeowner: Hyyryn's guarantee, holding money that is still theirs */
.hy-bal--home .hy-bal-v { color: var(--navy, #0A1628); }

/* the tradesperson: earned, waiting, not yet granted */
/* ══ THE GOLD PASSES ON NAVY AND FAILS ON CREAM ══════════════ 11 Sep 2026 ══
   The trade's pill is gold. On the navy masthead that is the right ink and
   reads clearly; on the cream one the same two lines measured 3.27:1 against
   the 4.5 an 11px label needs — the money figure in the masthead, the one
   number a tradesperson glances at without reading the page.

   AND IT CANNOT BE SELECTED FOR. Every trade page calls its masthead
   `.topbar`; browse-tradesperson paints that navy and the other five paint it
   cream. A first attempt guessed the other way round and took the failure from
   3.27 to 2.04, which is what guessing at a ground costs. `hyyryn-balance.js`
   measures the composited ground under the pill and puts `hy-bal--on-dark` on
   it when it is dark, which is the only version of this that cannot drift. */
.hy-bal--trade .hy-bal-v { color: var(--gold-ink, #5D4620); }
.hy-bal--trade .hy-bal-k { color: var(--gold-ink, #5D4620); }
/* MEASURED, ALL FOUR CANDIDATES, RATHER THAN PICKED:

       ink          on navy   on cream
       --gold         3.27      5.23
       --gold-ink     2.04      8.38
       #D4A943        8.25      2.07
       --cream       17.08      1.00

   `--gold` is a dark ink: it belongs on cream, where it passes at 5.23, and
   it was failing at 3.27 on the navy masthead. #D4A943 is the bright member
   of the same family — the one this site already uses for a star on navy —
   and it passes at 8.25 while keeping the pill gold, which is what tells a
   tradesperson at a glance that this figure is theirs. Neither end of the
   pair is a new colour. */
.hy-bal--trade.hy-bal--on-dark .hy-bal-v,
.hy-bal--trade.hy-bal--on-dark .hy-bal-k { color: var(--gold-soft, #D4A943); }
.hy-bal--home.hy-bal--on-dark .hy-bal-v,
.hy-bal--home.hy-bal--on-dark .hy-bal-k { color: var(--cream, #FAF8F3); }

/* A LINK, WHERE IT IS ONE. Both roles have a page that explains the
   figure, so the balance goes there rather than being a dead label. */
a.hy-bal { transition: border-color 160ms ease; }
a.hy-bal:hover { border-right-color: var(--line-2, #D8CFB8); }
a.hy-bal:hover .hy-bal-k { color: var(--navy, #0A1628); }
a.hy-bal--trade:hover .hy-bal-k { color: var(--gold-ink, #5D4620); }
a.hy-bal:focus-visible { outline: 2px solid var(--navy, #0A1628); outline-offset: 3px; }

/* On a narrow bar the search, the account and the hamburger already
   compete. The balance is the one thing here that is repeated on the
   page itself, so it is the one that goes. */
@media (max-width: 880px) { .hy-bal { display: none; } }

/* the [hidden] trap: an author display value beats the UA sheet, so a
   page that hides this for a signed-out visitor needs the rule stated. */
.hy-bal[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { a.hy-bal { transition: none; } }

/* ============================================================
   THE BALANCE SITS INSIDE THE ACCOUNT CONTROL, Sir 4 Sep 2026.

   Every masthead on the site right-aligns its account control with
   `margin-left: auto` inside a `space-between` row. A pill placed
   before it as a SIBLING therefore does not travel with it: the
   free space opens between the two and the balance drifts back to
   the wordmark. Measured at 1440 before this rule: 1101px of gap
   on results, 177px on transactions.

   So the pill becomes a CHILD of the control and the control
   becomes the row. 14px is not a new number, it is the gap the
   kit bar already uses, and with the pill's own 16px of padding
   and 2px margin it reproduces the spacing the finished pages
   were measured at.
   ============================================================ */
.nm-acct.has-bal,
.acct-wrap.has-bal { display: flex; align-items: center; gap: 14px; }

/* nothing in that row may be squeezed by the pill's text */
.nm-acct.has-bal > .nm-right,
.nm-acct.has-bal > button,
.acct-wrap.has-bal > .acct { flex: none; }