/* The league form (new league) plus the shared form scraps every surface uses
   for errors, fieldsets, legends and hints. */

.league {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-smd);
  max-width: var(--measure-mid);
  margin: 0 auto;
}

.league__name {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
}

.league__description {
  margin: 0;
  white-space: pre-wrap;
}

.league__meta {
  margin: var(--space-md) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.league__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.league__link {
  display: inline-block;
  font-weight: var(--weight-medium);
}

.league__link:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------ form scraps */

.form__errors {
  margin: 0 0 var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius);
  background: var(--surface-loss);
  border: var(--border-width) solid var(--coral-100);
  color: var(--text-loss);
  font-size: var(--text-base);
  list-style: disc inside;
}

.form__group {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form__legend {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.form__hint {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}