/* The mailing list's public pages on the API host (layouts/public): plain and calm, light and dark from the system.
   Every rule is scoped to body.public, because the admin's layout loads every stylesheet in this folder. */
body.public {
  color-scheme: light dark;
  --bg: light-dark(#e8e6e1, #12161a);
  --text: light-dark(#1a1c1f, #e6e3db);
  --muted: light-dark(#4e5258, #98a0a8);
  --primary: light-dark(#2d6180, #77acce);
  --radius: 6px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.6 system-ui, sans-serif;
}
.public .public-main { box-sizing: border-box; width: min(100% - 2rem, 34rem); margin: clamp(2rem, 10vh, 6rem) auto 2rem; }
.public h1 { margin: 0 0 1rem; font-size: 1.625rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; }
.public p { margin: 0 0 1rem; }
.public a { color: var(--primary); }
.public .muted { color: var(--muted); font-size: 0.95rem; }
.public .consent { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--muted); }
.public form { margin: 1.5rem 0; }
.public fieldset { margin: 0 0 1.25rem; padding: 0; border: 0; }
.public legend { margin-bottom: 0.5rem; padding: 0; }
.public .choice { display: flex; gap: 0.5rem; align-items: baseline; margin: 0.25rem 0; }
.public button { font: inherit; padding: 0.6rem 1.2rem; border: 0; border-radius: var(--radius); background: var(--primary); color: var(--bg); cursor: pointer; }
.public :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius); }
.public .public-footer { width: min(100% - 2rem, 34rem); margin: 0 auto 2rem; font-size: 0.95rem; }