header {
  align-items: center;
  color: var(--color-text);
  display: flex;
  font-family: "Hanken Grotesk", sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  gap: 0.5em;
  justify-content: center;
  margin: 0 auto;
  padding: 0.5em 0;
  text-align: center;
  height: 56px;

  &.planner-header {
    background: var(--color-bg);
    position: relative;
    width: 100%;

    h1 {
      width: 10ch;
      color: var(--color-text);
    }
  }

  /* Overlays the header at exactly the planner stack's width and font size, so
     the measure means the same thing here as it does down there — ch resolves
     against each element's own font, and --planner-max-width is substituted as
     tokens rather than a computed length. Out of the flow so the month title
     stays centred; transparent to clicks except for what sits on it. */
  .planner-header-rail {
    align-items: center;
    display: flex;
    font-size: 1rem;
    inset: 0;
    margin: 0 auto;
    max-width: var(--planner-max-width);
    pointer-events: none;
    position: absolute;

    > * {
      pointer-events: auto;
    }
  }

  .today-nav {
    align-items: center;
    background: var(--color-accent-tint);
    border-radius: var(--radius-pill);
    color: var(--color-accent);
    display: flex;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0.45em 0.9em;
    text-decoration: none;
    transition:
      background-color 0.15s ease,
      color 0.15s ease;

    &:hover {
      background: transparent;
      color: var(--color-text-muted);
    }

    &:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }
  }

  /* Deliberately quiet: a bare chevron that only takes on a background once
     you reach for it, so the month title stays the focus of the header. */
  .month-nav {
    align-items: center;
    background: transparent;
    border-radius: 50%;
    color: var(--color-text-subtle);
    display: flex;
    flex-shrink: 0;
    height: 2.25rem;
    justify-content: center;
    text-decoration: none;
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
    width: 2.25rem;

    svg {
      height: 1.1rem;
      width: 1.1rem;
    }

    &:hover {
      background: var(--color-accent-tint);
      color: var(--color-accent);
    }

    &:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }
  }

  /* Balances the back arrow so the title stays centred. */
  .month-nav-spacer {
    flex-shrink: 0;
    width: 2.25rem;
  }

  .month-nav--next svg {
    transform: scaleX(-1);
  }
}