/* Atom Lab — intake wizard (/start).
   Leans entirely on the tokens in brand.css; defines no colour of its own beyond
   composites of those. Component shapes (button, label, input, focus ring) mirror
   index.html deliberately, so the flow reads as the same site rather than a bolt-on. */

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* Any class here that sets `display` outranks the browser's own [hidden] rule — same specificity,
   later origin — so .modal and .intake would sit on screen permanently despite the attribute.
   The JS toggles visibility through `hidden`, so it has to win outright. */
[hidden]{display:none!important}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;
  display:flex;flex-direction:column;min-height:100vh}
a{color:var(--cobalt);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}

.wrap{max-width:var(--edge);margin:0 auto;padding:0 32px;width:100%}
main{flex:1 0 auto}

/* ── nav ─────────────────────────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:50;background:rgba(250,250,247,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;height:60px}
.navmark{font-family:var(--display);font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.navmark:hover{text-decoration:none}
.navmark span{color:var(--cobalt)}
.back{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft)}
.back:hover{color:var(--cobalt);text-decoration:none}

/* ── shared type ─────────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cobalt);margin-bottom:14px}
h1{font-family:var(--display);font-size:clamp(34px,5.4vw,54px);line-height:1.04;letter-spacing:-.025em}
h2{font-family:var(--display);font-size:clamp(24px,3.2vw,32px);line-height:1.12;letter-spacing:-.02em}
.sub{color:var(--ink-soft);max-width:56ch;margin-top:14px}

/* ── step 0 · the fork ───────────────────────────────────────────────────── */
.fork{max-width:var(--edge);margin:0 auto;padding:clamp(48px,8vw,96px) 32px 96px}
.fork-head{margin-bottom:44px}
.fork-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.fork-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--line);
  padding:28px 26px 24px;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .18s ease-out,transform .18s ease-out,box-shadow .18s ease-out}
.fork-card:hover{border-color:var(--line);border-top-color:var(--cobalt);transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(19,27,38,.07)}
.fc-tag{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--note)}
.fc-title{font-family:var(--display);font-size:22px;letter-spacing:-.02em;line-height:1.15}
.fc-body{color:var(--ink-soft);font-size:14px}
.fc-go{margin-top:8px;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt)}
.fork-card:hover .fc-go svg{transform:translateX(3px)}
.fc-go svg{transition:transform .2s ease-out}
.fork-foot{margin-top:32px;color:var(--note);font-size:14px}

/* ── the wizard shell ────────────────────────────────────────────────────── */
.intake{max-width:var(--edge);margin:0 auto;padding:56px 32px 96px;
  display:grid;grid-template-columns:216px 1fr;gap:56px;align-items:start}

.rail{position:sticky;top:92px}
.rail-title{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--note);margin-bottom:16px}
.rail ol{list-style:none}
.rail li{display:flex;align-items:center;gap:11px;padding:7px 0;font-size:13.5px;color:var(--note)}
.rail .dot{width:22px;height:22px;flex:0 0 22px;border:1px solid var(--line);background:#fff;border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--note);
  transition:background .2s,border-color .2s,color .2s}
.rail li.on{color:var(--ink);font-weight:500}
.rail li.on .dot{border-color:var(--cobalt);color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-tint)}
.rail li.did{color:var(--ink-soft)}
.rail li.did .dot{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.rail-save{margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--note);
  opacity:0;transition:opacity .3s}
.rail-save.show{opacity:1}
.rail-reset{display:block;margin-top:14px;background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--note)}
.rail-reset:hover{color:var(--cobalt);text-decoration:underline}

.pane{max-width:640px}
#stepHead{margin-bottom:30px}
#stepHead .sub{margin-top:10px;font-size:14.5px}

/* ── fields ──────────────────────────────────────────────────────────────── */
.f{margin-bottom:22px}
.f > .l,label > .l{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.f .opt{color:var(--note);letter-spacing:.06em}
.f .help{font-size:12.5px;color:var(--note);margin-top:6px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

input,textarea{width:100%;background:#fff;border:1px solid var(--line);padding:11px 13px;
  font-family:var(--sans);font-size:14px;color:var(--ink);
  transition:border-color .15s ease-out,box-shadow .15s ease-out}
input::placeholder,textarea::placeholder{color:var(--note)}
input:focus,textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-tint)}
textarea{min-height:104px;resize:vertical}

/* ── dropdown ────────────────────────────────────────────────────────────────
   A listbox rather than a native <select>: the native popup is drawn by the OS, so it can't
   carry the flags, the type-ahead filter, or any of the brand. The trigger keeps the exact
   metrics of the text inputs above so a row of mixed fields still lines up. */
.sel{position:relative}
.sel-btn{width:100%;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  padding:11px 34px 11px 13px;font-family:var(--sans);font-size:14px;color:var(--ink);text-align:left;
  cursor:pointer;transition:border-color .15s ease-out,box-shadow .15s ease-out}
.sel-btn:hover{border-color:var(--peri)}
.sel-btn:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-tint)}
.sel-btn .sel-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-btn.empty .sel-val{color:var(--note)}
.sel-btn .chev{position:absolute;right:13px;top:50%;margin-top:-3px;transition:transform .18s ease-out}
.sel[data-open="1"] .sel-btn{border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-tint)}
.sel[data-open="1"] .chev{transform:rotate(180deg)}

.sel-pop{position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;background:#fff;
  border:1px solid var(--cobalt);box-shadow:0 14px 34px rgba(19,27,38,.13);max-height:290px;
  display:flex;flex-direction:column;overflow:hidden}
.sel-pop.up{top:auto;bottom:calc(100% + 4px)}
.sel-search{border:none!important;border-bottom:1px solid var(--line)!important;padding:10px 13px!important;
  font-size:13.5px!important;box-shadow:none!important;flex:0 0 auto}
.sel-search:focus{outline:none;border-bottom-color:var(--cobalt)!important;box-shadow:none!important}
.sel-list{list-style:none;overflow-y:auto;flex:1 1 auto;padding:4px 0}
.sel-opt{display:flex;align-items:center;gap:9px;padding:8px 13px;font-size:14px;color:var(--ink);cursor:pointer}
.sel-opt:hover,.sel-opt.active{background:var(--panel)}
.sel-opt[aria-selected="true"]{background:var(--cobalt-tint);color:var(--cobalt-deep);font-weight:500}
.sel-opt .tick{margin-left:auto;color:var(--cobalt);opacity:0}
.sel-opt[aria-selected="true"] .tick{opacity:1}
.sel-none{padding:11px 13px;font-size:13.5px;color:var(--note)}
/* compact variant for the unit pickers sitting beside a number */
.numunit .sel-btn{padding:11px 28px 11px 11px}
.numunit .sel-btn .chev{right:10px}

/* ── glyphs: flags beside languages, brand marks beside systems ──────────── */
.gl{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.gl-flag{font-size:14px;width:18px}
.gl-sys{width:14px;height:14px;color:var(--ink-soft)}
.chip[aria-pressed="true"] .gl-sys{color:var(--cobalt-deep)}
.sel-opt .gl-flag{width:20px;font-size:15px}
.sel-btn .gl-flag{width:20px;font-size:15px}
/* letter tile for the few systems with no mark available */
.gl-ltr{width:14px;height:14px;background:var(--ink-soft);color:#fff;font-family:var(--mono);font-size:8px;
  font-weight:600;border-radius:2px}
.chip[aria-pressed="true"] .gl-ltr{background:var(--cobalt)}
.f.bad input,.f.bad textarea,.f.bad select,.f.bad .chips,.f.bad .cards{border-color:#B4241F}
.fmsg{font-size:12.5px;color:#B4241F;margin-top:6px}

/* number + unit */
.numunit{display:grid;grid-template-columns:1fr 130px;gap:10px}

/* chips — multi-select */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  padding:8px 13px;font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.chip:hover{border-color:var(--peri)}
.chip[aria-pressed="true"]{background:var(--cobalt-tint);border-color:var(--cobalt);color:var(--cobalt-deep);font-weight:500}
.chip .x{font-family:var(--mono);font-size:11px;opacity:.6}

/* radio / single-choice cards */
.cards{display:grid;gap:9px}
.card-opt{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  padding:13px 15px;cursor:pointer;transition:border-color .15s,background .15s}
.card-opt:hover{border-color:var(--peri)}
.card-opt input{width:auto;margin:0;flex:0 0 auto;accent-color:var(--cobalt);margin-top:3px}
.card-opt.sel{border-color:var(--cobalt);background:var(--cobalt-tint)}
.card-opt .co-t{font-size:14px;color:var(--ink)}
.card-opt .co-d{font-size:12.5px;color:var(--note);margin-top:2px}

/* checkbox */
.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:14px;color:var(--ink-soft)}
.check input{width:auto;flex:0 0 auto;margin-top:3px;accent-color:var(--cobalt)}

/* source picker (supplier step 3) */
.srcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.srccat > h4{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--note);margin-bottom:9px}
.addrow{display:grid;grid-template-columns:1fr auto;gap:9px;margin-top:8px}

/* per-source sizing (supplier step 4) */
.srcsize{background:#fff;border:1px solid var(--line);padding:15px 16px;margin-bottom:11px}
.srcsize h5{font-family:var(--sans);font-size:14px;font-weight:600;margin-bottom:11px}

/* conditional block */
.cond{border-left:2px solid var(--cobalt);padding-left:20px;margin:0 0 22px}
.cond-h{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cobalt);margin-bottom:14px}

/* ── review ──────────────────────────────────────────────────────────────── */
.rev{background:#fff;border:1px solid var(--line);border-top:3px solid var(--cobalt);padding:24px 26px;margin-bottom:22px}
.rev h3{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cobalt);margin-bottom:14px}
.rev dl{display:grid;grid-template-columns:150px 1fr;gap:9px 18px}
.rev dt{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--note);padding-top:3px}
.rev dd{font-size:14px;color:var(--ink);white-space:pre-wrap}
.rev + .rev{margin-top:-6px}
.rev .edit{float:right;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:none;color:var(--cobalt);cursor:pointer;padding:0}
.rev .edit:hover{text-decoration:underline}

/* ── buttons / nav row ───────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--cobalt);color:#fff;font-family:var(--mono);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:11px 22px;
  border:1px solid var(--cobalt);cursor:pointer;transition:background .18s ease-out}
.btn:hover{background:var(--cobalt-deep);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn svg{transition:transform .2s ease-out}
.btn:hover svg{transform:translateX(3px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.ghost{background:none;color:var(--ink-soft);border-color:var(--line)}
.btn.ghost:hover{background:none;border-color:var(--ink-soft);color:var(--ink)}
.btn.danger{background:#B4241F;border-color:#B4241F}
.btn.danger:hover{background:#8E1B17;border-color:#8E1B17}

/* ── confirm dialog ──────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px}
.modal-back{position:absolute;inset:0;background:rgba(19,27,38,.55);backdrop-filter:blur(3px);
  animation:fade 180ms ease-out both}
.modal-box{position:relative;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--cobalt);
  padding:28px 30px 26px;max-width:430px;width:100%;box-shadow:0 24px 60px rgba(19,27,38,.24);
  animation:rise 200ms cubic-bezier(.23,1,.32,1) both}
.modal-box h3{font-family:var(--display);font-size:23px;letter-spacing:-.02em;line-height:1.15}
.modal-box p{color:var(--ink-soft);font-size:14px;margin-top:10px}
.modal-box .eyebrow{margin-bottom:10px}
.modal-row{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media (max-width:520px){ .modal-row{flex-direction:column-reverse} .modal-row .btn{justify-content:center} }
.nav-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:32px;
  border-top:1px solid var(--line);padding-top:22px}
.err{background:#FDF2F2;border:1px solid #E7C3C1;color:#8E1B17;padding:10px 13px;font-size:13.5px;margin-top:18px}

/* honeypot — off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── confirmation ────────────────────────────────────────────────────────── */
.done{max-width:560px;margin:0 auto;padding:clamp(64px,10vw,120px) 32px;text-align:center}
.done .tick-i{width:42px;height:42px;background:var(--cobalt);color:#fff;display:grid;place-items:center;
  margin:0 auto 18px;animation:pop 340ms cubic-bezier(.23,1,.32,1) both}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.done p{color:var(--ink-soft);margin-top:14px}
.done-ref{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--note);margin:22px 0 26px}

/* ── footer ──────────────────────────────────────────────────────────────── */
footer{flex-shrink:0;padding:26px 0 30px;margin-top:auto}
footer .wrap{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);
  padding-top:16px;flex-wrap:wrap;gap:10px}
footer .navmark{font-size:15px}
.fnote{font-family:var(--mono);font-size:11px;color:var(--note)}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .intake{grid-template-columns:1fr;gap:28px;padding-top:36px}
  /* The rail becomes a horizontal strip above the pane — it still says where you are,
     but stops eating a column on a phone. */
  .rail{position:static}
  .rail ol{display:flex;gap:6px}
  .rail li{flex:1;flex-direction:column;align-items:flex-start;gap:6px;font-size:11px;padding:0}
  .rail li span.t{display:none}
  .rail .dot{width:100%;height:3px;border-radius:0;border:none;background:var(--line);color:transparent;font-size:0}
  .rail li.on .dot{background:var(--cobalt);box-shadow:none}
  .rail li.did .dot{background:var(--cobalt)}
  .rail-save{margin-top:12px}
}
@media (max-width:680px){
  .wrap,.fork,.intake,.done{padding-left:20px;padding-right:20px}
  .fork-cards,.srcgrid,.row{grid-template-columns:1fr}
  .rev dl{grid-template-columns:1fr;gap:3px 0}
  .rev dt{padding-top:9px}
  .numunit{grid-template-columns:1fr 110px}
  .nav-row{flex-direction:column-reverse;align-items:stretch}
  .nav-row .btn{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .fork-card:hover{transform:none}
}