/* Support Center — the "Onboarding & Terminations" form (2026-10-20).
   The fragment comes from Onboarding (GET /onboarding/request/fields) and uses Support's own form
   classes (.form-row / .form-group / .form-label / .form-input / .form-select / .form-textarea /
   .field-error / .required / .optional / .form-section-label); this file adds the .onbx-* pieces:
   the chooser, segmented radios, banners, checks, hints, and the loading / fallback states.
   Everything is scoped under .onbx-host so it wins over Onboarding's own stylesheet (injected next
   to this one) and never touches the rest of the page. Colours come from style.css's :root tokens;
   the only literals are the category's own two colours (the card's --card-color / --card-bg). */

.onbx-host {
  --onbx-accent:      #3F4B8C;
  --onbx-accent-bg:   #E8EAF6;
  --onbx-accent-ring: rgba(63, 75, 140, 0.14);
  --onbx-gold-line:   rgba(201, 162, 79, 0.45);
  display: block;
  margin-bottom: 4px;
}

/* A show_if wrapper is rendered with the hidden attribute; Support's .form-group / .form-row set
   their own display, which would otherwise beat the browser's [hidden] rule. */
.onbx-host [hidden] { display: none !important; }

/* ── the kind chooser ── */
.onbx-host .onbx-choose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 18px;
}
.onbx-host .onbx-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  text-align: left;
  font: inherit;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.onbx-host .onbx-choice:hover { border-color: var(--onbx-accent); }
.onbx-host .onbx-choice.is-on,
.onbx-host .onbx-choice[aria-checked="true"] {
  border-color: var(--onbx-accent);
  box-shadow: 0 0 0 3px var(--onbx-accent-ring);
}
.onbx-host .onbx-choice:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.onbx-host .onbx-choice b,
.onbx-host .onbx-choice strong,
.onbx-host .onbx-choice__t { display: block; font-weight: 600; font-size: 15px; color: var(--navy); }
.onbx-host .onbx-choice small,
.onbx-host .onbx-choice__s { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--text-muted); }
.onbx-host .onbx-choice__ico {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--onbx-accent);
  background: var(--onbx-accent-bg);
}
.onbx-host .onbx-choice__ico svg { width: 22px; height: 22px; }

/* ── banners (gold = never send ID documents; slate = a private separation) ── */
.onbx-host .onbx-banner {
  margin: 0 0 18px;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--navy);
  background: var(--gold-pale);
  border: 1px solid var(--onbx-gold-line);
  border-radius: 12px;
}
.onbx-host .onbx-banner b,
.onbx-host .onbx-banner strong { font-weight: 600; color: var(--navy); }
.onbx-host .onbx-banner--slate {
  color: var(--text-mid);
  background: var(--off-white);
  border-color: var(--border);
}

/* ── segmented radios: a real radio inside each label, visually hidden but focusable ── */
.onbx-host .onbx-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.onbx-host .onbx-seg label { position: relative; display: inline-flex; cursor: pointer; margin: 0; }
.onbx-host .onbx-seg input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.onbx-host .onbx-seg span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--text-mid);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 9px;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.onbx-host .onbx-seg label:hover span { border-color: var(--navy-light); }
.onbx-host .onbx-seg input:checked + span { color: var(--white); background: var(--navy); border-color: var(--navy); }
.onbx-host .onbx-seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.onbx-host .onbx-seg input:disabled + span { opacity: 0.55; cursor: not-allowed; }

/* ── checks (company items) ── */
.onbx-host .onbx-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--text-mid); }
.onbx-host .onbx-checks label,
.onbx-host .onbx-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.onbx-host .onbx-checks input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--navy); }

/* ── month + day pairs, hints, quiet text, the line under the form ── */
.onbx-host .onbx-two { display: flex; flex-wrap: wrap; gap: 8px; }
.onbx-host .onbx-two > * { flex: 1 1 120px; min-width: 0; }
.onbx-host .form-hint { display: block; font-size: 0.8rem; line-height: 1.4; color: var(--text-muted); }
.onbx-host .onbx-faint { font-weight: 400; color: var(--text-light); text-transform: none; letter-spacing: 0; }
.onbx-host .onbx-where { margin: 6px 0 4px; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.onbx-host .form-section-label { margin-top: 8px; }

/* ── loading and the fallback ── */
.onbx-host .onbx-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
  padding: 18px 16px;
  font-size: 14px;
  color: var(--text-muted);
  background: var(--off-white);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}
.onbx-host .onbx-spin {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--onbx-accent);
  border-radius: 50%;
  animation: onbx-spin 0.8s linear infinite;
}
@keyframes onbx-spin { to { transform: rotate(360deg); } }

.onbx-host .onbx-fallback {
  margin: 4px 0 18px;
  padding: 18px 18px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-mid);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--onbx-accent);
  border-radius: var(--radius-md);
}
.onbx-host .onbx-fallback p + p { margin-top: 6px; }
.onbx-host .onbx-fallback__t { font-weight: 600; color: var(--navy); }
.onbx-host .onbx-fallback a { color: var(--onbx-accent); font-weight: 600; }
.onbx-host .onbx-fallback__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px !important; }
.onbx-host .onbx-fallback__go,
.onbx-host .onbx-fallback__retry {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.onbx-host .onbx-fallback__go { color: var(--white) !important; background: var(--navy); border: 1.5px solid var(--navy); }
.onbx-host .onbx-fallback__retry { color: var(--navy); background: var(--white); border: 1.5px solid var(--border); }
.onbx-host .onbx-fallback__go:focus-visible,
.onbx-host .onbx-fallback__retry:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── phones and touch ── */
@media (max-width: 640px) {
  .onbx-host .onbx-choose { grid-template-columns: 1fr; }
  .onbx-host .onbx-seg span { padding: 10px 12px; }
}
/* 16px inputs (no iOS zoom) on phones and on any touch screen, tablets included. */
@media (max-width: 768px), (pointer: coarse) {
  .onbx-host .form-input,
  .onbx-host .form-select,
  .onbx-host .form-textarea,
  .onbx-host input[type="text"],
  .onbx-host input[type="email"],
  .onbx-host input[type="tel"],
  .onbx-host input[type="date"],
  .onbx-host input[type="time"],
  .onbx-host select,
  .onbx-host textarea {
    font-size: 16px !important;
  }
}
/* Finger-sized targets. */
@media (pointer: coarse) {
  .onbx-host .onbx-choice,
  .onbx-host .onbx-seg span,
  .onbx-host .onbx-checks label,
  .onbx-host .onbx-check,
  .onbx-host .onbx-fallback__go,
  .onbx-host .onbx-fallback__retry {
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onbx-host .onbx-choice,
  .onbx-host .onbx-seg span { transition: none; }
  .onbx-host .onbx-spin { animation: none; }
}