/*
 * corron waitlist — page styles.
 *
 * Every colour, size and space below comes from a semantic token in
 * tokens.css. If a value is hard-coded here it is a layout decision specific
 * to this one page (column width, breakpoint), never a design decision.
 *
 * Self-hosted fonts: the design system loads IBM Plex through @fontsource npm
 * imports, which need a bundler. This page has no build step, so the three
 * latin subsets it actually uses are copied into /fonts and declared by hand.
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

/* -------------------------------------------------------------------- */
/* Layout                                                               */
/* -------------------------------------------------------------------- */

body {
  display: flex;
  justify-content: center;
  /* Not centred vertically: on a phone the form would sit under the fold
     while empty space sat above it. */
  align-items: flex-start;
  padding: var(--space-10) var(--space-5) var(--space-12);
}

.page {
  width: 100%;
  max-width: 34rem;
}

/* -------------------------------------------------------------------- */
/* Copy                                                                 */
/* -------------------------------------------------------------------- */

/* The brick lockup replaces what used to be a mark stacked over "CORRON" set
   in mono — it carries the name itself now. 294px is its floor: the letters
   get only 32 of the box's 52 units, the rest being chimney, smoke and the
   N's flame. max-width keeps it inside the column on a narrow phone, where it
   lands under floor. */
.brand-lockup {
  display: block;
  width: 294px;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--space-12);
}

h1 {
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-6);
}

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-lg);
  max-width: 30rem;
}

/* The pricing line is the one claim that shouldn't read as just another
   paragraph. Emphasis comes from a brick rule and full-strength text — the
   same border idiom the result line uses — not from a larger size, which
   would fight the headline. */
.emphasis {
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-4);
}

/* -------------------------------------------------------------------- */
/* Form                                                                 */
/* -------------------------------------------------------------------- */

.form {
  margin-top: var(--space-10);
}

.row {
  display: flex;
  gap: var(--space-2);
}

input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-well);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

input[type="email"]::placeholder {
  color: var(--text-faint);
}

input[type="email"]:hover {
  border-color: var(--border-strong);
}

input[type="email"]:focus {
  border-color: var(--focus);
  /* :focus-visible in tokens.css draws the ring; this only recolours the
     border so the field reads as active even for mouse users. */
  outline: none;
}

button[type="submit"] {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-5);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  cursor: pointer;
}

button[type="submit"]:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

button[type="submit"]:active:not(:disabled) {
  background: var(--accent-active);
  border-color: var(--accent-active);
}

button[type="submit"]:disabled {
  background: var(--accent-deep);
  border-color: var(--border);
  color: var(--text-faint);
  cursor: default;
}

/* Honeypot. Off-screen rather than display:none — some bots skip fields
   that are outright hidden. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------------- */
/* Result                                                               */
/* -------------------------------------------------------------------- */

/* Reserves its line at all times so a message does not shove the page
   downward when it appears. */
.result {
  min-height: 1.5em;
  margin-top: var(--space-4);
  font-size: var(--text-md);
  border-left: 2px solid transparent;
  padding-left: var(--space-3);
}

.result--visible:empty {
  border-left-color: transparent;
}

.result--ok {
  color: var(--ok);
  border-left-color: var(--ok);
}

.result--error {
  color: var(--danger);
  border-left-color: var(--danger);
}

.count {
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

noscript .result {
  display: block;
  margin-top: var(--space-8);
}

/* -------------------------------------------------------------------- */
/* Narrow screens                                                       */
/* -------------------------------------------------------------------- */

@media (max-width: 30rem) {
  h1 {
    font-size: var(--text-xl);
  }

  .prose {
    font-size: var(--text-md);
  }

  /* Side-by-side leaves the input too narrow to read a typed address. */
  .row {
    flex-direction: column;
  }

  button[type="submit"] {
    width: 100%;
  }
}