/* Random Generator — the mode segment over one options card per mode (rows
   with trailing number fields, the no-duplicates toggle, the sides pill, the
   list as a flush text area) and a result card: the value as a hero, then
   Copy and Generate in the actions tray (layout from
   styles/components/form.css). The list is an styles/components/editor.css
   pane; only the fields and the result states are the page's own. */

/* input.<class>: the shared form rule input[type="…"] in common.css is
   (0,1,1) and would beat a bare class. */
input.rg-in {
  width: 100px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The generated value in the accent; long runs wrap anywhere. */
.rg-out {
  color: var(--accent);
  word-break: break-word;
}
/* Empty and error states: a muted prompt or a danger message, not a
   headline meant for a generated value. */
.rg-result:is(.is-empty, .is-error) .rg-out {
  font: 500 15px/1.4 var(--sans);
  letter-spacing: -0.01em;
  color: var(--text-muted);
}
.rg-result.is-error .rg-out { color: var(--danger); }

.rg-extra {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.rg-extra:empty { display: none; }