.month-menu-wrapper {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--color-bg);
}

.month-menu-toggle {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  transition: color 0.15s ease;

  h1 {
    margin: 0;
    width: 10ch;
  }

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

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

/* Overlays the planner instead of pushing it down — opening the menu should
   not move what you are looking at. Positioned against .month-menu-wrapper,
   which is sticky and so travels with the header. */
.month-menu-panel {
  background: var(--color-surface);
  /* Reads as the header opening downwards rather than a floating card: square
     where it meets the header, rounded where it ends, shadow cast down only. */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 1em 2.5em -0.8em rgba(42, 39, 48, 0.25);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  left: 50%;
  padding: var(--space-lg);
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  width: min(100ch, calc(100vw - 2em));
  z-index: 300;

  &[hidden] {
    display: none;
  }
}

/* Year stepper: secondary to the months themselves, so it stays small and
   quiet rather than heading the panel. ------------------------------------- */

.month-menu-year {
  align-items: center;
  align-self: center;
  display: flex;
  gap: 0.15em;
  justify-content: center;
}

.month-menu-year-label {
  color: var(--color-text-muted);
  font-family: "Hanken Grotesk", sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 4ch;
  text-align: center;
}

.month-menu-year-nav {
  align-items: center;
  border-radius: 50%;
  color: var(--color-text-subtle);
  display: flex;
  height: 1.5rem;
  justify-content: center;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  width: 1.5rem;

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

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

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

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

turbo-frame#month_menu_year {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* The year as one line ---------------------------------------------------- */

.month-menu-months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.month-menu-month {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  font-family: "Hanken Grotesk", sans-serif;
  gap: 0.6em;
  padding: 0.5em 0.1em 0.4em;
  position: relative;
  text-decoration: none;
  transition: color 0.15s ease;

  /* Each cell draws its own segment of the rule, so the twelve join into one
     continuous line — and it still works when the row wraps on mobile. */
  &::before {
    background: var(--color-surface-alt);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: calc(0.5em + 0.25em);
  }

  &:first-child::before {
    left: 50%;
  }

  &:last-child::before {
    right: 50%;
  }

  .month-menu-month-tick {
    background: var(--color-text-subtle);
    border-radius: 50%;
    height: 0.5em;
    position: relative;
    transition:
      background-color 0.15s ease,
      box-shadow 0.15s ease,
      transform 0.15s ease;
    width: 0.5em;
  }

  .month-menu-month-name {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  &:hover {
    color: var(--color-accent);

    .month-menu-month-tick {
      background: var(--color-accent);
    }
  }

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

/* Months already gone: the line ahead of today stays bright, behind it fades,
   so the year visibly fills up as it goes. Still navigable, so hover restores
   them to full strength. */
.month-menu-month--past {
  color: var(--color-text-subtle);

  .month-menu-month-name {
    font-weight: 500;
  }

  .month-menu-month-tick {
    background: var(--color-surface-alt);
    transform: scale(0.8);
  }

  &::before {
    background: color-mix(in srgb, var(--color-surface-alt) 55%, transparent);
  }

  &:hover {
    color: var(--color-accent);

    .month-menu-month-tick {
      background: var(--color-accent);
    }
  }
}

/* The month you are looking at. */
.month-menu-month--active {
  color: var(--color-accent);

  .month-menu-month-tick {
    background: var(--color-accent);
    transform: scale(1.7);
  }
}

/* The real current month, wherever you have navigated to. */
.month-menu-month--today .month-menu-month-tick {
  background: var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-accent);
}

.month-menu-month--active.month-menu-month--today .month-menu-month-tick {
  background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
}

@media (max-width: 48rem) {
  .month-menu-months {
    grid-template-columns: repeat(6, 1fr);
    row-gap: var(--space-sm);
  }
}

/* Account utilities, tucked in the corner: present, but not what the menu is
   offering you. ------------------------------------------------------------ */

.month-menu-actions {
  display: flex;
  gap: 0.25em;
  justify-content: flex-end;
  margin-top: calc(var(--space-lg) * -0.5);
}

.month-menu-action {
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  gap: 0.45em;
  letter-spacing: -0.01em;
  padding: 0.5em 1em;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;

  img {
    height: 0.95em;
    width: 0.95em;
  }

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

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