@layer components {
  .button_to, .inline-form { display: inline-flex; }

  .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-bg); font-size: var(--font-size-sm); }
  .btn:hover { background: var(--color-surface-2); }
  .btn--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
  .btn--primary:hover { background: #1d4ed8; }
  .btn--danger { color: var(--color-danger); }
  .btn--ghost { border-color: transparent; }
  .btn--sm { padding: var(--space-1) var(--space-2); }

  .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border-radius: 999px; font-size: var(--font-size-sm); background: var(--color-surface-2); color: var(--color-muted); }
  .badge--ai { background: #ede9fe; color: #6d28d9; }
  .badge--self { background: #dcfce7; color: #166534; }
  .badge--overdue { background: #fee2e2; color: var(--color-danger); }

  .field { display: flex; flex-direction: column; gap: var(--space-1); }
  .field__label { font-size: var(--font-size-sm); color: var(--color-muted); }
  .field__input, .field__select, .field__textarea { width: 100%; }
  .field__textarea { min-block-size: 4rem; }

  .task-card { position: relative; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); padding-inline-start: calc(var(--space-3) + 4px); box-shadow: var(--shadow-1); }
  .task-card__body { display: block; color: inherit; text-decoration: none; }
  .task-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4px; background: var(--role-color, var(--color-muted)); border-radius: var(--radius) 0 0 var(--radius); }
  .task-card:hover { box-shadow: var(--shadow-2); }
  .task-card--done { opacity: 0.6; }
  .task-card--incubating { border-style: dashed; }
  .task-card :where(.task-card__title) { font-weight: 600; }
  .task-card--done .task-card__title { text-decoration: line-through; }
  .task-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--font-size-sm); color: var(--color-muted); }
  .priority-dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; flex: none; }
  .priority-dot--1 { background: var(--color-danger); }
  .priority-dot--2 { background: var(--color-warning); }
  .priority-dot--3 { background: var(--color-border); }

  .slideover { position: fixed; inset: 0; z-index: var(--z-modal); }
  .slideover[aria-hidden="true"] { display: none; }
  .slideover__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.4); }
  .slideover__panel { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 90vi; max-inline-size: 60rem; background: var(--color-bg); box-shadow: var(--shadow-2); transform: translateX(100%); transition: transform 0.2s ease; overflow: auto; display: flex; flex-direction: column; }
  .slideover[aria-hidden="false"] .slideover__panel { transform: translateX(0); }
  .slideover__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border-block-end: 1px solid var(--color-border); position: sticky; inset-block-start: 0; background: var(--color-bg); }
  .slideover__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
  @media (prefers-reduced-motion: reduce) {
    .slideover__panel { transition: none; }
  }

  .modal { position: fixed; inset: 0; z-index: var(--z-modal); }
  .modal[aria-hidden="true"] { display: none; }
  .modal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.4); }
  .modal__dialog { position: relative; margin: 12vh auto; inline-size: min(90vw, 32rem); background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: var(--space-4); }

  .chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius); background: var(--color-surface-2); font-size: var(--font-size-sm); }

  .timeline { display: flex; flex-direction: column; gap: var(--space-2); }
  .timeline__item { display: flex; gap: var(--space-3); font-size: var(--font-size-sm); }
  .timeline__time { color: var(--color-muted); white-space: nowrap; min-inline-size: 8rem; }

  .empty { color: var(--color-muted); padding: var(--space-8); text-align: center; }

  .day-nav { display: flex; align-items: center; gap: var(--space-3); }
  .day-title-input { font-weight: 600; }
  .ical-url { inline-size: 100%; font-family: monospace; font-size: var(--font-size-sm); }

  .auth-page { display: grid; place-items: center; min-block-size: 100vh; background: var(--color-surface); padding: var(--space-4); }
  .auth-card { inline-size: min(90vw, 22rem); }
  .auth-card input { width: 100%; }
}