@layer components {
  :where(.now, .calendar) .week {
    --day-width: 300px;
    --day-entry-height: 2.25rem;
    --week-width: calc(7 * var(--day-width));

    display: flex;
    flex-direction: row;
    width: var(--week-width);
    min-width: var(--week-width);
    border: 2px solid var(--color-ink);
    margin: 0 0 2rem;
  }

  :where(.now, .calendar) .week .day {
    flex: 0 0 var(--day-width);
    width: var(--day-width);
    min-width: var(--day-width);
    border-right: 1px solid var(--color-ink);
  }

  :where(.now, .calendar) .week .day:last-child {
    border-right: 0;
  }

  :where(.now, .calendar) .day__heading {
    background: var(--color-ink);
    color: var(--color-canvas);
    font-size: var(--text-x-small);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin: 0;
    padding: 0.45rem 0.5rem;
    white-space: nowrap;
  }

  :where(.now, .calendar) .day__entries {
    display: flex;
    flex-direction: column;
  }

  :where(.now, .calendar) .day__entry {
    box-sizing: border-box;
    height: var(--day-entry-height);
    min-height: var(--day-entry-height);
    padding: 0.3rem 0.5rem;
    border-bottom: 1px dotted var(--color-ink-light);
  }

  :where(.now, .calendar) .day__entry:last-child {
    border-bottom: 0;
  }

  :where(.now, .calendar) .day__todo {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    min-width: 0;
    height: 100%;
  }

  :where(.now, .calendar) .day__todo_action {
    flex: 0 0 auto;
  }

  :where(.now, .calendar) .day__todo_title {
    color: var(--color-ink);
    flex: 1 1 auto;
    font-size: var(--text-small);
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :where(.now, .calendar) .day__todo_dates {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 0.25rem;
    min-width: 0;
  }

  :where(.now, .calendar) .day__entry--overflow {
    align-items: center;
    display: flex;
  }

  :where(.now, .calendar) .day__overflow_link {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
  }

  :where(.now, .calendar) .day__overflow_link:hover {
    color: var(--color-ink);
  }

  /* Viewport-fitting week shell for Calendar. Now's vertical week lives in now.css. */
  .calendar_week {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--color-ink);
  }

  .calendar_week__body.week {
    --week-width: auto;

    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    border: 0;
  }

  .calendar_week .day {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    overflow: hidden;
  }

  .calendar_week .day__heading {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .calendar_week .day__heading--stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    background: var(--color-ink-lightest);
    color: var(--color-ink);
  }

  .calendar_week--current .day__heading--stacked {
    background: linear-gradient(
      165deg,
      oklch(var(--lch-yellow-lighter)) 0%,
      oklch(var(--lch-yellow-medium)) 100%
    );
    color: var(--color-ink);
  }

  .calendar_week--current .day__heading--today {
    background: linear-gradient(
      165deg,
      oklch(88% 0.18 95) 0%,
      oklch(72% 0.17 85) 100%
    );
    color: var(--color-ink);
  }

  .calendar_week .day__weekday,
  .calendar_week .day__number {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
  }

  /* Presence bubbles: markup is shared; only mobile densify reveals them. */
  .day__bubble {
    display: none;
  }

  /* Desktop only: click a day header to expand it (and gently widen neighbors).
     Mobile densified weeks (max-width: 48rem) keep equal day widths. */
  @media (min-width: 48.01rem) {
    :is(.now, .calendar) .day__todo_title {
      font-size: 14px;
    }

    .calendar_week .day {
      transition: flex-grow 220ms ease;
    }

    .calendar_week .day__heading {
      cursor: pointer;
    }

    .calendar_week--expanded .day {
      flex-grow: 0.4;
    }

    .calendar_week--expanded .day--expanded {
      flex-grow: 3.4;
    }

    .calendar_week--expanded .day--neighbor {
      flex-grow: 1.9;
    }
  }

  @media (max-width: 48rem) {
    .calendar__weeks .week {
      --day-entry-height: 0.55rem;
      border-width: 1px;
    }

    .calendar__weeks .day__heading {
      font-size: var(--text-xx-small);
      padding: 0.2rem 0.15rem;
    }

    .calendar__weeks .day__heading--stacked {
      align-items: center;
      gap: 0;
    }

    .calendar__weeks .day__entry {
      display: flex;
      align-items: center;
      padding: 0.1rem 0.15rem;
    }

    .calendar__weeks .day__todo {
      display: none;
    }

    .calendar__weeks .day__bubble {
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: 5px;
      border-radius: 1px;
      text-decoration: none;
    }

    .calendar__weeks .day__bubble--shortlisted {
      background-color: oklch(var(--lch-blue-medium));
    }

    .calendar__weeks .day__bubble--tickler {
      background-color: oklch(var(--lch-yellow-medium));
    }

    .calendar__weeks .day__bubble--deadline {
      background-color: oklch(var(--lch-red-darker));
    }

    .calendar__weeks .day__bubble--shortlisted.day__bubble--deadline {
      background: linear-gradient(
        to right,
        oklch(var(--lch-blue-medium)) 50%,
        oklch(var(--lch-red-darker)) 50%
      );
    }

    .calendar__weeks .day__bubble--tickler.day__bubble--deadline {
      background: linear-gradient(
        to right,
        oklch(var(--lch-yellow-medium)) 50%,
        oklch(var(--lch-red-darker)) 50%
      );
    }

    .calendar__weeks .day__overflow_link {
      font-size: 0;
      letter-spacing: 0;
      line-height: 1;
    }

    .calendar__weeks .day__overflow_link::before {
      content: "+" attr(data-extra-count);
      color: var(--color-ink-medium);
      font-size: var(--text-xx-small);
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    /* Stacked week todos are not navigable on mobile — day tap opens the tray. */
    .calendar__weeks .week a.day__bubble,
    .calendar__weeks .week a.day__todo_title,
    .calendar__weeks .week a.day__overflow_link {
      pointer-events: none;
    }

    .calendar_week .day {
      cursor: pointer;
      transition: opacity 180ms ease;
    }

    .calendar.day_tray-open .day:not(.day--focused):not(.day--tray) {
      opacity: 0.35;
    }
  }

  @keyframes day-entry-highlight {
    0% {
      background-color: transparent;
    }

    12% {
      background-color: oklch(var(--lch-yellow-lighter));
    }

    55% {
      background-color: oklch(var(--lch-yellow-lighter));
    }

    100% {
      background-color: transparent;
    }
  }

  .day__entry--highlight {
    animation: day-entry-highlight 1.25s ease-out 1;
  }
}