/* Front-end styling for the signup form and the download gate.
   Deliberately small: it inherits the theme's fonts and colours so the form
   looks like part of the site rather than a plugin bolted onto it. */

/* No width of its own: the block takes whatever the theme's content column
   gives it, so the page reads as one layout instead of a narrow strip pasted
   into a wide one. Width belongs to the theme (or to the blocks the page is
   built from), not to this plugin. */

.phoenix-beta__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}

.phoenix-beta__field label {
  font-weight: 600;
}

.phoenix-beta__field input[type='text'],
.phoenix-beta__field input[type='email'],
.phoenix-beta__field textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
}

.phoenix-beta__field--consent label {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-weight: 400;
  line-height: 1.45;
}

.phoenix-beta__error {
  font-size: 0.9em;
  color: #b32d2e;
}

.phoenix-beta__error--form {
  padding: 0.6rem 0.8rem;
  border-left: 3px solid #b32d2e;
  background: rgba(179, 45, 46, 0.08);
}

/* The honeypot must be unreachable for people — including screen readers and
   keyboard users — while staying a normal, fillable field for a bot. */
.phoenix-beta__trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.phoenix-beta__submit {
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: 6px;
  background: currentColor;
  color: Canvas;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.phoenix-beta__builds {
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}

.phoenix-beta__builds li {
  margin-bottom: 0.9rem;
}

.phoenix-beta__download {
  display: inline-block;
  font-weight: 600;
}

.phoenix-beta__meta {
  display: block;
  font-size: 0.9em;
  opacity: 0.75;
}

.phoenix-beta__codeform {
  margin-top: 1.5rem;
}

/* ── grouped downloads ─────────────────────────────────────────────────────
   The page sits inside whatever theme the site runs, so these borrow the
   theme's own colours (currentColor + the CSS system colours already used
   above) instead of introducing a palette that will clash with half of them. */

.phoenix-beta__release {
  margin: 0 0 1.8rem;
  padding: 0 0 0 0.9rem;
  border-left: 3px solid currentColor;
  opacity: 0.999; /* own stacking context, so the border does not bleed */
}

.phoenix-beta__version {
  margin: 0 0 0.4rem;
  font-size: 1.05em;
}

.phoenix-beta__badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05em 0.5em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.15em;
}

.phoenix-beta__noteshead {
  margin: 0.6rem 0 0.2rem;
  font-size: 0.9em;
  font-weight: 600;
  opacity: 0.8;
}

.phoenix-beta__notes {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  font-size: 0.92em;
  opacity: 0.85;
}

.phoenix-beta__notes li {
  margin-bottom: 0.2rem;
}

/* The manuals for this build, on a line of their own.
   They started out inside the meta line, at 0.9em and 75% opacity behind the
   file name and the size — technically present and effectively invisible. They
   now carry the same weight as the download link above them, because a tester
   who cannot find the manual does not have one.
   Still underlined, and still second in the reading order: the download is what
   the page is FOR, and two links at identical weight would leave "which one is
   the app" to guesswork. */
.phoenix-beta__manuals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin: 0.3rem 0 0.15rem;
}

.phoenix-beta__manual {
  font-weight: 600;
  text-decoration: underline;
}

.phoenix-beta__manual:hover,
.phoenix-beta__manual:focus-visible {
  text-decoration-thickness: 2px;
}

/* What a file IS. Sits between the link and the file name, because that is the
   order the question gets asked in: is this mine, then how big is it. */
.phoenix-beta__what {
  display: block;
  margin: 0.15rem 0 0.1rem;
  font-size: 0.92em;
}

.phoenix-beta__bugs {
  margin: 2rem 0 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 6px;
}

.phoenix-beta__bugs h4 {
  margin: 0 0 0.5rem;
}

.phoenix-beta__bugs ul {
  margin: 0.4rem 0 0.8rem;
  padding-left: 1.1rem;
}

/* ── the /phoenix explainer ────────────────────────────────────────────── */

.phoenix-about__lead {
  font-size: 1.15em;
  line-height: 1.5;
}

.phoenix-about h3 {
  margin: 1.8rem 0 0.5rem;
}

.phoenix-about__tiers {
  margin: 0.6rem 0 1.2rem;
  padding: 0;
  list-style: none;
}

.phoenix-about__tiers li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

/* The tier letter is the shorthand the client itself shows on a message, so it
   is set apart rather than run into the sentence. */
.phoenix-about__tier {
  display: inline-block;
  min-width: 1.6em;
  margin-right: 0.4rem;
  padding: 0.05em 0.35em;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
}

/* The logo above the explainer. Sized in rem so it scales with the theme's type
   rather than fighting it, and capped so it cannot dominate a narrow column. */
.phoenix-about__logo {
  margin: 0 0 1.4rem;
}

.phoenix-about__logo svg {
  display: block;
  width: auto;
  height: 2.6rem;
  max-width: 100%;
}