/* Join MOFA (/join): the rates and the sign-up form. Palette from neon.css's
   --neon-* tokens so every theme carries through; no blue, no underline —
   DUH/rules/presentation.md. */

.join { max-width: 60rem; }
.join__status { color: var(--neon-ink-dim); font-style: italic; }
.join__per { color: var(--neon-ink-dim); font-size: 0.9em; }
.join__table { overflow-x: auto; margin: 0 0 1rem; }
.join__table table { border-collapse: collapse; width: 100%; }
.join__table th, .join__table td { border-top: 1px solid var(--neon-frame); padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; }
.join__table th { color: var(--neon-ink-dim); font-weight: normal; }
.join__error { color: var(--neon-tube-lit); font-weight: bold; }
.join__form { display: grid; gap: 0.35rem; max-width: 32rem; min-width: 0; }
.join__form > * { min-width: 0; }
.join__form label { margin-top: 0.4rem; }
.join__form input:not([type="checkbox"]), .join__form select, .join__form textarea {
  width: 100%; box-sizing: border-box; font: inherit; padding: 0.4rem 0.5rem; background: var(--neon-ground); color: var(--neon-ink); border: 1px solid var(--neon-frame);
}
.join__form fieldset { min-width: 0; box-sizing: border-box; border: 1px solid var(--neon-frame); padding: 0.5rem 0.8rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.2rem 0.8rem; }
.join__form fieldset label { margin: 0; }
.join__form button { justify-self: start; margin-top: 0.8rem; font: inherit; padding: 0.5rem 1.1rem; background: var(--neon-ground); color: var(--neon-ink); border: 1px solid var(--neon-tube-lit); cursor: pointer; }
.join__form button:hover, .join__form button:focus-visible { box-shadow: var(--neon-halo-box); }
.join a, .join a:hover { text-decoration: none; }

@media (max-width: 40rem) {
  .join__table thead { display: none; }
  .join__table tr { display: block; border-top: 1px solid var(--neon-frame); padding: 0.4rem 0; }
  .join__table td { display: block; border: 0; padding: 0.15rem 0; }
  .join__table td::before { content: attr(data-label) ": "; color: var(--neon-ink-dim); }
}