form{
  max-width: 480px;
}

label.field-label{
  display: block;
  font-size: 0.92rem;
  color: var(--cream);
  margin-bottom: 10px;
}

.field-row{
  display: flex;
  align-items: stretch;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.field-row:focus-within{
  border-color: var(--cream);
}

.field-row.has-error{
  border-color: var(--error);
}

input[type="email"]{
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 0.98rem;
  padding: 16px 18px;
}

input[type="email"]::placeholder{
  color: rgba(245,241,236,0.4);
}

button.join-btn{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  color: #1a1310;
  border: none;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
  padding: 16px 22px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, opacity 0.18s ease;
}

button.join-btn:hover{
  background: var(--surface-hover);
}

button.join-btn:active{
  transform: scale(0.98);
}

button.join-btn .arrow{
  transition: transform 0.18s ease;
}

button.join-btn:hover .arrow{
  transform: translateX(2px);
}

/* While the request is in flight the button is disabled, so suppress the hover
   and press affordances that would otherwise imply it is still clickable. */
button.join-btn:disabled{
  cursor: progress;
  opacity: 0.7;
}

button.join-btn:disabled:hover{
  background: var(--surface);
}

button.join-btn:disabled:active{
  transform: none;
}

form.is-pending input[type="email"]{
  color: var(--cream-faint);
}

form.is-pending .arrow{
  opacity: 0;
}

.error-msg{
  color: var(--error);
  font-size: 0.86rem;
  margin: 10px 0 0 0;
  min-height: 1.1em;
}

.success-panel{
  display: none;
  max-width: 480px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 20px 22px;
}

.success-panel.is-visible{
  display: block;
}

form.is-hidden{
  display: none;
}

.success-panel p{
  margin: 0 0 10px 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--cream);
}

.success-panel p:last-child{
  margin-bottom: 0;
}

.success-panel .success-email{
  color: var(--cream-dim);
}

@media (max-width: 640px){
  .field-row{ flex-direction: column; }
  button.join-btn{ justify-content: center; padding: 14px 18px; }
}