/* Alpha.sh Reserve compute page (/reserve-compute/). Loaded after site.css, which provides the tokens,
   the header, the footer and .hp. Everything here is prefixed .rc-. Design: design/Reserve Compute.dc.html. */

.rc{max-width:1180px;margin:0 auto;padding:clamp(56px,8vw,88px) clamp(20px,4vw,40px) 0}
.rc [hidden]{display:none!important}
.rc :where(h2,p){margin:0}
input::placeholder,textarea::placeholder{color:var(--disabled);opacity:1}
@keyframes rc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Hero */
.rc-hero{max-width:860px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
.rc-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.rc-hero h1{margin:0;font-size:clamp(44px,7vw,76px);line-height:.98;letter-spacing:-.045em;font-weight:600;text-wrap:balance}
.rc-hero h1 span{color:var(--blue)}
.rc-lede{font-size:clamp(17px,1.8vw,20px);line-height:1.5;color:var(--muted);max-width:620px;text-wrap:balance}

/* Flow: steps | panel | live spec */
.rc-flow{margin-top:clamp(40px,6vw,64px);display:flex;flex-wrap:wrap;align-items:flex-start;min-height:520px;border-top:1px solid var(--line)}
.rc-main{flex:1 1 640px;min-width:0;display:flex;flex-wrap:wrap;align-items:flex-start;align-self:stretch}

.rc-steps{flex:0 1 220px;min-width:180px;position:sticky;top:64px;align-self:flex-start;padding:24px 16px 24px 0;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.rc-steps-label{padding:4px 8px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.rc-divider{display:block;height:1px;margin:8px;background:var(--line)}
.rc-side{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:inherit;font-weight:400;text-align:left;cursor:pointer;transition:background .15s,color .15s}
.rc-side:hover{color:var(--ink)}
.rc-side:disabled{color:var(--disabled);cursor:default}
.rc-side:disabled:hover{color:var(--disabled)}
.rc-side[aria-current="step"]{background:var(--blue-tint);color:var(--blue);font-weight:500}
.rc-side-mark{width:18px;font-family:var(--mono);font-size:11px;color:var(--disabled);flex:none}
.rc-side[aria-current="step"] .rc-side-mark{color:var(--blue)}
.rc-side.is-complete .rc-side-mark{color:var(--green)}
.rc-side-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.rc-panel{flex:1 1 420px;min-width:0;align-self:stretch;padding:28px clamp(20px,3.4vw,40px) 32px;border-left:1px solid var(--line);border-right:1px solid var(--line);display:flex;flex-direction:column}
.rc-crumb{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden}
.rc-crumb-step{overflow:hidden;text-overflow:ellipsis}
.rc-tag{margin-left:auto;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:4px;padding:2px 6px}

.rc-title{font-size:clamp(24px,2.6vw,30px);line-height:1.1;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.rc-title:focus{outline:none}
.rc-optional{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:2px 6px}
.rc-alert{margin-top:8px;font-size:13.5px;color:var(--red)}

/* Form */
.rc-form{flex:1;display:flex;flex-direction:column;margin-top:22px}
.rc-step{flex:1;animation:rc-in .3s cubic-bezier(.2,.7,.2,1)}
.rc-rows{display:grid;gap:16px;margin-top:20px}
.rc-caption{margin-bottom:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.rc-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:8px}
.rc-opt{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:15px;font-weight:500;text-align:left;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.rc-opt:hover{border-color:var(--border)}
.rc-opt[aria-checked="true"]{background:var(--blue-tint);color:var(--blue);border-color:rgba(27,68,232,.5)}
.rc-ring{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border);transition:border-color .18s;flex:none}
.rc-ring span{width:7px;height:7px;border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
.rc-opt[aria-checked="true"] .rc-ring{border-color:var(--blue)}
.rc-opt[aria-checked="true"] .rc-ring span{transform:scale(1)}

.rc-label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--muted)}
.rc-input{display:block;width:100%;min-width:0;height:46px;padding:0 14px;border:1px solid var(--border);border-radius:9px;background:#fff;font:inherit;font-size:15px;color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.rc-input:focus,.rc-input:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,68,232,.14)}
.rc-input[aria-invalid="true"]{border-color:var(--red)}
.rc-textarea{height:auto;padding:12px 14px;line-height:1.5;resize:vertical}
.rc-field-error{display:block;margin-top:6px;font-size:13px;color:var(--red)}
.rc-grid{display:grid;gap:16px;margin-top:20px}
.rc-grid-prefs{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));align-items:end}
.rc-grid-contact{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.rc-grid-contact label{display:block;min-width:0}


/* Review */
.rc-review{margin:18px 0 0;border-top:1px solid var(--line)}
.rc-review div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.rc-review dt{color:var(--faint)}
.rc-review dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.rc-edit{min-height:32px;padding:0 8px;border:0;background:none;color:var(--blue);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer}
.rc-edit:hover{color:var(--blue-hover)}

/* Actions */
.rc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.rc-actions-end{margin-left:auto;display:flex;align-items:center;gap:8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.rc-form-error{font-size:13.5px;color:var(--red)}
.rc-back,.rc-reset{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:9px;border:1px solid var(--border);background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.rc-back:hover,.rc-reset:hover{border-color:var(--ink)}
.rc-skip{height:40px;padding:0 14px;border:0;border-radius:9px;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.rc-skip:hover{color:var(--ink)}
.rc-next{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:9px;background:var(--blue);color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s}
.rc-next:hover{background:var(--blue-hover)}
.rc-next:disabled{opacity:.7;cursor:default}

/* Received */
.rc-done{flex:1;margin-top:28px;animation:rc-in .35s cubic-bezier(.2,.7,.2,1)}
.rc-received{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--green);background:var(--green-tint);padding:2px 8px;border-radius:999px}
.rc-done .rc-title{margin-top:14px}
.rc-done-text{margin-top:10px;max-width:46ch;font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.rc-reset{margin-top:24px;padding:0 16px}

/* Live spec */
.rc-spec{flex:1 1 280px;min-width:0;max-width:100%;position:sticky;top:64px;align-self:flex-start;padding:28px 0 24px clamp(20px,3vw,32px)}
.rc-spec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rc-spec-head b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.rc-status{font-size:11px;font-weight:500;color:var(--faint);background:var(--panel);padding:2px 8px;border-radius:999px;white-space:nowrap}
.rc-status.is-ready{color:var(--green);background:var(--green-tint)}
.rc-rack{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px;max-width:360px;margin-top:18px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.rc-rack span{aspect-ratio:1;border-radius:2px;background:#EEEBE3;transition:background .35s ease}
.rc-rack span.is-lit{background:var(--blue-bright)}
.rc-rack span.is-maybe{background:rgba(27,68,232,.25)}
.rc-rack-label{margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--faint)}
.rc-spec-list{margin:16px 0 0;font-size:13px}
.rc-spec-list div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid var(--line)}
.rc-spec-list dt{font-family:var(--mono);font-size:12px;color:var(--faint);transition:color .2s}
.rc-spec-list dt.is-active{color:var(--blue)}
.rc-spec-list dd{margin:0;text-align:right;font-weight:500;color:var(--disabled);transition:color .2s}
.rc-spec-list dd.is-set{color:var(--ink)}
.rc-fine{margin-top:16px;font-size:12.5px;line-height:1.5;color:var(--faint);text-wrap:pretty}

@media (prefers-reduced-motion:reduce){
  .rc *{animation:none!important}
}