/* Reactions on the shared plan (public/reactions.js). Colours come from the
   trip's look through the same tokens as everything else, so a beach trip's
   pressed thumbs up is beach ink, not a colour of its own. */

.react { margin-top: var(--s2); display: grid; gap: var(--s1); }
.react-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Big enough for a thumb on a phone: 40px tall, never a fiddly icon. */
button.pill.react-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 6px 14px;
  font-size: 14px; line-height: 1;
}
.react-n { font-variant-numeric: tabular-nums; font-weight: 600; }

.react-who { font-size: 13.5px; line-height: 1.45; }
.react-fine { font-size: 13px; }

.react-form { display: grid; gap: var(--s2); margin-top: var(--s1); }
.react-form input { min-width: 0; width: 100%; }
.react-form-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* The host's view of who would swap it: set off by a rule in the accent, the
   way the site marks anything that wants the host's attention. */
.react-swaps, .react-editor {
  border-left: 3px solid var(--accent-line);
  padding-left: var(--s3);
  display: grid; gap: 2px;
}
.react-swaps .meta, .react-editor .meta { font-size: 13.5px; line-height: 1.45; }
.react-editor { margin: var(--s2) 0; }