/* Scoped authentication controls use the existing portal palette in both themes. */
.cp-method-tabs{display:flex;gap:4px;width:100%;padding:4px;margin:0 0 24px;background:var(--cp-soft);border:1px solid var(--cp-line);border-radius:12px}
.cp-method-tabs>[role=tab]{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:9px;font-size:13px;font-weight:700;text-decoration:none;color:var(--cp-muted);transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.cp-method-tabs>[aria-selected=true]{background:var(--cp-paper);color:var(--cp-ink);box-shadow:0 2px 8px #12382812}
.cp-method-tabs>[aria-disabled=true]{pointer-events:none;opacity:.55}
.customer-portal [data-customer-login] [hidden]{display:none!important}
.cp-phone-settings{max-width:650px;margin:30px auto;padding:clamp(20px,4vw,36px);background:var(--cp-paper);border:1px solid var(--cp-line);border-radius:20px}
.cp-phone-settings h1{font-size:35px;margin:0 0 18px}
.cp-phone-settings form{display:grid;gap:14px;margin-top:22px}
.cp-phone-settings label{font-weight:700;font-size:12px}
.cp-phone-settings input:not([type=hidden]){box-sizing:border-box;width:100%;padding:13px 14px;border:1px solid var(--cp-line);border-radius:10px;background:var(--cp-bg);color:var(--cp-ink)}
.cp-phone-settings .cp-button{width:100%}
.cp-phone-settings .cp-field-hint{margin:0;color:var(--cp-muted)}
.cp-phone-status{padding:16px;border:1px solid var(--cp-line);border-radius:12px;background:var(--cp-soft);overflow-wrap:anywhere}
.cp-phone-success{border-left:4px solid var(--cp-accent)}
@media(prefers-reduced-motion:reduce){.cp-method-tabs>[role=tab]{transition:none}}

/* The help stays next to its label and does not occupy a form row. */
.customer-portal .cp-phone-label{position:relative;display:flex;align-items:center;gap:.375rem;width:100%;margin:0 0 .35rem;min-width:0}
.customer-portal .cp-phone-label>label{margin:0}
.customer-portal .cp-phone-help{display:inline-flex;flex-shrink:0}
.customer-portal .cp-phone-help-trigger{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px;padding:5px;margin:0;border:0;border-radius:50%;background:transparent;color:var(--cp-muted);cursor:help;box-shadow:none}
.customer-portal .cp-phone-help-trigger svg{width:18px;height:18px;display:block}
.customer-portal .cp-phone-help-trigger:hover{background:var(--cp-soft);color:var(--cp-ink)}
.customer-portal .cp-phone-help-trigger:focus-visible{outline:2px solid var(--cp-accent);outline-offset:2px}
.customer-portal .cp-phone-tooltip{display:none;position:absolute;right:0;top:calc(100% + .5rem);bottom:auto;pointer-events:none;z-index:60;box-sizing:border-box;width:min(20rem,100%);padding:.9rem 1rem;border:1px solid #374151;border-radius:.75rem;background:#111827;color:#f9fafb;box-shadow:0 10px 28px #0004;text-align:left;font-size:.8rem;font-weight:400;line-height:1.55;text-transform:none;letter-spacing:normal;white-space:normal;overflow-wrap:anywhere}
.customer-portal .cp-phone-help:not([data-dismissed]):is(:hover,:focus-within,[data-open]) .cp-phone-tooltip{display:block}

/* Keep sign-in guidance beside its heading, outside the form flow. */
.customer-portal .cp-phone-label.cp-login-heading{margin:22px 0 16px;gap:.5rem}
.cp-auth-card .cp-login-heading>h3{margin:0;min-width:0}