/* Desktop calendar pills row — central column, only on
   `.has-desktop-shell` at ≥1200px. Below the breakpoint the partial is
   rendered with `hidden` and the controller never removes it (the
   parent media-query rule keeps `display: none` anyway). */

@layer components {
  .calendar-row {
    display: none;
  }

  @media (width >= 1200px) {
    .has-desktop-shell .calendar-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 12px 0;
    }

    .has-desktop-shell .calendar-row__nav {
      width: 32px;
      height: 32px;
      border-radius: 7px;
      background: transparent;
      color: rgb(161 161 170);
      border: 1px solid rgb(255 255 255 / 8%);
      display: grid;
      place-items: center;
      cursor: pointer;
      flex-shrink: 0;
      transition:
        background 0.15s ease,
        color 0.15s ease;
    }

    .has-desktop-shell .calendar-row__nav:hover {
      background: rgb(255 255 255 / 5%);
      color: var(--color-text);
    }

    /* Days container fills the space between chevrons and the
       Calendario button. Each pill gets `flex: 1 1 0` so the 9 days
       distribute evenly across the available width — at 1200 they sit
       tight, at 1920 they breathe. */
    .has-desktop-shell .calendar-row__days {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }

    /* Pill style mirrors `.calendar-strip__day` 1:1 — same surface bg,
       radius and inner type. We reuse the visual contract but keep a
       distinct class because the row container layout differs (grid-
       like distribution rather than horizontal scroll). */
    .has-desktop-shell .calendar-row__day {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      border-radius: 10px;
      border: 1px solid rgb(255 255 255 / 8%);
      background: var(--color-surface);
      color: inherit;
      cursor: pointer;
      font-family: inherit;
      flex: 1 1 0;
      min-width: 0;
      transition:
        background 0.15s ease,
        border-color 0.15s ease;
    }

    .has-desktop-shell .calendar-row__day:hover {
      background: var(--color-surface-hover);
    }

    .has-desktop-shell .calendar-row__day--active,
    .has-desktop-shell .calendar-row__day--active:hover {
      background: var(--color-accent);
    }

    .has-desktop-shell .calendar-row__day-name {
      font-size: 10px;
      font-weight: var(--weight-medium);
      color: var(--color-text-muted);
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .has-desktop-shell .calendar-row__day-number {
      font-size: 15px;
      font-weight: var(--weight-semibold);
      color: var(--color-text);
      margin-top: 2px;
    }

    /* Active pill — text inverts to on-accent over the green bg, same
       contract the mobile strip uses. */
    .has-desktop-shell .calendar-row__day--active .calendar-row__day-name {
      color: var(--color-on-accent-muted);
    }

    .has-desktop-shell .calendar-row__day--active .calendar-row__day-number {
      color: var(--color-on-accent);
    }

    /* Today (not currently selected) — accent-fg type to keep "HOY"
       discoverable when the user has navigated to another day. */
    .has-desktop-shell .calendar-row__day--today:not(.calendar-row__day--active) .calendar-row__day-name,
    .has-desktop-shell .calendar-row__day--today:not(.calendar-row__day--active) .calendar-row__day-number {
      color: var(--color-accent-fg);
    }

    /* Calendario button — icon-only square, anchored to the right via
       `margin-left: auto`. Matches `.calendar-row__day` visual height
       and surface so it reads as a sibling pill, not a CTA. Accessible
       name lives in `aria-label` + `title`. Opens the existing
       `calendar-dialog` modal (same dialog the mobile header opens). */
    .has-desktop-shell .calendar-row__open-dialog {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      padding: 6px 10px;
      border-radius: 10px;
      background: var(--color-surface);
      color: var(--color-text);
      border: 1px solid rgb(255 255 255 / 8%);
      cursor: pointer;
      margin-left: auto;
      flex-shrink: 0;
      font-family: var(--font-body);
      transition:
        background 0.15s ease,
        border-color 0.15s ease;
    }

    .has-desktop-shell .calendar-row__open-dialog:hover {
      background: var(--color-surface-hover);
    }
  }
}