/* Sweet Trail website forms (account deletion). Colours come from style.css. */
form { margin: 1.2em 0 0; }
fieldset { border: 1px solid var(--edge); border-radius: 16px; padding: 12px 18px 16px; margin: 0 0 1.1em; }
legend { font-weight: 650; padding: 0 6px; }
label { display: block; font-weight: 600; margin: 0.9em 0 0.3em; }
label.choice { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; margin: 0.6em 0; }
label.choice input { margin-top: 0.35em; }
input[type=email], input[type=text] {
  width: 100%; max-width: 26rem; box-sizing: border-box; font: inherit; color: var(--ink);
  background: var(--page); border: 1px solid var(--ink-soft); border-radius: 10px; padding: 10px 12px;
}
input.code { max-width: 12rem; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; font-size: 1.3rem; }
input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hint { color: var(--ink-soft); font-size: 0.95rem; margin: 0.3em 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button {
  font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 999px; padding: 11px 22px; margin: 1.2em 0 0;
  background: var(--accent); color: var(--on-accent);
}
button:hover { filter: brightness(1.08); }
button.secondary { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
.error { margin: 0 0 1.1em; padding: 12px 16px; border-radius: 12px; border-left: 5px solid var(--accent); background: var(--todo); }
.done { margin: 0 0 1.1em; padding: 12px 16px; border-radius: 12px; border-left: 5px solid var(--note-edge); background: var(--note); }