/* ==========================================================================
   components.css — BritBox Apollo / Home Page (Series)
   --------------------------------------------------------------------------
   One block per Figma component, in the order they appear on the frame.
   Every measurement is transcribed from `get_design_context` on the matching
   node; the Figma node id is quoted above each block so a value can be
   traced back. No hover, focus, transition or animation is defined here —
   the frame's "Rail Hover" state is rendered statically because that is how
   it exists on the canvas.
   ========================================================================== */


/* ==========================================================================
   1. APP BAR — node 30083:620041 (1440 x 88)
   ========================================================================== */

/* FIXED, not sticky. Sticky kept the bar in the flow, so it sat in its own
   88px band above the hero and that band read as a black strip across the
   top of the page. Fixed lifts it onto the artwork: at rest it is nothing
   but a soft gradient over the hero, and legibility comes from the falloff
   plus a text shadow rather than from a ground colour. */
.app-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 1200px;
  padding: var(--space-2xl) var(--frame-gutter);   /* 24px / 64px at 1440 */
  background-color: transparent;
  background-image: linear-gradient(to bottom,
              rgba(10, 10, 12, 0.62) 0%,
              rgba(10, 10, 12, 0.34) 42%,
              rgba(10, 10, 12, 0.10) 74%,
              rgba(10, 10, 12, 0) 100%);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Scrolled: frosted glass rather than a black slab, so the page keeps
   showing through it. */
.app-bar.is-stuck {
  background-color: rgba(18, 18, 18, 0.58);
  background-image: none;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  text-shadow: none;
}

.app-bar__menu {
  display: flex;
  align-items: center;
  gap: var(--menu-gap);                         /* 116px at 1440 */
}

/* Brand-Logo — 120 x 40 slot.
   In the Figma library this slot is the shared "Logo Placeholder" component,
   and the STREAMIT override on this frame is not exposed as an exported
   asset. It is therefore substituted with type, with the size and tracking
   solved so the rendered wordmark matches the reference ink box measured off
   the frame: 120px wide x 18px cap height, optically centred in the 88px bar.
   Swap this for the real vector wordmark when the asset is available. */
.brand-logo {
  display: flex;
  align-items: center;
  width: 120px;
  height: var(--avatar-s);                      /* 40px */
  color: var(--color-primary);
  font-size: 24.41px;                           /* -> 18px cap height        */
  font-weight: 800;
  letter-spacing: -1.257px;                     /* -> 120px measured width   */
  line-height: 1;
  white-space: nowrap;
}

.brand-logo--footer {
  justify-content: center;
}

.app-bar__links {
  display: flex;
  align-items: center;
  gap: var(--space-5xl);                        /* 64px */
}

.app-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);                          /* 8px */
  color: var(--color-on-surface);
  font-size: var(--type-body-m-size);           /* 16px */
  font-weight: var(--type-weight-semi-bold);
  white-space: nowrap;
}

.app-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);                        /* 24px */
}

/* Avatar — node I30083:620041;3425:17065 (40 x 40) */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-s);
  height: var(--avatar-s);
  border-radius: var(--radius-full);
  background: var(--color-primary-muted);
  color: var(--color-surface-container);
  font-size: var(--type-body-xl-size);          /* 20px */
  font-weight: var(--type-weight-semi-bold);
  /* The app bar's text-shadow exists to hold nav labels off the artwork.
     The initial sits on its own solid bubble and does not need it — there
     it just read as a smudge. */
  text-shadow: none;
}


/* ==========================================================================
   2. BUTTONS — shared
   Used by the hero action panel and anywhere else a CTA appears. Sizes are
   overridden per context (the hero narrows them to Figma 7539:164397).
   ========================================================================== */

.button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);                          /* 12px */
  padding: var(--space-s) var(--space-xl);      /* 8px 20px */
  border-radius: var(--radius-s);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--type-body-m-size);           /* 16px */
  font-weight: var(--type-weight-semi-bold);
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--dur-ring) ease;
}

.button-primary:hover,
.button-primary:focus-visible { opacity: 0.88; outline: none; }

.button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-primary-30);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--dur-ring) ease;
}

.button-icon:hover,
.button-icon:focus-visible { border-color: var(--accent-ring-hover); outline: none; }


/* ==========================================================================
   3. CARDS RAIL — shared shell
   nodes 30083:620044 / 620045 / 620046 / 620048
   ========================================================================== */

.rail {
  position: relative;    /* the edge affordances anchor to this, see §3 end */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: var(--frame-gutter);            /* 64px at 1440 */
  padding-bottom: var(--space-5xl);             /* 64px */
  overflow: hidden;      /* rails run past the artboard edge, as in Figma */
}

/* Rail Header — node I…;2359:16468 */
.rail__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-right: var(--frame-gutter);           /* 64px at 1440 */
  padding-bottom: var(--space-l);               /* 16px */
}

.rail__header-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);                         /* 4px */
  width: 100%;
}

.rail__title {
  color: var(--color-on-surface);
  font-size: var(--type-body-xl-size);          /* 20px */
  font-weight: var(--type-weight-semi-bold);
}

/* Rails without a "see all" caret pin their title to a fixed 450px column */
.rail__title-slot {
  display: flex;
  width: 450px;
}

.rail__title-slot--grow {
  flex: 1 0 0;
  min-width: 0;
  width: auto;
}

.rail__subtitle {
  width: 100%;
  color: var(--color-on-surface-variant);
  font-size: var(--type-body-s-size);           /* 14px */
  font-weight: var(--type-weight-regular);
}

/* Track holding the cards */
.rail__track {
  position: relative;
  display: flex;
  gap: var(--rail-gap);                         /* 20px */
  width: 100%;
}

.rail__track--start  { align-items: flex-start; }
.rail__track--center { align-items: center; }
.rail__track--end    { align-items: flex-end; }

/* Figma applies the card shadow to the whole track, not per card */
.rail__track--shadow {
  filter:
    drop-shadow(0 10px 7.5px rgba(0, 0, 0, 0.1))
    drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
}

/* Edge affordance — node I30083:620044;3374:33889.
   The design draws it statically on one rail (frame variant "Rail Hover").
   Here every rail whose cards run past the viewport gets one, and it does
   something: js/rails.js pages the track. It is mounted in the .rail, not
   in the .rail__track, because the track is what moves — an affordance
   inside it would travel away with the cards.

   .is-available is set by js/rails.js only while there is something in
   that direction to reach, so a rail that fits shows nothing and neither
   arrow lingers at the end of its travel. */
.rail__edge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 0 var(--space-l);                    /* 0 16px */
  border: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-nav-fade) ease;
}

.rail__edge--next {
  right: 0;
  background-image: linear-gradient(
    to right, var(--color-background-0) 0%, var(--color-scrim) 100%);
}

.rail__edge--prev {
  left: 0;
  background-image: linear-gradient(
    to left, var(--color-background-0) 0%, var(--color-scrim) 100%);
}

/* The caret asset only exists pointing right; the left one is the same
   file turned round, rather than a second near-identical export. */
.rail__edge--prev .icon { transform: scaleX(-1); }

.rail:hover    .rail__edge.is-available,
.rail-branded:hover .rail__edge.is-available,
.rail:focus-within .rail__edge.is-available,
.rail-branded:focus-within .rail__edge.is-available,
.rail__edge.is-available:focus-visible { opacity: 1; pointer-events: auto; }

.rail__edge .icon { transition: transform var(--dur-ring) var(--ease-zoom); }
.rail__edge:hover .icon { transform: scale(1.12); }
.rail__edge--prev:hover .icon { transform: scaleX(-1) scale(1.12); }

/* The track is paged by transform, so the rail's own overflow does the
   clipping and nothing about the resting layout changes. */
.rail__track {
  transition: transform var(--dur-rail-page) var(--ease-morph-in);
  will-change: transform;
}

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


/* ==========================================================================
   4. VERTICAL MAIN CARD — 202 x 303, used by rails 1, 3, 4, 5
   ========================================================================== */

/* The hairline is drawn by an ::after overlay rather than a border, so it
   reproduces Figma's inside-aligned stroke (it paints over the artwork
   instead of shrinking it by 1px, and never adds to the measured box) and
   gives the hover outline something to transition. See interactions.css. */
.card-poster {
  position: relative;
  flex: 0 0 auto;
  width: var(--card-vertical-width);
  height: var(--card-vertical-height);
  border-radius: var(--radius-s);
  overflow: hidden;
  cursor: pointer;      /* it opens the detail modal — see js/modal.js */
}

.card-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid var(--card-outline);
  border-radius: var(--radius-s);
}

/* Figma flattens overlapping image fills into a stack; each layer is kept
   as its own <img> so the composite matches the exported artwork exactly. */
.card-poster__art {
  position: absolute;
  inset: 0;
}

.card-poster__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

/* A layer that Figma positions with its own crop box. These are placed by
   explicit percentages (set inline, from the export) and must fill that box
   exactly — no object-fit, or the layer gets cropped a second time. */
.card-poster__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.card-poster__layer img {
  position: absolute;
  max-width: none;
}

/* Episode tag — node I…;3315:32642, per the design.
   Centred on the card, sitting on its bottom edge, in the brand yellow with
   only the top corners rounded — so it reads as a tab rising out of the
   card rather than a pill floating on it. z-index clears the ::after
   hairline, which would otherwise draw its bottom rule across the tag. */
.card-badge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;                                    /* flush with the card foot */
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--space-s);                  /* 2px 8px */
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;   /* 4px 4px 0 0 */
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--type-body-xs-size);          /* 14px */
  font-weight: var(--type-weight-semi-bold);
  line-height: var(--type-line-height);
  white-space: nowrap;
  max-width: calc(100% - var(--space-l));       /* never touches either side */
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ==========================================================================
   5. CONTINUE WATCHING CARD — node 7539:166735 ("CW New Look")
   --------------------------------------------------------------------------
   The redesign. 313 x 176.063 — exactly 16:9 — with the title, progress and
   menu overlaid on the artwork behind a soft scrim, instead of the old
   solid #282828 block bolted under the image. That is what makes it read as
   open: the card is now all picture, and the chrome floats on it.
   ========================================================================== */

.card-cw {
  position: relative;
  flex: 0 0 auto;
  width: var(--card-horizontal-width);       /* 313px */
  aspect-ratio: 16 / 9;                      /* -> 176.06px, no rounding drift */
  border-radius: var(--radius-s);
  background: var(--color-surface);
  overflow: hidden;
}

/* Inside-aligned hairline, same treatment as the poster card */
.card-cw::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border: 1px solid var(--card-outline);
  border-radius: var(--radius-s);
}

.card-cw__art {
  position: absolute;
  inset: 0;
}

.card-cw__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                         /* never distorts */
  max-width: none;
}

/* Title lockup — Figma places it at 144 x 47.706 from x=157 on a 313-wide
   card. Expressed as proportions of the card so the same rule holds now
   the card is larger: 157/313, 144/313, 47.706/176.06. */
.card-cw__logo {
  position: absolute;
  left: 50.16%;
  top: 50%;
  transform: translateY(-50%);
  width: 46.01%;
  height: 27.1%;
  z-index: 1;
}

.card-cw__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;                       /* wide wordmarks keep their ratio */
  /* Episode stills are unpredictable behind a wordmark, so the lockup
     carries its own legibility rather than relying on the frame. */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9))
          drop-shadow(0 2px 10px rgba(0, 0, 0, 0.75))
          drop-shadow(0 0 22px rgba(0, 0, 0, 0.6));
}

/* No pool behind the lockup. There used to be a radial gradient here to
   help it read on a bright still, but it showed as a visible dark smudge
   around the wordmark — a shape that belongs to nothing. The three
   drop-shadows above already hug the glyphs themselves, which carries the
   legibility without drawing a halo the eye can find. */

/* Figma: transparent to 50%, 0.23 at 59.808%, 0.8 at the foot */
.card-cw__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Figma's gradient is the second layer here, unchanged. The first is an
     addition: our episode stills are far brighter than the frame Figma was
     drawn over, and the title lockup sits at mid-height where that gradient
     is still fully transparent. A light veil keeps the lockup readable on
     any frame without closing the card up. */
  background:
    linear-gradient(to bottom,
      rgba(18, 18, 18, 0.34) 0%,
      rgba(18, 18, 18, 0.20) 34%,
      rgba(18, 18, 18, 0.06) 52%,
      rgba(18, 18, 18, 0) 66%),
    linear-gradient(to bottom,
      rgba(18, 18, 18, 0) 50%,
      rgba(18, 18, 18, 0.23) 59.808%,
      rgba(18, 18, 18, 0.8) 100%);
}

.card-cw__info {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-xs);                      /* 4px */
  width: 100%;
  padding: var(--space-m);                   /* 12px */
}

.card-cw__text {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 0;
}

.card-cw__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);                      /* 4px */
  min-width: 0;
}

/* Figma hard-codes 16px/20px Bold here, and the episode name beside it
   renders at the same size — so both are 16px in this component, not the
   18px the body/l token carries elsewhere. See source.md. */
.card-cw__ep {
  flex: 0 0 auto;
  color: var(--color-on-surface);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

.card-cw__name {
  color: var(--color-on-surface);
  font-size: 16px;
  font-weight: var(--type-weight-semi-bold);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-cw__progress-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* An inline bar rather than the old full-width 8px slab. Widened from 65
   to 104 and thickened 4 -> 6 so the position in an episode is actually
   readable at a glance, with a dark rule under the track so it holds on a
   bright frame. */
.card-cw__bar {
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  height: 6px;
  background: rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* The fill grows to its value once, on arrival — it is the one number on
   the card that says "you were part-way through this". */
.card-cw__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--cw-progress, 31.25%);
  border-radius: inherit;
  background: var(--color-primary);
  transform-origin: left center;
  animation: cw-fill var(--dur-cw-fill) var(--ease-morph-in) both;
}

@keyframes cw-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .card-cw__bar span { animation: none; }
}

/* Was 12px in #989898 — the smallest, faintest text on the screen, over a
   photograph. 14px at white@80, the same pairing the hero meta uses. */
.card-cw__remaining {
  color: var(--color-white-80);
  font-size: var(--type-body-s-size);          /* 14px */
  font-weight: var(--type-weight-regular);
  line-height: 1.5;
  white-space: nowrap;
}

.card-cw__menu {
  flex: 0 0 auto;
  width: var(--icon-m);                      /* 32px */
  height: var(--icon-m);
  display: block;
}

/* ==========================================================================
   6. TOP 10 VERTICAL CARD — node 30083:620046 (Most Popular)
   ========================================================================== */

.card-top10 {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
}

/* Digits frame is 90 x 117 and the poster overlaps it by 14px */
.card-top10__digit {
  position: relative;
  width: 90px;
  height: 117px;
  margin-right: -14px;
  flex: 0 0 auto;
}

/* Outlined numeral.
   Figma reports 144px Inter Semi Bold, but the rendered glyph is a different
   face (ink aspect 0.366 vs Inter's 0.437). An earlier pass chased that by
   condensing Inter with scaleX, which is what made the numbers look wrong —
   squashed, and dimmed further by a horizontal fade. Simpler is better: no
   condense, a single confident stroke weight, and the glyph bottom-aligned
   to the card. Sized so the ink height matches the reference's 112px. */
/* NO INNER LINES.
   `-webkit-text-stroke` strokes every contour in the glyph, and Inter's
   numerals are built from overlapping sub-paths that are never unioned —
   filled, the overlaps are invisible; stroked, their internal boundaries
   get drawn too, which is why the 4 came out with lines through it.

   The fix is to stroke at double weight and then lay a fill in the page's
   own ground colour over the top. The stroke is centred on each contour,
   so the fill covers the inner half of it everywhere — and covers the
   internal boundaries completely, because those lie wholly inside the
   shape. What is left is a clean outline at half the stroke width.

   The ::after carries that fill. js/rails.js copies the character into
   data-digit for it; the transform that normalises the glyph's width is
   on the parent, so both layers move together and stay registered. */
.card-top10__digit span {
  position: absolute;
  right: 0;
  bottom: -19.5px;                   /* -> ink sits on the card's bottom edge */
  font-size: 158px;                  /* -> 112px ink height                   */
  font-weight: var(--type-weight-semi-bold);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 5px rgba(235, 235, 235, 0.72);   /* 2 x the 2.5 seen */
  user-select: none;
}

.card-top10__digit span::after {
  content: attr(data-digit);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-background);    /* the ground these numerals sit on */
  -webkit-text-stroke-width: 0;
  pointer-events: none;
}

/* ==========================================================================
   7. BRANDED HERO RAIL — node 30083:620047 (Avatar)
   ========================================================================== */

.rail-branded {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--space-5xl);             /* 64px */
}

.rail-branded__stage {
  position: relative;
  width: 100%;                                  /* full bleed */
  height: var(--hero-height);                   /* 480px */
  overflow: hidden;
}

/* Vertical fade: solid to 30%, gone by 80%. Same treatment as the hero —
   the Figma mask is a plain gradient exported at a fixed 1440x480, so it is
   transcribed to CSS rather than stretched across a full-bleed element. */
.rail-branded__backdrop,
.rail-branded__scrim {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 30%,
    rgba(0, 0, 0, 0) 80%
  );
          mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 30%,
    rgba(0, 0, 0, 0) 80%
  );
}

.rail-branded__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

/* Figma's flat 0.3 overlay alone leaves the lockup and tagline sitting on
   bright sky. A left-to-right scrim — the same idea as the hero's — gives
   the copy something to sit on without dimming the whole plate. */
.rail-branded__scrim {
  /* Split rather than a multi-layer `background` shorthand: a var() colour
     in the final layer of the shorthand is fragile to parse, and if the
     declaration is dropped the scrim silently contributes nothing. */
  background-color: var(--color-overlay-variant);
  background-image: linear-gradient(to right,
      rgba(18, 18, 18, 0.86) 0%,
      rgba(18, 18, 18, 0.52) 30%,
      rgba(18, 18, 18, 0.16) 52%,
      rgba(18, 18, 18, 0) 70%);
}

/* Action Section — node I30083:620047;5881:40568 */
.rail-branded__action {
  position: absolute;
  left: 0;
  top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);                          /* 16px */
  width: 100%;
  padding-left: var(--frame-gutter);            /* 64px at 1440 */
  padding-top: var(--space-l);                  /* 16px */
  overflow: hidden;
}

.rail-branded__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);                          /* 12px */
  width: 100%;
  padding-right: var(--frame-gutter);           /* 64px at 1440 */
}

/* Title lockup — 326 x 98.346, artwork inset 39.67% from the top */
.rail-branded__logo {
  position: relative;
  width: 326px;
  height: 98.346px;
  overflow: hidden;
}

.rail-branded__logo img {
  position: absolute;
  left: 0;
  top: 39.67%;
  width: 100%;
  height: 60.08%;
  max-width: none;
}

/* Figma's export labels this body/xl, but the rendered frame measures 18px
   (ink width 657px, vs 733px at 20px) — so it follows body/l. See source.md. */
.rail-branded__tagline {
  color: var(--color-on-surface);
  font-size: var(--type-body-l-size);           /* 18px */
  font-weight: var(--type-weight-regular);
  white-space: nowrap;
}


/* ==========================================================================
   8. FOOTER — node 30083:620049 (1440 x 208.4)
   ========================================================================== */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4xl);                        /* 40px */
  /* Figma reports the top inset as 40.4px: a 0.4px rule plus 40px padding. */
  padding: var(--space-4xl) var(--footer-gutter) var(--space-5xl);  /* 40 116 64 */
  border-top: 0.4px solid var(--color-outline);
  background: var(--color-background);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: var(--space-xl) 44px;                    /* 20px row / 44px column */
  width: 100%;
  max-width: 1208px;
}

.footer__link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: var(--type-body-m-size);           /* 16px */
  font-weight: var(--type-weight-semi-bold);
  white-space: nowrap;
}