/* Sign-in page only */

.sign-in {
  max-width: 24rem;
  margin: 12rem auto 12rem;
}

.sign-in h1 {
  margin: 0 0 0.75rem;
}

.sign-in-lead {
  margin: 0 0 2rem;
  color: var(--text-color-muted);
}

.sign-in-form {
  display: grid;
  gap: 0.75rem;
}

.sign-in-form label {
  color: var(--text-color);
  font-weight: 600;
  font-size: 0.95rem;
}

.sign-in-form input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  color: var(--text-color);
  font: inherit;
  background: var(--header-bg-color);
  border: 1px solid var(--line-color);
  border-radius: 8px;
}

.sign-in-form input:focus {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

.sign-in-form .button {
  margin-top: 0.5rem;
  justify-self: start;
}

.sign-in-status {
  margin: 1.5rem 0 0;
  color: var(--text-color-muted);
}

/* Get started chooser (same shell as sign-in) */
.get-started {
  max-width: 32rem;
}

.get-started-choices {
  display: grid;
  gap: 0.75rem;
}

.get-started-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
  margin: 0;
  padding: 1rem 1.05rem;
  color: var(--text-color);
  font: inherit;
  text-align: left;
  text-decoration: none;
  background: color-mix(in srgb, var(--header-bg-color) 88%, transparent);
  border: 1px solid var(--line-color);
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.12s ease;
}

a.get-started-choice:hover,
button.get-started-choice:hover {
  color: var(--text-color);
  background: color-mix(in srgb, var(--color-blue) 14%, var(--header-bg-color));
  border-color: color-mix(in srgb, var(--color-blue) 45%, transparent);
}

button.get-started-choice:active,
a.get-started-choice:active {
  transform: scale(0.985);
}

button.get-started-choice:disabled {
  opacity: 0.65;
  cursor: wait;
}

.get-started-choice .material-symbols-outlined {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: var(--color-blue-bright);
  font-size: 1.45rem;
}

.get-started-choice-body {
  display: grid;
  gap: 0.25rem;
}

.get-started-choice-body strong {
  font-size: 1.02rem;
}

.get-started-choice-body span {
  color: var(--text-color-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.get-started-status {
  margin: 1.25rem 0 0;
  color: var(--text-color-muted);
}

.try-local-panel {
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line-color);
  display: grid;
  gap: 0.85rem;
}

.get-started-choice.is-selected {
  border-color: color-mix(in srgb, var(--color-blue) 50%, transparent);
  background: color-mix(in srgb, var(--color-blue) 12%, var(--header-bg-color));
}

@media (max-width: 600px) {
  .sign-in {
    margin: 4rem auto 6rem;
  }
}