/* The mailing list's sign-up form (index, changelog, help) and its page (newsletter.html). */
.nl { margin: 56px 0 24px; padding: 24px 26px; max-width: 720px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--card); }
.nl h2 { margin: 0 0 6px; font-size: clamp(19px, 2.1vw, 22px); }
.nl p { margin: 0 0 14px; }
.nl-form { display: grid; gap: 10px; }
.nl-label { font-weight: 600; font-size: 14.5px; }
.nl-form input[type=email] { width: 100%; max-width: 420px; font: inherit; color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.nl-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.nl-topics { border: 0; padding: 0; margin: 4px 0; display: grid; gap: 6px; }
.nl-topics legend { font-weight: 600; font-size: 14.5px; padding: 0; margin-bottom: 6px; }
.nl-topics label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.nl-topics input { width: 18px; height: 18px; accent-color: var(--accent); }
.nl-consent { color: var(--muted); font-size: 14.5px; max-width: 60ch; }
.nl-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.nl-status { color: var(--muted); min-height: 1.5em; }
.nl-status.ok { color: var(--fg); font-weight: 600; }
.nl-status.bad { color: var(--pro); }
.nl-form .button { justify-self: start; cursor: pointer; font: inherit; }
.nl-form .button[disabled] { opacity: .55; cursor: progress; }