/* the frame is just a wrapper now, the button carries the warning look itself */
.hazard {
  display: contents;
}

/* a warning panel: amber, striped, and rectangular, because rules are square */
.forbidden-button {
  --tone: #f59e0b;
  --size: auto;
  width: min(72vw, 300px);
  height: auto;
  padding: 40px 20px;
  border-radius: 22px;
  background:
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tone) 12%, transparent) 0 14px, transparent 14px 28px),
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tone) 28%, transparent), transparent 75%),
    var(--surface);
}

.forbidden-button:active,
.forbidden-button.is-pressed {
  background:
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tone) 22%, transparent) 0 14px, transparent 14px 28px),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tone) 55%, transparent), transparent 80%),
    var(--surface);
}

.readout {
  margin: 48px 0 0;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.message {
  min-height: 3em;
  max-width: 36ch;
  margin: 8px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.85rem;
}

/* small nudge each time a new message arrives */
.message.is-new {
  animation: settle 240ms ease-out;
}

@keyframes settle {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}