/* Hallmark · macrostructure: existing single-purpose form · tone: quiet technical · anchor hue: 255
 * critique: P5 H5 E5 S5 R5 V4 · enrichment: LDRS Ring · motion: functional loader only */
html { overflow-x: clip; }
body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font: 1.0625rem/1.5 var(--font-body);
}
main { width: min(34rem, calc(100% - 2rem)); padding-block: var(--space-xl); }
h1 { min-width: 0; margin: 0 0 var(--space-2xs); overflow-wrap: anywhere; font: 700 var(--text-xl)/1.15 var(--font-display); letter-spacing: -0.025em; }
h2 { margin: 0; font: 700 var(--text-md)/1.2 var(--font-display); }
p { color: var(--color-muted); }
label { display: block; margin-block-start: var(--space-md); }
input, textarea, button {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  margin-block-start: var(--space-2xs);
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-control);
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--color-paper-raised);
  color: var(--color-ink);
  font: inherit;
}
textarea { min-height: 7rem; resize: vertical; }
button {
  margin-block-start: var(--space-lg);
  background: var(--color-button);
  color: var(--color-button-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out);
}
button:focus-visible, input:focus-visible, textarea:focus-visible { outline-color: var(--color-focus); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
[hidden] { display: none !important; }
#status { min-height: 1.5rem; }
.waiting { padding-block: var(--space-lg); }
.waiting__indicator { display: flex; align-items: center; gap: var(--space-md); color: var(--color-ink); }
.waiting__copy { margin-block: var(--space-xs) 0; max-width: 55ch; }
.waiting__action { width: auto; min-width: 11rem; padding-inline: var(--space-lg); }
@media (hover: hover) and (pointer: fine) {
  input:hover, textarea:hover { background: var(--color-paper); }
  button:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  button { transition-duration: 0ms; }
}