@layer components {
  .view-header { display: flex; flex-direction: column; gap: var(--space); }
  .view-header__title { font-size: var(--text-xl); }

  .view-header__title[data-colour] { color: var(--colour); }

  .view-header__title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }
  .view-header__standfirst {
    color: var(--ink-muted);
    font-size: var(--text-base);
    max-width: var(--measure);
  }

  .view-header__row { align-items: flex-start; gap: var(--space-3); }
  .view-header__row > .view-header { flex: 1; min-width: 0; }

  
  .view-header__tally {
    position: relative;
    isolation: isolate;

    
    border-color: color-mix(in oklab, transparent calc(var(--tally-heat, 0) * 100%), var(--line-strong));

    color: color-mix(in oklab, var(--ink) calc(var(--tally-heat, 0) * 100%), var(--ink-muted));
    transition: border-color var(--transition-slow), color var(--transition-slow),
                background var(--transition), var(--responds);
  }

  
  .view-header__tally:hover {
    border-color: color-mix(in oklab, transparent calc(var(--tally-heat, 0) * 100%), var(--ink-faint));
  }

  
  .view-header__glow {
    --outset: 20px;

    position: absolute;
    z-index: -1;
    inset: calc(var(--outset) * -1);
    pointer-events: none;
    opacity: var(--tally-heat, 0);
    transition: opacity var(--transition-slow);
    mask-image: linear-gradient(to top,
      black 0%,
      black calc(var(--tally-fill, 0) * 100% - 14%),
      transparent calc(var(--tally-fill, 0) * 100% + 14%));
  }

  
  @media (width <= 48rem) {
    .view-header__glow { --outset: calc(var(--gutter) - var(--space)); }
  }

  
  .view-header__glow::before,
  .view-header__glow::after {
    content: "";
    position: absolute;
    inset: calc(var(--outset) - var(--line-w-control));
    border-radius: var(--radius);
    background: var(--sheen);
    mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    mask-composite: exclude;
  }

  .view-header__glow::before {
    padding: var(--line-w-glyph);
    filter: blur(calc(14px + var(--tally-over, 0) * 8px));
    opacity: calc(0.62 + var(--tally-over, 0) * 0.38);
  }

  .view-header__glow::after {
    padding: var(--line-w-control);
    opacity: calc(0.7 + var(--tally-over, 0) * 0.3);
  }
}