/* Brand: the rail monogram (SA) and the size of the rail icon set (components/logo.js, components/icons.js).
   Loaded after rail.css, so these rules may refine the rail's own. */

/* SA monogram ---------------------------------------------------------------
   The letters are currentColor (the rail's near-white ink; white on hover via .rail__brand), the S's lower
   stroke and the A's right leg run into the accent. On a light surface the same mark reads ink → blue.
   One blue on the whole rail (review #15): the site's --accent #3781FC, the colour of the current item's tile and
   the hover island too — no lighter or deeper stop of its own (≈ 4.7:1 on the rail's #191B20). */
.monogram.monogram--sa {
  width: 48px;              /* 71.5 × 41 viewBox → ≈ 48 × 27.5px, inside the rail's 58 × 52 brand box */
  height: auto;
  overflow: visible;
}
.monogram__azure,
.monogram__deep { stop-color: var(--accent); }

/* Rail icons (icons.js rail-*: case · tag · ping · heart · bag) ------------------------------------------------
   Solid silhouettes in currentColor: the rail ink at rest, white on hover (rail.css fades the colour, nothing
   moves) and on the current item's blue tile, where the cut-outs (clasp seam, tag hole, «!») show the blue through.
   Size: drawn into 20 of their 24 units, they render at 30px around the same 24px slot, so each glyph reads
   ≈ 24–25px — the size of the 26px currency / flag / Steam signs below them (centre stays at x = 38px). */
.rail__link .icon--rail-buy,
.rail__link .icon--rail-sell,
.rail__link .icon--rail-info,
.rail__link .icon--rail-favorites,
.rail__link .icon--rail-cart {
  width: 30px;
  height: 30px;
  max-width: none;
  margin: 0 -3px;           /* around the 24px slot: the centre stays at x = 38px */
}