/* ============================================================
   Connect — Flow switch (paciente × prescritor)

   Occupies the hero slot where the two CTA buttons used to sit.
   Segmented control: the active half carries the violet fill so
   "where am I" reads before the copy does.

   No sliding indicator on purpose — each hero renders its own
   switch already in the correct state, so a transition between
   halves would never actually play. The weight goes into a crisp
   resting state and honest hover/focus instead.
============================================================ */

.connect-switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
  padding: var(--space-1);
  margin-bottom: var(--space-6);
  width: fit-content;
  max-width: 100%;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border-inverse);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.connect-switch-option {
  /* 16px block padding + 1rem line-height clears the 44px touch floor. */
  padding: var(--space-4) var(--space-6);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-300);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out-quart),
    color var(--dur-fast) var(--ease-out-quart),
    box-shadow var(--dur-base) var(--ease-out-quart);
}

.connect-switch-option:hover {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.07);
}

/* The global focus ring squares off to --radius-sm; restore the pill. */
.connect-switch-option:focus-visible {
  border-radius: var(--radius-full);
  outline-offset: 2px;
}

.connect-switch-option.is-active {
  background: var(--violet-700);
  color: var(--paper);
  font-weight: 600;
  box-shadow: var(--shadow-md);
}

.connect-switch-option.is-active:hover {
  background: var(--violet-600);
}

/* Below ~520px the two labels stop fitting side by side. Stacking keeps the
   full label readable instead of shrinking type past the mobile floor. */
@media (max-width: 519px) {
  .connect-switch {
    grid-template-columns: 1fr;
    width: 100%;
    border-radius: var(--radius-lg);
  }

  .connect-switch-option {
    border-radius: var(--radius-md);
    white-space: normal;
    text-align: center;
  }
}

/* ---------- light theme ---------- */

.theme-light .connect-switch {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--color-border);
}

.theme-light .connect-switch-option {
  color: var(--ink-600);
}

.theme-light .connect-switch-option:hover {
  color: var(--ink-950);
  background: rgba(91, 33, 182, 0.07);
}

.theme-light .connect-switch-option.is-active,
.theme-light .connect-switch-option.is-active:hover {
  background: var(--violet-700);
  color: var(--paper);
}