/* Карточка события: служебный блок над телом сообщения-приглашения.
   Тихий инструмент, как полоса статуса прогона: граница и фон поверхности,
   без заливки акцентом */
.event-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-panel, 8px);
  background: var(--surface);
  padding: var(--s2, 8px) var(--s3, 12px);
  margin-bottom: var(--s2, 8px);
}
.event-head { display: flex; align-items: baseline; gap: var(--s2, 8px); }
.event-icon { width: 14px; height: 14px; color: var(--accent); flex: none; align-self: center; }
.event-title { font-size: var(--fs-body); }
.event-link { margin-left: auto; font-size: 0.85em; white-space: nowrap; }
.event-when { display: flex; flex-wrap: wrap; gap: var(--s1, 4px); color: var(--muted, inherit); font-size: 0.9em; margin: var(--s1, 4px) 0; }
.event-place { font-weight: 600; }
.event-rsvp { display: flex; gap: var(--s1, 4px); margin: var(--s1, 4px) 0; }
.event-rsvp-btn {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.85em;
  cursor: pointer;
}
.event-rsvp-btn.is-mine {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.event-rsvp-btn:disabled { opacity: 0.6; cursor: default; }
.event-rsvp-hint { font-size: 0.8em; color: var(--muted, inherit); }
.event-people { display: flex; flex-direction: column; gap: 2px; font-size: 0.85em; }
.event-chips { display: flex; flex-wrap: wrap; gap: var(--s1, 4px); align-items: center; }
.event-chips-label { color: var(--muted, inherit); }
.event-chip { display: inline-flex; align-items: center; gap: 4px; }
.event-chip-avatar { display: inline-flex; }
.event-card.is-soon { border-left-color: var(--warn, var(--accent)); }

/* Тост напоминания: тихая ссылка в углу, исчезает сама */
.event-toast {
  position: fixed;
  right: var(--s3, 12px);
  bottom: var(--s3, 12px);
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-panel, 8px);
  padding: var(--s2, 8px) var(--s3, 12px);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-popup);
}

/* Страница события */
.page-event { max-width: 720px; margin: 0 auto; padding: var(--s3, 12px); }
.event-crumb { font-size: 0.9em; }
.event-roster .event-chips { margin-bottom: var(--s1, 4px); }

/* Форма события в композере: поля в строке с переносом, действие -
   акцентная кнопка (класс composer-send даёт вид главной кнопки) */
.composer-event {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2, 8px);
  margin-bottom: var(--s2, 8px);
}
.composer-event input,
.composer-event select {
  height: 32px;
  padding: 0 var(--s2, 8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-control, 6px);
  background: var(--bg);
  color: inherit;
  font-family: inherit;
  font-size: var(--fs-meta, 13px);
}
.composer-event [data-event-title] { flex: 1 1 180px; min-width: 140px; }
.composer-event .composer-event-create { flex-shrink: 0; }

/* Пояснение про календарь: тихая строка под участниками. Не настройка, а
   факт - человек должен знать заранее, что ответ пишет в календарь */
.event-calendar-note {
  margin: var(--s1, 4px) 0 0;
  font-size: 0.8em;
  color: var(--text-faint);
}

/* Галочка «на всю компанию» в форме события: тихая строка, но с чётким
   квадратом - это переключатель публичности, а не украшение */
.composer-event-company {
  display: inline-flex;
  align-items: center;
  gap: var(--s1, 4px);
  font-size: var(--fs-meta, 13px);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.composer-event-company input { margin: 0; }