/*!
 * cei-sensorium.css — presentation for the reading-signal layer.
 *
 * Written to survive a redesign. It borrows the page's own tokens where they exist and
 * falls back to currentColor, so it reads correctly on the current dark surface and on a
 * light editorial ground without edits. No fixed hex on text, no fixed background on the
 * container. If the visual system changes underneath, this follows it.
 *
 * Design intent: this is an instrument, not a widget. It sits quietly under a claim and
 * only earns weight once someone has answered. The "Off base" affordance is styled with
 * the same authority as the other two on purpose — an index that makes disagreement look
 * like the ugly button is collecting applause, not evidence.
 */

.sensorium-reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line, currentColor);
  border-top-color: color-mix(in srgb, currentColor 14%, transparent);
  opacity: 0.62;
  transition: opacity 160ms ease;
}

.sensorium-reactions:hover,
.sensorium-reactions:focus-within,
.sensorium-reactions.is-answered {
  opacity: 1;
}

.sensorium-reactions-prompt {
  font-family: var(--font-label, ui-monospace, "IBM Plex Mono", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.66;
  margin-right: 0.25rem;
}

.sensorium-reaction {
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.44rem 0.72rem;
  border-radius: 999px;
  cursor: pointer;
  color: inherit;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.sensorium-reaction:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-color: color-mix(in srgb, currentColor 42%, transparent);
}

.sensorium-reaction:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.sensorium-reaction.is-on {
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-color: currentColor;
  font-weight: 600;
}

/* Once answered, the unchosen options recede rather than disappear — the reader can
   change their mind, and a control that vanishes on click reads as a submission. */
.sensorium-reactions.is-answered .sensorium-reaction:not(.is-on) {
  opacity: 0.45;
}

/* One thumb, one tap: on phones the row is full-width and the targets clear 44px. */
@media (max-width: 640px) {
  .sensorium-reactions {
    gap: 0.4rem;
  }
  .sensorium-reactions-prompt {
    flex-basis: 100%;
    margin-bottom: 0.15rem;
  }
  .sensorium-reaction {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0.6rem 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sensorium-reactions,
  .sensorium-reaction {
    transition: none;
  }
}

@media print {
  .sensorium-reactions {
    display: none;
  }
}