/* 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-done{color:#d8d8cc;font-size:13px;line-height:1.8;border:1px solid #ff553b44;background:#ff553b0d;padding:14px;border-radius:4px}

.setup-choices{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.setup-block{border:1px solid #ffffff1f;border-radius:8px;background:#0f0f0f;overflow:hidden}
.setup-choice{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:1fr auto;grid-template-areas:"k c" "t c" "b c";gap:6px 18px;padding:22px 24px}
.setup-choice:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}
.setup-choice:hover{background:#151515}
.setup-kicker{grid-area:k;font-family:var(--font-mono);font-size:10px;letter-spacing:.055em;color:var(--color-accent)}
.setup-choice-title{grid-area:t;display:block;font-size:22px;letter-spacing:-.04em;font-weight:520;color:#f4f3ed;line-height:1.15}
.setup-choice-blurb{grid-area:b;font-size:12px;color:#82827f}
.setup-chevron{grid-area:c;align-self:center;width:32px;height:32px;border:1px solid #ffffff30;border-radius:50%;display:grid;place-items:center;font-size:18px;color:#d8d8cc;transition:transform .2s}
.setup-choice[aria-expanded=true] .setup-chevron{transform:rotate(45deg);border-color:var(--color-accent);color:var(--color-accent)}
.setup-panel{padding:0 24px 26px;border-top:1px solid #ffffff14}

.setup-steps{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:26px}
.setup-step{display:grid;grid-template-columns:34px 1fr;gap:14px}
.setup-step-num{font-family:var(--font-mono);font-size:10px;color:var(--color-accent);padding-top:5px}
.setup-step h4{margin:0;font-size:16px;letter-spacing:-.02em;font-weight:560;color:#f4f3ed}
.setup-step p{color:#a8a89e;font-size:12.5px;line-height:1.75;margin:6px 0 0}
.setup-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.setup-tree{margin:12px 0 0;font-family:var(--font-mono);font-size:10.5px;line-height:1.6;color:#94948d}
.setup-settings{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:6px 16px;margin:12px 0 0;font-size:11.5px}
.setup-settings dt{font-family:var(--font-mono);color:#f4f3ed;overflow-wrap:anywhere}
.setup-settings dd{margin:0;color:#94948d}
.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-source{margin-top:10px;border:1px solid #ffffff1c;border-radius:4px;background:#121212}
.setup-source summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:13px 14px}
.setup-source summary::-webkit-details-marker{display:none}
.setup-source summary::before{content:"+";font-family:var(--font-mono);color:var(--color-accent);width:10px}
.setup-source[open] summary::before{content:"–"}
.setup-source summary strong{font-size:13px;color:#f4f3ed;font-weight:560}
.setup-source summary span{font-size:11.5px;color:#82827f}
.setup-substeps{margin:0;padding:0 16px 16px 36px;color:#a8a89e;font-size:12px;line-height:1.7}
.setup-substeps li{margin-top:10px}
.setup-substeps strong{color:#d8d8cc;font-weight:560}
.setup-substeps p{margin:2px 0 0}
.setup-tabs{display:flex;gap:6px;margin-top:12px}
.setup-tabs button{all:unset;cursor:pointer;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;padding:7px 12px;border:1px solid #ffffff26;border-radius:3px;color:#a8a89e}
.setup-tabs button[aria-selected=true]{border-color:var(--color-accent);color:#f4f3ed;background:#ff553b14}
.setup-tabs button:focus-visible{outline:2px solid var(--color-accent)}
.setup-later{margin-top:22px;padding:14px;border:1px dashed #ffffff26;border-radius:4px}
.setup-later .micro-label{color:#82827f;font-size:9px}
.setup-later p:last-child{margin:6px 0 0;color:#a8a89e;font-size:12px;line-height:1.7}

.setup-endpoints{margin-top:18px}
.setup-endpoints .micro-label{color:#82827f;margin-bottom:10px}
.setup-endpoints label:not(.chip){display:block;margin:18px 0 8px;font-size:10px;color:#d8d8cc}
.setup-endpoints input:not([type=checkbox]){color:#eaeae0;background:#0b0b0b;border:1px solid #ffffff26;border-radius:3px;width:100%;max-width:420px;min-height:43px;padding:12px;font-size:13px;font-family:inherit}
.setup-endpoints input:focus{border-color:var(--color-accent);outline:none}
.setup-endpoints .button{margin-top:20px}

.setup-testing{margin-top:12px;padding:22px 24px 24px}
.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-choice,.setup-testing{padding:18px 16px}
  .setup-panel{padding:0 16px 20px}
  .setup-step{grid-template-columns:1fr;gap:4px}
  .setup-settings{grid-template-columns:1fr}
  .setup-settings dd{margin-bottom:6px}
  .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}
.result .setup-endpoints .button{margin-top:20px}
.result .setup pre.setup-tree{max-height:none;border:0;background:none;padding:0}
.setup-endpoints input:not([type=checkbox]){display:block}
.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}
.begin-card .setup-endpoints label.chip{display:inline-block;margin:0}
.setup-status.ok{color:#9be29b}
.setup-terraform>p{color:#a8a89e;font-size:12.5px;line-height:1.75;margin:12px 0 0}