/* Reactions on a dated lesson: the row inside the expanded card and the small
   mark a collapsed card carries once the class has reacted. */

/* Six moods in one even row: equal columns, so a mood nobody picked keeps its
   place and the row never reflows as counts appear. */
.panel-row.reactions {
  flex: 1 0 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.panel-row.reactions .panel-label { grid-column: 1 / -1; }

.reaction {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  justify-content: center;
  border: 1px solid var(--sm-line);
  border-radius: 13px;
  background: #fff;
  font: inherit;
  cursor: pointer;
  transition: transform var(--dur-instant) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.reaction:active { transform: scale(var(--press-scale)); }

/* The pupil's own pick. One at a time, so the tint never competes with itself. */
.reaction.picked {
  border-color: rgba(22, 119, 242, .34);
  background: rgba(235, 244, 255, .9);
}

.reaction-glyph {
  font-size: 18px;
  line-height: 1;
  /* Colour emoji on every platform, and never the subject tone by accident. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.reaction-count {
  min-width: 9px;
  color: var(--sm-muted);
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.reaction.picked .reaction-count { color: var(--sm-blue); }

.reaction.just-picked { animation: reaction-pop var(--dur-slow) var(--ease-spring); }

@keyframes reaction-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Said once, in the same voice as the reminders note: the numbers are not real
   yet and the pick does not leave this device. */
.reactions-note {
  grid-column: 1 / -1;
  color: var(--sm-muted);
  font-size: 11.5px;
  line-height: 1.45;
}

/* The collapsed card. Sits in the meta row beside the room and the textbook. */
.reaction-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 5px;
  border-radius: 9px;
  background: rgba(101, 126, 164, .1);
}

.reaction-mark.mine { background: rgba(22, 119, 242, .12); }

.reaction-face {
  font-size: 13px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.reaction-total {
  color: var(--sm-muted);
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.reaction-mark.mine .reaction-total { color: var(--sm-blue); }

@media (prefers-reduced-motion: reduce) {
  .reaction, .reaction.just-picked { transition: none; animation: none; }
}