/* ==========================================================================
   TURBOLAZER TEAM STICK BUILDER · builder.css
   Game Tape design system: Carbon surfaces, magenta ink, cyan electric.
   Loaded after main.css. All classes namespaced b- or wiz- to avoid
   collisions with global styles.
   ========================================================================== */

/* ============ HERO STRIP ============ */
.b-hero{background:var(--void);padding:34px 0 26px;border-bottom:1px solid rgba(217,217,217,.1)}
.b-hero .display{font-size:clamp(30px,4.6vw,52px);margin-top:12px}
.b-hero .sub{margin-top:10px}

/* ============ SHELL ============ */
.b-shell{
  display:grid;grid-template-columns:minmax(360px,440px) 1fr;
  gap:28px;align-items:start;padding-block:28px 72px;
}
/* roster step: the table needs the width more than the render does, so the
   panel takes the wide track and the preview shrinks to a compact card */
@media (min-width:981px){
  .b-shell.is-roster{grid-template-columns:1fr minmax(280px,320px)}
  .b-shell.is-roster .b-stage{min-height:280px;height:38vh}
  .b-shell.is-roster .b-stage-hint{display:none}
}
@media (max-width:980px){
  .b-shell{grid-template-columns:1fr}
  .b-stage-wrap{position:relative;top:auto}
}

/* ============ STAGE (3D) ============ */
.b-stage-wrap{position:sticky;top:84px}
.b-stage{
  position:relative;background:
    radial-gradient(120% 90% at 50% 30%, var(--carbon) 0%, var(--void) 70%);
  border:1px solid rgba(217,217,217,.12);
  min-height:520px;height:min(66vh,640px);overflow:hidden;
}
@media (max-width:980px){.b-stage{min-height:340px;height:44vh}}
.b-stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.b-stage canvas:active{cursor:grabbing}
.b-stage-corner{
  position:absolute;top:12px;left:14px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-label);color:var(--ice);
  display:flex;align-items:center;gap:8px;pointer-events:none;
}
.b-stage-corner::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--magenta);box-shadow:0 0 8px var(--magenta);
  animation:b-blink 2.2s infinite}
@keyframes b-blink{0%,100%{opacity:1}50%{opacity:.35}}
.b-stage-hint{
  position:absolute;bottom:10px;right:14px;font-size:11px;color:rgba(217,217,217,.55);
  pointer-events:none;text-transform:uppercase;letter-spacing:var(--track-label);
}
.b-zone-flag{
  position:absolute;top:12px;right:14px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-label);
  background:rgba(3,3,3,.8);color:var(--cyan);padding:6px 12px;
  border:1px solid rgba(9,225,255,.4);pointer-events:none;opacity:0;
  transform:skewX(calc(-1 * var(--slant)));transition:opacity .18s var(--ease);
}
.b-zone-flag>span{display:inline-block;transform:skewX(var(--slant))}
.b-zone-flag.on{opacity:1}
/* narrow screens: stack the zone badge below the Live preview pill so the
   two never collide */
@media (max-width:640px){
  .b-zone-flag{top:38px;right:auto;left:14px}
}

/* camera view presets: Full, Blade, Name */
.b-views{position:absolute;bottom:10px;left:14px;display:flex;gap:6px;z-index:5}
.b-view-btn{
  font-family:var(--font);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--grey);cursor:pointer;
  background:rgba(3,3,3,.75);border:1px solid rgba(217,217,217,.28);
  padding:7px 11px;transform:skewX(calc(-1 * var(--slant)));
  transition:color .13s var(--ease),border-color .13s var(--ease),background .13s var(--ease);
}
.b-view-btn>span{display:inline-block;transform:skewX(var(--slant))}
.b-view-btn:hover{color:var(--white);border-color:var(--cyan)}
.b-view-btn[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:#000}
.b-stage.no-webgl .b-views{display:none}

/* SVG fallback when WebGL is unavailable */
.b-fallback{display:none;width:100%;height:100%;align-items:center;justify-content:center;padding:24px}
.b-fallback svg{max-width:100%;max-height:100%}
.b-stage.no-webgl canvas{display:none}
.b-stage.no-webgl .b-fallback{display:flex}

/* ============ PRICE BAR ============ */
.b-price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;
  background:var(--void);border:1px solid rgba(217,217,217,.12);border-top:0;
  padding:14px 18px;
}
.b-price .pk{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--grey)}
.b-price .pv{font-weight:var(--tl-weight-display);font-style:italic;font-size:20px;color:var(--white)}
.b-price .pv.total{font-size:28px;color:var(--magenta-text)}
.b-price .pnote{flex-basis:100%;font-size:12px;color:var(--grey);margin:0}
.b-price .pnote.warn{color:var(--cyan)}

/* ============ WIZARD RAIL ============ */
.wiz-rail{
  list-style:none;display:flex;gap:12px;padding:0;margin:0 0 18px;/* VIS-12: must exceed twice the 4.4px skew overhang */
  counter-reset:wstep;flex-wrap:wrap;
}
.wiz-rail button{
  counter-increment:wstep;
  font-family:var(--font);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--grey);
  background:transparent;border:1px solid rgba(217,217,217,.22);cursor:pointer;
  padding:9px 12px;transform:skewX(calc(-1 * var(--slant)));
  transition:color .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease);
}
.wiz-rail button>span{display:inline-block;transform:skewX(var(--slant))}
.wiz-rail button>span::before{content:counter(wstep) " ";color:var(--cyan);font-style:italic}
.wiz-rail button:hover{color:var(--white);border-color:var(--cyan)}
.wiz-rail button[aria-current="step"]{
  background:var(--magenta);color:#000;border-color:var(--magenta);
}
.wiz-rail button[aria-current="step"]>span::before{color:#000}
.wiz-rail button.done{border-color:rgba(9,225,255,.5);color:var(--ice)}

/* ============ PANEL / STEPS ============ */
.b-panel,.b-stage-wrap{min-width:0}
.b-panel{background:var(--carbon)}
.wiz-step{display:none;border:1px solid rgba(217,217,217,.12);padding:22px 20px 26px;background:var(--void)}
.wiz-step.active{display:block;animation:b-in .28s var(--ease)}
@keyframes b-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wiz-step h2{font-size:20px;font-weight:var(--tl-weight-display);font-style:italic;text-transform:uppercase;margin:0 0 4px}
.wiz-step .lede{color:var(--grey);font-size:14px;margin:0 0 18px;max-width:52ch}

.wiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.wiz-nav .btn{min-width:120px;text-align:center}

/* ============ CUSTOM SELECTS ============
   No native light chrome inside the dark UI: flat dark surface plus an
   embedded cyan chevron, matching the segmented Kick Point buttons. */
.b-field select,.b-roster select,.b-preview-player select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:var(--carbon);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2309E1FF' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:10px 6px;
  padding-right:28px;border-radius:0;
}
.b-field select option,.b-roster select option,.b-preview-player select option{
  background:var(--carbon);color:var(--white);
}

/* ============ STEP 1 · SPORT CARDS ============ */
.b-sports{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.b-sports{grid-template-columns:1fr}}
.b-sport{
  font-family:var(--font);cursor:pointer;text-align:left;
  background:var(--carbon);border:1.5px solid rgba(217,217,217,.22);
  color:var(--white);padding:18px 16px;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.b-sport:hover{border-color:var(--cyan)}
.b-sport[aria-pressed="true"]{border-color:var(--magenta);box-shadow:4px 4px 0 var(--magenta)}
.b-sport .sp-name{display:block;font-size:18px;font-weight:var(--tl-weight-display);font-style:italic;text-transform:uppercase}
.b-sport .sp-meta{display:block;margin-top:6px;font-size:12px;color:var(--cyan);font-weight:700}
.b-sport .sp-note{display:block;margin-top:8px;font-size:12.5px;color:var(--grey);line-height:1.5}

/* ============ STEP 2 · SPECS ============ */
.b-specs{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
@media (max-width:460px){.b-specs{grid-template-columns:1fr}}
.b-field{display:flex;flex-direction:column;gap:6px}
.b-field.full{grid-column:1 / -1}
.b-field label{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--ice)}
.b-field select,.b-field input[type="text"],.b-field input[type="number"]{
  font-family:var(--font);font-size:14px;color:var(--white);
  background-color:var(--carbon);border:1.5px solid rgba(217,217,217,.3);
  padding:10px 12px;width:100%;border-radius:0;
}
.b-field select:focus,.b-field input:focus{
  border-color:var(--cyan);outline:none;box-shadow:0 0 0 2px rgba(9,225,255,.35);
}
.b-seg{display:flex;flex-wrap:wrap;gap:6px}
.b-seg button{
  font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;
  color:var(--grey);background:var(--carbon);
  border:1.5px solid rgba(217,217,217,.25);padding:8px 13px;
  transition:all .13s var(--ease);
}
.b-seg button:hover{border-color:var(--cyan);color:var(--white)}
.b-seg button[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:#000}

/* kick point explainer: fills the specs card's dead band with something a
   first-time buyer actually needs */
.b-kick{margin-top:20px;border:1px solid rgba(217,217,217,.14);background:var(--carbon);padding:14px 16px}
.b-kick-h{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--ice);margin:0 0 10px}
.b-kick-row{display:flex;gap:18px;align-items:center}
.b-kick-svg{flex:none;width:112px;height:auto}
.b-kick-list{list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--grey);
  display:flex;flex-direction:column;gap:6px;line-height:1.5}
.b-kick-list strong{color:var(--white)}
@media (max-width:460px){.b-kick-row{flex-direction:column;align-items:flex-start}}

/* ============ STEP 3 · COLOURS ============ */
.b-zones{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
.b-zone-btn{
  display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;text-align:left;
  font-family:var(--font);font-size:13px;font-weight:700;color:var(--white);
  background:var(--carbon);border:1.5px solid rgba(217,217,217,.18);
  padding:10px 14px;transition:border-color .13s var(--ease);
}
.b-zone-btn:hover{border-color:var(--cyan)}
.b-zone-btn[aria-pressed="true"]{border-color:var(--magenta);box-shadow:inset 3px 0 0 var(--magenta)}
.b-zone-btn .z-dot{
  width:20px;height:20px;flex:none;border:1.5px solid rgba(255,255,255,.5);
  transform:skewX(calc(-1 * var(--slant)));transition:background .2s var(--ease);
}
.b-zone-btn .z-cur{margin-left:auto;font-size:11px;font-weight:400;color:var(--grey);text-transform:capitalize}
.b-swatch-h{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--ice);margin:0 0 8px}
.b-swatches{display:flex;flex-wrap:wrap;gap:8px}
.b-swatch{
  width:34px;height:34px;cursor:pointer;border:1.5px solid rgba(255,255,255,.35);
  transform:skewX(calc(-1 * var(--slant)));padding:0;
  transition:transform .12s var(--ease),box-shadow .12s var(--ease);
}
.b-swatch:hover{transform:skewX(calc(-1 * var(--slant))) translateY(-2px)}
.b-swatch:active{transform:skewX(calc(-1 * var(--slant))) translateY(0) scale(.92)}
.b-swatch[aria-pressed="true"]{
  border-color:var(--white);box-shadow:0 0 0 2px var(--carbon),0 0 0 4px var(--cyan);
}
.b-onescheme{margin-top:16px;font-size:12px;color:var(--grey);border-left:3px solid var(--magenta);padding-left:12px}

/* ============ STEP 4 · ROSTER ============ */
.b-roster-scroll{overflow-x:auto;margin-inline:-4px;padding-inline:4px}
.b-roster{width:100%;border-collapse:collapse;min-width:520px}
.b-roster th{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--ice);text-align:left;padding:6px 6px;border-bottom:1px solid rgba(217,217,217,.2);
}
.b-roster td{padding:4px 3px;border-bottom:1px solid rgba(217,217,217,.08)}
.b-roster input,.b-roster select{
  font-family:var(--font);font-size:13px;color:var(--white);width:100%;
  background-color:var(--carbon);border:1px solid rgba(217,217,217,.22);padding:7px 8px;border-radius:0;
}
/* explicit column floors: no truncated select values at desktop widths */
.b-roster select{min-width:104px}
.b-roster td:nth-child(2) input{min-width:150px}
.b-roster input:focus,.b-roster select:focus{
  border-color:var(--cyan);outline:none;box-shadow:0 0 0 2px rgba(9,225,255,.3);
}
.b-roster .col-num input{width:56px;min-width:0}
.b-roster tr.picked td{background:rgba(9,225,255,.06)}
.b-row-del{
  font-family:var(--font);background:none;border:0;color:var(--grey);cursor:pointer;
  font-size:16px;line-height:1;padding:6px 8px;
}
.b-row-del:hover{color:var(--magenta-text)}
.b-roster-tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:center}
.b-count{font-size:12px;color:var(--grey)}
.b-count strong{color:var(--white)}
.b-count.short strong{color:var(--magenta-text)}
.b-paste{margin-top:14px;border:1px dashed rgba(217,217,217,.3);padding:0}
.b-paste summary{
  cursor:pointer;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--cyan);padding:10px 14px;
}
.b-paste-inner{padding:0 14px 14px}
.b-paste textarea{
  width:100%;min-height:96px;font-family:ui-monospace,Menlo,monospace;font-size:12px;
  background:var(--carbon);color:var(--white);border:1px solid rgba(217,217,217,.25);padding:10px;
}
.b-paste textarea:focus{border-color:var(--cyan);outline:none}
.b-paste .hint{font-size:12px;color:var(--grey);margin:8px 0}
.b-preview-player{margin-top:14px;font-size:12px;color:var(--grey)}
.b-preview-player select{
  font-family:var(--font);font-size:12px;background-color:var(--carbon);color:var(--white);
  border:1px solid rgba(217,217,217,.25);padding:6px 8px;margin-left:8px;
}

/* ============ STEP 5 · REVIEW ============ */
.b-review dl{margin:0 0 4px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13.5px}
.b-review dt{font-weight:700;color:var(--ice);text-transform:uppercase;font-size:11px;
  letter-spacing:var(--track-label);padding-top:2px;white-space:nowrap}
.b-review dd{margin:0;color:var(--white)}
.b-review .rv-colours span{display:inline-flex;align-items:center;gap:6px;margin-right:14px;white-space:nowrap}
.b-review .rv-colours i{width:12px;height:12px;display:inline-block;border:1px solid rgba(255,255,255,.4);
  transform:skewX(calc(-1 * var(--slant)))}
.b-review-total{
  margin:16px 0;padding:14px 16px;background:var(--carbon);
  border:1px solid rgba(217,217,217,.15);
}
.b-review-total .t{font-size:26px;font-weight:var(--tl-weight-display);font-style:italic;color:var(--magenta-text)}
.b-review-total .n{font-size:12px;color:var(--grey);margin-top:2px}
.b-review-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.b-copied{font-size:12px;color:var(--cyan);align-self:center;opacity:0;transition:opacity .2s}
.b-copied.show{opacity:1}
.b-review .rv-roster{font-size:12.5px;color:var(--grey);line-height:1.7}
.b-fine{font-size:12px;color:var(--grey);margin-top:16px}

/* ============ MOBILE: PREVIEW RIDES ON TOP ============
   Below 768px the 3D preview becomes a sticky strip pinned under the site
   header, so every swatch tap repaints in view. The step panel scrolls
   beneath it. */
@media (max-width:768px){
  /* align-items:start from the desktop grid rule would shrink-to-fit flex
     children to their max-content width (the roster table's 520px floor)
     and overflow the page: stretch restores full-width panels */
  .b-shell{display:flex;flex-direction:column;gap:18px;padding-block:16px 56px;align-items:stretch}
  .b-stage-wrap{
    order:-1;position:sticky;top:64px;z-index:60;
    margin-inline:calc(-1 * var(--gut));
  }
  .b-stage{min-height:200px;height:36vh;max-height:40vh}
  /* one compact stat row, long note hidden: the sticky preview block stays
     under half the viewport so the controls keep the rest */
  .b-price{flex-wrap:nowrap;align-items:baseline;justify-content:space-between;padding:6px 12px;gap:10px}
  .b-price .pk{font-size:9px}
  .b-price .pv{font-size:14px}
  .b-price .pv.total{font-size:16px}
  .b-price .pnote{display:none}
  .b-views{bottom:8px;left:10px}
  .b-view-btn{padding:6px 9px}
  .b-stage-hint{display:none}
  /* static floor for the sticky preview offset; builder.js measures the
     real pinned height on each step change and overrides this inline */
  .wiz-step{scroll-margin-top:370px}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .wiz-step.active{animation:none}
  .b-stage-corner::before{animation:none}
}

/* Review handoff notices. The gate blocks an order with nobody on it (BLD-04);
   the cap warns when the roster is too long to survive a mailto (BLD-05). */
.b-gate {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--magenta);
  background: rgba(236, 0, 140, .10);
  font-size: 14px;
  line-height: 1.45;
  color: #fff;
}
.b-gate--cap { border-left-color: var(--cyan); background: rgba(0, 174, 239, .10); }
.b-gate.flash { animation: bgateflash .7s ease; }
@keyframes bgateflash { 0%, 100% { background: rgba(236, 0, 140, .10); } 40% { background: rgba(236, 0, 140, .34); } }
@media (prefers-reduced-motion: reduce) { .b-gate.flash { animation: none; } }
.btn.is-blocked { opacity: .55; cursor: not-allowed; }

/* UX-04. At 390 the roster table is 602px inside a 309px scroller. Scrolled
   right to reach Hand, Size and Flex, the row number and Name columns leave the
   viewport entirely, and with sixteen identical default rows there is nothing
   left to tell you whose stick you are fitting. Freeze the two identity columns
   so the player stays on screen while their fit is being set. */
@media (max-width:700px){
  .b-roster-scroll{position:relative}
  .b-roster th:nth-child(1),
  .b-roster td:nth-child(1),
  .b-roster th:nth-child(2),
  .b-roster td:nth-child(2){
    position:sticky;
    background:var(--void);
    z-index:2;
  }
  .b-roster th:nth-child(1),
  .b-roster td:nth-child(1){left:0;width:24px;min-width:24px;padding-left:0}
  .b-roster th:nth-child(2),
  .b-roster td:nth-child(2){left:24px}
  /* the name column carries the freeze, so it does not need the desktop floor */
  .b-roster td:nth-child(2) input{min-width:0;width:112px}
  .b-roster th:nth-child(2)::after,
  .b-roster td:nth-child(2)::after{
    content:"";position:absolute;top:0;right:-8px;bottom:0;width:8px;
    background:linear-gradient(90deg,rgba(3,3,3,.55),rgba(3,3,3,0));
    pointer-events:none;
  }
  .b-roster tr.picked td:nth-child(1),
  .b-roster tr.picked td:nth-child(2){background:#0b1417}
}

/* COM-04: team identity, asked for on the build step instead of discovered
   inside the mail client. */
.b-team{border:1px solid rgba(217,217,217,.18);padding:14px 14px 12px;margin:0 0 18px}
.b-team legend{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--cyan);padding:0 6px;
}
.b-team-grid{display:grid;gap:6px 12px}
@media (min-width:720px){.b-team-grid{grid-template-columns:auto 1fr;align-items:center}}
.b-team-grid label{font-size:12px;color:var(--ice)}
.b-team-grid input{
  font-family:var(--font);font-size:14px;color:var(--white);width:100%;
  background-color:var(--carbon);border:1px solid rgba(217,217,217,.22);padding:8px 10px;
}
.b-team-grid input:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 2px rgba(9,225,255,.3)}
.b-opt{color:var(--grey);font-weight:400;text-transform:none;letter-spacing:0}
.b-team-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--grey)}

/* UX-03: same panel treatment the kick-point decoder already gets. */
.b-curve p{margin:0 0 8px;font-size:13px;line-height:1.55;color:var(--ice)}
.b-curve p:last-child{margin-bottom:0}
.b-curve strong{color:var(--white)}

/* BLD-08 import report and BLD-09 duplicate warning. */
.b-report{
  margin-top:10px;padding:10px 12px;font-size:12px;line-height:1.5;
  border-left:3px solid var(--cyan);background:rgba(9,225,255,.08);color:var(--ice);
}
.b-report-h{margin:0 0 6px;font-weight:700;color:var(--white)}
.b-report ul{margin:0;padding-left:16px}
.b-report li{margin:2px 0}
.b-dupe{display:block;margin-top:4px;color:var(--magenta-text);font-weight:700}

/* UX-10: unnamed rows, marked where they can be fixed. */
.b-roster tr.unnamed td:nth-child(2) input{border-color:rgba(236,0,140,.55)}
.b-roster tr.unnamed td:nth-child(1){color:var(--magenta-text);font-weight:700}

/* COM-09: a team build has no goalie fit. */
.b-goalie{
  margin:0 0 12px;padding:10px 12px;font-size:12px;line-height:1.5;
  border-left:3px solid var(--grey);background:rgba(217,217,217,.06);color:var(--ice);
}


/* PERF-09: .wiz-nav shifted the panel by 0.049 CLS at 390 as the Next button's
   label changed length between steps. Reserve the row. */
.wiz-nav{min-height:48px}