/* The Forms page (D114): one column, readable on a phone. */
html { background: var(--bg); color: var(--text); font-family: var(--sans); }
body { margin: 0; }
.page { max-width: 680px; margin: 0 auto; padding: 24px 16px 48px; display: grid; gap: 14px; }
.practice { margin: 0; color: var(--text-dim); font-weight: 600; letter-spacing: 0.01em; }
.practice:empty { display: none; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px 18px; box-shadow: var(--shadow);
}
.dim { color: var(--text-dim); }
.status { min-height: 1.2em; font-size: 0.95rem; }
.status.bad { color: var(--bad); }
.status.good { color: var(--ok); }
.foot { margin: 0; color: var(--text-faint); font-size: 0.85rem; }
.actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
button {
  font: inherit; font-weight: 600; border-radius: var(--radius); padding: 12px 20px; min-height: 44px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
}
button.primary { background: var(--accent-solid); color: var(--on-accent-solid); border-color: transparent; }
button:disabled { opacity: 0.6; cursor: default; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The trap field: off-screen for people, a normal input for a bot. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.done h2, .closed h2 { margin-top: 0; }