/* Pack 04 sign-in, sign-up and onboarding components. Tokens only. Every class starts with "onb-".
   Breakpoints follow R5: 1279, 1023 and 767 px. */

.onb-head { display: grid; gap: 8px; }
.onb-head .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--primary-tint); color: var(--primary-ink); display: grid; place-items: center; }
.onb-head .ico.ok { background: var(--ok-tint); color: var(--ok-ink); }
.onb-head .ico.warn { background: var(--warn-tint); color: var(--warn-ink); }
.onb-head .ico.bad { background: var(--bad-tint); color: var(--bad-ink); }
.onb-head .ico.grey { background: var(--grey-tint); color: var(--grey-ink); }
.onb-actions { display: grid; gap: 10px; }
.onb-actions .btn { width: 100%; }
.onb-links { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 13.5px; }
.onb-links > * { min-height: 32px; display: inline-flex; align-items: center; }
.onb-plan { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-card); background: var(--primary-tint); border: 1px solid var(--primary-tint-2); font-size: 13px; }
.onb-plan .row { gap: 6px; }
.onb-plan .t { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.onb-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.onb-meter i { height: 4px; border-radius: 2px; background: var(--border); }
.onb-meter i.on { background: var(--ok); }
.onb-meter.weak i.on { background: var(--bad); }
.code-boxes span.err { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-tint); }
.code-boxes span.filled { border-color: var(--primary); }
.code-boxes span.empty { color: var(--muted-2); }

/* two-step setup */
.onb-qr { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; align-items: center; }
.onb-qr > svg { width: 148px; height: 148px; border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: var(--surface); }
.onb-key { font-family: var(--font-num); font-size: 14px; letter-spacing: 1.5px; font-weight: 600; background: var(--surface-sunk); border-radius: var(--r); padding: 8px 10px; overflow-wrap: anywhere; }
.onb-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 14px; list-style: none; background: var(--surface-sunk); border-radius: var(--r-card); counter-reset: c; }
.onb-codes li { counter-increment: c; font-family: var(--font-num); font-size: 15px; font-weight: 600; letter-spacing: 1px; display: flex; gap: 10px; align-items: center; font-variant-numeric: tabular-nums; }
.onb-codes li::before { content: counter(c); font-size: var(--fs-xs); color: var(--muted); width: 16px; text-align: right; font-weight: 500; letter-spacing: 0; }
.onb-steps { display: grid; gap: 4px; margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--text-2); }

/* clinic chooser and invitation */
.onb-clinics { display: grid; gap: 10px; }
.onb-clinic { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); min-height: var(--tap); }
a.onb-clinic:hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.onb-clinic.off { background: var(--surface-2); color: var(--muted); }
.onb-clinic strong { display: block; font-size: 14.5px; }
.onb-clinic small { display: block; color: var(--muted); font-size: 12.5px; }
.onb-logo { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--nav-active); color: var(--surface); }
.onb-logo.alt { background: var(--info-tint); color: var(--info-ink); }
.onb-invite { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface-2); }

/* setup wizard */
.onb-wizard { max-width: 980px; margin: 0 auto; }
.onb-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.onb-choice { display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); position: relative; min-height: var(--tap); }
.onb-choice.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.onb-choice .tick { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; }
.onb-choice strong { font-size: 14.5px; padding-right: 26px; }
.onb-choice p { color: var(--muted); font-size: 13px; }
.onb-modrow { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.onb-modrow.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary-tint) 50%, var(--surface)); }
.onb-modrow .d strong { display: block; }
.onb-modrow .d small { display: block; color: var(--muted); font-size: 12.5px; }
.onb-modrow .p { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.onb-modrow .p small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; }
.onb-sum { display: grid; gap: 8px; }
.onb-sum .line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; align-items: baseline; }
.onb-sum .line span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.onb-sum .line.total { border-top: 1px solid var(--border); padding-top: 10px; font-size: 15px; font-weight: 700; flex-wrap: wrap; }
.onb-sum .ph { color: var(--warn-ink); }
.onb-wait { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 32px 20px; }
.onb-spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--primary-tint-2); border-top-color: var(--primary); animation: onbspin 1s linear infinite; }
@keyframes onbspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .onb-spin { animation: none; } }
.onb-review { display: grid; gap: 0; }
.onb-review > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.onb-review > div:last-child { border-bottom: 0; }
.onb-review .st { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.onb-review .st.ok { background: var(--ok-tint); color: var(--ok-ink); }
.onb-review .st.warn { background: var(--warn-tint); color: var(--warn-ink); }
.onb-review .st.bad { background: var(--bad-tint); color: var(--bad-ink); }
.onb-review .st.grey { background: var(--grey-tint); color: var(--grey-ink); }
.onb-review strong { display: block; font-size: 14px; }
.onb-review small { display: block; color: var(--muted); font-size: 12.5px; }

/* getting started checklist */
.onb-progress { display: grid; gap: 8px; }
.onb-progress .bar { height: 10px; }
.onb-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px; border-radius: var(--r-card); background: var(--nav-bg); color: var(--nav-text); }
.onb-next h2 { font-size: 18px; color: var(--surface); }
.onb-next p { color: var(--nav-muted); font-size: 13.5px; }
.onb-next .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); }
.onb-group h3 { font-size: 15px; }
.onb-items { display: grid; }
.onb-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--line); min-height: var(--tap); }
.onb-item:last-child { border-bottom: 0; }
.onb-item .st { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; }
.onb-item.done .st { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.onb-item.next { background: var(--primary-tint); }
.onb-item.next .st { border-color: var(--primary); }
.onb-item strong { display: block; font-size: 13.5px; }
.onb-item.done strong { color: var(--muted); }
.onb-item small { display: block; color: var(--muted); font-size: 12.5px; }

@media (max-width: 1023px) {
  .onb-card-grid { grid-template-columns: minmax(0, 1fr); }
  .onb-links > * { min-height: var(--tap); }
}
@media (max-width: 767px) {
  .onb-qr { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .onb-codes { grid-template-columns: minmax(0, 1fr); }
  .onb-modrow { grid-template-columns: auto auto minmax(0, 1fr); }
  .onb-modrow .p { grid-column: 3; text-align: left; }
  .onb-next { grid-template-columns: minmax(0, 1fr); }
  .onb-next .btn { width: 100%; }
  .onb-review > div { grid-template-columns: 30px minmax(0, 1fr); padding: 12px 14px; }
  .onb-review > div > :last-child { grid-column: 2; justify-self: start; }
  .onb-item { grid-template-columns: 28px minmax(0, 1fr); padding: 11px 14px; }
  .onb-item > :last-child { grid-column: 2; justify-self: start; }
  .onb-clinic { grid-template-columns: auto minmax(0, 1fr); }
  .onb-clinic > :last-child { grid-column: 2; justify-self: start; }
}

/* touch sizes for inline links in auth fields and checklist rows */
.onb-tap { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 1023px) { .onb-tap { min-height: var(--tap); min-width: var(--tap); } .input-group .addon .onb-tap { margin: -10px 0; } }

/* keep inputs at their own height when the field next to them has a hint */
.onb-wizard .form-grid > .field, .auth .form-grid > .field { align-content: start; }
.onb-iconline { display: flex; gap: 6px; align-items: flex-start; }
.onb-iconline .icon { margin-top: 1px; }