/* Android & Web (/notify/): the launch list of the versions to come, the form
   the home page carried until the app came out on iPhone. The hero, the
   buttons and the type scale live in /assets/site.css. */

.notify-page .page-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.notify-page .page-hero h1 {
  max-width: 16ch;
}

/* The versions to be told about, one e-mail field, one button. */
.notify {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(560px, 100%);
  margin-top: 40px;
  text-align: start;
}

.notify-title {
  margin: 0 auto 12px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
}

.notify-platforms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* A legend sits on its fieldset's border: on its own line, it centres. */
.notify-platforms .notify-title {
  width: 100%;
}

.notify-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-card);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.2s var(--ease-apple),
    background-color 0.2s var(--ease-apple),
    color 0.2s var(--ease-apple);
}

.notify-chip:hover {
  border-color: rgba(0, 0, 0, 0.3);
}

.notify-chip:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-strong);
}

.notify-chip:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.notify-chip input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand);
}

.notify-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.notify-row input {
  width: 100%;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  transition:
    border-color 0.2s var(--ease-apple),
    box-shadow 0.2s var(--ease-apple);
}

.notify-row input::placeholder {
  color: var(--ink-tertiary);
}

.notify-row input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);
}

@media (min-width: 560px) {
  .notify-row {
    flex-direction: row;
    align-items: center;
  }

  .notify-row input {
    flex: 1;
  }

  .notify-row .button {
    flex: none;
  }
}

.notify-hint,
.notify-message {
  margin: 0;
  text-align: center;
}

.notify-message[data-tone="error"] {
  color: var(--red-ink);
  font-size: 15px;
}

/* Takes the form's place once it is sent, and on the confirmation link. */
.notify-success {
  display: grid;
  gap: 6px;
  justify-items: center;
  width: min(560px, 100%);
  margin-top: 40px;
  padding: 24px;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.notify-success strong {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

/* The app itself, for whoever has an iPhone. */
.notify-iphone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
}