/* =============================================================================
   COMPONENT: calendar-export — "Add to your calendar" provider chooser sheet.
   Vendor logo tiles use each provider's brand color (identity, not app chrome).
   ========================================================================== */
@layer components {
  .calendar-export-sheet__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    text-align: center;
  }
  .calendar-export-sheet__sub {
    text-align: center;
    font-size: var(--text-md);
    line-height: 1.4;
  }
  .calendar-export-sheet__providers { margin-block: var(--space-md); }
  .calendar-export-sheet__cancel { margin-block-start: var(--space-xs); }

  .calendar-provider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-sm);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: inherit;
    text-decoration: none;
    &:hover { background: var(--surface-sunken); }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  }
  .calendar-provider__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-md);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    color: var(--accent-contrast);
  }
  /* Vendor identity colors — not app semantic tokens. */
  .calendar-provider__logo--apple { background: oklch(22% 0 0); }
  .calendar-provider__logo--google { background: oklch(58% 0.15 255); }
  .calendar-provider__logo--outlook { background: oklch(52% 0.12 245); }
  .calendar-provider__logo--yahoo { background: oklch(42% 0.22 305); }
  .calendar-provider__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    min-inline-size: 0;
    & strong { font-size: var(--text-md); font-weight: var(--weight-semibold); }
    & span { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-medium); }
  }
}