body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

main {
  width: 100%;
  max-width: 28rem;
  text-align: center;
}

h1 {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

#join {
  display: flex;
  justify-content: center;
}

/*
 * OTP-style code entry.
 *
 * One <input> styled to look like six cells. The cells are painted by tiling
 * a single rounded-rect SVG horizontally as a background image. Characters
 * land centered in each painted cell via the relationship below.
 *
 * Geometry:
 *   --otp-cell-w  : painted cell width (the rectangle)
 *   --otp-gap     : visible gap between adjacent cells
 *   tile-w        = cell-w + gap    (one cell + one gap)
 *   total width   = 6 * cell-w + 5 * gap
 *
 * Alignment math (must stay in sync — change one, recompute the others):
 *   Each character advances by 1ch + letter-spacing.
 *   Cells advance by cell-w + gap.
 *   => letter-spacing = cell-w + gap - 1ch
 *   Character N must center in cell N:
 *   => padding-left = (cell-w - 1ch) / 2
 *
 * There is no per-cell focus highlight — the blinking text caret indicates
 * the active cell. On focus, the cell border darkens globally.
 */
#code {
  --otp-cell-w: 2.5ch;
  --otp-gap:    0.5ch;

  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;

  width: calc(6 * var(--otp-cell-w) + 5 * var(--otp-gap));
  height: 3rem;
  margin: 0;
  border: none;
  outline: none;
  /* Cells are always white-filled (see SVG below), so the ink stays a
     fixed dark color rather than var(--fg), which goes near-white in dark
     mode and washes out against the white cell. */
  color: #252121;
  background-color: transparent;
  text-align: left;
  caret-color: var(--accent);

  /* Derived from the alignment math above. */
  letter-spacing: calc(var(--otp-cell-w) + var(--otp-gap) - 1ch);
  padding: 0 0 0 calc((var(--otp-cell-w) - 1ch) / 2);

  /* One tile = one cell + one gap. The SVG's viewBox is non-uniform
     (cell occupies 5/6 of the 60-wide viewBox, matching 2.5ch / 3ch), so
     when the tile is sized to (cell-w + gap), the rendered rectangle
     measures exactly cell-w with a transparent gap to its right.
     preserveAspectRatio='none' lets the rect stretch with the tile size. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'><rect x='0.5' y='0.5' width='49' height='59' rx='6' ry='6' fill='%23ffffff' stroke='%23c9c9d1' stroke-width='1'/></svg>");
  background-repeat: repeat-x;
  background-size: calc(var(--otp-cell-w) + var(--otp-gap)) 100%;
  background-position: 0 0;
  background-origin: padding-box;
}

/* Global focus signal: darker, thicker cell borders.
   Same SVG geometry; only the stroke color/width change. */
#code:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'><rect x='1' y='1' width='48' height='58' rx='6' ry='6' fill='%23ffffff' stroke='%238a8a92' stroke-width='2'/></svg>");
}

#msg {
  margin-top: 1.5rem;
  min-height: 1.25rem;
  color: var(--error);
  font-size: 0.95rem;
}
#msg:empty { visibility: hidden; }