/* Navigation rail (desktop/tablet) and the same component as a drawer (< 768px).
   Geometry: 76 ↔ 208px, 16px inset, 32px radius. The dark shape is an SVG path
   generated by railPath() in rail.js and redrawn while the width transitions. */

.rail {
  --rail-item-h: 56px;
  --rail-item-gap: 8px;
  --rail-pad-x: 9px;
  --rail-icon-x: 17px;           /* icon left offset inside an item: centre stays at x = 38px */
  position: fixed;
  top: var(--rail-inset);
  bottom: var(--rail-inset);
  left: var(--rail-inset);
  z-index: var(--z-rail);
  width: var(--rail-w);
  color: var(--rail-ink);
  /* collapse: labels fade first, then the width narrows */
  transition: width var(--dur-rail) var(--ease-out) 100ms;
}
.rail[data-expanded='true'] {
  width: var(--rail-w-open);
  transition: width var(--dur-rail) var(--ease-out) 0ms;
}
.rail[data-instant],
.rail[data-instant] *,
.rail[data-instant] *::before,
.rail[data-instant] *::after { transition: none !important; }

.rail__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.rail__fill { fill: var(--rail-bg); }
/* The overlay shadow follows the width: it grows with the panel on expand and fades with it on
   collapse (same 100ms delay), instead of popping on/off at the first frame. */
.rail__shape { transition: filter var(--dur-rail) var(--ease-out) 100ms; }
.rail[data-expanded='true'] .rail__shape {
  filter: drop-shadow(0 16px 28px rgba(25, 27, 32, .16));
  transition: filter var(--dur-rail) var(--ease-out) 0ms;
}

/* Highlighted short segment of the right contour, next to the island. */
.rail__edge {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 34 100000;
  opacity: 0;
  transition:
    stroke-dashoffset 260ms var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
.rail[data-island='on'] .rail__edge { opacity: 1; }
.rail__edge.is-jump,
.rail__island.is-jump { transition: opacity var(--dur-fast) var(--ease-out); }

.rail__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px var(--rail-pad-x) 40px;
}

.rail__brand {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--rail-w) - 2 * var(--rail-pad-x));
  height: 52px;
  border-radius: var(--radius-md);
  color: var(--rail-ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.rail__brand:hover { color: #FFFFFF; }
.rail__brand:focus-visible,
.rail__toggle:focus-visible,
.rail__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.rail__toggle {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: 16px 0 0 calc((var(--rail-w) - 2 * var(--rail-pad-x) - 44px) / 2);
  border-radius: 50%;
  color: var(--rail-ink);
  -webkit-tap-highlight-color: transparent;
}
.rail__toggle::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(245, 245, 243, .26);
  border-radius: 50%;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.rail__toggle:hover::before { border-color: rgba(245, 245, 243, .6); background: rgba(245, 245, 243, .06); }
.rail__toggle svg {
  position: relative;
  width: 18px;
  height: 18px;
  transition: transform var(--dur-rail) var(--ease-out);
}
.rail[data-expanded='true'] .rail__toggle svg { transform: rotate(180deg); }

.rail__nav {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 24px;
}
.rail__list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--rail-item-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rail__spacer { flex: 1 1 auto; min-height: 12px; }
.rail__divider {
  flex: none;
  height: 1px;
  margin: 0 13px 22px;
  background: rgba(245, 245, 243, .16);
}

.rail__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: var(--rail-item-h);
  padding: 0 12px 0 var(--rail-icon-x);
  border-radius: var(--radius-md);
  color: var(--rail-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-rail) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rail__link:hover { color: #FFFFFF; }
/* Icons occupy a 24px slot (centre fixed at x = 38px); negative margins enlarge them around that centre.
   max-width: none — the base reset (svg { max-width: 100% }) would clamp larger glyphs to the link's 29px content
   box, shrinking them and pulling their centre off x = 38px. The rail's own solid icons (rail-buy … rail-cart)
   are sized in brand.css. */
.rail__link svg { width: 28px; height: 28px; max-width: none; flex: none; margin: 0 -2px; }
/* Cart / Steam have no island: they use a local hover fill. */
.rail__link--plain:hover { background: rgba(245, 245, 243, .07); }

/* The rail's blues are the accent tokens only (review #15): --accent for the tile under a white icon, and
   --accent-strong where white text sits on it (the label of the expanded rail / drawer, the badge: 4.6:1). */
/* …and never on the balance wallet, which is a readout and not a section of the rail (owner, 06.10.2026) */
.rail__link:not(.rail__bal-link)[aria-current='page'] { background: var(--accent); color: #FFFFFF; }
.rail[data-expanded='true'] .rail__link:not(.rail__bal-link)[aria-current='page'],
.rail[data-mode='drawer'] .rail__link:not(.rail__bal-link)[aria-current='page'] { background: var(--accent-strong); }

.rail__label {
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition:
    opacity 120ms var(--ease-out),
    transform 120ms var(--ease-out),
    visibility 0s linear 120ms;
}
.rail[data-expanded='true'] .rail__label,
.rail[data-mode='drawer'] .rail__label {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 200ms var(--ease-out) 80ms,
    transform 240ms var(--ease-out) 80ms,
    visibility 0s linear 0s;
}

/* At the bag's upper right (icons.js rail-cart). Anchored by its right edge (slot centre + 24px) and growing to
   the left: one digit clears the bag's handle, the ring ends where the label begins, and «12» / «99+» stay inside
   the collapsed 58px link instead of running into its rounded corner or onto the label. */
.rail__badge {
  position: absolute;
  top: calc(var(--rail-item-h) / 2 - 20px);
  left: calc(var(--rail-icon-x) + 36px);
  transform: translateX(-100%);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent-strong);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--rail-bg);
}
/* on the current item's tile: a white badge, ringed in the tile's own blue so it stays apart from the white bag */
.rail__link[aria-current='page'] .rail__badge { background: #FFFFFF; color: var(--accent-ink); box-shadow: 0 0 0 2px var(--accent); }
.rail[data-expanded='true'] .rail__link[aria-current='page'] .rail__badge,
.rail[data-mode='drawer'] .rail__link[aria-current='page'] .rail__badge { box-shadow: 0 0 0 2px var(--accent-strong); }

/* Hover / focus island: one capsule that slides between the main items. */
.rail__island {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: var(--rail-item-h);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  opacity: 0;
  transform: translate3d(0, var(--island-y, 0px), 0);
  pointer-events: none;
  transition:
    transform 260ms var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
.rail[data-island='on'] .rail__island { opacity: 1; }

/* Collapsed tooltip (visual only; every control carries aria-label). */
.rail__tip {
  position: absolute;
  top: 0;
  left: calc(100% + 12px);
  z-index: 2;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-4px, calc(var(--tip-y, 0px) - 50%), 0);
  pointer-events: none;
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out), visibility 0s linear 140ms;
}
.rail__tip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -4px;
  width: 8px;
  height: 8px;
  background: inherit;
  border-radius: 2px;
  transform: translateY(-50%) rotate(45deg);
}
.rail__tip[data-show='true'] {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, calc(var(--tip-y, 0px) - 50%), 0);
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out), visibility 0s;
}
.rail[data-expanded='true'] .rail__tip { display: none; }

.rail-scrim { display: none; }

/* Currency (components/rail.js, above the divider). The round sign sits in the 24px icon slot (centre stays at
   x = 38px); expanded / drawer: «Валюта», the code and a chevron. */
.rail__currency { display: flex; flex: none; flex-direction: column; gap: var(--rail-item-gap, 6px); margin-bottom: 14px; }
/* Language (same button + menu as the currency): the round flag of the language (components/flags.js) */
.flag {
  display: inline-block;
  flex: none;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(25, 27, 32, .12);   /* the white of the flags keeps its edge on the white menu */
}
/* the picture fills the circle edge to edge (assets/flags/*.png are square crops of the flag itself) */
.flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* on the dark rail: no ring — the flag is the whole circle */
.rail__flag { width: 26px; height: 26px; margin: 0 -1px; box-shadow: none; }
.cur-pop--language { width: 208px; }
.cur-menu__item.cur-menu__item--lang { grid-template-columns: 28px minmax(0, 1fr); }
.cur-sign {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cur-bg, var(--accent));
  color: var(--cur-ink, #FFFFFF);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.rail__cur-sign { width: 26px; height: 26px; margin: 0 -1px; font-size: 14px; }
/* «Валюта  RUB ›» / «Язык  RU ›»: the code sits on the word's baseline (not centred higher, user 2026-10-03), in
   a column of its own so RUB and RU start at the same x one under the other; the chevron stays centred */
.rail__cur-text { display: flex; align-items: baseline; gap: 4px; flex: 1 1 auto; min-width: 0; }
/* the word gives way first (never pushes the code column or the chevron out of line: «Language» is long) */
.rail__cur-word { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rail__cur-code {
  flex: none;
  width: 32px;                       /* as wide as «RUB» / «USD»: «RU» / «EN» / «KZT» / «EUR» start at the same x */
  color: var(--rail-ink-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .01em;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
/* 14px and pulled 2px in: «Language» (the longest word) still fits the 208px rail beside the code column */
.rail__link .rail__cur-chev { align-self: center; width: 14px; height: 14px; margin: 0 0 0 -2px; color: var(--rail-ink-2); }
.rail__cur[aria-expanded='true'] { background: rgba(245, 245, 243, .1); color: #FFFFFF; }

/* The menu: a light island beside the rail (above the button in the drawer); --cur-y is set by rail.js. */
.cur-pop {
  position: absolute;
  top: var(--cur-y, 0px);
  left: calc(100% + 12px);
  z-index: 3;
  width: 272px;
  padding: 6px;
  border: 1px solid rgba(25, 27, 32, .08);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 22px 48px -16px rgba(25, 27, 32, .28), 0 2px 6px rgba(25, 27, 32, .06);
  animation: cur-pop-in 160ms var(--ease-out);
}
.cur-pop[hidden] { display: none; }
.cur-pop.is-instant { animation: none; }
@keyframes cur-pop-in { from { opacity: 0; transform: translateX(-6px) scale(.985); } }
.rail[data-mode='drawer'] .cur-pop { left: 9px; width: min(272px, calc(100vw - 34px)); }

.cur-menu { display: flex; flex-direction: column; gap: 2px; }
.cur-menu__item {
  display: grid;
  grid-template-columns: 28px 42px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 44px;
  padding: 0 12px 0 8px;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.cur-menu__code { color: var(--ink); font-size: var(--fs-base); font-weight: 700; letter-spacing: .01em; }
.cur-menu__name { overflow: hidden; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
.cur-menu__rate { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cur-menu__item:hover,
.cur-menu__item:focus { background: var(--surface-sunken); }
.cur-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.cur-menu__item[aria-checked='true'] { background: var(--accent-tint); }
.cur-menu__item[aria-checked='true']:hover,
.cur-menu__item[aria-checked='true']:focus { background: #DDE9FF; }
.cur-menu__item[aria-checked='true'] .cur-menu__code { color: var(--accent-ink); }
/* «[bank] ЦБ РФ · 03.10.2026   [↻] 5 мин»: one quiet line, the parts wrap under each other rather than widen */
.cur-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.cur-note__part { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cur-note__part .icon { flex: none; color: var(--ink-3); }
.cur-note__upd { font-variant-numeric: tabular-nums; }
.cur-pop__note {
  margin: 4px 0 0;
  padding: 8px 10px 4px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  line-height: 1.35;
}
@media (prefers-reduced-motion: reduce) { .cur-pop { animation: none; } }

/* Short viewports: tighten vertical rhythm (icons still never move on expand). */
@media (min-width: 768px) and (max-height: 760px) {
  .rail { --rail-item-h: 50px; --rail-item-gap: 4px; }
  .rail__inner { padding-top: 14px; padding-bottom: 16px; }
  .rail__brand { height: 48px; }
  .rail__toggle { margin-top: 10px; }
  .rail__nav { margin-top: 16px; }
  .rail__currency { margin-bottom: 8px; }
  .rail__divider { margin-bottom: 10px; }
}
/* (up to 619px: the 50px rhythm's column is 583px tall — it fits a 615px viewport; measured 2026-10-05) */
@media (min-width: 768px) and (max-height: 619.98px) {
  .rail { --rail-item-h: 44px; --rail-item-gap: 2px; }
  .rail__inner { padding-top: 8px; padding-bottom: 8px; }
  .rail__brand { height: 44px; }
  .rail__toggle { margin-top: 4px; }
  .rail__nav { margin-top: 8px; }
  .rail__currency { margin-bottom: 4px; }
  .rail__divider { margin-bottom: 6px; }
}
/* Landscape phones (e.g. 844×390): the items no longer fit, so the column scrolls instead of
   pushing Корзина/Steam off-screen. Focus rings stay inside the 9px side padding.
   540px, not 500: with the currency and the language items the 600px-block column is 493px tall (fits a 525px
   viewport; measured 2026-10-05). Signed in it is taller still: see «Account» below. */
@media (min-width: 768px) and (max-height: 539.98px) {
  .rail { --rail-item-gap: 0px; }
  .rail__inner {
    padding-top: 6px;
    padding-bottom: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .rail__inner::-webkit-scrollbar { display: none; }
  .rail__toggle { margin-top: 0; }
  .rail__nav { flex: 1 0 auto; margin-top: 4px; }
  .rail__spacer { min-height: 8px; }
  .rail__currency { margin-bottom: 2px; }
  .rail__divider { margin-bottom: 4px; }
}

/* Drawer (< 768px) --------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* [data-expanded] is listed so a persisted desktop "expanded" state cannot override the slide-out. */
  .rail,
  .rail[data-expanded] {
    top: 8px;
    bottom: 8px;
    left: 8px;
    z-index: var(--z-drawer);
    visibility: hidden;
    transform: translateX(calc(-100% - 16px));
    transition: transform var(--dur-rail) var(--ease-out), visibility 0s linear var(--dur-rail);
  }
  .rail[data-mode='drawer'] { width: var(--rail-w-open); }
  .rail[data-drawer-open='true'] {
    visibility: visible;
    transform: none;
    transition: transform var(--dur-rail) var(--ease-out), visibility 0s;
  }
  .rail[data-mode='drawer'] .rail__tip { display: none; }
  .rail[data-mode='drawer'] .rail__toggle svg { transform: none; }
  .rail[data-mode='drawer'] .rail__shape { filter: drop-shadow(0 16px 32px rgba(25, 27, 32, .24)); }

  .rail-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: rgba(25, 27, 32, .44);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-rail) var(--ease-out), visibility 0s linear var(--dur-rail);
  }
  .rail-scrim[data-open='true'] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-rail) var(--ease-out), visibility 0s;
  }
}

/* Short phones (the drawer uses the full rhythm): a slimmer bottom padding keeps the column — currency item
   included — inside a 667px screen; anything shorter scrolls like the landscape rail. */
@media (max-width: 767.98px) and (max-height: 699.98px) {
  .rail__inner {
    padding-bottom: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .rail__inner::-webkit-scrollbar { display: none; }
  .rail__nav { flex: 1 0 auto; }
}

/* the official Steam logo (components/game-logos.js steamLogo) at the icon size of the other items */
/* margin: the 25px logo fills the same 24px slot as the 28px glyphs (−2px each side): label and centre line up with
   the other items (review #17) */
.rail__link .rail__steam { width: 25px; height: 26px; max-width: none; flex: none; margin: 0 -0.5px; }
/* «Войти через / Steam»: two short lines, so the label always fits the 208px rail whatever the font metrics */
.rail__label--2l { white-space: normal; line-height: 1.15; }

/* The wallet (components/rail.js railBalanceHTML / topbarBalanceHTML, filled by components/balance-ui.js) -----------
   Shown after the Steam sign-in, between «Корзина» and the Steam account: the two balances of core/balance.js
   (BALANCE_GROUPS), each a NAMED part with a round mark of its own — the wallet for «Основной баланс», the bolt for
   «Быстрый баланс» (owner, 06.10.2026: «добавь две иконки … чтобы это выглядело красиво», and the rest of the rail
   is neat, so the wallet must belong to its family).
   Built the way the rail builds a row — the 26px round sign in the 24px icon slot (centre x = 38px, as «Валюта» and
   «Язык» have it), the label column beside it, the name fading in with the rail's other labels, the item radius and
   the item rhythm. Collapsed (76px) each part folds into its column: the sign with its amount under it.
   BOTH PARTS ALWAYS SHOW, zero included — but a zero must not look like money: at zero the fast part is quiet (an
   outlined sign, the rail's secondary ink, no amber, no bold) and it takes the amber (--rail-fast on the dark rail,
   --warning on the light top bar) and the weight only while it holds something — the `is-held` class.
   The wallet never takes the current-page look: it is a readout, not a section of the rail (owner, 06.10.2026) —
   components/rail.js activeKeysFor leaves it out, so no [aria-current] rule applies to it. */
.rail__bal { position: relative; }
.rail__link.rail__bal-link {
  flex-direction: column;
  align-items: stretch;
  gap: var(--rail-bal-gap, 2px);
  height: auto;
  min-height: var(--rail-item-h);
  padding: var(--rail-bal-pad, 4px) 12px var(--rail-bal-pad, 4px) 0;
}
/* a part = a rail row: the round sign in the icon slot, the label column beside it */
.rail__bal-part {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 34px;
  padding-left: var(--rail-icon-x);
  border-radius: var(--radius-sm);
}
.rail__bal-sign {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0 -1px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rail__link .rail__bal-sign svg { width: 15px; height: 15px; margin: 0; }
.rail__bal-col { display: grid; min-width: 0; line-height: 1.15; }
/* the line between the balances: only the chosen look draws it, and only where there is room for its ring */
.rail__bal-rule { display: none; }
.rail__bal-name {
  overflow: hidden;
  color: var(--rail-ink-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail__bal-sum {
  overflow: hidden;
  color: var(--rail-ink);
  font-size: var(--fs-base);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* the fast part at rest: an outlined sign and the rail's secondary ink — present, named, and plainly empty */
.rail__bal-sign--fast { background: none; color: var(--rail-ink-2); box-shadow: inset 0 0 0 1.25px rgba(245, 245, 243, .22); }
.rail__bal-sum--fast { color: var(--rail-ink-2); font-size: var(--fs-sm); font-weight: 600; }
/* …and with money in it: the amber this site gives fast money */
.rail__bal.is-held .rail__bal-sign--fast { background: rgba(255, 196, 107, .16); color: var(--rail-fast); box-shadow: none; }
.rail__bal.is-held .rail__bal-sum--fast { color: var(--rail-fast); font-weight: 700; }
.rail__bal.is-held .rail__bal-part--fast .rail__bal-name { color: var(--rail-fast); opacity: .8; }
.rail__bal.is-negative .rail__bal-sum--main { color: #FF9C9C; }
/* collapsed rail: each part folds into its column — the sign with its amount under it, the name gone with the
   other labels. The signs keep the icon slot, so nothing moves when the rail opens. */
/* The rhythm of the 76px column says what belongs to what: a mark sits close to ITS OWN amount (3px) and the two
   balances stand well apart (10px). The name is taken out of the flow here — hidden with the other labels it would
   still hold its line between the mark and the amount, which is what put the air in the wrong place (owner,
   06.10.2026) — and the amounts drop their line-height slack so the measured gap is the one set here. */
.rail:not([data-expanded='true']):not([data-mode='drawer']) .rail__link.rail__bal-link {
  gap: 10px;
  padding: 5px 0;
  overflow: visible;
}
.rail:not([data-expanded='true']):not([data-mode='drawer']) .rail__bal-name { display: none; }
.rail:not([data-expanded='true']):not([data-mode='drawer']) .rail__bal-part {
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  padding-left: 0;
}
/* A six-digit sum with a minus needs more than the 58px item: the amount takes 5px of the rail's own side padding
   on each side (measured — «−555 620 ₽» is 57px at 11px, and the test pins every look and every state). */
.rail:not([data-expanded='true']):not([data-mode='drawer']) .rail__bal-col {
  justify-items: center;
  width: calc(100% + 10px);
  margin: 0 -5px;
}
.rail:not([data-expanded='true']):not([data-mode='drawer']) .rail__bal-sum { font-size: 11px; line-height: 1; letter-spacing: -.01em; text-align: center; }
.rail:not([data-expanded='true']):not([data-mode='drawer']) .rail__bal-sum--fast { font-size: 10.5px; }
/* «+»: 32px round, 44px target; only in the expanded rail (the collapsed one has no room: its item opens the page).
   It belongs to the main balance — top-ups land there — so it sits on that row. */
.rail__bal-add {
  position: absolute;
  top: calc(var(--rail-bal-pad, 4px) + 8px);   /* centred on the main row, whose action it is */
  right: 8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  transform: scale(.85);
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 120ms var(--ease-out),
    transform 120ms var(--ease-out),
    visibility 0s linear 120ms,
    background-color var(--dur-fast) var(--ease-out);
}
.rail__bal-add::before { content: ''; position: absolute; inset: -6px; }
.rail__bal-add svg { width: 18px; height: 18px; }
.rail__bal-add:hover { background: var(--accent-hover); }
.rail__bal-add:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--rail-bg), 0 0 0 4px #FFFFFF; }
.rail[data-expanded='true'] .rail__bal-add {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 200ms var(--ease-out) 80ms,
    transform 240ms var(--ease-out) 80ms,
    visibility 0s linear 0s,
    background-color var(--dur-fast) var(--ease-out);
}
.rail[data-expanded='true'] .rail__bal-part--main { padding-right: 44px; }
/* the phone drawer leaves the balance to the top bar */
.rail[data-mode='drawer'] .rail__bal { display: none; }

/* ---- the wallet's three attempts (owner's choice, 06.10.2026) -----------------------------------------------------
   components/rail.js BAL_LOOK picks one for the whole site; the two she does not pick leave this file. All three
   keep the rule above — both balances always, the fast one quiet until it holds money.
     a  «Две строки»     the two balances are two ordinary rail rows, like «Валюта» and «Язык»: nothing is drawn
                         around them at all. The most at home in the rail; it is also the tallest, and one link means
                         hover lights both rows at once.
     b  «Кошелёк»        the same two rows gathered on one raised surface — the balances read as one object, a wallet
                         with two compartments; the surface is the thing the rail has none of anywhere else.
     c  «Строка и сноска»  the main balance is a full rail row and the fast one a half-weight line tucked under it:
                         the hierarchy is explicit and a zero takes almost no room; the fast balance is easier to
                         miss, and its mark has to shrink to 18px.                                                   */
/* a: two rail rows */
.rail__bal.bal--a { --rail-bal-gap: var(--rail-item-gap, 4px); }
.rail__bal.bal--a .rail__link.rail__bal-link { background: none; box-shadow: none; padding-top: 0; padding-bottom: 0; }
.rail__bal.bal--a .rail__bal-part { min-height: calc(var(--rail-item-h) - 8px); }
.rail__bal.bal--a .rail__link.rail__bal-link:hover .rail__bal-part { background: rgba(245, 245, 243, .07); }
/* b (the owner's choice, 06.10.2026): one surface holding both, and the line between them goes ROUND the «+».
   The divider is one hairline with a round bite taken out of it — the straight part stops at the ring's tangents and
   the ring is the same hairline, so the gap is even all the way round the button (--bal-ring 40px, the button 32px →
   4px of air everywhere). The button keeps its 44px target, its name and its focus ring, which is already a circle.
   It sits at the right end of the line, where the rows' content never reaches, and 10px of line runs on past it to
   the wallet's edge. */
.rail__bal.bal--b {
  --bal-rule: rgba(245, 245, 243, .19);   /* the hairline reads both as a divider and as a ring round the button */
  --bal-ring: 38px;                       /* 28px button + 5px of air all round */
  --bal-ring-right: 6px;                  /* the line carries on past the ring to the wallet's edge */
  --bal-add: 28px;
}
/* the ring takes its column out of both rows, so the amounts get a smaller step and a tighter gap to keep a
   six-digit sum — with a minus — whole (the overflow test measures every state) */
.rail[data-expanded='true'] .rail__bal.bal--b .rail__bal-part { gap: 10px; }
.rail[data-expanded='true'] .rail__bal.bal--b .rail__bal-sum--main { font-size: 14px; }
.rail__bal.bal--b .rail__link.rail__bal-link {
  background: rgba(245, 245, 243, .055);
  box-shadow: inset 0 0 0 1px rgba(245, 245, 243, .09);
  border-radius: var(--radius-md);
}
.rail__bal.bal--b .rail__link.rail__bal-link:hover { background: rgba(245, 245, 243, .11); }
.rail[data-expanded='true'] .rail__bal.bal--b .rail__link.rail__bal-link { width: 100%; }
/* the rows keep clear of the ring's column, so a six-digit sum never runs into it */
.rail[data-expanded='true'] .rail__bal.bal--b .rail__bal-part { padding-right: calc(var(--bal-ring) + var(--bal-ring-right) + 2px); }
.rail[data-expanded='true'] .rail__bal.bal--b .rail__bal-rule {
  display: block;
  position: relative;
  height: 1px;
  margin: 1px 0;
  background: linear-gradient(to right,
    var(--bal-rule) 0 calc(100% - var(--bal-ring) - var(--bal-ring-right)),
    transparent calc(100% - var(--bal-ring) - var(--bal-ring-right)) calc(100% - var(--bal-ring-right)),
    var(--bal-rule) calc(100% - var(--bal-ring-right)) 100%);
}
.rail[data-expanded='true'] .rail__bal.bal--b .rail__bal-rule::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--bal-ring-right);
  width: var(--bal-ring);
  height: var(--bal-ring);
  margin-top: calc(var(--bal-ring) / -2);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--bal-rule);
}
/* the «+» in the bite: centred on the line and concentric with the ring, 4px of air to it all round. The ring is
   measured from the link's content box, the button from the item, so the button adds the link's right padding. */
.rail[data-expanded='true'] .rail__bal.bal--b .rail__bal-add {
  top: 50%;
  right: calc(12px + var(--bal-ring-right) + (var(--bal-ring) - var(--bal-add)) / 2);
  width: var(--bal-add);
  height: var(--bal-add);
  margin-top: calc(var(--bal-add) / -2);
}
.rail[data-expanded='true'] .rail__bal.bal--b .rail__bal-add::before { inset: -8px; }   /* a 44px target either way */
/* c: a row and a footnote */
.rail__bal.bal--c .rail__link.rail__bal-link { background: none; box-shadow: none; gap: 0; }
.rail__bal.bal--c .rail__link.rail__bal-link:hover { background: rgba(245, 245, 243, .07); }
.rail__bal.bal--c .rail__bal-part--fast { min-height: 0; gap: 8px; }
.rail__bal.bal--c .rail__bal-part--fast .rail__bal-sign { width: 18px; height: 18px; margin: 0 3px; }
.rail__bal.bal--c .rail__link .rail__bal-part--fast .rail__bal-sign svg { width: 11px; height: 11px; }
.rail__bal.bal--c .rail__bal-part--fast .rail__bal-col { grid-auto-flow: column; align-items: baseline; gap: 6px; }
.rail__bal.bal--c .rail__bal-sum--fast { font-size: var(--fs-xs); }
.rail:not([data-expanded='true']):not([data-mode='drawer']) .rail__bal.bal--c .rail__bal-part--fast .rail__bal-col { grid-auto-flow: row; gap: 0; }

/* «Быстрый баланс» — the card behind the fast amount (components/rail.js balanceWhyHTML, opened by
   components/balance-ui.js wireBalanceWhy on hover of the fast amount and while the keyboard is on the chip).
   Beside the rail, its bottom edge on the chip's; under the pill on the phone top bar. It is kept out of the
   collapsed rail: there the tooltip names both balances, and a 268px card beside a 76px column would cover the page
   on every pass of the pointer. */
.bal-why {
  position: absolute;
  z-index: 3;
  width: 268px;
  padding: 12px 14px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  text-align: left;
}
.bal-why p { margin: 0; }
.bal-why__title { color: var(--ink); font-size: var(--fs-base); font-weight: 700; line-height: 1.25; }
.bal-why__text { margin-top: 4px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.bal-why__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 0;
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.bal-why__link:hover { text-decoration: underline; }
.bal-why__link:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--focus-ring); }
.bal-why__link svg { flex: none; }
.rail__bal .bal-why { bottom: -6px; left: calc(100% + 10px); animation: bal-why-in 140ms var(--ease-out); }
/* the 76px column: no card (the tooltip of the collapsed rail carries both balances) */
.rail:not([data-expanded='true']) .rail__bal .bal-why { display: none; }
@keyframes bal-why-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bal-why { animation: none !important; }
}

/* One more item in the bottom list: on screens up to 860px high the signed-in rail takes the 50px rhythm of the
   short-viewport rules above (the column would overflow the 768px-high rail of a 800px window otherwise). */
@media (min-width: 768px) and (min-height: 761px) and (max-height: 860px) {
  .rail.has-balance { --rail-item-h: 50px; --rail-item-gap: 4px; }
  .rail.has-balance .rail__inner { padding-top: 14px; padding-bottom: 16px; }
  .rail.has-balance .rail__brand { height: 48px; }
  .rail.has-balance .rail__toggle { margin-top: 10px; }
  .rail.has-balance .rail__nav { margin-top: 16px; }
  .rail.has-balance .rail__currency { margin-bottom: 8px; }
  .rail.has-balance .rail__divider { margin-bottom: 10px; }
}
/* Shorter screens: the two rows tighten. From 860px down the collapsed rail keeps both amounts but on a smaller
   type; from 620px down it keeps the two signs alone and leaves the amounts to the tooltip, which names both. */
@media (min-width: 768px) and (max-height: 860px) {
  .rail__bal-part { min-height: 30px; }
  .rail__bal.bal--a .rail__bal-part { min-height: calc(var(--rail-item-h) - 10px); }
  .rail:not([data-expanded='true']):not([data-mode='drawer']) .rail__bal-sum { font-size: 10.5px; }
  .rail:not([data-expanded='true']):not([data-mode='drawer']) .rail__bal-sum--fast { font-size: 10px; }
}
@media (min-width: 768px) and (max-height: 619.98px) {
  .rail__bal-part,
  .rail__bal.bal--a .rail__bal-part { min-height: 26px; }
  .rail:not([data-expanded='true']):not([data-mode='drawer']) .rail__bal-sum { display: none; }
  .rail__bal.bal--c .rail__bal-sum--main { font-size: var(--fs-sm); }
}
/* Signed in, the column is one row taller (the chip) and must still end with the account button inside the rail
   (measured 2026-10-05: 637px of column in the 50px rhythm, 539px in the 44px one). 601–680px-high windows (a
   1366×768 laptop shows ≈ 650px) take the 44px rhythm; 540–579px ones scroll the column like the shorter ones. */
@media (min-width: 768px) and (min-height: 601px) and (max-height: 680px) {
  .rail.has-balance { --rail-item-h: 44px; --rail-item-gap: 2px; }
  .rail.has-balance .rail__inner { padding-top: 8px; padding-bottom: 8px; }
  .rail.has-balance .rail__brand { height: 44px; }
  .rail.has-balance .rail__toggle { margin-top: 4px; }
  .rail.has-balance .rail__nav { margin-top: 8px; }
  .rail.has-balance .rail__currency { margin-bottom: 4px; }
  .rail.has-balance .rail__divider { margin-bottom: 6px; }
  .rail.has-balance .rail__bal-part,
  .rail.has-balance .rail__bal.bal--a .rail__bal-part { min-height: 26px; }
  .rail.has-balance:not([data-expanded='true']):not([data-mode='drawer']) .rail__bal-sum { display: none; }
  .rail.has-balance .rail__bal.bal--c .rail__bal-sum--main { font-size: var(--fs-sm); }
}
@media (min-width: 768px) and (min-height: 540px) and (max-height: 579.98px) {
  .rail.has-balance { --rail-item-gap: 0px; }
  .rail.has-balance .rail__inner {
    padding-top: 6px;
    padding-bottom: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .rail.has-balance .rail__inner::-webkit-scrollbar { display: none; }
  .rail.has-balance .rail__toggle { margin-top: 0; }
  .rail.has-balance .rail__nav { flex: 1 0 auto; margin-top: 4px; }
  .rail.has-balance .rail__spacer { min-height: 8px; }
  .rail.has-balance .rail__currency { margin-bottom: 2px; }
  .rail.has-balance .rail__divider { margin-bottom: 4px; }
}

/* Account (components/account-menu.js) ---------------------------------------------------------------------------
   The avatar: a circle with a 1.5px ring (--avatar-ring), the monogram letter (or the user glyph) on it and, once it
   has loaded, the picture above the monogram (.has-image). The size comes from --avatar-size, so the box never
   changes while the picture arrives or fails. Used by the rail button, the phone top bar and the menu's head. */
.sa-avatar {
  --avatar-size: 28px;
  --avatar-ring: var(--line-strong);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--ink-2);
  box-shadow: 0 0 0 1.5px var(--avatar-ring);
  font-family: var(--font-ui);
  font-size: calc(var(--avatar-size) * .46);
  font-weight: 700;
  line-height: 1;
  user-select: none;
}
/* the monogram fills the circle (so the glyph's percentage size has something to resolve against) */
.sa-avatar__mono { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; }
.sa-avatar .sa-avatar__mono svg { width: 58%; height: 58%; margin: 0; max-width: none; }
.sa-avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.sa-avatar.has-image .sa-avatar__img { opacity: 1; }

/* The rail's account button: the 28px avatar sits in the 24px icon slot like the 28px glyphs (centre x = 38px), on a
   soft light ring; the label is the name (one line, cut with an ellipsis) over «Аккаунт» — or «Steam» over the short
   id while the name is not known. Both pairs have the same height: nothing moves when the profile arrives. */
.rail__link .rail__avatar {
  --avatar-ring: rgba(245, 245, 243, .34);
  margin: 0 -2px;
  background: rgba(245, 245, 243, .12);
  color: var(--rail-ink);
}
.rail__link .rail__avatar svg { width: 16px; height: 16px; }
.rail__acct-text { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.rail__acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail__acct-sub {
  overflow: hidden;
  color: var(--rail-ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rail__acct[aria-current='page'] .rail__acct-sub { color: rgba(255, 255, 255, .8); }
.rail__acct[aria-current='page'] .rail__avatar { --avatar-ring: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .16); color: #FFFFFF; }

/* The account menu beside the rail (the .cur-pop island; rail.js sets --cur-y so it grows upward from the button) */
.acct-pop { width: 312px; padding: 8px; max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.acct__head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; }
.acct__avatar { --avatar-size: 40px; }
.acct__who { display: grid; gap: 2px; min-width: 0; }
.acct__who p { margin: 0; }
.acct__name {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct__id { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.3; }
.acct__note { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.3; }
.acct__menu { display: flex; flex-direction: column; gap: 2px; }
/* the balance block: one link to the balance tab — the main balance, the fast one under it while it has money,
   then «можно вывести» and the day the fast balance moves over */
.acct__bal {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.acct__bal:hover,
.acct__bal:focus { border-color: var(--accent); background: var(--surface); }
.acct__bal:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* No current-page look on a balance block, here or on the rail's chip (owner, 06.10.2026): the amounts are a readout,
   and painting them as the page you are on read as a state she had not chosen. [aria-current] stays on this link for
   screen readers — the account tabs below it keep both the attribute and the tint. */
.acct__bal-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.3; }
.acct__bal-row b { color: var(--ink); font-size: var(--fs-base); font-weight: 700; white-space: nowrap; }
.acct__bal-row--fast { color: var(--warning); }
.acct__bal-row--fast b { color: var(--warning); }
.acct__bal-note {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  line-height: 1.3;
}
.acct__bal-note b { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.acct__bal-held { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.3; text-align: right; }
.acct__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 6px; }
.acct__actions .btn { padding-left: 10px; padding-right: 12px; }
.acct__sep { height: 1px; margin: 6px 4px; background: var(--line); }
.acct__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.acct__item svg { flex: none; color: var(--ink-3); }
.acct__item-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__item:hover,
.acct__item:focus { background: var(--surface-sunken); }
.acct__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.acct__item[aria-current='page'] { background: var(--accent-tint); color: var(--accent-ink); }
.acct__item[aria-current='page'] svg { color: var(--accent-ink); }
.acct__item--danger { color: var(--danger); }
.acct__item--danger svg { color: currentColor; }
.acct__item--danger:hover,
.acct__item--danger:focus { background: var(--danger-tint); }
/* the «Инвентарь» count: trades on their way */
.acct__badge {
  flex: none;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--accent-strong);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* The same menu as a bottom sheet (phones): a dialog rising from the bottom edge, items at least 48px tall. */
.account-sheet .dialog__body { padding-top: 0; }
.acct--sheet .acct__head { padding: 4px 4px 12px; }
.acct--sheet .acct__item { min-height: 48px; }
.acct--sheet .acct__actions .btn { min-height: 48px; }
.acct--sheet .acct__bal { padding: 14px 16px; }
@media (max-width: 767.98px) {
  .account-sheet {
    width: 100vw;
    max-width: 100vw;
    max-height: 88dvh;
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
  }
  .account-sheet .dialog__body { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .account-sheet[open] { animation: account-sheet-in var(--dur-rail) var(--ease-out); }
  .account-sheet.is-closing { animation: account-sheet-out 160ms var(--ease-in-out) forwards; }
}
@keyframes account-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes account-sheet-out { to { transform: translateY(16px); opacity: 0; } }

/* Phone top bar: the same wallet, lying down — one pill holding the two named parts, the round «+» beside them,
   before the cart. The names give way under 400px, where the bar needs its pixels for the cart and the avatar; the
   marks, the amber and the card stay, and the bar still fits a 320px phone. The wallet never takes the current-page
   look (owner, 06.10.2026): components/rail.js activeKeysFor leaves it out. */
.topbar__bal {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 40px;
  padding-right: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.topbar__bal-link {
  position: relative;
  display: grid;
  align-content: center;
  gap: 2px;
  height: 100%;
  padding: 0 8px 0 10px;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  color: var(--ink);
  line-height: 1.1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.topbar__bal-link::before { content: ''; position: absolute; inset: -3px 0; }
.topbar__bal-link:hover .topbar__bal-sum--main { color: var(--accent-ink); }
.topbar__bal-part { display: flex; align-items: center; gap: 4px; }
.topbar__bal-sign {
  display: grid;
  place-items: center;
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
}
.topbar__bal-sign svg { width: 11px; height: 11px; }
.topbar__bal-name { flex: 1 1 auto; color: var(--ink-3); font-size: 10px; font-weight: 600; white-space: nowrap; }
.topbar__bal-sum { flex: none; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* quiet until it holds something, then the amber (the rail's rule, in the light bar's colours) */
.topbar__bal-sign--fast { background: none; color: var(--ink-3); box-shadow: inset 0 0 0 1.25px var(--line-strong); }
.topbar__bal-sum--fast { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; }
.topbar__bal.is-held .topbar__bal-sign--fast { background: var(--warning-tint); color: var(--warning); box-shadow: none; }
.topbar__bal.is-held .topbar__bal-sum--fast { color: var(--warning); font-weight: 700; }
.topbar__bal.is-held .topbar__bal-part--fast .topbar__bal-name { color: var(--warning); }
.topbar__bal.is-negative .topbar__bal-sum--main { color: var(--danger); }
/* the three skins, as on the rail (components/rail.js BAL_LOOK) — each draws its furniture only while there is a
   second part to separate: with one balance the pill holds one number and nothing else */
.topbar__bal.bal--a .topbar__bal-link { gap: 3px; }
.topbar__bal.bal--b .topbar__bal-link { gap: 0; }
.topbar__bal.bal--b .topbar__bal-part--fast { border-top: 1px solid var(--line); padding-top: 3px; }
.topbar__bal.bal--b .topbar__bal-part--main { padding-bottom: 3px; }
.topbar__bal.bal--c .topbar__bal-link { gap: 1px; }
.topbar__bal.bal--c .topbar__bal-part--main .topbar__bal-name { display: none; }
.topbar__bal.bal--c .topbar__bal-sum--main { font-size: var(--fs-base); }
.topbar__bal.bal--c .topbar__bal-sign--fast { width: 14px; height: 14px; }
.topbar__bal.bal--c .topbar__bal-sign--fast svg { width: 9px; height: 9px; }
.topbar__bal.bal--c .topbar__bal-part--fast {
  justify-self: start;
  max-width: 100%;
  gap: 3px;
  padding: 1px 7px 1px 5px;
  border-radius: 999px;
  background: var(--warning-tint);
}
.topbar__bal.bal--c .topbar__bal-part--fast .topbar__bal-name { display: none; }
/* the card under the pill, inside the window on the narrowest phone */
.topbar__bal .bal-why {
  top: calc(100% + 8px);
  right: 0;
  width: min(284px, calc(100vw - 24px));
  animation: bal-why-down 140ms var(--ease-out);
}
@keyframes bal-why-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.topbar__bal-add {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.topbar__bal-add::before { content: ''; position: absolute; inset: -6px; }
.topbar__bal-add svg { width: 18px; height: 18px; }
.topbar__bal-add:hover { background: var(--accent-hover); }
.topbar__bal-link:focus-visible,
.topbar__bal-add:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Signed in, the bar holds the menu, the brand, the balance, the cart and the account avatar. The wordmark (136px
   with its padding) leaves room for all of them only from 424px with a six-digit balance: under 440px the SA mark
   (rail.js .topbar__mark, a 44px target) stands in for it. Measured 320–439px: nothing runs off the bar. */
.topbar__mark { display: none; }
@media (max-width: 439.98px) {
  .topbar.has-account .topbar__brand .wordmark { display: none; }
  .topbar.has-account .topbar__mark {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 3px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
  }
  .topbar__mark .monogram { width: auto; height: 22px; max-width: none; }
  .topbar__mark:focus-visible { outline: none; box-shadow: var(--focus-ring); }
}
/* Under 480px the names give way: the bar must still hold the menu, the brand, the wallet, the cart and the avatar,
   and at 440px the wordmark alone takes 132px (measured 2026-10-06 — with the names the avatar ran off the bar). The
   marks and the amber keep the two parts apart, and the names go on reaching a screen reader through the link's
   aria-label (balance-ui.js balanceLabel). */
@media (max-width: 479.98px) {
  .topbar__bal-name { display: none; }
}
/* Under 400px the wallet tightens: the bar is at its narrowest with the cart and the avatar still on it. */
@media (max-width: 399.98px) {
  .topbar__bal-link { padding: 0 6px 0 9px; }
  .topbar__bal-part { gap: 3px; }
  .topbar__bal-sign { width: 16px; height: 16px; }
  .topbar__bal.bal--b.is-held .topbar__bal-link { padding-left: 5px; }
}
/* Narrow phones (320–379px): two six-digit amounts still leave the cart on screen — tighter padding, a 28px «+»,
   12px amounts (7 digits and more are already shortened: «1,3 млн ₽»), an 11px fast amount under the main one */
@media (max-width: 379.98px) {
  .topbar__brand { padding-left: 0; }
  .topbar__bal { padding-right: 3px; }
  .topbar__bal-link { padding: 0 4px 0 8px; }
  .topbar__bal-sum { font-size: var(--fs-xs); letter-spacing: -.01em; }
  .topbar__bal-sum--fast { font-size: 11px; }
  .topbar__bal-sign { width: 15px; height: 15px; }
  .topbar__bal-sign svg { width: 10px; height: 10px; }
  .topbar__bal-add { width: 28px; height: 28px; }
  .topbar__bal-add::before { inset: -8px; }
  .topbar__bal-add svg { width: 16px; height: 16px; }
}
/* The narrowest phones (320–339px): the marks and the amounts step down once more so that the menu, the SA mark, the
   two balances, the cart and the avatar all stay on the bar (measured 2026-10-06 at 320px with a six-digit balance). */
@media (max-width: 339.98px) {
  .topbar__bal { padding-right: 1px; }
  .topbar__bal-link { padding: 0 2px 0 3px; }
  .topbar__bal-part { gap: 2px; }
  .topbar__bal-sign { width: 13px; height: 13px; }
  .topbar__bal-sign svg { width: 8px; height: 8px; }
  .topbar__bal-sum { font-size: 10.5px; }
  .topbar__bal-sum--fast { font-size: 9.5px; }
  .topbar__bal-add { width: 26px; height: 26px; }
  .topbar__bal-add svg { width: 15px; height: 15px; }
  .topbar__bal.bal--c .topbar__bal-part--fast { padding: 2px 5px 2px 4px; }
}