/* One decision at a time (steps.js). Loaded after build.css and extras.css; it only lays the panes out. */
.build .s-pane[hidden],.s-more[hidden],.s-nav [hidden],.build .btn[hidden]{display:none !important}
.choices{display:flex;flex-direction:column;min-height:calc(100svh - var(--bar) - 40px)}
/* the path: a quiet label, a count, a line that fills */
.s-top{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:10px 12px;padding-top:8px}
.choices h1.s-title{margin:0;font:600 14px/1.2 var(--text);letter-spacing:-.016em;color:var(--soft)}
.s-count{font:400 14px/1.2 var(--text);letter-spacing:-.016em;color:var(--soft);font-variant-numeric:tabular-nums}
.s-bar{grid-column:1 / -1;height:4px;border-radius:99px;background:var(--fill-2);overflow:hidden}
.s-bar i{display:block;height:100%;border-radius:99px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);transition:transform .7s var(--ease),background-color .4s}
/* a pane: one question, one line of why, then the few things to choose from */
.s-pane{padding-top:36px;animation:s-in .5s var(--ease) both}
@keyframes s-in{from{opacity:0;translate:14px 0}}
.b-part.s-pane h2{margin-bottom:8px;font:600 clamp(28px,2.4vw,34px)/1.1 var(--display);letter-spacing:-.018em;text-wrap:balance}
.s-pane h2:focus{outline:none}
.s-why{max-width:34ch;margin-bottom:22px;color:var(--soft);font-size:17px;line-height:1.35;text-wrap:pretty}
#rest[inert]{opacity:1}
/* what a step keeps back: one plain button, and its contents under it */
.s-more-b{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;margin-top:18px;padding:0 4px;border:0;border-top:1px solid var(--line);background:none;color:var(--accent-ink);font:400 17px/1.2 var(--text);letter-spacing:-.022em;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s,padding .3s var(--ease)}
.s-more-b + .s-more + .s-more-b{margin-top:0}
.s-more-b::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border:solid currentColor;border-width:0 1.5px 1.5px 0;rotate:45deg;translate:0 -2px;transition:rotate .35s var(--ease),translate .35s var(--ease)}
.s-more-b[aria-expanded="true"]::after{rotate:-135deg;translate:0 2px}
@media (hover:hover){.s-more-b:hover{padding-left:8px}}
.s-more-b:active{color:var(--ink)}
.s-more-b:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:8px}
.s-more{padding:4px 0 18px;animation:s-open .45s var(--ease) both}
@keyframes s-open{from{opacity:0;translate:0 -8px}}
.s-more > h3:first-child{margin-top:8px}
/* the end of the path: the one thing to do, then what was made, then the doors */
[data-pane="done"] .b-full{margin-bottom:6px}
.s-doors{display:flex;flex-direction:column;margin:0;padding:0;border-radius:18px;background:var(--card);overflow:hidden}
.s-doors li + li{border-top:1px solid var(--line)}
.s-doors button{position:relative;display:grid;gap:2px;width:100%;min-height:60px;padding:11px 44px 11px 18px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,padding .3s var(--ease)}
.s-doors button::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;border:solid var(--faint);border-width:1.5px 1.5px 0 0;rotate:45deg;translate:0 -50%;transition:translate .3s var(--ease),border-color .2s}
@media (hover:hover){.s-doors button:hover{background:var(--fill-2)}.s-doors button:hover::after{translate:3px -50%;border-color:var(--accent)}}
.s-doors button:active{background:var(--fill-2)}
.s-doors button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px;border-radius:18px}
.s-doors b{font-size:17px;font-weight:600;letter-spacing:-.022em}
.s-doors span{color:var(--soft);font-size:14px;letter-spacing:-.016em}
/* the borrowed parts sit bare in their own panes: the pane already has the heading and the room */
.s-pane #slot-parts,.s-pane #slot-paste,.s-pane #slot-logo{padding:0;background:none;border-radius:0}
.s-pane .x-h{display:none}
/* Back and Next: always in the same place */
.s-nav{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding:28px 0 20px;background:linear-gradient(rgba(255,255,255,0),var(--bg) 34%)}
.s-say{flex:1 0 100%;min-height:1.3em;color:var(--soft);font-size:14px}
.s-say:empty{display:none}
.s-nav .btn{height:48px;min-width:104px}
.s-nav #s-next{flex:1}
.s-nav .b-see{display:none}
@media (max-width:899px){
  .choices{min-height:calc(100svh - var(--bar) - 124px)}
  .s-pane{padding-top:28px}
  .s-nav{position:fixed;left:0;right:0;bottom:0;margin:0;padding:14px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--line)}
  /* on a phone the way to see the CRM joins Back and Next, so there is one bar, not two */
  .s-nav .b-see{position:static;display:inline-flex;flex:1;height:48px;box-shadow:none;background:var(--fill-2);color:var(--ink)}
  .s-nav .b-see[hidden]{display:none}
  .s-nav #s-next{flex:1}
  .s-nav #s-back{min-width:0;padding:0 16px}
  .build .b-note{bottom:calc(86px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.s-pane,.s-more{animation:none}}

/* the first two steps show no CRM: one question, alone in the middle. It appears, full size and theirs, when a trade is picked */
@media (min-width:900px){
  .build:is([data-at="name"],[data-at="trade"]):not([data-full]){grid-template-columns:minmax(0,1fr)}
  .build:is([data-at="name"],[data-at="trade"]):not([data-full]) .crm{display:none}
  .build:is([data-at="name"],[data-at="trade"]) .choices{grid-column:1;width:min(100%,520px);margin:0 auto}
}
/* the look step: the colour and light or dark first; the slider, the code box and every other look wait behind the button */
[data-pane="look"]:has(#more-look[hidden]) #c-main .b-mix,[data-pane="look"]:has(#more-look[hidden]) #looks > :nth-child(n+3){display:none}
[data-pane="look"] #looks > h3:first-child{margin-top:22px}
/* the stages, read back as a plain numbered list before anything can be changed */
.s-read{display:flex;flex-direction:column;margin:0 0 4px;padding:6px 18px;border-radius:18px;background:var(--card);counter-reset:sr}
.s-read li{display:flex;align-items:baseline;gap:14px;min-height:44px;padding:11px 0;font-size:17px;letter-spacing:-.022em;counter-increment:sr}
.s-read li + li{border-top:1px solid var(--line)}
.s-read li::before{content:counter(sr);flex:none;width:1.4em;color:var(--faint);font-size:14px;font-variant-numeric:tabular-nums;text-align:right}
.s-more-b.s-door::after{rotate:-45deg;translate:-2px 0}

/* On a desk the build page takes the first screen's shape (lux.css; James, 11 Nov 2026: "a fun one step, clear building process"): the
   real CRM fills the screen and the one question sits on a pane of glass at its foot. Open full size still shows the CRM alone. */
@media (min-width:900px) and (min-height:620px){
  /* James, 11 Nov 2026, of the first try: "a background CRM with a menu over it ... it's just shite". So nothing sits over the CRM here
     either: the questions are a pane of glass in a steel frame at the left, and the real CRM stands at the right inside a rim of glass. */
  html:has(.build),body:has(.build){height:100%;overflow:hidden;background:#fff}
  .build:not([data-full]){display:grid;grid-template-columns:minmax(400px,35fr) minmax(0,65fr);gap:clamp(16px,2.2vw,36px);align-items:stretch;max-width:none;height:100svh;margin:0;
    padding:calc(var(--bar) + 14px) 26px 26px max(26px,calc((100vw - 1560px) / 2));overflow:hidden;overflow:clip;background:radial-gradient(60% 50% at 72% 44%,#fff,rgba(255,255,255,0) 70%),linear-gradient(180deg,#fff 0,#fff 54%,#eceef2 100%)}
  .build:not([data-full]) .choices{position:relative;grid-column:1;grid-row:1;min-height:0;max-height:none;margin:0;padding:18px 24px 0;overflow-y:auto;overscroll-behavior:contain;border-radius:30px;border:5px solid transparent;
    background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.86)) padding-box,linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0) 28%,rgba(0,0,0,.12) 64%,rgba(255,255,255,.4)) border-box,linear-gradient(90deg,#c6cad1,#f8f9fa 13%,#bfc3cb 29%,#eef0f3 47%,#b6bac2 65%,#f3f4f6 83%,#c6cad1) border-box;
    box-shadow:0 0 0 1px rgba(14,18,28,.1),inset 0 1px 0 #fff,0 40px 60px -40px rgba(22,30,48,.5)}
  /* the CRM: the real app standing in the same photographed pane of glass on steel as the picture of it (assets/frame.webp, cut in nine) */
  .build:not([data-full]) .crm{position:relative;top:0;grid-column:2;grid-row:1;display:block;height:auto;min-height:0;padding:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .build:not([data-full]) .crm::before{content:"";position:absolute;inset:0 0 -86px;border:solid transparent;border-width:40px 74px 174px 72px;border-image:url(assets/frame.webp) 47 87 204 85 stretch;pointer-events:none;
    -webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent)}
  .build:not([data-full]) .b-shot{position:absolute;inset:40px 74px 88px 72px;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(14,18,28,.16)}
  .build:not([data-full]) .fit{position:absolute;inset:0;border-radius:0}
  .build:not([data-full]) .b-bar{position:fixed;right:24px;top:10px;z-index:61;min-height:32px;padding:0}
  .build:not([data-full]) .s-top{padding-top:0}
  .build:not([data-full]) .s-pane{padding-top:18px}
  .build:not([data-full]) .b-part.s-pane h2{font-size:clamp(1.9rem,2.7vw,2.7rem);line-height:1.02;letter-spacing:-.038em;text-wrap:balance}
  .build:not([data-full]) .s-why{max-width:60ch}
  .build:not([data-full]) .s-nav{position:sticky;bottom:0;margin-top:8px;padding:16px 0 18px;background:linear-gradient(rgba(255,255,255,0),rgba(253,253,254,.97) 30%)}
  .build:not([data-full]) .s-nav #s-next{flex:0 0 auto;min-width:190px;margin-left:auto}
  .build:not([data-full]) .b-note{bottom:auto;top:calc(var(--bar) + 30px)}
  /* the stages read back as chips to run an eye along, not a tall list */
  .build:not([data-full]) .s-read{flex-direction:row;flex-wrap:wrap;gap:8px;padding:0;background:none;border-radius:0}
  .build:not([data-full]) .s-read li{min-height:40px;padding:8px 14px;border:1px solid rgba(14,18,28,.1);border-radius:99px;background:#fff;gap:8px}
  .build:not([data-full]) .s-read li + li{border-top:1px solid rgba(14,18,28,.1)}
  .build:not([data-full]) .s-read li::before{width:auto}
}

/* batch 2 (11 Nov 2026): a field's own settings, opened under its row by More: shown, must be filled in, what it holds, and its choices */
.b-sub{display:grid;gap:10px;justify-items:start;padding:10px 0 16px 14px;border-bottom:1px solid var(--line);border-left:2px solid var(--line-2)}
.b-sub > *{width:100%}
.b-sub .b-tog{justify-content:flex-start;justify-self:start;width:auto}
.b-sub h4{margin:4px 0 0;color:var(--soft);font:600 12px/1.3 var(--text);letter-spacing:-.01em}
.b-sub .b-rows .b-row{min-height:46px}
.b-sub .b-fine{margin-top:0}
.b-row .b-text{flex:none;min-height:36px;padding:0 2px 0 8px;font-size:13px}
#tabs-away .b-chip{flex:none}
#h-away{margin-top:18px}