/* Account setup (setup.js): builds on the site stylesheet and begin.css tokens. */

.setup{margin-top:48px;padding-top:40px;border-top:1px solid #ffffff1c}
.setup-eyebrow{color:#82827f}
.setup-title{margin:14px 0 0;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.05em;line-height:1.05;font-weight:520;color:#f4f3ed}
.setup-lead{color:#a8a89e;font-size:13px;line-height:1.8;margin:14px 0 0;max-width:720px}
.setup-lead code,.setup code{font-family:var(--font-mono);font-size:11px;color:#f4f3ed;background:#0b0b0b;border:1px solid #ffffff1c;border-radius:3px;padding:2px 6px;overflow-wrap:anywhere}
.setup-note{color:#82827f;font-size:11.5px;line-height:1.7;margin:12px 0 0}
.setup-status{color:#ff9d8d;font-size:11.5px;line-height:1.7;margin:10px 0 0;min-height:1em}

.setup-block{border:1px solid #ffffff1f;border-radius:8px;background:#0f0f0f;overflow:hidden}
.setup-kicker{font-family:var(--font-mono);font-size:10px;letter-spacing:.055em;color:var(--color-accent)}
.setup-choice-title{display:block;font-size:22px;letter-spacing:-.04em;font-weight:520;color:#f4f3ed;line-height:1.15}

.setup-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.setup-code{position:relative;margin-top:10px}
.setup-code pre{margin:0;max-height:320px;overflow:auto;background:#0b0b0b;border:1px solid #ffffff26;border-radius:3px;padding:14px 74px 14px 14px;font-family:var(--font-mono);font-size:10.5px;line-height:1.7;color:#c9c9be;white-space:pre}
.setup-code .setup-copy{position:absolute;top:8px;right:8px}

.setup-testing{margin-top:12px;padding:22px 24px 24px}
.setup-invites{margin-top:12px;padding:22px 24px 24px}
.setup-invites .setup-choice-title{margin:0}
.setup-invites p{color:#a8a89e;font-size:12.5px;line-height:1.75;margin:8px 0 0}
.setup-invites .micro-label{color:#82827f;font-size:9px;margin:20px 0 0}
.setup-invites>.button{margin-top:14px}
.setup-invites .setup-code{display:flex;align-items:center;gap:12px;padding-right:8px;background:#0b0b0b;border:1px solid #ffffff26;border-radius:3px}
.setup-invites .setup-code pre{flex:1;min-width:0;border:0;background:none;padding:14px 0 14px 14px}
.setup-invites .setup-copy{position:static;flex-shrink:0;margin-top:0}
.setup-testing-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px}
.setup-testing-head .setup-choice-title{margin-top:6px}
.setup-switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:#d8d8cc;margin:0}
.setup-switch input{position:absolute;opacity:0;width:1px;height:1px}
.setup-switch-track{width:42px;height:24px;border-radius:12px;background:#2b2b2b;border:1px solid #ffffff30;position:relative;transition:background .15s}
.setup-switch-track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#a8a89e;transition:transform .15s,background .15s}
.setup-switch input:checked+.setup-switch-track{background:#ff553b33;border-color:var(--color-accent)}
.setup-switch input:checked+.setup-switch-track::after{transform:translateX(18px);background:var(--color-accent)}
.setup-switch input:focus-visible+.setup-switch-track{outline:2px solid var(--color-accent);outline-offset:2px}
.setup-switch input:disabled+.setup-switch-track{opacity:.5}
.setup-help-wrap{position:relative;display:inline-flex}
.setup-help{all:unset;cursor:help;width:20px;height:20px;border-radius:50%;border:1px solid #ffffff40;display:grid;place-items:center;font-size:11px;font-weight:600;color:#d8d8cc}
.setup-help:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.setup-tip{position:absolute;right:-8px;top:30px;z-index:20;width:min(340px,80vw);padding:14px 16px;border:1px solid #ffffff30;border-radius:6px;background:#1c1c1c;box-shadow:0 18px 50px #00000080;color:#c9c9be;font-size:11.5px;line-height:1.7;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s}
.setup-tip strong{color:#f4f3ed}
.setup-help-wrap:hover .setup-tip,.setup-help:focus-visible+.setup-tip,.setup-tip.open{opacity:1;visibility:visible;transform:none}
.setup-modes{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.setup-mode{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #ffffff26;border-radius:3px;font-size:12px}
.setup-mode.on{border-color:#ff553b88;background:#ff553b0d;color:#f4f3ed}
.setup-mode.locked{color:#75756e;border-style:dashed}
.setup-mode-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.05em;color:#82827f}
.setup-mode.on .setup-mode-tag{color:var(--color-accent)}
.setup-domains-label{margin-top:24px;color:#82827f;font-size:9px}
.setup-domains{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.setup-domain{border:1px solid #ffffff1c;border-radius:4px;padding:12px 14px;background:#121212}
.setup-domain p{color:#a8a89e;font-size:11.5px;line-height:1.7;margin:8px 0 0}
.setup-domain-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.setup-domain-name{font-family:var(--font-mono);font-size:12px;color:#f4f3ed;overflow-wrap:anywhere}
.setup-domain-meta{font-size:10.5px;color:#75756e}
.setup-pill{font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;padding:3px 8px;border-radius:10px;border:1px solid}
.setup-pill.ok{color:#9be29b;border-color:#9be29b55}
.setup-pill.wait{color:#f0c674;border-color:#f0c67455}
.setup-pill.stop{color:#ff9d8d;border-color:#ff9d8d55}
.setup-remove{all:unset;cursor:pointer;margin-left:auto;color:#75756e;font-size:16px;padding:0 4px}
.setup-remove:hover,.setup-remove:focus-visible{color:#ff9d8d}
.setup-agent .micro-label{font-size:9px;color:#82827f}
.setup-dns{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;margin:8px 0 0;font-size:11px}
.setup-dns dt{color:#82827f;font-family:var(--font-mono);font-size:9px}
.setup-dns dd{margin:0;display:flex;gap:8px;align-items:center;min-width:0}
.setup-dns code{flex:1;min-width:0}
.setup-link{all:unset;cursor:pointer;font-size:11.5px;color:#a8a89e;text-decoration:underline;text-underline-offset:3px}
.setup-link:hover,.setup-link:focus-visible{color:var(--color-accent)}
.setup-add{display:flex;gap:8px;margin-top:12px;max-width:520px}
.setup-add input{flex:1;min-width:0;color:#eaeae0;background:#0b0b0b;border:1px solid #ffffff26;border-radius:3px;min-height:43px;padding:12px;font-size:13px;font-family:var(--font-mono)}
.setup-add input:focus{border-color:var(--color-accent);outline:none}

@media (width<=639px){
  .setup-testing,.setup-invites{padding:18px 16px}
  .setup-dns{grid-template-columns:1fr}
}
.welcome-shell{max-width:980px}
/* The result screen's .result .button margin does not apply inside setup. */
.result .setup .button{margin-top:0}
.begin-card .setup-switch,.setup .setup-switch{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:13px;color:#d8d8cc}
.setup-switch-track{display:inline-block;flex:none}
.setup-status.ok{color:#9be29b}