/* lab.css — the purchase lab. Loaded only on /lab/ pages, because it is a lot of
   stylesheet for a page that is not selling anything, and the other ten pages of
   this site should not carry it.

   It uses the house tokens rather than a palette of its own: the lab is a
   prototype of THIS store, and a prototype that looks like a different product
   tests the wrong thing. Two idioms are new and both earn it.

   .opt is a BUTTON, never an input. Three pages of this site say it collects
   nothing from anybody and a gate holds the whole of docs/ to no form, no input,
   no textarea, no select. A chooser built out of buttons keeps that absolutely
   true rather than nearly true, and aria-pressed carries the state a checkbox
   would have carried.

   .is-excess is red on purpose and is the only red on the page. It marks a grant
   that is permitted with nothing on the brief that would need it, which is the
   one thing the whole configurator exists to surface. If anything else on this
   page competes with it for attention, this stylesheet is wrong. */

.lab-wrap{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:2rem;align-items:start}
.lab-main{min-width:0}
@media(max-width:960px){.lab-wrap{grid-template-columns:1fr}}

.labnote{border:1px solid #f0d3b8;background:#fdf1e6;border-radius:10px;padding:.8rem 1rem;margin:1.2rem 0}
.labnote b{color:#8a3d12}
.labnote p{margin:.3rem 0;font-size:.88rem;color:#6b4020}

.trackhint{font-family:var(--serif);font-size:1.05rem;color:var(--dim);margin:.4rem 0 1.4rem;
  padding-left:.8rem;border-left:3px solid var(--line2)}

.lab-sec{margin:0 0 1.9rem}
.lab-sec > h2{font-family:var(--serif);font-size:1.35rem;color:#101114;margin:0 0 .5rem;
  padding-top:.6rem;border-top:1px solid var(--line)}
.sec-head{position:relative;padding-top:.6rem;border-top:1px solid var(--line);margin-bottom:.7rem}
.sec-head h2{font-family:var(--serif);font-size:1.35rem;color:#101114;margin:0 0 .3rem;border:0;padding:0}
.sec-n{position:absolute;right:0;top:.5rem;font-family:var(--serif);font-size:1.7rem;color:var(--line2);line-height:1}
.sec-q{margin:0 0 .35rem;font-size:1.02rem;color:var(--ink);font-weight:600}
.sec-why{margin:0;font-size:.86rem;color:var(--dim);line-height:1.6;max-width:62ch}

/* ---------- the chooser ---------- */
.opts{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));margin:.9rem 0 0}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:.22rem;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.62rem .75rem .68rem;
  font:inherit;color:var(--ink);position:relative;transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--line2)}
.opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.opt-l{font-size:.9rem;font-weight:600;color:#101114;padding-right:1.3rem;line-height:1.35}
.opt-n{font-size:.78rem;color:var(--dim);line-height:1.5}
.opt-c{font-size:.72rem;color:var(--dim2);font-family:var(--mono)}
.opt-v{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.opt-state{font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--warm);background:#fdf1e6;border:1px solid #f0d3b8;border-radius:99px;padding:.05rem .45rem;margin-top:.15rem}
.opt.is-on{border-color:var(--accent);background:rgba(15,118,110,.055)}
.opt.is-on::after{content:"✓";position:absolute;top:.5rem;right:.62rem;font-size:.78rem;font-weight:800;color:var(--accent)}
.opts-track{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.opt-track{padding:.85rem .95rem .95rem}
.opt-scn .opt-l{font-size:.95rem}

/* ---------- the interview ---------- */
.steps{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1.4rem}
.step{cursor:pointer;font:600 .74rem/1 var(--sans);letter-spacing:.02em;color:var(--dim);background:var(--panel);
  border:1px solid var(--line);border-radius:99px;padding:.36rem .72rem}
.step.is-done{color:var(--accent-dk);border-color:rgba(15,118,110,.35)}
.step.is-on{color:#fff;background:var(--accent);border-color:var(--accent)}
.lab-stage{min-height:19rem}
.stepnav{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:1.4rem 0 0}

/* ---------- the board ---------- */
.board{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));margin:1rem 0 0}
.bcard{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:.85rem .95rem 1rem}
.bcard h3{font-size:.96rem;margin:0 0 .2rem;color:#101114}
.blab{display:block;font-size:.62rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim2);margin:.7rem 0 .25rem}
.blist{list-style:none;margin:0;padding:0}
.blist li{font-size:.82rem;color:var(--ink);padding:.14rem 0 .14rem .85rem;position:relative;line-height:1.45}
.blist li::before{content:"·";position:absolute;left:.2rem;color:var(--dim2)}
.blist li.is-excess{color:var(--red);font-weight:600}
.blist li.is-excess::before{content:"!";font-weight:800;color:var(--red)}
.blist li.dim{color:var(--dim2);font-style:italic}

/* ---------- the delta ---------- */
.delta3{display:grid;grid-template-columns:1fr .82fr 1fr;gap:1rem;align-items:start;margin:1.2rem 0 0}
@media(max-width:1080px){.delta3{grid-template-columns:1fr}}
.dcol h3{font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);
  margin:0 0 .5rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.dcol .opts{grid-template-columns:1fr;margin-top:0}
.dcol-mid{background:#fff6f5;border:1px solid #f3d3d0;border-radius:11px;padding:.8rem .85rem 1rem;
  position:sticky;top:5rem}
.dcol-mid h3{color:var(--red);border-bottom-color:#f3d3d0}
.dx{border-left:3px solid var(--red);padding:.2rem 0 .3rem .6rem;margin:0 0 .55rem}
.dx b{display:block;font-size:.86rem;color:#7f1d1d}
.dx span{font-size:.75rem;color:#9a5a55}

/* ---------- the ticket ---------- */
.ticket{position:sticky;top:5rem;background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:1rem 1.05rem 1.1rem;box-shadow:var(--shadow)}
@media(max-width:960px){.ticket{position:static}}
.ticket-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem}
.ticket-k{flex:1 0 100%;font-size:.62rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--dim2)}
.ticket-price{font-family:var(--serif);font-size:1.75rem;line-height:1;color:#101114;letter-spacing:-.02em}
.ticket-tier{font-size:.74rem;color:var(--dim)}
.ticket-says{margin:.5rem 0 .7rem;font-size:.83rem;color:var(--dim);line-height:1.55}
.meter{height:5px;border-radius:99px;background:var(--panel2);overflow:hidden;border:1px solid var(--line)}
.meter i{display:block;height:100%;background:var(--accent);transition:width .18s ease}
.ticket-w{margin:.4rem 0 .8rem;font-size:.72rem;color:var(--dim2);font-family:var(--mono);line-height:1.5}
.ticket-rows{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-wrap:wrap;gap:.1rem .9rem}
.ticket-rows li{font-size:.76rem;color:var(--dim)}
.ticket-rows b{color:#101114;font-size:.9rem}
.ticket-delta{border:1px solid #f3d3d0;background:#fff6f5;border-radius:9px;padding:.55rem .7rem;margin:0 0 .7rem}
.ticket-delta b{font-size:.78rem;color:#7f1d1d}
.ticket-delta ul{margin:.3rem 0 .2rem;padding-left:1rem}
.ticket-delta li{font-size:.78rem;color:#7f1d1d}
.ticket-delta .small{margin:.3rem 0 0;font-size:.72rem;color:#9a5a55}
.ticket-un{border:1px dashed var(--line2);border-radius:9px;padding:.55rem .7rem;margin:0 0 .8rem}
.ticket-un b{font-size:.76rem;color:var(--ink)}
.ticket-un ul{margin:.3rem 0 0;padding-left:1rem}
.ticket-un li{font-size:.74rem;color:var(--dim);line-height:1.5;margin:.22rem 0}
.ticket-acts{display:flex;flex-direction:column;align-items:stretch;gap:.4rem}
.ticket-acts .buy{text-align:center;cursor:pointer;font:700 .84rem/1.5 var(--sans)}
.linkish{background:none;border:0;padding:.2rem;color:var(--dim);font:.76rem/1.4 var(--sans);
  cursor:pointer;text-decoration:underline}
.linkish:hover{color:var(--fg)}
.ticket-foot{margin:.8rem 0 0;font-size:.71rem;color:var(--dim2);line-height:1.5}

/* ---------- the file ---------- */
.jsonwrap{margin:2.2rem 0 0;border-top:1px solid var(--line);padding-top:1rem}
.jsonwrap summary{cursor:pointer;font-weight:700;font-size:.92rem;color:#101114}
pre.json{max-height:26rem;overflow:auto;font-size:.72rem;line-height:1.55}

/* site.css scopes the outlined variant to `a.buy-alt`, because until now every
   secondary action on this site was a link. In the lab the secondary actions are
   BUTTONS — there is no form here, so everything that acts is a button — and
   without this they rendered as a second solid primary, which is a screenshot
   showing two equally loud calls to action. */
button.buy-alt{background:transparent;color:var(--accent-dk);border-color:var(--accent)}
button.buy-alt:hover{background:rgba(15,118,110,.06)}