/* Signup screen. Reuses login.css for the two-pane shell and brand side; every
   rule here is scoped under .su-root so shell.css globals can't bleed in and
   these can't leak out. */

.su-root [x-cloak] { display: none !important; }

.su-root .su-shell { max-width: 460px; }

.su-root .su-form { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.su-root .su-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.su-root .su-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.su-root .su-field label { font-size: 13px; font-weight: 600; color: var(--ink-800); line-height: 1.2; }
.su-root .su-field input {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--ink-200); background: #fff; font-size: 14px; color: var(--ink-900);
  font-family: inherit;
}
.su-root .su-field input:focus {
  outline: none; border-color: var(--indigo-600); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
.su-root .su-field input:invalid:not(:placeholder-shown) { border-color: #DC2626; }
.su-root .su-field small { font-size: 11.5px; color: #6B7280; line-height: 1.45; }
.su-root .su-req { color: #DC2626; }

.su-root .su-policy { margin: -4px 0 0; font-size: 11.5px; color: #6B7280; line-height: 1.5; }

.su-root .su-optional { border-top: 1px solid var(--ink-200); padding-top: 12px; }
.su-root .su-optional summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-700);
  list-style: none; user-select: none;
}
.su-root .su-optional summary::-webkit-details-marker { display: none; }
.su-root .su-optional summary::before { content: '+ '; color: var(--indigo-600); }
.su-root .su-optional[open] summary::before { content: '\2212 '; }
.su-root .su-optional > .su-field { margin-top: 12px; }

.su-root .su-submit { width: 100%; height: 46px; margin-top: 4px; }
.su-root .su-wait { margin: 8px 0 0; font-size: 12px; text-align: center; color: #6B7280; }

/* Feedback panels ---------------------------------------------------------- */
.su-root .su-panel {
  margin: 0 0 16px; padding: 16px; border-radius: 10px; border: 1px solid var(--ink-200);
  background: #fff;
}
.su-root .su-panel--ok   { border-color: #A7F3D0; background: #ECFDF5; }
.su-root .su-panel--warn { border-color: #FDE68A; background: #FFFBEB; }
.su-root .su-panel--err  { border-color: #FECACA; background: #FEF2F2; }

.su-root .su-panel__title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ink-900); }
.su-root .su-panel__msg { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-700); }

.su-root .su-meta { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.su-root .su-meta div { display: flex; flex-direction: column; gap: 2px; }
.su-root .su-meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6B7280; }
.su-root .su-meta dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-900); }

.su-root .su-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.su-root .su-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 40px;
  padding: 0 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.su-root .su-btn--primary { background: var(--indigo-600); color: #fff; }
.su-root .su-btn--primary:hover { background: var(--indigo-700); }
.su-root .su-btn--primary:disabled { opacity: .55; cursor: not-allowed; }
.su-root .su-btn--ghost { background: #fff; border-color: var(--ink-300); color: var(--ink-800); }
.su-root .su-btn--ghost:hover { background: var(--ink-50); }

.su-root .su-inline-form { margin: 0; }
.su-root .su-hint { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: #6B7280; }
.su-root .su-link {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: #2563EB; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

/* Slug suggestions — rendered strictly from the API's suggestedSlugs. */
.su-root .su-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.su-root .su-chip {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--ink-300);
  background: #fff; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-800); cursor: pointer; transition: background .12s, border-color .12s;
}
.su-root .su-chip:hover { border-color: var(--indigo-600); }
.su-root .su-chip--on { background: var(--indigo-600); border-color: var(--indigo-600); color: #fff; }

@media (max-width: 560px) {
  .su-root .su-row { grid-template-columns: 1fr; }
}