
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #1a1a1a;
  background: #f7f7f5;
}
header.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 32rem; margin: 0 auto; padding: 0.75rem 1rem 0; }
header.top a { color: #1b5fa8; text-decoration: none; font-size: 0.9375rem; }
header.top a.brand { font-weight: 700; color: #1a1a1a; }
header.top a.lang-toggle { text-decoration: underline; }
.wrap { max-width: 32rem; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; }
input[aria-invalid="true"] { border-color: #a3231a; }
h1 { font-size: 1.375rem; margin: 0 0 0.5rem; }
p.lede { color: #4b4b4b; margin: 0 0 1.5rem; }
label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem; }
.field { margin-bottom: 1rem; }
[hidden] { display: none; }
.showpw { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; margin: -0.25rem 0 1rem; }
.showpw input { width: auto; }
.hint { font-size: 0.8125rem; color: #666; margin-top: 0.25rem; }
.hint.bad { color: #a3231a; }
.hint.good { color: #2a6b3a; }
.hint:empty { display: none; }
h2 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
dl.details { margin: 0 0 1rem; padding: 0.75rem 1rem; background: #fff; border: 1px solid #ddd; border-radius: 0.375rem; }
dl.details dt { font-size: 0.8125rem; color: #666; }
dl.details dd { margin: 0 0 0.5rem; overflow-wrap: anywhere; }
dl.details dd:last-child { margin-bottom: 0; }
input[type="text"], input[type="email"], input[type="password"], textarea {
  width: 100%;
  padding: 0.5rem 0.625rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  background: #fff;
  color: inherit;
}
input:focus-visible { outline: 3px solid #1b5fa8; outline-offset: 1px; }
.honeypot { position: absolute; left: -9999px; top: -9999px; }
.error { color: #a3231a; font-size: 0.875rem; margin: 0 0 1rem; }
button {
  font: inherit;
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 0.375rem;
  background: #1b5fa8;
  color: #fff;
  cursor: pointer;
}
button:hover { opacity: 0.9; }
.notice { background: #eef5ee; border: 1px solid #b9d7bd; border-radius: 0.375rem; padding: 0.625rem 0.75rem; margin: 0 0 1rem; }
.card { background: #fff; border: 1px solid #ddd; border-radius: 0.5rem; padding: 0.875rem 1rem; margin: 0 0 0.75rem; }
.card h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.card a { margin-right: 1rem; }
.card a.btn { display: block; margin: 0.5rem 0 0.5rem; padding: 0.875rem 1.25rem; border-radius: 0.5rem; background: #1b5fa8; color: #fff; text-align: center; font-size: 1.125rem; font-weight: 600; text-decoration: none; }
.card a.btn:hover { opacity: 0.9; }
.card a.btn:focus-visible { outline: 3px solid #1b5fa8; outline-offset: 2px; }
ul.upcoming { list-style: none; margin: 0; padding: 0; }
.upcoming__title { margin: 0; font-weight: 600; }
.upcoming__tags { margin: 0.375rem 0 0; }
.tag { display: inline-block; margin-right: 0.375rem; padding: 0.125rem 0.5rem; border: 1px solid #ccc; border-radius: 999px; background: #f4f4f4; font-size: 0.8125rem; color: #444; }
.tag--attention { border-color: #a3231a; background: #fbeeed; color: #a3231a; font-weight: 600; }
details.join { margin-top: 1.5rem; }
details.join summary { cursor: pointer; }
details.join summary h2 { display: inline; margin: 0; }
button.link { background: none; color: #1b5fa8; padding: 0; text-decoration: underline; }
.policy { font-size: 0.8125rem; color: #666; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #ddd; }

/* The sign-in and account pages (bulletin-v9wo): the admin app's sign-in
   look -- white page, the stacked logo centered over one narrow column, a
   full-width primary button and quiet links underneath. */
body.auth { background: #fff; }
body.auth .wrap { max-width: 24rem; padding-top: 4rem; padding-bottom: 1rem; }
body.auth .logo { display: block; width: 200px; max-width: 70%; height: auto; margin: 0 auto 2rem; }
body.auth .logo img { display: block; width: 100%; height: auto; }
body.auth h1 { font-size: 1.25rem; }
body.auth p.lede { font-size: 0.875rem; color: #555; margin-bottom: 1.5rem; }
body.auth label { font-weight: 500; }
body.auth button[type="submit"] { display: block; width: 100%; font-size: 0.875rem; font-weight: 600; padding: 0.625rem 1rem; background: #1d4ed8; }
body.auth input:focus-visible { outline-color: #1d4ed8; }
body.auth .links { margin: 1.25rem 0 0; font-size: 0.875rem; }
body.auth .links p { margin: 0 0 0.5rem; }
body.auth .links a, body.auth p.hint a { color: #555; text-decoration: none; }
body.auth .links a:hover, body.auth p.hint a:hover { text-decoration: underline; }
body.auth .aside { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e5e5e5; font-size: 0.875rem; color: #555; }
body.auth .policy { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
body.auth .policy a { color: #666; }
body.auth p.lang-toggle { max-width: 24rem; margin: 0 auto; padding: 0 1rem 2.5rem; font-size: 0.875rem; }
main.wrap p.lang-toggle { padding: 0; margin: 1rem 0 0; font-size: 0.875rem; }
body.auth p.lang-toggle a { color: #555; }
