/* DF-446 (Ben, 2026-10-28): the block gradient, one rule from the block's own colour. The chapter band's dark end is the
   navy token, which no mix of steel reaches: .grad--navy is the one override. Flat colour outside @supports is the fallback. */
.grad{--g:#40456A;--g-dark:color-mix(in oklab,var(--g),black 52%);--g-light:color-mix(in oklab,var(--g),white 88%);background:var(--g)}
@supports (color:color-mix(in oklab,red,white)){
  .grad{background:linear-gradient(120deg,var(--g-dark),var(--g) 60%,var(--g-light))}
}
.grad--navy{--g-dark:#051230}
.grad-text{--g:#40456A;--g-dark:color-mix(in oklab,var(--g),black 52%);color:var(--g)}
@supports (color:color-mix(in oklab,red,white)){
  .grad-text{background:linear-gradient(115deg,var(--g-dark) 0%,var(--g-dark) 42%,var(--g) 72%,var(--g) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
/* DF-446 fix (Ben, 2026-10-28): a badge is all text, so the band's pale end cannot sit under white type. .grad--pill is the hero
   numerals' run, navy to steel, fixed (not derived from the badge's own colour) so it clearly reads as a gradient across a 90px
   badge: the For You / eyebrow badges, the faces' labels and the navy overlay tag over the before/after pair. The tag rules target
   the pages' own selectors (and the ov-tag class ws/df444 renames them to); the pages' flat #40456A stays the fallback. */
.grad--pill{--g:#40456A;--g-dark:#051230;color:#fff}
@supports (color:color-mix(in oklab,red,white)){
  .grad--pill,
  /* DF-450 (Ben, 2026-10-28): the pace chart's target chip ("−0.5×", under its "With Oona" label) takes the pill's run too. The chip
     is built by pace-chart.js, which carries no gradient class (the chart scripts stay untouched), so the stylesheet names the chip by
     selector instead; its flat #40456A and white text are already the pill's fallback outside @supports. The "now" (.bad) chip stays
     flat Plumbeous, as DF-446 left it. */
  #pace-chart>.pace-chip.good,
  #hbv .ss-tag.hb-tag-target:not(.hb-tag-after),#hbv .ov-tag.hb-tag-target:not(.hb-tag-after),
  .bc-ba .half .ss-tag.hb-tag-target:not(.hb-tag-after),.bc-ba .half .ov-tag.hb-tag-target:not(.hb-tag-after){--g:#40456A;--g-dark:#051230;background:linear-gradient(115deg,var(--g-dark) 0%,var(--g-dark) 30%,var(--g) 70%,var(--g) 100%);color:#fff}
}