@scope (.weekly-calendar) {
  :scope {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  .toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
    padding-bottom: var(--space-lg);
    flex-shrink: 0;
  }

  .week-nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .nav-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    fill: currentColor;
  }

  .week-label {
    font-size: var(--text-body);
    font-weight: var(--font-semibold);
    color: var(--color-text-heading);
    min-width: 14ch;
    text-align: center;
  }

  .grid {
    display: grid;
    grid-template-columns: 4rem repeat(7, 1fr);
    grid-template-rows: auto repeat(15, minmax(3rem, auto));
    border: 1px solid var(--color-border-muted);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: auto;
    background: var(--color-surface);
    flex: 1;
    min-height: 0;
  }

  .corner {
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
  }

  .day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-sm);
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border-muted);

    &.today {
      background: var(--color-primary);

      .day-name,
      .day-number {
        color: var(--color-text-on-primary);
      }
    }
  }

  .day-name {
    font-size: var(--text-caption);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }

  .day-number {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-heading);
    line-height: var(--leading-none);
  }

  .time-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-2xs) var(--space-sm) 0;
    font-size: var(--text-caption);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border-muted);
    background: var(--color-surface);
  }

  .cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs);
    border-right: 1px solid var(--color-border-muted);
    border-bottom: 1px solid var(--color-border-muted);
    min-height: 3rem;

    &.today {
      background: light-dark(
        oklch(97% 0.014 254.604 / 0.3),
        oklch(28.2% 0.091 267.935 / 0.15)
      );
    }
  }

  .avatar {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    font-size: var(--text-caption);
    font-weight: var(--font-bold);
    color: var(--white);
    cursor: pointer;
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    position: relative;

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

    &:hover {
      filter: brightness(1.1);
      box-shadow: var(--shadow-sm);
    }

    &.avatar--inactive {
      opacity: 0.5;
    }
  }

  .avatar-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    background-color: var(--color-success);
    border: 2px solid var(--color-surface);
  }

  .avatar-color-0 { background: var(--blue-600); }
  .avatar-color-1 { background: var(--emerald-600); }
  .avatar-color-2 { background: var(--amber-600); }
  .avatar-color-3 { background: var(--rose-600); }
  .avatar-color-4 { background: var(--violet-600); }
  .avatar-color-5 { background: var(--teal-600); }
  .avatar-color-6 { background: var(--orange-600); }
  .avatar-color-7 { background: var(--pink-600); }

  .appointment-popover {
    margin: auto;
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-lg);
    color: var(--color-text);
    min-width: 16rem;

    position: fixed;
    inset: unset;
    position-area: bottom span-right;
    position-try-fallbacks: --above, --left;
    width: max-content;
    margin: var(--space-xs) 0 0;

    &::backdrop {
      background: transparent;
    }
  }

  @position-try --above {
    position-area: top span-right;
    margin: 0 0 var(--space-xs);
  }

  @position-try --left {
    position-area: left span-bottom;
    margin: 0 var(--space-xs) 0 0;
  }

  .popover-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .popover-lead {
    font-size: var(--text-body);
    font-weight: var(--font-semibold);
    color: var(--color-text-heading);
  }

  .popover-store {
    font-size: var(--text-body-sm);
    color: var(--color-text-secondary);
  }

  .popover-time {
    font-size: var(--text-body-sm);
    color: var(--color-text-muted);
  }

  .popover-sdr {
    font-size: var(--text-body-sm);
    color: var(--color-text-secondary);
  }

  .popover-notes {
    padding-block: var(--space-2xs);
    border-top: 1px solid var(--color-border);
  }

  .popover-notes__label {
    font-size: var(--text-body-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
  }

  .popover-notes__text {
    font-size: var(--text-body-sm);
    color: var(--color-text-muted);
    white-space: pre-wrap;
  }

  .popover-aware {
    padding-block: var(--space-2xs);
    border-block: 1px solid var(--color-border);

    /* button_to renders a <form><button> — strip all button chrome */
    form {
      display: contents;
    }

    button[type="submit"] {
      all: unset;
      display: block;
      width: 100%;
    }
  }

  .aware-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-body-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    width: 100%;

    input[type="checkbox"] {
      cursor: pointer;
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
    }
  }

  .popover-edit {
    font-size: var(--text-body-sm);
    font-weight: var(--font-medium);
    color: var(--color-primary);
    margin-top: var(--space-xs);
  }

  .appointment-count {
    color: var(--color-text-muted);
    margin-inline-start: auto;
    white-space: nowrap;
  }

  @media (width < 48rem) {
    .grid {
      overflow-x: auto;
      min-width: 600px;
    }

    .toolbar {
      flex-direction: column;
      align-items: stretch;
    }

    .week-nav {
      justify-content: center;
    }

    .appointment-count {
      margin-inline-start: 0;
      text-align: center;
    }
  }
}