/* Form areas inside the public shell (ux §3.1): 6.3 Get your code, Enter your code and 6.4 Your application.
   Loads after css/app.css (the public shell). The base text rules are scoped to .public_form with :where(),
   so they never reach the shell's header or footer and never outrank a component's own classes.
   Taken out of pages/join-code.css on 27 Sep 2026 so the join pages share one base. */

/* ---------- Container: centres the card ---------- */

.site_container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

@media (min-width: 576px) {
  .site_container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .site_container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .site_container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .site_container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .site_container {
    max-width: 1320px;
  }
}

/* ---------- Base text inside the form area (was the account pages' reset, scoped to .public_form) ---------- */

.public_form {
  font-family: var(--inter);
  font-size: 1rem;
  font-weight: var(--_font-weight---regular);
  line-height: 1.5;
  color: var(--color-text-muted);
  word-break: break-word;
}

:where(.public_form) *,
:where(.public_form) *::before,
:where(.public_form) *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The shell's own p rule (typography.css) sets a colour and line height; in the form area they come from .public_form */
:where(.public_form) p {
  margin: 0;
  font-family: var(--inter);
  font-size: 1rem;
  font-weight: var(--_font-weight---regular);
  line-height: inherit;
  color: inherit;
}

@media screen and (max-width: 1199px) {
  :where(.public_form) p {
    font-size: 0.9375rem;
  }
}

:where(.public_form) span {
  display: inline-block;
}

/* The shell's own a rule (typography.css) sets a size and line height; in the card links take them from their text */
:where(.public_form) a {
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: 0.2s linear;
}

:where(.public_form) a:hover {
  color: var(--color-primary);
}

:where(.public_form) label {
  display: inline-block;
}

:where(.public_form) button,
:where(.public_form) input {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

:where(.public_form) button {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  text-transform: none;
  -webkit-appearance: button;
  appearance: button;
}

:where(.public_form) button:not(:disabled) {
  cursor: pointer;
}

/* Keyboard focus: the ux ring on every link and button in the card (the code field shows focus by its caret) */
:where(.public_form) a:focus-visible,
:where(.public_form) button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

:where(.public_form) input:-webkit-autofill {
  box-shadow: 0 0 0 1000px transparent inset;
  -webkit-text-fill-color: var(--color-text) !important;
}

/* Hidden until a script or the server shows it (states, "Send a new code", the parts for a choice).
   !important because the base rules above give spans and links a display of their own. */
.is_hidden {
  display: none !important;
}