/* Лента событий: шапка с уборкой, подписи дней и сами события.

   Событие отвечает на четыре вопроса сразу, и каждый ответ на своём
   месте: цветной знак слева — что это, крупная строка — что случилось,
   время справа — когда, ярлык внизу — вид события одним словом. */

.feedbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.feedbar__count {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.feedbar__acts {
  display: flex;
  gap: var(--sp-2);
}

/* Выключенная кнопка не исчезает, а гаснет: та, что то есть, то нет,
   заставляет искать её глазами каждый раз. */
.feedbar .btn[disabled] {
  opacity: .45;
  pointer-events: none;
}

.events {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.event {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  opacity: .62;
  transition: opacity var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

/* Непрочитанное — в полную силу. Прочитанное тише и бледнее: так,
   вернувшись в ленту через день, человек видит, докуда дошёл. */
.event--new { opacity: 1; }
.event--new .event__title { font-weight: 750; }

/* Событие, которое ждёт ответа, обведено: оно не просто весть,
   а дело, и стоять наравне с прочими не должно. */
.event--waiting { border-color: var(--accent-dim); }

/* Знак слева — он же кнопка «прочитано». Цвет говорит о роде
   события раньше, чем прочитана строка. */
.event__mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 11.5cqw;
  height: 11.5cqw;
  border: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease);
}

.event__mark:active { transform: scale(.92); }

.event__mark .icon {
  width: var(--fs-md);
  height: var(--fs-md);
}

.event__mark--ask  { color: var(--accent-text); }
.event__mark--good { color: var(--ok); }
.event__mark--bad  { color: var(--danger); }

/* Зелёная точка на знаке — «не прочитано». Одного взгляда на левую
   колонку хватает, чтобы понять, что осталось разобрать. */
.event--new .event__mark::after {
  content: "";
  position: absolute;
  top: -2%;
  right: -2%;
  width: var(--sp-3);
  height: var(--sp-3);
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--surface);
}

.event__body {
  flex: 1;
  min-width: 0;
}

.event__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.event__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: 650;
  letter-spacing: -.01em;
}

/* Время справа и мелко: оно уточняет, а не сообщает. */
.event__when {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.event__note {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-dim);
}

/* Ярлык вида события: одно слово, по которому лента читается
   беглым взглядом, без вчитывания в строки. */
.event__tag {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.event__tag--ask  { background: var(--accent); color: var(--on-accent); }
.event__tag--good { background: var(--role-client); color: var(--on-role-client); }
.event__tag--bad  { background: var(--danger); color: var(--on-badge); }

/* Ответ на запрос: две кнопки в строку, согласие первым. Столбиком
   их ставят там, где отказ безопаснее согласия; здесь наоборот —
   человека об этом просили, и он этого ждал. */
.event__acts {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* Корзина в кружке: уборка стоит в стороне от чтения и тише всего
   остального — это не то действие, ради которого ленту открыли. */
.event__drop {
  flex: none;
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-faint);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.event__drop .icon {
  width: var(--fs-sm);
  height: var(--fs-sm);
}

.event__drop:active { background: var(--line); }

@media (hover: hover) {
  .event__drop:hover { color: var(--danger); }
  .event__mark:hover { background: var(--line); }
}