/* Method toggle -segmented control (e.g. Phone / Email auth method) */
/* Paired with static/ui/js/auth/method-toggle.js for option switching. */

.method-toggle {
  display: grid;
  grid-template-columns: repeat(var(--method-toggle-count, 2), 1fr);
  gap: 4px;
  padding: 4px;
  width: 100%;
  background: var(--surface-soft);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
}

.method-toggle.is-3up { --method-toggle-count: 3; }
.method-toggle.is-4up { --method-toggle-count: 4; }
.method-toggle.is-5up { --method-toggle-count: 5; }

/* Specificity bumped via `.method-toggle .method-toggle-option` (0,2,0)
   so the chip styling beats `.form-group label` (0,1,1) in
   components/15-form-controls.css -the inner option label otherwise
   inherits uppercase + 10px + tracking + bottom margin from the
   form-group label cascade and the toggle looks broken. */
.method-toggle .method-toggle-option {
  position: relative;
  display: block;
  padding: 8px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-caption);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font);
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.method-toggle .method-toggle-option:hover:not(.is-active):not(:has(input:checked)) {
  color: var(--text);
}

.method-toggle .method-toggle-option.is-active,
.method-toggle .method-toggle-option:has(input:checked) {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* Radio-driven variant -the input is the actual control, the label is
   the visible chip. Hide the native radio and let the label fill the
   entire option box so clicks anywhere flip the radio. Span content is
   pointer-transparent so clicks reach the underlying input. */
.method-toggle .method-toggle-option > input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.method-toggle .method-toggle-option > span {
  display: block;
  pointer-events: none;
}