/* WORKSHOP: the ship workshop (13-workshop.js): Home (templates, saved designs), the Editor (hull chips, the ship stage
 * with six 56 px callouts, the socket panel, the sticky Test / Fly bar), its sheets, the test's HUD, and in a run the
 * socket strip (pause, level-up), a new weapon card's socket line and Launch's ship row. Touch sizes 44 px and up; one
 * column on a phone; no horizontal scroll at 390 px. */
#sWorkshop{align-items:start}
.wsbox{text-align:left;width:min(1040px,100%);padding:20px}
.wsbox h2{margin:0 0 4px}
.wsbox h3{margin:18px 0 10px}
.wsbox p{margin:0}
.wsbox .btn{min-height:48px;font-size:15px;padding:0 16px}
.wsbox .btn.primary{font-size:16px}
.wsbox .btn:disabled{opacity:.42;cursor:default;transform:none;box-shadow:none}
.wsbox .btn.primary:disabled{filter:grayscale(.6)}
.ws-glyph{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ws-wicon{width:22px;height:22px;flex:none;object-fit:contain}
.ws-soon{display:inline-grid;place-items:center;border-radius:6px;border:1px dashed var(--line);font-size:12px;font-weight:700;color:var(--dim)}
.ws-plus{font-size:18px;line-height:1;color:var(--faint)}
.ws-cost{display:inline-flex;gap:3px;align-items:center;min-height:6px}
.ws-cost i{width:6px;height:6px;border-radius:50%;background:var(--bronze)}
.ws-cost span{font-size:11px;color:var(--dim)}
.ws-lab{font-size:13px;color:var(--dim);margin-right:2px}
.ws-link{min-height:44px;padding:0 4px;color:var(--cyan);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ws-msg{font-size:13px;color:var(--dim);line-height:1.45;margin-top:8px!important}
.ws-badge{display:inline-block;justify-self:start;font-style:normal;font-size:12px;line-height:1.3;color:var(--orange);border:1px solid rgba(255,176,61,.45);border-radius:999px;padding:2px 8px}
.ws-tip{font-size:13px;line-height:1.45;color:var(--dim);margin:6px 0 0!important}
.wsbox .warn,.ws-launch .warn{color:var(--orange)!important}

/* ---- Home ---- */
.ws-head{display:flex;align-items:flex-start;gap:14px}
.ws-head>div{min-width:0}
.ws-sub{font-size:15px;color:var(--ink)}
.ws-backbtn{flex:none}
.ws-tpls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ws-tpl{display:grid;grid-template-rows:auto 1fr;gap:8px;min-width:0;padding:8px;border:2px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);text-align:left;
  transition:border-color .15s,background-color .15s}
.ws-tpl:hover,.ws-tpl:focus-visible{border-color:var(--cyan);background:rgba(61,242,255,.05);outline:none}
.ws-mini{display:block;width:100%;aspect-ratio:1/1;border-radius:11px;background:#060b14}
.ws-tpl-t{display:grid;gap:4px;align-content:start;min-width:0}
.ws-tpl-t b{font-size:16px;line-height:1.2}
.ws-chipline{font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--bronze)}
.ws-line{font-size:13px;line-height:1.35;color:var(--dim)}
.ws-designs{display:grid;gap:8px}
.ws-drow{display:flex;align-items:center;gap:10px;min-height:64px;padding:8px 10px;border:1px solid var(--line2);border-radius:14px;background:rgba(255,255,255,.02)}
.ws-drow.on{border-color:var(--bronze);background:rgba(243,196,142,.06)}
.ws-drow.empty{border-style:dashed;color:var(--faint);font-size:14px}
.ws-drow.ws-unsaved{border-color:rgba(61,242,255,.35)}
.ws-dinfo{display:grid;gap:2px;flex:1;min-width:0}
.ws-dinfo b{font-size:15px;overflow-wrap:anywhere}
.ws-dinfo span{font-size:13px;color:var(--dim)}
.ws-slotn{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px dashed var(--line);font-size:13px;flex:none}
.ws-more{min-width:48px;padding:0!important;font-size:20px!important}
.ws-dmenu{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px 18px}
.ws-danger{color:var(--orange)}
.ws-import{margin-top:12px}
.ws-import label{display:block;font-size:13px;color:var(--dim);margin-bottom:6px}
.ws-import-row{display:flex;gap:8px}
.ws-import input,.ws-code{flex:1;min-width:0;width:100%;min-height:48px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:#0b1423;color:var(--ink);font:14px ui-monospace,Menlo,Consolas,monospace;
  -webkit-user-select:text;user-select:text}

/* ---- the Editor ---- */
.ws-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center}
.ws-name{width:100%;min-width:0;min-height:48px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:#0b1423;color:var(--ink);font:600 17px var(--font);
  -webkit-user-select:text;user-select:text}
.ws-name:focus{border-color:var(--cyan);outline:none}
.ws-points{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;font-weight:600;color:var(--ink)}
.ws-pips{display:inline-flex;gap:4px}
.ws-pips i{width:11px;height:11px;border-radius:50%;border:2px solid var(--bronze)}
.ws-pips i.on{background:var(--bronze)}
.ws-result{position:relative;margin:12px 0 0;padding:12px 48px 12px 14px;border:1px solid rgba(61,242,255,.5);border-radius:14px;background:rgba(61,242,255,.06)}
.ws-result b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin-bottom:4px}
.ws-result p{font-size:16px;color:var(--ink)}
.ws-rbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ws-x{position:absolute;top:6px;right:6px;width:40px;height:40px;border-radius:10px;font-size:20px;color:var(--dim)}
.ws-x:hover,.ws-x:focus-visible{color:var(--ink);background:rgba(255,255,255,.06)}
.ws-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:10px 0 0;padding:8px 12px;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.04);font-size:14px;color:var(--ink)}
.ws-hulls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 10px}
.ws-hullchip{display:grid;gap:2px;align-content:center;min-height:56px;padding:6px 10px;border:2px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);text-align:left;min-width:0}
.ws-hullchip b{font-size:15px}
.ws-hullchip small{font-size:12px;color:var(--dim)}
.ws-hullchip em{font-style:normal;font-size:11px;color:var(--orange)}
.ws-hullchip.on{border-color:var(--cyan);background:rgba(61,242,255,.08)}
.ws-hullchip:hover,.ws-hullchip:focus-visible{border-color:var(--cyan);outline:none}
.ws-doctrine{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.ws-main{display:grid;gap:12px}
.ws-stagecol{min-width:0}
.ws-ship{position:relative;width:100%;max-width:440px;aspect-ratio:1/1;margin:0 auto}
#wsPreview{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:16px;border:1px solid var(--line2);background:#060b14}
.ws-socks{position:absolute;inset:0;pointer-events:none;z-index:2}
.ws-sock{position:absolute;width:56px;height:56px;transform:translate(-50%,-50%);display:grid;grid-template-rows:18px 24px 6px;justify-items:center;align-content:center;gap:0;
  border-radius:14px;border:2px solid rgba(160,170,210,.5);background:rgba(8,12,26,.92);color:var(--dim);pointer-events:auto;box-shadow:0 4px 14px rgba(0,0,0,.5);
  transition:border-color .15s,box-shadow .15s}
.ws-sock.free{border-style:dashed}
.ws-sock.bad{border-color:var(--orange)}
.ws-sock.on{border-color:var(--cyan);border-style:solid;color:var(--ink);box-shadow:0 0 0 3px rgba(61,242,255,.28),0 0 20px rgba(61,242,255,.35)}
.ws-sock:hover,.ws-sock:focus-visible{border-color:var(--cyan);outline:none}
.ws-sk-part{display:flex;align-items:center;gap:2px;line-height:1}
.ws-arrow{font-style:normal;font-size:13px;font-weight:700;color:var(--cyan)}
.ws-star{position:absolute;top:-9px;right:-9px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bronze);color:#1a0d02;font-size:12px}
.ws-cover{margin:10px auto 0!important;max-width:440px;font-size:14px;line-height:1.45;color:var(--dim);text-align:center}
.ws-sockpanel{min-width:0}
.ws-sockhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.wsbox .ws-sockhead h3{margin:0;font:700 20px/1.2 var(--font);letter-spacing:0;text-transform:none;color:var(--ink)}
.ws-hint{font-size:12px;color:var(--faint)}
.ws-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.ws-partchip{display:grid;gap:4px;align-content:start;min-width:0;min-height:68px;padding:8px 10px;border:2px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);color:var(--ink);text-align:left}
.ws-partchip small{font-size:12px;line-height:1.3;color:var(--dim)}
.ws-partchip.on{border-color:var(--cyan);background:rgba(61,242,255,.09)}
.ws-partchip:not(:disabled):hover,.ws-partchip:focus-visible{border-color:var(--cyan);outline:none}
.ws-partchip:disabled{opacity:.55;cursor:default}
.ws-partchip:disabled small{color:var(--orange)}
.ws-pt{display:flex;align-items:center;gap:6px;min-width:0}
.ws-pt b{flex:1;min-width:0;font-size:14px}
.ws-dirs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0;min-height:44px}
.ws-dir{width:52px;height:44px;border-radius:10px;border:2px solid var(--line);font-size:20px;font-weight:700;color:var(--dim)}
.ws-dir.on{border-color:var(--cyan);color:var(--cyan);background:rgba(61,242,255,.08)}
.ws-dir:hover,.ws-dir:focus-visible{border-color:var(--cyan);color:var(--ink);outline:none}
.ws-planrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.ws-planbtn{display:flex;align-items:center;gap:10px;flex:1 1 200px;min-width:0;min-height:52px;padding:0 12px;border:2px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);text-align:left}
.ws-planbtn b{flex:1;min-width:0;font-size:15px}
.ws-planbtn:hover,.ws-planbtn:focus-visible{border-color:var(--cyan);outline:none}
.ws-caret{color:var(--dim)}
.wsbox .ws-small,.ws-sheet .ws-small{min-height:44px;font-size:14px;padding:0 12px}
.ws-say{margin:10px 0 4px!important;padding:10px 12px;border-left:3px solid var(--cyan);border-radius:0 10px 10px 0;background:rgba(61,242,255,.05);font-size:16px;line-height:1.45;color:var(--ink)}
.ws-say.warn{border-left-color:var(--orange);background:rgba(255,176,61,.07);color:var(--ink)!important}
.ws-bar{position:sticky;bottom:calc(-16px - var(--sb));z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:16px -20px -20px;padding:10px 20px calc(16px + var(--sb));
  border-top:1px solid var(--line2);border-radius:0 0 20px 20px;background:#0a0a1a}
.ws-bar::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:18px;background:linear-gradient(rgba(10,10,26,0),#0a0a1a);pointer-events:none}
.ws-status{flex:1 1 220px;font-size:13px;line-height:1.4;color:var(--dim)}
.ws-barbtns{display:flex;gap:10px;flex:1 1 auto;justify-content:flex-end}
.wsbox .ws-barbtns .btn{min-height:52px}

/* ---- the sheets (one at a time, over a veil) ---- */
.ws-veil{position:fixed;inset:0;z-index:30;background:rgba(3,3,10,.62)}
.ws-sheet{position:fixed;z-index:31;left:50%;bottom:0;transform:translateX(-50%);width:min(600px,100%);max-height:84vh;overflow:auto;overscroll-behavior:contain;
  padding:14px 16px calc(18px + var(--sb));border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;background:#0c0d20;box-shadow:0 -12px 40px rgba(0,0,0,.5);text-align:left}
.ws-sheethead{position:sticky;top:-14px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0 8px;background:#0c0d20}
.wsbox .ws-sheethead h3{margin:0;font:700 18px/1.25 var(--font);letter-spacing:0;text-transform:none;color:var(--ink)}
.ws-sheet .btn{min-height:48px;font-size:15px;padding:0 16px}
.ws-sheetsub{font-size:13px;line-height:1.45;color:var(--dim);margin:6px 0 10px!important}
.ws-sec{margin:14px 0 6px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--bronze)}
.ws-picklist{display:grid;gap:6px}
.ws-pick{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 10px;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.02);text-align:left}
.ws-pick.on{border-color:var(--cyan);background:rgba(61,242,255,.07)}
.ws-pick:not(:disabled):hover,.ws-pick:focus-visible{border-color:var(--cyan);outline:none}
.ws-pick:disabled{opacity:.45;cursor:default}
.ws-pick-t{display:grid;gap:2px;flex:1;min-width:0}
.ws-pick-t b{font-size:15px}
.ws-pick-st{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.ws-pick-st.own{color:var(--green)}
.ws-pick-st.locked{color:var(--orange)}
.ws-pick-st.soon{color:var(--faint)}
.ws-pick-fit{font-size:13px;color:var(--ink)}
.ws-pick-x{font-size:12px;color:var(--dim)}
.ws-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}
.ws-toggle .ws-lab{flex:0 0 100%}
.ws-go{width:100%;margin-top:14px}
.ws-menulist{display:grid;gap:8px}
.ws-menulist .btn{width:100%;text-align:left}
.ws-sheet .ws-code{margin:4px 0 10px}

/* ---- the test's HUD ---- */
.ws-range-hud{position:fixed;z-index:6;bottom:calc(16px + var(--sb));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:8px 10px 8px 16px;
  border:1px solid var(--cyan);border-radius:14px;background:rgba(5,12,24,.9);font-size:14px;font-weight:600;white-space:nowrap}
.ws-range-hud .btn{min-height:44px;font-size:14px;padding:0 14px}

/* ---- in a run: the socket strip, a new weapon card's socket line; Launch's ship row ---- */
.ws-strip{padding:10px;border:1px solid var(--line2);border-radius:14px;background:rgba(255,255,255,.02);text-align:left}
.ws-strip-h{margin:0 0 8px!important;font-size:13px;color:var(--dim)}
.ws-strip-h b{color:var(--ink);margin-right:4px}
.ws-strip-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.ws-swapchip{display:grid;justify-items:center;align-content:center;gap:2px;min-width:0;min-height:66px;padding:6px 2px;border:2px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);font-size:11px}
.ws-swapchip .nm{font-weight:600;color:var(--ink);text-align:center;line-height:1.15}
.ws-swapchip .pt{color:var(--dim)}
.ws-swapchip.empty{border-style:dashed}
.ws-swapchip.on{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(61,242,255,.25)}
.ws-swapchip:hover,.ws-swapchip:focus-visible{border-color:var(--cyan);outline:none}
.ws-strip-say{min-height:1.3em;margin:8px 0 0!important;font-size:13px;color:var(--cyan)}
.card .ws-cardline{display:block;margin-top:2px;font-size:12px;font-weight:600;line-height:1.3;color:var(--cyan)}
@media (max-width:640px) and (orientation:portrait){.card .ws-cardline{grid-column:2}}
.ws-launch{text-align:left}
.ws-launch h3{margin:0 0 8px}
.ws-launch .xrow{justify-content:flex-start}
.ws-launchnote{margin:8px 0 0!important;font-size:13px;line-height:1.4;color:var(--dim)}

@media (min-width:900px){
  .ws-main{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:24px;align-items:start}
}
@media (max-width:700px){
  .wsbox{padding:14px}
  .ws-tpls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ws-hulls{gap:6px;margin:10px 0 8px}
  .ws-hullchip{min-height:48px;padding:4px 6px}
  .ws-hullchip b{font-size:14px}
  .ws-hullchip em{font-size:10px;line-height:1.2}
  .ws-blurb{display:none}
  /* the stage, then the socket's panel (its sentence first), then the cover line and anything under the stage */
  .ws-stagecol{display:contents}
  #wsShip{order:0}
  .ws-sockpanel{order:1}
  .ws-cover{order:2;margin-top:0!important}
  .ws-stagecol>*:not(#wsShip):not(.ws-cover){order:3}
  .ws-status:not(.warn){display:none}
  .ws-result{padding:10px 44px 10px 12px}
  .ws-result p{font-size:15px}
  .wsbox .ws-rbtns .btn{min-height:44px}
  .ws-top{grid-template-columns:auto minmax(0,1fr) auto}
  .ws-points{grid-column:1/-1;order:3}
  .ws-bar{margin:14px -14px -14px;padding:10px 14px calc(14px + var(--sb))}
  .ws-barbtns .btn{flex:1}
  .ws-range-hud{gap:8px;font-size:12px;max-width:94vw}
}
@media (max-width:520px){
  .ws-parts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ws-strip-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ws-drow{flex-wrap:wrap}
  .ws-drow .ws-dinfo{flex:1 1 calc(100% - 44px)}
  .ws-tpl-t b{font-size:15px}
}